/* Rubans app — look and feel layer. Loaded last in <head>, so it overrides the base styles in index.html.
   Owns colour, type, spacing, states and motion. Markup and behaviour live in index.html / app.js.
   Direction: an Indian fine-jewellery house — ivory ground, maroon ink accent, gold kept for detail.
   Brand source: rubans.in (dembrandt): maroon #47080c family, ink #212326, Lato + Playfair Display.
   Rules followed (Impeccable craft floor + taste-skill house rules): text >= 4.5:1, no text under 12px,
   no tracked uppercase labels, no gradients or glows on controls, one button shape, emoji never as icons,
   themed browser surfaces (selection, focus, caret, scrollbars), one motion moment, reduced-motion honoured. */

:root {
  --primary: #4a0d12;          /* maroon: actions, the one accent */
  --primary-press: #3a090e;
  --ink: #1f1f22;              /* all running text */
  --muted: #5f5f64;            /* 5.9:1 on ivory */
  --gold-text: #8a6a2a;        /* gold for text: 5.0:1 on white (app.json's runtime --accent #b08a3e is 3.2:1, so text never uses --accent) */
  --gold: #b08a3e;             /* gold for non-text detail only */
  --bg: #faf7f2;               /* ivory ground */
  --surface: #ffffff;          /* bars, sheets, inputs: one tone step up from the ground */
  --soft: #f2ece3;             /* image wells, chips at rest */
  --line: #e7e0d6;             /* used only where a form needs an edge */
  --sale: #a3221b;
  --ok: #0e7a40;               /* WhatsApp action: 5.4:1 with white text (was #128c4a at 4.3:1) */
  --radius: 2px;               /* one shape for buttons and media: near-square */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
html, body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
main { background: var(--bg); }
::selection { background: var(--primary); color: #fff; }
input, textarea { caret-color: var(--primary); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius); }
* { scrollbar-color: #cbbfae transparent; scrollbar-width: thin; }
.price, .cd b, .sum, .qty span, .rpd-price { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Top of screen ---------- */
.announce { background: var(--primary); font-size: 12px; letter-spacing: .02em; text-transform: none; padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
header { background: var(--surface); border-bottom: 0; padding: 10px 16px; }
.logo { font: italic 600 26px/1 var(--serif); letter-spacing: -.01em; min-height: 44px; display: flex; align-items: center; }
.icon-btn { width: 44px; height: 44px; }
.badge { background: var(--primary); font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; top: 4px; right: 2px; }

/* ---------- Home ---------- */
.hero { margin: 0 0 8px; border-radius: 0; aspect-ratio: 4/5; }
.hero .over { padding: 28px 20px 24px; background: linear-gradient(transparent 0%, rgba(20, 8, 10, .62) 100%); } /* neutral scrim under text on a photo */
.eyebrow { font-size: 14px; letter-spacing: 0; text-transform: none; opacity: 1; }
.hero h2 { font: 400 clamp(34px, 9vw, 44px)/1.05 var(--serif); letter-spacing: -.02em; margin: 4px 0 18px; text-wrap: balance; }
.pill { border-radius: var(--radius); padding: 13px 22px; font-size: 14px; font-weight: 700; letter-spacing: .01em; text-transform: none; min-height: 44px; }
.chips { gap: 8px; padding: 8px 16px 12px; }
.chip { background: var(--surface); border: 0; padding: 10px 16px; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; }
.chip:active { background: var(--soft); }
.offer { border-radius: 0; margin: 12px 0; padding: 14px 20px; background: var(--soft); color: var(--primary); font-size: 14px; letter-spacing: 0; text-transform: none; }
.offer.dark { background: var(--primary); color: #fff; }
.countdown { margin: 12px 0; border-radius: 0; padding: 22px 20px; }
.countdown, .countdown * { text-transform: none; letter-spacing: 0; }
.cd { gap: 22px; margin-top: 10px; }
.cd span { font-size: 12px; opacity: .92; }
.cd b { font: 400 32px/1.05 var(--serif); }
.sec-h { padding: 32px 16px 12px; }
.sec-h h3 { font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; }
.sec-h a { font-size: 14px; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.banner { margin: 12px 0; border-radius: 0; }
.install { border: 0; border-radius: var(--radius); background: var(--surface); font-size: 14px; margin: 12px 16px 0; }
.install .go { border-radius: var(--radius); background: var(--primary); font-size: 13px; letter-spacing: 0; text-transform: none; padding: 9px 14px; }
.tx-caption { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tx-h1 { letter-spacing: -.01em; } .tx-h2 { letter-spacing: -.01em; }

/* ---------- Product cards ---------- */
.rail { gap: 12px; }
.grid { gap: 22px 12px; }
.card .ph { border-radius: var(--radius); background: var(--soft); }
.card .t { font: 400 14px/1.35 var(--sans); color: var(--ink); margin: 10px 0 4px; }
.price { font-size: 15px; font-weight: 700; color: var(--ink); }
.price s { font-size: 13px; color: var(--muted); }
.price .off { font-size: 13px; color: var(--sale); }
.heart { width: 36px; height: 36px; top: 6px; right: 6px; background: rgba(255, 255, 255, .94); }
.heart.on svg { fill: var(--primary); stroke: var(--primary); }
.heart.on svg { animation: rb-pop .38s var(--ease); }
.skel { background: var(--soft); animation: rb-breathe 1.4s ease-in-out infinite; }
.more { border-radius: var(--radius); border-color: var(--primary); color: var(--primary); font-size: 14px; letter-spacing: .01em; text-transform: none; padding: 13px 28px; min-height: 44px; }

/* ---------- Product page ---------- */
.gallery { background: var(--soft); }
.dots i { width: 6px; height: 6px; background: #cfc5b6; }
.dots i.on { background: var(--primary); width: 18px; border-radius: 3px; transition: width .3s var(--ease); }
.pd { padding: 8px 16px 20px; }
.pd .type { color: var(--gold-text); font-size: 14px; letter-spacing: 0; text-transform: none; }
.pd h1 { font: 400 28px/1.15 var(--serif); letter-spacing: -.015em; margin: 6px 0 10px; text-wrap: balance; }
.pd .price { font-size: 22px; }
.pd .tax { font-size: 13px; }
.opt { border-radius: var(--radius); background: var(--surface); border-color: var(--line); font-size: 14px; padding: 10px 14px; min-height: 44px; }
.opt.on { background: var(--primary); border-color: var(--primary); }
.desc { border-top: 0; padding-top: 18px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.desc h2, .desc h4 { font: 400 20px/1.2 var(--serif); }
.buybar { background: var(--surface); border-top: 0; box-shadow: 0 -6px 20px rgba(31, 31, 34, .06); padding: 10px 16px; } /* floats over content */
.btn { border-radius: var(--radius); font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: none; padding: 15px; min-height: 50px; border-color: var(--primary); color: var(--primary); background: var(--surface); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:active { background: var(--primary-press); }
.btn:active { transform: scale(.98); }
.btn { transition: transform .12s var(--ease), background-color .12s; }
.btn[disabled] { opacity: .5; transform: none; }

/* ---------- Bag ---------- */
.line { border-bottom: 0; background: var(--surface); margin: 0 0 8px; padding: 16px; }
.line img { border-radius: var(--radius); }
.qty { border-color: var(--line); border-radius: var(--radius); }
.qty button { width: 44px; height: 40px; font-size: 18px; }
.qty span { font-size: 15px; }
.rm { font-size: 14px; color: var(--muted); text-underline-offset: 3px; }
.sum { font-size: 18px; padding: 20px 16px; }
.note { font-size: 13px; }

/* ---------- Empty, error, search ---------- */
.empty { padding: 72px 24px; color: var(--muted); font-size: 15px; }
.empty h2 { font: 400 26px/1.2 var(--serif); }
.err { font-size: 15px; }
.search-in input { border-radius: var(--radius); background: var(--surface); border-color: var(--line); font-size: 16px; padding: 13px 14px; min-height: 48px; }
.page-h h1 { font: 400 30px/1.15 var(--serif); letter-spacing: -.015em; }
.page-h p { font-size: 14px; }

/* ---------- Reseller / share ---------- */
.seller { border-radius: var(--radius); background: #eaf4ee; }
.seller div { font-size: 14px; } .seller span { font-size: 13px; color: #44514a; }
.seller .go { background: var(--ok); border-radius: var(--radius); font-size: 14px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Tab bar ---------- */
nav.tabs { background: var(--surface); border-top: 0; box-shadow: 0 -1px 0 rgba(31, 31, 34, .06); }
nav.tabs a { font-size: 12px; letter-spacing: 0; color: var(--muted); padding: 8px 0 9px; min-height: 56px; gap: 3px; }
nav.tabs a.on { color: var(--primary); font-weight: 700; }
nav.tabs a svg { transition: transform .25s var(--ease); }
nav.tabs a.on svg { transform: translateY(-1px); }
nav.tabs a:active svg { transform: scale(.88); }
nav.tabs .badge { top: 5px; }

/* ---------- Toast: the one authored motion moment (added to bag / saved) ---------- */
.toast { background: var(--ink); border-radius: var(--radius); font-size: 14px; padding: 12px 18px; bottom: calc(136px + var(--safe-b)); transform: translate(-50%, 8px); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.toast.show { transform: translate(-50%, 0); }

/* ---------- Reels: full screen, nothing over the tab bar ---------- */
body:has(.reels-feed-container) header,
body:has(.reels-feed-container) .announce,
body:has(.reels-feed-container) .install { display: none; }
body:has(.reels-feed-container) main { padding-bottom: 0; background: #000; }
.reels-feed-container, .reel-card { height: calc(100vh - 56px - var(--safe-b)); height: calc(100dvh - 56px - var(--safe-b)); }
.reel-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 22%, transparent 55%, rgba(0, 0, 0, .78) 100%); padding: 18px 16px 16px; }
.reel-badge { background: var(--primary); border: 0; border-radius: var(--radius); font-size: 12px; font-weight: 700; letter-spacing: 0; padding: 4px 8px; }
.reel-btn { font-size: 12px; min-width: 44px; min-height: 44px; }
.creator-name { font-size: 15px; }
.follow-pill { font-size: 12px; padding: 5px 12px; border-radius: var(--radius); }
.reel-caption { font-size: 14px; line-height: 1.4; }
.reel-product-drawer { background: rgba(18, 12, 14, .92); backdrop-filter: none; border: 0; border-radius: var(--radius); box-shadow: none; padding: 10px 12px; }
.rpd-title { font-size: 14px; }
.rpd-price { font-size: 14px; color: #e2c27a; }
.rpd-add-btn { background: var(--primary); border: 0; border-radius: var(--radius); box-shadow: none; font-size: 14px; padding: 11px 16px; min-height: 44px; }
.rpd-add-btn:active { background: var(--primary-press); }

/* Reels controls: drawn line icons replace the emoji glyphs (one stroke weight, currentColor). */
.reel-btn .icon { font-size: 0; width: 30px; height: 30px; background: currentColor; -webkit-mask: var(--rb-ico) center / 28px 28px no-repeat; mask: var(--rb-ico) center / 28px 28px no-repeat; }
.reel-btn.like-btn .icon { --rb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.7c0 5.6-7.5 10.2-7.5 10.2z'/%3E%3C/svg%3E"); }
.reel-sidebar .reel-btn:nth-child(2) .icon { --rb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z'/%3E%3C/svg%3E"); }
.reel-sidebar .reel-btn:nth-child(3) .icon { --rb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M21 3 10 14M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E"); }
.reel-btn.audio-toggle-btn .icon { --rb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M16 9a4.2 4.2 0 0 1 0 6M18.6 6.5a7.8 7.8 0 0 1 0 11'/%3E%3C/svg%3E"); }
.reel-btn { color: #fff; text-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.reel-btn .count { font-size: 12px; }
.reel-overlay .claim-store-bounty { display: block; background: var(--primary); color: #fff !important; /* base rule pins a dark colour with !important */ border-radius: var(--radius); padding: 10px 14px; font-size: 13px; font-weight: 700; line-height: 1.35; box-shadow: none; border: 0; }
.play-state-indicator { color: #fff; opacity: .85; }

/* ---------- Try-On: its own header, no second back button ---------- */
body:has(.studio-wrapper) header,
body:has(.studio-wrapper) .announce,
body:has(.studio-wrapper) .install { display: none; }
body:has(.studio-wrapper) main { padding-bottom: 0; }
.studio-wrapper { height: calc(100vh - 56px - var(--safe-b)); height: calc(100dvh - 56px - var(--safe-b)); }

/* ---------- Touch targets: 44px minimum, invisible hit area where the look stays small ---------- */
.heart, .follow-pill, .sec-h a, .qty button, .rm { position: relative; }
.heart { position: absolute; }
.heart::after, .follow-pill::after, .sec-h a::after, .rm::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.chip { min-height: 44px; }
.qty button { height: 44px; }
.follow-pill { min-height: 32px; }

/* ---------- Motion ---------- */
@keyframes rb-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rb-breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Larger screens ---------- */
@media (min-width: 700px) {
  body { background: #ecebe8; }
  main { background: var(--bg); }
}