/* ==========================================================================
   Noor — shared styles
   Palette: deep wine + antique gold + soft rose on warm porcelain
   Display: Cormorant Garamond   Body: Hanken Grotesk
   ========================================================================== */

:root{
  --bg:        #F4EEE6;
  --bg-2:      #EADFCF;
  --ink:       #221A1E;
  --muted:     #6E625B;
  --wine:      #6E2438;
  --wine-deep: #4E1727;
  --gold:      #A9834B;
  --rose:      #D8A7AE;
  --card:      #FBF7F1;
  --line:      rgba(34,26,30,0.13);
  --line-2:    rgba(34,26,30,0.22);

  --radius:    14px;
  --maxw:      1180px;
  --ease:      cubic-bezier(.22,.61,.36,1);

  --step-eyebrow: clamp(.68rem, .62rem + .3vw, .78rem);
  --step-body:    clamp(1rem, .96rem + .25vw, 1.12rem);
  --step-lead:    clamp(1.12rem, 1rem + .8vw, 1.5rem);
  --step-h3:      clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-h2:      clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  --step-hero:    clamp(2.6rem, 1.5rem + 5.4vw, 5.4rem);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--step-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.2rem, 5vw, 4rem); }

/* ---- Eyebrow label ---------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--step-eyebrow);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold);
}
.eyebrow::before{
  content:""; width:2.2em; height:1px; background:currentColor; opacity:.7;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  --pad-y:.9rem; --pad-x:1.7rem;
  display:inline-flex; align-items:center; gap:.6em;
  padding:var(--pad-y) var(--pad-x);
  font-family:inherit; font-size:.98rem; font-weight:500;
  letter-spacing:.02em;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
  min-height:44px;
}
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-primary{ background:var(--wine); color:#F7EFE6; }
.btn-primary:hover{ background:var(--wine-deep); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(34,26,30,.04); }

.link-more{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:500; text-decoration:none;
  color:var(--wine);
  border-bottom:1px solid var(--rose);
  padding-bottom:2px;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-more:hover{ border-color:var(--wine); gap:.8em; }

/* ---- Navigation ------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.1rem;
}
.nav.scrolled{
  background:rgba(244,238,230,.82);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom-color:var(--line);
}
.brand{
  font-family:"Cormorant Garamond", serif;
  font-size:1.7rem; font-weight:600; letter-spacing:.04em;
  text-decoration:none; color:var(--ink);
  line-height:1;
}
.nav-links{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.2rem); }
.nav-links a{
  text-decoration:none; font-size:.92rem; font-weight:500;
  letter-spacing:.04em; color:var(--ink);
  position:relative; padding-block:.3rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--wine); transition:right .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }

/* Nav sitting over the bright silk hero needs light text */
.nav.on-hero:not(.scrolled) .brand,
.nav.on-hero:not(.scrolled) .nav-links a{ color:#FBF3EC; }
.nav.on-hero:not(.scrolled) .nav-links a::after{ background:#FBF3EC; }

/* ---- Sections & reveals ---------------------------------------------- */
.section{ padding-block:clamp(4.5rem, 9vw, 8rem); position:relative; }
.section-head{ max-width:44ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head h2{ font-size:var(--step-h2); margin-top:.6rem; }
.section-head p{ color:var(--muted); margin:1rem 0 0; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---- Product card (shared by featured + shop) ------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap:clamp(1.4rem, 3vw, 2.4rem);
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(78,23,39,.45);
  border-color:var(--line-2);
}
.card-media{
  aspect-ratio:4/5; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:1rem;
}
.card-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .7s var(--ease);
}
.card:hover .card-media img{ transform:scale(1.05); }
.card-media .ph-name{
  position:relative; z-index:1; color:rgba(255,255,255,.92);
  font-family:"Cormorant Garamond",serif; font-size:1.5rem; font-weight:500;
  text-shadow:0 1px 12px rgba(0,0,0,.25);
}
.card-body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card-body h3{ font-size:1.7rem; }
.card-desc{ font-size:.92rem; color:var(--muted); line-height:1.5; margin:0; }
.card-price{ font-weight:500; letter-spacing:.01em; }

.swatches{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.2rem; }
.swatch{
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  cursor:pointer; position:relative; padding:0;
  transition:transform .25s var(--ease);
  box-shadow:inset 0 0 0 2px var(--card);
}
.swatch:hover{ transform:scale(1.12); }
.swatch[aria-pressed="true"]{
  box-shadow:inset 0 0 0 2px var(--card), 0 0 0 2px var(--wine);
  transform:scale(1.1);
}
.swatch-label{ font-size:.82rem; color:var(--muted); margin-top:-.15rem; }
.swatch-label b{ color:var(--ink); font-weight:500; }

.card-foot{ margin-top:auto; padding-top:.4rem; }
.card .btn{ width:100%; justify-content:center; --pad-y:.75rem; }

/* ---- Skeleton loading ------------------------------------------------- */
.skeleton{ pointer-events:none; }
.skeleton .card-media,
.skeleton .sk-line{
  background:linear-gradient(100deg,var(--bg-2) 30%, #f3ebe0 50%, var(--bg-2) 70%);
  background-size:200% 100%; animation:sk 1.3s var(--ease) infinite;
}
.skeleton .sk-line{ height:14px; border-radius:6px; }
.skeleton .sk-line.w60{ width:60%; } .skeleton .sk-line.w40{ width:40%; }
@keyframes sk{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .skeleton .card-media,.skeleton .sk-line{ animation:none; } }

.state-msg{ text-align:center; color:var(--muted); padding:4rem 1rem; grid-column:1/-1; }

/* ---- Footer ----------------------------------------------------------- */
.footer{ border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem); background:var(--bg-2); }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; justify-content:space-between; }
.footer .brand{ font-size:2rem; }
.footer p{ color:var(--muted); font-size:.92rem; margin:.6rem 0 0; max-width:34ch; }
.footer-links{ display:flex; flex-direction:column; gap:.6rem; }
.footer-links a{ text-decoration:none; font-weight:500; }
.footer-links a:hover{ color:var(--wine); }
.footer .fineprint{ width:100%; color:var(--muted); font-size:.82rem; border-top:1px solid var(--line); padding-top:1.4rem; margin-top:1rem; }

/* ---- Focus + a11y ----------------------------------------------------- */
:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--wine); color:#fff; padding:.7rem 1rem; z-index:100; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

@media (max-width:540px){
  .footer .wrap{ flex-direction:column; }
  .btn{ --pad-x:1.4rem; }
}