/* Dixith Labs Store, Sandhya look (6 November 2026). Loaded AFTER store.css (and before admin.css), so store.css, admin.css and
 * tokens.css stay as they were and this file alone carries the new look: Cormorant Garamond for names and headings, Hanken
 * Grotesk for reading, midnight and brass at dusk (dark), lavender-grey and bronze at dawn (light). Same tokens as the hub's
 * hub.css (dixith.com), so the store sits beside it as one family. Record: dixith-labs-design/BRAND-SANDHYA-2026-11-05.md.
 */
/* ---------------------------------------------------------------- fonts */
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif Kannada'; src: url('/assets/fonts/noto-serif-kannada-kannada-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0C80-0CFF, U+200C-200D; }
@font-face { font-family: 'Noto Sans Kannada'; src: url('/assets/fonts/noto-sans-kannada-kannada-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0C80-0CFF, U+200C-200D; }
@font-face { font-family: 'Noto Sans Kannada'; src: url('/assets/fonts/noto-sans-kannada-kannada-600-normal.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; unicode-range: U+0C80-0CFF, U+200C-200D; }

/* ---------------------------------------------------------------- Sandhya tokens (override tokens.css) */
:root {
  --display: 'Cormorant Garamond', 'Noto Serif Kannada', Georgia, 'Times New Roman', serif;
  --font: 'Hanken Grotesk', 'Noto Sans Kannada', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* Dawn (light). The selector is as specific as tokens.css's daylight block, and comes after it. */
:root[data-accent]:not([data-theme="dark"]):not(.auto-dark) {
  --bg: #F4F3F8; --bg-2: #ECEAF3; --surface: #FFFFFF; --surface-2: #FAF9FD;
  --ink: #1B1F3A; --ink-2: #444866; --ink-3: #666A88;
  --line: rgba(27, 31, 58, .10); --line-2: rgba(138, 90, 18, .30);
  --hover: rgba(27, 31, 58, .05); --press: rgba(27, 31, 58, .09);
  --accent: #8A5A12; --accent-2: #B8862B; --accent-ink: #8A5A12; --accent-soft: rgba(138, 90, 18, .10); --accent-line: rgba(138, 90, 18, .32);
  --on-accent: #FFFFFF;
  --glass: rgba(244, 243, 248, .80); --glass-strong: rgba(250, 249, 253, .92); --glass-edge: rgba(255, 255, 255, .9); --glass-rim: rgba(255, 255, 255, .75);
  --milk: #FFFFFF; --scrim: rgba(27, 31, 58, .28);
  --shadow-1: 0 1px 2px rgba(30, 30, 70, .05), 0 12px 30px -20px rgba(30, 30, 70, .30);
  --shadow-2: 0 2px 6px rgba(30, 30, 70, .06), 0 24px 54px -22px rgba(30, 30, 70, .34);
  --shadow-glass: var(--shadow-1);
  --glow-top: rgba(236, 170, 120, .34); --glow-bottom: rgba(120, 130, 215, .20);
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-400 -400 800 800' fill='none' stroke='%238A5A12' stroke-width='1.3'%3E%3Ccircle r='380' opacity='.26'/%3E%3Ccircle r='330' opacity='.16'/%3E%3Cg opacity='.2'%3E%3Crect x='-190' y='-190' width='380' height='380'/%3E%3Crect x='-190' y='-190' width='380' height='380' transform='rotate(22.5)'/%3E%3Crect x='-190' y='-190' width='380' height='380' transform='rotate(45)'/%3E%3Crect x='-190' y='-190' width='380' height='380' transform='rotate(67.5)'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-accent]:not([data-theme="dark"]):not(.auto-dark) { background: var(--bg); }
/* Dusk (dark). */
:root[data-theme="dark"][data-accent], :root.auto-dark[data-accent] {
  --bg: #0A0E22; --bg-2: #10163A; --surface: #121735; --surface-2: #171D45;
  --ink: #F2ECDD; --ink-2: #C9C8D6; --ink-3: #8E91AE;
  --line: rgba(232, 185, 106, .16); --line-2: rgba(232, 185, 106, .30);
  --hover: rgba(232, 185, 106, .07); --press: rgba(232, 185, 106, .12);
  --accent: #E8B96A; --accent-2: #F6D08A; --accent-ink: #E8B96A; --accent-soft: rgba(232, 185, 106, .12); --accent-line: rgba(232, 185, 106, .34);
  --on-accent: #1A1530;
  --glass: rgba(10, 14, 34, .74); --glass-strong: rgba(16, 21, 52, .92); --glass-edge: rgba(232, 185, 106, .18);
  --scrim: rgba(4, 6, 18, .62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 22px 54px -22px rgba(0, 0, 0, .65);
  --glow-top: rgba(110, 120, 220, .30); --glow-bottom: rgba(224, 142, 82, .26);
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-400 -400 800 800' fill='none' stroke='%23E8B96A' stroke-width='1.3'%3E%3Ccircle r='380' opacity='.24'/%3E%3Ccircle r='330' opacity='.15'/%3E%3Cg opacity='.18'%3E%3Crect x='-190' y='-190' width='380' height='380'/%3E%3Crect x='-190' y='-190' width='380' height='380' transform='rotate(22.5)'/%3E%3Crect x='-190' y='-190' width='380' height='380' transform='rotate(45)'/%3E%3Crect x='-190' y='-190' width='380' height='380' transform='rotate(67.5)'/%3E%3C/g%3E%3C/svg%3E");
}

/* The sky behind the page: a glow at the top and one at the horizon. */
.backdrop i:nth-child(1) { width: 130vmax; height: 60vmax; left: 50%; top: -34vmax; transform: translateX(-50%); background: var(--glow-top); opacity: 1; }
.backdrop i:nth-child(2) { width: 140vmax; height: 52vmax; left: 50%; right: auto; top: auto; bottom: -36vmax; transform: translateX(-50%); background: var(--glow-bottom); opacity: 1; }
.backdrop i:nth-child(3) { display: none; }
html .backdrop::before { display: none; }


/* ---------------------------------------------------------------- the store, restyled */
body.scrolled .top, html:not([data-theme="dark"]):not(.auto-dark) body.scrolled .top { background: var(--glass); box-shadow: inset 0 -1px 0 var(--line-2); }
.top > .wrap { height: 68px; }
.brand { font-weight: 600; font-size: 27px; letter-spacing: 0; gap: 11px; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: none; box-shadow: none; }
.brand-words small { font-size: 11.5px; font-weight: 600; letter-spacing: .24em; vertical-align: 5px; margin-left: 8px; }
.top nav a:not(.icon-btn) { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; }
.top nav a[aria-current] { color: var(--accent-ink); background: var(--accent-soft); }
.top nav a:hover { background: var(--hover); }
.subnav a { border-radius: 999px; }
.cart-btn .badge { background: var(--accent); color: var(--on-accent); }
.notice-bar { letter-spacing: .02em; }

.hero { position: relative; isolation: isolate; overflow-x: clip; padding: 64px 0 36px; }
.hero::before { content: ''; position: absolute; z-index: -1; right: -14%; top: 50%; width: min(820px, 110vw); aspect-ratio: 1; transform: translateY(-50%); background: var(--ring) center / contain no-repeat; -webkit-mask-image: radial-gradient(circle at center, #000 34%, transparent 70%); mask-image: radial-gradient(circle at center, #000 34%, transparent 70%); pointer-events: none; }
.hero.small { padding: 40px 0 20px; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .3em; color: var(--accent-ink); margin: 0 0 18px; }
h1 { font-weight: 600; font-size: clamp(46px, 8.5vw, 88px); line-height: .98; letter-spacing: -.01em; margin: 0 0 20px; text-wrap: balance; }
.hero.small h1 { font-size: clamp(38px, 6vw, 58px); }
h2 { font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: 0; }
.lede { font-size: 19px; line-height: 1.55; }
.label { align-items: center; gap: 18px; }
.label h2 { font-size: 12.5px; font-weight: 600; letter-spacing: .24em; color: var(--accent-ink); }
.label span { background: var(--line-2); }
.sub-head, .plans legend, .table th, .foot-grid nav b { letter-spacing: .16em; font-weight: 600; }
.sub-head { color: var(--accent-ink); }

/* cards: flat, fine-lined, 8 px, as the hub's */
.p-card, .promises li, .card-box, .part, .buy, .band, .empty, .faq details, .p-banner, .plan, .soon, .biz, .flash, .form-error { border-radius: 8px; }
.p-card, .promises li, .card-box, .part, .buy, .band, .empty, .faq details { box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
.buy { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-2); }
@media (hover: hover) { .p-card:hover { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--accent-line); } }
:root[data-theme="dark"] .p-card, :root.auto-dark .p-card { background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0)); }
.p-link::after { border-radius: 8px; }
.p-icon, .p-hero-icon, .line-icon { border-radius: 16px; }
.p-card h3 { font-weight: 600; font-size: 31px; line-height: 1.05; letter-spacing: 0; }
.kind { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.go { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.price { font-weight: 600; }
.p-hero h1 { font-size: clamp(42px, 7vw, 72px); }
.buy-price { font-weight: 600; font-size: 42px; }
.plan-name { font-weight: 600; }
.facts li, .pill, .cur-switch button, .subnav a { border-radius: 999px; }
.faq summary { font-weight: 600; }
.sums .total dd { font-weight: 600; font-size: 26px; }
.foot-brand { font-weight: 600; font-size: 24px; }
footer .row, .foot-grid { border-top-color: var(--line-2); }
footer .social a { border-radius: 999px; }
.btn { border-radius: 999px; }
.btn.primary { background: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn.soft { box-shadow: none; }
@media (max-width: 640px) { .hero { padding: 40px 0 24px; } .hero::before { right: -40%; } .brand { font-size: 23px; } }
@media (max-width: 380px) { .brand { font-size: 21px; gap: 8px; } .brand-words small { display: none; } }

/* Cormorant's own figures are old-style (a 1 looks like a small capital I); prices and counts use lining figures. */
body, h1, h2, h3, .buy-price, .stat, .tile b, .sums dd { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }