/* ═══════════════════════════════════════════════════════════
   SOLISTICA
   Whitewashed Mediterranean minimalism. Very little decoration;
   what carries the design is spacing, type and one hairline.

   Order of this file:
     1. Tokens        5. Hero
     2. Primitives    6. Home sections
     3. Chrome        7. Commerce
     4. Overlays      8. Footer & responsive

   Cascade rule: every component is a single class. Nothing here
   uses an element selector for spacing, so section padding can
   never be silently cancelled by a child.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────── */
:root{
  --limewash:#FFFFFF;
  --plaster:#EDEBE6;
  --aegean:#0F3552;
  --meltemi:#3D6B8A;
  --caldera:#E4B4A2;

  /* Light state. Golden Hour rewrites only these three. */
  --rule:#D9E0E5;
  --label:var(--meltemi);
  --scrim-top:rgba(15,53,82,.30);
  --scrim-bot:rgba(15,53,82,.42);

  --display:"Bodoni Moda",Didot,"Bodoni MT","Times New Roman",serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --util:"Jost","Futura","Century Gothic",sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:1440px;
  --hdr:3.75rem;
  --cookie-h:0px;
}

[data-hour="golden"]{
  --rule:#EBD8CE;
  --label:#A9694F;
  --scrim-top:rgba(96,52,44,.26);
  --scrim-bot:rgba(112,58,46,.44);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--limewash);
  color:var(--aegean);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.72;
  font-optical-sizing:auto;
}

img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--aegean);outline-offset:3px}
[data-hour="golden"] :focus-visible{outline-color:#A9694F}

/* ── 2. Primitives ───────────────────────────────────────── */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{
  position:fixed;top:1rem;left:1rem;z-index:100;width:auto;height:auto;
  clip-path:none;background:var(--aegean);color:#fff;padding:.75rem 1.25rem;
  font-family:var(--util);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
}

.eyebrow{
  font-family:var(--util);font-weight:400;font-size:.6875rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--label);
  transition:color 1.2s ease;
}
.dsp{font-family:var(--display);font-weight:400;line-height:1.08;text-wrap:balance;margin:0}
.lede{max-width:56ch;margin:0;color:color-mix(in srgb,var(--aegean) 80%,transparent)}

.section{padding-block:clamp(3.5rem,8vw,7.5rem)}
.section--tight{padding-block:clamp(2.5rem,6vw,5rem)}
.section--plaster{background:var(--plaster)}
.section--rail{position:relative}

.head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.head__row{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.head .dsp{font-size:clamp(1.75rem,4.2vw,3rem)}

.link-more{
  font-family:var(--util);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  border-bottom:1px solid var(--rule);padding-bottom:.35rem;white-space:nowrap;
  display:inline-block;transition:border-color .3s ease;
}
.link-more:hover{border-color:var(--aegean)}

.btn{
  display:inline-block;font-family:var(--util);font-weight:400;font-size:.6875rem;
  letter-spacing:.24em;text-transform:uppercase;padding:1rem 2.1rem;
  border:1px solid currentColor;background:transparent;cursor:pointer;text-align:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn--light{color:#fff;border-color:rgba(255,255,255,.8)}
.btn--light:hover{background:#fff;color:var(--aegean)}
.btn--dark{color:var(--aegean)}
.btn--dark:hover{background:var(--aegean);color:var(--limewash)}
.btn--solid{background:var(--aegean);color:var(--limewash);border-color:var(--aegean)}
.btn--solid:hover{background:#17557f;border-color:#17557f}

.icn{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1;display:block}

/* Structured placeholder for imagery the client has not sent yet. */
.ph{
  background:var(--plaster);border:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  transition:border-color 1.2s ease;
}
.ph .eyebrow{opacity:.55;font-size:.5625rem}

.notice-inline{
  font-family:var(--util);font-size:.75rem;letter-spacing:.1em;
  color:var(--label);transition:color 1.2s ease;
}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── 3. Chrome ───────────────────────────────────────────── */
.ann{background:var(--aegean);color:#fff;position:relative;z-index:40}
.ann__in{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:.5rem;flex-wrap:wrap}
.ann__msg{font-family:var(--util);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:300}

/* Language, currency and country. One decision on the server, so they sit
   together as one control rather than three scattered widgets. */
.locale{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.locale__field{display:flex;align-items:center}
.locale__select{
  appearance:none;background:transparent;border:0;cursor:pointer;color:inherit;
  font-family:var(--util);font-size:.625rem;font-weight:300;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.25rem 1.1rem .25rem .25rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right .5rem center,right .27rem center;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.locale__select option,.locale__select optgroup{background:var(--limewash);color:var(--aegean);text-transform:none;letter-spacing:0}
.locale__select--country{max-width:11rem;text-overflow:ellipsis}
.locale__sep{width:1px;height:.7rem;background:currentColor;opacity:.3}
.locale__go{
  background:none;border:1px solid currentColor;color:inherit;cursor:pointer;
  font-family:var(--util);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;padding:.3rem .6rem;
}

.hdr{
  position:sticky;top:0;z-index:50;
  background:transparent;color:#fff;
  box-shadow:0 0 0 rgba(15,53,82,0);
  transition:background .32s ease,color .32s ease,box-shadow .32s ease;
}
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;height:var(--hdr)}
/* Both wordmarks ship in the markup and cross-fade in the same grid cell.
   Stacking them this way — rather than pulling one out with position:absolute —
   is what stops the header resizing mid-transition. Both PNGs were trimmed to
   their ink, so one height gives both the same rendered letters. */
.hdr__mark{justify-self:center;display:grid;place-items:center;line-height:0}
/* Two classes, not one, and deliberately so: woocommerce.css ships
   `.woocommerce img { height:auto }` at specificity 0,1,1. A single-class rule
   here loses to it on every shop, category and product page, the height falls
   back to auto, and the wordmark renders at roughly twice its intended size —
   which is exactly what happened. 0,2,0 wins that fight. */
.hdr__mark .wordmark{
  grid-area:1/1;
  height:clamp(1.1rem,3.2vw,1.6rem);width:auto;max-width:min(58vw,19rem);
  object-fit:contain;transition:opacity .32s ease;
}
.wordmark--dark{opacity:0}
.hdr--solid .wordmark--light{opacity:0}
.hdr--solid .wordmark--dark{opacity:1}

/* The light wordmark sits on whatever the photograph happens to be doing. Over
   the bright whitewashed wall of banner-2 it disappears without this, so the
   header carries its own gradient, independent of the slide scrim, and drops it
   the moment the header turns solid. */
.has-overlay-header .hdr::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-2.5rem;z-index:-1;
  background:linear-gradient(to bottom,rgba(15,53,82,.42),rgba(15,53,82,.18) 55%,transparent);
  pointer-events:none;transition:opacity .32s ease;
}
.hdr--solid::before{opacity:0}

.hdr__nav{display:none}
.hdr__act{display:flex;align-items:center;gap:.9rem;justify-self:end}
.hdr__icon{display:flex;align-items:center;gap:.3rem;background:none;border:0;padding:.25rem;cursor:pointer}
.hdr__bagn{font-family:var(--util);font-size:.625rem;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.hdr__bagn[data-empty="true"]{opacity:.55}

.hdr__burger{display:flex;align-items:center;background:none;border:0;padding:.4rem 0;cursor:pointer;justify-self:start}
.hdr__burger span{display:block;width:20px;height:1px;background:currentColor;position:relative}
.hdr__burger span::before,.hdr__burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;background:currentColor}
.hdr__burger span::before{top:-6px}
.hdr__burger span::after{top:6px}

.hdr--solid{background:var(--limewash);color:var(--aegean);box-shadow:0 1px 0 var(--rule),0 8px 24px rgba(15,53,82,.06)}

/* ── 4. Overlays: drawers and modals ─────────────────────── */
.drawer{position:fixed;inset:0;z-index:70;visibility:hidden}
.drawer[data-open="true"]{visibility:visible}
.drawer__veil{position:absolute;inset:0;background:rgba(15,53,82,.32);opacity:0;transition:opacity .35s ease}
.drawer[data-open="true"] .drawer__veil{opacity:1}

.drawer__panel{
  position:absolute;inset-block:0;left:0;width:min(88vw,22rem);
  background:var(--limewash);padding:1.25rem var(--gut) 2rem;
  display:flex;flex-direction:column;gap:1.75rem;overflow-y:auto;
  transform:translateX(-100%);transition:transform .38s cubic-bezier(.3,.8,.3,1);
}
.drawer__panel--right{left:auto;right:0;width:min(94vw,26rem);transform:translateX(100%)}
.drawer[data-open="true"] .drawer__panel{transform:none}

.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.drawer__mark{font-family:var(--display);font-weight:400;font-size:1.0625rem;letter-spacing:.4em;text-indent:.4em}
.drawer__close{
  background:none;border:0;cursor:pointer;padding:.5rem 0;
  font-family:var(--util);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
}

.drawer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.drawer__nav a{
  display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;
  padding-block:.85rem;border-bottom:1px solid var(--rule);transition:border-color 1.2s ease;
}
.drawer__foot{display:flex;flex-direction:column;gap:.75rem;margin-top:auto}

.modal{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal__veil{position:absolute;inset:0;background:rgba(15,53,82,.34)}
.modal__panel{
  position:relative;background:var(--limewash);
  width:min(92vw,44rem);max-height:86vh;overflow-y:auto;
  padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;gap:1.25rem;
  box-shadow:0 20px 60px rgba(15,53,82,.14);
}
.modal__panel--top{align-self:flex-start;margin-top:6rem;width:min(92vw,40rem)}
.modal__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem}
.modal__head .dsp{font-size:clamp(1.5rem,3.5vw,2.25rem)}
.modal__close{
  background:none;border:0;cursor:pointer;padding:.5rem 0;
  font-family:var(--util);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
}
.modal__note{margin:0;font-size:.875rem;color:color-mix(in srgb,var(--aegean) 75%,transparent)}

.sizes-table{width:100%;border-collapse:collapse;font-family:var(--util);font-size:.8125rem;font-variant-numeric:tabular-nums}
.sizes-table th,.sizes-table td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap;transition:border-color 1.2s ease}
.sizes-table th{font-weight:400;letter-spacing:.16em;text-transform:uppercase;font-size:.625rem;color:var(--label)}
/* The visitor's own system stays; the rest dim rather than disappear,
   so anyone shopping across borders can still read across. */
.sizes-table td[data-system]{color:color-mix(in srgb,var(--aegean) 45%,transparent)}
.sizes-table td[data-system].is-yours{color:var(--aegean);font-weight:500}

.search{display:flex;flex-direction:column;gap:1rem}
.search__field{
  background:transparent;border:0;border-bottom:1px solid var(--aegean);
  padding:.9rem 0;font-family:var(--display);font-size:1.5rem;font-weight:400;color:var(--aegean);
}
.search__field::placeholder{color:color-mix(in srgb,var(--aegean) 40%,transparent);font-size:1.125rem}

.cookie{
  position:fixed;z-index:80;left:0;right:0;bottom:0;
  background:var(--limewash);border-top:1px solid var(--rule);
  padding:.85rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap;
  box-shadow:0 -4px 24px rgba(15,53,82,.07);
}
.cookie[hidden]{display:none}
.cookie p{margin:0;font-size:.75rem;line-height:1.5;max-width:52ch;color:color-mix(in srgb,var(--aegean) 82%,transparent)}
.cookie__link{border-bottom:1px solid var(--caldera)}
.cookie__acts{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie .btn{padding:.6rem 1.1rem;font-size:.5625rem;letter-spacing:.18em}

/* ── 5. Hero ─────────────────────────────────────────────── */
.has-overlay-header .hero{margin-top:calc(var(--hdr) * -1)}
.hero{position:relative;overflow:hidden;background:var(--aegean)}
.hero__stage{position:relative;height:100svh;min-height:34rem}

.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.slide[data-active="true"]{opacity:1;pointer-events:auto}
.slide__img{width:100%;height:100%;object-fit:cover}
.slide__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--scrim-top) 0,transparent 26%,transparent 46%,var(--scrim-bot) 100%);
  transition:background 1.2s ease;
}
.slide__lock{
  position:absolute;left:var(--gut);right:var(--gut);
  bottom:calc(clamp(5.5rem,14vh,8rem) + var(--cookie-h));
  color:#fff;transition:bottom .4s ease;
}
.lock__kicker{margin:0 0 .9rem;color:rgba(255,255,255,.82)}
.lock__a{
  font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(1.375rem,5.2vw,2.75rem);letter-spacing:.3em;text-indent:.3em;line-height:1;
  text-shadow:0 1px 26px rgba(15,53,82,.4);
}
.lock__b{
  font-family:var(--script);margin:-.14em 0 0 .06em;
  font-size:clamp(2.75rem,10.5vw,5.75rem);line-height:.74;
  text-shadow:0 1px 26px rgba(15,53,82,.4);
}
.lock__cta{margin-top:clamp(1.5rem,3.5vw,2.25rem)}

/* Slide indicator: a horizon line in three segments, not dots. */
.hero__horizon{
  position:absolute;z-index:5;left:var(--gut);
  bottom:calc(clamp(2rem,5vh,3rem) + var(--cookie-h));
  display:flex;gap:.4rem;transition:bottom .4s ease;
}
.hero__horizon button{background:none;border:0;padding:.6rem 0;cursor:pointer;display:block}
.hero__horizon i{display:block;width:2.5rem;height:1px;background:rgba(255,255,255,.38);transition:background .4s ease}
.hero__horizon button[aria-current="true"] i{background:#fff}

.hero__seal{
  position:absolute;z-index:5;right:var(--gut);
  bottom:calc(clamp(2rem,5vh,3rem) + var(--cookie-h));
  width:clamp(2.25rem,5vw,3.25rem);height:auto;
  opacity:.2;filter:brightness(0) invert(1);
  transition:opacity 1.2s ease,bottom .4s ease;
}
[data-hour="golden"] .hero__seal{opacity:.3}

/* ── 6. Home sections ────────────────────────────────────── */
.feat{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr}
.feat__img{width:100%;aspect-ratio:4/5;object-fit:cover}
.feat__body{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.feat__body .dsp{font-size:clamp(1.875rem,4.5vw,3.25rem)}

.cats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,1.5vw,1.25rem)}
.cat{position:relative;display:block}
.cat__img{width:100%;aspect-ratio:3/4;object-fit:cover}
.cat__name{
  font-family:var(--display);font-weight:400;font-size:clamp(1.0625rem,2.6vw,1.5rem);
  text-align:center;line-height:1.2;padding-inline:.75rem;
}
.cat__name--over{
  position:absolute;left:0;right:0;bottom:2.75rem;color:#fff;
  text-shadow:0 1px 18px rgba(15,53,82,.45);
}
.cat__go{margin-top:.85rem;display:block;text-align:center}

.grid-prod{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.25rem) clamp(.75rem,2vw,1.75rem)}
.prod{display:block}
.prod__img{width:100%;aspect-ratio:3/4;object-fit:cover}
.prod__meta{display:flex;flex-direction:column;gap:.3rem;padding-top:.9rem}
.prod__n{font-family:var(--display);font-size:1.0625rem;font-weight:400;line-height:1.3}
.prod__p{font-family:var(--util);font-size:.8125rem;letter-spacing:.12em;font-variant-numeric:tabular-nums}

.brandrail{display:none}

.vals{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem)}
.val{display:flex;flex-direction:column;gap:.65rem;padding-top:1.25rem;border-top:1px solid var(--rule);transition:border-color 1.2s ease}
.val h3{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0}
.val p{margin:0;font-size:.9375rem;color:color-mix(in srgb,var(--aegean) 78%,transparent)}

.news{display:flex;flex-direction:column;gap:1.75rem;align-items:flex-start;max-width:44rem}
.news .dsp{font-size:clamp(1.75rem,4vw,2.75rem)}
.news__form{display:flex;flex-direction:column;gap:.75rem;width:100%}
.news__field{
  flex:1;background:transparent;border:0;border-bottom:1px solid var(--aegean);
  padding:.9rem 0;font-family:var(--body);font-size:1rem;color:var(--aegean);
}
.news__field::placeholder{color:color-mix(in srgb,var(--aegean) 45%,transparent)}
.news__note{font-size:.8125rem;color:color-mix(in srgb,var(--aegean) 68%,transparent);margin:0}

/* ── 7. Commerce: the global cart ────────────────────────── */
.cart__title{font-family:var(--display);font-weight:400;font-size:1.375rem;margin:0}
.cart__body{display:flex;flex-direction:column;gap:1.75rem;flex:1}

.cart__empty{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;padding-block:2rem}
.cart__empty-msg{margin:0;font-family:var(--display);font-size:1.25rem}

.cart__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cart-item{display:grid;grid-template-columns:5rem 1fr;gap:1rem;padding-block:1.25rem;border-bottom:1px solid var(--rule);transition:border-color 1.2s ease}
.cart-item__img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.cart-item__meta{display:flex;flex-direction:column;gap:.35rem}
.cart-item__name{font-family:var(--display);font-size:1rem;line-height:1.35}
.cart-item__var{font-family:var(--util);font-size:.6875rem;letter-spacing:.14em;color:var(--label);transition:color 1.2s ease}
.cart-item__price{font-family:var(--util);font-size:.8125rem;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.cart-item__qty{display:flex;align-items:center;gap:.5rem;margin-top:.35rem}
.qty__btn{
  width:1.75rem;height:1.75rem;border:1px solid var(--rule);background:transparent;cursor:pointer;
  font-family:var(--util);font-size:.875rem;line-height:1;transition:border-color .3s ease;
}
.qty__btn:hover{border-color:var(--aegean)}
.qty__n{font-family:var(--util);font-size:.8125rem;min-width:1.25rem;text-align:center;font-variant-numeric:tabular-nums}
.cart-item__rm{
  margin-left:auto;background:none;border:0;cursor:pointer;padding:.25rem 0;
  font-family:var(--util);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label);border-bottom:1px solid transparent;transition:border-color .3s ease,color 1.2s ease;
}
.cart-item__rm:hover{border-bottom-color:var(--label)}

.cart__cross{display:flex;flex-direction:column;gap:.9rem}
.cart__cross-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.cart__cross-list a{display:flex;flex-direction:column;gap:.4rem}
.cart__cross-list img{width:100%;aspect-ratio:3/4;object-fit:cover}

.cart__foot{display:flex;flex-direction:column;gap:.9rem;margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--rule);transition:border-color 1.2s ease}
.cart__row{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--util);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase}
.cart__total{font-size:1rem;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.cart__ship{margin:0;font-size:.8125rem;color:color-mix(in srgb,var(--aegean) 72%,transparent)}
.cart__checkout{width:100%}
.cart__view{align-self:center}
.cart__trust{margin:0;font-size:.6875rem;line-height:1.5;color:color-mix(in srgb,var(--aegean) 62%,transparent)}

.entry{max-width:68ch;margin-inline:auto}
.entry__title{font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:1.5rem}

/* ── 8. Footer ───────────────────────────────────────────── */
.foot{background:var(--aegean);color:#fff;padding-block:clamp(3rem,7vw,5rem)}
.foot__top{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.16)}
.foot__brand{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.foot__mark{font-family:var(--display);font-weight:400;font-size:1.125rem;letter-spacing:.4em;text-indent:.4em}
.foot__seal{width:3.25rem;height:auto;opacity:.5;filter:brightness(0) invert(1)}
.foot__tag{margin:0;font-size:.875rem;color:rgba(255,255,255,.66);max-width:30ch}
.foot__col h3{font-family:var(--util);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:rgba(255,255,255,.6);margin:0 0 1rem}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.9375rem}
.foot__col a{border-bottom:1px solid transparent;transition:border-color .3s ease}
.foot__col a:hover{border-color:rgba(255,255,255,.6)}
.foot__bot{display:flex;flex-direction:column;gap:1rem;padding-top:2rem;font-size:.8125rem;color:rgba(255,255,255,.62)}
.foot__pay{font-family:var(--util);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width:48rem){
  :root{--hdr:4.5rem}
  .cats{grid-template-columns:repeat(4,1fr)}
  .grid-prod{grid-template-columns:repeat(4,1fr)}
  .vals{grid-template-columns:repeat(3,1fr)}
  .news__form{flex-direction:row;align-items:flex-end;gap:1.25rem}
  .news__form .btn{white-space:nowrap}
  .foot__top{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .foot__bot{flex-direction:row;align-items:center;justify-content:space-between}
  .feat{grid-template-columns:1.05fr .95fr;align-items:center}
  .feat__body{padding-left:clamp(1rem,4vw,4rem)}
  /* Text sits on the side the model does not occupy. The 42vw ceiling is the
     guarantee: the lockup can never cross the middle of the frame, whatever
     length the client types into the collection name. */
  .slide__lock{max-width:min(36rem,42vw);bottom:calc(clamp(6rem,18vh,10rem) + var(--cookie-h))}
  .slide--right .slide__lock{left:auto;right:var(--gut);text-align:right}
  .slide--right .lock__a{text-indent:0;padding-right:.3em}
  .slide--right .lock__b{margin-right:.06em;margin-left:0}
  .search{flex-direction:row;align-items:flex-end;gap:1.5rem}
  .search__field{flex:1}
}

@media (min-width:64rem){
  /* Desktop: wordmark hard left, categories beside it, icons at the far edge —
     the BabyBoo arrangement, in our type. The burger leaves the grid entirely
     so three children fill three columns. */
  .hdr__burger{display:none}
  .hdr__in{grid-template-columns:auto 1fr auto}
  .hdr__mark{justify-self:start}
  .hdr__nav{display:block;justify-self:start;margin-left:clamp(1.5rem,4vw,3.5rem)}
  .hdr__nav ul{
    display:flex;gap:2rem;list-style:none;margin:0;padding:0;
    font-family:var(--util);font-size:.6875rem;font-weight:400;
    letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  }
  .hdr__nav a{display:block;border-bottom:1px solid transparent;padding-bottom:.2rem;transition:border-color .3s ease}
  .hdr__nav a:hover{border-color:currentColor}
  .hero__stage{height:min(92svh,52rem)}

  /* Wordmark down the left margin of New Arrivals, read like a spine. */
  .brandrail{
    display:block;position:absolute;
    left:clamp(1rem,2.2vw,2rem);top:clamp(3.5rem,8vw,7.5rem);
    writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;
    font-family:var(--display);font-weight:400;font-size:.9375rem;
    letter-spacing:.62em;text-transform:uppercase;
    color:var(--meltemi);opacity:.55;pointer-events:none;
    transition:color 1.2s ease;
  }
  .section--rail > .wrap{padding-left:calc(var(--gut) + 3rem)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.slide[data-active="true"] .slide__lock{animation:rise 1s .1s both cubic-bezier(.2,.7,.3,1)}

/* ═══════════════════════════════════════════════════════════
   Refinement round: locale bar, shop, product, consent.
   Appended after the base so these win on equal specificity.
   ═══════════════════════════════════════════════════════════ */

/* ── Header, remaining bits ──────────────────────────────── */
/* A phone shows burger, wordmark, search and bag. Wishlist and account move
   into the drawer, where there is room for words instead of guesswork icons.
   Scoped to the phone range explicitly rather than declared loose and undone
   further down — the intent should be readable where the rule is. */
@media (max-width:47.999rem){
  .hdr__icon--wide{display:none}
}

.drawer__util{
  font-family:var(--util);font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label);transition:color 1.2s ease;
}
.drawer__locale{margin-top:.75rem;padding-top:1rem;border-top:1px solid var(--rule);transition:border-color 1.2s ease}
.drawer__locale .locale{margin-left:0;flex-wrap:wrap;gap:.35rem}
.drawer__locale .locale__select{color:var(--aegean)}
.drawer__locale .locale__sep{background:var(--rule)}

/* ── Shop archive ────────────────────────────────────────── */
.archive-head{display:flex;flex-direction:column;gap:1rem;padding-block:clamp(2rem,5vw,4rem);max-width:62ch}
.archive-head__title{font-size:clamp(1.875rem,5vw,3.25rem)}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1rem;border-block:1px solid var(--rule);
  transition:border-color 1.2s ease;
}
.toolbar__filter{
  display:flex;align-items:center;gap:.4rem;background:none;border:0;cursor:pointer;padding:.4rem 0;
  font-family:var(--util);font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
}
.toolbar__plus{font-size:.875rem;line-height:1}
.toolbar__count{
  font-family:var(--util);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label);transition:color 1.2s ease;
}
.toolbar__sort select{
  appearance:none;background:transparent;border:0;cursor:pointer;color:inherit;
  font-family:var(--util);font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.4rem 1.2rem .4rem 0;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right .5rem center,right .27rem center;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.toolbar__sort .woocommerce-ordering{margin:0}

.filters{padding-block:1.75rem;border-bottom:1px solid var(--rule);transition:border-color 1.2s ease}
.filters[hidden]{display:none}
.filters__form{display:flex;flex-direction:column;gap:1.75rem}
.filters__group{display:flex;flex-direction:column;gap:.75rem}
.filters__row{display:flex;align-items:center;gap:.75rem}
.filters__num{
  width:6rem;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.5rem 0;font-family:var(--util);font-size:.875rem;color:var(--aegean);
  font-variant-numeric:tabular-nums;transition:border-color .3s ease;
}
.filters__num:focus{border-color:var(--aegean)}
.filters__dash{color:var(--label);transition:color 1.2s ease}
.filters__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-block;padding:.5rem .9rem;border:1px solid var(--rule);
  font-family:var(--util);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .3s ease;
}
.chip:hover{border-color:var(--aegean)}
.filters__acts{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

/* WooCommerce prints the loop as ul.products; make it our grid. */
.woocommerce ul.products{
  list-style:none;margin:0;padding:clamp(2rem,4vw,3rem) 0 0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.25rem,3vw,2.25rem) clamp(.75rem,2vw,1.75rem);
}
.woocommerce ul.products li.product{margin:0;width:auto;float:none}
.woocommerce ul.products li.product a img{width:100%;aspect-ratio:3/4;object-fit:cover;margin:0}
.woocommerce ul.products li.product .price{
  font-family:var(--util);font-size:.8125rem;letter-spacing:.12em;color:var(--aegean);
  font-variant-numeric:tabular-nums;display:block;margin-top:.3rem;
}
.woocommerce ul.products li.product .prod__n{display:block;margin-top:.9rem}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb{display:none}

.woocommerce nav.woocommerce-pagination{padding-block:clamp(2.5rem,6vw,4rem)}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:.4rem;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-family:var(--util);font-size:.75rem;letter-spacing:.1em;
  padding:.6rem .8rem;border:1px solid transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current{border-color:var(--aegean);background:transparent;color:var(--aegean)}

/* ── Product page ────────────────────────────────────────── */

.pdp__rating{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.pdp__rating-n{font-family:var(--util);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);transition:color 1.2s ease}
.woocommerce .star-rating{font-size:.75em;color:var(--aegean)}

.woocommerce .quantity input.qty{
  border:1px solid var(--rule);padding:.85rem .5rem;width:4rem;text-align:center;
  font-family:var(--util);font-variant-numeric:tabular-nums;
}

.pdp__sizechart{
  display:inline-block;background:none;border:0;cursor:pointer;padding:0 0 .2rem;
  margin-bottom:.5rem;
  font-family:var(--util);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);border-bottom:1px solid var(--rule);transition:border-color .3s ease,color 1.2s ease;
}
.pdp__sizechart:hover{border-color:var(--aegean)}
.pdp__returns{margin:0 0 1.5rem;font-size:.8125rem;color:color-mix(in srgb,var(--aegean) 72%,transparent)}
.pdp__returns a{border-bottom:1px solid var(--caldera)}
.pdp__reviews{padding-top:clamp(2rem,5vw,3.5rem)}

.accordion{display:flex;flex-direction:column;border-top:1px solid var(--rule);transition:border-color 1.2s ease;margin-top:clamp(1.5rem,4vw,2.5rem)}
.accordion__item{border-bottom:1px solid var(--rule);transition:border-color 1.2s ease}
.accordion__head{
  cursor:pointer;list-style:none;padding:1.15rem 0;position:relative;padding-right:2rem;
  font-family:var(--util);font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
}
.accordion__head::-webkit-details-marker{display:none}
.accordion__head::after{
  content:"";position:absolute;right:.35rem;top:50%;width:9px;height:9px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;
}
.accordion__item[open] .accordion__head::after{transform:translateY(-25%) rotate(-135deg)}
.accordion__body{padding-bottom:1.5rem;font-size:.9375rem;max-width:64ch}
.accordion__body p{margin:0 0 1rem}
.accordion__body table{width:100%;border-collapse:collapse;font-size:.875rem}
.accordion__body th,.accordion__body td{padding:.5rem 0;text-align:left;border-bottom:1px solid var(--rule)}

/* ── Cookie consent ──────────────────────────────────────── */
.cookie__in{display:flex;flex-direction:column;gap:1rem;max-width:var(--max);margin-inline:auto;width:100%}
.cookie__lead{display:flex;flex-direction:column;gap:.85rem}
.cookie__text{margin:0;font-size:.75rem;line-height:1.55;max-width:64ch;color:color-mix(in srgb,var(--aegean) 82%,transparent)}
/* Reject and Accept are the same button, deliberately. A refusal that is harder
   to click than an acceptance is not freely given consent. */
.cookie__acts{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie__acts .btn{flex:1 1 auto;min-width:8rem;padding:.7rem 1rem;font-size:.5625rem;letter-spacing:.18em}
.cookie__detail{display:flex;flex-direction:column;gap:1rem;padding-top:1rem;border-top:1px solid var(--rule);transition:border-color 1.2s ease}
.cookie__detail[hidden]{display:none}
.cookie__cat{display:flex;flex-direction:column;gap:.3rem}
.cookie__cat-head{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.cookie__cat-head input{width:1rem;height:1rem;accent-color:var(--aegean)}
.cookie__cat-name{font-family:var(--util);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.cookie__cat-lock{font-family:var(--util);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);transition:color 1.2s ease}
.cookie__cat-text{margin:0 0 0 1.6rem;font-size:.75rem;line-height:1.5;color:color-mix(in srgb,var(--aegean) 70%,transparent)}
.cookie__save{align-self:flex-start}

.foot__cookies{
  background:none;border:0;cursor:pointer;padding:0;color:inherit;
  font-size:.8125rem;border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .3s ease;
}
.foot__cookies:hover{border-color:#fff}

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width:48rem){
  .hdr__icon--wide{display:flex}
  .woocommerce ul.products{grid-template-columns:repeat(3,1fr)}

  .filters__form{flex-direction:row;align-items:flex-end;gap:3rem;flex-wrap:wrap}
  .cookie__in{flex-direction:column}
  .cookie__lead{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}
  .cookie__acts{flex:0 0 auto}
  .cookie__acts .btn{min-width:9rem}
  .cookie__detail{flex-direction:row;flex-wrap:wrap;gap:2rem;align-items:flex-start}
  .cookie__cat{flex:1 1 14rem}
}

@media (min-width:64rem){
  .woocommerce ul.products{grid-template-columns:repeat(4,1fr)}
}
/* ═══════════════════════════════════════════════════════════
   Corrections round.
   ═══════════════════════════════════════════════════════════ */

/* ── Locale: one control up top, the full set in the footer ─ */
.locale--mini{gap:0}
.locale--mini .locale__select{padding-right:1rem}

.locale--full{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;margin-left:0}
.locale--full .locale__field{flex-direction:column;align-items:flex-start;gap:.35rem}
.locale__label{
  font-family:var(--util);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.locale--full .locale__select{
  padding:.5rem 1.4rem .5rem 0;font-size:.8125rem;letter-spacing:.08em;text-transform:none;
  border-bottom:1px solid rgba(255,255,255,.22);min-width:8rem;
}
.foot__locale{
  display:flex;flex-direction:column;gap:1rem;
  padding-block:2rem;border-bottom:1px solid rgba(255,255,255,.16);
}
.foot__locale .eyebrow{color:rgba(255,255,255,.6)}

/* ── Archive title: quieter ──────────────────────────────────
   The display serif at hero scale was competing with the hero.
   A category name is a label, not a statement — so it sits just
   above body size and lets the SHOP eyebrow do the signalling. */
.archive-head{gap:.6rem;padding-block:clamp(1.75rem,4vw,3rem)}
.archive-head__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.625rem);
  letter-spacing:.01em;line-height:1.25;
}

/* ── Sale marker ─────────────────────────────────────────────
   WooCommerce ships a filled yellow circle. Replaced with the
   same small tracked caps every other label on the site uses. */
.woocommerce span.onsale{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  min-width:0;min-height:0;width:auto;height:auto;line-height:1;
  margin:0;padding:.35rem .6rem;border-radius:0;
  background:rgba(255,255,255,.92);color:var(--aegean);
  font-family:var(--util);font-weight:400;font-size:.5625rem;
  letter-spacing:.2em;text-transform:uppercase;
}
.woocommerce ul.products li.product,
.woocommerce div.product span.onsale{top:1rem;left:1rem}

/* ── Golden Hour, always on ──────────────────────────────────
   The state is stamped on <body> by PHP and mirrored onto <html>
   by the script, so both selectors have to resolve the tokens. */
body[data-hour="golden"]{
  --rule:#EBD8CE;
  --label:#A9694F;
  --scrim-top:rgba(96,52,44,.26);
  --scrim-bot:rgba(112,58,46,.44);
}

@media (min-width:48rem){
  .foot__locale{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:2rem}
}
/* ═══════════════════════════════════════════════════════════
   Product page rebuild + heading face on trial.
   ═══════════════════════════════════════════════════════════ */

/* ── THE SWITCH ──────────────────────────────────────────────
   One line decides the heading face for section titles, the
   accordion, institutional pages and footer navigation.
   Swap the two lines below to go back to Jost. Both families
   are loaded and self-hosted, so the change costs no request
   and no GDPR exposure either way. */
:root{
  --heading:"Montserrat","Jost","Futura",sans-serif;   /* on trial */
  /* --heading:"Jost","Futura","Century Gothic",sans-serif; */ /* original */
}

/* Where the heading face applies. Deliberately not everywhere:
   Bodoni still carries the hero and product names, Instrument
   Sans still carries body copy. This is the third voice, for
   structure — section titles, accordion heads, navigation. */
.accordion__head,
.archive-head__title,
.wear__title,
.foot__col h3,
.foot__col ul,
.entry__title,
.wp-block-heading,
.modal__head .dsp,
.cart__title{
  font-family:var(--heading);
}

.accordion__head,
.foot__col h3{letter-spacing:.18em}

/* Institutional pages: headings in the structural face, body
   copy untouched. */
.entry .wp-block-heading{
  font-family:var(--heading);
  font-weight:500;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
  margin:2.5rem 0 .75rem;
}
.entry__title{font-weight:500;letter-spacing:.06em;text-transform:none}

/* ── Product page: the frame ─────────────────────────────── */

/* WooCommerce's variation table carries the labels we replaced
   with our own rows. The selects inside it stay in the DOM —
   they are what the plugin's script drives — but out of sight. */
.woocommerce div.product form.cart table.variations th.label{display:none}
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td{display:block;width:100%;padding:0;border:0}
.woocommerce div.product form.cart table.variations td.value{margin-bottom:1.5rem}
.woocommerce div.product form.cart .variations select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.woocommerce div.product form.cart .reset_variations{
  display:inline-block;margin-top:.5rem;
  font-family:var(--util);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label);
}

/* ── Gallery ─────────────────────────────────────────────── */
.gal{position:relative}
.gal__track{
  display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{flex:0 0 100%;margin:0;scroll-snap-align:start}
.gal__img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:2.5rem;height:2.5rem;display:grid;place-items:center;
  background:rgba(255,255,255,.86);border:0;cursor:pointer;
  opacity:0;transition:opacity .25s ease,background .25s ease;
}
.gal__nav svg{width:18px;height:18px;fill:none;stroke:var(--aegean);stroke-width:1.2}
.gal__nav--prev{left:.5rem}
.gal__nav--next{right:.5rem}
.gal:hover .gal__nav,.gal__nav:focus-visible{opacity:1}
.gal__nav[hidden]{display:none}

/* ── The right column ────────────────────────────────────── */
.woocommerce div.product .product_title{
  font-family:var(--display);font-weight:400;
  /* Ceiling measured on the live PDP with a 45-character name: 33px keeps two lines from 1024px to 1920px in the 40% column; 36px drops to three lines around 1280-1600px. */ font-size:clamp(1.375rem,2.6vw,2.0625rem);line-height:1.18;
  letter-spacing:.01em;margin:0 0 .6rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--util);font-size:.9375rem;letter-spacing:.12em;
  color:var(--aegean);font-variant-numeric:tabular-nums;margin:0 0 1.25rem;
}
.woocommerce div.product p.price del{opacity:.45;margin-right:.5rem}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product .woocommerce-product-details__short-description{
  margin:0 0 1.75rem;max-width:46ch;
  color:color-mix(in srgb,var(--aegean) 82%,transparent);
}

/* Label row: "Colour — Wine" left, "Size chart" pushed right.
   Same row on phone and desktop; the horizontal reading is the
   point of it. */
.pdp__row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:.65rem;
}
.pdp__row-label{
  font-family:var(--util);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label);transition:color 1.2s ease;
}
.pdp__row-value{
  font-family:var(--util);font-size:.625rem;letter-spacing:.14em;
  color:var(--aegean);text-transform:none;
}
.pdp__row-value:not(:empty)::before{content:"— ";opacity:.5}
.pdp__sizechart{
  background:none;border:0;cursor:pointer;padding:0 0 .15rem;
  font-family:var(--util);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label);border-bottom:1px solid currentColor;transition:color 1.2s ease;
}
.pdp__inline-sizes{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;border-bottom:1px solid var(--caldera);
}

/* ── Swatches: square, always square ─────────────────────── */
.swatches{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}

.swatch{
  border:1px solid var(--rule);background:var(--limewash);cursor:pointer;
  border-radius:0;padding:0;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.swatch:disabled{cursor:not-allowed}

.swatch--size{
  min-width:3.25rem;height:3rem;padding:0 .75rem;
  font-family:var(--util);font-size:.75rem;letter-spacing:.1em;
  color:var(--aegean);
}
.swatch--size.is-active{background:var(--aegean);border-color:var(--aegean);color:var(--limewash)}
.swatch--size.is-gone{color:color-mix(in srgb,var(--aegean) 35%,transparent);text-decoration:line-through}

.swatch--colour{width:2.25rem;height:2.25rem;padding:2px}
.swatch__chip{display:block;width:100%;height:100%;border:1px solid rgba(15,53,82,.12)}
.swatch--colour.is-active{border-color:var(--aegean)}
.swatch--colour.is-gone{opacity:.3}

/* ── Buttons: the Add to bag standard ────────────────────────
   This is the reference every primary CTA on the site follows —
   square, tracked caps, full width. .btn--solid was already the
   same shape, so Proceed to checkout inherits it rather than
   being restyled separately. */
.woocommerce div.product form.cart{margin:0 0 .75rem}
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.wc-block-components-button{
  width:100%;background:var(--aegean);color:var(--limewash);
  border:1px solid var(--aegean);border-radius:0;
  font-family:var(--util);font-weight:400;font-size:.6875rem;
  letter-spacing:.24em;text-transform:uppercase;
  padding:1.15rem 2rem;transition:background .3s ease,border-color .3s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover{background:#17557f;border-color:#17557f}
.woocommerce div.product form.cart .quantity{display:none}

/* ── Wishlist ────────────────────────────────────────────── */
.wish{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:transparent;border:1px solid var(--rule);border-radius:0;cursor:pointer;
  padding:.55rem;color:var(--aegean);
  transition:border-color .25s ease,color .25s ease;
}
.wish--wide{width:100%;padding:1.1rem 2rem;
  font-family:var(--util);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
}
.wish:hover{border-color:var(--aegean)}
.wish__icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.2;transition:fill .25s ease}
.wish.is-saved .wish__icon{fill:var(--caldera);stroke:var(--caldera)}
.wish__on{display:none}
.wish.is-saved .wish__on{display:inline}
.wish.is-saved .wish__off{display:none}

/* Card hearts float over the photograph. */
.woocommerce ul.products li.product .wish{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  background:rgba(255,255,255,.9);border-color:transparent;
}

.wishlist-empty{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;padding-block:clamp(2rem,6vw,4rem)}
.wishlist-empty__msg{margin:0;font-family:var(--display);font-size:1.5rem}
.prod--wish{position:relative}
.prod--wish .wish--wide{margin-top:.6rem;padding:.7rem 1rem;font-size:.5625rem}

.pdp__returns{
  display:flex;align-items:center;gap:.5rem;
  margin:1.25rem 0 0;font-size:.8125rem;
  color:color-mix(in srgb,var(--aegean) 72%,transparent);
}
.pdp__returns a{border-bottom:1px solid var(--caldera)}

/* ── Accordion ───────────────────────────────────────────── */
.accordion{margin-top:clamp(1.75rem,4vw,2.5rem)}
.accordion__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.75rem;font-weight:500;padding:1.25rem 0;
}
.accordion__head::after{content:none}
.accordion__sign{position:relative;width:11px;height:11px;flex:0 0 auto}
.accordion__sign::before,.accordion__sign::after{
  content:"";position:absolute;background:currentColor;transition:transform .3s ease,opacity .3s ease;
}
.accordion__sign::before{left:0;top:5px;width:11px;height:1px}
.accordion__sign::after{left:5px;top:0;width:1px;height:11px}
.accordion__item[open] .accordion__sign::after{transform:rotate(90deg);opacity:0}
.accordion__body{padding-bottom:1.5rem}

/* ── Wear it with ────────────────────────────────────────── */
.wear{padding-top:clamp(3rem,7vw,5rem)}
.wear__title{
  font-size:.75rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  text-align:center;margin:0 0 clamp(1.5rem,3vw,2.5rem);
}

/* ===========================================================
   PRODUCT PAGE LAYOUT - the single owner of this grid.

   Gallery and summary live inside .pdp__main, a wrapper that
   inc/shop.php opens and closes around WooCommerce's summary hooks.
   The grid sits on .pdp__main, not on div.product, and that is the
   fix for the sticky gallery riding over what follows it: a sticky
   box cannot leave the element that contains it, and everything
   after the summary - Wear it with, reviews, the footer - is now
   outside that element. No browser's reading of sticky-in-grid can
   let the gallery reach them.

   Width: 1.5fr 1fr stays. The gallery gains from two spaces no
   column was using - a narrower gap from 64rem up, and a wider
   container on product pages only.

   The #content variants in the reset are required. Our wrapper
   opens <main id="content">, which switches on WooCommerce's
   ID-qualified `#content div.product div.summary{width:48%}` at
   specificity 1,3,2. Matching the ID plus .pdp__main puts ours
   at 1,4,2.
   =========================================================== */

.woocommerce div.product{display:block;padding-block:clamp(1.5rem,4vw,3rem)}

.pdp__main{
  position:relative; /* anchors the sale badge to the gallery corner */
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.5rem,3vw,2.5rem);
}

.woocommerce div.product .pdp__main > .gal,
.woocommerce div.product .pdp__main > div.images,
.woocommerce div.product .pdp__main > div.summary,
.woocommerce #content div.product .pdp__main > div.images,
.woocommerce #content div.product .pdp__main > div.summary,
.woocommerce-page #content div.product .pdp__main > div.images,
.woocommerce-page #content div.product .pdp__main > div.summary{
  width:auto;float:none;margin:0;min-width:0;
}

@media (min-width:48rem){
  /* Two photographs at a time. */
  .gal__slide{flex:0 0 calc(50% - 1px)}

  .pdp__main{grid-template-columns:1.5fr 1fr;align-items:start}

  .pdp__main > .gal,
  .pdp__main > div.images{
    grid-column:1;grid-row:1;
    position:sticky;top:calc(var(--hdr) + 1rem);align-self:start;
  }

  /* No padding: the grid gap is the gutter between the columns. */
  .pdp__main > div.summary{grid-column:2;grid-row:1;padding-left:0}
}

@media (min-width:64rem){
  /* Gap was clamp(2rem,4vw,4rem). 32px at 1280 and 48px at 1920 still
     read as two columns; what it frees goes to both tracks at the
     same 60/40 split. */
  .pdp__main{gap:clamp(1.5rem,2.5vw,3rem)}

  /* Product pages run wider than the rest of the site: 1680 instead of
     1440, with a slimmer side margin. Measured on the live PDP, each
     photograph goes from 369x491 to 455x607 at 1920 and from 325x433
     to 342x456 at 1280. Header and footer keep the site container, so
     the gallery starts left of the wordmark - 19px at 1280, 136px at
     1920. Delete this rule to bring the edges back into line. */
  body.single-product .site-main > .wrap{
    max-width:1680px;
    padding-inline:clamp(1.25rem,3.5vw,3.5rem);
  }
}
/* ===========================================================
   PDP round 3: legacy swatches, duplicate price, wishlist label.
   =========================================================== */

/* Woo Variation Swatches renders its own rounded buttons beside ours.
   The theme already draws square swatches that drive the same hidden
   select, so the plugin's list and its selected-name label are hidden.
   !important because this overrides a third-party stylesheet whose
   specificity is not ours to control. The plugin can be deactivated
   outright; nothing on this page depends on it. */
.woocommerce div.product form.cart .variable-items-wrapper,
.woocommerce div.product form.cart .woo-selected-variation-item-name{display:none !important}

/* One price on the page, at the top. The price WooCommerce prints above
   Add to bag once a variation is picked is hidden; theme.js writes the
   chosen variation's price into the top line instead, so the number the
   shopper reads is always the one they will pay. */
.woocommerce div.product .single_variation .woocommerce-variation-price{display:none}

/* The wide wishlist button never breaks its label onto two lines. */
.wish--wide{white-space:nowrap}