@charset "UTF-8";
/* ==========================================================================
   Meenakshi Health Care - storefront stylesheet
   Brand palette taken from the client's logo and banner:
   royal blue, bright yellow, sky blue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --blue-900: #0A1F5C;
    --blue-800: #0D2A73;
    --blue-700: #123A9E;
    --blue-600: #1748BE;
    --blue-500: #2563D9;
    --blue-100: #E5EDFB;
    --blue-50:  #F2F6FE;

    --yellow-800: #7A5F00; /* text on yellow-100; yellow-600 is 2:1 */
    --yellow-600: #E0A800;
    --yellow-500: #FFC93C;
    --yellow-400: #FFD968;
    --yellow-100: #FFF6DC;

    --sky-700: #14697F;   /* text on white; sky-600 is 3.7:1 and fails */
    --sky-600: #1C8FB4;
    --sky-500: #3FBBDD;
    --sky-100: #E4F6FB;

    /* Neutrals */
    --ink-900: #0F172A;
    --ink-800: #1E293B;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748B;
    --ink-400: #94A3B8;
    --ink-300: #CBD5E1;
    --ink-200: #E2E8F0;
    --ink-100: #F1F5F9;
    --ink-50:  #F8FAFC;
    --white:   #FFFFFF;

    /* Semantic */
    --success-700: #15803D;
    --success-500: #22A75B;
    --success-100: #E7F7EE;
    --danger-700:  #B91C1C;
    --danger-500:  #DC2626;
    --danger-100:  #FEE9E9;
    --warning-600: #B45309;
    --warning-100: #FEF3C7;

    /* Roles */
    --brand:          var(--blue-700);
    --brand-dark:     var(--blue-800);
    --brand-darker:   var(--blue-900);
    --brand-light:    var(--blue-100);
    --accent:         var(--yellow-500);
    --accent-dark:    var(--yellow-600);
    --text:           var(--ink-800);
    /* slate-500 measures 4.39:1 on the tinted sections, just under the
       4.5 that small text needs, so muted text sits one step darker. */
    --text-muted:     #5B6878;
    /* The faint tone was slate-400: 2.56:1 on white, unreadable at the
       12-13px it was used for - struck-through prices, counts, hints.
       There is no lighter slate that passes, so it collapses onto 500. */
    --text-faint:     var(--ink-500);
    --surface:        var(--white);
    --surface-alt:    var(--ink-50);
    --surface-tint:   var(--blue-50);
    --border:         var(--ink-200);
    --border-strong:  var(--ink-300);

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs:   0.75rem;    /* 12 */
    --fs-sm:   0.8125rem;  /* 13 */
    --fs-base: 0.9375rem;  /* 15 */
    --fs-md:   1rem;       /* 16 */
    --fs-lg:   1.125rem;   /* 18 */
    --fs-xl:   1.375rem;   /* 22 */
    --fs-2xl:  1.75rem;    /* 28 */
    --fs-3xl:  2.25rem;    /* 36 */
    --fs-4xl:  2.75rem;    /* 44 */

    /* Space */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* Radii & shadows */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-full: 999px;

    /* Height of the fixed mobile bottom bar; layout and the compare tray
       both key off this so they never sit on top of each other. */
    --bottom-nav-h: 60px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, .12);
    --shadow-xl: 0 24px 48px rgba(10, 31, 92, .16);

    --container: 1280px;
    --header-h: 72px;

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink-900);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--brand);
    text-decoration: none;
    transition: color .15s var(--ease);
}
a:hover { color: var(--blue-500); }

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

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
ul:last-child, ol:last-child { margin-bottom: 0; }

button { font: inherit; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

strong, b { font-weight: 600; }

:focus-visible {
    outline: 3px solid var(--blue-500);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--blue-100); color: var(--blue-900); }

.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;
}

.skip-link {
    position: absolute; top: -100px; left: var(--sp-4); z-index: 999;
    background: var(--brand); color: #fff; padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--sp-6); }
}

.section { padding-block: var(--sp-10); }
.section--tight { padding-block: var(--sp-8); }
.section--alt { background: var(--surface-alt); }
.section--tint { background: var(--surface-tint); }

@media (min-width: 992px) {
    .section { padding-block: var(--sp-16); }
    .section--tight { padding-block: var(--sp-10); }
}

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}
.section__title {
    margin: 0;
    font-size: var(--fs-xl);
    letter-spacing: -0.02em;
}
.section__subtitle {
    margin: var(--sp-1) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
    max-width: 62ch;
}
.section__link {
    min-height: 32px;
    font-weight: 600;
    font-size: var(--fs-base);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
}
.section__link svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
    .section__title { font-size: var(--fs-2xl); }
}

.grid { display: grid; gap: var(--sp-4); }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    --btn-border: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.75rem 1.35rem;
    min-height: 46px;
    border: 1.5px solid var(--btn-border);
    border-radius: var(--r-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--btn-fg); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary  { --btn-bg: var(--brand); --btn-border: var(--brand); }
.btn--primary:hover { --btn-bg: var(--blue-600); --btn-border: var(--blue-600); }

.btn--accent {
    --btn-bg: var(--accent); --btn-border: var(--accent); --btn-fg: var(--ink-900);
}
.btn--accent:hover { --btn-bg: var(--yellow-400); --btn-border: var(--yellow-400); }

.btn--outline {
    --btn-bg: transparent; --btn-fg: var(--brand); --btn-border: var(--brand);
}
.btn--outline:hover { --btn-bg: var(--blue-50); }

.btn--ghost {
    --btn-bg: transparent; --btn-fg: var(--ink-700); --btn-border: var(--border-strong);
}
.btn--ghost:hover { --btn-bg: var(--ink-50); --btn-border: var(--ink-400); --btn-fg: var(--ink-900); }

.btn--danger { --btn-bg: var(--danger-500); --btn-border: var(--danger-500); }
.btn--danger:hover { --btn-bg: var(--danger-700); --btn-border: var(--danger-700); }

.btn--success { --btn-bg: var(--success-500); --btn-border: var(--success-500); }

.btn--whatsapp { --btn-bg: #0B7C5E; --btn-border: #0B7C5E; --btn-fg: #fff; }
.btn--whatsapp:hover { --btn-bg: #096349; --btn-border: #096349; }

.btn--sm { padding: .5rem .9rem; min-height: 38px; font-size: var(--fs-sm); }
.btn--lg { padding: .95rem 1.75rem; min-height: 54px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.btn--icon {
    padding: 0; width: 44px; height: 44px; min-height: 44px; border-radius: var(--r-md);
}

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    color: var(--btn-fg);
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. Badges, pills, chips
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
    letter-spacing: .01em; white-space: nowrap;
    background: var(--ink-100); color: var(--ink-700);
}
.badge--primary { background: var(--blue-100); color: var(--blue-800); }
.badge--success { background: var(--success-100); color: var(--success-700); }
.badge--danger  { background: var(--danger-100);  color: var(--danger-700); }
.badge--warning { background: var(--warning-100); color: var(--warning-600); }
.badge--info    { background: var(--sky-100);     color: var(--sky-700); }
.badge--muted   { background: var(--ink-100);     color: var(--ink-600); }
.badge--accent  { background: var(--yellow-100);  color: var(--yellow-800); }

.badge--verified {
    background: var(--success-100); color: var(--success-700); font-weight: 700;
}
.badge--verified svg { width: 13px; height: 13px; }

.badge--discount {
    background: var(--danger-500); color: #fff; font-weight: 700;
}

.chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 12px; border: 1px solid var(--border);
    border-radius: var(--r-full); background: var(--white);
    font-size: var(--fs-sm); font-weight: 500; color: var(--ink-700);
    transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip--active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip--active:hover { color: #fff; }
.chip__remove {
    background: none; border: 0; padding: 0; display: inline-flex;
    color: currentColor; opacity: .7;
}
.chip__remove:hover { opacity: 1; }

/* Stars */
.stars { display: inline-flex; gap: 1px; color: var(--yellow-500); vertical-align: middle; }
.stars .star { width: 14px; height: 14px; fill: currentColor; }
.stars .star--empty { fill: var(--ink-300); }
.stars--md .star { width: 17px; height: 17px; }
.stars--lg .star { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }

.label {
    display: block; margin-bottom: 6px;
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
}
.label .req { color: var(--danger-500); }

.input, .select, .textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    min-height: 46px;
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--white);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(18, 58, 158, .12);
}
.input[aria-invalid="true"], .is-invalid {
    border-color: var(--danger-500);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px;
    padding-right: 2.4rem;
}

.field__error {
    display: block; margin-top: 5px;
    font-size: var(--fs-sm); color: var(--danger-700); font-weight: 500;
}
.field__hint {
    display: block; margin-top: 5px;
    font-size: var(--fs-sm); color: var(--text-muted);
}

.checkbox, .radio {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    cursor: pointer; font-size: var(--fs-base); line-height: 1.5;
}
.checkbox input, .radio input {
    width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0;
    accent-color: var(--brand); cursor: pointer;
}

/* A row plays the same part in a form's rhythm as a single field, so it
   needs the same space beneath it. Without this the last .field in the row
   hits :last-child, loses its margin, and whatever follows the row - usually
   the submit button - sits flush against the input once the row stacks on a
   phone. */
.form-row { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.form-row:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
    .form-row--2 { grid-template-columns: 1fr 1fr; }
    .form-row--3 { grid-template-columns: repeat(3, 1fr); }
}

.input-group { display: flex; }
.input-group .input {
    border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
}
.input-group .btn {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* Quantity stepper */
.qty {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
    overflow: hidden; background: var(--white);
}
.qty__btn {
    width: 42px; height: 44px; border: 0; background: var(--ink-50);
    color: var(--ink-700); font-size: 1.15rem; line-height: 1;
    display: grid; place-items: center; transition: background .15s var(--ease);
}
.qty__btn:hover:not(:disabled) { background: var(--ink-100); color: var(--brand); }
.qty__btn:disabled { opacity: .4; cursor: not-allowed; }
.qty__input {
    width: 52px; height: 44px; border: 0; text-align: center;
    font-size: var(--fs-base); font-weight: 600; color: var(--ink-900);
    -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus { outline: none; }

/* --------------------------------------------------------------------------
   7. Alerts & flash messages
   -------------------------------------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-base);
    margin-bottom: var(--sp-4);
}
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alert--success { background: var(--success-100); border-color: #BBE8CD; color: var(--success-700); }
.alert--error   { background: var(--danger-100);  border-color: #F8C9C9; color: var(--danger-700); }
.alert--warning { background: var(--warning-100); border-color: #FBDF9B; color: var(--warning-600); }
.alert--info    { background: var(--blue-50);     border-color: #C6D8F8; color: var(--blue-800); }

.flash-stack {
    position: fixed; top: 16px; right: 16px; z-index: 1200;
    display: flex; flex-direction: column; gap: var(--sp-2);
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.flash-stack .alert {
    margin: 0; box-shadow: var(--shadow-lg); background: #fff;
    pointer-events: auto; animation: flashIn .3s var(--ease);
}
@keyframes flashIn { from { opacity: 0; transform: translateX(24px); } }

.flash-stack .alert--success { background: #fff; border-color: var(--success-500); }
.flash-stack .alert--error   { background: #fff; border-color: var(--danger-500); }

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.announce {
    background: linear-gradient(90deg, var(--blue-900), var(--blue-700) 60%, var(--blue-800));
    color: #fff;
    font-size: var(--fs-sm);
    overflow: hidden;
}
.announce__inner {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-6);
    min-height: 38px; padding-block: 6px; text-align: center;
}
.announce__item { display: inline-flex; align-items: center; gap: 6px; opacity: .95; }
.announce__item svg { width: 15px; height: 15px; }
.announce a { color: var(--yellow-400); font-weight: 600; }
.announce a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 767px) {
    .announce__inner { gap: var(--sp-4); }
    .announce__item--optional { display: none; }
    /* With the message wrapping to two lines the lone icon sits off on its
       own at the left, so it is dropped on phones. */
    .announce__item svg { display: none; }
}

.site-header {
    position: sticky; top: 0; z-index: 500;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.header-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--header-h);
    padding-block: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand__logo { height: 46px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
    font-size: 1.05rem; font-weight: 800; color: var(--blue-800);
    letter-spacing: -0.02em; white-space: nowrap;
}
.brand__tag {
    font-size: 10.5px; font-weight: 600; color: var(--sky-700);
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

@media (max-width: 991px) {
    /* The phone header carries only the logo and the menu button now, so the
       lockup no longer has to shrink to make room for a search field. */
    .brand__logo { height: 44px; }
    .brand__name { font-size: 1.2rem; }
    .brand__tag { display: none; }
}

/* Search */
.header-search { position: relative; max-width: 620px; width: 100%; }
.header-search__form { display: flex; }
.header-search__input {
    flex: 1; min-width: 0; height: 46px;
    padding: 0 var(--sp-4) 0 2.65rem;
    border: 1.5px solid var(--border-strong); border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
    font-size: var(--fs-base); background: var(--ink-50);
    transition: all .15s var(--ease);
}
.header-search__input:focus {
    outline: none; background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(18, 58, 158, .1);
}
.header-search__icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--text-faint); pointer-events: none;
}
.header-search__btn {
    height: 46px; padding-inline: var(--sp-5);
    border: 1.5px solid var(--brand); background: var(--brand); color: #fff;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-weight: 600; transition: background .15s var(--ease);
}
.header-search__btn:hover { background: var(--blue-600); }

.suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest__group-title {
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-faint);
}
.suggest__item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    color: var(--ink-800); transition: background .12s var(--ease);
}
.suggest__item:hover, .suggest__item.is-active { background: var(--blue-50); color: var(--blue-800); }
.suggest__thumb {
    width: 46px; height: 46px; object-fit: contain; flex-shrink: 0;
    background: var(--ink-50); border-radius: var(--r-sm); padding: 3px;
}
.suggest__name { font-size: var(--fs-base); font-weight: 500; }
.suggest__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.suggest__price { margin-left: auto; font-weight: 700; color: var(--blue-800); white-space: nowrap; }
.suggest__all {
    display: block; padding: var(--sp-3) var(--sp-4); text-align: center;
    background: var(--ink-50); font-weight: 600; font-size: var(--fs-base);
    border-top: 1px solid var(--border);
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: var(--sp-1); }

.header-call {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
    color: var(--ink-700); transition: background .15s var(--ease);
}
.header-call:hover { background: var(--ink-50); color: var(--brand); }
.header-call svg { width: 22px; height: 22px; color: var(--brand); }
.header-call__text { display: flex; flex-direction: column; line-height: 1.15; }
.header-call__label { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.header-call__number { font-size: var(--fs-base); font-weight: 700; color: var(--ink-900); }

.icon-btn {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-width: 56px; height: 52px; padding: 0 var(--sp-2);
    border: 0; background: none; border-radius: var(--r-md);
    color: var(--ink-700); font-size: 10.5px; font-weight: 600;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--ink-50); color: var(--brand); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn__count {
    position: absolute; top: 2px; right: 8px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--danger-500); color: #fff;
    font-size: 10px; font-weight: 700; border-radius: var(--r-full);
    border: 2px solid #fff;
}
.icon-btn__count[data-count="0"] { background: var(--ink-400); }

.burger { display: none; }

@media (max-width: 991px) {
    .header-main {
        grid-template-columns: 1fr auto;
        gap: var(--sp-2);
    }
    .burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border: 0; background: none;
        color: var(--ink-800); border-radius: var(--r-md);
    }
    .burger:hover { background: var(--ink-50); }
    .burger svg { width: 24px; height: 24px; }
    /* Search lives in the bottom bar on a phone; a second field in the header
       just costs a row of screen above the banner. */
    .header-search { display: none; }
    /* Account, wishlist and cart are all in the bottom bar on a phone, so the
       header keeps only the menu and the logo. */
    .header-call,
    .icon-btn--wishlist,
    .icon-btn--account,
    .icon-btn--cart { display: none; }
    .header-actions { display: none; }
    /* Logo left, menu button right, the way a phone header usually reads. */
    .brand { order: 1; }
    .burger { order: 2; }
    .icon-btn { min-width: 44px; }
    .icon-btn span:not(.icon-btn__count) { display: none; }
}

/* Category nav bar */
.header-nav {
    background: var(--blue-800);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.header-nav__inner { display: flex; align-items: stretch; gap: 2px; }

.nav-all {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--yellow-500); color: var(--ink-900);
    font-weight: 700; font-size: var(--fs-base);
    border: 0; white-space: nowrap;
}
.nav-all:hover { background: var(--yellow-400); color: var(--ink-900); }
.nav-all svg { width: 18px; height: 18px; }

.nav-list {
    display: flex; list-style: none; margin: 0; padding: 0;
    flex: 1; overflow-x: auto; scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }

.nav-item { position: relative; }
.nav-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: var(--sp-3) var(--sp-4);
    color: rgba(255, 255, 255, .92);
    font-size: var(--fs-base); font-weight: 500; white-space: nowrap;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-link:hover, .nav-item:focus-within > .nav-link, .nav-link.is-active {
    background: rgba(255, 255, 255, .1); color: #fff;
}
.nav-link svg { width: 14px; height: 14px; opacity: .7; }

.mega {
    position: absolute; top: 100%; left: 0; z-index: 400;
    min-width: 260px;
    background: #fff; border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border); border-top: 0;
    padding: var(--sp-4);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-item:hover > .mega, .nav-item:focus-within > .mega {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mega--wide {
    left: 50%; transform: translate(-50%, -6px);
    width: min(880px, calc(100vw - 48px));
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2) var(--sp-6);
}
.nav-item:hover > .mega--wide, .nav-item:focus-within > .mega--wide {
    transform: translate(-50%, 0);
}
.mega__link {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    color: var(--ink-700); font-size: var(--fs-base);
    transition: background .12s var(--ease), color .12s var(--ease);
}
.mega__link:hover { background: var(--blue-50); color: var(--blue-800); }
.mega__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); }

/* The All Categories panel */
.nav-all-wrap { position: relative; display: flex; }
.nav-all { cursor: pointer; }
.nav-all__caret { width: 14px; height: 14px; transition: transform .18s var(--ease); }
.nav-all[aria-expanded="true"] { background: var(--yellow-400); }
.nav-all[aria-expanded="true"] .nav-all__caret { transform: rotate(180deg); }

.all-cats {
    position: absolute; top: 100%; left: 0; z-index: 500;
    width: min(940px, calc(100vw - 48px));
    background: #fff; border: 1px solid var(--border); border-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-5);
    max-height: calc(100vh - 180px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-all[aria-expanded="true"] + .all-cats {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.all-cats__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
}
.all-cats__parent {
    display: block; padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    color: var(--ink-900); font-weight: 700; font-size: var(--fs-base);
}
.all-cats__parent:hover { color: var(--brand); }
.all-cats__children { list-style: none; margin: 0; padding: 0; }
.all-cats__child {
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: 34px;
    padding: var(--sp-2); border-radius: var(--r-sm);
    color: var(--ink-700); font-size: var(--fs-sm);
}
.all-cats__child:hover { background: var(--blue-50); color: var(--blue-800); }
.all-cats__everything {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-5); padding-top: var(--sp-4);
    border-top: 1px solid var(--border); width: 100%;
    color: var(--brand); font-weight: 600; font-size: var(--fs-sm);
}
.all-cats__everything svg { width: 16px; height: 16px; }

@media (max-width: 991px) {
    .header-nav { display: none; }
}

/* --------------------------------------------------------------------------
   9. Mobile drawer
   -------------------------------------------------------------------------- */
.drawer-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(10, 31, 92, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
    backdrop-filter: blur(2px);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
    width: min(340px, 88vw);
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    box-shadow: var(--shadow-xl);
}
.drawer.is-open { transform: translateX(0); }
.drawer--right { left: auto; right: 0; transform: translateX(100%); width: min(400px, 92vw); }
.drawer--right.is-open { transform: translateX(0); }

.drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--blue-800); color: #fff;
    flex-shrink: 0;
}
.drawer__title { margin: 0; font-size: var(--fs-lg); color: #fff; }
.drawer__close {
    width: 38px; height: 38px; border: 0; border-radius: var(--r-md);
    background: rgba(255, 255, 255, .14); color: #fff;
    display: grid; place-items: center;
}
.drawer__close:hover { background: rgba(255, 255, 255, .24); }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.drawer__foot {
    padding: var(--sp-4); border-top: 1px solid var(--border);
    background: var(--ink-50); flex-shrink: 0;
}


/* Search sheet: the header field is hidden on phones, so the bottom bar's
   Search opens this instead of dropping the customer on a page with no box. */
.drawer--top {
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto; max-height: 82vh;
    transform: translateY(-100%);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.drawer--top.is-open { transform: translateY(0); }
.search-sheet { padding: var(--sp-4); }
.search-sheet__form { display: flex; gap: var(--sp-2); }
.search-sheet__input {
    flex: 1; min-width: 0;
    height: 48px; padding: 0 var(--sp-4);
    border: 1.5px solid var(--border); border-radius: var(--r-md);
    background: var(--ink-50);
    font-size: 16px; /* under 16px iOS zooms the page on focus */
    color: var(--ink-900);
}
.search-sheet__input:focus {
    outline: none; background: #fff;
    border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 58, 158, .12);
}
.search-sheet__btn { height: 48px; padding-inline: var(--sp-5); }
.search-sheet__hint {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm); color: var(--text-muted);
}
.search-sheet__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.search-sheet__tag {
    padding: 6px 12px; border-radius: var(--r-full);
    background: var(--blue-50); color: var(--brand);
    font-size: var(--fs-sm); font-weight: 600;
}
.search-sheet__tag:hover { background: var(--brand); color: #fff; }
.drawer-nav { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.drawer-nav__item { border-bottom: 1px solid var(--ink-100); }
.drawer-nav__link {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    color: var(--ink-800); font-size: var(--fs-md); font-weight: 500;
    min-height: 50px;
}
.drawer-nav__link:hover { background: var(--blue-50); }
.drawer-nav__link svg:first-child { width: 20px; height: 20px; color: var(--brand); }
.drawer-nav__row { display: flex; align-items: center; }
.drawer-nav__row .drawer-nav__link { flex: 1; min-width: 0; }
.drawer-nav__toggle {
    margin-right: var(--sp-3); width: 34px; height: 34px; flex-shrink: 0;
    border: 0; background: var(--ink-100); border-radius: var(--r-sm);
    display: grid; place-items: center; color: var(--ink-600);
}
.drawer-nav__toggle svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.drawer-nav__item.is-open .drawer-nav__toggle svg { transform: rotate(180deg); }

.drawer-sub {
    list-style: none; margin: 0; padding: 0;
    max-height: 0; overflow: hidden;
    background: var(--ink-50);
    transition: max-height .28s var(--ease);
}
.drawer-nav__item.is-open .drawer-sub { max-height: 720px; }
.drawer-sub__link {
    display: block; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-10);
    font-size: var(--fs-base); color: var(--ink-700);
    border-bottom: 1px solid var(--ink-100);
}
.drawer-sub__link:hover { background: var(--blue-50); color: var(--blue-800); }
/* --------------------------------------------------------------------------
   10. Mobile bottom navigation
   -------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 480;
    display: none;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .10);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__inner { display: grid; grid-template-columns: repeat(5, 1fr); }
.bottom-nav__link {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 7px 2px 8px; min-height: var(--bottom-nav-h);
    color: var(--ink-700); font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    border: 0; background: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s var(--ease);
}
.bottom-nav__icon {
    position: relative;
    display: grid; place-items: center;
    width: 46px; height: 28px; border-radius: var(--r-full);
    transition: background .2s var(--ease);
}
.bottom-nav__link svg { width: 23px; height: 23px; }
.bottom-nav__link:active .bottom-nav__icon { background: var(--blue-50); }
.bottom-nav__link.is-active { color: var(--brand); }
.bottom-nav__link.is-active .bottom-nav__icon { background: var(--blue-50); }
.bottom-nav__link.is-active svg { stroke-width: 2.1; }
.bottom-nav__count {
    position: absolute; top: -6px; right: 3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--danger-500); color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 1; border-radius: var(--r-full);
    border: 1.5px solid #fff;
}
/* An empty basket does not need a badge shouting zero at the customer. */
.bottom-nav__count[data-count="0"] { display: none; }

@media (max-width: 991px) {
    .bottom-nav { display: block; }
    body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
}

/* WhatsApp floating button */
.wa-fab {
    position: fixed; right: 12px; z-index: 470;
    bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom));
    width: 48px; height: 48px; border-radius: 50%;
    background: #0B7C5E; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 22px rgba(11, 124, 94, .42);
    transition: transform .2s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); color: #fff; }
.wa-fab svg { width: 26px; height: 26px; }

@media (min-width: 992px) {
    .wa-fab { bottom: 24px; right: 24px; width: 54px; height: 54px; }
    .wa-fab svg { width: 30px; height: 30px; }
}


/* --------------------------------------------------------------------------
   11. Product card
   -------------------------------------------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}
@media (min-width: 576px) { .product-grid { gap: var(--sp-4); } }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.product-card:hover {
    border-color: var(--blue-100);
    box-shadow: var(--shadow-lg);
}
@media (hover: hover) {
    .product-card:hover { transform: translateY(-3px); }
}

.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--white);
    overflow: hidden;
}
.product-card__img {
    width: 100%; height: 100%; object-fit: contain;
    padding: var(--sp-4);
    transition: transform .35s var(--ease);
}
.product-card:hover .product-card__img { transform: scale(1.05); }

.product-card__flags {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}

/* Three stacked flags cover a third of the photo on a phone; the discount and
   whichever comes next are the two that actually sell. */
@media (max-width: 767px) {
    .product-card__flags .badge:nth-child(n+3) { display: none; }
    .product-card__flags .badge { font-size: 10px; padding: 3px 7px; }
    /* The discount already sits on the photo as a flag. */
    .product-card .price__off { display: none; }
}

.product-card__actions {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 1;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) and (min-width: 992px) {
    .product-card__actions { opacity: 0; transform: translateX(6px); }
    .product-card:hover .product-card__actions,
    .product-card:focus-within .product-card__actions { opacity: 1; transform: translateX(0); }
}

.action-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .95);
    color: var(--ink-600);
    display: grid; place-items: center;
    box-shadow: var(--shadow-xs);
    transition: all .15s var(--ease);
}
.action-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.action-btn svg { width: 17px; height: 17px; }
.action-btn.is-active { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }
.action-btn.is-active svg { fill: currentColor; }

.product-card__body {
    display: flex; flex-direction: column; flex: 1;
    padding: var(--sp-3);
    gap: 6px;
}
@media (min-width: 576px) { .product-card__body { padding: var(--sp-4); } }

.product-card__brand {
    font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700);
    text-transform: uppercase; letter-spacing: .06em;
}
.product-card__title {
    margin: 0; font-size: var(--fs-base); font-weight: 600; line-height: 1.4;
    letter-spacing: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.8em;
}
.product-card__title a { color: var(--ink-800); }
.product-card__title a:hover { color: var(--brand); }

.product-card__rating {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-sm); color: var(--text-muted);
}

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
.price__now { font-size: var(--fs-lg); font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; }
.price__was { font-size: var(--fs-sm); color: var(--text-faint); text-decoration: line-through; }
.price__from { font-size: var(--fs-sm); color: var(--text-faint); }
.price__off { font-size: var(--fs-sm); font-weight: 700; color: var(--success-700); }
.price__tax { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }

.product-card__stock { font-size: var(--fs-sm); font-weight: 600; }
.product-card__stock--in { color: var(--success-700); }
.product-card__stock--low { color: var(--warning-600); }
.product-card__stock--out { color: var(--danger-700); }

.product-card__foot { margin-top: auto; padding-top: var(--sp-2); }

/* Horizontal scroller for carousels */
.scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-4);
    padding-bottom: var(--sp-2);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.scroller > * { scroll-snap-align: start; }
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-track { background: var(--ink-100); border-radius: 3px; }
.scroller::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 3px; }
.scroller::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

@media (min-width: 576px) { .scroller { grid-auto-columns: minmax(230px, 1fr); gap: var(--sp-4); } }
@media (min-width: 1100px) { .scroller { grid-auto-columns: minmax(255px, 1fr); } }

.scroller-wrap { position: relative; }
.scroller-nav {
    position: absolute; top: 40%; z-index: 5;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    color: var(--ink-700); display: none; place-items: center;
    box-shadow: var(--shadow-md);
    transition: all .15s var(--ease);
}
.scroller-nav:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.scroller-nav svg { width: 20px; height: 20px; }
.scroller-nav--prev { left: -18px; }
.scroller-nav--next { right: -18px; }
.scroller-nav[disabled] { opacity: .35; pointer-events: none; }

@media (min-width: 1200px) {
    .scroller-nav { display: grid; }
}
/* --------------------------------------------------------------------------
   12. Hero

   A light banner rather than a dark panel: catalogue photography is shot on
   white, so it sits on a pale ground without the cut-out edge showing, and the
   headline can carry real contrast. Text and product are laid out in HTML
   instead of baked into an image, so nothing crops on a narrow phone.
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--blue-50); overflow: hidden; isolation: isolate; }

.hero__slides {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.hero__slides::-webkit-scrollbar { display: none; width: 0; height: 0; }

.hero__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    /* Flex items default to min-width:auto, which lets a nowrap button push the
       slide wider than the track and leaves the carousel stuck between slides. */
    min-width: 0;
    min-height: clamp(370px, 98vw, 440px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    display: grid;
    align-items: end;
    background: linear-gradient(135deg, #E9F1FF 0%, #F8FBFF 46%, #DCE9FD 100%);
    color: var(--ink-900);
}
/* The soft sweep that gives the flat ground some light. */
.hero__slide::before {
    content: "";
    position: absolute; z-index: 0; pointer-events: none;
    right: -26%; top: -34%; width: 108%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%);
}
.hero__slide::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, 0) 60%);
}
.hero__slide--sky  { background: linear-gradient(135deg, #E4F6FB 0%, #F7FDFF 46%, #D3EEF7 100%); }
.hero__slide--dark { background: linear-gradient(135deg, #FFF4E2 0%, #FFFCF6 46%, #FDE9C9 100%); }

.hero__inner {
    position: relative; z-index: 1;
    display: grid;
    gap: 0;
    align-content: start;
    /* The dots overlay the bottom of the slide; this is their clear space. */
    padding-block: var(--sp-4) 26px;
}
.hero__content { position: relative; z-index: 2; max-width: 560px; }

.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; margin-bottom: var(--sp-2);
    background: rgba(18, 58, 158, .09); color: var(--brand);
    border: 1px solid rgba(18, 58, 158, .16);
    border-radius: var(--r-full);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
.hero__title {
    color: var(--ink-900);
    font-size: clamp(1.5rem, 6.4vw, 2.9rem);
    line-height: 1.13; letter-spacing: -0.03em;
    margin-bottom: var(--sp-2);
    text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--brand); }
.hero__text {
    font-size: clamp(.875rem, 3.4vw, 1.05rem);
    line-height: 1.5;
    color: var(--ink-600);
    margin-bottom: var(--sp-3);
    max-width: 42ch;
    /* Banner copy varies in length; two lines keeps every slide the same
       height on a phone instead of one slide pushing the product off. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero__cta > .btn {
    flex: 0 1 auto;
    /* Tighter than .btn--lg so the primary and the call button share one row on
       a 360px screen instead of stacking into two full-width blocks. */
    padding-inline: 1.15rem; font-size: .95rem; min-height: 48px;
    box-shadow: 0 8px 18px rgba(18, 58, 158, .18);
}
.hero__cta > .hero__btn--minor {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(18, 58, 158, .28);
    color: var(--brand);
    box-shadow: none;
}
.hero__cta > .hero__btn--minor:hover { background: #fff; color: var(--blue-800); }
.hero__btn-long { display: none; }

.hero__note {
    margin-top: var(--sp-2);
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
    font-size: 12px; font-weight: 600; color: var(--ink-600);
}
.hero__note span { display: inline-flex; align-items: center; gap: 5px; }
.hero__note svg { width: 14px; height: 14px; color: var(--success-500); flex-shrink: 0; }
/* Two proof points fit one line on a phone; the third would cost a whole row. */
.hero__note span:nth-child(n+3) { display: none; }

/* The product sits on the floor of the banner, the way a shot banner would. */
.hero__media {
    position: relative;
    justify-self: center; align-self: end;
    width: 100%; max-width: 460px;
    margin-top: var(--sp-2);
}
.hero__media:empty { display: none; }
/* Catalogue photography is shot on white. A white pool a little larger than
   the frame dissolves that rectangle into the banner instead of leaving a
   visible box floating on the tint. */
.hero__media::before {
    content: "";
    position: absolute; z-index: 0;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(128%, 520px); height: 172%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff 0%, #fff 66%, rgba(255, 255, 255, 0) 100%);
}
.hero__img {
    position: relative; z-index: 1;
    display: block; width: 100%;
    height: clamp(165px, 46vw, 215px);
    object-fit: contain; object-position: center bottom;
}

@media (min-width: 560px) {
    .hero__btn-short { display: none; }
    .hero__btn-long  { display: inline; }
    .hero__cta > .btn { padding-inline: 1.6rem; font-size: var(--fs-md); min-height: 52px; }
    .hero__text { -webkit-line-clamp: none; display: block; overflow: visible; }
    .hero__note { font-size: var(--fs-sm); }
    .hero__note span:nth-child(n+3) { display: inline-flex; }
}
@media (min-width: 768px) {
    .hero__slide { min-height: 430px; }
    .hero__inner { padding-block: var(--sp-8) 34px; }
    .hero__note svg { width: 16px; height: 16px; }
    .hero__img { height: clamp(220px, 30vw, 275px); }
}
/* Two columns only once the text side can hold a real headline; at 768px a
   half-width column breaks the title onto four lines. */
@media (min-width: 992px) {
    .hero__slide { min-height: 460px; align-items: center; }
    .hero__inner {
        grid-template-columns: 1.02fr .98fr;
        gap: var(--sp-6);
        align-content: center; align-items: center;
        padding-block: var(--sp-10);
    }
    .hero__media { margin-top: 0; align-self: center; }
    .hero__img { height: clamp(240px, 26vw, 320px); object-position: center; }
}
@media (min-width: 1200px) {
    .hero__slide { min-height: 480px; }
    .hero__img { height: 340px; }
}

.hero__dots {
    position: absolute; z-index: 4;
    bottom: 12px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 2px 8px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 2px 10px rgba(16, 36, 78, .12);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__dot {
    position: relative;
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: var(--r-full);
    background: rgba(18, 58, 158, .28); cursor: pointer;
    transition: width .25s var(--ease), background .25s var(--ease);
}
/* The dot stays a dot; this is the part a thumb actually has to hit. */
.hero__dot::after { content: ""; position: absolute; inset: -11px -6px; }
.hero__dot.is-active { background: var(--brand); width: 24px; }

.hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, .85); border: 1px solid rgba(18, 58, 158, .14);
    color: var(--brand); display: none; place-items: center;
    box-shadow: 0 4px 14px rgba(16, 36, 78, .14);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero__arrow:hover { background: #fff; color: var(--blue-800); }
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow--prev { left: var(--sp-4); }
.hero__arrow--next { right: var(--sp-4); }
@media (min-width: 992px) { .hero__arrow { display: grid; } }

@media (prefers-reduced-motion: reduce) {
    .hero__slides { scroll-behavior: auto; }
    .hero__dot { transition: none; }
}

/* Small phones (320-359px). The brand lockup and the hero CTA both need a
   little less of everything before they start colliding. */
@media (max-width: 359px) {
    .brand { min-width: 0; gap: var(--sp-2); }
    .brand__logo { height: 40px; }
    .brand__text { min-width: 0; }
    .brand__name { font-size: 1.02rem; white-space: normal; line-height: 1.15; }
    .brand__tag { display: none; }

    .hero__title { font-size: 1.4rem; }
    .hero__cta > .btn { padding-inline: .95rem; font-size: .9rem; }
    .hero__cta > .btn > svg { display: none; }
    .hero__img { height: 150px; }
    .hero__note { font-size: 11.5px; }
}

/* --------------------------------------------------------------------------
   13. Trust bar
   -------------------------------------------------------------------------- */
.trust-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
}
.trust-bar__grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    padding-block: var(--sp-5);
}
@media (min-width: 768px) { .trust-bar__grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
@media (min-width: 992px) { .trust-bar__grid { gap: var(--sp-5); } }

.trust-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2);
}
.trust-item__icon {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-md);
    background: var(--blue-50); color: var(--brand);
    display: grid; place-items: center;
}
.trust-item__icon svg { width: 22px; height: 22px; }
.trust-item__title { font-size: var(--fs-base); font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.trust-item__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }

/* Side-by-side leaves about 110px for the words on a 360px screen, which
   breaks every label onto three lines. Stacked and centred reads far better. */
@media (max-width: 991px) {
    .trust-item {
        flex-direction: column; align-items: center; text-align: center;
        gap: var(--sp-2); padding: var(--sp-2) 2px;
    }
    .trust-item__icon { width: 38px; height: 38px; }
    .trust-item__icon svg { width: 20px; height: 20px; }
    .trust-item__title { font-size: var(--fs-sm); }
    .trust-item__text { font-size: 11.5px; }
}

/* --------------------------------------------------------------------------
   14. Category grid
   -------------------------------------------------------------------------- */
.cat-grid {
    display: grid;
    /* Three tiles across 375px leaves ~105px a card, which clips names like
       "CPAP & BiPAP Masks" to an ellipsis. Two reads properly on a phone. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}
@media (min-width: 480px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 576px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 992px) { .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.cat-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3);
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    text-align: center;
    transition: all .2s var(--ease);
}
.cat-card:hover {
    border-color: var(--brand); box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.cat-card__media {
    width: 100%; aspect-ratio: 1 / 1;
    background: var(--ink-50); border-radius: var(--r-md);
    display: grid; place-items: center; overflow: hidden;
}
.cat-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); }
.cat-card__name {
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-card:hover .cat-card__name { color: var(--brand); }
.cat-card__count { font-size: var(--fs-xs); color: var(--text-faint); }

/* On a phone thirteen tiles stacked two-up is seven rows of scrolling before
   the first product. Two rows that swipe sideways, bleeding to the screen
   edges so the cut-off tile shows there is more, costs about a fifth of that. */
@media (max-width: 767px) {
    .cat-grid {
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        grid-auto-columns: 42%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(var(--sp-4) * -1);
        padding: 2px var(--sp-4) var(--sp-2);
    }
    .cat-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .cat-card { scroll-snap-align: start; }
    .cat-card__name { min-height: 2.7em; }
}
@media (max-width: 400px) {
    .cat-grid { grid-auto-columns: 47%; }
}

/* --------------------------------------------------------------------------
   15. Promo banners
   -------------------------------------------------------------------------- */
.promo-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .promo-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.promo {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    min-height: 170px; padding: var(--sp-6);
    border-radius: var(--r-lg); overflow: hidden;
    background: linear-gradient(120deg, var(--blue-700), var(--blue-500));
    color: #fff;
}
/* White text over sky-500 measured 2.24:1 - the card read as a pale
   blue smudge on a phone. Same family, dark enough to carry text. */
.promo--sky { background: linear-gradient(120deg, #0F5468, #15718A); }
.promo--yellow { background: linear-gradient(120deg, var(--yellow-600), var(--yellow-500)); color: var(--ink-900); }
.promo--dark { background: linear-gradient(120deg, var(--ink-900), var(--ink-700)); }
.promo__eyebrow {
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; opacity: .85; margin-bottom: var(--sp-2);
}
.promo__title { color: inherit; font-size: var(--fs-xl); margin-bottom: var(--sp-2); max-width: 20ch; }
.promo__text { font-size: var(--fs-base); opacity: .9; margin-bottom: var(--sp-4); max-width: 34ch; }
.promo__img {
    position: absolute; right: -10px; bottom: -10px;
    width: 42%; max-width: 190px; opacity: .95;
    object-fit: contain; pointer-events: none;
}
.promo__cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: .55rem 1.1rem; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35);
    color: inherit; font-weight: 600; font-size: var(--fs-sm);
    backdrop-filter: blur(4px);
}
.promo__cta:hover { background: rgba(255, 255, 255, .3); color: inherit; }
.promo--yellow .promo__cta { background: rgba(15, 23, 42, .1); border-color: rgba(15, 23, 42, .2); }

/* --------------------------------------------------------------------------
   16. Brands strip
   -------------------------------------------------------------------------- */
.brand-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
@media (min-width: 640px) { .brand-strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .brand-strip { grid-template-columns: repeat(6, 1fr); } }

.brand-tile {
    display: grid; place-items: center;
    padding: var(--sp-4); min-height: 82px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
    transition: all .2s var(--ease);
}
.brand-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.brand-tile img {
    max-height: 42px; width: auto; object-fit: contain;
    filter: grayscale(1); opacity: .72; transition: all .2s var(--ease);
}
.brand-tile:hover img { filter: none; opacity: 1; }
.brand-tile__name { font-weight: 700; color: var(--ink-600); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   17. Testimonials
   -------------------------------------------------------------------------- */
.testimonial {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-5);
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    height: 100%;
}
.testimonial__body { font-size: var(--fs-base); color: var(--ink-700); line-height: 1.65; flex: 1; }
.testimonial__foot { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial__avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--blue-100); color: var(--blue-800);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-base);
    flex-shrink: 0;
}
.testimonial__name { font-weight: 700; color: var(--ink-900); font-size: var(--fs-base); }
.testimonial__loc { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   18. Blog cards
   -------------------------------------------------------------------------- */
.post-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden; height: 100%;
    transition: all .2s var(--ease);
}
.post-card:hover { box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--ink-100); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }
.post-card__title {
    margin: 0; font-size: var(--fs-md); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__title a { color: var(--ink-900); }
.post-card__title a:hover { color: var(--brand); }
.post-card__excerpt {
    font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__more { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }

/* --------------------------------------------------------------------------
   19. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    list-style: none; margin: 0; padding: var(--sp-3) 0;
    font-size: var(--fs-sm); color: var(--text-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after {
    content: "/"; color: var(--ink-300); margin-left: 2px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 28px; }
.breadcrumb [aria-current] { color: var(--ink-800); font-weight: 600; }

/* Safari on iOS zooms the whole page when a field smaller than 16px takes
   focus, and never zooms back out. Every typable control gets 16px on a
   phone; the visual size is held by padding, not the font. */
@media (max-width: 991px) {
    .input, .select, .textarea,
    .qty__input,
    .header-search__input,
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="search"], input[type="number"],
    input[type="date"], select, textarea {
        font-size: 16px;
    }

    /* A breadcrumb of four levels wraps to three lines above the product
       title; one line that scrolls keeps the page starting where it should. */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
        margin-inline: calc(var(--sp-4) * -1);
        padding-inline: var(--sp-4);
    }
    .breadcrumb::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .breadcrumb li { flex-shrink: 0; }
}

.page-head {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    padding-block: var(--sp-4) var(--sp-6);
}
.page-head__title { margin: var(--sp-2) 0 0; font-size: var(--fs-2xl); }
.page-head__subtitle { margin: var(--sp-2) 0 0; color: var(--text-muted); max-width: 68ch; }

/* --------------------------------------------------------------------------
   20. Catalog layout
   -------------------------------------------------------------------------- */
.catalog { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 992px) {
    .catalog { grid-template-columns: 270px minmax(0, 1fr); gap: var(--sp-8); }
}

.filters {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden;
}
@media (min-width: 992px) {
    .filters { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
}
@media (min-width: 992px) {
    /*
     * The panel is also the mobile filter drawer, so on a desktop it has to
     * shed the drawer's geometry, not just its position: the inherited
     * width:340px, z-index:1000 and drop shadow put a 340px panel in a 270px
     * column, sitting on top of the first product card.
     */
    .drawer--filters {
        position: sticky;
        top: 96px;
        inset-inline: auto;
        bottom: auto;
        display: block;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        transform: none;
        z-index: 1;
        box-shadow: none;
    }
}
.filters__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4); border-bottom: 1px solid var(--border);
    background: var(--ink-50);
}
.filters__title { margin: 0; font-size: var(--fs-md); }

.filter-group { border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: 0; }
.filter-group__head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: var(--sp-3) var(--sp-4);
    background: none; border: 0; text-align: left;
    font-size: var(--fs-base); font-weight: 700; color: var(--ink-800);
}
.filter-group__head svg { width: 16px; height: 16px; color: var(--ink-400); transition: transform .2s var(--ease); }
.filter-group.is-open .filter-group__head svg { transform: rotate(180deg); }
.filter-group__body { padding: 0 var(--sp-4) var(--sp-4); display: none; }
.filter-group.is-open .filter-group__body { display: block; }

.filter-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.filter-list li + li { margin-top: var(--sp-2); }
.filter-list .checkbox { min-height: 34px; align-items: center; font-size: var(--fs-base); }
.filter-list__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); }

.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); align-items: center; }
.price-inputs .input { min-height: 40px; padding: .45rem .6rem; }
@media (min-width: 992px) { .price-inputs .input { font-size: var(--fs-sm); } }
.price-inputs span { color: var(--text-faint); }

.catalog-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
    margin-bottom: var(--sp-4);
}
.catalog-toolbar__count { font-size: var(--fs-sm); color: var(--text-muted); }
.catalog-toolbar__count strong { color: var(--ink-900); }
.catalog-toolbar__right { display: flex; align-items: center; gap: var(--sp-2); }
.catalog-toolbar .select { min-height: 40px; padding-block: .4rem; width: auto; min-width: 170px; }
@media (min-width: 992px) { .catalog-toolbar .select { font-size: var(--fs-sm); } }

.filter-toggle { display: inline-flex; }
@media (min-width: 992px) { .filter-toggle { display: none; } }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* Empty state */
.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-4); text-align: center;
    background: #fff; border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
}
.empty-state__icon {
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--ink-100); color: var(--ink-400);
    display: grid; place-items: center;
}
.empty-state__icon svg { width: 32px; height: 32px; }
.empty-state__title { margin: 0; font-size: var(--fs-lg); }
.empty-state__text { color: var(--text-muted); max-width: 46ch; margin: 0; }

/* Pagination */
.pagination {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px; list-style: none; margin: var(--sp-8) 0 0; padding: 0;
}
.pagination__link {
    display: grid; place-items: center;
    min-width: 42px; height: 42px; padding: 0 var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: #fff; color: var(--ink-700); font-weight: 600; font-size: var(--fs-base);
    transition: all .15s var(--ease);
}
.pagination__link:hover { border-color: var(--brand); color: var(--brand); background: var(--blue-50); }
.pagination__link.is-active {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.pagination__link.is-disabled { opacity: .4; pointer-events: none; }
.pagination__gap { padding: 0 var(--sp-2); color: var(--text-faint); }

/* --------------------------------------------------------------------------
   21. Product detail
   -------------------------------------------------------------------------- */
.pdp { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 992px) {
    .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); }
}
@media (min-width: 1200px) {
    .pdp { grid-template-columns: 560px minmax(0, 1fr); }
}

.gallery { display: grid; gap: var(--sp-3); }
@media (min-width: 576px) {
    /* Only when there is a thumb rail to put in the first column. A
       single-image product used to place its photo in the 78px column. */
    .gallery--rail { grid-template-columns: 78px minmax(0, 1fr); }
}

.gallery__thumbs {
    display: flex; gap: var(--sp-2); order: 2;
    overflow-x: auto; scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 576px) {
    .gallery__thumbs {
        order: 0; flex-direction: column; max-height: 480px; overflow-y: auto;
    }
}
.gallery__thumb {
    flex: 0 0 68px; width: 68px; height: 68px;
    border: 2px solid var(--border); border-radius: var(--r-md);
    background: #fff; padding: 4px; cursor: pointer;
    transition: border-color .15s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb.is-active { border-color: var(--brand); }
.gallery__thumb:hover { border-color: var(--blue-500); }

.gallery__main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden;
}
.gallery__img {
    width: 100%; height: 100%; object-fit: contain; padding: var(--sp-5);
    transition: transform .3s var(--ease);
}
.gallery__main.is-zoomed .gallery__img { transform: scale(1.9); cursor: zoom-out; }
.gallery__zoom-hint {
    position: absolute; bottom: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: var(--r-full);
    background: rgba(15, 23, 42, .72); color: #fff;
    font-size: var(--fs-xs); font-weight: 500; pointer-events: none;
}
.gallery__zoom-hint svg { width: 14px; height: 14px; }
.gallery__flags { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

/* --------------------------------------------------------------------------
   Product video
   -------------------------------------------------------------------------- */
.pdp-video {
    /* The gallery is a two-column grid on tablets up (thumb rail, then the
       image). Left to auto-placement the video lands in the 78px thumb
       column and squashes the photo, so it is pinned to the wide column. */
    order: 3; position: relative; margin-top: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: #10171f; overflow: hidden;
    aspect-ratio: 16 / 9;
}
/* The trigger is a child, not the wrapper: a <button> may not contain an
   iframe, and the player replaces this element on click. */
.pdp-video__trigger {
    display: block; width: 100%; height: 100%;
    padding: 0; border: 0; background: none; cursor: pointer;
}
.pdp-video__still {
    width: 100%; height: 100%; object-fit: cover;
    opacity: .85; transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.pdp-video__trigger:hover .pdp-video__still { opacity: 1; transform: scale(1.02); }
.pdp-video__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center;
    width: 62px; height: 62px; border-radius: 50%;
    background: rgba(255, 255, 255, .94); color: var(--brand);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: transform .2s var(--ease);
}
.pdp-video__trigger:hover .pdp-video__play { transform: translate(-50%, -50%) scale(1.08); }
.pdp-video__trigger:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pdp-video__play svg { width: 30px; height: 30px; margin-left: 3px; }
.pdp-video__label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--sp-5) var(--sp-3) var(--sp-2);
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
    color: #fff; font-size: var(--fs-sm); font-weight: 600; text-align: left;
}
.pdp-video__frame { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 576px) {
    .gallery--rail .pdp-video { grid-column: 2; }
    .pdp-video { margin-top: 0; }
}

.pdp__brand {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm); font-weight: 700; color: var(--sky-700);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-2);
}
.pdp__title { font-size: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: var(--sp-3); }
.pdp__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
    padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm); color: var(--text-muted);
}
.pdp__meta a { font-weight: 600; }

.pdp__price { margin-bottom: var(--sp-4); }
.pdp__price .price__now { font-size: var(--fs-3xl); }
.pdp__price .price__was { font-size: var(--fs-md); }
.pdp__save {
    display: inline-block; margin-top: var(--sp-2);
    font-size: var(--fs-base); font-weight: 600; color: var(--success-700);
}

.pdp__stock {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-4);
}
.pdp__stock svg { width: 18px; height: 18px; }
.pdp__stock--in { color: var(--success-700); }
.pdp__stock--low { color: var(--warning-600); }
.pdp__stock--out { color: var(--danger-700); }

.pdp__short {
    font-size: var(--fs-base); color: var(--ink-700); line-height: 1.7;
    padding: var(--sp-4); background: var(--ink-50); border-radius: var(--r-md);
    border-left: 3px solid var(--brand);
    margin-bottom: var(--sp-5);
}

.variant-group { margin-bottom: var(--sp-5); }
.variant-group__label {
    display: block; font-size: var(--fs-sm); font-weight: 700;
    color: var(--ink-700); margin-bottom: var(--sp-2);
}
.variant-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.variant-option {
    /* 44px so a size can be picked with a thumb, not a fingernail. */
    position: relative; min-height: 44px;
    padding: .55rem 1rem; border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md); background: #fff;
    font-size: var(--fs-base); font-weight: 600; color: var(--ink-700);
    cursor: pointer; transition: all .15s var(--ease);
}
.variant-option:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.variant-option.is-selected { border-color: var(--brand); background: var(--blue-50); color: var(--blue-800); }
.variant-option:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* ---------------------------------------------------------------------
   Pack picker
   ---------------------------------------------------------------------
   Filters and cushions sell in packs of 2, 4, 6, 12, and the only reason
   anyone looks at them side by side is to work out which is the better buy.
   A row of bare labels makes them click each one to find that out, so each
   option carries its own price, its MRP and what one piece works out at.

   A grid rather than a wrapping row: the cards then line up in columns and
   the eye can run down the prices, which is the comparison being made. */
.pack-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--sp-2);
}
.pack {
    /* Comfortably past 44px: this is the control most likely to be tapped
       twice by mistake on a phone. */
    display: flex; flex-direction: column; gap: 2px;
    min-height: 88px; padding: .6rem .5rem;
    border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
    background: #fff; text-align: left; cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.pack:hover:not(:disabled) { border-color: var(--brand); }
.pack.is-selected {
    border-color: var(--brand); background: var(--blue-50);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.pack:disabled { opacity: .5; cursor: not-allowed; }

.pack__label { font-size: var(--fs-base); font-weight: 700; color: var(--ink-900); line-height: 1.25; }
.pack.is-selected .pack__label { color: var(--blue-800); }
.pack__price { font-size: var(--fs-base); font-weight: 700; color: var(--ink-900); }
.pack__mrp   { font-size: var(--fs-xs); color: var(--ink-500); text-decoration: line-through; }
.pack__each  { font-size: var(--fs-xs); color: var(--ink-500); }
.pack__out   { font-size: var(--fs-xs); font-weight: 700; color: var(--danger-700); }

@media (max-width: 400px) {
    /* Two to a row on the narrowest phones rather than three squeezed ones. */
    .pack-options { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

.pdp__buy {
    display: grid; gap: var(--sp-3);
    grid-template-columns: auto 1fr;
    align-items: center;
    margin-bottom: var(--sp-4);
}
.pdp__buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 420px) {
    .pdp__buy { grid-template-columns: 1fr; }
    .pdp__buy-actions { grid-template-columns: 1fr; }
}

.pdp__secondary { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.pdp__secondary .btn { flex: 1; min-width: 145px; }

.usp-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.usp-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-base); color: var(--ink-700); }
.usp-list svg { width: 18px; height: 18px; color: var(--success-500); flex-shrink: 0; margin-top: 2px; }

.pdp-accordion { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-3); }
.pdp-accordion__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    width: 100%; padding: var(--sp-3) var(--sp-4);
    background: var(--ink-50); border: 0; text-align: left;
    font-size: var(--fs-base); font-weight: 700; color: var(--ink-800);
}
.pdp-accordion__head svg { width: 16px; height: 16px; transition: transform .2s var(--ease); flex-shrink: 0; }
.pdp-accordion.is-open .pdp-accordion__head svg { transform: rotate(180deg); }
.pdp-accordion__body { padding: var(--sp-4); display: none; font-size: var(--fs-base); }
.pdp-accordion.is-open .pdp-accordion__body { display: block; }

/* Tabs */
.tabs { margin-top: var(--sp-10); }
.tabs__nav {
    display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none;
    border-bottom: 2px solid var(--border); margin-bottom: var(--sp-5);
}
.tabs__nav::-webkit-scrollbar { display: none; }
.tabs__btn {
    padding: var(--sp-3) var(--sp-5); border: 0; background: none;
    font-size: var(--fs-md); font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    white-space: nowrap; transition: all .15s var(--ease);
}
.tabs__btn:hover { color: var(--brand); }
.tabs__btn.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: fadeIn .25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }

/* Rich content */
.rich-text { font-size: var(--fs-md); line-height: 1.75; color: var(--ink-700); }
.rich-text h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
.rich-text h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.rich-text h2:first-child, .rich-text h3:first-child { margin-top: 0; }
.rich-text ul, .rich-text ol { padding-left: var(--sp-6); }
.rich-text li { margin-bottom: var(--sp-2); }
.rich-text img { border-radius: var(--r-md); margin-block: var(--sp-4); }
.rich-text a { text-decoration: underline; }
.rich-text blockquote {
    margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--brand); background: var(--blue-50);
    border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-700);
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.about-hero {
    background: linear-gradient(135deg, #E9F1FF 0%, #F8FBFF 46%, #DCE9FD 100%);
    border-bottom: 1px solid var(--border);
}
.about-hero__inner {
    display: grid; gap: var(--sp-6);
    padding-block: var(--sp-8);
}
.about-hero__title {
    margin: 0 0 var(--sp-2);
    font-size: clamp(1.7rem, 6.6vw, 2.9rem);
    line-height: 1.12; letter-spacing: -0.03em;
}
.about-hero__tagline {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-md); font-weight: 600; color: var(--brand);
}
.about-hero__text { margin-bottom: var(--sp-5); }
.about-hero__text p:last-child { margin-bottom: 0; }

.about-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: 0 10px 30px rgba(16, 36, 78, .08);
}
.about-card__title { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); }
.about-card__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); }
.about-card__list li {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    font-size: var(--fs-base); color: var(--ink-700); line-height: 1.5;
}
.about-card__list svg { width: 19px; height: 19px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }

.about-services { display: grid; gap: var(--sp-4); }
.about-service {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--sp-5);
}
.about-service__icon {
    display: grid; place-items: center;
    width: 46px; height: 46px; margin-bottom: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--blue-50); color: var(--brand);
}
.about-service__icon svg { width: 24px; height: 24px; }
.about-service__title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.about-service__text { margin: 0; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.6; }

.about-why { max-width: 68ch; }
.about-why .section__title { margin-bottom: var(--sp-4); }

.about-note {
    display: flex; align-items: flex-start; gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: var(--r-lg);
}
.about-note__icon {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; background: #fff; color: var(--brand);
}
.about-note__icon svg { width: 22px; height: 22px; }
.about-note__title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.about-note .rich-text p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .about-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .about-hero__inner {
        grid-template-columns: 1.25fr .75fr;
        align-items: start;
        gap: var(--sp-8);
        padding-block: var(--sp-12);
    }
}
.rich-text table { width: 100%; border-collapse: collapse; margin-block: var(--sp-4); }
.rich-text th, .rich-text td { padding: var(--sp-3); border: 1px solid var(--border); text-align: left; }
.rich-text th { background: var(--ink-50); font-weight: 700; }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:nth-child(even) { background: var(--ink-50); }
.spec-table th {
    width: 38%; padding: var(--sp-3) var(--sp-4);
    text-align: left; font-weight: 700; color: var(--ink-700); vertical-align: top;
}
.spec-table td { padding: var(--sp-3) var(--sp-4); color: var(--ink-700); }
@media (max-width: 575px) {
    .spec-table th { width: 45%; font-size: var(--fs-sm); }
    .spec-table td { font-size: var(--fs-sm); }
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FAQ */
.faq-list {
    max-width: 78ch;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 0 var(--sp-5);
}
.faq-list .faq-item:last-child { border-bottom: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    width: 100%; padding: var(--sp-4) 0;
    background: none; border: 0; text-align: left;
    font-size: var(--fs-md); font-weight: 600; color: var(--ink-900);
}
.faq-item__q svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); transition: transform .2s var(--ease); }
.faq-item.is-open .faq-item__q svg { transform: rotate(45deg); }
.faq-item__a { display: none; padding-bottom: var(--sp-4); color: var(--ink-700); line-height: 1.7; }
.faq-item.is-open .faq-item__a { display: block; }

/* --------------------------------------------------------------------------
   22. Reviews
   -------------------------------------------------------------------------- */
.review-summary {
    display: grid; gap: var(--sp-6);
    padding: var(--sp-5); background: var(--ink-50); border-radius: var(--r-lg);
    margin-bottom: var(--sp-6);
}
@media (min-width: 768px) { .review-summary { grid-template-columns: 220px 1fr; align-items: center; } }

.review-score { text-align: center; }
.review-score__value { font-size: 3rem; font-weight: 800; color: var(--ink-900); line-height: 1; letter-spacing: -0.03em; }
.review-score__stars { margin: var(--sp-2) 0; }
.review-score__count { font-size: var(--fs-sm); color: var(--text-muted); }

.review-bars { display: grid; gap: 7px; }
.review-bar { display: grid; grid-template-columns: 54px 1fr 44px; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.review-bar__label { color: var(--text-muted); white-space: nowrap; }
.review-bar__track { height: 8px; background: var(--ink-200); border-radius: var(--r-full); overflow: hidden; }
.review-bar__fill { height: 100%; background: var(--yellow-500); border-radius: var(--r-full); }
.review-bar__count { text-align: right; color: var(--text-muted); }

.review {
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--border);
}
.review:last-child { border-bottom: 0; }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.review__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--blue-100); color: var(--blue-800);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
}
.review__author { font-weight: 700; color: var(--ink-900); }
.review__date { font-size: var(--fs-sm); color: var(--text-muted); }
.review__title { font-size: var(--fs-md); font-weight: 700; margin: var(--sp-2) 0; color: var(--ink-900); }
.review__body { color: var(--ink-700); line-height: 1.7; }
.review__reply {
    margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: var(--blue-50); border-left: 3px solid var(--brand);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-base); color: var(--ink-700);
}
.review__reply strong { color: var(--blue-800); }
.review__actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.review__vote {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-full);
    background: #fff; color: var(--ink-600); font-size: var(--fs-sm); font-weight: 500;
    transition: all .15s var(--ease);
}
.review__vote:hover { border-color: var(--brand); color: var(--brand); }
.review__vote svg { width: 14px; height: 14px; }

.rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input label { cursor: pointer; color: var(--ink-300); transition: color .12s var(--ease); }
.rating-input label svg { width: 34px; height: 34px; fill: currentColor; }
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label { color: var(--yellow-500); }
.rating-input input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   23. Cart & checkout
   -------------------------------------------------------------------------- */
.cart-layout { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 992px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 370px; gap: var(--sp-8); } }

.cart-item {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-4);
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .cart-item { grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; } }

.cart-item__media {
    width: 92px; height: 92px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 640px) { .cart-item__media { width: 110px; height: 110px; } }
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.cart-item__title { font-size: var(--fs-base); font-weight: 600; margin: 0 0 4px; line-height: 1.4; }
.cart-item__title a { color: var(--ink-900); }
.cart-item__variant { font-size: var(--fs-sm); color: var(--text-muted); }
.cart-item__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.cart-item__total { text-align: right; font-size: var(--fs-lg); font-weight: 800; color: var(--ink-900); white-space: nowrap; }
.cart-item__remove {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: none; padding: 0;
    color: var(--danger-500); font-size: var(--fs-sm); font-weight: 600;
}
.cart-item__remove:hover { text-decoration: underline; }
.cart-item__remove svg { width: 15px; height: 15px; }

.summary-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden;
}
@media (min-width: 992px) { .summary-card { position: sticky; top: 96px; } }
.summary-card__head { padding: var(--sp-4); border-bottom: 1px solid var(--border); background: var(--ink-50); }
.summary-card__title { margin: 0; font-size: var(--fs-md); }
.summary-card__body { padding: var(--sp-4); }
.summary-card__foot { padding: var(--sp-4); border-top: 1px solid var(--border); background: var(--ink-50); }

.summary-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) 0; font-size: var(--fs-base); color: var(--ink-700);
}
.summary-row--total {
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1.5px dashed var(--border-strong);
    font-size: var(--fs-lg); font-weight: 800; color: var(--ink-900);
}
.summary-row--saving { color: var(--success-700); font-weight: 600; }
.summary-row--free { color: var(--success-700); font-weight: 600; }

.free-ship-bar { margin-top: var(--sp-3); }
.free-ship-bar__track { height: 6px; background: var(--ink-200); border-radius: var(--r-full); overflow: hidden; }
.free-ship-bar__fill { height: 100%; background: linear-gradient(90deg, var(--success-500), var(--sky-500)); border-radius: var(--r-full); transition: width .3s var(--ease); }
.free-ship-bar__text { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 6px; }

.coupon-form { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.coupon-form .input { min-height: 42px; text-transform: uppercase; }
.coupon-applied {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3); border-radius: var(--r-md);
    background: var(--success-100); border: 1px dashed var(--success-500);
    font-size: var(--fs-sm); color: var(--success-700); font-weight: 600;
}

.checkout-layout { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 992px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-8); } }

.checkout-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.checkout-card__title {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-lg); margin-bottom: var(--sp-4);
}
.checkout-card__step {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
}

.pay-method {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4); border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md); cursor: pointer; margin-bottom: var(--sp-3);
    transition: all .15s var(--ease);
}
.pay-method:hover { border-color: var(--brand); background: var(--blue-50); }
.pay-method:has(input:checked) { border-color: var(--brand); background: var(--blue-50); box-shadow: 0 0 0 3px rgba(18,58,158,.08); }
.pay-method input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--brand); }
.pay-method__title { font-weight: 700; color: var(--ink-900); }
.pay-method__text { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.pay-method__logos { display: flex; gap: 6px; margin-top: var(--sp-2); flex-wrap: wrap; }
.pay-method__logo {
    padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px;
    background: #fff; font-size: 10px; font-weight: 700; color: var(--ink-600);
    letter-spacing: .03em;
}

.mini-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) 0;
}
.mini-item__media {
    position: relative; width: 52px; height: 52px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: #fff; overflow: hidden;
}
.mini-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.mini-item__qty {
    position: absolute; top: -6px; right: -6px;
    min-width: 19px; height: 19px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--ink-700); color: #fff;
    font-size: 10px; font-weight: 700; border-radius: var(--r-full);
}
.mini-item__name { font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; }
.mini-item__price { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

/* Order confirmation */
.confirm-hero {
    text-align: center; padding: var(--sp-10) var(--sp-4);
}
.confirm-hero__icon {
    width: 84px; height: 84px; margin: 0 auto var(--sp-5);
    border-radius: 50%; background: var(--success-100); color: var(--success-500);
    display: grid; place-items: center;
}
.confirm-hero__icon svg { width: 44px; height: 44px; }
.confirm-hero__icon--fail { background: var(--danger-100); color: var(--danger-500); }
.confirm-hero__number {
    display: inline-block; margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
    background: var(--ink-100); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: var(--fs-md); font-weight: 700; letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   24. Order status timeline
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
    content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px;
    width: 2px; background: var(--border);
}
.timeline__item { position: relative; padding: 0 0 var(--sp-5) var(--sp-10); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    position: absolute; left: 0; top: 2px;
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 2px solid var(--border-strong);
    display: grid; place-items: center; color: var(--ink-400);
    z-index: 1;
}
.timeline__dot svg { width: 14px; height: 14px; }
.timeline__item--done .timeline__dot { background: var(--success-500); border-color: var(--success-500); color: #fff; }
.timeline__item--current .timeline__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.timeline__item--cancelled .timeline__dot { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }
.timeline__title { font-weight: 700; color: var(--ink-900); font-size: var(--fs-base); }
.timeline__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.timeline__note { font-size: var(--fs-sm); color: var(--ink-600); margin-top: 2px; }

/* --------------------------------------------------------------------------
   25. Account layout
   -------------------------------------------------------------------------- */
.account-layout { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 992px) { .account-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-8); } }

.account-nav {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden;
}
@media (min-width: 992px) { .account-nav { position: sticky; top: 96px; } }
.account-nav__head {
    padding: var(--sp-4); background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
    color: #fff;
}
.account-nav__name { font-weight: 700; font-size: var(--fs-md); }
.account-nav__email { font-size: var(--fs-sm); opacity: .82; word-break: break-all; }
.account-nav__list { list-style: none; margin: 0; padding: var(--sp-2); }
.account-nav__link {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3); border-radius: var(--r-md);
    color: var(--ink-700); font-size: var(--fs-base); font-weight: 500;
}
.account-nav__link:hover { background: var(--ink-50); color: var(--brand); }
.account-nav__link.is-active { background: var(--blue-50); color: var(--blue-800); font-weight: 700; }
.account-nav__link svg { width: 19px; height: 19px; }
.account-nav__badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    display: grid; place-items: center; border-radius: var(--r-full);
    background: var(--danger-500); color: #fff; font-size: 11px; font-weight: 700;
}

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

.stat-card {
    padding: var(--sp-4); background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-lg);
}
.stat-card__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.stat-card__value { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.2; }
.stat-card__meta { font-size: var(--fs-xs); color: var(--text-faint); }

.card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--sp-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.card__title { margin: 0; font-size: var(--fs-md); }
.card__body { padding: var(--sp-5); }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.data-table th {
    padding: var(--sp-3) var(--sp-4); text-align: left;
    background: var(--ink-50); border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm); font-weight: 700; color: var(--ink-600);
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.data-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--ink-50); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Order card (mobile-friendly list) */
.order-card {
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: #fff; overflow: hidden; margin-bottom: var(--sp-4);
}
.order-card__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: var(--ink-50); border-bottom: 1px solid var(--border);
}
.order-card__number { font-weight: 700; color: var(--ink-900); font-size: var(--fs-base); }
.order-card__date { font-size: var(--fs-sm); color: var(--text-muted); }
.order-card__body { padding: var(--sp-4); }
.order-card__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   26. Modal
   -------------------------------------------------------------------------- */
.modal {
    position: fixed; inset: 0; z-index: 1100;
    display: grid; place-items: center;
    padding: var(--sp-4);
    background: rgba(10, 31, 92, .55);
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease), visibility .2s;
    overflow-y: auto;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__dialog {
    width: 100%; max-width: 880px;
    background: #fff; border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    transform: translateY(16px) scale(.98);
    transition: transform .25s var(--ease);
    max-height: 92vh; overflow-y: auto;
}
.modal.is-open .modal__dialog { transform: none; }
.modal__dialog--sm { max-width: 460px; }
.modal__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: #fff; z-index: 2;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal__title { margin: 0; font-size: var(--fs-lg); }
.modal__close {
    width: 36px; height: 36px; border: 0; border-radius: var(--r-md);
    background: var(--ink-100); color: var(--ink-600);
    display: grid; place-items: center;
}
.modal__close:hover { background: var(--ink-200); color: var(--ink-900); }
.modal__close svg { width: 18px; height: 18px; }
.modal__body { padding: var(--sp-5); }
.modal__foot {
    display: flex; gap: var(--sp-3); justify-content: flex-end;
    padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

body.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   Sticky buy bar (phones)

   A product page runs several screens on a phone; once the buy box has
   scrolled away the price and the button follow the customer down the page.
   -------------------------------------------------------------------------- */
.buy-bar {
    position: fixed; left: 0; right: 0; z-index: 475;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    display: none; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .10);
    transform: translateY(110%);
    transition: transform .25s var(--ease);
}
.buy-bar.is-visible { transform: translateY(0); }
.buy-bar__price { display: flex; flex-direction: column; line-height: 1.15; }
.buy-bar__now { font-size: var(--fs-lg); font-weight: 800; color: var(--ink-900); }
.buy-bar__was { font-size: var(--fs-sm); color: var(--text-faint); text-decoration: line-through; }
.buy-bar__btn { flex: 1; min-height: 46px; max-width: 60%; margin-left: auto; }

@media (max-width: 991px) {
    .buy-bar { display: flex; }
    /* The WhatsApp button would sit on top of the bar's button. */
    body:has(.buy-bar.is-visible) .wa-fab {
        bottom: calc(var(--bottom-nav-h) + 74px + env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   27. Compare bar
   -------------------------------------------------------------------------- */
.compare-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 490;
    background: var(--ink-900); color: #fff;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s var(--ease);
    padding-bottom: env(safe-area-inset-bottom);
}
.compare-bar.is-visible { transform: translateY(0); visibility: visible; }
.compare-bar__inner {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) 0; flex-wrap: wrap;
}
.compare-bar__items { display: flex; gap: var(--sp-2); flex: 1; flex-wrap: wrap; }
.compare-bar__item {
    position: relative; width: 52px; height: 52px;
    background: #fff; border-radius: var(--r-sm); overflow: hidden;
}
.compare-bar__item img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.compare-bar__remove {
    position: absolute; top: -5px; right: -5px;
    width: 19px; height: 19px; border: 0; border-radius: 50%;
    background: var(--danger-500); color: #fff;
    display: grid; place-items: center; font-size: 12px; line-height: 1;
}
/* Above the bottom bar when open, and far enough down to clear it when
   closed - translateY(100%) alone left it parked on top of the nav. */
@media (max-width: 991px) {
    .compare-bar { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
    .compare-bar:not(.is-visible) {
        transform: translateY(calc(100% + var(--bottom-nav-h) + env(safe-area-inset-bottom)));
    }
}

.compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 700px; }
.compare-table th, .compare-table td {
    padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); vertical-align: top;
}
.compare-table thead th { background: var(--ink-50); text-align: center; }
.compare-table tbody th { background: var(--ink-50); text-align: left; width: 190px; font-weight: 700; }

/* --------------------------------------------------------------------------
   28. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: rgba(255, 255, 255, .78); margin-top: var(--sp-16); }

.footer-cta {
    background: linear-gradient(120deg, var(--blue-800), var(--blue-600));
    padding-block: var(--sp-8);
}
.footer-cta__inner {
    display: grid; gap: var(--sp-5); align-items: center;
}
@media (min-width: 768px) { .footer-cta__inner { grid-template-columns: 1fr auto; } }
.footer-cta__title { color: #fff; font-size: var(--fs-xl); margin-bottom: 4px; }
.footer-cta__text { color: rgba(255, 255, 255, .82); margin: 0; }
.newsletter-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.newsletter-form .input { min-width: 220px; flex: 1; background: rgba(255,255,255,.95); border-color: transparent; }

.footer-main { padding-block: var(--sp-10); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-8); } }

.footer-brand__logo { height: 52px; width: auto; margin-bottom: var(--sp-3); background: #fff; padding: 6px; border-radius: var(--r-md); }
.footer-brand__text { font-size: var(--fs-base); line-height: 1.7; color: rgba(255,255,255,.7); margin-bottom: var(--sp-4); }

.footer-title {
    color: #fff; font-size: var(--fs-base); font-weight: 700;
    margin-bottom: var(--sp-3); letter-spacing: .02em;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* 21px of line box is a target for a mouse. These are stacked in a
   column, so the height costs nothing and a thumb can find them. */
.footer-list a {
    display: inline-flex; align-items: center; min-height: 32px;
    color: rgba(255, 255, 255, .72); font-size: var(--fs-base);
}
.footer-list a:hover { color: var(--yellow-400); }

.footer-contact { display: grid; gap: var(--sp-3); }
.footer-contact__item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-base); }
.footer-contact__item svg { width: 18px; height: 18px; color: var(--yellow-500); flex-shrink: 0; margin-top: 3px; }
.footer-contact__item a {
    display: inline-flex; align-items: center; min-height: 32px;
    color: rgba(255, 255, 255, .82);
}
.footer-contact__item a:hover { color: var(--yellow-400); }

.social-links { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social-link {
    width: 38px; height: 38px; border-radius: var(--r-md);
    background: rgba(255, 255, 255, .1); color: #fff;
    display: grid; place-items: center;
    transition: all .15s var(--ease);
}
.social-link:hover { background: var(--yellow-500); color: var(--ink-900); }
.social-link svg { width: 19px; height: 19px; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-block: var(--sp-4);
    font-size: var(--fs-sm);
}
.footer-bottom__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
}
.footer-bottom a { color: rgba(255, 255, 255, .68); }
.footer-bottom a:hover { color: var(--yellow-400); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-legal a, .footer-bottom__inner > a { display: inline-flex; align-items: center; min-height: 32px; }

/* The GSTIN and the medical disclaimer. They were inline styles at 45%
   and 50% white, which is 4.5:1 at best on the footer navy - and this
   is the one paragraph on the site with legal weight. */
.footer-fine {
    font-size: var(--fs-xs); line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}
.footer-fine--wide { max-width: 80ch; }

/* Footer accordion on mobile */
@media (max-width: 639px) {
    .footer-col { border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: var(--sp-3); }
    .footer-col .footer-title {
        display: flex; align-items: center; justify-content: space-between;
        cursor: pointer; margin-bottom: 0; padding-block: var(--sp-2);
    }
    .footer-col .footer-title::after {
        content: "+"; font-size: 1.25rem; font-weight: 400; line-height: 1;
        color: var(--yellow-500);
    }
    .footer-col.is-open .footer-title::after { content: "−"; }
    .footer-col .footer-list, .footer-col .footer-contact { display: none; padding-top: var(--sp-3); }
    .footer-col.is-open .footer-list { display: grid; }
    .footer-col.is-open .footer-contact { display: grid; }
    .footer-col--always .footer-list, .footer-col--always .footer-contact { display: grid; }
    .footer-col--always .footer-title { cursor: default; }
    .footer-col--always .footer-title::after { content: none; }
}

/* --------------------------------------------------------------------------
   29. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-sm     { font-size: var(--fs-sm); }
.text-xs     { font-size: var(--fs-xs); }
.text-lg     { font-size: var(--fs-lg); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }

@media (min-width: 768px) { .d-md-block { display: block; } .d-md-none { display: none; } }
@media (max-width: 767px) { .d-sm-none { display: none; } }

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 37%, var(--ink-100) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Print */
@media print {
    .site-header, .site-footer, .bottom-nav, .wa-fab, .announce,
    .compare-bar, .flash-stack, .btn, .breadcrumb { display: none !important; }
    body { padding: 0; font-size: 12px; }
    .container { max-width: none; padding: 0; }
    .card, .order-card { border: 1px solid #ccc; box-shadow: none; }
}