/* ============================================
   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;
    --border-color: #E2E8F0;
    --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(--border-color, #e2e8f0); }
.btn-secondary:hover { background: var(--surface-hover, #f1f5f9); 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(--border-color);
    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 rgba(128, 128, 128, 0.3);
    border-radius: var(--radius);
    font-size: 0.9rem;
    width: 100%;
    background: rgba(128, 128, 128, 0.1);
    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: rgba(128, 128, 128, 0.15); }
.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 rgba(128, 128, 128, 0.2); 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 rgba(128, 128, 128, 0.2);
    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 rgba(128, 128, 128, 0.2);
}

.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 rgba(128, 128, 128, 0.2);
}
.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 rgba(128, 128, 128, 0.15);
    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; }
.featured-category-card img { width: 100%; height: auto; 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; }

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

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

#productFb { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { #productFb { flex-direction: row; } }

#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 */
#imgNavWrap { position: absolute; display: flex; 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: 32px; font-weight: 600; margin-top: -7px; }
#infoPrice { font-size: 24px; font-weight: 600; margin-top: 5px; 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 - Qty & Add to Cart Row */
#priceWrap { display: flex; flex-direction: row; gap: 20px; margin-bottom: 20px; }
#qtyWrap { width: calc(25% - 10px); }
#btnWrap { width: calc(75% - 10px); }

/* Product Detail - Qty Input */
.qty-input {
    color: #000; background: #fff; display: flex; align-items: center;
    overflow: hidden; border-radius: 4px; border: 1px solid #444;
}
.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 #444; }
.qty-input .qty-count--add { border-left: 1px solid #444; }
.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 #444; }
.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; }
#infoDesc { margin-top: 20px; }
#infoExtra { margin-top: 20px; }

/* 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;
    background: var(--surface-alt);
    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(--border-color);
    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; }
.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: 1.25rem; font-weight: 700; 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: 1.25rem; font-weight: 700; display: flex; gap: 1rem; }

.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(--border, #e5e7eb); 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(--border-color); }
.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(--border-color); 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(--border-color); 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(--border-color); display: flex; flex-direction: column; gap: 0.5rem; }
.cart-flyout-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; }

/* Cart Flyout Items */
.flyout-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}
.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-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 #444;
    border-radius: 4px;
    overflow: hidden;
}
.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:disabled { color: #ccc; cursor: not-allowed; background: #f2f2f2; }
.flyout-qty-count[data-action="minus"] { border-right: 1px solid #444; }
.flyout-qty-count[data-action="add"] { border-left: 1px solid #444; }
.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; } }

/* 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: var(--surface-alt, #f1f5f9); border-radius: 999px; font-size: 0.75rem;
    color: var(--text-primary); text-decoration: none;
}
.active-filter-pill:hover { background: #e2e8f0; 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 rgba(0, 0, 0, 0.1); }

.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; }
.about-contact-card { margin-top: 1.75rem; padding: 1.25rem 1.4rem; background: #f7f7f8; 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 rgba(128,128,128,0.18);
    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: rgba(128,128,128,0.08);
    border: 1px solid rgba(128,128,128,0.2);
    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: rgba(128,128,128,0.08); text-decoration: none; }

/* Accordion masters — top-level category groups */
.mnav-master {
    border-top: 1px solid rgba(128,128,128,0.12);
}
.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: rgba(128,128,128,0.06); }

.mnav-master-body {
    padding: 0 0 0.5rem 0.5rem;
    background: rgba(128,128,128,0.03);
}

/* 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: rgba(128,128,128,0.08);
    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 rgba(128,128,128,0.18);
    padding: 0.6rem 0.5rem;
    background: rgba(128,128,128,0.04);
}
.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: rgba(128,128,128,0.08);
    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) {
    .product-detail-page { padding: 1rem 0 2rem; }

    /* 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: #f8fafc;
    }
    .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; }
}