/* ==========================================================================
   Aanamra — site stylesheet
   Colour tokens live in tokens.css, generated from data/brand.json -> theme.
   Everything here is layout, type and component styling only.
   ========================================================================== */

/* --- reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,fieldset{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}

/* --- type scale -------------------------------------------------------- */
:root{
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:1220px;
  --gut:clamp(1rem,4vw,2.5rem);
  --r:2px;
  --shadow:0 1px 2px rgba(36,26,29,.04),0 8px 28px -12px rgba(36,26,29,.14);
  --line:color-mix(in srgb,var(--ink) 12%,transparent);
  --line-soft:color-mix(in srgb,var(--ink) 7%,transparent);
}

body{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(.95rem,.35vw + .88rem,1.02rem);
  line-height:1.72;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;line-height:1.14;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.12rem,1.4vw,1.32rem)}
p{text-wrap:pretty}
strong{font-weight:500}
small{font-size:.82em}
.muted{color:var(--ink-soft)}

.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--wine);color:#fff;padding:.7rem 1.1rem}
.skip-link:focus{left:.5rem;top:.5rem}
[hidden]{display:none!important}

/* --- wordmark ----------------------------------------------------------
   Drawn to match the logo: a high-contrast serif in magenta, lightly
   tracked, with the tagline set in italic beneath it. Cormorant Garamond
   is the closest widely-available face to the artwork. */
.wordmark{
  display:block;
  font-family:var(--font-display);font-weight:500;
  font-size:1.5rem;line-height:1;letter-spacing:.11em;text-indent:.11em;
  text-transform:uppercase;color:var(--wine);white-space:nowrap;
}
.wordmark__tag{
  display:block;margin-top:.24em;
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:.72rem;letter-spacing:.055em;line-height:1;
  color:var(--wine-soft);white-space:nowrap;
}
.wordmark--lg{font-size:2.1rem}
.wordmark--lg + .wordmark__tag{font-size:.92rem;margin-top:.3em}

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.75rem;border-radius:var(--r);
  font-family:var(--font-sans);font-weight:400;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--wine);color:#fff}
.btn--primary:hover{background:var(--wine-deep)}
.btn--ghost{border-color:var(--wine);color:var(--wine)}
.btn--ghost:hover{background:var(--wine);color:#fff}
.btn--light{background:#fff;color:var(--wine);border-color:#fff}
.btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.btn--wa{background:#1f9d55;color:#fff}
.btn--wa:hover{background:#177a41}
.btn--block{width:100%}
.btn--sm{padding:.62rem 1.15rem;font-size:.7rem}
.btn[disabled]{opacity:.45;pointer-events:none}

.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--ink);transition:background .2s,color .2s;position:relative}
.icon-btn svg{width:21px;height:21px}
.icon-btn:hover{background:var(--blush);color:var(--wine)}

.link-more{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);
  border-bottom:1px solid currentColor;padding-bottom:.2rem}
.link-more svg{width:16px;height:16px;transition:transform .2s}
.link-more:hover svg{transform:translateX(4px)}

/* --- announcement bar -------------------------------------------------- */
.ann{background:var(--wine);color:#fff;text-align:center;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.6rem var(--gut)}
.ann__item{list-style:none}

/* --- header ------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:60;background:var(--cream);
  border-bottom:1px solid var(--line-soft)}
/* The frosted header is desktop-only on purpose. backdrop-filter creates a
   containing block for position:fixed descendants, which made the mobile menu
   position itself against the 88px-tall header instead of the viewport — so it
   rendered one item tall and clipped the rest. */
@media (min-width:1000px){
  .site-header{background:color-mix(in srgb,var(--cream) 92%,transparent);
    backdrop-filter:saturate(1.3) blur(12px)}
}
.nav-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  min-height:76px;padding-block:.4rem}
.brand{display:block;text-align:center;text-decoration:none;justify-self:center;line-height:1}
.nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--line-soft)}
.nav__actions{display:flex;align-items:center;gap:.1rem;justify-self:end}
.nav__toggle{justify-self:start}

.nav__menu{display:flex;justify-content:center;flex-wrap:wrap;gap:.2rem;padding:.3rem 0}
/* Only ever seen inside the mobile slide-out panel. */
.nav__head,.nav__foot{display:none}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:.3rem;padding:.72rem .9rem;
  font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);transition:color .2s}
.nav__link svg{width:14px;height:14px;transition:transform .2s}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--wine)}
.nav__link[aria-current="page"]{position:relative}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.42rem;
  height:1px;background:var(--gold)}

.nav__drop{position:absolute;top:100%;left:50%;translate:-50% 0;min-width:260px;
  background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow);
  padding:.6rem;opacity:0;visibility:hidden;translate:-50% 8px;transition:.22s;z-index:5}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;translate:-50% 0}
.nav__item:hover .nav__link svg{transform:rotate(180deg)}
.nav__drop a{display:block;padding:.6rem .8rem;text-decoration:none;font-size:.86rem;transition:background .18s}
.nav__drop a small{display:block;font-size:.73rem;color:var(--ink-soft);line-height:1.5}
.nav__drop a:hover{background:var(--blush)}
.nav__drop--mega{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:.4rem;min-width:min(660px,88vw);padding:1.1rem}
.megamenu__col h3{font-family:var(--font-sans);font-size:.64rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);padding:.3rem .8rem .5rem}

.bag-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;background:var(--wine);color:#fff;
  font-size:.62rem;letter-spacing:0;font-weight:400}
.bag-count--inline{position:static;display:inline-grid;margin-left:.3rem}

/* search */
.searchbar{border-top:1px solid var(--line-soft);background:#fff;padding:1rem 0 1.2rem}
.searchbar__inner{display:flex;align-items:center;gap:.7rem}
.searchbar__inner svg{width:20px;height:20px;color:var(--ink-soft);flex:none}
.searchbar input{flex:1;border:0;background:none;font-size:1.05rem;padding:.4rem 0}
.searchbar input:focus{outline:none}
.searchbar__results{margin-top:.8rem}
.searchbar__results:empty{display:none}
.sr-item{display:flex;gap:.9rem;align-items:center;padding:.55rem;text-decoration:none;border-radius:var(--r)}
.sr-item:hover{background:var(--blush)}
.sr-item img{width:48px;height:64px;object-fit:cover;flex:none}
.sr-item b{font-weight:400;font-size:.95rem}
.sr-item span{display:block;font-size:.78rem;color:var(--ink-soft)}
.sr-empty{padding:.6rem;color:var(--ink-soft);font-size:.9rem}

@media (min-width:1000px){
  .nav-bar{grid-template-columns:auto 1fr auto;min-height:88px}
  .brand{justify-self:start;text-align:left}
  .nav{grid-column:2;grid-row:1;border:0}
  .nav__toggle{display:none}
  .nav__menu{padding:0}
}
@media (max-width:999px){
  .nav{display:none;position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(340px,86vw);height:100dvh;background:var(--cream);
    z-index:80;padding:1.2rem 0 calc(1.2rem + env(safe-area-inset-bottom,0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:var(--shadow);border:0}
  .nav.is-open{display:block}
  .nav__menu{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{padding:.95rem 1.4rem;font-size:.82rem;width:100%;justify-content:space-between}
  .nav__drop{position:static;translate:none;opacity:1;visibility:visible;box-shadow:none;border:0;
    border-left:2px solid var(--blush-deep);margin:0 1.4rem .5rem;display:none;min-width:0}
  .nav__item.is-open .nav__drop{display:block}
  .nav__drop--mega{grid-template-columns:1fr;min-width:0;padding:.4rem}
  .nav__head{display:flex;align-items:center;justify-content:space-between;
    gap:1rem;padding:0 1rem .9rem 1.4rem;border-bottom:1px solid var(--line-soft);margin-bottom:.4rem}
  .nav__head-mark{font-size:1.15rem}
  .nav__foot{display:block;padding:1.2rem 1.4rem 0;margin-top:.6rem;border-top:1px solid var(--line-soft)}
  .nav-scrim{position:fixed;inset:0;background:rgba(43,27,40,.5);z-index:70;
    animation:scrim-in .25s ease both}
  @keyframes scrim-in{from{opacity:0}to{opacity:1}}
  .nav.is-open{animation:nav-in .28s cubic-bezier(.2,.8,.3,1) both}
  @keyframes nav-in{from{transform:translateX(100%)}to{transform:none}}
}

/* --- hero ---------------------------------------------------------------
   A cover photograph is no use cropped, so the image is NEVER cropped here:
   it keeps its own aspect ratio and is only ever scaled. On a short viewport
   the frame is capped by height instead, and the bands either side are filled
   with a blurred, scaled copy of the same picture so the backdrop reads as a
   continuation of the wall rather than as letterboxing.

   The type sits inside the frame, not the viewport, so it stays locked to the
   bare wall on the left of the photograph at every width.
   ------------------------------------------------------------------------ */
.hero{position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--sand);isolation:isolate}

.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg,.hero__bg picture{display:block}
.hero__bg img{width:100%;height:100%;object-fit:cover;
  filter:blur(52px) saturate(.92) brightness(.88);transform:scale(1.18)}

.hero__frame{position:relative;z-index:1;width:100%;margin-inline:auto;overflow:hidden}   /* the slow drift scales the photo; keep it inside the frame */
.hero__media{display:block}
.hero__media img{display:block;width:100%;height:auto}   /* natural aspect — no crop, ever */

.hero__inner{position:relative;z-index:2}
.hero__eyebrow{letter-spacing:.3em;text-transform:uppercase;margin-bottom:1rem;color:var(--wine)}
.hero h1{margin-bottom:.8rem;color:var(--wine-deep)}
.hero h1 em{font-style:italic;color:var(--wine)}
.hero__sub{margin-bottom:1.6rem;color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem}
/* The outline button can land over the brass pot, where magenta-on-dark drops
   below 4.5:1. Give it its own cream ground so it never depends on the photo. */
.hero .btn--ghost{background:color-mix(in srgb,var(--cream) 90%,transparent)}
.hero .btn--ghost:hover{background:var(--wine);color:#fff}

/* Narrow: the picture keeps its shape and the words go underneath it. A 16:9
   photograph squeezed into a phone column would lose the whole rail. */
.hero__inner{padding:clamp(1.8rem,7vw,2.6rem) var(--gut) clamp(2rem,8vw,3rem);
  background:var(--cream)}
.hero__eyebrow{font-size:.64rem}
.hero h1{font-size:clamp(1.9rem,6.4vw,2.6rem)}
.hero__sub{font-size:1rem;max-width:40ch}

/* Wide: the words move onto the wall. */
@media (min-width:1000px){
  .hero__frame{
    /* Cap by height so the whole photograph is on screen at once, then let
       the blurred backdrop fill whatever is left either side. */
    max-width:min(100%, calc(92vh * 1672 / 941));
    container-type:inline-size;
  }
  .hero__frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--cream) 88%,transparent) 0%,
      color-mix(in srgb,var(--cream) 78%,transparent) 20%,
      color-mix(in srgb,var(--cream) 26%,transparent) 34%,
      transparent 44%)}
  .hero__inner{position:absolute;left:7.5%;top:13%;width:24%;
    padding:0;background:none;
    display:flex;flex-direction:column;align-items:flex-start}
  /* Sized against the frame, not the viewport, so the type tracks the photo
     when the frame is capped on a short screen. */
  .hero__eyebrow{font-size:clamp(.58rem,.8cqw,.72rem)}
  .hero h1{font-size:clamp(1.6rem,3.1cqw,2.8rem)}
  .hero__sub{font-size:clamp(.85rem,1.4cqw,1.06rem);max-width:none}
  .hero__cta .btn{padding:.78rem 1.3rem;font-size:clamp(.62rem,.78cqw,.76rem)}
}

/* --- value strip ------------------------------------------------------- */
.values{background:#fff;border-block:1px solid var(--line-soft)}
.values__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);padding-block:clamp(2rem,4vw,3rem)}
.value{text-align:center}
.value svg{width:32px;height:32px;margin:0 auto .8rem;color:var(--gold);stroke-width:1.1}
.value h3{font-family:var(--font-sans);font-size:.72rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:.45rem}
.value p{font-size:.88rem;color:var(--ink-soft);line-height:1.62}

/* --- sections ---------------------------------------------------------- */
.band{padding-block:clamp(3rem,7vw,6rem)}
.band--cream{background:var(--cream)}
.band--white{background:#fff}
.band--blush{background:var(--blush)}
.band--sand{background:var(--sand)}
.band--wine{background:var(--wine-deep);color:#fff}
.band--wine h2,.band--wine h3{color:#fff}
.band--wine .section-sub{color:color-mix(in srgb,#fff 78%,transparent)}

.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.section-h{font-size:clamp(1.6rem,3.1vw,2.5rem)}
.section-eyebrow{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.55rem}
.section-sub{color:var(--ink-soft);max-width:56ch;margin-top:.5rem}
.section-center{text-align:center;margin-inline:auto}
.section-center .section-sub{margin-inline:auto}

/* --- product cards ----------------------------------------------------- */
.grid{display:grid;gap:clamp(1.1rem,2.4vw,2rem)}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr))}
@media (min-width:640px){.grid--cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr))}}

.card{display:flex;flex-direction:column}
.card__media{position:relative;display:block;overflow:hidden;background:var(--sand);aspect-ratio:3/4}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.045)}
.card__badges{position:absolute;top:.7rem;left:.7rem;display:flex;flex-direction:column;
  align-items:flex-start;gap:.35rem}
.badge{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .55rem;
  background:#fff;color:var(--wine);border:1px solid var(--line-soft)}
.badge--bestseller{background:var(--wine);color:#fff;border-color:var(--wine)}
.badge--new{background:var(--gold);color:#fff;border-color:var(--gold)}
.badge--status{background:var(--ink);color:#fff;border-color:var(--ink)}
.card__body{padding-top:.95rem;display:flex;flex-direction:column;gap:.28rem}
.card__name{font-family:var(--font-sans);font-size:.94rem;font-weight:400;line-height:1.45}
.card__name a{text-decoration:none}
.card__name a:hover{color:var(--wine)}
.card__colour{font-size:.78rem;color:var(--ink-soft);display:flex;align-items:center;gap:.45rem}
.swatch{width:11px;height:11px;border-radius:50%;background:var(--swatch);
  box-shadow:inset 0 0 0 1px rgba(36,26,29,.18);flex:none}
.card__price{font-size:.95rem;color:var(--wine)}
.card__sizes{font-size:.7rem;letter-spacing:.13em;color:var(--ink-soft);text-transform:uppercase}
.empty{padding:3rem 0;text-align:center;color:var(--ink-soft)}

/* --- style tiles ------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(.9rem,2vw,1.4rem)}
.tile{position:relative;display:block;text-decoration:none;padding:1.6rem 1.3rem;background:#fff;
  border:1px solid var(--line-soft);transition:border-color .25s,transform .25s}
.tile:hover{border-color:var(--wine);transform:translateY(-3px)}
.tile h3{font-family:var(--font-sans);font-size:.98rem;font-weight:400;margin-bottom:.4rem}
.tile p{font-size:.83rem;color:var(--ink-soft);line-height:1.6}
.tile__arrow{position:absolute;right:1.2rem;bottom:1.3rem;width:18px;height:18px;color:var(--wine);
  opacity:0;transition:.25s}
.tile:hover .tile__arrow{opacity:1;transform:translateX(3px)}

/* --- how it works / steps ---------------------------------------------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
  gap:clamp(1.3rem,3vw,2.2rem)}
.step{position:relative;padding-top:2.9rem}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--font-display);font-size:1.9rem;color:var(--gold);line-height:1}
.step h3{font-family:var(--font-sans);font-size:.8rem;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;margin-bottom:.5rem}
.step p{font-size:.9rem;color:var(--ink-soft)}
.band--wine .step p{color:color-mix(in srgb,#fff 74%,transparent)}
.band--wine .step::before{color:var(--blush-deep)}

/* --- editorial split --------------------------------------------------- */
.split{display:grid;gap:clamp(1.8rem,4vw,4rem);align-items:center}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}
  .split--wide-media{grid-template-columns:1.15fr 1fr}}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__media--tall img{aspect-ratio:3/4}
.prose>*+*{margin-top:1.05rem}
.prose h2{margin-bottom:.3rem}
.prose ul{list-style:none;display:grid;gap:.6rem}
.ticks{display:grid;gap:.6rem;list-style:none}
.ticks li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border:1px solid var(--gold);rotate:45deg}

/* --- PDP --------------------------------------------------------------- */
.crumbs{display:flex;align-items:center;gap:.4rem;padding-block:1.3rem;font-size:.76rem;
  color:var(--ink-soft);flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--wine)}
.crumbs svg{width:13px;height:13px;opacity:.55}

.pdp{display:grid;gap:clamp(1.6rem,4vw,3.4rem);padding-bottom:clamp(3rem,6vw,5rem);align-items:start}
@media (min-width:900px){.pdp{grid-template-columns:1.08fr .92fr}
  .pdp__media{position:sticky;top:120px}}

.pdp-gallery{position:relative;background:var(--sand);aspect-ratio:3/4;overflow:hidden}
.pdp-gallery__slide{position:absolute;inset:0;opacity:0;transition:opacity .4s;margin:0}
.pdp-gallery__slide.is-active{opacity:1}
.pdp-gallery__slide img{width:100%;height:100%;object-fit:contain;background:var(--sand)}
.pdp-thumbs{display:flex;gap:.55rem;margin-top:.7rem;flex-wrap:wrap}
.pdp-thumbs__btn{width:72px;aspect-ratio:3/4;overflow:hidden;background:var(--sand);
  border:1px solid transparent;transition:border-color .2s;padding:0}
.pdp-thumbs__btn img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs__btn.is-active{border-color:var(--wine)}

.pdp__eyebrow{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.pdp__name{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:.6rem}
.pdp__price{font-size:1.3rem;color:var(--wine);margin-bottom:.55rem}
.pdp__price small{color:var(--ink-soft);font-size:.62em;letter-spacing:.04em}
.pdp__colour{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-soft);margin-bottom:1rem}
.pdp__short{color:var(--ink-soft);margin-bottom:1.7rem;max-width:48ch}

.pdp-sizes{margin-bottom:1.5rem}
.pdp-sizes__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.pdp-sizes__head h2{font-family:var(--font-sans);font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.pdp-sizes__head a{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--wine);text-decoration:none;border-bottom:1px solid var(--line)}
.pdp-sizes__head a svg{width:15px;height:15px}
.size-row{display:flex;flex-wrap:wrap;gap:.5rem}
.size-btn{min-width:52px;padding:.65rem .8rem;border:1px solid var(--line);
  font-size:.8rem;letter-spacing:.1em;transition:.18s;background:#fff}
.size-btn:hover:not([disabled]){border-color:var(--wine);color:var(--wine)}
.size-btn.is-selected{background:var(--wine);border-color:var(--wine);color:#fff}
.size-btn[disabled]{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.size-err{color:#b3261e;font-size:.82rem;margin-top:.55rem}

.pdp-buy{display:grid;gap:.65rem;margin-bottom:.9rem}
.pdp-note{display:flex;gap:.5rem;font-size:.82rem;color:var(--ink-soft);margin-bottom:1.6rem}
.pdp-note svg{width:16px;height:16px;flex:none;margin-top:.28em;color:var(--gold)}
.pdp-lookbook{display:flex;gap:.55rem;padding:.9rem 1rem;background:var(--blush);font-size:.88rem}
.pdp-lookbook svg{width:18px;height:18px;flex:none;color:var(--wine)}
.pdp-ig{margin-bottom:1.4rem}
.pdp-ig a{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--wine);text-decoration:none}
.pdp-ig svg{width:17px;height:17px}

.hl-list{list-style:none;display:grid;gap:1rem;margin-top:1.2rem}
@media (min-width:520px){.hl-list{grid-template-columns:1fr 1fr}}
.hl h3{font-family:var(--font-sans);font-size:.73rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.3rem}
.hl p{font-size:.85rem;color:var(--ink-soft);line-height:1.6}

/* accordions */
.pdp-accordions{border-top:1px solid var(--line-soft)}
.acc{border-bottom:1px solid var(--line-soft)}
.acc__head{display:flex;align-items:center;gap:.7rem;padding:1.05rem 0;cursor:pointer;
  font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;list-style:none}
.acc__head::-webkit-details-marker{display:none}
.acc__head>svg:first-child{width:18px;height:18px;color:var(--gold);flex:none}
.acc__head span{flex:1}
.acc__chev{width:15px;height:15px;transition:transform .25s}
.acc[open] .acc__chev{transform:rotate(180deg)}
.acc__body{padding-bottom:1.4rem;font-size:.92rem;color:var(--ink-soft)}
.acc__body>*+*{margin-top:.9rem}
.acc__body p,.acc__body li{line-height:1.7}

.rate-list{list-style:none;display:grid;gap:.5rem}
.rate-list li{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;
  padding-bottom:.5rem;border-bottom:1px dashed var(--line-soft)}
.rate-list li span:last-child{color:var(--ink);text-align:right;white-space:nowrap}

/* --- size table -------------------------------------------------------- */
.size-table{width:100%;font-size:.88rem;background:#fff}
.size-table caption{caption-side:bottom;padding-top:.7rem;font-size:.76rem;color:var(--ink-soft);text-align:left}
.size-table th,.size-table td{padding:.62rem .7rem;text-align:left;border-bottom:1px solid var(--line-soft)}
.size-table thead th{font-family:var(--font-sans);font-weight:400;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--wine)}
.size-table tbody th{font-weight:500;color:var(--wine)}
.size-table tbody tr:nth-child(even){background:var(--cream)}
.table-scroll{overflow-x:auto}

/* --- shop page --------------------------------------------------------- */
.shop-head{padding-block:clamp(2rem,4vw,3.4rem) 1.4rem}
.shop-layout{display:grid;gap:clamp(1.4rem,3vw,2.6rem);padding-bottom:clamp(3rem,6vw,5rem);align-items:start}
@media (min-width:900px){.shop-layout{grid-template-columns:238px 1fr}}

.filters{background:#fff;border:1px solid var(--line-soft);padding:1.2rem}
@media (min-width:900px){.filters{position:sticky;top:120px}}
.filters__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.filters__top h2{font-family:var(--font-sans);font-size:.7rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.filters__clear{font-size:.74rem;color:var(--wine);border-bottom:1px solid var(--line)}
.fgroup{border-top:1px solid var(--line-soft);padding-block:.85rem}
.fgroup h3{font-family:var(--font-sans);font-size:.65rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem}
.fopt{display:flex;align-items:center;gap:.55rem;padding:.2rem 0;font-size:.86rem;cursor:pointer}
.fopt input{accent-color:var(--wine);width:15px;height:15px;flex:none}
.fopt span{flex:1}
.fopt em{font-style:normal;color:var(--ink-soft);font-size:.78rem}
.fsizes{display:flex;flex-wrap:wrap;gap:.4rem}
.fsize{min-width:42px;padding:.42rem .5rem;border:1px solid var(--line);font-size:.76rem;background:#fff;text-align:center}
.fsize.is-on{background:var(--wine);border-color:var(--wine);color:#fff}

.shop-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  margin-bottom:1.3rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-soft)}
.shop-count{font-size:.82rem;color:var(--ink-soft)}
.shop-sort{display:flex;align-items:center;gap:.5rem;font-size:.82rem}
.shop-sort select{border:1px solid var(--line);padding:.48rem .7rem;background:#fff;font-size:.82rem}
.filters-toggle{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  padding:.5rem .9rem;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.filters-toggle svg{width:16px;height:16px}
@media (min-width:900px){.filters-toggle{display:none}}
@media (max-width:899px){.filters{display:none}.filters.is-open{display:block}}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:var(--blush);
  font-size:.76rem;border-radius:999px}
.chip svg{width:13px;height:13px}

/* --- bag --------------------------------------------------------------- */
.bag-layout{display:grid;gap:clamp(1.6rem,4vw,3rem);padding-bottom:clamp(3rem,6vw,5rem);align-items:start}
@media (min-width:900px){.bag-layout{grid-template-columns:1.25fr .75fr}}
.bag-list{list-style:none;display:grid;gap:1rem}
.bag-item{display:grid;grid-template-columns:92px 1fr auto;gap:1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line-soft);align-items:start}
.bag-item picture{display:block}
.bag-item img{width:92px;aspect-ratio:3/4;object-fit:cover;background:var(--sand)}
.bag-item h3{font-family:var(--font-sans);font-size:.95rem;font-weight:400;margin-bottom:.25rem}
.bag-item h3 a{text-decoration:none}
.bag-item__meta{font-size:.8rem;color:var(--ink-soft);margin-bottom:.55rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--wine)}
.qty button svg{width:14px;height:14px}
.qty span{min-width:34px;text-align:center;font-size:.86rem}
.bag-item__right{text-align:right;display:grid;gap:.5rem;justify-items:end}
.bag-item__price{font-size:.95rem;color:var(--wine)}
.bag-remove{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;color:var(--ink-soft)}
.bag-remove svg{width:14px;height:14px}
.bag-remove:hover{color:#b3261e}

.summary{background:#fff;border:1px solid var(--line-soft);padding:clamp(1.2rem,2.5vw,1.8rem)}
.summary h2{font-family:var(--font-sans);font-size:.74rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:1rem}
.summary__row{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;font-size:.9rem}
.summary__row--total{border-top:1px solid var(--line-soft);margin-top:.6rem;padding-top:.8rem;
  font-size:1.1rem;color:var(--wine)}
.summary__note{font-size:.8rem;color:var(--ink-soft);margin-top:.9rem;display:flex;gap:.45rem}
.summary__note svg{width:15px;height:15px;flex:none;margin-top:.25em;color:var(--gold)}

/* --- forms ------------------------------------------------------------- */
.form{display:grid;gap:1rem}
.form-row{display:grid;gap:1rem}
@media (min-width:560px){.form-row--2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.4rem}
.field label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.field label .req{color:var(--wine)}
.field input,.field textarea,.field select{
  border:1px solid var(--line);background:#fff;padding:.78rem .9rem;font-size:.95rem;
  border-radius:var(--r);transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--wine)}
.field textarea{resize:vertical;min-height:110px}
.field small{font-size:.76rem;color:var(--ink-soft)}
.field.has-error input,.field.has-error textarea{border-color:#b3261e}
.field-error{color:#b3261e;font-size:.78rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--ink-soft)}
.consent input{accent-color:var(--wine);width:16px;height:16px;margin-top:.22em;flex:none}

.form-status{padding:.9rem 1.1rem;font-size:.88rem;display:flex;gap:.6rem;align-items:flex-start}
.form-status svg{width:17px;height:17px;flex:none;margin-top:.22em}
.form-status--ok{background:#e9f5ee;color:#1c6b3f}
.form-status--err{background:#fdeceb;color:#a3231c}

/* --- misc content ------------------------------------------------------ */
.page-head{padding-block:clamp(2.4rem,5vw,4.2rem);background:var(--blush);text-align:center}
.page-head h1{margin-bottom:.6rem}
.page-head p{color:var(--ink-soft);max-width:62ch;margin-inline:auto}

.note-card{background:#fff;border:1px solid var(--line-soft);padding:clamp(1.2rem,2.6vw,1.9rem)}
.note-card+.note-card{margin-top:1rem}
.note-card h3{font-family:var(--font-sans);font-size:.78rem;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;margin-bottom:.6rem;display:flex;align-items:center;gap:.55rem}
.note-card h3 svg{width:18px;height:18px;color:var(--gold)}

.faq{border-top:1px solid var(--line-soft)}
.pull{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.35;
  color:var(--wine);max-width:34ch}

.ig-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:.6rem}
.ig-strip a{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--sand)}
.ig-strip img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ig-strip a:hover img{transform:scale(1.06)}

/* --- footer ------------------------------------------------------------ */
.site-footer{background:var(--wine-deep);color:color-mix(in srgb,#fff 78%,transparent);
  padding-top:clamp(2.6rem,5vw,4.4rem);font-size:.9rem}
.site-footer .wordmark{color:#fff}
.site-footer .wordmark__tag{color:var(--blush-deep)}
.footer-cols{display:grid;gap:clamp(1.8rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:760px){.footer-cols{grid-template-columns:1.6fr 1fr 1fr 1.3fr}}
.footer-brand p{margin-top:.9rem;line-height:1.7;max-width:44ch}
.footer-strap{font-size:.68rem!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blush-deep)!important;margin-top:.7rem!important}
.footer-h{font-family:var(--font-sans);font-size:.66rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;margin-bottom:.9rem}
.footer-list{display:grid;gap:.5rem}
.footer-list a{text-decoration:none;transition:color .2s}
.footer-list a:hover{color:#fff}
.footer-contact{display:grid;gap:.85rem;list-style:none}
.footer-contact li{display:flex;gap:.65rem;align-items:flex-start}
.footer-contact svg{width:17px;height:17px;flex:none;margin-top:.24em;color:var(--blush-deep)}
.footer-contact a{text-decoration:none}
.footer-contact a:hover{color:#fff}
.socials{display:flex;gap:.5rem;margin-top:1.1rem}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);
  border-radius:50%;transition:.2s}
.socials a:hover{background:#fff;color:var(--wine-deep);border-color:#fff}
.socials svg{width:18px;height:18px}
.footer-bar{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;justify-content:space-between;
  padding-block:1.3rem;border-top:1px solid rgba(255,255,255,.14);font-size:.8rem}
.footer-bar__links{display:flex;flex-wrap:wrap;gap:1.1rem}
.footer-bar a{text-decoration:none}
.footer-bar a:hover{color:#fff}

/* --- mobile action bar + to top ---------------------------------------- */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;
  grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--line-soft);
  box-shadow:0 -4px 20px -12px rgba(36,26,29,.35)}
.action-bar a{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .3rem;
  text-decoration:none;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.action-bar svg{width:19px;height:19px}
.action-bar a:hover{color:var(--wine)}
@media (min-width:900px){.action-bar{display:none}}
@media (max-width:899px){body{padding-bottom:62px}}

.to-top{position:fixed;right:1rem;bottom:76px;z-index:56;width:42px;height:42px;display:grid;
  place-items:center;background:var(--wine);color:#fff;border-radius:50%;opacity:0;visibility:hidden;
  transition:.25s;box-shadow:var(--shadow)}
.to-top.is-visible{opacity:1;visibility:visible}
.to-top svg{width:18px;height:18px}
@media (min-width:900px){.to-top{bottom:1.4rem}}

/* --- reveal on scroll --------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* --- print -------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.action-bar,.to-top,.ann,.pdp-buy{display:none!important}
  body{background:#fff;padding:0}
}

/* --- film + long-form story -------------------------------------------- */
.video-figure{margin:0 auto;max-width:900px}
.video-figure video{width:100%;height:auto;display:block;background:var(--ink);
  border:1px solid var(--line-soft)}
.video-figure figcaption{margin-top:.9rem;font-size:.82rem;color:var(--ink-soft);text-align:center}
.video-quote{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.45;color:var(--wine);
  max-width:30ch;margin:0 auto 1.8rem;text-align:center}
.story-cols{max-width:900px;margin:clamp(2rem,4vw,3rem) auto 0;
  display:grid;gap:clamp(1.2rem,3vw,2.4rem)}
@media (min-width:760px){.story-cols{grid-template-columns:1fr 1fr}}
.story-cols p{color:var(--ink-soft)}
.story-cols p+p{margin-top:1rem}
.story-lead{font-size:1.06rem;color:var(--ink)!important}

/* ==========================================================================
   Motion
   Slow and quiet on purpose. A handloom brand should feel unhurried, so
   nothing here flashes or bounces: the hero drifts, sections rise as you
   reach them, and a gold hairline draws itself under each heading.

   Every one of these is switched off wholesale under prefers-reduced-motion
   at the bottom of this block.
   ========================================================================== */

/* --- hero: a 28s drift across the cover photograph ---------------------- */
@media (min-width:1000px){
  .hero__media img{
    animation:hero-drift 28s ease-in-out infinite alternate;
    transform-origin:58% 45%;
  }
}
@keyframes hero-drift{
  from{transform:scale(1)}
  to{transform:scale(1.055)}
}

/* --- hero copy rises in, one element after another ---------------------- */
.js .hero__inner > *{
  opacity:0;
  animation:rise-in .9s cubic-bezier(.22,.7,.3,1) forwards;
}
.js .hero__eyebrow{animation-delay:.15s}
.js .hero h1{animation-delay:.3s}
.js .hero__sub{animation-delay:.45s}
.js .hero__cta{animation-delay:.6s}
@keyframes rise-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* --- announcement bar: crossfade rather than a hard swap ---------------- */
.ann{position:relative;overflow:hidden;min-height:1.9em}
.ann__list{position:relative}
.ann__item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(38%);transition:opacity .7s ease,transform .7s ease}
.ann__item.is-on{opacity:1;transform:none}
.ann__item.is-out{opacity:0;transform:translateY(-38%)}

/* --- a gold hairline that draws itself under each section heading ------- */
.section-h{position:relative}
.section-h::after{
  content:"";position:absolute;left:0;bottom:-.42em;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width 1.1s cubic-bezier(.2,.8,.3,1) .15s;
}
.section-center .section-h::after{left:50%;translate:-50% 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
[data-reveal].is-in .section-h::after,
.is-in .section-h::after{width:clamp(56px,14%,120px)}
.section-center.is-in .section-h::after,
.is-in .section-center .section-h::after{width:clamp(80px,22%,180px)}

/* --- cards rise in, staggered across the row ---------------------------- */
.js .grid--cards .card{opacity:0;transform:translateY(20px)}
.js .grid--cards .card.is-in{
  opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.3,1);
}

/* --- a slow sheen across a card image on hover -------------------------- */
.card__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,
    color-mix(in srgb,#fff 26%,transparent) 50%,transparent 65%);
  transform:translateX(-120%);
}
.card:hover .card__media::after{
  transform:translateX(120%);
  transition:transform 1.5s cubic-bezier(.3,.6,.3,1);
}

/* --- value strip icons breathe, very slightly --------------------------- */
.value svg{animation:breathe 7s ease-in-out infinite}
.value:nth-child(2) svg{animation-delay:1.2s}
.value:nth-child(3) svg{animation-delay:2.4s}
.value:nth-child(4) svg{animation-delay:3.6s}
@keyframes breathe{
  0%,100%{transform:translateY(0);opacity:.85}
  50%{transform:translateY(-4px);opacity:1}
}

/* --- buttons lift a little ---------------------------------------------- */
.btn--primary:hover,.btn--wa:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* --- the bag badge pulses when something is added ----------------------- */
.bag-count.is-bumped{animation:bump .5s cubic-bezier(.3,1.4,.4,1)}
@keyframes bump{
  0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}
}
.bag-count--inline.is-bumped{animation-name:bump-inline}
@keyframes bump-inline{
  0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}
}

/* --- the footer wordmark glows faintly, like light on cloth ------------- */
.site-footer .wordmark{animation:sheen 9s ease-in-out infinite}
@keyframes sheen{
  0%,100%{opacity:.92}
  50%{opacity:1}
}

/* --- anyone who has asked for less motion gets none of it --------------- */
@media (prefers-reduced-motion:reduce){
  .hero__media img,
  .js .hero__inner > *,
  .value svg,
  .site-footer .wordmark,
  .bag-count.is-bumped{animation:none!important}
  .js .hero__inner > *{opacity:1}
  .js .grid--cards .card{opacity:1;transform:none}
  .section-h::after{transition:none;width:clamp(56px,14%,120px)}
  .card__media::after{display:none}
  .ann__item{transition:none}
  .btn--primary:hover,.btn--wa:hover{transform:none}
}