/* ============================================================================
   AANGAN - soft botanical website design system
   London · Lucknow · Contemporary Luxury Chikankari
   Cormorant Garamond (display) · Mulish (body) · Caveat (hand)
   ========================================================================== */
:root{
  --pearl:#FAF7F2; --pearl2:#F3EEE6; --blush:#F5DCD0; --dawn:#DCE4E0;
  --sage:#A8B49A; --rose:#E8B5A8; --walnut:#6B4F3A; --wsoft:#8a7261; --ink:#3a2e25;
  --hair:rgba(107,79,58,.20); --hair2:rgba(107,79,58,.12);
  --maxw:1280px; --gut:clamp(20px,5vw,72px);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Mulish',system-ui,-apple-system,sans-serif;
  --hand:'Caveat',cursive;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); font-weight:400; color:var(--ink); line-height:1.7;
  background:var(--pearl);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(245,220,208,.35), transparent 60%),
    radial-gradient(1000px 700px at -10% 20%, rgba(220,228,224,.30), transparent 55%),
    linear-gradient(180deg,#FBF8F3 0%, var(--pearl) 45%, #F6EFE6 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---- type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--walnut);line-height:1.04;}
.display{font-size:clamp(2.6rem,6.5vw,5.6rem);font-style:italic;font-weight:500;letter-spacing:.005em;}
h2.section-title{font-size:clamp(1.9rem,3.6vw,3.1rem);font-style:italic;}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rose);}
.eyebrow .mut{color:var(--wsoft);font-weight:500;}
.lede{font-size:clamp(1rem,1.5vw,1.18rem);max-width:46ch;color:var(--ink);}
.hand{font-family:var(--hand);color:var(--walnut);font-weight:600;}
.serif-note{font-family:var(--serif);font-style:italic;color:var(--wsoft);font-size:1.25rem;}
p{max-width:68ch;}

/* ---- layout helpers ----------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.section{padding:clamp(56px,9vw,128px) 0;}
.center{text-align:center;}
.center p,.center .lede{margin-left:auto;margin-right:auto;}
.rule{height:0;border-top:1px solid var(--hair);}
.stitch-rule{height:14px;background-repeat:repeat-x;background-position:center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='14'><line x1='0' y1='7' x2='17' y2='7' stroke='%236B4F3A' stroke-width='1.3' stroke-dasharray='8 7' stroke-linecap='round' opacity='.55'/><circle cx='26' cy='7' r='2' fill='%23E8B5A8'/></svg>");}

/* ---- buttons ------------------------------------------------------------ */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--walnut);
  border:1px solid var(--walnut);border-radius:999px;padding:14px 30px;
  background:transparent;transition:.25s ease;cursor:pointer;}
.btn:hover{background:var(--walnut);color:var(--pearl);}
.btn.solid{background:var(--walnut);color:var(--pearl);}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);}
.link-underline{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--walnut);border-bottom:1px solid var(--walnut);padding-bottom:3px;transition:.2s;}
.link-underline:hover{color:var(--rose);border-color:var(--rose);}

/* ---- nav ---------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px var(--gut);
  background:rgba(250,247,242,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair2);}
.brand{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.9rem;
  letter-spacing:.04em;color:var(--walnut);line-height:1;}
.brand .ros{color:var(--rose);}
.links{display:flex;gap:30px;}
.links a{font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  position:relative;padding:4px 0;transition:.2s;}
.links a:hover{color:var(--rose);}
.navacts{display:flex;gap:20px;align-items:center;}
.navacts a{font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wsoft);}
.navacts a:hover{color:var(--walnut);}
.menu-btn{display:none;background:none;border:0;font-size:1.4rem;color:var(--walnut);cursor:pointer;}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:0;min-height:78vh;
  align-items:stretch;overflow:hidden;}
.hero-copy{display:flex;flex-direction:column;justify-content:center;gap:24px;
  padding:clamp(40px,7vw,110px) var(--gut);}
.hero-copy .lede{margin-top:2px;}
.hero-media{position:relative;}
.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.hero .tag{font-family:var(--hand);font-size:1.7rem;color:var(--rose);}

/* ---- image placeholders (products & art left intentionally blank) -------- */
.ph{position:relative;overflow:hidden;border:1px solid var(--hair);
  background:
    linear-gradient(135deg, rgba(245,220,208,.5), rgba(220,228,224,.45) 55%, rgba(250,247,242,.6));
  display:flex;align-items:center;justify-content:center;}
.ph::after{content:"";position:absolute;inset:14px;border:1px dashed rgba(107,79,58,.22);
  border-radius:inherit;pointer-events:none;}
.ph .ph-label{position:relative;z-index:2;font-family:var(--sans);font-weight:600;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wsoft);
  background:rgba(250,247,242,.7);padding:6px 12px;border-radius:999px;}
.ph .sprig{position:absolute;width:46%;max-width:150px;opacity:.5;z-index:1;}
.ph.tall{aspect-ratio:3/4;}
.ph.square{aspect-ratio:1/1;}
.ph.wide{aspect-ratio:4/3;}
.ph.hero-fill{height:100%;min-height:60vh;}
.ph.full{aspect-ratio:16/9;}

/* ---- product grid ------------------------------------------------------- */
.grid{display:grid;gap:clamp(20px,2.4vw,38px);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.card{display:flex;flex-direction:column;gap:14px;}
.card .card-media{aspect-ratio:3/4;border-radius:6px;transition:.3s;}
.card:hover .card-media{transform:translateY(-4px);box-shadow:0 18px 40px rgba(107,79,58,.12);}
.card-name{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--walnut);}
.card-meta{font-size:.72rem;letter-spacing:.08em;color:var(--wsoft);text-transform:uppercase;}
.card-price{font-weight:600;color:var(--ink);font-size:.95rem;}
.tag-pill{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--walnut);background:rgba(168,180,154,.34);
  padding:4px 10px;border-radius:999px;}

/* ---- feature / split rows ---------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;}
.split.reverse .split-media{order:2;}
.stack{display:flex;flex-direction:column;gap:22px;}
.kicker-row{display:flex;align-items:center;gap:14px;}

/* ---- the craft (stitch motifs) ----------------------------------------- */
.motifs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,46px);margin-top:48px;}
.motif{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.motif .disc{width:108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(232,181,168,.4);
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(245,220,208,.5) 72%, rgba(245,220,208,0));}
.motif .nm{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--walnut);}
.motif .mn{font-size:.72rem;color:var(--rose);letter-spacing:.06em;}

/* ---- editorial / journal ----------------------------------------------- */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);}
.jcard .jmedia{aspect-ratio:4/3;border-radius:6px;}
.jcard h3{font-style:italic;font-size:1.45rem;margin-top:14px;}
.jcard .jmeta{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:6px;}

/* ---- band / quote ------------------------------------------------------- */
.band{background:linear-gradient(180deg, rgba(245,220,208,.4), rgba(220,228,224,.3));
  border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);}
.quote{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.7rem);color:var(--walnut);line-height:1.22;max-width:20ch;}

/* ---- newsletter --------------------------------------------------------- */
.signup{display:flex;gap:10px;max-width:420px;flex-wrap:wrap;}
.signup input{flex:1;min-width:220px;border:1px solid var(--hair);background:rgba(255,255,255,.6);
  border-radius:999px;padding:13px 20px;font-family:var(--sans);font-size:.9rem;color:var(--ink);}
.signup input::placeholder{color:var(--wsoft);}

/* ---- PDP ---------------------------------------------------------------- */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,68px);align-items:start;}
.gallery{display:grid;grid-template-columns:1fr;gap:14px;}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.pdp-info{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;}
.price{font-size:1.4rem;font-weight:600;color:var(--walnut);}
.swatches{display:flex;gap:10px;}
.swatch{width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);cursor:pointer;}
.sizes{display:flex;gap:10px;flex-wrap:wrap;}
.size{min-width:48px;text-align:center;border:1px solid var(--hair);border-radius:8px;padding:10px 12px;
  font-size:.82rem;letter-spacing:.06em;cursor:pointer;transition:.2s;}
.size:hover,.size.active{border-color:var(--walnut);background:rgba(107,79,58,.06);}
.accordion{border-top:1px solid var(--hair);padding:16px 0;}
.accordion h4{font-style:italic;font-size:1.25rem;margin-bottom:6px;}
.spec{font-size:.92rem;color:var(--wsoft);}

/* ---- footer ------------------------------------------------------------- */
.foot{background:linear-gradient(180deg, transparent, rgba(243,238,230,.7));
  border-top:1px solid var(--hair2);padding:clamp(48px,7vw,90px) 0 34px;margin-top:40px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(24px,3vw,56px);}
.foot h5{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wsoft);margin-bottom:16px;}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.foot ul a{font-size:.9rem;color:var(--ink);}
.foot ul a:hover{color:var(--rose);}
.foot .brand{font-size:2.4rem;}
.foot .tag{font-family:var(--hand);font-size:1.4rem;color:var(--rose);margin-top:6px;}
.footnote{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:48px;padding-top:20px;border-top:1px solid var(--hair2);
  font-size:.72rem;letter-spacing:.1em;color:var(--wsoft);text-transform:uppercase;}

/* ---- announcement bar --------------------------------------------------- */
.announce{background:var(--walnut);color:var(--pearl);text-align:center;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;font-weight:600;}

/* ---- decorative sprigs -------------------------------------------------- */
.deco-sprig{position:absolute;pointer-events:none;opacity:.42;z-index:0;}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:1000px){
  .grid.cols-4{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:820px){
  .links,.navacts{display:none;}
  .menu-btn{display:block;}
  .hero{grid-template-columns:1fr;}
  .hero-media{min-height:52vh;order:-1;}
  .split,.pdp{grid-template-columns:1fr;}
  .split.reverse .split-media{order:0;}
  .pdp-info{position:static;}
  .grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .motifs{grid-template-columns:repeat(2,1fr);}
  .journal-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr;}
}

/* ===================== v2 - accessibility, mobile nav, checkout ===================== */
:root{ --mute2:#735f4e; }              /* darker neutral that meets WCAG AA on pearl */
*:focus-visible{ outline:2px solid var(--walnut); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* contrast lift for small functional text */
.card-meta,.count,.footnote,.spec,.label-sm,.stockline{ color:var(--mute2); }

/* skip-link for keyboard users */
.skip{position:absolute;left:-999px;top:0;background:var(--walnut);color:var(--pearl);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:200;}
.skip:focus{left:0;}

/* working mobile menu (toggled by site.js adding .open to .nav) */
@media(max-width:820px){
  .nav{flex-wrap:wrap;row-gap:0;}
  .menu-btn{display:block;order:3;}
  .links,.navacts{display:none;}
  .nav.open .links,.nav.open .navacts{display:flex;flex-direction:column;align-items:flex-start;
    gap:18px;width:100%;}
  .nav.open .links{order:8;margin-top:14px;padding-top:16px;border-top:1px solid var(--hair2);}
  .nav.open .navacts{order:9;margin-top:6px;}
  .menu-btn[aria-expanded="true"]{color:var(--rose);}
}

/* ---- checkout ---------------------------------------------------------- */
.checkout{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(28px,4vw,64px);
  align-items:start;padding:clamp(24px,3vw,40px) 0 80px;}
.co-form{display:flex;flex-direction:column;gap:30px;}
.co-step .num{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);}
.co-step h2{font-style:italic;font-size:1.7rem;margin:4px 0 16px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);font-weight:700;}
.field input,.field select{border:1px solid var(--hair);background:rgba(255,255,255,.6);
  border-radius:9px;padding:12px 14px;font-family:var(--sans);font-size:.95rem;color:var(--ink);}
.field input:focus,.field select:focus{border-color:var(--walnut);outline:none;
  box-shadow:0 0 0 3px rgba(107,79,58,.12);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.frow.three{grid-template-columns:2fr 1fr 1fr;}
.express{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.express .btn{flex:1;min-width:130px;}
.divider-or{display:flex;align-items:center;gap:14px;color:var(--mute2);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;margin:6px 0;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--hair);}
.summary{position:sticky;top:96px;border:1px solid var(--hair);border-radius:16px;
  background:rgba(255,255,255,.5);padding:24px;box-shadow:0 14px 36px rgba(107,79,58,.07);}
.summary h3{font-style:italic;font-size:1.6rem;margin-bottom:14px;}
.line{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair2);}
.line .lthumb{width:60px;height:80px;border-radius:6px;flex:none;}
.line .lmeta{flex:1;}
.line .lname{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--walnut);line-height:1.1;}
.line .lopt{font-size:.74rem;color:var(--mute2);letter-spacing:.04em;margin-top:3px;}
.line .lprice{font-weight:600;white-space:nowrap;}
.codes{display:flex;gap:10px;margin:16px 0 4px;}
.codes input{flex:1;border:1px solid var(--hair);background:rgba(255,255,255,.6);
  border-radius:999px;padding:11px 16px;font-family:var(--sans);font-size:.86rem;}
.totals{margin-top:14px;display:flex;flex-direction:column;gap:9px;font-size:.93rem;}
.totals .trow{display:flex;justify-content:space-between;color:var(--mute2);}
.totals .trow .pos{color:var(--sage);font-weight:700;}
.grand{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--walnut);
  border-top:1px solid var(--hair);padding-top:14px;margin-top:8px;}
.grand .gsub{font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute2);}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:.72rem;color:var(--mute2);letter-spacing:.03em;}
.crumb-pay{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute2);padding:18px 0 4px;}
@media(max-width:820px){
  .checkout{grid-template-columns:1fr;}
  .summary{position:static;order:-1;margin-bottom:8px;}
  .frow,.frow.three{grid-template-columns:1fr;}
}

/* ===================== real images (fill the slots, hide placeholder chrome) ===================== */
img.media{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.ph:has(img.media){border:none;background:none;}
.ph:has(img.media)::after{display:none;}
.card .card-media:has(img.media){background:none;border:none;}