@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Custom Brand Font: Ezra ───────────────────────────────── */
@font-face {
    font-family: 'Ezra';
    src: url('../fonts/Ezra Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ezra';
    src: url('../fonts/Ezra Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ezra';
    src: url('../fonts/Ezra SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ezra';
    src: url('../fonts/Ezra Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ezra';
    src: url('../fonts/Ezra ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ezra';
    src: url('../fonts/Ezra Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Creamy Bite — Design System (Official Logo Palette)
   Brand: Deep Artisan Chocolate + Warm Vanilla Cream + Gold
============================================================ */
:root {
    /* ── Backgrounds (Warm Vanilla & Cream) ──────────────── */
    --bg-main:             #FFF2E4;  /* exact cream from Brand Guidelines 2026 */
    --bg-surface:          #FFFFFF;
    --bg-surface-soft:     #FDF1E3;
    --bg-hero:             #FAF0E4;

    /* ── Brand Colors (Deep Chocolate & Warm Gold) ──────── */
    --color-primary:       #5C1C22;  /* Deep Creamy Bite Chocolate — exact hex from Brand Guidelines 2026 */
    /* The same colour as bare channels, for rgba() tints.
       admin.css writes rgba(var(--color-primary-rgb), 0.15) in two places, and
       without this the whole declaration is invalid — not faint, but dropped
       entirely, which left the progress-bar tracks with no visible track at
       all. Keep in step with --color-primary above. */
    --color-primary-rgb:   92, 28, 34;
    --color-primary-dark:  #431318;  /* Dark Chocolate */
    --color-primary-light: #8C3A43;  /* Warm Cocoa */
    --color-primary-bg:    #F8ECE9;  /* Chocolate Tint */

    --color-secondary:     #C78829;  /* Warm Gold */
    --color-secondary-bg:  #FDF4E5;  /* Golden Cream */

    --color-accent:        #D49A37;  /* Golden Amber */
    --color-accent-bg:     #FFF8E8;  /* Light Amber Cream */

    --color-danger:        #D93838;
    --color-success:       #10B981;

    /* ── Text (Deep Cocoa Tones) ─────────────────────────── */
    --text-primary:   #2C0D11;  /* Deepest Chocolate Text */
    --text-secondary: #5E3D42;  /* Cocoa Secondary Text */
    --text-muted:     #A38387;  /* Muted Warm Grey */
    --text-on-primary: #FFFFFF;

    /* ── Borders ──────────────────────────────────────────── */
    --border-color:  rgba(92, 29, 36, 0.14);
    --border-strong: rgba(92, 29, 36, 0.28);
    --border-light:  rgba(92, 29, 36, 0.07);

    /* ── Gradients (Dynamically Linked to CSS Variables) ──── */
    --grad-primary:  linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --grad-coral:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --grad-mint:     linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
    --grad-golden:   linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    --grad-hero:     linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-secondary) 100%);
    --grad-warm:     linear-gradient(135deg, var(--bg-surface-soft) 0%, var(--bg-main) 100%);
    --grad-text:     linear-gradient(135deg, var(--color-primary), var(--color-secondary));

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-xs: 0 1px 4px  rgba(44, 13, 17, 0.06);
    --shadow-sm: 0 2px 10px rgba(44, 13, 17, 0.08);
    --shadow-md: 0 4px 24px rgba(44, 13, 17, 0.10);
    --shadow-lg: 0 8px 40px rgba(44, 13, 17, 0.12);
    --shadow-card:  0 4px 20px rgba(92, 29, 36, 0.09);
    --shadow-glow:  0 0 24px rgba(92, 29, 36, 0.20);

    /* ── Typography ───────────────────────────────────────── */
    --font-heading: 'Ezra', 'Outfit', sans-serif;
    --font-body:    'Ezra', 'Plus Jakarta Sans', sans-serif;

    /* ── Radius ───────────────────────────────────────────── */
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 40px;

    /* ── Transitions ──────────────────────────────────────── */
    --transition:        all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s  cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-slow:   all 0.5s  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; border: none; outline: none; background: none; cursor: pointer; transition: var(--transition); }

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--color-primary-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── Utilities ─────────────────────────────────────────────── */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; flex-wrap: wrap; }

.gradient-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 248, 242, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
    padding: 14px 0;
    box-shadow: var(--shadow-xs);
}

.nav-container { display: flex; justify-content: space-between; align-items: center; }

.logo {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}
.logo-img {
    height: 54px;
    max-height: 58px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    mix-blend-mode: multiply;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .logo-img {
    transform: scale(1.06);
}
.footer-logo-img {
    height: 46px;
    width: auto;
    object-fit: contain;
    display: inline-block;
}
.logo-emoji { font-size: 24px; }
.logo span { color: var(--color-primary); }

/* ── Centered Header Layout for Arched Logo ────────────────────── */
.nav-container-centered {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.logo-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav-links a {
    font-size: 14px; font-weight: 600;
    color: var(--text-secondary);
    position: relative; padding-bottom: 2px;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--color-primary); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 14px; }

/* Cart button */
.cart-btn {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    font-size: 18px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-xs);
}
.cart-btn:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-glow);
    transform: scale(1.05);
}
.cart-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--grad-primary);
    color: white;
    font-size: 10px; font-weight: 700;
    width: 19px; height: 19px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-main);
    font-family: var(--font-heading);
    transition: var(--transition-bounce);
}
.cart-badge.bump { transform: scale(1.5); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-xl);
    font-size: 14px; font-weight: 700;
    background: var(--grad-primary);
    color: white;
    border: none; cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 77, 109, 0.35);
    transition: var(--transition);
    font-family: var(--font-heading);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255, 77, 109, 0.45);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-xl);
    font-size: 14px; font-weight: 600;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1.5px solid var(--border-light);
    cursor: pointer; transition: var(--transition);
    font-family: var(--font-heading);
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-bg);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px; border-radius: var(--radius-xs);
    font-size: 12px; font-weight: 600;
    background: #fff5f5; color: var(--color-danger);
    border: 1px solid #fecaca; cursor: pointer; transition: var(--transition);
}
.btn-danger:hover { background: #fee2e2; border-color: var(--color-danger); }

.btn-outline {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px; border-radius: var(--radius-xs);
    font-size: 12px; font-weight: 600;
    background: transparent; color: var(--color-secondary);
    border: 1px solid rgba(0,201,167,0.3); cursor: pointer; transition: var(--transition);
}
.btn-outline:hover { background: var(--color-secondary-bg); border-color: var(--color-secondary); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: var(--bg-surface);
}

/* Colourful top band */
.hero-band {
    background: var(--grad-hero);
    padding: 70px 0 120px;
    position: relative;
    overflow: hidden;
}
.hero-band::before {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 80px;
    background: var(--bg-surface);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* Decorative circles */
.hero-band::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 280px; height: 280px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 6px 16px; border-radius: 30px;
    font-size: 12px; font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-title {
    font-size: 54px;
    color: #ffffff;
    margin-bottom: 18px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.hero-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 32px;
    max-width: 480px;
    line-height: 1.7;
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-hero-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: var(--radius-xl);
    font-size: 15px; font-weight: 700;
    background: white; color: var(--color-primary);
    border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: var(--transition);
    font-family: var(--font-heading);
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }

.btn-hero-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; border-radius: var(--radius-xl);
    font-size: 15px; font-weight: 600;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    color: white; border: 1.5px solid rgba(255,255,255,0.4);
    cursor: pointer; transition: var(--transition);
    font-family: var(--font-heading);
}
.btn-hero-secondary:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }

/* Hero visual (right side) */
.hero-visual {
    display: flex; align-items: center; justify-content: center;
    position: relative; height: 340px;
}
.hero-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 28px;
    width: 290px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    position: relative; z-index: 2;
    animation: floatingCard 5s infinite ease-in-out;
}
.hero-card-emoji { font-size: 72px; margin-bottom: 10px; display: block; }
.hero-card h3 { font-size: 18px; color: var(--text-primary); margin-bottom: 4px; }
.hero-card p  { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.hero-card-footer { display: flex; justify-content: space-between; align-items: center; }
.hero-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    animation: floatBubble 6s infinite ease-in-out;
}

/* Stats strip — four trust badges on the brand gradient, same colour as
   .landing-cta-section further down. The curved bottom edge reuses the
   exact technique .landing-hero::after already uses above: an absolutely
   positioned ellipse in the next section's colour, not an SVG. */
.hero-stats {
    display: flex; gap: 0;
    background: var(--grad-primary);
    padding: 44px 0 78px;
    position: relative;
    overflow: hidden;
}
.hero-stats::after {
    content: '';
    position: absolute; bottom: -2px; left: 0; right: 0;
    height: 60px; background: var(--bg-main);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hero-stat {
    flex: 1;
    text-align: center;
    padding: 0 20px;
    position: relative; z-index: 1;
}
.hero-stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    font-size: 21px;
    color: #FFFFFF;
}
.hero-stat-value {
    font-size: 17px; font-weight: 800;
    font-family: var(--font-heading);
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 4px; }

/* ── Section Helpers ───────────────────────────────────────── */
.section-label {
    display: inline-block;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    border: 1px solid rgba(255,77,109,0.2);
    padding: 5px 14px; border-radius: 20px;
    margin-bottom: 14px;
}
.section-header { text-align: center; margin-bottom: 40px; }
.section-title  { font-size: 36px; margin-bottom: 10px; }
.section-subtitle { font-size: 15px; color: var(--text-secondary); max-width: 460px; margin: 0 auto; line-height: 1.6; }

/* ── Products Section ──────────────────────────────────────── */
.products-section { padding: 64px 0 80px; background: var(--bg-main); }

/* Category Tabs */
.category-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
.cat-tab {
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-light);
    cursor: pointer; transition: var(--transition);
    box-shadow: var(--shadow-xs);
}
.cat-tab:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }
.cat-tab.active {
    background: var(--grad-primary);
    color: white; border-color: transparent;
    box-shadow: 0 4px 14px rgba(255,77,109,0.30);
}

/* Products Grid */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }

/* Product Card */
/* This block is the card's RESTING look only.
   Every hover / pointer state for .product-card now lives in exactly one
   place — the "Product cards" section of animations.css. It used to be
   spread across four blocks in two files, including two different image
   zooms (1.06 here, 1.07 further down) that won or lost on source order
   rather than on intent.

   There is deliberately no `overflow: hidden` here any more. The hover
   depth is a shadow layer painted by .product-card::after, which has to
   render OUTSIDE the card box — clipping it at the card killed it. The
   clipping moved down to .product-image-wrap, which needs it anyway to
   contain the photo zoom, and the top accent line moved down with it so
   it still follows the rounded top corners exactly as before. */
.product-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-light);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
    position: relative;
}

/* Badge */
.product-badge {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 10;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.badge-new        { background: var(--color-secondary-bg); color: var(--color-secondary); border: 1px solid rgba(0,201,167,0.3); }
.badge-hot        { background: var(--color-primary-bg);   color: var(--color-primary);   border: 1px solid rgba(255,77,109,0.3); }
.badge-best-seller { background: var(--color-accent-bg);   color: #d97706;               border: 1px solid rgba(255,183,3,0.3); }

/* Emoji display */
.product-emoji-wrap {
    height: 180px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    padding: 24px;
}
.product-emoji-wrap::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--card-gradient, var(--grad-warm));
    opacity: 0.08;
    transition: var(--transition);
}
/* No :hover rule here. .product-emoji-wrap / .product-emoji are not in the
   shipped order.php markup at all (the card renders .product-image-wrap and
   .product-image-placeholder), so their old hover states were styling
   nothing while adding to the pile of competing rules. */

.product-emoji {
    font-size: 80px;
    position: relative; z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
    transition: var(--transition-bounce);
    line-height: 1;
}
/* (Same again — .product-emoji is not rendered by any template.) */

/* Card body */
.product-body { padding: 20px 22px 18px; display: flex; flex-direction: column; flex-grow: 1; border-top: 1px solid var(--border-light); }
.product-cat  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 5px; }
.product-name { font-size: 17px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; color: var(--text-primary); }
.product-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; flex-grow: 1; }

.product-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 14px; border-top: 1px solid var(--border-light);
}
.product-price { font-size: 22px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); }

.btn-add-cart {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primary-bg);
    border: 1.5px solid rgba(255,77,109,0.2);
    color: var(--color-primary);
    font-size: 16px; cursor: pointer;
    transition: var(--transition-bounce);
}
.btn-add-cart:hover {
    background: var(--grad-primary);
    border-color: transparent; color: white;
    box-shadow: 0 4px 16px rgba(255,77,109,0.4);
    transform: scale(1.12) rotate(5deg);
}

/* ── Cart Sidebar ──────────────────────────────────────────── */
.cart-overlay {
    position: fixed; inset: 0;
    background: rgba(26, 10, 20, 0.4);
    backdrop-filter: blur(3px);
    z-index: 300;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }

.cart-sidebar {
    position: fixed;
    top: 0; right: 0;
    width: 400px; max-width: 100vw;
    height: 100vh;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-light);
    z-index: 301;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(26,10,20,0.12);
}
.cart-sidebar.open { transform: translateX(0); }

.cart-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-main);
}
.cart-header h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; color: var(--text-primary); }

.btn-close-cart {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface); border: 1px solid var(--border-light);
    font-size: 16px; color: var(--text-muted); cursor: pointer; transition: var(--transition);
}
.btn-close-cart:hover { background: #fff5f5; border-color: var(--color-danger); color: var(--color-danger); }

.cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; background: var(--bg-surface); }
.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty-icon { font-size: 60px; margin-bottom: 14px; opacity: 0.35; }
.cart-empty p { font-size: 15px; color: var(--text-secondary); }

.cart-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--border-light);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-emoji {
    width: 50px; height: 50px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; flex-shrink: 0;
    background: var(--color-primary-bg);
    border: 1px solid rgba(255,77,109,0.12);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name  { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-price { font-size: 13px; color: var(--color-primary); font-weight: 700; }

.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-main); border: 1px solid var(--border-light);
    color: var(--text-secondary); font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.qty-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary); }
.qty-value { font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; color: var(--text-primary); }

.btn-remove-item { color: var(--text-muted); font-size: 14px; padding: 4px; cursor: pointer; transition: var(--transition); }
.btn-remove-item:hover { color: var(--color-danger); }

.cart-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-main);
}
.cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cart-total-label  { font-size: 14px; color: var(--text-secondary); }
.cart-total-amount { font-size: 28px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); }
.btn-checkout     { width: 100%; padding: 15px; font-size: 15px; margin-bottom: 10px; justify-content: center; border-radius: var(--radius-md) !important; }
.btn-clear-cart   { width: 100%; padding: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: var(--transition); }
.btn-clear-cart:hover { color: var(--color-danger); }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: white;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 14px 22px;
    display: flex; align-items: center; gap: 12px;
    min-width: 270px; max-width: 360px;
    z-index: 400;
    opacity: 0;
    box-shadow: var(--shadow-md);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-icon { font-size: 22px; flex-shrink: 0; }
.toast-text { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.toast-sub  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; margin-bottom: 20px;
}
.alert i { margin-top: 1px; flex-shrink: 0; }
.alert-danger  { background: #fff5f5; border: 1px solid #fecaca; color: #b91c1c; }
.alert-success { background: var(--color-secondary-bg); border: 1px solid rgba(0,201,167,0.3); color: #059669; }
.alert-info    { background: var(--color-primary-bg); border: 1px solid rgba(255,77,109,0.25); color: var(--color-primary-dark); }

/* ── Form Controls ─────────────────────────────────────────── */
.form-group  { margin-bottom: 20px; }
.form-label  {
    display: block;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary); margin-bottom: 8px;
}
.form-control {
    width: 100%; padding: 13px 16px;
    background: var(--bg-main);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body); font-size: 14px;
    transition: var(--transition);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(255,77,109,0.10);
}
.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b8a0b0' d='M5 8l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 36px; }

/* ── Checkout Page ─────────────────────────────────────────── */
.checkout-page { padding: 56px 0 80px; background: var(--bg-main); }
.checkout-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
.section-card  { padding: 30px; background: var(--bg-surface); border-radius: var(--radius-md); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-sm); }
.section-card h2 { font-size: 20px; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }

.order-summary-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border-light);
}
.order-summary-item:last-of-type { border-bottom: none; }
.osi-emoji  { font-size: 28px; width: 40px; text-align: center; }
.osi-info   { flex: 1; }
.osi-name   { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.osi-qty    { font-size: 12px; color: var(--text-muted); }
.osi-price  { font-size: 15px; font-weight: 700; color: var(--color-primary); }

.summary-divider     { border: none; border-top: 1px solid var(--border-light); margin: 18px 0; }
.summary-total-row   { display: flex; justify-content: space-between; align-items: center; }
.summary-total-label { font-size: 15px; color: var(--text-secondary); }
.summary-total-price { font-size: 28px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); }

/* ── Order Confirmation ────────────────────────────────────── */
.confirmation-page      { padding: 80px 0; text-align: center; background: var(--bg-main); }
.confirmation-icon      { font-size: 88px; margin-bottom: 12px; animation: bounceIn 0.8s cubic-bezier(0.34,1.56,0.64,1); }
.confirmation-title     { font-size: 42px; margin-bottom: 12px; }
.confirmation-subtitle  { font-size: 16px; color: var(--text-secondary); margin: 0 auto 32px; max-width: 480px; line-height: 1.6; }

.order-code-box {
    display: inline-block;
    background: var(--color-primary-bg);
    border: 2px dashed rgba(255,77,109,0.35);
    border-radius: var(--radius-md); padding: 16px 36px; margin-bottom: 32px;
}
.order-code-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 6px; }
.order-code-value { font-size: 28px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); letter-spacing: 3px; }

.confirmation-details { max-width: 540px; margin: 0 auto 36px; padding: 28px; background: var(--bg-surface); border-radius: var(--radius-md); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-sm); text-align: left; }
.conf-row         { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.conf-row:last-child { border-bottom: none; }
.conf-label       { font-size: 13px; color: var(--text-muted); width: 120px; flex-shrink: 0; padding-top: 2px; }
.conf-value       { font-size: 14px; font-weight: 600; flex: 1; color: var(--text-primary); }

/* ── Status Badges ─────────────────────────────────────────── */
.status-badge {
    display: inline-block; padding: 4px 12px;
    border-radius: 20px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.status-pending    { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; }
.status-processing { background: var(--color-secondary-bg); color: #047857; border: 1px solid rgba(0,201,167,0.3); }
.status-delivered  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.status-cancelled  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Admin Styles ──────────────────────────────────────────── */
.admin-wrapper { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-main); }
.admin-content { flex: 1; padding: 36px 0 60px; }

/* Tabs */
.admin-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border-light); margin-bottom: 28px; }
.admin-tab {
    padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
    color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: var(--transition); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    display: flex; align-items: center; gap: 8px;
}
.admin-tab:hover { color: var(--text-primary); background: var(--color-primary-bg); }
.admin-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: var(--color-primary-bg); }

/* Stats */
/* 190px meant five cards needed 1014px but the admin content area is 974px,
   so the fifth wrapped onto a row of its own and stretched full width — which
   reads as a layout fault rather than a wrap. 165px fits five across at that
   width and still degrades to four, three and two on smaller screens. */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card {
    padding: 22px 24px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-primary);
}
.stat-card-icon { font-size: 50px; margin-bottom: 5px; line-height: 40px; }
.stat-label     { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
.stat-value     { font-size: 30px; font-weight: 800; font-family: var(--font-heading); color: var(--color-primary); }

/* Data Table */
.table-wrapper { overflow-x: auto; }
.data-table    { width: 100%; border-collapse: collapse; }
.data-table th {
    padding: 12px 16px; text-align: left;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); border-bottom: 1.5px solid var(--border-light);
    background: var(--bg-main); white-space: nowrap;
}
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-light); font-size: 14px; vertical-align: middle; }
.data-table tr:hover td { background: var(--bg-main); }
.data-table tr:last-child td { border-bottom: none; }

/* Order items pill */
.items-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--color-primary-bg); border: 1px solid rgba(255,77,109,0.15);
    border-radius: 20px; padding: 3px 10px; font-size: 12px; margin: 2px;
    color: var(--text-primary);
}

/* Order detail expand */
.order-detail-row      { display: none; }
.order-detail-row td   { padding: 0; }
.order-detail-inner    { padding: 20px 24px; background: var(--bg-main); margin: 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-light); }
.order-detail-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; }
.order-detail-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 4px; }
.order-detail-field p  { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* Status select */
.status-select {
    padding: 8px 12px; border-radius: var(--radius-xs);
    background: var(--bg-surface); border: 1.5px solid var(--border-light);
    color: var(--text-primary); font-size: 13px; font-family: var(--font-body); cursor: pointer;
}
.status-select:focus { outline: none; border-color: var(--color-primary); }

/* Action group */
.action-group { display: flex; gap: 8px; align-items: center; }

/* Btn small */
.btn-sm { padding: 7px 14px; font-size: 12px; font-weight: 600; border-radius: var(--radius-xs); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 5px; }
.btn-sm-primary { background: var(--grad-primary); color: white; border: none; box-shadow: 0 2px 8px rgba(255,77,109,0.25); }
.btn-sm-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,77,109,0.35); }
.btn-sm-outline { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); }
.btn-sm-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }
.btn-sm-danger  { background: #fff5f5; border: 1px solid #fecaca; color: var(--color-danger); }
.btn-sm-danger:hover  { background: #fee2e2; border-color: var(--color-danger); }

/* Admin page header */
.admin-page-header   { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.admin-page-title    { font-size: 28px; color: var(--text-primary); }
.admin-page-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

/* Admin glass panel  */
.glass-panel {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.glass-panel:hover { border-color: var(--border-color); box-shadow: var(--shadow-card); }

/* Two full-width content panels stacked on the same screen must not touch.
   .glass-panel carries no margin of its own, which went unnoticed for as long
   as every admin tab held exactly one panel. The Staff tab was the first to
   stack two — Owner Account above Staff Logins — and they met with no gap,
   reading as one box with a stray line through it.

   Scoped to .cbi-panel-lg, NOT to .glass-panel generally. The stat cards are
   also .glass-panel and sit in a grid that already spaces them with `gap`; a
   plain `.glass-panel + .glass-panel` rule gave every card after the first a
   top margin and left the first one sitting 24px above the rest of the row. */
.cbi-panel-lg + .cbi-panel-lg,
.cbi-panel-lg + .cbi-panel,
.cbi-panel + .cbi-panel-lg,
.cbi-panel + .cbi-panel { margin-top: 24px; }

/* Form section */
.form-section   { padding: 28px; margin-bottom: 20px; }
.form-section h3 { font-size: 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; color: var(--color-primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ── Login Page ────────────────────────────────────────────── */
.login-page     { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg-main); }
.login-card     { width: 100%; max-width: 420px; padding: 44px; text-align: center; }
.login-icon     { font-size: 52px; margin-bottom: 14px; }
.login-title    { font-size: 28px; margin-bottom: 6px; }
.login-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 30px; }
.login-form     { text-align: left; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--text-primary); padding: 32px 0; margin-top: auto; }
.footer-inner  { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-logo   { font-size: 20px; font-weight: 800; font-family: var(--font-heading); color: white; }
.footer-logo span { color: var(--color-primary-light); }
.footer-copy   { font-size: 13px; color: rgba(255,255,255,0.45); }
.footer-links  { display: flex; gap: 20px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.55); }
.footer-links a:hover { color: var(--color-primary-light); }

/* ── Expand btn (admin) ────────────────────────────────────── */
.expand-btn { cursor: pointer; background: none; border: none; color: var(--color-secondary); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.expand-btn:hover { color: var(--color-primary); }

/* Product form extras */
.emoji-btn {
    font-size: 22px; padding: 8px;
    border-radius: var(--radius-xs);
    background: var(--bg-main); border: 1.5px solid var(--border-light);
    cursor: pointer; transition: var(--transition);
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
}
.emoji-btn:hover, .emoji-btn.selected {
    background: var(--color-primary-bg); border-color: var(--color-primary); transform: scale(1.1);
}
.preview-card { padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.preview-img-wrap {
    width: 140px; height: 140px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; transition: var(--transition);
    background: var(--bg-main); border: 2px dashed var(--border-strong);
    overflow: hidden;
}
.preview-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ── Product Image on Cards ──────────────────────────────── */
/* This is the card's clipping box now that .product-card no longer sets
   overflow:hidden — it contains the photo zoom, the top accent line and the
   sheen sweep, all three of which must stop at the rounded top corners.
   The radius is the card's radius minus its 1.5px border, so the corner
   curve sits just inside the card's own instead of poking through it. */
.product-image-wrap {
    height: 200px;
    overflow: hidden;
    position: relative;
    border-radius: calc(var(--radius-md) - 1.5px) calc(var(--radius-md) - 1.5px) 0 0;
    background: var(--bg-surface-soft);
    display: flex; align-items: center; justify-content: center;
    /* Own stacking context, so the z-indexes below are scoped to this box
       and mean what they say regardless of what the card is doing. */
    isolation: isolate;
}
/* Coloured top accent line. Moved here from .product-card::before when the
   card stopped clipping; it is clipped by this wrap instead, so it still
   follows the rounded corners and looks identical. */
/* z-index is load-bearing, not decoration. On hover the photo below gets
   `transform: scale(1.06)`, and a transformed element paints in the same
   pass as a positioned one with z-index 0 — in TREE ORDER, which puts it
   after this bar. Without the z-index the accent line is painted and then
   covered by the photo for exactly as long as the pointer is on the card,
   so it appeared to vanish on hover. (The same trap hid this line in its
   previous home on .product-card::before, where .product-image-wrap's
   `position: relative` painted over it permanently.) */
.product-image-wrap::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--card-gradient, var(--grad-primary));
    transform-origin: top center;
}
.product-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* The hover zoom on this image is in animations.css — one value, one rule. */

/* Out of stock. The .cbor-oos-ribbon (components.css) marks it; this dims
   the photo so the whole card reads as unavailable at a glance instead of
   only the small button down in the footer. Name/price stay full-strength
   so the card is still readable, not just greyed out. */
.product-card.out-of-stock .product-image-wrap img,
.product-card.out-of-stock .product-image-placeholder {
    filter: grayscale(0.9);
    opacity: 0.5;
}
.product-card.out-of-stock .product-image-wrap::before {
    opacity: 0.3;
}
.product-image-placeholder {
    font-size: 72px; line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.10));
}

/* In-cart counter badge on product cards */
.in-cart-indicator {
    margin-top: 8px;
    font-size: 12px; font-weight: 700;
    color: var(--color-secondary);
    background: var(--color-secondary-bg);
    border: 1px solid rgba(0,201,167,0.3);
    border-radius: 20px;
    padding: 3px 10px;
    display: none;
    align-items: center;
    gap: 4px;
    width: fit-content;
}
.in-cart-indicator.visible { display: inline-flex; }

/* Remove the old emoji wrap ::before gradient hack – product-card::before remains the top accent line */

/* ── "View Cart" navbar button ───────────────────────────── */
.btn-view-cart {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--radius-xl);
    font-size: 13px; font-weight: 700;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer; transition: var(--transition);
    font-family: var(--font-heading);
    box-shadow: var(--shadow-xs);
    position: relative;
}
.btn-view-cart:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.btn-view-cart .cart-badge {
    position: relative;
    top: auto; right: auto;
    background: var(--grad-primary);
    color: white; font-size: 10px; font-weight: 700;
    min-width: 20px; height: 20px;
    border-radius: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none;
    font-family: var(--font-heading);
    transition: var(--transition-bounce);
}
.btn-view-cart .cart-badge.bump { transform: scale(1.4); }

/* ── Product image upload (admin form) ───────────────────── */
.image-upload-box {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-main);
    position: relative;
}
.image-upload-box:hover, .image-upload-box.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}
.image-upload-box input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.image-upload-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.5; }
.image-upload-label { font-size: 13px; color: var(--text-secondary); }
.image-upload-label strong { color: var(--color-primary); }
.image-current-thumb {
    width: 100%; max-width: 240px; border-radius: var(--radius-sm);
    margin: 12px auto 0; display: block;
    object-fit: cover; border: 1.5px solid var(--border-light);
}

/* ── Gallery Page ─────────────────────────────────────────── */
.gallery-page { padding: 64px 0 80px; background: var(--bg-main); }
.gallery-grid {
    columns: 3;
    column-gap: 18px;
    gap: 18px;
}
.gallery-item {
    break-inside: avoid;
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: block;
    transition: var(--transition);
    border: 1.5px solid var(--border-light);
    box-shadow: var(--shadow-xs);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--border-color); }
.gallery-item img {
    width: 100%; height: auto; display: block;
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,10,20,0.65) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.3s ease;
    display: flex; align-items: flex-end; padding: 14px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-caption {
    font-size: 13px; font-weight: 600; color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.gallery-empty {
    text-align: center; padding: 80px 20px; color: var(--text-muted);
}
.gallery-empty-icon { font-size: 64px; opacity: 0.25; margin-bottom: 14px; }

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(10,0,15,0.92);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}
.lightbox-overlay.open { opacity: 1; pointer-events: all; }
.lightbox-inner {
    position: relative;
    max-width: 90vw; max-height: 90vh;
    animation: lightboxIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.lightbox-inner img {
    max-width: 90vw; max-height: 85vh;
    object-fit: contain; border-radius: var(--radius-sm);
    display: block; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.lightbox-caption {
    text-align: center; color: rgba(255,255,255,0.8);
    font-size: 14px; margin-top: 14px; font-weight: 500;
}
.lightbox-close {
    position: absolute; top: -16px; right: -16px;
    width: 38px; height: 38px; border-radius: 50%;
    background: white; color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    transition: var(--transition);
}
.lightbox-close:hover { background: var(--color-primary); color: white; transform: scale(1.1); }
@keyframes lightboxIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Gallery admin grid */
.admin-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.admin-gallery-item {
    border-radius: var(--radius-sm); overflow: hidden;
    border: 1.5px solid var(--border-light);
    position: relative; background: var(--bg-main);
    box-shadow: var(--shadow-xs);
}
.admin-gallery-item img { width: 100%; height: 130px; object-fit: cover; display: block; }
.admin-gallery-item-meta { padding: 8px 10px; }
.admin-gallery-item-caption { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-gallery-del {
    position: absolute; top: 6px; right: 6px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(239,68,68,0.9); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer; border: none;
    opacity: 0; transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.admin-gallery-item:hover .admin-gallery-del { opacity: 1; }

/* ── About / Contact Page ─────────────────────────────────── */
.about-page { padding: 0; background: var(--bg-main); }

.about-hero {
    background: var(--grad-hero);
    padding: 80px 0 100px;
    position: relative; overflow: hidden;
    text-align: center;
}
.about-hero::before {
    content: '';
    position: absolute; bottom: -2px; left: 0; right: 0;
    height: 60px; background: var(--bg-main);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.about-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 6px 18px; border-radius: 30px;
    font-size: 12px; font-weight: 700;
    color: rgba(255,255,255,0.95); margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.about-hero h1 { color: white; font-size: 50px; margin-bottom: 16px; position: relative; z-index: 1; }
.about-hero p  { color: rgba(255,255,255,0.85); font-size: 17px; max-width: 560px; margin: 0 auto; line-height: 1.7; position: relative; z-index: 1; }

.about-story-section { padding: 64px 0; }
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-story-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/3;
    background: var(--bg-surface-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 100px;
}
.about-story-img img { width: 100%; height: 100%; object-fit: cover; }
.about-story-content .section-label { margin-bottom: 14px; }
.about-story-content h2 { font-size: 36px; margin-bottom: 18px; }
.about-story-content p { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 16px; }

/* Contact & Map */
.contact-map-section { padding: 64px 0; background: var(--bg-surface); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.map-container {
    border-radius: var(--radius-md); overflow: hidden;
    border: 1.5px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    height: 380px;
}
.map-container iframe { width: 100%; height: 100%; border: none; display: block; }

/* Social Buttons */
.social-links-section { padding: 48px 0; background: var(--bg-main); }
.social-buttons-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.social-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px; border-radius: var(--radius-xl);
    font-size: 14px; font-weight: 700;
    font-family: var(--font-heading);
    text-decoration: none; transition: var(--transition);
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
}
.social-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.social-btn-instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: white; }
.social-btn-whatsapp  { background: #25D366; color: white; }
.social-btn-tiktok    { background: #000000; color: white; border-color: #333; }
.social-btn-facebook  { background: #1877F2; color: white; }

/* ── New Home / Landing Page ─────────────────────────────── */
.landing-hero {
    background: var(--grad-hero);
    padding: 90px 0 130px;
    position: relative; overflow: hidden;
    text-align: center;
}
.landing-hero::after {
    content: '';
    position: absolute; bottom: -2px; left: 0; right: 0;
    height: 70px; background: var(--bg-main);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.landing-hero-inner { position: relative; z-index: 1; }
.landing-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 6px 18px; border-radius: 30px;
    font-size: 12px; font-weight: 700;
    color: rgba(255,255,255,0.95); margin-bottom: 24px;
    text-transform: uppercase; letter-spacing: 0.08em;
    display: inline-block;
}
.landing-title { font-size: 68px; color: white; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.12); line-height: 1.08; }
.landing-subtitle { font-size: 18px; color: rgba(255,255,255,0.85); margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.landing-cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Flavour showcase section */
.flavours-section { padding: 80px 0; background: var(--bg-main); }
.flavour-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 40px;
}
.flavour-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1.5px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-align: center;
    /* .flavour-cards-grid is CSS Grid, which stretches every card in a row
       to match the tallest one. Without this, .flavour-card-body stayed at
       its own content height and the stretched extra space showed up as a
       blank white gap below it — invisible before the card had a colour
       tint, obvious once it did. Same fix .product-card/.product-body
       already use on the order page. */
    display: flex;
    flex-direction: column;
}
.flavour-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--border-color); }
.flavour-card-img {
    height: 180px; overflow: hidden;
    background: var(--bg-surface-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 80px;
}
.flavour-card-img img { width: 100%; height: 100%; object-fit: cover; }
.flavour-card-body { padding: 18px 20px; flex-grow: 1; }
.flavour-card-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.flavour-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* Flavour card colour, take two — each card's OWN official brand colour
   (Brand Guidelines 2026, Secondary Colours) rather than a made-up
   rotation. The class is chosen in PHP by matching the product name; a
   flavour not in the guideline gets no class and the card stays plain.
   Kept light (12% mix) on purpose: these are proper mid-saturation brand
   colours, not pastels, and a full-strength wash was already too much
   with lighter made-up ones. One block, easy to revert again. */
.flavour-card-img { position: relative; background: var(--flavour-tint, var(--bg-surface-soft)); }
.flavour-card-body { background: var(--flavour-tint, transparent); }
.flavour-card-img::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 1;
    background: var(--flavour-accent, transparent);
}
.flavour-card-img:not(:has(img)) {
    background: color-mix(in srgb, var(--flavour-tint, var(--bg-surface-soft)) 30%, var(--bg-surface));
}

/* Same treatment on the full menu (pages/order.php) — .product-image-wrap
   already has its own coloured top line driven by --card-gradient (see
   "Product Image on Cards" below), falling back to the plain brand
   gradient, so a flavour class just needs to feed it --flavour-accent
   instead of adding a second accent-line mechanism. */
[class*="cbhm-flavour-"] { --card-gradient: var(--flavour-accent); }
.product-body { background: var(--flavour-tint, transparent); }
.product-image-wrap { background: var(--flavour-tint, var(--bg-surface-soft)); }
.product-image-wrap:not(:has(img)) {
    background: color-mix(in srgb, var(--flavour-tint, var(--bg-surface-soft)) 30%, var(--bg-surface));
}

.cbhm-flavour-afghan-meva         { --flavour-tint: color-mix(in srgb, #B13952 12%, var(--bg-surface)); --flavour-accent: #B13952; }
.cbhm-flavour-rajbhog             { --flavour-tint: color-mix(in srgb, #3F5EA8 12%, var(--bg-surface)); --flavour-accent: #3F5EA8; }
.cbhm-flavour-mava-malai          { --flavour-tint: color-mix(in srgb, #24635E 12%, var(--bg-surface)); --flavour-accent: #24635E; }
.cbhm-flavour-american-dry-fruits { --flavour-tint: color-mix(in srgb, #D4492D 12%, var(--bg-surface)); --flavour-accent: #D4492D; }
.cbhm-flavour-kesar-pista         { --flavour-tint: color-mix(in srgb, #EC8A00 12%, var(--bg-surface)); --flavour-accent: #EC8A00; }
.cbhm-flavour-cookies-cream       { --flavour-tint: color-mix(in srgb, #613113 12%, var(--bg-surface)); --flavour-accent: #613113; }
.cbhm-flavour-roasted-almond      { --flavour-tint: color-mix(in srgb, #308780 12%, var(--bg-surface)); --flavour-accent: #308780; }
.cbhm-flavour-pan-masala          { --flavour-tint: color-mix(in srgb, #70974E 12%, var(--bg-surface)); --flavour-accent: #70974E; }
.cbhm-flavour-kaju-gulkand        { --flavour-tint: color-mix(in srgb, #C07086 12%, var(--bg-surface)); --flavour-accent: #C07086; }
.cbhm-flavour-naked-coconut       { --flavour-tint: color-mix(in srgb, #589A3D 12%, var(--bg-surface)); --flavour-accent: #589A3D; }
.cbhm-flavour-fresh-sitafal       { --flavour-tint: color-mix(in srgb, #74578C 12%, var(--bg-surface)); --flavour-accent: #74578C; }
.cbhm-flavour-kaju-draksh         { --flavour-tint: color-mix(in srgb, #48789A 12%, var(--bg-surface)); --flavour-accent: #48789A; }

/* Story section */
.story-section {
    padding: 80px 0;
    background: var(--bg-surface);
    position: relative; overflow: hidden;
}
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-img-block {
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 440px;
    background: var(--bg-surface-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 120px;
    box-shadow: var(--shadow-lg);
}
.story-img-block img { width: 100%; height: 100%; object-fit: cover; }
.story-content .section-label { margin-bottom: 16px; }
.story-content h2 { font-size: 40px; margin-bottom: 20px; }
.story-content p { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 14px; }
.story-highlights { display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.story-highlight {
    display: flex; align-items: center; gap: 10px;
    background: var(--color-primary-bg);
    border: 1px solid rgba(255,77,109,0.15);
    border-radius: var(--radius-sm); padding: 12px 18px;
    flex: 1; min-width: 140px;
}
.story-highlight-icon { font-size: 24px; }
.story-highlight-text { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* Landing CTA Section */
.landing-cta-section {
    padding: 80px 0;
    background: var(--grad-primary);
    text-align: center;
    position: relative; overflow: hidden;
}
.landing-cta-section::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 240px; height: 240px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.landing-cta-section h2 { font-size: 38px; color: white; margin-bottom: 14px; position: relative; z-index: 1; }
.landing-cta-section p  { font-size: 16px; color: rgba(255,255,255,0.85); margin-bottom: 32px; position: relative; z-index: 1; }
.btn-cta-white {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 36px; border-radius: var(--radius-xl);
    font-size: 16px; font-weight: 700;
    background: white; color: var(--color-primary);
    border: none; cursor: pointer;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    transition: var(--transition);
    font-family: var(--font-heading);
    position: relative; z-index: 1;
}
.btn-cta-white:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.20); }

/* ── Enhanced Footer ─────────────────────────────────────── */
.footer-enhanced {
    background: var(--text-primary);
    padding: 48px 0 28px;
    margin-top: auto;
}
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand p {
    font-size: 13px; color: rgba(255,255,255,0.5);
    line-height: 1.7; margin-top: 12px; max-width: 240px;
}
.footer-col h4 {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4); margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.6); transition: var(--transition); }
.footer-col ul li a:hover { color: var(--color-primary-light); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6); font-size: 15px;
    transition: var(--transition);
}
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.footer-bottom-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px; flex-wrap: wrap; gap: 12px;
}
.footer-bottom-bar .footer-logo { font-size: 20px; font-weight: 800; font-family: var(--font-heading); color: white; }
.footer-bottom-bar .footer-logo span { color: var(--color-primary-light); }
.footer-copy-text { font-size: 12px; color: rgba(255,255,255,0.35); }
/* The "Made with <heart>" credit. The surrounding copy sits at 35% white, which
   would leave the heart almost invisible, so it keeps its own warmer colour. */
.cb-footer-heart { color: #e0555f; font-size: 11px; vertical-align: baseline; }

/* ── Cart item image ─────────────────────────────────────── */
.cart-item-img {
    width: 50px; height: 50px; border-radius: var(--radius-sm);
    object-fit: cover; flex-shrink: 0;
    border: 1px solid var(--border-light);
    background: var(--bg-main);
}
.cart-item-img-placeholder {
    width: 50px; height: 50px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; flex-shrink: 0;
    background: var(--color-primary-bg);
    border: 1px solid rgba(255,77,109,0.12);
}

/* ── Admin gallery upload ─────────────────────────────────── */
.gallery-upload-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-main);
    position: relative;
    margin-bottom: 24px;
}
.gallery-upload-zone:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.gallery-upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ── Categories admin list ───────────────────────────────── */
.cat-list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}
.cat-list-item:last-child { border-bottom: none; }
.cat-list-item:hover { background: var(--bg-main); }
.cat-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }

/* ── Product Variant Picker Modal ────────────────────────── */
.variant-picker-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(26, 10, 20, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
}
.variant-picker-overlay.open { opacity: 1; pointer-events: all; }

.variant-picker-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
    max-width: 400px; width: 100%;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
    position: relative;
}
.variant-picker-overlay.open .variant-picker-card {
    transform: translateY(0) scale(1);
}

.variant-picker-img {
    width: 72px; height: 72px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    margin: 0 auto 14px;
    display: block;
    border: 2px solid var(--border-light);
}
.variant-picker-emoji {
    font-size: 52px;
    text-align: center;
    margin-bottom: 10px;
    display: block;
}
.variant-picker-title {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 800;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 6px;
}
.variant-picker-label {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
}
.variant-pills {
    display: flex; flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
}
.variant-pill {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background: var(--bg-main);
    cursor: pointer;
    transition: var(--transition-bounce);
    min-width: 110px;
    gap: 4px;
}
.variant-pill:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.variant-pill.selected {
    border-color: var(--color-primary);
    background: var(--grad-primary);
}
.variant-pill.selected .variant-pill-name,
.variant-pill.selected .variant-pill-price { color: white; }
.variant-pill-name {
    font-size: 15px; font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-primary);
}
.variant-pill-price {
    font-size: 17px; font-weight: 800;
    font-family: var(--font-heading);
    color: var(--color-primary);
}
.variant-pill:hover .variant-pill-price { color: var(--color-primary); }
.variant-pill.selected .variant-pill-price { color: white; }

.variant-picker-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-main); border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--text-muted); cursor: pointer;
    transition: var(--transition);
}
.variant-picker-close:hover { background: #fff5f5; color: var(--color-danger); border-color: var(--color-danger); }

/* Price range display on product card */
.product-price-range {
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    margin-top: 2px;
    font-family: var(--font-heading);
}
.product-price-from {
    font-size: 12px; color: var(--text-muted); font-weight: 500;
    font-family: var(--font-body);
    margin-bottom: 2px;
}

/* ── Nut Allergy Tag ─────────────────────────────────────── */
.allergy-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.allergy-tag i { font-size: 10px; color: #d97706; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes floatingCard {
    0%, 100% { transform: translateY(0)   rotate(1deg); }
    50%       { transform: translateY(-14px) rotate(1deg); }
}
@keyframes floatBubble {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(8px, -12px); }
}
@keyframes bounceIn {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first, modern standards
   Breakpoints: 1100 | 960 | 768 | 640 | 480 | 380
══════════════════════════════════════════════════════════ */

/* ── Hamburger button (always rendered, hidden on desktop) ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px; height: 42px;
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-light);
    cursor: pointer;
    z-index: 250;
    transition: var(--transition);
    flex-shrink: 0;
}
.nav-hamburger:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.nav-hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ─────────────────────────────────────── */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 240;
    background: rgba(26,10,20,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-drawer.open {
    opacity: 1;
    pointer-events: all;
}
.mobile-nav-panel {
    position: absolute;
    top: 0; right: 0;
    width: 280px; max-width: 88vw;
    height: 100%;
    background: var(--bg-surface);
    box-shadow: -8px 0 40px rgba(26,10,20,0.15);
    padding: 80px 28px 40px;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
}
.mobile-drawer.open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-links { list-style: none; margin-bottom: 28px; }
.mobile-nav-links li { border-bottom: 1px solid var(--border-light); }
.mobile-nav-links a {
    display: block;
    padding: 15px 4px;
    font-size: 16px; font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition);
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--color-primary); padding-left: 8px; }
.mobile-nav-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mobile-nav-actions .btn-primary,
.mobile-nav-actions .btn-view-cart { width: 100%; justify-content: center; }
.mobile-drawer-close {
    position: absolute; top: 20px; right: 20px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-main); border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text-muted); cursor: pointer;
    transition: var(--transition);
}
.mobile-drawer-close:hover { background: #fff5f5; color: var(--color-danger); }

/* Note: All responsive and mobile media queries have been moved to responsive.css */


/* ══════════════════════════════════════════════════════════
   Trade account button (site header)
   Rendered by trade_nav_button.php, only for logged-in trade
   partners. Sits beside the Order Now / View Cart button.
   ══════════════════════════════════════════════════════════ */
.trade-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: var(--color-primary-bg, rgba(199, 136, 41, 0.08));
    border: 1px solid rgba(199, 136, 41, 0.28);
    text-decoration: none;
    color: var(--color-primary, #c78829);
    transition: background 0.25s ease, border-color 0.25s ease,
                transform 0.25s ease, box-shadow 0.25s ease;
}
.trade-nav-btn:hover {
    background: rgba(199, 136, 41, 0.16);
    border-color: rgba(199, 136, 41, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(199, 136, 41, 0.18);
}
.trade-nav-btn:active { transform: translateY(0); }

.trade-nav-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,
                var(--color-primary, #c78829),
                var(--color-primary-dark, #a06d18));
    color: #fff;
    font-size: 13px;
}

.trade-nav-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    max-width: 150px;
}
.trade-nav-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
}
.trade-nav-name {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On narrow screens keep just the avatar so the header does not wrap. */
@media (max-width: 900px) {
    .trade-nav-text { display: none; }
    .trade-nav-btn  { padding: 5px; }
}

/* ── Icon scale inside the old emoji slots ──────────────────────────────
   These boxes were sized for emoji, which sit inside their em box with
   space around them. A Font Awesome glyph fills that box completely, so a
   like-for-like swap made every one of them look oversized — a 72px
   product placeholder became a 72px solid shape.

   0.5em is relative to each box's own font-size, so one rule keeps every
   slot proportional: half of 72px, half of 26px, and so on. Anything that
   sits inline next to text is handled separately at 0.8em, because half
   the text size would be too small to read on paper. */
.logo-emoji > i,
.logo-emoji > svg { font-size: 0.5em; width: 1em; height: 1em; }
.hero-card-emoji > i,
.hero-card-emoji > svg { font-size: 0.5em; width: 1em; height: 1em; }
.product-emoji > i,
.product-emoji > svg { font-size: 0.5em; width: 1em; height: 1em; }
.cart-empty-icon > i,
.cart-empty-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.cart-item-emoji > i,
.cart-item-emoji > svg { font-size: 0.5em; width: 1em; height: 1em; }
.toast-icon > i,
.toast-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.osi-emoji > i,
.osi-emoji > svg { font-size: 0.5em; width: 1em; height: 1em; }
.confirmation-icon > i,
.confirmation-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.stat-card-icon > i,
.stat-card-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.login-icon > i,
.login-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.emoji-btn > i,
.emoji-btn > svg { font-size: 0.5em; width: 1em; height: 1em; }
.product-image-placeholder > i,
.product-image-placeholder > svg { font-size: 0.5em; width: 1em; height: 1em; }
.image-upload-icon > i,
.image-upload-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.gallery-empty-icon > i,
.gallery-empty-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.story-highlight-icon > i,
.story-highlight-icon > svg { font-size: 0.5em; width: 1em; height: 1em; }
.cart-item-img-placeholder > i,
.cart-item-img-placeholder > svg { font-size: 0.5em; width: 1em; height: 1em; }
.variant-picker-emoji > i,
.variant-picker-emoji > svg { font-size: 0.5em; width: 1em; height: 1em; }