/* ============================================================
   Kernova — Design System  |  "Fuel Your Best"
   Premium dry fruits / artisanal nuts
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- Reset & Custom Properties ---------- */
:root {
    /* Kernova Palette */
    --cream:       #FAF7F2;
    --cream-dark:  #F0EAE0;
    --brown:       #6B3A2A;
    --brown-dark:  #3D1F10;
    --brown-mid:   #8B4C35;
    --gold:        #C4862A;
    --gold-light:  #F5E6C8;
    --ink:         #1C1A17;
    --ink-light:   #4A4540;
    --muted:       #8A8078;
    --green:       #2D6A4F;
    --green-light: #D1F0E0;
    --line:        #E5DDD5;
    --white:       #FFFFFF;
    --dark-bg:     #1C1A17;

    /* Semantic aliases (keep for backward compat) */
    --leaf:        var(--green);
    --leaf-dark:   #1b5935;
    --leaf-light:  #3d9467;
    --mint:        var(--green-light);
    --mint-dark:   #b0ddc8;
    --saffron:     var(--gold);
    --saffron-light: var(--gold-light);
    --off-white:   var(--cream);
    --paper:       var(--cream);
    --danger:      #c0392b;
    --success:     #27ae60;
    --warning:     #f39c12;

    --radius:      10px;
    --radius-sm:   6px;
    --radius-lg:   16px;
    --radius-full: 999px;

    --shadow-sm:   0 2px 8px rgba(61,31,16,0.07);
    --shadow:      0 6px 24px rgba(61,31,16,0.10);
    --shadow-lg:   0 16px 48px rgba(61,31,16,0.14);

    font-family: 'Inter', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { margin-top: 0; }
h1, h2, h3, h4 { margin-top: 0; line-height: 1.18; font-family: 'Playfair Display', Georgia, serif; }

button, input, select, textarea { font: inherit; }

/* ---------- Promo Strip ---------- */
.promo-strip {
    background: var(--brown-dark);
    color: var(--cream);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    padding: 0.55rem 0;
}

.promo-track {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 35s linear infinite;
}

.promo-track:hover { animation-play-state: paused; }

.promo-sep {
    color: var(--gold);
    font-size: 0.6rem;
    flex-shrink: 0;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.3s ease;
}

.site-header.scrolled { box-shadow: 0 4px 24px rgba(61,31,16,0.12); }

.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem clamp(0.75rem, 3vw, 2rem);
    max-width: 1280px;
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.35rem;
    flex-shrink: 0;
    color: var(--brown-dark);
    letter-spacing: -0.01em;
}

.brand-logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: var(--brown);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-family: 'Inter', sans-serif;
}

/* Search (keep for backward compat but de-emphasize) */
.header-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-full);
    transition: border-color 0.2s, box-shadow 0.2s;
    max-width: 360px;
}

.header-search:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(196,134,42,0.12);
}

.header-search svg { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; }

.header-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    min-height: unset;
    padding: 0;
    border-radius: 0;
    color: var(--ink);
    font-size: 0.88rem;
}

/* Desktop Nav — center */
.main-nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: center;
}

.nav-drawer {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Desktop: mobile-only drawer sections are hidden */
.nav-drawer-head,
.nav-drawer-foot,
.nav-drawer-account { display: none; }

/* Desktop: the scroll wrapper collapses so links behave as a normal flex row */
.nav-drawer-scroll { display: contents; }

/* Desktop: links wrapper is a transparent flex row */
.nav-drawer-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: center;
}

/* Desktop: hide icons inside nav links */
.nav-drawer-links a svg,
.nav-drawer-links a i { display: none; }

.main-nav a,
.nav-drawer a {
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink-light);
    transition: color 0.15s;
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.02em;
}

/* Nav underline slide effect */
.main-nav a::after,
.nav-drawer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0.9rem;
    right: 0.9rem;
    height: 2px;
    background: var(--brown);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1);
}

.main-nav a:hover,
.nav-drawer a:hover { color: var(--brown); }

.main-nav a:hover::after,
.nav-drawer a:hover::after { transform: scaleX(1); }

.main-nav a.is-active,
.nav-drawer a.is-active {
    color: var(--brown);
    border-bottom: 2px solid var(--brown);
}

.main-nav a.is-active::after,
.nav-drawer a.is-active::after { display: none; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---- Account dropdown (Profile / Orders / Address / Wishlist / Logout) ---- */
.account-wrap { position: relative; display: inline-flex; }

.account-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: 250px;
    max-width: calc(100vw - 1.5rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(61,31,16,0.18);
    padding: 0.4rem;
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.account-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }

.account-menu-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem 0.7rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--cream-dark);
}
.account-menu-name { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.2; }
.account-menu-sub  { font-size: 0.8rem; color: var(--muted); font-family: 'Inter', sans-serif; }

.account-menu a,
.account-menu button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 0;
    background: none;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.14s, color 0.14s;
}
.account-menu a svg,
.account-menu button svg { width: 1.05rem; height: 1.05rem; color: var(--muted); flex-shrink: 0; }
.account-menu a:hover { background: var(--gold-light); color: var(--brown-dark); }
.account-menu a:hover svg { color: var(--brown); }

.account-menu-logout { margin-top: 0.2rem; border-top: 1px solid var(--cream-dark); border-radius: 0 0 9px 9px; color: #b23b3b; }
.account-menu-logout svg { color: #b23b3b !important; }
.account-menu-logout:hover { background: #fdecec; color: #952f2f; }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    position: relative;
}

.icon-button svg { width: 1rem; height: 1rem; }

.icon-button:hover {
    border-color: var(--brown);
    background: var(--gold-light);
    color: var(--brown);
}

.cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 2.4rem;
    border: 1.5px solid var(--brown);
    border-radius: var(--radius-sm);
    background: var(--brown);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}

.cart-button svg { width: 1rem; height: 1rem; }
.cart-button:hover { background: var(--brown-dark); border-color: var(--brown-dark); color: #fff; }

[data-cart-count] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    background: var(--gold);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
}

.cart-button [data-cart-count] {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
}

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 2.4rem;
    height: 2.4rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sticky cart FAB */
.sticky-cart {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-full);
    background: var(--brown);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s, background 0.2s;
}

.sticky-cart:hover { transform: scale(1.08); background: var(--brown-dark); color: #fff; }
.sticky-cart svg { width: 1.3rem; height: 1.3rem; }

.sticky-cart [data-cart-count] {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
}

.wishlist-dot {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wishlist-dot svg { width: 0.95rem; height: 0.95rem; }
.wishlist-dot:hover, .wishlist-dot.is-active { background: #fff0f0; color: #c0392b; border-color: #c0392b; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(0.95); }
.btn svg { width: 0.95rem; height: 0.95rem; }

.btn-primary { background: var(--brown); color: #fff; border-color: var(--brown); }
.btn-primary:hover { background: var(--brown-dark); border-color: var(--brown-dark); color: #fff; }

.btn-outline { background: transparent; color: var(--brown); border-color: var(--brown); }
.btn-outline:hover { background: var(--gold-light); color: var(--brown-dark); }

.btn-ghost { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost:hover { background: rgba(255,255,255,0.25); color: #fff; }

.btn-light { background: #fff; color: var(--brown-dark); border-color: #fff; }
.btn-light:hover { background: var(--gold-light); color: var(--brown-dark); }

.btn-dark { background: var(--dark-bg); color: #fff; border-color: var(--dark-bg); }
.btn-dark:hover { background: #000; color: #fff; border-color: #000; }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

.btn-full { width: 100%; }
.btn-small { min-height: 2rem; padding: 0.3rem 0.75rem; font-size: 0.72rem; }
.btn-icon { width: 2.5rem; height: 2.5rem; min-height: unset; padding: 0; }
.is-disabled { pointer-events: none; opacity: 0.5; }

/* Button ripple */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: scale(0);
    animation: ripple-expand 0.55s linear;
    pointer-events: none;
}

@keyframes ripple-expand { to { transform: scale(4); opacity: 0; } }

/* ---------- Typography helpers ---------- */
.eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.75rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.5rem; font-family: 'Playfair Display', Georgia, serif; }

.text-gold { color: var(--gold); }
.text-brown { color: var(--brown); }
.text-muted { color: var(--muted); }

/* ---------- Sections ---------- */
.section {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
    max-width: 1280px;
    margin: 0 auto;
}

.section-tight { padding-top: 1.5rem; }

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
}

.section-heading > div { max-width: 500px; }
.section-heading p { margin-bottom: 0.25rem; }
.section-heading h2 { margin-bottom: 0; }
.section-heading a {
    color: var(--brown);
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.15s;
    font-family: 'Inter', sans-serif;
}
.section-heading a:hover { border-bottom-color: var(--brown); }

/* ---------- Hero ---------- */
.hero {
    margin-top:-25px;
    position: relative;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background: #241109;       /* brand-dark fallback while images load */
    font-size: 0;              /* removes any inline-image whitespace under the stage */
}

/* 16:9 image stage — padding-top gives a bulletproof aspect ratio on every browser */
.hero-slides {
    position: relative;
    width: 100%;
    padding-top: 56.25%;       /* 16:9 → matches the 1920×1080 slide uploads */
    overflow: hidden;
    background: #241109;
}
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 16:9 image in a 16:9 box = the FULL image, no cropping */
    object-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
    will-change: opacity;
}
/* The incoming/active slide sits above the outgoing one so the crossfade is
   clean with no flash of the dark background. */
.hero-slide-img.is-active { opacity: 1; z-index: 2; }

.hero-content {
    position: absolute;        /* overlay on the image (desktop) */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
    max-width: 760px;
    width: 100%;
    font-size: 1rem;           /* reset from .hero font-size:0 */
}

.hero-content .eyebrow {
    color: var(--gold);
    animation: heroRise 0.65s cubic-bezier(.22,1,.36,1) 0.1s both;
}

.hero-content h1 {
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 1.1rem;
    color: #fff;
    font-style: italic;
    animation: heroRise 0.7s cubic-bezier(.22,1,.36,1) 0.22s both;
}

.hero-content h1 em {
    font-style: italic;
    color: var(--gold);
}

.hero-content > p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    max-width: 520px;
    margin-bottom: 1.8rem;
    line-height: 1.7;
    animation: heroRise 0.7s cubic-bezier(.22,1,.36,1) 0.36s both;
    font-family: 'Inter', sans-serif;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    animation: heroRise 0.7s cubic-bezier(.22,1,.36,1) 0.5s both;
}

/* Hero carousel dots */
.hero-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    border: none;
    padding: 0;
}

.hero-dot.active {
    background: var(--gold);
    transform: scale(1.3);
}

/* ---------- Curated Collections ---------- */
.collections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}

.collection-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: var(--ink);
}

.collections-right {
    display: grid;
    gap: 1rem;
}

.collection-tile.featured {
    grid-row: 1 / 3;
    min-height: 460px;
}

.collection-tile:not(.featured) {
    min-height: 220px;
}

.collection-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
    transition: transform 0.45s ease, opacity 0.3s ease;
    min-height: inherit;
}

.collection-tile:hover img {
    transform: scale(1.06);
    opacity: 0.65;
}

.collection-tile-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background: linear-gradient(0deg, rgba(28,26,23,0.75) 0%, transparent 55%);
}

.collection-tile-label .eyebrow { font-size: 0.65rem; margin-bottom: 0.3rem; }
.collection-tile-label h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.25rem; }
.collection-tile-label p { color: rgba(255,255,255,0.72); font-size: 0.82rem; margin: 0; font-family: 'Inter', sans-serif; }

.collection-tile.featured .collection-tile-label h3 { font-size: 1.65rem; }

/* ---------- Heritage Banner ---------- */
.heritage-banner {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.heritage-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.heritage-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(28,26,23,0.5);
}

.heritage-banner-content {
    position: relative;
    z-index: 2;
    padding: 3rem 1rem;
    max-width: 700px;
}

.heritage-banner-content h2 { color: #fff; font-size: clamp(1.8rem,3.5vw,2.8rem); margin-bottom: 1rem; }
.heritage-banner-content p { color: rgba(255,255,255,0.82); margin-bottom: 1.5rem; font-family: 'Inter', sans-serif; }

/* ---------- Category Grid ---------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.category-tile {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--ink);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(61,31,16,0.08);
    transition: box-shadow 0.25s, transform 0.25s;
}

.category-tile:hover {
    box-shadow: 0 10px 32px rgba(61,31,16,0.18);
    transform: translateY(-3px);
}

.category-tile img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    opacity: 0.72;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.category-tile:hover img { transform: scale(1.08); opacity: 0.82; }

.category-tile-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.1rem;
    background: linear-gradient(0deg, rgba(28,26,23,0.75) 0%, transparent 55%);
}

.category-tile-label span {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
}

.category-tile-label small {
    color: rgba(255,255,255,0.72);
    font-size: 0.75rem;
    margin-top: 0.2rem;
    font-family: 'Inter', sans-serif;
}

/* ---------- Product Grid & Cards ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.product-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(61,31,16,0.05);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 12px 36px rgba(61,31,16,0.13);
    transform: translateY(-6px);
    border-color: var(--gold-light);
}

.product-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--cream-dark);
    overflow: hidden;
}

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-media img { transform: scale(1.05); }

.badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 1;
    padding: 0.22rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--green);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'Inter', sans-serif;
}

.badge.badge-new { background: var(--brown); }
.badge.badge-sale { background: var(--gold); color: var(--brown-dark); }
.badge.in-stock-badge { background: var(--green); color: #fff; }
.badge.badge-oos { background: #b23b3b; color: #fff; }

/* Disabled "Out of Stock" action button */
.btn-oos {
    background: var(--cream-dark) !important;
    color: var(--muted) !important;
    border: 1px solid var(--line) !important;
    cursor: not-allowed;
    opacity: 1;
}
.product-card.is-oos .product-media img { filter: grayscale(0.35) opacity(0.9); }

/* Stock badge in cards */
.stock-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Inter', sans-serif;
    background: var(--green);
    color: #fff;
}

.product-info {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.product-name {
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}

.product-card:hover .product-name { color: var(--brown); }

.product-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.price-current {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: -0.01em;
    font-family: 'Inter', sans-serif;
}

.price-mrp {
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: line-through;
    font-family: 'Inter', sans-serif;
}

.price-off {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--white);
    background: var(--green);
    padding: 0.18rem 0.45rem;
    border-radius: var(--radius-full);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

del { color: var(--muted); }

/* Product card Add-to-Cart button */
.product-card-atc {
    border-radius: var(--radius-sm);
    min-height: 2.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    margin-top: auto;
}

.product-card-atc:hover {
    background: var(--brown-dark);
    box-shadow: 0 4px 12px rgba(107,58,42,0.35);
    transform: translateY(-1px);
}

/* ---------- Feature Row ---------- */
.feature-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.feature-row-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.35rem clamp(1rem, 3vw, 1.75rem);
    border-right: 1px solid var(--line);
    transition: background 0.2s;
}

.feature-row-item:hover { background: var(--gold-light); }
.feature-row-item:last-child { border-right: 0; }

.feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--gold-light);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--brown);
    transition: background 0.2s, color 0.2s;
}

.feature-row-item:hover .feature-icon { background: var(--brown); color: #fff; }
.feature-icon svg { width: 1.2rem; height: 1.2rem; }

.feature-copy strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 0.12rem;
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
}

.feature-copy span {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.4;
    font-family: 'Inter', sans-serif;
}

/* ---------- Split Section (Heritage / Purity) ---------- */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.split-section img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    aspect-ratio: 4/3;
}

.split-copy { display: grid; gap: 1.1rem; }
.split-copy h2 { margin-bottom: 0.25rem; }
.split-copy p { color: var(--ink-light); line-height: 1.75; font-family: 'Inter', sans-serif; }

.check-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.92rem;
    color: var(--ink-light);
    font-family: 'Inter', sans-serif;
}

.check-list li::before {
    content: '';
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 0.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5L2.5 7.5l1-1 3 3 6-6 1 1z'/%3E%3C/svg%3E");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

/* ---------- Story Band ---------- */
.story-band {
    margin: 0 clamp(1rem, 4vw, 3rem);
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brown-dark) 0%, var(--brown) 60%, var(--brown-mid) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

.story-band::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    top: -120px;
    right: -60px;
    pointer-events: none;
}

.story-band .eyebrow { color: var(--gold); }

.story-band h2 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    line-height: 1.3;
    color: #fff;
}

/* ---------- Newsletter Section ---------- */
.newsletter-section {
    background: var(--brown-dark);
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
    text-align: center;
    position: relative;
    z-index: 1;
}

.newsletter-section .eyebrow { color: var(--gold); }
.newsletter-section h2 { color: var(--cream); font-size: clamp(1.6rem, 3.5vw, 2.5rem); margin-bottom: 0.75rem; }
.newsletter-section > p { color: rgba(250,247,242,0.72); margin-bottom: 2rem; font-family: 'Inter', sans-serif; }

.newsletter-form {
    display: flex;
    gap: 0.6rem;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.newsletter-form input {
    flex: 1;
    min-width: 220px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}

.newsletter-form input::placeholder { color: rgba(255,255,255,0.45); }

.newsletter-form input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(196,134,42,0.25);
    transform: scale(1.01);
}

/* ---------- Page Hero ---------- */
.page-hero {
    position: relative;
    min-height: 36vh;
    display: flex;
    align-items: flex-end;
    padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);
    background: linear-gradient(
        105deg,
        rgba(61,31,16,0.88),
        rgba(107,58,42,0.55)
    ), url('https://images.unsplash.com/photo-1615485925600-97237c4fc1ec?auto=format&fit=crop&w=1800&q=80') center/cover;
    color: #fff;
    overflow: hidden;
}

.page-hero.compact-hero { min-height: 22vh; }
.page-hero.about-hero {
    background: linear-gradient(105deg, rgba(28,26,23,0.9), rgba(107,58,42,0.45)),
        url('https://images.unsplash.com/photo-1607344645866-009c320c5ab8?auto=format&fit=crop&w=1800&q=80') center/cover;
}

.page-hero h1 { margin-bottom: 0.5rem; font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 560px; margin: 0; font-family: 'Inter', sans-serif; }

/* Shop page heading (no hero image — clean bg) */
.shop-page-heading {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) 0;
    max-width: 1280px;
    margin: 0 auto;
}

.shop-page-heading h1 { margin-bottom: 0.35rem; }
.shop-page-heading p { color: var(--muted); font-family: 'Inter', sans-serif; }

/* ---------- Forms (general) ---------- */
label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
}

input, select, textarea {
    width: 100%;
    min-height: 2.75rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    background: var(--white);
    color: var(--ink);
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: 'Inter', sans-serif;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(196,134,42,0.12);
}

textarea { min-height: 7rem; resize: vertical; }
form { display: grid; gap: 1rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.wide, .form-grid .col-full { grid-column: 1 / -1; }

.form-message, .alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    background: var(--green-light);
    color: var(--green);
    border-left: 3px solid var(--green);
    font-family: 'Inter', sans-serif;
}

.form-message.error, .alert-error {
    background: #fde8e8;
    color: var(--danger);
    border-color: var(--danger);
}

.form-message:empty, .checkout-message:empty { display: none; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    font-size: 0.8rem;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.breadcrumb a { color: var(--brown); }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Shop Layout ---------- */
.shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.filter-panel {
    position: sticky;
    top: 6rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.filter-section {
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
}

.filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.filter-section h4 {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    margin-bottom: 0.85rem;
    font-family: 'Inter', sans-serif;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.88rem;
    color: var(--ink-light);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.filter-check input { width: auto; min-height: auto; }

.price-range-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.price-range-inputs input {
    min-height: 2.2rem;
    font-size: 0.85rem;
    padding: 0.45rem 0.65rem;
}

.filter-radio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.88rem;
    color: var(--ink-light);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.filter-radio input { width: auto; min-height: auto; }

.star-filter {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.star-filter button {
    padding: 0.25rem 0.6rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-full);
    background: transparent;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.star-filter button:hover,
.star-filter button.active {
    border-color: var(--gold);
    background: var(--gold-light);
    color: var(--brown-dark);
}

.result-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
}

.result-bar strong { color: var(--ink); font-weight: 700; }

/* ---------- Product Detail ---------- */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.gallery { display: grid; gap: 0.85rem; }

.gallery-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--cream-dark);
}

.thumb-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.thumb-row button {
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--cream-dark);
    transition: border-color 0.15s;
}

.thumb-row button.active, .thumb-row button:hover { border-color: var(--brown); }

.thumb-row img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.detail-copy { display: grid; gap: 1.25rem; }

.detail-rating {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.in-stock { background: var(--green-light); color: var(--green); }
.out-stock { background: #fde8e8; color: var(--danger); }

.detail-price {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.detail-price strong {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
}

.detail-price del { font-size: 1rem; color: var(--muted); }

/* Weight selector (pill buttons) */
.weight-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.weight-option {
    padding: 0.5rem 1.1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--ink-light);
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.weight-option:hover { border-color: var(--brown); color: var(--brown); }
.weight-option.selected,
.weight-option:has(input:checked) {
    border-color: var(--brown);
    background: var(--brown);
    color: #fff;
}

/* Variant options (keep existing class for compat) */
.variant-box { display: grid; gap: 0.6rem; }
.variant-box > span { font-weight: 700; font-size: 0.85rem; font-family: 'Inter', sans-serif; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.variant-options label { cursor: pointer; }

.variant-options input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.variant-options span {
    display: inline-block;
    min-width: 4.5rem;
    padding: 0.5rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-full);
    text-align: center;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s, background 0.15s;
}

.variant-options input:checked + span {
    border-color: var(--brown);
    background: var(--brown);
    color: #fff;
    font-weight: 700;
}

/* Qty stepper */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.qty-stepper button {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    background: var(--cream-dark);
    cursor: pointer;
    transition: background 0.15s;
}

.qty-stepper button:hover { background: var(--gold-light); color: var(--brown); }
.qty-stepper button svg { width: 0.9rem; height: 0.9rem; }
.qty-stepper span { padding: 0 0.85rem; font-weight: 700; font-size: 0.95rem; min-width: 2.5rem; text-align: center; font-family: 'Inter', sans-serif; }

/* Detail actions */
.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.detail-actions .btn { width: 100%; min-height: 3rem; font-size: 0.82rem; }

/* Pincode checker */
.pincode-box {
    display: grid;
    gap: 0.5rem;
}

.pincode-box > span {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
}

.pincode-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    margin: 0;
}

.pincode-form input { min-height: 2.5rem; font-size: 0.88rem; }

/* Trust badges grid */
.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
}

.trust-badge svg { width: 1.1rem; height: 1.1rem; color: var(--green); flex-shrink: 0; }

.promise-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.promise-list span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem;
    background: var(--cream);
    border-radius: var(--radius-sm);
    color: var(--ink-light);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--line);
}

.promise-list svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--green); }

/* ---------- Cart ---------- */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.5rem;
    align-items: start;
}

.cart-lines { display: grid; gap: 1rem; }

.cart-line {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: box-shadow 0.2s;
}

.cart-line:hover { box-shadow: var(--shadow-sm); }

.cart-line img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--cream-dark);
}

.cart-line-info { display: grid; gap: 0.3rem; }
.cart-line-info a { font-weight: 700; font-size: 0.95rem; color: var(--ink); font-family: 'Playfair Display', Georgia, serif; }
.cart-line-info a:hover { color: var(--brown); }
.cart-line-info span { color: var(--muted); font-size: 0.82rem; font-family: 'Inter', sans-serif; }
.cart-line-info strong { font-size: 1rem; font-weight: 800; color: var(--gold); font-family: 'Inter', sans-serif; }

.cart-remove {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
    font-family: 'Inter', sans-serif;
    padding: 0;
    transition: color 0.15s;
}

.cart-remove:hover { color: var(--danger); }

/* ---------- Summary Panel ---------- */
.summary-panel {
    position: sticky;
    top: 6rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 1.1rem;
}

.summary-panel h2 {
    font-size: 1.15rem;
    margin-bottom: 0;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    font-family: 'Playfair Display', Georgia, serif;
}

.summary-panel dl { display: grid; gap: 0.65rem; margin: 0; }

.summary-panel dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.summary-panel dl dt { color: var(--muted); }
.summary-panel dl dd { margin: 0; font-weight: 600; }

.summary-panel .total {
    padding-top: 0.85rem;
    border-top: 2px solid var(--line);
    font-size: 1.05rem;
    font-weight: 900;
}

.summary-panel .total dt { color: var(--ink); font-weight: 800; }
.summary-panel .total dd { color: var(--gold); font-weight: 900; font-size: 1.2rem; }

.coupon-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin: 0;
}

.coupon-form input { min-height: 2.5rem; padding: 0.55rem 0.75rem; font-size: 0.88rem; }

/* Payment icons strip */
.payment-icons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.payment-icon {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--cream);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Quality promise */
.quality-promise {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--cream);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-light);
    font-family: 'Inter', sans-serif;
}

.quality-promise svg { color: var(--green); flex-shrink: 0; }

/* ---------- Checkout ---------- */
.checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
}

.checkout-flow {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

/* Step indicator */
.step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 0;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.step-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--white);
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.step-item.done .step-circle {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.step-item.active .step-circle {
    background: var(--brown);
    border-color: var(--brown);
    color: #fff;
}

.step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
}

.step-item.done .step-label,
.step-item.active .step-label { color: var(--ink); }

.step-connector {
    flex: 1;
    height: 2px;
    background: var(--line);
    margin: 0 0.35rem;
}

/* Keep old stepper for backward compat */
.stepper {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.stepper span {
    flex: 1;
    padding: 0.7rem 0.5rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--cream);
    border-right: 1px solid var(--line);
    transition: background 0.2s, color 0.2s;
    cursor: default;
    user-select: none;
    font-family: 'Inter', sans-serif;
}

.stepper span:last-child { border-right: 0; }
.stepper span.active { background: var(--brown); color: #fff; }
.stepper span.done { background: var(--gold-light); color: var(--brown-dark); }

.checkout-step { display: none; }
.checkout-step.active { display: grid; gap: 1rem; }
.checkout-step h2 { font-size: 1.2rem; margin-bottom: 0; }

.shipping-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--white);
}

.shipping-option:has(input:checked) { border-color: var(--brown); background: var(--gold-light); }
.shipping-option input { width: auto; min-height: auto; flex-shrink: 0; margin-top: 0.2rem; }
.shipping-option small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; font-family: 'Inter', sans-serif; }

.shipping-result {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--green-light);
    color: var(--green);
    font-size: 0.88rem;
    font-weight: 600;
    border-left: 3px solid var(--green);
    font-family: 'Inter', sans-serif;
}

.checkout-message {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--green-light);
    color: var(--green);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.mini-line {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.mini-line:last-of-type { border-bottom: 0; }

.mini-line img {
    width: 56px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--cream-dark);
}

.mini-line strong { font-size: 0.85rem; font-weight: 700; display: block; font-family: 'Playfair Display', Georgia, serif; }
.mini-line span { display: block; color: var(--muted); font-size: 0.78rem; font-family: 'Inter', sans-serif; }
.mini-line b { font-size: 0.9rem; font-weight: 800; white-space: nowrap; color: var(--gold); font-family: 'Inter', sans-serif; }

/* ---------- Tracking Page ---------- */
.tracking-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 1.5rem;
    align-items: start;
}

.tracking-search-bar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

/* Tracking Timeline */
.tracking-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    margin: 1.5rem 0;
}

.tracking-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.tracking-step:last-child { padding-bottom: 0; }

.tracking-step::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 2.2rem;
    bottom: 0;
    width: 2px;
    background: var(--line);
}

.tracking-step:last-child::before { display: none; }

.tracking-step.complete::before { background: var(--green); }

.step-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--white);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--muted);
    z-index: 1;
    transition: background 0.2s, border-color 0.2s;
}

.step-icon svg { width: 0.9rem; height: 0.9rem; }

.tracking-step.complete .step-icon {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.tracking-step.active .step-icon {
    background: var(--brown);
    border-color: var(--brown);
    color: #fff;
}

.step-info { flex: 1; padding-top: 0.15rem; }
.step-info strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink); font-family: 'Inter', sans-serif; }
.step-info span { font-size: 0.8rem; color: var(--muted); font-family: 'Inter', sans-serif; }

/* Map placeholder */
.map-placeholder {
    width: 100%;
    min-height: 220px;
    background: linear-gradient(135deg, #2d6a4f 0%, #1b5935 100%);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.map-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: rgba(28,26,23,0.8);
    backdrop-filter: blur(4px);
}

.map-overlay p { margin: 0; color: #fff; font-size: 0.88rem; font-family: 'Inter', sans-serif; }
.map-overlay strong { color: var(--gold); display: block; margin-bottom: 0.25rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Live updates */
.live-updates { display: grid; gap: 0.65rem; margin-top: 1rem; }

.update-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
}

.update-item:last-child { border-bottom: none; }

.update-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.update-item p { margin: 0; font-size: 0.88rem; color: var(--ink-light); font-family: 'Inter', sans-serif; }
.update-item time { font-size: 0.75rem; color: var(--muted); display: block; margin-top: 0.15rem; font-family: 'Inter', sans-serif; }

/* Tracking result (backward compat) */
.tracking-box { max-width: 680px; }
.tracking-box form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    margin: 0;
}

.track-result { margin-top: 1.5rem; }

/* Old timeline (backward compat) */
.tracking-timeline.grid-style {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1.5rem;
    position: relative;
}

.tracking-timeline.grid-style::before {
    content: '';
    position: absolute;
    top: 0.65rem;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--line);
    z-index: 0;
}

.tracking-timeline.grid-style > div {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    color: var(--muted);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
}

.tracking-timeline.grid-style span {
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-full);
    background: #fff;
}

.tracking-timeline .complete { color: var(--green); }
.tracking-timeline .complete span { background: var(--green); border-color: var(--green); }

/* ── Track Order page: placed-orders grid + live result card (feature 4) ── */
.track-orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.track-order-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: box-shadow 0.18s, border-color 0.18s;
}
.track-order-card:hover { box-shadow: var(--shadow); border-color: var(--gold); }

.track-order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.track-order-id { display: block; font-weight: 800; font-size: 0.92rem; color: var(--ink); font-family: 'Inter', sans-serif; letter-spacing: 0.01em; }
.track-order-date { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; font-family: 'Inter', sans-serif; }
.track-order-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-family: 'Inter', sans-serif; }
.track-order-meta > span:first-child { font-weight: 800; color: var(--gold); font-size: 1rem; }
.track-order-pay { font-size: 0.75rem; color: var(--muted); text-transform: capitalize; }

.track-loading {
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}

.track-result-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.track-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}
.track-result-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
}
.track-timeline-col .tracking-timeline { margin: 0; }

.track-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
}
.track-detail-row:last-of-type { border-bottom: 0; }
.track-detail-row > span { color: var(--muted); }
.track-detail-row > strong { color: var(--ink); text-align: right; word-break: break-word; }

.track-items { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.track-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--ink);
}

/* Missing order-status pill colours */
.status-pill.ordered          { background: var(--gold-light); color: var(--brown-dark); }
.status-pill.packed           { background: #e7e0f7; color: #5b3fa0; }
.status-pill.out_for_delivery { background: #dcefff; color: #1f6fb2; }

/* ---------- Confirmation ---------- */
.confirmation {
    display: grid;
    gap: 1.5rem;
    max-width: 920px;
    margin: 0 auto;
}

.success-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 1rem;
}

.success-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-full);
    background: var(--green-light);
    display: grid;
    place-items: center;
    color: var(--green);
}

.success-icon svg { width: 2.2rem; height: 2.2rem; }

/* ---------- Auth ---------- */
.auth-shell {
    min-height: 80vh;
    display: grid;
    grid-template-columns: minmax(300px, 500px) minmax(280px, 440px);
    justify-content: center;
    align-items: start;
    gap: 1.25rem;
    padding: clamp(2rem, 6vw, 5rem) 1rem;
    background: linear-gradient(135deg, var(--cream-dark) 0%, var(--cream) 100%);
}

.auth-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1rem;
}

.auth-panel h1, .auth-panel h2 { margin-bottom: 0; }

.auth-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    font-size: 0.88rem;
    color: var(--brown);
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
.auth-links a { white-space: nowrap; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ---------- Account ---------- */
.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.account-nav {
    position: sticky;
    top: 6rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    display: grid;
    gap: 0.25rem;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-light);
    transition: background 0.15s, color 0.15s;
    font-family: 'Inter', sans-serif;
}

.account-nav a svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.account-nav a:hover, .account-nav a.is-active { background: var(--gold-light); color: var(--brown-dark); }

.account-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.address-list { display: grid; gap: 0.75rem; margin-top: 1rem; }

.address-card {
    padding: 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    transition: border-color 0.15s;
}

.address-card.default { border-color: var(--brown); background: var(--gold-light); }

/* ---------- Contact ---------- */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
}

.contact-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.contact-info-item:last-child { border-bottom: 0; }
.contact-info-item svg { width: 1.1rem; height: 1.1rem; color: var(--brown); margin-top: 0.15rem; flex-shrink: 0; }
.contact-info-item strong { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.15rem; font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Google Map ---------- */
.map-container {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.map-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.map-header svg { width: 1.1rem; height: 1.1rem; color: var(--brown); flex-shrink: 0; }

.map-header strong {
    display: block;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.map-header span {
    font-size: 0.82rem;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
}

.map-frame {
    width: 100%;
    height: 420px;
    background: var(--cream-dark);
}

@media (max-width: 560px) {
    .map-frame { height: 280px; }
    .map-header { flex-wrap: wrap; gap: 0.5rem; }
    .map-header .btn { width: 100%; justify-content: center; }
}

/* ---------- Policy Pages ---------- */
.policy-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 860px;
}

.policy-block {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--line);
}

.policy-block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.policy-block h2 {
    font-size: 1.1rem;
    color: var(--brown-dark);
    margin-bottom: 0.75rem;
}

.policy-block p,
.policy-block li {
    font-family: 'Inter', sans-serif;
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--ink-light);
}

.policy-block ul,
.policy-block ol {
    padding-left: 1.4rem;
    margin: 0.5rem 0 0.75rem;
}

.policy-block li { margin-bottom: 0.35rem; }
.policy-block a { color: var(--brown); text-decoration: underline; }
.policy-block a:hover { color: var(--gold); }

/* ---------- Empty States ---------- */
.empty-state {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    color: var(--muted);
}
.empty-state[hidden] { display: none !important; }   /* the hidden attribute must win over display:grid */

/* Explicit "Remove from wishlist" button on wishlist cards */
.wishlist-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    color: #b23b3b;
    border: 1.5px solid #edc9c9;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wishlist-remove-btn svg { width: 0.95rem; height: 0.95rem; }
.wishlist-remove-btn:hover { background: #fdecec; border-color: #d98a8a; color: #952f2f; }

.empty-state svg { width: 3rem; height: 3rem; color: var(--line); }
.empty-state h2 { color: var(--ink); margin-bottom: 0; }

.empty-state.inline {
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    min-height: 220px;
}

/* ---------- Rich copy ---------- */
.rich-copy p { color: var(--ink-light); line-height: 1.8; font-family: 'Inter', sans-serif; }
.rich-copy p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
/* Footer now matches the site background (cream) with dark, readable text. */
.site-footer {
    background: var(--cream);
    color: var(--ink-light);
    border-top: 3px solid var(--gold);
    padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) 0;
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 2.75rem;
}

.footer-brand { color: var(--ink); margin-bottom: 0.85rem; }
/* Show the real logo colours on the light footer (no invert). */
.footer-brand .brand-logo-img { filter: none; opacity: 1; height: 66px; width: auto; }
.footer-desc {
    font-size: 0.87rem;
    line-height: 1.75;
    max-width: 340px;
    margin-top: 0.9rem;
    color: var(--ink-light);
    font-family: 'Inter', sans-serif;
    text-align: justify;          /* feature 3: justify the brand paragraph */
    text-justify: inter-word;
}

.footer-tagline {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brown);
    margin-top: 0.35rem;
    display: block;
    font-family: 'Inter', sans-serif;
}

.footer-col h4 {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
    font-family: 'Inter', sans-serif;
}

.footer-col a, .footer-col p {
    display: block;
    font-size: 0.88rem;
    color: var(--ink-light);
    line-height: 1.6;
    padding: 0.28rem 0;
    transition: color 0.15s, padding-left 0.15s;
    font-family: 'Inter', sans-serif;
}

.footer-col a:hover { color: var(--brown); padding-left: 0.3rem; }

.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 1.4rem clamp(1rem, 4vw, 3rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--muted);
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
}

.social-links { display: flex; gap: 0.6rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* Filled brown circles so the icons are clearly visible on the cream footer. */
.social-link {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-full);
    background: var(--brown);
    border: 1px solid var(--brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.social-link:hover { background: var(--gold); color: var(--brown-dark); border-color: var(--gold); transform: translateY(-2px); }
.social-link svg { width: 1.15rem; height: 1.15rem; stroke-width: 2; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 200;
    max-width: min(90vw, 400px);
    transform: translateX(-50%) translateY(0);
    padding: 0.9rem 1.35rem;
    border-radius: var(--radius);
    background: var(--brown-dark);
    color: var(--cream);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.25s ease;
    font-family: 'Inter', sans-serif;
}

@keyframes toast-in {
    from { transform: translateX(-50%) translateY(1rem); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ---------- Misc Helpers ---------- */
.checkline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.checkline input { width: auto; min-height: auto; }

.link-button {
    border: 0;
    background: 0;
    color: var(--brown);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font: inherit;
    font-family: 'Inter', sans-serif;
}

.fineprint { font-size: 0.78rem; color: var(--muted); margin: 0; font-family: 'Inter', sans-serif; }

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--green-light);
    color: var(--green);
    font-family: 'Inter', sans-serif;
}

.status-pill.paid     { background: #d4edda; color: #155724; }
.status-pill.pending  { background: var(--gold-light); color: var(--brown-dark); }
.status-pill.failed   { background: #fde8e8; color: var(--danger); }
.status-pill.shipped  { background: #cce5ff; color: #004085; }
.status-pill.delivered { background: var(--green-light); color: var(--green); }
.status-pill.cancelled { background: #f5f5f5; color: #666; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-family: 'Inter', sans-serif; }
th { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); background: var(--cream); }
tr:hover td { background: var(--cream); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.table-wrap table { margin: 0; }

/* ---------- Scroll strip ---------- */
.scroll-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.scroll-strip::-webkit-scrollbar { display: none; }

.scroll-strip .product-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */

.admin-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
    background: #f4f1ec;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--brown-dark);
    color: rgba(255,255,255,0.82);
    flex-shrink: 0;
}

.admin-sidebar .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.35rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 1rem;
    font-family: 'Playfair Display', Georgia, serif;
}

.admin-sidebar .brand-sub {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: 'Inter', sans-serif;
    display: block;
    margin-top: 0.1rem;
}

.admin-sidebar nav {
    padding: 0.75rem;
    display: grid;
    gap: 0.2rem;
    flex: 1;
}

.admin-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.87rem;
    font-weight: 600;
    color: rgba(255,255,255,0.62);
    transition: background 0.15s, color 0.15s;
    font-family: 'Inter', sans-serif;
}

.admin-sidebar nav a svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.admin-sidebar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }

.admin-sidebar nav a.is-active {
    background: rgba(196,134,42,0.2);
    color: var(--gold);
}

.admin-sidebar nav .nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 0.5rem 0;
}

.admin-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    font-family: 'Inter', sans-serif;
}

.admin-main {
    padding: 1.75rem;
    overflow-x: hidden;
}

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-head h1 { margin: 0; font-size: 1.6rem; }
.admin-head .eyebrow { color: var(--gold); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: grid;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold);
}

.stat-card .stat-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--radius-sm);
    background: var(--gold-light);
    color: var(--brown);
    display: grid;
    place-items: center;
}

.stat-card .stat-icon svg { width: 1.15rem; height: 1.15rem; }
.stat-card .stat-label { font-size: 0.75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-family: 'Inter', sans-serif; }
.stat-card .stat-value { font-size: 2rem; font-weight: 900; color: var(--ink); line-height: 1; font-family: 'Inter', sans-serif; }
.stat-card .stat-sub { font-size: 0.78rem; color: var(--muted); font-family: 'Inter', sans-serif; }

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-full);
    font-family: 'Inter', sans-serif;
}

.stat-change.up { background: var(--green-light); color: var(--green); }
.stat-change.down { background: #fde8e8; color: var(--danger); }

.admin-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.admin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.admin-panel-head h2 { margin: 0; font-size: 1.05rem; }

.admin-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.admin-form label { font-size: 0.82rem; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.settings-card {
    padding: 1.25rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.settings-card strong { display: block; font-size: 0.95rem; margin-bottom: 0.35rem; font-family: 'Playfair Display', Georgia, serif; }
.settings-card span { font-size: 0.85rem; color: var(--muted); font-family: 'Inter', sans-serif; }

/* Image preview */
.img-preview {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--cream-dark);
}

/* Upload area */
.upload-zone {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--cream);
}

.upload-zone:hover, .upload-zone.drag-over { border-color: var(--gold); background: var(--gold-light); }

.upload-zone input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.upload-zone svg { width: 2rem; height: 2rem; color: var(--muted); margin-bottom: 0.5rem; }
.upload-zone p { font-size: 0.85rem; color: var(--muted); margin: 0; font-family: 'Inter', sans-serif; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Page fade in */
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

main {
    animation: pageFadeIn 0.4s ease;
    position: relative;
    z-index: 1;
}

/* ---- Floating-nuts background canvas ---- */
#nutCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.38;
    transition: opacity 0.6s ease;
    /* Vignette: nuts vivid at left/right edges, fade at center AND
       fade strongly at the bottom so footer stays clean */
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 65%,
        rgba(0,0,0,0.35) 85%,
        rgba(0,0,0,0) 100%
    ), radial-gradient(ellipse 80% 80% at 50% 50%,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.6) 40%,
        black 70%
    );
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 65%,
        rgba(0,0,0,0.35) 85%,
        rgba(0,0,0,0) 100%
    ), radial-gradient(ellipse 80% 80% at 50% 50%,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.6) 40%,
        black 70%
    );
    mask-composite: intersect;
}

/* Ensure all page content sits above canvas */
main, footer,
.search-overlay, .mobile-bottom-nav,
.sticky-cart { position: relative; z-index: 1; }

/* ---- Click-burst particles ---- */
.click-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
    animation: particleBurst 0.75s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes particleBurst {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1);   opacity: 1; }
    60%  { opacity: 0.7; }
    100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ---- Cursor trail dot ---- */
.cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: trailFade 0.5s ease forwards;
}

@keyframes trailFade {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
}

/* Hero entrance */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(.22,1,.36,1),
                transform 0.6s cubic-bezier(.22,1,.36,1);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade"] {
    opacity: 0;
    transform: none;
    transition: opacity 0.65s ease;
}

[data-animate="fade"].is-visible { opacity: 1; }

/* Cart count pulse */
@keyframes cartPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.55); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.cart-count-pulse { animation: cartPulse 0.4s cubic-bezier(.36,.07,.19,.97) both; }

/* Lazy image fade */
img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; }
img[loading="lazy"].img-loaded { opacity: 1; }

/* Skeleton shimmer */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--cream-dark) 25%, var(--cream) 37%, var(--cream-dark) 63%);
    background-size: 600px 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: var(--radius-sm);
}

/* Wishlist heart beat */
@keyframes heartBeat {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.35); }
    50%  { transform: scale(1); }
    75%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.wishlist-dot.is-active { animation: heartBeat 0.45s ease; }

/* ============================================================
   ADMIN LOGIN — Split-screen
   ============================================================ */

.admin-login-body {
    margin: 0;
    min-height: 100vh;
    display: block;
    background: var(--cream);
}

.admin-login-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.admin-login-left {
    position: relative;
    background: linear-gradient(155deg, var(--brown-dark) 0%, var(--brown) 55%, var(--brown-mid) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 2.75rem;
    overflow: hidden;
}

.admin-login-deco {
    position: absolute;
    border-radius: 50%;
    opacity: 0.07;
    background: #fff;
    pointer-events: none;
}

.admin-login-deco--1 { width: 420px; height: 420px; top: -140px; right: -140px; }
.admin-login-deco--2 { width: 280px; height: 280px; bottom: -80px; left: -80px; }

.admin-login-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
    font-family: 'Playfair Display', Georgia, serif;
}

.admin-login-logo {
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
}

.admin-login-pitch {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}

.admin-login-pitch h1 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.875rem;
    color: #fff;
}

.admin-login-pitch p {
    font-size: 1rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    max-width: 380px;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.admin-login-features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.admin-login-features li { display: flex; align-items: center; gap: 0.875rem; }

.admin-login-feature-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.admin-login-feature-icon svg { width: 1rem; height: 1rem; color: rgba(255,255,255,0.9); }

.admin-login-features strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.1rem;
    font-family: 'Inter', sans-serif;
}

.admin-login-features span { font-size: 0.78rem; color: rgba(255,255,255,0.6); font-family: 'Inter', sans-serif; }

.admin-login-copy { font-size: 0.75rem; color: rgba(255,255,255,0.32); margin: 0; position: relative; z-index: 1; font-family: 'Inter', sans-serif; }

.admin-login-right {
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    overflow-y: auto;
}

.admin-login-form-wrap { width: 100%; max-width: 400px; }
.admin-login-form-head { margin-bottom: 1.75rem; }

.admin-login-form-head h2 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    margin-top: 0.25rem;
    color: var(--ink);
}

.admin-login-sub { font-size: 0.875rem; color: var(--muted); margin: 0; font-family: 'Inter', sans-serif; }

.admin-login-form { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.5rem; }

.admin-login-field { display: flex; flex-direction: column; gap: 0.4rem; }

.admin-login-field label { font-size: 0.85rem; font-weight: 700; color: var(--ink); font-family: 'Inter', sans-serif; }

.admin-login-input-wrap { position: relative; }

.admin-login-input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
}

.admin-login-input-wrap input {
    padding-left: 2.75rem;
    height: 48px;
    border-radius: var(--radius);
    border: 1.5px solid var(--line);
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-size: 0.95rem;
    background: var(--white);
}

.admin-login-input-wrap input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(196,134,42,0.12);
}

.admin-login-submit { height: 50px; font-size: 1rem; margin-top: 0.25rem; border-radius: var(--radius); letter-spacing: 0.06em; }

.admin-login-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.82rem; }
.admin-login-footer a { color: var(--brown); font-weight: 600; text-decoration: none; }
.admin-login-footer a:hover { text-decoration: underline; }
.admin-login-secure { color: var(--muted); display: flex; align-items: center; gap: 0.25rem; font-family: 'Inter', sans-serif; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .collections-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
    .header-inner { gap: 1rem; }

    /* Header bar stays above nav overlay */
    .header-inner { position: relative; z-index: 300; }

    /* Full-screen backdrop (sits ABOVE the header so the drawer isn't overlapped) */
    .main-nav {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1200;
        background: rgba(28,26,23,0.6);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        flex: none;
    }

    /* When the drawer is open, lift the whole header stacking context above the
       bottom nav / toasts and hide the bottom bar so nothing overlaps the menu. */
    body.nav-open .site-header { z-index: 1300; }
    body.nav-open .mobile-bottom-nav { display: none; }

    .main-nav.open {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
    }

    /* Drawer panel — slides in from right (partial width so backdrop is tappable) */
    .nav-drawer {
        background: var(--white);
        width: min(380px, 86vw);
        margin-left: auto;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: -8px 0 40px rgba(61,31,16,0.22);
        overflow: hidden;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(.4,0,.2,1);
    }

    .main-nav.open .nav-drawer { transform: translateX(0); }

    /* Drawer brand header */
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 2px solid var(--cream-dark);
        background: var(--cream);
        flex-shrink: 0;
    }

    .nav-drawer-head .brand-logo-img { height: 48px; }

    .nav-drawer-close {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        border: 1.5px solid var(--line);
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--ink);
        transition: background 0.15s, border-color 0.15s;
        flex-shrink: 0;
    }
    .nav-drawer-close:hover { background: var(--cream-dark); border-color: var(--brown); color: var(--brown); }
    .nav-drawer-close svg { width: 1rem; height: 1rem; }

    /* Scrollable body wraps the primary links + account submenu so the
       bottom CTA buttons always stay pinned and visible (feature 6). */
    .nav-drawer-scroll {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Nav links list */
    .nav-drawer-links {
        display: flex;
        flex-direction: column;   /* stack links top → bottom (was inheriting desktop's row) */
        align-items: stretch;
        justify-content: flex-start;
        padding: 0.5rem 0;
    }

    /* ── Secondary "My Account" submenu inside the mobile drawer (feature 5) ── */
    .nav-drawer-account {
        display: block;
        border-top: 8px solid var(--cream-dark);
    }

    .nav-drawer-account-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.9rem 1.5rem;
        background: var(--cream);
        border: none;
        border-bottom: 1px solid var(--cream-dark);
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--brown);
    }
    .nav-drawer-account-toggle span { display: inline-flex; align-items: center; gap: 0.6rem; }
    .nav-drawer-account-toggle svg { width: 1.05rem; height: 1.05rem; }
    .nav-drawer-account-caret { transition: transform 0.25s ease; }
    .nav-drawer-account.is-collapsed .nav-drawer-account-caret { transform: rotate(-90deg); }

    .nav-drawer-account-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        max-height: 600px;
        transition: max-height 0.3s ease;
    }
    .nav-drawer-account.is-collapsed .nav-drawer-account-links { max-height: 0; }

    .nav-drawer-account-links a,
    .nav-drawer-logout {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0.9rem 1.5rem 0.9rem 2.25rem;   /* indent to read as a sub-menu */
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--ink);
        background: var(--white);
        border: none;
        border-bottom: 1px solid var(--cream-dark);
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, padding-left 0.2s;
    }
    .nav-drawer-account-links a svg,
    .nav-drawer-logout svg { width: 1.1rem; height: 1.1rem; color: var(--muted); flex-shrink: 0; transition: color 0.15s; }
    .nav-drawer-account-links a::after { display: none; }
    .nav-drawer-account-links a:hover {
        background: var(--gold-light);
        color: var(--brown-dark);
        padding-left: 2.6rem;
    }
    .nav-drawer-account-links a:hover svg { color: var(--brown); }
    .nav-drawer-account-links a.is-active {
        color: var(--brown);
        background: rgba(196,134,42,0.08);
        border-left: 3px solid var(--brown);
    }
    .nav-drawer-account-links a.is-active svg { color: var(--brown); }
    .nav-drawer-logout { color: #b23b3b; }
    .nav-drawer-logout svg { color: #b23b3b; }
    .nav-drawer-logout:hover { background: #fdecec; color: #952f2f; }

    .nav-drawer-links a {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        color: var(--ink);
        border-bottom: 1px solid var(--cream-dark);
        text-decoration: none;
        transition: background 0.15s, color 0.15s, padding-left 0.2s;
    }

    .nav-drawer-links a svg,
    .nav-drawer-links a i { display: inline-flex; width: 1.15rem; height: 1.15rem; color: var(--muted); flex-shrink: 0; transition: color 0.15s; }
    .nav-drawer-links a::after { display: none; }
    .nav-drawer-links a:last-child { border-bottom: 0; }

    /* Neutralise the desktop underline/border-bottom active style inside the drawer */
    .nav-drawer a.is-active { border-bottom: 0; }
    .nav-drawer a::after { display: none; }

    .nav-drawer-links a:hover {
        background: var(--gold-light);
        color: var(--brown-dark);
        padding-left: 2rem;
    }
    .nav-drawer-links a:hover svg { color: var(--brown); }

    .nav-drawer-links a.is-active {
        color: var(--brown);
        background: rgba(196,134,42,0.08);
        border-left: 3px solid var(--brown);
    }
    .nav-drawer-links a.is-active svg { color: var(--brown); }

    /* Bottom CTA area */
    .nav-drawer-foot {
        padding: 1rem 1.25rem 1.5rem;
        border-top: 1px solid var(--line);
        background: var(--cream);
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        flex-shrink: 0;
    }

    .nav-toggle { display: flex; }

    /* Push icons + hamburger to far right */
    .header-actions { margin-left: auto; }

    .feature-row { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .admin-body { grid-template-columns: 200px minmax(0, 1fr); }
    .collections-grid { gap: 0.75rem; }
}

@media (max-width: 820px) {
    /* Mobile hero: the 16:9 stage shows the FULL image (no cropping), and the
       text sits BELOW it on the brand-dark background. */
    .hero { display: block; }
    .hero-slides { padding-top: 56.25%; }   /* full 16:9 image, flush under the header */
    .hero-scrim { display: none; }          /* no overlay needed — text is below */
    .hero-content {
        position: static;                    /* flows beneath the image */
        max-width: 100%;
        background: #241109;
        padding: 1.5rem 1.25rem 2rem;
    }
    .hero-arrow { display: none; }           /* swipe + dots handle navigation */
    .hero-dots {
        bottom: 0.9rem;                      /* sit on the bottom edge of the image */
        top: auto;
    }

    .collections-grid { grid-template-columns: 1fr; }
    .collection-tile.featured { min-height: 320px; grid-row: auto; }
    .collection-tile:not(.featured) { min-height: 200px; }

    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .shop-layout { grid-template-columns: 1fr; }
    .filter-panel { position: static; display: none; }
    .filter-panel.is-open { display: block; }
    .mobile-filter-bar { display: flex; align-items: center; justify-content: space-between; }

    .product-detail { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-shell { grid-template-columns: 1fr; }
    .tracking-layout { grid-template-columns: 1fr; }
    .track-result-body { grid-template-columns: 1fr; gap: 1.5rem; }
    .track-result-card { padding: 1.25rem; }
    .track-orders-grid { grid-template-columns: 1fr; }
    .summary-panel, .filter-panel { position: static; }

    .contact-layout { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .account-nav { position: static; flex-direction: row; overflow-x: auto; padding: 0.5rem; }

    /* Product detail — less gap */
    .product-detail { gap: 1.5rem; }

    /* Responsive tables (shipping policy etc.) */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll table { min-width: 500px; }

    /* Checkout summary appears above form on mobile */
    .checkout-shell { display: flex; flex-direction: column; }
    .checkout-summary { order: 2; }
    .checkout-flow { order: 1; }

    /* Cart line adjustments */
    .cart-line-info { min-width: 0; }

    /* Footer grid compact */
    .footer-grid { gap: 1.5rem; }

    /* Admin table scroll */
    .admin-table-wrap { overflow-x: auto; }
    .admin-table-wrap table { min-width: 600px; }

    .story-band { flex-direction: column; text-align: center; }
    .section-heading { flex-direction: column; align-items: flex-start; }

    .split-section { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;   /* link columns sit two-up on mobile */
        gap: 1.85rem 1.5rem;
    }
    .footer-grid > div:first-child { grid-column: 1 / -1; }  /* brand spans full width */
    .footer-desc { max-width: 100%; }
    .trust-grid { grid-template-columns: 1fr; }
    .promise-list { grid-template-columns: 1fr 1fr; }

    .auth-shell { grid-template-columns: 1fr; }

    .admin-body { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; }
    .admin-sidebar nav { flex-direction: row; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .settings-grid { grid-template-columns: 1fr; }

    .admin-login-shell { grid-template-columns: 1fr; }
    .admin-login-left { min-height: 260px; padding: 2rem 1.5rem; }
    .admin-login-pitch h1 { font-size: 1.4rem; }
    .admin-login-features { display: none; }
    .admin-login-pitch { padding: 1rem 0; }
}

@media (max-width: 560px) {
    .header-inner { padding: 0.65rem 1rem; gap: 0.5rem; }
    .header-search { display: none; }
    .icon-button { width: 2rem; height: 2rem; }
    .brand-logo-img { max-height: 46px; height: 46px; }

    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-row { grid-template-columns: 1fr; }
    .feature-row-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .feature-row-item:last-child { border-bottom: 0; }

    .form-grid { grid-template-columns: 1fr; }

    .cart-line {
        grid-template-columns: 75px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .cart-line .qty-stepper { grid-column: 1 / -1; }
    .cart-line img { width: 75px; height: 75px; }

    .coupon-form { grid-template-columns: 1fr; }
    .tracking-box form { grid-template-columns: 1fr; }
    .stepper { flex-direction: column; border-radius: var(--radius-sm); }
    .stepper span { border-right: 0; border-bottom: 1px solid var(--line); }
    .stepper span:last-child { border-bottom: 0; }

    .promise-list { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .detail-actions .btn { min-height: 2.75rem; }
    .newsletter-form { flex-direction: column; align-items: stretch; }
    .newsletter-form input { min-width: unset; }

    /* Show mobile bottom nav on small screens */
    .mobile-bottom-nav { display: flex; }
    /* Pad main content so bottom nav doesn't overlap */
    main { padding-bottom: 5rem; }
    /* Hide sticky cart FAB on mobile (bottom nav covers it) */
    .sticky-cart { display: none; }

    /* Typography scale-down */
    h1 { font-size: clamp(1.6rem, 5.5vw, 2.2rem); }
    h2 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }

    /* Hero */
    .hero-content h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .hero-content > p { font-size: 0.9rem; margin-bottom: 1.2rem; }

    /* Step indicator — shrink text */
    .step-label { font-size: 0.65rem; }

    /* Hero buttons stacked */
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { text-align: center; justify-content: center; }

    /* Detail price smaller */
    .detail-price strong { font-size: 1.4rem; }

    /* Checkout summary push below on mobile */
    .checkout-summary { margin-bottom: 1rem; }

    /* Tighter form grid gap */
    .form-grid { gap: 0.65rem; }

    /* Cart info tighter */
    .cart-line-info a { font-size: 0.9rem; }
}

/* ============================================================
   RESPONSIVE — Small Mobile ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
    /* Reduce section horizontal padding */
    .section { padding-left: 0.85rem; padding-right: 0.85rem; }
    .page-hero { padding-left: 1rem; padding-right: 1rem; }

    /* Keep "Create an account" / "Forgot password?" on one line */
    .auth-links { gap: 0.4rem; font-size: 0.8rem; }

    /* Hero heading tighter */
    .hero-content h1 { font-size: clamp(1.75rem, 6.5vw, 2.2rem); line-height: 1.1; }
    .hero-content { padding: 1.35rem 1.15rem 1.85rem; }
    .hero-content > p { display: block; font-size: 0.92rem; margin-bottom: 1.1rem; } /* dark block has room now */

    /* Heritage banner — compact */
    .heritage-banner-content h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    .heritage-banner-content p { font-size: 0.8rem; }

    /* Step indicator — hide labels, just show circles */
    .step-label { display: none; }
    .step-item { flex: none; }

    /* Product detail buttons — full width stack */
    .detail-actions { flex-direction: column; gap: 0.6rem; }
    .detail-actions .btn { width: 100%; text-align: center; justify-content: center; }

    /* Pincode form stacked */
    .pincode-form { flex-direction: column; }
    .pincode-form button { width: 100%; }

    /* Product card tighter padding */
    .product-info { padding: 0.75rem 0.65rem; gap: 0.4rem; }
    .product-name { font-size: 0.88rem; }
    .price-current { font-size: 1rem; }
    .product-info p { display: none; } /* hide short description on tiny cards */

    /* Cart line image smaller */
    .cart-line img { width: 64px; height: 64px; }
    .cart-line { grid-template-columns: 64px minmax(0, 1fr); }

    /* Collection tiles shorter */
    .collection-tile.featured { min-height: 260px; }
    .collection-tile:not(.featured) { min-height: 150px; }

    /* Admin sidebar horizontal scroll */
    .admin-sidebar nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.35rem; }
    .admin-sidebar .sidebar-link { white-space: nowrap; }

    /* Stat cards single column */
    .stat-grid { grid-template-columns: 1fr !important; }

    /* Newsletter section tighter */
    .newsletter-section { padding-left: 1rem; padding-right: 1rem; }
    .newsletter-section h2 { font-size: 1.4rem; }

    /* Footer tagline hide */
    .footer-tagline { display: none; }

    /* Search overlay top padding */
    .search-overlay { padding-top: 2.5rem; }

    /* Policy card padding tighter */
    .policy-card { padding: 1.25rem 1rem; }

    /* About values grid */
    .about-values { gap: 0.85rem; }

    /* Coupon form stack */
    .coupon-form { grid-template-columns: 1fr; }

    /* Wishlist / tracking sections */
    .tracking-box form { flex-direction: column; }
    .tracking-box form button { width: 100%; }

    /* Page hero tighter */
    .page-hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
}

/* ============================================================
   RESPONSIVE — Extra Small ≤ 360px (iPhone SE, Galaxy A-series)
   ============================================================ */
@media (max-width: 360px) {
    .header-inner { padding: 0.55rem 0.75rem; gap: 0.4rem; }
    .brand-logo-img { max-height: 42px; height: 42px; }

    .hero-content h1 { font-size: 1.65rem; }

    /* Single-column product grid on the narrowest phones */
    .product-grid { grid-template-columns: 1fr !important; }
    .category-grid { grid-template-columns: 1fr !important; }

    .product-info { padding: 0.85rem 0.75rem; }
    .product-info p { display: none; }

    /* Footer bottom stacked */
    .footer-bottom { gap: 0.35rem; font-size: 0.7rem; }

    /* Step circles smaller */
    .step-circle { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
    .step-connector { margin: 0 0.2rem; }

    h1 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    h2 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(28,26,23,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.search-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

.search-overlay-inner {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: min(680px, calc(100vw - 2rem));
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}

.search-overlay.is-open .search-overlay-inner {
    transform: translateY(0);
}

.search-overlay-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s;
}

.search-overlay-form:focus-within {
    border-color: var(--brown);
}

.search-overlay-icon {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--muted);
    flex-shrink: 0;
}

.search-overlay-form input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1rem;
    color: var(--ink);
    min-height: unset;
    padding: 0.35rem 0;
    border-radius: 0;
}

.search-overlay-form input::placeholder { color: var(--muted); }

.search-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.82rem;
}

.search-suggestions span {
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
}

.search-suggestions a {
    background: var(--cream-dark);
    color: var(--brown);
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
}

.search-suggestions a:hover {
    background: var(--brown);
    color: var(--white);
}

.search-overlay-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-light);
    transition: background 0.2s, color 0.2s;
}

.search-overlay-close:hover {
    background: var(--brown);
    color: var(--white);
    border-color: var(--brown);
}

.search-overlay-close svg { width: 1.1rem; height: 1.1rem; }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
/* Mobile filter bar — hidden on desktop, shown at ≤820px (see responsive block) */
@media (min-width: 821px) {
    .mobile-filter-bar { display: none; }
}

.mobile-bottom-nav {
    display: none; /* shown only at ≤560px via responsive block above */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(61,31,16,0.10);
    height: 3.75rem;
    align-items: stretch;
    justify-content: space-around;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex: 1;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
}

.mobile-nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 1.75;
}

.mobile-nav-item.is-active,
.mobile-nav-item:hover { color: var(--brown); }

.cart-button-mobile { position: relative; }

.mobile-cart-count {
    position: absolute;
    top: 0.2rem;
    right: calc(50% - 1rem);
    background: var(--brown);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    line-height: 1;
}

/* Nav badge (inline count in mobile drawer) */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brown);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    padding: 0 0.25rem;
    margin-left: 0.35rem;
}

/* Mobile drawer divider */
.nav-mobile-only {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 561px) {
    .nav-mobile-only { display: none; }
}

/* =====================================================================
   KERNOVA — 2026 UPDATE STYLES
   Appended block: hero slider, clean product imagery, coupon UI,
   delivery options, admin inventory, admin mobile drawer, and
   responsive polish. Later rules intentionally override earlier ones.
   ===================================================================== */

/* ---------- Hero slider (smooth crossfade + arrows + swipe) ---------- */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(20,10,5,0.28) 0%, rgba(20,10,5,0.12) 38%, rgba(20,10,5,0.66) 100%);
}

.hero-content { transition: opacity 0.28s ease, transform 0.28s ease; }
.hero-content.is-swapping { opacity: 0; transform: translateY(10px); }
/* Re-trigger the entrance animations only on first paint, not every slide */
.hero-content.is-swapping .eyebrow,
.hero-content.is-swapping h1,
.hero-content.is-swapping > p,
.hero-content.is-swapping .hero-actions { animation: none; }

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(6px);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.hero-arrow:hover { background: rgba(255,255,255,0.32); }
.hero-arrow svg { width: 1.4rem; height: 1.4rem; }
.hero-arrow-prev { left: clamp(0.6rem, 2vw, 1.5rem); }
.hero-arrow-next { right: clamp(0.6rem, 2vw, 1.5rem); }
.hero-arrow:active { transform: translateY(-50%) scale(0.92); }

/* ---------- Clean, "highlighted" product imagery (Amazon/Flipkart feel) ---------- */
.product-media { background: #ffffff; }
.product-media img {
    object-fit: contain;
    padding: 7%;
    image-rendering: -webkit-optimize-contrast;
}
.product-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(61,31,16,0.14); }
.product-card:hover .product-media img { transform: scale(1.07); }

/* Product detail gallery — zoomable main image */
.gallery-main-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    cursor: zoom-in;
}
.gallery-main {
    display: block;
    object-fit: contain;
    background: #fff;
    padding: 4%;
    transition: transform 0.15s ease-out;
}
.gallery-zoom-hint {
    position: absolute;
    bottom: 0.6rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255,255,255,0.85);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-full);
    pointer-events: none;
}
.gallery-zoom-hint svg { width: 0.85rem; height: 0.85rem; }
.thumb-row button { background: #fff; }
.thumb-row img { object-fit: contain; padding: 6%; background: #fff; }
@media (hover: none) { .gallery-zoom-hint { display: none; } .gallery-main-wrap { cursor: default; } }

/* ---------- Coupon applied card (cart page) ---------- */
.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #eef7ef;
    border: 1px solid #bfe2c6;
    border-radius: var(--radius-md, 12px);
    padding: 0.75rem 0.9rem;
    margin-top: 0.5rem;
}
.coupon-applied-info { display: flex; align-items: center; gap: 0.6rem; }
.coupon-applied-info svg { width: 1.3rem; height: 1.3rem; color: #1e7a3d; flex-shrink: 0; }
.coupon-applied-info strong { display: block; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: #14532d; letter-spacing: 0.02em; }
.coupon-applied-info span { font-family: 'Inter', sans-serif; font-size: 0.76rem; color: #2f7a45; }
.coupon-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid #bfe2c6;
    color: #1e7a3d;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.coupon-remove-btn:hover { background: #1e7a3d; color: #fff; border-color: #1e7a3d; }
.coupon-remove-btn svg { width: 0.85rem; height: 0.85rem; }
.coupon-remove-form { display: contents; }

/* ---------- Admin: product image slots ---------- */
.product-image-slots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.7rem;
}
.pimg-slot { display: flex; flex-direction: column; gap: 0.35rem; }
.pimg-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pimg-drop {
    position: relative;
    aspect-ratio: 1;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    display: block;
    transition: border-color 0.15s, background 0.15s;
}
.pimg-drop:hover { border-color: var(--brown); background: #fffdf8; }
.pimg-drop img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pimg-drop input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.pimg-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
    color: var(--muted); font-size: 0.75rem; font-family: 'Inter', sans-serif; pointer-events: none;
}
.pimg-placeholder svg { width: 1.4rem; height: 1.4rem; }

/* ---------- Admin: inventory ---------- */
.inv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.inv-stat {
    background: var(--white, #fff);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.inv-stat-label { display: block; font-size: 0.74rem; color: var(--muted); font-family: 'Inter', sans-serif; margin-bottom: 0.35rem; }
.inv-stat strong { font-size: 1.5rem; font-family: 'Inter', sans-serif; }
.inv-stat-warn { border-color: #f3d9a4; background: #fffaf0; }
.inv-stat-danger { border-color: #f3b4b4; background: #fff5f5; }

.inventory-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.inventory-table th { text-align: left; padding: 0.65rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.inventory-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.inv-stock-input { width: 84px; min-height: 2.1rem; font-size: 0.85rem; text-align: center; }
.inv-row.inv-out { background: #fff6f6; }
.inv-row.inv-low { background: #fffaf0; }

/* Inventory active toggle switch */
.inv-switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.inv-switch input { opacity: 0; width: 0; height: 0; }
.inv-switch span { position: absolute; inset: 0; background: #ccc; border-radius: 999px; transition: 0.2s; }
.inv-switch span::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.inv-switch input:checked + span { background: var(--leaf-dark, #1e7a3d); }
.inv-switch input:checked + span::before { transform: translateX(18px); }

/* ---------- Admin: mobile top bar + drawer ---------- */
.admin-topbar { display: none; }
.admin-nav-toggle {
    width: 42px; height: 42px; border: none; background: transparent;
    display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 0 10px;
}
.admin-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink, #2d1810); border-radius: 2px; transition: 0.25s; }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.admin-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90;
}

@media (max-width: 900px) {
    .admin-topbar {
        display: flex; align-items: center; gap: 0.4rem;
        position: sticky; top: 0; z-index: 60;
        background: var(--white, #fff); border-bottom: 1px solid var(--line);
        padding: 0.4rem 0.6rem; height: 54px;
    }
    .admin-topbar-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; }
    .admin-sidebar {
        position: fixed; top: 0; left: 0; height: 100%; width: 264px; max-width: 82vw;
        transform: translateX(-100%); transition: transform 0.28s ease; z-index: 100;
        overflow-y: auto;
    }
    .admin-sidebar.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.3); }
    .admin-main { margin-left: 0 !important; padding: 1rem !important; }
}

/* ---------- Extra responsive polish ---------- */
@media (max-width: 560px) {
    .product-image-slots { grid-template-columns: repeat(3, 1fr); }
    .inv-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-arrow { width: 2.4rem; height: 2.4rem; }
    .hero-arrow svg { width: 1.1rem; height: 1.1rem; }
    .coupon-applied { flex-direction: column; align-items: stretch; }
    .coupon-remove-btn { justify-content: center; }
    .detail-actions { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .product-image-slots { grid-template-columns: repeat(2, 1fr); }
}

/* Detail action buttons — even, tappable layout on all sizes */
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.detail-actions .btn { min-height: 3rem; }
.detail-actions .btn-outline { grid-column: 1 / -1; }