/* =========================================================================
   IndianShopping.com home page (2026 redesign, "The Masala Dabba").
   Plain CSS, site-hosted fonts. Dark by default (set before paint), light on request.
   ========================================================================= */

@font-face {
    font-family: "Inter";
    src: url("/vendors/fonts/inter/inter-400.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/vendors/fonts/poppins/poppins-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/vendors/fonts/poppins/poppins-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- tokens ---------- */
:root {
    color-scheme: light;
    --saffron: #FF9933;
    --saffron-deep: #E07B12;
    --saffron-800: #92400e;
    --saffron-50: #fffbeb;
    --green: #138808;
    --hero-a: #3b1606;
    --hero-b: #7c2d12;
    --hero-c: #f97316;

    --bg: #FFFAF2;
    --bg-alt: #FBF1E1;
    --surface: #FFFFFF;
    --surface-2: #FFF6EA;
    --ink: #2A1A10;
    --ink-soft: #6A5243;
    --ink-faint: #9A8574;
    --line: #EBDDC8;
    --link: #A0410B;
    --focus: #1F2A8C;
    --chip-bg: rgba(255, 255, 255, .1);
    --shadow-sm: 0 1px 2px rgba(74, 38, 12, .06), 0 2px 8px -4px rgba(74, 38, 12, .14);
    --shadow: 0 1px 2px rgba(74, 38, 12, .06), 0 14px 32px -16px rgba(74, 38, 12, .32);
    --shadow-lg: 0 2px 4px rgba(74, 38, 12, .06), 0 28px 56px -24px rgba(74, 38, 12, .42);
    --print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23E07B12' fill-opacity='.06'%3E%3Ccircle cx='14' cy='14' r='3'/%3E%3Cellipse cx='14' cy='6.5' rx='2.2' ry='3.6'/%3E%3Cellipse cx='14' cy='21.5' rx='2.2' ry='3.6'/%3E%3Cellipse cx='6.5' cy='14' rx='3.6' ry='2.2'/%3E%3Cellipse cx='21.5' cy='14' rx='3.6' ry='2.2'/%3E%3Ccircle cx='42' cy='42' r='1.6'/%3E%3Ccircle cx='42' cy='35' r='1.1'/%3E%3Ccircle cx='42' cy='49' r='1.1'/%3E%3Ccircle cx='35' cy='42' r='1.1'/%3E%3Ccircle cx='49' cy='42' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    --border-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14' viewBox='0 0 32 14'%3E%3Cpath d='M0 7h32' stroke='%23E07B12' stroke-opacity='.35' stroke-width='1'/%3E%3Cpath d='M8 1.5 13.5 7 8 12.5 2.5 7z' fill='%23FF9933'/%3E%3Ccircle cx='8' cy='7' r='1.6' fill='%23FFFAF2'/%3E%3Ccircle cx='24' cy='7' r='2.2' fill='%23138808'/%3E%3C/svg%3E");

    --radius: 18px;
    --radius-sm: 12px;
    --wrap: 1200px;
    --gutter: 16px;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Poppins", "Inter", system-ui, sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #16131D;
    --bg-alt: #1D1926;
    --surface: #24202F;
    --surface-2: #2B2638;
    --ink: #F7EEE3;
    --ink-soft: #C9B8A6;
    --ink-faint: #94877A;
    --line: #3A3347;
    --link: #FFB366;
    --focus: #FFC27A;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -16px rgba(0, 0, 0, .7);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 56px -24px rgba(0, 0, 0, .8);
    --print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23FF9933' fill-opacity='.07'%3E%3Ccircle cx='14' cy='14' r='3'/%3E%3Cellipse cx='14' cy='6.5' rx='2.2' ry='3.6'/%3E%3Cellipse cx='14' cy='21.5' rx='2.2' ry='3.6'/%3E%3Cellipse cx='6.5' cy='14' rx='3.6' ry='2.2'/%3E%3Cellipse cx='21.5' cy='14' rx='3.6' ry='2.2'/%3E%3Ccircle cx='42' cy='42' r='1.6'/%3E%3Ccircle cx='42' cy='35' r='1.1'/%3E%3Ccircle cx='42' cy='49' r='1.1'/%3E%3Ccircle cx='35' cy='42' r='1.1'/%3E%3Ccircle cx='49' cy='42' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    --border-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14' viewBox='0 0 32 14'%3E%3Cpath d='M0 7h32' stroke='%23FF9933' stroke-opacity='.3' stroke-width='1'/%3E%3Cpath d='M8 1.5 13.5 7 8 12.5 2.5 7z' fill='%23FF9933'/%3E%3Ccircle cx='8' cy='7' r='1.6' fill='%2316131D'/%3E%3Ccircle cx='24' cy='7' r='2.2' fill='%2333B84A'/%3E%3C/svg%3E");
}

@media (min-width: 768px) { :root { --gutter: 24px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 140px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    transition: background-color .35s var(--ease), color .35s var(--ease);
}
@media (min-width: 768px) { body { padding-bottom: 0; } }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-xs { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; opacity: .7; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px;
    font-weight: 600; text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.eyebrow {
    font: 600 12px/1.2 var(--font-body);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--saffron-deep);
    display: block;
}
.eyebrow::before { content: ""; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--saffron), var(--green)); }
[data-theme="dark"] .eyebrow { color: #FFB366; }

/* ---------- top line ---------- */
.topline { background: var(--ink); color: #F3E6D6; font-size: 13px; }
[data-theme="dark"] .topline { background: #0F0D15; }
.topline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.topline-msg { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(19, 136, 8, .25); flex: none; }
.topline-sep { opacity: .5; }
.topline-links { display: flex; align-items: center; gap: 4px; flex: none; }
.topline-links a { color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.topline-links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.theme-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px; padding: 4px 10px 4px 6px; cursor: pointer; font-size: 12.5px; color: #F3E6D6;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); }
.theme-toggle .ico { width: 16px; height: 16px; }
.theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: block; color: #FFC24A; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (max-width: 519px) {
    .hide-sm, .topline-sep, .topline-usd { display: none; }
}

/* ---------- masthead ---------- */
.masthead {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.masthead-row {
    display: grid; align-items: center; gap: 10px 12px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "search search";
    padding-top: 12px; padding-bottom: 12px;
}
@media (min-width: 900px) {
    .masthead-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search actions"; gap: 28px; padding-top: 16px; padding-bottom: 10px; }
}

.wordmark { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; border-radius: 10px; }
.wordmark-mark { width: 34px; height: 34px; flex: none; transition: transform .6s var(--spring); }
.wordmark:hover .wordmark-mark { transform: rotate(60deg); }
.wordmark-text { font: 600 20px/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.wordmark-text b { font-weight: 700; color: var(--saffron-deep); }
.wordmark-text i { font-style: normal; font-weight: 600; color: var(--green); font-size: .78em; }
[data-theme="dark"] .wordmark-text b { color: var(--saffron); }
[data-theme="dark"] .wordmark-text i { color: #4CC764; }
@media (max-width: 379px) { .wordmark-text { font-size: 18px; } .wordmark-mark { width: 30px; height: 30px; } }

.search {
    grid-area: search; position: relative; display: flex; align-items: center;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 4px 4px 4px 44px; box-shadow: var(--shadow-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search:focus-within { border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(255, 153, 51, .2); }
.search-ico { position: absolute; left: 16px; color: var(--ink-faint); }
.search input {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
    font: 400 15px/1.2 var(--font-body); padding: 10px 6px; outline: none;
}
.search input::placeholder { color: var(--ink-faint); }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search-go {
    border: 0; cursor: pointer; border-radius: 999px; padding: 9px 18px;
    background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px;
}
.search-go:hover { background: var(--saffron-800); color: #fff; }
[data-theme="dark"] .search-go:hover { background: var(--saffron); color: #2A1A10; }
.search-go:focus-visible { outline-offset: 2px; }

.actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
.act {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
    font-weight: 600; font-size: 14.5px; padding: 10px; border-radius: 999px; min-height: 44px; min-width: 44px; justify-content: center;
}
.act:hover { background: var(--bg-alt); }
.act-label { display: none; }
.act-register { display: none; }
@media (min-width: 900px) {
    .act-label { display: inline; }
    .act { padding: 10px 14px; }
    .act-register { display: inline-flex; border: 1.5px solid var(--ink); padding: 8px 18px; min-height: 40px; }
    .act-register:hover { background: var(--ink); color: var(--bg); }
}

.mainnav { display: none; }
@media (min-width: 900px) {
    .mainnav { display: block; }
    .mainnav-row { display: flex; gap: 6px; padding-bottom: 10px; }
    .mainnav a {
        position: relative; display: inline-block; padding: 6px 12px; text-decoration: none;
        color: var(--ink-soft); font-weight: 500; font-size: 14.5px; border-radius: 8px;
    }
    .mainnav a::after {
        content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, var(--saffron), var(--green));
        transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
    }
    .mainnav a:hover { color: var(--ink); }
    .mainnav a:hover::after, .mainnav a:focus-visible::after { transform: scaleX(1); }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
    font: 600 16px/1 var(--font-body); border-radius: 999px; padding: 16px 26px; min-height: 52px;
    transition: transform .25s var(--spring), box-shadow .25s var(--ease), background-color .2s var(--ease);
}
.btn .ico { transition: transform .3s var(--spring); }
.btn:hover .ico { transform: translateX(4px); }
.btn-primary {
    background: var(--saffron); color: #2A1A10;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px -10px rgba(224, 123, 18, .8);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 30px -12px rgba(224, 123, 18, .9); background: #FFA54D; }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--saffron); }
.btn-ghost:hover .ico { transform: translate(2px, -2px); }

/* ---------- hero ---------- */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(120% 90% at 85% 40%, rgba(255, 153, 51, .22), transparent 60%),
        radial-gradient(60% 60% at 0% 100%, rgba(19, 136, 8, .08), transparent 70%),
        var(--print),
        var(--bg);
    --px: 0;
    --py: 0;
}
[data-theme="dark"] .hero {
    background:
        radial-gradient(120% 90% at 85% 40%, rgba(249, 115, 22, .2), transparent 60%),
        radial-gradient(60% 60% at 0% 100%, rgba(19, 136, 8, .12), transparent 70%),
        var(--print),
        var(--bg);
}
.hero-grid { display: grid; gap: 8px; align-items: center; padding-top: 28px; padding-bottom: 36px; }
@media (min-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; padding-top: 56px; padding-bottom: 64px; }
}
.hero-copy { position: relative; z-index: 1; }
.hero-title { font-size: clamp(34px, 8.6vw, 64px); margin-top: 16px; letter-spacing: -.025em; text-wrap: balance; }
.hero-accent {
    display: inline;
    background: linear-gradient(90deg, var(--hero-b) 0%, var(--saffron-deep) 55%, var(--green) 120%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .hero-accent { background-image: linear-gradient(90deg, #FFC27A 0%, var(--saffron) 55%, #5BD86A 120%); }
.hero-lede { margin-top: 18px; font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-soft); max-width: 34em; }
.hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.quiet-link {
    display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 500;
    text-decoration: none; padding: 8px 2px; border-radius: 8px;
}
.quiet-link:hover { color: var(--ink); text-decoration: underline; }
.quiet-link .ico { width: 16px; height: 16px; transition: transform .3s var(--spring); }
.quiet-link:hover .ico { transform: translateY(3px); }

.hero-art { position: relative; justify-self: center; width: min(100%, 520px); }
.dabba { width: 100%; height: auto; overflow: visible; }
@media (max-width: 899px) { .hero-art { width: min(86%, 400px); margin-top: 8px; } }

/* the dabba's opening: lid slides off, katoris settle in */
.lid { transform-box: view-box; transform-origin: 240px 220px; }
.katori { transform-box: fill-box; transform-origin: center; }
.spill { transform-box: fill-box; transform-origin: center; }
.motion .lid { animation: lid-off 1.3s .35s var(--ease) both; }
.motion .katori { animation: katori-in .7s var(--spring) both; }
.motion .k1 { animation-delay: .75s; }
.motion .k2 { animation-delay: .82s; }
.motion .k3 { animation-delay: .89s; }
.motion .k4 { animation-delay: .96s; }
.motion .k5 { animation-delay: 1.03s; }
.motion .k6 { animation-delay: 1.1s; }
.motion .k7 { animation-delay: 1.2s; }
.motion .spill { animation: spill-in .9s 1.3s var(--spring) both; }
.motion .spill-b { animation-delay: 1.4s; }
.motion .spill-c { animation-delay: 1.5s; }
.motion .spill-d { animation-delay: 1.6s; }
.motion .spill-a { translate: calc(var(--px) * -18px) calc(var(--py) * -14px); }
.motion .spill-b { translate: calc(var(--px) * 22px) calc(var(--py) * 18px); }
.motion .spill-c { translate: calc(var(--px) * 26px) calc(var(--py) * -20px); }
.motion .spill-d { translate: calc(var(--px) * -24px) calc(var(--py) * 16px); }
.spill { transition: translate .5s var(--ease); }
@keyframes lid-off {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(300px, -160px) rotate(35deg); opacity: 0; }
}
@keyframes katori-in {
    0% { transform: scale(.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes spill-in {
    0% { transform: scale(.4) rotate(-30deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.lid { pointer-events: none; }
html:not(.motion) .lid { opacity: 0; }

.border-print { height: 14px; background: var(--border-print) repeat-x center / 32px 14px; }

/* ---------- sections ---------- */
.section { padding: 56px 0; position: relative; }
@media (min-width: 900px) { .section { padding: 88px 0; } }
.section-head { margin-bottom: 28px; max-width: 40em; }
.section-head h2 { font-size: clamp(26px, 5vw, 40px); margin-top: 10px; text-wrap: balance; }
.section-lede { margin-top: 10px; color: var(--ink-soft); font-size: 16.5px; }
.section-head-row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.section-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.load-note { color: var(--ink-soft); margin-top: 8px; }
.load-note:empty { display: none; }
.noscript { padding: 16px; text-align: center; }

.motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- departments ---------- */
.dept-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .dept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1040px) { .dept-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dept-item { display: flex; }
/* lead aisles get a wider tile so the grid closes without an orphan row */
@media (min-width: 640px) and (max-width: 1039px) { .dept-item:first-child { grid-column: span 2; } }
@media (min-width: 1040px) { .dept-item:nth-child(-n+2) { grid-column: span 2; } }
@media (min-width: 640px) { .dept-item:first-child .dept-badge { width: 56px; height: 56px; } }
@media (min-width: 1040px) { .dept-item:nth-child(-n+2) .dept-badge { width: 60px; height: 60px; } .dept-item:nth-child(-n+2) .dept-name { font-size: 18px; } .dept-item:nth-child(-n+2) .dept-blurb { font-size: 14px; } }
.dept {
    --tone: #C2570C;
    --tone-ink: var(--tone);
    position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px;
    padding: 16px 14px 16px; text-decoration: none; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate;
    transition: transform .35s var(--spring), box-shadow .35s var(--ease), border-color .3s var(--ease);
}
[data-theme="dark"] .dept { --tone-ink: color-mix(in srgb, var(--tone) 55%, #fff); }
.dept::before {
    content: ""; position: absolute; inset: auto -30% -60% auto; width: 140px; height: 140px; border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 12%, transparent); z-index: -1;
    transition: transform .6s var(--ease);
}
.dept:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
.dept:hover::before { transform: scale(1.6); }
.dept-badge {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    color: var(--tone-ink); background: color-mix(in srgb, var(--tone) 13%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);
    transition: transform .5s var(--spring);
}
.dept-badge .ico { width: 28px; height: 28px; }
.dept:hover .dept-badge { transform: rotate(-8deg) scale(1.06); }
.dept-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dept-name { font: 600 15.5px/1.25 var(--font-display); letter-spacing: -.01em; }
.dept-blurb { font-size: 13px; line-height: 1.4; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dept-arrow {
    position: absolute; top: 18px; right: 14px; width: 18px; height: 18px; color: var(--tone-ink);
    opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .3s var(--spring);
}
.dept:hover .dept-arrow, .dept:focus-visible .dept-arrow { opacity: 1; transform: none; }
@media (max-width: 639px) {
    .dept { gap: 10px; padding: 14px 12px; }
    .dept-badge { width: 42px; height: 42px; border-radius: 12px; }
    .dept-badge .ico { width: 24px; height: 24px; }
    .dept-blurb { display: none; }
    .dept-name { font-size: 14.5px; }
}
@media (min-width: 640px) {
    .dept { flex-direction: row; align-items: center; padding: 18px 40px 18px 16px; min-height: 92px; }
    .dept-arrow { top: auto; }
}
.motion .depts.is-in .dept { animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
.motion .shelf.is-in .pcard { animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
.motion .occasions.is-in .coll { animation: rise .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }

/* ---------- product shelf ---------- */
.shelf { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.head-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-link {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
    border: 1.5px solid var(--line); background: var(--surface); padding: 10px 16px; border-radius: 999px;
    font-weight: 600; font-size: 14.5px; transition: border-color .2s var(--ease), transform .25s var(--spring);
}
.pill-link .ico { width: 18px; height: 18px; }
.pill-link:hover { border-color: var(--saffron); transform: translateY(-2px); }
.pill-link-strong { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill-link-strong:hover { border-color: var(--ink); }

.pgrid {
    display: grid; gap: 14px;
    grid-auto-flow: column; grid-auto-columns: minmax(208px, 62%);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 8px var(--gutter) 22px; margin: 0 calc(var(--gutter) * -1);
    scroll-padding-left: var(--gutter);
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.pcard-item { scroll-snap-align: start; display: flex; }
@media (min-width: 640px) {
    .pgrid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 8px 0 0; margin: 0; gap: 20px; }
}
@media (min-width: 1040px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.pcard {
    --tone: #C2570C;
    flex: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid var(--line); overflow: hidden; position: relative;
    transition: transform .4s var(--spring), box-shadow .35s var(--ease);
}
.pcard:hover { transform: translateY(-6px) rotate(var(--tilt, 0deg)); box-shadow: var(--shadow-lg); }
.pcard-art {
    position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden;
    color: #FFF6EA; padding: 14px;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .22), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23fff' fill-opacity='.1'%3E%3Ccircle cx='10' cy='10' r='2.4'/%3E%3Cellipse cx='10' cy='4.5' rx='1.6' ry='2.6'/%3E%3Cellipse cx='10' cy='15.5' rx='1.6' ry='2.6'/%3E%3Cellipse cx='4.5' cy='10' rx='2.6' ry='1.6'/%3E%3Cellipse cx='15.5' cy='10' rx='2.6' ry='1.6'/%3E%3Ccircle cx='30' cy='30' r='1.4'/%3E%3C/g%3E%3C/svg%3E"),
        var(--tone);
}
.pcard-art::after {
    content: ""; position: absolute; inset: 8px; border-radius: 10px;
    border: 1px dashed rgba(255, 246, 234, .45); pointer-events: none;
}
.pcard-watermark {
    position: absolute; right: -14px; bottom: -18px; width: 58%; height: auto; aspect-ratio: 1;
    color: rgba(255, 246, 234, .2); transition: transform .8s var(--ease);
}
.pcard:hover .pcard-watermark { transform: rotate(-10deg) scale(1.08); }
.pcard-dept {
    position: relative; display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(0, 0, 0, .18); padding: 5px 9px; border-radius: 999px; margin: 4px 0 0 4px;
}
.pcard-brand {
    position: absolute; left: 22px; right: 22px; bottom: 22px;
    font: 700 clamp(26px, 3.4vw, 34px)/1 var(--font-display); letter-spacing: -.03em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-size {
    position: absolute; right: 18px; top: 16px;
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
    font: 700 11.5px/1.05 var(--font-body); text-align: center; padding: 4px;
    color: var(--tone); background: #FFF6EA; transform: rotate(10deg);
    box-shadow: 0 0 0 3px rgba(255, 246, 234, .35);
    transition: transform .5s var(--spring);
}
.pcard:hover .pcard-size { transform: rotate(-6deg) scale(1.06); }
.pcard-hole { display: none; }
.pcard-perf {
    display: block; height: 0; border-top: 2px dashed var(--line); margin: 0 14px; position: relative;
}
.pcard-perf::before, .pcard-perf::after {
    content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--bg-alt); border: 1px solid var(--line);
}
.pcard-perf::before { left: -23px; }
.pcard-perf::after { right: -23px; }
.pcard-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.pcard-name {
    font-weight: 500; font-size: 14.5px; line-height: 1.38; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.76em;
}
.pcard-price { display: flex; align-items: baseline; margin-top: auto; }
.pcard-price-main { font: 700 26px/1 var(--font-display); letter-spacing: -.02em; }
.pcard-price-cents { font: 700 15px/1 var(--font-display); }
.pcard-cur {
    margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; align-self: center;
}
.pcard-cta {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
    color: var(--link);
}
.pcard-cta .ico { width: 16px; height: 16px; transition: transform .3s var(--spring); }
.pcard:hover .pcard-cta .ico { transform: translateX(4px); }

/* ---------- occasions band ---------- */
.occasions {
    color: #FFF2E3;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFC27A' stroke-opacity='.08' stroke-width='1.2'%3E%3Ccircle cx='36' cy='36' r='14'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3Cpath d='M36 14v-8M36 66v-8M14 36H6M66 36h-8'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 58%, #b4460f 100%);
    overflow: hidden;
}
[data-theme="dark"] .occasions { background-color: #1a0b03; }
.occasions-glow {
    position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(249, 115, 22, .45), transparent);
    pointer-events: none;
}
.occasions .wrap { position: relative; }
.section-head-light .eyebrow { color: #FFC27A; }
.section-head-light .section-lede { color: #F1D6BC; }
.sub-head { font: 600 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #F1D6BC; margin: 8px 0 14px; }
.coll-grid { display: grid; gap: 14px; margin-bottom: 40px; }
@media (min-width: 720px) { .coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.coll {
    height: 100%; display: flex; flex-direction: column; text-decoration: none; color: #FFF2E3;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 210, 160, .2); border-radius: var(--radius);
    overflow: hidden; transition: transform .4s var(--spring), background-color .3s var(--ease), border-color .3s var(--ease);
}
.coll:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 194, 122, .55); }
.coll-art {
    display: block; padding: 22px 22px 6px;
    background: radial-gradient(80% 90% at 50% 100%, rgba(255, 153, 51, .25), transparent 70%);
}
@media (max-width: 719px) {
    .coll { flex-direction: row; align-items: stretch; }
    .coll-art { flex: 0 0 38%; display: grid; place-items: center; padding: 12px 6px 12px 12px; }
    .coll-text { padding: 16px 16px 16px 10px; }
    .coll-name { font-size: 18px; }
    .coll-blurb { font-size: 13px; }
}
.coll-svg { width: 100%; height: auto; aspect-ratio: 200 / 120; transition: transform .7s var(--spring); }
.coll:hover .coll-svg { transform: scale(1.05) rotate(-1.5deg); }
.coll-text { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 20px; flex: 1; }
.coll-name { font: 700 21px/1.2 var(--font-display); }
.coll-blurb { font-size: 14px; color: #F1D6BC; }
.coll-cta { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: #FFC27A; }
.coll-cta .ico { width: 16px; height: 16px; transition: transform .3s var(--spring); }
.coll:hover .coll-cta .ico { transform: translateX(4px); }
.coll:focus-visible, .chip:focus-visible { outline-color: #FFC27A; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #FFF2E3;
    padding: 10px 16px 10px 12px; border-radius: 999px; min-height: 44px;
    background: var(--chip-bg); border: 1px solid rgba(255, 210, 160, .25);
    font-weight: 500; font-size: 14.5px;
    transition: background-color .2s var(--ease), transform .3s var(--spring), border-color .2s var(--ease);
}
.chip .ico { width: 20px; height: 20px; color: #FFC27A; transition: transform .5s var(--spring); }
.chip:hover { background: rgba(255, 194, 122, .18); border-color: rgba(255, 194, 122, .6); transform: translateY(-2px); }
.chip:hover .ico { transform: rotate(25deg) scale(1.12); }

/* ---------- trust ---------- */
.trust-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.trust-item {
    position: relative; padding: 22px 20px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 8px;
}
.trust-badge {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
    color: var(--saffron-800); background: radial-gradient(circle at 35% 30%, #FFE3C2, #FFC88A);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--saffron) 12%, transparent);
}
[data-theme="dark"] .trust-badge { color: #2A1A10; }
.trust-badge .ico { width: 28px; height: 28px; }
.trust-title { font-size: 17px; }
.trust-text { color: var(--ink); font-size: 15px; }
.trust-more { color: var(--ink-soft); font-size: 14px; }
.trust-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-top: 4px; text-decoration: none; }
.trust-link:hover { text-decoration: underline; }
.trust-link .ico { width: 16px; height: 16px; }

/* ---------- one-account note ---------- */
.network { padding-top: 0; }
.network-card {
    display: grid; gap: 18px; align-items: center; padding: 24px; border-radius: calc(var(--radius) + 6px);
    background: var(--surface-2); border: 1px solid var(--line);
}
@media (min-width: 760px) { .network-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; padding: 28px 32px; } }
.network-art { width: 150px; height: 70px; color: var(--ink); }
.network-copy h2 { font-size: 22px; }
.network-copy p { margin-top: 6px; color: var(--ink-soft); }
.network-copy strong { color: var(--ink); font-weight: 600; }
.network-card .btn { justify-self: start; padding: 13px 20px; min-height: 46px; font-size: 15px; }

/* ---------- footer ---------- */
.footer { background: var(--bg-alt); border-top: 1px solid var(--line); margin-top: 24px; }
.border-print-top { margin-top: -8px; }
.footer-grid { display: grid; gap: 36px; padding-top: 44px; padding-bottom: 32px; }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; } }
.footer-brand p { margin-top: 14px; color: var(--ink-soft); font-size: 14.5px; max-width: 30em; }
.footer-cols { display: grid; gap: 28px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fcol-depts { grid-column: 1 / -1; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.fcol-title { font: 600 12.5px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.fcol ul { display: grid; gap: 2px; }
.fcol-depts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
@media (min-width: 720px) { .fcol-depts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fcol a { display: inline-block; padding: 5px 0; color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.fcol a:hover { color: var(--ink); text-decoration: underline; }
.footer-base {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
    padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 13px;
}

/* ---------- phone bottom bar ---------- */
.bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .4);
}
.bottombar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; min-height: 52px;
    text-decoration: none; color: var(--ink-soft); font-size: 11px; font-weight: 600; border-radius: 12px;
}
.bottombar a:hover, .bottombar a:active { color: var(--saffron-deep); background: var(--bg-alt); }
.bottombar .ico { width: 22px; height: 22px; }
@media (min-width: 768px) { .bottombar { display: none; } }

/* ---------- shared keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .lid { opacity: 0; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* Combined version C: additions on top of version B's home.css (uses its tokens). */

/* ---------- department strip (from version A) ---------- */
.aisle-strip { border-top: 1px solid var(--line); }
.aisle-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-bottom: 6px; }
.aisle-row::-webkit-scrollbar { display: none; }
.aisle-row a { flex: none; text-decoration: none; font-size: 14px; padding: 5px 12px; border-radius: 999px; color: var(--ink-soft); white-space: nowrap; transition: background .2s, color .2s; }
.aisle-row a:hover, .aisle-row a:focus-visible { background: var(--bg-alt); color: var(--ink); }
.aisle-row .as-all { font-weight: 700; color: var(--ink); }
.aisle-row .as-deals { font-weight: 700; color: var(--saffron-deep); }
.aisle-row .as-plus { font-weight: 700; color: #1a1206; background: linear-gradient(120deg, #f6d27a, #e0a93b); }
.aisle-row .as-plus:hover, .aisle-row .as-plus:focus-visible { background: linear-gradient(120deg, #ffe09a, #f0b94b); color: #1a1206; }
[data-theme="dark"] .aisle-row .as-deals { color: #ffb366; }

/* ---------- three pillars ---------- */
.pillars { background: var(--bg-alt); border-block: 1px solid var(--line); padding: 26px 0; }
.pillar-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 34px; list-style: none; padding-block: 0; margin-block: 0; }
.pillar { display: flex; gap: 14px; align-items: flex-start; }
.pillar-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #2a1a10; background: linear-gradient(135deg, #ffc27a, var(--saffron)); box-shadow: var(--shadow-sm); }
.pillar-ico .ico { width: 24px; height: 24px; }
.pillar b { display: block; font-family: var(--font-display); font-size: 16.5px; margin-bottom: 2px; }
.pillar p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }

/* ---------- department explorer + wheel ---------- */
.explore { display: grid; gap: 28px; align-items: center; margin-bottom: 34px; }
.explore-head { margin-bottom: 0; }
.explore-now { margin-top: 22px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-height: 178px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.explore-name { margin: 0; font: 700 clamp(22px, 3vw, 28px)/1.15 var(--font-display); }
.explore-blurb { margin: 0 0 auto; color: var(--ink-soft); font-size: 15px; min-height: 2.9em; }
.explore-now .btn { margin-top: 10px; }
.wheel-box { width: min(100%, 460px); justify-self: center; }
.wheel { width: 100%; height: auto; display: block; overflow: visible; }
.wheel .ring circle { fill: none; stroke: var(--saffron-deep); stroke-width: 1.2; opacity: .55; }
.wheel .ring .dots { stroke-width: 3.2; stroke-dasharray: .1 9.8; stroke-linecap: round; opacity: .85; }
.wheel .ring-a { animation: wheel-spin 90s linear infinite; transform-origin: 0 0; }
.wheel .ring-b { animation: wheel-spin 140s linear infinite reverse; transform-origin: 0 0; }
.wheel .ring-b path { fill: var(--green); opacity: .8; }
@keyframes wheel-spin { to { transform: rotate(360deg); } }
.petal { --tone: var(--saffron); color: #fff; cursor: pointer; }
.petal path { fill: var(--tone); stroke: var(--bg); stroke-width: 2.5; transform-origin: 0 0; transition: transform .35s var(--spring), filter .3s; }
.petal .petal-ico { pointer-events: none; }
.petal.is-on path, .petal:hover path, .petal:focus-visible path { transform: scale(1.1); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)) brightness(1.12); }
.petal:focus-visible { outline: none; }
.petal:focus-visible path { stroke: var(--focus); stroke-width: 4; }
.wheel .hub-disc { fill: var(--surface); }
.wheel .hub-ring { fill: none; stroke: var(--saffron); stroke-width: 2; stroke-dasharray: 3 5; }
@media (min-width: 900px) { .explore { grid-template-columns: 1fr minmax(360px, 460px); gap: 48px; } }

/* ---------- membership ---------- */
.plus { background: radial-gradient(900px 480px at 85% 30%, rgba(224, 169, 59, .2), transparent 70%), var(--bg-alt); border-block: 1px solid var(--line); }
.plus-grid { display: grid; gap: 36px; align-items: center; }
.plus .section-lede { max-width: 34em; }
.plus-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 26px; }
.plus-list li { position: relative; padding-left: 30px; }
.plus-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #f6d27a, #c98a1a); box-shadow: inset 0 0 0 4px var(--bg-alt), 0 0 0 1.5px #c98a1a; }
.plus-list b { display: block; font-family: var(--font-display); font-size: 15.5px; }
.plus-list span { color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.plus-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.plus-note { color: var(--ink-soft); font-size: 14px; }
.plus-art { display: grid; place-items: center; perspective: 900px; }
.mcard { position: relative; width: min(100%, 380px); aspect-ratio: 1.586; border-radius: 22px; padding: 24px; overflow: hidden; color: #fff3d6;
  background: radial-gradient(120% 90% at 0% 0%, #6b2a08 0%, transparent 60%), linear-gradient(135deg, #2a1206 0%, #4a1d08 45%, #14213d 100%);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(246, 210, 122, .55); transform: rotateY(-14deg) rotateX(8deg) rotate(-3deg); transition: transform .6s var(--spring); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 10px; }
.plus-art:hover .mcard { transform: rotateY(0) rotateX(0) rotate(0) scale(1.03); }
.mcard-mark { width: 34px; height: 34px; }
.mcard-brand { font: 600 17px var(--font-display); align-self: center; letter-spacing: .01em; }
.mcard-plus { grid-column: 1 / -1; align-self: center; font: 700 clamp(44px, 9vw, 64px)/1 var(--font-display); letter-spacing: .14em; background: linear-gradient(100deg, #f6d27a 10%, #fff3c4 40%, #d99a2b 70%, #f6d27a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mcard-line { grid-column: 1 / -1; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.mcard-rangoli { position: absolute; right: -34px; bottom: -34px; width: 170px; height: 170px; color: rgba(246, 210, 122, .22); animation: wheel-spin 60s linear infinite; }
.mcard-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); transform: translateX(-120%); animation: shine 5.5s ease-in-out infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (min-width: 900px) { .plus-grid { grid-template-columns: 1.25fr .9fr; gap: 56px; } }

/* ---------- franchise ---------- */
.fr-grid { display: grid; gap: 34px; align-items: center; }
.franchise .btn { margin-top: 22px; }
.fr-art { position: relative; width: min(100%, 420px); aspect-ratio: 1.5; justify-self: center; border-radius: var(--radius); background-image: var(--print); background-color: var(--surface-2); border: 1px solid var(--line); }
.fr-hub, .fr-store { position: absolute; display: grid; place-items: center; border-radius: 50%; translate: -50% -50%; }
.fr-hub { left: 50%; top: 52%; width: 86px; height: 86px; background: var(--surface); box-shadow: 0 0 0 2px var(--saffron), 0 0 0 10px color-mix(in srgb, var(--saffron) 22%, transparent), var(--shadow); }
.fr-hub .ico { width: 46px; height: 46px; }
.fr-store { width: 52px; height: 52px; background: var(--green); color: #fff; box-shadow: var(--shadow); animation: fr-bob 4s ease-in-out infinite; }
.fr-store .ico { width: 26px; height: 26px; }
.fr-s1 { left: 16%; top: 26%; } .fr-s2 { left: 84%; top: 30%; animation-delay: -1.3s; } .fr-s3 { left: 66%; top: 84%; animation-delay: -2.6s; }
@keyframes fr-bob { 50% { transform: translateY(-7px); } }
.fr-link { position: absolute; left: 50%; top: 52%; height: 2px; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, var(--saffron) 0 7px, transparent 7px 14px); opacity: .8; }
.fr-l1 { width: 38%; transform: rotate(-142deg); } .fr-l2 { width: 37%; transform: rotate(-33deg); } .fr-l3 { width: 26%; transform: rotate(63deg); }
@media (min-width: 900px) { .fr-grid { grid-template-columns: .9fr 1.2fr; gap: 56px; } }

@media (prefers-reduced-motion: reduce) {
  .wheel .ring-a, .wheel .ring-b, .mcard-rangoli, .mcard-shine, .fr-store { animation: none; }
  .mcard { transform: none; }
}

.plus h2, .franchise h2 { font-size: clamp(26px, 5vw, 40px); margin-top: 10px; text-wrap: balance; }
.plus .section-lede, .franchise .section-lede { margin-top: 12px; }

/* QA fixes */
.aisle-strip { position: relative; }
.aisle-strip::after { content: ""; position: absolute; top: 1px; right: 0; bottom: 0; width: 56px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg) 85%); }
.aisle-row { padding-right: 56px; }
[data-theme="light"] .aisle-row .as-deals, [data-theme="light"] .eyebrow { color: var(--link); }
[data-theme="light"] .section-head-light .eyebrow { color: #FFC27A; }

/* =========================================================================
   Production wiring (session state, network menu, cart badge, member hero)
   ========================================================================= */

/* ---------- skip link: /css/skip-link.css owns its position and stacking ---------- */
.skip-link:not(:focus) {
    width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- session gating ----------
   Guest-first by design: the default render is the guest view. The signed-in
   chrome ships in the HTML for everyone and is revealed when the home script
   adds `is-authenticated` to <body> after /auth/me answers. Only ever force
   display:none here, so each element keeps its own layout when shown. */
body:not(.is-authenticated) [data-auth-show="authenticated"] { display: none !important; }
body.is-authenticated [data-auth-show="guest"] { display: none !important; }
[hidden] { display: none !important; }

/* ---------- network menu trigger, kept quiet in the top line ---------- */
:root {
    --otrotl-trigger-accent: #f97316;
    --otrotl-trigger-accent-soft: rgba(249, 115, 22, 0.12);
    --otrotl-trigger-accent-ring: rgba(249, 115, 22, 0.35);
}
body[data-network-overlay-enabled="false"] #otrotl-network-btn,
body[data-network-overlay-enabled="false"] #network-overlay-status,
body[data-network-overlay-enabled="false"] #network-overlay-retry,
body:not([data-network-overlay-enabled]) #otrotl-network-btn { display: none !important; }
.topline-network { display: flex; align-items: center; gap: 6px; }
.topline .otrotl-network-trigger {
    position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; min-width: 30px; min-height: 30px;
    padding: 0; margin: 0; border-radius: 50%; cursor: pointer; box-shadow: none;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #F3E6D6;
}
.topline .otrotl-network-trigger:hover { background: rgba(255, 255, 255, .14); }
.topline .otrotl-network-trigger .ico { width: 16px; height: 16px; }
.topline .otrotl-network-trigger__icon { display: grid; place-items: center; background: none; color: inherit; width: auto; height: auto; }
.topline-network-status { font-size: 12px; color: #F3E6D6; max-width: 16em; }
.topline-network-retry {
    background: none; border: 1px solid var(--saffron); color: #FFC27A; border-radius: 999px;
    padding: 3px 10px; font-size: 12.5px; cursor: pointer;
}

/* ---------- account actions and cart badge ---------- */
.act-cart { position: relative; }
.cart-badge {
    position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
    display: grid; place-items: center; background: var(--saffron); color: #2A1A10; font-size: 11px; font-weight: 700; line-height: 1;
}
.act-avatar {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, #ffc27a, var(--saffron)); color: #2A1A10; font-size: 12px; font-weight: 700;
}

/* ---------- signed-in hero ---------- */
.hero-member .hero-grid { align-items: center; }
.member-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: relative; z-index: 1; }
.member-tile {
    display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), border-color .25s;
}
.member-tile:hover, .member-tile:focus-visible { transform: translateY(-3px); border-color: var(--saffron); }
.member-tile-ico {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; margin-bottom: 4px;
    color: #2A1A10; background: linear-gradient(135deg, #ffc27a, var(--saffron));
}
.member-tile b { font-family: var(--font-display); font-size: 16.5px; }
.member-tile span { color: var(--ink-soft); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .member-tile { transition: none; } }

/* ---------- shelf states ---------- */
.shelf-empty { padding: 28px 22px; border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--line); text-align: center; }
.shelf-empty h3 { font-size: 18px; margin-bottom: 8px; }

/* ---------- footer base links ---------- */
.footer-base a { color: inherit; }