/*
Theme Name: 9oro Atelier
Theme URI: https://9oro.com
Author: 9oro
Description: Premium, quiet-luxury WooCommerce theme for 9oro — warm ivory, soft beige, gold accent, charcoal text, rounded corners, soft shadows.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: 9oro-atelier
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --gold: #B08D57;
  --gold-light: #C7A578;
  --charcoal: #24211F;
  --charcoal-2: #171512;
  --ivory: #FAF7F2;
  --beige: #E8DED2;
  --beige-2: #F1EAE0;
  --taupe: #8B7D70;
  --white: #FFFFFF;
  --maroon: #6B1F2A;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 4rem;
  --max: 1400px;
  --ease: 260ms cubic-bezier(.2,.7,.3,1);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(36,33,31,0.06);
  --shadow: 0 10px 30px rgba(36,33,31,0.10);
  --shadow-lg: 0 18px 48px rgba(36,33,31,0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--charcoal); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; color: var(--charcoal); line-height: 1.12; margin: 0 0 var(--s2); }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 var(--s2); }
/* Longhand, not shorthand: elements commonly carry class="section container"
   together (see front-page.php), and two `padding` shorthand declarations on
   the same element don't merge — whichever rule is later in the file wins
   ALL FOUR sides, not just the sides it's actually trying to set. That was
   silently zeroing out the horizontal padding on every such element (.section
   came after .container and only intended to set top/bottom), which is why
   trust-row/reviews-strip/spotlight-grid ran edge-to-edge while other
   sections looked fine — those happened to have an unrelated .woocommerce
   padding rule coincidentally compensating for the same underlying bug.
   Longhand properties on distinct sides can never stomp each other. */
.container { max-width: var(--max); margin: 0 auto; padding-left: var(--s3); padding-right: var(--s3); }
.section { padding-top: var(--s6); padding-bottom: var(--s6); }
.center { text-align: center; }
.eyebrow { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.numbered { display: flex; align-items: baseline; gap: var(--s2); }
.numbered .num { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2.1rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all var(--ease); min-height: 44px; }
.btn--gold { background: var(--gold); color: var(--white); }
.btn--gold:hover { background: var(--charcoal); transform: translateY(-1px); }
.btn--line { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn--line:hover { background: var(--charcoal); color: var(--ivory); }
.btn--dark { background: var(--charcoal); color: var(--ivory); }
.btn--dark:hover { background: var(--gold); color: var(--white); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { background: var(--charcoal); color: var(--beige); overflow: hidden; white-space: nowrap; padding: 0.85rem 0; }
.marquee__track { display: inline-flex; animation: marquee-scroll 32s linear infinite; }
.marquee__track span { padding: 0 2rem; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--gold-light); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================
   HEADER — light, premium, sticky
   ============================================================ */
.site-header { background: rgba(250,247,242,0.92); backdrop-filter: blur(10px); color: var(--charcoal); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--beige); transition: box-shadow var(--ease); }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); gap: var(--s3); }
.logo-wordmark { display: inline-flex; align-items: center; }
/* Real logo file (not CSS type) — its background is a radial gold glow
   gradient, not a flat colour, so it can't be cleanly keyed to transparent
   without the original vector/transparent source. Housed in a dark badge
   matching that background instead, so it reads as an intentional lockup
   rather than a floating rectangle on the light header. */
.logo-badge {
  display: block; width: 104px; height: 44px;
  background: var(--charcoal); border-radius: var(--radius-sm);
  overflow: hidden;
}
.logo-badge__img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.logo-wordmark em { color: var(--gold); font-style: normal; }
.main-nav { display: flex; gap: var(--s4); }
.main-nav a { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0.4rem 0; border-bottom: 1px solid transparent; transition: border-color var(--ease), color var(--ease); }
.main-nav a:hover { border-color: var(--gold); color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: var(--s1); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--charcoal); position: relative; border-radius: 50%; transition: background var(--ease); }
.icon-btn:hover { background: var(--beige-2); color: var(--gold); }
.cart-count, .wishlist-count { position: absolute; top: 2px; right: 2px; background: var(--gold); color: var(--white); font-size: 0.62rem; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hamburger { display: none; }
@media (max-width: 900px) {
  .main-nav { display: none; }
  .hamburger { display: inline-flex; }
  .logo-wordmark { position: absolute; left: 50%; transform: translateX(-50%); }
}
.mobile-nav { display: none; flex-direction: column; background: var(--white); border-top: 1px solid var(--beige); padding: var(--s2) var(--s3); }
.mobile-nav.is-open { display: flex; }
.mobile-nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--beige); font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; min-height: 44px; display: flex; align-items: center; color: var(--charcoal); }

/* Mobile search + autocomplete */
.search-flyout { position: fixed; inset: 0; background: rgba(23,21,18,0.5); z-index: 90; display: none; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.search-flyout.is-open { display: flex; }
.search-flyout__panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(560px, 92vw); padding: var(--s3); }
.search-flyout__input-row { display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid var(--beige); padding-bottom: var(--s2); }
.search-flyout input[type="search"] { flex: 1; border: none; outline: none; font-size: 1.1rem; font-family: var(--font-sans); background: transparent; }
.search-flyout__close { border: none; background: none; cursor: pointer; color: var(--taupe); width: 36px; height: 36px; }
.search-suggestions { margin-top: var(--s2); max-height: 50vh; overflow-y: auto; }
.search-suggestions a { display: flex; align-items: center; gap: var(--s2); padding: 0.6rem 0; border-bottom: 1px solid var(--beige-2); }
.search-suggestions img { width: 48px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); }
.search-suggestions .ss-title { font-size: 0.9rem; }
.search-suggestions .ss-price { font-size: 0.82rem; color: var(--gold); font-weight: 700; }
.search-suggestions__empty { color: var(--taupe); font-size: 0.9rem; padding: var(--s2) 0; }

/* ============================================================
   HERO — split screen, light
   ============================================================ */
/* Contained with side gutters + rounded corners, matching every other section
   on the page — was previously full-bleed edge-to-edge, inconsistent with the
   rest of the design system (reported by site owner: image touching the
   browser edges with no padding). */
.hero {
  width: calc(100% - 2 * var(--s3));
  max-width: var(--max);
  margin: var(--s3) auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--beige-2); color: var(--charcoal); display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: min(78vh, 680px);
}
/* Capped at 680px rather than a pure vh value: on tall monitors (e.g.
   1920x1080) 78vh grows to 840px+, and since hero-copy vertically centers
   its content, the title ended up 250px+ below the header instead of near
   it — read as "a lot of blank space" (reported by site owner). Capping
   the height keeps the hero substantial on typical screens without letting
   it (and the resulting empty space above the centered title) balloon
   further on very tall viewports. */
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--s5) var(--s5); }
.hero-copy p { color: var(--taupe); max-width: 460px; font-size: 1.05rem; }
.hero-cta { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.hero-gallery { position: relative; height: min(78vh, 680px); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.hero-gallery::-webkit-scrollbar { display: none; }
.hero-gallery__slide { scroll-snap-align: start; height: min(78vh, 680px); width: 100%; display: block; position: relative; }
.hero-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-gallery__slide::after { content: attr(data-caption); position: absolute; left: var(--s3); bottom: var(--s3); color: var(--white); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; text-shadow: 0 2px 12px rgba(0,0,0,0.5); max-width: 80%; }

/* Visible affordance that the hero image scrolls/auto-advances — the
   scroll-snap gallery had no visual cue at all that there was more than
   one image (reported by site owner). Dots double as manual controls. */
.hero-gallery-dots {
  position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.hero-gallery-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.25); padding: 0; cursor: pointer; transition: all var(--ease);
}
.hero-gallery-dot.is-active { background: var(--gold); border-color: var(--gold); width: 10px; height: 24px; border-radius: 5px; }
@media (max-width: 960px) { .hero-gallery-dots { right: var(--s1); } }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: var(--s5) var(--s3) var(--s4); text-align: left; }
  .hero-gallery, .hero-gallery__slide { height: 58vh; }
}

/* ============================================================
   MOBILE-FIRST HOMEPAGE: product-focused, not a shrunk-down laptop layout.
   Phones get a short tagline+CTA band (no scrollable gallery/dots — that's
   a desktop flourish that costs vertical space without helping conversion
   on a small screen) and see real products (New Arrivals) essentially
   immediately, ahead of the Collections/brand-story sections. Uses flex
   `order` on a shared wrapper rather than duplicating markup or JS reflow.
   ============================================================ */
@media (max-width: 640px) {
  .home-flow { display: flex; flex-direction: column; }
  /* .container (used by several homepage sections) sets margin:0 auto for
     ordinary block-layout centering — but once those sections become flex
     ITEMS here, auto margins are treated as flex alignment space-absorption
     rather than neutral centering, which shrank them to their content size
     instead of stretching full width (confirmed: home-section--featured
     measured 166px wide inside a 390px-wide flex container, with no width
     rule anywhere in its matched CSS — the auto margins were the hidden
     cause). Neutralising margins here, where it's actually a flex context. */
  /* Scoped to .container specifically, not all home-flow children — an
     earlier, broader "width:100%; margin:0 on every child" version also
     clobbered .hero's own correct width/margin rule (it doesn't use
     .container at all), breaking it back to full-bleed. Only sections using
     the plain .container class had the auto-margin-in-flex problem. */
  .home-flow > .container { width: 100%; margin-left: 0; margin-right: 0; }
  .home-flow .home-section--new-arrivals { order: 1; }
  .home-flow .hero { order: 2; }
  .home-flow .home-section--collections { order: 3; }
  .home-flow .home-section--brand { order: 4; }
  .home-flow .home-section--why-choose { order: 5; }
  .home-flow .home-section--reviews { order: 6; }
  .home-flow .home-section--editorial { order: 7; }
  .home-flow .home-section--featured { order: 8; }
  .home-flow .home-section--instagram { order: 9; }

  /* Compact hero: short band, no gallery/dots/auto-advance at all */
  .hero { min-height: auto; }
  .hero-gallery, .hero-gallery-dots { display: none; }
  .hero-copy { padding: var(--s4) var(--s3); text-align: center; align-items: center; }
  .hero-copy h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero-copy p { max-width: 100%; font-size: 0.92rem; }
  .hero-cta { justify-content: center; }
}

/* ============================================================
   WOOCOMMERCE DEFENSIVE RESETS (see previous build's postmortem —
   these four failure modes are real, discovered the hard way, kept here
   verbatim as a permanent guard regardless of visual theme changes)
   ============================================================ */
.woocommerce ul.products li.product,
ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; }
ul.products::before, ul.products::after { display: none !important; content: none !important; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: 100% !important; float: none !important; margin-bottom: 0 !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title { padding: 0 !important; margin: 0 !important; }
.woocommerce ul.products li.product .price,
ul.products li.product .price { padding: 0 !important; margin: 0 !important; }
.woocommerce ul.products li.product .button,
ul.products li.product .button { width: auto !important; margin: 0 !important; }

/* ============================================================
   PRODUCT GRID — premium card: white/ivory, rounded, soft shadow,
   hover image swap, always-visible title/price, wishlist + quick view
   ============================================================ */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--s3) !important;
  padding: 0 !important;
}
@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--s2) !important; } }

ul.products li.product { position: relative; overflow: hidden; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); list-style: none; transition: box-shadow var(--ease), transform var(--ease); display: flex !important; flex-direction: column; }
ul.products li.product:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
ul.products li.product a.woocommerce-LoopProduct-link { display: block; position: relative; }
ul.products li.product .product-image-frame { position: relative; overflow: hidden; aspect-ratio: 3/4; border-radius: var(--radius) var(--radius) 0 0; background: var(--beige-2); }
ul.products li.product img { aspect-ratio: 3/4; object-fit: cover; width: 100%; transition: opacity var(--ease); }
/* Only fade the primary image on hover if there's actually a second image to
   reveal underneath — several products in this catalogue have just one photo,
   and unconditionally fading them left an empty box on hover (reported by
   site owner). has-hover-img is only added server-side when a real second
   image exists. */
ul.products li.product .product-image-frame.has-hover-img img.hover-img { position: absolute; inset: 0; opacity: 0; }
ul.products li.product:hover .product-image-frame.has-hover-img img.primary-img { opacity: 0; }
ul.products li.product:hover .product-image-frame.has-hover-img img.hover-img { opacity: 1; }
.brand-badge { position: absolute; top: var(--s1); left: var(--s1); z-index: 2; background: var(--charcoal); color: var(--gold-light); font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.3rem 0.7rem; border-radius: 999px; font-weight: 700; }
.loop-eyebrow { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); font-weight: 600; padding: var(--s2) var(--s2) 0 !important; }
/* Matching the .woocommerce-prefixed selector here too — the earlier defensive-
   reset rule above (padding:0 !important) has higher specificity via its
   ".woocommerce ..." alternative, so without the same prefix here this rule
   loses despite appearing later in the file (specificity beats source order).
   That's exactly what caused title/price text to touch the card edge with
   zero padding (reported by site owner via screenshot). */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-sans) !important; font-size: 0.9rem !important; font-weight: 500 !important;
  color: var(--charcoal) !important; line-height: 1.35; padding: 0.3rem var(--s2) 0.2rem !important;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  font-family: var(--font-sans) !important; color: var(--gold) !important; font-weight: 700 !important; font-size: 0.98rem !important;
  padding: 0 var(--s2) 0.6rem !important; display: block;
}
ul.products li.product .price del { color: var(--taupe) !important; opacity: 0.7; margin-right: 0.35rem; }
ul.products li.product .price ins { text-decoration: none; }

/* Inline size buttons — always visible, matching the reference style */
.loop-size-buttons { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 var(--s2) 0.6rem; }
.loop-size-btn {
  min-width: 34px; height: 30px; padding: 0 0.4rem; border-radius: var(--radius-sm);
  border: 1px solid var(--beige); background: var(--white); color: var(--charcoal);
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.loop-size-btn:hover:not(.is-disabled) { border-color: var(--gold); }
.loop-size-btn.is-selected { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }
.loop-size-btn.is-disabled { color: var(--taupe); text-decoration: line-through; opacity: 0.5; cursor: not-allowed; background: var(--beige-2); }

.loop-actions-row { display: flex; align-items: center; gap: 0.5rem; padding: 0 var(--s2) var(--s2); margin-top: auto; }
.woocommerce ul.products li.product .loop-actions-row .button,
ul.products li.product .loop-actions-row .button {
  flex: 1; display: block !important; margin: 0 !important; text-align: center;
  padding: 0.7rem !important; background: var(--charcoal) !important; color: var(--ivory) !important;
  font-size: 0.68rem !important; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; border: none;
}
.loop-actions-row .button:hover { background: var(--gold) !important; }
.loop-whatsapp-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #25D366; color: var(--white);
  display: flex; align-items: center; justify-content: center; transition: transform var(--ease);
}
.loop-whatsapp-btn:hover { transform: scale(1.08); }
.product-badge { position: absolute; top: var(--s1); left: calc(var(--s1) + 52px); z-index: 2; background: var(--gold); color: var(--white); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; font-weight: 700; }

.wishlist-btn {
  position: absolute; top: var(--s1); right: var(--s1); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center; color: var(--charcoal);
  border: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: color var(--ease), transform var(--ease);
}
.wishlist-btn:hover { transform: scale(1.08); }
.wishlist-btn svg { width: 16px; height: 16px; }
.wishlist-btn.is-active { color: var(--maroon); }
.wishlist-btn.is-active svg { fill: currentColor; }

.quickview-btn {
  position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2); z-index: 2;
  background: rgba(250,247,242,0.95); color: var(--charcoal); border: 1px solid var(--beige);
  padding: 0.55rem; border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; cursor: pointer; opacity: 0; transform: translateY(6px); transition: all var(--ease);
}
ul.products li.product:hover .quickview-btn { opacity: 1; transform: translateY(0); }
@media (hover: none) { .quickview-btn { display: none; } }

/* ============================================================
   COLLECTIONS — premium rounded cards
   ============================================================ */
/* Same fix as .hero: these sections sit directly under <body> without a
   .container wrapper in the markup, so they were running full-bleed to the
   browser edge with zero side padding — the exact same bug reported twice
   now (hero, then this). Applying the identical contain-with-gutter pattern
   to every section that has this shape, in one place, instead of patching
   them one at a time as each gets reported. */
.collection-strip,
.brand-split,
.editorial,
.instagram-strip {
  width: calc(100% - 2 * var(--s3));
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
/* collection-strip/instagram-strip are nested inside a .section that already
   provides vertical padding — only brand-split/editorial are the outer
   <section> itself and need their own vertical gutter too. */
.brand-split, .editorial { margin-top: var(--s5); margin-bottom: var(--s5); }

.collection-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 900px) { .collection-strip { grid-template-columns: repeat(2, 1fr); } }
.collection-tile { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--ease), transform var(--ease); display: block; }
.collection-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.collection-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.collection-tile:hover img { transform: scale(1.06); }
.collection-tile__label { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s3); background: linear-gradient(0deg, rgba(23,21,18,0.72), transparent 55%); }
.collection-tile__label span { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--white); }

/* ============================================================
   BRAND / TRUST
   ============================================================ */
/* Fixed row height (not an aspect-ratio on the image) so the image doesn't
   dictate an oversized row that leaves the shorter text column stranded in
   empty space above/below it. */
.brand-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 460px; max-height: 560px; }
.brand-split img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.brand-split__copy { display: flex; flex-direction: column; justify-content: center; padding: var(--s4) var(--s5); overflow-y: auto; }
@media (max-width: 860px) { .brand-split { grid-template-columns: 1fr; min-height: auto; max-height: none; } .brand-split img { aspect-ratio: 4/3; height: auto; } .brand-split__copy { padding: var(--s4) var(--s3); } }

.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (max-width: 860px) { .trust-row { grid-template-columns: repeat(2, 1fr); } }
.trust-item { padding: var(--s3); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-align: center; }
.trust-item .icon { width: 34px; height: 34px; color: var(--gold); margin: 0 auto var(--s1); }
.trust-item .icon svg { width: 100%; height: 100%; }
.trust-item h4 { font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.trust-item p { font-size: 0.85rem; color: var(--taupe); margin: 0; }

/* ============================================================
   EDITORIAL / SPOTLIGHT — one deliberate dark accent section for
   visual rhythm; everything else stays light per brand brief
   ============================================================ */
.editorial { position: relative; background: var(--charcoal); color: var(--ivory); overflow: hidden; border-radius: var(--radius-lg); }
.editorial__bg { position: absolute; inset: 0; }
.editorial__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.editorial__overlay { position: relative; z-index: 1; padding: var(--s6) var(--s3); text-align: center; }
.editorial h2 { color: var(--white); max-width: 760px; margin-inline: auto; }
.editorial h2 em { color: var(--gold-light); font-style: italic; }
.editorial p { color: var(--beige); max-width: 560px; margin: var(--s2) auto var(--s3); }

.spotlight-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: var(--s2); }
.spotlight-card { position: relative; grid-column: span 1; grid-row: span 1; overflow: hidden; display: block; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.spotlight-card--large { grid-column: span 2; grid-row: span 2; }
.spotlight-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.spotlight-card:hover img { transform: scale(1.05); }
.spotlight-card__info { position: absolute; inset-inline: 0; bottom: 0; padding: var(--s2); background: linear-gradient(0deg, rgba(23,21,18,0.82), transparent); color: var(--white); }
.spotlight-card__title { font-family: var(--font-sans); font-size: 0.82rem; }
.spotlight-card--large .spotlight-card__title { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; }
.spotlight-card__price { display: block; font-size: 0.85rem; color: var(--gold-light); font-weight: 700; }
@media (max-width: 860px) { .spotlight-grid { grid-template-columns: repeat(2, 1fr); } .spotlight-card--large { grid-column: span 2; grid-row: span 1; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 860px) { .reviews-strip { grid-template-columns: 1fr; } }
.review-card { background: var(--white); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow-sm); }
.review-card .stars { color: var(--gold); letter-spacing: 0.15em; margin-bottom: var(--s1); }
.review-card p { font-size: 0.95rem; color: var(--charcoal); font-style: italic; }
.review-card .reviewer { font-size: 0.8rem; color: var(--taupe); text-transform: uppercase; letter-spacing: 0.06em; }

/* ============================================================
   INSTAGRAM / NEWSLETTER / FOOTER
   ============================================================ */
.instagram-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s1); }
@media (max-width: 700px) { .instagram-strip { grid-template-columns: repeat(3, 1fr); } }
.instagram-strip a { aspect-ratio: 1; overflow: hidden; display: block; position: relative; border-radius: var(--radius-sm); }
.instagram-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease); }
.instagram-strip a:hover img { transform: scale(1.08); }

.site-footer { background: var(--charcoal); color: var(--beige); padding: var(--s6) 0 var(--s3); margin-top: var(--s6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s4); margin-bottom: var(--s5); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-logo { max-width: 100px; margin-bottom: var(--s2); }
.site-footer h5 { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); }
.site-footer a { display: block; padding: 0.35rem 0; font-size: 0.9rem; color: var(--beige); transition: color var(--ease); }
.site-footer a:hover { color: var(--gold); }
.footer-signoff { font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 5vw, 3.6rem); color: rgba(250,247,242,0.08); text-align: center; margin: var(--s5) 0; letter-spacing: -0.02em; }
.footer-bottom { border-top: 1px solid rgba(232,222,210,0.12); padding-top: var(--s3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); font-size: 0.8rem; color: var(--taupe); }

/* ============================================================
   WHATSAPP
   ============================================================ */
.whatsapp-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.wa-enquiry-btn { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--charcoal); color: var(--charcoal); padding: 0.85rem 1.6rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin: var(--s2) 0; transition: all var(--ease); }
.wa-enquiry-btn:hover { background: #25D366; border-color: #25D366; color: var(--white); }

/* ============================================================
   SINGLE PRODUCT — sticky summary panel, size guide, tabs, trust icons
   ============================================================ */
.single-product div.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s5); padding: var(--s4) 0; align-items: start; }
@media (max-width: 900px) { .single-product div.product { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3) 0; } }
/* div.product isn't just gallery+summary — WooCommerce renders the tabs,
   upsells, and related-products sections as additional children of the SAME
   div.product, appended after the gallery/summary. With only 2 grid columns
   defined, those extra children auto-placed as a second grid row split into
   two half-width columns side by side, landing at the exact same vertical
   position instead of stacking full-width below the product info (reported
   by site owner: tabs overlapping related products/reviews on scroll).
   Forcing every child of div.product other than gallery/summary to span
   the full row width fixes this regardless of how many such sections
   WooCommerce decides to render in a given configuration. */
.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary) {
  grid-column: 1 / -1;
}
.single-product .woocommerce-product-gallery__image { overflow: hidden; background: var(--beige-2); border-radius: var(--radius); }
.single-product .woocommerce-product-gallery__image img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.single-product .flex-control-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; padding: 0; list-style: none; overflow-x: auto; }
.single-product .flex-control-thumbs li { width: 72px; }
.single-product .flex-control-thumbs img { height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--beige); }
.single-product .flex-control-thumbs img.flex-active { border-color: var(--gold); }
/* Not sticky: .summary's containing block for sticky purposes is div.product,
   which also contains the tabs/upsells/related-products WooCommerce nests
   inside it (see the grid-column fix above) — so a sticky summary panel
   stayed pinned in place through all of that content too, instead of
   releasing once the actual product info ended (reported by site owner:
   "the page should scroll, not stay fixed"). Scoping sticky correctly would
   mean restructuring around WooCommerce's own template nesting, which is
   fragile to depend on; removing it is the robust fix. */
.single-product .summary.entry-summary { position: static; }
.single-product .summary.entry-summary .product_title { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); }
.single-product .summary.entry-summary .price { font-family: var(--font-sans); font-size: 1.45rem; color: var(--gold); font-weight: 700; }
.single-product .sku_wrapper { font-size: 0.8rem; color: var(--taupe); display: block; margin: var(--s1) 0; }
.single-product form.cart .button { background: var(--charcoal); color: var(--ivory); border-radius: 999px; padding: 1rem 2.2rem; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; border: none; }
.single-product form.cart .button:hover { background: var(--gold); color: var(--white); }
/* WooCommerce core ships its own purple (#720eec) as the default/disabled
   button colour via its --woocommerce CSS variable — never overridden for the
   :disabled state specifically, so "Add to Cart" showed raw WooCommerce
   purple instead of an on-brand muted state before a size is chosen
   (reported by site owner via screenshot). */
.single-product form.cart .button:disabled,
.single-product form.cart .button.disabled,
.single-product form.cart .button:disabled:hover {
  background: var(--beige) !important; color: var(--taupe) !important; cursor: not-allowed; opacity: 1;
}

/* ============================================================
   FORM FIELDS — one consistent system for every text input, select,
   number/quantity stepper, textarea and checkbox/radio site-wide, so
   quantity boxes stop looking like plain unstyled browser defaults next to
   the styled select/buttons (reported by site owner).
   ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce table.variations select,
.woocommerce div.product form.cart .variations select,
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"],
textarea, select {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--beige);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--charcoal);
  min-height: 44px;
  transition: border-color var(--ease);
}
textarea { min-height: 110px; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
  border-color: var(--gold);
  outline: none;
}

/* Quantity stepper — was relying entirely on unstyled browser/WC defaults */
.quantity { display: inline-flex; }
.quantity .qty,
.woocommerce div.product form.cart .quantity .qty {
  width: 64px;
  min-height: 44px;
  text-align: center;
  border: 1px solid var(--beige);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--white);
  padding: 0.65rem 0.4rem;
  -moz-appearance: textfield;
}
.quantity .qty:focus { border-color: var(--gold); outline: none; }
.quantity .qty::-webkit-inner-spin-button, .quantity .qty::-webkit-outer-spin-button { opacity: 0.6; }

/* WooCommerce's variations table is a real <table><tr><th>Size</th><td><select>
   —its <th> label column pushes the <td>/select sideways by the label's own
   width (confirmed: select's left edge sat 81px right of the price/quantity/
   description text, exactly matching the "Size" <th> column width). Stacking
   label above field instead of side-by-side gets everything back onto the
   same left edge as the rest of the summary column. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr {
  display: block;
  width: 100%;
}
.single-product table.variations th,
.single-product table.variations td {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: none;
}
.single-product table.variations th {
  padding-bottom: 0.4rem;
}
.single-product table.variations td select {
  width: 100%;
}

/* Clickable size swatches replacing the plain <select> visually — the actual
   select stays in the DOM (display:none, still driving WooCommerce's native
   price/stock logic), this is purely the visible layer. */
.variation-swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.variation-swatch-btn {
  position: relative;
  min-width: 56px; height: 48px; padding: 0 0.9rem;
  border: 1px solid var(--beige); border-radius: var(--radius-sm);
  background: var(--white); color: var(--charcoal);
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.variation-swatch-btn:hover:not(.is-disabled) { border-color: var(--gold); }
.variation-swatch-btn.is-selected { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }
.variation-swatch-btn.is-disabled {
  color: var(--taupe); background: var(--beige-2); cursor: not-allowed;
  text-decoration: line-through;
}
.variation-swatch-btn .swatch-sold-out {
  position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-50%);
  font-size: 0.62rem; text-decoration: none; color: var(--taupe); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Checkboxes / radios — accent-color is enough to bring native controls
   on-brand without rebuilding them as custom elements */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--gold);
  width: 18px; height: 18px;
  vertical-align: middle;
}

/* margin-left removed: it made sense when this sat inline next to something,
   but on its own line it just pushed the text 8px right of everything else
   in the summary column (reported by site owner) — also a <button> element
   carries its own default padding, zeroed here so text sits flush left. */
.size-guide-link { font-size: 0.8rem; text-decoration: underline; color: var(--taupe); margin: 0; padding: 0; cursor: pointer; background: none; border: none; display: block; }
.buy-now-btn { background: var(--gold) !important; color: var(--white) !important; margin-left: 0.5rem; }
.buy-now-btn:hover { background: var(--charcoal) !important; }

.quick-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--beige); border-radius: var(--radius); overflow: hidden; margin: var(--s2) 0 var(--s3); }
.quick-info-card { padding: 0.9rem 1rem; border-right: 1px solid var(--beige); }
.quick-info-card:last-child { border-right: none; }
.quick-info-card .qic-label { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); font-weight: 600; margin-bottom: 0.2rem; }
.quick-info-card .qic-value { display: block; font-size: 0.92rem; color: var(--charcoal); font-weight: 500; }
@media (max-width: 480px) {
  .quick-info-cards { grid-template-columns: 1fr; }
  .quick-info-card { border-right: none; border-bottom: 1px solid var(--beige); }
  .quick-info-card:last-child { border-bottom: none; }
}

.single-product .viewer-count { font-size: 0.85rem; color: var(--taupe); margin: 0.3rem 0; }
.single-product .static-rating { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.8rem; }
.single-product .static-rating .stars { color: var(--gold); letter-spacing: 0.1em; font-size: 1rem; }
.single-product .static-rating .rating-number { font-size: 0.9rem; color: var(--taupe); font-weight: 600; }

.trust-icons-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0; padding-top: var(--s3); border-top: 1px solid var(--beige); }
.trust-icons-row .ti { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--taupe); }
.trust-icons-row .ti svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }

.product-tabs-custom { margin-top: var(--s2); }
.product-tabs-custom h3 { font-size: 1rem; margin-top: var(--s3); }
.product-tabs-custom .pending-note { font-size: 0.78rem; color: var(--taupe); font-style: italic; }

.recently-viewed { margin-top: var(--s5); }

/* Modal (shared: Size Guide, Quick View) */
.modal-overlay { position: fixed; inset: 0; background: rgba(23,21,18,0.55); z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--s3); }
.modal-overlay.is-open { display: flex; }
.modal-panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 720px; width: 100%; max-height: 86vh; overflow-y: auto; padding: var(--s4); position: relative; }
.modal-close { position: absolute; top: var(--s2); right: var(--s2); width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--beige-2); cursor: pointer; }
.size-guide-table { width: 100%; border-collapse: collapse; margin-top: var(--s2); }
.size-guide-table th, .size-guide-table td { border: 1px solid var(--beige); padding: 0.6rem; text-align: center; font-size: 0.85rem; }
.size-guide-table th { background: var(--beige-2); }
.quick-view-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 640px) { .quick-view-body { grid-template-columns: 1fr; } }
.quick-view-body img { border-radius: var(--radius-sm); aspect-ratio: 3/4; object-fit: cover; }

/* Shop / archive — sidebar filters */
.woocommerce-products-header { padding: var(--s4) 0 var(--s2); text-align: center; }
.woocommerce-products-header__title { font-family: var(--font-display); }
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; } }
.shop-filters { background: var(--white); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow-sm); position: sticky; top: 90px; }
.shop-filters h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--taupe); margin: var(--s2) 0 var(--s1); }
.shop-filters .widget { margin-bottom: var(--s3); }
.shop-filters ul { display: flex; flex-direction: column; gap: 0.4rem; }
.shop-filters li a { font-size: 0.88rem; color: var(--charcoal); }
.shop-filters li a:hover { color: var(--gold); }
.mobile-filter-toggle { display: none; }
@media (max-width: 900px) {
  .mobile-filter-toggle { display: flex; margin: 0 auto var(--s3); }
  .shop-filters { display: none; position: fixed; inset: 0; z-index: 95; top: auto; height: 80vh; bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow-y: auto; }
  .shop-filters.is-open { display: block; }
}
nav.woocommerce-pagination ul { display: flex; gap: 0.4rem; justify-content: center; margin: var(--s4) 0; }
nav.woocommerce-pagination ul li a, nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--beige); font-family: var(--font-sans); font-size: 0.85rem; }
nav.woocommerce-pagination ul li .current { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--charcoal); color: var(--ivory); border-radius: 999px; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; padding: 0.8rem 1.6rem; border: none; }
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--gold); color: var(--white); }
/* padding removed: this rule also matches the shortcode wrapper div WooCommerce
   renders INSIDE our already-padded <section class="section container">, so
   it was adding a second 24px on top of the real container padding (48px
   total instead of 24px) once the .section/.container shorthand conflict
   above got fixed. max-width/margin still useful for pages where .woocommerce
   lands directly on <body> with no other containing wrapper. */
.woocommerce, .woocommerce-page { max-width: var(--max); margin: 0 auto; }

/* ============================================================
   MOBILE — sticky add to cart + bottom nav
   ============================================================ */
.mobile-sticky-atc { display: none; }
@media (max-width: 900px) {
  .single-product .mobile-sticky-atc {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--white); border-top: 1px solid var(--beige); padding: var(--s2) var(--s3);
    align-items: center; justify-content: space-between; gap: var(--s2); box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
    padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
  }
  .mobile-sticky-atc .price { font-weight: 700; color: var(--gold); font-family: var(--font-sans); }
  .mobile-sticky-atc .btn { flex-shrink: 0; }
  body.single-product { padding-bottom: 76px; }
}
.bottom-nav { display: none; }
@media (max-width: 900px) {
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
    background: var(--white); border-top: 1px solid var(--beige);
    padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom));
  }
  /* On product pages the sticky Add-to-Cart bar takes over the bottom of the
     screen — showing both at once would overlap (confirmed by measuring both
     rects: they occupied the same pixel range). One priority CTA at a time. */
  body.single-product .bottom-nav { display: none; }
  body:not(.single-product) { padding-bottom: 62px; }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.62rem; color: var(--taupe); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0; min-height: 44px; justify-content: center; position: relative; }
  .bottom-nav a svg { width: 20px; height: 20px; }
  .bottom-nav a.is-active { color: var(--gold); }
}