/* ============================================================
   KITCHEN LAB MALTA — base.css
   CSS custom properties, reset, typography, body
   ============================================================ */

/* ── Dark theme (default) ──────────────────────────────────── */
:root {
    /* ── Page backgrounds ─────────────────────────────────────── */
    --c-bg: #1A0E05;
    --c-bg-mid: #211308;
    --c-bg-light: #2C1A0E;
    --c-bg-hover: #33200F;
    --c-footer-bg: #0D0602;
    /* ── Brand colour (constant) ──────────────────────────────── */
    --c-red: #E8391C;
    --c-red-dark: #C42E14;
    --c-red-muted: rgba(232, 57, 28, 0.15);
    /* ── Text on dark backgrounds ─────────────────────────────── */
    --c-text: #FFFFFF;
    --c-text-muted: #7A6A5E;
    --c-text-faint: #9A8A7E;
    --c-text-mid: rgba(255,255,255,0.55);
    --c-text-soft: rgba(255,255,255,0.6);
    --c-text-dim: rgba(255,255,255,0.45);
    --c-text-dimmer: rgba(255,255,255,0.3);
    --c-text-ghost: rgba(255,255,255,0.07);
    --c-text-tagline: rgba(255,255,255,0.7);
    --c-text-feature: rgba(255,255,255,0.75);
    /* ── Surfaces (cards, panels on dark bg) ──────────────────── */
    --c-surface: #ffffff;
    --c-surface-warm: #f8f7f5;
    --c-surface-alt: #f0eeeb;
    --c-surface-hover: rgba(255,255,255,0.015);
    /* ── Text ON light surfaces (cards) ──────────────────────── */
    --c-on-surface: #0f0804;
    --c-on-surface-mid: #5a4e46;
    --c-on-surface-muted: #6a5a52;
    --c-on-surface-faint: #9a8a7e;
    /* ── Borders on dark backgrounds ─────────────────────────── */
    --border: rgba(255,255,255,0.08);
    --border-mid: rgba(255,255,255,0.12);
    --border-strong: rgba(255,255,255,0.18);
    /* ── Borders on light surfaces ───────────────────────────── */
    --c-border-light: #e8e4e0;
    --c-border-lighter: #eeebe6;
    --c-border-card: #ccc;
    /* ── Swatch borders ──────────────────────────────────────── */
    --c-swatch-border: rgba(255,255,255,0.18);
    --c-swatch-hover: rgba(255,255,255,0.35);
    /* ── Nav + overlays ──────────────────────────────────────── */
    --c-nav-bg: rgba(26,14,5,0.96);
    --c-search-bg: rgba(17,8,2,0.97);
    --c-drawer-bg: rgba(17,8,2,0.98);
    --c-cursor: #ffffff;
    /* ── Hero overlays ────────────────────────────────────────── */
    --c-hero-grad-r: rgba(26,14,5,0.35);
    --c-hero-grad-b: rgba(26,14,5,0.25);
    --c-hero-dark: rgba(26,14,5,0.97);
    --c-hero-mid: rgba(26,14,5,0.6);
    --c-hero-light: rgba(26,14,5,0.1);
    --c-hero-mob1: rgba(26,14,5,0.72);
    --c-hero-mob2: rgba(26,14,5,0.45);
    --c-hero-mob3: rgba(26,14,5,0.85);
    --c-cat-dark: rgba(26,14,5,1);
    --c-cat-mid: rgba(26,14,5,0.3);
    /* ── Thumb + filter placeholder bg ──────────────────────── */
    --c-filter-handle: rgba(255,255,255,0.2);
    --c-filter-label: rgba(255,255,255,0.7);
    /* Kept for compatibility */
    --c-brown: #1A0E05;
    --c-brown-mid: #211308;
    --c-brown-light: #2C1A0E;
    --c-white: #FFFFFF;
    --c-cream: #F5EFE8;
    --c-muted: #7A6A5E;
    --c-muted-light: #9A8A7E;
    --c-muted-faint: rgba(255,255,255,0.35);
    /* ── Typography ───────────────────────────────────────────── */
    --f-serif: 'Cormorant', Georgia, serif;
    --f-sans: 'Outfit', system-ui, sans-serif;
    /* ── Spacing ──────────────────────────────────────────────── */
    --gutter: 64px;
    --nav-h: 96px;
    /* ── Easing ───────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.16,1,0.3,1);
    --ease-in: cubic-bezier(0.7,0,0.84,0);
    --ease-inout: cubic-bezier(0.87,0,0.13,1);
    --t-fast: 0.2s;
    --t-mid: 0.4s;
    --t-slow: 0.8s;
    --t-hero: 1.1s;
    /* ── Theme toggle icon ───────────────────────────────────── */
    --theme-icon-opacity: 1;
}

/* ── Light theme overrides ─────────────────────────────────── */
[data-theme="light"] {
    /* Backgrounds */
    --c-bg: #FAF8F4;
    --c-bg-mid: #F0EBE1;
    --c-bg-light: #E8E1D6;
    --c-bg-hover: #DFD7CA;
    --c-footer-bg: #1A0E05; /* footer always dark */
    /* Text on page background */
    --c-text: #1A0E05;
    --c-text-muted: #6a5a4e;
    --c-text-faint: #8a7a6e;
    --c-text-mid: rgba(26,14,5,0.55);
    --c-text-soft: rgba(26,14,5,0.65);
    --c-text-dim: rgba(26,14,5,0.5);
    --c-text-dimmer: rgba(26,14,5,0.35);
    --c-text-ghost: rgba(26,14,5,0.06);
    --c-text-tagline: rgba(26,14,5,0.65);
    --c-text-feature: rgba(26,14,5,0.8);
    /* Surfaces (cards stay white — same as dark mode) */
    --c-surface: #ffffff;
    --c-surface-warm: #f8f7f5;
    --c-surface-alt: #f0eeeb;
    --c-surface-hover: rgba(26,14,5,0.025);
    /* Borders on page bg */
    --border: rgba(26,14,5,0.09);
    --border-mid: rgba(26,14,5,0.14);
    --border-strong: rgba(26,14,5,0.2);
    /* Borders on light surfaces (cards — slightly darker for light bg) */
    --c-border-light: #d8d2c8;
    --c-border-lighter: #e2dbd0;
    --c-border-card: #bbb;
    /* Swatch borders */
    --c-swatch-border: rgba(26,14,5,0.18);
    --c-swatch-hover: rgba(26,14,5,0.35);
    /* Nav + overlays */
    --c-nav-bg: rgba(250,248,244,0.96);
    --c-search-bg: rgba(245,242,236,0.98);
    --c-drawer-bg: rgba(240,235,225,0.99);
    --c-cursor: #1A0E05;
    /* Hero gradients — lighter overlay on light mode */
    --c-hero-grad-r: rgba(250,248,244,0.3);
    --c-hero-grad-b: rgba(250,248,244,0.2);
    --c-hero-dark: rgba(250,248,244,0.88);
    --c-hero-mid: rgba(250,248,244,0.55);
    --c-hero-light: rgba(250,248,244,0.1);
    --c-hero-mob1: rgba(250,248,244,0.65);
    --c-hero-mob2: rgba(250,248,244,0.4);
    --c-hero-mob3: rgba(250,248,244,0.75);
    --c-cat-dark: rgba(250,248,244,0.95);
    --c-cat-mid: rgba(250,248,244,0.3);
    /* Filter drawer handle */
    --c-filter-handle: rgba(26,14,5,0.15);
    --c-filter-label: rgba(26,14,5,0.7);
    /* Compatibility aliases */
    --c-brown: #FAF8F4;
    --c-brown-mid: #F0EBE1;
    --c-brown-light: #E8E1D6;
    --c-muted: #6a5a4e;
    --c-muted-light: #8a7a6e;
    --c-muted-faint: rgba(26,14,5,0.35);
}

/* ============================================================
   BOOTSTRAP OVERRIDES — remove default blue states site-wide
   ============================================================ */

/* 1. Links: no Bootstrap blue on hover */
a,
a:hover {
    color: inherit;
}

/* 2. Point Bootstrap's own button variables at the brand colours,
      so any state we haven't styled falls back to red, not blue */
.btn {
    --bs-btn-focus-box-shadow: none;
}

.btn-primary {
    --bs-btn-bg: var(--c-red);
    --bs-btn-border-color: var(--c-red);
    --bs-btn-hover-bg: var(--c-red-dark);
    --bs-btn-hover-border-color: var(--c-red-dark);
    --bs-btn-active-bg: var(--c-red-dark);
    --bs-btn-active-border-color: var(--c-red-dark);
    --bs-btn-disabled-bg: var(--c-red);
    --bs-btn-disabled-border-color: var(--c-red);
}

/* 3. No blue glow on clicked buttons / inputs */
.btn:focus,
.btn:active,
.btn:active:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--border-mid);
}

.form-check-input:checked {
    background-color: var(--c-red);
    border-color: var(--c-red);
}

/* 4. No blue tap flash on mobile */
html {
    -webkit-tap-highlight-color: transparent;
}

/* 5. Keep a visible focus ring for keyboard users only, in the brand
      colour. :focus-visible doesn't trigger on mouse clicks, so this
      never shows when clicking. */
:focus {
    outline: none;
}

:focus-visible {
    outline: 1px solid var(--c-red);
    outline-offset: 3px;
}

/* Bootstrap 5.0/5.1 hard-codes blue on .btn-primary states — override them */
.btn-primary:hover {
    border-color: var(--c-red-dark);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
    background-color: var(--c-red);
    border-color: var(--c-red);
    color: #fff;
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--c-red-dark);
    border-color: var(--c-red-dark);
    color: #fff;
}

    /* ...and the blue glow when active + focused */
    .btn-check:active + .btn-primary:focus,
    .btn-check:checked + .btn-primary:focus,
    .btn-primary.active:focus,
    .btn-primary:active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: none;
    }

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

img, video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}

input, textarea, select {
    font: inherit;
}

/* ── Body ──────────────────────────────────────────────────── */
body {
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-serif);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(64px,7vw,112px);
}

h2 {
    font-size: clamp(40px,4.5vw,72px);
}

h3 {
    font-size: clamp(24px,2.5vw,36px);
}

h4 {
    font-family: var(--f-sans);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
}

h5 {
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--c-text-muted);
}

    p + p {
        margin-top: 18px;
    }

em {
    font-style: italic;
}

strong {
    font-weight: 500;
    color: var(--c-text);
}

/* ── Utilities ─────────────────────────────────────────────── */
.text-red {
    color: var(--c-red);
}

.text-white {
    color: var(--c-text);
}

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Noise overlay ─────────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.022;
    pointer-events: none;
    z-index: 9000;
}

[data-theme="light"] body::after {
    opacity: 0.015;
}

::selection {
    background: var(--c-red);
    color: #fff;
}

/* ── Responsive base ───────────────────────────────────────── */
@media (hover:none),(pointer:coarse) {
    body {
        cursor: auto;
    }

    .cursor, .cursor-ring {
        display: none;
    }
}

@media (max-width:1199px) {
    :root {
        --gutter: 40px;
    }
}

/* ============================================================
   GLOBAL FIX — Swiper carousels inside CSS Grid or Flexbox
   ------------------------------------------------------------
   Root cause (confirmed on the product-detail gallery, then again
   on the variants carousel): CSS Grid and Flexbox items have an
   IMPLICIT min-width:auto, meaning they refuse to shrink below
   their content's natural, unconstrained size. Swiper's own base
   CSS sets flex-shrink:0 on every .swiper-slide. Combine the two:
   before width:100% rules fully apply (or the instant real images
   load in at native pixel dimensions), a slide's — or several
   summed slides' — natural image width becomes a minimum the
   container must accommodate, and that demand propagates up
   through .swiper-wrapper -> the carousel root -> whatever
   grid/flex ancestor it sits in, ballooning that ancestor (and
   everything else inside it) to millions of pixels.

   v1 of this fix only targeted the literal class "swiper" — but
   this site's carousels use several different root class names
   (subSwiper, compSwipper, recentSwipper, thumbnailSwiper,
   swiperCategories, etc.), none of which carry the literal
   "swiper" class, so v1 missed all of them. This version uses an
   attribute selector to catch ANY class containing "wiper"
   case-sensitively-ish (covers Swiper/swiper/swipper typo-variant
   alike), rather than requiring us to enumerate every carousel's
   exact class name as new ones get added.
   ============================================================ */
[class*="wiper"] {
    min-width: 0;
}

/* Belt-and-braces at the grid-item level: ANY direct child of
   .detail-hero (currently .detail-gallery and .detail-info) gets
   min-width:0 regardless of what ends up inside it later — this
   is what actually stops a blowout deep inside one column from
   inflating the whole grid track and dragging unrelated sibling
   content (price, warranties, buttons) along with it, same as
   just happened with the variants carousel inside .detail-info. */
.detail-hero > * {
    min-width: 0;
}

/* ============================================================
   KITCHEN LAB MALTA — components.css
   Navigation, footer, buttons, shared UI components
   ============================================================ */

/* ── Section Label ─────────────────────────────────────────── */
.sec-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-red);
    margin-bottom: 20px;
}

    .sec-label::before {
        content: '';
        display: block;
        width: 28px;
        height: 1px;
        background: var(--c-red);
        flex-shrink: 0;
    }

.sec-h2 {
    font-family: var(--f-serif);
    font-size: clamp(40px,4.5vw,72px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

    .sec-h2 em {
        font-style: italic;
        color: var(--c-red);
    }

.red-rule {
    width: 36px;
    height: 1px;
    background: var(--c-red);
    margin-bottom: 32px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 15px 40px;
    border: 1px solid transparent;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    outline: none;
}

    .btn:hover {
        transform: translateY(-2px);
    }

.btn-primary {
    background: var(--c-red) !important;
    color: #fff;
    border-color: var(--c-red);
}

    .btn-primary:hover {
        background: var(--c-red-dark);
        border-color: var(--c-red-dark);
    }

.btn-outline {
    background: transparent;
    color: var(--c-text);
    border-color: var(--border);
}

    .btn-outline:hover {
        border-color: var(--c-text);
        color: var(--c-text);
    }

.btn-white {
    background: #fff;
    color: var(--c-red);
    border-color: var(--c-text);
}

    .btn-white:hover {
        background: var(--c-cream);
    }

.btn-outline-white {
    background: transparent;
    color: var(--c-text);
    border-color: var(--border-mid);
}

    .btn-outline-white:hover {
        color: var(--c-text);
        border-color: var(--c-text);
    }

.btn-ghost {
    background: transparent;
    color: var(--c-text-mid);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

    .btn-ghost::after {
        content: '→';
        transition: transform 0.3s ease;
    }

    .btn-ghost:hover {
        color: var(--c-text);
        transform: none;
    }

        .btn-ghost:hover::after {
            transform: translateX(5px);
        }

/* ── Ghost text link ───────────────────────────────────────── */
.link-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    transition: color 0.3s ease;
}

    .link-ghost::after {
        content: '→';
        transition: transform 0.3s ease;
    }

    .link-ghost:hover {
        color: var(--c-text);
    }

        .link-ghost:hover::after {
            transform: translateX(5px);
        }

/* ── Tag / Badge ───────────────────────────────────────────── */
.tag {
    display: inline-block;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--border);
    color: var(--c-muted-light);
}

.tag-red {
    background: var(--c-red);
    color: #fff;
    border-color: var(--c-red);
}

.tag-new {
    background: var(--c-red);
    color: #fff;
    border-color: var(--c-red);
    font-size: 8.5px;
    padding: 3px 8px;
}

/* ── NAVIGATION ────────────────────────────────────────────── */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    padding: 34px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
    background: transparent;
}

    #navbar.scrolled {
        background: var(--c-nav-bg);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        padding-top: 28px;
        padding-bottom: 28px;
        border-bottom-color: var(--border);
    }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo-mark svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.nav-logo-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.nav-logo-img {
    width: 120px;
    height: auto;
    display: block;
}

/* Dark mode */
.nav-logo-light {
    display: none;
}

/* Light mode */
[data-theme="light"] .nav-logo-dark {
    display: none;
}

[data-theme="light"] .nav-logo-light {
    display: block;
}

.nav-logo-name {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 16.5px;
    letter-spacing: 0.01em;
    color: var(--c-text);
}

.nav-logo-badge {
    background: var(--c-red);
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-top: 4px;
    display: inline-block;
    width: fit-content;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
}

    .nav-links a {
        font-size: 11.5px;
        font-weight: 400;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--c-text-soft);
        transition: color 0.3s ease;
        position: relative;
    }

        .nav-links a:hover {
            color: var(--c-text);
        }

        .nav-links a.active {
            color: var(--c-text);
        }

            .nav-links a.active::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -4px;
                width: 100%;
                height: 1px;
                background: var(--c-red);
            }

.nav-cta {
    background: var(--c-red) !important;
    color: #fff !important;
    padding: 11px 24px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    transition: background 0.3s ease !important;
}

    .nav-cta:hover {
        background: var(--c-red-dark) !important;
    }

    .nav-cta::after {
        display: none !important;
    }

.nav-item-nowrap {
    white-space: nowrap;
}

/* ── Page Hero (inner pages) ───────────────────────────────── */
.page-hero {
    padding: calc(96px + 80px) var(--gutter) 100px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

    .page-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 80% 50%, rgba(232,57,28,0.04) 0%, transparent 70%);
        pointer-events: none;
    }

.page-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
}

.page-hero h1 {
    font-family: var(--f-serif);
    font-size: clamp(52px,6vw,96px);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.025em;
}

    .page-hero h1 em {
        font-style: italic;
        color: var(--c-red);
    }

.page-hero-desc {
    max-width: 340px;
    font-size: 14px;
    color: var(--c-muted-light);
    line-height: 1.85;
    flex-shrink: 0;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 48px;
}

    .breadcrumb a {
        color: var(--c-muted);
        transition: color 0.3s;
    }

        .breadcrumb a:hover {
            color: var(--c-text);
        }

.breadcrumb-sep {
    opacity: 0.35;
}

.breadcrumb-current {
    color: var(--c-text);
}

/* ── FOOTER ────────────────────────────────────────────────── */
#site-footer {
    background: var(--c-footer-bg);
    padding: 88px var(--gutter) 44px;
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 80px;
    margin-bottom: 80px;
}

.footer-brand-desc {
    font-size: 13px;
    color: var(--c-muted);
    line-height: 1.85;
    margin-top: 28px;
    max-width: 270px;
}

.footer-col h4 {
    font-family: var(--f-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 28px;
    line-height: 1;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 0;
}

.footer-col a {
    font-size: 13.5px;
    color: var(--c-text-dim);
    transition: color 0.3s ease;
    line-height: 1.5;
}

    .footer-col a:hover {
        color: var(--c-text);
    }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 44px;
    border-top: 1px solid var(--border);
}

.footer-copy {
    font-size: 12px;
    color: var(--c-muted);
}

.footer-socials {
    display: flex;
    gap: 28px;
}

    .footer-socials a {
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--c-muted);
        transition: color 0.3s;
    }

        .footer-socials a:hover {
            color: var(--c-text);
        }

/* ── Value Bar ─────────────────────────────────────────────── */
.value-bar {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.value-item {
    padding: 52px var(--gutter);
    display: flex;
    gap: 28px;
    align-items: flex-start;
    border-right: 1px solid var(--border);
    transition: background 0.4s ease;
}

    .value-item:last-child {
        border-right: none;
    }

    .value-item:hover {
        background: var(--c-surface-hover);
    }

.value-num {
    font-family: var(--f-serif);
    font-size: 12px;
    color: var(--c-red);
    padding-top: 3px;
    letter-spacing: 0.12em;
    flex-shrink: 0;
}

.value-body h3 {
    font-family: var(--f-sans);
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
}

.value-body p {
    font-size: 13px;
}

/* ── CTA Band ──────────────────────────────────────────────── */
.cta-band {
    background: var(--c-red);
    padding: 120px var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

.cta-band-text h2 {
    font-family: var(--f-serif);
    font-size: clamp(52px,5.5vw,88px);
    font-weight: 300;
    line-height: 0.95;
    color: #fff;
}

.cta-band-text p {
    font-size: 15px;
    color: rgba(255,255,255,0.72);
    margin-top: 18px;
    max-width: 380px;
    line-height: 1.75;
}

.cta-band-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* ── Footer legal + bottom right ───────────────────────────── */
.footer-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

    .footer-legal a {
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-muted);
        transition: color 0.3s;
    }

        .footer-legal a:hover {
            color: #fff;
        }

/* ── Nav search button ─────────────────────────────────────── */
.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}

    .nav-search-btn:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.12);
    }

    .nav-search-btn svg {
        display: block;
    }

[data-theme="light"] .nav-search-btn {
    background: rgba(26, 14, 5, 0.06);
    border-color: rgba(26, 14, 5, 0.18);
    color: rgba(26, 14, 5, 0.55);
}

    [data-theme="light"] .nav-search-btn:hover {
        background: rgba(26, 14, 5, 0.1);
        border-color: rgba(26, 14, 5, 0.35);
        color: #1A0E05;
    }

/* ── Cart trigger button ──────────────────────────────────── */
/* (moved in from nav.css — not specific to the cart sidebar,
   just the nav-level trigger that opens it) */

.nav-cart-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1px solid var(--border-strong);
    padding: 9px 16px;
    font-family: var(--f-sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text);
    cursor: pointer;
    transition: border-color 0.3s;
}

    .nav-cart-btn:hover {
        border-color: var(--c-text);
    }

    .nav-cart-btn i {
        font-size: 13px;
    }

.nav-cart-count {
    background: var(--c-red);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile: icon-only circular button, same visual pattern as .theme-toggle */
.nav-cart-btn--mob {
    position: relative;
    width: 34px;
    height: 34px;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    padding: 0;
    flex-shrink: 0;
}

    .nav-cart-btn--mob .nav-cart-count {
        position: absolute;
        top: -4px;
        right: -4px;
    }

[data-theme="light"] .nav-cart-btn--mob {
    background: rgba(26, 14, 5, 0.06);
    border-color: rgba(26, 14, 5, 0.18);
    color: rgba(26, 14, 5, 0.55);
}

/* ── Search Overlay ────────────────────────────────────────── */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: var(--c-search-bg);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

    .search-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

.search-close {
    position: absolute;
    top: 36px;
    right: 48px;
    background: none;
    border: 1px solid var(--border);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, border-color 0.3s;
}

    .search-close:hover {
        color: #fff;
        border-color: rgba(255,255,255,0.3);
    }

.search-inner {
    width: 100%;
    max-width: 760px;
    padding: 120px 48px 80px;
}

.search-eyebrow {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-red);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .search-eyebrow::before {
        content: '';
        display: block;
        width: 24px;
        height: 1px;
        background: var(--c-red);
    }

.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 20px;
    margin-bottom: 36px;
    transition: border-color 0.3s;
    min-width: 0;
    container-type: inline-size;
}

    .search-input-wrap:focus-within {
        border-bottom-color: var(--c-red);
    }

.search-icon {
    color: var(--c-muted);
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--f-serif);
    font-size: clamp(16px, 4.6cqi, 36px);
    text-overflow: ellipsis;
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.01em;
    min-width: 0;
}

    .search-input::placeholder {
        color: rgba(255,255,255,0.18);
    }

/* Hints */
.search-hints {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.search-hint {
    padding: 7px 16px;
    border: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}

    .search-hint:hover {
        color: #fff;
        border-color: rgba(255,255,255,0.3);
    }

.search-hints.is-hidden {
    display: none;
}
/* Results */
.search-results {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

    .search-result-item:first-child {
        border-top: 1px solid var(--border);
    }

    .search-result-item:hover {
        background: rgba(255,255,255,0.025);
    }

.sri-img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--c-brown-mid);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sri-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        padding: 4px;
    }

.sri-body {
    flex: 1;
    /* Same flexbox min-width:auto overflow bug as [class*="wiper"] and
       .search-input above — .sri-name's long product titles were forcing
       this flex item wider than its share of the row, pushing the price
       off the right edge of the overlay instead of wrapping. */
    min-width: 0;
}

.sri-price {
    flex-shrink: 0;
    font-family: var(--f-serif);
    font-size: 16px;
    font-weight: 300;
    color: var(--c-text);
    white-space: nowrap;
    padding-left: 12px;
}

.sri-brand {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-red);
    margin-bottom: 4px;
}

.sri-name {
    font-family: var(--f-serif);
    font-size: 20px;
    font-weight: 300;
    color: var(--c-text);
    line-height: 1.2;
}

.sri-sub {
    font-size: 12px;
    color: var(--c-muted);
    margin-top: 3px;
}

.sri-arrow {
    color: var(--c-muted);
    font-size: 16px;
    transition: transform 0.2s, color 0.2s;
}

.search-result-item:hover .sri-arrow {
    transform: translate(2px,-2px);
    color: #fff;
}

.search-no-results {
    font-size: 14px;
    color: var(--c-text-muted);
    padding: 32px 0;
}

/* ============================================================
   RESPONSIVE — components (nav, footer, value bar, CTA band)
   ============================================================ */

/* ── Hamburger button ──────────────────────────────────────── */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 601;
}

    .nav-burger span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: var(--c-text);
        transition: transform 0.35s ease, opacity 0.3s ease, width 0.3s ease;
        transform-origin: center;
    }

    .nav-burger.is-open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    .nav-burger.is-open span:nth-child(2) {
        opacity: 0;
        width: 0;
    }

    .nav-burger.is-open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

/* ── Mobile nav drawer ─────────────────────────────────────── */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 599;
    background: var(--c-drawer-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px var(--gutter) 60px;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    visibility: hidden;
}

    .nav-drawer.is-open {
        transform: translateX(0);
        visibility: visible;
    }

.nav-drawer-links {
    list-style: none;
    width: 100%;
    margin-bottom: 52px;
}

    .nav-drawer-links li {
        border-bottom: 1px solid var(--border);
    }

    .nav-drawer-links a {
        display: block;
        padding: 20px 0;
        font-family: var(--f-serif);
        font-size: clamp(32px, 8vw, 48px);
        font-weight: 300;
        color: var(--c-text-feature);
        letter-spacing: -0.01em;
        transition: color 0.3s;
    }

        .nav-drawer-links a:hover {
            color: var(--c-text);
        }

.nav-drawer-cta {
    display: inline-block;
    background: var(--c-red);
    color: #fff;
    padding: 16px 36px;
    font-family: var(--f-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 48px;
}

.nav-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .nav-drawer-contact a {
        font-size: 13px;
        color: var(--c-text-muted);
        transition: color 0.3s;
    }

        .nav-drawer-contact a:hover {
            color: var(--c-text);
        }

.nav-drawer-theme {
    display: none;
}

/* ── Tablet nav ────────────────────────────────────────────── */
@media (max-width: 1071px) {
    .nav-links {
        gap: 33px;
    }
}

@media (max-width: 1024px) {
    #navbar {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .nav-links li:not(:last-child):not(:nth-last-child(2)) a:not(.nav-cta) {
        font-size: 10.5px;
    }

    .nav-links {
        gap: 28px;
    }
}

/* ── Mobile nav ────────────────────────────────────────────── */
@media (max-width: 1274px) {
    #navbar {
        padding: 20px var(--gutter);
    }

        #navbar.scrolled {
            padding: 16px var(--gutter);
        }

    .nav-links {
        display: none;
    }

    .nav-burger {
        display: flex;
    }

    /* prevent body scroll when drawer open */
    body.nav-open {
        overflow: hidden;
    }
}

@media (max-width: 400px) {
    #theme-toggle-mob {
        display: none;
    }

    .nav-drawer-theme {
        /* Mirror .nav-drawer-close: same top, pinned left instead of right */
        position: absolute;
        top: 28px; /* ← set to the same value as .nav-drawer-close's top */
        left: var(--gutter); /* ← match .nav-drawer-close's right value, on the left */
        height: 44px; /* ← match .nav-drawer-close's height so they align */

        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        background: none;
        border: 1px solid var(--border);
        color: var(--c-text-mid);
        font-family: var(--f-sans);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: border-color 0.3s, color 0.3s;
    }

        .nav-drawer-theme:hover {
            border-color: var(--border-mid);
            color: var(--c-text);
        }

    .nav-drawer-theme-icon {
        display: flex;
    }
}

/* ── Value bar ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .value-bar {
        grid-template-columns: 1fr;
    }

    .value-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 36px var(--gutter);
    }

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

/* ── CTA band ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cta-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding: 80px var(--gutter);
    }

    .cta-band-actions {
        align-items: flex-start;
        width: 100%;
    }

        .cta-band-actions .btn {
            width: 100%;
            justify-content: center;
        }
}

/* ── Footer ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    #site-footer {
        padding: 60px var(--gutter) 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 48px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-bottom-right {
        align-items: flex-start;
        gap: 16px;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer-socials {
        gap: 20px;
    }

    /* Small-screen search overlay sizing — merged in from
       search-overlay.css. components.css's own overlay
       padding/close-button position/input font size were sized
       for desktop and were too generous on small screens. */
    .search-inner {
        padding: 90px 24px 60px;
    }

    .search-close {
        top: 20px;
        right: 20px;
        width: 38px;
        height: 38px;
    }

    .search-eyebrow {
        margin-bottom: 20px;
    }

/*    .search-input {
        font-size: clamp(20px, 6vw, 28px);
    }*/

    .search-input-wrap {
        gap: 12px;
        margin-bottom: 24px;
    }

    .search-hints {
        margin-bottom: 28px;
    }

    .search-hint {
        padding: 6px 12px;
        font-size: 10px;
    }
}

/* ── Page hero (inner pages) ───────────────────────────────── */
@media (max-width: 900px) {
    .page-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .page-hero-desc {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .page-hero {
        padding: calc(72px + 48px) var(--gutter) 60px;
    }
}

/* ── Nav mobile controls (search + cart + burger side by side) ─ */
.nav-mobile-controls {
    display: none;
    align-items: center;
    /* gap was 4px here originally, sized for 2 icon-only buttons.
       Now that a badged cart button sits between search and burger,
       12px (from nav.css) is the value that actually applies —
       merged here as the single source of truth. */
    gap: 12px;
}

@media (max-width: 1274px) {
    .nav-mobile-controls {
        display: flex;
    }
}

/* On the smallest screens, 4 circular buttons at 12px gap plus the
   burger start to crowd — tighten back down, but not all the way
   to the original 4px. (merged in from nav.css) */
@media (max-width: 350px) {
    .nav-mobile-controls {
        gap: 7px;
    }
}

[data-theme="light"] .nav-mobile-controls .nav-search-btn {
    background: rgba(26, 14, 5, 0.06);
    border-color: rgba(26, 14, 5, 0.18);
    color: rgba(26, 14, 5, 0.55);
}

    [data-theme="light"] .nav-mobile-controls .nav-search-btn:hover {
        background: rgba(26, 14, 5, 0.1);
        border-color: rgba(26, 14, 5, 0.35);
        color: #1A0E05;
    }



/* ── Theme toggle button ────────────────────────────────────── */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
    flex-shrink: 0;
    border-radius: 50%;
}

    .theme-toggle:hover {
        color: #fff;
        border-color: rgba(255,255,255,0.45);
        background: rgba(255,255,255,0.12);
    }

    .theme-toggle svg {
        display: block;
        transition: transform 0.5s ease;
    }

    .theme-toggle:hover svg {
        transform: rotate(20deg);
    }
/* Light mode — keep white outline style, always visible */
[data-theme="light"] .theme-toggle {
    background: rgba(26,14,5,0.06);
    border-color: rgba(26,14,5,0.18);
    color: rgba(26,14,5,0.55);
}

    [data-theme="light"] .theme-toggle:hover {
        background: rgba(26,14,5,0.1);
        border-color: rgba(26,14,5,0.35);
        color: #1A0E05;
    }

/* Light mode nav */
[data-theme="light"] #navbar .nav-logo-name {
    color: var(--c-text);
}

[data-theme="light"] #navbar.scrolled {
    background: var(--c-nav-bg);
}

/* Search overlay light mode */
[data-theme="light"] .search-input {
    color: var(--c-text);
}

    [data-theme="light"] .search-input::placeholder {
        color: var(--c-text-faint);
    }

[data-theme="light"] .search-input-wrap {
    border-bottom-color: var(--border-mid);
}

[data-theme="light"] .search-eyebrow {
    color: var(--c-red);
}

[data-theme="light"] .search-hint {
    color: var(--c-text-muted);
    border-color: var(--border);
}

    [data-theme="light"] .search-hint:hover {
        color: var(--c-text);
    }

[data-theme="light"] .search-close {
    color: var(--c-text-muted);
    border-color: var(--border);
}

    [data-theme="light"] .search-close:hover {
        color: var(--c-text);
    }

[data-theme="light"] .sri-name {
    color: var(--c-text);
}

/* ============================================================
   FIX 1 — Footer: always dark mode colours regardless of theme
   ============================================================ */
#site-footer,
[data-theme="light"] #site-footer {
    background: #0D0602 !important;
    color: #ffffff;
}

[data-theme="light"] .footer-brand-desc,
[data-theme="light"] .footer-col h4,
[data-theme="light"] .footer-copy {
    color: #7A6A5E;
}

[data-theme="light"] .footer-col a,
[data-theme="light"] .footer-socials a,
[data-theme="light"] .footer-legal a {
    color: rgba(255,255,255,0.45);
}

    [data-theme="light"] .footer-col a:hover,
    [data-theme="light"] .footer-socials a:hover,
    [data-theme="light"] .footer-legal a:hover {
        color: #ffffff;
    }

[data-theme="light"] .footer-bottom {
    border-top-color: rgba(255,255,255,0.08);
}

[data-theme="light"] .footer-grid > div:first-child .nav-logo-name {
    color: #ffffff;
}

[data-theme="light"] .footer-grid > div:first-child .nav-logo-badge {
    background: #E8391C;
    color: #fff;
}

.search-results a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

    .search-results a > div:first-of-type {
        min-width: 0 !important;
        flex: 1;
    }
    .search-results a > div:last-of-type {
        flex-shrink: 0;
        white-space: nowrap;
        padding-left: 8px;
    }
.sri-name-clamp {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sri-code {
    display: block;
    margin-top: 4px;
    flex-shrink: 0;
}

/* ============================================================
   FIX 3 — Theme toggle visible in mobile nav controls
   ============================================================ */
@media (max-width: 767px) {
    .nav-mobile-controls .theme-toggle {
        display: flex;
        border-color: rgba(255,255,255,0.15);
    }

    /* Light-mode override — the rule above hardcodes a white-based
       border regardless of theme, which is effectively invisible
       against light mode's light background. Restore the dark-toned
       border light mode uses everywhere else. (merged in from
       nav.css, which called this out explicitly) */
    [data-theme="light"] .nav-mobile-controls .theme-toggle {
        border-color: rgba(26, 14, 5, 0.18);
    }
}

/* ============================================================
   FIX 5 — Nav drawer: visible close button
   ============================================================ */
.nav-drawer-close {
    position: absolute;
    top: 28px;
    right: var(--gutter);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-mid);
    color: var(--c-text-mid);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
    font-size: 22px;
    line-height: 1;
}

    .nav-drawer-close:hover {
        color: var(--c-text); /* was: #fff */
        border-color: var(--border-strong); /* was: rgba(255,255,255,0.3) */
    }

/* ============================================================
   FIX 6 — Mobile footer: ensure legal + socials always visible
   ============================================================ */
@media (max-width: 600px) {
    .footer-bottom-right {
        width: 100%;
        align-items: flex-start;
    }

    .footer-legal {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
    }

        .footer-legal a {
            font-size: 10.5px;
        }

    .footer-socials {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }
}

/* ============================================================
   LIGHT MODE NAV — simple: white bg, dark text, dark logo
   ============================================================ */
[data-theme="light"] #navbar {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(26,14,5,0.06);
}

    [data-theme="light"] #navbar.scrolled {
        background: rgba(255,255,255,0.98);
        border-bottom-color: rgba(26,14,5,0.08);
    }
/* Logo text → dark */
[data-theme="light"] .nav-logo-name {
    color: #1A0E05 !important;
}
/* Logo K mark → dark (uses currentColor) */
[data-theme="light"] .nav-logo-mark {
    color: #1A0E05;
}
/* Nav links → dark */
[data-theme="light"] .nav-links a:not(.nav-cta) {
    color: rgba(26,14,5,0.6);
}

    [data-theme="light"] .nav-links a:not(.nav-cta):hover,
    [data-theme="light"] .nav-links a:not(.nav-cta).active {
        color: #1A0E05;
    }
/* Book a Consultation stays red */
[data-theme="light"] .nav-links a[href="book.html"] {
    color: var(--c-red) !important;
}
/* Partner With Us CTA — stays red bg */
[data-theme="light"] .nav-cta {
    background: var(--c-red);
    color: #fff !important;
    border-color: var(--c-red);
}
/* Mobile burger lines → dark */
[data-theme="light"] .nav-burger span {
    background: #1A0E05;
}

/* Nav logo mark defaults to white (dark mode) */
.nav-logo-mark {
    color: #fff;
}
/* Footer logo always white regardless of theme */
[data-theme="light"] #site-footer .nav-logo-mark {
    color: #fff !important;
}

[data-theme="light"] #site-footer .nav-logo-name {
    color: #fff !important;
}


@media (max-width:767px) {
    :root {
        --gutter: 20px;
    }
}

@media (max-width:767px) {
    h1 {
        font-size: clamp(40px,10vw,64px);
    }

    h2 {
        font-size: clamp(32px,8vw,48px);
    }

    p {
        font-size: 14px;
    }
}

@media (max-width: 384px) {
    .search-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .search-input-wrap {
        gap: 10px;
    }

    .search-input {
        font-size: clamp(13px, 4.3cqi, 16px);
    }
}