/* 1. White top header */
.col-full.topbar-wrapper,
#masthead.site-header,
.col-full-nav {
    background-color: #ffffff !important;
}
.col-full.topbar-wrapper,
.col-full.topbar-wrapper a,
.col-full.topbar-wrapper span,
.col-full.topbar-wrapper p,
#masthead .main-header a,
#masthead .secondary-navigation a,
#masthead .secondary-navigation li > a,
.col-full-nav,
.col-full-nav a,
.col-full-nav .main-navigation ul li > a,
.col-full-nav .main-navigation ul li a span,
.col-full-nav .shoptimizer-cart a.cart-contents,
.col-full-nav .shoptimizer-cart a.cart-contents .amount {
    color: #1a1a1a !important;
}

/* 2. Hero slides — uniform full-width + prominent "Autumn Sale" badge */
.ss-hero-slide {
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Hide bare "Autumn Sale" text node that exists on slides 1 & 2 */
    font-size: 0 !important;
    color: transparent !important;
}
.ss-hero-slide > a,
.ss-hero-slide .ss-seasonal-badge,
.ss-hero-slide .ss-seasonal-badge > a,
.ss-hero-slide > .ss-hero-overlay,
.ss-hero-slide .ss-seasonal-badge > .ss-hero-overlay {
    display: block !important;
    width: 100% !important;
    font-size: initial !important;
    color: initial !important;
}
.ss-hero-slide img {
    aspect-ratio: 1280 / 480 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    object-fit: cover !important;
}
.ss-hero-slide .ss-hero-overlay {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
/* Hide the bare "Autumn Sale" text node inside .ss-seasonal-badge, render a styled pill instead */
.ss-hero-slide .ss-seasonal-badge {
    font-size: 0 !important;
    color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    position: static !important;
}
.ss-hero-slide .ss-seasonal-badge > a,
.ss-hero-slide .ss-seasonal-badge > .ss-hero-overlay {
    font-size: initial !important;
    color: initial !important;
}
.ss-hero-slide::before {
    content: "Autumn Sale";
    position: absolute;
    top: 18px;
    left: 24px;
    z-index: 5;
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(220,38,38,0.45), 0 0 0 2px rgba(255,255,255,0.85);
    font-family: inherit;
}

/* 3. Centre Offer of the Week card */
.ss-offer-card {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center;
}

/* 3b. Offer of the Week — title link should NOT be a button */
.ss-offer-card h3 a,
.ss-offer-card .ss-offer-img a {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    font-size: inherit !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}
.ss-offer-card h3 a:hover {
    color: #f97316 !important;
    filter: none !important;
}


/* 4. Fix theme bug: first H1/H2/P floating over hero banner */
body.page-template-template-canvas .entry-content > h1:first-of-type,
body.page-template-template-canvas .entry-content > h2:first-of-type,
body.page-template-template-canvas .entry-content > p:first-of-type {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
}

/* 5. Brands we stock — row layout, height-based sizing */
body.page-template-template-canvas .entry-content > p:has(> a[href*="/brand/"]) {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 0 !important;
    max-width: 100%;
}
body.page-template-template-canvas .entry-content > p:has(> a[href*="/brand/"]) br {
    display: none !important;
}
body.page-template-template-canvas .entry-content > p > a[href*="/brand/"] {
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    flex: 0 0 auto;
    display: inline-block !important;
    box-shadow: none !important;
    line-height: normal !important;
}
body.page-template-template-canvas .entry-content > p > a[href*="/brand/"] img {
    aspect-ratio: 2 / 1 !important;
    width: auto !important;
    height: 60px !important;
    max-width: 180px !important;
    max-height: 60px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* 6. Category tiles — bigger heading + styled "Shop Now" button */
.category-grid figure,
.category-grid-extra figure,
.promo-banner figure {
    cursor: pointer;
}
.category-grid figcaption,
.category-grid-extra figcaption,
.promo-banner figcaption {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    padding: 18px 22px 22px !important;
    pointer-events: none !important;
}
.category-grid figcaption strong,
.category-grid-extra figcaption strong,
.promo-banner figcaption strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.promo-banner figcaption strong { font-size: 28px !important; }
.category-grid figcaption em,
.category-grid-extra figcaption em,
.promo-banner figcaption em {
    display: block !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    font-style: normal !important;
}
.category-grid figcaption::after,
.category-grid-extra figcaption::after,
.promo-banner figcaption::after {
    content: "Shop Now";
    display: inline-block;
    padding: 10px 22px;
    background-color: #ea580c !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* 7. Add-to-cart buttons — centred, pill-rounded, breathing room */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce .product a.add_to_cart_button,
.woocommerce a.added_to_cart {
    display: block !important;
    margin: 12px auto 4px !important;
    width: fit-content !important;
    min-width: 150px;
    max-width: 90%;
    padding: 11px 26px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}


/* 7b. Add-to-cart centering — theme uses position:absolute, so left/right:0 + margin auto */
body .woocommerce ul.products li.product a.button.add_to_cart_button,
body .woocommerce ul.products li.product .button.add_to_cart_button {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: fit-content !important;
    max-width: 90% !important;
}
/* Swap transform hover for composited filter (helps CLS + non-composited animations) */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.category-grid figure:hover,
.category-grid-extra figure:hover,
.promo-banner figure:hover {
    transform: none !important;
    filter: brightness(1.06) !important;
    transition: filter 0.15s ease !important;
}


/* 8. GLOBAL BUTTON STYLE — matching Autumn Sale gradient pill */
.woocommerce a.button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce .button.alt,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.ss-hero-overlay a,
.ss-hero-overlay .button,
.ss-offer-card a.ss-offer-btn,
.ss-offer-card .button,
.entry-content a.button,
.wp-block-button__link {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(220,38,38,0.35), 0 0 0 2px rgba(255,255,255,0.85) !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    transition: filter 0.15s ease !important;
    text-decoration: none !important;
}
.woocommerce a.button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product a.button:hover,
.ss-hero-overlay a:hover,
.ss-offer-card a.ss-offer-btn:hover,
.entry-content a.button:hover,
.wp-block-button__link:hover {
    filter: brightness(1.08) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Shop Now pseudo-buttons — match the gradient */
.category-grid figcaption::after,
.category-grid-extra figcaption::after,
.promo-banner figcaption::after {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 14px rgba(220,38,38,0.35), 0 0 0 2px rgba(255,255,255,0.85) !important;
}


/* 9. Mega menu — delay hide so users have time to move cursor down */
.col-full-nav .main-navigation ul li > .sub-menu-wrapper {
    transition: opacity 0.2s ease 0s, visibility 0s linear 0s !important;
    opacity: 0;
    visibility: hidden;
}
.col-full-nav .main-navigation ul li:hover > .sub-menu-wrapper {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease 0s, visibility 0s linear 0s !important;
}
/* Keep submenu open with a generous hover zone */
.col-full-nav .main-navigation ul li > .sub-menu-wrapper {
    padding-top: 8px !important;
    margin-top: -8px !important;
}
/* Delay the hide — submenu stays visible 300ms after mouse leaves */
.col-full-nav .main-navigation ul li > .sub-menu-wrapper {
    transition-delay: 0.3s !important;
}
.col-full-nav .main-navigation ul li:hover > .sub-menu-wrapper {
    transition-delay: 0s !important;
}

/* 10. Hide duplicate reviews strip above footer (same content as .ss-social-proof in page body) */
.footer-reviews-strip {
    display: none !important;
}

/* 11. Mega menu nested sub-menu visibility control.
   Level 2 wrappers (column content like "Brands A-C") show when mega menu is open.
   Level 3 wrappers (actual brand links) only show when their parent "Brands X-Y" is hovered. */

/* Hide ALL nested sub-menu-wrappers by default */
.col-full-nav .main-navigation ul.menu li.full-width ul li > .sub-menu-wrapper.sub-menu-wrapper {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Show LEVEL 2 wrappers when parent mega menu is open */
.col-full-nav .main-navigation ul.menu li.full-width:hover > .sub-menu-wrapper .sub-menu-wrapper.sub-menu-wrapper,
.col-full-nav .main-navigation ul.menu li.full-width.visible > .sub-menu-wrapper .sub-menu-wrapper.sub-menu-wrapper {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Re-hide LEVEL 3 wrappers (brand lists inside "Brands A-C" etc.) - flyout on hover */
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children > .sub-menu-wrapper.sub-menu-wrapper {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    min-width: 240px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 99999 !important;
    background: #2d2d2d !important;
    border-left: 2px solid #4CAF50;
    padding: 10px 0 !important;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
/* Ensure brand items inside flyout display as a vertical list */
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children > .sub-menu-wrapper.sub-menu-wrapper ul {
    display: flex !important;
    flex-direction: column !important;
}
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children > .sub-menu-wrapper.sub-menu-wrapper ul li {
    width: 100% !important;
    padding: 0 !important;
}
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children > .sub-menu-wrapper.sub-menu-wrapper ul li a {
    padding: 6px 20px !important;
    white-space: nowrap !important;
    display: block !important;
    font-size: 13px !important;
}
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children > .sub-menu-wrapper.sub-menu-wrapper ul li a:hover {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #4CAF50 !important;
}

/* Show LEVEL 3 flyout when parent "Brands X-Y" item is hovered */
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children:hover > .sub-menu-wrapper.sub-menu-wrapper {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Make "Brands X-Y" items position relative for flyout anchoring */
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children {
    position: relative !important;
}




/* Session 5 addition to Section 11 — skip rendering level-3 brand wrappers until needed.
   Mitigates the +1.6s Speed Index / +180ms TBT / 1,959-element DOM regression
   introduced by adding 566 brand menu items in Session 4.

   content-visibility: hidden tells the browser to skip layout/paint/style work
   for the element's subtree entirely until it becomes visible. It is cheap and
   reversible. Unlike display:none, preserved render state speeds up re-appearance
   on hover. */

/* Apply content-visibility: hidden to all hidden level-3 brand wrappers. */
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children > .sub-menu-wrapper.sub-menu-wrapper {
    content-visibility: hidden !important;
    contain-intrinsic-size: 0 240px !important;
}

/* Restore rendering when the parent "Brands X-Y" item is hovered (alongside the existing visibility rule). */
.col-full-nav .main-navigation ul.menu li.full-width > .sub-menu-wrapper .sub-menu-wrapper .menu-item-has-children:hover > .sub-menu-wrapper.sub-menu-wrapper {
    content-visibility: visible !important;
}