/**
 * BW RESPONSIVE — v6
 * Mobile:  @media (max-width: 767px)
 * Desktop: @media (min-width: 768px)
 */


/* ============================================================
   GLOBAL OVERRIDES
   ============================================================ */

/* Hide old home top slider */
.home-top-slider { display: none !important; }


/* ============================================================
   SHARED
   ============================================================ */

/* Search: always show, hide Magento toggle */
.block-search .block-title,
.block-search .label { display: none !important; }
.block-search .block-content { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* Search form: position:relative so button can sit inside the pill */
form#search_mini_form { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.block-search .field.search { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.block-search .control { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; }

/* Input */
.block-search input#search,
.block-search input.input-text {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 25px !important;
    border: 2px solid #ddd !important;
    background: #fff !important;
}

/* Button container: absolute, inside right end of pill */
form#search_mini_form .actions {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
    line-height: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Search button base */
.block-search .action.search {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 0 !important;
}
.block-search .action.search:before { display: none !important; }
.block-search .action.search svg { display: block; flex-shrink: 0; }

/* Cart button */
.action.showcart:before { display: none !important; }
.action.showcart .text { display: none !important; }
.action.showcart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}
.action.showcart .counter.qty {
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    line-height: 18px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #e02020 !important;
    color: #fff !important;
    border-radius: 50% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.action.showcart .counter.qty.empty { display: none !important; }

/* Icons group */
.header-icons-group { display: flex !important; align-items: center !important; }

/* Account dropdown: hidden by default, jQuery toggles via inline style */
#navAccount { display: none; }

/* Typography */
nav.rootmenu > ul.rootmenu-list > li > a { font-family: 'Altivo Bold', Altivo, sans-serif !important; }
.usp-text strong { font-family: 'Altivo Bold', Altivo, sans-serif !important; }
.usp-text span   { font-family: Altivo, sans-serif !important; }
.usp-tp-line1    { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.usp-tp-stars    { display: flex; gap: 1px; align-items: center; }
.usp-tp-wordmark { font-family: Arial, sans-serif !important; font-weight: 700; font-size: 1.1rem; color: #191919; white-space: nowrap; }
.usp-tp-stars svg { display: block; }
/* USP bar — unified v2 style across all pages */
.usp-bar-outer { background: #f8f8f8 !important; border-radius: 12px !important; margin: 8px auto !important; max-width: 1440px !important; }
.usp-bar-inner { display: flex !important; justify-content: space-around !important; align-items: center !important; flex-wrap: nowrap !important; gap: 16px !important; padding: 16px 20px !important; }
.usp-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; text-decoration: none !important; color: inherit !important; }
.usp-item .usp-icon { flex-shrink: 0 !important; }
.usp-item .usp-icon svg { width: 28px !important; height: 28px !important; }
.usp-item .usp-text strong { display: block !important; font-size: 12px !important; font-weight: 800 !important; color: #111 !important; letter-spacing: 0.2px !important; }
.usp-item .usp-text span { font-size: 11px !important; color: #888 !important; }

/* Global: hide Magento theme USP on all pages (homepage has its own in CMS, other pages don't need it) */
.usp-bar-outer,
.nav-sections .usp-bar-outer,
.bw-mobile-header-extras .usp-bar-outer { display: none !important; height: 0 !important; overflow: hidden !important; }
/* Hide category strip and mobile extras on homepage only */
body.cms-index-index .category-strip-wrapper,
body.cms-index-index .nav-sections .category-strip-wrapper,
body.cms-index-index .bw-mobile-header-extras { display: none !important; height: 0 !important; overflow: hidden !important; }


/* ============================================================
   MOBILE — max-width: 767px
   ============================================================ */
@media (max-width: 767px) {

    .trustpilot.panel.header { display: none !important; }
    .page-header { background: #000 !important; position: relative !important; z-index: 100 !important; }

    /* Mobile drawer fix - ensure rootmenu is visible and clickable when nav-open */
    .nav-open .nav-sections {
        z-index: 1000 !important;
        background: #fff !important;
    }
    .nav-open .nav-sections-items,
    .nav-open .nav-sections-item-content {
        display: block !important;
        background: #fff !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    .nav-open nav.rootmenu,
    .nav-open nav.rootmenu .rootmenu-list,
    .nav-open nav.rootmenu .rootmenu-list li,
    .nav-open nav.rootmenu .rootmenu-list li a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1002 !important;
    }
    .nav-open nav.rootmenu .rootmenu-list li a {
        color: #333 !important;
        background: #fff !important;
        padding: 14px 20px !important;
        border-bottom: 1px solid #eee !important;
    }

    /*
     * Header: 3-col grid
     * col1=hamburger  col2=logo(centred)  col3=icons
     * row2=search bar spanning all cols
     */
    .header.content {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        background: #000 !important;
        padding: 12px 16px 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Hamburger */
    .nav-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .nav-toggle:before { color: #fff !important; font-size: 24px !important; line-height: 1 !important; }

    /* Logo: centred regardless of icon widths */
    .header.content .logo {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        margin: 0 !important;
        float: none !important;
        text-align: center !important;
    }
    .header.content .logo img { max-width: 160px !important; height: auto !important; }

    /* Icons: col3 row1 — float/width reset to beat theme */
    .header.content .minicart-wrapper {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        float: none !important;
        text-align: left !important;
    }
    .header-icons-group { gap: 10px !important; }
    .header-wishlist-btn { display: none !important; }

    /* Account icon: white, 24px */
    .UserBlocklogin { display: flex !important; align-items: center !important; }
    .UserBlocklogin .header-svg-icon {
        filter: brightness(0) invert(1) !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Cart icon: transparent + white icon when empty */
    .header-basket-wrap {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border-radius: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }
    .header-basket-icon {
        filter: brightness(0) invert(1) !important;
        width: 24px !important;
        height: 24px !important;
    }
    /* Yellow circle when items in cart */
    .header-basket-wrap:has(.counter.qty:not(.empty)) {
        background: #f0af00 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }
    .header-basket-wrap:has(.counter.qty:not(.empty)) .header-basket-icon {
        filter: none !important;
        width: 20px !important;
        height: 20px !important;
    }
    .action.showcart .counter.qty {
        top: -6px !important;
        right: -6px !important;
        bottom: auto !important;
        left: auto !important;
    }

    /* Search bar: row2, spans all cols */
    .header.content .block.block-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        padding: 10px 0 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Form = pill, flex so SVG button sits at end */
    form#search_mini_form {
        display: flex !important;
        align-items: center !important;
        border: 1px solid #e6e6e6 !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
        padding-right: 6px !important;
    }
    form#search_mini_form:focus-within { border-color: #f0af00 !important; }
    .block-search .field.search { flex: 1 1 auto !important; min-width: 0 !important; }
    .block-search .control { display: block !important; width: 100% !important; }

    /* Input: transparent, no border — form provides it */
    .block-search input#search,
    .block-search input.input-text {
        height: 46px !important;
        padding: 0 0 0 18px !important;
        font-size: 15px !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    /* Button: flex item, black circle, SVG white */
    form#search_mini_form .actions {
        position: static !important;
        transform: none !important;
        top: auto !important; right: auto !important;
        flex: 0 0 auto !important;
    }
    .block-search .action.search {
        display: flex !important;
        background: #000 !important;
        width: 36px !important; height: 36px !important; min-width: 36px !important;
        border-radius: 50% !important;
        color: #fff !important;
    }
    .block-search .action.search svg { stroke: #fff !important; width: 18px !important; height: 18px !important; }

    /* Nav */
    .nav-sections .usp-bar-outer,
    .nav-sections .category-strip-wrapper { display: none !important; }
    nav.rootmenu { background: #fff !important; border-top: none !important; }
    nav.rootmenu > ul.rootmenu-list > li > a { color: #333 !important; background: #fff !important; }

    /* USP bar: first item only */
    .usp-bar-inner { flex-wrap: nowrap !important; padding: 8px 16px !important; justify-content: center !important; }
    .usp-item:nth-child(n+2) { display: none !important; }
    .usp-item:nth-child(1) { flex: 0 0 100% !important; max-width: 100% !important; border: none !important; padding: 2px 0 !important; justify-content: center !important; }

    /* Category strip: horizontal scroll */
    .category-strip-inner { overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 10px !important; padding: 12px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .category-strip-inner::-webkit-scrollbar { display: none; }
    .cat-strip-item { flex: 0 0 80px !important; min-width: 80px !important; max-width: 80px !important; }
    .cat-strip-label { font-size: 1rem !important; }

    .bw-mobile-header-extras { display: block !important; }
}


/* ============================================================
   DESKTOP — min-width: 768px
   ============================================================ */
@media (min-width: 768px) {

    .trustpilot.panel.header { display: block !important; }

    /* Full-width backgrounds */
    .page-header,
    .page-header .panel.wrapper,
    .nav-sections,
    .usp-bar-outer,
    .category-strip-wrapper { width: 100% !important; max-width: none !important; }
    .page-header { background: #fff !important; }
    .nav-sections { background: #000 !important; border-top: 3px solid #f0af00 !important; position: relative !important; z-index: 99 !important; }

    /* Header: flex row, 72px height — content centred at 1280px */
    .header.content {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        background: transparent !important;
        padding: 0 24px !important;
        height: 72px !important;
        max-width: 1280px !important;
        width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }
    .nav-toggle { display: none !important; }

    /* Logo: left, ~40px height, 60px gap before search */
    .header.content .logo { flex: 0 0 auto !important; margin: 0 60px 0 0 !important; float: none !important; }
    .header.content .logo img { height: 40px !important; width: auto !important; max-width: none !important; }

    /* Search block: dominant, flex to fill space */
    .header.content .block.block-search { flex: 1 1 560px !important; min-width: 0 !important; max-width: 600px !important; order: 5 !important; padding: 0 !important; margin: 0 !important; float: none !important; }
    .block-search { float: none !important; }

    /* Icons group: tight to right */
    .header.content .minicart-wrapper { flex: 0 0 auto !important; margin-left: auto !important; order: 10 !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; }

    /* Input: 44px, 22px border-radius pill */
    .block-search input#search,
    .block-search input.input-text { height: 44px !important; padding: 0 50px 0 20px !important; font-size: 1rem !important; border-radius: 22px !important; }

    /* Button: black circle, 38px, 4px from right */
    form#search_mini_form .actions { right: 4px !important; }
    .block-search .action.search { background: #000 !important; width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 50% !important; color: #fff !important; }
    .block-search .action.search svg { stroke: #fff !important; width: 18px !important; height: 18px !important; }

    /* Icons: 18px gap, 22-24px size */
    .header-icons-group { gap: 18px !important; }
    .header-wishlist-btn { display: flex !important; }
    .UserBlocklogin { display: flex !important; }
    .UserBlocklogin .header-svg-icon { filter: none !important; width: 24px !important; height: 24px !important; }

    /* Cart: yellow circle */
    .header-basket-wrap { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f0af00 !important; border-radius: 50% !important; width: 40px !important; height: 40px !important; padding: 0 !important; }
    .header-basket-icon { filter: none !important; width: 20px !important; height: 20px !important; }
    .action.showcart .counter.qty { top: -6px !important; bottom: auto !important; right: -6px !important; left: auto !important; }

    /* Nav */
    .nav-sections .usp-bar-outer,
    .nav-sections .category-strip-wrapper { display: block !important; }
    /* Hide theme USP/category on redesigned homepage */
    body.cms-homepage-v2 .nav-sections .usp-bar-outer,
    body.cms-homepage-v2 .nav-sections .category-strip-wrapper,
    body.cms-homepage-v2 .usp-bar-outer,
    body.cms-homepage-v2 .category-strip-wrapper,
    body.cms-index-index .nav-sections .usp-bar-outer,
    body.cms-index-index .nav-sections .category-strip-wrapper,
    body.cms-index-index .usp-bar-outer,
    body.cms-index-index .category-strip-wrapper { display: none !important; }
    /* nav.rootmenu is constrained — border-top moved to .nav-sections above */
    nav.rootmenu { background: #000 !important; border-top: none !important; max-width: 1280px !important; margin: 0 auto !important; }
    nav.rootmenu > ul.rootmenu-list > li > a { padding: 18px 12px !important; }

    /* USP bar — v2 style */
    .usp-bar-inner { max-width: 1440px !important; margin: 0 auto !important; flex-wrap: nowrap !important; padding: 16px 20px !important; justify-content: space-around !important; gap: 16px !important; }
    .usp-item:nth-child(n+2) { display: flex !important; }
    .usp-item:nth-child(1) { flex: 1 !important; max-width: none !important; border-right: none !important; padding: 8px 12px !important; justify-content: center !important; }
    .usp-item { border-right: none !important; }
    .usp-text strong { font-size: 12px !important; font-weight: 800 !important; color: #111 !important; }
    .usp-text span { font-size: 11px !important; color: #888 !important; }

    /* Category strip */
    .category-strip-inner { max-width: 1280px !important; margin: 0 auto !important; overflow-x: visible !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 8px !important; padding: 14px 20px !important; }
    .cat-strip-item { flex: 1 !important; min-width: 0 !important; max-width: none !important; }
    .cat-strip-label { font-size: 1.15rem !important; }

    .bw-mobile-header-extras { display: none !important; }
}