/* ============================================================
   NAV.CSS  –  Organised & Deduplicated
   Sections:
   1.  CSS Variables & Base Reset
   2.  Sticky Top Bar
   3.  Header & Header-Top
   4.  Nav Container & Logo
   5.  Menu (Desktop)
   6.  Sub-menu & Mega-menu (Desktop)
   7.  All-Products Mega-menu
   8.  Topbar (Light Bar)
   9.  Banner Section
   10. Masonry
   11. Responsive – ≤991px  (Mobile Menu)
   12. Responsive – ≤768px
   13. Responsive – ≤580px
   14. Mobile-only Nav Extras
   15. Mobile Shop-by-Category Accordion
   16. Mobile Stamps Guide Accordion
   17. Desktop / Mobile Show-Hide Utilities
============================================================ */


/* ============================================================
   1. CSS VARIABLES & BASE RESET
============================================================ */
/* The fixed scrolling marquee (.sticky-topbar) partial is not included in the
   layout, so no top spacing is reserved here (home.css already resets body
   padding to 0, which would override anything set here anyway). If the marquee
   is re-enabled, reserve its height in a rule that wins the cascade against
   home.css — e.g. `html body { padding-top: 34px; }` in style.css (loads last). */
/* `clip` not `hidden`: hidden on both html+body makes body a scroll container
   and breaks position:sticky site-wide (see the matching note in home.css). */
html, body {
    overflow-x: clip;
}

/* --header-h = live height of the sticky header (custom-script.js keeps it exact;
   these are only the fallbacks before it runs). Other sticky panels sit just below
   it, and in-page anchor jumps stop below it instead of underneath it. */
:root {
    --header-h: 104px;
}

@media (max-width: 991px) {
    :root {
        --header-h: 56px;
    }
}

html {
    scroll-padding-top: calc(var(--header-h) + 12px);
}


/* ============================================================
   2. STICKY TOP BAR
============================================================ */
.sticky-topbar {
    width: 100%;
    background-color: var(--black);
    border-bottom: 1px solid rgba(255, 225, 170, 0.3);
    height: 34px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 9999;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.sticky-topbar.sb-hidden {
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.sticky-topbar__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.sticky-topbar__marquee {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 93%, transparent 100%);
}

.sticky-topbar__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: sb-scroll 38s linear infinite;
    will-change: transform;
}

.sticky-topbar__marquee:hover .sticky-topbar__track {
    animation-play-state: paused;
}

@keyframes sb-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sticky-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: var(--Lgray, #b3b3b3);
    padding: 0 20px;
    letter-spacing: 0.01em;
}

.sticky-topbar__item a {
    color: var(--secondary, #e8a838);
    text-decoration: none;
    transition: color 0.2s;
}

.sticky-topbar__item a:hover {
    color: #fff;
}

.sticky-topbar__icon {
    color: var(--secondary, #e8a838);
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.sticky-topbar__icon::before {
    color: var(--secondary, #e8a838);
    font-size: 13px;
}

.sticky-topbar__sep {
    color: rgba(255, 225, 170, 0.22);
    font-size: 14px;
    flex-shrink: 0;
    padding: 0 2px;
}

.sticky-topbar__close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    padding: 0;
    line-height: 1;
}

.sticky-topbar__close:hover {
    color: var(--secondary, #e8a838);
    background: rgba(255, 255, 255, 0.06);
}


/* ============================================================
   3. HEADER & HEADER-TOP
============================================================ */
/* The whole header (black bar + white menu) is sticky on every breakpoint. Sticky
   keeps its own space in the flow, so nothing jumps when it starts sticking.
   z-index: above page content, below the category filter drawer (999/1000) and
   Bootstrap offcanvas/modals (1040+). */
.header {
    display: block;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 990;
    background-color: var(--black);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35);
}

.header-menu {
    background-color: var(--white);
    padding: 6px 4px;
    width: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform .3s ease, box-shadow .3s ease;
}

.header-top {
    width: 100%;
    border-bottom: 1px solid rgba(255, 225, 170, 0.3);
    padding: 6px 0;
    font-size: 14px;
}

.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.h-top-ph {
    display: flex;
    gap: 1px;
    align-items: start;
    flex-direction: column;
    margin-top: 4px;
    padding-left: 12px;
}

.h-top-ph a {
    font-size: 14px;
    color: var(--Lgray);
    display: flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
}

.h-top-ph a span:before {
    color: var(--secondary);
    font-size: 17px;
}

.header .item-right {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
}

.header .item-right a {
    text-decoration: none;
    font-size: 13px;
    display: block;
    margin-left: 0;
    transition: color 0.3s ease;
    color: #b3b3b3;
}

.header .item-right a:hover {
    color: var(--secondary);
}

/* Logged-in account cluster: account link · divider · Logout.
   Without an explicit flex row these stack vertically, because the rule
   above (`.item-right a { display:block }`) blockifies both anchors. */
.login-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1;
}

/* Force BOTH anchors to centred inline-flex with one shared line-height so the
   account name and "Logout" share a baseline (the 16px icon would otherwise
   make the account anchor taller than the text-only Logout anchor). The high
   specificity is needed to beat `.header .item-right a { display:block }`. */
.header .item-right .login-cart a,
.login-cart .header-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
}

.login-cart .header-user {
    color: #f2f2f2;
}

.login-cart .header-user:hover {
    color: var(--secondary);
}

.login-cart .header-user .icon-person {
    font-size: 16px;
    line-height: 1;
}

.login-cart .login-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.45);
}

.header-item .btn-border {
    font-size: 10px;
}

/* "Get a Quote" header CTA. Needs (0,3,0) to beat `.header .item-right a`
   above, which otherwise paints it light-grey and turns the text AMBER on
   hover — invisible against the amber button. Dark-on-amber is the site's
   WCAG-safe CTA recipe (see .hero-lv .btn-primary, .dlv-btn). Deliberately
   not `.btn-primary`: slick.css has an unscoped `.btn-primary` that leaks. */
.header .item-right .header-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--secondary);
    color: #16181d;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease;
}
.header .item-right .header-quote-btn i {
    font-size: 11px;
    transition: transform .25s ease;
}
.header .item-right .header-quote-btn:hover {
    background: #ffb52e;
    color: #16181d;
    transform: translateY(-1px);
}
.header .item-right .header-quote-btn:hover i { transform: translateX(3px); }
.header .item-right .header-quote-btn:focus-visible {
    outline: 2px solid #fff !important;   /* global *:focus{outline:none!important} needs beating */
    outline-offset: 2px;
}

.header-cart {
    position: relative;
    color: var(--Lgray);
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
}

.header-cart-content {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.cart-icon::before {
    font-size: 20px;
}

.cart-item {
    position: absolute;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: -8px;
    top: -8px;
    background-color: #e53935;
}

/* Mobile-only account icon — the "Login / Signup" / account-name text links are
   hidden ≤768px, so this icon (with the cart icon) stands in for them there.
   Hover turns amber via `.header .item-right a:hover`. */
.header .item-right .header-account {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #ffffff;
}

.header-account .icon-person {
    font-size: 22px;
    line-height: 1;
}

.login {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    justify-content: end;
    padding-right: 10px;
    color: var(--Lgray);
}

.login a {
    text-decoration: none;
    color: var(--Lgray);
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 400;
    font-size: 15px;
}

.login-title {
    display: flex;
    gap: 4px;
    align-items: center;
}

.login-title span::before {
    font-size: 22px;
}

.register {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    justify-content: end;
    padding-right: 10px;
    color: var(--Lgray);
}


/* ============================================================
   4. NAV CONTAINER & LOGO
============================================================ */
.nav-container {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Logo size — overrides main.css `.logo a { max-width: 124px }`
   (main.css loads after nav.css, so this needs the higher specificity). */
.nav-container .logo a {
    max-width: 110px;
}

.nav-container .logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Search input appearance kept as-is (transparent field on the dark bar). */
.nav-container .search-box input {
    background-color: transparent;
    border: 1px solid #6c6c6c !important;
    padding: 5px 40px 5px 15px !important;
    color: #fff;
}

.nav-container .search-box ::placeholder {
    color: #fff;
}

/* Resting search button uses the brand amber (overrides main.css `#fbb230`,
   matching the existing :hover state so resting and hover are one amber). */
.nav-container .search-box button {
    background: var(--secondary);
}

.logo-call-bx {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* The search + actions cluster fills the space to the right of the logo;
   the search box grows to occupy the centre so the bar reads as balanced
   instead of being shoved against the action icons. */
.search-log-bx {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 28px;
    justify-content: flex-end;
}

.search-log-bx .search-box {
    flex: 1 1 auto;
    max-width: 400px;
    margin: 0;   /* neutralises main.css `.search-box { margin: 0 auto }` */
}

/* Let the flexible search field actually shrink to centre the bar — overrides
   main.css `.search-box input[type="text"] { min-width: 400px }` (needs the
   [type="text"] in the selector to match its specificity). */
.search-log-bx .search-box input[type="text"] {
    min-width: 0;
}

.search-log-bx .search-box i {
    font-size: 15px;
}


/* ============================================================
   5. MENU (DESKTOP)
============================================================ */
.mobile-menu-head,
.mobile-menu-trigger {
    display: none;
}

.menu a {
    text-decoration: none;
    color: var(--secondary);
}

.menu a:hover {
    color: var(--secondary);
}

/* Dropdown / mega panels sit on white backgrounds, so their link text must be
   DARK — not the amber that the base `.menu a` rule above would otherwise leak
   into any dropdown link that doesn't set its own colour (e.g. the featured
   dropdown rows). Hover stays amber via the more-specific :hover rules below. */
.header .menu .sub-menu a,
.header .menu .single-column-menu a,
.header .menu .all-products-mega a {
    color: #333333;
}

.header .menu > ul > li::before {
    display: none;
}

li::marker {
    display: none;
}

.header .menu > ul > li {
    display: inline-block;
    line-height: 28px;
    margin-right: 32px;
}

.header .menu > ul > li > a {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    position: relative;
    transition: color 0.3s ease;
}

.menu-active,
.header .menu > ul > li > a.menu-active {
    color: #e89a0e;
}

.header .menu > ul > li:hover > a {
    color: var(--secondary);
}

/* Animated amber underline on desktop nav links (hover + active page) */
@media (min-width: 992px) {
    .header .menu > ul > li > a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 2px;
        background: var(--secondary);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.25s ease;
    }

    .header .menu > ul > li:hover > a::after,
    .header .menu > ul > li > a.menu-active::after {
        transform: scaleX(1);
    }
}


/* ============================================================
   6. SUB-MENU & MEGA-MENU (DESKTOP)
============================================================ */
.header .menu > ul > li .sub-menu {
    position: absolute;
    z-index: 500;
    background-color: #ffffff;
    box-shadow: -2px 2px 70px -25px rgba(0, 0, 0, 0.3);
    padding: 20px 30px;
    transition: all 0.5s ease;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
}

/* Nav container is the positioning anchor for the mega */
.header-item.item-center {
    position: relative;
}

.sub-menu ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-menu ul li::before {
    content: "";
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 10px;
    border: 1px solid var(--black);
    position: relative;
}

.sub-menu.mega-menu ul {
    padding-left: 0;
}

.header .menu > ul > li .sub-menu > ul > li > a {
    display: inline-block;
    padding: 10px 0;
    font-size: 15px;
    color: #555555;
    transition: color 0.3s ease;
    text-decoration: none;
    text-transform: capitalize;
}

.header .menu > ul > li .sub-menu > ul > li > a:hover {
    color: var(--secondary);
}

/* Full-width featured dropdown — anchored to .header-item.item-center (the
   relative nav wrapper) and stretched edge-to-edge like the All-Categories
   mega, so all tiles fit without vertical scrolling. */
.header .menu > ul > li .single-column-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 18px 24px 22px;
    background: #fff;
    border: 1px solid #f0f1f3;
    border-top: 3px solid var(--secondary);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 50px -18px rgba(22, 24, 29, 0.18);
}

/* Breadcrumb header inside featured dropdowns ("All Categories > Name") */
.single-column-menu .dropdown-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 9px;
    margin-bottom: 7px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    line-height: 1;
}

.single-column-menu .dropdown-crumb__root {
    color: var(--Dgray);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-column-menu .dropdown-crumb__root:hover {
    color: var(--secondary);
}

.single-column-menu .dropdown-crumb__sep,
.single-column-menu .dropdown-crumb__sep::before {
    font-size: 11px;
    color: #c4c4c4;
}

.single-column-menu .dropdown-crumb__current {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: none;
}

/* Featured dropdown sub-categories as compact tiles (mirrors the
   All-Categories mega panel, tuned smaller). */
.single-column-menu .sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 2px 16px;
}

.single-column-menu .sc-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    min-height: 0;
    min-width: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    color: #2c3e50;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.single-column-menu .sc-tile::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d4d8de;
    transition: background 0.18s ease, transform 0.18s ease;
}

.single-column-menu .sc-tile:hover {
    background: rgba(232, 154, 14, 0.08);
    color: #9a6408;
    transform: translateX(3px);
}

.single-column-menu .sc-tile:hover::before {
    background: var(--secondary);
    transform: scale(1.25);
}

.single-column-menu .sc-tile__img {
    display: none;
}

/* Tile/sidebar text must beat the generic dark-link rule (.header .menu ... a {color:#333}) */
.header .menu .all-products-mega .ap-panel__link,
.header .menu .all-products-mega .ap-sidebar__item,
.header .menu .single-column-menu .sc-tile {
    color: #2c3e50;
}

.header .menu .all-products-mega .ap-panel__link:hover,
.header .menu .all-products-mega .ap-sidebar__item:hover,
.header .menu .all-products-mega .ap-sidebar__item--active,
.header .menu .single-column-menu .sc-tile:hover {
    color: #9a6408;
}

/* Refined sub-menu rows inside the featured dropdowns */
.header .menu > ul > li .single-column-menu > ul > li > a {
    padding: 9px 8px;
    border-radius: 8px;
    width: 100%;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.header .menu > ul > li .single-column-menu > ul > li > a:hover {
    background: rgba(232, 154, 14, 0.08);
    color: var(--secondary);
    padding-left: 12px;
}

/* Mega-menu shared */
.mega-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.header .menu > ul > li .sub-menu.mega-menu {
    left: 50%;
    transform: translateX(-50%);
}

.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li {
    line-height: 1;
}

.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
    padding: 6px 0;
    display: inline-block;
    font-size: 15px;
    color: var(--black);
    transition: color 0.3s ease;
    line-height: 24px;
}

.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover {
    color: var(--secondary);
}

/* Mega-menu column-4 */
.header .menu > ul > li .sub-menu.mega-menu-column-4 {
    max-width: 1260px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 15px 0 15px;
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item {
    flex: 0 0 23.5%;
    padding: 0 15px;
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item .title {
    font-size: 16px;
    color: var(--secondary);
    font-weight: 600;
    line-height: 1;
    padding: 10px 0;
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title {
    text-align: center;
}

.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img {
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
    margin-top: 10px;
    height: 300px;
    object-fit: cover;
}

.mega-menu-column-4 .list-item {
    flex: 1 1 22%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 15px;
    box-sizing: border-box;
    min-width: 200px;
}

/* Desktop overrides for mega-menu */
@media (min-width: 992px) {
    ul.menu-main {
        padding-left: 0;
        margin-bottom: 0;
    }

    .header .menu > ul > li.menu-item-has-children:hover .sub-menu {
        margin-top: 20px;
        visibility: visible;
        opacity: 1;
    }

    .header .menu > ul > li .sub-menu.mega-menu {
        column-count: 4;
        display: block;
    }

    .mega-menu-column-4 .list-item {
        display: inline-block;
        width: 100%;
        padding-bottom: 24px !important;
    }

    .header .menu > ul > li.mobile-only-topbar {
        display: none !important;
    }

    .mobile-shop-cat {
        display: none !important;
    }

    .mobile-stamps-guide {
        display: none !important;
    }

       .header-menu .menu .menu-main {
        text-align-last: center;
    }

    .header-menu .menu .menu-main > li {
        text-align-last: auto;
    }

    .header-menu .header-item .menu .menu-main > li:last-child {
        margin-right: 0;
    }
}


/* ============================================================
   7. ALL-PRODUCTS MEGA-MENU
============================================================ */
.all-products-item {
    position: static;
}

.all-products-item > a {
    font-weight: 600 !important;
    color: var(--secondary, #e8a838) !important;
}

.all-products-mega {
    display: block !important;
    column-count: 1 !important;   /* cancel the desktop .mega-menu{column-count:4} multicol */
    /* full-width dropdown; the category grid inside is centred to the page width */
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f0f1f3;
    border-top: 3px solid var(--secondary, #e8a838);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 50px -18px rgba(22, 24, 29, 0.20);
    transform: none !important;
    top: 100%;
    height: auto;
}

.ap-sidebar {
    flex: none;
    width: auto;
    height: auto;
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    border-right: 0;
    padding: 22px 26px 26px;
    /* spread all categories across the dropdown as a centred grid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 18px;
}

.ap-sidebar::-webkit-scrollbar {
    width: 6px;
}

.ap-sidebar::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

.ap-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.35;
    text-decoration: none !important;
    border-radius: 10px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    cursor: pointer;
    white-space: normal;
}
.ap-sidebar__item:hover,
.ap-sidebar__item--active {
    background: rgba(232, 154, 14, 0.08);
    color: #9a6408;
    transform: translateX(3px);
}

.ap-sidebar__thumb {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.ap-sidebar__arrow {
    display: none;   /* subcategories hidden for now — no indicator needed */
}

.ap-panel {
    display: none;   /* subcategory panel hidden for now (categories are spread instead) */
}

.ap-panel::-webkit-scrollbar {
    width: 6px;
}

.ap-panel::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

.ap-panel__group {
    display: none;
}

.ap-panel__group--active {
    display: block;
}

.ap-panel__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #16181d;
    margin: 0 0 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid #f0f1f3;
}

.ap-panel__heading::before {
    content: "";
    width: 5px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(180deg, #e89a0e, #f4b743);
}

.ap-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 2px 16px;
}

/* Match the Challenge-Coins featured-dropdown tiles (.sc-tile): uniform
   min-height so every box is the same size regardless of name length / image. */
/* Clean left-aligned link rows (images removed; a calm amber accent dot gives
   rhythm). Shared visual language with the featured-dropdown .sc-tile below. */
.ap-panel__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    min-height: 0;
    min-width: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #2c3e50;
    overflow-wrap: anywhere;
    text-decoration: none !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.ap-panel__link::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d4d8de;
    transition: background 0.18s ease, transform 0.18s ease;
}

.ap-panel__link:hover {
    background: rgba(232, 154, 14, 0.08);
    color: #9a6408;
    transform: translateX(3px);
}

.ap-panel__link:hover::before {
    background: var(--secondary, #e8a838);
    transform: scale(1.25);
}

.ap-panel__img {
    display: none;
}

.ap-panel__empty {
    font-size: 13px;
    color: #aaa;
    padding: 16px 0;
}


/* ============================================================
   8. TOPBAR (LIGHT BAR)
============================================================ */
.topbar {
    background: #f5f5f5;
    border-bottom: 1px solid #ececec;
    color: #4a4a4a;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 99;
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-left,
.topbar-right {
    display: flex;
    gap: 26px;
    align-items: center;
}

.topbar span {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    text-transform: none;
}

.topbar i {
    color: var(--secondary);
    font-size: 14px;
    line-height: 1;
}

.topbar-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.topbar-link:hover {
    color: var(--secondary);
    text-decoration: none;
}

/* Tablet + phone (≤991px, the hamburger layout): the four trust tags don't fit
   beside the phone/email in the narrower container (they collided, e.g. on a
   Surface Pro at 912px) and the slide-out menu lists them anyway — so the bar
   keeps just the centred contact details. */
@media (max-width: 991px) {
    .topbar-left {
        display: none;
    }

    .topbar-inner {
        justify-content: center;
    }

    .topbar-right {
        width: 100%;
        justify-content: center;
    }
}

.mobile-only-topbar {
    display: none;
}


/* ============================================================
   9. BANNER SECTION
============================================================ */
.banner-section {
    background-image: url("../img/banner.jpg");
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 100%;
    display: block;
}


/* ============================================================
   10. MASONRY
============================================================ */
.masonry {
    column-count: 4;
    column-gap: 15px;
}

.item {
    background: #f2f2f2;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #ccc;
}


/* ============================================================
   11. RESPONSIVE – ≤991px (MOBILE MENU)
============================================================ */
@media (max-width: 991px) {

    .header-top {
        display: none;
    }

    .search-box {
        display: none;
    }

    /* Scale the logo down on tablet. The anchor cap is the lever (the img is
       width:100% of it); needs .nav-container specificity to beat the desktop
       cap and main.css `.logo a { max-width: 124px }`. */
    .nav-container .logo a {
        max-width: 100px;
    }

    .header .item-center {
        flex: 0 0 auto;
    }

    .header .item-left,
    .header .item-right {
        flex: 0 0 auto;
    }

    .v-center {
        justify-content: space-between;
    }

    /* Hamburger trigger */
    .header .mobile-menu-trigger {
        display: flex;
        height: 30px;
        width: 30px;
        margin-left: 15px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .header .mobile-menu-trigger span {
        display: block;
        height: 2px;
        background-color: #ffffff;
        width: 24px;
        position: relative;
    }

    .header .mobile-menu-trigger span:before,
    .header .mobile-menu-trigger span:after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
    }

    .header .mobile-menu-trigger span:before {
        top: -6px;
    }

    .header .mobile-menu-trigger span:after {
        top: 6px;
    }

    .header .item-right {
        align-items: center;
        order: 3;
    }

    /* Slide-in menu drawer */
    .header .menu {
        position: fixed;
        top: 0 !important;
        left: 0;
        width: 320px;
        height: 100%;
        background-color: #ffffff;
        overflow: hidden;
        transform: translate(-100%);
        transition: all 0.5s ease;
        z-index: 1099;
    }

    .header .menu.active {
        transform: translate(0%);
    }

    .header .menu > ul > li {
        line-height: 1;
        margin: 0;
        display: block;
    }

    .header .menu > ul > li > a {
        line-height: 50px;
        height: 50px;
        padding: 0 50px 0 15px;
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .header .menu > ul > li > a i {
        position: absolute;
        height: 50px;
        width: 50px;
        top: 0;
        right: 0;
        text-align: center;
        line-height: 50px;
        transform: rotate(-90deg);
    }

    /* Mobile menu head — a dark branded bar (same black as the site header) with
       the logo, so the top of the drawer isn't an empty white strip. The logo's
       "Badges" is white, hence the dark bar. Inside a sub-menu the bar switches to
       back arrow + title, and the logo hides. */
    .header .menu .mobile-menu-head {
        display: flex;
        height: 50px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background-color: var(--black);
        z-index: 501;
    }

    .header .menu .mobile-menu-head .mobile-menu-logo {
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: 15px;
    }

    .header .menu .mobile-menu-head .mobile-menu-logo img {
        display: block;
        width: auto;
        height: 36px;
    }

    .header .menu .mobile-menu-head.active .mobile-menu-logo {
        display: none;
    }

    .header .menu .mobile-menu-head .go-back {
        height: 50px;
        width: 50px;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        cursor: pointer;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        display: none;
    }

    .header .menu .mobile-menu-head.active .go-back {
        display: block;
    }

    .header .menu .mobile-menu-head .current-menu-title {
        font-size: 15px;
        font-weight: 500;
        color: #ffffff;
    }

    .header .menu .mobile-menu-head .mobile-menu-close {
        height: 50px;
        width: 50px;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        cursor: pointer;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 25px;
    }

    .header .menu .menu-main {
        height: calc(100% - 50px);   /* minus the 50px drawer head — at 100% the list's last 50px sat below the drawer, unreachable */
        overflow-x: hidden;
        overflow-y: auto;
        padding-top: 0;              /* the first item starts right under the bar (was a blank 15px strip) */
    }

    /* Sub-menus in mobile */
    .header .menu > ul > li .sub-menu.mega-menu,
    .header .menu > ul > li .sub-menu {
        visibility: visible;
        opacity: 1;
        position: absolute;
        box-shadow: none;
        margin: 0;
        padding: 15px;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 60px;
        max-width: none;
        min-width: auto;
        display: none;
        transform: translateX(0%);
        overflow-y: auto;
    }

    .header .menu > ul > li .sub-menu.active {
        display: block;
    }

    @keyframes slideLeft {
        0%   { opacity: 0; transform: translateX(100%); }
        100% { opacity: 1; transform: translateX(0%); }
    }

    @keyframes slideRight {
        0%   { opacity: 1; transform: translateX(0%); }
        100% { opacity: 0; transform: translateX(100%); }
    }

    .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img {
        margin-top: 0;
    }

    .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title {
        margin-bottom: 20px;
    }

    .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center:last-child .title {
        margin-bottom: 0;
    }

    .header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item {
        flex: 0 0 100%;
        padding: 0;
    }

    .header .menu > ul > li .sub-menu > ul > li > a,
    .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
        display: block;
    }

    .header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
        margin-bottom: 15px;
    }

    /* Overlay */
    .menu-overlay {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1098;
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s ease;
    }

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

    /* Mobile: hide the desktop all-products mega entirely —
       mobile uses .mobile-shop-cat instead */
    .all-products-item {
        display: none !important;
    }

    .ap-sidebar {
        display: block;
        padding: 0;
        background: #fff;
    }

    .ap-sidebar__item {
        display: none !important;
    }

    .ap-panel {
        display: none !important;
    }

    .ap-sidebar__arrow {
        display: block;
        font-size: 14px;
        color: #999;
    }

    /* Mobile-only topbar links in drawer */
    .mobile-only-topbar {
        display: block;
    }

    .mobile-only-topbar a {
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-only-topbar i {
        color: var(--secondary);
        font-size: 14px;
    }

    /* Trust tags — a calm, non-interactive 2x2 chip grid at the BOTTOM of the
       drawer (they used to open the menu as fake "#" links) */
    .header .menu > ul > li.mobile-trust {
        padding: 18px 15px 24px;
        background: #f7f7f8;
    }

    .mobile-trust__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-trust__item {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 10px;
        background: #ffffff;
        border: 1px solid #eceef1;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        color: #333333;
    }

    .mobile-trust__item i {
        flex-shrink: 0;
        font-size: 13px;
    }

    /* Mobile: sticky topbar size */
    .sticky-topbar {
        height: 30px;
    }

    .sticky-topbar__item {
        font-size: 11px;
        padding: 0 13px;
    }

    /* Mobile category accordion */
    .mobile-cat {
        border-bottom: 1px solid #eee;
        display: block !important;
    }

    .mobile-cat__parent {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        background: #fff;
        font-size: 15px;
        font-weight: 500;
    }

    .mobile-cat__parent a {
        text-decoration: none;
        color: #333;
        flex: 1;
    }

    .mobile-cat__toggle {
        font-size: 14px;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .mobile-cat.active .mobile-cat__toggle {
        transform: rotate(180deg);
    }

    .mobile-cat__children {
        display: none;
        background: #f7f7f7;
    }

    .mobile-cat__children a {
        display: block;
        padding: 12px 20px;
        font-size: 14px;
        color: #555;
        text-decoration: none;
        border-top: 1px solid #eee;
    }

    .mobile-cat__children a:hover {
        background: #eee;
    }

    .mobile-cat.active .mobile-cat__children {
        display: block;
    }
}


/* ============================================================
   12. RESPONSIVE – ≤768px
============================================================ */
@media (max-width: 768px) {

    .topbar-right {
        gap: 10px;
    }

    .topbar {
        height: 38px;
        font-size: 13px;
    }

    .topbar-right span {
        font-weight: 500;
    }

    .logo-call-bx {
        flex: 1;
    }

    .search-log-bx {
        flex: none;
    }

    .search-box,
    .login-cart,
    .btn-border {
        display: none;
    }

    /* account + cart stay reachable as icons (text links hidden above) */
    .header .item-right .header-account {
        display: inline-flex;
    }

    .header .item-right .header-cart {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: #ffffff;
    }

    .header .item-right {
        gap: 10px;
    }

    /* the quote CTA stays visible on mobile — just tighter */
    .header .item-right .header-quote-btn {
        padding: 9px 12px;
        font-size: 11px;
    }
}


/* ============================================================
   13. RESPONSIVE – ≤580px
============================================================ */
@media (max-width: 580px) {

    /* Smallest screens: shrink the logo a touch more (anchor cap drives it). */
    .nav-container .logo a {
        max-width: 90px;
    }

    .nav-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .h-top-ph a {
        font-size: 10px;
    }

    .container {
        padding-left: 5px;
        padding-right: 5px;
    }

    .header .item-right {
        gap: 12px;
    }
}

/* Narrow phones: account + cart + quote CTA + hamburger must still clear the
   logo, so the row tightens (≤400px), then sheds the CTA arrow and trims the
   logo (≤359px). */
@media (max-width: 400px) {
    .header .item-right {
        gap: 6px;
    }

    .header .mobile-menu-trigger {
        margin-left: 2px;
    }

    .header .item-right .header-account,
    .header .item-right .header-cart {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 359px) {
    .nav-container .logo a {
        max-width: 78px;
    }

    .header .item-right .header-quote-btn {
        padding: 8px 10px;
    }

    .header .item-right .header-quote-btn i {
        display: none;
    }
}


/* ============================================================
   14. DESKTOP / MOBILE SHOW-HIDE UTILITIES
============================================================ */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 991px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }
}


/* ============================================================
   15. MOBILE SHOP-BY-CATEGORY ACCORDION
============================================================ */
@media (max-width: 991px) {

    .mobile-shop-cat {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0 !important;
    }

    .mobile-shop-cat__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 50px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        user-select: none;
    }

    .mobile-shop-cat__header span {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-shop-cat__header i.fa-shop {
        color: var(--secondary);
        font-size: 14px;
    }

    .mobile-shop-cat__chevron {
        font-size: 12px;
        color: #999;
        transition: transform 0.25s ease;
    }

    .mobile-shop-cat.open .mobile-shop-cat__chevron {
        transform: rotate(180deg);
    }

    .mobile-shop-cat__body {
        display: none;
        background: #f7f7f7;
        padding: 4px 0 8px;
    }

    .mobile-shop-cat.open .mobile-shop-cat__body {
        display: block;
    }

    .mobile-shop-cat__group-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--secondary);
        padding: 10px 16px;
        margin-top: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }

    .mobile-shop-cat__group a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px 9px 22px;
        font-size: 13.5px;
        color: #444;
        text-decoration: none;
        border-top: 1px solid #eee;
        background: #fff;
        transition: background 0.15s;
    }

    .mobile-shop-cat__group a::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #bbb;
        flex-shrink: 0;
    }

    .mobile-shop-cat__group a:hover {
        background: #f5f5f5;
        color: var(--secondary);
    }

    .mobile-shop-cat__group a:hover::before {
        border-color: var(--secondary);
    }

    /* Group children (nested sub-items) */
    .mobile-shop-cat__group-children {
        display: none;
        background: #fff;
    }

    .mobile-shop-cat__group-children a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px 9px 22px;
        font-size: 13.5px;
        color: #444;
        text-decoration: none;
        border-top: 1px solid #eee;
        background: #fff;
        transition: background 0.15s;
    }

    .mobile-shop-cat__group-children a::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #bbb;
        flex-shrink: 0;
    }

    .mobile-shop-cat__group-children a:hover {
        background: #f5f5f5;
        color: var(--secondary);
    }

    .mobile-shop-cat__group-children a:hover::before {
        border-color: var(--secondary);
    }
}


/* ============================================================
   16. MOBILE STAMPS GUIDE ACCORDION
============================================================ */
@media (max-width: 991px) {

    .mobile-stamps-guide {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0 !important;
    }

    .mobile-stamps-guide__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 50px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        user-select: none;
    }

    .mobile-stamps-guide__header span {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-stamps-guide__header i {
        color: var(--secondary);
        font-size: 14px;
    }

    .mobile-stamps-guide__chevron {
        font-size: 12px;
        color: #999;
        transition: transform 0.25s ease;
        pointer-events: none;
    }

    .mobile-stamps-guide.open .mobile-stamps-guide__chevron {
        transform: rotate(180deg);
    }

    .mobile-stamps-guide__body {
        display: none;
        background: #f7f7f7;
        padding: 4px 0 8px;
    }

    .mobile-stamps-guide.open .mobile-stamps-guide__body {
        display: block;
    }
}