/*
 * ANBOOST Shared Mobile Foundation (sf-m) — v2
 *
 * Loaded ONLY for a store listed in config/storefront_mobile.php whose theme has
 * an adapter entry there (store-level activation; themes are never edited). Every rule below is
 * scoped to `body.sf-m` and to viewports below 992px, so desktop and themes that
 * have not opted in are unaffected.
 *
 * Arabic RTL is the reference layout. Direction comes only from <html dir>;
 * placement uses logical properties. Physical left/right appear only to RESET
 * legacy physical offsets on shared floating widgets.
 */

/* ---- Tokens: zero-specificity defaults so a theme skin (body.sf-m {...}) always wins ---- */
:where(body.sf-m) {
    --sf-m-header-h: 56px;
    --sf-m-bottom-nav-h: 62px;
    --sf-m-safe-top: env(safe-area-inset-top, 0px);
    --sf-m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sf-m-page-pad: clamp(12px, 4vw, 16px);
    --sf-m-touch: 44px;
    --sf-m-gap-1: 4px;
    --sf-m-gap-2: 8px;
    --sf-m-gap-3: 12px;
    --sf-m-floating-gap: 12px;
    --sf-m-floating-size: 52px;
    --sf-m-drawer-w: min(85vw, 320px);
    --sf-m-logo-h: 36px;

    --sf-m-z-header: 1020;
    --sf-m-z-bottom-nav: 1025;
    --sf-m-z-floating: 1026;
    --sf-m-z-overlay: 1040;
    --sf-m-z-drawer: 1045;

    --sf-m-color-bg: #fff;
    --sf-m-color-fg: #222;
    --sf-m-color-muted: #666;
    --sf-m-color-line: rgba(0, 0, 0, .08);
    --sf-m-color-accent: var(--main-color-one, #222);
    --sf-m-color-on-accent: #fff;
    --sf-m-header-bg: var(--sf-m-color-bg);
    --sf-m-header-fg: var(--sf-m-color-fg);
    --sf-m-header-line: var(--sf-m-color-line);
    --sf-m-header-line-w: 1px;
    --sf-m-drawer-bg: var(--sf-m-header-bg);
    --sf-m-drawer-fg: var(--sf-m-header-fg);
    /* bottom navigation, Filters control and filter sheet: theme surfaces come from the adapter */
    --sf-m-bar-bg: var(--sf-m-color-bg);
    --sf-m-bar-fg: var(--sf-m-color-fg);
    --sf-m-bar-line: var(--sf-m-color-line);
    --sf-m-bar-active: var(--sf-m-color-accent);
    --sf-m-sheet-bg: var(--sf-m-color-bg);
    --sf-m-sheet-fg: var(--sf-m-color-fg);
    --sf-m-sheet-line: var(--sf-m-color-line);
    --sf-m-control-bg: var(--sf-m-color-bg);
    --sf-m-control-fg: var(--sf-m-color-fg);
    --sf-m-control-line: var(--sf-m-color-line);
    /* row dividers inside the drawer are a tint of the drawer's own text colour, so they work on any
       theme background; a theme's header line is often its accent stripe and is not reused here */
    --sf-m-drawer-line: rgba(128, 128, 128, .28);
    --sf-m-radius: 8px;
    --sf-m-shadow: none;
    --sf-m-font: inherit;

    /* derived: floating stack slots above the bottom navigation */
    --sf-m-float-1: calc(var(--sf-m-bottom-nav-h) + var(--sf-m-safe-bottom) + var(--sf-m-floating-gap));
    --sf-m-float-2: calc(var(--sf-m-float-1) + var(--sf-m-floating-size) + var(--sf-m-floating-gap));
    --sf-m-float-stack: calc(var(--sf-m-floating-gap) + var(--sf-m-touch) + var(--sf-m-floating-gap));
}

/* Drawer travel direction: from inline-start (right edge in RTL, left edge in LTR). */
:where(body.sf-m) { --sf-m-drawer-from: -100%; }
:where([dir="rtl"] body.sf-m) { --sf-m-drawer-from: 100%; }

/* The shared mobile markup never shows on desktop. */
.sf-m-header,
.sf-m-drawer,
.sf-m-overlay,
.sf-m-filter-bar,
.sf-m-sheet-head,
.sf-m-sheet-apply {
    display: none;
}

.sf-m-visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 991.98px) {

    /* ---------- Page frame ---------- */
    body.sf-m {
        /* reserve the fixed bottom navigation + safe area so nothing ends up underneath it */
        padding-block-end: calc(var(--sf-m-bottom-nav-h) + var(--sf-m-safe-bottom));
    }

    html.sf-m-locked,
    html.sf-m-locked body {
        overflow: hidden;
    }

    /* ---------- Shared buttons ---------- */
    body.sf-m .sf-m-btn {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        inline-size: var(--sf-m-touch);
        block-size: var(--sf-m-touch);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--sf-m-radius);
        background: transparent;
        color: var(--sf-m-color-fg);
        font-size: 24px;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
    }

    body.sf-m .sf-m-btn:focus-visible,
    body.sf-m .sf-m-drawer a:focus-visible,
    body.sf-m .sf-m-subtoggle:focus-visible,
    body.sf-m .mobile-nav-link:focus-visible,
    body.sf-m .sf-m-filter-bar button:focus-visible {
        outline: 2px solid var(--sf-m-color-accent);
        outline-offset: 2px;
    }

    body.sf-m .sf-m-btn i {
        font-size: 24px;
        line-height: 1;
        pointer-events: none;
    }

    body.sf-m .sf-m-badge {
        position: absolute;
        inset-block-start: 3px;
        inset-inline-end: 1px;
        min-inline-size: 18px;
        block-size: 18px;
        padding-inline: 4px;
        border-radius: 9px;
        background: var(--sf-m-color-accent);
        color: var(--sf-m-color-on-accent);
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        pointer-events: none;
    }

    /* ---------- Header ---------- */
    body.sf-m .sf-m-header {
        display: block;
        position: sticky;
        inset-block-start: 0;
        z-index: var(--sf-m-z-header);
        padding-block-start: var(--sf-m-safe-top);
        background: var(--sf-m-header-bg);
        color: var(--sf-m-header-fg);
        border-block-end: var(--sf-m-header-line-w) solid var(--sf-m-header-line);
        box-shadow: var(--sf-m-shadow);
        font-family: var(--sf-m-font);
    }

    body.sf-m .sf-m-header .sf-m-btn,
    body.sf-m .sf-m-header .sf-m-btn i {
        color: var(--sf-m-header-fg);
    }

    body.sf-m .sf-m-header__bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--sf-m-gap-2);
        min-block-size: var(--sf-m-header-h);
        padding-inline: var(--sf-m-page-pad);
        box-sizing: border-box;
    }

    body.sf-m .sf-m-header__start,
    body.sf-m .sf-m-header__end {
        display: flex;
        align-items: center;
        gap: var(--sf-m-gap-1);
    }

    body.sf-m .sf-m-header__logo {
        display: flex;
        justify-content: center;
        align-items: center;
        min-inline-size: 0;
    }

    body.sf-m .sf-m-header__logo a {
        display: flex;
        align-items: center;
        max-inline-size: 100%;
        min-inline-size: 0;
        min-block-size: var(--sf-m-touch);
    }

    body.sf-m .sf-m-logo-img {
        display: block;
        max-block-size: var(--sf-m-logo-h);
        max-inline-size: 100%;
    }

    body.sf-m .sf-m-brand {
        display: block;
        max-inline-size: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--sf-m-header-fg);
        font-weight: 700;
        font-size: 18px;
    }

    /* header search row (existing shop search: GET theme_shop_url()?search=) */
    body.sf-m .sf-m-search {
        display: flex;
        align-items: center;
        gap: var(--sf-m-gap-1);
        padding-block: 0 var(--sf-m-gap-2);
        padding-inline: var(--sf-m-page-pad);
        box-sizing: border-box;
    }

    body.sf-m .sf-m-search[hidden] {
        display: none;
    }

    body.sf-m .sf-m-search input {
        flex: 1 1 auto;
        min-inline-size: 0;
        block-size: var(--sf-m-touch);
        margin: 0;
        padding-inline: var(--sf-m-gap-3);
        border: 1px solid var(--sf-m-color-line);
        border-radius: var(--sf-m-radius);
        background: #fff;
        color: var(--sf-m-color-fg);
        font-size: 16px; /* >= 16px: no iOS focus zoom */
        text-align: start;
        box-sizing: border-box;
    }

    /* ---------- Drawer ---------- */
    body.sf-m .sf-m-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--sf-m-z-overlay);
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    body.sf-m .sf-m-overlay.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease;
    }

    body.sf-m .sf-m-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: var(--sf-m-z-drawer);
        inline-size: var(--sf-m-drawer-w);
        max-inline-size: 100%;
        block-size: 100%;
        block-size: 100dvh;
        padding-block: var(--sf-m-safe-top) var(--sf-m-safe-bottom);
        box-sizing: border-box;
        background: var(--sf-m-drawer-bg);
        color: var(--sf-m-drawer-fg);
        font-family: var(--sf-m-font);
        transform: translateX(var(--sf-m-drawer-from));
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        overscroll-behavior: contain;
    }

    body.sf-m .sf-m-drawer.is-open {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    body.sf-m .sf-m-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sf-m-gap-2);
        min-block-size: var(--sf-m-header-h);
        padding-inline: var(--sf-m-page-pad);
        border-block-end: 1px solid var(--sf-m-drawer-line);
        box-sizing: border-box;
    }

    body.sf-m .sf-m-drawer .sf-m-btn,
    body.sf-m .sf-m-drawer .sf-m-btn i,
    body.sf-m .sf-m-drawer .sf-m-menu a,
    body.sf-m .sf-m-drawer .sf-m-subtoggle {
        color: var(--sf-m-drawer-fg);
    }

    body.sf-m .sf-m-drawer .sf-m-menu li,
    body.sf-m .sf-m-drawer .sf-m-menu .sub-menu,
    body.sf-m .sf-m-drawer .sf-m-menu--account,
    body.sf-m .sf-m-drawer .sf-m-drawer__head {
        border-color: var(--sf-m-drawer-line);
        border-color: color-mix(in srgb, var(--sf-m-drawer-fg) 18%, transparent);
    }

    body.sf-m .sf-m-drawer .sf-m-menu li {
        border-block-start: 0;
        border-inline: 0;
        border-block-end-width: 1px;
        border-block-end-style: solid;
    }

    body.sf-m .sf-m-drawer .sf-m-menu--account {
        border-block-start-width: 1px;
        margin-block-start: var(--sf-m-gap-3);
    }

    body.sf-m .sf-m-drawer__title {
        font-size: 17px;
        font-weight: 700;
    }

    body.sf-m .sf-m-drawer__body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.sf-m .sf-m-menu,
    body.sf-m .sf-m-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.sf-m .sf-m-menu li {
        position: relative;
        border-block-end: 1px solid var(--sf-m-color-line);
    }

    body.sf-m .sf-m-menu a {
        display: flex;
        align-items: center;
        min-block-size: 48px;
        padding-block: 10px;
        padding-inline: var(--sf-m-page-pad) calc(var(--sf-m-page-pad) + var(--sf-m-touch));
        box-sizing: border-box;
        color: inherit;
        font-size: 16px;
        text-align: start;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    body.sf-m .sf-m-menu .sub-menu {
        display: none;
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        inline-size: auto;
        box-shadow: none;
        border-block-start: 1px solid var(--sf-m-color-line);
        background: rgba(0, 0, 0, .02);
    }

    body.sf-m .sf-m-menu .sub-menu a {
        padding-inline-start: calc(var(--sf-m-page-pad) + 16px);
        font-size: 15px;
    }

    body.sf-m .sf-m-menu li.sf-m-is-expanded > .sub-menu {
        display: block;
    }

    body.sf-m .sf-m-menu li > .sub-menu li:last-child {
        border-block-end: 0;
    }

    body.sf-m .sf-m-subtoggle {
        appearance: none;
        -webkit-appearance: none;
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: calc(var(--sf-m-page-pad) - 8px);
        inline-size: var(--sf-m-touch);
        block-size: var(--sf-m-touch);
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
    }

    body.sf-m .sf-m-subtoggle i {
        display: inline-block;
        transition: transform .2s ease;
    }

    body.sf-m .sf-m-menu li.sf-m-is-expanded > .sf-m-subtoggle i {
        transform: rotate(180deg);
    }

    /* ---------- Listing: filter sheet (existing sidebar element, no DOM move) ---------- */
    body.sf-m .sf-m-filter-bar {
        display: flex;
        align-items: center;
        gap: var(--sf-m-gap-2);
        margin-block-end: var(--sf-m-gap-3);
    }

    body.sf-m .sf-m-filter-bar button {
        appearance: none;
        display: inline-flex;
        align-items: center;
        gap: var(--sf-m-gap-2);
        min-block-size: var(--sf-m-touch);
        padding-inline: var(--sf-m-gap-3);
        border: 1px solid var(--sf-m-control-line);
        border-radius: var(--sf-m-radius);
        background: var(--sf-m-control-bg);
        color: var(--sf-m-control-fg);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    /* pre-paint: the sidebar column of a listing never renders in flow on phones */
    body.sf-m .row > [class*="col-lg-3"]:has(+ [class*="col-lg-9"] .grid-product-list):not(.sf-m-filters) {
        position: fixed;
        visibility: hidden;
    }

    body.sf-m .sf-m-filters {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: var(--sf-m-z-drawer);
        inline-size: min(88vw, 360px);
        max-inline-size: 100%;
        block-size: 100%;
        block-size: 100dvh;
        margin: 0;
        padding-block: var(--sf-m-safe-top) calc(var(--sf-m-safe-bottom) + var(--sf-m-gap-3));
        padding-inline: var(--sf-m-page-pad);
        box-sizing: border-box;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--sf-m-sheet-bg);
        color: var(--sf-m-sheet-fg);
        transform: translateX(var(--sf-m-drawer-from));
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }

    body.sf-m .sf-m-filters.sf-m-is-open {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    body.sf-m .sf-m-filters .sf-m-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        min-block-size: var(--sf-m-header-h);
        margin-inline: calc(var(--sf-m-page-pad) * -1);
        margin-block-end: var(--sf-m-gap-2);
        padding-inline: var(--sf-m-page-pad);
        background: var(--sf-m-sheet-bg);
        color: var(--sf-m-sheet-fg);
        border-block-end: 1px solid var(--sf-m-sheet-line);
        font-size: 17px;
        font-weight: 700;
    }

    body.sf-m .sf-m-filters input[type="text"],
    body.sf-m .sf-m-filters input[type="number"],
    body.sf-m .sf-m-filters input[type="search"],
    body.sf-m .sf-m-filters select {
        font-size: 16px; /* no iOS focus zoom inside the sheet */
    }

    body.sf-m .sf-m-filters .sf-m-sheet-apply {
        position: sticky;
        inset-block-end: 0;
        display: block;
        inline-size: 100%;
        min-block-size: var(--sf-m-touch);
        margin-block-start: var(--sf-m-gap-3);
        border: 0;
        border-radius: var(--sf-m-radius);
        background: var(--sf-m-color-accent);
        color: var(--sf-m-color-on-accent);
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
    }

    /* ---------- Bottom navigation (existing shared bar, stable geometry) ---------- */
    body.sf-m .mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        align-items: stretch;
        justify-content: initial;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--sf-m-z-bottom-nav);
        inline-size: 100%;
        block-size: calc(var(--sf-m-bottom-nav-h) + var(--sf-m-safe-bottom));
        padding-block: 0 var(--sf-m-safe-bottom);
        padding-inline: 0;
        box-sizing: border-box;
        background: var(--sf-m-bar-bg);
        border-block-start: 1px solid var(--sf-m-bar-line);
        overflow: hidden;
    }

    body.sf-m .mobile-nav-item {
        display: flex;
        min-inline-size: 0;
        margin: 0;
        padding: 0;
    }

    body.sf-m .mobile-nav-link {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-inline-size: 0;
        min-block-size: var(--sf-m-touch);
        padding-block: 6px;
        padding-inline: 2px;
        box-sizing: border-box;
        text-align: center;
        text-decoration: none;
    }

    body.sf-m .mobile-nav-icon {
        position: relative;
        font-size: 22px;
        line-height: 24px;
        color: var(--sf-m-bar-fg);
    }

    body.sf-m .mobile-nav-title {
        display: block;
        max-inline-size: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 11px;
        line-height: 14px;
        font-weight: 500;
        color: var(--sf-m-bar-fg);
    }

    /* current page: accent icon and indicator; the label keeps the readable bar colour and turns bold */
    body.sf-m .mobile-nav-link[aria-current="page"] .mobile-nav-icon,
    body.sf-m .mobile-nav-link[aria-current="page"] .mobile-nav-icon i {
        color: var(--sf-m-bar-active);
    }

    body.sf-m .mobile-nav-link[aria-current="page"] .mobile-nav-title {
        color: var(--sf-m-bar-fg);
        font-weight: 700;
    }

    body.sf-m .mobile-nav-link[aria-current="page"] {
        box-shadow: inset 0 2px 0 var(--sf-m-bar-active);
    }


    /* ---------- Floating action stack (inline-end side, above the bottom navigation) ---------- */
    body.sf-m .whatsapp-integration-wrap a {
        left: auto;
        right: auto;
        inset-inline-end: var(--sf-m-page-pad);
        inset-block-end: var(--sf-m-float-1);
        inline-size: var(--sf-m-floating-size);
        block-size: var(--sf-m-floating-size);
        z-index: var(--sf-m-z-floating);
    }

    body.sf-m .whatsapp-integration-wrap svg {
        inline-size: 72%;
        block-size: 72%;
    }

    body.sf-m .back-to-top {
        left: auto;
        right: auto;
        inset-inline-end: calc(var(--sf-m-page-pad) + (var(--sf-m-floating-size) - var(--sf-m-touch)) / 2);
        inset-block-end: var(--sf-m-float-1);
        inline-size: var(--sf-m-touch);
        block-size: var(--sf-m-touch);
        line-height: var(--sf-m-touch);
        z-index: var(--sf-m-z-floating);
    }

    /* when WhatsApp is present it takes slot 1; back-to-top moves to slot 2 */
    body.sf-m:has(.whatsapp-integration-wrap a) .back-to-top {
        inset-block-end: var(--sf-m-float-2);
    }

    /* cookie consent: full-width sheet above the bottom navigation (enabled on 0 stores today) */
    body.sf-m #gdpr-cookie-message {
        left: auto;
        right: auto;
        inset-inline: var(--sf-m-page-pad);
        inset-block-end: calc(var(--sf-m-bottom-nav-h) + var(--sf-m-safe-bottom) + var(--sf-m-gap-2));
        max-inline-size: none;
        margin: 0;
        z-index: var(--sf-m-z-floating);
    }

    /* while a drawer or sheet is open the floating stack must not sit above the overlay */
    html.sf-m-locked body.sf-m .whatsapp-integration-wrap a,
    html.sf-m-locked body.sf-m .back-to-top {
        /* pointer-events is not animatable: the controls stop receiving taps in the same frame the
           drawer/sheet opens, while their inherited fade (transition: all .3s) still plays */
        pointer-events: none;
        visibility: hidden;
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    body.sf-m .sf-m-drawer,
    body.sf-m .sf-m-overlay,
    body.sf-m .sf-m-filters {
        transition: none;
    }
}

/* ======================================================================
 * v2 additions
 * ==================================================================== */

/* runtime-created or server-rendered foundation nodes never show on desktop */
.sf-m-sheet-head,
.sf-m-sheet-apply,
.sf-m-filter-bar {
    display: none;
}

@media (max-width: 991.98px) {

    /* ---------- Page frame: horizontal overflow guards ---------- */
    /* V2 listings/product pages zero the container gutters inline ("padding:40px 0 80px"),
       so the Bootstrap row's negative margins leave the viewport. Restore the gutters only. */
    body.sf-m .container[style*="padding"],
    body.sf-m .container-fluid[style*="padding"] {
        padding-inline: var(--sf-m-page-pad) !important;
    }

    /* a Bootstrap row needs half its gutter as container padding; themes that zero the container
       padding in CSS push every row 12-24px out of the viewport */
    body.sf-m .container:has(> .row),
    body.sf-m .container-fluid:has(> .row) {
        padding-inline: var(--sf-m-page-pad) !important;
    }

    body.sf-m .row.g-5,
    body.sf-m .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }

    body.sf-m img,
    body.sf-m video,
    body.sf-m iframe {
        max-inline-size: 100%;
    }

    /* text controls at 16px: no focus zoom on iOS */
    body.sf-m input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    body.sf-m select,
    body.sf-m textarea {
        font-size: 16px !important;
    }

    /* ---------- Drawer: account row ---------- */
    body.sf-m .sf-m-menu--account {
        border-block-start: 8px solid var(--sf-m-color-line);
    }

    body.sf-m .sf-m-menu .sf-m-menu-link {
        gap: var(--sf-m-gap-2);
        padding-inline-end: var(--sf-m-page-pad);
    }

    body.sf-m .sf-m-menu .sf-m-menu-link i {
        font-size: 22px;
    }

    /* theme menu CSS must not restyle the drawer list */
    body.sf-m .sf-m-drawer .sf-m-menu,
    body.sf-m .sf-m-drawer .sf-m-menu > li {
        display: block;
        float: none;
        inline-size: auto;
        margin: 0;
        padding: 0;
        background: none;
    }

    body.sf-m .sf-m-drawer .sf-m-menu > li > a::before,
    body.sf-m .sf-m-drawer .sf-m-menu > li > a::after,
    body.sf-m .sf-m-drawer .sf-m-menu > li::before,
    body.sf-m .sf-m-drawer .sf-m-menu > li::after {
        content: none;
    }

    /* ---------- Listing ---------- */
    body.sf-m .sf-m-filter-bar {
        display: flex;
    }

    body.sf-m .sf-m-filters .sf-m-sheet-head {
        display: flex;
    }

    body.sf-m .sf-m-filters .sf-m-sheet-apply {
        display: block;
    }

    body.sf-m .sf-m-filters {
        text-align: start;
    }

    /* ---------- Cart: rows become cards (presentation only; rows, ids and classes unchanged) ---------- */
    body.sf-m .sf-m-cart-wrap {
        overflow: visible;
        max-inline-size: 100%;
        min-inline-size: 0 !important;
    }

    body.sf-m table.sf-m-cart-table {
        display: block;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        border: 0;
    }

    body.sf-m table.sf-m-cart-table > thead {
        display: none;
    }

    body.sf-m table.sf-m-cart-table > tbody {
        display: block;
        min-inline-size: 0 !important;
        max-inline-size: 100%;
    }

    body.sf-m table.sf-m-cart-table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sf-m-gap-2) var(--sf-m-gap-3);
        margin-block-end: var(--sf-m-gap-3);
        padding: var(--sf-m-gap-3);
        /* the card keeps the theme's own surface and text colours (dark themes have light text);
           the outline is a tint of that text colour */
        border: 1px solid rgba(128, 128, 128, .3);
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        border-radius: var(--sf-m-radius);
        box-sizing: border-box;
        min-inline-size: 0 !important;
        max-inline-size: 100%;
    }

    body.sf-m table.sf-m-cart-table > tbody > tr > td {
        display: flex;
        flex: 1 1 100%;
        align-items: center;
        justify-content: space-between;
        gap: var(--sf-m-gap-2);
        inline-size: auto !important;
        min-inline-size: 0 !important;
        max-inline-size: 100%;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box;
        text-align: start;
        overflow-wrap: anywhere;
    }

    body.sf-m table.sf-m-cart-table > tbody > tr > td[data-sf-m-label]::before {
        content: attr(data-sf-m-label);
        flex: 0 0 auto;
        /* --sf-m-cart-fg is the theme's own product-name colour, read by the script; a price cell
           may be coloured (red, accent) and would make its label unreadable */
        color: var(--sf-m-cart-fg, inherit);
        color: color-mix(in srgb, var(--sf-m-cart-fg, currentColor) 80%, transparent);
        font-size: 13px;
        font-weight: 500;
    }

    body.sf-m table.sf-m-cart-table > tbody > tr > td[colspan] {
        justify-content: center;
    }

    /* ---------- Cookie consent open: it owns the space above the navigation ---------- */
    html.sf-m-cookie-open body.sf-m .whatsapp-integration-wrap a,
    html.sf-m-cookie-open body.sf-m .back-to-top {
        pointer-events: none;
        visibility: hidden;
    }

    body.sf-m #gdpr-cookie-message {
        position: fixed;
        inline-size: auto;
        box-sizing: border-box;
        max-block-size: 50vh;
        overflow-y: auto;
    }
}

/* ---------- Pattern guards: rows that every theme family builds the same way and that cannot shrink ---------- */
@media (max-width: 991.98px) {

    /* product card action rows (add to cart + wishlist) inside ~140px cards */
    body.sf-m [class*="-card-footer"],
    body.sf-m [class*="-product-footer"],
    body.sf-m [class*="-card-footer"] > .d-flex,
    body.sf-m [class*="-card-footer"] > div[style*="display:flex"],
    body.sf-m [class*="-product-footer"] > .d-flex {
        flex-wrap: wrap;
        min-inline-size: 0;
        max-inline-size: 100%;
        row-gap: var(--sf-m-gap-1);
    }

    body.sf-m [class*="-card-footer"] .add-to-cart-btn,
    body.sf-m [class*="-product-footer"] .add-to-cart-btn {
        min-inline-size: 0;
        max-inline-size: 100%;
        white-space: normal;
    }

    body.sf-m [class*="-card-price"],
    body.sf-m [class*="-product-price"] {
        flex-wrap: wrap;
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    /* listing sort / view bars */
    body.sf-m [class*="-sort-bar"],
    body.sf-m [class*="-sort-bar"] > .d-flex,
    body.sf-m [class*="-shop-topbar"],
    body.sf-m [class*="-shop-topbar"] > .d-flex {
        flex-wrap: wrap;
        min-inline-size: 0;
        max-inline-size: 100%;
        row-gap: var(--sf-m-gap-2);
    }

    body.sf-m select,
    body.sf-m input,
    body.sf-m textarea {
        max-inline-size: 100%;
        box-sizing: border-box;
    }

    /* footer rows: policy links, bottom bars, newsletter forms */
    body.sf-m footer [class*="-footer-bottom"],
    body.sf-m footer [class*="-footer-bottom"] > .container,
    body.sf-m footer [class*="-footer-bottom"] .d-flex,
    body.sf-m footer [class*="-footer-bottom-links"],
    body.sf-m footer .d-flex {
        flex-wrap: wrap;
        min-inline-size: 0;
        max-inline-size: 100%;
        row-gap: var(--sf-m-gap-2);
    }

    body.sf-m footer .row > [class*="col-"] {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    body.sf-m form[class*="newsletter"] {
        flex-wrap: wrap;
        max-inline-size: 100%;
        row-gap: var(--sf-m-gap-2);
    }

    body.sf-m form[class*="newsletter"] input,
    body.sf-m form[class*="newsletter"] .input-group,
    body.sf-m form[class*="newsletter"] .input-group > .form--control {
        flex: 1 1 140px;
        min-inline-size: 0;
        inline-size: auto;
    }

    /* tab bars scroll inside themselves instead of widening the page */
    body.sf-m [class*="-tab-nav"],
    body.sf-m [class*="-tabs-nav"] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-inline-size: 100%;
    }

    body.sf-m [class*="-tab-nav"] > *,
    body.sf-m [class*="-tabs-nav"] > * {
        flex: 0 0 auto;
    }

    /* product page main image (.long-img is the shared variant-image hook): fixed 380-480px
       heights become a square that follows the screen width */
    body.sf-m .long-img {
        max-block-size: 100vw;
    }

    body.sf-m .long-img[style*="height"],
    body.sf-m div[style*="height"]:has(> .long-img) {
        height: auto !important;
        aspect-ratio: 1 / 1;
        max-block-size: 100vw;
    }

    /* page-builder sections never exceed the viewport */
    body.sf-m .pb-section > .section-inner {
        max-inline-size: 100%;
        margin-inline: 0;
        box-sizing: border-box;
    }
}

/* 320px phones: five equal columns are 64px wide; the longest Arabic label needs 10px type to stay on one line */
@media (max-width: 339.98px) {
    /* two cards per row are about 140px wide here; the Arabic label needs 12px type to stay on two lines */
    body.sf-m .grid-product-list .add-to-cart-btn,
    body.sf-m [class*="-card"] .add-to-cart-btn,
    body.sf-m [class*="product-action"] .add-to-cart-btn {
        font-size: 12px;
    }

    body.sf-m .mobile-nav-title {
        font-size: 10px;
        letter-spacing: 0;
    }

    body.sf-m .mobile-nav-link {
        padding-inline: 0;
    }
}

/* ======================================================================
 * v3 additions
 * ==================================================================== */
@media (max-width: 991.98px) {

    /* ---------- End of page: the floating stack never rests on footer content ----------
       The script marks the last footer of the page; the reserved band is inside the footer,
       so it keeps the footer's own background. */
    body.sf-m:has(.whatsapp-integration-wrap a) {
        --sf-m-float-stack: calc(var(--sf-m-floating-gap) + var(--sf-m-floating-size) + var(--sf-m-floating-gap) + var(--sf-m-touch) + var(--sf-m-floating-gap));
    }

    body.sf-m .sf-m-footer-end::after {
        content: "";
        display: block;
        flex: 0 0 100%;
        grid-column: 1 / -1;
        inline-size: 100%;
        block-size: var(--sf-m-float-stack);
        pointer-events: none;
    }

    /* ---------- Cart cards: nothing inside a card may be wider than the card ----------
       A flex/grid ancestor sizes itself to the longest unbreakable row otherwise (long product
       names pushed the electro cart 13px past a 320px viewport). */
    body.sf-m :has(> .sf-m-cart-wrap),
    body.sf-m :has(> table.sf-m-cart-table) {
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    body.sf-m table.sf-m-cart-table > tbody > tr > td > * {
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    body.sf-m table.sf-m-cart-table > tbody > tr > td a,
    body.sf-m table.sf-m-cart-table > tbody > tr > td p,
    body.sf-m table.sf-m-cart-table > tbody > tr > td h1,
    body.sf-m table.sf-m-cart-table > tbody > tr > td h2,
    body.sf-m table.sf-m-cart-table > tbody > tr > td h3,
    body.sf-m table.sf-m-cart-table > tbody > tr > td h4,
    body.sf-m table.sf-m-cart-table > tbody > tr > td h5,
    body.sf-m table.sf-m-cart-table > tbody > tr > td h6,
    body.sf-m table.sf-m-cart-table > tbody > tr > td span,
    body.sf-m table.sf-m-cart-table > tbody > tr > td div {
        white-space: normal;
        overflow-wrap: anywhere;
        min-inline-size: 0;
    }

    /* ---------- Product cards: text buttons keep their label on at most two lines ----------
       Card buttons inherit desktop side padding (24px each side in a 124px button). */
    body.sf-m .grid-product-list .add-to-cart-btn,
    body.sf-m [class*="-card"] .add-to-cart-btn,
    body.sf-m [class*="product-action"] .add-to-cart-btn {
        padding-inline: var(--sf-m-gap-2) !important; /* several themes set the desktop side padding with !important */
        column-gap: var(--sf-m-gap-1);
        line-height: 1.3;
    }

    /* in a card action row the text button needs ~96px; a narrower row sends the icon button to the next line */
    body.sf-m [class*="-card-footer"] .add-to-cart-btn,
    body.sf-m [class*="-card-actions"] .add-to-cart-btn {
        flex: 1 1 96px;
    }

    body.sf-m [class*="-card-actions"] {
        flex-wrap: wrap;
        min-inline-size: 0;
        max-inline-size: 100%;
        row-gap: var(--sf-m-gap-1);
    }
}

/* ======================================================================
 * v4 additions
 * ==================================================================== */
@media (max-width: 991.98px) {

    /* ---------- Form controls inside flex rows ----------
       A text input's automatic minimum width is its intrinsic width (about 20 characters). At the
       16px size required on phones that is 210-250px, so in a non-wrapping row (coupon field +
       Apply button) the input could not shrink and pushed the button out of the viewport. */
    body.sf-m input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    body.sf-m select,
    body.sf-m textarea {
        min-inline-size: 0;
    }
}

/* ======================================================================
 * v5 additions
 * ==================================================================== */

/* ---------- Sticky header ----------
   common.css sets overflow-x:hidden on BOTH html and body. With html already hiding horizontal
   overflow, the same value on body makes body a scroll container (its overflow-y computes to
   auto), and a sticky element then sticks to body, which never scrolls, so the header left the
   screen with the page. `clip` hides horizontal overflow exactly like `hidden` but does not
   create a scroll container; the page keeps scrolling on the viewport as before. */
@supports (overflow: clip) {
    @media (max-width: 991.98px) {
        body.sf-m {
            overflow-x: clip;
        }

        html.sf-m-locked body.sf-m {
            overflow: hidden;
        }
    }
}

@media (max-width: 991.98px) {
    /* icons inside the bar and the sheet head follow their surface's text colour */
    body.sf-m .mobile-nav .mobile-nav-icon i {
        color: inherit;
    }

    body.sf-m .sf-m-filters .sf-m-sheet-head .sf-m-btn,
    body.sf-m .sf-m-filters .sf-m-sheet-head .sf-m-btn i {
        color: var(--sf-m-sheet-fg);
    }

    body.sf-m .sf-m-filter-bar button i {
        color: inherit;
    }
}