/* Mobile header: hang chinh = hamburger - search - cart
   (logo an, lang/currency chuyen xuong hang phu .header-subbar)
   Chi ap dung cho dien thoai (<= 767px), khong dung den desktop/tablet.
   Duoc nap SAU CUNG trong app/assets/AssetBundle.php nen de ghi de. */

/* cms_menu_widget.php dung chung 1 markup cho ca nav desktop
   (.header-menu-des) va drawer mobile (.header-nav). Tren mobile, Trang
   chu/Theo doi don hang bi an (da co tab tuong duong o bottom nav) va
   nhan "Duyet san pham" chi hien trong drawer; tren desktop thi nguoc
   lai - can du 6 muc goc vi khong co bottom nav. */
@media (max-width: 990px) {
    .header-nav .item_big > li.desktop-only-nav-item {
        display: none;
    }
}

@media (min-width: 991px) {
    .header-nav .item_big > li.mobile-only-nav-item {
        display: none;
    }

    /* "Trang chu" gio la :first-child thuc su (khoi tai khoan Dang ky/
       Dang nhap truoc do da bi bo khoi markup) nen dinh phai rule
       :first-child > a { padding-left: 0 } (main.scss.css) - vo tinh lam
       chu dinh sat le trai khi no co pill nen trang luc active/hover,
       mat can doi voi le phai (padding-right van 15px). Tra lai padding
       binh thuong nhu cac muc khac. */
    .header-menu .header-menu-des .header-nav > ul.item_big > li.nav-item:first-child > a {
        padding-left: 10px;
    }
}

/* Hamburger drawer (.header-nav) + backdrop (.opacity_menu) da bi bao cao
   (kem anh chup man hinh thuc te) la khong hien/khong dim dung khi mo - du
   rule .header-nav.current va .opacity_menu.current da co specificity cao
   hon va dung ra deu thang. Ep !important o day (file nap sau cung) de loai
   tru moi kha nang bi 1 rule khac de len ma khong ro nguyen nhan. */
@media (max-width: 991px) {
    .header-nav.current {
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* Bo han lop phu den: content phia sau van cuon binh thuong (khong khoa
       body nua - tung gay ket scroll tren iOS vi overflow:hidden tren body
       "nuot" luon touch scroll cua menu ben trong). Lop phu gio trong suot
       hoan toan nen du content cuon phia sau cung khong con gay artifact
       den nua - chi con tac dung bat click-ngoai-de-dong. */
    .opacity_menu.current {
        display: block !important;
        background: transparent !important;
    }

    .header-nav .item_big {
        -webkit-overflow-scrolling: touch;
    }
}

/* Hinh hoc cua drawer giu Y NGUYEN nhu production: phu tu dinh man hinh
   (top:0, height:100% - main.scss.css). O day chi them DUY NHAT kha nang
   cuon. */
@media (max-width: 990px) {
    /* main.scss.css chi cho rieng .item_big cuon (overflow-y:auto,
       max-height:100vh). Nhung drawer cao dung 100vh ma ben tren danh sach
       con co logo, nen phan duoi cung (ngon ngu/tien te) bi day ra ngoai
       man hinh va khong cach nao voi toi - chinh la cho "khong scroll
       xuong duoc". Bo scroller long nhau, de ca drawer cuon lam mot khoi. */
    .header-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Drawer cao tron 100% man hinh, ma .mobile-bottom-nav lai la fixed o
           day (cao 58px, z-index 5000 > z-index 1000 cua header luc sticky).
           Cuon het co thi khoi ngon ngu/tien te o cuoi drawer dung ngay duoi
           thanh do va bi no che - nhin nhu menu chi cuon toi "Gioi thieu".
           Chua san cho o day de noi dung luon cuon len cao hon thanh nav
           (cong safe-area cho thanh home cua iPhone). */
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 16px);
    }

    .header-nav .item_big {
        max-height: none;
        overflow: visible;
    }

    .opacity_menu.current {
        /* header.header.sticky (z-index:1000) tao stacking context rieng
           khi da cuon trang - luc do .header-nav (nam trong header) bi
           danh gia ben trong context do, nen z-index:99999 cua no khong
           con "thang" duoc .opacity_menu (z-index:99999 o root context)
           nua - ca header (kem drawer ben trong) bi de xuong duoi lop phu,
           khien bam vao "Danh muc"/cac muc trong drawer lai trung vao lop
           phu va dong menu thay vi mo submenu. Ha z-index lop phu xuong
           duoi 1000 de header (va drawer ben trong no) luon thang no du
           header co dang sticky (z-index 1000) hay khong (drawer tu no da
           99999 o root context khi header khong tao stacking context). */
        z-index: 998 !important;
    }
}

/* Trash icon cho qty-minus (cart + product card): markup ton tai ca desktop
   lan mobile (dung chung template), nhung icon trash chi duoc thiet ke cho
   mobile. An mac dinh de khong hien song song voi dau "-" tren desktop. */
.qty-icon-trash {
    display: none;
}

/* Product detail page qty stepper (.input_number_product): same
   trash-icon-at-qty-1 pattern as product cards/cart, but for web/desktop
   too - this stepper only exists on the detail page, not duplicated in a
   mobile drawer, so no need to gate it behind a mobile media query. */
.input_number_product .btn_num .qty-icon-trash {
    font-size: 13px;
}

.input_number_product .btn_num.is-remove .qty-icon-minus {
    display: none;
}

.input_number_product .btn_num.is-remove .qty-icon-trash {
    display: inline;
}

/* Globe (lang/currency) li: an tren moi kich thuoc man hinh theo mac dinh -
   no chi duoc thiet ke cho hang chinh mobile, o desktop van con ul-lang/
   header-currency rieng render san. Neu khong an o day thi tren desktop no
   hien nhu 1 li thuong (khong bi rule "hide siblings" vi rule do nam trong
   media query mobile), va .lang-currency-menu (1 div, display block mac
   dinh) se luon mo, de len cac muc menu khac. */
header.header .header-control .ul-control li.header-lang-currency {
    display: none;
}

/* Tuong tu globe li: chi thiet ke cho hang chinh mobile, an mac dinh tren
   desktop (desktop da co "Xin chao, ..." o topbar rieng). */
header.header .header-control .ul-control li.header-account {
    display: none;
}

.lang-currency-menu {
    display: none;
}

/* An icon logo rieng cho mobile tren moi kich thuoc man hinh theo mac dinh,
   chi hien trong media query mobile ben duoi. */
.header .logo .logo-img-mobile {
    display: none;
}

@media (max-width: 990px) {
    /* Header dinh len tren cung khi cuon xuong: search/cart/subbar khong bi mat */
    header.header.sticky {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    /* Bo khoi announcement rong de tiet kiem chieu cao */
    header.header .topbar {
        display: none;
    }

    /* .header-menu chi con la vo boc cho drawer (.header-nav ben trong no,
       position:fixed nen khong chiem cho). Nhung cai vo van giu margin-top
       10px + padding, de lai mot dai trang thua ngay duoi vien day header.
       KHONG display:none duoc - lam vay la mat luon drawer. */
    header.header .header-menu {
        margin-top: 0;
        padding: 0;
        height: 0;
        line-height: 0;
    }

    /* line-height:0 o tren chi de triet dai trang cua chinh cai vo. Nhung no
       la thuoc tinh KE THUA, nen no chay thang xuong drawer (.header-nav nam
       ben trong .header-menu) va bop moi dong menu ve 0 - mo hamburger ra chi
       thay mot mang trang, tuong nhu menu khong hien. Tra lai line-height cho
       drawer; drawer position:fixed nen khong dong gop vao chieu cao cai vo. */
    header.header .header-menu .header-nav {
        line-height: normal;
    }

    /* Phan con lai cua dai trang duoi vien day header: banner dau trang tu
       day minh xuong 20px (index.scss.css / custom.css). */
    .section_slider {
        margin-top: 0;
    }

    header.header {
        /* Khong co padding day: khoang cach toi duong vien do margin cua
           .header-subbar quyet dinh, de no doi xung voi khoang phia tren. */
        padding: 10px 0 0;
    }

    /* Row header: 2 hang - hang 1 (hamburger, logo, control) wrap xuong
       hang 2 la thanh search rieng, full-width. */
    header.header .row.row-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;
        /* row-gap = 0: khoang cach xuong o tim kiem do .search-header
           margin-top quyet dinh, de no bang dung khoang duoi o tim kiem. */
        gap: 0 6px;
    }

    /* Hamburger: bo nen xanh, icon trang, nam trong luong */
    header.header .row.row-header .menu-bar {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        order: 0;
        flex: 0 0 auto;
        width: 30px;
        padding: 0;
        margin: 0;
        background: transparent;
        border-radius: 0;
        /* .menu-bar co class d-flex nhung khong ai can giua icon ben trong,
           nen svg 24px dinh len mep tren cua khung 30px. */
        display: flex;
        align-items: center;
        justify-content: center;
        /* Ba khoi hamburger / logo / tai khoan-gio hang cung mot chieu cao thi
           moi that su nam tren cung mot duong. */
        height: 46px;
    }

    header.header .row.row-header .menu-bar svg {
        width: 24px;
        height: 24px;
    }

    header.header .row.row-header .menu-bar svg path {
        fill: #fff;
    }

    /* Logo nho, sat cai hamburger, can trai */
    header.header .row.row-header > .col-lg-3.col-12:not(.header-control),
    header.header .row.row-header > .col-lg-2.col-12:not(.header-control) {
        order: 1;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 0;
    }

    header.header .logo {
        display: flex;
        align-items: center;
        height: 46px;
        padding-left: 0;
        text-align: left;
    }

    header.header .logo img {
        width: auto;
        max-height: 22px;
        max-width: 100px;
    }

    /* Mobile dung logo day du (icon + chu + slogan) chu khong phai icon tron:
       icon tron khong doc ra duoc ten cua hang. */
    /* Mobile dung file logo rieng (da cat sat vien) chu khong dung anh logo
       tu cai dat admin - anh do la file vuong nhieu khoang trang nen hien o
       hang header se be teo. */
    header.header .logo .logo-img-desktop {
        display: none;
    }

    header.header .logo .logo-img-mobile {
        display: block;
        width: auto;
        height: auto;
        max-height: 44px;
        max-width: 210px;
    }

    /* Cot search: xuong hang rieng (hang 2), full-width, pill trang bo tron */
    header.header .row.row-header > .col-lg-6.col-12,
    header.header .row.row-header > .col-lg-7.col-12 {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 0;
    }

    header.header .search-header {
        padding: 0;
        /* Bang dung khoang cach giua o tim kiem va hang ngon ngu/tien te
           (margin cua .header-subbar) */
        margin-top: 5px;
    }

    header.header .search-smart .header-search-form {
        height: 38px;
        border-radius: 999px;
        background: #fff;
        min-width: 0;
    }

    header.header .search-smart .header-search-form input {
        height: 100%;
        width: 100%;
        min-width: 0;
        padding-left: 12px;
        padding-right: 38px;
        /* iOS Safari auto-zooms the whole page on focus if an input's
           font-size is under 16px - that's the "zoom vo layout" bug. */
        font-size: 16px;
        border-radius: 999px;
    }

    header.header .search-smart .header-search-form button {
        top: 50%;
        right: 0;
        left: auto;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
    }

    /* Cot control: dua ve dung luong, chi con nut gio hang */
    header.header .header-control {
        position: static;
        top: auto;
        right: auto;
        order: 3;
        margin-left: auto;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        height: 46px;
        /* Chua mot chut le phai de tai khoan/gio hang khong dinh sat mep */
        padding: 0 6px 0 0;
    }

    header.header .header-control .ul-control {
        display: flex;
        align-items: center;
        right: auto;
        gap: 8px;
    }

    /* Chi con nut globe (lang/currency gop chung) + tai khoan (neu da dang
       nhap) + nut gio hang trong hang chinh */
    header.header .header-control .ul-control > li:not(.header-cart):not(.header-lang-currency):not(.header-account) {
        display: none;
    }

    header.header .header-control .ul-control li {
        height: auto;
        margin: 0 !important;
    }

    /* Nut gio hang: icon xanh tren nen trang, so luong la badge do goc tren */
    header.header .header-control .ul-control li.header-cart > a {
        position: relative;
        width: auto;
        height: 32px;
        padding: 0 2px;
        border-radius: 999px;
        background: transparent;
        gap: 4px;
        justify-content: center;
        overflow: visible;
    }

    header.header .header-control .ul-control li.header-cart > a svg,
    header.header .header-control .ul-control li.header-cart > a svg.icon-shopping-cart-2,
    header.header .header-control .ul-control li.header-cart > a svg path {
        fill: #1b74e7;
        color: #1b74e7;
        stroke: #1b74e7;
    }

    header.header .header-control .ul-control li.header-cart > a svg {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
    }

    header.header .header-control .ul-control li.header-cart > a > span.count {
        position: absolute;
        top: -2px;
        right: -4px;
        left: auto;
        width: auto;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: #e53935;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }
}

/* ===================== Dropdown search =====================
   Popular Search (chips) + autocomplete: card bo goc, do bong nhe.
   Position absolute trong .search-smart -> luon bam sat ngay duoi o search
   khi cuon trang. */
.search-popular {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.search-popular-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

.search-popular-title .fa-bolt {
    color: #fda121;
    font-size: 14px;
}

.search-popular-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: #e7f0fe;
    color: #1b74e7;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.2s;
}

.search-chip .fa-line-chart {
    font-size: 11px;
}

.search-chip:hover {
    background: #d5e6fd;
    color: #003cbf;
    text-decoration: none;
}

@media (max-width: 990px) {
    /* Vien xanh nhat bao quanh o search khi focus */
    header.header .search-smart .header-search-form:focus-within {
        box-shadow: 0 0 0 1px #8ec5ff, 0 0 0 4px rgba(27, 116, 231, 0.18);
    }

    /* Icon kinh lup ben PHAI ben trong o search (theo design) */
    header.header .search-smart .header-search-form input {
        padding-left: 14px;
        padding-right: 40px;
    }

    header.header .search-smart .header-search-form button {
        left: auto;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
    }

    /* autocomplete dung duoi o search, khong lech khi cuon */
    header.header .search-smart .search-autocomplete-body {
        top: calc(100% + 6px) !important;
    }
}
    /* ===================== Lang/currency: 1 globe popover =====================
   Khong con hang phu rieng (tung gay "seam" giua header va no) - gop
   ngon ngu + tien te vao 1 icon globe nam ngay tren hang chinh, canh
   nut gio hang. Bam mo popover nho chua ca 2 nhom lua chon.
   An hoan toan tren desktop/thu lon. */
@media (max-width: 990px) {
    header.header .header-control .ul-control li.header-lang-currency {
        display: list-item;
        position: relative;
    }

    /* Khong nen/vien rieng - chi la 1 icon trang tron len header, giong
       kieu hamburger, de hoa vao chu khong noi thanh 1 "khoi" rieng biet. */
    .lang-currency-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 17px;
    }

    .header-lang-currency.open .lang-currency-toggle {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Tai khoan: icon + ten (tu cuoi cung cua ho ten, PHP da xu ly) + caret,
       giong "Minh ⌄" o anh mau. Van gioi han max-width + ellipsis lam luoi
       an toan cho ten hiem gap qua dai. */
    header.header .header-control .ul-control li.header-account {
        display: list-item;
    }

    .header-account-link {
        display: flex !important;
        align-items: center;
        gap: 3px;
        /* Header da doi sang nen trang - chu trang o day thi mat hut.
           Dung dung mau cua icon gio hang (#1b74e7): truoc day icon tai khoan
           la #17479e nen hai icon canh nhau ro rang lech tong. */
        color: #1b74e7 !important;
        font-size: 12px;
        font-weight: 600;
        max-width: 84px;
    }

    /* Gio hang cung la SVG net vien 24px nen o day dung dung 24px, khong con
       phai quy doi nhu hoi icon tai khoan la glyph font. */
    .header-account-link .header-account-icon {
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
    }

    /* Chua dang nhap: hien "Dang nhap >" kem icon. max-width 84px o tren danh
       cho ten nguoi dung bi cat bot, o day khong can cat. */
    .header-account--guest .header-account-link {
        max-width: none;
        gap: 4px;
    }

    .header-account--guest .header-account-name {
        overflow: visible;
        max-width: none;
        font-size: 13px;
    }

    .header-account--guest .header-account-caret {
        font-size: 13px;
        opacity: 1;
    }

    .header-account-link .fa-caret-down {
        font-size: 9px;
        flex: 0 0 auto;
        opacity: 0.85;
    }

    .header-account-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .lang-currency-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: #fff;
        border-radius: 12px;
        padding: 12px;
        min-width: 160px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
        z-index: 20;
    }

    .header-lang-currency.open .lang-currency-menu {
        display: block;
    }

    .lc-group + .lc-group {
        margin-top: 10px;
    }

    .lc-label {
        display: block;
        font-size: 11px;
        color: #8a8f98;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .lc-options {
        display: flex;
        gap: 6px;
    }

    .lc-btn {
        flex: 1;
        text-align: center;
        padding: 6px 0;
        border-radius: 999px;
        background: #f2f4f7;
        color: #003cbf;
        font-size: 12px;
        font-weight: 600;
    }

    .lc-btn.active {
        background: #003cbf;
        color: #fff;
    }
}

/* ============ Search overlay (mobile): full-width + backdrop ============ */
.search-backdrop {
    display: none;
}

.search-overlay-back,
.search-overlay-cancel {
    display: none;
}

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 990px) {
    body.search-overlay-open {
        overflow: hidden;
    }

    .search-backdrop.show {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        z-index: 989;
    }

    /* Search overlay top bar: khi mo, o search "nuot" ca vung header (cung
       chieu cao voi header that, do --search-overlay-top dieu khien ca 2)
       de che het hamburger/logo/gio hang phia sau - chi con back + input +
       Huy, giong pattern search full-screen cua cac app thuong mai. */
    body.search-overlay-open header.header .search-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--search-overlay-top, 88px);
        z-index: 1100;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 12px;
        margin-top: 0;
    }

    body.search-overlay-open header.header .search-smart {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    body.search-overlay-open header.header .search-smart .header-search-form {
        order: 2;
        flex: 1 1 auto;
        /* .header-search-form has no position of its own, so its
           absolutely-positioned search-submit button (left:0) was anchoring
           to .search-smart instead and landing on top of the back button. */
        position: relative;
    }

    body.search-overlay-open .search-overlay-back {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        color: #1b1f28;
        font-size: 18px;
        padding: 0;
    }

    body.search-overlay-open .search-overlay-cancel {
        display: inline-block;
        order: 3;
        flex-shrink: 0;
        color: #1b74e7;
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        text-decoration: none;
    }

    /* dropdown full-width, tu ngay duoi header xuong duoi */
    .search-popular.open {
        position: fixed;
        top: var(--search-overlay-top, 88px);
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - var(--search-overlay-top, 88px));
        overflow-y: auto;
        border-radius: 0 0 14px 14px;
        z-index: 995;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
    }

    header.header .search-smart .search-autocomplete-body.open {
        position: fixed;
        top: var(--search-overlay-top, 88px) !important;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - var(--search-overlay-top, 88px));
        overflow-y: auto;
        border-radius: 0 0 14px 14px;
        border: none;
        z-index: 995;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
    }

    /* ============ Bottom navigation bar ============ */
    body {
        padding-bottom: 58px;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 58px;
        /* Nen trang, muc dang xem to xanh - dong bo voi header cung nen trang */
        background: #fff;
        border-top: 1px solid #e8eaed;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
        z-index: 5000;
    }

    .mobile-bottom-nav .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        position: relative;
        color: #5f6368;
        font-size: 11px;
        text-decoration: none;
    }

    .mobile-bottom-nav .bottom-nav-item i {
        font-size: 20px;
        line-height: 1;
    }

    /* Icon "Tra cuu" la SVG nhung inline: bo Font Awesome Free khong co icon
       trang giay kem kinh lup (cai do thuoc ban Pro). stroke:currentColor nen
       no tu doi mau theo trang thai active giong may icon font ben canh. */
    .mobile-bottom-nav .bottom-nav-item .nav-svg-icon {
        display: block;
        width: 21px;
        height: 21px;
    }

    .mobile-bottom-nav .bottom-nav-item .nav-badge {
        position: absolute;
        top: 5px;
        left: calc(50% + 8px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #fda121;
        color: #fff;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    .mobile-bottom-nav .bottom-nav-item.active {
        color: #1b74e7;
        font-weight: 700;
    }

    .mobile-bottom-nav .bottom-nav-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: #1b74e7;
    }

    /* ============ Cart/product qty stepper: rounded (mobile only) ============
       Minus button doubles as delete: at qty 1, minus turns into a trash
       icon since going lower would remove the line item entirely. Applies
       to both the cart page (.ajaxcart__qty .minus/.plus) and product card
       quick-add steppers (.product-qty-stepper .qty-minus/.qty-plus). */
    .cart-mobile .ajaxcart__qty .minus,
    .cart-mobile .ajaxcart__qty .plus,
    .product-qty-stepper .qty-minus,
    .product-qty-stepper .qty-plus {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #2e9b52;
        color: #2e9b52;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 1;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .cart-mobile .ajaxcart__qty .minus .qty-icon-trash,
    .product-qty-stepper .qty-minus .qty-icon-trash {
        display: none;
        font-size: 13px;
    }

    .cart-mobile .ajaxcart__qty .minus.is-remove .qty-icon-minus,
    .product-qty-stepper .qty-minus.is-remove .qty-icon-minus {
        display: none;
    }

    .cart-mobile .ajaxcart__qty .minus.is-remove .qty-icon-trash,
    .product-qty-stepper .qty-minus.is-remove .qty-icon-trash {
        display: inline;
    }
}