/* RapitwebGreen - header (Shared/Partials/Header.cshtml, Modern-style: promo bar, logo,
   inline desktop menu, inline search, icon cluster, two offcanvas drawers; on phones the
   icon cluster becomes a bottom tab bar).
   GrandNode/Bootstrap classes (header-nav, container, menu-container, menu-toggler,
   top-header-items, contrast-switch, offcanvas, b-sidebar-*, user-panel, Menu -vertical,
   store-logo, qty-indicator) are left as-is; this theme styles them with its own tokens
   instead of GrandNode's hardcoded colours, and only rwg-* is this theme's own markup.
   Logical properties throughout (inline-size, inset-inline-*, margin-block, ...) so the
   same rules serve RTL and LTR with no separate stylesheet. */
a {
    text-decoration: none;
}

.bg-info {
    background: var(--main) !important;
}

.b-icon {
    outline: none;
}

.header-nav .b-icon.bi {
    font-size: 24px;
}

.dropdown-toggle::after {
    display: none;
}

.navbar-nav .nav-link {
    position: relative;
    cursor: pointer;
}

/* promo bar */
.rwg-promo {
    inline-size: 100%;
    background: var(--main);
    color: var(--white);
    font-size: .8rem;
    text-align: center;
    padding-block: .45rem;
}

    .rwg-promo a {
        color: var(--white);
        text-decoration: underline;
    }

/* header shell */
.header-nav.rwg-header {
    position: relative;
    inset-block-start: 0;
    z-index: 1030;
    inline-size: 100%;
    background: unset;
    backdrop-filter: unset;
    box-shadow: var(--shadow-md);
    border-block-end: 1px solid var(--gray);
    font-family: var(--font-header);
}

.rwg-header .container {
    max-inline-size: var(--container);
}

/* row 1: hamburger / logo / icon cluster. space-between so the logo group and the
   icon cluster sit at opposite ends - nothing here has flex-grow, so without this
   they'd collapse together at the start edge instead of spanning the row. */
.rwg-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
    padding-block: .75rem;
}

/* row 2: full-width menu bar, visually separated from row 1 */
.rwg-menu-row {
    border-block-start: 1px solid var(--white);
    background: var(--white);
}

    .rwg-menu-row .container {
        padding-block: .15rem;
    }

/* logo */
.store-logo img {
    inline-size: auto;
    block-size: auto;
    max-block-size: 53px;
}

.store-logo,
.store-logo a {
    font-family: var(--font-header);
}

/* only matters if the logo is text, not an <img> */

/* hamburger (phones/tablets) */
.menu-container .menu-toggler {
    display: none;
    inline-size: 50px;
    block-size: 31px;
    background: transparent !important;
    border: 0 !important;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.menu-toggler span {
    inline-size: 30px;
    block-size: 3px;
    background: var(--text);
}

/* desktop inline menu */
.rwg-menu {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    overflow-x: auto;
}

    .rwg-menu li > a {
        display: block;
        white-space: nowrap;
        font-size: 0.85rem;
        font-weight:600;
        color: var(--muted);
        padding: .4rem .7rem;
        border-radius: .8rem;
        transition: .2s;
    }

        .rwg-menu li > a:hover {
            background: var(--gray);
            color: var(--text);
        }

/* search: no inline box in this layout - the SearchBox component renders inside
   the #search-box modal instead (Default's pattern), opened from the .rw-item
   search icon in the cluster below. The modal's own look is themed further down. */

/* icon cluster shell: holds three kinds of cell -
   .nav-link        -> plain icon circle, no label (contrast-switch's wrapper)
   .rw-item         -> this theme's own markup: icon circle + two-line label/value
   ShoppingCartLinks -> partial's own unknown markup, themed generically via qty-indicator below */
.top-header-items {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-shrink: 0;
}

    .top-header-items .nav-link {
        display: grid;
        place-items: center;
        inline-size: 38px;
        block-size: 38px;
        border-radius: 50%;
        background: var(--gray);
        color: var(--muted);
        transition: .2s;
        padding: 0;
    }

        .top-header-items .nav-link:hover {
            background: var(--white);
            color: var(--main);
            box-shadow: var(--shadow-sm);
        }

/* rw-item: label above value, used for account + search cells */
.rw-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    border-radius: var(--radius);
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background .2s;
}

    .rw-item:hover {
        background: color-mix(in srgb, var(--gray) 60%, transparent);
    }

.rw-item__icon {
    position: relative;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--gray);
    color: var(--muted);
    transition: .2s;
}

    .rw-item__icon i {
        font-size: 1.1rem;
    }

/* independent of .b-icon so it works even if that class is dropped from the markup */
.rw-item:hover .rw-item__icon {
    background: var(--white);
    color: var(--main);
    box-shadow: var(--shadow-sm);
}

.rw-item__label {
    display: block;
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.25;
    text-align: right;
}

.rw-item__value {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

.rw-item__badge {
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: -4px;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 4px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--main);
    color: var(--white);
    font-size: .62rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--white);
}

.rw-actions__divider {
    inline-size: 1px;
    block-size: 32px;
    align-self: center;
    background: var(--gray);
    list-style: none;
}

/* cart badge: ShoppingCartLinks' own markup, unknown beyond this class name (from doc3) */
.qty-indicator {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -5px;
    inline-size: 18px;
    block-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
    background: var(--main);
    border-radius: 50%;
}

/* dark-mode switch: hide the native checkbox look, keep sun/moon icons centred like
   the other icon-circle cells. Bootstrap's form-check/form-switch classes carry their
   own padding-left and margin-left (space reserved for a visible track) - left alone,
   that pushes the label off-centre inside the 38px circle, so it's reset here to zero. */
.contrast-switch {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    margin: 0;
    min-height: 0;
}

    .contrast-switch .bi {
        font-size: 1.15rem;
    }

    /* independent of .b-icon, same reason as .rw-item__icon i above */
    .contrast-switch .form-check-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        margin: 0;
        inline-size: 100%;
        block-size: 100%;
        float: none;
    }

    .contrast-switch .form-check-label {
        display: grid;
        place-items: center;
        padding: 0;
        margin: 0;
    }

    .contrast-switch .dark {
        display: none;
    }

    .contrast-switch .form-check-input:checked ~ .form-check-label .light {
        display: none;
    }

    .contrast-switch .form-check-input:checked ~ .form-check-label .dark {
        display: block;
        color: var(--main);
    }

/* ===== desktop cascading dropdown (Components/Menu/Default.cshtml) =====
   Same markup renders in two places: inline here in .rwg-menu-row, and again inside
   #sidebar-menu's offcanvas wrapped in <ul class="Menu -vertical"> (the mobile accordion,
   with its "back" row and "sub-cat-name-container" - untouched, still styled further
   down under offcanvas drawers). This block only targets the .rwg-menu copy, so the two
   presentations don't collide.
   - a category with no children renders <a href="...">: a plain link, styled above.
   - a category WITH children renders <div> (no href) for the label, plus Brands/Collections
     use <a href="#">; neither should look clickable - the <li> opens the panel on
     hover/focus, not a click on the label.
   - panels use opacity/visibility/translateY rather than display:none so hover transitions
     animate, and translateY (not translateX) so nothing needs mirroring for RTL. */
@media (min-width: 992px) {
    .rwg-menu {
        overflow: visible;
    }

        /* mobile's overflow-x:auto would clip panels under min-width:992px */
        .rwg-menu > li {
            position: relative;
        }

            .rwg-menu > li.-hasSubmenu > div,
            .rwg-menu > li.-hasSubmenu > a {
                display: flex;
                align-items: center;
                gap: .3rem;
                cursor: default;
                white-space: nowrap;
                font-size: 0.85rem;
                font-weight:600;
                color: var(--muted);
                padding: .4rem .7rem;
                border-radius: .8rem;
                transition: background .2s, color .2s;
            }



            .rwg-menu > li.-hasSubmenu:hover > div,
            .rwg-menu > li.-hasSubmenu:hover > a,
            .rwg-menu > li.-hasSubmenu:focus-within > div,
            .rwg-menu > li.-hasSubmenu:focus-within > a {
                background: var(--gray);
                color: var(--text);
            }

            .rwg-menu > li.-hasSubmenu > div::after,
            .rwg-menu > li.-hasSubmenu > a::after {
                content: "\F282";
                font-family: bootstrap-icons, sans-serif;
                font-size: .65rem;
                opacity: .55;
            }

            /* first-level panel */
            .rwg-menu > li.-hasSubmenu > ul {
                position: absolute;
                inset-inline-start: 0;
                inset-block-start: 100%;
                min-inline-size: 230px;
                margin-block-start: .4rem;
                background: var(--white);
                border: 1px solid var(--gray);
                border-radius: var(--radius);
                box-shadow: var(--shadow-md);
                padding: .5rem;
                list-style: none;
                opacity: 0;
                visibility: hidden;
                transform: translateY(6px);
                transition: opacity .18s ease, transform .18s ease, visibility .18s;
                z-index: 1040;
            }

            .rwg-menu > li.-hasSubmenu:hover > ul,
            .rwg-menu > li.-hasSubmenu:focus-within > ul {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

        /* mobile-only rows inside the panel: drop the "back" row, turn "show all" into the panel's title link */
        .rwg-menu .back {
            display: none;
        }

        .rwg-menu .sub-cat-name-container > a {
            display: block;
            font-size: .8rem;
            font-weight: 600;
            color: var(--white);
            padding: .4rem .6rem .6rem;
            margin-block-end: .3rem;
            border-block-end: 1px solid var(--gray);
        }

        .rwg-menu ul li > a {
            display: block;
            padding: .4rem .6rem;
            border-radius: .6rem;
            font-size: .83rem;
            color: var(--text);
            white-space: nowrap;
        }

            .rwg-menu ul li > a:hover {
                background: var(--gray);
            }

        /* category icon + flag badge: the flex label rows (li.-hasSubmenu's own div/a above)
     already space icon/text/badge via gap; plain <a> rows - leaf categories, rows inside a
     panel, brand/collection rows - are display:block, so the icon needs its own margin.
     margin-inline (both sides) rather than margin-inline-end because icon order differs:
     CategoryLine.Menu puts the icon BEFORE the title (<i class="category-icon">, then
     <span>), Default.cshtml's brand/collection rows put it AFTER (<span class="title">,
     then <span class="category-icon ...">) - one end-only margin can't space both. */
        .rwg-menu li > a .category-icon {
            margin-inline: .35rem;
        }

        .rwg-menu i.category-icon {
            font-size: .85rem;
        }

        /* bootstrap-icons glyph, as used by CategoryLine.Menu */
        .rwg-menu .badge {
            font-size: .62rem;
            vertical-align: middle;
        }

        /* nested submenu (sub-sub-category): cascades to the side instead of stacking below */
        .rwg-menu li.-hasSubmenu li.-hasSubmenu {
            position: relative;
        }

            .rwg-menu li.-hasSubmenu li.-hasSubmenu > div,
            .rwg-menu li.-hasSubmenu li.-hasSubmenu > a {
                padding-inline-end: 1.4rem;
            }

            .rwg-menu li.-hasSubmenu li.-hasSubmenu > ul.sublist {
                position: absolute;
                inset-inline-start: 100%;
                inset-block-start: -.5rem;
                min-inline-size: 210px;
                margin-inline-start: .35rem;
                background: var(--white);
                border: 1px solid var(--gray);
                border-radius: var(--radius);
                box-shadow: var(--shadow-md);
                padding: .5rem;
                list-style: none;
                opacity: 0;
                visibility: hidden;
                transform: translateY(6px);
                transition: opacity .18s ease, transform .18s ease, visibility .18s;
            }

            .rwg-menu li.-hasSubmenu li.-hasSubmenu:hover > ul.sublist,
            .rwg-menu li.-hasSubmenu li.-hasSubmenu:focus-within > ul.sublist {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
}

/* ===== breakpoints =====
   >=992px: logo centred between two equal-width side columns, handled by .rwg-menu-row's
            flex-grow alone — no shared flex-basis:0 rule on all three columns (that starved
            top-header-items of its natural width and pushed the header out of shape).
   <=991.98px: inline menu hidden behind the hamburger, header pinned with a shadow.
   <=767.98px: icon cluster becomes a fixed bottom tab bar (thumb-reach on phones). */
@media (min-width: 992px) {

    /* Default's header.css/header.rtl.css both grow these three to equal width via
     flex-basis:0 + flex-grow:1, to centre the logo between two equal side columns.
     We don't want that: .rwg-menu-row is the only column that should grow. Same
     selector, same specificity, loaded after Default -> this wins, but only on the
     exact properties restated below; anything not restated here keeps Default's value. */
    .menu-container,
    .store-logo,
    .top-header-items {
        flex-basis: auto;
        flex-grow: 0;
        max-width: none;
    }

    /* desktop has no drawer trigger, so the whole wrapper is dropped from layout - not just
     its button - otherwise an empty flex item plus .rwg-row-top's gap still nudges the
     logo away from the true edge even though the item itself is invisible. */
    .menu-container {
        display: none;
    }

    .store-logo {
        text-align: center;
    }

    .top-header-items {
        justify-content: flex-end;
    }
}

@media (max-width: 991.98px) {

    .rwg-menu-row {
        display: none;
    }

    .menu-container .menu-toggler {
        display: flex;
    }

    .header-nav {
        margin-block-end: 0 !important;
        bottom: 0 !important;
        position: fixed !important;
    }

        .header-nav > .navbar {
            block-size: 58px;
        }

        .header-nav .store-logo img {
            max-inline-size: 100%;
            max-block-size: 40px;
        }

        .header-nav .store-logo {
            min-inline-size: 0;
            flex-shrink: 1;
            left: 1rem;
            position: absolute;
        }

        .header-nav .contrast-switch {
            display: none;
        }
}

@media (max-width: 767.98px) {
    .header-nav .top-header-items.navbar-nav {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        align-items: stretch;
        block-size: calc(60px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        padding-block-end: env(safe-area-inset-bottom, 0px);
        background: var(--white);
        border-block-start: 1px solid var(--gray);
        box-shadow: 0 -3px 6px rgb(0 0 0 / .12);
    }

    .header-nav .top-header-items li.nav-item {
        flex: 1 1 0;
        min-inline-size: 0;
    }

    /* the switch's cell is dropped too, not just hidden, so the remaining icons stay centred;
     dividers take no cell of their own on a tab bar, there's no room for them */
    .header-nav .top-header-items > .nav-item:has(.contrast-switch) {
        display: none !important;
    }

    .header-nav .top-header-items .rw-actions__divider {
        display: none;
    }

    .header-nav .top-header-items .nav-link,
    .header-nav .top-header-items .rw-item {
        flex: 1 1 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
    }

    .header-nav .top-header-items .rw-item__text {
        display: none;
    }

    /* icon only on the tab bar, no room for two lines of text */
    .header-nav .top-header-items .rw-item__icon {
        background: transparent;
    }

    .header-nav .top-header-items .qty-indicator,
    .header-nav .top-header-items .rw-item__badge {
        inset-block-start: 10px;
        inset-inline-start: calc(50% - 22px);
    }

    body {
        padding-block-end: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 420px) {
    .header-nav .top-header-items .nav-link {
        padding-inline: .25rem;
    }

    .header-nav .top-header-items .qty-indicator {
        inline-size: 15px;
        block-size: 15px;
        font-size: 10px;
        inset-block-start: -3px;
        inset-inline-start: -6px;
    }
}

@media (max-width: 380px) {
    .header-nav .navbar-brand img {
        max-inline-size: 120px;
    }
}

@media (max-width: 350px) {
    .header-nav .store-logo img {
        max-block-size: 30px;
    }

    .header-nav .top-header-items .b-icon.bi {
        font-size: 18px;
    }
}

/* ===== offcanvas drawers (sidebar-menu, sidebar-right, sidebar-cart) ===== */
.offcanvas {
    --bs-offcanvas-bg: var(--white);
    --bs-offcanvas-color: var(--text);
    --bs-offcanvas-border-color: var(--gray);
    --bs-offcanvas-width: 320px;
}

@media (min-width: 576px) {
    .b-sidebar {
        --bs-offcanvas-width: 530px;
    }
}

#sidebar-menu .b-sidebar-body {
    padding: 0;
}

.b-sidebar-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-block-end: 1px solid var(--gray);
    text-align: start;
}

    .b-sidebar-header strong {
        font-size: .95rem;
    }

.b-sidebar-body {
    padding: 15px;
}

    .b-sidebar-body .Menu.-vertical {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }

        .b-sidebar-body .Menu.-vertical a {
            display: block;
            padding: .55rem .75rem;
            border-radius: .8rem;
            font-size: .9rem;
            color: var(--text);
        }

            .b-sidebar-body .Menu.-vertical a:hover {
                background: var(--gray);
            }

/* user-panel: tax/currency/language/store/theme selectors inside the right drawer */
.user-panel .d-inline-flex > * {
    font-size: .8rem;
    padding: .35rem .65rem;
    border-radius: .7rem;
    background: var(--gray);
    color: var(--text);
    margin-inline-end: .35rem;
    margin-block-end: .35rem;
}

/* mini-cart drawer */
.sidebar-cart .item {
    position: relative;
    inline-size: 100%;
    margin-block-end: 7.5px;
    padding-block-end: 7.5px;
    text-align: start;
    border-block-end: 1px solid var(--gray);
}

    .sidebar-cart .item img {
        background-color: var(--bg);
    }

    .sidebar-cart .item:last-child {
        margin: 0;
        padding: 0;
        border-block-end: 0;
    }

    .sidebar-cart .item .attributes {
        font-size: 14px;
        color: var(--muted);
    }

    .sidebar-cart .item .deletecartitem {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        cursor: pointer;
    }

    .sidebar-cart .item .col a {
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
    }

@media (max-width: 575.98px) {
    .sidebar-cart .item img {
        max-inline-size: 75px;
    }

    .sidebar-cart .item .col a {
        display: table;
        max-inline-size: calc(100% - 15px);
        font-size: 14px;
        line-height: 1;
    }

    .sidebar-cart .item .price,
    .sidebar-cart .item .quantity {
        font-size: 14px;
    }

    .sidebar-cart .item .attributes {
        font-size: 12px;
    }

    .sidebar-cart .b-sidebar-footer .h4 {
        font-size: 20px;
    }

    .sidebar-cart .b-sidebar-footer .h5 {
        font-size: 16px;
    }
}

/* search modal (#search-box): Bootstrap's .modal, themed through its own variables
   like .offcanvas above, so Default's modal markup needs no class changes. */
.modal {
    --bs-modal-bg: var(--white);
    --bs-modal-color: var(--text);
    --bs-modal-border-color: var(--gray);
    --bs-modal-border-radius: var(--radius-lg);
}

#search-box .modal-body {
    padding: 1.5rem;
}

/* dark header: overrides now come from the token flip in tokens.css ([dark-theme="true"]),
   this file only has to touch the one GrandNode-coded element that doesn't read a token. */
[dark-theme="true"] .menu-toggler span {
    background: var(--text);
}

.navbar-expand {
    background: var(--white);
}

/* RapitwebGreen - mobile / tablet header: logo + menu button on top, icon bar fixed to the bottom of the screen.
   Load after header.css (Head.cshtml). Tokens only. Below 992px; desktop keeps the two-row header untouched. */

/* the home link exists in the markup for every width, but only the bottom bar shows it */
.rwg-header .rw-actions > li.rw-nav-home {
    display: none;
}

/* RapitwebGreen - header fixes. Append at the VERY END of header.css (it relies on coming last).
   Tokens only. Each block says which problem it fixes. */

/* 1. Phone/tablet header. The old rule gave .header-nav "position: fixed; bottom: 0" while the base rule
      already has inset-block-start: 0. A fixed box with both top AND bottom set and no height stretches to
      the whole viewport: a transparent layer over the page that swallows every tap.
      Default's header is position: sticky, so go back to that: it stays in the flow (no padding-top needed). */
@media (max-width: 991.98px) {
    .header-nav.rwg-header {
        position: sticky !important;
        inset-block-start: 0 !important;
        inset-block-end: auto !important;
        margin-block-end: 0 !important;
    }
}

/* 2. Bottom tab bar: the item had "display: contents", which removes the link's own box, so the padding,
      width and "big touch target" above it never applied and only the 38px icon was tappable. */
@media (max-width: 991.98px) {
    .rwg-header .rw-actions .rw-item {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 100%;
        block-size: 100%;
    }
}

/* 3. Colours that never showed: the global a { color: var(--muted) !important } in base.css beats a
      normal declaration on any <a>, so these need !important too. */
.rwg-promo a {
    color: var(--white) !important;
}

.rwg-menu li > a:hover,
.rwg-menu > li.-hasSubmenu:hover > a,
.rwg-menu > li.-hasSubmenu:focus-within > a {
    color: var(--text) !important;
}

.rwg-menu ul li > a,
.b-sidebar-body .Menu.-vertical a {
    color: var(--text) !important;
}

/* panel title ("show all") was var(--white) on a var(--white) panel */
.rwg-menu .sub-cat-name-container > a {
    color: var(--text) !important;
}

/* 4. The divider between the two header rows was white on white */
.rwg-menu-row {
    border-block-start-color: var(--gray);
}

/* 5. Physical -> logical, so RTL and LTR both work */
.rw-item__label {
    text-align: start;
}

.advanced-search-results .alert{
    font-size:0.6rem;
    border:unset;
    background:var(--gray)
}