/*
Theme Name: Stitcheria
Theme URI: https://stitcheria.it
Description: Child theme of Blocksy for Stitcheria - custom embroidery, digital designs and made-to-order work.
Author: Stitcheria
Template: blocksy
Version: 0.4.0
Text Domain: stitcheria
*/

/* ==========================================================================
   TOKENS
   Palette comes from the workshop, not from e-commerce convention: a petrol
   thread-teal as the single bold voice, muted brass for structure, on cool
   paper neutrals biased slightly green so they read as chosen. Boldness is
   spent in one place; everything else stays quiet.

   The recurring motif is a stitch line - a dashed rule, 2px, in brass or
   teal. It does structural work (dividers, step connectors, hover states)
   rather than decorating, which is why it earns its place.
   ========================================================================== */

:root {
	--st-paper:        #F4F5F2;
	--st-paper-raised: #FFFFFF;
	--st-paper-sunk:   #EAEDE8;

	--st-ink:          #14201E;
	--st-ink-muted:    #4B5A56;
	--st-ink-faint:    #6D7C77;
	--st-ink-invert:   #F2F6F4;

	--st-line:         #DCE1DA;
	--st-line-strong:  #BFC8C0;

	--st-thread:       #0F5257;
	--st-thread-deep:  #093A3E;
	--st-thread-wash:  #E3EDEC;
	--st-brass:        #8F6520;
	--st-brass-wash:   #F3EBDA;

	--st-ok:    #2F6B3F;
	--st-error: #95261F;

	--st-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--st-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--st-font-mono:    "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

	--st-s1: .5rem;  --st-s2: .875rem; --st-s3: 1.5rem;
	--st-s4: 2.5rem; --st-s5: 4rem;    --st-s6: 6rem;

	--st-radius: 6px;
	--st-measure: 34rem;
	--st-shell: 72rem;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
	background: var(--st-paper);
	color: var(--st-ink);
	font-family: var(--st-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.ct-container,
.ct-container-full > .entry-content,
[class*="ct-container"] { --container-max-width: var(--st-shell); }

h1, h2, h3, h4,
.entry-title, .page-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--st-font-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
	color: var(--st-ink);
}

a { color: var(--st-thread); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--st-thread-deep); }
:focus-visible { outline: 2px solid var(--st-thread); outline-offset: 3px; border-radius: 2px; }

.st-figure, .woocommerce-Price-amount, .st-step__n { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   EDITORIAL CONTENT - fixes every prose page at once
   ========================================================================== */

.entry-content > * { max-width: var(--st-measure); }
.entry-content > h2 { max-width: 30rem; }

.entry-content > h2 {
	font-size: clamp(1.65rem, 3vw, 2.1rem);
	margin: var(--st-s5) 0 var(--st-s2);
}
.entry-content > h2:first-child { margin-top: 0; }

.entry-content > h3 {
	font-size: 1.3rem;
	margin: var(--st-s4) 0 var(--st-s1);
}

.entry-content > h4 {
	font-family: var(--st-font-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--st-thread);
	margin: var(--st-s3) 0 var(--st-s1);
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol { margin: 0 0 var(--st-s3); color: var(--st-ink-muted); }
.entry-content > p > strong { color: var(--st-ink); }
.entry-content li { margin-bottom: .4rem; }
.entry-content li::marker { color: var(--st-brass); }

/* A long prose page (FAQ, legal) gets a stitch rule before each h2 so it
   scans as sections rather than an undifferentiated wall. */
.entry-content > h2:not(:first-child)::before {
	content: "";
	display: block;
	width: 100%;
	border-top: 2px dashed var(--st-line-strong);
	margin-bottom: var(--st-s4);
}

.entry-content table {
	width: 100%; max-width: none; border-collapse: collapse;
	font-size: .9rem; margin: var(--st-s3) 0;
	border: 1px solid var(--st-line); border-radius: var(--st-radius);
	overflow: hidden;
}
.entry-content th {
	text-align: left; background: var(--st-paper-sunk);
	font-family: var(--st-font-mono); font-size: .68rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-faint);
	padding: .7rem .9rem;
}
.entry-content td { padding: .65rem .9rem; border-top: 1px solid var(--st-line); }

/* ==========================================================================
   PAGE HEADER (inner pages) - hidden on the homepage, which brings its own
   ========================================================================== */

.home .hero-section,
.home .entry-header { display: none; }

.hero-section .page-title { font-size: clamp(2rem, 5vw, 3rem); }

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

.st-hero {
	max-width: none !important;
	padding: clamp(2rem, 6vw, var(--st-s6)) 0 var(--st-s5);
	border-bottom: 2px dashed var(--st-line-strong);
	margin-bottom: var(--st-s5);
}
.st-hero__eyebrow {
	font-family: var(--st-font-mono);
	font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--st-thread); margin: 0 0 var(--st-s3);
}
.st-hero h1 {
	font-size: clamp(2.5rem, 7vw, 4.25rem);
	line-height: 1.02; letter-spacing: -.025em;
	margin: 0 0 var(--st-s3); max-width: 16ch;
}
.st-hero h1 em { font-style: italic; color: var(--st-thread); }
.st-hero__lead {
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	color: var(--st-ink-muted); max-width: 38ch; margin: 0 0 var(--st-s4);
}
.st-actions { display: flex; flex-wrap: wrap; gap: var(--st-s2); max-width: none !important; }

.st-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .95rem; font-weight: 600; text-decoration: none;
	padding: .8rem 1.4rem; border-radius: var(--st-radius);
	border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.st-btn--solid { background: var(--st-thread); color: #fff; }
.st-btn--solid:hover { background: var(--st-thread-deep); color: #fff; }
.st-btn--ghost { border-color: var(--st-line-strong); color: var(--st-ink); background: transparent; }
.st-btn--ghost:hover { border-color: var(--st-thread); color: var(--st-thread); }

/* Three offers */
.st-offers {
	max-width: none !important;
	display: grid; gap: var(--st-s3);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-bottom: var(--st-s5);
}
.st-card {
	background: var(--st-paper-raised);
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	padding: var(--st-s3);
	display: flex; flex-direction: column;
	transition: border-color .18s ease, transform .18s ease;
}
.st-card:hover { border-color: var(--st-thread); transform: translateY(-2px); }
.st-card__label {
	font-family: var(--st-font-mono); font-size: .66rem;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--st-brass); margin: 0 0 var(--st-s1);
}
.st-card h3 { font-size: 1.35rem; margin: 0 0 var(--st-s1); }
.st-card p { color: var(--st-ink-muted); margin: 0 0 var(--st-s3); font-size: .96rem; flex: 1; }
.st-card a.st-more {
	font-weight: 600; font-size: .92rem; text-decoration: none;
	align-self: flex-start; border-bottom: 2px dashed currentColor; padding-bottom: 1px;
}

/* Process - the dashed connector is the stitch line running through the steps */
.st-steps { max-width: none !important; margin-bottom: var(--st-s5); }
.st-steps h2 { font-size: 1.5rem; margin: 0 0 var(--st-s3); }
.st-steps ol {
	list-style: none; margin: 0; padding: 0; max-width: none;
	display: grid; gap: var(--st-s3);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.st-step { position: relative; padding-top: var(--st-s3); border-top: 2px dashed var(--st-line-strong); }
.st-step__n {
	font-family: var(--st-font-mono); font-size: .7rem; letter-spacing: .14em;
	color: var(--st-brass); display: block; margin-bottom: .35rem;
}
.st-step p { margin: 0; font-size: .95rem; color: var(--st-ink-muted); max-width: none; }

/* Closing band - full bleed out of the constrained content column */
.st-band {
	max-width: none !important;
	margin-inline: calc(50% - 50vw);
	padding: var(--st-s5) max(1.25rem, calc(50vw - var(--st-shell) / 2));
	background: var(--st-thread);
	color: var(--st-ink-invert);
}
.st-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 var(--st-s2); max-width: 22ch; }
.st-band p { color: rgba(242,246,244,.85); max-width: 46ch; margin: 0; }

/* ==========================================================================
   WOOCOMMERCE
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; }
.woocommerce span.onsale { background: var(--st-brass); border-radius: var(--st-radius); }
.woocommerce .button, .wp-element-button, button.button {
	border-radius: var(--st-radius) !important;
	font-weight: 600;
}

.st-notice {
	border-left: 3px solid var(--st-thread);
	background: var(--st-thread-wash);
	padding: var(--st-s2) var(--st-s3);
	border-radius: 0 var(--st-radius) var(--st-radius) 0;
	margin: var(--st-s3) 0;
}
.st-notice p { margin: 0; font-size: .95rem; }
.st-notice--legal { border-left-color: var(--st-brass); background: var(--st-brass-wash); }
.stitcheria-digital-consent label { font-weight: 500; line-height: 1.5; }

/* ==========================================================================
   HEADER / FOOTER
   ========================================================================== */

.site-title a { font-family: var(--st-font-display); font-weight: 600; letter-spacing: -.02em; }
.ct-header [data-row="middle"] { border-bottom: 1px solid var(--st-line); }
.header-menu-1 .menu-item > a { font-size: .95rem; }

.ct-footer { border-top: 2px dashed var(--st-line-strong); background: var(--st-paper-sunk); }
.ct-footer-copyright { font-size: .85rem; color: var(--st-ink-faint); }
.ct-footer-copyright a { color: var(--st-ink-muted); }

/* ==========================================================================
   RESPONSIVE / MOTION
   ========================================================================== */

@media (max-width: 720px) {
	:root { --st-s5: 2.75rem; --st-s6: 3.5rem; }
	.st-hero { padding-top: var(--st-s4); }
	.st-actions .st-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.st-card:hover { transform: none; }
}

/* ==========================================================================
   LEGAL BAR - replaces Blocksy's theme credit with required identification
   ========================================================================== */

.ct-footer-copyright { display: none !important; }

.st-legalbar {
	background: var(--st-thread-deep);
	color: rgba(242,246,244,.78);
	font-size: .8rem;
	line-height: 1.6;
	padding: var(--st-s3) max(1.25rem, calc(50vw - var(--st-shell) / 2));
}
.st-legalbar__inner {
	display: flex; flex-wrap: wrap; gap: var(--st-s1) var(--st-s3);
	align-items: baseline; justify-content: space-between;
	max-width: var(--st-shell); margin: 0 auto;
}
.st-legalbar p { margin: 0; max-width: none; }
.st-legalbar strong { color: #fff; font-weight: 600; }
.st-legalbar a { color: rgba(242,246,244,.9); margin-right: var(--st-s2); text-decoration: none; border-bottom: 1px dashed rgba(242,246,244,.4); }
.st-legalbar a:hover { color: #fff; border-bottom-style: solid; }

/* Nothing may scroll the page sideways - the full-bleed band uses viewport
   units, so clip at the root rather than on body (body would break sticky). */
html { overflow-x: clip; }
/* ==========================================================================
   LEGAL ACCORDION
   Native <details>/<summary> - no JavaScript, keyboard-operable for free,
   and findable by in-page browser search even when collapsed in most engines.
   ========================================================================== */

.st-legal-intro { max-width: var(--st-measure); margin-bottom: var(--st-s4); }
.st-legal-intro p { color: var(--st-ink-muted); }

.st-accordion {
	max-width: 46rem !important;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	overflow: hidden;
	background: var(--st-paper-raised);
}

.st-acc { border-bottom: 1px solid var(--st-line); }
.st-acc:last-child { border-bottom: 0; }

.st-acc__head {
	list-style: none;
	cursor: pointer;
	padding: var(--st-s3);
	font-family: var(--st-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--st-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-s2);
	transition: background .15s ease, color .15s ease;
}
.st-acc__head::-webkit-details-marker { display: none; }
.st-acc__head:hover { background: var(--st-thread-wash); color: var(--st-thread); }
.st-acc__head:focus-visible { outline: 2px solid var(--st-thread); outline-offset: -2px; }

/* Chevron drawn in CSS - rotates on open, respects reduced motion */
.st-acc__head::after {
	content: "";
	flex: none;
	width: .55rem; height: .55rem;
	border-right: 2px solid var(--st-brass);
	border-bottom: 2px solid var(--st-brass);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.st-acc[open] > .st-acc__head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.st-acc[open] > .st-acc__head {
	background: var(--st-paper-sunk);
	border-bottom: 2px dashed var(--st-line-strong);
}

.st-acc__body { padding: var(--st-s3) var(--st-s3) var(--st-s4); }
.st-acc__body > *  { max-width: var(--st-measure); }
.st-acc__body h3 {
	font-size: 1.05rem;
	margin: var(--st-s3) 0 var(--st-s1);
}
.st-acc__body h3:first-child { margin-top: 0; }
.st-acc__body h4 { font-size: .95rem; margin: var(--st-s2) 0 var(--st-s1); }
.st-acc__body p, .st-acc__body ul, .st-acc__body ol {
	color: var(--st-ink-muted); font-size: .95rem; margin: 0 0 var(--st-s2);
}
.st-acc__body table { max-width: none; }

/* Deep-linking from the footer must open the right section, not just scroll
   to a collapsed one. */
.st-acc:target { scroll-margin-top: 5rem; }
.st-acc:target > .st-acc__head { background: var(--st-brass-wash); }

@media (prefers-reduced-motion: reduce) {
	.st-acc__head::after { transition: none; }
}
/* ==========================================================================
   PRODUCT STRIPS ON THE HOMEPAGE
   Shopping should start above the fold, not after three sections of prose.
   ========================================================================== */

.st-shopstrip { max-width: none !important; margin-bottom: var(--st-s5); }
.st-shopstrip__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--st-s3); flex-wrap: wrap;
	padding-bottom: var(--st-s2); margin-bottom: var(--st-s3);
	border-bottom: 2px dashed var(--st-line-strong);
	max-width: none;
}
.st-shopstrip__head h2 { margin: 0 !important; font-size: 1.5rem; max-width: none; }
.st-shopstrip__head .st-more { font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

.st-shopstrip .products { margin: 0 !important; }

/* Product cards match the offer cards so the page reads as one system */
.woocommerce ul.products li.product,
.st-shopstrip ul.products li.product {
	background: var(--st-paper-raised);
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	padding: var(--st-s2);
	transition: border-color .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover { border-color: var(--st-thread); transform: translateY(-2px); }
.woocommerce ul.products li.product img { border-radius: calc(var(--st-radius) - 2px); margin-bottom: var(--st-s2); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem !important; padding: 0 !important; margin: 0 0 .25rem !important;
}
.woocommerce ul.products li.product .price {
	color: var(--st-ink-muted) !important; font-size: .95rem !important; font-weight: 600;
}
.woocommerce ul.products li.product .button {
	margin-top: var(--st-s2); background: var(--st-thread); color: #fff;
}
.woocommerce ul.products li.product .button:hover { background: var(--st-thread-deep); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover { transform: none; }
}
/* ==========================================================================
   LAYOUT CORRECTIONS
   The editorial measure (34rem) is right for prose but was leaking into the
   homepage sections, so the hero, the steps and the closing band all crammed
   into the left third of a 1440px screen. These sections opt out and use the
   full shell instead.
   ========================================================================== */

/* --- Hero: two columns, so the right side carries a motif instead of void --- */
.st-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: var(--st-s5);
	align-items: center;
}
.st-hero__copy { max-width: 30rem; }
.st-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); max-width: 14ch; }
.st-hero__lead { max-width: 34ch; }

/* Hoop-and-stitch mark, drawn in CSS - no image request, scales cleanly,
   and repeats the dashed motif the rest of the page is built on. */
.st-hero__mark {
	position: relative;
	aspect-ratio: 1;
	max-width: 22rem;
	justify-self: center;
	border-radius: 50%;
	border: 2px dashed var(--st-line-strong);
	display: grid;
	place-items: center;
}
.st-hero__mark::before,
.st-hero__mark::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}
.st-hero__mark::before { inset: 12%; border: 2px dashed var(--st-brass); }
.st-hero__mark::after  { inset: 26%; border: 2px dashed var(--st-thread); }
.st-hero__mark span {
	font-family: var(--st-font-display);
	font-size: clamp(3rem, 7vw, 5.5rem);
	color: var(--st-thread);
	line-height: 1;
}

@media (max-width: 860px) {
	.st-hero { grid-template-columns: 1fr; gap: var(--st-s4); }
	.st-hero__mark { max-width: 13rem; order: -1; justify-self: start; }
}

/* --- Steps: give them real presence instead of grey whispers --- */
.st-steps ol { gap: var(--st-s3); }
.st-step {
	background: var(--st-paper-raised);
	border: 1px solid var(--st-line);
	border-top: 3px solid var(--st-brass);
	border-radius: var(--st-radius);
	padding: var(--st-s3);
}
.st-step__n { color: var(--st-brass); font-size: .68rem; margin-bottom: var(--st-s1); }
.st-step p { color: var(--st-ink); font-size: 1rem; }

/* --- Closing band: fill the box it lives in --- */
.st-band {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: var(--st-s4);
	align-items: start;
}
.st-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: none; }
.st-band p { max-width: 52ch; font-size: 1.05rem; }
@media (max-width: 860px) { .st-band { grid-template-columns: 1fr; gap: var(--st-s2); } }

/* --- Equal-height product cards, buttons aligned along one line --- */
.woocommerce ul.products { align-items: stretch; }
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.woocommerce ul.products li.product .price { margin-top: auto; }
.woocommerce ul.products li.product .button { align-self: flex-start; }

/* Offer cards a touch more generous */
.st-card { padding: var(--st-s3) var(--st-s3) calc(var(--st-s3) + .25rem); }
.st-card p { font-size: 1rem; }
/* The hero mark collapsed to icon size: aspect-ratio needs a resolved width,
   and justify-self:center gave it none. Make it fill its column. */
.st-hero__mark {
	width: 100%;
	max-width: 24rem;
	justify-self: end;
	margin-inline-end: var(--st-s3);
}
.st-hero__mark span { font-size: clamp(4rem, 9vw, 7rem); }
@media (max-width: 860px) {
	.st-hero__mark { max-width: 12rem; justify-self: start; margin-inline-end: 0; }
}
/* ==========================================================================
   ENQUIRY FORM
   ========================================================================== */

.st-enq { max-width: 46rem !important; margin-top: var(--st-s3); }
.st-enq__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.st-enq__grid {
	display: grid; gap: var(--st-s3);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	max-width: none;
}
.st-enq__field { margin: 0 !important; max-width: none !important; }
.st-enq__field--wide { margin-top: var(--st-s3) !important; }

.st-enq label {
	display: block;
	font-size: .8rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--st-ink); margin-bottom: .4rem;
}
.st-enq input[type="text"],
.st-enq input[type="email"],
.st-enq select,
.st-enq textarea,
.st-enq input[type="file"] {
	width: 100%; box-sizing: border-box;
	font: inherit; font-size: 1rem;
	color: var(--st-ink); background: var(--st-paper-raised);
	border: 1px solid var(--st-line-strong);
	border-radius: var(--st-radius);
	padding: .7rem .85rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.st-enq textarea { resize: vertical; line-height: 1.6; }
.st-enq input:focus, .st-enq select:focus, .st-enq textarea:focus {
	outline: none;
	border-color: var(--st-thread);
	box-shadow: 0 0 0 3px var(--st-thread-wash);
}
.st-enq input[type="file"] { padding: .55rem; background: var(--st-paper-sunk); }

.st-enq__hint {
	display: block; font-size: .85rem; color: var(--st-ink-faint);
	margin-top: .45rem; text-transform: none; letter-spacing: 0; font-weight: 400;
}

.st-enq__consent label {
	display: flex; gap: .6rem; align-items: flex-start;
	text-transform: none; letter-spacing: 0; font-weight: 400;
	font-size: .95rem; color: var(--st-ink-muted); line-height: 1.55;
}
.st-enq__consent input { margin-top: .25rem; flex: none; width: auto; }

.st-enq__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-s3);
	margin-top: var(--st-s4) !important; padding-top: var(--st-s3);
	border-top: 2px dashed var(--st-line-strong); max-width: none !important;
}
.st-enq__actions .st-enq__hint { margin: 0; max-width: 24rem; }
.st-enq button.st-btn { border: 0; cursor: pointer; font-family: inherit; }

/* Result banners */
.st-enq-ok  { border-left-color: var(--st-ok) !important; background: #E4EFE7 !important; }
.st-enq-err { border-left-color: var(--st-error) !important; background: #F6E2E0 !important; }
.st-enq-err ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .95rem; }

/* Quote CTA on quote-priced products */
.st-enq-cta { margin: var(--st-s3) 0 .35rem; }
/* ==========================================================================
   ALIGNMENT CORRECTIONS
   WordPress's `is-layout-constrained` centres any child that carries a
   max-width, so headings and the form were drifting to the middle of the page
   while body copy stayed left. Pin the text column to the left edge.
   Explicitly excludes the full-bleed band, which needs its negative margins.
   ========================================================================== */

.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > .st-accordion,
.entry-content > .st-enq,
.entry-content > .st-legal-intro,
.entry-content > .st-enq-intro {
	margin-inline: 0 !important;
	text-align: left;
}

/* The dashed section rule should span the reading column, not float centred */
.entry-content > h2:not(:first-child)::before { max-width: 46rem; }

.st-lead {
	font-size: 1.15rem !important;
	color: var(--st-ink) !important;
	max-width: 46rem !important;
}

/* --- Enquiry page step strip: same treatment as the homepage steps --- */
.st-enq-steps { max-width: none !important; margin: var(--st-s4) 0; }
.st-enq-steps ol {
	list-style: none;
	margin: 0; padding: 0; max-width: none;
	display: grid; gap: var(--st-s3);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.st-enq-steps .st-step__n { text-transform: uppercase; letter-spacing: .14em; }

/* --- Buttons: beat Blocksy's element-level submit styling --- */
.entry-content .st-btn,
.st-enq button.st-btn,
button.st-btn--solid,
a.st-btn--solid,
.woocommerce .st-btn--solid {
	background: var(--st-thread) !important;
	color: #fff !important;
	border: 1px solid var(--st-thread) !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.st-enq button.st-btn:hover,
button.st-btn--solid:hover,
a.st-btn--solid:hover {
	background: var(--st-thread-deep) !important;
	border-color: var(--st-thread-deep) !important;
}
a.st-btn--ghost {
	background: transparent !important;
	color: var(--st-ink) !important;
	border: 1px solid var(--st-line-strong) !important;
}
a.st-btn--ghost:hover { border-color: var(--st-thread) !important; color: var(--st-thread) !important; }

/* Body copy contrast: muted grey is fine for supporting text, too weak for
   the main read on a long page. */
.entry-content > p { color: var(--st-ink-muted); }
.st-acc__body p, .st-acc__body li { color: var(--st-ink-muted); }
.entry-content > ul > li, .entry-content > ol > li { color: var(--st-ink-muted); }
.entry-content > ul > li > strong { color: var(--st-ink); }
/* ==========================================================================
   CONTENT COLUMN
   Blocksy constrains its own regions with .ct-container (measured: 1290px wide,
   75px gutter at 1440), but .entry-content is left unconstrained at full width.
   Left-aligning children therefore pushed them outside the gutter, flush to the
   viewport edge. Give .entry-content the same box so content lines up with the
   page title above it.

   --st-content must match Blocksy's container width setting; if that is changed
   in the customizer, change it here too.
   ========================================================================== */

:root { --st-content: 1290px; }

.entry-content {
	max-width: var(--st-content);
	margin-inline: auto !important;
	padding-inline: 1.25rem;
	box-sizing: border-box;
}

@media (min-width: 1440px) { .entry-content { padding-inline: 0; } }

/* The full-bleed band breaks out relative to .entry-content, which is now
   1290px wide - 50% of that plus the gutter still reaches both edges. */
.st-band { margin-inline: calc(50% - 50vw); }
/* ==========================================================================
   CONTENT COLUMN, corrected
   Blocksy computes its container as min(90vw, 1290px) via its own custom
   properties, so hardcoding 1290px only lined up at exactly 1440. Use the
   theme's variables and the column tracks every breakpoint automatically.

   The full-bleed band needs !important because WordPress core's
   `is-layout-constrained` emits
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { margin-left: auto !important; margin-right: auto !important }
   which silently zeroed the negative margins.
   ========================================================================== */

.entry-content {
	width: var(--theme-container-width, min(90vw, 1290px));
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin-inline: auto !important;
	padding-inline: 0;
}

.st-band { margin-inline: calc(50% - 50vw) !important; }
/* Core's rule uses PHYSICAL longhands (margin-left/right) at specificity 0,1,0
   because :where() contributes nothing. `margin-inline` is a logical shorthand
   and loses on source order. Match it with longhands at 0,2,0. */
.entry-content > .st-band {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: 100vw;
	max-width: 100vw;
}