/* =================================================================
   SH Collectives — theme bridge
   -----------------------------------------------------------------
   Loaded after sh-collectives.css. The design stylesheet describes
   what SH should look like; this file's only job is to stop the
   active theme from fighting it.

   Block themes (Twenty Twenty-Four/Five and every theme built the
   same way) style headings with fluid clamp() sizes, constrain
   layout through --wp--style--global--* custom properties, and wrap
   the page in .wp-site-blocks > main. Left alone, a WooCommerce
   store inherits all of that: product titles render at display size,
   the grid loses its columns, and the page reads like a phone layout
   stretched across a desktop. Everything below is scoped to
   body.shc-storefront so it can never touch a non-store screen.
   ================================================================= */

/* -----------------------------------------------------------------
   1. Page shell
   ----------------------------------------------------------------- */
body.shc-storefront .wp-site-blocks > main,
body.shc-storefront main.wp-block-group,
body.shc-storefront .wp-block-group.is-layout-constrained > .wp-block-post-content {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Block themes add a vertical rhythm margin to every top-level block.
   The storefront sets its own section padding, so the inherited
   margin only ever shows up as an unexplained gap. */
body.shc-storefront .wp-site-blocks > *,
body.shc-storefront main > .woocommerce,
body.shc-storefront .entry-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

body.shc-storefront .woocommerce-notices-wrapper:empty { display: none; }

/* When the plugin renders the SH header and footer, the theme's own
   chrome would otherwise appear above and below it — two navigations
   on one page. */
body.shc-owns-chrome .wp-site-blocks > header.wp-block-template-part,
body.shc-owns-chrome .wp-site-blocks > footer.wp-block-template-part,
body.shc-owns-chrome > header.wp-block-template-part,
body.shc-owns-chrome > footer.wp-block-template-part,
body.shc-owns-chrome .site-header,
body.shc-owns-chrome #masthead,
body.shc-owns-chrome .site-footer,
body.shc-owns-chrome #colophon {
	display: none !important;
}

body.shc-owns-chrome .shc-chrome--header { position: relative; z-index: 90; }
body.shc-owns-chrome.admin-bar .shc-chrome--header { top: 0; }

/* -----------------------------------------------------------------
   2. Typography reset inside the store
   -----------------------------------------------------------------
   Block themes size headings with fluid clamp() values tuned for
   editorial pages. A product title is not a page title, so the store
   opts out and states its own scale.
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce h1,
body.shc-storefront .woocommerce h2,
body.shc-storefront .woocommerce h3,
body.shc-storefront .woocommerce h4,
body.shc-storefront .shc-section h1,
body.shc-storefront .shc-section h2,
body.shc-storefront .shc-section h3,
body.shc-storefront .shc-pd-section h2,
body.shc-storefront .shc-pd-section h3 {
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin-top: 0;
}

body.shc-storefront .woocommerce ul.products li.product h2,
body.shc-storefront .woocommerce ul.products li.product h3,
body.shc-storefront .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.shc-storefront .woocommerce ul.products li.product .shc-card__title {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	padding: 0;
	color: inherit;
}

body.shc-storefront .woocommerce ul.products li.product a,
body.shc-storefront .woocommerce div.product .summary a:not(.button) {
	text-decoration: none;
}

/* Themes that underline every link put a rule under each product
   title; SH marks the hover instead. */
body.shc-storefront .woocommerce ul.products li.product a:hover .shc-card__title,
body.shc-storefront .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	text-decoration: none;
	color: var(--shc-muted);
}

/* -----------------------------------------------------------------
   3. Shop archive / category grid
   -----------------------------------------------------------------
   The design stylesheet grids .shc-product-grid, which only exists
   once the plugin's loop filter has run. Targeting ul.products
   directly means the archive is a grid even on the screens where
   WooCommerce builds the list itself.
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce ul.products,
body.shc-storefront ul.products.columns-1,
body.shc-storefront ul.products.columns-2,
body.shc-storefront ul.products.columns-3,
body.shc-storefront ul.products.columns-4,
body.shc-storefront ul.products.columns-5,
body.shc-storefront ul.products.columns-6 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 40px;
}

/* WooCommerce floats loop items and clears every nth child. Inside a
   grid those rules only create phantom columns. */
body.shc-storefront .woocommerce ul.products li.product,
body.shc-storefront ul.products li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	text-align: left;
}
body.shc-storefront .woocommerce ul.products li.product::before,
body.shc-storefront .woocommerce ul.products::after,
body.shc-storefront .woocommerce ul.products::before {
	content: none;
	display: none;
}

/* Cards rendered from the plugin's own content-product.php carry
   .shc-card and are fully described by the design stylesheet — including
   the fixed 4:5 media box and the crossfade hover image, both of which
   depend on the image being absolutely positioned. Only cards WooCommerce
   built itself need the fallback sizing below. */
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 0 14px;
	border-radius: 0;
	box-shadow: none;
}

body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) .price {
	font-size: 13px;
	font-weight: 400;
	color: var(--shc-muted);
	margin: 4px 0 0;
	display: block;
}
body.shc-storefront .woocommerce ul.products li.product .price del { opacity: .5; }
body.shc-storefront .woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 500;
	color: var(--shc-black);
}

body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) .button,
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) .added_to_cart {
	display: inline-block;
	margin: 12px 0 0;
	padding: 11px 20px;
	background: transparent;
	border: 1px solid var(--shc-black);
	border-radius: 0;
	color: var(--shc-black);
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) .button:hover {
	background: var(--shc-black);
	color: var(--shc-white);
}

/* Themes with a display serif for headings will otherwise set the type
   inside the plugin's own editorial sections and product descriptions. */
body.shc-storefront .shc-section :is(h1, h2, h3, h4, h5, h6),
body.shc-storefront .shc-pd-section :is(h1, h2, h3, h4, h5, h6),
body.shc-storefront .woocommerce div.product .summary :is(h2, h3, h4),
body.shc-storefront .woocommerce-tabs :is(h2, h3) {
	font-family: 'Archivo', 'Inter', -apple-system, sans-serif;
	font-size: clamp(20px, 1.6vw, 26px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
}
body.shc-storefront .shc-pd-section p,
body.shc-storefront .shc-pd-section li {
	font-family: 'Inter', -apple-system, sans-serif;
}

/* Archive furniture — result count, ordering dropdown, breadcrumb —
   sits on the same 1440 measure as the grid. */
body.shc-storefront .woocommerce .woocommerce-breadcrumb,
body.shc-storefront .woocommerce .woocommerce-result-count,
body.shc-storefront .woocommerce .woocommerce-ordering,
body.shc-storefront .woocommerce nav.woocommerce-pagination,
body.shc-storefront .woocommerce .term-description,
body.shc-storefront .woocommerce .page-description {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 40px;
	font-size: 13px;
	color: var(--shc-muted);
}
body.shc-storefront .woocommerce .woocommerce-breadcrumb { padding-top: 28px; padding-bottom: 8px; }
body.shc-storefront .woocommerce .woocommerce-products-header { max-width: 1440px; margin-inline: auto; padding: 32px 40px 8px; }
body.shc-storefront .woocommerce .woocommerce-products-header__title {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size: clamp(28px, 3vw, 44px);
	text-transform: uppercase;
	margin: 0;
}
body.shc-storefront .woocommerce .woocommerce-result-count,
body.shc-storefront .woocommerce .woocommerce-ordering { margin-bottom: 20px; }
body.shc-storefront .woocommerce nav.woocommerce-pagination { padding-block: 48px; text-align: center; }

@media (max-width: 1100px) {
	body.shc-storefront .woocommerce ul.products,
	body.shc-storefront ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-inline: 28px;
	}
}
@media (max-width: 860px) {
	body.shc-storefront .woocommerce ul.products,
	body.shc-storefront ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 16px;
		padding-inline: 20px;
	}
	body.shc-storefront .woocommerce .woocommerce-breadcrumb,
	body.shc-storefront .woocommerce .woocommerce-result-count,
	body.shc-storefront .woocommerce .woocommerce-ordering,
	body.shc-storefront .woocommerce .woocommerce-products-header { padding-inline: 20px; }
}

/* -----------------------------------------------------------------
   4. Single product — SUPERSEDED by section 19.
   -----------------------------------------------------------------
   This was a float arrangement. It is gone rather than merely
   overridden: it set `grid-template-columns: none !important`, which
   collapsed section 19's grid to implicit columns. With no explicit
   grid, `grid-column: 1 / -1` resolves to a single column — so the
   editorial bands ended up one column wide and the first one shared
   row 1 with the eyebrow. An !important left behind from a retired
   layout is worse than no layout at all.
   ----------------------------------------------------------------- */

body.shc-storefront .woocommerce div.product .product_title,
body.shc-storefront .woocommerce div.product .summary h1,
body.shc-storefront .woocommerce div.product .entry-title {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size: clamp(26px, 2.2vw, 38px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	margin: 0 0 14px;
	padding: 0;
}

body.shc-storefront .woocommerce div.product p.price,
body.shc-storefront .woocommerce div.product span.price {
	font-size: 19px;
	font-weight: 500;
	color: var(--shc-black);
	margin: 0 0 18px;
}

body.shc-storefront .woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
body.shc-storefront .woocommerce div.product .woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
body.shc-storefront .woocommerce div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
body.shc-storefront .woocommerce div.product .flex-control-thumbs li { width: auto; margin: 0; float: none; }

/* Variation form: WooCommerce renders it as a table, which collapses
   badly in a narrow column. */
body.shc-storefront .woocommerce div.product form.cart .variations {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	border: 0;
}
body.shc-storefront .woocommerce div.product form.cart .variations tbody,
body.shc-storefront .woocommerce div.product form.cart .variations tr,
body.shc-storefront .woocommerce div.product form.cart .variations th,
body.shc-storefront .woocommerce div.product form.cart .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}
body.shc-storefront .woocommerce div.product form.cart .variations th.label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shc-muted);
	margin-bottom: 8px;
}
body.shc-storefront .woocommerce div.product form.cart .variations td.value { margin-bottom: 16px; }
body.shc-storefront .woocommerce div.product form.cart .variations select {
	width: 100%;
	max-width: 100%;
	height: 52px;
	padding: 0 14px;
	border: 1px solid var(--shc-line);
	border-radius: 0;
	background-color: var(--shc-white);
	font-size: 14px;
}
body.shc-storefront .woocommerce div.product .woocommerce-variation-price { margin-bottom: 14px; }

body.shc-storefront .woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 22px;
}
body.shc-storefront .woocommerce div.product form.cart .variations,
body.shc-storefront .woocommerce div.product form.cart .woocommerce-variation,
body.shc-storefront .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { flex: 1 0 100%; }
body.shc-storefront .woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

body.shc-storefront .woocommerce div.product .woocommerce-tabs,
body.shc-storefront .woocommerce div.product .related,
body.shc-storefront .woocommerce div.product .upsells,
body.shc-storefront .woocommerce div.product .shc-pd-section {
	clear: both;
	float: none;
	width: 100%;
}

@media (max-width: 960px) {
	body.shc-storefront .woocommerce div.product { padding: 24px 20px 0; }
	body.shc-storefront .woocommerce div.product > .woocommerce-product-gallery,
	body.shc-storefront .woocommerce div.product > div.images,
	body.shc-storefront .woocommerce div.product > div.summary,
	body.shc-storefront .woocommerce div.product > .entry-summary {
		float: none;
		width: 100%;
		position: static;
		margin-bottom: 28px;
	}
}

/* -----------------------------------------------------------------
   5. Cart / checkout / account
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce-cart .woocommerce,
body.shc-storefront .woocommerce-checkout .woocommerce,
body.shc-storefront .woocommerce-account .woocommerce,
body.shc-storefront .woocommerce-page .woocommerce-form-login,
body.shc-storefront .woocommerce-page .woocommerce-message,
body.shc-storefront .woocommerce-page .woocommerce-info,
body.shc-storefront .woocommerce-page .woocommerce-error {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 40px;
}
body.shc-storefront .woocommerce-cart .woocommerce,
body.shc-storefront .woocommerce-checkout .woocommerce,
body.shc-storefront .woocommerce-account .woocommerce { padding-block: 48px 80px; }

body.shc-storefront .woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}
body.shc-storefront .woocommerce table.shop_table th,
body.shc-storefront .woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--shc-line);
	padding: 18px 12px;
}
body.shc-storefront .woocommerce table.shop_table th {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shc-muted);
	font-weight: 600;
}
body.shc-storefront .woocommerce .button,
body.shc-storefront .woocommerce input[type="submit"],
body.shc-storefront .woocommerce a.button.alt,
body.shc-storefront .woocommerce button.button.alt {
	border-radius: 0;
	font-family: 'Inter', -apple-system, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
}
body.shc-storefront .woocommerce a.button.alt,
body.shc-storefront .woocommerce button.button.alt,
body.shc-storefront .woocommerce input[type="submit"] {
	background: var(--shc-black);
	color: var(--shc-white);
	padding: 15px 28px;
}
body.shc-storefront .woocommerce a.button.alt:hover,
body.shc-storefront .woocommerce button.button.alt:hover {
	background: var(--shc-green);
	color: var(--shc-black);
}
body.shc-storefront .woocommerce form .form-row input.input-text,
body.shc-storefront .woocommerce form .form-row textarea,
body.shc-storefront .woocommerce form .form-row select {
	border: 1px solid var(--shc-line);
	border-radius: 0;
	padding: 13px 14px;
	font-size: 14px;
}

/* -----------------------------------------------------------------
   6. Block-rendered WooCommerce, as a safety net
   -----------------------------------------------------------------
   The compat layer routes the store back to classic templates. If a
   merchant switches that off, or a page uses a product block inside
   post content, these keep the result presentable rather than
   letting it inherit display-size headings.
   ----------------------------------------------------------------- */
body.shc-storefront .wc-block-product-template,
body.shc-storefront .wc-block-grid__products,
body.shc-storefront .wp-block-woocommerce-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
	list-style: none;
	margin: 0 auto;
	padding: 0 40px;
	max-width: 1440px;
}
body.shc-storefront .wc-block-product-template li,
body.shc-storefront .wc-block-grid__product { width: auto !important; margin: 0 !important; list-style: none; }
body.shc-storefront .wc-block-components-product-name,
body.shc-storefront .wc-block-grid__product-title {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	color: var(--shc-black);
}
body.shc-storefront .wc-block-components-product-price,
body.shc-storefront .wc-block-grid__product-price {
	font-size: 13px !important;
	color: var(--shc-muted);
	margin-top: 4px;
}
body.shc-storefront .wp-block-woocommerce-product-image img,
body.shc-storefront .wc-block-grid__product-image img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) {
	body.shc-storefront .wc-block-product-template,
	body.shc-storefront .wc-block-grid__products,
	body.shc-storefront .wp-block-woocommerce-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 28px; }
}
@media (max-width: 860px) {
	body.shc-storefront .wc-block-product-template,
	body.shc-storefront .wc-block-grid__products,
	body.shc-storefront .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 20px; }
}

/* -----------------------------------------------------------------
   7. Block-theme button styles on WooCommerce buttons
   -----------------------------------------------------------------
   When a block theme defines a button element style, WooCommerce tags
   its own buttons with .wp-element-button so they inherit it. On a
   theme whose button is a large filled pill, SH's quiet outlined
   actions come out as loud coloured blocks. The plugin drops that
   class from loop buttons in PHP; these rules cover the buttons it
   can't reach (single product, cart, checkout) and any left over from
   a cached page.
   ----------------------------------------------------------------- */
body.shc-storefront .shc-card__actions a.button,
body.shc-storefront .shc-card__actions a.wp-element-button {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--shc-black);
	border-radius: 0;
	color: var(--shc-black);
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0 0 2px;
	box-shadow: none;
	min-height: 0;
}
body.shc-storefront .shc-rail--dark .shc-card__actions a.button,
body.shc-storefront .shc-rail--dark .shc-card__actions a.wp-element-button {
	color: var(--shc-white);
	border-bottom-color: var(--shc-white);
}
body.shc-storefront .shc-card__actions a.button:hover,
body.shc-storefront .shc-card__actions a.wp-element-button:hover {
	background: transparent;
	color: var(--shc-green);
	border-bottom-color: var(--shc-green);
}

body.shc-storefront .woocommerce div.product form.cart .single_add_to_cart_button.wp-element-button {
	background: var(--shc-black);
	color: var(--shc-white);
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 12px;
	font-weight: 600;
}
body.shc-storefront .woocommerce div.product form.cart .single_add_to_cart_button.wp-element-button:hover {
	background: var(--shc-green);
	color: var(--shc-black);
}

/* The filter tabs are <button> elements and pick up the theme's button
   element style the same way. */
body.shc-storefront .shc-filter-tabs .shc-filter-tab {
	background: transparent;
	border: 1px solid var(--shc-line);
	border-radius: 0;
	color: var(--shc-muted);
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1;
	text-transform: uppercase;
	padding: 11px 18px;
	box-shadow: none;
	min-height: 0;
	white-space: nowrap;
}
body.shc-storefront .shc-filter-tabs .shc-filter-tab.is-active {
	background: var(--shc-black);
	border-color: var(--shc-black);
	color: var(--shc-white);
}
body.shc-storefront .shc-section--black .shc-filter-tabs .shc-filter-tab {
	border-color: rgba(255,255,255,.22);
	color: rgba(255,255,255,.62);
	background: transparent;
}
body.shc-storefront .shc-section--black .shc-filter-tabs .shc-filter-tab.is-active {
	background: var(--shc-green);
	border-color: var(--shc-green);
	color: var(--shc-black);
}

/* -----------------------------------------------------------------
   8. Fallback for WooCommerce's own product card
   -----------------------------------------------------------------
   The plugin serves its own content-product.php, but a theme override
   or a cached page can still produce WooCommerce's default card. That
   card has no media box, so the crossfade hover image the plugin adds
   renders as a *second* full-height photo stacked above the first —
   doubling every card and opening large gaps down the grid. Give the
   default card a media box of its own so it degrades to a still image
   rather than a broken one.
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) > a:first-of-type {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
}
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) img.shc-card__hover-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	margin: 0;
	transition: opacity .45s ease;
	z-index: 1;
}
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card):hover img.shc-card__hover-image { opacity: 1; }
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) > a:first-of-type > img:not(.shc-card__hover-image) {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	margin: 0 0 14px;
}

/* -----------------------------------------------------------------
   9. Prose pages (Delivery, Returns, FAQ, Care, About, Contact)
   -----------------------------------------------------------------
   These are ordinary post_content, so on a block theme they inherit
   display-serif headings at editorial sizes. They read as documents,
   not as posters.
   ----------------------------------------------------------------- */
body.shc-prose .wp-block-post-content,
body.shc-prose .entry-content {
	max-width: 760px;
	margin-inline: auto;
	padding: 8px 24px 96px;
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--shc-black);
}
body.shc-prose .wp-block-post-content > *,
body.shc-prose .entry-content > * { max-width: none; margin-inline: 0; }

body.shc-prose .wp-block-post-content h1,
body.shc-prose .entry-content h1,
body.shc-prose .wp-block-post-content h2,
body.shc-prose .entry-content h2 {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 20px;
}
body.shc-prose .wp-block-post-content h3,
body.shc-prose .entry-content h3 {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shc-muted);
	margin: 44px 0 10px;
}
body.shc-prose .wp-block-post-content p,
body.shc-prose .entry-content p { margin: 0 0 18px; }
body.shc-prose .wp-block-post-content ul,
body.shc-prose .entry-content ul { margin: 0 0 18px; padding-left: 20px; }
body.shc-prose .wp-block-post-content li,
body.shc-prose .entry-content li { margin: 0 0 8px; }
body.shc-prose .wp-block-post-content strong,
body.shc-prose .entry-content strong { font-weight: 600; }

/* The theme's own page title block sits above this content and repeats
   the H2 the copy already opens with. */
body.shc-prose .wp-block-post-title {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size: clamp(30px, 3vw, 46px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	max-width: 760px;
	margin: 56px auto 8px;
	padding-inline: 24px;
}

@media (max-width: 700px) {
	body.shc-prose .wp-block-post-content,
	body.shc-prose .entry-content { padding: 8px 20px 64px; }
	body.shc-prose .wp-block-post-title { padding-inline: 20px; margin-top: 36px; }
}

/* -----------------------------------------------------------------
   10. Let storefront bands reach the edge
   -----------------------------------------------------------------
   Block themes apply the content measure as padding on the post
   content wrapper, not only through the layout custom properties, so
   zeroing the properties alone still leaves the storefront inset. The
   hero, editorial and rail sections carry their own generous padding
   and are designed to run edge to edge. Prose pages are excluded —
   they want the measure.
   ----------------------------------------------------------------- */
body.shc-storefront:not(.shc-prose) .wp-block-post-content,
body.shc-storefront:not(.shc-prose) .entry-content,
body.shc-storefront:not(.shc-prose) .wp-block-post-content > .wp-block-group {
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* The theme's page title block duplicates the hero on storefront
   screens — the hero already carries the page's headline. */
body.shc-storefront:not(.shc-prose) .wp-block-post-title { display: none; }

/* Hiding the page-title block leaves the group that wrapped it behind,
   still carrying the theme's vertical padding — a blank band above the
   hero. Collapse the wrapper too, but only when the title is all it
   held, so a template that puts real content there is left alone. */
body.shc-storefront:not(.shc-prose) main > .wp-block-group:has(> .wp-block-post-title):not(:has(.wp-block-post-content)):not(:has(.woocommerce)) {
	display: none;
}
body.shc-storefront:not(.shc-prose) .wp-block-post-content,
body.shc-storefront:not(.shc-prose) .entry-content {
	margin-top: 0;
	margin-bottom: 0;
}

/* -----------------------------------------------------------------
   11. Product gallery must be visible without WooCommerce's script
   -----------------------------------------------------------------
   WooCommerce's product-image.php hard-codes style="opacity: 0" on the
   gallery wrapper and relies on wc-single-product.js to fade it in. If
   that script is missing, deferred, or throws — which it does when the
   theme declares no gallery support and FlexSlider never initialises —
   the product photo simply never appears. The design does not animate
   the gallery in, so there is nothing to lose by pinning it visible.
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce-product-gallery,
body.shc-storefront .woocommerce div.product .images {
	opacity: 1 !important;
	transition: none !important;
}

/* FlexSlider hides all but the active slide by inlining display/width on
   the slide list. Without the script those inline styles are never
   written, but a half-initialised gallery leaves them behind. Show the
   first image and stack the rest as thumbnails. */
body.shc-storefront .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	width: auto !important;
	transform: none !important;
	margin: 0;
}
/* Lead image full width, the rest as a thumbnail strip beneath it —
   the arrangement FlexSlider would have produced, without the script. */
body.shc-storefront .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	width: auto !important;
	float: none !important;
	display: block;
	margin: 0;
}
body.shc-storefront .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
	margin-bottom: 4px;
}
body.shc-storefront .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* Anchors here no longer have an href — make that visible to the cursor
   rather than leaving a link that looks clickable and isn't. */
body.shc-storefront .woocommerce-product-gallery a:not([href]) { cursor: default; }

/* -----------------------------------------------------------------
   12. Responsive behaviour
   -----------------------------------------------------------------
   The grid rule in section 3 pins four columns at every width, which is
   correct on a desktop and unusable on a phone. Step it down, and give
   the single product a single column before the two floats get too
   narrow to hold a photo and a form side by side.
   ----------------------------------------------------------------- */
@media (max-width: 1200px) {
	body.shc-storefront .woocommerce ul.products,
	body.shc-storefront ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-inline: 32px;
	}
}
@media (max-width: 900px) {
	body.shc-storefront .woocommerce ul.products,
	body.shc-storefront ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
		padding-inline: 20px;
	}
	body.shc-storefront .woocommerce div.product,
	body.shc-storefront div.product { padding: 24px 20px 0; }
	body.shc-storefront .woocommerce div.product > .woocommerce-product-gallery,
	body.shc-storefront .woocommerce div.product > div.images,
	body.shc-storefront .woocommerce div.product > div.summary,
	body.shc-storefront .woocommerce div.product > .entry-summary {
		float: none;
		width: 100%;
		position: static;
		margin-bottom: 28px;
	}
}
@media (max-width: 560px) {
	body.shc-storefront .woocommerce ul.products,
	body.shc-storefront ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
		padding-inline: 16px;
	}
	body.shc-storefront .shc-section { padding-left: 20px; padding-right: 20px; }
}

/* Nothing in the store may exceed the viewport width. A single wide
   element causes the whole page to scroll sideways, which reads exactly
   like "the page size is out of proportion". */
body.shc-storefront img,
body.shc-storefront video,
body.shc-storefront iframe,
body.shc-storefront table { max-width: 100%; }
body.shc-storefront { overflow-x: clip; }

/* Normalise the lead gallery image so a portrait photo and a landscape
   one produce the same page shape. */
body.shc-storefront .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------
   13. Theme chrome, matched on the elements themselves
   -----------------------------------------------------------------
   Hiding the theme's header by its wrapper has now missed twice: every
   theme nests template parts differently, and WooCommerce's archive
   templates nest them differently again from a page template — which is
   why SH's header appeared on the homepage but the theme's giant site
   title appeared on Shop, category and product pages.

   These selectors name the offending blocks directly. A site title and
   a theme navigation are exactly the things SH's own header replaces,
   so on a storefront screen they are never wanted, at any nesting depth.
   ----------------------------------------------------------------- */
body.shc-owns-chrome .wp-block-site-title,
body.shc-owns-chrome .wp-block-site-logo,
body.shc-owns-chrome .wp-block-navigation,
body.shc-owns-chrome .wp-block-template-part:has(> .wp-block-site-title),
body.shc-owns-chrome .wp-block-template-part:has(> .wp-block-navigation),
body.shc-owns-chrome .wp-site-blocks > header,
body.shc-owns-chrome .wp-site-blocks > footer,
body.shc-owns-chrome .wp-site-blocks > .wp-block-template-part:first-child,
body.shc-owns-chrome .wp-site-blocks > .wp-block-template-part:last-child {
	display: none !important;
}

/* Archive sidebars and widget areas — the stray search box that appears
   under the product grid, and the empty column that pushes the first
   row of products off to one side. */
body.shc-storefront .wp-site-blocks aside,
body.shc-storefront .widget-area,
body.shc-storefront #secondary,
body.shc-storefront .sidebar,
body.shc-storefront .wp-block-template-part[class*="sidebar"] {
	display: none !important;
}
/* SH's own search lives in the header overlay, not in the page flow. */
body.shc-storefront .wp-site-blocks > .wp-block-search,
body.shc-storefront main > .wp-block-search,
body.shc-storefront .widget_search { display: none !important; }

/* Whatever held that sidebar must not keep reserving its column. */
body.shc-storefront .woocommerce,
body.shc-storefront .woocommerce-page .site-content,
body.shc-storefront main .wp-block-query {
	float: none;
	width: auto;
	max-width: none;
}

/* -----------------------------------------------------------------
   14. One product card, whichever template drew it
   -----------------------------------------------------------------
   The card has to look identical whether it came from the plugin's
   content-product.php or from WooCommerce's default, because a theme
   override, a cache, or a block-rendered grid can produce either. The
   media box states its own ratio and every image inside fills it — the
   cream strip under the photos was the box's background showing through
   where an image sized itself smaller than the box it sits in.

   !important is deliberate here: WooCommerce, the block theme and the
   WordPress.com concatenator each ship image rules of their own, and
   this is the one measurement the whole grid's rhythm depends on.
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce ul.products li.product .shc-card__media,
body.shc-storefront ul.products li.product .shc-card__media {
	position: relative !important;
	display: block !important;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden !important;
	background: var(--shc-offwhite);
	margin: 0 !important;
}
body.shc-storefront .woocommerce ul.products li.product .shc-card__media img,
body.shc-storefront ul.products li.product .shc-card__media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Same treatment for a default WooCommerce card, which has no media box
   of its own — the link becomes one. */
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) > a.woocommerce-LoopProduct-link {
	display: block;
	position: relative;
}
body.shc-storefront .woocommerce ul.products li.product:not(.shc-card) > a.woocommerce-LoopProduct-link > img {
	aspect-ratio: 4 / 5 !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
	margin: 0 0 14px !important;
}

/* Card text block: tight, even, and the same on every card. */
body.shc-storefront .woocommerce ul.products li.product .shc-card__info {
	padding-top: 14px;
	gap: 3px;
}
body.shc-storefront .woocommerce ul.products li.product .shc-card__actions { margin-top: 8px; }
body.shc-storefront .woocommerce ul.products li.product { padding-bottom: 0 !important; }

/* -----------------------------------------------------------------
   15. Archive header
   -----------------------------------------------------------------
   Shop / category pages get a title, a result count and a sort control.
   Left alone the title takes the theme's display size and the count and
   sort control fly to opposite edges of a wide monitor, because nothing
   constrains them to the width of the grid below.
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce-products-header,
body.shc-storefront .woocommerce-breadcrumb,
body.shc-storefront .woocommerce-notices-wrapper {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 40px;
	width: 100%;
	box-sizing: border-box;
}
body.shc-storefront .woocommerce-products-header { padding-top: 48px; padding-bottom: 4px; }
body.shc-storefront .woocommerce-products-header__title,
body.shc-storefront .woocommerce-products-header__title.page-title {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0;
}
body.shc-storefront .woocommerce-breadcrumb {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--shc-muted);
	padding-top: 28px;
}
body.shc-storefront .woocommerce-breadcrumb a { color: var(--shc-muted); text-decoration: none; }

/* Count and sort sit on one line, aligned to the grid, not the window. */
body.shc-storefront .woocommerce-result-count,
body.shc-storefront .woocommerce-ordering {
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: 40px;
	width: 100%;
	box-sizing: border-box;
	float: none;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--shc-muted);
}
body.shc-storefront .woocommerce-result-count { padding-bottom: 6px; }
body.shc-storefront .woocommerce-ordering { padding-bottom: 24px; }
body.shc-storefront .woocommerce-ordering select {
	border: 1px solid var(--shc-line);
	border-radius: 0;
	background: transparent;
	padding: 9px 12px;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--shc-black);
}
/* Pair the count and the sort control on one row, both aligned to the
   edges of the grid below rather than to the edges of the window — on a
   wide monitor those are 600px apart, which is what threw "Showing 1–16"
   into one corner and "Default sorting" into the other.

   The archive wrapper becomes the two-column container, and everything
   that is not the count or the sort control spans it. Scoped with :has()
   so a single-product page, which uses the same .woocommerce wrapper,
   is untouched. */
@media (min-width: 761px) {
	body.shc-storefront .woocommerce:has(> ul.products) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		max-width: 1440px;
		margin-inline: auto;
		padding-inline: 40px;
		box-sizing: border-box;
	}
	body.shc-storefront .woocommerce:has(> ul.products) > * { grid-column: 1 / -1; }
	body.shc-storefront .woocommerce:has(> ul.products) > .woocommerce-result-count {
		grid-column: 1;
		justify-self: start;
		white-space: nowrap;
	}
	body.shc-storefront .woocommerce:has(> ul.products) > .woocommerce-ordering {
		grid-column: 2;
		justify-self: end;
	}
	/* Children no longer centre themselves — the wrapper does it now. */
	body.shc-storefront .woocommerce:has(> ul.products) > * {
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
		width: auto;
	}
	body.shc-storefront .woocommerce:has(> ul.products) > ul.products {
		padding-inline: 0;
		max-width: none;
	}
}

/* Pagination */
body.shc-storefront .woocommerce-pagination {
	max-width: 1440px;
	margin: 40px auto 80px;
	padding-inline: 40px;
	text-align: center;
}
body.shc-storefront .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 6px;
	border: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.shc-storefront .woocommerce-pagination li { border: 0; margin: 0; }
body.shc-storefront .woocommerce-pagination .page-numbers {
	border: 1px solid var(--shc-line);
	border-radius: 0;
	background: transparent;
	color: var(--shc-muted);
	padding: 10px 15px;
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
}
body.shc-storefront .woocommerce-pagination .page-numbers.current {
	background: var(--shc-black);
	border-color: var(--shc-black);
	color: var(--shc-white);
}

/* -----------------------------------------------------------------
   16. Gated checkout
   -----------------------------------------------------------------
   Two columns: why the account exists, and the two forms. The reasons
   lead, because a wall with no explanation is the fastest way to lose
   a customer who has already filled a bag.
   ----------------------------------------------------------------- */
body.shc-storefront .shc-gate {
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 40px 96px;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--shc-black);
}
body.shc-storefront .shc-gate__intro { max-width: 620px; margin-bottom: 48px; }
body.shc-storefront .shc-gate__title {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
body.shc-storefront .shc-gate__lead {
	font-size: 16px;
	line-height: 1.65;
	color: var(--shc-muted);
	margin: 0;
}

body.shc-storefront .shc-gate__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 64px;
	align-items: start;
}
body.shc-storefront .shc-gate__reason { padding: 22px 0; border-top: 1px solid var(--shc-line); }
body.shc-storefront .shc-gate__reason:first-child { border-top: 0; padding-top: 0; }
body.shc-storefront .shc-gate__reason h2 {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
body.shc-storefront .shc-gate__reason p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--shc-muted);
	margin: 0;
	max-width: 54ch;
}

body.shc-storefront .shc-gate__forms { background: var(--shc-offwhite); padding: 32px; }
body.shc-storefront .shc-gate__cart {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--shc-muted);
	margin: 0 0 24px;
}
body.shc-storefront .shc-gate__cart a { color: var(--shc-black); }
body.shc-storefront .shc-gate__form + .shc-gate__form {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--shc-line);
}
body.shc-storefront .shc-gate__form h2 {
	font-family: 'Archivo', 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
body.shc-storefront .shc-gate__form label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--shc-muted);
	margin: 0 0 6px;
}
body.shc-storefront .shc-gate__form input[type="email"],
body.shc-storefront .shc-gate__form input[type="text"],
body.shc-storefront .shc-gate__form input[type="password"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--shc-line);
	border-radius: 0;
	background: var(--shc-white);
	padding: 13px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--shc-black);
	margin: 0 0 16px;
}
body.shc-storefront .shc-gate__form input:focus-visible {
	outline: 2px solid var(--shc-green);
	outline-offset: -2px;
	border-color: var(--shc-green);
}
body.shc-storefront .shc-gate__hint {
	font-size: 11px;
	color: var(--shc-muted);
	margin: -10px 0 18px;
}
body.shc-storefront .shc-gate__form .shc-btn { width: 100%; justify-content: center; }
body.shc-storefront .shc-gate__lost {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	color: var(--shc-muted);
}

@media (max-width: 900px) {
	body.shc-storefront .shc-gate { padding: 40px 20px 72px; }
	body.shc-storefront .shc-gate__grid { grid-template-columns: 1fr; gap: 36px; }
	/* Forms first on a phone: the customer already knows why they are
	   here, and the bag is waiting. */
	body.shc-storefront .shc-gate__forms { order: -1; padding: 24px 20px; }
}

/* -----------------------------------------------------------------
   17. Size buttons on variable products
   ----------------------------------------------------------------- */
body.shc-storefront .shc-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}
body.shc-storefront .shc-size {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	padding: 13px 18px;
	border: 1px solid var(--shc-line);
	border-radius: 0;
	background: transparent;
	color: var(--shc-black);
	cursor: pointer;
	min-height: 44px;
	box-shadow: none;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
body.shc-storefront .shc-size:hover { border-color: var(--shc-black); }
body.shc-storefront .shc-size.is-active {
	background: var(--shc-black);
	border-color: var(--shc-black);
	color: var(--shc-white);
}
body.shc-storefront .shc-size:focus-visible {
	outline: 2px solid var(--shc-green);
	outline-offset: 2px;
}
/* Hidden from sight, kept for assistive tech and for WooCommerce's own
   script, which reads and writes this control. */
body.shc-storefront .variations select.shc-select--replaced {
	/* !important because the product-page rules above are deeply scoped
	   and set width:100% — a 1440px-wide "hidden" control pushed the
	   whole page sideways. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}
/* WooCommerce's "Clear" link sits under the options. */
body.shc-storefront .woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--shc-muted);
	margin-bottom: 16px;
}

/* -----------------------------------------------------------------
   18. Product page: alignment, and nothing overlapping
   -----------------------------------------------------------------
   The gallery was floated AND sticky. A sticky float is pinned out of
   its own flow, so a summary column shorter than the gallery lets the
   pinned image ride down over the sections beneath it. The pieces below
   the fold — Story, Why We Chose It, Details — are full-width bands and
   must never share space with the photograph.
   ----------------------------------------------------------------- */
body.shc-storefront .woocommerce div.product > .woocommerce-product-gallery,
body.shc-storefront .woocommerce div.product > div.images {
	position: static !important;
	top: auto !important;
	margin-bottom: 56px;
}
/* Every band after the two columns starts on a clean line. */
body.shc-storefront .woocommerce div.product > .shc-pd-section,
body.shc-storefront .woocommerce div.product > .woocommerce-tabs,
body.shc-storefront .woocommerce div.product > .related,
body.shc-storefront .woocommerce div.product > .upsells,
body.shc-storefront .woocommerce div.product > .woocommerce-product-details__short-description {
	clear: both !important;
	float: none !important;
	width: 100% !important;
}

/* Summary column: one consistent vertical rhythm rather than each
   element bringing its own margin from WooCommerce or the theme. */
body.shc-storefront .woocommerce div.product > div.summary > * { margin-block: 0; }
body.shc-storefront .woocommerce div.product > div.summary > * + * { margin-top: 18px; }
body.shc-storefront .woocommerce div.product .product_title { margin-top: 0; }
body.shc-storefront .woocommerce div.product form.cart {
	display: block;
	margin: 24px 0 0;
}
body.shc-storefront .woocommerce div.product form.cart .quantity,
body.shc-storefront .woocommerce div.product form.cart .single_add_to_cart_button,
body.shc-storefront .woocommerce div.product form.cart .shc-buy-now {
	vertical-align: middle;
}
body.shc-storefront .woocommerce div.product form.cart .quantity {
	display: inline-block;
	margin-right: 10px;
}
body.shc-storefront .woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 52px;
	padding: 16px 34px;
}
/* A disabled Add to Cart must look disabled — an inert black button that
   gives no feedback reads as a broken store. */
body.shc-storefront .woocommerce div.product form.cart .single_add_to_cart_button.disabled,
body.shc-storefront .woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	opacity: .35;
	cursor: not-allowed;
}
body.shc-storefront .woocommerce div.product .woocommerce-variation-add-to-cart { margin-top: 4px; }
body.shc-storefront .woocommerce div.product .woocommerce-variation-description p { margin: 0 0 12px; }

/* The save button on a card is positioned over the media box, from
   outside the link rather than inside it. */
body.shc-storefront .shc-card__inner > .shc-save { position: absolute; top: 12px; right: 12px; z-index: 3; }

/* =================================================================
   19. Product page layout — authoritative
   -----------------------------------------------------------------
   Replaces the float arrangement above. Two reasons it had to go:

   1. Floats and painting order. A block after a float spans the full
      width, but the float paints ON TOP of its background. The black
      "Why We Chose It" band was full width all along — the product
      photo was simply painted over its left half. That is the
      "image overlapping the text": not a stacking bug, a float.

   2. Every selector was scoped `.woocommerce div.product`. Where that
      wrapper isn't present the whole layout silently reverted, which
      is how `clear: both` stopped applying to the bands.

   Grid with explicit placement fixes both: the gallery and summary are
   PLACED in row 2, everything else spans the full width in source
   order, and no rule depends on an ancestor that may not exist.
   ================================================================= */
body.shc-storefront div.product {
	display: grid !important;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
	column-gap: 56px;
	row-gap: 0;
	align-items: start;
	max-width: 1440px;
	margin-inline: auto !important;
	padding: 32px 40px 0 !important;
	float: none !important;
	width: auto !important;
	box-sizing: border-box;
}

/* Default for every direct child: full width, in source order. Nothing
   floats, so nothing can be painted over. */
body.shc-storefront div.product > * {
	grid-column: 1 / -1;
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none;
	min-width: 0;
}

/* The two that pair up. */
body.shc-storefront div.product > .woocommerce-product-gallery,
body.shc-storefront div.product > div.images {
	grid-column: 1;
	position: static !important;
	top: auto !important;
	margin: 0 0 56px !important;
}
body.shc-storefront div.product > div.summary,
body.shc-storefront div.product > .entry-summary {
	grid-column: 2;
	margin: 0 0 56px !important;
	padding: 0;
}
/* Category kicker sits with the title, above the summary. */
/* Full width above the pair — no explicit row number, so a product
   without an eyebrow does not leave an empty band behind. */
body.shc-storefront div.product > .shc-eyebrow--product {
	grid-column: 1 / -1;
	margin: 0 0 10px;
}

/* Editorial bands run to the container edge rather than sitting inside
   its gutter. */
body.shc-storefront div.product > .shc-pd-section {
	margin-inline: -40px !important;
	margin-block: 0;
}
body.shc-storefront div.product > .woocommerce-tabs,
body.shc-storefront div.product > .related,
body.shc-storefront div.product > .upsells {
	margin-inline: 0;
}

@media (max-width: 900px) {
	body.shc-storefront div.product {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 20px 0 !important;
		column-gap: 0;
	}
	/* Single column: let everything fall in source order. */
	body.shc-storefront div.product > .woocommerce-product-gallery,
	body.shc-storefront div.product > div.images,
	body.shc-storefront div.product > div.summary,
	body.shc-storefront div.product > .entry-summary,
	body.shc-storefront div.product > .shc-eyebrow--product {
		grid-column: 1;
		grid-row: auto;
		margin-bottom: 28px !important;
	}
	body.shc-storefront div.product > .shc-pd-section { margin-inline: -20px !important; }
}

/* The add-to-cart form is the single most important thing on this page.
   Give it room and make sure nothing above collapses it. */
body.shc-storefront div.product div.summary form.cart,
body.shc-storefront div.product div.summary .woocommerce-variation-add-to-cart {
	display: block;
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
}
body.shc-storefront div.product div.summary form.cart { margin-top: 26px; }
body.shc-storefront div.product div.summary .single_add_to_cart_button,
body.shc-storefront div.product div.summary .shc-buy-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.shc-storefront div.product div.summary .shc-buy-now { margin-left: 8px; }

/* -----------------------------------------------------------------
   20. Product summary details
   ----------------------------------------------------------------- */
/* "Size" belongs above its options, not beside them — WooCommerce lays
   the variations out as a table, which puts the label in a cell to the
   left and squeezes the buttons into what remains. */
body.shc-storefront div.product form.cart .variations,
body.shc-storefront div.product form.cart .variations tbody,
body.shc-storefront div.product form.cart .variations tr,
body.shc-storefront div.product form.cart .variations th,
body.shc-storefront div.product form.cart .variations td {
	display: block;
	width: auto;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
}
body.shc-storefront div.product form.cart .variations th.label {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shc-muted);
	margin: 0 0 10px;
}
body.shc-storefront div.product form.cart .variations th.label label { font-weight: inherit; }

/* Quantity and the two actions on one line. */
/* Specific enough to beat the display:block set in section 19 — that
   rule guards the form against being collapsed, this one arranges it. */
body.shc-storefront div.product div.summary .woocommerce-variation-add-to-cart,
body.shc-storefront div.product div.summary form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
body.shc-storefront div.product form.cart .quantity { margin: 0 !important; }
body.shc-storefront div.product form.cart .quantity input.qty {
	height: 52px;
	width: 68px;
	border: 1px solid var(--shc-line);
	border-radius: 0;
	text-align: center;
	font-family: inherit;
}
body.shc-storefront div.product div.summary .shc-buy-now { margin-left: 0; }

/* Headings inside the dark editorial band were black on black. */
body.shc-storefront .shc-pd-section--why,
body.shc-storefront .shc-pd-section--why :is(h1,h2,h3,h4,p,li,span) {
	color: var(--shc-white);
}
body.shc-storefront .shc-pd-section--why .shc-eyebrow { color: rgba(255,255,255,.66); }