#buy_device {
    font-family: 'DM Sans', sans-serif;
    color: #191919;
    width: 100%;
    background-color: #f7f7f7;
    padding: 0 18px;
}

/* Category-name page title, centered under the #buy_device banner (mobile/tablet only —
   hidden on desktop, where the toolbar already shows the category). */
.Shop .shop-category-title {
    max-width: 1280px;
    margin: 18px auto 0;
    padding: 0 16px;
    text-align: center;
    color: #191919;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
}
@media (max-width: 767.98px) {
    .Shop .shop-category-title { font-size: 1.3rem; margin-top: 14px; }
}
/* Desktop (>=992px): hide the page-title heading entirely — the toolbar already shows the
   category (breadcrumb + .buydevice-category), so this heading is redundant on desktop. */
@media (min-width: 992px) {
    .Shop .shop-category-title { display: none !important; }
}

.sidebar-border {
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-box .container {
    line-height: 1.6;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    position: relative;
    padding: 16px;
}
/* Shop page only: no horizontal padding (content full-width below 1280, framed at >=1280).
   !important + higher specificity than custom.css `main.main .container` so it wins here,
   while every other page keeps that global 16px gutter (shop.css loads only on /shop). */
.Shop .section-box .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.isPreorder {
    top: 3px !important;
    color: #fff !important;
    left: 36px !important;
    font-size: 10px !important;
    width: 68px !important;
}

.isPreorder-103 {
    top: 3px !important;
    color: #fff !important;
    left: 36px !important;
    font-size: 10px !important;
    width: 68px !important;
}

.pagination li a {
    font-size: 1rem;
    line-height: 24px;
    color: #191919;
}

/*.listview .image-box > a {
    background-size: cover;
    background-position: center;
}*/

.view-type-grid, .view-type-list {
    cursor: pointer;
}

.listview .image-box > a img {
    visibility: hidden;
}

.color-brand-3, .card-grid-style-2, .card-grid-style-3 .card-grid-inner .info-right a:hover, .card-grid-style-3 .card-grid-inner .info-right a, .card-grid-style-3 .card-grid-inner .info-right a span, .color-gray-900, .card-grid-style-2 .info-right a:hover {
    color: #191919;
}

.tools .btn-wishlist {
    border-radius: 50px;
    border: 0;
    background: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    line-height: 28px;
}

.listview .card-grid-style-3 .card-grid-inner .tools {
    top: 13px;
    right: 15px;
}

.cb-container input:checked ~ .checkmark {
    border: 2px solid #357ae8;
}

.section-box {
    padding: 0 18px;
}

.card-grid-style-3 .card-grid-inner .image-box img {
    max-height: 100%;
    width: 100%;
}

.info-right > .color-brand-3 {
    height: 18px;
    display: block;
    padding-right: 35px;
}

.card-grid-style-2 .price-info {
    margin-top: 20px;
    color: #191919 !important;
}

.slide-shop .card-grid-style-2 .image-box .label {
    background: #fff !important;
    font-size: 11px !important;
    color: #191919 !important;
}

    .slide-shop .card-grid-style-2 .image-box .label > span {
        color: #2FA94F !important;
    }

/*.card-grid-style-3 .card-grid-inner .image-box .label {
    border-radius: 4px;
    color: #191919;
    font-size: 11px;
    background: #fff !important;
}
*/
.card-grid-style-3 .card-grid-inner .image-box .label {
    top: 6px;
    left: 6px;
}

    .card-grid-style-3 .card-grid-inner .image-box .label.isVerified {
        top: 3px;
        left: 3px;
        width: 95px;
        height: 30.74px;
        border-radius: 6.59px;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 4.39px 8.78px;
        color: #191919;
        background: #FFFFFF !important;
        font-weight: 500;
        font-size: 14px;
    }

        .card-grid-style-3 .card-grid-inner .image-box .label.isVerified span {
            padding-right: 5px !important;
        }


.label.isOutOfStockLB {
    top: 253px;
    left: 19px;
    width: 151px;
    height: 30.74px;
    border-radius: 6.59px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 4.39px 8.78px;
    color: #f24c7c;
    background: #FFFFFF !important;
    font-weight: 500;
    font-size: 14px;
}

    .label.isOutOfStockLB span {
        padding-right: 5px !important;
    }


/* price-main / price-line sizing is consolidated below the discount-badge rule */

/* Top overlay row that holds the discount badge (left) and the favourite icon (right).
   Because it is a flex row with align-items:center, the badge and the fav icon are vertically
   centred RELATIVE TO EACH OTHER — no pixel offsets to compute, correct at every breakpoint and any badge size. */
.card-grid-style-3 .card-grid-inner .card-top-row {
    position: absolute;
    top: 18px;
    left: 10px;
    right: 18px;
    z-index: 12;
    display: flex;
    align-items: center;            /* keeps the badge level with the fav icon */
    justify-content: space-between; /* badge (or invisible spacer) on the left, fav icon on the right */
    gap: 8px;
    pointer-events: none;           /* clicks fall through to the image; re-enabled on the children below */
}
/* favourite icon: cancel its stand-alone absolute positioning; space-between (with the spacer) keeps it on the right */
.card-grid-style-3 .card-grid-inner .card-top-row .tools {
    position: static !important;
    top: auto;
    right: auto;
    margin: 0 !important;
    pointer-events: auto;
}
/* invisible placeholder rendered in place of the badge when there is no discount, so space-between still has a left item */
.card-grid-style-3 .card-grid-inner .card-top-row .discountBadge-spacer {
    visibility: hidden;
    width: 0;
}
/* drop the icon's bottom margin so it centres cleanly in the row */
.card-grid-style-3 .card-grid-inner .card-top-row .tools .btn-wishlist {
    margin: 0 !important;
}
/* the badge is just a normal flex item now */
.card-grid-style-3 .card-grid-inner .card-top-row .discountBadge {
    pointer-events: auto;
    background: #e02424;
    color: #fff;
    font-weight: 600;
    font-size: 13px;          /* desktop size */
    line-height: 1;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
/* mobile only: slightly smaller badge (stays centred on the fav icon via the flex row) */
@media (max-width: 767.98px) {
    .card-grid-style-3 .card-grid-inner .card-top-row .discountBadge {
        font-size: 11px;
        padding: 4px 7px;
        border-radius: 5px;
    }
}

/* Price block stacks vertically: struck original on top, current price below.
   Forced flex/height/display beat site.css (.price-info height:24px !important) and
   custome.css (.price-main font-size:10px !important + .font-lg-bold display:inline-block,
   which was shrinking the current price and pushing it sideways). */
.card-grid-style-3 .card-grid-inner .price-info {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    height: auto !important;
    text-align: left;
}

/* both lines are full-width blocks pinned to the left, so they sit exactly under each other */
.card-grid-style-3 .card-grid-inner .price-info .price-line,
.card-grid-style-3 .card-grid-inner .price-info .price-main {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    line-height: 1.25;
}

/* ONE LINE EACH, never two (owner, 2026-09-18).
   The three price lines are stacked blocks of fixed line-height and the card reserves exactly
   one line for each - that is what keeps every card's image on the same baseline. A phrase long
   enough to wrap ("From $42/mo. for 9 months" on a narrow card) silently took two lines and
   pushed that one card's image down, breaking the row. Clamping here rather than shortening the
   text keeps the card intact whatever the backend sends, including Arabic, where the same phrase
   is longer. min-width:0 is required: these are flex children, and a flex item's default
   min-width:auto refuses to shrink below its content, so the ellipsis would never engage. */
.card-grid-style-3 .card-grid-inner .price-info .price-line,
.card-grid-style-3 .card-grid-inner .price-info .price-main,
.card-grid-style-3 .card-grid-inner .price-info .price-lease {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* current (display) price — the prominent one */
.card-grid-style-3 .card-grid-inner .price-info .price-main {
    font-size: 11px !important;   /* overrides custome.css .price-main font-size:10px !important */
    font-weight: 600;
}

/* before-discount price shown struck-through, smaller & muted */
.card-grid-style-3 .card-grid-inner .price-info .price-line {
    text-decoration: line-through;
    color: #9e9e9e;
    font-size: 10px;
    font-weight: 500;
}

/* Reserve the original-price line's height even when there is no discount, so card heights stay aligned */
.card-grid-style-3 .card-grid-inner .price-info .price-line.is-placeholder {
    visibility: hidden;
}

/* Lease teaser — a third line under the price, quieter than both lines above it. It is a second
   way to pay for the same device, not a competing price, so it must never read as prominent as
   .price-main.
   Reserved on lease-less cards only when the batch contains at least one lease (anyLease() in
   shop.js): the price block sits above the image, so an unmatched line would push that card's image
   below its neighbours'. A batch with no lease at all renders no row and keeps its current height. */
.card-grid-style-3 .card-grid-inner .price-info .price-lease.is-placeholder { visibility: hidden; }

.card-grid-style-3 .card-grid-inner .price-info .price-lease {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    line-height: 1.25;
    color: #6b7280;
    font-size: 10px;
    font-weight: 400;
}

.btn.btn-cart {
    border: 1px solid #4285f4;
    background-color: #4285f4;
}

.card-grid-style-3 .card-grid-inner .tools {
    top: 18px;
    right: 18px;
    width: 30px;
}

#ModalQuickview .modal-dialog {
    max-width: 762px !important;
}

.dropdown-item {
    font-size: 0.8rem;
    color: #383838 !important;
}

.btn.btn-quickview {
    display: none;
}

#ModalQuickview .product-info h5 {
    color: #191919;
    font-size: 1.1rem;
}

.card-grid-style-3 .card-grid-inner .info-right .btn.btn-cart, .card-grid-style-3 .card-grid-inner .info-right a:hover {
    color: #fff !important;
}

.card-grid-style-3 .card-grid-inner .price-info + .font-xs {
    display: flex;
    justify-content: space-between;
    color: #191919 !important;
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: #4285f4;
    background-color: #4285f4;
    border-color: #4285f4;
}

.card-grid-style-3 .card-grid-inner .image-box .label > span {
    color: #2FA94F;
}

.card-grid-style-3 .card-grid-inner .image-box img {
    height: 100%;
    width: 100%;
    max-width: inherit;
    visibility: hidden;
}

.card-grid-style-3 .card-grid-inner {
    padding: 11px;
}

.image-box > a {
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    display: block;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.btn.btn-filter {
    color: #191919 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.border-1-right.span::before, .border-1-right::before {
    height: 28px !important;
    top: 9px !important;
}

.cb-container .text-small, .color-gray-500, .number-item, .box-filters .color-gray-900, .list-checkbox li .number-item {
    color: #707070 !important;
}

/* Brand rows: drop the legacy inline-end padding on .list-checkbox li (style.css sets
   padding: 0 30px 6px 0) so each row sits flush to the panel edge. */
#brand-list li { padding-inline-end: 0; }

/* Per-brand item count (from Listing/LoadDataByCategory) — muted, right-aligned inside each
   brand row (.cb-container is position:relative), and hidden when no count is provided. */
#brand-list .cb-container { padding-right: 34px; -webkit-tap-highlight-color: transparent; }
#brand-list .cb-container .number-item {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    color: #9aa1ac !important;
}
#brand-list .cb-container .number-item:empty { display: none; }

/* Condition filter (owner item 9, Views/Shop/Index.cshtml .condition-list): the brand rows' muted
   count, end-aligned. A class, not an id: the sidebar and the drawer each have a copy. Logical
   properties, so Arabic puts the count on the left. */
.condition-list li { padding-inline-end: 0; }
.condition-list .cb-container { position: relative; padding-inline-end: 34px; -webkit-tap-highlight-color: transparent; }
.condition-list .cb-container .number-item {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    color: #9aa1ac !important;
}
.condition-list .cb-container .number-item:empty { display: none; }

/* Rounded checkbox — soft rounded box that fills solid blue and pops a white tick in when
   checked (replaces the square tick.svg fill).
   The Condition rows (.condition-list, owner item 9) share it so they match the Brand rows beside
   them. Their selectors carry .Shop .shop-filter-body because, without #brand-list's id, the
   generic `.Shop .shop-filter-body .cb-container .checkmark` rules further down would otherwise
   out-rank them and redraw the legacy square tick. */
#brand-list .cb-container .checkmark,
.Shop .shop-filter-body .condition-list .cb-container .checkmark {
    width: 15px;
    height: 15px;
    border: 2px solid #CBD5E6;
    border-radius: 3px;   /* less-rounded corners (was 6px), desktop + mobile */
    background: #fff;
    transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
/* Hover restyle only where the device genuinely hovers (desktop). On touch, :hover
   latches after a tap and lingers as a stuck blue "focus" highlight — so exclude it
   on mobile. Checked/active states are unaffected. */
@media (hover: hover) {
    #brand-list .cb-container:hover .checkmark,
    .Shop .shop-filter-body .condition-list .cb-container:hover .checkmark { border-color: #4285f4; background: #F5F9FF; }
}
#brand-list .cb-container:active .checkmark,
.Shop .shop-filter-body .condition-list .cb-container:active .checkmark { transform: scale(0.9); }
#brand-list .cb-container input:checked ~ .checkmark,
.Shop .shop-filter-body .condition-list .cb-container input:checked ~ .checkmark {
    background: #4285f4;
    border-color: #4285f4;
}
/* white tick, drawn with a rotated border, that scales/pops in when checked */
#brand-list .cb-container .checkmark:after,
.Shop .shop-filter-body .condition-list .cb-container .checkmark:after {
    content: "";
    display: block;
    left: 50%;
    top: 46%;
    width: 5px;
    height: 9px;
    background: none;
    border: solid #fff;
    border-width: 0 2.2px 2.2px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform .2s cubic-bezier(.2, .85, .3, 1.4);
}
#brand-list .cb-container input:checked ~ .checkmark:after,
.Shop .shop-filter-body .condition-list .cb-container input:checked ~ .checkmark:after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.shop-template .font-sm {
    font-size: 0.7rem !important;
}

.noUi-connect, .border-brand-2::before {
    background: #357ae8;
}

.noUi-horizontal .noUi-handle, .pagination li a:hover, .pagination li a.active {
    background-color: #357ae8;
    border: 1px solid #357ae8;
}

.cb-container .checkmark:after {
    left: -1px;
    top: -1px;
    width: 16px;
    height: 16px;
    background: #357ae8 url(../imgs/page/shop/tick.svg) no-repeat center;
}

.card-grid-style-3 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sidebar-border .sidebar-head h6, .sidebar-content h6 {
    color: #191919;
}

#buy_device .mb_48 {
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 16px;
}

#buy_device h5 {
    font-size: 0.9rem;
    font-weight: normal;
    color: #383838;
    line-height: 18px;
}

/* Mobile only: slightly smaller banner text. */
@media (max-width: 767px) {
    #buy_device h5 {
        font-size: 0.8rem;
    }
    .Shop #buy_device h5 b {
        font-size: 20px;
    }
}

#buy_device .section2 {
    /*padding: 24px 0px 45px;*/
    padding: 24px 0px 18px 0px;
    /* banner content frame: same 16px gutter as the header/footer, flush at >=1280 */
    padding-inline: 16px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
@media (min-width: 1280px) {
    #buy_device .section2 { padding-inline: 0; }
}

#buy_device .page_title {
    color: #707070;
    font-weight: 400;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

    #buy_device .page_title a {
        color: #191919;
    }

.listview .col-xl-4.col-lg-4.col-md-6.col-sm-6.col-12 {
    width: 100% !important;
}

.listview .card-grid-style-3 .card-grid-inner .image-box {
    width: 23%;
    margin-right: 11px;
    margin-bottom: 0;
}

.listview .card-grid-style-3 .card-grid-inner {
    display: flex;
    align-items: center;
}

.listview .card-grid-style-3 .info-right {
    width: 62%;
}

.card-grid-style-3 .card-grid-inner .info-right a:hover {
    color: #191919 !important;
}

.listview .card-grid-style-3 .btn.btn-cart {
    width: 135px;
}

.listview .info-right br {
    display: none !important;
}

.order-lg-first .sidebar-border {
    overflow: hidden;
    transition: height 0.9s ease;
    cursor: pointer;
    height: auto;
}

.order-lg-first.hidemenu .sidebar-border {
    height: 0;
    transition: height 0.9s ease;
    margin-bottom: 16px !important;
}

.order-lg-first.hidemenu .sidebar-border, .order-lg-first.hidemenu .sidebar-head {
    border: 0;
}



.btn.btn-buy {
    border: 1px solid #357ae8;
    background-color: #357ae8;
}

    .btn.btn-buy:hover {
        border: 1px solid #191919;
        color: #191919;
    }

#ModalFiltersForm .modal-dialog {
    max-width: 774px;
}

#ModalFiltersForm .text-small {
    font-size: 16px;   /* mobile brand/option name */
}

#ModalFiltersForm * {
    font-weight: 500;
}

@media (max-width:768px) {
    .listview .info-right > .color-brand-3 {
        min-height: 38px;
        height: auto;
        display: block;
    }

    .card-grid-inner .btn.btn-wishlist, .card-grid-inner .btn.btn-quickview {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }
}

@media (max-width:575px) {
    .card-grid-style-3 .card-grid-inner .image-box img {
        visibility: hidden;
    }

    .card-grid-style-3 .card-grid-inner .image-box > a {
        background-size: contain;
        background-position: center;
    }
}

.rangeSlider {
    cursor: none;
    pointer-events: none;
}

    .rangeSlider .noUi-handle {
        cursor: pointer;
        pointer-events: auto;
    }


.image-box .shopImg {
    background-position: center;
    background-size: contain;
}

.dropdown-sort .dropdown-toggle:after {
    color: #383838 !important;
}

/* ============================================================
   NextMerce-style filter sidebar (desktop / tablet >= 992px).
   The checkbox visuals reuse the existing .cb-container/.checkmark component and
   the price slider reuses the existing #slider-range-buy-price noUiSlider — only
   the cards, headers and spacing are new here.
   ============================================================ */
.Shop .shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Shop .shop-filter-card,
.Shop .shop-filter-group {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* "Filters: / Clean All" header card */
.Shop .shop-filter-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 20px;
}
/* Desktop Sort By button: same height as the "Filters" card, content vertically centered
   (both sit at the top of their columns, so they line up). */
.Shop #dropdownSort.dropdownFilterBtn {
    height: 34px;
    font-size: 12.5px;
    padding: 0 12px;
    /* override site.css `#dropdownSort.dropdownFilterBtn { width:200px !important }` so the
       button expands with the (variable-length) sort label instead of clipping it. */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}
/* Mobile "Sort By" button: match the smaller size. */
.Shop #dropdownSortMobile.dropdownFilterBtn {
    height: 34px;
    font-size: 12.5px;
    padding: 0 12px;
}
.Shop .shop-filter-card p { margin: 0; color: #191919; font-weight: 500; }
.Shop .shop-filter-clean {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #4285f4; font-size: 0.875rem; font-weight: 500;
}
.Shop .shop-filter-clean:hover { text-decoration: underline; }
/* disabled when there are no clearable filters applied */
.Shop .shop-filter-clean.is-disabled { opacity: .45; pointer-events: none; cursor: default; }

/* Collapsible filter group */
.Shop .shop-filter-group { overflow: hidden; }
.Shop .shop-filter-toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 22px;
    background: none; border: 0;
    box-shadow: inset 0 -1px 0 #f0f0f0;
    cursor: pointer; color: #191919; font-weight: 500; font-size: 17px;
}
.Shop .shop-filter-toggle .chev { color: #707070; transition: transform 0.2s ease; flex-shrink: 0; }
.Shop .shop-filter-group.is-collapsed .shop-filter-toggle .chev { transform: rotate(-90deg); }
.Shop .shop-filter-group.is-collapsed .shop-filter-body { display: none; }
.Shop .shop-filter-body { padding: 16px 22px 22px; }

/* Compact brand list spacing in BOTH the sidebar and the mobile drawer. */
.Shop .shop-filter-body .list-checkbox { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.Shop .shop-filter-body .list-checkbox li { margin: 0; }
/* the legacy .cb-container adds its own 12px margin-bottom + 22px line-height — drop them
   so rows are tight (only the list's gap separates them). */
/* Flex row so the label text is vertically centered with the checkbox (instead of the
   legacy absolute-checkmark + padding-left layout). */
.Shop .shop-filter-body .cb-container {
    display: flex;
    align-items: center;
    gap: 8px;
    /* !important: beats `.modal-body .list-checkbox li .cb-container { padding-left:26px }`
       from _shopgrid.scss (specificity 0,3,1) that was pushing the checkbox to the right. */
    padding-left: 0 !important;
    font-size: 14px; color: #191919;
    margin-bottom: 0 !important; line-height: 1.3;
}
.Shop .shop-filter-body .cb-container .checkmark {
    position: relative;   /* keep a positioning context for the tick :after, but in flex flow */
    order: -1;            /* checkbox before the label text */
    top: auto; left: auto;
    flex-shrink: 0;
}
/* checkbox state is instant (no transition) so the tick snaps in on click */
.Shop .shop-filter-body .cb-container .checkmark,
.Shop .shop-filter-body .cb-container .checkmark:after { transition: none !important; }
.Shop .shop-filter-body .cb-container:hover { color: #4285f4; }
/* Smaller checkbox in the shop filter (sidebar + mobile drawer). Shrinks the box
   from the base 18px to 14px. Everything here is box-sizing:border-box (Bootstrap),
   so the checked :after must be box−2 (=12px) at -1px/-1px — same ratio the base uses
   for the 18px box (16px @ -1px) — otherwise a 14px :after overflows the 10px inner box
   and reads as a second checkbox behind the first. The 14x10 tick.svg is scaled to fit. */
.Shop .shop-filter-body .cb-container .checkmark {
    width: 14px;
    height: 14px;
}
.Shop .shop-filter-body .cb-container .checkmark:after {
    left: -1px; top: -1px;
    width: 12px; height: 12px;
    background-size: 9px auto;
}
.Shop .shop-sidebar .see-more-btn { display: inline-block; margin-top: 14px; color: #4285f4; cursor: pointer; font-size: 14px; }
.Shop .shop-sidebar .see-more-btn:hover { text-decoration: underline; }

/* Price min/max input widget (used in BOTH the desktop sidebar and the mobile drawer):
   soft rounded boxes with a muted "$" prefix and a focus ring. */
.Shop .price-amount {
    display: flex; align-items: center; gap: 10px;
    padding-top: 20px;
}
.Shop .price-amount .pa-box {
    display: inline-flex; align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 8px; overflow: hidden;
    background: #F7F9FC;
    flex: 1 1 0; min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.Shop .price-amount .pa-box:focus-within {
    border-color: #4285f4;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}
.Shop .price-amount .pa-cur {
    padding: 9px 11px;
    color: #9AA3B2; font-size: 13px; font-weight: 500;
    border-right: 1px solid #E5E7EB;
    flex-shrink: 0;
}
/* editable min/max price input (keyboard); the "$" is the .pa-cur label */
.Shop .price-amount .pa-val {
    width: 100%; min-width: 0;
    padding: 9px 10px;
    border: 0; outline: none; background: transparent;
    font-size: 13px; color: #191919; font-weight: 500;
    text-align: center;
}

/* All brands are shown now (no "see more"); keep the collapsible list scrollable so it
   never makes the sidebar/drawer overly tall. */
.Shop .shop-filter-body .list-checkbox {
    max-height: 280px;
    /* `scroll` (not `auto`) keeps the track reserved + visible at all times, even on touch
       devices where an `auto` overlay scrollbar would auto-hide. */
    overflow-y: scroll;
}
.Shop .shop-filter-body .list-checkbox::-webkit-scrollbar { width: 0; }
/* hide the up/down arrow buttons Chrome/Edge draw at the ends of a styled scrollbar */
.Shop .shop-filter-body .list-checkbox::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.Shop .shop-filter-body .list-checkbox::-webkit-scrollbar-track { background: transparent; }
.Shop .shop-filter-body .list-checkbox::-webkit-scrollbar-thumb { background: #C7CDD9; border-radius: 4px; }
.Shop .shop-filter-body .list-checkbox::-webkit-scrollbar-thumb:hover { background: #AAB2C2; }
/* NOTE: intentionally NOT setting the standard `scrollbar-width`/`scrollbar-color` here.
   On Chrome/Edge 121+ those take precedence over and DISABLE the ::-webkit-scrollbar rules
   above (including the hidden buttons), which is what left the up/down arrows visible. Sticking
   to ::-webkit-scrollbar keeps the thin, arrow-less scrollbar; Firefox falls back to its own
   default scrollbar (which has no arrow buttons anyway). */

/* ---- Mobile drawer touch behaviour ----------------------------------------------------
   (a) No text selection / long-press callout anywhere in the drawer — kills the highlight
       flashes and, crucially, stops the browser from starting a selection when you press-
       and-hold the price handle (that selection swallows the touchend, which is why the
       handle "stuck" to the finger). (b) touch-action:none lets noUiSlider fully own the
       drag gesture so the browser never claims it for panning. */
#advancedfilter,
#ModalFiltersForm .modal-content {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.Shop #slider-range-buy-price,
.Shop #slider-range-buy-price-mobile,
.Shop #slider-range-buy-price .noUi-base,
.Shop #slider-range-buy-price-mobile .noUi-base,
.Shop #slider-range-buy-price .noUi-handle,
.Shop #slider-range-buy-price-mobile .noUi-handle {
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Stack the collapsible filter cards in the mobile drawer with breathing room. */
#advancedfilter .shop-filter-group { margin-bottom: 16px; }
#advancedfilter .shop-filter-group:last-of-type { margin-bottom: 0; }
.Shop #slider-range-buy-price,
.Shop #slider-range-buy-price-mobile { margin-top: 6px; }

/* "Apply" button under the price range (desktop sidebar + mobile drawer use .shop-price-apply). */
.Shop .shop-price-apply {
    width: 100%;
    margin-top: 18px;
    border: 0; cursor: pointer;
    background: #4285f4; color: #fff;
    font-size: 14px; font-weight: 500;
    border-radius: 8px;
    padding: 9px 16px;
    transition: background-color .2s ease;
}
.Shop .shop-price-apply:hover { background: #1C3FB7; }

/* ============================================================
   Mobile filter as a LEFT side drawer (instead of a centered popup).
   Restyles the existing Bootstrap modal (#ModalFiltersForm) so its open/close JS,
   "Apply filters" and "Reset" all keep working. ID specificity beats Bootstrap's
   .modal/.modal-xl transform rules, so no extra !important needed beyond the slide.
   ============================================================ */
#ModalFiltersForm .modal-dialog {
    margin: 0;
    max-width: 360px;
    width: 88%;
    height: 100vh;
    height: 100dvh;                             /* fit the VISIBLE viewport (excl. mobile chrome) */
    transform: translateX(-100%) !important;   /* off-screen left when hidden */
    transition: transform .3s ease-out;
}
#ModalFiltersForm.show .modal-dialog { transform: translateX(0) !important; }   /* slide in */
/* Fixed header + footer, only the body scrolls: the content box is exactly one screen tall
   (100dvh) and clips, so nothing pushes the top/bottom into the scroll region. */
#ModalFiltersForm .modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    border: 0;
    border-radius: 0;
}
#ModalFiltersForm .modal-header { flex: 0 0 auto; }
#ModalFiltersForm .modal-body {
    flex: 1 1 auto;
    min-height: 0;                              /* let the flex child actually shrink + scroll */
    overflow-y: auto;
    overscroll-behavior: contain;              /* don't chain-scroll the page behind the drawer */
    padding: 8px !important;
}
#ModalFiltersForm .modal-footer { flex: 0 0 auto; flex-shrink: 0; background: #fff; }
/* Align the drawer toolbar (header + footer) and the section content to one common 16px
   left edge: header/footer at 16px; cards sit inside the 8px body, so their content uses
   8px padding -> 8 + 8 = 16px. The checkbox is the first item (no start padding), so it
   lines up with the section name above it. */
#ModalFiltersForm .modal-header { padding-left: 16px; padding-right: 16px; }
#ModalFiltersForm .modal-footer { padding-left: 16px !important; padding-right: 16px; }
/* Keep the buttons / title clear of the system gesture bar & notch. env(...) resolves to 0
   when there's no inset (needs viewport-fit=cover, set in _Layout), so it degrades cleanly. */
#ModalFiltersForm .modal-footer {
    /* The drawer is 100dvh — the visible viewport, already above the system nav / gesture
       bar — so the footer only needs its normal padding. Adding env(safe-area-inset-bottom)
       on top double-counts the bar and leaves too much space under the button. iOS below. */
    padding-bottom: 0.75rem !important;
}
/* iOS only (WebKit): iOS extends the drawer behind the home indicator, so re-add the
   safe-area inset there. Android/Firefox keep the plain padding above (100dvh already
   clears their nav bar) so they don't double-count. */
@supports (-webkit-touch-callout: none) {
    #ModalFiltersForm .modal-footer {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    }
}
#ModalFiltersForm .modal-header {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}
#advancedfilter .shop-filter-toggle { padding: 10px 8px; }
#advancedfilter .shop-filter-body { padding: 12px 8px; }

/* disabled state for the drawer's Apply / Reset buttons (they're <a>, so no native disabled) */
#ModalFiltersForm .modal-footer .btn.is-disabled {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

/* Apply + Reset: same height, vertically centered content. */
#ModalFiltersForm .modal-footer #applyfilter,
#ModalFiltersForm .modal-footer #resetFilters {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* Reset Filter: outlined (stroke border) button. */
#ModalFiltersForm .modal-footer #resetFilters {
    border: 1px solid #D5DBE7;
    border-radius: 8px;
}
#ModalFiltersForm .modal-footer #resetFilters:hover {
    border-color: #4285f4;
    color: #4285f4 !important;
}

/* RTL: slide in from the right edge instead of the left. */
[dir="rtl"] #ModalFiltersForm .modal-dialog { margin-left: auto; transform: translateX(100%) !important; }
[dir="rtl"] #ModalFiltersForm.show .modal-dialog { transform: translateX(0) !important; }

/* Gap between the filter sidebar and the product grid (the row's gutter is zeroed for
   frame alignment, so add the spacing here). Desktop/tablet only — sidebar is hidden below. */
@media (min-width: 992px) {
    .Shop #mainFilters { padding-right: 24px; }
}

/* Reserve the colour + storage-options rows' height on every product card so the rows
   (and therefore the price below them) line up even when a product has no colours or no
   storage options. The containers are always rendered (empty) by shop.js's templateV2. */
/* High specificity + !important so these beat the existing
   `.Shop .card-grid-style-3 .card-grid-inner .card-product-*` rules in site.css/inline. */
/* Colours row reserves a consistent height whether or not any swatches are drawn. The
   inner <ul> gets its default margin/padding zeroed (like the storage container) so a
   drawn row is the same height as an empty one and the cards line up. */
.Shop .card-grid-style-3 .card-grid-inner .card-product-colors {
    min-height: 18px !important;
    margin: 0 0 6px !important;
}
.Shop .card-grid-style-3 .card-grid-inner .card-product-colors ul {
    margin: 0 !important;
    padding: 0 !important;
}
/* Reserve 1 row of storage pills so every card's storage area is the same height. */
.Shop .card-grid-style-3 .card-grid-inner .card-product-storage { min-height: 25px !important; }

/* Price box: only as tall as its text, with a gap above it (the seller/date line).
   In shop.css (not the inline <style>) so both apply on a refresh; padding (not margin)
   because the price box is pinned to the bottom with margin-top:auto. */
.Shop .card-grid-style-3 .card-grid-inner .info-right .price-info {
    height: auto !important;
    padding-top: 10px !important;
}

/* Product image: subtle zoom on hover (matches the home page). The visible image is the
   background on a.shopImg, so we scale that and clip it to the image box. */
.Shop .card-grid-style-3 .image-box { overflow: hidden; border-radius: 4px; }
.Shop .card-grid-style-3 .image-box .shopImg { transition: transform .3s ease; }
.Shop .card-grid-style-3:hover .image-box .shopImg { transform: scale(1.05); }

/* ---- Empty state (no products) — spans the full product grid, centered ---- */
.Shop .listinggrid .shop-empty-state,
.Shop .shop-empty-state {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 20px;
}
.Shop .shop-empty-illus {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EEF3FF;
    color: #4285f4;
    margin-bottom: 18px;
}
.Shop .shop-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #191919;
    margin: 0 0 6px;
}
.Shop .shop-empty-text {
    font-size: 14px;
    color: #707070;
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}
.Shop .shop-empty-clear {
    margin-top: 20px;
    border: 0;
    cursor: pointer;
    background: #4285f4;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 9999px;
    padding: 10px 26px;
    transition: background-color .2s ease;
}
.Shop .shop-empty-clear:hover { background: #1C3FB7; }
@media (max-width: 575px) {
    .Shop .shop-empty-state { padding: 36px 16px; }
    .Shop .shop-empty-illus { width: 72px; height: 72px; margin-bottom: 14px; }
    .Shop .shop-empty-title { font-size: 16px; }
    .Shop .shop-empty-text { font-size: 13px; }
}

/* ============================================================
   Sort dropdown — toggle button + a menu that matches the button width with
   refined option cells. Used on desktop (#dropdownSort) and mobile (#dropdownSortMobile).
   ============================================================ */
.Shop .dropdown-sort { position: relative; }
.Shop .dropdown-sort .dropdownFilterBtn {
    border: 1px solid #D5DBE7 !important;
    border-radius: 8px;
    background: #fff !important;
    color: #191919 !important;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    white-space: nowrap;       /* keep the label on one line; the button expands to fit it */
}
.Shop .dropdown-sort .dropdownFilterBtn:hover { border-color: #4285f4 !important; }
/* chevron-down caret. Overrides the uicons font-icon at style.css:9539
   (`.dropdown-sort .dropdown-toggle:after { content:"\f151"; font-family:uicons }`),
   which doesn't render when that font isn't loaded — hence "no arrow". !important + an
   explicit colour + font-family:inherit defeat it; also matched via .dropdown-toggle. */
.Shop .dropdown-sort .dropdownFilterBtn::after,
.Shop .dropdown-sort .dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    position: static !important;   /* the icon-font caret was absolute -> floating outside */
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: 7px !important;
    height: 7px !important;
    border: 0 !important;
    border-right: 1.6px solid #383838 !important;
    border-bottom: 1.6px solid #383838 !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    line-height: 0 !important;
    align-self: center;            /* vertically centered inside the button */
    flex-shrink: 0;
    /* translateY lifts the rotated 'v' so it's optically centered, not just box-centered */
    transform: translateY(-1px) rotate(45deg);
    margin: 0 0 0 4px !important;
    transition: transform .2s ease;
}
.Shop .dropdown-sort .dropdownFilterBtn[aria-expanded="true"]::after,
.Shop .dropdown-sort .dropdown-toggle[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);   /* point up when the menu is open */
}

/* menu = button width */
.Shop .sorting-dropdownMenu {
    width: 100%;
    min-width: 100%;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
}
.Shop .sorting-dropdownMenu li { width: 100%; }
.Shop .sorting-dropdownMenu .dropdown-item {
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: #383838;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.Shop .sorting-dropdownMenu .dropdown-item:hover { background: #F2F6FF; color: #4285f4 !important; }
.Shop .sorting-dropdownMenu .dropdown-item.active { background: #4285f4; color: #fff !important; }

/* ============================================================
   Mobile toolbar: an improved "Filters" button + a sort dropdown beneath it.
   ============================================================ */
@media (max-width: 991.98px) {
    /* Category-page toolbar (Talaco-style layout, Taqqsit palette), compact for phone/fold/tablet:
       Row 1 = breadcrumb "Home » Category" (left) + "N results" (right), divider beneath.
       Row 2 = two small text-style action buttons — "Filters" (left, opens the drawer) and
               "Sort by" (right, expandable sort panel). No space below the row. */
    .Shop .pagination-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        column-gap: 12px;
        row-gap: 0;
        text-align: start !important;
        margin-bottom: 0 !important;
        padding: 0 2px;
    }
    /* the plain category heading is replaced by the breadcrumb on mobile */
    .Shop .pagination-container .buydevice-category { display: none !important; }

    /* ---- Row 1: breadcrumb (left) + results count (right) ---- */
    .Shop .pagination-container .shop-breadcrumb {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        color: #707070;
        white-space: nowrap;
        overflow: hidden;
    }
    .Shop .pagination-container .shop-breadcrumb a { color: #707070; }
    .Shop .pagination-container .shop-breadcrumb a:hover { color: #4285f4; }
    .Shop .pagination-container .shop-breadcrumb .crumb-sep { color: #b8bfcc; flex-shrink: 0; }
    .Shop .pagination-container .shop-breadcrumb .crumb-current {
        color: #191919;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .Shop .pagination-container #paginationInfo {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        text-align: end !important;
        white-space: nowrap;
        color: #707070 !important;
    }
    /* divider + forced line break between the info row and the buttons (small gap above buttons) */
    .Shop .pagination-container::after {
        content: "";
        order: 3;
        flex: 0 0 100%;
        height: 0;
        border-top: 1px solid #E5E7EB;
        margin: 8px 0;
    }

    /* ---- Row 2: compact text-style action buttons (Filters left, Sort by right) ---- */
    .Shop .pagination-container .btn-filter { order: 4; margin-inline-end: auto; }
    .Shop .pagination-container .mobile-sort { order: 5; }

    .Shop .pagination-container .btn-filter,
    .Shop .pagination-container #dropdownSortMobile {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto;
        height: auto;
        min-height: 0;
        padding: 2px 2px !important;
        margin: 0;
        border: 0 !important;
        border-radius: 0;
        background: none !important;
        box-shadow: none !important;
        color: #191919 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1;
    }
    .Shop .pagination-container .btn-filter:hover,
    .Shop .pagination-container #dropdownSortMobile:hover,
    .Shop .pagination-container #dropdownSortMobile[aria-expanded="true"] {
        color: #4285f4 !important;
    }
    /* Sort By button only: 3px between the "Sort By:" and value spans (match desktop).
       The Filters button keeps the shared 6px icon-to-text gap. */
    .Shop .pagination-container #dropdownSortMobile { gap: 3px; }
    .Shop .pagination-container .btn-filter .filter-ic,
    .Shop .pagination-container #dropdownSortMobile .sort-ic {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }
    /* drop Bootstrap's default caret on the sort toggle — the sort icon replaces it */
    .Shop .pagination-container #dropdownSortMobile.dropdown-toggle::after {
        display: none !important;
    }

    /* ---- Expandable "Sort by" panel: titled list, underline-active option (site palette) ---- */
    .Shop .mobile-sort .sort-panel {
        /* width comes from the global rule (width:100%/min-width:100% = the button's width) */
        padding: 6px 0 8px;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    }
    .Shop .mobile-sort .sort-panel .sortingItems {
        display: block;
        padding: 6px 18px;
        font-size: 14px;
        font-weight: 500;
        color: #191919;
        background: none;
    }
    .Shop .mobile-sort .sort-panel .sortingItems:hover {
        color: #4285f4;
        background: #F5F7FF;
    }
    /* the menu also carries .sorting-dropdownMenu, whose .active rule paints a blue
       pill with `color:#fff !important` — override it so the panel keeps its clean
       underlined-blue selected style. */
    .Shop .mobile-sort .sort-panel .sortingItems.active {
        color: #4285f4 !important;
        background: none !important;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* drop the section's bottom border/divider that sits under the Filters/Sort-by row */
    .Shop .box-filters.border-bottom { border-bottom: 0 !important; }
}

/* "{count} results found" — count emphasized, rest muted. */
.Shop .pagination-info,
.Shop #paginationInfo {
    display: inline-block;
    font-size: 14px;
    font-weight: 400 !important;
    color: #707070 !important;
    white-space: nowrap;
}
.Shop #paginationInfo .pi-count { color: #191919; font-weight: 600; }

/* Slider fills its container so the handles read the very ends of the track. */
.Shop #slider-range-buy-price,
.Shop #slider-range-buy-price-mobile { padding: 0; box-sizing: border-box; }

/* Drawer footer: center the Apply / Reset buttons horizontally. */
#ModalFiltersForm .modal-footer { justify-content: center !important; }

/* Drawer title filter icon: same size as the checkbox (18px), left-centered, and
   tinted to match the title text (via currentColor on a masked pseudo-element —
   the raw SVG is stroked a fixed blue-grey, so a plain background-image can't
   follow the text colour). */
#ModalFiltersForm .filters-icon {
    background-image: none;
    padding-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}
#ModalFiltersForm .filters-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url(../imgs/page/shop/filter.svg) center / 18px 18px no-repeat;
    mask: url(../imgs/page/shop/filter.svg) center / 18px 18px no-repeat;
}

/* ---- Price slider: thin line + vertical-bar handles (older noUiSlider carries the height on
        target/base/origin). Track = 2px grey line, range = 2px accent, handles = slim bars. ---- */
.Shop #slider-range-buy-price.noUi-target,
.Shop #slider-range-buy-price.noUi-horizontal,
.Shop #slider-range-buy-price-mobile.noUi-target,
.Shop #slider-range-buy-price-mobile.noUi-horizontal,
.Shop #slider-range-buy-price .noUi-base,
.Shop #slider-range-buy-price-mobile .noUi-base,
.Shop #slider-range-buy-price .noUi-origin,
.Shop #slider-range-buy-price-mobile .noUi-origin {
    height: 2px !important;
}
.Shop #slider-range-buy-price.noUi-target,
.Shop #slider-range-buy-price-mobile.noUi-target {
    border: 0 !important;
    background: #E5E7EB !important;   /* light-grey track line */
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 10px 0 !important;        /* vertical room for the taller bar handles */
}
.Shop #slider-range-buy-price .noUi-connect,
.Shop #slider-range-buy-price-mobile .noUi-connect {
    background: #4285f4 !important;   /* accent range fill */
    border-radius: 0 !important;
}
.Shop #slider-range-buy-price .noUi-handle,
.Shop #slider-range-buy-price-mobile .noUi-handle {
    width: 4px !important;
    height: 15px !important;
    left: -2px !important;            /* this noUiSlider positions handles with `left` */
    right: auto !important;
    top: -7px !important;             /* centre the 15px bar on the 2px track */
    border-radius: 0 !important;
    background: #4285f4 !important;   /* solid accent bar */
    border: 0 !important;
    box-shadow: none !important;
    cursor: ew-resize;
}
.Shop #slider-range-buy-price .noUi-handle:hover,
.Shop #slider-range-buy-price-mobile .noUi-handle:hover,
.Shop #slider-range-buy-price .noUi-handle:focus,
.Shop #slider-range-buy-price-mobile .noUi-handle:focus {
    background: #1C3FB7 !important;
    outline: none !important;
}
.Shop #slider-range-buy-price .noUi-handle::before,
.Shop #slider-range-buy-price .noUi-handle::after,
.Shop #slider-range-buy-price-mobile .noUi-handle::before,
.Shop #slider-range-buy-price-mobile .noUi-handle::after { display: none !important; }

/* ---- Tap-to-set + touch-friendly hit area (fixes iPhone "touch not catching") ----
   The base `.rangeSlider { pointer-events:none }` above disabled tapping the track, so
   the only way to change the value was to grab the 4px handle. noUiSlider 8.3.0 already
   ships `behaviour:"tap"` (clicking the bar moves the nearest handle) — re-enabling
   pointer events on the track brings that back. The transparent bands then give fingers
   a generous target over the slim 2px line, WITHOUT changing how the slider looks. */
.Shop #slider-range-buy-price,
.Shop #slider-range-buy-price-mobile,
.Shop #slider-range-buy-price .noUi-base,
.Shop #slider-range-buy-price-mobile .noUi-base {
    pointer-events: auto !important;   /* beats .rangeSlider { pointer-events:none } */
    cursor: pointer;
}
/* Full-width, ~30px-tall invisible strip centred on the line: tapping anywhere in it
   lands on the base (where noUiSlider's tap listener lives) and jumps the nearest handle.
   z-index below the handles so grabbing/dragging a handle still wins near it. */
.Shop #slider-range-buy-price .noUi-base::before,
.Shop #slider-range-buy-price-mobile .noUi-base::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -14px; bottom: -14px;
    background: transparent;
    z-index: 0;
}
/* Enlarge the 4px bar handle's touch area to a comfortable ~28x30px grab zone (still
   invisible) so it can also be dragged directly on touch screens. */
.Shop #slider-range-buy-price .noUi-handle::after,
.Shop #slider-range-buy-price-mobile .noUi-handle::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: -12px; bottom: -12px;
    left: -12px; right: -12px;
    background: transparent;
}

/* ---- Price amount row: "Filter" button + "Price: from — to" label (replaces the inputs) ---- */
.Shop .price_slider_amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
}
.Shop .price_slider_amount .price_label {
    font-size: 13px;
    color: #191919;
    font-weight: 500;
    white-space: nowrap;
}
.Shop .price_slider_amount .price_label .from,
.Shop .price_slider_amount .price_label .to { font-weight: 600; }
/* compact grey Filter button (overrides the full-width blue .shop-price-apply for this layout) */
.Shop .price_slider_amount .shop-price-apply {
    width: auto;
    margin: 0;
    padding: 5px 14px;
    font-size: 12.5px;
    flex: 0 0 auto;
    background: #f2f3f5;
    border: 1px solid #e2e5ea;
    color: #191919;
}
.Shop .price_slider_amount .shop-price-apply:hover {
    background: #e6e8ec;
    border-color: #d5d9df;
}
.Shop .price_slider_amount .min-value-money,
.Shop .price_slider_amount .max-value-money { display: none !important; }

/* ---- Desktop toolbar: a 2-row grid. Row 1 = category heading (left) + "N results found"
        count (right). Row 2 = "Home » Category" breadcrumb (left) + Sort By button (right,
        text style matching the mobile sort button). ---- */
@media (min-width: 992px) {
    /* The four toolbar items live in two separate Bootstrap columns (.desktopFilters holds
       the Sort By button; .pagination-container holds the heading, breadcrumb and count).
       Make the row a 2-column grid and `display: contents` the two columns so their children
       become direct grid items and can share the same rows. */
    .Shop .box-filters > .row {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 4px;
        margin: 0 !important;   /* drop Bootstrap's negative gutter margins */
    }
    .Shop .box-filters > .row > .desktopFilters,
    .Shop .box-filters > .row > .pagination-container {
        display: contents !important;
    }

    /* Row 1 left: category heading */
    .Shop .box-filters .pagination-container .buydevice-category {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        text-align: start;
    }
    /* Row 1 right: "N results found" count */
    .Shop .box-filters .pagination-container #paginationInfo {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: end !important;
        white-space: nowrap;
    }
    /* Row 2 left: breadcrumb (carries .mobileFilters -> hidden by default; force-show here) */
    .Shop .box-filters .pagination-container .shop-breadcrumb {
        display: inline-flex !important;
        grid-column: 1;
        grid-row: 2;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #707070;
        white-space: nowrap;
    }
    .Shop .box-filters .pagination-container .shop-breadcrumb a { color: #707070; }
    .Shop .box-filters .pagination-container .shop-breadcrumb a:hover { color: #4285f4; }
    .Shop .box-filters .pagination-container .shop-breadcrumb .crumb-sep { color: #b8bfcc; flex-shrink: 0; }
    .Shop .box-filters .pagination-container .shop-breadcrumb .crumb-current { color: #191919; font-weight: 600; }
    /* Row 2 right: Sort By button — its .sorting-container wrapper is the grid item once
       .desktopFilters is display:contents */
    .Shop .box-filters .desktopFilters .sorting-container {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        margin: 0;
    }
    /* the 2-row grid has no divider; hide the old one + the mobile-only buttons on desktop */
    .Shop .box-filters .pagination-container::after { content: none !important; }
    .Shop .box-filters .pagination-container .btn-filter,
    .Shop .box-filters .pagination-container .mobile-sort { display: none !important; }
    /* Sort By button: borderless text style, matching the mobile sort button (no border,
       background, shadow or caret — shop.js keeps the "Sort By: <option>" label in sync). */
    .Shop .box-filters .desktopFilters #dropdownSort.dropdownFilterBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 3px;   /* space between the "Sort By:" and value spans (this button only) */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0;
        padding: 2px 2px !important;
        margin: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        color: #191919 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1;
    }
    .Shop .box-filters .desktopFilters #dropdownSort.dropdownFilterBtn:hover,
    .Shop .box-filters .desktopFilters #dropdownSort.dropdownFilterBtn[aria-expanded="true"] {
        color: #4285f4 !important;
    }
    .Shop .box-filters .desktopFilters #dropdownSort.dropdownFilterBtn::after,
    .Shop .box-filters .desktopFilters .dropdown-sort .dropdown-toggle::after {
        display: none !important;
    }
    /* Sort menu: match the mobile "sort panel" look — clean list with an underline-active
       option (no blue pill). Positioning is left to Bootstrap's Popper: dropdown-menu-end
       (data-popper-placement="bottom-end") already aligns the menu's end under the button's
       end via its inline transform, so we must NOT set left/right here — doing so fought that
       transform and pushed the menu ~60px off. */
    .Shop .box-filters .desktopFilters .sorting-dropdownMenu {
        /* width comes from the global rule (width:100%/min-width:100% = the button's width) */
        padding: 6px 0 8px;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    }
    .Shop .box-filters .desktopFilters .sorting-dropdownMenu .dropdown-item {
        display: block;
        padding: 6px 18px;
        font-size: 14px;
        font-weight: 500;
        color: #191919;
        background: none;
    }
    .Shop .box-filters .desktopFilters .sorting-dropdownMenu .dropdown-item:hover {
        color: #4285f4 !important;
        background: #F5F7FF;
    }
    .Shop .box-filters .desktopFilters .sorting-dropdownMenu .dropdown-item.active {
        color: #4285f4 !important;
        background: none !important;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* no bottom border under the toolbar on desktop either (the info/sort divider is enough) */
    .Shop .box-filters.border-bottom { border-bottom: 0 !important; }
}

/* ---- Desktop: compact "Apply" button inline with the price min/max inputs ---- */
.Shop .price-amount .shop-price-apply {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0 14px;
    align-self: stretch;          /* match the height of the price boxes */
    white-space: nowrap;
    /* same palette as the price input boxes (light fill, grey border, dark text) */
    background: #F7F9FC !important;
    border: 1px solid #E5E7EB !important;
    color: #191919 !important;
}
.Shop .price-amount .shop-price-apply:hover {
    background: #EEF1F6 !important;
    border-color: #D5DBE7 !important;
}

/* ---- Mobile search: original input bar with the submit button INSIDE, at the right end ---- */
.Shop .box-header-mobile-search {
    display: flex !important;
    align-items: center;
    padding: 0 !important;        /* no internal padding (horizontal + vertical) */
}
.Shop .box-header-mobile-search .input_search {
    flex: 1 1 auto;
    min-width: 0;
}
.Shop .box-header-mobile-search .btn-mobile-search {
    flex-shrink: 0;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin-inline: 3px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    background: #4285f4 !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease;
}
.Shop .box-header-mobile-search .btn-mobile-search:hover { background: #1C3FB7 !important; }
.Shop .box-header-mobile-search .btn-mobile-search svg { width: 16px; height: 16px; }

/* ---- Favorite hover label: match the homepage .showcase-tooltip white pill, desktop-only ----
   Re-skins the existing .btn-tooltip pseudo-tooltip (content: attr(aria-label)) into the
   homepage white pill + arrow, and hides it below 1280px (same breakpoint as the homepage).
   Scoped to .Shop; logical props so it flips for RTL. */
.Shop .btn-tooltip::after {
    content: attr(aria-label);
    inset-block-start: 50%;
    inset-inline-end: calc(100% + 14px);   /* pill sits inline-start of the icon */
    inset-block-end: auto;
    transform: translateY(-50%);
    background: #fff;
    color: #191919;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25rem;
    text-transform: capitalize;
    border-radius: 9999px;
    padding: 6px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    white-space: nowrap;
}
.Shop .btn-tooltip::before {          /* arrow: white triangle pointing at the button */
    inset-block-start: 50%;
    inset-inline-end: calc(100% + 7px);
    inset-block-end: auto;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-inline-start-color: #fff;
    border-inline-end-color: transparent;
}
.Shop .btn-tooltip:hover::before {    /* neutralise the base -8px hover shift */
    transform: translateY(-50%);
}
/* Same condition as the homepage: no hover label on mobile/tablet (below 1280px). */
@media (max-width: 1279.98px) {
    .Shop .btn-tooltip::after,
    .Shop .btn-tooltip::before { display: none !important; }
}

/* ---- Brand line above the product name (owner 2026-09-28), the home card's brand line
        (showcase-card.css .showcase-card__brand): 12/16, regular, text secondary, one line with
        an ellipsis, 2px above the name (custome.css already zeroes the name's own margins), so
        the name reads as its second line. A fixed height, so a card with the invisible placeholder
        (shop.js brandLineHtml: no brand in a batch that has brands) is exactly as tall as a
        card with a brand. Start-aligned with the direction class of the name (directionLTR),
        so in Arabic it sits over the name as well. ---- */
.Shop .card-grid-style-3 .card-grid-inner .card-brand-name {
    display: block;
    height: 16px;
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #6B7280;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Shop .card-grid-style-3 .card-grid-inner .card-brand-name.is-placeholder { visibility: hidden; }
@media (min-width: 640px) {
    .Shop .card-grid-style-3 .card-grid-inner .card-brand-name { height: 18px; font-size: 13px; line-height: 18px; }
}