/* 01-tokens.css */
:root {
  --color-bg: #FAF6EF;
  --color-surface: #FDFBF7;
  --color-ink: #1C1B19;
  --color-ink-muted: #5C564B;
  --color-accent: #B5502E;
  --color-accent-ink: #FAF6EF;
  --color-border: #E8DCC8;
  --color-input-border: #8C8578;
  --color-sale: #7A2E22;
  --color-success: #4B6B3A;
  --color-error: #8C2F26;
  --color-highlight: #E8DCC8;
  --color-band: #2B2A28;
  --font-heading: Fraunces, Georgia, "Times New Roman", serif;
  --fw-heading: 600;
  --font-body: Inter, "-apple-system", "Segoe UI", Helvetica, Arial, sans-serif;
  --fw-body: 400;
  --fs-h1: 40px;
  --lh-h1: 1.15;
  --fs-h2: 30px;
  --lh-h2: 1.2;
  --fs-h3: 22px;
  --lh-h3: 1.3;
  --fs-body-md: 16px;
  --lh-body-md: 1.65;
  --fs-body-sm: 14px;
  --lh-body-sm: 1.5;
  --fs-label: 13px;
  --lh-label: 1.4;
  --fs-price: 20px;
  --lh-price: 1.2;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-section: 96px;
  --space-container: 1280px;
  --space-gutter: 24px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --shadow-raised: 0 8px 24px rgba(28, 27, 25, 0.12);
}
@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;
    --lh-h1: 1.15;
    --fs-h2: 26px;
    --lh-h2: 1.2;
    --space-section: 56px;
    --space-gutter: 16px;
  }
}

/* 02-fonts.css */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("https://shadowbirds.com/wp-content/themes/shadowbirds-child/assets/css/../fonts/fraunces-latin.woff2") format("woff2"), url("/wp-content/uploads/shadowbirds-fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("https://shadowbirds.com/wp-content/themes/shadowbirds-child/assets/css/../fonts/inter-latin.woff2") format("woff2"), url("/wp-content/uploads/shadowbirds-fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 03-base.css */
/* 03-base.css: type, links, container. Every rule scoped to body.woopify.
 * Shoptimizer's .col-full boxes sections at 1170px; release it where a
 * section must go full-bleed (MCS QA-01, N-18). */
body.woopify { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
body.woopify :where(h1, h2, h3):not(:where(.payment_box *)) { font-family: var(--font-heading); font-weight: var(--fw-heading); color: var(--color-ink); }
body.woopify h1, body.woopify .woopify-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
body.woopify h2, body.woopify .woopify-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
body.woopify a:not(.button):not(:where(.payment_box *)) { color: var(--color-accent); }
/* Buttons: accent ground, accent-ink text. Links styled above must never reach a button (QA F-01: accent text on accent). */
/* Nothing inside WooCommerce's .payment_box (a gateway's own fields, buttons and links, D-115) is restyled here.
 * The exclusion sits in :where() so it adds no specificity: later, equal-weight rules (the cart drawer's
 * checkout link, the announcement bar's links, a builder's footer links) still win (QA R2-01). */
body.woopify .button:not(:where(.payment_box *)), body.woopify a.button:not(:where(.payment_box *)), body.woopify button.button:not(:where(.payment_box *)) { background-color: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
body.woopify :where(input:not([type=submit]):not([type=button]), select, textarea):not(:where(.payment_box *)) { border: 1px solid var(--color-input-border); }
body.woopify mark { background: var(--color-highlight); color: var(--color-ink); padding: 0 .15em; }
body.woopify .woopify-container { max-width: var(--space-container); margin: 0 auto; padding: 0 var(--space-gutter); }
body.woopify .woopify-section { padding: var(--space-section) 0; }
body.woopify .woopify-body { max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { body.woopify * { animation: none !important; transition: none !important; } }
/* Declared photo placeholder (D-135): on-palette block until Gabriel's approved photos arrive. */
body.woopify .woopify-photo-pending { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-ink-muted); font-size: var(--fs-label); }
body.woopify .woopify-need { background: var(--color-highlight); color: var(--color-ink); outline: 1px dashed var(--color-ink-muted); }
body.woopify .woopify-announcement { background: var(--color-accent); color: var(--color-accent-ink); text-align: center; font-size: var(--fs-label); padding: 8px 0; }
body.woopify .woopify-announcement a { color: inherit; }
/* WooCommerce notices (added to cart, errors, the order-pay page after a failed payment): tokens only,
 * so a dark or bright brand never inherits WooCommerce's light defaults with accent links (QA TB3-04). */
body.woopify :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); }
body.woopify .woocommerce-error { border-left-color: var(--color-error); }
body.woopify :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) a:not(.button) { color: var(--color-ink); text-decoration: underline; }
body.woopify :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice)::before { color: var(--color-ink); }
@media (max-width: 767px) {
  /* WooCommerce floats a notice's button to the right; on a phone it squeezed the text (QA TB3R2-15). */
  body.woopify :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { float: none; display: inline-block; margin-top: calc(var(--space-gutter) / 3); }
}
.woopify-admin-notice { background: #FFF4E5; color: #5A3A00; border: 2px solid #B26A00; padding: 12px 16px; margin: 16px; font: 14px/1.4 sans-serif; }

/* ---- Shadow Birds additions (2026-10-08) ---- */
/* Iron Charcoal: the footer band and hero scrim ground (design-system.md Colors, note under the table). */
body.woopify { --woopify-charcoal: #2B2A28; -webkit-font-smoothing: antialiased; }
body.woopify, body.woopify :where(p, li, input, select, textarea, button, label, td, th) { font-family: var(--font-body); }
body.woopify h3, body.woopify .woopify-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; }
body.woopify .woopify-main { overflow-x: clip; }
body.woopify .site-content > .shoptimizer-archive > .col-full,
body.woopify .site-content .col-full { max-width: var(--space-container); padding-left: var(--space-gutter); padding-right: var(--space-gutter); }
body.woopify.page-template-woopify-home .site-content .col-full,
body.woopify.page-template-woopify-slots .site-content .col-full,
body.woopify.page-template-woopify-collection .site-content .col-full { max-width: none; padding: 0; }
body.woopify .archive-header:empty, body.woopify .archive-header .col-full:empty { display: none; }
body.woopify .woopify-kicker, body.woopify .woopify-hero__kicker { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; color: var(--color-ink-muted); margin: 0 0 var(--space-sm); letter-spacing: .02em; }
body.woopify .woopify-subhead { font-size: 18px; color: var(--color-ink-muted); max-width: 60ch; margin: var(--space-sm) 0 0; }
body.woopify .woopify-section .woopify-h2 { margin: 0 0 var(--space-md); }
body.woopify .woopify-body p { margin: 0 0 var(--space-md); }
body.woopify .woopify-body p:last-child { margin-bottom: 0; }
/* Buttons (Components > Buttons): 48px, 24px sides, md radius, Inter 600, hover Barn Red, focus ring. */
body.woopify .woopify-button, body.woopify .button:not(:where(.payment_box *)), body.woopify button.single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-md);
  font: 600 var(--fs-body-md)/1.2 var(--font-body); text-decoration: none; border: 1px solid var(--color-accent); box-shadow: none; transition: background-color .15s ease; }
body.woopify .woopify-button:hover, body.woopify .button:not(:where(.payment_box *)):hover, body.woopify button.single_add_to_cart_button:hover { background-color: var(--color-sale); border-color: var(--color-sale); color: var(--color-accent-ink); }
body.woopify :is(a, button, summary, input, select, .woopify-option):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
body.woopify .woopify-button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-md);
  font: 600 var(--fs-body-md)/1.2 var(--font-body); text-decoration: none; border: 1px solid var(--color-ink); color: var(--color-ink); background: transparent; }
body.woopify .woopify-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
body.woopify .woopify-media figcaption, body.woopify .woopify-split__media figcaption { font-size: var(--fs-label); color: var(--color-ink-muted); margin-top: var(--space-sm); }
body.woopify .woopify-photo-pending { border-radius: var(--radius-md); padding: var(--space-md); text-align: center;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(232, 220, 200, .45) 14px 15px); background-color: var(--color-surface); }
body.woopify .woopify-visually-hidden, body.woopify .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) {
  body.woopify .woopify-subhead { font-size: var(--fs-body-md); }
}
/* Shadow Birds templates start right under the header (Shoptimizer adds 32px above #content). */
body.woopify.page-template-woopify-home #content, body.woopify.page-template-woopify-slots #content, body.woopify.page-template-woopify-collection #content { padding-top: 0; }
/* Elementor's kit CSS (loaded where an Elementor template renders, e.g. the contact form) sets its own fonts and
 * colours on .elementor-kit-* with the same weight as body.woopify; these win without !important. */
html body.woopify { font-family: var(--font-body); color: var(--color-ink); }
html body.woopify :is(h1, h2, h3, h4, h5, h6):not(:where(.payment_box *)) { font-family: var(--font-heading); color: var(--color-ink); }
html body.woopify .woopify-footer :is(h1, h2, h3, h4, p, a, span) { color: var(--color-bg); }
body.woopify .site-content .col-full { box-sizing: border-box; margin-left: auto; margin-right: auto; }

/* Slot photos chosen from the media library (inc/copy.php woopify_photo_pending): same frame as the placeholder. */
body.woopify .woopify-slot-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface); }
body.woopify .woopify-featured__more { margin: var(--space-md) 0 0; }

/* 04-chrome.css */
/* 04-chrome.css: header (logo, collections, search, cart), announcement, footer. Every rule under body.woopify. */
body.woopify #masthead.site-header { display: block; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: none; position: relative; z-index: 50; }
body.woopify #masthead .main-header.col-full { max-width: var(--space-container); padding: 0 var(--space-gutter); margin: 0 auto; border: 0; height: auto; min-height: 0; display: block; }
body.woopify .col-full-nav { display: none !important; }
body.woopify .woopify-header { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; position: relative; }
body.woopify .woopify-brand { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
body.woopify .woopify-logo { display: block; width: 96px; height: 32px; }
body.woopify .woopify-nav { flex: 1 1 auto; }
body.woopify .woopify-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-lg); }
body.woopify .woopify-nav__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
body.woopify .woopify-nav__list a:hover, body.woopify .woopify-nav__list .current-menu-item > a { color: var(--color-accent); }
body.woopify .woopify-header__actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
body.woopify .woopify-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-ink); border-radius: var(--radius-md); position: relative; cursor: pointer; }
body.woopify a.woopify-icon-button { color: var(--color-ink); }
body.woopify .woopify-icon-button:hover { color: var(--color-accent); background: transparent; }
body.woopify .woopify-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 11px/18px var(--font-body); text-align: center; }
body.woopify .woopify-menu-toggle, body.woopify .woopify-nav-close { display: none; }
body.woopify .woopify-search { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-md) 0; z-index: 60; }
body.woopify .woopify-search form { display: flex; gap: var(--space-sm); max-width: 640px; }
body.woopify .woopify-search input[type=search], body.woopify .woopify-search input[name=s] { flex: 1; min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--fs-body-md); }
body.woopify .woopify-search button { min-height: 48px; }
@media (max-width: 991px) {
  body.woopify .woopify-header { min-height: 60px; gap: var(--space-sm); }
  body.woopify .woopify-menu-toggle { display: inline-flex; margin-left: -10px; }
  body.woopify .woopify-brand { position: absolute; left: 50%; transform: translateX(-50%); }
  body.woopify .woopify-logo { width: 84px; height: 28px; }
  body.woopify .woopify-header__actions { margin-right: -10px; }
  body.woopify .woopify-nav { position: fixed; inset: 0 auto 0 0; width: min(320px, 85vw); background: var(--color-surface); box-shadow: var(--shadow-raised); padding: var(--space-md) var(--space-gutter); transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; z-index: 1000; overflow-y: auto; }
  body.woopify.woopify-nav-open .woopify-nav { transform: none; visibility: visible; transition: transform .2s ease; }
  body.woopify.woopify-nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(28, 27, 25, .35); z-index: 999; }
  body.woopify .woopify-nav-close { display: inline-flex; margin: 0 0 var(--space-sm) -10px; }
  body.woopify .woopify-nav__list { flex-direction: column; gap: 0; }
  body.woopify .woopify-nav__list a { min-height: 48px; font-size: var(--fs-body-md); border-bottom: 1px solid var(--color-border); width: 100%; }
}
/* Announcement bar (when home.md has [announcement]): Iron Charcoal, Porch White, label type. */
body.woopify .woopify-announcement { background: var(--woopify-charcoal); color: var(--color-bg); }
/* Shoptimizer's own top bar and below-header widget regions are not part of this design. */
body.woopify .top-bar, body.woopify .header-widget-region, body.woopify .below-content { display: none; }
/* Footer (Layout > Footer): Iron Charcoal ground, Porch White text (13.31:1). */
body.woopify .site-footer { background: var(--woopify-charcoal); color: var(--color-bg); padding: 0; margin: 0; border: 0; }
body.woopify .site-footer > .col-full { max-width: none; padding: 0; }
body.woopify .woopify-footer { background: var(--woopify-charcoal); color: var(--color-bg); padding: var(--space-xl) 0 var(--space-lg); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
body.woopify .woopify-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--space-lg); }
body.woopify .woopify-footer__heading { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-heading); color: var(--color-bg); margin: 0 0 var(--space-md); }
body.woopify .woopify-footer ul { list-style: none; margin: 0; padding: 0; }
body.woopify .woopify-footer p { margin: 0 0 var(--space-sm); color: var(--color-bg); }
body.woopify .woopify-footer a:not(.button), body.woopify .woopify-footer .woopify-footer__link { color: var(--color-bg); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
body.woopify .woopify-footer a:not(.button):hover { text-decoration: underline; }
body.woopify .woopify-footer__support a { text-decoration: underline; text-underline-offset: 3px; }
body.woopify .woopify-footer__legal { border-top: 1px solid rgba(250, 246, 239, .2); margin-top: var(--space-lg); padding-top: var(--space-md); font-size: var(--fs-label); }
@media (max-width: 767px) {
  body.woopify .woopify-footer__cols { grid-template-columns: 1fr; gap: var(--space-lg); }
  body.woopify .woopify-footer a:not(.button), body.woopify .woopify-footer .woopify-footer__link { min-height: 44px; }
}
body.woopify .woopify-footer__cols { padding-bottom: var(--space-lg); }
body.woopify .woopify-footer__legal { margin-top: 0; padding-top: var(--space-lg); }
/* One container edge: the header row uses the same 1280px box (gutters inside) as every section. */
body.woopify #masthead .main-header.col-full { box-sizing: border-box; }
/* Touch widths (tablet included): footer links are 44px rows. */
@media (max-width: 1024px) { body.woopify .woopify-footer a:not(.button), body.woopify .woopify-footer .woopify-footer__link { min-height: 44px; } }
/* Search panel: a raised strip under the header, input plus an accent button. */
body.woopify .woopify-search { background: var(--color-surface) !important; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-raised); }
body.woopify .woopify-search form { display: flex !important; align-items: stretch; gap: var(--space-sm); max-width: none; margin: 0; position: static; }
body.woopify .woopify-search form::before, body.woopify .woopify-search form::after { display: none !important; }
body.woopify .woopify-search input[type=search] { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 var(--space-md) !important; border: 1px solid var(--color-input-border) !important; border-radius: var(--radius-md) !important; background: var(--color-bg) !important; color: var(--color-ink); font: 400 var(--fs-body-md)/1 var(--font-body); }
body.woopify .woopify-search button[type=submit] { flex: 0 0 auto; position: static !important; width: auto !important; min-height: 48px; padding: 0 20px !important; border: 0 !important; border-radius: var(--radius-md) !important; background: var(--color-accent) !important; color: var(--color-accent-ink) !important; font: 600 var(--fs-body-md)/1 var(--font-body) !important; text-indent: 0 !important; overflow: visible !important; }
/* Phone menu: the dimmed page sits under the header, so the drawer (inside the header) is never dimmed. */
body.woopify.woopify-nav-open::after { z-index: 40; }

/* 2026-10-09: no count bubble on an empty cart. */
body.woopify .woopify-cart-count.is-zero { display: none; }

/* 05-home.css */
/* 05-home.css: home sections (design-system.md Layout > Home). */
/* Hero: full-bleed photo; at desktop the text block sits bottom-left on a solid Iron Charcoal scrim (AA whatever
 * the photo); the caption runs as one label line under the hero. At phone the photo (4:3) sits above the text. */
body.woopify .woopify-section--hero { padding: 0; }
body.woopify .woopify-hero { position: relative; }
body.woopify .woopify-hero__media { margin: 0; }
body.woopify .woopify-hero__media .woopify-photo-pending, body.woopify .woopify-hero__img { display: flex; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 72px); min-height: 520px; object-fit: cover; border-radius: 0; border: 0; }
body.woopify .woopify-hero__inner { position: absolute; left: 0; right: 0; bottom: var(--space-xl); }
body.woopify .woopify-hero__text { background: var(--woopify-charcoal); color: var(--color-bg); padding: var(--space-lg); max-width: 560px; border-radius: var(--radius-md); }
body.woopify .woopify-hero__text .woopify-h1 { color: var(--color-bg); margin: 0 0 var(--space-md); }
body.woopify .woopify-hero__text .woopify-hero__kicker, body.woopify .woopify-hero__text .woopify-hero__subhead { color: var(--color-bg); }
body.woopify .woopify-hero__subhead { font-size: 18px; margin: 0 0 var(--space-lg); }
body.woopify .woopify-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
body.woopify .woopify-hero__text .woopify-button-secondary { border-color: var(--color-bg); color: var(--color-bg); }
body.woopify .woopify-hero__text .woopify-button-secondary:hover { background: var(--color-bg); color: var(--woopify-charcoal); }
body.woopify .woopify-hero__caption { margin: 0; padding: var(--space-sm) 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--color-ink-muted); }
body.woopify .woopify-hero__caption .woopify-container { display: block; }
@media (max-width: 767px) {
  body.woopify .woopify-hero__media .woopify-photo-pending, body.woopify .woopify-hero__img { aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
  body.woopify .woopify-hero__inner { position: static; padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  body.woopify .woopify-hero__text { background: transparent; color: var(--color-ink); padding: 0; max-width: none; }
  body.woopify .woopify-hero__text .woopify-h1 { color: var(--color-ink); }
  body.woopify .woopify-hero__text .woopify-hero__kicker { color: var(--color-ink-muted); }
  body.woopify .woopify-hero__text .woopify-hero__subhead { color: var(--color-ink); font-size: var(--fs-body-md); }
  body.woopify .woopify-hero__actions { flex-direction: column; gap: var(--space-sm); }
  body.woopify .woopify-hero__actions > a { width: 100%; }
  body.woopify .woopify-hero__text .woopify-button-secondary { border-color: var(--color-ink); color: var(--color-ink); }
}
/* Two-column text and photo ([problem], About [story]). */
body.woopify .woopify-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: center; }
body.woopify .woopify-split--reverse { grid-template-columns: 7fr 5fr; }
body.woopify .woopify-split--reverse .woopify-split__media { order: 2; }
body.woopify .woopify-split__media { margin: 0; }
body.woopify .woopify-split__media .woopify-photo-pending { aspect-ratio: 4 / 5; }
body.woopify .woopify-split__text ul { list-style: none; padding: 0; margin: var(--space-md) 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
body.woopify .woopify-split__text ul li { font-weight: 600; font-size: var(--fs-body-sm); padding-left: 18px; position: relative; }
body.woopify .woopify-split__text ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--color-accent); border-radius: var(--radius-sm); }
@media (max-width: 767px) {
  body.woopify .woopify-split, body.woopify .woopify-split--reverse { grid-template-columns: 1fr; gap: var(--space-lg); }
  body.woopify .woopify-split--reverse .woopify-split__media { order: 0; }
}
/* Collection tiles: 4 across, 2 by 2 at phone; 4:5 photo, Fraunces name, one line, text link. */
body.woopify .woopify-section--categories { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
body.woopify .woopify-tiles { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
body.woopify .woopify-tile__link { display: flex; flex-direction: column; color: var(--color-ink); text-decoration: none; height: 100%; }
body.woopify .woopify-tile__media { display: block; margin-bottom: var(--space-md); }
body.woopify .woopify-tile__media img, body.woopify .woopify-tile__media .woopify-photo-pending { display: flex; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background-color: var(--color-bg); }
body.woopify .woopify-tile__name { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-heading); }
body.woopify .woopify-tile__desc { color: var(--color-ink-muted); font-size: var(--fs-body-sm); margin: var(--space-xs) 0 auto; }
body.woopify .woopify-tile .woopify-text-link { margin-top: var(--space-sm); }
@media (max-width: 767px) {
  body.woopify .woopify-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  body.woopify .woopify-tile__name { font-size: 18px; }
}
/* How it works: numbered steps in one row, stacked at phone. */
body.woopify .woopify-steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); counter-reset: none; }
body.woopify .woopify-steps li { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-weight: 600; }
body.woopify .woopify-steps__n { flex: 0 0 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 18px/1 var(--font-heading); }
@media (max-width: 767px) { body.woopify .woopify-steps { grid-template-columns: 1fr; gap: var(--space-sm); } }
/* Proof: quotes word for word, two columns, no stars. */
body.woopify .woopify-section--proof { background: var(--color-surface); border-top: 1px solid var(--color-border); }
body.woopify .woopify-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
body.woopify .woopify-quote { margin: 0; padding: var(--space-lg); border-left: 3px solid var(--color-accent); background: var(--color-bg); }
body.woopify .woopify-quote blockquote { margin: 0; padding: 0; border: 0; font: 500 20px/1.45 var(--font-heading); color: var(--color-ink); quotes: none; }
body.woopify .woopify-quote blockquote::before, body.woopify .woopify-quote blockquote::after { content: none; }
body.woopify .woopify-quote blockquote p { margin: 0; }
body.woopify .woopify-quote figcaption { margin-top: var(--space-md); font-size: var(--fs-body-sm); color: var(--color-ink-muted); }
@media (max-width: 767px) { body.woopify .woopify-quotes { grid-template-columns: 1fr; } body.woopify .woopify-quote blockquote { font-size: 18px; } }
/* Featured row: the shop's own cards (06-collection.css). */
body.woopify .woopify-section--featured ul.products { margin-top: 0; }
body.woopify .woopify-tile__link .woopify-tile__name { color: var(--color-ink); }
body.woopify .woopify-tile__link .woopify-tile__desc { color: var(--color-ink-muted); }
body.woopify .woopify-quote blockquote p { font: inherit; color: inherit; }

/* 2026-10-09 visual QA: phone. The benefit list stacks one per line instead of wrapping 1 + 2; quote cards use 24px. */
@media (max-width: 767px) {
  body.woopify .woopify-split__text ul { flex-direction: column; gap: var(--space-sm); }
  body.woopify .woopify-quote { padding: 24px 20px; }
}

/* 06-collection.css */
/* 06-collection.css: product cards and collection pages (Components > Product card; Layout > Collection). */
body.woopify ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-lg); margin: 0; padding: 0; }
body.woopify ul.products::before, body.woopify ul.products::after { content: none !important; }
body.woopify ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; text-align: left; background: transparent; border: 0; box-shadow: none; }
body.woopify ul.products li.product .woocommerce-image__wrapper, body.woopify ul.products li.product .woocommerce-LoopProduct-link { display: block; }
body.woopify ul.products li.product img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 0 0 var(--space-md); }
body.woopify ul.products li.product .woocommerce-loop-product__title { font: 500 18px/1.3 var(--font-heading); color: var(--color-ink); margin: 0 0 var(--space-xs); padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.woopify ul.products li.product .woocommerce-loop-product__title a { color: var(--color-ink); text-decoration: none; }
body.woopify ul.products li.product .price { font: 600 var(--fs-body-md)/1.3 var(--font-body); color: var(--color-ink); margin: 0; }
body.woopify ul.products li.product .price del { color: var(--color-ink-muted); font-weight: 400; }
body.woopify ul.products li.product .price ins { color: var(--color-sale); text-decoration: none; }
/* No add-to-cart button on the card (the whole card links to the product). */
body.woopify ul.products li.product :is(.button, .add_to_cart_button, .product_type_variable, .product_type_simple, .added_to_cart) { display: none !important; }
body.woopify ul.products li.product .onsale, body.woopify ul.products li.product .product-label { display: none; }
body.woopify ul.products li.product .star-rating { margin: 0 0 var(--space-xs); }
/* Collection page: h1, intro (two sentences max), sorting, grid, pagination. */
body.woopify .woopify-collection { padding: var(--space-xl) 0 var(--space-section); }
body.woopify .woopify-collection__header { margin-bottom: var(--space-lg); }
body.woopify .woopify-collection__header .woopify-h1 { margin: 0 0 var(--space-sm); }
body.woopify .woopify-collection__intro { color: var(--color-ink-muted); }
body.woopify .woopify-collection .woocommerce { margin: 0; }
body.woopify .woopify-collection :is(.woocommerce-result-count, .woocommerce-ordering) { margin: 0 0 var(--space-lg); font-size: var(--fs-body-sm); color: var(--color-ink-muted); }
body.woopify .woopify-collection .woocommerce-result-count { float: left; line-height: 44px; }
body.woopify .woopify-collection .woocommerce-ordering { float: right; }
body.woopify .woopify-collection ul.products { clear: both; }
body.woopify .woocommerce-ordering select { min-height: 44px; padding: 0 36px 0 var(--space-md); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-ink); font-size: var(--fs-body-sm); }
body.woopify nav.woocommerce-pagination { margin-top: var(--space-xl); text-align: center; }
body.woopify nav.woocommerce-pagination ul { border: 0; display: inline-flex; gap: var(--space-sm); }
body.woopify nav.woocommerce-pagination ul li { border: 0; }
body.woopify nav.woocommerce-pagination ul li :is(a, span) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); background: var(--color-surface); }
body.woopify nav.woocommerce-pagination ul li span.current { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
@media (max-width: 991px) { body.woopify ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  body.woopify ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  body.woopify ul.products li.product .woocommerce-loop-product__title { font-size: 16px; }
  body.woopify .woopify-collection { padding-top: var(--space-lg); }
  body.woopify .woopify-collection .woocommerce-result-count { float: none; line-height: 1.4; margin-bottom: var(--space-sm); }
  body.woopify .woopify-collection .woocommerce-ordering { float: none; }
  body.woopify .woocommerce-ordering select { width: 100%; }
}
/* Shoptimizer prints the product's categories on each card; not part of the card design. */
body.woopify ul.products li.product .product__categories { display: none; }
body.woopify ul.products li.product .woocommerce-loop-product__title a { display: flex; align-items: flex-start; min-height: 44px; }
/* Shoptimizer widens ul.products past its column for gutters; the grid's own gap replaces that. */
body.woopify ul.products { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Sorting row: result count left, sort control right, one line at desktop. */
body.woopify .shoptimizer-sorting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 0 var(--space-lg); }
body.woopify .shoptimizer-sorting .woocommerce-result-count { order: 1; float: none; margin: 0; line-height: 1.4; }
body.woopify .shoptimizer-sorting .woocommerce-ordering { order: 2; float: none; margin: 0; }
body.woopify .shoptimizer-sorting .woocommerce-notices-wrapper:empty { display: none; }
@media (max-width: 767px) {
  body.woopify .shoptimizer-sorting { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
}
/* After the grid: pagination only, centred (the sort control and count already sit above the grid). */
body.woopify .shoptimizer-sorting.sorting-end { justify-content: center; margin: var(--space-xl) 0 0; }
body.woopify .shoptimizer-sorting.sorting-end :is(.woocommerce-ordering, .woocommerce-result-count) { display: none; }
body.woopify .shoptimizer-sorting.sorting-end nav.woocommerce-pagination { margin: 0; float: none; }
body.woopify nav.woocommerce-pagination ul li span.current { color: var(--color-bg) !important; background: var(--color-ink) !important; }
body.woopify nav.woocommerce-pagination ul li a { color: var(--color-ink) !important; text-decoration: none; }
/* Card spacing: rows breathe; the 44px title link only at phone. */
body.woopify ul.products { row-gap: 48px; }
@media (min-width: 1025px) { body.woopify ul.products li.product .woocommerce-loop-product__title a { min-height: 0; } }
body.woopify .shoptimizer-sorting .woocommerce-result-count { white-space: nowrap; }
@media (min-width: 768px) { body.woopify .shoptimizer-sorting .woocommerce-ordering select { width: auto; min-width: 220px; } }
/* WooCommerce archives (shop, search, category URLs): no sidebar, so the content column is full width and
 * cleared (Shoptimizer floated it, and the footer rose under the grid); the archive title shows as the h1. */
body.woopify:is(.woocommerce-shop, .search, .tax-product_cat, .tax-product_tag, .post-type-archive-product) .content-area { float: none !important; width: 100% !important; margin: 0 !important; }
body.woopify .site-content .col-full::after { content: ""; display: table; clear: both; }
body.woopify .woocommerce-products-header { display: block !important; height: auto !important; margin: var(--space-lg) 0 var(--space-md); }
body.woopify .woocommerce-products-header__title.page-title { display: block !important; font: var(--fw-heading) var(--fs-h1)/var(--lh-h1) var(--font-heading); color: var(--color-ink); margin: 0; }

/* 2026-10-09 visual QA (Gabriel): Shoptimizer paints a white card with a shadow behind a product on hover/focus
   (li.product::before) and shrinks the photo; the title then sits flush against that card's edge. The design system
   says cards have no shadow, so that hover card is off; hover shows on the title instead. */
body.woopify ul.products li.product::before { display: none !important; }
body.woopify ul.products li.product:hover :is(img, .woocommerce-image__wrapper) { transform: none !important; }
body.woopify ul.products li.product:hover .woocommerce-loop-product__title a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Phone: the title no longer reserves a 44px line (the photo above is the same link and the big target), so the
   price sits right under the name. */
body.woopify ul.products li.product .woocommerce-loop-product__title a { min-height: 0; }
/* Sort control: the arrow sits 16px in from the right edge, with room for it. */
body.woopify .woocommerce-ordering select { padding-right: 48px !important; background-position: right 16px center !important; background-size: 12px auto !important; background-repeat: no-repeat !important; }
/* WooCommerce's own archives (/shop/, /product-category/…, product search) outside the collection template: no grey
   category header band, and the result count in the palette. */
body.woopify .woocommerce-products-header { background: transparent !important; padding-left: 0; padding-right: 0; }
body.woopify .woocommerce-result-count { color: var(--color-ink-muted) !important; border-color: var(--color-border) !important; }
/* Category archives print the [intro] slot inside WooCommerce's header, which is already inside the page container:
   no second gutter or section padding there; Shoptimizer's category banner image is not part of the collection layout. */
body.woopify .woocommerce-products-header .woopify-section--intro { padding: 0 0 var(--space-md); }
body.woopify .woocommerce-products-header .woopify-container { padding: 0; max-width: none; }
body.woopify .woocommerce-products-header .cg-cat-image { display: none; }

/* 2026-10-09 mobile QA (independent re-check of 5e): design-system.md Components > Tap targets ("at phone every
   link, button and control is at least 44px tall, padding, not larger type"). The card title link gets a 44px hit
   area from padding that negative margins take back, so nothing on the card moves (Gabriel 2026-10-09: no 44px
   line under the title). The title box gets the same padding so its clip (2-line clamp) does not cut the hit area. */
@media (max-width: 1024px) {
  body.woopify ul.products li.product .woocommerce-loop-product__title { padding: 12px 0; margin: -12px 0 calc(var(--space-xs) - 12px); position: relative; z-index: 1; }
  body.woopify ul.products li.product .woocommerce-loop-product__title a { display: block; padding: 12px 0; margin: -12px 0; }
}
/* Result count on WooCommerce's own archives (/shop/, product search): 12px from the parent; body-sm as on the
   collection pages (smallest role at phone is label, 13px). */
body.woopify .shoptimizer-sorting .woocommerce-result-count, body.woopify p.woocommerce-result-count { font-size: var(--fs-body-sm); }
/* The collection [intro] carries the section marker (so a QA count sees the rendered slot); it keeps its own spacing. */
body.woopify .woopify-collection__intro.woopify-section { padding: 0; }

/* 07-product.css */
/* 07-product.css: product page (design-system.md Layout > Product; Components > Product page buy box). */
body.woopify.single-product .site-content { padding-top: var(--space-lg); }
body.woopify.single-product div.product .product_title { font: var(--fw-heading) var(--fs-h1)/var(--lh-h1) var(--font-heading); color: var(--color-ink); margin: 0 0 var(--space-sm); }
body.woopify.single-product div.product .summary .price { font: 600 var(--fs-price)/var(--lh-price) var(--font-body); color: var(--color-ink); margin: 0 0 var(--space-md); }
body.woopify.single-product div.product .summary .price ins { color: var(--color-sale); text-decoration: none; }
body.woopify.single-product div.product .summary .price del { color: var(--color-ink-muted); }
body.woopify.single-product .woocommerce-product-details__short-description { font-size: 18px; color: var(--color-ink); margin: 0 0 var(--space-lg); }
body.woopify.single-product .woocommerce-product-details__short-description p { margin: 0; }
/* Gallery: main photo plus a thumbnail row. */
body.woopify.single-product div.product .woocommerce-product-gallery { margin-bottom: var(--space-lg); }
body.woopify.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--radius-md); background: var(--color-surface); }
body.woopify.single-product div.product .flex-control-thumbs { display: flex; gap: var(--space-sm); margin: var(--space-sm) 0 0; padding: 0; overflow-x: auto; list-style: none; }
body.woopify.single-product div.product .flex-control-thumbs li { flex: 0 0 80px; width: 80px !important; margin: 0 !important; float: none !important; }
body.woopify.single-product div.product .flex-control-thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); opacity: 1; }
body.woopify.single-product div.product .flex-control-thumbs img.flex-active { border-color: var(--color-ink); }
/* Finish buttons (WooCommerce's select stays in the form, hidden; theme.js draws the buttons). */
body.woopify.single-product table.variations { margin: 0 0 var(--space-md); border: 0; }
body.woopify.single-product table.variations :is(th, td) { display: block; padding: 0; border: 0; background: transparent; text-align: left; }
body.woopify.single-product table.variations th.label label, body.woopify.single-product table.variations td.label label { font: 600 var(--fs-label)/var(--lh-label) var(--font-body); color: var(--color-ink); margin: 0 0 var(--space-sm); display: block; }
body.woopify.single-product .woopify-options { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
body.woopify.single-product .woopify-option { min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-input-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); font: 400 var(--fs-body-md)/1 var(--font-body); cursor: pointer; }
body.woopify.single-product .woopify-option.is-selected { border: 2px solid var(--color-ink); font-weight: 600; }
body.woopify.single-product .woopify-option:disabled { opacity: .4; cursor: not-allowed; }
body.woopify.single-product .reset_variations { display: none !important; }
body.woopify.single-product .single_variation_wrap .woocommerce-variation-price { display: none; }
body.woopify.single-product .woocommerce-variation-availability p { margin: 0 0 var(--space-sm); font-size: var(--fs-body-sm); }
/* Quantity stepper (44 × 44 buttons) beside a full-width add to cart. */
body.woopify.single-product form.cart:not(.variations_form), body.woopify.single-product .woocommerce-variation-add-to-cart { display: flex; gap: var(--space-sm); align-items: stretch; margin: 0; }
body.woopify.single-product form.cart .quantity { margin: 0 !important; display: inline-flex; align-items: center; border: 1px solid var(--color-input-border); border-radius: var(--radius-md); background: var(--color-surface); height: 48px; }
body.woopify.single-product form.cart .quantity :is(.minus, .plus, button) { width: 44px; height: 44px; min-height: 44px; border: 0; background: transparent; color: var(--color-ink); font-size: 18px; padding: 0; }
body.woopify.single-product form.cart .quantity input.qty { width: 40px; height: 44px; border: 0; background: transparent; text-align: center; font: 600 var(--fs-body-md)/1 var(--font-body); padding: 0; -moz-appearance: textfield; }
body.woopify.single-product form.cart button.single_add_to_cart_button { flex: 1 1 auto; width: auto; height: 48px; margin: 0; background: var(--color-accent); color: var(--color-accent-ink); }
body.woopify.single-product .woopify-buy-note { margin: var(--space-md) 0 0; font-size: var(--fs-body-sm); color: var(--color-ink-muted); }
body.woopify.single-product .woopify-buy-note p, body.woopify.single-product .woopify-options-help p { margin: 0; }
body.woopify.single-product .woopify-options-help { margin: var(--space-md) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-ink-muted); }
/* Trust row: two plain items with outline icons. */
body.woopify .woopify-trust { list-style: none; margin: var(--space-lg) 0 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
body.woopify .woopify-trust li { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--color-ink); margin: 0; }
body.woopify .woopify-trust svg { flex: 0 0 20px; color: var(--color-ink); }
/* Sections after the summary: Specifications, The story, proof, FAQ. */
body.woopify.single-product .woopify-section { padding: var(--space-xl) 0 0; }
body.woopify.single-product .woopify-section .woopify-container { padding: 0; max-width: 820px; margin: 0; }
body.woopify.single-product .woopify-section--highlights ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
body.woopify.single-product .woopify-section--highlights li { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
body.woopify.single-product .woocommerce-tabs { margin-top: var(--space-xl); }
body.woopify.single-product .woocommerce-tabs ul.tabs li a { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink); }
/* Phone sticky add-to-cart bar: bottom of the screen while the main add to cart is off screen. */
body.woopify .woopify-sticky-cart { display: none; }
@media (max-width: 767px) {
  body.woopify.single-product .site-content { padding-top: var(--space-md); }
  body.woopify.single-product div.product .product_title { font-size: var(--fs-h1); }
  body.woopify.single-product div.product .woocommerce-product-gallery { margin-bottom: var(--space-md); }
  body.woopify.single-product div.product .woocommerce-product-gallery__image img { aspect-ratio: 1; object-fit: cover; }
  body.woopify.single-product div.product .flex-control-thumbs li { flex-basis: 64px; width: 64px !important; }
  body.woopify.single-product .woocommerce-product-details__short-description { font-size: var(--fs-body-md); margin-bottom: var(--space-md); }
  body.woopify .woopify-trust { grid-template-columns: 1fr 1fr; }
  body.woopify .woopify-sticky-cart { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: 72px; padding: 0 var(--space-md); gap: var(--space-md); align-items: center; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-raised); transform: translateY(110%); transition: transform .2s ease; }
  body.woopify .woopify-sticky-cart.is-visible { transform: none; }
  body.woopify .woopify-sticky-cart__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  body.woopify .woopify-sticky-cart__name { font: 600 var(--fs-body-sm)/1.3 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.woopify .woopify-sticky-cart__price { font: 600 var(--fs-body-md)/1.3 var(--font-body); }
  body.woopify .woopify-sticky-cart__price :is(.price, .amount) { font: inherit; }
  body.woopify .woopify-sticky-cart__button { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { body.woopify .woopify-sticky-cart { transition: none; } }
/* 2026-10-08 fixes after the first render (Shoptimizer 2.9.8 markup). */
body.woopify.single-product .site-main { padding-top: 0; }
/* The variation description repeats [promise]; an in-stock count is not shown (no scarcity cues). */
body.woopify.single-product .woocommerce-variation-description, body.woopify.single-product .woocommerce-variation-availability .stock.in-stock { display: none; }
/* Quantity stepper: − input + in one row, 44 × 44 buttons (Shoptimizer stacks its two buttons). */
body.woopify.single-product form.cart .quantity { display: inline-flex; align-items: center; overflow: hidden; }
body.woopify.single-product form.cart .quantity .quantity-nav { display: contents; }
body.woopify.single-product form.cart .quantity .quantity-button { position: static; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; color: var(--color-ink); font: 400 20px/1 var(--font-body); background: transparent; border: 0; }
body.woopify.single-product form.cart .quantity .quantity-button::before, body.woopify.single-product form.cart .quantity .quantity-button::after { display: none; }
body.woopify.single-product form.cart .quantity .quantity-down { order: 0; }
body.woopify.single-product form.cart .quantity input.qty { order: 1; }
body.woopify.single-product form.cart .quantity .quantity-up { order: 2; }
body.woopify.single-product form.cart .quantity .quantity-down:not(:empty), body.woopify.single-product form.cart .quantity .quantity-up:not(:empty) { font-size: 0; }
body.woopify.single-product form.cart .quantity .quantity-down::after { content: "\2212"; display: block; font-size: 20px; }
body.woopify.single-product form.cart .quantity .quantity-up::after { content: "+"; display: block; font-size: 20px; }
body.woopify.single-product div.product .flex-control-thumbs li { height: auto !important; }
body.woopify.single-product div.product .flex-control-thumbs img { width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 767px) {
  body.woopify.single-product .site-content { padding-top: var(--space-sm); }
  body.woopify.single-product div.product .product_title { margin-bottom: var(--space-xs); }
  body.woopify.single-product div.product .summary .price { margin-bottom: var(--space-sm); }
  body.woopify.single-product .woocommerce-product-details__short-description { margin-bottom: var(--space-md); }
  body.woopify.single-product table.variations { margin-bottom: var(--space-sm); }
}
/* Sections after the summary sit in Shoptimizer's .related-wrapper, whose inner blocks carry 15px side padding
 * (.product-details-wrapper, .woocommerce-tabs): the copy sections match it, on the page ground, not a white panel. */
body.woopify.single-product .related-wrapper { background: transparent; }
body.woopify.single-product .related-wrapper .woopify-section .woopify-container { padding-left: 0; padding-right: 0; }
/* One container edge on the product page: the page column carries the gutter; Shoptimizer's inner wrappers
 * (product details, tabs, related) add no side padding or offsets of their own. */
body.woopify.single-product .site-content .col-full { box-sizing: border-box; max-width: var(--space-container); margin-left: auto; margin-right: auto; padding-left: var(--space-gutter); padding-right: var(--space-gutter); }
body.woopify.single-product :is(.content-area, .site-main, .product-details-wrapper, .related-wrapper, .woocommerce-tabs, .woocommerce-tabs .panel) { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; width: auto !important; left: auto !important; right: auto !important; }
/* Reviews (WooCommerce tabs + CusRev form): tokens only, readable spacing, 44px controls at phone. */
body.woopify.single-product .woocommerce-tabs { padding-top: var(--space-xl); }
body.woopify.single-product .woocommerce-tabs :is(p, label, span, h2, h3, a:not(.button), .comment-reply-title, .woocommerce-noreviews) { color: var(--color-ink); }
body.woopify.single-product .woocommerce-tabs .required { color: var(--color-error); }
body.woopify.single-product .woocommerce-tabs ul.tabs { border: 0; margin: 0 0 var(--space-md); padding: 0; }
body.woopify.single-product .woocommerce-tabs ul.tabs li a { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-heading); padding: 0; }
body.woopify.single-product .woocommerce-tabs .comment-reply-title { display: block; font: 500 var(--fs-h3)/var(--lh-h3) var(--font-heading); margin: var(--space-lg) 0 var(--space-md); }
body.woopify.single-product #review_form :is(input[type=text], input[type=email], textarea) { width: 100%; min-height: 48px; padding: 10px var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); font: 400 var(--fs-body-md)/1.4 var(--font-body); }
body.woopify.single-product #review_form label { display: block; font: 600 var(--fs-label)/var(--lh-label) var(--font-body); margin: 0 0 var(--space-sm); }
body.woopify.single-product #review_form p { margin: 0 0 var(--space-md); }
body.woopify.single-product #review_form p.stars a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
body.woopify.single-product #review_form .form-submit input[type=submit], body.woopify.single-product #review_form button[type=submit] { min-height: 48px; padding: 0 24px; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--fs-body-md)/1.2 var(--font-body); border: 0; }
body.woopify.single-product #review_form input[type=file] { min-height: 44px; font-size: var(--fs-body-sm); }
/* Gallery zoom trigger: a 44px tap target. */
body.woopify.single-product .woocommerce-product-gallery__trigger { width: 44px !important; height: 44px !important; display: inline-flex; align-items: center; justify-content: center; }
/* Clearfix pseudo-elements became flex items (8px gaps at both ends of the quantity + add to cart row). */
body.woopify.single-product :is(form.cart, .woocommerce-variation-add-to-cart)::before, body.woopify.single-product :is(form.cart, .woocommerce-variation-add-to-cart)::after { content: none !important; display: none !important; }
/* Reviews block on the page ground, left-aligned heading, readable measure. */
body.woopify.single-product .woocommerce-tabs, body.woopify.single-product .woocommerce-tabs .panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.woopify.single-product .woocommerce-tabs ul.tabs { display: flex; justify-content: flex-start; text-align: left; }
body.woopify.single-product .woocommerce-tabs ul.tabs::before, body.woopify.single-product .woocommerce-tabs ul.tabs::after, body.woopify.single-product .woocommerce-tabs ul.tabs li::before, body.woopify.single-product .woocommerce-tabs ul.tabs li::after, body.woopify.single-product .woocommerce-tabs ul.tabs li a::after { display: none !important; }
body.woopify.single-product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; }
body.woopify.single-product .woocommerce-tabs ul.tabs li a { font: var(--fw-heading) var(--fs-h2)/var(--lh-h2) var(--font-heading); color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-sm); }
body.woopify.single-product .woocommerce-tabs ul.tabs li a span { position: static; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-highlight); color: var(--color-ink); font: 600 var(--fs-label)/1 var(--font-body); }
body.woopify.single-product #reviews { max-width: 820px; }
body.woopify.single-product #review_form p.stars a { color: var(--color-ink-muted); }
html body.woopify.single-product :is(#reviews, #review_form_wrapper, #review_form) :is(label, .comment-reply-title, p, span:not(.required)) { color: var(--color-ink); }
html body.woopify.single-product .woocommerce-tabs ul.tabs li a span { background: var(--color-highlight) !important; color: var(--color-ink) !important; }

/* 2026-10-09 visual QA: review form. The image upload is a plain button, not a full-width bordered box (the whole
   box opened the file picker); its label lines up with the other labels; the rating stars use the palette. */
body.woopify.single-product #review_form input[type=file] { width: auto; max-width: 100%; min-height: 0; padding: 0; border: 0 !important; background: none; font: 400 var(--fs-body-sm)/1.4 var(--font-body); color: var(--color-ink-muted); cursor: default; }
body.woopify.single-product #review_form input[type=file]::file-selector-button { min-height: 44px; margin-right: var(--space-md); padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-md); background: transparent; color: var(--color-ink); font: 600 var(--fs-body-sm)/1 var(--font-body); cursor: pointer; }
body.woopify.single-product #review_form input[type=file]::file-selector-button:hover { background: var(--color-surface); }
body.woopify.single-product #review_form .cr-upload-local-images { padding: 0; margin: 0 0 var(--space-lg); border: 0; background: none; }
body.woopify.single-product #review_form .cr-upload-local-images label { display: block; padding: 0 !important; margin: 0 0 var(--space-sm); font: 600 var(--fs-label)/var(--lh-label) var(--font-body); color: var(--color-ink); }
body.woopify.single-product #review_form p.stars a::before { color: var(--color-input-border); }
body.woopify.single-product #review_form p.stars:hover a::before, body.woopify.single-product #review_form p.stars.selected a::before { color: var(--color-accent); }
body.woopify.single-product #review_form p.stars a:hover ~ a::before, body.woopify.single-product #review_form p.stars.selected a.active ~ a::before { color: var(--color-input-border); }
/* Phone: the sticky add-to-cart bar (72px) no longer covers the end of the footer. */
@media (max-width: 767px) { body.woopify.single-product:has(.woopify-sticky-cart) { padding-bottom: 72px; } }
/* CusRev sizes the upload input by its ID (#cr_review_image, width 100%): match that to keep it button-sized. */
body.woopify.single-product #review_form .cr-upload-local-images #cr_review_image { display: inline-block; width: auto; margin: 0; }
/* Only the button opens the file picker: the browser's "No file chosen" text (part of the input) is hidden, so the
   input is exactly the button's size. CusRev shows chosen files as previews under it. */
body.woopify.single-product #review_form .cr-upload-local-images #cr_review_image { font-size: 0; color: transparent; }
body.woopify.single-product #review_form .cr-upload-local-images #cr_review_image::file-selector-button { margin-right: 0; }

/* 08-pages.css */
/* 08-pages.css: About, Contact (Woopify slots), legal pages, 404, search, empty cart. */
body.woopify .woopify-section--page-header { padding: var(--space-xl) 0 var(--space-lg); }
body.woopify .woopify-section--page-header .woopify-h1 { margin: 0; }
body.woopify .woopify-section--page-header + .woopify-section { padding-top: 0; }
body.woopify .woopify-values ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-xl); }
body.woopify .woopify-values li { padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
body.woopify .woopify-values li strong { display: block; font: 500 var(--fs-h3)/var(--lh-h3) var(--font-heading); margin-bottom: var(--space-xs); }
@media (max-width: 767px) { body.woopify .woopify-values ul { grid-template-columns: 1fr; gap: var(--space-md); } }
/* FAQ accordion: question rows at least 48px, plus icon rotates when open, 1px border between items. */
body.woopify .woopify-faq { max-width: 820px; border-top: 1px solid var(--color-border); }
body.woopify .woopify-faq__item { border-bottom: 1px solid var(--color-border); }
body.woopify .woopify-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 48px; padding: var(--space-sm) 0; font-weight: 600; cursor: pointer; list-style: none; }
body.woopify .woopify-faq__item summary::-webkit-details-marker { display: none; }
body.woopify .woopify-faq__item summary svg { flex: 0 0 18px; transition: transform .15s ease; }
body.woopify .woopify-faq__item[open] summary svg { transform: rotate(45deg); }
body.woopify .woopify-faq__answer { padding: 0 0 var(--space-md); max-width: 70ch; }
body.woopify .woopify-faq__answer p { margin: 0; }
/* Contact: support details beside the form. */
body.woopify .woopify-support { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
body.woopify .woopify-support__form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
body.woopify .woopify-support__form .woopify-h3 { margin: 0 0 var(--space-md); }
body.woopify .woopify-support__form :is(input[type=text], input[type=email], input[type=tel], textarea, select) { min-height: 48px; width: 100%; border: 1px solid var(--color-input-border) !important; border-radius: var(--radius-md) !important; background: var(--color-bg) !important; color: var(--color-ink) !important; font: 400 var(--fs-body-md)/1.4 var(--font-body) !important; padding: 10px var(--space-md) !important; }
body.woopify .woopify-support__form label { font: 600 var(--fs-label)/var(--lh-label) var(--font-body) !important; color: var(--color-ink) !important; }
body.woopify .woopify-support__form :is(button[type=submit], .elementor-button) { min-height: 48px !important; background: var(--color-accent) !important; color: var(--color-accent-ink) !important; border-radius: var(--radius-md) !important; font: 600 var(--fs-body-md)/1.2 var(--font-body) !important; border: 0 !important; padding: 0 24px !important; }
@media (max-width: 767px) { body.woopify .woopify-support { grid-template-columns: 1fr; gap: var(--space-lg); } body.woopify .woopify-support__form { padding: var(--space-md); } }
/* Legal pages and other plain pages: one readable column, 70ch measure. */
body.woopify.page:not(.page-template-woopify-home):not(.page-template-woopify-slots):not(.page-template-woopify-collection) .entry-content { max-width: 70ch; margin: 0 auto; }
body.woopify.page:not(.page-template-woopify-home):not(.page-template-woopify-slots):not(.page-template-woopify-collection) .entry-header { max-width: 70ch; margin: 0 auto; }
body.woopify .entry-content h2 { font-size: var(--fs-h2); margin: var(--space-lg) 0 var(--space-sm); }
body.woopify .entry-content h3 { font-size: var(--fs-h3); margin: var(--space-md) 0 var(--space-sm); }
/* The Elementor form template's own container: no second panel inside the form card. */
body.woopify .woopify-support__form :is(.elementor, .e-con, .e-con-inner, .elementor-widget-form, .elementor-widget-container) { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; }
body.woopify .woopify-support__form .elementor-field-group { margin-bottom: var(--space-md) !important; padding: 0 !important; }
body.woopify .woopify-support__form .elementor-field-group .elementor-field-label { margin-bottom: var(--space-sm) !important; }
body.woopify .woopify-support__form .elementor-field-required .elementor-field-label::after { color: var(--color-error) !important; }
/* Neighbouring sections on the same ground share one gap, not two. */
body.woopify :is(.woopify-section--featured + .woopify-section--how-it-works, .woopify-section--story + .woopify-section--values, .woopify-section--faq + .woopify-section--support) { padding-top: 0; }
body.woopify :is(.woopify-split__text, .woopify-section) .woopify-body + .woopify-button, body.woopify .woopify-body + .woopify-text-link { margin-top: var(--space-md); }
html body.woopify .entry-content :is(p, li, td, th, dd, dt, blockquote) { color: var(--color-ink); }
html body.woopify .entry-content a:not(.button) { color: var(--color-accent); }

/* 2026-10-09 visual QA: contact form labels line up with the heading (Elementor's field wrapper had a -4px gutter);
   24px inside the card at phone; values get 8px under each heading; account menu rows reach 44px; the 404 page's
   product list sits clear of the text above it; an empty search offers search again. */
body.woopify .woopify-support__form .elementor-form-fields-wrapper { margin: 0 !important; }
@media (max-width: 767px) { body.woopify .woopify-support__form { padding: 24px; } }
body.woopify .woopify-values li strong { margin-bottom: var(--space-sm); }
body.woopify .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 44px; }
body.woopify.error404 .site-main h2 { margin-top: var(--space-lg); }
body.woopify .woopify-no-results { margin: var(--space-lg) 0 var(--space-xl); max-width: 560px; }
body.woopify .woopify-no-results form { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }
body.woopify .woopify-no-results input[type=search] { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); font: 400 var(--fs-body-md)/1 var(--font-body); }
body.woopify .woopify-no-results button[type=submit] { min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--fs-body-md)/1 var(--font-body); }
/* Shoptimizer draws a magnifier on every product search form (::before, absolute) that floated loose on this page;
   the button already says Search. The "Shop all silhouettes" link reads as a link. */
body.woopify .woopify-no-results form::before, body.woopify .woopify-no-results form::after { display: none !important; }
body.woopify .woopify-no-results .woopify-body a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 2026-10-09 mobile QA (independent re-check of 5e): the blog index (/category/news/) and single posts used
   Shoptimizer's own blog styles: 12px #555555 dates, #111111 and #222222 labels, #DF0202 required marks,
   9 x 17px page links and a 30px h1 below 992px. Mapped to the tokens and the 44px tap rule. */
body.woopify:is(.blog, .archive, .single-post) .posted-on, body.woopify:is(.blog, .archive, .single-post) .posted-on time { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--color-ink-muted); }
body.woopify.single-post .entry-header .entry-title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
body.woopify:is(.blog, .archive) .entry-title a { display: inline-block; padding: 7px 0; margin: -7px 0; }
body.woopify nav.navigation.pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: var(--space-sm); border: 0; margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
body.woopify nav.navigation.pagination ul.page-numbers li { border: 0; margin: 0; }
body.woopify nav.navigation.pagination .page-numbers:is(a, span) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); font: 600 var(--fs-body-sm)/1 var(--font-body); text-decoration: none; }
body.woopify nav.navigation.pagination .page-numbers.current { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }
body.woopify.single-post .post-meta .label, body.woopify #respond .comment-reply-title, body.woopify #respond .comment-reply-title a { color: var(--color-ink); }
body.woopify #respond label { color: var(--color-ink); }
body.woopify:is(.single-post, .single-product) .comment-form .required { color: var(--color-error); }
/* The comment form's "save my details" box: 24px box, and the whole 44px row is its label (tap target). */
body.woopify .comment-form-cookies-consent { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; }
body.woopify .comment-form-cookies-consent input[type=checkbox] { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--color-accent); }
body.woopify .comment-form-cookies-consent label { display: flex; align-items: center; min-height: 44px; margin: 0; }
/* Post footer and comment form at phone: the author and category links were 26px and 16px tall, a comment field and the submit button 40px. */
body.woopify.single-post :is(.author-details a, .post-meta .cat-links a) { display: inline-flex; align-items: center; min-height: 44px; }
body.woopify #respond :is(input[type=text], input[type=email], input[type=url], .form-submit input[type=submit], .form-submit button) { min-height: 44px; }