/* ============================================================================
   Thari by Shubarna — one stylesheet for the shop.

   The palette is the brand's own, taken from the logo: gold, deep maroon, and
   the cream it sits on. An earlier draft used the navy and rani pink of the
   first saree — which was a mistake. That is one product's colours, not the
   shop's, and every saree after it would have fought the page.

   The grid and the product page stay on the palest ground in the set, because
   a customer buying a colour they cannot touch has to see that colour
   truthfully; a saturated page tints every photograph on it. The deep tones
   are used where no cloth is being judged — the header, the hero, the footer.
   ==========================================================================*/

:root{
  --gold:#B08432;          /* the wordmark */
  --gold-light:#D8AE5C;
  --gold-pale:#EBD9AE;
  --maroon:#6B1F2A;        /* "by Shubarna", the draped cloth in the mark */
  --maroon-deep:#4A121C;

  --cream:#FAF3E7;         /* the logo's own ground */
  --cream-2:#F3E9D7;
  --paper:#FDFAF4;         /* palest, for judging cloth against */
  --ink:#2A1F1A;
  --ink-soft:#6B5A4E;
  --line:#E6D9C2;

  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap:1180px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:400 16px/1.65 var(--ui);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

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

/* ---- header ------------------------------------------------------------
   The logo carries its own cream ground, so the bar takes that ground rather
   than fighting it — on maroon the mark reads as a sticker pasted on. The
   deep tone moves down into the hero, which is where it belongs anyway. */
.top{background:var(--cream); color:var(--ink);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:28px;
  padding-block:18px; flex-wrap:wrap}
.brand{display:block; text-decoration:none; line-height:0}
.brand img{height:62px; width:auto; mix-blend-mode:multiply}
@media(max-width:560px){.brand img{height:42px}}
.nav{margin-left:auto; display:flex; gap:26px; flex-wrap:wrap}
.nav a{font:500 12px/1 var(--ui); letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding-block:6px;
  border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--maroon); border-bottom-color:var(--gold)}

/* ---- hero -------------------------------------------------------------- */
.hero{background:var(--maroon-deep); color:var(--cream); overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(24px,5vw,64px); padding-block:clamp(30px,6vw,72px)}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}}
.hero .eyebrow{font:400 10.5px/1 var(--ui); letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-light)}
.hero h1{font-family:var(--display); font-weight:400;
  font-size:clamp(34px,4.6vw,58px); line-height:1.08; margin:18px 0 0;
  text-wrap:balance}
.hero p{color:rgba(255,255,255,.78); max-width:46ch; margin:18px 0 0;
  font-size:17px}
.hero .shot{border-radius:2px; box-shadow:0 30px 70px rgba(0,0,0,.45)}

.btn{display:inline-block; margin-top:26px; text-decoration:none;
  background:var(--gold); color:#231a06; border:0; cursor:pointer;
  font:600 12px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase;
  padding:15px 30px; border-radius:2px}
.btn:hover{background:var(--gold-light)}
.btn.whats{background:#1FA855; color:#fff}
.btn.whats:hover{background:#25c063}
.btn.ghost{background:transparent; color:var(--ink);
  border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}

/* ---- section headings -------------------------------------------------- */
.sec{padding-block:clamp(38px,6vw,68px)}
.sec-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  margin-bottom:26px}
.sec-head h2{font-family:var(--display); font-weight:400;
  font-size:clamp(24px,3vw,34px); margin:0}
.sec-head .count{font:400 12px/1 var(--ui); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---- the grid ---------------------------------------------------------- */
.grid{display:grid; gap:clamp(16px,2.4vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{text-decoration:none; color:inherit; display:flex; flex-direction:column}
.card .frame{background:var(--cream-2); aspect-ratio:3/4; overflow:hidden;
  position:relative}
.card .frame img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease}
.card:hover .frame img{transform:scale(1.035)}
.card h3{font-family:var(--display); font-weight:400; font-size:19px;
  margin:14px 0 0; line-height:1.3}
.card .meta{font-size:13.5px; color:var(--ink-soft); margin-top:4px}
.card .price{font:600 15px/1 var(--ui); margin-top:9px;
  font-variant-numeric:tabular-nums}
.tag{position:absolute; left:0; top:12px; background:var(--maroon); color:#fff;
  font:600 9.5px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase;
  padding:7px 12px}
.tag.sold{background:var(--ink-soft)}

/* ---- product page ------------------------------------------------------ */
.pdp{display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,56px); padding-block:clamp(26px,4vw,48px)}
@media(max-width:880px){.pdp{grid-template-columns:1fr}}
.gallery{display:grid; gap:12px}
.gallery .main{background:var(--cream-2); aspect-ratio:3/4; overflow:hidden}
.gallery .main img{width:100%; height:100%; object-fit:cover}
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.thumbs button{padding:0; border:1px solid transparent; background:none;
  cursor:pointer; aspect-ratio:1; overflow:hidden}
.thumbs button[aria-current]{border-color:var(--gold)}
.thumbs img{width:100%; height:100%; object-fit:cover}
.thumbs .grp{grid-column:1/-1; font:600 10.5px/1 var(--ui);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:6px}

.pdp h1{font-family:var(--display); font-weight:400;
  font-size:clamp(26px,3.2vw,38px); line-height:1.15; margin:0}
.pdp .sku{font:400 11.5px/1 var(--ui); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:12px}
.pdp .price{font:600 26px/1 var(--ui); margin:20px 0 0;
  font-variant-numeric:tabular-nums}
.pdp .price .ask{font:400 17px/1.4 var(--ui); color:var(--ink-soft)}
.pdp .story{margin:20px 0 0; color:var(--ink-soft); max-width:46ch}
.spec{width:100%; border-collapse:collapse; margin-top:26px; font-size:14.5px}
.spec th,.spec td{text-align:left; padding:11px 0;
  border-bottom:1px solid var(--line); vertical-align:top}
.spec th{font:600 11px/1.5 var(--ui); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); width:38%}
.spec .todo{color:var(--maroon)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.note{font-size:13px; color:var(--ink-soft); margin-top:16px}

/* ---- footer ------------------------------------------------------------ */
.foot{background:var(--maroon-deep); color:rgba(250,243,231,.76); margin-top:40px}
.foot .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:28px; padding-block:44px}
.foot h4{font:600 10.5px/1 var(--ui); letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-light); margin:0 0 14px}
.foot a{color:rgba(255,255,255,.74); text-decoration:none; display:block;
  padding-block:4px; font-size:14px}
.foot a:hover{color:#fff}
.foot .fine{border-top:1px solid rgba(255,255,255,.12); font-size:12.5px;
  padding-block:18px; color:rgba(255,255,255,.5)}

/* ---- a plainly-marked draft banner, removed before launch -------------- */
.draft{background:var(--maroon); color:#fff; font:500 13px/1.5 var(--ui);
  text-align:center; padding:10px 16px}
.draft b{font-weight:700}

/* ---- collections: filter chips, and the model shot on hover ------------ */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px}
.chips button{font:500 11.5px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:10px 14px; cursor:pointer; border-radius:2px}
.chips button:hover{border-color:var(--gold); color:var(--ink)}
.chips button[aria-pressed=true]{background:var(--maroon); border-color:var(--maroon);
  color:var(--cream)}
.card .frame img.worn{position:absolute; inset:0; opacity:0; transition:opacity .45s ease}
.card:hover .frame img.worn,.card:focus-visible .frame img.worn{opacity:1}
.wornnote{position:absolute; right:10px; bottom:10px; background:rgba(253,250,244,.92);
  color:var(--ink); font:600 9.5px/1 var(--ui); letter-spacing:.16em;
  text-transform:uppercase; padding:6px 9px; pointer-events:none}
.card:hover .wornnote{opacity:0}
/* no hover on a phone: show the worn shot half the width, beside the saree */
@media (hover:none){
  .card .frame.has-worn img.worn{opacity:1; left:auto; width:42%; height:42%;
    right:8px; bottom:8px; top:auto; border:2px solid var(--paper)}
  .card .frame.has-worn .wornnote{display:none}
}

/* ============================================================================
   Home page — laid out the way a saree house lays out its front room:
   announcement strip, centred mast, a carousel of featured pieces, collection
   tiles, a new-arrivals rail, editorial blocks, how to buy, and a join block.
   Every class here is scoped to body.home or new names, so p.html and
   tryon.html keep their own header untouched.
   ==========================================================================*/
.eyebrow{font:500 10.5px/1 var(--ui); letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold)}

/* ---- announcement strip ------------------------------------------------ */
.ann{background:var(--maroon-deep); color:var(--gold-pale); text-align:center;
  font:500 12px/1 var(--ui); letter-spacing:.12em; height:36px; overflow:hidden}
.ann-track{position:relative; height:100%}
.ann span{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; padding-inline:16px; opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease}
.ann span.on{opacity:1; transform:none}
@media(max-width:560px){.ann{font-size:11px; letter-spacing:.06em}}

/* ---- centred mast ------------------------------------------------------ */
.mast{background:var(--cream); border-bottom:1px solid var(--line);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20}
.mast-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-block:12px}
.mast .brand img{height:70px; width:auto; mix-blend-mode:multiply}
.mast-side{display:inline-flex; align-items:center; gap:8px; justify-self:start;
  font:500 11.5px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none}
.mast-side.right{justify-self:end}
.mast-side:hover{color:var(--maroon)}
.mast-nav{border-top:1px solid var(--line)}
.mast-nav .wrap{display:flex; justify-content:center; gap:30px; overflow-x:auto;
  scrollbar-width:none}
.mast-nav .wrap::-webkit-scrollbar{display:none}
.mast-nav a{white-space:nowrap; font:500 12px/1 var(--ui); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  padding-block:14px; border-bottom:2px solid transparent}
.mast-nav a:hover{color:var(--maroon); border-bottom-color:var(--gold)}
@media(max-width:700px){
  .mast .brand img{height:48px}
  .mast-side span{display:none}
  .mast-side{padding:8px}
  .mast-nav .wrap{justify-content:flex-start; gap:22px}
}

/* ---- hero carousel ----------------------------------------------------- */
.slides{position:relative; background:var(--maroon-deep); color:var(--cream);
  overflow:hidden}
.slides-track{display:grid}
.slide{grid-area:1/1; display:grid; grid-template-columns:1fr 1fr;
  min-height:clamp(420px,62vh,640px); opacity:0; visibility:hidden;
  transition:opacity .8s ease, visibility 0s .8s}
.slide.on{opacity:1; visibility:visible; transition:opacity .8s ease}
.slide-copy{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px,6vw,80px) clamp(20px,5vw,72px);
  max-width:620px; justify-self:end; width:100%}
.slide .eyebrow{color:var(--gold-light)}
.slide h1{font-family:var(--display); font-weight:400;
  font-size:clamp(32px,4.4vw,56px); line-height:1.08; margin:18px 0 0;
  text-wrap:balance}
.slide p{color:rgba(255,255,255,.78); max-width:46ch; margin:18px 0 0; font-size:16.5px}
.slide-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn.line{background:transparent; color:var(--cream); border:1px solid rgba(250,243,231,.45)}
.btn.line:hover{border-color:var(--gold-light); color:var(--gold-light); background:transparent}
.slide-img{position:relative; min-height:100%; overflow:hidden}
.slide-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 30%; transform:scale(1.04); transition:transform 7s ease}
.slide.on .slide-img img{transform:none}
.slides-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(250,243,231,.35);
  background:rgba(74,18,28,.55); color:var(--cream); font-size:26px; line-height:1;
  cursor:pointer}
.slides-arrow:hover{background:var(--maroon)}
.slides-arrow.prev{left:14px} .slides-arrow.next{right:14px}
.slides-dots{position:absolute; bottom:18px; left:0; right:0; display:flex;
  justify-content:center; gap:8px; z-index:3}
.slides-dots button{width:26px; height:3px; padding:0; border:0; cursor:pointer;
  background:rgba(250,243,231,.4)}
.slides-dots button[aria-current]{background:var(--gold-light)}
.slides.single .slides-arrow,.slides.single .slides-dots{display:none}
@media(max-width:820px){
  .slide{grid-template-columns:1fr; min-height:0}
  .slide-img{order:-1; aspect-ratio:4/5; min-height:0}
  .slide-copy{justify-self:stretch; padding-bottom:56px}
  .slides-arrow{top:calc(min(125vw, 100%) * .5 - 22px); transform:none}
}

/* ---- promises strip ---------------------------------------------------- */
.promises{background:var(--cream); border-bottom:1px solid var(--line)}
.promises .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding-block:24px; text-align:center}
.promises b{display:block; font-family:var(--display); font-weight:500;
  font-size:19px; color:var(--maroon)}
.promises span{font-size:13px; color:var(--ink-soft)}
@media(max-width:760px){.promises .wrap{grid-template-columns:1fr 1fr}}

/* ---- section titles, centred like a lookbook -------------------------- */
.sec-title{text-align:center; margin-bottom:clamp(22px,3vw,36px)}
.sec-title h2,.why h2,.loom h2,.studio h2,.join h2{font-family:var(--display);
  font-weight:400; font-size:clamp(28px,3.4vw,42px); line-height:1.12; margin:12px 0 0}
.sec-title.row{display:flex; align-items:flex-end; justify-content:space-between;
  text-align:left; gap:16px}

/* ---- collection tiles -------------------------------------------------- */
.tiles{overflow:hidden}
.tiles-track{display:flex; gap:clamp(12px,2vw,22px); will-change:transform}
.tiles-track .tile{flex:0 0 calc((100% - 2 * clamp(12px,2vw,22px)) / 3)}
@media(max-width:820px){.tiles-track .tile{flex-basis:calc((100% - clamp(12px,2vw,22px)) / 2)}}
@media(max-width:480px){.tiles-track .tile{flex-basis:78%}}
.tile{position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  background:var(--cream-2); color:#fff; text-decoration:none}
.tile img{width:100%; height:100%; object-fit:cover; object-position:center 25%;
  transition:transform .8s ease}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(42,18,20,.78), rgba(42,18,20,0) 55%)}
.tile-label{position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:22px 20px; display:flex; flex-direction:column; gap:6px}
.tile-label b{font-family:var(--display); font-weight:400; font-size:28px; line-height:1.1}
.tile-label small{font:500 11px/1 var(--ui); letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-pale)}

/* ---- new arrivals rail ------------------------------------------------- */
.rail-sec{background:var(--cream)}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(210px,23%,280px);
  gap:clamp(14px,2vw,26px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:10px; scrollbar-width:thin}
.rail .card{scroll-snap-align:start}
@media(max-width:560px){.rail{grid-auto-columns:68%}}
.rail-ctl{display:flex; gap:8px}
.rail-ctl button{width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); font-size:22px; line-height:1; cursor:pointer; color:var(--ink)}
.rail-ctl button:hover{border-color:var(--gold)}

/* ---- editorial: why handloom ------------------------------------------ */
.why{display:grid; grid-template-columns:1.1fr .9fr; background:var(--cream-2)}
.why-img{min-height:460px; position:relative; overflow:hidden}
.why-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 30%}
.why-copy{padding:clamp(36px,6vw,84px) clamp(20px,5vw,72px); align-self:center;
  max-width:560px}
.why-copy p{color:var(--ink-soft); margin:16px 0 0}
@media(max-width:820px){.why{grid-template-columns:1fr} .why-img{min-height:0; aspect-ratio:4/5}}

/* ---- the loom story ---------------------------------------------------- */
.loom{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,72px);
  align-items:center; max-width:980px; margin-inline:auto}
.loom-word{font-family:var(--display); font-size:clamp(90px,14vw,190px); line-height:1;
  color:var(--gold); opacity:.85}
.loom p{color:var(--ink-soft); max-width:58ch; margin:16px 0 0}
@media(max-width:700px){.loom{grid-template-columns:1fr; text-align:center}
  .loom p{margin-inline:auto}}

/* ---- drape studio block ----------------------------------------------- */
.studio{background:var(--maroon-deep); color:var(--cream)}
.studio .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,5vw,64px);
  align-items:center; padding-block:clamp(40px,6vw,76px)}
.studio .eyebrow{color:var(--gold-light)}
.studio p{color:rgba(255,255,255,.78); max-width:48ch; margin:16px 0 0}
.studio-img{aspect-ratio:3/4; overflow:hidden; max-width:360px; justify-self:center;
  width:100%; box-shadow:0 30px 70px rgba(0,0,0,.45)}
.studio-img img{width:100%; height:100%; object-fit:cover}
@media(max-width:760px){.studio .wrap{grid-template-columns:1fr}}

/* ---- how to buy -------------------------------------------------------- */
.steps{list-style:none; padding:0; margin:0; display:grid; gap:clamp(16px,3vw,36px);
  grid-template-columns:repeat(3,1fr); counter-reset:step}
.steps li{counter-increment:step; background:var(--cream); border:1px solid var(--line);
  padding:28px 24px}
.steps li::before{content:counter(step,decimal-leading-zero); display:block;
  font-family:var(--display); font-size:38px; line-height:1; color:var(--gold)}
.steps b{display:block; font-family:var(--display); font-weight:500; font-size:22px;
  margin-top:12px}
.steps span{display:block; color:var(--ink-soft); font-size:14.5px; margin-top:8px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---- join block -------------------------------------------------------- */
.join{background:var(--cream-2); border-top:1px solid var(--line); text-align:center}
.join .wrap{padding-block:clamp(40px,6vw,72px); max-width:680px}
.join p{color:var(--ink-soft); margin:14px auto 0; max-width:52ch}

/* ---- footer additions -------------------------------------------------- */
.foot-logo{height:74px; width:auto; background:var(--cream); padding:8px 12px; border-radius:2px}
.foot-loc{display:block; font-size:14px; padding-block:4px}
body.home .foot{margin-top:0}

/* the hidden attribute always wins over a display rule above */
[hidden]{display:none !important}