/* =========================================================
   Holmburg Appliances — Design System v2
   Palette pulled directly from the product: the blender's own
   red, and the deep navy from the retail box, plus a warm gold
   for a bit of "premium but friendly" sparkle. Big rounded
   shapes, soft shadows, pill buttons — a landing page, not a
   catalog spreadsheet.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Color — exact palette from the redesign spec */
    --navy:        #0D1525;
    --navy-soft:   #111827;
    --navy-mist:   #EEF1F5;
    --red:         #C61E2F;
    --red-dark:    #9B1723;
    --red-tint:    #FBE9EA;
    --copper:      #B87333;
    --copper-light:#D4A373;
    --gold:        #F5C542;
    --gold-dark:   #DDA827;
    --cream:       #FFF8EF;
    --paper:       #FFFFFF;
    --ink:         #0D1525;
    --ink-soft:    #5A6A7A;
    --green:       #2E7D32;
    --green-bg:    #E7F3E8;
    --alert:       #C61E2F;
    --alert-bg:    #FBE9EA;

    /* Type */
    --font-display: 'Inter', -apple-system, sans-serif;
    --font-body:    'Inter', -apple-system, sans-serif;

    /* Shape */
    --radius:      14px;
    --radius-sm:   10px;
    --radius-pill: 999px;
    --max-width:   1180px;
    --border: 1px solid rgba(15,24,41,0.1);
    --border-light: 1px solid rgba(255,255,255,0.16);
    --shadow-soft: 0 12px 40px rgba(15,24,41,0.08);
    --shadow-lift: 0 20px 50px rgba(15,24,41,0.12);

    /* Legacy aliases — kept so pages built against the old design system
       (mostly the admin panel) still render in the new palette without
       needing every file rewritten. */
    --steel-light: var(--ink-soft);
    --steel: var(--navy-soft);
    --charcoal: var(--navy);
    --aluminum: var(--navy-mist);
    --verified: var(--green);
    --verified-bg: var(--green-bg);
    --font-mono: 'Inter', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 0.4em;
    line-height: 1.05;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--copper);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.8em;
}
.eyebrow.on-dark { color: var(--gold); }

/* ---------- Buttons — big, pill-shaped, friendly ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.98rem;
    padding: 15px 30px;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-large { padding: 18px 38px; font-size: 1.05rem; }
.btn-sm { padding: 9px 20px; font-size: 0.85rem; }

.btn-red { background: var(--red); color: #fff; box-shadow: 0 14px 30px rgba(226,38,47,0.32); }
.btn-red:hover { background: var(--red-dark); box-shadow: 0 18px 36px rgba(226,38,47,0.4); }
.btn-copper { background: var(--copper); color: #fff; box-shadow: 0 14px 30px rgba(184,115,51,0.32); }
.btn-copper:hover { background: var(--copper-light); }

.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 14px 30px rgba(232,184,91,0.35); }
.btn-gold:hover { background: var(--gold-dark); }

.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.12); }

/* ---------- Header / Nav ---------- */
.site-header {
    background: var(--navy);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 96px; padding-left: 32px; }
.logo-img { width: 168px; height: auto; display: block; }

.main-nav { display: flex; gap: 8px; align-items: center; }
.main-nav a {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    opacity: 0.82;
}
.main-nav a:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.main-nav a.nav-cta { background: var(--red); opacity: 1; color: #fff; margin-left: 6px; }
.main-nav a.nav-cta:hover { background: var(--red-dark); }

.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.7rem; cursor: pointer; }

@media (max-width: 960px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 84px; left: 0; right: 0;
        background: var(--navy);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 20px 24px;
        gap: 6px;
    }
    .main-nav a { padding: 12px 16px; }
    .main-nav.open { display: flex; }
    .nav-toggle { display: block; }
}

/* ---------- Hero (centered, product-dominant) ---------- */
.hero-centered {
    background: linear-gradient(160deg, var(--navy) 0%, #0A0F1E 100%);
    padding: 48px 0 56px;
    text-align: center;
    overflow: hidden;
}
.hero-centered-inner { max-width: 900px; margin: 0 auto; }
.hero-centered .hero-label { display: block; }
.hero-centered h1 {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    margin-bottom: 0;
}
/* Guarantees "Blend Harder. Last Longer." always renders on one line —
   vw-based scaling shrinks it to fit rather than allowing a wrap. */
.hero-nowrap { white-space: nowrap; font-size: clamp(1.15rem, 5.4vw, 2.7rem) !important; }

.hero-image-full {
    width: 100%;
    margin: 26px 0;
    animation: heroFadeUp 0.9s ease both;
}
/* No height cap / no object-fit here — the image is shown at its full,
   uncropped natural aspect ratio, scaling proportionally with width.
   This is what actually prevents desktop from cropping out the blender
   or the fruit. The mobile breakpoint below intentionally overrides
   this back to a fixed-height crop, since that's the look that already
   works well on phones. */
.hero-image-full img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-centered .lead {
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
}
/* Widened + slightly smaller than the default .lead so the fixed
   copy wraps to exactly two lines on common viewport widths. */
.hero-centered .hero-lead-2line { max-width: 900px; font-size: 1.05rem; }

/* Two description variants: the full copy for tablet/desktop where it
   comfortably fits two lines, and a shorter one for narrow phones,
   where the full text would need illegibly small type to do the same.
   Only one is ever shown at a time. */
.hero-lead-short { display: none; }

.hero-centered .hero-actions { justify-content: center; margin: 1.6em 0 0; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) and (min-width: 641px) {
    .hero-centered .hero-lead-2line { font-size: 0.82rem; }
}

@media (max-width: 640px) {
    .hero-centered { padding: 40px 0 40px; }
    .hero-image-full img { max-height: 380px; object-fit: cover; }
    .hero-centered .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-centered .hero-actions .btn { width: 100%; }
    .hero-lead-full { display: none; }
    .hero-lead-short { display: block; }
    .hero-centered .hero-lead-2line { max-width: 94vw; font-size: 0.98rem; line-height: 1.5; }
}

@media (max-width: 480px) {
    .hero-centered .hero-lead-2line { font-size: 0.92rem; }
}

/* ---------- Hero — premium two-column product hero (used on Products page) ---------- */
.hero {
    background: linear-gradient(160deg, var(--navy) 0%, #0A0F1E 100%);
    color: #fff;
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.95fr; align-items: center; gap: 56px; position: relative; z-index: 2; }
.hero-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1em; display: block; }
.hero h1 { margin-bottom: 0.4em; font-size: clamp(2.2rem, 4vw, 3.1rem); }
.hero h1 .accent { color: var(--red); }
.hero p.lead { max-width: 460px; font-size: 1.1rem; line-height: 1.75; color: rgba(255,255,255,0.75); margin-bottom: 1.9em; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 1.8em 0 0; }

/* Trust row — small checkmarks, generous spacing, no heavy iconography */
.trust-row { display: flex; flex-wrap: wrap; gap: 14px 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12); }
.trust-row .item { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.78); }
.trust-row .item .check { color: var(--gold); font-size: 0.95rem; line-height: 1; }

/* Product visual — dominant, integrated into the page, no card, no glow */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-visual img {
    width: 100%;
    height: auto;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 18px;
    filter: drop-shadow(0 26px 40px rgba(0,0,0,0.4));
}

/* Subtle, elegant entrance — fade in and drift up slightly. Nothing more. */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-visual img { animation: heroFadeUp 0.9s ease both; }
.hero-content { animation: heroFadeUp 0.9s ease 0.15s both; }

@media (max-width: 960px) {
    .hero { padding: 0 0 60px; text-align: center; overflow: visible; }
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero .container { padding: 0; }
    .hero-content { padding: 0 24px; }
    .hero-visual img { max-width: 100%; width: 100%; }
    .hero p.lead { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-actions .btn { width: 100%; }
    .trust-row { justify-content: center; }
}


/* ---------- Color swatches ---------- */
.color-picker { display: flex; gap: 12px; align-items: center; margin: 22px 0; }
.color-picker .label-text { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.7); margin-right: 4px; }
.swatch {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch.active { border-color: var(--gold); }
.swatch.red { background: var(--red); }
.swatch.black { background: #1B1D22; }
.swatch.grey { background: #9BA3AE; }
.swatch.disabled { opacity: 0.35; cursor: not-allowed; }
.swatch-tag {
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
    background: var(--navy); color:#fff; font-size:0.65rem; font-weight:700;
    padding: 3px 8px; border-radius: 6px; white-space:nowrap; opacity:0;
    pointer-events:none; transition: opacity 0.15s ease;
}
.swatch:hover .swatch-tag { opacity: 1; }

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.section-navy { background: var(--navy); color: #fff; }
.section-navy p { color: rgba(255,255,255,0.7); }
.section-red { background: var(--red); color: #fff; }
.section-red p { color: rgba(255,255,255,0.85); }
.section-mist { background: var(--navy-mist); }
.section-head { max-width: 620px; margin: 0 auto 50px; text-align: center; }
.section-head.left { margin: 0 0 44px; text-align: left; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
    background: var(--paper);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.icon-tile {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--red-tint);
    color: var(--red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.step-list { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.step-list li { counter-increment: step; display: flex; gap: 24px; padding: 24px 0; border-bottom: var(--border); }
.step-list li:last-child { border-bottom: none; }
.step-list li::before {
    content: counter(step);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    color: var(--copper);
    line-height: 1;
    width: 2.4rem;
    flex-shrink: 0;
}

/* ---------- Status / result card (replaces the old rigid "plate") ---------- */
.status-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-lift);
    border-top: 6px solid var(--red);
}
.status-card.is-verified { border-top-color: var(--green); }
.status-card.is-warning { border-top-color: var(--alert); }
.status-card .status-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.status-card .status-head h3 { margin: 0; color: var(--ink); }
.status-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(16,24,43,0.12);
    font-size: 0.92rem;
}
.status-row:last-child { border-bottom: none; }
.status-row .k { color: var(--ink-soft); font-weight: 600; font-size: 0.82rem; }
.status-row .v { font-weight: 700; color: var(--ink); }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.pill.verified { background: var(--green-bg); color: var(--green); }
.pill.pending { background: #FDF3E3; color: var(--gold-dark); }
.pill.alert { background: var(--alert-bg); color: var(--alert); }

/* ---------- Forms ---------- */
.form-panel {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    padding: 38px;
    box-shadow: var(--shadow-lift);
}
label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 6px; opacity: 0.85; }
input, select, textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
    color: #fff;
    margin-bottom: 18px;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.4); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; background: rgba(255,255,255,0.11); }

/* The dropdown POPUP a <select> opens is a separate rendering context from
   the closed box. Desktop browsers apply the select's own `color` to that
   popup's text but still give it a plain white background — so white text
   (used for our dark theme) becomes invisible the moment the list opens.
   Mobile browsers use a native OS picker that ignores this, which is why
   this only ever showed up on desktop. Forcing option text to be dark
   fixes it regardless of what theme the select itself uses. */
select option { color: var(--ink); background: #fff; }
.form-panel.light { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-soft); }
.form-panel.light label { color: var(--ink-soft); }
.form-panel.light input, .form-panel.light select, .form-panel.light textarea { background: var(--cream); color: var(--ink); border: 1px solid rgba(16,24,43,0.14); }

.alert-box { padding: 14px 20px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 22px; font-weight: 600; }
.alert-box.success { background: var(--green-bg); color: var(--green); }
.alert-box.error { background: var(--alert-bg); color: var(--alert); }

/* ---------- Full-bleed hero (image or product-forward) ---------- */
.hero-full {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(155deg, var(--navy) 0%, #060A14 100%);
}
.hero-background { position: absolute; inset: 0; z-index: 0; }
.hero-background img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.hero-full .hero-blob {
    position: absolute;
    width: 640px; height: 640px;
    right: -120px; top: 50%; transform: translateY(-50%);
    background: radial-gradient(circle at 35% 30%, var(--red) 0%, var(--red-dark) 55%, transparent 75%);
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
    opacity: 0.55;
    animation: blobmove 12s ease-in-out infinite;
    z-index: 0;
}
.hero-full .hero-product-img {
    position: absolute;
    right: 4%; bottom: 0;
    max-height: 92%;
    width: auto;
    z-index: 1;
    filter: drop-shadow(0 40px 50px rgba(0,0,0,0.5));
}
.hero-content { position: relative; z-index: 2; padding: 2rem 0; max-width: 640px; }
.hero-content h1 {
    font-size: clamp(3rem, 7vw, 5.2rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
}
.hero-content h1 .accent { color: var(--red); }
.hero-sub { font-size: 1.2rem; max-width: 520px; margin: 1.4rem 0 2rem; color: rgba(255,255,255,0.82); }
.hero-credibility {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.68);
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 14px;
    margin-top: 30px;
    max-width: 380px;
}

@media (max-width: 880px) {
    .hero-full { min-height: auto; padding: 100px 0 60px; }
    .hero-full .hero-product-img { position: static; max-height: 340px; margin: 0 auto 30px; display: block; }
    .hero-full .hero-blob { display: none; }
    .hero-content { max-width: 100%; }
}

/* ---------- Feature stages — one big idea per screen ---------- */
.feature-block { padding: 6rem 0; border-bottom: var(--border); }
.feature-block.alt { background: var(--navy-mist); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.feature-text .eyebrow { display: block; }
.feature-text h2 { margin: 0.3em 0 0.5em; font-size: clamp(2rem, 4vw, 2.8rem); }
.feature-text p { max-width: 440px; font-size: 1.05rem; }
.feature-image img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
@media (max-width: 880px) {
    .feature-grid { grid-template-columns: 1fr; text-align: center; }
    .feature-grid .feature-image { order: -1; }
    .feature-text p { margin-left: auto; margin-right: auto; }
}

/* ---------- Stat screens — the number IS the message ---------- */
.stat-screen {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 24px;
}
.stat-screen.on-navy { background: var(--navy); color: #fff; }
.stat-screen.on-red { background: var(--red); color: #fff; }
.stat-screen .stat-number {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(4.5rem, 16vw, 10rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
}
.stat-screen .stat-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 3vw, 2rem);
    margin-top: 0.4em;
}
.stat-screen .stat-sub { max-width: 460px; margin: 1rem auto 0; color: rgba(255,255,255,0.75); }

/* ---------- Trust block ---------- */
.trust-block { background: var(--navy); color: #fff; padding: 6rem 0; text-align: center; }
.trust-block .eyebrow { color: var(--gold); }
.trust-block h2 { color: #fff; margin: 0.6em 0 1em; }
.trust-copy { max-width: 600px; margin: 0 auto 2rem; color: rgba(255,255,255,0.82); }
.trust-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.trust-marks { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.14); }
.trust-mark { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.7); }

/* ---------- Hero overlay (dark navy → soft red glow, over a lifestyle photo) ---------- */
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(120deg, rgba(13,21,37,0.88) 0%, rgba(13,21,37,0.58) 38%, rgba(198,30,47,0.22) 64%, rgba(13,21,37,0.82) 100%);
}

/* ---------- Stats grid — big numbers, minimal icons ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--border); border-left: var(--border); }
.stat-mini { padding: 3rem 1.5rem; text-align: center; border-right: var(--border); border-bottom: var(--border); }
.stat-mini .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--navy); line-height: 1; }
.stat-mini .lbl { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin-top: 0.6em; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 880px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Built For — text-led tiles, no icon dependency ---------- */
.built-for-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); }
.built-for-tile {
    background: var(--navy-soft);
    padding: 2.6rem 1.5rem;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
    transition: background 0.2s ease;
}
.built-for-tile:hover { background: var(--red); }
@media (max-width: 880px) { .built-for-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Checklist (warranty section) ---------- */
.check-list { list-style: none; margin: 1.5rem 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 600; }
.check-list li::before {
    content: "\2713";
    width: 24px; height: 24px; flex-shrink: 0;
    background: var(--green);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
}

/* ---------- Final full-bleed CTA ---------- */
.final-cta {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.final-cta .hero-background { position: absolute; inset: 0; z-index: 0; }
.final-cta .hero-background img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.32); }
.final-cta-content { position: relative; z-index: 2; padding: 4rem 24px; }
.final-cta h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; }
.final-cta .tagline { font-size: 1.3rem; font-weight: 600; color: rgba(255,255,255,0.85); margin: 0.8em 0 2em; line-height: 1.5; }

/* ---------- Cart icon ---------- */
.cart-icon-trigger {
    position: relative;
    font-size: 1.3rem;
    padding: 8px 10px !important;
    display: inline-flex;
    align-items: center;
}
.cart-count {
    position: absolute;
    top: 0; right: 0;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    width: 18px; height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
}

/* ---------- Basket drawer ---------- */
.basket-overlay {
    position: fixed; inset: 0;
    background: rgba(13,21,37,0.5);
    z-index: 90;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease;
}
.basket-overlay.open { opacity: 1; visibility: visible; }

.basket-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 92vw;
    background: #fff;
    z-index: 91;
    box-shadow: -20px 0 50px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.basket-drawer.open { transform: translateX(0); }

.basket-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 24px;
    border-bottom: var(--border);
}
.basket-close { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.basket-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.basket-footer { padding: 20px 24px; border-top: var(--border); }
.basket-subtotal { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; }

.basket-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    padding: 16px 0;
    border-bottom: var(--border);
    align-items: flex-start;
}
.basket-item-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); background: var(--navy-mist); }
.basket-item-name { font-weight: 700; font-size: 0.92rem; }
.basket-item-color { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.basket-item-price { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.basket-item-total { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.basket-qty-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty-btn {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(15,24,41,0.2);
    background: #fff; cursor: pointer; font-size: 1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.qty-value { font-weight: 700; min-width: 18px; text-align: center; }
.basket-remove { background: none; border: none; color: var(--alert); font-size: 0.78rem; font-weight: 700; cursor: pointer; margin-left: auto; }

/* ---------- Buy Now choice modal ---------- */
.buynow-overlay {
    position: fixed; inset: 0;
    background: rgba(13,21,37,0.55);
    z-index: 90;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease;
}
.buynow-overlay.open { opacity: 1; visibility: visible; }

.buynow-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 460px; max-width: 90vw;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    z-index: 91;
    padding: 32px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.buynow-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.buynow-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; font-size: 1.6rem; line-height: 1;
    color: var(--ink-soft); cursor: pointer;
}

.buynow-options { display: flex; flex-direction: column; gap: 12px; }
.buynow-option {
    display: flex; flex-direction: column; align-items: flex-start;
    text-align: left;
    width: 100%;
    background: var(--navy-mist);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.buynow-option:hover { border-color: var(--red); background: #fff; }
.buynow-option-title { font-weight: 700; font-size: 0.98rem; color: var(--navy); }
.buynow-option-desc { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

.buynow-back {
    background: none; border: none; padding: 0;
    font-size: 0.82rem; font-weight: 700; color: var(--ink-soft);
    cursor: pointer; margin-bottom: 14px;
}
.buynow-back:hover { color: var(--red); }
.buynow-location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.buynow-location .buynow-option-title { text-align: center; width: 100%; }

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: flex-start; }
@media (max-width: 880px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-summary-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: var(--border); font-size: 0.92rem; }
.checkout-summary-item:last-child { border-bottom: none; }

.checkout-line-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: var(--border); }
.checkout-line-info { flex: 1; min-width: 0; }
.checkout-line-name { font-weight: 700; font-size: 0.9rem; }
.checkout-line-color { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.checkout-line-qty-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.checkout-line-remove { background: none; border: none; color: var(--alert); font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0; }
.checkout-line-total { font-weight: 700; font-size: 0.92rem; white-space: nowrap; margin-left: 10px; }
.delivery-option {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid rgba(15,24,41,0.15);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
}
.delivery-option input { width: auto; margin: 3px 0 0; }
.delivery-option.selected { border-color: var(--red); background: var(--red-tint); }

/* ---------- Hero video grid (YouTube Shorts) ---------- */
.hero-video-title {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 800;
    max-width: 760px;
    margin: 40px auto 0;
}
.hero-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    max-width: 760px;
    margin: 18px auto 0;
}
.hero-video-item {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: #000;
}
.hero-video-item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Product gallery thumbnails ---------- */
.product-thumb { outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.15s ease, opacity 0.15s ease; }
.product-thumb:hover { opacity: 0.85; }
.product-thumb.active { outline-color: var(--red); }

/* ---------- Landing page (no-nav sales page) ---------- */
.landing-logo-bar { display: flex; justify-content: center; padding: 20px 0; background: var(--navy); }
.landing-logo-bar .logo-img { width: 140px; }

.landing-price-badge { display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius); padding: 10px 26px; margin: 18px 0; }
.landing-price-badge .label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); font-weight: 700; }
.landing-price-badge .amount { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: #fff; }

.landing-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.landing-trust-row .item { display: flex; align-items: center; gap: 6px; }

.landing-ingredient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.landing-ingredient-grid .item { background: #fff; border: var(--border); border-radius: var(--radius-sm); padding: 18px 14px; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--navy); }

.landing-gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; -webkit-overflow-scrolling: touch; }
.landing-gallery img { scroll-snap-align: center; flex: 0 0 78%; max-width: 420px; border-radius: var(--radius); box-shadow: var(--shadow-soft); aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 700px) { .landing-gallery img { flex: 0 0 31%; } }

.landing-cta-band { text-align: center; padding: 40px 0; }

/* ---------- Hero price block ---------- */
.hero-price-block { margin: 20px 0 26px; }
.hero-price-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.hero-price-amount { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: #fff; line-height: 1.1; }
.hero-price-note { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-top: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.68); padding: 64px 0 30px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 44px; }
.footer-grid h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-grid a { display: block; font-size: 0.9rem; padding: 6px 0; opacity: 0.78; }
.footer-grid a:hover { opacity: 1; color: var(--gold); }
.footer-bottom { border-top: var(--border-light); padding-top: 22px; font-size: 0.78rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--green); color: #fff;
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 26px rgba(0,0,0,0.28);
    font-size: 1.5rem; z-index: 60;
    transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }