/* ==========================================================================
   AJONTEC STOREFRONT — DESIGN SYSTEM + DARK MODE
   --------------------------------------------------------------------------
   HOW THIS WORKS
   main.css is fully token-driven: it paints with hsl(var(--white)),
   hsl(var(--body-color)), var(--body-font) and so on. Rather than fight
   8,000 lines of selectors, this file REDEFINES THOSE TOKENS. Overriding
   about 30 variables re-skins the entire theme at once.

   COLOUR CONTROL IS PRESERVED.
   color.php turns the colour picked in Admin > General Setting into
   --base-h / --base-s / --base-l. Those three are never hardcoded here, so
   the admin colour picker still drives every accent on the site.

   DARK MODE
   Adding data-theme="dark" to <html> flips the neutral tokens. Because the
   theme paints from tokens, the whole site inverts with no extra selectors.
   ========================================================================== */

/* Fonts are loaded via <link> in layouts/app.blade.php - see the note there. */

/* ==========================================================================
   1. TOKEN OVERRIDES  — this is what actually changes the look
   ========================================================================== */
:root {
    /* Typography: replaces Poppins everywhere in one move */
    --heading-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --body-font: 'Figtree', system-ui, sans-serif;

    /* Taller header for a more generous, less cramped bar */
    --h-height: 76px;

    /* Neutrals with a slight cool cast instead of pure grey */
    --light-h: 222; --light-s: 24%; --light-l: 99%;
    --dark-h: 226;  --dark-s: 22%;  --dark-l: 11%;

    --body-h: 224; --body-s: 11%; --body-l: 40%;
    --heading-h: 226; --heading-s: 24%; --heading-l: 11%;
    --text-h: 226; --text-s: 24%; --text-l: 11%;

    --border: 222 20% 91%;
    --gray-color: 222 14% 88%;

    /* Softer, lower-spread shadow than the stock heavy drop */
    --box-shadow: 0 10px 28px hsl(var(--black) / 0.08);

    /* Semantic colours, slightly desaturated so they sit with the neutrals */
    --success: 158 66% 34%;
    --danger:  4 66% 48%;
    --warning: 33 74% 43%;
    --info:    199 76% 40%;

    /* Convenience aliases used by the component rules below */
    --acc:      hsl(var(--base));
    --acc-dark: hsl(var(--base-dark));
    --acc-soft: hsl(var(--base-h) calc(var(--base-s) - 15%) 96%);
    --acc-ring: hsl(var(--base) / .18);
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --surface: hsl(var(--white));
    --surface-2: hsl(var(--light-2));
    --line: hsl(var(--border));
}

/* ==========================================================================
   2. DARK MODE  — flip the same tokens
   ========================================================================== */
html[data-theme="dark"] {
    --white: 226 22% 9%;
    --light-h: 226; --light-s: 18%; --light-l: 13%;
    --body-h: 220; --body-s: 14%; --body-l: 72%;
    --heading-h: 220; --heading-s: 20%; --heading-l: 96%;
    --text-h: 220; --text-s: 20%; --text-l: 96%;
    --dark-h: 220; --dark-s: 20%; --dark-l: 96%;
    --black-h: 0; --black-s: 0%; --black-l: 100%;
    --border: 224 14% 24%;
    --gray-color: 224 12% 30%;
    --box-shadow: 0 10px 28px rgba(0,0,0,.45);
    --acc-soft: hsl(var(--base-h) calc(var(--base-s) - 30%) 20%);
    --surface: hsl(226 22% 9%);
    --surface-2: hsl(226 18% 13%);
}

html[data-theme="dark"] body { background: hsl(var(--white)); }

/* Elements the theme hardcodes to white need explicit handling in dark */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .header-area,
html[data-theme="dark"] .site-sidebar,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .dropdown-menu {
    background: var(--surface-2) !important;
    color: hsl(var(--body-color));
}

html[data-theme="dark"] .form--control,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--surface-2);
    border-color: hsl(var(--border));
    color: hsl(var(--heading));
}

html[data-theme="dark"] img:not([src*=".svg"]) { filter: brightness(.94); }

/* ==========================================================================
   3. THEME TOGGLE BUTTON
   ========================================================================== */
.theme-toggle {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    font-size: 1.05rem; cursor: pointer; padding: 0; line-height: 1;
    /* This button lives in the dark top strip, so it must be light on dark.
       Inheriting the heading colour made it a dark icon on a dark bar -
       it rendered as an empty box. */
    border: 1px solid hsl(0 0% 100% / .22);
    background: hsl(0 0% 100% / .08);
    color: hsl(0 0% 100% / .9);
    transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: hsl(0 0% 100% / .18);
    border-color: hsl(0 0% 100% / .4);
    color: #fff;
}
.theme-toggle i { pointer-events: none; }
.theme-toggle .la-sun { display: none; }
html[data-theme="dark"] .theme-toggle .la-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .la-moon { display: none; }

/* ==========================================================================
   4. TYPOGRAPHY REFINEMENT
   ========================================================================== */
body { font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }

h1,h2,h3,h4,h5,h6,.title {
    letter-spacing: -.022em; line-height: 1.22; font-weight: 700;
}
h1 { font-weight: 800; }

.title, .sub-title { font-family: var(--heading-font); }

/* Prices read as data */
.price, .amount, .product-price, .cart-total, .total-price {
    font-family: var(--heading-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
}

/* ==========================================================================
   5. BUTTONS & FORMS
   ========================================================================== */
.btn {
    font-family: var(--heading-font);
    font-weight: 600; letter-spacing: .004em;
    border-radius: var(--r-sm);
    transition: background .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), transform .08s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--acc-ring); outline-offset: 2px; }

.form--control, .form-control {
    border-radius: var(--r-sm);
    border: 1.5px solid hsl(var(--border));
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.form--control:focus, .form-control:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 3.5px var(--acc-ring);
}
.form--label { font-family: var(--heading-font); font-weight: 600; font-size: .85rem; }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.header-top { background: hsl(var(--heading)) !important; font-size: .8rem; }
.header-top, .header-top a { color: hsl(var(--white) / .78); }
.header-top a:hover { color: hsl(var(--white)); }

.header-area { border-bottom: 1px solid hsl(var(--border)); box-shadow: none; }

.ecommerce__icon {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    transition: background .16s var(--ease), color .16s var(--ease);
}
.ecommerce:hover .ecommerce__icon { background: var(--acc-soft); color: var(--acc-dark); }
.ecommerce__text { font-size: .78rem; font-weight: 500; }

.header-search-form .form--control { height: 48px; }

/* Nav links: underline grows from the left on hover */
.fluid-menu .nav-link, .menu-item > .nav-link {
    font-family: var(--heading-font);
    font-weight: 600; font-size: .92rem;
    position: relative;
}
.fluid-menu .nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 4px;
    height: 2px; background: var(--acc); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s var(--ease);
}
.fluid-menu .nav-link:hover::after { transform: scaleX(1); }

.menu-item-icon { opacity: .85; }

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.product-card, .services-card, .small-card-item {
    border-radius: var(--r-md);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.product-card:hover, .services-card:hover {
    box-shadow: var(--box-shadow);
    transform: translateY(-4px);
}

.product-card .product-thumb { border-radius: var(--r-sm); overflow: hidden; }
.product-card .product-thumb img { transition: transform .45s var(--ease); }
.product-card:hover .product-thumb img { transform: scale(1.05); }

.services-card__icon { color: var(--acc); }

.rating-list__icon-active { color: #E8A33B; }

/* ==========================================================================
   8. SECTION RHYTHM
   ========================================================================== */
section { padding-top: clamp(2.4rem, 4.5vw, 4rem); padding-bottom: clamp(2.4rem, 4.5vw, 4rem); }

.sub-title {
    font-family: var(--heading-font);
    font-weight: 600; font-size: .95rem;
    color: hsl(var(--body-color));
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.footer-widget .title { font-family: var(--heading-font); font-weight: 700; font-size: .95rem; }
.widget-link a { transition: color .15s var(--ease), padding-left .15s var(--ease); }
.widget-link a:hover { padding-left: 4px; }

/* ==========================================================================
   10. MISC
   ========================================================================== */
.site-sidebar { box-shadow: var(--box-shadow); }
.sidebar-close-btn { border-radius: var(--r-sm); }
.line-limitation-1 { line-height: 1.45; }
.pagination .page-link { border-radius: var(--r-sm) !important; font-family: var(--heading-font); font-weight: 600; }

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

a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--acc-ring); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    :root { --h-height: 64px; }
    body { font-size: 14.5px; }
    section { padding-top: 2rem; padding-bottom: 2rem; }
    .ecommerce__icon { width: 38px; height: 38px; }
    .product-card { transform: none !important; }
}

@media (max-width: 575px) {
    .header-search-form .form--control { height: 44px; }
    .theme-toggle { width: 36px; height: 36px; }
}


/* ==========================================================================
   12. DARK MODE CONTRAST FIXES
   Found by reviewing the live screenshots: the category rail, product cards
   and category tiles were still painting light-on-light or dim-on-dark.
   ========================================================================== */
html[data-theme="dark"] .left-category-menu,
html[data-theme="dark"] .category-tree,
html[data-theme="dark"] .banner-categories,
html[data-theme="dark"] .small-card-item,
html[data-theme="dark"] .services-card {
    background: var(--surface-2) !important;
    border-color: hsl(var(--border)) !important;
}

html[data-theme="dark"] .left-category-menu a,
html[data-theme="dark"] .category-tree a,
html[data-theme="dark"] .banner-categories a,
html[data-theme="dark"] .menu-item > .nav-link,
html[data-theme="dark"] .widget-link a,
html[data-theme="dark"] .line-limitation-1 {
    color: hsl(var(--heading)) !important;
}

html[data-theme="dark"] .left-category-menu a:hover,
html[data-theme="dark"] .category-tree a:hover {
    background: hsl(var(--base) / .14) !important;
    color: #fff !important;
}

html[data-theme="dark"] .left-category-menu li,
html[data-theme="dark"] .category-tree li { border-color: hsl(var(--border)) !important; }

/* Product thumbnails sit on white plates in the stock theme */
html[data-theme="dark"] .product-thumb,
html[data-theme="dark"] .product-card .product-thumb { background: #fff; }

html[data-theme="dark"] .product-content .title a,
html[data-theme="dark"] .product-price { color: hsl(var(--heading)) !important; }

html[data-theme="dark"] .header-top { background: #060B14 !important; }

/* Icons the theme paints with a hardcoded dark colour */
html[data-theme="dark"] .ecommerce__icon,
html[data-theme="dark"] .ecommerce__text,
html[data-theme="dark"] .sidebar-close-btn { color: hsl(var(--heading)); }
html[data-theme="dark"] .ecommerce__icon { background: hsl(var(--border)); }

/* Search field inside the header */
html[data-theme="dark"] .header-search-form .form--control {
    background: var(--surface-2); color: hsl(var(--heading));
}

/* ==========================================================================
   13. NAVIGATION BAR — the part that made it look like the stock template
   --------------------------------------------------------------------------
   The stock layout paints a solid full-width accent band across the page,
   with a solid accent "Categories" block welded to the left and a solid
   accent cart block welded to the right. That band is the single strongest
   visual signature of the base template.

   It is replaced here with a light bar carrying a hairline rule: the accent
   is spent on the category button and the cart button only.

   !important is required and deliberate: menu-category-btn and
   cart-icon-design carry inline background-color written by Menu Builder,
   and an inline style cannot be beaten any other way.
   ========================================================================== */

.header-bottom {
    background: var(--surface) !important;
    border-top: 1px solid hsl(var(--border));
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: none;
}

.header-bottom-wrapper { align-items: center; gap: .5rem; }

/* "Categories" — an outlined pill, not a full-height solid slab */
.menu-category-btn {
    background: var(--acc-soft) !important;
    color: var(--acc-dark) !important;
    border: 1.5px solid hsl(var(--base) / .35);
    border-radius: var(--r-sm);
    padding: .58rem 1rem !important;
    margin: .5rem 0;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .9rem;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.menu-category-btn:hover {
    background: var(--acc) !important;
    border-color: var(--acc);
    color: #fff !important;
}
.menu-category-btn i, .menu-category-btn span { color: inherit !important; }

.view-category, .view-category-wrapper { background: transparent !important; }

/* Main nav links sit on the light bar now */
.menu > li > a,
.menu .nav-link {
    color: hsl(var(--heading)) !important;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .92rem;
    padding: 1.1rem .9rem !important;
    position: relative;
}
.menu > li > a::after {
    content: '';
    position: absolute; left: .9rem; right: .9rem; bottom: .62rem;
    height: 2px; background: var(--acc); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s var(--ease);
}
.menu > li > a:hover::after,
.menu > li.active > a::after { transform: scaleX(1); }
.menu > li > a:hover { color: var(--acc-dark) !important; }

/* Cart / wishlist / compare: compact accent buttons, not a welded slab */
.cart-icon-design {
    background: var(--acc) !important;
    border-radius: var(--r-sm);
    margin: .5rem 0 .5rem .45rem;
    overflow: hidden;
    transition: background .18s var(--ease);
}
.cart-icon-design:hover { background: var(--acc-dark) !important; }
.cart-icon-design .button { background: transparent !important; color: #fff !important; padding: .55rem .85rem; }
.cart-icon-design .amount,
.cart-icon-design .items { color: #fff !important; }
.cart-icon-design .amount { font-family: var(--heading-font); font-weight: 700; font-size: .92rem; }
.cart-icon-design .items { font-size: .72rem; opacity: .85; }

.cart-icon-design.widget--style {
    background: var(--acc-soft) !important;
    border: 1.5px solid hsl(var(--base) / .3);
}
.cart-icon-design.widget--style .button { color: var(--acc-dark) !important; }
.cart-icon-design.widget--style:hover { background: var(--acc) !important; }
.cart-icon-design.widget--style:hover .button { color: #fff !important; }

/* Category rail below the bar */
.left-site-category, .category-dropdown-menu {
    border: 1px solid hsl(var(--border));
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}
.vertical-megamenu .fluid-menu > .nav-link {
    padding: .72rem 1rem !important;
    font-size: .89rem;
    font-weight: 500;
    border-bottom: 1px solid hsl(var(--border) / .6);
    color: hsl(var(--heading)) !important;
}
.vertical-megamenu .fluid-menu:last-child > .nav-link { border-bottom: 0; }
.vertical-megamenu .fluid-menu > .nav-link:hover {
    background: var(--acc-soft);
    color: var(--acc-dark) !important;
}
.vertical-megamenu .fluid-menu > .nav-link::after { display: none; }

/* Dark mode versions of the above */
html[data-theme="dark"] .header-bottom { background: var(--surface-2) !important; }
html[data-theme="dark"] .menu-category-btn { background: hsl(var(--base) / .18) !important; color: #fff !important; }
html[data-theme="dark"] .left-site-category,
html[data-theme="dark"] .category-dropdown-menu { background: var(--surface-2); }

@media (max-width: 991px) {
    .menu-category-btn { margin: .4rem 0; }
    .cart-icon-design { margin: .4rem 0 .4rem .35rem; }
    .menu > li > a { padding: .65rem 0 !important; }
    .menu > li > a::after { display: none; }
}

/* ==========================================================================
   14. TOP STRIP & CATEGORY BUTTON — CONTRAST FIXES
   --------------------------------------------------------------------------
   Found by reading the live page rather than guessing. main.css sets

       .header-top-wrap .nav--links ul li a { color: hsl(var(--black) / .4); }

   which is specificity (0,3,3). The earlier override here was written as
   `.header-top a`, only (0,1,1), so it never applied and "Track Order" was
   rendering as 40%-black text on a near-black strip: effectively invisible.
   Every selector below deliberately matches or beats the original.
   ========================================================================== */

.header-top-wrap .nav--links ul li a,
.header-top-wrap .predefined-widgets .select-item,
.header-top-wrap .predefined-widgets,
.header-top-wrap .dropdown-toggle {
    color: hsl(0 0% 100% / .82) !important;
}

.header-top-wrap .nav--links ul li a:hover,
.header-top-wrap .dropdown-toggle:hover {
    color: #fff !important;
    text-decoration: underline;
}

.header-top-wrap .dropdown-menu { background: var(--surface); }
.header-top-wrap .dropdown-menu a { color: hsl(var(--heading)); }

/* The user-account pill in the top-right */
.header-top-wrap .user-account,
.header-top-wrap .login-btn {
    color: hsl(0 0% 100% / .9) !important;
    border-color: hsl(0 0% 100% / .25) !important;
}
.header-top-wrap .user-account:hover,
.header-top-wrap .login-btn:hover { color: #fff !important; border-color: hsl(0 0% 100% / .5) !important; }

/* ---------- "Categories" pill ----------
   main.css uses `.view-category .menu-category-btn` (0,2,0) and paints it
   white-on-base-800. The pale tint needs genuinely dark text, not the
   mid-tone accent, to stay readable. */
.view-category .menu-category-btn,
.menu-category-btn {
    /* font-size lives here too: main.css sets it on .view-category
       .menu-category-btn (0,2,0), which beat the single-class rule above. */
    font-size: .9rem;
    color: hsl(var(--base-h) 90% 22%) !important;
    font-weight: 700 !important;
    border-radius: var(--r-sm) !important;
    height: auto !important;
}
.view-category .menu-category-btn i,
.view-category .menu-category-btn span { color: inherit !important; }

.view-category .menu-category-btn:hover { color: #fff !important; }

html[data-theme="dark"] .view-category .menu-category-btn,
html[data-theme="dark"] .menu-category-btn { color: #fff !important; }

/* ---------- category rail: tighten the rhythm ---------- */
.vertical-megamenu .fluid-menu > .nav-link {
    padding: .62rem .95rem !important;
    font-weight: 500 !important;
}
.vertical-megamenu .menu-item-icon img,
.vertical-megamenu .menu-item-icon { width: 22px; height: 22px; object-fit: contain; }

/* ---------- search field ---------- */
.header-search-form .form--control::placeholder { color: hsl(var(--body-color) / .7); }

/* ---------- compare / wishlist labels in the middle bar ---------- */
.option-list .ecommerce__text { color: hsl(var(--body-color)); font-weight: 500; }
.option-list .ecommerce:hover .ecommerce__text { color: var(--acc-dark); }

/* ==========================================================================
   15. SPECIFICITY CORRECTIONS
   --------------------------------------------------------------------------
   Written after running a specificity audit of this file against main.css.
   Each rule below was previously losing silently: the declaration existed
   but a more specific main.css selector won, so the change never appeared.
   The selectors here match the winning ones exactly.
   ========================================================================== */

/* main.css: .header-middle .ecommerce__icon  (0,2,0) */
.header-middle .ecommerce__icon {
    width: 42px;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: hsl(var(--heading));
    transition: background .16s var(--ease), color .16s var(--ease);
}
.header-middle .ecommerce:hover .ecommerce__icon {
    background: var(--acc-soft);
    color: var(--acc-dark);
}
html[data-theme="dark"] .header-middle .ecommerce__icon {
    background: hsl(var(--border));
    color: hsl(var(--heading));
}

/* main.css: .option-list-wrapper .ecommerce__text  (0,2,0) */
.option-list-wrapper .ecommerce__text {
    font-size: .78rem;
    font-weight: 500;
    color: hsl(var(--body-color));
}
.option-list-wrapper .ecommerce:hover .ecommerce__text { color: var(--acc-dark); }

/* main.css: .header-search-form .form--control  uses !important */
.header-search-form .form--control {
    height: 48px !important;
    border: 1.5px solid hsl(var(--border)) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--body-font);
    background: var(--surface);
    color: hsl(var(--heading));
}
.header-search-form .form--control:focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 3.5px var(--acc-ring) !important;
}

/* main.css: .section-header .title  (0,2,0) */
.section-header .title,
.section-header .title h2 {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -.022em;
}

/* main.css: .product-card .product-content .title  (0,3,0) */
.product-card .product-content .title {
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.4;
}
.product-card .product-content .title a { color: hsl(var(--heading)); }
.product-card .product-content .title a:hover { color: var(--acc-dark); }

/* main.css: .category-card-wrapper .small-card-item  (0,2,0) */
.category-card-wrapper .small-card-item {
    border-radius: var(--r-md);
    border: 1px solid hsl(var(--border));
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.category-card-wrapper .small-card-item:hover {
    border-color: hsl(var(--base) / .4);
    box-shadow: var(--box-shadow);
    transform: translateY(-3px);
}

/* main.css: .offer-product .product-card .product-thumb  (0,3,0) */
.offer-product .product-card .product-thumb {
    border-radius: var(--r-sm);
    overflow: hidden;
}

/* ==========================================================================
   16. APP-STYLE MOBILE SHELL + MARKETPLACE CANVAS
   --------------------------------------------------------------------------
   Two ideas, both borrowed from how large Indian marketplaces present stock:

   1. The page is a tinted CANVAS, and content sits on white PANELS. The grey
      gap between panels does the separating, so panels need almost no border
      and no heavy shadow. This is what stops a product grid reading as rows
      of boxed rectangles.

   2. On mobile the chrome becomes app chrome: a fixed bottom tab bar, a
      compact sticky search header, and a horizontally scrolling category
      strip. Nothing is a shrunken desktop component.
   ========================================================================== */

:root {
    --canvas:    #F1F3F6;   /* page background behind the panels */
    --panel:     #FFFFFF;
    --tab-h:     58px;
}

html[data-theme="dark"] {
    --canvas: #0C1016;
    --panel:  #151B24;
}

body { background: var(--canvas) !important; }

/* Content panels ---------------------------------------------------------- */
section > .container > .row,
.product-section,
.category-section { position: relative; }

.product-card,
.category-card-wrapper .small-card-item,
.services-card,
.left-site-category,
.category-dropdown-menu {
    background: var(--panel) !important;
    border: 0 !important;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .category-card-wrapper .small-card-item,
html[data-theme="dark"] .services-card,
html[data-theme="dark"] .left-site-category,
html[data-theme="dark"] .category-dropdown-menu {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.product-card:hover {
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    transform: translateY(-2px);
}

/* The header and footer stay on white/ink, not the canvas */
.header-area, .header-middle, .header-bottom { background: var(--panel) !important; }
html[data-theme="dark"] .header-area,
html[data-theme="dark"] .header-middle,
html[data-theme="dark"] .header-bottom { background: var(--panel) !important; }

/* Compact marketplace product tile ---------------------------------------- */
.product-card .product-content { padding: .7rem .75rem .85rem; }
.product-card .product-content .title {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
}
.product-card .product-price { font-size: 1rem; font-weight: 700; }
.product-card .product-price del { font-size: .8rem; font-weight: 400; }

/* Discount shown as a green saving, the way shoppers scan for it */
.product-card .product-price .discount,
.product-card .off-percent {
    color: #1B8A5A;
    font-weight: 700;
    font-size: .8rem;
    margin-left: .35rem;
}

/* ==========================================================================
   17. MOBILE: APP CHROME
   ========================================================================== */
@media (max-width: 991.98px) {

    /* Room for the fixed tab bar, including the home indicator */
    body {
        padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Sticky compact header: logo + search only */
    .header-middle {
        position: sticky;
        top: 0;
        z-index: 1020;
        padding: .5rem 0 !important;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    }
    .header-middle .logo img { max-height: 34px; }
    .header-search-form .form--control { height: 42px !important; font-size: .9rem; }

    /* The desktop top strip and compare/wishlist labels are noise on a phone */
    .header-top { display: none !important; }
    .option-list-wrapper .ecommerce__text { display: none; }

    /* Category rail becomes a horizontal, snapping strip */
    .left-site-category .vertical-megamenu,
    .category-dropdown-menu .vertical-megamenu {
        display: flex !important;
        overflow-x: auto;
        gap: .45rem;
        padding: .6rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .left-site-category .vertical-megamenu::-webkit-scrollbar { display: none; }

    .vertical-megamenu .fluid-menu {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .vertical-megamenu .fluid-menu > .nav-link {
        flex-direction: column;
        gap: .3rem;
        width: 76px;
        padding: .5rem .25rem !important;
        border: 0 !important;
        border-radius: 8px;
        font-size: .7rem !important;
        text-align: center;
        line-height: 1.25;
        white-space: normal;
    }
    .vertical-megamenu .menu-item-arrowicon { display: none !important; }

    /* Two tiles per row, tight gutters */
    .product-section .col-6,
    .product-wrapper .col-6 { padding-left: 6px; padding-right: 6px; }
    .product-card .product-content { padding: .55rem .6rem .7rem; }
    .product-card .product-content .title { font-size: .8rem; }
    .product-card .product-price { font-size: .92rem; }

    section { padding: .85rem 0 !important; }
    .banner-section { padding-top: .5rem !important; }

    /* Full-width tap targets for primary actions */
    .product-add-to-cart .btn { padding: .7rem 1rem; font-size: .85rem; }

    .scrollToTop { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 14px) !important; }

    /* Sidebars should not sit under the tab bar */
    .site-sidebar { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   18. BOTTOM TAB BAR
   ========================================================================== */
.app-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--panel);
    border-top: 1px solid hsl(var(--border));
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .08);
}

html[data-theme="dark"] .app-tabbar {
    background: var(--panel);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .5);
}

.app-tabbar__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    padding: 0;
    color: hsl(var(--body-color));
    font-family: var(--heading-font);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .005em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s var(--ease);
}

.app-tabbar__item i { font-size: 1.32rem; line-height: 1; }
.app-tabbar__item span { line-height: 1.1; }

.app-tabbar__item:active { background: hsl(var(--base) / .07); }

.app-tabbar__item.is-active {
    color: var(--acc);
    position: relative;
}
.app-tabbar__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--acc);
}

.app-tabbar__icon-wrap { position: relative; display: inline-flex; }

.app-tabbar__badge {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #C23B32;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* The theme hides a zero count by adding d-none to .cartItemCount */
.app-tabbar__badge.d-none { display: none !important; }

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

/* ==========================================================================
   19. AJONTEC HEADER — one bar instead of three
   --------------------------------------------------------------------------
   Styles the new header_ajontec partial. The three stacked bars of the base
   template are gone; this is a single sticky bar plus a scrolling category
   strip, so the selectors here are all new and nothing in main.css competes.
   ========================================================================== */

.aj-header { position: sticky; top: 0; z-index: 1020; }

.aj-header__bar {
    background: var(--panel);
    border-bottom: 1px solid hsl(var(--border));
}

.aj-header__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
    padding: .55rem 0;
}

.aj-header__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.aj-header__logo img { max-height: 42px; width: auto; }

/* Search takes the space the three-bar layout used to waste */
.aj-header__search { flex: 1 1 auto; min-width: 0; }

.aj-header__search .header-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--canvas);
    border: 1.5px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}
.aj-header__search .header-search-form:focus-within {
    background: var(--panel);
    border-color: var(--acc);
    box-shadow: 0 0 0 3.5px var(--acc-ring);
}
.aj-header__search .header-form-group { flex: 1 1 auto; min-width: 0; display: flex; }
.aj-header__search .form--control {
    width: 100%;
    height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 .95rem;
    font-size: .92rem;
    color: hsl(var(--heading));
}
.aj-header__search .form--control:focus { box-shadow: none !important; }
.aj-header__search .icon {
    flex: 0 0 auto;
    width: 52px;
    border: 0;
    background: var(--acc);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background .16s var(--ease);
}
.aj-header__search .icon:hover { background: var(--acc-dark); }
.aj-header__search .search-close-btn { display: none; }

/* Actions ---------------------------------------------------------------- */
.aj-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: .25rem; }

.aj-act {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .7rem;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: hsl(var(--heading));
    font-family: var(--heading-font);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.aj-act:hover { background: var(--acc-soft); color: var(--acc-dark); }
.aj-act[disabled] { opacity: .55; cursor: default; }

.aj-act__icon { position: relative; display: inline-flex; font-size: 1.3rem; line-height: 1; }
.aj-act__label { white-space: nowrap; }
.aj-act__amount { font-variant-numeric: tabular-nums; }

.aj-act__badge {
    position: absolute;
    top: -6px; right: -8px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #C23B32;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.aj-act__badge.d-none { display: none !important; }

.aj-act--cart { background: var(--acc); color: #fff; padding: .5rem .9rem; }
.aj-act--cart:hover { background: var(--acc-dark); color: #fff; }

.aj-header__auth, .aj-header__lang, .aj-header__act { align-items: center; }
.aj-header__auth .user-account,
.aj-header__auth .login-btn { color: hsl(var(--heading)); border-color: hsl(var(--border)); }

/* Category / link strip --------------------------------------------------- */
.aj-header__strip {
    background: var(--panel);
    border-bottom: 1px solid hsl(var(--border));
}
.aj-strip { display: flex; align-items: center; gap: 1.25rem; }

.aj-strip__links .menu { display: flex; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.aj-strip__links .menu > li > a {
    padding: .7rem .7rem !important;
    font-size: .88rem;
    font-weight: 600;
    color: hsl(var(--heading)) !important;
}

/* The category list becomes a horizontal, snapping strip on every width */
.aj-strip__cats { flex: 1 1 auto; min-width: 0; }
.aj-strip__cats .left-site-category,
.aj-strip__cats .category-dropdown-menu {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0;
}
.aj-strip__cats .vertical-megamenu {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .25rem;
    margin: 0;
    padding: .25rem 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.aj-strip__cats .vertical-megamenu::-webkit-scrollbar { display: none; }
.aj-strip__cats .fluid-menu { flex: 0 0 auto; scroll-snap-align: start; }
.aj-strip__cats .fluid-menu > .nav-link {
    display: flex !important;
    align-items: center;
    gap: .45rem;
    padding: .55rem .75rem !important;
    border: 0 !important;
    border-radius: 8px;
    font-size: .85rem !important;
    font-weight: 500 !important;
    white-space: nowrap;
    color: hsl(var(--heading)) !important;
}
.aj-strip__cats .fluid-menu > .nav-link:hover { background: var(--acc-soft); color: var(--acc-dark) !important; }
.aj-strip__cats .menu-item-arrowicon { display: none !important; }
.aj-strip__cats .menu-item-icon img,
.aj-strip__cats .menu-item-icon { width: 20px; height: 20px; object-fit: contain; }
.aj-strip__cats .sub-menu, .aj-strip__cats .mega-menu-wrapper { display: none !important; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .aj-header__row { min-height: 54px; gap: .5rem; padding: .4rem 0; }
    .aj-header__logo img { max-height: 32px; }

    /* Search drops to its own line so the logo row stays tight */
    .aj-header__search {
        order: 10;
        flex: 1 0 100%;
        padding-bottom: .4rem;
    }
    .aj-header__row { flex-wrap: wrap; }
    .aj-header__search .form--control { height: 40px !important; font-size: .88rem; }
    .aj-header__search .icon { width: 46px; }

    .aj-header__actions { margin-left: auto; gap: .1rem; }
    .aj-act { padding: .45rem .5rem; }
    .aj-act__label { display: none; }
    .aj-act--cart { padding: .45rem .6rem; }
    .header-search-btn { display: none !important; }

    .aj-strip__cats .fluid-menu > .nav-link { font-size: .8rem !important; padding: .45rem .6rem !important; }
}

/* The old bars must never reappear if a cached view lingers */
.aj-header .header-top,
.aj-header .header-middle,
.aj-header .header-bottom { display: none !important; }

/* ==========================================================================
   20. HEADER FIXES FOUND IN THE LIVE SCREENSHOT
   ========================================================================== */

/* ---- Theme toggle was invisible -----------------------------------------
   It was styled for the old dark utility strip: white icon, white border,
   translucent white fill. In the new header it sits on a WHITE bar, so it
   rendered as a white icon on white. It now inherits the bar's own colours. */
.aj-header .theme-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--heading));
}
.aj-header .theme-toggle:hover {
    background: var(--acc-soft);
    border-color: var(--acc);
    color: var(--acc-dark);
}
html[data-theme="dark"] .aj-header .theme-toggle { color: hsl(var(--heading)); }

/* ---- Category strip was trapped in a 280px dropdown box -----------------
   main.css: .left-site-category { width: 280px }  and
             .category-dropdown  { border; border-radius; width: inherit }
   Those turn the list into a fixed-width dropdown panel, which is why the
   strip rendered as a small white box with "Power B..." cut off. */
.aj-strip__cats .left-site-category {
    width: auto !important;
    background: transparent !important;
    border-radius: 0;
    position: static;
    z-index: auto;
}
.aj-strip__cats .category-dropdown {
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    background: transparent;
}

/* main.css uses !important on the item padding, so this must match it */
.aj-strip__cats .vertical-megamenu > li > .menu-item {
    display: flex !important;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    padding: .55rem .75rem !important;
    font-size: .85rem !important;
}

/* Fade the right edge so it reads as "scrolls further" */
.aj-strip__cats { position: relative; }
.aj-strip__cats::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--panel));
}

/* Links and categories share one line; links must not be squeezed out */
.aj-strip { gap: 1rem; }
.aj-strip__links { flex: 0 0 auto; }
.aj-strip__links .menu { flex-wrap: nowrap; }

@media (max-width: 991.98px) {
    .aj-strip__cats::after { width: 24px; }
    .aj-header .theme-toggle { width: 36px; height: 36px; }
}

/* ==========================================================================
   21. MARKETPLACE HEADER — dark bar, scoped search, utility cluster
   --------------------------------------------------------------------------
   The pattern large marketplaces use: a dark bar carrying logo, a wide search
   with a category scope on its left, and a tight cluster of account / cart on
   the right; then a slimmer dark strip for categories.

   The palette is AjonTec's own - the ink neutral plus the admin accent - not
   another retailer's colours.
   ========================================================================== */

:root {
    --hdr-bg:    #151C2C;   /* primary bar */
    --hdr-bg-2:  #1E2639;   /* category strip */
    --hdr-fg:    #FFFFFF;
    --hdr-muted: rgba(255, 255, 255, .72);
    --hdr-line:  rgba(255, 255, 255, .13);
}

html[data-theme="dark"] {
    --hdr-bg:   #0B0F18;
    --hdr-bg-2: #141A26;
}

.aj-header__bar  { background: var(--hdr-bg) !important; border-bottom: 0; }
.aj-header__strip{ background: var(--hdr-bg-2) !important; border-bottom: 0; }

.aj-header__row { min-height: 60px; gap: .75rem; }
.aj-header__logo img { max-height: 40px; filter: brightness(1.06); }

/* Search: scope | input | button, as one unit ----------------------------- */
.aj-header__search .header-search-form {
    background: #fff;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}
.aj-header__search .header-search-form:focus-within {
    box-shadow: 0 0 0 3px hsl(var(--base) / .55);
}

.aj-search__scope {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0;
    background: #E9ECF2;
    border-right: 1px solid #D7DCE5;
    border-radius: 6px 0 0 6px;
}
.aj-search__scope-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0 1.9rem 0 .85rem;
    height: 44px;
    max-width: 170px;
    font-family: var(--body-font);
    font-size: .82rem;
    font-weight: 600;
    color: #3A4256;
    cursor: pointer;
    outline: none;
}
.aj-search__scope i {
    position: absolute;
    right: .7rem;
    font-size: .8rem;
    color: #5B6273;
    pointer-events: none;
}

.aj-header__search .icon {
    width: 58px;
    background: var(--acc);
    border-radius: 0 6px 6px 0;
    color: #fff;
    font-size: 1.2rem;
}
.aj-header__search .icon:hover { background: var(--acc-dark); }

/* Utility cluster: two-line labels, the way marketplaces stack them -------- */
.aj-header__actions { gap: .15rem; }

.aj-header .aj-act {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .35rem .6rem;
    border-radius: 4px;
    color: var(--hdr-fg);
    line-height: 1.25;
    border: 1px solid transparent;
}
.aj-header .aj-act:hover {
    background: transparent;
    border-color: var(--hdr-line);
    color: var(--hdr-fg);
}
.aj-header .aj-act__icon { font-size: 1.25rem; color: var(--hdr-fg); }
.aj-header .aj-act__label { font-size: .8rem; font-weight: 700; }

.aj-header .aj-act--cart {
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    background: transparent;
    padding: .4rem .7rem;
}
.aj-header .aj-act--cart:hover { background: transparent; border-color: var(--hdr-line); }
.aj-header .aj-act__amount { font-size: .88rem; font-weight: 700; }

.aj-header .aj-act__badge { background: var(--acc); }

.aj-header__auth,
.aj-header__auth a,
.aj-header__auth .user-account,
.aj-header__auth .login-btn,
.aj-header__lang,
.aj-header__lang a,
.aj-header__lang .dropdown-toggle {
    color: var(--hdr-fg) !important;
    border-color: var(--hdr-line) !important;
}

.aj-header .theme-toggle {
    border-color: var(--hdr-line);
    color: var(--hdr-fg);
    background: transparent;
}
.aj-header .theme-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }

.primary-menu-button span { background: var(--hdr-fg); }

/* Category strip on the dark bar ------------------------------------------ */
.aj-strip__links .menu > li > a { color: var(--hdr-fg) !important; font-size: .85rem; }
.aj-strip__links .menu > li > a:hover { color: var(--hdr-fg) !important; }
.aj-strip__links .menu > li > a::after { background: var(--acc); }

.aj-strip__cats .fluid-menu > .nav-link,
.aj-strip__cats .vertical-megamenu > li > .menu-item {
    color: var(--hdr-muted) !important;
    border-radius: 4px;
}
.aj-strip__cats .fluid-menu > .nav-link:hover,
.aj-strip__cats .vertical-megamenu > li > .menu-item:hover {
    background: rgba(255,255,255,.1) !important;
    color: var(--hdr-fg) !important;
}
.aj-strip__cats .menu-item-icon img { filter: brightness(1.9) saturate(.2); }
.aj-strip__cats::after { background: linear-gradient(to right, transparent, var(--hdr-bg-2)); }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .aj-header__row { min-height: 50px; }
    .aj-header__logo img { max-height: 30px; }

    /* Scope selector costs too much width on a phone */
    .aj-search__scope { display: none; }
    .aj-header__search .header-search-form { border-radius: 6px; }
    .aj-header__search .form--control { border-radius: 6px 0 0 6px; }
    .aj-header__search .icon { width: 46px; }

    .aj-header .aj-act { padding: .4rem .45rem; }
    .aj-header .aj-act__label { display: none; }
    .aj-header .aj-act--cart .aj-act__label { display: inline; font-size: .78rem; }
}

/* ==========================================================================
   22. LOGO ON DARK, "ALL" PANEL, STRIP CLEANUP
   --------------------------------------------------------------------------
   Fixes found in the live screenshot:
     * the uploaded logo is dark artwork, so it disappeared on the dark bar
     * menu links and every category shared one line, truncating the last one
   ========================================================================== */

/* ---- Logo stays legible whatever artwork is uploaded --------------------
   Rather than demanding a white logo file, the mark sits on a light chip.
   This works for any logo the owner uploads, now or later. */
.aj-header__logo {
    background: #fff;
    border-radius: 6px;
    padding: .3rem .6rem;
    line-height: 0;
}
.aj-header__logo img { max-height: 34px; filter: none; }

/* ---- "All" button ------------------------------------------------------- */
.aj-allbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--hdr-fg);
    font-family: var(--heading-font);
    font-size: .87rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.aj-allbtn:hover,
.aj-allbtn.is-open { border-color: var(--hdr-line); background: rgba(255,255,255,.08); }

.aj-allbtn__bars { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
.aj-allbtn__bars span { display: block; height: 2px; background: var(--hdr-fg); border-radius: 2px; }

/* ---- Strip: links get the room now ------------------------------------- */
.aj-strip { gap: .4rem; align-items: center; }
.aj-strip__links { flex: 1 1 auto; min-width: 0; }
.aj-strip__links .menu { overflow: hidden; }

@media (max-width: 991.98px) {
    .aj-header__logo { padding: .25rem .45rem; }
    .aj-header__logo img { max-height: 26px; }
    .aj-allbtn { padding: .45rem .6rem; font-size: .82rem; }
    .aj-allbtn span:not(.aj-allbtn__bars) { display: none; }
    .aj-strip__cats { flex: 1 1 auto; }
    .aj-catpanel { display: none !important; }
}

/* ==========================================================================
   23. PAGE SYSTEM — every storefront page, one consistent language
   --------------------------------------------------------------------------
   Selectors below were taken from the rendered pages, not guessed. They cover
   the shells every page shares: breadcrumb, filter rail, product grid, cart,
   the customer account area, forms, tables and empty states.
   ========================================================================== */

/* ---- Breadcrumb / page head -------------------------------------------- */
.breadcrumb-area, .inner-hero {
    background: var(--panel);
    border-bottom: 1px solid hsl(var(--border));
    padding: 1.1rem 0;
    margin-bottom: 1.1rem;
}
.breadcrumb { margin: 0; gap: .35rem; font-size: .84rem; }
.breadcrumb-item, .breadcrumb-item a { color: hsl(var(--body-color)); }
.breadcrumb-item a:hover { color: var(--acc-dark); }
.breadcrumb-item.active { color: hsl(var(--heading)); font-weight: 600; }

/* ---- Listing: filter rail + grid ---------------------------------------- */
.product-shop { padding: 0 0 2rem; }

.category-sidebar {
    background: var(--panel);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    padding: .25rem;
}
html[data-theme="dark"] .category-sidebar { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

.product-filter__card { border: 0 !important; border-bottom: 1px solid hsl(var(--border)) !important; border-radius: 0 !important; background: transparent !important; }
.product-filter__card:last-child { border-bottom: 0 !important; }

.filter-category-header {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
    padding: .85rem .9rem .5rem;
}

.filter-category li a, .brand-filter li label, .filter-in label {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .9rem;
    font-size: .87rem;
    color: hsl(var(--heading));
    border-radius: 6px;
}
.filter-category li a:hover, .filter-in label:hover { background: var(--acc-soft); color: var(--acc-dark); }

.filter-select-item, .filter-select-right select {
    height: 40px;
    border: 1.5px solid hsl(var(--border));
    border-radius: 6px;
    font-size: .86rem;
    background: var(--panel);
    color: hsl(var(--heading));
}

.products-container { display: grid; gap: .75rem; }

/* ---- Cart --------------------------------------------------------------- */
.cart-container { padding-bottom: 2rem; }

.cart-step { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cart-step-box {
    flex: 1 1 0;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    background: var(--panel);
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
}
.cart-step-box.active, .cart-step-box.completed {
    border-color: var(--acc);
    background: var(--acc-soft);
}
.cart-step-icon {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: hsl(var(--border));
    color: hsl(var(--heading));
    font-size: .85rem; font-weight: 700;
    flex-shrink: 0;
}
.cart-step-box.active .cart-step-icon,
.cart-step-box.completed .cart-step-icon { background: var(--acc); color: #fff; }
.cart-step-title { font-family: var(--heading-font); font-size: .82rem; font-weight: 600; line-height: 1.25; }

.empty-cart__page, .no_data {
    background: var(--panel);
    border-radius: 10px;
    padding: 2.5rem 1.25rem;
    text-align: center;
}
.no_data-thumb img, .empty-cart__page img { max-width: 170px; opacity: .85; }
.no_data p, .empty-cart__page p { color: hsl(var(--body-color)); margin-top: .9rem; }

/* ---- Customer account area ---------------------------------------------- */
.user-profile-section { background: var(--canvas); padding: 1.5rem 0 2.5rem !important; }

.dashboard-wrapper { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; align-items: start; }

.dashboard-menu {
    background: var(--panel);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    overflow: hidden;
    padding: .4rem;
    position: sticky;
    top: 86px;
}
html[data-theme="dark"] .dashboard-menu { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* user-dashboard.css targets these as `.dashboard-menu ul li a` (0,1,3).
   Matching that specificity exactly is required - a shorter selector here
   loads later but still loses, which is why an earlier attempt at this had
   no visible effect. */
.dashboard-menu ul { list-style: none; margin: 0; padding: 0; }
.dashboard-menu ul li { border: 0; margin: 0; }
.dashboard-menu ul li a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .62rem .75rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-family: var(--heading-font);
    font-size: .88rem;
    font-weight: 500;
    color: hsl(var(--heading));
}
.dashboard-menu ul li a:hover { background: var(--acc-soft); color: var(--acc-dark); }
.dashboard-menu ul li a.active,
.dashboard-menu ul li.active > a {
    background: var(--acc);
    color: #fff;
    font-weight: 600;
}
.dashboard-menu ul li a i { font-size: 1.05rem; width: 20px; text-align: center; color: inherit; }

.dashboard-content {
    background: var(--panel);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    padding: 1.1rem 1.25rem 1.4rem;
    min-width: 0;
}
html[data-theme="dark"] .dashboard-content { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

.dashboard-content .breadcrumb {
    padding: 0 0 .8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--border));
}
.dashboard-content .breadcrumb h6 {
    font-family: var(--heading-font);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

/* ---- Tables ------------------------------------------------------------- */
.table { margin: 0; }
.table thead th {
    background: var(--canvas);
    border-bottom: 1px solid hsl(var(--border)) !important;
    font-family: var(--heading-font);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(var(--body-color));
    padding: .7rem .8rem;
    white-space: nowrap;
}
.table tbody td {
    border-bottom: 1px solid hsl(var(--border)) !important;
    padding: .8rem;
    font-size: .88rem;
    color: hsl(var(--heading));
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0 !important; }

/* Tables become stacked rows on a phone - no sideways scrolling */
@media (max-width: 767.98px) {
    .table.table--responsive, .table-responsive--md .table { border: 0; }
    .table--responsive thead, .table-responsive--md thead { display: none; }
    .table--responsive tr, .table-responsive--md tr {
        display: block;
        background: var(--panel);
        border: 1px solid hsl(var(--border));
        border-radius: 8px;
        margin-bottom: .6rem;
        padding: .3rem .2rem;
    }
    .table--responsive td, .table-responsive--md td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: 0 !important;
        padding: .45rem .8rem;
        text-align: right;
    }
    .table--responsive td::before, .table-responsive--md td::before {
        content: attr(data-label);
        font-family: var(--heading-font);
        font-size: .76rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: hsl(var(--body-color));
        text-align: left;
    }
}

/* ---- Forms -------------------------------------------------------------- */
.form--label { font-family: var(--heading-font); font-weight: 600; font-size: .84rem; color: hsl(var(--heading)); margin-bottom: .35rem; }
.form-group { margin-bottom: 1rem; }

/* ---- Modals & auth panes ------------------------------------------------ */
.modal-content { border: 0; border-radius: 12px; box-shadow: 0 24px 60px rgba(16,24,40,.22); background: var(--panel); }
.modal-close-btn, .close {
    width: 34px; height: 34px;
    border-radius: 7px;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--heading));
    opacity: 1;
}
.modal-close-btn:hover, .close:hover { background: var(--acc-soft); border-color: var(--acc); opacity: 1; }
.auth-methods__label { font-family: var(--heading-font); font-weight: 600; font-size: .85rem; }
.auth-method { border-radius: 8px; }

/* ---- Single product row (sidebars, compare, wishlist) ------------------- */
.single-product-item {
    display: flex;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid hsl(var(--border));
}
.single-product-item:last-child { border-bottom: 0; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .dashboard-wrapper { grid-template-columns: 1fr; }
    .dashboard-menu { position: static; }
    .dashboard-menu ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: .15rem; }
    .dashboard-menu ul li a { padding: .55rem .6rem; font-size: .84rem; }
    .dashboard-content { padding: .9rem 1rem 1.2rem; }

    .category-sidebar { margin-bottom: 1rem; }
    .cart-step-box { min-width: 0; flex: 1 1 46%; }
    .breadcrumb-area, .inner-hero { padding: .85rem 0; margin-bottom: .8rem; }
}

@media (max-width: 575px) {
    .dashboard-menu ul { grid-template-columns: 1fr; }
    .dashboard-content .breadcrumb h6 { font-size: 1rem; }
    .cart-step-title { font-size: .76rem; }
    .cart-step-icon { width: 26px; height: 26px; font-size: .78rem; }
    .no_data, .empty-cart__page { padding: 1.8rem 1rem; }
}

/* ==========================================================================
   24. LISTING TOOLBAR — fixed after seeing it render
   --------------------------------------------------------------------------
   Rendering the page showed "Total 1 product found" sitting on top of
   "Sort By :". The row has a flex-shrink-0 count on the left and a
   flex-grow-1 control group on the right with no wrapping and no gap, so the
   two collide as soon as the viewport is anything but wide.
   ========================================================================== */

.filter-select-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem .75rem !important;
}
.filter-select-right > .d-flex { flex-wrap: wrap; gap: .5rem .75rem; }

.filter-select-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}
.filter-select-item p { font-size: .84rem; color: hsl(var(--body-color)); }

.filter-select-item .form--select,
.filter-select-right .form--control {
    height: 38px;
    min-width: 128px;
    padding: 0 2rem 0 .7rem;
    font-size: .85rem;
    border: 1.5px solid hsl(var(--border));
    border-radius: 6px;
    background: var(--panel);
    color: hsl(var(--heading));
}

/* The row that holds the count and the controls */
.product-shop .d-flex:has(> .filter-select-right) {
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: center;
}

/* Count chip reads as a label, not as body text colliding with controls */
.totalProducts { color: hsl(var(--heading)); font-weight: 700; }

.filter-in {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    padding: 0 .85rem;
    border: 1.5px solid hsl(var(--border));
    border-radius: 6px;
    background: var(--panel);
    color: hsl(var(--heading));
    font-family: var(--heading-font);
    font-size: .85rem;
    font-weight: 600;
}
.filter-in:hover { border-color: var(--acc); color: var(--acc-dark); }

@media (max-width: 575px) {
    .filter-select-right { justify-content: flex-start; width: 100%; }
    .filter-select-item .form--select { min-width: 110px; }
}

/* ==========================================================================
   25. MOBILE CATEGORY STRIP — overlap fix
   --------------------------------------------------------------------------
   Seen in a 390px render: the strip items were printing on top of each other.
   Two rules in this file disagreed. Section 17 made each item a 76px column
   with wrapping text; sections 19-21 then set display:flex with
   white-space:nowrap at a higher specificity, so the labels stayed on one
   line inside a 76px box and spilled across their neighbours.

   This settles it: on mobile the strip item is a fixed-width column whose
   label wraps and is clamped to two lines.
   ========================================================================== */

@media (max-width: 991.98px) {
    .aj-strip__cats .vertical-megamenu {
        align-items: flex-start;
        gap: .35rem;
        padding: .5rem .25rem;
    }

    .aj-strip__cats .fluid-menu { width: 78px; }

    .aj-strip__cats .fluid-menu > .nav-link,
    .aj-strip__cats .vertical-megamenu > li > .menu-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: flex-start;
        gap: .3rem;
        width: 78px;
        padding: .45rem .2rem !important;
        white-space: normal !important;
        overflow: hidden;
        text-align: center;
        font-size: .68rem !important;
        line-height: 1.2;
        border-radius: 8px;
    }

    /* Two lines maximum, then ellipsis - keeps every tile the same height */
    .aj-strip__cats .fluid-menu > .nav-link {
        height: 62px;
    }

    .aj-strip__cats .menu-item-icon {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
    }
    .aj-strip__cats .menu-item-icon img { width: 22px; height: 22px; object-fit: contain; }

    .aj-strip__cats .menu-item-arrowicon { display: none !important; }
}

/* Hide a zero cart badge in the tab bar even if the theme forgets to */
.app-tabbar__badge:empty { display: none; }

/* ==========================================================================
   26. REWRITTEN HOMEPAGE SECTIONS
   --------------------------------------------------------------------------
   These selectors belong to markup rewritten in this release, so nothing in
   main.css competes with them. Previous rounds only restyled the original
   HTML, which is why the page kept its old shape.
   ========================================================================== */

/* ---- Section frame ------------------------------------------------------ */
.aj-section { padding: 1.4rem 0; }

.aj-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
.aj-section__title {
    font-family: var(--heading-font);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: hsl(var(--heading));
    margin: 0;
}
.aj-section__more {
    font-family: var(--heading-font);
    font-size: .84rem;
    font-weight: 600;
    color: var(--acc);
    white-space: nowrap;
}
.aj-section__more:hover { color: var(--acc-dark); text-decoration: underline; }

/* ---- Scroll rail -------------------------------------------------------- */
.aj-rail-wrap {
    position: relative;
    background: var(--panel);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    padding: .5rem .35rem;
}
html[data-theme="dark"] .aj-rail-wrap { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

.aj-rail {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.aj-rail::-webkit-scrollbar { display: none; }

.aj-rail__item {
    flex: 0 0 auto;
    width: 104px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .6rem .3rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s var(--ease);
}
.aj-rail__item:hover { background: var(--acc-soft); }

.aj-rail__thumb {
    width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--canvas);
    overflow: hidden;
}
.aj-rail__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 14%; }

.aj-rail--round .aj-rail__item { width: 112px; }
.aj-rail--round .aj-rail__thumb { width: 76px; height: 76px; border-radius: 50%; }

.aj-rail__label {
    font-family: var(--heading-font);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: hsl(var(--heading));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aj-rail__item:hover .aj-rail__label { color: var(--acc-dark); }

/* ---- Brand strip -------------------------------------------------------- */
.aj-rail--brand { gap: .4rem; }
.aj-brand {
    flex: 0 0 auto;
    width: 132px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .75rem .5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s var(--ease);
}
.aj-brand:hover { background: var(--acc-soft); }
.aj-brand img { max-width: 100%; max-height: 38px; object-fit: contain; }
.aj-brand span {
    font-family: var(--heading-font);
    font-size: .76rem;
    font-weight: 600;
    color: hsl(var(--body-color));
    text-align: center;
}

/* ---- Trust strip -------------------------------------------------------- */
.aj-trust { padding: 1rem 0; }
.aj-trust__row {
    display: flex;
    align-items: stretch;
    background: var(--panel);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    overflow: hidden;
}
html[data-theme="dark"] .aj-trust__row { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

.aj-trust__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1rem;
    border-right: 1px solid hsl(var(--border));
    min-width: 0;
}
.aj-trust__item:last-child { border-right: 0; }

.aj-trust__icon { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.aj-trust__icon img { max-width: 100%; max-height: 100%; object-fit: contain; }

.aj-trust__text { display: flex; flex-direction: column; min-width: 0; }
.aj-trust__text strong {
    font-family: var(--heading-font);
    font-size: .85rem;
    font-weight: 700;
    color: hsl(var(--heading));
    line-height: 1.25;
}
.aj-trust__text small { font-size: .74rem; color: hsl(var(--body-color)); line-height: 1.3; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .aj-section { padding: .9rem 0; }
    .aj-trust__row { flex-wrap: wrap; }
    .aj-trust__item { flex: 1 1 50%; border-bottom: 1px solid hsl(var(--border)); }
    .aj-trust__item:nth-child(2n) { border-right: 0; }
}

@media (max-width: 575px) {
    .aj-rail__item { width: 86px; }
    .aj-rail__thumb { width: 54px; height: 54px; }
    .aj-rail--round .aj-rail__item { width: 90px; }
    .aj-rail--round .aj-rail__thumb { width: 60px; height: 60px; }
    .aj-rail__label { font-size: .68rem; }
    .aj-brand { width: 108px; }
    .aj-trust__item { flex: 1 1 100%; border-right: 0; padding: .7rem .85rem; }
    .aj-trust__item:last-child { border-bottom: 0; }
}

/* ==========================================================================
   27. CATEGORY DRAWER — slides in from the left
   ========================================================================== */

.aj-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(12, 16, 22, .5);
    backdrop-filter: blur(2px);
    animation: ajFade .18s var(--ease);
}
.aj-drawer-backdrop[hidden] { display: none; }

@keyframes ajFade { from { opacity: 0 } to { opacity: 1 } }

.aj-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: min(340px, 86vw);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    box-shadow: 8px 0 40px rgba(12, 16, 22, .28);
    animation: ajSlideIn .22s var(--ease);
}
.aj-drawer[hidden] { display: none; }

@keyframes ajSlideIn { from { transform: translateX(-100%) } to { transform: none } }

.aj-drawer__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--hdr-bg);
    color: #fff;
}
.aj-drawer__title { font-family: var(--heading-font); font-weight: 700; font-size: .98rem; }
.aj-drawer__close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.aj-drawer__close:hover { background: rgba(255,255,255,.15); }

.aj-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: .5rem; }

/* The category list fills the drawer as a simple vertical menu */
.aj-drawer .left-site-category,
.aj-drawer .category-dropdown {
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}
.aj-drawer .vertical-megamenu {
    display: block !important;
    overflow: visible;
    margin: 0;
    padding: 0;
}
.aj-drawer .fluid-menu { width: auto; }
.aj-drawer .vertical-megamenu > li > .menu-item,
.aj-drawer .fluid-menu > .nav-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: .7rem;
    width: auto;
    height: auto;
    padding: .72rem .8rem !important;
    border-radius: 8px;
    font-size: .9rem !important;
    font-weight: 500 !important;
    text-align: left;
    white-space: normal !important;
    color: hsl(var(--heading)) !important;
}
.aj-drawer .vertical-megamenu > li > .menu-item:hover,
.aj-drawer .fluid-menu > .nav-link:hover {
    background: var(--acc-soft);
    color: var(--acc-dark) !important;
}
.aj-drawer .menu-item-icon,
.aj-drawer .menu-item-icon img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.aj-drawer .menu-item-arrowicon { margin-left: auto; opacity: .45; display: inline !important; }
.aj-drawer .sub-menu, .aj-drawer .mega-menu-wrapper { display: none !important; }

.aj-drawer__foot {
    flex: 0 0 auto;
    padding: .75rem 1.1rem;
    border-top: 1px solid hsl(var(--border));
}
.aj-drawer__all {
    display: block;
    text-align: center;
    padding: .62rem 1rem;
    border-radius: 7px;
    background: var(--acc);
    color: #fff;
    font-family: var(--heading-font);
    font-size: .87rem;
    font-weight: 600;
}
.aj-drawer__all:hover { background: var(--acc-dark); color: #fff; }

body.aj-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .aj-drawer, .aj-drawer-backdrop { animation: none; }
}

/* ==========================================================================
   28. FOOTER — rewritten markup, one grid
   ========================================================================== */

.aj-footer {
    background: var(--hdr-bg);
    color: rgba(255, 255, 255, .72);
    margin-top: 2rem;
}

/* Newsletter band sits above the grid, where it gets noticed */
.aj-footer__news {
    background: var(--hdr-bg-2);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 1.1rem 0;
}
.aj-footer__news .newsletter-widget,
.aj-footer__news .newsletter-widget-header { text-align: left; }
.aj-footer__news .title { color: #fff; font-size: .98rem; margin-bottom: .2rem; }
.aj-footer__news p { color: rgba(255, 255, 255, .6); font-size: .84rem; margin: 0; }
.aj-footer__news .subscribe-form { display: flex; gap: .5rem; max-width: 460px; }
.aj-footer__news .subscribe-form input {
    flex: 1 1 auto;
    height: 44px;
    padding: 0 .9rem;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07);
    color: #fff;
}
.aj-footer__news .subscribe-form input::placeholder { color: rgba(255, 255, 255, .4); }
.aj-footer__news .subscribe-btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 7px;
    background: var(--acc);
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .87rem;
}
.aj-footer__news .subscribe-btn:hover { background: var(--acc-dark); }

/* The grid: brand, link columns, contact */
.aj-footer__grid {
    display: grid;
    grid-template-columns: minmax(230px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.6rem 2rem;
    padding: 2rem 0 1.6rem;
}

.aj-footer__logo { max-height: 42px; width: auto; margin-bottom: .8rem; }
.aj-footer__note { color: rgba(255, 255, 255, .62); font-size: .86rem; line-height: 1.65; margin: 0 0 1rem; max-width: 42ch; }

.aj-footer__social { display: flex; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.aj-footer__social a {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.aj-footer__social a:hover { background: var(--acc); color: #fff; }
.aj-footer__social svg { width: 16px; height: 16px; fill: currentColor; }

.aj-footer__h {
    font-family: var(--heading-font);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 .85rem;
}

.aj-footer__col ul { list-style: none; margin: 0; padding: 0; }
.aj-footer__col li { margin-bottom: .45rem; }
.aj-footer__col a {
    color: rgba(255, 255, 255, .64);
    font-size: .87rem;
    transition: color .15s var(--ease), padding-left .15s var(--ease);
}
.aj-footer__col a:hover { color: #fff; padding-left: 3px; }

.aj-footer__contact li {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .86rem;
    color: rgba(255, 255, 255, .64);
    line-height: 1.5;
}
.aj-footer__contact i { flex: 0 0 auto; margin-top: .15rem; color: var(--acc); font-size: 1rem; }

/* Bottom bar */
.aj-footer__bar {
    background: rgba(0, 0, 0, .25);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.aj-footer__bar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 0;
}
.aj-footer__bar-in p { margin: 0; font-size: .82rem; color: rgba(255, 255, 255, .58); }
.aj-footer__bar-in a { color: rgba(255, 255, 255, .82); }
.aj-footer__bar-in a:hover { color: #fff; }
.aj-footer__pay { max-height: 26px; width: auto; opacity: .9; }

/* Sit above the mobile tab bar */
@media (max-width: 991.98px) {
    .aj-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.5rem; padding: 1.5rem 0 1.2rem; }
    .aj-footer__brand { grid-column: 1 / -1; }
    .aj-footer__news .subscribe-form { max-width: none; }
}

@media (max-width: 575px) {
    .aj-footer__grid { grid-template-columns: 1fr; }
    .aj-footer__bar-in { justify-content: center; text-align: center; }
    .aj-footer__news .subscribe-form { flex-direction: column; }
    .aj-footer__news .subscribe-btn { width: 100%; }
}

/* ==========================================================================
   29. ACCOUNT MENU + FOOTER POLISH
   ========================================================================== */

/* ---- Account menu ------------------------------------------------------- */
.aj-acct { position: relative; }

.aj-acct__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .34rem .6rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--hdr-fg);
    cursor: pointer;
    line-height: 1.22;
    text-align: left;
}
.aj-acct__btn:hover,
.aj-acct__btn.is-open { border-color: var(--hdr-line); }

.aj-acct__hi   { font-size: .72rem; color: rgba(255,255,255,.78); white-space: nowrap; }
.aj-acct__main {
    font-family: var(--heading-font);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}
.aj-acct__main i { font-size: .62rem; margin-left: .15rem; opacity: .8; }

.aj-acct__menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 1060;
    width: 268px;
    background: var(--panel);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(12,16,22,.28);
    overflow: hidden;
}
.aj-acct__menu[hidden] { display: none; }

.aj-acct__cta {
    padding: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    text-align: center;
}
.aj-acct__signin {
    display: block;
    padding: .6rem 1rem;
    border-radius: 7px;
    background: var(--acc);
    color: #fff;
    font-family: var(--heading-font);
    font-size: .88rem;
    font-weight: 600;
}
.aj-acct__signin:hover { background: var(--acc-dark); color: #fff; }
.aj-acct__cta p { margin: .6rem 0 0; font-size: .8rem; color: hsl(var(--body-color)); }
.aj-acct__cta p a { color: var(--acc); font-weight: 600; }

.aj-acct__list { list-style: none; margin: 0; padding: .35rem; }
.aj-acct__list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 7px;
    font-size: .86rem;
    color: hsl(var(--heading));
}
.aj-acct__list a:hover { background: var(--acc-soft); color: var(--acc-dark); }
.aj-acct__list i { font-size: 1.02rem; width: 18px; text-align: center; opacity: .8; }
.aj-acct__sep { margin-top: .25rem; border-top: 1px solid hsl(var(--border)); padding-top: .25rem; }

/* ---- Footer: keep the columns on one even row --------------------------
   The auto-fit grid let six link columns wrap unevenly, dropping Trending
   and Contact onto a second row with a wide gap above them. A fixed count
   per breakpoint keeps the rows even. */
.aj-footer__grid {
    grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(0, 1fr));
}

@media (min-width: 1200px) {
    .aj-footer__grid { grid-template-columns: minmax(240px, 1.25fr) repeat(4, minmax(0, 1fr)); }
}

.aj-footer__col { min-width: 0; }
.aj-footer__col a { display: inline-block; }

/* Contact column gets a little more room for the address */
.aj-footer__contact { grid-column: span 1; }
.aj-footer__contact li { margin-bottom: .55rem; }

/* Newsletter band: heading and form on one line on wide screens */
@media (min-width: 992px) {
    .aj-footer__news .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
    .aj-footer__news .newsletter-widget { display: flex; align-items: center; gap: 2rem; width: 100%; }
    .aj-footer__news .newsletter-widget-header { flex: 1 1 auto; }
    .aj-footer__news .subscribe-form { flex: 0 0 auto; width: 440px; }
}

@media (max-width: 1199.98px) {
    .aj-footer__grid { grid-template-columns: minmax(200px, 1.2fr) repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .aj-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .aj-footer__grid { grid-template-columns: 1fr; }
}

/* The sign-in button is built from the theme's own .btn--base class, which is
   known to resolve correctly in every engine here. An earlier custom rule used
   background: var(--acc); when that variable fails to resolve, CSS discards the
   whole declaration - including the literal fallback on the line above it - so
   the button rendered with no background at all. Only layout is set here. */
.aj-acct__menu a.aj-acct__signin {
    display: block;
    text-align: center;
    padding: .62rem 1rem;
    font-size: .88rem;
}

/* ==========================================================================
   30. PRODUCT GRID + TILE — rewritten markup
   --------------------------------------------------------------------------
   Exactly four across from 1200px, three on a tablet, two on a phone, with a
   smaller gutter and tighter tile padding than the stock card so more product
   reaches the first screen.
   ========================================================================== */

/* Flexbox rather than CSS grid: identical result, and it works in every
   engine including the older ones some in-app browsers still ship. The cell
   width is a percentage minus its share of the gutter. */
.aj-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.aj-grid__cell {
    min-width: 0;
    display: flex;
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
}

@media (min-width: 768px) {
    .aj-grid { gap: 12px; }
    .aj-grid__cell { flex: 0 0 calc(33.3333% - 8px); max-width: calc(33.3333% - 8px); }
}

@media (min-width: 1200px) {
    .aj-grid { gap: 14px; }
    .aj-grid__cell { flex: 0 0 calc(25% - 10.5px); max-width: calc(25% - 10.5px); }
}

.aj-grid__empty {
    flex: 1 1 100%;
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--panel);
    border-radius: 10px;
}
.aj-grid__empty img { max-width: 150px; opacity: .8; }
.aj-grid__empty h5 { margin-top: .9rem; font-family: var(--heading-font); font-size: 1rem; color: hsl(var(--heading)); }
.aj-grid__empty p { margin: .4rem 0 0; font-size: .87rem; color: hsl(var(--body-color)); }

/* ---- Tile -------------------------------------------------------------- */
.aj-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--panel);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    overflow: hidden;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
html[data-theme="dark"] .aj-card { box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.aj-card:hover { box-shadow: 0 8px 24px rgba(16,24,40,.13); transform: translateY(-2px); }

.aj-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.aj-card__link { display: block; width: 100%; height: 100%; }
.aj-card__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8%;
    transition: transform .4s var(--ease);
}
.aj-card:hover .aj-card__media img { transform: scale(1.05); }

/* Discount flag as a corner tag */
.aj-card__off {
    position: absolute;
    top: 8px; left: 0;
    z-index: 3;
    background: #1B8A5A;
    color: #fff;
    font-family: var(--heading-font);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .2rem .45rem .2rem .4rem;
    border-radius: 0 3px 3px 0;
}

.aj-card__acts {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0; padding: 0;
    list-style: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.aj-card:hover .aj-card__acts { opacity: 1; transform: none; }

.aj-card__acts button {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid hsl(var(--border));
    border-radius: 5px;
    background: rgba(255,255,255,.96);
    color: #2E3340;
    font-size: .88rem;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.aj-card__acts button:hover,
.aj-card__acts button.active { background: var(--acc); border-color: var(--acc); color: #fff; }

.aj-card__remove {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 4;
    width: 28px; height: 28px;
    border: 0; border-radius: 5px;
    background: rgba(194,59,50,.92);
    color: #fff;
    cursor: pointer;
}

/* ---- Tile body: tight padding ------------------------------------------ */
.aj-card__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .55rem .6rem .65rem;
    flex: 1 1 auto;
}

.aj-card__title {
    margin: 0;
    font-family: var(--heading-font);
    font-size: .83rem;
    font-weight: 500;
    line-height: 1.33;
}
.aj-card__title a {
    color: hsl(var(--heading));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aj-card__title a:hover { color: var(--acc-dark); }

.aj-card__rate { display: flex; align-items: center; gap: .3rem; font-size: .72rem; }
.aj-card__stars i { color: #E8A33B; font-size: .72rem; }
.aj-card__count { color: hsl(var(--body-color)); }

.aj-card__price {
    font-family: var(--heading-font);
    font-variant-numeric: tabular-nums;
    font-size: .98rem;
    font-weight: 700;
    color: hsl(var(--heading));
    margin-top: auto;
    padding-top: .15rem;
}
.aj-card__price del { font-size: .78rem; font-weight: 400; color: hsl(var(--body-color)); margin-left: .3rem; }

.aj-card__cart {
    margin-top: .45rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .6rem;
    border: 1px solid hsl(var(--base) / .4);
    border-radius: 6px;
    background: transparent;
    color: var(--acc-dark);
    font-family: var(--heading-font);
    font-size: .79rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.aj-card__cart:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.aj-card__cart i { font-size: .92rem; }

html[data-theme="dark"] .aj-card__cart { color: #fff; }

/* Touch devices have no hover */
@media (max-width: 991.98px) {
    .aj-card__acts { opacity: 1; transform: none; }
    .aj-card:hover { transform: none; }
}

@media (max-width: 575px) {
    .aj-card__body { padding: .45rem .5rem .55rem; gap: .25rem; }
    .aj-card__title { font-size: .78rem; }
    .aj-card__price { font-size: .9rem; }
    .aj-card__cart { font-size: .74rem; padding: .4rem .5rem; }
    .aj-card__acts button { width: 27px; height: 27px; font-size: .8rem; }
}

/* Tighter page padding on the listing */
.product-shop { padding-bottom: 1.2rem; }
.products-container { padding-left: 0; }

/* ==========================================================================
   31. DENSITY — tight gutters, narrower rail, less vertical air
   --------------------------------------------------------------------------
   Rendering /products showed the page using maybe half its width: a 300px
   filter rail, a Bootstrap container capped well short of the viewport, and
   每 filter sitting in its own padded card. Marketplaces use nearly the whole
   screen, so the shell is tightened to a 5px gutter and the rail narrowed.
   ========================================================================== */

/* Full-bleed shell with the 5px gutter */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* On very wide screens a hard cap stops lines of text becoming unreadable,
   while still using far more width than before. */
@media (min-width: 1600px) {
    .container, .container-xxl { max-width: 1560px !important; }
}

/* Listing shell -------------------------------------------------------- */
.product-shop { gap: 12px !important; }

.category-sidebar { flex: 0 0 232px !important; }

@media (min-width: 1400px) {
    .category-sidebar { flex: 0 0 250px !important; }
}

/* Filter blocks: one card, hairline-separated sections, not four cards */
.category-sidebar { padding: 0 !important; overflow: hidden; }

.product-filter__card {
    padding: .25rem 0 !important;
    margin: 0 !important;
}
.filter-category-header {
    padding: .7rem .75rem .35rem !important;
    font-size: .74rem !important;
}
.filter-category li a,
.brand-filter li label,
.filter-in label,
.product-filter-form label {
    padding: .36rem .75rem !important;
    font-size: .83rem !important;
}
.product-filter-form .form-group,
.product-filter-form .price-filter { padding: 0 .75rem .6rem !important; margin: 0 !important; }

/* Toolbar sits right above the grid, not floating in space */
.products-container { padding: 0 !important; }
.filter-select-right { margin: 0 !important; }
.product-shop .page-main-content { margin-top: .6rem; }

/* Breadcrumb tight to the header */
.breadcrumb-area, .inner-hero { padding: .6rem 0 !important; margin-bottom: .5rem !important; }

/* Section rhythm on every page */
section, .aj-section { padding-top: .9rem !important; padding-bottom: .9rem !important; }
.aj-section__head { margin-bottom: .6rem; }

/* The rails and panels lose their outer air too */
.aj-rail-wrap { padding: .4rem .25rem; }
.aj-trust { padding: .6rem 0 !important; }

/* Header and footer keep a slightly larger inner gutter so they do not
   touch the screen edge on a desktop */
@media (min-width: 992px) {
    .aj-header__bar .container,
    .aj-header__strip .container,
    .aj-footer .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Mobile: the 5px gutter is exactly right, nothing more */
@media (max-width: 991.98px) {
    .product-shop { gap: 0 !important; }
    .aj-grid { gap: 8px; }
    section, .aj-section { padding-top: .6rem !important; padding-bottom: .6rem !important; }
}

/* ==========================================================================
   32. TYPE SCALE + FILTER RAIL — correct selectors this time
   --------------------------------------------------------------------------
   The filter blocks are `.category-sidebar .widget` with an `h5.title`, not
   the classes an earlier pass guessed at, which is why the rail stayed large.
   Confirmed against the rendered page before writing this.

   One scale for the whole storefront. Three sizes carry almost everything:

     --t-lg   1.3rem   page and section titles
     --t-md   .95rem   card titles, panel headings
     --t-sm   .86rem   body copy, links, inputs
     --t-xs   .74rem   uppercase labels, table headers, meta

   Anything that needs a different size is a mistake, not a decision.
   ========================================================================== */

:root {
    --t-lg: 1.3rem;
    --t-md: .95rem;
    --t-sm: .86rem;
    --t-xs: .74rem;
}

/* ---- Filter rail -------------------------------------------------------- */
.category-sidebar .widget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.category-sidebar .widget:last-child { border-bottom: 0 !important; }

.category-sidebar .widget > .title,
.category-sidebar .widget h5.title {
    font-family: var(--heading-font);
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: hsl(var(--body-color)) !important;
    margin: 0 !important;
    padding: .7rem .7rem .35rem !important;
}

.category-sidebar .widget-body { padding: 0 .35rem .55rem !important; margin: 0 !important; }

.category-sidebar .filter-category li a,
.category-sidebar .brand-item,
.category-sidebar .widget-check-group label,
.category-sidebar .widget-body label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .35rem !important;
    border-radius: 5px;
    font-size: var(--t-sm) !important;
    font-weight: 400 !important;
    color: hsl(var(--heading)) !important;
    margin: 0 !important;
}
.category-sidebar .filter-category li a:hover,
.category-sidebar .widget-body label:hover { background: var(--acc-soft); color: var(--acc-dark) !important; }

.category-sidebar .filter-category li a i { font-size: .7rem; opacity: .5; }

.category-sidebar .price-range,
.category-sidebar .form-control { font-size: var(--t-sm) !important; }
.category-sidebar .form-control { height: 34px !important; padding: 0 .5rem !important; }

.category-sidebar .select-color { gap: .4rem !important; padding: .2rem .35rem !important; }
.category-sidebar .select-color__input + label,
.category-sidebar .select-color label { width: 20px !important; height: 20px !important; }

.category-sidebar .close-sidebar { padding: .4rem; }

/* ---- Toolbar ------------------------------------------------------------ */
.filter-select-right { gap: .5rem !important; }
.filter-select-item p,
.filter-select-item label {
    font-size: var(--t-xs) !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(var(--body-color)) !important;
    margin: 0 !important;
}
.filter-select-item .form--select,
.filter-select-item select {
    height: 34px !important;
    font-size: var(--t-sm) !important;
    min-width: 112px;
}
.totalProducts, .text-muted.small { font-size: var(--t-xs) !important; }
.filter-in { height: 34px !important; font-size: var(--t-sm) !important; }

/* View-mode icons sized to the controls beside them */
.filter-select-right .grid-view-btn,
.filter-select-right [class*="view"] i,
.filter-select-right button i { font-size: 1rem; }

/* ==========================================================================
   33. ONE TYPE SCALE ACROSS THE STOREFRONT
   ========================================================================== */

body { font-size: var(--t-sm); }

h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
h2, .aj-section__title { font-size: var(--t-lg); }
h3, .aj-card__title, .aj-footer__h, .cart-sidebar-area__title { font-size: var(--t-md); }
h4, h5, h6 { font-size: var(--t-md); }

p, li, td, input, select, textarea, .form--control { font-size: var(--t-sm); }

small, .small, .aj-card__rate, .aj-card__count,
.breadcrumb, .breadcrumb-item, .aj-footer__bar-in p { font-size: var(--t-xs); }

label, .form--label, .table thead th {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .04em;
}
.form--label { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }

.btn, .aj-card__cart, .aj-act__label, .aj-section__more { font-size: var(--t-sm); }

/* Section headings on inner pages follow the same scale */
.section-header .title, .section-header h5 {
    font-family: var(--heading-font);
    font-size: var(--t-lg) !important;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Icons: two sizes only, inline and action */
.aj-card__acts button i, .aj-act__icon i { font-size: 1.15rem; }
.breadcrumb i, .aj-footer__contact i, .filter-category i { font-size: .85rem; }

@media (max-width: 575px) {
    :root { --t-lg: 1.12rem; --t-md: .9rem; --t-sm: .83rem; --t-xs: .72rem; }
}

/* "Price Filter" was wrapping onto two lines inside the narrowed rail. */
.category-sidebar .widget-body label,
.category-sidebar .widget-check-group label { white-space: nowrap; }
.category-sidebar .price-range { padding-top: .2rem; }
.category-sidebar .widget-body .form-control { max-width: 50%; }

/* Rating rows: keep the stars and the "and Up" on one line */
.category-sidebar .rating-list,
.category-sidebar .widget-body li { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.category-sidebar .rating-list__icon { font-size: .8rem; }

/* ==========================================================================
   34. REMOVE THE OUTER PADDING — read off the rendered page
   --------------------------------------------------------------------------
   Two things were eating the screen, both confirmed in the markup:

   1. The listing sits inside <div class="py-60">, i.e. 60px of padding above
      and below, and the breadcrumb adds another mb-4 under that. That is the
      empty band between the navigation and the breadcrumb.

   2. `.filter-category-header` is the TOOLBAR row, not a sidebar heading. An
      earlier pass styled it as a small uppercase label with its own padding,
      which is why Sort By / Show ended up floating in a wide box.
   ========================================================================== */

/* 1. Kill the outer band */
.py-60 { padding-top: .5rem !important; padding-bottom: .9rem !important; }
.my-60 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.mb-60 { margin-bottom: .6rem !important; }
.mt-60 { margin-top: .6rem !important; }
.breadcrumb.mb-4 { margin-bottom: .5rem !important; }

/* 2. Side gutters gone. Panels carry their own padding, so nothing text
      actually touches the screen edge. */
.container,
.container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (min-width: 1600px) { .container, .container-xxl { max-width: 100% !important; } }

/* Header, footer and the drawer keep a small inner gutter so the logo and
   the links are not flush against the glass */
.aj-header__bar .container,
.aj-header__strip .container,
.aj-footer .container,
.aj-footer__news .container { padding-left: 12px !important; padding-right: 12px !important; }

/* 3. Toolbar: undo the label styling, lay it out as a real control row */
.filter-category-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .6rem !important;
    flex-wrap: wrap;
    padding: .5rem .6rem !important;
    margin: 0 0 .6rem !important;
    background: var(--panel);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: var(--t-sm) !important;
    color: hsl(var(--heading)) !important;
}
html[data-theme="dark"] .filter-category-header { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* The right-hand control group should hug its content, not stretch */
.filter-category-header .filter-select-right {
    flex: 0 0 auto !important;
    justify-content: flex-end;
}
.filter-category-header > div:first-child { flex: 0 0 auto !important; }

/* The sidebar headings are `.category-sidebar .widget .title` - already
   handled in section 32. Make sure the toolbar rule above cannot reach them. */
.category-sidebar .filter-category-header { all: unset; }

/* 4. Panels get their own edge padding now the container has none */
.category-sidebar { padding: .1rem 0 !important; }
.product-shop { padding: 0 6px 1rem !important; gap: 10px !important; }
.aj-grid { padding: 0; }

.aj-rail-wrap,
.aj-trust__row,
.aj-section__head { margin-left: 6px; margin-right: 6px; }

.breadcrumb { padding-left: 6px !important; }

@media (max-width: 991.98px) {
    .product-shop { padding: 0 5px .8rem !important; }
    .aj-rail-wrap, .aj-trust__row, .aj-section__head { margin-left: 5px; margin-right: 5px; }
    .breadcrumb { padding-left: 5px !important; }
    .py-60 { padding-top: .35rem !important; padding-bottom: .6rem !important; }
    .filter-category-header { padding: .45rem .5rem !important; }
}