/* ==========================================================================
   Torquee Marketplace — theme
   Ported from the torqueeshop-v2 Next.js reference (Tailwind).
   Dark cinematic hero, alternating black / light-gray sections, huge type,
   red-600 accents, deeply rounded cards.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------
   The scale started as raw Tailwind values; it is now tuned for this brand.
   Every name is kept so the whole sheet inherits the retune, but the values
   are our own: the red ramp is deeper at both ends, the neutrals carry a
   slight cool cast so white surfaces read crisp against the canvas, and the
   elevation scale is layered and blue-shadowed instead of flat black.
   ------------------------------------------------------------------------ */
:root {
    /* --- Brand red. 600 is the logo red and never moves; the rest of the
       ramp is built around it so hover reads as pressure and the tints stay
       legible as backgrounds. --- */
    --red-50: #fff5f5;
    --red-100: #ffe3e3;
    --red-200: #ffc9c9;
    --red-400: #f96a68;
    --red-500: #ef3b3b;
    --red-600: #dc2626;
    --red-700: #b81d1d;
    --red-800: #931818;
    --red-900: #641010;
    --red-950: #370909;

    /* --- Ink. Near-black rather than pure black everywhere: pure #000 next
       to white vibrates, a hair of blue in it sits calmer. --- */
    --black: #000000;
    --neutral-950: #08090c;
    --neutral-900: #14161b;
    --neutral-800: #22252c;
    --neutral-700: #3a3e47;

    /* --- Canvas & neutrals. The page sits a step darker than in-card fills
       so white cards lift off it without needing a heavy shadow. --- */
    --page: #eef0f4;
    --surface: #ffffff;
    --gray-100: #f4f6f9;
    --gray-200: #e6e9ef;   /* hairline borders */
    --gray-300: #d3d8e1;
    --gray-400: #98a1b0;
    --gray-500: #626b7b;   /* muted text — passes AA on white */
    --gray-600: #4b5464;
    --gray-700: #333b48;
    --gray-800: #1f2530;
    --gray-900: #10151d;   /* headline ink */

    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #12a150;
    --green-700: #10823f;
    --green-800: #166534;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --blue-600: #2563eb;

    /* --- Radii. Tightened from the original 12→40 spread: deeply rounded
       cards read playful, this scale reads like retail. --- */
    --r-xl: 12px;
    --r-2xl: 16px;
    --r-3xl: 20px;
    --r-28: 22px;
    --r-30: 24px;
    --r-35: 28px;
    --r-40: 32px;

    /* --- Elevation. Two layers each (a tight contact shadow plus a wide
       ambient one) tinted toward the ink colour, which keeps shadows from
       going grey-muddy over the coloured sections. --- */
    --shadow: 0 1px 2px rgba(16, 21, 29, .04), 0 1px 3px rgba(16, 21, 29, .06);
    --shadow-lg: 0 2px 4px -1px rgba(16, 21, 29, .05), 0 12px 24px -8px rgba(16, 21, 29, .12);
    --shadow-xl: 0 4px 8px -2px rgba(16, 21, 29, .06), 0 24px 44px -12px rgba(16, 21, 29, .16);
    --shadow-2xl: 0 8px 16px -6px rgba(16, 21, 29, .08), 0 36px 68px -18px rgba(16, 21, 29, .24);
    /* Lift for anything red: a plain grey shadow under a red button looks
       dirty, a red-tinted one looks lit. */
    --shadow-red: 0 4px 14px -4px rgba(220, 38, 38, .45);
    --shadow-red-lg: 0 8px 24px -6px rgba(220, 38, 38, .5);

    /* Focus ring, used by every interactive element. */
    --ring: 0 0 0 3px rgba(220, 38, 38, .28);
    --ring-dark: 0 0 0 3px rgba(255, 255, 255, .45);

    --brand-gradient: linear-gradient(135deg, #ef3b3b 0%, #dc2626 55%, #b81d1d 100%);

    --shell: 1280px;      /* max-w-7xl */
    --gutter: 24px;       /* px-6 */
    --drawer-width: 320px;

    --ease: cubic-bezier(.22, 1, .36, 1);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
    color: var(--gray-900);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.drawer-open {
    overflow: hidden;
}

main {
    flex: 1 0 auto;
}

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

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

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

p {
    margin: 0;
}

ul {
    margin: 0;
}

[hidden] {
    display: none !important;
}

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

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

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

.section {
    padding-block: 80px;
}

.section-lg {
    padding-block: 96px;
}

.section-dark {
    background: var(--black);
    color: #fff;
}

/* Section heading: text-5xl font-black + emoji */
.big-heading {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.section-dark .big-heading {
    color: #fff;
}

.big-heading .sub {
    display: block;
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gray-500);
}

.head-block {
    margin-bottom: 48px;
}

.head-block h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--gray-900);
}

.head-block p {
    margin-top: 12px;
    color: var(--gray-500);
    font-size: 1.05rem;
}

/* ---------- 4. Buttons -------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    border: 1px solid transparent;
    border-radius: var(--r-2xl);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    transition: background .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s;
}

.btn-red {
    background: var(--red-600);
    color: #fff;
}

.btn-red:hover {
    background: var(--red-700);
}

.btn-black {
    background: var(--black);
    color: #fff;
}

.btn-black:hover {
    background: var(--neutral-800);
}

.btn-outline {
    background: #fff;
    color: var(--gray-900);
    border-color: var(--gray-300);
}

.btn-outline:hover {
    background: var(--gray-100);
}

/* Glass button used on dark backgrounds */
/* Account actions read friendlier in green than in the shop's alert red. */
.btn-green {
    background: var(--green-600);
    color: #fff;
}

.btn-green:hover { background: var(--green-700); }

.btn-glass {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.btn-glass:hover {
    background: #fff;
    color: var(--black);
}

.btn-lg {
    padding: 20px 40px;
    font-size: 1.125rem;
}

.btn-sm {
    padding: 10px 18px;
    font-size: .875rem;
    border-radius: var(--r-xl);
}

.btn-block {
    width: 100%;
}

.btn-scale:hover {
    transform: scale(1.05);
}

.btn[disabled],
.btn.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Nav pill buttons (navbar login / signup) */
.btn-nav {
    padding: 8px 18px;
    border-radius: var(--r-xl);
    font-weight: 600;
    font-size: .95rem;
}

/* ---------- 5. Forms ---------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--r-2xl);
    color: var(--gray-900);
    font-size: 1rem;
    outline: none;
    transition: border-color .3s, box-shadow .3s;
}

input::placeholder,
textarea::placeholder {
    color: var(--gray-500);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--red-600);
    box-shadow: 0 0 0 2px var(--red-200);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field > label,
label.field-label {
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-700);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 20px;
}

.help-text,
.helptext {
    font-size: .85rem;
    font-weight: 400;
    color: var(--gray-500);
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--red-600);
}

/* Radio cards */
.choice-list {
    display: grid;
    gap: 14px;
}

.choice-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    cursor: pointer;
    transition: border-color .3s, background .3s;
}

.choice-card:hover {
    border-color: var(--red-600);
}

.choice-card.selected {
    border-color: var(--red-600);
    background: var(--red-50);
}

.choice-card input {
    width: auto;
    margin-top: 4px;
    accent-color: var(--red-600);
}

.choice-card strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

.choice-card small {
    color: var(--gray-500);
    font-size: .9rem;
}

/* ---------- 6. Badges --------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
}

.pill-red {
    background: var(--red-600);
    color: #fff;
}

.pill-glass {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .3);
    color: var(--red-200);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    padding: 12px 24px;
}

.pill-glass svg {
    color: var(--red-400);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tag-red { background: var(--red-600); color: #fff; }
.tag-black { background: var(--black); color: #fff; }
.tag-green { background: #dcfce7; color: #166534; }
.tag-amber { background: #fef3c7; color: #92400e; }
.tag-gray { background: var(--gray-100); color: var(--gray-700); }

/* ==========================================================================
   7. SITE HEADER (utility strip + search bar + red primary nav)
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* Scrolling down slides the whole header out of view; scrolling up (or
   returning near the top of the page) brings it straight back. Toggled by the
   scroll handler in base.html. */
.site-header.header-hidden {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}

/* ---- 7a. Utility strip ---- */
.utility-bar {
    background: var(--black);
    color: var(--gray-300);
    font-size: .8rem;
}

.utility-inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 9px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.utility-location,
.utility-promo,
.utility-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.utility-location svg { color: var(--red-500); }
.utility-promo svg { color: var(--green-400); }

.utility-links {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.utility-links a:hover { color: #fff; }
.utility-links .sep { color: var(--neutral-700); }

.utility-phone {
    margin-left: 8px;
    font-weight: 700;
    color: #fff;
}

/* ---- 7b. Main bar ---- */
.header-main {
    border-bottom: 1px solid var(--gray-200);
}

.header-inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 16px var(--gutter);
    display: flex;
    align-items: center;
    gap: 32px;
}

.brand {
    flex-shrink: 0;
    display: block;
    line-height: 1;
}

.brand-name {
    display: block;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: .06em;
    color: var(--gray-900);
}

.brand-name i {
    font-style: normal;
    color: var(--red-600);
}

.brand-sub {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* Search */
.header-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 48px;
    border: 2px solid var(--red-600);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: #fff;
}

.search-scope {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--gray-200);
}

.search-scope select {
    height: 100%;
    width: auto;
    min-width: 160px;
    padding: 0 34px 0 18px;
    border: none;
    border-radius: 0;
    background: #fff;
    font-size: .92rem;
    font-weight: 600;
    color: var(--gray-700);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.search-scope select:focus { box-shadow: none; }

.scope-caret {
    position: absolute;
    right: 12px;
    color: var(--gray-500);
    pointer-events: none;
}

.header-search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 18px;
    border: none;
    border-radius: 0;
    font-size: .95rem;
}

.header-search input[type="search"]:focus { box-shadow: none; }

.header-search button {
    flex-shrink: 0;
    width: 68px;
    display: grid;
    place-items: center;
    border: none;
    background: var(--red-600);
    color: #fff;
    cursor: pointer;
    transition: background .3s;
}

.header-search button:hover { background: var(--red-700); }

/* Header actions */
.header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    color: var(--gray-900);
    transition: color .2s;
}

.header-action:hover { color: var(--red-600); }

.action-icon {
    position: relative;
    display: inline-flex;
}

.action-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red-600);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    line-height: 1;
}

.action-label { font-size: .95rem; }

/* Account dropdown */
.account-menu {
    position: relative;
}

.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    background: none;
    border: none;
    color: var(--gray-900);
    cursor: pointer;
    text-align: left;
    transition: color .2s;
}

.account-trigger:hover { color: var(--red-600); }

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
    overflow: hidden;
    flex-shrink: 0;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.account-text small {
    font-size: .74rem;
    color: var(--gray-500);
}

.account-text strong {
    font-size: .95rem;
    font-weight: 700;
}

.account-caret {
    color: var(--gray-500);
    flex-shrink: 0;
}

.dropdown-cta {
    padding: 14px;
}

.dropdown-cta p {
    margin-top: 12px;
    font-size: .85rem;
    color: var(--gray-500);
    text-align: center;
}

.dropdown-cta p a {
    font-weight: 700;
    color: var(--green-700);
}

/* Host for Google's own rendered button. Google controls the iframe's inner
   styling, so this only centres it and gives it breathing room. */
.dropdown-google {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    min-height: 40px;
}

.dropdown-google iframe { margin: 0 !important; }

/* ---- 7c. Red primary nav ---- */
.primary-nav {
    background: var(--red-600);
    color: #fff;
}

.primary-nav-inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.mega-menu {
    position: relative;
    flex-shrink: 0;
}

.mega-trigger {
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 28px;
    background: var(--red-700);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background .25s;
}

.mega-trigger:hover { background: var(--red-900); }

.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0 0 var(--r-2xl) var(--r-2xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 60;
}

.mega-menu.open .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-panel a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--r-xl);
    font-weight: 600;
    font-size: .95rem;
    color: var(--gray-700);
}

.mega-panel a:hover {
    background: var(--red-50);
    color: var(--red-600);
}

.mega-icon { font-size: 1.1rem; line-height: 1; }

.mega-empty {
    display: block;
    padding: 14px;
    color: var(--gray-500);
    font-size: .9rem;
}

/* ---- Nested categories in the mega menu ---- */
/* Top level lives in the panel; each deeper level flies out to the right on
   hover or keyboard focus, so the tree can nest as deep as the client needs. */
.mega-tree,
.mega-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-node { position: relative; }

.mega-node > a { justify-content: space-between; }

.mega-node > a .mega-label { flex: 1; }

.mega-caret {
    flex: none;
    color: var(--gray-400);
    transition: transform .15s, color .15s;
}

.mega-node > a:hover .mega-caret { color: var(--red-600); transform: translateX(2px); }

.mega-sub {
    position: absolute;
    top: -10px;
    left: 100%;
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 61;
}

.mega-node:hover > .mega-sub,
.mega-node:focus-within > .mega-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mega-node.has-children > a[aria-expanded="true"] + .mega-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Narrow screens have no room for flyouts, so the tree indents inline instead. */
@media (max-width: 900px) {
    .mega-sub {
        position: static;
        min-width: 0;
        max-height: none;
        padding: 0 0 0 18px;
        border: none;
        border-left: 2px solid var(--gray-200);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin: 2px 0 6px 14px;
    }

    .mega-caret { transform: rotate(90deg); }
    .mega-node > a:hover .mega-caret { transform: rotate(90deg); }
}

.primary-links {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.primary-links::-webkit-scrollbar { display: none; }

.primary-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: background .25s, border-color .25s;
}

.primary-links a:hover { background: rgba(0, 0, 0, .12); }

.primary-links a.active {
    background: rgba(0, 0, 0, .18);
    border-bottom-color: #fff;
}

.nav-flag {
    padding: 2px 7px;
    background: #fff;
    color: var(--red-600);
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.nav-toggle {
    display: none;
    padding: 6px;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    color: var(--gray-900);
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 240px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 60;
}

.account-menu.open .account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-dropdown a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--r-xl);
    font-weight: 600;
    color: var(--gray-700);
}

.account-dropdown a:hover {
    background: var(--red-50);
    color: var(--red-600);
}

.account-dropdown hr {
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: 8px 6px;
}

.dropdown-head {
    padding: 10px 14px 14px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 6px;
}

.dropdown-head strong {
    display: block;
}

.dropdown-head small {
    color: var(--gray-500);
    font-size: .85rem;
}

/* ==========================================================================
   8. HOME HERO (rotating banner)
   ========================================================================== */
/* The banner sits inside the page as a rounded card, like the reference art:
   black-to-red stage, red light streaks, copy left, model + product art right. */
.home-hero {
    padding: 22px var(--gutter) 0;
}

.hero-slides {
    position: relative;
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    min-height: clamp(360px, 33vw, 430px);
    display: grid;
    border-radius: var(--r-40);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(62% 108% at 82% 56%, rgba(220, 38, 38, .6) 0%, rgba(127, 29, 29, .32) 42%, transparent 74%),
        linear-gradient(112deg, #000 0%, #0b0709 46%, #1b0608 74%, #350a0c 100%);
    box-shadow: var(--shadow-2xl);
}

/* Red light streaks fanning out from behind the model. */
.hero-slides::before {
    content: "";
    position: absolute;
    inset: -30% -12%;
    background: repeating-linear-gradient(72deg,
        transparent 0 26px,
        rgba(239, 68, 68, .26) 26px 28px,
        transparent 28px 62px);
    -webkit-mask-image: radial-gradient(56% 82% at 80% 52%, #000 0%, rgba(0, 0, 0, .38) 46%, transparent 76%);
    mask-image: radial-gradient(56% 82% at 80% 52%, #000 0%, rgba(0, 0, 0, .38) 46%, transparent 76%);
    pointer-events: none;
}

/* ---- Slide 1 artwork ----
   The model and products are lifted from the supplied banner and bleed to the
   card edge; the headline, buttons and badges stay as HTML so they render
   sharp at any size instead of being upscaled pixels. */
.hero-slide-art.art-bleed { position: static; }

.hero-art {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
}

/* ---- Slides (cross-fade; only .active is visible or focusable) ----
   All three share one grid cell, so the card is as tall as the tallest slide
   instead of needing a hard-coded height. */
.hero-slide {
    position: relative;
    grid-area: 1 / 1;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: 24px;
    padding: 32px clamp(34px, 4.6vw, 66px) 36px;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 10px, 0);
    transition: opacity .5s ease, transform .5s ease, visibility .5s;
    pointer-events: none;
}

.hero-slide.active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.hero-slide-copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
}

.hero-slide h1 {
    margin: 0;
    font-size: clamp(2rem, 3.9vw, 3rem);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.03em;
}

.hero-slide h1 span {
    display: block;
    color: var(--red-500);
}

.hero-slide p {
    margin-top: 12px;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--gray-300);
}

.hero-slide-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-slide-actions .btn svg {
    margin-left: 2px;
}

.hero-badges {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: .82rem;
    color: var(--gray-400);
}

.hero-badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.hero-badges svg {
    flex-shrink: 0;
    color: var(--gray-300);
}

/* ---- Slide artwork ---- */
.hero-slide-art {
    position: relative;
    align-self: stretch;
    min-width: 0;
}

/* Deals / new-arrival slides show a product collage instead of the model. */
.hero-slide-art.art-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 132px));
    align-content: center;
    justify-content: center;
    gap: 16px;
}

.hero-tile {
    margin: 0;
    aspect-ratio: 1;
    padding: 12px;
    border-radius: var(--r-3xl);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
    transition: transform .35s ease;
}

.hero-tile:nth-child(odd) { transform: rotate(-3deg); }
.hero-tile:nth-child(even) { transform: rotate(3deg); }

.hero-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- Controls ---- */
.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateY(-50%);
    transition: background .25s, border-color .25s;
}

.hero-arrow:hover {
    background: var(--red-600);
    border-color: var(--red-600);
}

.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.hero-dot:hover { background: rgba(255, 255, 255, .7); }

.hero-dot.active {
    width: 26px;
    background: var(--red-500);
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity .2s ease; transform: none; }
}

/* Trust strip under the banner */
.hero-features {
    width: 100%;
    max-width: var(--shell);
    margin: 18px auto 0;
}

.hero-features-inner {
    padding: 22px 26px;
    border-radius: var(--r-30);
    background: #fff;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-feature svg {
    flex-shrink: 0;
    color: var(--red-600);
}

.hero-feature strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--gray-900);
}

.hero-feature small {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--gray-500);
}

/* Legacy dark hero (kept for any page still using it) */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, var(--black) 0%, var(--neutral-950) 50%, var(--red-950) 100%);
}

/* Blurred red glow blobs */
.hero-glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.hero-glow.one {
    left: -128px;
    top: 80px;
    width: 384px;
    height: 384px;
    background: rgba(220, 38, 38, .2);
    filter: blur(150px);
}

.hero-glow.two {
    right: 0;
    bottom: 0;
    width: 500px;
    height: 500px;
    background: rgba(239, 68, 68, .1);
    filter: blur(170px);
}

/* Faint floating product icons */
.floating-products {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.floating-item {
    position: absolute;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    color: var(--red-500);
    opacity: .15;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 96px var(--gutter);
    /* Fills the fold on a normal screen without ballooning on very tall ones. */
    min-height: min(92vh, 900px);
    display: flex;
    align-items: center;
}

.hero-copy {
    max-width: 768px;
}

.hero-copy .pill-glass {
    margin-bottom: 32px;
}

.hero-title {
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.03em;
}

.hero-title .gradient {
    display: block;
    background: linear-gradient(to right, var(--red-500), var(--red-400), #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-lead {
    margin-top: 40px;
    max-width: 672px;
    font-size: 1.25rem;
    line-height: 2.25rem;
    color: var(--gray-300);
}

/* Glass search bar */
.hero-search {
    margin-top: 48px;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .1);
    border-radius: var(--r-3xl);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-2xl);
    max-width: 700px;
}

.hero-search-icon {
    display: flex;
    align-items: center;
    padding-inline: 24px;
    color: var(--red-400);
    flex-shrink: 0;
}

.hero-search input {
    flex: 1;
    min-width: 0;
    padding: 24px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 1.125rem;
}

.hero-search input::placeholder {
    color: var(--gray-400);
}

.hero-search input:focus {
    box-shadow: none;
    border-color: transparent;
}

.hero-search select {
    display: none;
}

.hero-search button {
    flex-shrink: 0;
    padding-inline: 40px;
    border: none;
    background: var(--red-600);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s;
}

.hero-search button:hover {
    background: var(--red-700);
}

.hero-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.hero-trust {
    margin-top: 56px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    color: var(--gray-300);
}

.hero-trust > span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.hero-trust .shield {
    color: var(--green-400);
}

.hero-trust .divider {
    color: var(--gray-500);
}

/* ==========================================================================
   9. AI ASSISTANT PANEL
   ========================================================================== */
.ai-panel {
    padding: 32px;
    border-radius: var(--r-30);
    background: linear-gradient(to right, var(--black) 0%, var(--neutral-900) 50%, var(--red-900) 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 48px;
}

.ai-panel h2 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: #fff;
}

.ai-panel .pill-red {
    margin-bottom: 20px;
}

.ai-panel p {
    margin-top: 24px;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--gray-300);
}

.ai-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ai-buttons .btn {
    flex: 1 1 auto;
}

/* ==========================================================================
   10. BRAND MARQUEE
   ========================================================================== */
.brand-marquee {
    background: #fff;
    padding-block: 32px;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 32s linear infinite;
}

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

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

.marquee-track span {
    margin-inline: 48px;
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--gray-400);
    white-space: nowrap;
    transition: color .3s;
}

.marquee-track a:hover span {
    color: var(--red-600);
}

/* ==========================================================================
   11. STATS
   ========================================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.stat-card {
    padding: 40px;
    border: 1px solid var(--neutral-800);
    background: var(--neutral-900);
    border-radius: var(--r-3xl);
    text-align: center;
}

.stat-card h2 {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 900;
    color: var(--red-500);
    font-variant-numeric: tabular-nums;
}

.stat-card p {
    margin-top: 20px;
    font-size: 1.25rem;
    color: var(--gray-300);
}

/* ==========================================================================
   12. CATEGORY GRID (gradient tiles)
   ========================================================================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.category-tile {
    padding: 32px;
    border-radius: var(--r-3xl);
    color: #fff;
    transition: transform .3s, box-shadow .3s;
}

.category-tile:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.category-tile .tile-icon {
    display: block;
    font-size: 50px;
    line-height: 1;
    transition: transform .3s;
}

.category-tile:hover .tile-icon {
    transform: scale(1.25);
}

.category-tile h3 {
    margin-top: 32px;
    font-size: 1.875rem;
    font-weight: 900;
}

.category-tile p {
    margin-top: 12px;
    color: rgba(255, 255, 255, .8);
}

/* Gradient palette, cycled across categories */
.grad-1 { background: linear-gradient(to bottom right, #ef4444, #b91c1c); }
.grad-2 { background: linear-gradient(to bottom right, #3b82f6, #0891b2); }
.grad-3 { background: linear-gradient(to bottom right, #a855f7, #4f46e5); }
.grad-4 { background: linear-gradient(to bottom right, #ec4899, #e11d48); }
.grad-5 { background: linear-gradient(to bottom right, #22c55e, #059669); }
.grad-6 { background: linear-gradient(to bottom right, #f97316, #d97706); }
.grad-7 { background: linear-gradient(to bottom right, #0ea5e9, #2563eb); }
.grad-8 { background: linear-gradient(to bottom right, #374151, #000000); }

/* ==========================================================================
   13. FEATURED BANNER
   ========================================================================== */
.featured-banner {
    position: relative;
    overflow: hidden;
    padding: 64px;
    border-radius: var(--r-40);
    background: linear-gradient(to bottom right, var(--black) 0%, var(--neutral-900) 50%, var(--red-950) 100%);
}

.featured-banner .glow-a {
    position: absolute;
    right: -128px;
    top: -128px;
    width: 384px;
    height: 384px;
    border-radius: 999px;
    background: rgba(220, 38, 38, .2);
    filter: blur(150px);
    pointer-events: none;
}

.featured-banner .glow-b {
    position: absolute;
    left: -96px;
    bottom: 0;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    filter: blur(120px);
    pointer-events: none;
}

.featured-banner-copy {
    position: relative;
    z-index: 1;
    max-width: 768px;
}

.featured-banner h2 {
    margin-top: 32px;
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.15;
    color: #fff;
}

.featured-banner p {
    margin-top: 32px;
    font-size: 1.25rem;
    line-height: 2.25rem;
    color: var(--gray-300);
}

.featured-banner .btn {
    margin-top: 48px;
    font-size: 1.25rem;
}

/* ==========================================================================
   14. FLASH SALE BANNER
   ========================================================================== */
.flash-banner {
    padding: 40px;
    border-radius: var(--r-35);
    background: linear-gradient(to right, var(--red-700), var(--red-600), var(--red-500));
    box-shadow: var(--shadow-2xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.flash-banner h2 {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    color: #fff;
}

.flash-banner p {
    margin-top: 20px;
    font-size: 1.25rem;
    color: var(--red-100);
}

.countdown {
    display: flex;
    gap: 24px;
}

.time-box {
    padding: 24px 32px;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    min-width: 118px;
}

.time-box b {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--red-600);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.time-box span {
    display: block;
    margin-top: 8px;
    font-weight: 600;
    color: var(--gray-500);
}

/* ==========================================================================
   15. TRUST BANNER
   ========================================================================== */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.trust-card {
    padding: 32px;
    border: 1px solid var(--neutral-800);
    background: var(--neutral-900);
    border-radius: var(--r-28);
    transition: transform .3s, border-color .3s;
}

.trust-card:hover {
    transform: translateY(-8px);
    border-color: var(--red-600);
}

.trust-card .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    background: var(--red-600);
    border-radius: var(--r-2xl);
    color: #fff;
}

.trust-card h3 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
}

.trust-card p {
    margin-top: 16px;
    line-height: 1.75;
    color: var(--gray-400);
}

/* ==========================================================================
   16. PRODUCT CARD & GRID
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
    transition: transform .3s, box-shadow .3s;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

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

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform .4s;
}

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

.tag-stack {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
}

.sold-out-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    z-index: 2;
}

.wish-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    color: var(--gray-500);
    cursor: pointer;
    z-index: 3;
    transition: color .3s, border-color .3s, transform .3s;
}

.wish-btn:hover {
    transform: scale(1.1);
}

.wish-btn:hover,
.wish-btn.active {
    color: var(--red-600);
    border-color: var(--red-600);
}

.product-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    flex: 1;
}

.product-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-body h3 a:hover {
    color: var(--red-600);
}

.product-brand {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.product-brand:hover {
    color: var(--red-600);
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.price-row strong {
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--red-600);
    letter-spacing: -0.02em;
}

.price-row del {
    font-size: 1rem;
    color: var(--gray-400);
}

.rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--gray-500);
}

.rating .stars {
    color: var(--amber-500);
    line-height: 1;
}

.stock-line {
    font-size: .85rem;
    font-weight: 600;
    color: var(--green-600);
}

.stock-line.low { color: var(--amber-500); }
.stock-line.out { color: var(--red-600); }

.product-cta {
    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--r-xl);
    overflow: hidden;
    flex-shrink: 0;
}

.qty-btn {
    width: 36px;
    align-self: stretch;
    border: none;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.qty-btn:hover {
    background: var(--red-600);
    color: #fff;
}

.qty-value {
    min-width: 38px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.add-to-cart-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--red-600);
    color: #fff;
    border: none;
    border-radius: var(--r-xl);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .3s, transform .3s;
}

.add-to-cart-btn:hover {
    background: var(--red-700);
}

.add-to-cart-btn.added {
    background: var(--green-600);
}

.add-to-cart-btn.loading {
    opacity: .7;
    pointer-events: none;
}

.add-to-cart-btn.pop {
    animation: pop .35s ease;
}

@keyframes pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Empty state */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 80px 32px;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
    text-align: center;
}

.empty-state .emoji {
    font-size: 3.5rem;
    line-height: 1;
}

.empty-state h3 {
    font-size: 1.875rem;
    font-weight: 900;
}

.empty-state p {
    max-width: 46ch;
    color: var(--gray-500);
    font-size: 1.05rem;
}

.empty-state .actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

/* ==========================================================================
   17. TOOLBAR / PAGINATION / BREADCRUMB
   ========================================================================== */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    margin-bottom: 32px;
    background: #fff;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.toolbar .count {
    color: var(--gray-500);
}

.toolbar .count b {
    color: var(--gray-900);
    font-weight: 800;
}

.sort-group {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--gray-500);
}

.sort-group select {
    width: auto;
    padding: 10px 16px;
    border-radius: var(--r-xl);
    font-weight: 600;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 48px;
}

.page-link {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: #fff;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
    font-weight: 700;
    transition: background .3s, color .3s;
}

.page-link:hover {
    background: var(--red-600);
    color: #fff;
}

.page-link.disabled {
    opacity: .4;
    pointer-events: none;
}

.page-status {
    font-weight: 600;
    color: var(--gray-500);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    font-size: .9rem;
    color: var(--gray-500);
}

.breadcrumb a:hover { color: var(--red-600); }
.breadcrumb .sep { color: var(--gray-300); }
.breadcrumb .current { color: var(--gray-900); font-weight: 600; }

/* ==========================================================================
   18. PAGE HEADER (inner pages)
   ========================================================================== */
.page-hero {
    background: linear-gradient(to bottom right, var(--black), var(--neutral-950), var(--red-950));
    color: #fff;
    padding-block: 72px;
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    background: rgba(220, 38, 38, .25);
    filter: blur(150px);
    pointer-events: none;
}

.page-hero .shell {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    color: #fff;
}

.page-hero p {
    margin-top: 16px;
    font-size: 1.15rem;
    color: var(--gray-300);
    max-width: 60ch;
}

.page-hero .breadcrumb {
    color: var(--gray-400);
    margin-bottom: 20px;
}

.page-hero .breadcrumb .current { color: #fff; }
.page-hero .breadcrumb .sep { color: var(--neutral-700); }

/* ==========================================================================
   19. PRODUCT DETAIL
   ========================================================================== */
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: 40px;
    background: #fff;
    border-radius: var(--r-30);
    box-shadow: var(--shadow-lg);
}

.gallery-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--gray-100);
    border-radius: var(--r-3xl);
    overflow: hidden;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 32px;
}

.gallery-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 76px;
    height: 76px;
    padding: 6px;
    background: var(--gray-100);
    border: 2px solid transparent;
    border-radius: var(--r-2xl);
    cursor: pointer;
    overflow: hidden;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-thumb.active {
    border-color: var(--red-600);
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.detail-info h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.2;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--gray-500);
    font-size: .95rem;
}

.detail-price {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.detail-price strong {
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--red-600);
    letter-spacing: -0.03em;
}

.detail-price del {
    font-size: 1.25rem;
    color: var(--gray-400);
}

/* The description is a laid-out listing: intro paragraphs, then blocks of
   feature lines under short uppercase headings. `linebreaks` gives one <p>
   per block with <br> between the lines inside it, so the spacing lives here. */
.detail-desc {
    color: var(--gray-700);
    line-height: 1.8;
}

.detail-desc p { margin: 0 0 1.15em; }
.detail-desc p:last-child { margin-bottom: 0; }

.desc-heading {
    margin: 1.8em 0 .8em;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-900);
}

.desc-heading::after {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin-top: 8px;
    background: var(--red-600);
    border-radius: 2px;
}

/* Feature lines sit tighter than prose; the tick or emoji is the marker. */
.desc-list {
    margin: 0 0 1.3em;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.desc-list li {
    position: relative;
    padding-left: 26px;
    line-height: 1.55;
}

.desc-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    color: var(--green-600);
}

/* The "perfect for" block keeps the model's own emoji instead of a tick. */
.desc-list.is-emoji li { padding-left: 28px; }
.desc-list.is-emoji li::before { content: none; }

.desc-emoji {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.55;
}

@media (min-width: 720px) {
    .desc-list { grid-template-columns: 1fr 1fr; column-gap: 22px; }
}

.detail-actions {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 24px;
    border-block: 1px solid var(--gray-200);
}

.detail-actions .qty-stepper .qty-btn {
    width: 48px;
}

.detail-actions .qty-stepper .qty-value {
    min-width: 54px;
    font-size: 1.1rem;
}

.wish-btn-inline.active {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}

.spec-list {
    display: grid;
    gap: 1px;
    background: var(--gray-200);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

.spec-list div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    background: #fff;
}

.spec-list .k { color: var(--gray-500); }
.spec-list .v { font-weight: 700; text-align: right; }

.guarantee-list {
    display: grid;
    gap: 16px;
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.guarantee-item .icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--red-600);
    color: #fff;
    border-radius: var(--r-2xl);
    flex-shrink: 0;
}

.guarantee-item strong { display: block; }
.guarantee-item small { color: var(--gray-500); }

/* ==========================================================================
   20. CART / CHECKOUT / SUMMARY
   ========================================================================== */
.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 32px;
    align-items: start;
}

.card {
    background: #fff;
    border-radius: var(--r-30);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.card-pad {
    padding: 32px;
}

.card > h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 32px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 1.375rem;
}

.card > h2 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--red-600);
    color: #fff;
    border-radius: 999px;
    font-style: normal;
    font-size: .95rem;
    font-weight: 800;
    flex-shrink: 0;
}

.card-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cart-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid var(--gray-200);
}

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

.cart-item-media {
    width: 120px;
    height: 120px;
    background: var(--gray-100);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

.cart-item-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.cart-item-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cart-item-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

.cart-item-body h3 a:hover { color: var(--red-600); }

.cart-item-body .meta {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.cart-item-body .unit {
    font-weight: 700;
    color: var(--red-600);
}

.cart-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.cart-item-total {
    font-size: 1.375rem;
    font-weight: 900;
}

.cart-item-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-item-form input[type="number"] {
    width: 84px;
    padding: 10px;
    text-align: center;
    border-radius: var(--r-xl);
}

.link-remove {
    background: none;
    border: none;
    padding: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray-400);
    cursor: pointer;
}

.link-remove:hover {
    color: var(--red-600);
    text-decoration: underline;
}

.summary-card {
    position: sticky;
    top: 104px;
    background: #fff;
    border-radius: var(--r-30);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.summary-card > h2 {
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 1.375rem;
}

.summary-body {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--gray-500);
}

.summary-row strong {
    color: var(--gray-900);
    font-weight: 700;
}

.summary-row.total {
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1.125rem;
}

.summary-row.total strong {
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--red-600);
}

.summary-foot {
    padding: 0 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--gray-500);
}

.pay-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.pay-logos span {
    padding: 6px 12px;
    background: var(--gray-100);
    border-radius: var(--r-xl);
    font-size: .75rem;
    font-weight: 700;
    color: var(--gray-700);
}

.mini-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 320px;
    overflow-y: auto;
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.mini-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.mini-item img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: var(--gray-100);
    border-radius: var(--r-xl);
    padding: 6px;
}

.mini-item .name {
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-item .qty {
    font-size: .85rem;
    color: var(--gray-400);
}

.mini-item .amount {
    font-weight: 800;
    white-space: nowrap;
}

/* Free-delivery progress */
.ship-progress {
    padding: 20px 24px;
    margin-bottom: 32px;
    background: #fff;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
}

.ship-progress p {
    font-weight: 700;
    margin-bottom: 12px;
}

.ship-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 999px;
    overflow: hidden;
}

.ship-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(to right, var(--red-600), var(--red-500));
    border-radius: 999px;
    transition: width .5s;
}

/* Checkout steps */
.steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.step {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: var(--gray-400);
}

.step i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--gray-200);
    color: var(--gray-500);
    border-radius: 999px;
    font-style: normal;
    font-size: .9rem;
}

.step.active { color: var(--gray-900); }
.step.active i { background: var(--red-600); color: #fff; }
.step.done i { background: var(--green-600); color: #fff; }

.step-sep {
    flex: 0 0 40px;
    height: 2px;
    background: var(--gray-200);
}

/* ==========================================================================
   21. ORDER SUCCESS / STATUS
   ========================================================================== */
.success-card {
    padding: 56px 40px;
    background: #fff;
    border-radius: var(--r-30);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.success-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: var(--green-600);
    border-radius: 999px;
    font-size: 2.75rem;
}

.success-card h1 {
    font-size: clamp(1.875rem, 5vw, 3rem);
    margin-bottom: 16px;
}

.success-card > p {
    max-width: 56ch;
    margin: 0 auto 32px;
    color: var(--gray-500);
    font-size: 1.05rem;
}

.order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    margin-bottom: 32px;
    background: var(--gray-200);
    border-radius: var(--r-2xl);
    overflow: hidden;
    text-align: left;
}

.order-meta div {
    padding: 20px 24px;
    background: #fff;
}

.order-meta small {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.order-meta strong { font-size: 1.05rem; }

.order-lines {
    margin-bottom: 32px;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    overflow: hidden;
    text-align: left;
}

.order-lines .line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-200);
}

.order-lines .line:last-child { border-bottom: none; }

.order-lines .line.total {
    background: var(--gray-100);
    font-weight: 800;
}

.order-lines .line.total span:last-child {
    color: var(--red-600);
    font-size: 1.375rem;
    font-weight: 900;
}

.status-track {
    display: flex;
    align-items: flex-start;
}

.status-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    text-align: center;
}

.status-step::before,
.status-step::after {
    content: "";
    position: absolute;
    top: 10px;
    height: 3px;
    background: var(--gray-200);
}

.status-step::before { left: 0; right: 50%; }
.status-step::after { left: 50%; right: 0; }
.status-step:first-child::before,
.status-step:last-child::after { display: none; }

.status-step .dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    border: 4px solid var(--gray-200);
    position: relative;
    z-index: 1;
}

.status-step .label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--gray-400);
}

.status-step.current .dot {
    border-color: var(--red-600);
    background: var(--red-600);
    box-shadow: 0 0 0 6px var(--red-100);
}

.status-step.current .label { color: var(--red-600); }

/* ==========================================================================
   22. MESSAGES & TOAST
   ========================================================================== */
.message-stack {
    width: 100%;
    max-width: var(--shell);
    margin: 24px auto 0;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    padding: 18px 24px;
    background: #fff;
    border-left: 5px solid var(--blue-600);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
    font-weight: 600;
}

.message.success { border-color: var(--green-600); }
.message.error { border-color: var(--red-600); }
.message.warning { border-color: var(--amber-500); }

.message a { color: var(--red-600); font-weight: 700; }

.toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    background: var(--black);
    color: #fff;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-2xl);
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .3s, transform .3s, visibility .3s;
    z-index: 200;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--green-500);
    border-radius: 999px;
    font-size: .85rem;
    flex-shrink: 0;
}

/* ==========================================================================
   23. MOBILE DRAWER
   ========================================================================== */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 90;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--drawer-width);
    max-width: 86vw;
    height: 100%;
    background: #fff;
    box-shadow: var(--shadow-2xl);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

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

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: var(--black);
    color: #fff;
}

/* .brand-name is dark by default, which vanished on the black strip. */
.drawer-header .brand-name { color: #fff; }
.drawer-header .brand-name i { color: var(--red-500); }

.drawer-header .logo { color: var(--red-600); font-size: 1.5rem; }

.drawer-close {
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--r-xl);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
}

.drawer-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.drawer-user img,
.drawer-user .avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--red-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.drawer-user strong { display: block; }
.drawer-user small { color: var(--gray-500); font-size: .85rem; }

.drawer-section { padding: 18px 14px; }

.drawer-section-title {
    padding: 0 10px 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--r-xl);
    font-weight: 600;
    color: var(--gray-700);
}

.drawer-link:hover,
.drawer-link.active {
    background: var(--red-50);
    color: var(--red-600);
}

.drawer-link .badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--red-600);
    color: #fff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.drawer-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 24px;
}

/* ==========================================================================
   24. AUTH
   ========================================================================== */
.auth-shell {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding: 64px var(--gutter);
}

/* Account settings is a full-width form, not a narrow sign-in box. `wide-card`
   only lifted the cap on the card, so without this the shell still pinned the
   page to 560px and the form columns overflowed it. */
.auth-shell.wide-shell {
    max-width: var(--shell);
}

.auth-card {
    padding: 48px 40px;
    background: #fff;
    border-radius: var(--r-30);
    box-shadow: var(--shadow-xl);
}

.auth-copy {
    text-align: center;
    margin-bottom: 32px;
}

.auth-copy .logo {
    display: inline-block;
    margin-bottom: 16px;
}

.auth-copy h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.auth-copy p { color: var(--gray-500); }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-form label,
.form-grid label,
.settings-form label,
.manager-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-700);
}

.auth-form label input,
.form-grid label input,
.form-grid label select,
.form-grid label textarea,
/* The manager form was missing from this list, so every value a manager typed
   rendered bold: the controls inherit the label's weight. */
.manager-form-grid label input,
.manager-form-grid label select,
.manager-form-grid label textarea {
    font-weight: 400;
}

label.wide,
.form-grid label.wide,
/* Extra product images: thumbnails with a tick to drop one. */
.image-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-strip-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray-600);
}

.image-strip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.image-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    background: #fff;
    font-size: .75rem;
    color: var(--gray-600);
    cursor: pointer;
}

.image-strip-item img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
}

.image-strip-item:has(input:checked) {
    border-color: var(--red-600);
    color: var(--red-600);
}

/* Full-width rows. Matches any `.wide` child, not just labels: the image
   strip and the description block are divs, and were being squeezed into a
   single 260px column. */
.manager-form-grid > .wide,
.manager-form-grid label.wide {
    grid-column: 1 / -1;
}

.auth-check,
label.auth-check {
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--gray-500);
}

.auth-check input[type="checkbox"] {
    width: auto;
    accent-color: var(--red-600);
    transform: scale(1.15);
}

.auth-check a { color: var(--red-600); font-weight: 700; }

.auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .95rem;
}

.auth-links a { color: var(--red-600); font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }

/* Divider between the password form and the Google button. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gray-500);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

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

/* Google's branding guidelines: white surface, neutral border, their mark
   at full colour, and the wording left as "Continue/Sign up with Google". */
.button.google-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #3c4043;
    border: 1px solid var(--gray-300);
    font-weight: 600;
}

.button.google-button:hover { background: var(--gray-100); }
.button.google-button svg { flex-shrink: 0; }

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-card.wide-card {
    max-width: none;
}

.form-errors,
.field-errors {
    font-size: .9rem;
    font-weight: 600;
    color: var(--red-600);
}

.form-errors {
    padding: 16px 20px;
    background: var(--red-50);
    border-left: 5px solid var(--red-600);
    border-radius: var(--r-xl);
}

.form-errors ul,
.form-errors li,
.manager-form-grid label ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notice {
    padding: 16px 20px;
    background: #eff6ff;
    border-left: 5px solid var(--blue-600);
    border-radius: var(--r-xl);
    color: #1e3a8a;
}

.muted { color: var(--gray-500); }

/* ==========================================================================
   25. ACCOUNT SETTINGS
   ========================================================================== */
.settings-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.profile-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 24px;
    background: var(--gray-100);
    border-radius: var(--r-3xl);
    text-align: center;
}

.profile-preview img,
.profile-fallback {
    width: 104px;
    height: 104px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--red-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 900;
}

.profile-preview strong { font-size: 1.1rem; }
.profile-preview span { color: var(--gray-500); font-size: .9rem; word-break: break-word; }

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.settings-section {
    padding: 32px;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
}

.settings-section h2 {
    font-size: 1.375rem;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}

.security-list { display: grid; gap: 14px; }

.security-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    cursor: pointer;
}

.security-item:hover { border-color: var(--red-600); }
.security-item strong { display: block; }
.security-item small { color: var(--gray-500); font-weight: 400; }

.security-item input[type="checkbox"] {
    width: auto;
    accent-color: var(--red-600);
    transform: scale(1.3);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.settings-card {
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.settings-card h2 {
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 1.25rem;
}

.settings-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-card-body p { color: var(--gray-500); }

/* ==========================================================================
   26. MANAGER DASHBOARD
   ========================================================================== */
.dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.dashboard-head h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); }

.dashboard-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin-bottom: 32px;
    background: #fff;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
    overflow-x: auto;
}

.dashboard-nav a {
    padding: 11px 20px;
    border-radius: var(--r-xl);
    font-weight: 700;
    font-size: .95rem;
    color: var(--gray-700);
    white-space: nowrap;
}

.dashboard-nav a:hover { background: var(--red-50); color: var(--red-600); }
.dashboard-nav a.active { background: var(--red-600); color: #fff; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.metric-grid > div {
    padding: 32px;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
}

.metric-grid > div span {
    display: block;
    margin-bottom: 12px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.metric-grid > div strong {
    font-size: 3rem;
    font-weight: 900;
    color: var(--red-600);
    letter-spacing: -0.03em;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

.manager-panel {
    margin-bottom: 24px;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.panel-heading h2 { font-size: 1.25rem; }
.panel-heading a { font-weight: 700; color: var(--red-600); }

.manager-list { display: flex; flex-direction: column; }
.manager-list p { padding: 28px; }

.manager-list-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 28px;
    border-bottom: 1px solid var(--gray-200);
    transition: background .2s;
}

.manager-list-item.no-image { grid-template-columns: minmax(0, 1fr) auto; }
.manager-list-item:last-child { border-bottom: none; }
.manager-list-item:hover { background: var(--red-50); }

.manager-list-item img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: var(--gray-100);
    border-radius: var(--r-xl);
    padding: 5px;
}

.manager-list-item span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 600;
}

.manager-list-item span small { font-weight: 400; color: var(--gray-500); font-size: .85rem; }
.manager-list-item strong { white-space: nowrap; }

.manager-search {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    max-width: 620px;
}

.manager-search input { flex: 1; }

.manager-search button {
    padding-inline: 32px;
    background: var(--red-600);
    color: #fff;
    border: none;
    border-radius: var(--r-2xl);
    font-weight: 700;
    cursor: pointer;
}

.manager-search button:hover { background: var(--red-700); }

.manager-table-wrap { overflow-x: auto; }

.manager-table,
table.data {
    width: 100%;
    border-collapse: collapse;
}

.manager-table th,
table.data th {
    padding: 16px 24px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-500);
    white-space: nowrap;
}

.manager-table td,
table.data td {
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

.manager-table td small { color: var(--gray-500); }
.manager-table tbody tr:last-child td,
table.data tbody tr:last-child td { border-bottom: none; }
.manager-table tbody tr:hover,
table.data tbody tr:hover { background: var(--gray-100); }

.table-wrap {
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.table-wrap > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.table-wrap > header h2 { font-size: 1.25rem; }
.table-scroll { overflow-x: auto; }

.table-product {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
}

/* The cell is a link to the shop page; make that discoverable on hover. */
a.table-product span { transition: color .2s; }
a.table-product:hover span { color: var(--red-600); text-decoration: underline; }
a.table-product:hover img { border-color: var(--red-200); }

.table-product img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--gray-100);
    border-radius: var(--r-xl);
    padding: 4px;
    flex-shrink: 0;
}

.table-action,
.row-actions .btn-sm {
    display: inline-flex;
    align-items: center;
    /* Centred and evenly sized so Write and Edit line up as a pair rather
       than sizing themselves to their own label. */
    justify-content: center;
    gap: 6px;
    min-width: 104px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--r-xl);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

.table-action:hover {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}

.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.manager-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 36px;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
}

.manager-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.toggle-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding: 22px 24px;
    background: var(--gray-100);
    border-radius: var(--r-2xl);
}

.toggle-row label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.toggle-row input[type="checkbox"] {
    width: auto;
    accent-color: var(--red-600);
    transform: scale(1.2);
}

.file-upload-widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-upload-widget img {
    max-width: 160px;
    background: var(--gray-100);
    border-radius: var(--r-xl);
    padding: 6px;
}

/* ==========================================================================
   27. LEGAL / PROSE
   ========================================================================== */
.policy-shell {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding: 56px var(--gutter);
}

.policy-card {
    padding: 48px;
    background: #fff;
    border-radius: var(--r-30);
    box-shadow: var(--shadow-lg);
}

.policy-card h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    margin-bottom: 16px;
}

.legal-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--gray-200);
    font-size: .9rem;
    color: var(--gray-400);
}

.legal-content { line-height: 1.85; color: var(--gray-700); }
.legal-content h2 { font-size: 1.5rem; margin: 36px 0 16px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 18px; }
.legal-content a { color: var(--red-600); font-weight: 600; }

/* ==========================================================================
   28. FOOTER
   ========================================================================== */
.site-footer {
    margin-top: auto;
    background: var(--black);
    color: #fff;
}

.footer-inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 64px 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
}

.footer-logo {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
}

.footer-logo span { color: var(--red-600); }

.footer-brand p {
    margin-top: 24px;
    color: var(--gray-400);
    line-height: 1.9;
}

.footer-col h3 {
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--gray-400);
}

.footer-col ul a:hover { color: var(--red-500); }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--gray-400);
}

.footer-contact div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-contact svg { flex-shrink: 0; }
.footer-contact a:hover { color: var(--red-500); }

.footer-inner hr {
    border: none;
    border-top: 1px solid var(--neutral-700);
    margin-block: 40px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-bottom p { color: var(--gray-400); }

.footer-social {
    display: flex;
    gap: 20px;
    font-size: 1.5rem;
}

.footer-social a {
    cursor: pointer;
    transition: transform .3s;
}

.footer-social a:hover { transform: scale(1.2); }

/* ==========================================================================
   28b. NAME ALIASES
   Inner pages (cart, checkout, order, account, legal, error) use their own
   container/section class names. These map them onto the system above so the
   markup stays readable and every page shares one design language.
   ========================================================================== */

/* --- Page containers --- */
.page-shell,
.cart-shell,
.checkout-shell,
.success-shell,
.detail-shell,
.related-section,
.dashboard-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 56px var(--gutter);
}

.related-section { padding-top: 0; }

/* --- Page heading --- */
.page-header { margin-bottom: 32px; }

.page-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 12px;
}

.page-header p { color: var(--gray-500); font-size: 1.05rem; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.section-head h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }

.link-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--red-600);
}

.link-all:hover { text-decoration: underline; }

.eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red-600);
}

/* --- Two-column layouts --- */
.cart-layout,
.checkout-layout,
.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 32px;
    align-items: start;
}

/* --- Cards --- */
.cart-items,
.checkout-section,
.panel {
    margin-bottom: 24px;
    background: #fff;
    border-radius: var(--r-30);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.checkout-section > h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 32px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 1.375rem;
}

.checkout-section > h2 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--red-600);
    color: #fff;
    border-radius: 999px;
    font-style: normal;
    font-size: .95rem;
    font-weight: 800;
    flex-shrink: 0;
}

.checkout-body,
.panel-pad {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Checkout progress --- */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.checkout-step {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: var(--gray-400);
}

.checkout-step i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--gray-200);
    color: var(--gray-500);
    border-radius: 999px;
    font-style: normal;
    font-size: .9rem;
}

.checkout-step.active { color: var(--gray-900); }
.checkout-step.active i { background: var(--red-600); color: #fff; }
.checkout-step.done i { background: var(--green-600); color: #fff; }

.checkout-step-sep {
    flex: 0 0 40px;
    height: 2px;
    background: var(--gray-200);
}

/* --- Button aliases --- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;
    border: 1px solid transparent;
    border-radius: var(--r-2xl);
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    transition: background .3s, color .3s, border-color .3s, transform .3s;
}

.button.primary { background: var(--red-600); color: #fff; }
.button.primary:hover { background: var(--red-700); }

.button.green { background: var(--green-600); color: #fff; }
/* sign-in / sign-up cross links, kept in the same green as their buttons */
a.link-green { color: var(--green-700); }   /* beats .auth-links a */
.button.green:hover { background: var(--green-700); }

.button.secondary,
.button.outline-red {
    background: #fff;
    color: var(--gray-900);
    border-color: var(--gray-300);
}

.button.secondary:hover { background: var(--gray-100); }

.button.outline-red { color: var(--red-600); border-color: var(--red-600); }
.button.outline-red:hover { background: var(--red-50); }

.button.dark { background: var(--black); color: #fff; }
.button.dark:hover { background: var(--neutral-800); }

.button.danger { background: #fff; color: var(--red-600); border-color: var(--red-200); }
.button.danger:hover { background: var(--red-600); color: #fff; border-color: var(--red-600); }

.button.small { padding: 10px 18px; font-size: .875rem; border-radius: var(--r-xl); }
.button.large { padding: 20px 40px; font-size: 1.125rem; }
.button.block, .button.full { width: 100%; }
.button[disabled], .button.disabled { opacity: .5; cursor: not-allowed; }

/* --- Badge aliases --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
}

.badge.red { background: var(--red-600); color: #fff; }
.badge.dark { background: var(--black); color: #fff; }
.badge.green { background: #dcfce7; color: #166534; }
.badge.amber { background: #fef3c7; color: #92400e; }
.badge.grey { background: var(--gray-100); color: var(--gray-700); }
.badge.blue { background: #dbeafe; color: #1e40af; }

/* --- Category / brand tile grids on inner pages --- */
.cat-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.cat-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px;
    background: #fff;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
    transition: transform .3s, box-shadow .3s;
}

.cat-tile:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }

.cat-tile-ico {
    font-size: 44px;
    line-height: 1;
}

.cat-tile span:not(.cat-tile-ico) {
    font-size: 1.5rem;
    font-weight: 900;
}

/* --- Misc --- */
.toast-notification { /* legacy id/class from round one */
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 200;
}

.stock-line.out { color: var(--red-600); }

.hero-actions.inline { margin-top: 0; margin-bottom: 0; }

/* ==========================================================================
   28b. MARKETPLACE LAYOUTS
   Home rails, sidebar pages (categories / shop), flash deals, pagination.
   ========================================================================== */

.section-tight { padding-block: 48px; }

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

/* --- Section head with a "View all" link --- */
.rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.rail-head h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    color: var(--gray-900);
}

.rail-head .bolt { color: var(--red-600); }

.rail-head-side {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.rail-link {
    font-weight: 700;
    font-size: .95rem;
    color: var(--red-600);
    white-space: nowrap;
}

.rail-link:hover { color: var(--red-700); }

/* --- Compact / boxed countdown --- */
.countdown-label {
    align-self: center;
    padding: 8px 16px;
    background: var(--red-600);
    color: #fff;
    border-radius: var(--r-xl);
    font-size: .85rem;
    font-weight: 800;
    white-space: nowrap;
}

.countdown.compact,
.countdown.boxed {
    display: flex;
    align-items: center;
    gap: 10px;
}

.countdown.compact .time-box,
.countdown.boxed .time-box {
    min-width: 58px;
    padding: 8px 10px;
    border-radius: var(--r-xl);
    border: 1px solid var(--gray-200);
    box-shadow: none;
}

.countdown.boxed .time-box {
    background: var(--red-600);
    border-color: var(--red-600);
}

.countdown.compact .time-box b,
.countdown.boxed .time-box b {
    font-size: 1.375rem;
}

.countdown.boxed .time-box b { color: #fff; }

.countdown.compact .time-box span,
.countdown.boxed .time-box span {
    margin-top: 2px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.countdown.boxed .time-box span { color: var(--red-100); }

.countdown .colon {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--gray-300);
}

/* --- Category rail (home) --- */
.cat-rail {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
}

.cat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 12px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    text-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.cat-chip:hover {
    transform: translateY(-4px);
    border-color: var(--red-600);
    box-shadow: var(--shadow-lg);
}

.cat-chip-media {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    transition: background .25s, border-color .25s;
}

.cat-chip:hover .cat-chip-media {
    background: var(--red-50);
    border-color: var(--red-200);
}

.cat-chip-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Classic line icons: neutral by default, brand red when the tile is hovered. */
.cat-icon { display: block; }

.cat-chip-media .cat-icon { color: var(--gray-800); transition: color .25s; }
.cat-chip:hover .cat-chip-media .cat-icon { color: var(--red-600); }

.mega-icon,
.side-emoji,
.cat-card-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
}

.mega-panel a:hover .mega-icon,
.cat-card:hover .cat-card-emoji { color: var(--red-600); }

.cat-chip strong {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gray-900);
}

/* --- Wide promo banner --- */
.promo-wide {
    position: relative;
    overflow: hidden;
    padding: 56px;
    border-radius: var(--r-40);
    background: linear-gradient(to bottom right, var(--black) 0%, var(--neutral-900) 55%, var(--red-950) 100%);
    color: #fff;
}

.promo-wide .glow-a {
    position: absolute;
    right: -110px;
    top: -110px;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    background: rgba(220, 38, 38, .28);
    filter: blur(140px);
    pointer-events: none;
}

.promo-wide-copy { position: relative; z-index: 1; }

.promo-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red-500);
}

.promo-wide h2 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: #fff;
}

.promo-wide p {
    margin: 18px 0 28px;
    max-width: 46ch;
    font-size: 1.05rem;
    color: var(--gray-300);
}

/* --- Sidebar page layout (categories + shop) --- */
.with-sidebar {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
}

.side-rail {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.side-main { min-width: 0; }

/* Shown only once the sidebar folds under the content on narrow screens. */
.filter-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
    font-weight: 800;
    font-size: 1rem;
    color: var(--gray-900);
    cursor: pointer;
}

.filter-toggle svg { transition: transform .25s; color: var(--gray-500); }

.filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.side-list {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
}

.side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--r-xl);
    font-size: .92rem;
    font-weight: 600;
    color: var(--gray-700);
    transition: background .2s, color .2s;
}

.side-item:hover {
    background: var(--red-50);
    color: var(--red-600);
}

.side-item.active {
    background: var(--red-600);
    color: #fff;
}

.side-emoji { font-size: 1.05rem; line-height: 1; }

.side-caret {
    margin-left: auto;
    color: var(--gray-300);
    flex-shrink: 0;
}

.side-item.active .side-caret { color: rgba(255, 255, 255, .7); }

.side-promo {
    display: block;
    padding: 24px 20px;
    border-radius: var(--r-2xl);
    background: linear-gradient(to bottom right, var(--neutral-900), var(--red-950));
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.side-promo strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
}

.side-promo > span {
    display: block;
    margin-top: 6px;
    font-size: .85rem;
    color: var(--gray-300);
}

.side-promo-btn {
    display: inline-block !important;
    margin-top: 16px;
    padding: 9px 18px;
    background: var(--red-600);
    border-radius: var(--r-xl);
    font-size: .85rem;
    font-weight: 700;
    color: #fff !important;
}

.side-promo:hover .side-promo-btn { background: var(--red-700); }

/* --- Category cards (categories page) --- */
.cat-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    text-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.cat-card:hover {
    transform: translateY(-5px);
    border-color: var(--red-600);
    box-shadow: var(--shadow-lg);
}

.cat-card-media {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 10px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: background .25s, border-color .25s;
}

.cat-card:hover .cat-card-media {
    background: var(--red-50);
    border-color: var(--red-200);
}

.cat-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cat-card-emoji { font-size: 2.5rem; line-height: 1; }

.cat-card strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
}

.cat-card small { color: var(--gray-500); font-size: .85rem; }

/* --- Categories promo --- */
.cat-promo {
    position: relative;
    overflow: hidden;
    margin-top: 32px;
    padding: 44px;
    border-radius: var(--r-3xl);
    background: linear-gradient(to bottom right, var(--black), var(--neutral-900) 60%, var(--red-950));
    color: #fff;
}

.cat-promo .glow-a {
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: rgba(220, 38, 38, .3);
    filter: blur(130px);
    pointer-events: none;
}

.cat-promo-copy { position: relative; z-index: 1; }

.cat-promo h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); color: #fff; }

.cat-promo p {
    margin: 12px 0 24px;
    color: var(--gray-300);
}

/* --- Service strip --- */
.service-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
}

.service-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-item svg { flex-shrink: 0; color: var(--gray-900); }

.service-item strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
}

.service-item small {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    color: var(--gray-500);
}

/* --- Filter sidebar (shop) --- */
.filter-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow);
}

.filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-200);
}

.filter-head h2 { font-size: 1.375rem; }

.filter-clear {
    font-size: .82rem;
    font-weight: 700;
    color: var(--red-600);
    white-space: nowrap;
}

.filter-block { border-bottom: 1px solid var(--gray-200); }

.filter-block:last-of-type { border-bottom: none; }

.filter-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 0 12px;
    background: none;
    border: none;
    font-size: .95rem;
    font-weight: 800;
    color: var(--gray-900);
    cursor: pointer;
    text-align: left;
}

.filter-title svg { transition: transform .25s; color: var(--gray-500); }

.filter-title[aria-expanded="false"] svg { transform: rotate(-90deg); }

.filter-body { padding-bottom: 16px; }

.filter-title[aria-expanded="false"] + .filter-body { display: none; }

.check-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.check-list.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--r-xl);
    font-size: .875rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.check-row:hover { background: var(--gray-100); }

.check-row.on { color: var(--red-600); font-weight: 700; }

.check-row input {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    padding: 0;
    accent-color: var(--red-600);
    cursor: pointer;
}

.check-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.check-count {
    margin-left: auto;
    font-size: .78rem;
    color: var(--gray-400);
    font-weight: 400;
}

.check-stars { color: var(--amber-500); line-height: 1; letter-spacing: -1px; }

.check-row[hidden] { display: none; }

.show-more {
    margin-top: 8px;
    padding: 4px 8px;
    background: none;
    border: none;
    font-size: .82rem;
    font-weight: 700;
    color: var(--red-600);
    cursor: pointer;
}

.show-more:hover { text-decoration: underline; }

/* Price slider */
.price-slider {
    position: relative;
    height: 24px;
    margin: 4px 6px 14px;
}

.price-track {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--gray-200);
}

.price-track i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 999px;
    background: var(--red-600);
}

.price-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.price-range:focus { box-shadow: none; }

.price-range::-webkit-slider-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--red-600);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--red-600);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.price-range::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--red-600);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--red-600);
    cursor: pointer;
}

.price-range::-moz-range-track { background: none; }

.price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-inputs input {
    /* Number inputs carry an intrinsic min-width that would otherwise push the
       whole sidebar wider than the viewport on small screens. */
    flex: 1;
    min-width: 0;
    padding: 9px 8px;
    border-radius: var(--r-xl);
    font-size: .85rem;
    text-align: center;
}

.price-inputs .dash { color: var(--gray-400); }

.price-cur {
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--gray-500);
}

.brand-search {
    position: relative;
    margin-bottom: 10px;
}

.brand-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.brand-search input {
    padding: 9px 12px 9px 34px;
    border-radius: var(--r-xl);
    font-size: .85rem;
}

/* --- Shop toolbar --- */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.view-toggle {
    display: inline-flex;
    gap: 6px;
}

.view-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    background: #fff;
    color: var(--gray-500);
    transition: background .2s, color .2s, border-color .2s;
}

.view-btn:hover { border-color: var(--red-600); color: var(--red-600); }

.view-btn.on {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}

/* --- Numbered pagination --- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

.pager-btn {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding-inline: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    font-weight: 700;
    font-size: .9rem;
    color: var(--gray-700);
    transition: background .2s, color .2s, border-color .2s;
}

.pager-btn:hover { border-color: var(--red-600); color: var(--red-600); }

.pager-btn.on {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}

.pager-btn.disabled {
    opacity: .4;
    pointer-events: none;
}

.pager-gap { padding-inline: 4px; color: var(--gray-400); }

/* --- Flash deals page --- */
.deals-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 28px;
    margin-bottom: 32px;
}

.deals-head h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(2rem, 5vw, 3rem);
}

.deals-head .bolt { color: var(--red-600); }

.deals-head .rail-link { margin-left: auto; }

.deal-benefits {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
    padding: 40px 32px;
    border-radius: var(--r-3xl);
    background: var(--black);
    color: #fff;
}

.deal-benefit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deal-benefit svg { color: var(--red-500); }

.deal-benefit strong { font-size: 1.05rem; font-weight: 800; }

.deal-benefit small { font-size: .85rem; color: var(--gray-400); }

/* --- Star meter --- */
.star-meter {
    position: relative;
    display: inline-block;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
}

.star-base { color: var(--gray-300); }

.star-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--fill, 0%);
    overflow: hidden;
    color: var(--amber-500);
}

.rating-count { font-size: .85rem; color: var(--gray-500); }

/* --- Stock meter (flash deals) --- */
.stock-meter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.stock-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--red-600);
}

.stock-meter small {
    font-size: .75rem;
    color: var(--gray-500);
    white-space: nowrap;
}

/* --- Product card additions --- */
.product-blurb {
    display: none;
    color: var(--gray-500);
    font-size: .9rem;
    line-height: 1.6;
}

.peek-btn {
    display: grid;
    place-items: center;
    width: 40px;
    flex-shrink: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    color: var(--gray-500);
    transition: border-color .2s, color .2s;
}

.peek-btn:hover { border-color: var(--red-600); color: var(--red-600); }

.add-to-cart-btn {
    background: #fff;
    color: var(--red-600);
    border: 1px solid var(--red-600);
}

.add-to-cart-btn:hover {
    background: var(--red-600);
    color: #fff;
}

.add-to-cart-btn.muted {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-700);
}

.add-to-cart-btn.added {
    background: var(--green-600);
    border-color: var(--green-600);
    color: #fff;
}

/* Cards sit in a narrower track next to a sidebar, so tighten them up enough
   that the Add-to-Cart row and the quick-view button still fit side by side. */
.with-sidebar .product-grid { gap: 20px; }

.with-sidebar .product-body {
    padding: 16px;
    gap: 12px;
}

.with-sidebar .product-cta { gap: 8px; }

.with-sidebar .add-to-cart-btn {
    padding: 11px 10px;
    gap: 6px;
    font-size: .875rem;
}

.with-sidebar .peek-btn { width: 38px; }

.with-sidebar .product-body h3 { font-size: 1.05rem; }

.with-sidebar .price-row strong { font-size: 1.5rem; }

/* --- List view --- */
.product-grid.as-list {
    grid-template-columns: 1fr;
    gap: 16px;
}

.product-grid.as-list .product-card {
    flex-direction: row;
    align-items: stretch;
}

.product-grid.as-list .product-media {
    width: 220px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

.product-grid.as-list .product-body { justify-content: center; }

.product-grid.as-list .product-blurb { display: block; }

.product-grid.as-list .product-cta {
    max-width: 320px;
}

/* --- Why-shop strip --- */
.why-strip {
    background: var(--black);
    color: #fff;
    border-top: 1px solid var(--neutral-800);
}

.why-inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 40px var(--gutter);
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

.why-title {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.why-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--neutral-900);
    border: 1px solid var(--neutral-800);
    border-radius: var(--r-2xl);
}

.why-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--red-500);
}

.why-card strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
}

.why-card small {
    display: block;
    margin-top: 2px;
    font-size: .76rem;
    color: var(--gray-400);
    line-height: 1.4;
}

/* --- Footer payment chips --- */
.pay-methods {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pay-chip {
    padding: 6px 12px;
    background: var(--neutral-900);
    border: 1px solid var(--neutral-800);
    border-radius: var(--r-xl);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--gray-300);
}

.pay-chip.mpesa { color: var(--green-400); }
.pay-chip.visa { color: #93c5fd; }
.pay-chip.mastercard { color: var(--amber-500); }

.footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); }

.footer-brand .footer-social { margin-top: 20px; }

/* ==========================================================================
   28c. FINISH PASS
   Everything above builds the layout. This block does the finishing: one
   focus treatment, one elevation language, depth on the brand red, and the
   small corrections that make the surfaces sit together. It is deliberately
   the last non-responsive block so it wins on equal specificity.
   ========================================================================== */

/* --- Focus. Previously only inputs showed a focus state, so keyboard users
   lost the caret on every link, card and icon button. One ring for the whole
   app, drawn as an outline so it follows each element's own radius. --- */
:focus-visible {
    outline: 2px solid var(--red-600);
    outline-offset: 2px;
}

/* On dark ground the red ring disappears into the background. */
.section-dark :focus-visible,
.utility-bar :focus-visible,
.primary-nav :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible,
.promo-wide :focus-visible,
.cat-promo :focus-visible,
.side-promo:focus-visible {
    outline-color: #fff;
}

/* Inputs already draw their own ring; don't stack a second one on top. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--red-600);
    box-shadow: var(--ring);
}

/* Mouse users shouldn't get the ring on click. */
:focus:not(:focus-visible) {
    outline: none;
}

/* --- Type. Inter's tighter tracking at display sizes, and lining figures
   wherever numbers line up in a column (prices, totals, counters). --- */
h1, .page-hero h1, .hero-slide h1 { letter-spacing: -0.03em; }

.price-row strong,
.detail-price strong,
.summary-row span,
.summary-total strong,
.metric-grid > div strong,
.time-box b,
.action-badge,
.qty-value,
td.num,
.cart-item-price {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- Buttons. Flat fills read cheap at this size; the primary actions get a
   lit gradient, a red-tinted shadow and a real press state. --- */
.btn-red,
.add-to-cart-btn:not(.muted):not(.added),
.side-promo-btn,
.header-search button {
    background-image: var(--brand-gradient);
    box-shadow: var(--shadow-red);
}

.btn-red:hover,
.side-promo:hover .side-promo-btn,
.header-search button:hover {
    background-image: linear-gradient(135deg, #f04a4a 0%, #e02b2b 55%, #c42020 100%);
    box-shadow: var(--shadow-red-lg);
}

.btn-red:active,
.btn-black:active,
.btn-outline:active,
.btn-green:active,
.add-to-cart-btn:active {
    transform: translateY(1px) scale(.995);
    box-shadow: var(--shadow);
}

.btn-black {
    background-image: linear-gradient(135deg, #22252c 0%, #0d0f13 100%);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    border-color: var(--gray-200);
    box-shadow: var(--shadow);
}

.btn-outline:hover {
    border-color: var(--gray-300);
    background: var(--gray-100);
    box-shadow: var(--shadow-lg);
}

.btn-green { box-shadow: 0 4px 14px -4px rgba(18, 161, 80, .45); }

.btn[disabled],
.btn.disabled {
    box-shadow: none;
    filter: grayscale(.35);
}

/* --- Masthead ----------------------------------------------------------
   This was three full-bleed bands stacked on top of each other — a black
   strip, a white bar and a red bar — which put two hard horizontal edges
   across the top of every page. The dark strip stays pinned to the very top
   (it reads as a system menu bar), but the bar and the nav are now one
   frosted card that floats clear of the viewport edges, and the whole
   masthead fades out at the bottom instead of ending on a line. --- */

.site-header {
    /* Translucent so the island's blur has something to work with, fading to
       nothing at the bottom so there is no edge to see. */
    background: linear-gradient(to bottom,
                rgba(238, 240, 244, .92) 0%,
                rgba(238, 240, 244, .86) 58%,
                rgba(238, 240, 244, 0) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: none;
    padding-bottom: 14px;
}

/* The menu bar. Full width by design — it anchors the top of the screen. */
.utility-bar {
    background: linear-gradient(90deg, #08090c 0%, #14161b 50%, #08090c 100%);
    color: var(--gray-400);
}

.utility-links a,
.utility-location,
.utility-promo { transition: color .2s; }

/* --- The floating island. `.header-main` is its top half and `.primary-nav`
   its bottom half; matching widths and complementary corner radii make them
   read as one card. --- */
.header-main,
.primary-nav {
    width: min(100% - 28px, var(--shell));
    margin-inline: auto;
}

.header-main {
    margin-top: 14px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .75);
    border-bottom: none;
    border-radius: var(--r-35) var(--r-35) 0 0;
    box-shadow: 0 -1px 0 rgba(16, 21, 29, .03) inset;
}

/* The island supplies the outer margin now, so the inner rows just fill it. */
.header-inner,
.primary-nav-inner {
    max-width: none;
    padding-inline: 22px;
}

.header-inner { padding-block: 14px; }

/* --- Wordmark. Taken from the logo artwork: TORQUEE with a red Q, and SHOP
   spaced out in red underneath. `i` / `span` carry the Q; `em` carries the
   SHOP line where it can't be a separate element (drawer, footer). --- */
.brand-name { letter-spacing: .04em; }

.brand-name i,
.footer-logo span {
    font-style: normal;
    color: var(--red-600);
}

.brand-sub {
    margin-top: 2px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .46em;
    color: var(--red-600);
}

.brand-name em,
.footer-logo em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: .36em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .46em;
    text-transform: uppercase;
    color: var(--red-600);
}

/* Search: the 2px red box was the loudest thing on the page, and a square
   field inside a rounded card fights it. A soft capsule that lights up on
   focus keeps the emphasis on the products. */
.header-search {
    height: 46px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(16, 21, 29, .1);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(16, 21, 29, .05);
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.header-search:focus-within {
    background: #fff;
    border-color: var(--red-600);
    box-shadow: var(--ring);
}

.search-scope select { background: transparent; }

.header-search input[type="search"] { background: transparent; }

.header-search button {
    width: 58px;
    border-radius: 0;
    box-shadow: none;
}

.header-search button:hover { box-shadow: none; }

.header-search:focus-within :focus-visible { outline: none; }

/* Header actions pick up a soft hover pill, the way a Mac toolbar does. */
.header-action,
.account-trigger {
    padding: 7px 12px;
    border-radius: 999px;
    transition: background .2s, color .2s;
}

.header-action:hover,
.account-trigger:hover { background: rgba(16, 21, 29, .06); }

.action-badge {
    box-shadow: 0 2px 6px -1px rgba(220, 38, 38, .5);
    font-variant-numeric: tabular-nums;
}

.account-avatar { border: 1px solid rgba(16, 21, 29, .08); }

/* --- Bottom half of the island: the red nav. --- */
.primary-nav {
    background-image: linear-gradient(135deg, #e42b2b 0%, var(--red-600) 55%, #c11f1f 100%);
    border-radius: 0 0 var(--r-35) var(--r-35);
    box-shadow: 0 14px 34px -14px rgba(220, 38, 38, .5),
                0 10px 30px -12px rgba(16, 21, 29, .28);
}

/* Everything inside the red bar is a floating pill, so no child has to fake
   the card's rounded corners — and nothing needs `overflow: hidden`, which
   would have clipped the mega dropdown. */
.primary-nav-inner {
    align-items: center;
    gap: 6px;
    padding-block: 8px;
}

.mega-trigger {
    height: auto;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .2);
    transition: background .25s, transform .25s var(--ease);
}

.mega-trigger:hover { background: rgba(0, 0, 0, .32); }

.primary-links { gap: 2px; align-items: center; }

.primary-links a {
    padding: 10px 16px;
    border-radius: 999px;
    border-bottom: none;
    transition: background .25s, color .25s;
}

.primary-links a:hover { background: rgba(255, 255, 255, .18); }

/* The active tab as a solid white pill reads far cleaner on red than an
   underline plus a darker wash did. */
.primary-links a.active {
    background: #fff;
    color: var(--red-600);
    border-bottom-color: transparent;
    box-shadow: 0 2px 8px -2px rgba(16, 21, 29, .3);
}

.primary-links a.active .nav-flag {
    background: var(--red-600);
    color: #fff;
}

/* Dropdowns now hang off a floating card, so they are rounded all round and
   sit slightly clear of it. */
.mega-panel,
.account-dropdown {
    border-color: var(--gray-200);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-2xl);
}

.mega-panel { top: calc(100% + 10px); }

/* --- Section headings. A short red rule under the title gives every section
   the same anchor instead of each one floating on its own. --- */
.rail-head h2,
.section-head h2,
.head-block h2,
.big-heading {
    position: relative;
}

.rail-head h2::after,
.section-head h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand-gradient);
}

.section-dark .section-head h2::after { background: #fff; }

.rail-link,
.link-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s var(--ease), color .2s;
}

.rail-link:hover,
.link-all:hover { gap: 10px; }

/* --- Cards & surfaces. Every white panel gets the same hairline + soft
   shadow, so the page reads as one material rather than a mix. --- */
.product-card,
.cat-chip,
.cat-card,
.toolbar,
.side-list,
.filter-form,
.service-strip,
.empty-state,
.metric-grid > div {
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
}

/* The full-width panels keep their deeper shadow — they are the page's
   primary surfaces, not tiles sitting on it. */
.card,
.panel,
.manager-panel,
.cart-items,
.checkout-section,
.summary-card,
.detail-grid {
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
}

/* --- Product card. The hero unit of the whole site. --- */
.product-card {
    border-radius: var(--r-3xl);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(220, 38, 38, .32);
    box-shadow: var(--shadow-xl);
}

/* A soft top-lit gradient instead of a flat grey block: cut-out product
   photos sit on it as if they were on a shelf. */
.product-media {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 55%, var(--gray-100) 100%);
    border-bottom: 1px solid var(--gray-200);
}

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

.product-media img { transition: transform .5s var(--ease); }

/* Square-ish discount chips read as price tags; pills read as status. */
.tag-stack .tag {
    border-radius: 8px;
    padding: 5px 9px;
    font-size: .74rem;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px -2px rgba(16, 21, 29, .3);
}

.tag-stack .tag-red { background-image: var(--brand-gradient); }

.sold-out-veil {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(.4) blur(1px);
    backdrop-filter: saturate(.4) blur(1px);
}

.wish-btn {
    background: rgba(255, 255, 255, .92);
    border-color: var(--gray-200);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}

.wish-btn:hover { box-shadow: var(--shadow-lg); }

.wish-btn.active { background: var(--red-50); }

.product-body h3 { letter-spacing: -0.005em; }

/* Titles clamp at two lines but a one-line name still collapsed its box, so
   a short name lifted its price above the neighbouring card's. Reserving both
   lines lines the prices up across a row. */
.product-grid .product-body h3 { min-height: 2.8em; }

/* The list view is one card per row, so there is nothing to line up with. */
.product-grid.as-list .product-body h3 { min-height: 0; }

.price-row strong { letter-spacing: -0.03em; }

.price-row del { text-decoration-thickness: 1px; }

.stock-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Dot before the stock label — the colour alone was carrying the meaning. */
.stock-line::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}

/* The outline treatment lower down leaves the card's main action looking
   secondary; on a marketplace it is the point of the tile. */
.add-to-cart-btn:not(.muted):not(.added) {
    color: #fff;
    border-color: transparent;
}

/* :hover uses the `background` shorthand above, which drops the gradient —
   restate it so the button doesn't flatten out under the cursor. */
.add-to-cart-btn:not(.muted):not(.added):hover {
    background-image: linear-gradient(135deg, #f04a4a 0%, #e02b2b 55%, #c42020 100%);
    color: #fff;
    box-shadow: var(--shadow-red-lg);
}

.add-to-cart-btn.added { box-shadow: 0 4px 14px -4px rgba(18, 161, 80, .45); }

.peek-btn:hover {
    background: var(--red-50);
    box-shadow: var(--shadow);
}

.stock-bar i { background-image: var(--brand-gradient); }

/* --- Category tiles --- */
.cat-chip,
.cat-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }

.cat-chip:hover,
.cat-card:hover { border-color: rgba(220, 38, 38, .32); }

.cat-chip-media { border-color: var(--gray-200); }

/* --- Toolbar, pagination, breadcrumb --- */
.page-link {
    border: 1px solid var(--gray-200);
    transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease);
}

.page-link:hover {
    background-image: var(--brand-gradient);
    border-color: transparent;
    box-shadow: var(--shadow-red);
    transform: translateY(-1px);
}

.breadcrumb .sep { color: var(--gray-300); }

/* --- Dark promo panels. The flat gradients were losing their edges against
   the black footer and hero; a rim of light defines them. --- */
.promo-wide,
.cat-promo,
.side-promo,
.page-hero {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.promo-wide,
.cat-promo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-2xl); }

/* --- Messages & toast --- */
.message {
    border: 1px solid var(--gray-200);
    border-left-width: 4px;
    box-shadow: var(--shadow-lg);
}

.message.success { background: #f4fdf7; border-color: var(--gray-200); border-left-color: var(--green-600); }
.message.error { background: var(--red-50); border-color: var(--gray-200); border-left-color: var(--red-600); }
.message.warning { background: #fffaf0; border-color: var(--gray-200); border-left-color: var(--amber-500); }

.toast {
    background: rgba(16, 21, 29, .96);
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}

/* --- Manager dashboard --- */
.dashboard-nav a.active {
    background-image: var(--brand-gradient);
    box-shadow: var(--shadow-red);
}

.metric-grid > div { transition: box-shadow .25s, transform .25s var(--ease); }
.metric-grid > div:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* --- Footer --- */
.site-footer {
    background: linear-gradient(180deg, var(--neutral-950) 0%, #000 100%);
    border-top: 3px solid var(--red-600);
}

.footer-inner hr { border-top-color: rgba(255, 255, 255, .1); }

.footer-col ul a,
.footer-contact a {
    transition: color .2s, padding-left .2s var(--ease);
}

.footer-col ul a:hover { padding-left: 4px; }

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: 1.1rem;
    transition: background .25s, transform .25s var(--ease);
}

.footer-social a:hover {
    background: var(--red-600);
    transform: translateY(-3px) scale(1.05);
}

/* --- Scrollbars, on the browsers that let us style them. --- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border: 3px solid var(--page);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

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

/* --- Respect the OS motion setting across the whole finish pass. --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .product-card:hover,
    .cat-chip:hover,
    .cat-card:hover,
    .metric-grid > div:hover,
    .page-link:hover,
    .footer-social a:hover { transform: none; }
}

/* ==========================================================================
   29. RESPONSIVE
   ========================================================================== */
@media (max-width: 1240px) {
    .cat-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .why-inner { grid-template-columns: 1fr; gap: 20px; }
    .why-title { font-size: 1.25rem; }
    .why-title br { display: none; }
    .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
    .stats-grid,
    .trust-grid,
    .category-grid,
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-layout,
    .settings-layout,
    .cart-layout,
    .checkout-layout,
    .account-layout {
        grid-template-columns: 1fr;
    }

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

    .summary-card { position: static; }

    /* Sidebar pages fold to one column. */
    .with-sidebar { grid-template-columns: 1fr; }
    .side-rail { position: static; }

    /* On the categories page the rail just repeats the cards, so it goes last.
       The shop page keeps its filters up top, collapsed behind a toggle. */
    .with-sidebar.rail-last .side-main { order: 1; }
    .with-sidebar.rail-last .side-rail { order: 2; }

    .filter-toggle { display: flex; }
    .filter-form.is-collapsed { display: none; }

    .cat-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .deal-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Below desktop the card is content-sized, so it is kept short: that keeps
       the supplied banner close to its own scale instead of zooming into it. */

    .hero-slide { grid-template-columns: 1fr; align-items: start; gap: 14px; padding: 30px 28px 52px; }
    .hero-slide-copy { max-width: none; }
    /* the product tiles on slides 2-3 are decorative and cost height, but the
       slide 1 artwork stays: it is the point of the banner */
    .hero-slide-art.art-grid { display: none; }
    /* tablets still have room for copy beside the artwork */
    .hero-slide.art-slide { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); align-items: center; }
    .hero-slide-art.art-bleed { display: block; min-height: 0; }
    .hero-art { max-width: none; }
    .hero-slide h1 { font-size: clamp(1.7rem, 4.6vw, 2.4rem); }
    .hero-slide p { margin-top: 10px; }
    .hero-slide-actions { margin-top: 18px; }
    .hero-badges { margin-top: 16px; }

    /* Arrows move down beside the dots so they never sit on the copy. */
    .hero-arrow { top: auto; bottom: 5px; transform: none; width: 36px; height: 36px; }
    .hero-arrow.prev { left: calc(50% - 84px); }
    .hero-arrow.next { right: calc(50% - 84px); }
    .hero-dots { bottom: 19px; }

    .hero-features-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .nav-toggle { display: block; }

    /* Header collapses to logo + actions, with the search bar on its own row. */
    .header-inner { flex-wrap: wrap; gap: 16px 20px; }
    .header-search { order: 3; flex-basis: 100%; }
    .header-actions { margin-left: auto; gap: 16px; }
    .action-label { display: none; }
    .account-text { display: none; }
    .account-caret { display: none; }
    .search-scope { display: none; }

    .utility-promo { display: none; }
    .utility-links a:not(.utility-phone) { display: none; }
    .utility-links .sep { display: none; }

    .primary-nav { display: none; }

    .detail-grid {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .ai-grid { grid-template-columns: 1fr; gap: 32px; }

    .featured-banner { padding: 40px 32px; }

    .promo-wide { padding: 40px 28px; }

    .hero-inner { min-height: auto; padding-block: 80px; }

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

    .product-grid.as-list .product-media { width: 170px; }
}

/* Phones: shrink the root so the whole rem-based type scale comes down
   together, then tighten the spacing that is set in pixels. */
@media (max-width: 760px) {
    html { font-size: 15px; }

    .section, .section-lg { padding-block: 40px; }
    .section-tight { padding-block: 28px; }
    .page-shell { padding-block: 20px 36px; }

    .stats-grid,
    .trust-grid,
    .category-grid {
        grid-template-columns: 1fr;
    }

    .cat-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cat-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deal-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 22px; }
    /* two per row keeps the trust strip from eating half the first screen */
    .hero-features-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; }
    .hero-feature { gap: 10px; }
    .hero-feature svg { width: 20px; height: 20px; }
    .hero-feature strong { font-size: .82rem; }
    .hero-feature small { font-size: .72rem; }

    .home-hero { padding-inline: 14px; }
    .hero-slides { border-radius: var(--r-30); }
    .hero-slide { padding: 26px 22px 44px; }

    /* phones: artwork drops under the copy, with its top edge feathered so it
       does not cut a hard line across the card */
    .hero-slide.art-slide { grid-template-columns: 1fr; align-items: start; gap: 12px; }
    .hero-slide-art.art-bleed { min-height: 176px; }
    .hero-art {
        top: auto;
        bottom: 0;
        height: 206px;
        max-width: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 17%);
                mask-image: linear-gradient(to bottom, transparent 0, #000 17%);
    }
    .hero-slide h1 { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
    .hero-slide p { font-size: .92rem; }
    .hero-badges { gap: 6px 14px; font-size: .74rem; }
    .hero-arrow.prev { left: calc(50% - 76px); }
    .hero-arrow.next { right: calc(50% - 76px); }

    .deals-head .rail-link { margin-left: 0; }
    .countdown.boxed .colon { display: none; }

    /* Four even columns under the label, so "Seconds" never gets clipped. */
    .countdown.boxed {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .countdown.boxed .countdown-label { grid-column: 1 / -1; justify-self: start; }
    .countdown.boxed .time-box { min-width: 0; padding: 8px 4px; }
    .countdown.boxed .time-box span { font-size: .62rem; letter-spacing: 0; }

    .rail-head { gap: 10px; margin-bottom: 18px; }
    .rail-head h2 { font-size: 1.2rem; }

    .check-list.two-col { grid-template-columns: 1fr; }

    /* Stacked list cards read better than a squeezed two-column row. */
    .product-grid.as-list .product-card { flex-direction: column; }
    .product-grid.as-list .product-media { width: 100%; aspect-ratio: 1; }
    .product-grid.as-list .product-blurb { display: none; }
    .product-grid.as-list .product-cta { max-width: none; }

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

    .product-body { padding: 12px; gap: 8px; }
    .product-body h3 { font-size: .95rem; }
    .price-row strong { font-size: 1.15rem; }

    .flash-banner { padding: 28px; }
    .countdown { gap: 12px; width: 100%; }
    .time-box { flex: 1; min-width: 0; padding: 16px 8px; }

    .hero-search { flex-wrap: wrap; }
    .hero-search input { padding-block: 18px; }
    .hero-search button { width: 100%; padding-block: 16px; }

    .hero-actions .btn,
    .empty-state .actions .btn { flex: 1 1 auto; }

    .cat-tiles { grid-template-columns: 1fr; }

    .cart-layout,
    .checkout-layout,
    .account-layout { grid-template-columns: 1fr; }

    .cart-item {
        grid-template-columns: 88px minmax(0, 1fr);
        padding: 20px;
        gap: 16px;
    }

    .cart-item-media { width: 88px; height: 88px; }

    .cart-item-side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .card > h2, .card-body, .summary-body, .mini-items { padding-inline: 24px; }

    .success-card, .auth-card, .policy-card, .settings-section, .manager-form {
        padding: 28px 22px;
    }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-inner { padding: 48px 24px; }

    .status-track { flex-direction: column; align-items: flex-start; gap: 16px; }
    .status-step { flex-direction: row; align-items: center; gap: 14px; width: 100%; }
    .status-step::before, .status-step::after { display: none; }

    .toast { left: 16px; right: 16px; bottom: 16px; justify-content: center; }

    .floating-item { display: none; }
}

/* Phones: cap the display type. Most sizes are clamps with a 2-3rem floor,
   which stays oversized on a 390px screen even after the root scale, so the
   headline tiers get one consistent set of mobile sizes. */
@media (max-width: 760px) {
    /* tier 1 - page and section headlines */
    .page-header h1,
    .page-hero h1,
    .deals-head h1,
    .policy-card h1,
    .big-heading,
    .head-block h2,
    .section-head h2,
    .featured-banner h2,
    .flash-banner h2,
    .promo-wide h2,
    .cat-promo h2,
    .ai-panel h2 { font-size: 1.6rem; line-height: 1.2; }

    /* tier 2 - numbers and figures that shout */
    .metric-grid > div strong,
    .stat-card h2,
    .detail-price strong,
    .time-box b { font-size: 1.55rem; line-height: 1.15; }

    /* tier 3 - decorative glyphs */
    .empty-state .emoji { font-size: 2rem; }
    .success-icon { font-size: 1.9rem; }
    .profile-fallback { font-size: 1.5rem; }
    .category-tile .tile-icon { font-size: 30px; }
    .cat-tile-ico { font-size: 28px; }

    /* the metric cards themselves were built for desktop whitespace */
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
    .metric-grid > div { padding: 14px; border-radius: var(--r-2xl); }
    .metric-grid > div span { margin-bottom: 4px; font-size: .62rem; letter-spacing: .06em; }
}

/* Manager tables on phones: the client wants every column on screen, so the
   type and padding shrink and cells wrap instead of the table scrolling. */
@media (max-width: 760px) {
    .dashboard-shell { padding: 28px 12px; }
    .dashboard-head { margin-bottom: 18px; }
    .dashboard-head h1 { font-size: 1.5rem; }
    .dashboard-nav { gap: 6px; padding: 6px; margin-bottom: 18px; }
    .dashboard-nav a { padding: 8px 12px; font-size: .78rem; }

    .manager-table-wrap,
    .table-scroll,
    .table-wrap { overflow-x: visible; }

    .manager-table,
    table.data {
        table-layout: fixed;
        font-size: .68rem;
        line-height: 1.35;
    }

    .manager-table th,
    table.data th {
        padding: 8px 5px 8px 4px;
        font-size: .55rem;
        letter-spacing: 0;
        white-space: normal;
        overflow-wrap: anywhere;   /* long headers break instead of colliding */
    }

    .manager-table td,
    table.data td {
        padding: 8px 4px;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .manager-table td small,
    table.data td small { font-size: .9em; }

    /* Thumbnail above the name, so the name gets the whole column instead of
       wrapping one letter per line. */
    .manager-table .table-product {
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .manager-table .table-product img { width: 28px; height: 28px; }

    .products-table .col-product { width: 30%; }
    .products-table .col-category { width: 15%; }
    .products-table .col-sku { width: 17%; }
    .products-table .col-price { width: 14%; }
    .products-table .col-stock { width: 8%; }
    .products-table .col-state { width: 9%; }
    .products-table .col-actions { width: 7%; }
    /* The pill button is wider than its column, so on phones the row actions
       become plain links that sit inside the cell. */
    .table-action,
    .row-actions .btn-sm {
        display: block;
        padding: 2px 0;
        border: none;
        background: none;
        border-radius: 0;
        font-size: .95em;
        color: var(--red-600);
        white-space: normal;
    }

    .row-actions { flex-wrap: wrap; gap: 2px 8px; }

    /* Wrap the tabs onto a second row instead of scrolling them out of sight. */
    .dashboard-nav { flex-wrap: wrap; overflow-x: visible; }

    /* Give the free-text columns room and keep the short ones narrow. */
    .orders-table .col-id { width: 9%; }
    .orders-table .col-customer { width: 15%; }
    .orders-table .col-fulfillment { width: 15%; }
    .orders-table .col-payment { width: 15%; }
    .orders-table .col-status { width: 10%; }
    .orders-table .col-total { width: 18%; }
    .orders-table .col-created { width: 18%; }
}

@media (max-width: 520px) {
    html { font-size: 14px; }

    .section, .section-lg { padding-block: 32px; }
    .section-tight { padding-block: 24px; }

    .settings-grid { grid-template-columns: 1fr; }
    .qty-stepper { justify-content: center; }
    .qty-btn { padding-block: 10px; }

    /* Two columns keeps phone browsing dense, but only if the card sheds the
       quick-view button and lets Add to Cart take the full row. */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    /* less air inside the tile so more cards land on the first screen */
    .product-media img { padding: 8px; }
    .product-body,
    .with-sidebar .product-body { padding: 10px; gap: 6px; }
    .stock-line { font-size: .72rem; }
    .tag-stack .tag { font-size: .62rem; padding: 3px 7px; }
    .wish-btn { width: 28px; height: 28px; }
    .product-body h3,
    .with-sidebar .product-body h3 { font-size: .9rem; }
    .price-row strong,
    .with-sidebar .price-row strong { font-size: 1.05rem; }
    .price-row del { font-size: .82rem; }
    .product-blurb { display: none; }
    .peek-btn { display: none; }
    .add-to-cart-btn,
    .with-sidebar .add-to-cart-btn { width: 100%; padding: 8px 6px; font-size: .76rem; gap: 6px; }
    .add-to-cart-btn svg { width: 14px; height: 14px; }

    /* Equal-width hero buttons read tidier than two ragged stacked pills. */
    .hero-slide-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hero-slide-actions .btn { width: 100%; padding: 14px 10px; font-size: .95rem; }

    /* Keep layout toggle and sort on one row instead of stacking. */
    .shop-toolbar { gap: 10px; flex-wrap: nowrap; }
    .sort-group { gap: 8px; min-width: 0; font-size: .85rem; }
    .sort-group select { min-width: 0; padding: 9px 10px; font-size: .85rem; }
    .view-btn { width: 34px; height: 34px; }

    /* Four small tiles per row, so the category rail reads at a glance. */
    .cat-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .cat-chip { padding: 10px 4px; gap: 6px; border-radius: var(--r-xl); }
    .cat-chip-media { width: 40px; height: 40px; }
    .cat-chip-media .cat-icon { width: 20px; height: 20px; }
    .cat-chip strong { font-size: .68rem; line-height: 1.25; }

    .deals-head h1 { font-size: 1.75rem; }
    .page-header h1 { font-size: 1.875rem; }

    .why-grid,
    .service-strip,
    .deal-benefits,
    .footer-grid { grid-template-columns: 1fr; }

    .brand-sub { display: none; }
    .brand-name { font-size: 1.375rem; }

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

/* Narrow Android handsets: shave the header and toolbar so nothing wraps. */
@media (max-width: 400px) {
    .brand-name { font-size: 1.25rem; }
    .header-inner { gap: 12px 14px; padding-inline: 16px; }
    .header-actions { gap: 12px; }
    .page-shell { padding-inline: 16px; }
    .utility-inner { padding-inline: 16px; }

    .sort-group label { display: none; }
    .product-grid { gap: 10px; }
    .why-inner, .footer-inner { padding-inline: 16px; }
}

/* Finish-pass corrections that only apply once things have folded. Kept at
   the end so they land after the layout media queries above. */

/* Below this width the red nav is hidden, so the island loses its bottom
   half — the top half has to close itself off. */
@media (max-width: 980px) {
    .header-main {
        border-bottom: 1px solid rgba(255, 255, 255, .75);
        border-radius: var(--r-35);
        box-shadow: 0 10px 30px -12px rgba(16, 21, 29, .28);
    }
}

@media (max-width: 760px) {
    /* Less air around the island so it doesn't eat the first screen. */
    .site-header { padding-bottom: 10px; }

    .header-main,
    .primary-nav { width: min(100% - 20px, var(--shell)); }

    .header-main { margin-top: 10px; border-radius: var(--r-30); }

    .header-inner,
    .primary-nav-inner { padding-inline: 16px; }
}

/* The action buttons' hover pills are worth their width on a pointer device,
   but on a phone they pushed the row past the logo and wrapped it onto a
   line of its own. Icons only down here, tightly spaced. */
@media (max-width: 520px) {
    .header-actions { gap: 6px; }

    .header-action,
    .account-trigger { padding: 6px; }

    /* "Shop" is half the brand name, not a tagline, so unlike the old
       "Marketplace" subtitle it stays on small screens. */
    .brand-sub {
        display: block;
        font-size: .55rem;
        letter-spacing: .28em;
    }
}

@media (max-width: 760px) {
    /* The countdown goes full width here, dropping "View all" onto its own
       line hard against the left margin. Pushing it to the right edge keeps
       it reading as part of the section head. */
    .rail-head-side { width: 100%; }
    .rail-head-side .rail-link { margin-left: auto; }

    /* The heading rule sits closer under smaller titles. */
    .rail-head h2::after,
    .section-head h2::after { bottom: -7px; width: 36px; }
}

/* ---------- Storefront assistant ----------------------------------------
   A launcher pinned bottom-right and a small panel that grows out of it. The
   toast owns z-index 200 and shares that corner, so the panel sits below it
   and the launcher steps aside while a toast is showing.
   ------------------------------------------------------------------------ */
.assistant {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.assistant-launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    order: 2;                       /* keeps the button under the panel */
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-red-lg);
    cursor: pointer;
    transition: transform .3s var(--ease), box-shadow .3s;
}

.assistant-launcher:hover { transform: translateY(-2px) scale(1.04); }
.assistant-launcher:focus-visible { outline: none; box-shadow: var(--shadow-red-lg), var(--ring); }
.assistant-launcher svg { width: 26px; height: 26px; }

.assistant-launcher-icon,
.assistant-launcher-close {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .25s, transform .25s var(--ease);
}

.assistant-launcher-close { font-size: 1.9rem; line-height: 1; font-weight: 300; }

/* Swap the bubble for a cross while the panel is open. */
.assistant-launcher-close,
.assistant.is-open .assistant-launcher-icon { opacity: 0; transform: scale(.6) rotate(-45deg); }
.assistant-launcher-icon,
.assistant.is-open .assistant-launcher-close { opacity: 1; transform: scale(1) rotate(0); }

.assistant-panel {
    order: 1;
    display: flex;
    flex-direction: column;
    width: min(370px, calc(100vw - 40px));
    max-height: min(560px, calc(100vh - 130px));
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-30);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    transform-origin: bottom right;
    animation: assistant-in .28s var(--ease);
}

.assistant-panel[hidden] { display: none; }

@keyframes assistant-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.assistant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--black);
    color: #fff;
}

.assistant-head-text { display: flex; flex-direction: column; line-height: 1.3; }
.assistant-head-text strong { font-size: .95rem; font-weight: 700; }
.assistant-head-text span { font-size: .75rem; color: var(--gray-400); }

.assistant-close {
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    transition: color .2s;
}

.assistant-close:hover { color: #fff; }

.assistant-log {
    flex: 1 1 auto;
    min-height: 150px;
    overflow-y: auto;
    overscroll-behavior: contain;    /* stop the page scrolling at the ends */
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--gray-100);
}

.assistant-msg {
    max-width: 84%;
    padding: 11px 15px;
    border-radius: var(--r-2xl);
    font-size: .875rem;
    line-height: 1.5;
}

.assistant-msg p { margin: 0; }

.assistant-msg.from-bot {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-bottom-left-radius: 6px;
    color: var(--gray-800);
}

.assistant-msg.from-user {
    align-self: flex-end;
    background: var(--red-600);
    border-bottom-right-radius: 6px;
    color: #fff;
}

/* Paths the assistant mentions become links; see linkify() in assistant.js. */
.assistant-link { color: var(--red-600); font-weight: 600; text-decoration: underline; }
.assistant-link:hover { color: var(--red-700); }
.assistant-msg.from-user .assistant-link { color: #fff; }

.assistant-msg.is-error {
    background: var(--red-50);
    border: 1px solid var(--red-200);
    color: var(--red-800);
}

/* Three dots that breathe while the model is thinking. */
.assistant-typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 0; }
.assistant-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gray-400);
    animation: assistant-blink 1.2s infinite ease-in-out;
}
.assistant-typing i:nth-child(2) { animation-delay: .18s; }
.assistant-typing i:nth-child(3) { animation-delay: .36s; }

@keyframes assistant-blink {
    0%, 60%, 100% { opacity: .28; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

.assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px 0;
}

.assistant-suggestions[hidden] { display: none; }

.assistant-chip {
    padding: 7px 13px;
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.assistant-chip:hover { background: var(--red-50); border-color: var(--red-200); color: var(--red-700); }

.assistant-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 6px;
}

.assistant-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-family: inherit;
    font-size: .875rem;
    color: var(--gray-900);
}

.assistant-form input:focus { outline: none; border-color: var(--red-400); box-shadow: var(--ring); }

.assistant-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: var(--red-600);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, opacity .2s;
}

.assistant-send svg { width: 18px; height: 18px; }
.assistant-send:hover { background: var(--red-700); }
.assistant-send:disabled { opacity: .5; cursor: not-allowed; }

.assistant-foot {
    margin: 0;
    padding: 0 18px 14px;
    font-size: .68rem;
    color: var(--gray-500);
    text-align: center;
}

@media (max-width: 560px) {
    .assistant { right: 16px; bottom: 16px; }
    .assistant-panel { max-height: calc(100vh - 110px); }
}

/* The toast lands in the same corner; step the launcher aside while it shows.
   Only while the panel is closed — with it open, lifting the launcher parks it
   on top of the panel's own footer. */
body.toast-visible .assistant:not(.is-open) .assistant-launcher { transform: translateY(-72px); }

/* ---------- AI copywriting controls (manager) ---------------------------- */
.ai-spark { color: var(--red-600); font-size: .95em; line-height: 1; flex-shrink: 0; }
.table-action:hover .ai-spark,
.ai-write.is-busy .ai-spark,
.ai-write.is-done .ai-spark { color: inherit; }

.ai-row-hint {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 18px;
    padding: 13px 18px;
    background: var(--red-50);
    border: 1px solid var(--red-100);
    border-radius: var(--r-xl);
    font-size: .85rem;
    color: var(--gray-700);
}

/* Products that arrived from the bulk import with no copy of their own. */
.ai-write.needs-copy { background: var(--red-50); border-color: var(--red-200); color: var(--red-700); }

/* Hover has to read as pressure: the button lifts, fills, and the spark grows. */
.ai-write { transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s; }
.ai-write:hover:not(:disabled):not(.is-busy):not(.is-done) {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-red);
}
.ai-write:hover .ai-spark { transform: scale(1.2) rotate(15deg); }
.ai-write .ai-spark { transition: transform .2s var(--ease); }
.ai-write:active:not(:disabled) { transform: translateY(0); }
.ai-write:focus-visible { outline: none; box-shadow: var(--ring); }

.ai-write.is-busy { opacity: .65; cursor: progress; }
.ai-write.is-done { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.ai-write.is-done:hover { background: var(--green-700); border-color: var(--green-700); }

.ai-copy-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
}

.ai-copy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.ai-copy-title { font-weight: 800; font-size: .95rem; color: var(--gray-900); }
.ai-copy-button { flex-shrink: 0; }
.ai-copy-button:disabled { opacity: .6; cursor: progress; }

.ai-copy-note { margin: 0; font-size: .8rem; color: var(--gray-500); }
.ai-copy-note.is-error { color: var(--red-700); font-weight: 600; }
.ai-copy-note.is-done { color: var(--green-700); font-weight: 600; }

.ai-copy-block > label { margin: 0; }

/* ---------- Bulk AI copywriting modal (manager) -------------------------- */
.dashboard-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-bulk-trigger { gap: 8px; }

.ai-bulk-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 190;
}

.ai-bulk-overlay[hidden],
.ai-bulk-modal[hidden] { display: none; }

.ai-bulk-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    z-index: 195;
    animation: ai-bulk-in .22s var(--ease);
}

@keyframes ai-bulk-in {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ai-bulk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--gray-200);
}

.ai-bulk-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.ai-bulk-x {
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0 4px;
    transition: color .2s;
}

.ai-bulk-x:hover { color: var(--gray-900); }

.ai-bulk-body {
    padding: 22px 26px;
    overflow-y: auto;
}

.ai-bulk-lead { margin: 0 0 16px; font-size: .95rem; color: var(--gray-800); }

.ai-bulk-points {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ai-bulk-points li {
    position: relative;
    padding-left: 22px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--gray-700);
}

.ai-bulk-points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red-600);
}

.ai-bulk-note {
    margin: 0;
    padding: 12px 15px;
    background: var(--red-50);
    border: 1px solid var(--red-100);
    border-radius: var(--r-xl);
    font-size: .82rem;
    color: var(--gray-700);
}

/* Naming the first few products makes the scope concrete, not just a number. */
.ai-bulk-scope {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 18px;
    padding: 12px 15px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
}

.ai-bulk-scope[hidden] { display: none; }

.ai-bulk-scope-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gray-500);
}

.ai-bulk-scope ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai-bulk-scope li {
    font-size: .82rem;
    color: var(--gray-700);
    /* Imported names run long; one line each keeps the dialog compact. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-bulk-scope-more { font-size: .78rem; color: var(--gray-500); }
.ai-bulk-scope-more[hidden] { display: none; }

/* The last gate: the phrase has to be typed before the button will fire. */
.ai-bulk-confirm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.ai-bulk-confirm label {
    font-size: .82rem;
    color: var(--gray-700);
}

.ai-bulk-confirm label strong {
    padding: 2px 7px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: var(--gray-900);
    white-space: nowrap;
}

.ai-bulk-confirm input {
    width: 100%;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: var(--r-xl);
    font-family: inherit;
    font-size: .9rem;
    color: var(--gray-900);
}

.ai-bulk-confirm input:focus { outline: none; border-color: var(--red-400); box-shadow: var(--ring); }
.ai-bulk-confirm input:disabled { background: var(--gray-100); cursor: not-allowed; }

.ai-bulk-confirm-state { font-size: .75rem; font-weight: 700; min-height: 1em; }
.ai-bulk-confirm-state.is-ok { color: var(--green-700); }
.ai-bulk-confirm-state.is-off { color: var(--gray-500); }

.ai-bulk-foot .button:disabled { opacity: .45; cursor: not-allowed; }

/* Progress */
.ai-bulk-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.ai-bulk-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brand-gradient);
    border-radius: 999px;
    transition: width .3s var(--ease);
}

.ai-bulk-current {
    margin: 0 0 14px;
    font-size: .82rem;
    color: var(--gray-500);
    min-height: 1.2em;
    /* Long product names must not widen the dialog. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-bulk-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.ai-bulk-foot .button { padding: 12px 22px; font-size: .9rem; }
.ai-bulk-foot .button[hidden] { display: none; }

@media (max-width: 560px) {
    .ai-bulk-foot { flex-direction: column-reverse; }
    .ai-bulk-foot .button { width: 100%; }
}

/* ---------- AI copy review modal (manager) ------------------------------
   Shows what is stored against what the AI wrote, before anything is saved.
   Shares the bulk modal's overlay and close-button styling.
   ------------------------------------------------------------------------ */
.ai-review-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 190;
}

.ai-review-overlay[hidden],
.ai-review-modal[hidden] { display: none; }

.ai-review-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(940px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    z-index: 195;
    animation: ai-bulk-in .22s var(--ease);
}

.ai-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--gray-200);
}

.ai-review-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.ai-review-product {
    margin: 4px 0 0 26px;
    font-size: .85rem;
    color: var(--gray-500);
}

.ai-review-body {
    padding: 20px 26px;
    overflow-y: auto;
}

.ai-review-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 26px 0;
    justify-content: center;
    font-size: .9rem;
    color: var(--gray-500);
}

.ai-review-note {
    margin: 0 0 18px;
    padding: 12px 15px;
    background: var(--red-50);
    border: 1px solid var(--red-100);
    border-radius: var(--r-xl);
    font-size: .82rem;
    font-weight: 600;
    color: var(--red-800);
}

.ai-review-note.is-error { font-weight: 500; }

.ai-review-field { margin-bottom: 22px; }
.ai-review-field:last-child { margin-bottom: 0; }

.ai-review-field h3 {
    margin: 0 0 10px;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gray-700);
}

.ai-review-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--gray-400);
}

/* Two panels on desktop; they stack on narrow screens so neither is squeezed. */
.ai-review-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ai-review-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--r-xl);
    border: 1px solid var(--gray-200);
    background: var(--gray-100);
    min-width: 0;
}

/* The replacement is the one being agreed to, so it gets the brand tint. */
.ai-review-side.is-new {
    background: var(--red-50);
    border-color: var(--red-100);
}

.ai-review-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gray-500);
}

.ai-review-side.is-new .ai-review-label { color: var(--red-700); }

.ai-review-text {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--gray-800);
    /* Long unbroken strings must not stretch the grid column. */
    overflow-wrap: anywhere;
}

/* The panels are deliberately not scrollable: a clipped panel hides the end of
   the copy being approved, and an overlay scrollbar gives no hint it is there.
   The modal body scrolls instead, so the whole text is always reachable. */

.ai-review-text p { margin: 0 0 .7em; }
.ai-review-text p:last-child { margin-bottom: 0; }

.ai-review-text.is-empty {
    color: var(--gray-400);
    font-style: italic;
}

/* The suggestion reads as prose until the pencil is pressed. */
.ai-review-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 22px;
}

.ai-review-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: var(--surface);
    border: 1px solid var(--red-200);
    border-radius: 999px;
    color: var(--red-700);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.ai-review-edit svg { width: 12px; height: 12px; }
.ai-review-edit:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.ai-review-edit:focus-visible { outline: none; box-shadow: var(--ring); }
.ai-review-edit[hidden] { display: none; }

/* Once editing, the panel reads as a form control rather than a quote. */
.ai-review-side.is-editing { border-color: var(--red-400); }

.ai-review-input[hidden] { display: none; }

/* The AI side becomes editable once the pencil is pressed. */
.ai-review-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--red-200);
    border-radius: var(--r-xl);
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--gray-900);
    resize: vertical;
}

.ai-review-input:focus {
    outline: none;
    border-color: var(--red-400);
    box-shadow: var(--ring);
}


.ai-review-count {
    align-self: flex-end;
    font-size: .68rem;
    font-weight: 700;
    color: var(--gray-400);
}

.ai-review-count.is-full { color: var(--red-600); }

.ai-review-tip {
    margin: 0 0 18px;
    font-size: .8rem;
    color: var(--gray-500);
}

/* Both columns share a row, so the read-only side stretches to match the
   editable one instead of floating at the top of a tall cell. */
.ai-review-pair .ai-review-side { align-self: stretch; }

.ai-review-brand {
    margin: 0;
    padding: 12px 15px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    font-size: .85rem;
    color: var(--gray-700);
}

.ai-review-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.ai-review-foot .button { padding: 12px 22px; font-size: .9rem; }
.ai-review-foot .button[hidden] { display: none; }
.ai-review-foot .button:disabled { opacity: .6; cursor: progress; }

@media (max-width: 720px) {
    .ai-review-pair { grid-template-columns: 1fr; }
    .ai-review-foot { flex-direction: column-reverse; }
    .ai-review-foot .button { width: 100%; }
}

/* ---------- Assistant: header actions and product cards ------------------ */
.assistant-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.assistant-new {
    padding: 5px 11px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.assistant-new:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .35); }
.assistant-new:focus-visible { outline: none; box-shadow: var(--ring-dark); }

/* Products the reply named, offered under the bubble it named them in. */
.assistant-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: flex-start;
    width: 92%;
}

.assistant-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}

.assistant-card-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;                 /* lets the name ellipsis instead of pushing */
    color: inherit;
}

.assistant-card-main img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    background: var(--gray-100);
}

.assistant-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.assistant-card-text strong {
    font-size: .78rem;
    font-weight: 700;
    color: var(--gray-900);
    /* Imported names run long; keep every card one line tall. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-card-text span { font-size: .72rem; color: var(--gray-500); }
.assistant-card-main:hover .assistant-card-text strong { color: var(--red-600); }

.assistant-card-add {
    flex-shrink: 0;
    padding: 7px 12px;
    background: var(--red-600);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, opacity .2s;
}

.assistant-card-add:hover { background: var(--red-700); }
.assistant-card-add:disabled { cursor: default; opacity: .75; }
.assistant-card-add.is-added { background: var(--green-600); opacity: 1; }

@media (max-width: 560px) {
    .assistant-cards { width: 100%; }
    .assistant-card-text strong { font-size: .74rem; }
}

/* ---------- Image upload widget -----------------------------------------
   The markup in widgets/file_upload.html had no styles of its own, so it fell
   back to bare browser defaults: a raw storage path and a floating checkbox.
   ------------------------------------------------------------------------ */
.file-upload {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-weight: 400;
}

.file-upload-current {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
}

.file-upload-preview {
    flex-shrink: 0;
    display: block;
    line-height: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--gray-200);
}

.file-upload-preview img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.file-upload-preview:hover { border-color: var(--red-300, var(--red-200)); }

.file-upload-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.file-upload-kicker {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gray-500);
}

.file-upload-hint {
    font-size: .8rem;
    font-weight: 400;
    color: var(--gray-500);
}

/* The remove tick reads as a decision, so it gets a label and a hit area. */
.file-upload-clear {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-direction: row !important;
    flex-shrink: 0;
    padding: 7px 13px;
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--gray-700);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.file-upload-clear:hover { background: var(--red-50); border-color: var(--red-200); color: var(--red-700); }

.file-upload-clear input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--red-600);
    cursor: pointer;
}

.file-upload-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-upload-new small {
    font-size: .75rem;
    font-weight: 400;
    color: var(--gray-400);
}

@media (max-width: 560px) {
    .file-upload-current { flex-wrap: wrap; }
    .file-upload-meta { flex-basis: calc(100% - 78px); }
    .file-upload-clear { width: 100%; justify-content: center; }
}

/* ---------- Customer reviews --------------------------------------------
   Only verified buyers can post, so everything here is backed by an order.
   ------------------------------------------------------------------------ */
.reviews {
    max-width: var(--shell);
    margin: 0 auto 64px;
    padding: 32px 34px;
    background: var(--surface);
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
}

.reviews-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.reviews-head h2 { margin: 0; font-size: 1.4rem; }

.reviews-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
}

.reviews-summary .stars { color: var(--amber-500); letter-spacing: 2px; }

.reviews-gate,
.reviews-empty {
    margin: 0 0 22px;
    padding: 16px 20px;
    background: var(--gray-100);
    border-radius: var(--r-xl);
    font-size: .9rem;
    color: var(--gray-600);
}

.reviews-gate a { color: var(--red-600); font-weight: 700; text-decoration: underline; }

/* The form */
.review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
    padding: 22px 24px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2xl);
}

.review-form-kicker { margin: 0; font-weight: 800; color: var(--gray-900); }

.review-stars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
}

.review-star {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--gray-700);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.review-star input { accent-color: var(--red-600); cursor: pointer; }
.review-star:hover { border-color: var(--red-300, var(--red-200)); color: var(--red-700); }
.review-star:has(input:checked) {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}

.review-comment textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--gray-300);
    border-radius: var(--r-xl);
    font-family: inherit;
    font-size: .9rem;
    resize: vertical;
}

.review-comment textarea:focus { outline: none; border-color: var(--red-400); box-shadow: var(--ring); }
.review-form .button { align-self: flex-start; }

/* The list */
.review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.review-item {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-200);
}

.review-item:last-child { border-bottom: none; padding-bottom: 0; }

.review-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: .88rem;
}

.review-item-head .stars { color: var(--amber-500); letter-spacing: 2px; }

.review-verified {
    padding: 3px 9px;
    background: #e7f7ee;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--green-800);
}

.review-item p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--gray-700); }

/* Manager form: the rating is calculated, so it is shown, not edited. */
.rating-readout {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-xl);
}

.rating-readout-label {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gray-500);
}

.rating-readout strong { font-size: 1rem; color: var(--gray-900); }

@media (max-width: 760px) {
    .reviews { padding: 24px 20px; border-radius: var(--r-2xl); }
}

/* Print */
@media print {
    .site-header, .site-footer, .drawer, .drawer-overlay, .toast, .no-print {
        display: none !important;
    }

    body { background: #fff; }
}

/* ============================================================
   WHATSAPP CONTACT
   A shortcut in the utility strip, one in the header actions, and a floating
   button so the number is one tap away from any page.
   ============================================================ */

:root {
    --whatsapp: #25d366;
    --whatsapp-dark: #128c7e;
}

.utility-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--whatsapp);
}

.utility-whatsapp:hover { color: var(--whatsapp-dark); }

.header-action-whatsapp .action-icon { color: var(--whatsapp); }
.header-action-whatsapp:hover .action-icon { color: var(--whatsapp-dark); }

.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 149;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 58px;
    padding: 0 14px;
    background: var(--whatsapp);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
    transition: gap .22s, padding .22s, background .18s, transform .18s, box-shadow .18s;
}

/* The AI launcher owns the bottom-right corner, so stack above it when it is on. */
.whatsapp-float-stacked { bottom: 96px; }

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    background: var(--whatsapp-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(18, 140, 126, .42);
}

.whatsapp-float svg { flex: none; }

.whatsapp-float-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 700;
    font-size: .95rem;
    opacity: 0;
    transition: max-width .22s, opacity .22s;
}

.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus-visible .whatsapp-float-label {
    max-width: 160px;
    opacity: 1;
    margin-left: 10px;
}

/* Touch devices get no hover, so the label would never appear - keep it a disc. */
@media (hover: none) {
    .whatsapp-float-label { display: none; }
}

@media (max-width: 768px) {
    .whatsapp-float { right: 16px; bottom: 16px; height: 52px; padding: 0 11px; }
    .whatsapp-float-stacked { bottom: 82px; }
    /* Header is tight on phones: the floating button already covers WhatsApp. */
    .header-action-whatsapp { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float,
    .whatsapp-float-label { transition: none; }
    .whatsapp-float:hover { transform: none; }
}

/* ============================================================
   NESTED CATEGORY INDENTS
   Depth is capped at four visual steps: deeper nesting still works, it just
   stops eating horizontal space in the sidebar and manager table.
   ============================================================ */

.side-depth-1 { padding-left: 30px; }
.side-depth-2 { padding-left: 46px; }
.side-depth-3,
.side-depth-4,
.side-depth-5 { padding-left: 62px; }

.side-depth-1,
.side-depth-2,
.side-depth-3,
.side-depth-4,
.side-depth-5 { font-weight: 500; font-size: .92rem; }

.check-depth-1 { padding-left: 18px; }
.check-depth-2 { padding-left: 34px; }
.check-depth-3,
.check-depth-4,
.check-depth-5 { padding-left: 50px; }

.cat-row-depth-1 { padding-left: 30px !important; }
.cat-row-depth-2 { padding-left: 52px !important; }
.cat-row-depth-3,
.cat-row-depth-4,
.cat-row-depth-5 { padding-left: 74px !important; }

/* ---- Grouped category page ---- */
.cat-group { margin-bottom: 34px; }

.cat-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-200);
}

.cat-group-head h2 { margin: 0; font-size: 1.15rem; }

.cat-group-head h2 a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-900);
}

.cat-group-head h2 a:hover { color: var(--red-600); }

.cat-group-head small { flex: none; color: var(--gray-500); font-size: .85rem; }

.cat-group-emoji { display: inline-flex; color: var(--gray-500); }

/* Third-level names, listed on the subcategory card so the tree stays visible. */
.cat-card-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    justify-content: center;
    margin-top: 8px;
}

.cat-card-subs span {
    padding: 2px 8px;
    background: var(--gray-100);
    border-radius: 999px;
    color: var(--gray-600);
    font-size: .72rem;
    line-height: 1.5;
}

.field-hint {
    display: block;
    margin-top: 6px;
    color: var(--gray-500);
    font-weight: 500;
    font-size: .8rem;
    line-height: 1.5;
}