/* ============================================================
   Refubly — chrome
   Split out of the old single refubly-theme.css, rule by rule: a selector
   rendered by exactly one page lives in that page's file, anything shared
   lives here. Media queries are re-wrapped per file, so each keeps only its
   own overrides.
   Load order: base -> chrome -> components -> <page>. Keep it.
   NOTE: theme sets html{font-size:62.5%} -> 1rem = 10px.
   ============================================================ */

/* Footer polish */

.footer .footer-newsletter form {
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 767px) {
    .footer .footer-bottom {
            flex-direction: column;
            gap: 1.2rem;
            text-align: center;
        }

    .footer .footer-bottom .footer-right {
            justify-content: center;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER NAVIGATION — clean, modern dropdown menus (brand green)
   Scoped to .header so only the storefront nav is affected.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Top-level nav links ── */

.header .main-nav{
    justify-items: center;
}

.header .main-nav .menu > li > a {
    font-family: var(--rf-font) !important;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--rf-ink);
    letter-spacing: -0.01em;
    transition: color .18s ease;
}

.header .main-nav .menu > li:hover > a,
.header .main-nav .menu > li.active > a {
    color: var(--rf-primary) !important;
}

/* ── Dropdown panels (category submenus + Shop-by-Brand) ── */

.header .main-nav .menu li .submenu {
    min-width: 24rem !important;
    padding: .8rem !important;
    background: #fff !important;
    border: 1px solid var(--rf-border) !important;
    border-radius: 1.4rem !important;
    box-shadow: 0 16px 40px rgba(13, 27, 61, .14) !important;
    max-height: min(70vh, 46rem);
    overflow-y: auto;
}

.header .main-nav .menu li .submenu > li { border: 0 !important; }

.header .main-nav .menu li .submenu > li > a {
    display: block !important;
    padding: 1rem 1.3rem !important;
    font-size: 1.35rem !important;
    font-weight: 500;
    line-height: 1.35;
    color: var(--rf-text) !important;
    border-radius: .9rem;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.header .main-nav .menu li .submenu > li > a:hover {
    background: var(--rf-primary-soft) !important;
    color: var(--rf-primary) !important;
    padding-left: 1.7rem !important;
}

.header .main-nav .menu li .submenu > li.active > a {
    color: var(--rf-primary) !important;
    font-weight: 600;
    background: var(--rf-primary-soft) !important;
}

/* ── "All Departments" toggle + panel ── */

.header .category-dropdown {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 50px !important;
}

.header .category-dropdown .category-toggle {
    border-radius: .9rem !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    white-space: nowrap !important;
}

.header .category-dropdown .dropdown-box {
    padding: .8rem !important;
    background: #fff !important;
    border: 1px solid var(--rf-border) !important;
    border-radius: 1.4rem !important;
    box-shadow: 0 16px 40px rgba(13, 27, 61, .14) !important;
}

.header .category-menu > li > a {
    padding: 1rem 1.3rem !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    color: var(--rf-text) !important;
    border-radius: .9rem;
    transition: background .15s ease, color .15s ease;
}

.header .category-menu > li:hover > a,
.header .category-menu > li > a:hover {
    background: var(--rf-primary-soft) !important;
    color: var(--rf-primary) !important;
}

/* ── Mega flyout (child category columns) ── */

.header .category-menu .megamenu {
    background: #fff !important;
    border: 1px solid var(--rf-border) !important;
    border-radius: 1.4rem !important;
    box-shadow: 0 16px 40px rgba(13, 27, 61, .14) !important;
    padding: 1.8rem 2rem !important;
}

.header .category-menu .megamenu a {
    display: block;
    padding: .7rem 1rem !important;
    font-size: 1.3rem !important;
    color: var(--rf-text) !important;
    border-radius: .7rem;
    transition: background .15s ease, color .15s ease;
}

.header .category-menu .megamenu a:hover {
    background: var(--rf-primary-soft) !important;
    color: var(--rf-primary) !important;
}

/* ── Slim scrollbars inside long dropdowns ── */

.header .main-nav .menu li .submenu::-webkit-scrollbar { width: 6px; }

.header .main-nav .menu li .submenu::-webkit-scrollbar-thumb {
    background: var(--rf-border);
    border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: Header & Navigation — 13" laptop / small desktop polish
   ══════════════════════════════════════════════════════════════════════════ */
/* ── 1366px and below (standard 13" laptop) ── */

@media (max-width: 1366px) {
    /* Tighten nav link sizing */

    .header .main-nav .menu > li > a {
            font-size: 1.35rem;
            padding-left: 1.2rem !important;
            padding-right: 1.2rem !important;
        }

    /* Compact the "All Departments" toggle */

    .header .category-dropdown .category-toggle {
            font-size: 1.28rem !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

    .header .category-dropdown .category-toggle span {
            font-size: 1.28rem;
        }

    /* Reduce header-bottom inner-wrap gap */

    .header-bottom .inner-wrap {
            gap: 0;
        }

    /* Tighten search bar */

    .header-search.hs-expanded {
            /* max-width: 420px; */
        }

    /* Compact header-top items */

    .header-top .header-right {
            font-size: 1.2rem;
            gap: .6rem;
        }

    .header-top .header-right a,
        .header-top .header-right button {
            font-size: 1.2rem;
        }

    /* Country switcher compact */

    .country-switcher__toggle {
            font-size: 1.2rem !important;
        }
}

/* ── 1280px and below (smaller 13" / scaled displays) ── */

@media (max-width: 1280px) {
    /* Further shrink nav links */

    .header .main-nav .menu > li > a {
            font-size: 1.3rem;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            letter-spacing: -0.01em;
        }

    /* Shrink All Departments text */

    .header .category-dropdown .category-toggle {
            font-size: 1.2rem !important;
            padding-left: .8rem !important;
            padding-right: .8rem !important;
        }

    .header .category-dropdown .category-toggle span {
            font-size: 1.2rem;
        }

    /* Tighter search */

    .header-search.hs-expanded {
            /* max-width: 360px; */
        }

    /* Reduce logo width slightly */

    .header-middle .logo img {
            max-width: 120px;
            height: auto;
        }

    /* Compact phone info */

    .header-call .call-info .phone-number {
            font-size: 1.3rem;
        }
}

/* ── 1199px and below (transitional before mobile breakpoint at 991px) ── */

@media (max-width: 1199px) {
    /* Even smaller nav links */

    .header .main-nav .menu > li > a {
            font-size: 1.25rem;
            padding-left: .8rem !important;
            padding-right: .8rem !important;
        }

    /* Hide "All Departments" text, keep the icon */

    .header .category-dropdown .category-toggle span {
            display: none;
        }

    .header .category-dropdown .category-toggle {
            padding-left: .8rem !important;
            padding-right: .8rem !important;
            min-width: auto !important;
        }

    /* Shrink search further */

    .header-search.hs-expanded {
            /* max-width: 300px; */
        }

    .header-search .select-box {
            display: none !important;
        }

    /* Hide phone number text, keep icon */

    .header-call .call-info {
            display: none !important;
        }

    /* Reduce logo */

    .header-middle .logo img {
            max-width: 110px;
        }

    /* Tighter header-middle spacing */

    .header-middle .header-left {
            margin-right: 1rem !important;
        }

    .header-middle .header-right {
            margin-left: 1rem !important;
        }
}

/* ── Ensure nav layout remains stable above 991px ── */

@media (min-width: 992px) {
    .header .main-nav .menu {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center;
            justify-content: flex-start;
        }

    .header .main-nav .menu > li {
            flex-shrink: 0;
        }

    .header-bottom .inner-wrap {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }

    .header-bottom .header-left {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }

    .header-bottom .header-right {
            flex-shrink: 0;
        }

    .header .main-nav {
            flex: 1 1 auto;
            min-width: 0;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: Header & Navigation — tablet and phone
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Flash sale / Special offers quick links (header-middle right) ── */

.rf-hdr-quick {
    font-size: 2.4rem;
    color: #333;
    margin-right: 1.5rem;
}

.rf-hdr-quick:last-of-type {
    margin-right: 2rem;
}

.rf-hdr-quick:hover {
    color: var(--rf-primary);
}

/* ── 991px and below: the drawer becomes the primary navigation ── */

@media (max-width: 991px) {
    /* The hamburger needs breathing room from the logo. */

    .header-middle .mobile-menu-toggle {
            margin-right: 1.2rem;
            font-size: 2.2rem;
        }

    .header-middle .logo {
            margin-left: 0 !important;
            margin-right: 1.2rem;
        }

    .header-middle .logo img {
            width: auto;
            max-width: 130px;
            height: auto;
        }

    .rf-hdr-quick {
            font-size: 2.2rem;
            margin-right: 1.2rem;
        }

    .rf-hdr-quick:last-of-type {
            margin-right: 1.2rem;
        }

    /* Country switcher is the only header-top item left; keep it compact. */

    .header-top .header-right {
            font-size: 1.2rem;
        }

    .country-switcher__menu {
            left: auto;
            right: 0;
        }
}

/* ── 575px and below: phones ── */

@media (max-width: 575px) {
    /* Everything has to fit one row next to the cart/wishlist icons, and the
       logo is the only element with a fixed intrinsic width. */

    .header-middle .logo img {
            max-width: 104px;
        }

    .header-middle .mobile-menu-toggle {
            margin-right: 1.4rem;
            font-size: 2rem;
        }

    .header-middle .header-left {
            margin-right: .4rem !important;
            min-width: 0;
        }

    .header-middle .header-right {
            margin-left: .4rem !important;
        }

    /* Flash sale + offers are duplicated in the drawer, so drop them here
       rather than let five icons crowd a 360px row. */

    .header-middle .rf-hdr-quick {
            display: none !important;
        }

    .header-middle .header-right .cart-dropdown {
            margin-right: .4rem !important;
        }

    .header-middle .header-right .cart-dropdown > a {
            font-size: 2rem;
        }
}

/* ── Mobile drawer: secondary links block ── */

.mobile-menu-wrapper .rf-mobile-secondary {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.mobile-menu-wrapper .rf-mobile-secondary i {
    width: 1.8rem;
    text-align: center;
}

.mobile-menu-wrapper .rf-mobile-secondary form {
    margin: 0;
}

.mobile-menu-wrapper .rf-mobile-logout {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER — one header on every page
   The home layout loads css/demo15.min.css and every other layout loads
   css/style.min.css. The two disagree about the header:
       .header-search.hs-expanded   max-width  96.2rem  vs  55.6rem
       .header-search .select-box   width      17.3rem  vs  14.6rem
       and demo15 rounds the select/button corners, style.min does not.
   So the search box was visibly wider on the homepage than anywhere else.
   refubly-theme.css loads after both, so these rules settle it once for
   every page rather than per layout.
   NOTE: theme sets html{font-size:62.5%} → 1rem = 10px.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Header top: the theme's own colours, just tidier and shorter ──────────
   Only the alignment and the height are ours. The bar keeps whatever palette
   the base stylesheet gives it.                                              */

.header-top {
    font-size: 1.25rem;
    line-height: 1.4;
}

.header-top > .container,
.header-top > .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Was ~4.4rem of mostly empty space above the logo. */
    min-height: 3.2rem;
}

.header-top .header-left,
.header-top .header-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-top: 0;
    padding-bottom: 0;
}

.header-top .header-right {
    margin-left: auto;
}

/* Direct children only — as a descendant selector this also matched the
   country menu's own <button> rows and flattened their padding to zero. */

.header-top .header-right > a,
.header-top .header-right .country-switcher__toggle,
.header-top .header-right > button,
.header-top .header-right > form > button {
    font-size: 1.25rem;
    line-height: 1.4;
    padding: 0;
    transition: color .18s ease;
}

.header-top .header-right > a:hover,
.header-top .header-right .country-switcher__toggle:hover,
.header-top .header-right button:hover {
    color: var(--rf-primary);
}

.header-top .header-right .divider,
.header-top .header-right .delimiter {
    margin: 0;
    opacity: .5;
}

.header-top .header-right i {
    font-size: 1.4rem;
    vertical-align: -.1em;
}

.header-top form {
    display: flex;
    align-items: center;
    margin: 0;
}

.country-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.country-switcher__toggle::after {
    content: "\f107";           /* fa-angle-down */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    opacity: .7;
}

.country-switcher__menu {
    border-radius: 1rem;
    border-color: var(--rf-border);
    box-shadow: 0 16px 40px rgba(13, 27, 61, .16);
    padding: .5rem;
    overflow: hidden;
}

.country-switcher__item {
    border-radius: .7rem;
    padding: .7rem 1rem;
    font-size: 1.3rem;
    color: var(--rf-text);
}

.country-switcher__item:hover {
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
}

/* ── Header middle: logo · search · actions on one baseline ────────────── */

.header-middle > .container,
.header-middle > .container-fluid {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 8rem;
}

.header-middle .header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0 !important;
}

.header-middle .header-right {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex: 0 0 auto;
    margin-left: 0 !important;
}

.header-middle .logo {
    flex: 0 0 auto;
    margin: 0 !important;
}

.header-middle .logo img {
    display: block;
    width: 14.4rem;
    height: auto;
}

/* ── The search box, identical on every page ───────────────────────────── */

.header-search.hs-expanded {
    flex: 1 1 auto;
    /* One number, not two. Wide enough to look deliberate next to the logo,
       narrow enough that the field never stretches across a 27" display. */
    max-width: 62rem;
    min-width: 0;
    margin: 0;
}

.header-search.hs-expanded .input-wrapper,
.header-search .input-wrapper {
    width: 100%;
}

.header-search.hs-expanded,
.header-search.hs-round.hs-expanded {
    height: 4.6rem;
}

.header-search.hs-expanded .select-box {
    flex: 0 0 auto;
    width: 15.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--rf-border);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: var(--rf-bg-soft);
    color: var(--rf-text);
    padding-left: 1.6rem;
}

.header-search.hs-expanded .select-box select {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--rf-text);
    padding: 0 2.2rem 0 0;
    cursor: pointer;
}

.header-search.hs-expanded .select-box::after {
    display: none;
}

.header-search.hs-expanded input.form-control,
.header-search.hs-round.hs-expanded .form-control {
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    min-width: 0;
    border: 1.5px solid var(--rf-border);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: #fff;
    font-size: 1.4rem;
    color: var(--rf-ink);
    padding: 0 1.6rem;
}

.header-search input.form-control::placeholder {
    color: var(--rf-muted);
    opacity: 1;
}

.header-search.hs-expanded .btn-search {
    flex: 0 0 auto;
    width: 5.6rem;
    height: 100%;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: var(--rf-primary);
    color: #fff;
    font-size: 1.9rem;
    transition: background .2s ease;
}

.header-search.hs-expanded .btn-search:hover,
.header-search.hs-expanded .btn-search:focus {
    background: var(--rf-primary-dark);
    color: #fff;
    opacity: 1;
}

/* Focus is a soft ring around the whole control, not a hard green box drawn
   on each segment. The inner borders stay neutral so the pill reads as one
   field rather than three outlined boxes. */

.header-search.hs-expanded {
    border-radius: 999px;
    transition: box-shadow .18s ease;
}

.header-search.hs-expanded:focus-within {
    box-shadow: 0 0 0 3px rgba(5, 128, 58, .14);
}

.header-search.hs-expanded input.form-control:focus,
.header-search.hs-expanded .select-box select:focus {
    outline: none;
    box-shadow: none;
}

/* ── Header actions (phone, quick links, wishlist, cart) ───────────────── */

.header-middle .header-call {
    gap: .9rem;
    margin: 0;
}

.header-middle .header-call .w-icon-call {
    font-size: 2.6rem;
    color: var(--rf-primary);
}

.header-middle .header-call .phone-number {
    font-size: 1.4rem;
    color: var(--rf-ink);
}

.rf-hdr-quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0;
    border-radius: 50%;
    font-size: 2.1rem;
    color: var(--rf-ink);
    transition: background .18s ease, color .18s ease;
}

.rf-hdr-quick:last-of-type {
    margin-right: 0;
}

.rf-hdr-quick:hover {
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
}

.header-middle .cart-dropdown {
    margin: 0 !important;
}

.header-middle .cart-dropdown > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 2.2rem;
    color: var(--rf-ink);
    transition: background .18s ease, color .18s ease;
}

.header-middle .cart-dropdown > a:hover {
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
}

.header-middle .cart-count {
    top: -.4rem;
    right: -.6rem;
    min-width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--rf-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ── Header bottom: the category bar ───────────────────────────────────── */

.header-bottom .inner-wrap {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    min-height: 5.2rem;
}

.header .category-dropdown .category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 4rem;
    padding: 0 1.4rem !important;
    border-radius: 999px !important;
    background: var(--rf-bg-soft) !important;
    color: var(--rf-ink) !important;
    transition: background .18s ease, color .18s ease;
}

.header .category-dropdown .category-toggle:hover {
    background: var(--rf-primary-soft) !important;
    color: var(--rf-primary) !important;
}

.header .category-dropdown .category-toggle i {
    font-size: 1.9rem;
}

.header .main-nav .menu {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.header .main-nav .menu > li {
    margin: 0;
}

.header .main-nav .menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 4rem;
    padding: 0 1.3rem !important;
    border-radius: .9rem;
    font-size: 1.4rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.header .main-nav .menu > li > a {
    position: relative;
}

/* Hover and active are both a rule under the label rather than a filled pill —
   the pill read as a button sitting in the middle of a text nav. The rule is
   drawn with a pseudo-element so it can grow from the centre. */

.header .main-nav .menu > li > a::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: .6rem;
    height: 2px;
    border-radius: 2px;
    background: var(--rf-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.header .main-nav .menu > li:hover > a::after {
    transform: scaleX(1);
}

/* The active section keeps its rule and takes the brand colour, so it does not
   rely on hue alone. */

.header .main-nav .menu > li.active > a {
    color: var(--rf-primary) !important;
}

.header .main-nav .menu > li.active > a::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .header .main-nav .menu > li > a::after { transition: none; }
}

/* The theme draws submenu carets with ::after on .has-submenu; keep them
   aligned with the new inline-flex link. */

.header .main-nav .menu > li.has-submenu > a::after {
    position: static;
    margin: 0;
    transform: none;
    font-size: 1.1rem;
    opacity: .6;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1366px) {
    .header-middle > .container,
        .header-middle > .container-fluid {
            gap: 1.6rem;
            min-height: 7.2rem;
        }

    .header-middle .header-left {
            gap: 1.6rem;
        }

    .header-search.hs-expanded {
            max-width: 48rem;
        }

    .header .main-nav .menu > li > a {
            padding: 0 1rem !important;
            font-size: 1.35rem;
        }
}

@media (max-width: 1199px) {
    .header-search.hs-expanded {
            max-width: none;
        }

    /* The category filter is the first thing to go — the field itself is
       what people actually use, and it needs the width. */

    .header-search.hs-expanded .select-box {
            display: none !important;
        }

    .header-search.hs-expanded input.form-control {
            border-left: 1.5px solid var(--rf-border);
            border-radius: 999px 0 0 999px;
        }

    .header .main-nav .menu > li > a {
            padding: 0 .8rem !important;
            font-size: 1.28rem;
        }
}

@media (max-width: 991px) {
    .header-middle > .container,
        .header-middle > .container-fluid {
            gap: 1.2rem;
            min-height: 6.4rem;
        }

    .header-middle .header-left {
            gap: 1.2rem;
        }

    .header-middle .logo img {
            width: 12rem;
        }

    /* Below the drawer breakpoint the search moves under the logo row so it
       keeps a usable width instead of being squeezed between the icons. */

    .header-middle .header-left {
            flex-wrap: wrap;
        }

    .header-search.hs-expanded {
            flex-basis: 100%;
            order: 3;
            margin-bottom: 1.2rem;
        }

    .header-middle > .container,
        .header-middle > .container-fluid {
            flex-wrap: wrap;
            padding-top: 1.2rem;
        }
}

@media (max-width: 575px) {
    .header-middle .logo img {
            width: 10.4rem;
        }

    .header-middle .header-right {
            gap: .6rem;
        }

    .rf-hdr-quick,
        .header-middle .cart-dropdown > a {
            width: 3.6rem;
            height: 3.6rem;
            font-size: 2rem;
        }

    .header-search.hs-expanded,
        .header-search.hs-round.hs-expanded {
            height: 4.2rem;
        }

    .header-top .header-right {
            gap: .9rem;
            font-size: 1.2rem;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER DROPDOWNS — country switcher, category filter, departments menu
   All three sat on top-bar/nav-bar stacking contexts that clipped or
   under-layered them, and each had its own idea of padding. One treatment.
   ══════════════════════════════════════════════════════════════════════════ */
/* A dropdown must be able to escape its bar. These bars were the reason the
   menus were being clipped at the header edge. */

.header-top,
.header-top > .container,
.header-top > .container-fluid,
.header-top .header-right,
.header-bottom,
.header-bottom > .container,
.header-bottom > .container-fluid,
.header-bottom .inner-wrap {
    overflow: visible;
}

/* ── Country switcher ──────────────────────────────────────────────────── */

.country-switcher {
    position: relative;
    z-index: 1001;
}

.country-switcher__toggle {
    cursor: pointer;
    white-space: nowrap;
}

.country-switcher__menu {
    position: absolute;
    top: calc(100% + .8rem);
    /* Right-anchored: the switcher sits at the right edge of the top bar, so a
       left-anchored panel ran off the page on narrow viewports. */
    left: auto;
    right: 0;
    z-index: 1200;
    min-width: 20rem;
    max-height: min(60vh, 34rem);
    overflow-y: auto;
    padding: .6rem;
    margin: 0;
    background: #fff;
    border: 1px solid var(--rf-border);
    border-radius: 1.2rem;
    box-shadow: 0 16px 40px rgba(13, 27, 61, .16);
}

.country-switcher__menu form {
    display: block;
    margin: 0;
}

.country-switcher__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .8rem 1.1rem;
    margin: 0;
    border: 0;
    border-radius: .8rem;
    background: none;
    text-align: left;
    white-space: nowrap;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rf-text);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.country-switcher__item:hover,
.country-switcher__item:focus-visible {
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
}

/* ── "All Departments" panel ───────────────────────────────────────────── */

.header .category-dropdown {
    position: relative;
    z-index: 1000;
}

.header .category-dropdown .dropdown-box {
    top: calc(100% + .8rem);
    left: 0;
    min-width: 26rem;
    padding: .6rem !important;
    margin: 0;
    /* NOT overflow:auto. The child-category flyout is positioned at left:100%,
       i.e. outside this box, so a scroll container clipped it away and hovering
       a category appeared to do nothing. The list is short enough not to need
       scrolling; if it ever grows, scroll .category-menu, never this. */
    overflow: visible;
}

.header .category-menu > li {
    border: 0 !important;
    position: relative;
}

/* Every row the same height, label left, chevron hard right. */
.header .category-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.8rem;
    padding: .7rem 1.2rem !important;
    margin: 0;
    line-height: 1.3;
}

/* The theme's chevron sits in an ::after; keep it out of the label's way. */
.header .category-menu > li > a::after {
    position: static;
    margin: 0 0 0 auto;
    transform: none;
    flex: 0 0 auto;
    font-size: 1.1rem;
    opacity: .45;
    transition: opacity .15s ease, transform .15s ease;
}

.header .category-menu > li:hover > a::after {
    opacity: 1;
    transform: translateX(2px);
}

/* The child-category flyout.
   Deliberately does NOT set `top` here. The theme parks every closed flyout at
   `top:-9999px` and reveals it on hover, and it also forces
   `.menu .megamenu ul {visibility:visible}` — so a `top` of our own dragged all
   eight closed flyouts back on screen, where their always-visible <ul>s piled
   up on top of each other. Only the hover state is ours. */

.header .category-menu .megamenu {
    min-width: 52rem;
    z-index: 1201;
    padding: 1.4rem 1.6rem !important;
    /* Three even columns instead of three floated <li>s of whatever width the
       longest label happened to need. */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.2rem;
    align-content: start;
}

/* Sits flush against the panel. It used to carry a 6px margin, which left a
   dead strip between the category link and the flyout: the pointer crossed it
   on the way over, `li:hover` went false and the flyout closed under the
   cursor. Nothing to cross now, and the ::before below covers the panel's own
   padding for good measure. */
.header .category-menu > li:hover > .megamenu,
.header .category-menu > li.show > .megamenu {
    left: 100%;
    /* A visible gap is fine now: the ::before below is an invisible bridge that
       spans it, so the pointer never leaves the li on the way across. */
    margin-left: .8rem;
}

.header .category-menu .megamenu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.6rem;
    width: 1.6rem;
}

.header .category-menu .megamenu > li {
    display: block;
    padding: 0;
    min-width: 0;
}

.header .category-menu .megamenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

/* One consistent row rhythm, whether a label wraps to two lines or not. */
.header .category-menu .megamenu a {
    display: flex !important;
    align-items: center;
    min-height: 3.2rem;
    padding: .6rem 1rem !important;
    line-height: 1.35;
}

/* ── Main-nav submenus ─────────────────────────────────────────────────── */

.header .main-nav .menu li .submenu {
    top: calc(100% + .6rem);
    margin: 0;
    z-index: 1200;
}

/* Bridges the gap between the link and its panel, so moving the pointer down
   does not drop the hover and close the menu mid-reach. */

.header .main-nav .menu > li.has-submenu > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .8rem;
}

/* ── Category select inside the search field ───────────────────────────── */

.header-search .select-box {
    position: relative;
}

.header-search .select-box::before {
    /* The theme draws its caret with ::before; keep it inside the pill and
       clear of the text. */
    right: 1.2rem;
    left: auto;
    color: var(--rf-muted);
    pointer-events: none;
}

.header-search .select-box select {
    /* Native select popups are fine; it is the closed state that has to line
       up with the input beside it. */
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
}

.header-search .select-box select:focus {
    outline: none;
}

@media (max-width: 991px) {
    .country-switcher__menu {
            right: 0;
            left: auto;
            min-width: 18rem;
        }

    .header .category-menu .megamenu {
            /* No room for a side flyout — it becomes part of the scrolling panel. */
            position: static;
            min-width: 0;
            margin: 0;
            box-shadow: none !important;
            border: 0 !important;
            border-radius: 0 !important;
            padding: 0 0 .8rem 1.2rem !important;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN NAV — one row, always
   The ten top-level links measure ~1116px against ~1109px of track at a
   1280px window, so "Partner With Us" wrapped onto a second line and the bar
   grew to double height. Wrapping is off; if the links genuinely cannot fit
   (a narrow laptop, a longer category list later) the row scrolls sideways
   instead of reflowing the header.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .header .main-nav {
            flex: 1 1 auto;
            min-width: 0;
        }

    .header .main-nav .menu {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center;
            justify-content: flex-start;
            gap: .1rem;
            min-width: 0;
            /* Must stay visible: an overflow:auto/hidden ancestor clips absolutely
               positioned descendants too, which silently swallowed every hover
               menu. The links are sized to fit instead of being scrolled. */
            overflow: visible;
        }

    .header .main-nav .menu > li {
            flex: 0 0 auto;
        }

    .header .main-nav .menu > li > a {
            padding: 0 1.05rem !important;
            font-size: 1.35rem;
        }

    /* A submenu inside an overflow:auto ancestor gets clipped. Taking the
       panels out of flow keeps them over the page, not inside the scroller. */

    .header .main-nav .menu li .submenu {
            position: absolute;
        }
}

/* Departments toggle: an icon button, sized like one. */

.header .category-dropdown .category-toggle {
    gap: .5rem;
    padding: 0 1rem !important;
    min-width: 0 !important;
}

.header .category-dropdown .category-toggle::after {
    font-size: 1.1rem;
    opacity: .6;
    margin-left: 0;
}

@media (max-width: 1280px) {
    .header .main-nav .menu > li > a {
            padding: 0 .85rem !important;
            font-size: 1.3rem;
        }
}

@media (max-width: 1120px) {
    .header .main-nav .menu > li > a {
            padding: 0 .7rem !important;
            font-size: 1.25rem;
        }
}

/* The nav bar keeps a single, predictable height on every page. */

.header-bottom .inner-wrap {
    min-height: 5rem;
    flex-wrap: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Header right rail — quick links, divider, icon buttons
   ══════════════════════════════════════════════════════════════════════════ */
/* The theme pins this divider with `left: 172.5px`, a figure that assumed the
   old margins. The element is now 149px wide, so the rule landed 23px past its
   own right edge — straight through the wishlist heart. Anchor it to the right
   edge instead of a hard-coded offset, in the middle of the flex gap. */

.header-middle .header-call::after {
    left: auto !important;
    right: -.9rem;
    height: 2.2rem;
    background: var(--rf-border);
}

/* Flash sale and Special offers read as actions, each with its own accent so
   they are distinguishable at a glance rather than two grey glyphs. */

.rf-hdr-quick i {
    font-size: 1.7rem;
    line-height: 1;
}

.rf-hdr-quick--sale {
    color: #d9822b;
}

.rf-hdr-quick--sale:hover {
    background: #fdf1e3;
    color: #b8681c;
}

.rf-hdr-quick--offer {
    color: var(--rf-primary);
}

.rf-hdr-quick--offer:hover {
    background: var(--rf-primary-soft);
    color: var(--rf-primary-dark);
}

/* The theme hangs a caret off the wishlist/cart links that has nowhere to go
   now that they are round buttons. */

.header-middle .header-right .cart-dropdown > a::after {
    display: none;
}

/* Search: the field never takes a coloured border on focus — the ring on the
   whole control is the focus signal, so the pill stays one shape. */

.header-search.hs-expanded input.form-control:focus,
.header-search.hs-expanded input.form-control:active,
.header-search.hs-expanded .select-box:focus-within {
    border-color: var(--rf-border);
    outline: none;
    box-shadow: none;
}

/* Scoped so the top-bar's own compact-link rules cannot flatten these rows. */

.header-top .country-switcher__menu .country-switcher__item {
    padding: .8rem 1.1rem;
    font-size: 1.3rem;
    line-height: 1.4;
}

/* ── Departments flyout: final rhythm ─────────────────────────────────────
   The bridge has to cover the new gap plus the panel's own padding, or the
   flyout closes as the pointer crosses. */
.header .category-menu .megamenu::before {
    left: -2.4rem;
    width: 2.4rem;
}

/* Balanced padding — it was reading bottom-heavy because the last row's
   line-height sat on top of the container padding. */
.header .category-menu .megamenu {
    padding: 1.2rem 1.4rem !important;
    align-items: start;
}

.header .category-menu .megamenu a {
    font-size: 1.3rem !important;
    border-radius: .8rem;
}

/* The panel itself: even rows, no stray separators. */
.header .category-dropdown .dropdown-box {
    padding: .6rem !important;
}

.header .category-menu > li > a {
    font-size: 1.35rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Nav submenu lists — one row rhythm
   The theme leaves .submenu on line-height:14px, so a label that wrapped
   ("Touchscreen | 2 in 1 Laptops") grew to 56px next to 38px neighbours and
   the column looked ragged.
   ══════════════════════════════════════════════════════════════════════════ */
.header .main-nav .menu li .submenu {
    line-height: 1.35;
}

.header .main-nav .menu li .submenu > li > a {
    display: flex !important;
    align-items: center;
    min-height: 3.8rem;
    padding: .7rem 1.3rem !important;
    line-height: 1.35;
}

/* The hover nudge shifted the text and reflowed a wrapped label mid-hover. */
.header .main-nav .menu li .submenu > li > a:hover {
    padding-left: 1.3rem !important;
}

.header .main-nav .menu li .submenu > li + li {
    margin-top: .1rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Header category filter — styled listbox
   The native <select> stays in the DOM (it is what the form submits and what
   works without JS); once refubly.js has enhanced it, .is-enhanced hides it
   and shows the button + panel instead.
   ══════════════════════════════════════════════════════════════════════════ */
.rf-catsel {
    position: relative;
}

.rf-catsel.is-enhanced select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rf-catsel-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    height: 100%;
    padding: 0 1.4rem 0 1.6rem;
    border: 0;
    background: none;
    font-family: var(--rf-font);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--rf-text);
    text-align: left;
    cursor: pointer;
}

.rf-catsel-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-catsel-caret {
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    border-right: 1.5px solid var(--rf-muted);
    border-bottom: 1.5px solid var(--rf-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}

.rf-catsel.is-open .rf-catsel-caret {
    transform: translateY(1px) rotate(-135deg);
}

.rf-catsel-panel {
    position: absolute;
    top: calc(100% + .8rem);
    left: 0;
    z-index: 1200;
    min-width: 26rem;
    max-width: 34rem;
    max-height: min(60vh, 40rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .6rem;
    background: #fff;
    border: 1px solid var(--rf-border);
    border-radius: 1.2rem;
    box-shadow: 0 16px 40px rgba(13, 27, 61, .16);
}

.rf-catsel-group {
    padding: 1rem 1.1rem .5rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rf-muted);
}

.rf-catsel-group:first-child {
    padding-top: .5rem;
}

.rf-catsel-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 3.4rem;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: .8rem;
    background: none;
    font-family: var(--rf-font);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--rf-text);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

/* Children sit under their parent heading, not level with it. */
.rf-catsel-option.is-nested {
    padding-left: 2rem;
}

.rf-catsel-option:hover {
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
}

.rf-catsel-option.is-selected {
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
    font-weight: 600;
}

.rf-catsel-panel::-webkit-scrollbar { width: 6px; }
.rf-catsel-panel::-webkit-scrollbar-thumb { background: var(--rf-border); border-radius: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   Mega menu — grouped category columns

   The nav's flyouts were one long single column of every subcategory, so
   "Laptops" was a fifteen-row list with no shape to it. The catalogue now has
   a third level, and a column heading is simply the category in the middle:

       Laptop  →  Performance  →  i7 Laptops

   Positioning is deliberately left to the theme. It parks every closed flyout
   at `top:-9999px` and reveals it with `.menu > li:hover .megamenu {top:100%}`,
   while also forcing `.menu .megamenu ul {visibility:visible}` — so a `top` of
   our own outside the hover state drags every closed panel back on screen with
   its always-visible lists piled on top of each other. Only looks are ours.
   ══════════════════════════════════════════════════════════════════════════ */

.header .main-nav .menu > li > .rf-mega {
    /* The theme ships `.megamenu{display:flex}`, which laid the "All …" link
       out as a first column and stretched it into a 116px circle. The panel is
       a block; the columns do their own flexing one level down. */
    display: block !important;
    padding: 2rem 2.2rem !important;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    box-shadow: 0 18px 44px rgba(13, 27, 61, .13);
    /* The theme pins every megamenu at a flat `width:80rem`, so a two-column
       panel carried 130px of empty white to the right of its last column. The
       panel is as wide as its columns; the columns wrap before it can push
       past the edge of the screen. */
    width: max-content;
    /* …and a `min-width:80rem` alongside it, which is what actually pinned a
       two-column panel to 800px. */
    min-width: 0;
    max-width: calc(100vw - 3rem);
}

/* The panel's own top edge sits flush under the link, so the pointer never
   crosses a dead strip on the way down and drops the hover. */
.header .main-nav .menu > li.has-megamenu > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .6rem;
}

/* ── "All Laptops" — the whole-category escape hatch ──────────────────── */

.rf-mega__all {
    display: inline-flex !important;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.4rem;
    padding: .6rem 1.4rem !important;
    border-radius: 999px;
    background: var(--rf-primary-soft);
    color: var(--rf-primary) !important;
    font-family: var(--rf-font);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.rf-mega__all:hover {
    background: var(--rf-primary);
    color: #fff !important;
}

.rf-mega__all i {
    font-size: 1.1rem;
}

/* ── Columns ──────────────────────────────────────────────────────────── */

.rf-mega__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem 2.6rem;
}

/* A fixed column width instead of `flex:1` — an auto-sized column is as wide
   as its longest label, so "Networking" and "Servers & Storage" came out at
   very different widths and the panel read as a ragged block. */
.rf-mega__col {
    flex: 0 0 19rem;
    min-width: 0;
}

.rf-mega__title {
    display: block !important;
    margin: 0 0 .8rem !important;
    padding: 0 0 .8rem !important;
    border-bottom: 1px solid var(--rf-border-soft);
    font-family: var(--rf-font-heading);
    font-size: 1.15rem !important;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3 !important;
    text-transform: uppercase;
    color: var(--rf-ink) !important;
    min-height: 0 !important;
}

a.rf-mega__title:hover {
    color: var(--rf-primary) !important;
}

/* The theme leaves every menu list on a 10px bottom margin, which showed up
   as an uneven strip under the last row of the panel. */
.header .main-nav .menu .rf-mega__col > ul,
.header .category-menu .megamenu.rf-mega .rf-mega__col > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header .main-nav .menu .rf-mega__col > ul > li > a {
    display: block !important;
    padding: .55rem .8rem !important;
    margin-left: -.8rem;
    border-radius: var(--rf-radius-sm);
    font-family: var(--rf-font);
    font-size: 1.3rem !important;
    font-weight: 400;
    line-height: 1.4;
    color: var(--rf-text) !important;
    transition: background .15s ease, color .15s ease;
}

.header .main-nav .menu .rf-mega__col > ul > li > a:hover,
.header .main-nav .menu .rf-mega__col > ul > li.active > a {
    background: var(--rf-primary-soft);
    color: var(--rf-primary) !important;
}

/* Staying inside the viewport is refubly.js's job — it nudges the panel's
   `left` when the theme's anchor would take it past an edge. Nothing to
   declare here beyond the max-width above, which is what makes a solution
   always exist. */

/* ── The All Departments flyout uses the same groups ──────────────────── */

.header .category-menu .megamenu.rf-mega {
    /* Groups vary from two to four per department, so the column count follows
       the content instead of being pinned at three. */
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)) !important;
    max-width: min(78rem, calc(100vw - 26rem));
    gap: 1.6rem 2rem !important;
    padding: 1.8rem 2rem !important;
}

.header .category-menu .megamenu.rf-mega .rf-mega__col > ul > li > a {
    padding: .5rem .8rem !important;
    margin-left: -.8rem;
    min-height: 0;
    font-size: 1.3rem !important;
}

.header .category-menu .megamenu.rf-mega .rf-mega__title {
    padding: 0 0 .8rem !important;
    min-height: 0 !important;
    border-radius: 0;
}

/* Below the desktop breakpoint the drawer takes over and the panels are not
   rendered at all, so nothing here needs a mobile counterpart. */

/* ══════════════════════════════════════════════════════════════════════════
   Mobile drawer — tap targets

   The theme draws the expand arrow as a 20×20 box pinned to the right of each
   row. On a mouse that is fine; on a phone it is well under the ~44px a thumb
   can reliably hit, so tapping "Laptops" mostly landed on the link and
   navigated instead of opening the group — which reads as the menu not opening
   at all. Now the arrow owns the full height of its row and a 56px-wide strip,
   and the glyph stays exactly where it was.
   ══════════════════════════════════════════════════════════════════════════ */

/* The hit area grows, the arrow does not move.

   Resizing the box itself shifted every glyph, because the theme positions it
   with a fixed offset from the top of an <li> that grows as the group expands.
   An invisible pseudo-element centred on the arrow is part of the same element
   for hit-testing, so the tap target becomes 56×44 while the arrow stays
   pixel-for-pixel where it has always been. */
.mobile-menu-wrapper .toggle-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5.6rem;
    height: 4.4rem;
}

/* …and the label stops short of it, so a long name cannot sit under the arrow. */
.mobile-menu-wrapper .mobile-menu li > a { padding-right: 4.4rem; }

/* ── Three levels, told apart ──────────────────────────────────────────────
   Every row was the same size at the same indent, so a category, a column
   heading and a link were indistinguishable and the drawer read as one very
   long flat list. Each level now steps in and lightens. */

.mobile-menu-wrapper .mobile-menu > li > a {
    font-size: 1.45rem;
    font-weight: 600;
}

/* Level 2 — the column headings. The rail is what makes the nesting visible
   once a group is open and its rows scroll past the parent. */
/* Padding, not margin: a margin narrowed the list and carried each nested
   row's right-aligned chevron past the edge of the drawer, where it was
   clipped — which is why a group looked like it had nothing under it. */
.mobile-menu-wrapper .mobile-menu > li > ul {
    padding-left: 1.2rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.mobile-menu-wrapper .mobile-menu > li > ul > li > a {
    font-size: 1.35rem;
    font-weight: 500;
}

/* Level 3 — the links a shopper is actually after. */
.mobile-menu-wrapper .mobile-menu ul ul ul {
    padding-left: 1.2rem;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.mobile-menu-wrapper .mobile-menu ul ul ul > li > a {
    font-size: 1.3rem;
    font-weight: 400;
    opacity: .82;
}

/* The theme draws the chevron at 8px and 60% opacity. At that size it read as
   a speck of dust, so a row with six subcategories under it looked identical to
   one with none — and nobody taps what looks like a dead end. */
.mobile-menu-wrapper .toggle-btn {
    right: .4rem;
    opacity: 1;
}

.mobile-menu-wrapper .toggle-btn::before {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .5);
}

.mobile-menu-wrapper li.show > a > .toggle-btn::before {
    color: var(--rf-green-light, #7ED957);
}

/* The way to the category's own page, now that tapping its row opens it
   instead. Marked out so it does not read as one more subcategory. */
.mobile-menu-wrapper .mobile-menu .rf-mm-all > a {
    /* Not flex: with a name long enough to wrap, the arrow was pushed to the
       far right of the row and read as a separate control. Inline keeps it on
       the heels of the last word. */
    display: block !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--rf-green-light, #7ED957) !important;
    opacity: 1 !important;
}

.mobile-menu-wrapper .mobile-menu .rf-mm-all > a::after {
    content: "\00A0\2192";
    font-size: 1.3rem;
}

/* A "Shop all" row is a destination, not a group, so it carries no chevron
   and needs none of the space one would take. */
.mobile-menu-wrapper .mobile-menu .rf-mm-all > a { padding-right: 1.3rem; }

/* A parent row is a control now, so it must not look like a dead link being
   pressed and must not offer a text cursor or a selection halo. */
.mobile-menu-wrapper .mobile-menu li > a {
    -webkit-tap-highlight-color: rgba(255, 255, 255, .06);
    user-select: none;
    -webkit-user-select: none;
}

/* ── Header search type-ahead (refubly.js initSearchSuggest) ──────────────
   Tiles of matching products, then completions: typed text plain, the rest
   bold, with an "in Category" hint — the pattern shoppers know from Amazon. */
.header-search, form[data-rf-suggest] { position: relative; }
.rf-suggest {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 1060;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 1.2rem;
    box-shadow: 0 1.4rem 3.6rem rgba(15, 23, 42, .16); overflow: hidden;
    max-height: min(72vh, 64rem); overflow-y: auto; text-align: left;
}
.rf-suggest__tiles {
    display: flex; gap: 1rem; padding: 1.2rem 1.4rem .8rem; border-bottom: 1px solid #eef0f3;
    overflow-x: auto; scrollbar-width: none;
}
.rf-suggest__tiles::-webkit-scrollbar { display: none; }
.rf-suggest__tile {
    flex: 0 0 9.6rem; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    color: #222; text-decoration: none; font-size: 1.2rem; line-height: 1.3; text-align: center;
}
.rf-suggest__thumb {
    width: 8.8rem; height: 8.8rem; border-radius: .8rem; background: #f4f6f8; border: 1px solid #e9ecef;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rf-suggest__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rf-suggest__tile:hover .rf-suggest__thumb { border-color: var(--rf-primary, #07a64b); }
.rf-suggest__tile-name {
    max-width: 9.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.rf-suggest__tile-price { color: var(--rf-primary, #07a64b); font-weight: 700; font-size: 1.2rem; }
.rf-suggest__list { padding: .4rem 0; }
.rf-suggest__row {
    display: flex; align-items: baseline; gap: .6rem; padding: .75rem 1.6rem; color: #222;
    font-size: 1.4rem; line-height: 1.4; text-decoration: none; cursor: pointer;
}
.rf-suggest__row b { font-weight: 700; }
.rf-suggest__row:hover, .rf-suggest__row.is-active { background: #f3f5f8; color: #111; }
.rf-suggest__text { flex: 0 1 auto; min-width: 0; }
.rf-suggest__hint { color: #6b7280; font-size: 1.2rem; white-space: nowrap; }
.rf-suggest__row--all { border-top: 1px solid #eef0f3; margin-top: .3rem; color: var(--rf-primary, #07a64b); }