/* HOUSE RULES: no rounded corners, no shadows, no glass/blur.
   Everything below is square-edged and flat by design. */
/* =========================================================================
   SUB. — Home v3. Self-contained: styles index-v3.html only.
   site.css / home-v2.css and every other page are untouched.
   ========================================================================= */

@font-face{
  font-family:'Switzer';
  src:url('../fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/Fraunces-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* the blue runs deep -> light so the studio backdrop of the cut-out
     photography (#C3DDF9, sampled) lands on an identical value and the
     photo edge disappears */
  --blue-900:#5E7CA8;
  --blue-700:#7B9AC6;
  --blue-500:#8FADD2;
  --blue-300:#A8C6E8;
  --blue-200:#C3DDF9;
  --blue-50:#EAF2FB;

  --pink-100:#F7DEE2;
  --pink-200:#F2CBD3;
  --pink-400:#E8A0AE;
  --pink-500:#DE8A9B;

  --cream:#F5F0EA;
  --ink:#22344B;
  --ink-2:#4E637C;
  --ink-3:#8496AB;
  --paper:#FFFFFF;
  --line:#E3E9F1;

  --sans:'Switzer','Noto Sans Thai','Kanit',system-ui,-apple-system,sans-serif;
  --display:'Fraunces','Noto Sans Thai','Kanit',Georgia,serif;

  --wrap:1200px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --r:0px;                     /* square frames, per the client */
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  font-variation-settings:'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* never overflow-x:hidden — it kills sticky */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:.6rem 1rem}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.on-light :focus-visible,.nl__form :focus-visible{outline-color:var(--blue-700)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- logo (masked PNG, inherits currentColor) -------------------- */
.logo{display:inline-flex;position:relative;line-height:0;vertical-align:middle}
.logo__mark,.logo__dot{
  display:block;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.logo__mark{
  width:var(--logo-w,80px);aspect-ratio:673/266;background:currentColor;
  -webkit-mask-image:url('../img/logo-mark.png');mask-image:url('../img/logo-mark.png');
}
.logo__dot{
  position:absolute;inset:0;width:var(--logo-w,80px);aspect-ratio:673/266;
  background:var(--dot,#FCF1B9);
  -webkit-mask-image:url('../img/logo-dot.png');mask-image:url('../img/logo-dot.png');
}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.5rem;font-size:.75rem;
  font-variation-settings:'wght' 600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:15px;height:15px}
.btn--outline{border:1.4px solid rgb(255 255 255 / .8);color:#fff}
.btn--outline:hover{background:#fff;color:var(--ink)}
.btn--pink{background:var(--pink-400);color:#fff}
.btn--pink:hover{background:var(--pink-500)}
.btn--blue{background:var(--blue-700);color:#fff}
.btn--blue:hover{background:var(--blue-900)}
.btn--sm{padding:.55rem 1.05rem;font-size:.6875rem;letter-spacing:.08em}

/* circular arrow, used on every card that opens something */
.oarw{
  width:34px;height:34px;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;flex:0 0 auto;
  transition:transform .2s ease,background-color .2s ease;
}
.oarw svg{width:15px;height:15px}
.oarw--ghost{background:rgb(255 255 255 / .22);color:#fff;
  border:1.2px solid rgb(255 255 255 / .55)}

/* ---------- nav --------------------------------------------------------- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;color:#fff;
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);width:100%;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.75rem);
}
.nav__logo{--logo-w:74px;--dot:#FCF1B9;color:#fff}
.nav__links{display:flex;gap:clamp(.9rem,2.2vw,1.9rem);list-style:none;margin:0;padding:0}
.nav__links a{font-size:.8125rem;font-variation-settings:'wght' 500;opacity:.94}
.nav__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav__r{margin-left:auto;display:flex;align-items:center;gap:.85rem}
.nav__ic{display:grid;place-items:center;width:32px;height:32px;color:#fff}
.nav__ic svg{width:18px;height:18px}
.nav__vers{display:inline-flex;align-items:center;gap:.5rem;margin-right:.15rem}
.nav__vers a,.nav__vers span{
  font-size:.6875rem;font-variation-settings:'wght' 600;letter-spacing:.08em;
  text-transform:uppercase;opacity:.6;transition:opacity .2s}
.nav__vers a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.nav__vers [aria-current]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.burger{display:none;flex-direction:column;gap:4px;width:24px}
.burger span{display:block;height:1.6px;background:#fff;}

/* ---------- hero: split display type, corner meta, scrolling strip -------
   Follows the supplied reference: the two display words sit either side of
   the subject, small uppercase meta in the corners, and a continuously
   scrolling strip of colourways cutting across the image. */
.hero{
  position:relative;padding-top:var(--nav-h);color:#fff;overflow:clip;
  /* Kuromi collection: the backdrop matches the campaign shot's own lilac so
     the cut-out sits on it without a visible seam */
  background:
    radial-gradient(60% 76% at 50% 76%, #B79FD6 0%, rgb(183 159 214 / 0) 70%),
    linear-gradient(168deg, #6E5794 0%, #8A6FB4 40%, #A98FCE 100%);
}
.hero__in{
  position:relative;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1.5rem,4vw,3rem) var(--gutter) 0;
  min-height:clamp(600px,82vh,1000px);display:flex;flex-direction:column;
}
.hero__split{
  position:relative;z-index:2;margin:0;display:flex;justify-content:space-between;align-items:flex-start;
  font-family:var(--display);line-height:.92;letter-spacing:-.02em;
  font-size:clamp(2.4rem,9vw,7.5rem);
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 144;
  pointer-events:none;
}
.hero__w{display:block}
.hero__meta{
  position:absolute;z-index:2;top:clamp(5.5rem,13vw,10.5rem);margin:0;
  font-size:.5625rem;line-height:1.7;letter-spacing:.13em;text-transform:uppercase;
  font-variation-settings:'wght' 500;opacity:.9;
}
.hero__meta b{font-variation-settings:'wght' 700}
.hero__meta--l{left:var(--gutter)}
.hero__meta--r{right:var(--gutter);text-align:right}
.hero__figure{
  /* Dominant but never clipped: sized by HEIGHT so the whole figure always
     fits the hero — driving it off width cropped her head at wide viewports. */
  position:absolute;z-index:1;left:50%;bottom:0;transform:translateX(-50%);
  height:clamp(400px,72vh,860px);width:auto;margin:0;pointer-events:none;
}
.hero__figure img{
  height:100%;width:auto;max-width:none;display:block;
  filter:);
}
/* the strip cuts across the subject, as in the reference */
.marquee{
  position:absolute;left:0;right:0;top:60%;z-index:3;
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);
          mask-image:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);
}
.marquee__track{display:flex;gap:8px;width:max-content;animation:mq 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq{flex:0 0 auto;width:clamp(104px,12vw,168px);background:rgb(255 255 255 / .10);}
.mq img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:50% 16%;display:block}
.mq span{display:block;padding:.35rem .4rem;font-size:.5625rem;letter-spacing:.08em;
  text-transform:uppercase;font-variation-settings:'wght' 600;color:#fff;opacity:.92}
.hero__foot{
  position:relative;z-index:3;margin-top:auto;padding:clamp(1rem,2.4vw,1.75rem) 0;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;
  font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 600;opacity:.92;
}
/* corner registration marks */
.reg{position:absolute;width:14px;height:14px;z-index:3;opacity:.5;pointer-events:none;
  background:
    linear-gradient(#fff,#fff) center/100% 1px no-repeat,
    linear-gradient(#fff,#fff) center/1px 100% no-repeat}
.reg--tl{top:calc(var(--nav-h) + 10px);left:14px}
.reg--tr{top:calc(var(--nav-h) + 10px);right:14px}
.reg--bl{bottom:14px;left:14px}
.reg--br{bottom:14px;right:14px}

/* ---------- three feature cards, lapping the hero ----------------------- */
.lap{background:linear-gradient(180deg,var(--blue-200) 0%,var(--blue-200) 48%,var(--pink-100) 48%)}
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.6vw,1.25rem);
  padding-block:clamp(1.5rem,3.5vw,2.5rem);
}
.card{
  position:relative;overflow:hidden;display:flex;
  min-height:clamp(220px,23vw,320px);
}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover img{transform:scale(1.04)}
.card__body{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;padding:clamp(1rem,2vw,1.4rem);gap:.5rem;
}
.card__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgb(34 52 75 / .5),rgb(34 52 75 / 0) 62%)}
.card--light .card__scrim{background:linear-gradient(to top,rgb(255 255 255 / .82),rgb(255 255 255 / 0) 58%)}
.card--cream{background:var(--cream)}
.card--cream img{inset:auto 0 0;height:72%;object-fit:cover;object-position:50% 30%}
.card--cream .card__scrim{display:none}
.card--cream .card__body{justify-content:flex-start}
.card--cream .card__foot{position:absolute;right:clamp(1rem,2vw,1.4rem);
  bottom:clamp(1rem,2vw,1.4rem);margin:0;width:auto}
.card--cream .card__t{max-width:14ch}
.card__eyebrow{margin:0;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  font-variation-settings:'wght' 600}
.card__t{margin:0;font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.6rem);
  line-height:1.15;font-variation-settings:'wght' 400,'SOFT' 30,'opsz' 60}
.card__p{margin:0;font-size:.8125rem;line-height:1.5;max-width:26ch}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.35rem}
.card--dark .card__body{color:#fff}
.card--ink .card__body{color:var(--ink)}
.dots{display:flex;gap:.35rem}
.dots i{width:13px;height:13px;background:var(--sw,#fff);}

/* ---------- guarantee bar ----------------------------------------------- */
.bar{background:var(--pink-100);padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.bar__in{
  background:var(--paper);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.bar__i{
  display:flex;align-items:center;gap:.7rem;padding:clamp(.9rem,2vw,1.3rem) clamp(.75rem,1.6vw,1.35rem);
  border-left:1px solid var(--line);
}
.bar__i:first-child{border-left:0}
.bar__i svg{width:22px;height:22px;flex:0 0 auto;color:var(--blue-700)}
.bar__i b{display:block;font-size:.8125rem;font-variation-settings:'wght' 600;line-height:1.35}
.bar__i span{display:block;font-size:.75rem;color:var(--ink-2);line-height:1.35}

/* ---------- new arrivals ------------------------------------------------ */
.arr{background:var(--pink-100);padding-bottom:clamp(2.5rem,6vw,4rem)}
.arr__head{position:relative;text-align:center;padding-bottom:clamp(1.5rem,3.5vw,2.25rem)}
.arr__k{margin:0;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  font-variation-settings:'wght' 600;color:var(--ink-2)}
.arr__t{
  margin:.55rem 0 0;font-family:var(--display);
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.1;
  font-variation-settings:'wght' 400,'SOFT' 30,'WONK' 1,'opsz' 144;
}
.arr__s{margin:.5rem 0 0;font-size:.875rem;color:var(--ink-2)}
.arr__all{
  position:absolute;right:0;bottom:clamp(1.5rem,3.5vw,2.25rem);
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:'wght' 600;
}
.arr__all svg{width:14px;height:14px}
.arr__all:hover{text-decoration:underline;text-underline-offset:4px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.8vw,1.5rem)}
.p{background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.p__media{position:relative;aspect-ratio:1/1.12;background:var(--blue-50);overflow:hidden}
.p__media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.p:hover .p__media img{transform:scale(1.04)}
.p__badge{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  padding:.28rem .6rem;font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:'wght' 700;color:#fff;background:var(--bg,var(--pink-400));
}
.p__body{padding:clamp(.75rem,1.6vw,1.05rem);display:flex;flex-direction:column;gap:.55rem}
.p__dots{min-height:13px}
.p__row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.p__n{font-size:.875rem;font-variation-settings:'wght' 600;line-height:1.3}
.p__price{font-size:.875rem;font-variation-settings:'wght' 600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.p__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.15rem}
.p__meta{font-size:.75rem;color:var(--ink-3)}
.p .dots i{}

/* ---------- collection tiles -------------------------------------------- */
.tiles{background:var(--pink-100);padding-bottom:clamp(2.5rem,6vw,4rem)}
.tiles__in{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.6vw,1.25rem)}
.tile{position:relative;overflow:hidden;min-height:clamp(190px,20vw,270px);display:flex}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.05)}
.tile__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgb(34 52 75 / .62),rgb(34 52 75 / .12))}
.tile__body{position:relative;z-index:2;color:#fff;padding:clamp(1rem,2vw,1.5rem);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;width:100%}
.tile__t{margin:0;font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:'wght' 700}
.tile__p{margin:0;font-size:.8125rem;opacity:.9;max-width:24ch}

/* ---------- follow strip ------------------------------------------------ */
.follow{background:var(--blue-50);padding-block:clamp(1.25rem,3vw,2rem)}
.follow__in{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.5rem)}
.follow__lab{flex:0 0 auto;display:flex;flex-direction:column;gap:.15rem}
.follow__lab b{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 700}
.follow__lab span{font-size:.75rem;color:var(--ink-2)}
.follow__strip{
  flex:1 1 auto;min-width:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);gap:clamp(.4rem,1vw,.75rem);
}
.follow__strip a{overflow:hidden;aspect-ratio:1;background:var(--blue-200)}
.follow__strip img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.follow__strip a:hover img{transform:scale(1.07)}

/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--blue-700);color:#fff;padding-top:clamp(2.25rem,5vw,3.5rem)}
.foot__in{
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)) minmax(0,1.4fr);
  gap:clamp(1.25rem,3vw,2.25rem);
}
.foot__brand .logo{--logo-w:110px;--dot:#FCF1B9;color:#fff}
.foot__tag{margin:.9rem 0 0;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.foot__p{margin:.6rem 0 0;font-size:.8125rem;opacity:.86;max-width:24ch;line-height:1.55}
.socials{display:flex;gap:.5rem;margin-top:1.25rem}
.socials a{
  width:32px;height:32px;display:grid;place-items:center;
  background:rgb(255 255 255 / .16);transition:background-color .2s,transform .2s;
}
.socials a:hover{background:rgb(255 255 255 / .3);transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
.fcol h3{margin:0 0 .85rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 700}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fcol a{font-size:.8125rem;opacity:.86}
.fcol a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.fcol .soon{font-size:.8125rem;opacity:.6}

.nl p{margin:0 0 .9rem;font-size:.8125rem;opacity:.86;line-height:1.55}
.nl__form{display:flex;gap:.5rem;background:var(--paper);padding:.3rem .3rem .3rem 1rem}
.nl__form input{flex:1 1 auto;min-width:0;border:0;background:none;font-size:.8125rem;color:var(--ink)}
.nl__form input::placeholder{color:var(--ink-3)}
.nl__form input:focus{outline:none}
.nl__go{
  width:32px;height:32px;background:var(--blue-700);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;transition:background-color .2s}
.nl__go:hover{background:var(--blue-900)}
.nl__go svg{width:15px;height:15px}
.nl__msg{margin:.6rem 0 0;font-size:.75rem;opacity:.95;min-height:1em}
.nl__msg a{text-decoration:underline}
.nl__msg:empty{display:none}

.foot__bar{
  margin-top:clamp(2rem,4vw,3rem);padding:1.15rem 0;
  border-top:1px solid rgb(255 255 255 / .2);
  text-align:center;font-size:.75rem;opacity:.82;
}

/* ---------- motion ------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1000px){
  .hero__feats{display:none}
  .bar__in{grid-template-columns:repeat(2,1fr)}
  .bar__i:nth-child(3){border-left:0}
  .bar__i:nth-child(n+3){border-top:1px solid var(--line)}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand,.nl{grid-column:1/-1}
}
@media (max-width:820px){
  .nav__links{display:none}
  .burger{display:flex}
  .hero__in{grid-template-columns:1fr;align-items:start;text-align:center;
    padding-bottom:0;min-height:0}
  .hero__lead{margin-inline:auto}
  .hero__figure{max-width:320px;margin-top:1.5rem}
  .cards{grid-template-columns:1fr}
  .lap{background:linear-gradient(180deg,var(--blue-200) 0%,var(--blue-200) 22%,var(--pink-100) 22%)}
  .pgrid{grid-template-columns:1fr}
  .tiles__in{grid-template-columns:1fr}
  .arr__all{position:static;margin-top:1rem}
  .follow__in{flex-direction:column;align-items:flex-start}
  .follow__strip{width:100%}
}
@media (max-width:560px){
  .bar__in{grid-template-columns:1fr}
  .bar__i{border-left:0}
  .bar__i+.bar__i{border-top:1px solid var(--line)}
  .foot__in{grid-template-columns:1fr}
  .follow__strip{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto}
  .nav__vers{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}


/* ---------- collection band (v1 pattern: full-bleed banner + 5-up row) ---
   Square frames, hairline gutters, edge to edge — matching the v1 homepage. */
.v3rows{background:var(--pink-100);padding-bottom:clamp(2rem,5vw,3.5rem)}
.v3banner{display:block}
.v3banner img{width:100%;height:auto;display:block}
.v3prow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(4px,.55vw,8px);margin-top:clamp(4px,.55vw,8px);
}
.v3p{display:flex;flex-direction:column;background:var(--paper)}
.v3p__media{display:block;overflow:hidden;aspect-ratio:5/9;background:var(--blue-50)}
.v3p__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.v3p:hover .v3p__media img{transform:scale(1.04)}
.v3p__top{display:flex;align-items:center;gap:.35rem;padding:.6rem .55rem 0;
  font-size:.6875rem;font-variation-settings:'wght' 600;line-height:1.35}
.v3p__sw{width:10px;height:10px;flex:0 0 auto;background:var(--sw,#ccc);}
.v3p__c{padding:.1rem .55rem 0 calc(.55rem + 10px + .35rem);
  font-size:.6875rem;color:var(--ink-3)}
.v3p__price{padding:.3rem .55rem .8rem calc(.55rem + 10px + .35rem);
  font-size:.6875rem;font-variation-settings:'wght' 600;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .v3prow{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- New Arrivals: tabbed rail (pink reference) ------------------- */
.arr__head{position:relative;text-align:center;padding-bottom:clamp(1rem,2.4vw,1.6rem)}
.tabs{display:flex;justify-content:center;gap:clamp(1rem,3vw,2.5rem);
  margin-top:clamp(.9rem,2vw,1.4rem);flex-wrap:wrap}
.tabx{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wght' 600;color:var(--ink-3);padding:.3rem 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.tabx:hover{color:var(--ink-2)}
.tabx[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pink-400);
  font-variation-settings:'wght' 700}
.tabpanel[hidden]{display:none}

.narail{position:relative;padding-inline:clamp(0px,3vw,44px)}
.narail__t{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*clamp(.6rem,1.6vw,1.25rem))/3);
  gap:clamp(.6rem,1.6vw,1.25rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:.25rem;
}
.narail__t::-webkit-scrollbar{display:none}
.na{scroll-snap-align:start;background:var(--paper);display:flex;flex-direction:column}
.na__media{position:relative;display:block;overflow:hidden;aspect-ratio:1/1.05;background:var(--pink-200)}
.na__media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.na:hover .na__media img{transform:scale(1.04)}
.na__badge{
  position:absolute;top:.6rem;left:.6rem;z-index:2;background:rgb(255 255 255 / .92);
  color:var(--ink);padding:.25rem .55rem;font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;font-variation-settings:'wght' 700;
}
.na__row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.7rem .75rem 0}
.na__n{font-size:.8125rem;font-variation-settings:'wght' 600}
.na__p{font-size:.8125rem;font-variation-settings:'wght' 600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.na__cta{margin:.6rem .75rem .9rem;align-self:flex-start}
.narail__a{
  position:absolute;top:38%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;
  transition:opacity .2s,transform .2s;
}
.narail__a:hover{transform:translateY(-50%) scale(1.06)}
.narail__a[disabled]{opacity:.32;cursor:default}
.narail__a svg{width:17px;height:17px}
.narail__a--p{left:0}
.narail__a--n{right:0}
@media (max-width:900px){
  .narail__t{grid-auto-columns:calc((100% - clamp(.6rem,1.6vw,1.25rem))/2)}
  .narail{padding-inline:0}
  .narail__a{display:none}
}
@media (max-width:560px){ .narail__t{grid-auto-columns:82%} }