/* Hayu Modest — IN MOTION · shared design system.
   Cinematic velvet-plum. A dark, filmic storefront where the product is always
   docked and shoppable. Signature: a draggable, physics-y 3D-tilt product runway
   (built by motion.js). Everything else stays disciplined so motion never buries
   the garment. Consumes only the public SARTU.* API. */

:root{
  --auberg:#2A1B2E;      /* dominant dark */
  --auberg-2:#241725;    /* deeper pockets / footer */
  --plum:#3E2544;        /* secondary panels */
  --plum-lo:#33203A;
  --rose:#B76E79;        /* accent / CTAs */
  --rose-lo:rgba(183,110,121,.16);
  --smoke:#8A7686;       /* muted meta */
  --champ:#E9DCC9;       /* type + highlights */
  --ink:#E9DCC9;
  --mut:rgba(233,220,201,.60);
  --faint:rgba(233,220,201,.34);
  --hair:rgba(233,220,201,.16);
  --hair2:rgba(233,220,201,.08);
  --panel:rgba(62,37,68,.55);
  --disp:'Prata',serif;
  --ui:'DM Sans',sans-serif;
  --ar:'Aref Ruqaa',serif;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--auberg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:var(--ui);}
::selection{background:var(--rose);color:var(--auberg);}

/* ---------- utility type ---------- */
.lbl{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--smoke);text-indent:.42em;}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:.005em;line-height:1.02;}
.edit{font-family:var(--disp);font-weight:400;}
.ara{font-family:var(--ar);}

/* ---------- film grain + vignette ---------- */
#grain{
  position:fixed;inset:-40px;z-index:210;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#vignette{
  position:fixed;inset:0;z-index:205;pointer-events:none;
  box-shadow:inset 0 0 220px 40px rgba(20,12,22,.55);
}

/* ---------- nav ---------- */
nav.mnav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3.4vw,48px);height:64px;
  background:rgba(36,23,37,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--hair2);
}
nav.mnav .brand{
  font-family:var(--disp);font-weight:400;font-size:17px;letter-spacing:.03em;
  text-decoration:none;line-height:1;color:var(--champ);
  display:flex;align-items:baseline;gap:9px;
}
nav.mnav .brand small{font-family:var(--ui);font-weight:500;font-size:8.5px;letter-spacing:.44em;text-transform:uppercase;color:var(--smoke);}
nav.mnav .links{display:flex;align-items:center;gap:26px;}
nav.mnav .links a{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;
  color:var(--mut);padding:4px 0;position:relative;transition:color .35s;
}
nav.mnav .links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--rose);
  transition:right .45s var(--ease);
}
nav.mnav .links a:hover,nav.mnav .links a.here{color:var(--champ);}
nav.mnav .links a:hover::after,nav.mnav .links a.here::after{right:0;}
nav.mnav .navr{display:flex;align-items:center;gap:16px;}
nav.mnav a.acct{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--hair);border-radius:50%;
  color:var(--ink);text-decoration:none;transition:border-color .35s,background .35s;
}
nav.mnav a.acct:hover{border-color:var(--rose);}
nav.mnav a.acct svg{width:14px;height:14px;display:block;}
nav.mnav a.acct .acct-dot{
  display:none;position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;
  background:var(--rose);border:1px solid var(--auberg);
}
nav.mnav a.acct.in .acct-dot{display:block;}
nav.mnav .bag{
  display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 17px;border-radius:40px;
  background:var(--rose);color:var(--auberg);border:none;text-decoration:none;
  font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  transition:letter-spacing .35s,filter .3s;
}
nav.mnav .bag:hover{letter-spacing:.3em;filter:brightness(1.08);}
@media (max-width:900px){
  nav.mnav{height:58px;padding:0 14px;gap:10px;}
  nav.mnav .brand{font-size:15px;}
  nav.mnav .brand small{display:none;}
  nav.mnav .links a:not(:first-child){display:none;}
  nav.mnav .links{gap:0;min-width:0;}
  nav.mnav .links a{font-size:9px;letter-spacing:.2em;white-space:nowrap;}
  nav.mnav .navr{gap:8px;flex:none;}
  nav.mnav a.acct{width:30px;height:30px;}
  nav.mnav .bag{height:30px;padding:0 12px;font-size:9px;letter-spacing:.14em;white-space:nowrap;}
}

/* ---------- footer ---------- */
footer.mfoot{
  background:var(--auberg-2);color:var(--champ);
  padding:clamp(60px,9vw,120px) clamp(18px,3.4vw,48px) 34px;
  position:relative;overflow:hidden;border-top:1px solid var(--hair2);
}
footer.mfoot .fword{
  font-family:var(--disp);font-weight:400;line-height:.9;
  font-size:clamp(60px,13vw,190px);letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1px rgba(183,110,121,.4);
  user-select:none;white-space:nowrap;
}
footer.mfoot .frow{
  display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap;
  margin-top:clamp(30px,5vw,56px);padding-top:30px;border-top:1px solid var(--hair2);
}
footer.mfoot .fcol .lbl{color:var(--smoke);margin-bottom:14px;}
footer.mfoot .fcol a{
  display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(233,220,201,.72);text-decoration:none;padding:5px 0;transition:color .3s;
}
footer.mfoot .fcol a:hover{color:var(--rose);}
footer.mfoot .fnote{
  margin-top:44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
}
footer.mfoot .far{font-family:var(--ar);font-size:22px;color:rgba(183,110,121,.7);letter-spacing:0;text-transform:none;}

/* ---------- marquee dividers ---------- */
.marq{
  overflow:hidden;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);
  padding:16px 0;white-space:nowrap;background:var(--plum-lo);
}
.marq .track{display:inline-flex;animation:marq 52s linear infinite;will-change:transform;}
.marq span{
  font-family:var(--disp);font-weight:400;font-size:clamp(20px,3vw,38px);
  letter-spacing:.03em;line-height:1;padding-right:.7em;
  color:transparent;-webkit-text-stroke:1px rgba(233,220,201,.3);
}
.marq .track .dot{-webkit-text-stroke:0;color:var(--rose);}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq .track{animation:none;}}

/* ---------- reveal choreography ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.on{opacity:1;transform:none;}
[data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
[data-stagger].on>*{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv,[data-stagger]>*{opacity:1;transform:none;transition:none;}
}

/* ---------- commerce atoms ---------- */
.chip-off{
  display:inline-block;padding:4px 11px;border-radius:40px;background:var(--rose);
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--auberg);
}
.scarce{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);}
.gone{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
s.was{
  text-decoration-color:rgba(183,110,121,.7);color:var(--faint);
  font-weight:400;margin-right:9px;
}

/* wishlist hearts */
.wish{
  position:absolute;top:12px;right:12px;z-index:5;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:rgba(36,23,37,.66);border:1px solid var(--hair);
  color:var(--mut);transition:color .3s,border-color .3s,background .3s;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;
}
.wish svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;}
.wish:hover{color:var(--champ);border-color:var(--rose);}
.wish.in{color:var(--rose);border-color:rgba(183,110,121,.6);}
.wish.in svg{fill:rgba(183,110,121,.92);stroke:var(--rose);}
.wish.pop{animation:wishpop .45s cubic-bezier(.22,.9,.3,1.4);}
@keyframes wishpop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.wish.big{position:static;width:52px;height:52px;background:rgba(62,37,68,.4);}
.wish.big svg{width:18px;height:18px;}
@media (prefers-reduced-motion:reduce){.wish.pop{animation:none;}}

/* the action pill — rose liquid-fill */
.pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:16px 34px;border:1px solid var(--champ);background:transparent;color:var(--champ);border-radius:40px;
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;overflow:hidden;transition:color .3s,border-color .3s;isolation:isolate;cursor:pointer;
}
.pill::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--rose);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.pill:hover:not(:disabled){color:var(--auberg);border-color:var(--rose);}
.pill:hover:not(:disabled)::before{transform:translateY(0);}
.pill:disabled{opacity:.42;cursor:default;}
.pill:disabled::before{display:none;}
.pill.solid{background:var(--rose);color:var(--auberg);border-color:var(--rose);}
.pill.solid::before{background:var(--champ);}
.pill.solid:hover:not(:disabled){color:var(--auberg);border-color:var(--champ);}
@media (prefers-reduced-motion:reduce){.pill::before{transition:none;}}

/* ---------- seen recently strip ---------- */
.seen{max-width:1360px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(18px,3.4vw,48px);}
.seen .lbl{margin-bottom:24px;}
.seengrid{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;}
.seengrid::-webkit-scrollbar{display:none;}
.seen .sn{width:146px;flex:none;text-decoration:none;}
.seen .sn .frame{aspect-ratio:3/4;overflow:hidden;background:var(--plum);border:1px solid var(--hair2);border-radius:3px;}
.seen .sn img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.seen .sn:hover img{transform:scale(1.05);}
.seen .sn h3{margin-top:11px;font-family:var(--disp);font-weight:400;font-size:15px;line-height:1.25;color:var(--champ);}
.seen .sn .price{margin-top:3px;font-size:11px;letter-spacing:.08em;color:var(--smoke);}

/* ---------- shared page scaffolding ---------- */
.pgpad{padding-top:64px;}
@media (max-width:900px){.pgpad{padding-top:58px;}}
.wrap{max-width:1360px;margin:0 auto;padding-left:clamp(18px,3.4vw,48px);padding-right:clamp(18px,3.4vw,48px);}
.arghost{
  position:absolute;font-family:var(--ar);color:rgba(233,220,201,.05);
  font-size:clamp(120px,22vw,340px);line-height:1;pointer-events:none;user-select:none;z-index:0;
}

/* ---------- shared product grid (index + shop) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,34px) clamp(14px,2vw,30px);}
@media(min-width:640px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1040px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.pcard{position:relative;text-decoration:none;display:block;}
.pcard .ph{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--plum);border:1px solid var(--hair2);border-radius:5px;}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform .9s var(--ease);}
.pcard .ph img.alt{opacity:0;}
.pcard:hover .ph img.main{transform:scale(1.045);}
.pcard:hover .ph img.alt{opacity:1;transform:scale(1.045);}
.pcard .ph .chip-off{position:absolute;left:10px;top:10px;z-index:4;}
.pcard .ph .goneveil{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:rgba(36,23,37,.66);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);
}
.pcard .cinfo{margin-top:13px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.pcard h3{font-family:var(--disp);font-weight:400;font-size:clamp(15px,1.5vw,19px);line-height:1.22;color:var(--champ);}
.pcard .car{font-family:var(--ar);font-size:12.5px;color:var(--faint);margin-top:3px;}
.pcard .cprice{font-size:12px;letter-spacing:.05em;white-space:nowrap;color:var(--mut);}
.pcard .cmeta{margin-top:7px;min-height:15px;}
.pcard .qadd{margin-top:12px;height:38px;position:relative;}
.pcard .qadd .qbtn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:40px;
  background:none;border:1px solid var(--hair);color:var(--mut);
  font-family:var(--ui);font-weight:500;font-size:9.5px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  cursor:pointer;opacity:0;transition:opacity .35s,border-color .3s,color .3s;
}
.pcard:hover .qadd .qbtn,.pcard .qadd .qbtn:focus-visible{opacity:1;}
@media (hover:none){ .pcard .qadd .qbtn{opacity:1;} }
.pcard .qadd .qbtn:hover{border-color:var(--rose);color:var(--champ);}
.pcard .qadd .qsizes{position:absolute;inset:0;display:none;align-items:stretch;gap:6px;}
.pcard .qadd.sizing .qsizes{display:flex;}
.pcard .qadd.sizing .qbtn{display:none;}
.pcard .qadd .qsizes button{
  flex:1;background:var(--plum);border:1px solid var(--hair);border-radius:40px;color:var(--champ);
  font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s;
}
.pcard .qadd .qsizes button:hover:not(:disabled){background:var(--rose);color:var(--auberg);}
.pcard .qadd .qsizes button:disabled{color:var(--faint);text-decoration:line-through;cursor:default;}
.pcard .qadd .qsizes .qx{flex:0 0 38px;font-size:14px;}

/* focus visibility (quality floor) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rose);outline-offset:3px;border-radius:2px;
}