/* ============================================
   CleanSkinWeb - Base Stylesheet
   Mobile-first, CSS custom property theming
   ============================================ */


:root {
    --primary-color: #0D9488;
    --secondary-color: #475569;
    --accent-color: #F59E0B;
    --font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    --header-bg: #FFFFFF;
    --header-text: #1E293B;
    --button-bg: var(--primary-color);
    --button-text: #FFFFFF;
    --footer-bg: #1E293B;
    --footer-text: #94A3B8;
    --footer-heading: #F1F5F9;
    --body-bg: #F8FAFB;
    --card-bg: #FFFFFF;
    /* Soft, on-palette divider line. Derived from the secondary background (--card-bg, which tenants
       set as "Background Secondary") nudged ~15% toward the text colour, so lines read as part of the
       store's palette instead of a clashing cool grey — but stay visible. Tenants inject --card-bg +
       --text-primary, so it resolves per-theme at render time with no ThemeJson regeneration needed.
       Static fallback first for browsers without color-mix(). */
    --line: #E2E8F0;
    --line: color-mix(in srgb, var(--card-bg, #FFFFFF) 85%, var(--text-primary, #1E293B) 15%);
    /* --border-color now resolves to the themed --line instead of a hardcoded cool grey, so EVERY
       storefront border using var(--border-color) (account nav, orders, addresses, profile, wishlist,
       auth, pagination, filter sidebar, hr, error page, buttons) follows the tenant palette. The grey
       override that _TenantHead used to inject has been removed so this default wins. */
    --border-color: #E2E8F0;
    --border-color: var(--line);
    --text-primary: #1E293B;
    /* Secondary was a muted slate grey (#64748B) but it stood out against tenants' theme
       colours — Aquilla asked for it to match the main text so the storefront reads as one
       voice across headings + body + forms. If a tenant overrides textSecondary in their
       theme JSON, that still wins via _TenantHead.cshtml. */
    --text-secondary: var(--text-primary, #1E293B);
    --text-on-primary: #FFFFFF;
    --text-muted: #CBD5E1;
    --surface-hover: #F1F5F9;
    --surface-alt: #F8FAFC;
    --danger: #EF4444;
    --success: #10B981;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --max-width: 1200px;
}

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

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    font-family: var(--font-family);
    background: var(--body-bg);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: none; }

img { max-width: 100%; height: auto; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}
.btn:hover { opacity: 0.9; text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--button-bg); color: var(--button-text); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--line); }
.btn-secondary:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); opacity: 1; }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 0.875rem 1.5rem; font-size: 1rem; }

/* Forms */
.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.2s;
}
.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent); }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.375rem; font-weight: 600; font-size: 0.875rem; color: var(--text-secondary); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem; }

fieldset { border: none; margin-bottom: 1.5rem; }
fieldset legend { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color); }

/* Navigation */
.site-header {
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1100;
    box-shadow: var(--shadow);
    overflow: visible;
}

/* Top row: Logo | Search | Account & Cart */
.nav-top-row { }
.nav-top-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2.5rem;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-left { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.mobile-menu-toggle {
    display: flex;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--header-text);
    padding: 0.25rem;
}
@media (min-width: 768px) { .mobile-menu-toggle { display: none; } }

.site-logo { display: flex; align-items: center; }
.logo-image { height: 40px; }
.logo-text { font-size: 1.25rem; font-weight: 700; color: var(--header-text); white-space: nowrap; }
.logo-text:hover { text-decoration: none; }

/* Search — always visible, fills middle */
.nav-search { flex: 1; min-width: 0; display: none; }
@media (min-width: 768px) { .nav-search { display: block; } }

.search-form { display: flex; align-items: center; position: relative; width: 100%; }

.search-input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.9rem;
    width: 100%;
    background: color-mix(in srgb, var(--header-text) 8%, transparent);
    color: var(--header-text);
    box-sizing: border-box;
}
.search-input::placeholder { color: var(--header-text); opacity: 0.5; }
.search-input:focus { outline: none; border-color: var(--accent-color, var(--primary-color)); background: color-mix(in srgb, var(--header-text) 12%, transparent); }
.search-btn { background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--header-text); opacity: 0.6; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.search-btn:hover { opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

/* Bottom row: Categories centered */
.nav-bottom-row { display: none; background: var(--header-bg); }
@media (min-width: 768px) { .nav-bottom-row { display: block; } }
.nav-bottom-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
}

.nav-links { list-style: none; display: flex; gap: 1.5rem; }
.nav-links a { color: var(--header-text); font-weight: 500; font-size: 0.875rem; }
.nav-links a:hover { color: var(--accent-color, var(--primary-color)); text-decoration: none; }

/* Mobile nav (categories) */
.nav-bottom-inner.active { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--header-bg); border-bottom: 1px solid var(--line); padding: 1rem; z-index: 99; flex-direction: column; height: auto; }

.nav-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--header-text);
    position: relative;
    padding: 0.25rem;
}
.nav-icon:hover { color: var(--accent-color, var(--primary-color)); }

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger);
    color: var(--text-on-primary);
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Category mega-menu panels */
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}
.nav-dropdown-toggle.active {
    border-bottom-color: var(--accent-color, var(--primary-color));
    color: var(--accent-color, var(--primary-color));
}
.nav-dropdown-arrow { font-size: 0.55rem; transition: transform 0.2s; }
.nav-dropdown-toggle.active .nav-dropdown-arrow { transform: rotate(180deg); }

#megaMenuPanels {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 1050;
}

.mega-menu {
    display: none;
    background: var(--header-bg);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 1.5rem 2.5rem;
    position: absolute;
    top: 0;
    /* Left is set by JS to align the panel under the master category that was clicked
       (clamped to the viewport so it never overflows). Falls back to 0 before JS runs.
       Sizes to content: a few headers => a tidy compact panel; many => grows then wraps. */
    left: 0;
    width: max-content;
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
}
.mega-menu.open { display: block; }

.mega-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 999;
}
.mega-menu-overlay.open { display: block; }

.mega-menu-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 2.5rem;
}

/* Fixed-width columns that wrap onto new rows — keeps every header column a readable width
   whether the menu has 1 header or 14, instead of squashing/stretching them all into one row. */
.mega-menu-column { flex: 0 0 200px; max-width: 220px; }

/* Single-header menu (e.g. For Penises): the header sits on top and its subcategories flow into
   short fixed-width columns below, so a long list fills the width instead of one tall column. */
.mega-menu-inner--single { flex-direction: column; }
.mega-menu-inner--single .mega-menu-header { margin-bottom: 0.75rem; }
.mega-menu-sub-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 2.5rem; }
.mega-menu-sub-columns .mega-menu-links { flex: 0 0 190px; max-width: 200px; }

.mega-menu-header {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color, var(--primary-color));
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}

.mega-menu-links { list-style: none; padding: 0; margin: 0; }
.mega-menu-links li a {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    color: var(--header-text);
    transition: color 0.15s;
}
.mega-menu-links li a:hover { color: var(--accent-color, var(--primary-color)); text-decoration: none; }

/* Brands mega-menu — multi-column alphabetical grid */
.mega-menu-brands { padding: 0.5rem 0; }
.mega-menu-brands-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--accent-color, var(--primary-color)); margin-bottom: 0.75rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--line);
}
.mega-menu-brands-grid {
    column-count: 4; column-gap: 2rem;
}
@media (max-width: 768px) { .mega-menu-brands-grid { column-count: 2; } }
.mega-menu-brands-letter {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-color, var(--primary-color));
    margin-top: 0.75rem; margin-bottom: 0.25rem; padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--line);
    break-after: avoid;
}
.mega-menu-brands-letter:first-child { margin-top: 0; }
.mega-menu-brands-item {
    display: block; padding: 0.3rem 0; font-size: 0.875rem;
    color: var(--header-text); transition: color 0.15s;
    break-inside: avoid;
}
.mega-menu-brands-item:hover { color: var(--accent-color, var(--primary-color)); text-decoration: none; }

/* Main content */
.site-main { flex: 1; padding: 1.5rem 0; }

/* Hero */
.hero-banner {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    padding: 3rem 0;
    text-align: center;
    margin: -1.5rem 0 2rem;
}
.hero-banner h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.hero-banner p { font-size: 1.125rem; margin-bottom: 1.5rem; opacity: 0.9; }
.hero-banner .btn { background: var(--card-bg); color: var(--primary-color); }

@media (min-width: 768px) {
    .hero-banner { padding: 5rem 0; }
    .hero-banner h1 { font-size: 2.75rem; }
}

/* Hero Banner Image */
.hero-banner-image { margin: 2rem 0; }
.hero-banner-image img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.hero-banner-image a { display: block; }

/* Secondary Banner Image */
.secondary-banner-image { margin: 2rem 0; }
.secondary-banner-image img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.secondary-banner-image a { display: block; }

/* Featured Categories */
.featured-categories { padding: 2rem 0; }
.featured-categories h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.featured-categories-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}
.featured-categories-grid.featured-categories-1 { grid-template-columns: 1fr; }
.featured-categories-grid.featured-categories-3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) {
    .featured-categories-grid.featured-categories-4 { grid-template-columns: repeat(4, 1fr); }
    .featured-categories-grid.featured-categories-2 { grid-template-columns: repeat(2, 1fr); }
}

.featured-category-card {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.featured-category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
/* Reserve a fixed tile shape so the row doesn't reflow as each image loads (cuts homepage CLS).
   Portrait 3:4 to match the portrait product images uploaded for the category tiles — fills with
   essentially no crop. object-fit: cover keeps images undistorted (the caption is a separate strip
   below, so no copy is lost). */
.featured-category-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
/* Optional caption rendered under each featured-category image — a filled pill in the
   tenant's main brand colour with white (or their chosen on-primary) text. The whole strip
   only renders when there's text in the caption; an empty caption skips the markup entirely
   so the card stays image-only. Set per-slot from /manage/styling. */
.featured-category-label {
    text-align: center;
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    background: var(--primary-color, #1a1a1a);
    color: var(--text-on-primary, #fff);
    border-radius: 0;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card a { color: inherit; flex: 1; display: flex; flex-direction: column; }
.product-card a:hover { text-decoration: none; }

/* Merchandising banner across the top of a curated product cell (e.g. "Date Night Ideas").
   Brand colour background, white centred text. Full-width strip clipped by the card's rounded
   corners (the card has overflow:hidden). */
.product-card-banner {
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.35rem 0.5rem;
    line-height: 1.2;
}

/* Sibling category "jump to" row — lateral navigation between sub-categories under the same header.
   Distinct from the facet sidebar: sits under the H1, full width. Chips use a 3px radius (no pills). */
.category-jump {
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.category-jump-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.category-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.category-jump-chip {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.2;
    border: 1px solid #e0d9cf;
    border-radius: 3px;
    color: #444;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
a.category-jump-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.category-jump-chip.is-current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
/* On phones keep the chips on one swipeable row rather than stacking into a tall block. */
@media (max-width: 640px) {
    .category-jump {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }
    .category-jump-links {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }
    .category-jump-chip {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* Product-card star rating (verified-purchase average). Two-layer CSS star bar: a grey row of 5
   stars with a clipped gold overlay sized to the average. */
.stars-outer { position: relative; display: inline-block; font-size: 14px; line-height: 1; color: #d8d8d8; }
.stars-outer::before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 1px; }
.stars-inner { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; width: 0; color: #f5a623; }
.stars-inner::before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 1px; }
.card-rating { display: flex; align-items: center; gap: 5px; margin: 2px 0 4px; }
.card-rating-count { font-size: 12px; color: #888; }

/* Product-detail + account-order rating widget (set/change/remove). Powered by product-rating.js. */
.rating-block { margin: 4px 0 10px; }
.rating-display { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #444; }
.rating-display.rating-none { color: #999; font-style: italic; }
.rate-widget { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: #666; flex-wrap: wrap; }
.rate-stars { display: inline-flex; }
.rate-star { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #d8d8d8; padding: 0 1px; transition: color .1s; }
.rate-star.on { color: #f5a623; }
.rate-remove { background: none; border: none; cursor: pointer; color: #b00020; font-size: 12px; text-decoration: underline; padding: 0; }

.product-image { aspect-ratio: 1; overflow: hidden; background: #fff; position: relative; }
.product-image img { width: 100%; height: 100%; object-fit: contain; }
.product-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text-muted); }
.product-image-placeholder.large { font-size: 4rem; min-height: 300px; }

.product-info { padding: 0.75rem; flex: 1; display: flex; flex-direction: column; }
.product-brand { font-size: 0.75rem; color: var(--text-primary); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }
.product-title { font-size: 0.875rem; font-weight: 600; margin: 0.25rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }
.product-price { font-size: 1rem; font-weight: 700; color: var(--primary-color); margin-top: auto; }
/* On-sale: the regular price struck through, the sale price in the normal price colour. */
.was-price { text-decoration: line-through; color: var(--text-secondary, #9ca3af); font-weight: 400; margin-right: 0.35rem; font-size: 0.85em; }
.product-price--sale { color: var(--danger, #dc2626); }

.btn-add-to-cart { margin: 0 0.75rem 0.75rem; }

.out-of-stock { color: var(--danger); font-size: 0.8rem; font-weight: 600; }
.in-stock { color: var(--success); font-weight: 600; }

/* Featured section */
.featured-products { margin-top: 2.5rem; margin-bottom: 2rem; }
.featured-products h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* Product Detail - Breadcrumb */
#breadCrumb { font-size: 12px; font-weight: 600; margin-bottom: 20px; color: #888; }
.breadCrumbLink { cursor: pointer; color: #888; text-decoration: none; }
.breadCrumbLink:hover { color: var(--primary-color); text-decoration: none; }
.breadCrumbLink.selected { color: var(--text-primary); cursor: default; }

/* Product Detail - Layout */
.product-detail-page { padding: 3rem 0 4rem; }

/* No wrapper box: the product block sits directly on the page background — no card, border or shadow. */
#productFb { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { #productFb { flex-direction: row; gap: 28px; } }

#imgWrap { display: flex; flex-direction: row; gap: 12px; width: 100%; max-height: 600px; min-height: 400px; position: relative; }
@media (min-width: 768px) { #imgWrap { width: 60%; min-height: 600px; } }

#informationWrap { width: 100%; }
@media (min-width: 768px) { #informationWrap { width: 40%; } }

/* Product Detail - Thumbnail Carousel */
#imgCaroWrap {
    max-width: 60px; min-width: 60px;
    overflow-y: auto; overflow-x: hidden;
    -ms-overflow-style: none; scrollbar-width: none;
    position: relative;
}
#imgCaroWrap::-webkit-scrollbar { display: none; }
#imgCaroWrap::before, #imgCaroWrap::after {
    content: ""; position: absolute; left: 0; right: 0; height: 20px;
    max-width: 60px; min-width: 60px; pointer-events: none; z-index: 1;
}
#imgCaroWrap::before { top: 0; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
#imgCaroWrap::after { bottom: 0; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
#imgCaroWrap.no-top-fade::before { display: none; }
#imgCaroWrap.no-bottom-fade::after { display: none; }

.sampleImgWrap {
    position: relative; overflow: hidden; margin-bottom: 10px; cursor: pointer;
    background-color: #ffffff; max-width: 55px; min-width: 55px;
    border-radius: 5px; transition: filter 0.2s; display: block;
}
.sampleImgWrap .sampleImg { display: block; width: 100%; height: 100%; object-fit: cover; }
.sampleImgWrap::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.sampleImgWrap.active::after { opacity: 1; }
.sampleImg { width: 55px; height: 59px; cursor: pointer; position: relative; overflow: hidden; mix-blend-mode: multiply; }
.br-5 { border-radius: 5px; }
.br-10 { border-radius: 10px; }

/* Product Detail - Main Image */
#mainImgWrap { min-width: calc(100% - 76px); max-width: calc(100% - 76px); position: relative; }
.imgMain { width: 100%; height: 100%; background: #ffffff; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mainImg { margin: 0 auto; mix-blend-mode: multiply; max-height: 600px; max-width: 100%; display: block; }

/* Product Detail - Image Nav Buttons */
/* Prev/next arrows hidden for now (per Aquilla) — thumbnails still switch the main image. Markup kept
   so they can be re-enabled by flipping this back to flex. */
#imgNavWrap { position: absolute; display: none; flex-direction: row; gap: 10px; bottom: 20px; right: 20px; }
.imgNavBtn {
    border-radius: 50%; background: #FFF; color: #444; height: 36px; width: 36px;
    align-items: center; justify-content: center; display: inline-flex; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.imgNavBtn:hover { background: #f1f5f9; }

/* Product Detail - Info Section */
#infoTitle { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
#infoPrice { font-size: 22px; font-weight: 700; margin: 0; color: var(--text-primary); }
#infoSub { display: flex; flex-direction: row; gap: 10px; color: var(--text-primary); opacity: 0.7; margin-top: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.subHead { font-weight: 600; }
.stock-status { margin-top: 15px; }

/* Product Detail - Variant Swatches */
.filterSection { margin-top: 20px; margin-bottom: 20px; }
.filterColourSwatches { display: flex; gap: 10px; }

/* Product Detail - Add to Cart row. Quantity selector removed (per Aquilla), so the button is a plain
   full-width block that lines up exactly with the brand/title/price/trust/description above and below. */
#btnWrap { width: 100%; }

/* Product Detail - Qty Input */
.qty-input {
    color: #000; background: #fff; display: flex; align-items: center;
    overflow: hidden; border-radius: 4px; border: 1px solid var(--line);
}
.qty-input .product-qty, .qty-input .qty-count {
    background: transparent; color: inherit; font-weight: bold; font-size: inherit;
    border: none; display: inline-block; min-width: 0; height: 2.5rem; line-height: 1;
}
.qty-input .product-qty:focus, .qty-input .qty-count:focus { outline: none; }
.qty-input .product-qty {
    width: 50px; text-align: center; -webkit-appearance: textfield; appearance: textfield;
}
.qty-input .product-qty::-webkit-inner-spin-button,
.qty-input .product-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input .qty-count {
    padding: 0; cursor: pointer; width: 2.5rem; font-size: 1.25em;
    text-indent: -100px; overflow: hidden; position: relative;
}
.qty-input .qty-count::before, .qty-input .qty-count::after {
    content: ""; position: absolute; width: 10px; height: 2px; background: #000;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.qty-input .qty-count--minus { border-right: 1px solid var(--line); }
.qty-input .qty-count--add { border-left: 1px solid var(--line); }
.qty-input .qty-count--minus::after { display: none; content: none; }
.qty-input .qty-count--add::after { transform: translate(-50%, -50%) rotate(90deg); }
.qty-input .qty-count:disabled { color: #ccc; background: #f2f2f2; cursor: not-allowed; border-color: transparent; }
.qty-input .qty-count--minus:disabled { border-right: 1px solid var(--line); }
.qty-input .qty-count:disabled::before, .qty-input .qty-count:disabled::after { background: #ccc; }

/* Product Detail - Add to Cart Button */
.addToCartBtn {
    padding: 7px 12px; font-size: 14px; background: var(--button-bg); color: var(--button-text);
    border: none; cursor: pointer; border-radius: 6px; width: 100%; height: 100%;
    overflow: hidden; position: relative; font-family: inherit; transition: opacity 0.2s;
}
.addToCartBtn:hover { opacity: 0.85; }
.addToCartBtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Product Detail - Description */
.sectionTitle { font-size: 18px; font-weight: 600; }
#desc, #extra { margin-top: 5px; font-size: 16px; line-height: 2; }
/* Indent description lists so the bullet sits just left of its text instead of hanging in the
   gutter flush against the product image. */
#desc ul, #desc ol, #extra ul, #extra ol { padding-left: 1.5rem; margin: 0.5rem 0; }
#desc li, #extra li { padding-left: 0.25rem; }
#infoDesc { margin-top: 20px; }
#infoExtra { margin-top: 20px; }

/* Product Detail - brand line above the title; links to the brand's listing page when known. */
.detail-brand { display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary-color); text-decoration: none; margin: 0 0 2px; }
a.detail-brand:hover { text-decoration: underline; }

/* Product Detail - ratings moved to the top-right of the info column. */
.rating-block--top { text-align: right; margin: 0 0 6px; }
.rating-block--top .rating-display { justify-content: flex-end; }
.rating-block--top .rate-widget { justify-content: flex-end; }

/* Product Detail - shipping note under the price */
.detail-shipping { font-size: 13px; color: var(--text-primary); opacity: 0.65; margin: 6px 0 0; }

/* Product Detail - full-width Add to Cart row (no quantity selector). Hidden on mobile, where the
   fixed .detail-buybar is the add-to-cart instead. */
#btnWrap.detail-cart-row { width: 100%; margin: 16px 0 0; }
/* Zero the shared .btn-add-to-cart horizontal margin here — with width:100% it pushed the button past
   the column edge (misaligned with the trust box / description). Cards keep the margin. */
#btnWrap.detail-cart-row .addToCartBtn { height: 48px; margin: 0; }
@media (max-width: 767px) { #btnWrap.detail-cart-row { display: none; } }

/* Product Detail - trust cluster (plain packaging / secure / dispatch). Theme-aware: surface + --line
   border, brand-coloured icons. */
.detail-trust {
    list-style: none; margin: 18px 0 0; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--radius, 8px);
    display: grid; gap: 8px;
}
.detail-trust li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-primary); opacity: 0.85; }
.detail-trust li i { width: 18px; text-align: center; color: var(--primary-color); flex-shrink: 0; }

/* Product Detail - mobile sticky Add to Cart bar. Hidden on desktop (the inline button shows there). */
.detail-buybar { display: none; }
@media (max-width: 767px) {
    .detail-buybar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--card-bg); border-top: 1px solid var(--line);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .detail-buybar .addToCartBtn { height: 48px; font-size: 15px; margin: 0; }
}

/* Out-of-stock state + cross-sell row on the product detail page */
.oos-notice { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1rem 0; padding: 0.6rem 1rem; border-radius: 3px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-weight: 600; }
.cross-sell { margin-top: 3rem; }
.cross-sell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cross-sell-head h2 { font-size: 1.25rem; margin: 0; }
.cross-sell-all { font-weight: 600; white-space: nowrap; }

/* Legacy compat */
.product-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #cbd5e1; }
.product-image-placeholder.large { font-size: 4rem; min-height: 300px; }

/* Cart Page */
.cart-page h1 { margin-bottom: 1.5rem; }

.cart-table { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

.cart-header {
    display: none;
    padding: 0.75rem 1rem;
    /* Themed contrast band (a darkened tint of the cart surface) instead of the old cool near-white,
       so it sits on-palette against the tenant's cream/secondary background. */
    background: #f3eee4;
    background: color-mix(in srgb, var(--card-bg) 86%, var(--text-primary) 14%);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-primary, #1E293B);
}
@media (min-width: 768px) {
    .cart-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 1rem; align-items: center; }
}

.cart-row {
    padding: 1rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .cart-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 1rem; flex-wrap: nowrap; }
}

.cart-row .qty-input { width: fit-content; }
.cart-product { display: flex; align-items: center; gap: 0.75rem; }
/* Product name links to the product page; reads as product text, underlines on hover. */
.cart-product-link { color: var(--text-primary); font-weight: 500; }
.cart-product-link:hover { text-decoration: underline; }
.cart-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 4px; }

.btn-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; padding: 0.25rem; }
.cart-row--oos { opacity: 0.5; }
.cart-oos-label { color: var(--danger); font-size: 0.8rem; font-weight: 600; margin-top: 0.2rem; }
.cart-stock-warn { color: #d97706; font-size: 0.8rem; font-weight: 500; margin-top: 0.2rem; }
.stock-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.875rem; z-index: 9999; animation: fadeInOut 3s ease; }
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

.cart-summary { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.cart-totals-block { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.cart-subtotal { font-size: 1rem; font-weight: 500; display: flex; gap: 1rem; }
.cart-discount-row { font-size: 1rem; display: flex; gap: 1rem; color: #16a34a; font-weight: 500; }
.cart-discount-value { font-weight: 600; }
.cart-new-subtotal { font-size: 1rem; font-weight: 600; display: flex; gap: 1rem; }
.cart-shipping-row { font-size: 1rem; font-weight: 500; display: flex; gap: 1rem; }
.cart-estimated-row { font-size: 1.25rem; font-weight: 700; display: flex; gap: 1rem; padding-top: 0.5rem; margin-top: 0.2rem; border-top: 1px solid var(--line); }

.cart-coupon-section { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; }
.cart-coupon-form { display: flex; gap: 8px; }
.cart-coupon-input { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; width: 200px; }
.cart-coupon-applied { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; font-size: 13px; color: #166534; }
.cart-coupon-remove { font-size: 12px; color: #6b7280; cursor: pointer; border: none; background: none; }
.cart-coupon-remove:hover { color: #dc2626; }
.cart-coupon-error { font-size: 12px; color: #dc2626; margin-top: 6px; text-align: right; }

/* Checkout */
.checkout-layout { display: grid; gap: 2rem; }
@media (min-width: 768px) { .checkout-layout { grid-template-columns: 1.5fr 1fr; } }

.checkout-summary { background: var(--card-bg); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); height: fit-content; }
.checkout-summary h3 { margin-bottom: 1rem; }
.checkout-item { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.875rem; }
.checkout-item + .checkout-item { border-top: 1px solid var(--line); }
.checkout-total-row { display: flex; justify-content: space-between; padding: 0.5rem 0; }
.checkout-total-row.total { font-weight: 700; font-size: 1.125rem; border-top: 2px solid var(--line); padding-top: 0.75rem; }

/* Cart Flyout */
.cart-flyout { display: none; }
.cart-flyout.active { display: block; }

.cart-flyout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1200;
}

.cart-flyout-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    background: var(--card-bg);
    color: var(--text-primary);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.cart-flyout.active .cart-flyout-panel { transform: translateX(0); }

.cart-flyout-header { padding: 1rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.cart-flyout-header h3 { margin: 0; }
.cart-flyout-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-secondary); }

.cart-flyout-body { flex: 1; overflow-y: auto; padding: 1rem; }
.cart-empty-message { text-align: center; color: var(--text-secondary); padding: 2rem 0; }

.cart-flyout-footer { padding: 1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; }
.cart-flyout-reassure { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); opacity: 0.75; margin-bottom: 4px; }
.cart-flyout-reassure i { color: var(--primary-color); opacity: 1; flex-shrink: 0; }
.cart-flyout-totals { margin-bottom: 0.85rem; }
.cart-flyout-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-primary); padding: 3px 0; }
.cart-flyout-estimated { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-size: 1.05rem; }

/* Cart Flyout Items */
.flyout-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}
.flyout-cart-img {
    width: 56px;
    height: 70px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--surface-alt);
}
.flyout-cart-info {
    flex: 1;
    min-width: 0;
    position: relative;
}
.flyout-cart-remove {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 0.8rem;
    color: var(--text-primary);
    opacity: 0.5;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.flyout-cart-remove:hover { color: var(--danger); opacity: 1; }
.flyout-cart-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1.5rem;
    text-transform: uppercase;
}
.flyout-cart-name:hover { text-decoration: underline; }
.flyout-cart-price {
    display: block;
    font-size: 0.8rem;
    color: var(--text-primary);
    opacity: 0.7;
    margin-top: 2px;
}
.flyout-cart-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}
.flyout-cart-total {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Flyout Qty Input */
.flyout-qty-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius, 6px);
    overflow: hidden;
    background: var(--card-bg);
}
.flyout-qty-count {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flyout-qty-count:hover { background: var(--surface-alt); }
.flyout-qty-count:disabled { color: var(--text-muted); cursor: not-allowed; background: var(--surface-alt); }
.flyout-qty-count[data-action="minus"] { border-right: 1px solid var(--line); }
.flyout-qty-count[data-action="add"] { border-left: 1px solid var(--line); }
.flyout-qty-value {
    width: 36px;
    height: 28px;
    text-align: center;
    border: none;
    font-size: 0.8rem;
    font-weight: bold;
    background: transparent;
    color: inherit;
    -moz-appearance: textfield;
}
.flyout-qty-value::-webkit-inner-spin-button,
.flyout-qty-value::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Auth Pages */
.auth-page { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 200px); padding: 4rem 0; }
.auth-form-container { width: 100%; max-width: 420px; margin: 0 auto; background: var(--card-bg); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.auth-form-container h1 { margin-bottom: 1.5rem; }
.auth-form-container .form-group label { color: var(--text-primary, #1E293B); }
.auth-link { text-align: center; margin-top: 1rem; font-size: 0.875rem; color: var(--text-primary, #1E293B); }
.auth-link a { color: var(--text-primary, #1E293B); }

/* Admin */
.admin-info { background: var(--card-bg); padding: 1.5rem; border-radius: var(--radius); margin-bottom: 1.5rem; box-shadow: var(--shadow); }
.admin-info p { margin-bottom: 0.25rem; }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.admin-card { background: var(--card-bg); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
.admin-card i { font-size: 2rem; color: var(--primary-color); margin-bottom: 0.75rem; }
.admin-card h3 { margin-bottom: 0.25rem; }
.admin-card p { color: var(--text-secondary); font-size: 0.875rem; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 0.25rem; margin-top: 2rem; }
.page-link { padding: 0.5rem 0.875rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 0.875rem; color: var(--text-primary); }
.page-link:hover { background: var(--surface-hover); text-decoration: none; }
.page-link.active { background: var(--primary-color); color: var(--text-on-primary); border-color: var(--primary-color); }
.page-link.disabled { opacity: 0.4; pointer-events: none; cursor: default; }

/* Pagination extras */
.page-info { font-size: 0.8rem; color: var(--text-primary, #1E293B); width: 100%; text-align: center; margin-top: 0.5rem; }
.pagination { flex-wrap: wrap; align-items: center; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.breadcrumb-link { color: var(--text-primary, #1E293B); }
.breadcrumb-link:hover { color: var(--primary-color); }
.breadcrumb-sep { color: #94a3b8; }
.breadcrumb-current { color: var(--text-primary); font-weight: 600; }

/* Product Listing Layout */
.product-listing-page h1 { margin-bottom: 1rem; }
.listing-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; }
@media (max-width: 767px) { .listing-layout { display: block; } }
/* Curated promo collections have no filter sidebar — let the product grid use the full width. */
.listing-layout--no-filters { display: block; }

/* Listing Toolbar */
.listing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.listing-count { font-size: 0.875rem; color: var(--text-primary, #1E293B); }
.sort-dropdown {
    padding: 0.4rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius);
    background: var(--card-bg); color: var(--text-primary); font-size: 0.8rem; font-family: inherit; cursor: pointer;
}
@media (max-width: 767px) { .sort-dropdown { width: 100%; } }

/* Filter Sidebar */
.filter-sidebar {
    position: sticky; top: 120px; align-self: start; max-height: calc(100vh - 130px); overflow-y: auto;
    padding-right: 0.5rem;
}
.filter-sidebar-header { display: none; }
.filter-sidebar-apply { display: none; }

@media (max-width: 767px) {
    /* Filter drawer is above the sticky site header (z-index 1100) so its own
       "Filters" header + close button aren't obscured by the page nav when open.
       The drawer scrolls vertically; header + apply button are sticky inside the
       scrollable area so they stay visible no matter how long the filter list is. */
    .filter-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw;
        /* Force the drawer to fill the actual visible viewport. With short filter
           content, top:0/bottom:0 alone wasn't reliably stretching the white background
           on mobile browsers — explicit 100dvh (dynamic viewport height, accounts for
           collapsing browser chrome) plus 100vh fallback nails the full-screen
           background regardless of how little content the drawer has. */
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--card-bg); z-index: 1110; transform: translateX(-100%);
        transition: transform 0.3s ease;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-shadow: var(--shadow);
        max-height: none;
        display: flex;
        flex-direction: column;
    }
    /* Push the apply button to the bottom of the flex column when content is short.
       (When content is tall enough to overflow, the drawer scrolls and the sticky
       bottom on .filter-sidebar-apply pins it visible during scroll.) */
    .filter-sidebar-apply { margin-top: auto; }
    .filter-sidebar.open { transform: translateX(0); }
    .filter-sidebar-header {
        display: flex; justify-content: space-between; align-items: center;
        font-weight: 700; font-size: 1.1rem;
        position: sticky; top: 0; z-index: 2;
        background: var(--card-bg);
        padding: 1rem;
        margin-bottom: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .filter-sidebar-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-primary); }
    /* Inner content (active-filters + filter-group) lives between header and apply.
       Padding it here so the children don't need to know about it. */
    .filter-sidebar > .active-filters,
    .filter-sidebar > .filter-group { padding-left: 1rem; padding-right: 1rem; }
    .filter-sidebar > .active-filters { padding-top: 1rem; }
    .filter-sidebar-apply {
        display: block;
        position: sticky; bottom: 0; z-index: 2;
        margin-top: 1rem;
        padding: 0.85rem 1rem;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
    }
    .filter-sidebar-apply .btn { width: 100%; }
    .filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1108; }
    .filter-overlay.open { display: block; }
}
@media (min-width: 768px) { .filter-overlay { display: none !important; } }

/* Filter drawer toggle (mobile only) */
.filter-drawer-toggle {
    display: none; padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius);
    background: var(--card-bg); cursor: pointer; font-family: inherit; font-size: 0.875rem; margin-bottom: 1rem;
}
.filter-drawer-toggle i { margin-right: 0.3rem; }
.filter-badge { background: var(--primary-color); color: #fff; border-radius: 50%; font-size: 0.7rem; padding: 0.1rem 0.4rem; margin-left: 0.3rem; }
@media (max-width: 767px) { .filter-drawer-toggle { display: inline-flex; align-items: center; } }

/* Filter Groups */
.filter-group { border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.filter-group:last-of-type { border-bottom: none; }
.filter-group-header {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: none; border: none; font-weight: 600; font-size: 0.85rem; cursor: pointer;
    padding: 0.25rem 0; color: var(--text-primary); font-family: inherit;
}
.filter-group-header i { font-size: 0.65rem; transition: transform 0.2s; }
.filter-group.collapsed .filter-group-header i { transform: rotate(-90deg); }
.filter-group.collapsed .filter-group-body { display: none; }
.filter-group-body { margin-top: 0.5rem; }

/* Filter Checkboxes */
.filter-checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; padding: 0.2rem 0; cursor: pointer; }
.filter-checkbox input[type="checkbox"] { accent-color: var(--primary-color); flex-shrink: 0; }
.filter-count { color: #94a3b8; font-size: 0.75rem; margin-left: auto; }
.filter-hidden-item { display: none; }
.filter-show-more, .filter-show-less { background: none; border: none; color: var(--primary-color); font-size: 0.8rem; cursor: pointer; padding: 0.25rem 0; font-family: inherit; }
.filter-show-more:hover, .filter-show-less:hover { text-decoration: underline; }

/* Colour Swatches */
.colour-swatch {
    display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;
}

/* Active Filter Pills */
.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.active-filter-pill {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 999px; font-size: 0.75rem;
    color: var(--text-primary); text-decoration: none;
}
.active-filter-pill:hover { background: color-mix(in srgb, var(--text-primary) 14%, transparent); text-decoration: none; }
.pill-remove { font-weight: 700; font-size: 0.85rem; color: var(--text-primary, #1E293B); }
.clear-all-filters { font-size: 0.75rem; color: var(--primary-color); align-self: center; }
.clear-all-filters:hover { text-decoration: underline; }

/* Product card OOS state */
.product-card--oos { opacity: 0.65; }
.low-stock { color: #f59e0b; font-size: 0.8rem; font-weight: 600; }
.product-rrp { text-decoration: line-through; color: #94a3b8; font-size: 0.85rem; margin-right: 0.25rem; font-weight: 400; }

/* Empty State */
.empty-state { text-align: center; padding: 3rem 0; color: var(--text-primary, #1E293B); }
.empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-state .btn { margin-top: 1rem; }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 2rem 0 0; margin-top: auto; border-top: 1px solid var(--line); }

.footer-container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; }

.footer-section h4 { color: var(--footer-heading); margin-bottom: 0.75rem; }
.footer-section ul { list-style: none; }
.footer-section ul li { margin-bottom: 0.375rem; }
.footer-section ul a { color: var(--footer-text); font-size: 0.875rem; }
.footer-section ul a:hover { color: var(--footer-heading); }

.footer-address { font-style: normal; font-size: 0.875rem; line-height: 1.5; margin: 0.6rem 0 0; color: var(--footer-text); }
.footer-contact { font-size: 0.875rem; line-height: 1.5; margin-top: 0.6rem; }
.footer-contact a { color: var(--footer-text); }
.footer-contact a:hover { color: var(--footer-heading); }

.footer-bottom { text-align: center; padding: 1.5rem 0; margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; }
.footer-powered-by { margin: 0.35rem 0 0; font-size: 0.75rem; opacity: 0.75; }

.about-page { padding: 2.5rem 0 3.5rem; }
.about-page .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }
.about-title { font-size: 2rem; margin: 0 0 1.5rem; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.about-grid-text-only { grid-template-columns: 1fr; max-width: 760px; }
.about-image-wrap { border-radius: 10px; overflow: hidden; }
.about-image { width: 100%; height: auto; display: block; border-radius: 10px; }
.about-body p { font-size: 1rem; line-height: 1.65; margin: 0 0 1rem; }
/* Contact panel background is a light tint of the tenant's brand colour (primary mixed into the
   card background) so it carries the store's palette instead of a generic grey. Static fallback
   first for browsers without color-mix(). Same pattern as --line above. Shared with Contact.cshtml. */
.about-contact-card { margin-top: 1.75rem; padding: 1.25rem 1.4rem; background: #f7f7f8; background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg, #FFFFFF)); border-radius: 6px; }
.about-contact-card h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.about-address { font-style: normal; line-height: 1.55; margin: 0 0 0.6rem; }
.about-contact-card a { color: inherit; text-decoration: underline; }

/* Storefront info pages (Contact / Shipping / Returns) — single-column prose layout that
   reuses the About page wrapper. */
.info-body { max-width: 760px; }
.info-body p { font-size: 1rem; line-height: 1.65; margin: 0 0 1rem; }
.info-prose h2 { font-size: 1.2rem; margin: 1.75rem 0 0.6rem; }
.info-prose ol { margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.65; }
.info-prose ol li { margin-bottom: 0.4rem; }
/* Contact details — label + value rows inside the contact card. */
.contact-detail-row { margin-bottom: 0.75rem; }
.contact-detail-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 0.15rem; }
.contact-social { display: flex; gap: 0.9rem; margin-top: 0.5rem; font-size: 1.15rem; }
.contact-social a { color: inherit; text-decoration: none; }

@@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .about-title { font-size: 1.6rem; }
}

/* Page header */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { margin-bottom: 0.25rem; }

/* Utilities */
hr { border: none; border-top: 1px solid var(--border-color); margin: 0.75rem 0; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
.form-optional { font-weight: 400; color: #94a3b8; }
.form-hint { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; display: block; }

/* ============================================
   Customer Account Area
   ============================================ */

/* Auth Pages — Enhanced */
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo img { max-height: 50px; }
.auth-logo-text { font-size: 1.25rem; font-weight: 700; color: #1e293b; }
.auth-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.875rem; }
.auth-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.875rem; }
.auth-subtitle { font-size: 0.875rem; color: var(--text-primary, #1E293B); margin-bottom: 1.5rem; }
.auth-divider { text-align: center; margin: 1.5rem 0; position: relative; }
.auth-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--border-color); }
.auth-divider span { background: var(--card-bg); padding: 0 1rem; position: relative; font-size: 0.8rem; color: var(--text-primary, #1E293B); }
.auth-forgot-link { text-align: right; margin-top: 0.375rem; }
.auth-forgot-link a { font-size: 0.8rem; color: var(--text-primary, #1E293B); }
.auth-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-primary, #1E293B); cursor: pointer; }
.auth-checkbox input { accent-color: var(--primary-color); }
.password-input-wrap { position: relative; }
.password-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 0.875rem; }

/* Account Layout */
.account-page { padding: 2rem 1rem; }
.account-layout { display: flex; gap: 2rem; }

.account-sidebar {
    width: 240px;
    flex-shrink: 0;
}
.account-sidebar-name {
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}
.account-nav { display: flex; flex-direction: column; }
.account-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary, #1E293B);
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    text-decoration: none;
}
.account-nav-link:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.account-nav-link.active { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); font-weight: 600; }
.account-nav-link i { width: 18px; text-align: center; }
.account-nav-logout { border-top: 1px solid var(--border-color); margin-top: 0.5rem; padding-top: 0.5rem; }

.account-content { flex: 1; min-width: 0; }
.account-content h1 { margin-bottom: 1.5rem; font-size: 1.5rem; }

/* Mobile: sidebar becomes horizontal tabs */
@media (max-width: 767px) {
    .account-layout { flex-direction: column; }
    .account-sidebar { width: 100%; overflow-x: auto; }
    .account-sidebar-name { display: none; }
    .account-nav { flex-direction: row; gap: 0.25rem; white-space: nowrap; padding-bottom: 0.5rem; }
    .account-nav-link { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
    .account-nav-link i { display: none; }
    .account-nav-logout { border-top: none; margin-top: 0; padding-top: 0; border-left: 1px solid var(--border-color); margin-left: 0.25rem; padding-left: 0.25rem; }
}

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary, #1E293B); margin-bottom: 0.5rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; }

@media (max-width: 639px) { .stats-grid { grid-template-columns: 1fr; } }

/* Account Section */
.account-section { margin-bottom: 2rem; }
.account-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.account-section-header h2 { font-size: 1.125rem; margin: 0; }
.account-section-header a { font-size: 0.875rem; }

/* Order Cards */
.order-card-list { display: flex; flex-direction: column; gap: 0.75rem; }
.order-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    transition: box-shadow 0.2s;
}
.order-card:hover { box-shadow: var(--shadow-md); }
.order-card-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.order-card-number { font-weight: 700; }
.order-card-date { font-size: 0.8rem; color: var(--text-primary, #1E293B); }
.order-card-body { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.order-card-pills { display: flex; gap: 0.5rem; }
.order-card-meta { display: flex; gap: 1rem; align-items: center; font-size: 0.875rem; color: var(--text-primary, #1E293B); }
.order-card-total { font-weight: 700; color: var(--text-primary); }
.order-card-link { display: inline-block; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; }

/* Status Pills */
.status-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.status-paid, .status-completed { background: #dcfce7; color: #166534; }
.status-pending { background: #fef9c3; color: #854d0e; }
.status-failed, .status-refunded, .status-cancelled { background: #fef2f2; color: #991b1b; }
.status-awaiting-dispatch { background: #dbeafe; color: #1e40af; }
.status-dispatched, .status-shipped { background: #e0e7ff; color: #3730a3; }
.status-delivered { background: #dcfce7; color: #166534; }

/* Order Detail */
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; color: var(--text-primary, #1E293B); }
.back-link:hover { color: var(--text-primary); text-decoration: none; }

.order-detail-status { margin-bottom: 1.5rem; }
.order-detail-pills { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.order-detail-dates { font-size: 0.875rem; color: var(--text-primary, #1E293B); display: flex; gap: 1.5rem; }

.order-tracking-card {
    display: flex; align-items: center; gap: 1rem;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.order-tracking-card i { font-size: 1.25rem; color: #2563eb; }
.order-tracking-card a { font-weight: 600; }

.order-detail-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.order-detail-section { margin-bottom: 1.5rem; }
.order-detail-section h3 { font-size: 1rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); }

.address-display { font-size: 0.875rem; line-height: 1.6; white-space: pre-line; }

.order-items-list { display: flex; flex-direction: column; }
.order-item-row {
    display: grid; grid-template-columns: 60px 1fr auto auto auto; gap: 1rem; align-items: center;
    padding: 0.75rem 0; border-bottom: 1px solid var(--border-color);
}
.order-item-thumb { width: 60px; height: 60px; }
.order-item-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.order-item-info { min-width: 0; }
.order-item-name { display: block; font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
.order-item-name:hover { text-decoration: none; color: var(--primary-color); }
.order-item-sku { font-size: 0.75rem; color: #94a3b8; }
.order-item-qty, .order-item-price { font-size: 0.875rem; color: var(--text-primary, #1E293B); }
.order-item-total { font-weight: 600; }

@media (max-width: 639px) {
    .order-item-row { grid-template-columns: 48px 1fr auto; }
    .order-item-qty, .order-item-price { display: none; }
}

.order-totals-card {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 1rem 1.25rem; max-width: 360px; margin-left: auto;
}
.order-total-row { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.875rem; }
.order-total-row.total { font-weight: 700; font-size: 1rem; border-top: 2px solid var(--border-color); padding-top: 0.75rem; margin-top: 0.5rem; }

/* Address Cards */
.address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 639px) { .address-grid { grid-template-columns: 1fr; } }

.address-card {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 1.25rem; display: flex; flex-direction: column;
}
.address-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.address-default-badge {
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem; border-radius: 99px;
}
.address-card-body { font-size: 0.875rem; line-height: 1.6; flex: 1; color: var(--text-primary, #1E293B); }
.address-card-body p { margin: 0; }
.address-card-actions { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.address-delete-btn { color: var(--danger); }
.address-delete-btn:hover { background: #fef2f2; }

.address-form-wrap {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 1.5rem; margin-bottom: 1.5rem;
}
.address-form-wrap h3 { margin-bottom: 1rem; }
.address-form-wrap .form-group label { color: var(--text-primary, #1E293B); }
.address-form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }

/* Profile Sections */
.profile-section { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.profile-section h2 { font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); }
.profile-section .form-group label { color: var(--text-primary, #1E293B); }
.profile-hint { font-size: 0.875rem; color: var(--text-primary, #1E293B); margin-bottom: 1rem; }
.profile-email-display { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 0; }
.profile-email-display span { font-size: 0.875rem; }
.profile-danger-zone { border-color: #fecaca; }
.profile-danger-zone p { font-size: 0.875rem; color: var(--text-primary, #1E293B); margin: 0; }

/* Wishlist Grid */
.wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 767px) { .wishlist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .wishlist-grid { grid-template-columns: 1fr; } }

.wishlist-card {
    background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    display: flex; flex-direction: column; position: relative; transition: box-shadow 0.2s;
}
.wishlist-card:hover { box-shadow: var(--shadow-md); }
.wishlist-card.unavailable { opacity: 0.6; }

.wishlist-remove-btn {
    position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
    background: rgba(255,255,255,0.9); border: none; border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.75rem; color: var(--text-primary, #1E293B); transition: color 0.15s, background 0.15s;
}
.wishlist-remove-btn:hover { color: var(--danger); background: #fff; }

.wishlist-card-image { aspect-ratio: 1; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; }
.wishlist-card-image img { width: 100%; height: 100%; object-fit: contain; }
.wishlist-unavailable-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem;
}

.wishlist-card-info { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.wishlist-card-title { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wishlist-card-title:hover { text-decoration: none; color: var(--primary-color); }
.wishlist-card-price { font-weight: 700; font-size: 1rem; }
.wishlist-cart-btn { margin-top: 0.5rem; }
.wishlist-card-date { font-size: 0.7rem; color: #94a3b8; margin-top: 0.25rem; }

/* Quick Links */
.quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 639px) { .quick-links { grid-template-columns: 1fr; } }
.quick-link-card {
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 1.25rem; text-align: center; transition: box-shadow 0.2s, transform 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-primary);
}
.quick-link-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.quick-link-card i { font-size: 1.5rem; color: var(--primary-color); }
.quick-link-card span { font-weight: 600; font-size: 0.875rem; }

/* Wishlist Badge in Nav */
.wishlist-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--primary-color); color: var(--text-on-primary);
    font-size: 0.65rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}

/* Nav user name */
.nav-user-name { font-size: 0.75rem; margin-left: 0.25rem; font-weight: 600; display: none; }
@media (min-width: 768px) { .nav-user-name { display: inline; } }

/* Wishlist Heart — Product Card Overlay */
.wishlist-heart {
    position: absolute; top: 8px; right: 8px; z-index: 10;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease; padding: 0;
}
.wishlist-heart:hover { transform: scale(1.1); }
.wishlist-heart svg { width: 18px; height: 18px; stroke: #999; fill: none; stroke-width: 2; transition: fill 0.2s ease, stroke 0.2s ease; }
.wishlist-heart.wishlisted svg { fill: #E53935; stroke: #E53935; }
.wishlist-heart.wishlisted { animation: wishlistPop 0.3s ease; }

/* Wishlist Heart — Product Detail (text button) */
.wishlist-heart-detail {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 0.5rem 1rem; cursor: pointer; font-family: inherit;
    font-size: 0.875rem; color: var(--text-primary, #1E293B); transition: color 0.2s, border-color 0.2s;
}
.wishlist-heart-detail:hover { border-color: #E53935; color: #E53935; }
.wishlist-heart-detail svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: fill 0.2s ease; }
.wishlist-heart-detail.wishlisted { color: #E53935; border-color: #E53935; }
.wishlist-heart-detail.wishlisted svg { fill: #E53935; }
.wishlist-heart-detail.wishlisted { animation: wishlistPop 0.3s ease; }

@keyframes wishlistPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Nav Heart Icon */
.nav-heart-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Toast Notification */
.toast-notification {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
    padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600;
    box-shadow: var(--shadow-lg); animation: toastSlideIn 0.3s ease;
}
.toast-success { background: #166534; color: #fff; }
.toast-error { background: #991b1b; color: #fff; }
@keyframes toastSlideIn {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ── Search Suggestions ────────────────────── */
.search-suggest-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.suggest-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
}

.suggest-product:hover { background: var(--surface-hover); }

.suggest-product img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    background: #ffffff;
}

.suggest-category {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
}

.suggest-category:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.suggest-section-label {
    padding: 8px 16px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.suggest-view-all {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--primary-color);
    text-align: center;
    border-top: 1px solid var(--border-color);
    text-decoration: none;
    font-weight: 500;
}

.suggest-product-placeholder {
    width: 40px; height: 40px; background: var(--surface-alt); border-radius: 4px;
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; flex-shrink: 0;
}
.suggest-product-title { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-product-brand { font-size: 0.75rem; color: var(--text-secondary); }
.suggest-product-price { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.suggest-category-count { color: var(--text-muted); }

.suggest-view-all:hover {
    background: var(--surface-hover);
}

/* ── Error Page ─────────────────────────────── */
.error-page {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 4rem 1.5rem; min-height: 50vh;
}
.error-page__icon { color: var(--text-muted); margin-bottom: 1.5rem; }
.error-page__code { font-size: 4rem; font-weight: 700; color: var(--text-muted); line-height: 1; margin-bottom: 0.25rem; }
.error-page__title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; }
.error-page__message { color: var(--text-secondary); max-width: 420px; margin-bottom: 2rem; }
.error-page__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.error-page__btn {
    display: inline-block; padding: 0.65rem 1.5rem; border-radius: var(--radius);
    font-weight: 500; font-size: 0.9rem; text-decoration: none; transition: opacity 0.15s;
}
.error-page__btn:hover { opacity: 0.85; }
.error-page__btn--primary { background: var(--button-bg); color: var(--button-text); }
.error-page__btn--secondary { background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); }

/* Cookie consent banner */
.cookie-consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: #111; color: #fff; padding: 1rem 1.25rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.cookie-consent-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cookie-consent-text { font-size: 0.85rem; line-height: 1.5; flex: 1; min-width: 240px; }
.cookie-consent-text a { color: #fff; text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie-btn {
    padding: 0.55rem 1.25rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid transparent; transition: opacity 0.15s;
}
.cookie-btn-decline { background: transparent; color: #fff; border-color: #555; }
.cookie-btn-decline:hover { border-color: #fff; }
.cookie-btn-accept { background: #fff; color: #111; border-color: #fff; }
.cookie-btn-accept:hover { opacity: 0.9; }
@media (max-width: 640px) {
    .cookie-consent-inner { flex-direction: column; align-items: stretch; }
    .cookie-consent-actions { justify-content: flex-end; }
}

/* ==========================================================================
   Mobile slide-out navigation drawer
   --------------------------------------------------------------------------
   Hamburger button (existing .mobile-menu-toggle) opens this drawer below
   the 768px breakpoint. The drawer mirrors the desktop nav: search, all
   tenant-active categories (via the same CategoryMenu component, mobile
   variant), and account links. Native <details>/<summary> for the
   accordion = no JS required to expand/collapse categories.
   ========================================================================== */

/* Drawer panel — slides in from the left */
.mobile-nav-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--card-bg, #fff);
    color: var(--text-primary);
    z-index: 1100;
    transform: translateX(-105%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex; flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    will-change: transform;
}
.mobile-nav-drawer.is-open { transform: translateX(0); }

/* Backdrop */
.mobile-nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Header strip with site title + close button */
.mobile-nav-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--header-bg);
    color: var(--header-text);
}
.mobile-nav-drawer-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--header-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobile-nav-drawer-close {
    background: none; border: none; cursor: pointer;
    color: var(--header-text);
    font-size: 1.25rem;
    padding: 0.5rem;
    margin-right: -0.5rem;
}

/* Search bar at top of drawer */
.mobile-nav-drawer-search {
    display: flex; align-items: center;
    margin: 0.85rem 1rem;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.mobile-nav-drawer-search input {
    flex: 1; min-width: 0;
    border: none; background: transparent;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
}
.mobile-nav-drawer-search button {
    background: none; border: none; cursor: pointer;
    padding: 0.5rem 0.85rem;
    color: var(--text-secondary);
}

/* Scrollable nav list */
.mobile-nav-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem 1rem;
    -webkit-overflow-scrolling: touch;
}

/* "Home" / "All products" quick links above the categories */
.mobile-nav-quick-link {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.85rem 1rem;
    font-size: 0.95rem; font-weight: 600;
    color: var(--text-primary);
    border-radius: 6px;
}
.mobile-nav-quick-link i { width: 20px; text-align: center; opacity: 0.6; }
.mobile-nav-quick-link:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); text-decoration: none; }

/* Accordion masters — top-level category groups */
.mnav-master {
    border-top: 1px solid var(--line);
}
.mnav-master:first-of-type { border-top: none; }
.mnav-master > summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.95rem 1rem;
    font-size: 0.95rem; font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}
.mnav-master > summary::-webkit-details-marker,
.mnav-header > summary::-webkit-details-marker { display: none; }
.mnav-arrow { transition: transform 0.2s ease; opacity: 0.45; font-size: 0.75rem; }
.mnav-master[open] > summary > .mnav-arrow,
.mnav-header[open] > summary > .mnav-arrow { transform: rotate(180deg); }
.mnav-master > summary:hover,
.mnav-header > summary:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }

/* Shop All — a plain link (no submenu), styled to match the master category rows
   above/below it rather than rendering as a default accent-coloured link. */
.mnav-master-link {
    display: flex; align-items: center;
    padding: 0.95rem 1rem;
    font-size: 0.95rem; font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}
.mnav-master-link:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); }

.mnav-master-body {
    padding: 0 0 0.5rem 0.5rem;
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

/* Header rows (e.g. "Skincare" inside "Beauty") */
.mnav-header > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    border-radius: 4px;
}
.mnav-header-link {
    flex: 1;
    color: inherit;
    text-decoration: none;
}
.mnav-header-link:hover { color: var(--accent-color, var(--primary-color)); }

/* Subcategory list */
.mnav-subs {
    list-style: none; margin: 0; padding: 0 0 0.4rem 1rem;
    display: flex; flex-direction: column;
}
.mnav-subs--flat {
    columns: 2; column-gap: 1rem;
    padding: 0.4rem 0.9rem 0.6rem;
}
.mnav-subs li { break-inside: avoid; }
.mnav-subs a {
    display: block;
    padding: 0.45rem 0.85rem;
    font-size: 0.84rem;
    color: var(--text-secondary, var(--text-primary));
    text-decoration: none;
    border-radius: 3px;
}
.mnav-subs a:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--accent-color, var(--primary-color));
}

/* Footer pinned to bottom of drawer — account / sign-in links */
.mobile-nav-drawer-foot {
    border-top: 1px solid var(--line);
    padding: 0.6rem 0.5rem;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.mobile-nav-foot-link {
    display: flex; align-items: center; gap: 0.7rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-radius: 6px;
    text-decoration: none;
}
.mobile-nav-foot-link i { width: 20px; text-align: center; opacity: 0.6; }
.mobile-nav-foot-link:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    text-decoration: none;
}
.mobile-nav-foot-link--button {
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: inherit;
}

/* Body scroll lock when drawer is open — set by JS via <body class="mnav-open"> */
body.mnav-open { overflow: hidden; }

/* Hide the drawer entirely above the breakpoint — desktop nav handles it */
@media (min-width: 768px) {
    .mobile-nav-drawer,
    .mobile-nav-overlay { display: none; }
}

/* ==========================================================================
   Mobile responsive polish — header, footer, cookie banner, content padding
   ========================================================================== */
@media (max-width: 767px) {
    /* Belt-and-braces — kill any horizontal scroll on phone widths. If a single rogue
       element overflows viewport, this prevents the entire page from gaining a side-scroll. */
    html, body { overflow-x: hidden; max-width: 100vw; }

    /* Header — tighten the over-generous desktop padding so it doesn't squash the logo
       between the hamburger and account icons on narrow phones. */
    .nav-top-inner { padding: 0 0.85rem; gap: 0.75rem; }
    .nav-top-row { padding: 0; }
    .logo-image { height: 32px; }
    .logo-text { font-size: 1.05rem; }
    /* The desktop search bar (.nav-search) is display:none on mobile, so without this
       the account/cart icons would bunch up next to the logo. margin-left:auto pushes
       them to the right edge of the header. */
    .nav-right { gap: 0.65rem; margin-left: auto; }
    .nav-icon { font-size: 1.05rem; padding: 0.4rem; }

    /* Main content gutter — give pages a sensible side margin on mobile */
    .site-main > .container,
    .site-main .container { padding-left: 1rem; padding-right: 1rem; }

    /* Footer — tighter spacing, single-column friendly */
    .site-footer { padding-top: 1.5rem; }
    .footer-container { padding: 0 1rem; gap: 1.25rem; }
    .footer-bottom { padding: 1rem 0; font-size: 0.72rem; }

    /* Cookie banner already collapses to column at 640px (line 1363) — make sure the
       buttons are full-width-friendly on tiny screens. */
    .cookie-consent { padding: 0.75rem 0.85rem; }
    .cookie-consent-text { font-size: 0.78rem; }
    .cookie-btn { padding: 0.55rem 0.85rem; font-size: 0.85rem; }
}

/* Home page — mobile spacing polish (grids already responsive, just tighten section padding) */
@media (max-width: 767px) {
    .site-main { padding: 0.75rem 0; }
    .featured-categories { padding: 1.5rem 0; }
    .featured-categories h2,
    .featured-products h2 { font-size: 1.25rem; margin-bottom: 1rem; }
    .featured-products { padding: 1.5rem 0; }
    .hero-banner-image,
    .secondary-banner-image { margin: 1rem 0; }
}

/* Product detail page — mobile polish.
   Stacks thumbnails BELOW the main image (instead of beside it) and overrides
   the desktop calc(100% - 76px) main image width so we don't overflow viewport.
   Also caps title/price font-size so long product names wrap cleanly. */
@media (max-width: 767px) {
    /* Extra bottom padding clears the fixed mobile Add-to-Cart bar (.detail-buybar). */
    .product-detail-page { padding: 1rem 0 calc(2rem + 64px); }

    /* Image area: column layout, main on top, thumbs scroll horizontally below */
    #imgWrap {
        flex-direction: column;
        gap: 0.6rem;
        min-height: 0;
        max-height: none;
        width: 100%;
    }
    #mainImgWrap {
        order: 1;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .imgMain { max-height: 65vh; }
    .mainImg { max-height: 65vh; max-width: 100%; }

    /* Thumbnails: horizontal scrolling strip below the main image. Display them at full
       aspect (contain, not cover) so we don't crop tall product shots into a square.
       Needs display:flex — the desktop CSS leaves it as a block container, so without
       this the children stack vertically instead of laying out in a row. */
    #imgCaroWrap {
        order: 2;
        display: flex;
        flex-direction: row;
        max-width: 100%;
        min-width: 0;
        max-height: 78px;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 4px 0;
    }
    /* Vertical fade-overlays don't make sense on a horizontal strip — disable them */
    #imgCaroWrap::before, #imgCaroWrap::after { display: none; }
    .sampleImgWrap {
        margin-bottom: 0;
        flex-shrink: 0;
        max-width: 64px;
        min-width: 64px;
        height: 64px;
        background: #ffffff;
    }
    .sampleImgWrap .sampleImg {
        width: 100%; height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    /* Info section: tighter typography, allow long titles to wrap */
    #informationWrap { width: 100%; min-width: 0; }
    #infoTitle { font-size: 1.4rem; margin-top: 0; word-wrap: break-word; overflow-wrap: anywhere; }
    #infoPrice { font-size: 1.25rem; }

    /* Qty input on row 1 (compact pill), Add-to-Cart on row 2 (full-width).
       Side-by-side was overflowing the column on narrower phones — separate rows give
       the ATC its own full-width treatment with proper container padding on both sides. */
    #priceWrap {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    #qtyWrap {
        width: auto;
        flex: 0 0 auto;
        align-self: flex-start;  /* qty pill sits at its natural width on the left */
    }
    #qtyWrap .qty-input { width: auto; }
    #btnWrap {
        width: 100%;
        flex: 0 0 auto;
    }
    .addToCartBtn { width: 100%; padding: 0.95rem 1rem; font-size: 1rem; }
}

/* Cart + checkout — mobile polish (layouts already collapse via existing breakpoints) */
@media (max-width: 767px) {
    /* Cart summary: full-width on mobile so totals align with the rest of the column */
    .cart-summary, .cart-totals-block, .cart-coupon-section { align-items: stretch; }
    .cart-coupon-form { flex-direction: column; }
    .cart-coupon-input { width: 100%; }
    .cart-subtotal, .cart-discount-row, .cart-new-subtotal { justify-content: space-between; }
    /* Checkout summary: tighter padding on phones */
    .checkout-summary { padding: 1rem; }
}

/* Auth pages — tighter padding on mobile so the card doesn't have huge empty top/bottom */
@media (max-width: 767px) {
    .auth-page { padding: 1.5rem 1rem; min-height: 0; align-items: flex-start; }
    .auth-form-container { padding: 1.25rem; box-shadow: none; background: transparent; }
}

/* ── Rolled-product variant selectors (grid cards + detail page) ───────────────── */
.price-from-label { font-size: 0.75em; color: var(--text-soft, #6b7280); font-weight: 500; }
.card-variants { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.75rem 0.5rem; }
.card-swatches, .detail-swatches { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.card-swatch, .detail-swatch {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2); padding: 0; cursor: pointer;
    box-shadow: 0 0 0 1px #fff inset; transition: transform .12s, box-shadow .12s;
}
.detail-swatch { width: 26px; height: 26px; }
.card-swatch:hover, .detail-swatch:hover { transform: scale(1.12); }
.card-swatch.is-active, .detail-swatch.is-active { box-shadow: 0 0 0 2px var(--accent, #0d9488); }
.card-sizes, .detail-sizes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.card-size, .detail-size {
    min-width: 28px; padding: 0.15rem 0.4rem; font-size: 0.72rem; line-height: 1.2;
    border: 1px solid var(--border, #d1d5db); border-radius: 3px; background: #fff;
    color: var(--text, #374151); cursor: pointer; transition: border-color .12s, background .12s;
}
.detail-size { font-size: 0.85rem; padding: 0.35rem 0.7rem; }
.card-size:hover, .detail-size:hover { border-color: var(--accent, #0d9488); }
.card-size.is-active, .detail-size.is-active { border-color: var(--accent, #0d9488); background: var(--accent, #0d9488); color: #fff; }
.btn-add-to-cart.is-oos, .addToCartBtn.is-oos { opacity: 0.5; cursor: not-allowed; }
.detail-variants { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.75rem 0 1rem; }
.detail-variant-row { display: flex; flex-direction: column; gap: 0.35rem; }
.detail-variant-label { font-size: 0.8rem; font-weight: 600; color: var(--text-soft, #6b7280); text-transform: uppercase; letter-spacing: 0.03em; }

/* Category nav inside the filter sidebar (sibling sub-categories). Stacked list, current highlighted. */
.filter-category-links { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-category-link {
    display: block; padding: 0.4rem 0.6rem; border-radius: 3px;
    font-size: 0.85rem; line-height: 1.3; text-decoration: none;
    color: var(--text, #374151); border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.filter-category-link:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.filter-category-link.is-current { background: var(--accent, #0d9488); color: #fff; font-weight: 600; }
/* The generic .filter-hidden-item { display:none } (defined earlier) is overridden by the
   .filter-category-link { display:block } above, so the "Show more" collapse didn't actually hide the
   extra sub-categories. This higher-specificity rule restores the hide. */
.filter-category-link.filter-hidden-item { display: none; }