/* ============================================================================
   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}