/* ═══════════════════════════════════════════════════════════════════════════
   Pawsket — mobile app-feel overrides (M1: dense product grid + compact cards)
   Everything is scoped to ≤768px; desktop is untouched.
   Loaded after main.css/global.css so plain selectors win the cascade.
═══════════════════════════════════════════════════════════════════════════ */

/* Light-only storefront: the page shell (html/body/header) has no explicit
   background, so on a device in OS dark mode the transparent canvas renders
   BLACK behind the header and any gaps. The color-scheme meta isn't honoured
   everywhere, so pin an opaque light canvas. All viewports. */
html,
body {
    background-color: #ffffff !important;
}

@media (max-width: 768px) {

    /* ── 0. Full-width canvas on every page ─────────────────────────────
       main carries 1.5rem side padding globally — on a 375px phone that's
       48px lost. 8px gutters everywhere (basket/checkout go to 0 via
       their own body:has rules, which win on specificity). */
    main {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ── 1. Two-column product grids ────────────────────────────────────
       Listing + search results grid, favourites and buy-again grids.   */
    .brand__body_content__card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pet__category__selector__edit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* ── 2. Compact product card ────────────────────────────────────────
       Cuts the oversized paddings/type so ~4 products fit per screen.
       The add-to-basket control is pinned to the card's bottom corner. */
    .shop__card {
        position: relative;
        justify-content: flex-start;
        align-items: stretch;
        gap: 6px;
        border-radius: 14px;
        border-width: 1px;
        padding: 10px;
    }

    .shop__card .shop__img {
        margin-top: 0;
        height: 106px;
        width: 100%;
    }

    .shop__card .shop__img img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

    .shop__card .shop__content {
        width: 100%;
        gap: 2px;
    }

    /* Brand line: small + muted; not tappable on mobile (the whole card
       is the product link — brand filtering lives in the filter sheet). */
    .shop__card .shop__content .shop__content__link {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.2px;
        color: #8a8f98;
        text-decoration: none;
        pointer-events: none;
    }

    .shop__card .shop__content .shop__content__des {
        max-width: 100%;
        font-size: 12.5px;
        line-height: 1.35;
        min-height: 34px;          /* reserve 2 lines so prices align */
    }

    .shop__card .shop__content .shop__content__price {
        font-size: 14.5px;
        line-height: 1.2;
        font-weight: 700;
    }

    .shop__card .shop__content .shop__content__price span {
        font-size: 11px;
    }

    /* ── 3. Quick-add row (icon-only) ──────────────────────────────────
       Bottom-pinned IN FLOW (margin-top:auto on the card's flex column)
       — absolute positioning clipped inside Swiper slides. The existing
       .btn__add keeps its JS handlers; we only restyle it: font-size:0
       hides the label, the cart icon stays.                           */
    .shop__card .shop__btn {
        width: 100%;
        margin-top: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .shop__card .shop__btn .btn__add {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
        font-size: 0;              /* hides "Add To Basket" text node   */
        line-height: 0;
        gap: 0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .shop__card .shop__btn .btn__add img {
        width: 18px;
        height: 18px;
        margin: 0;
    }

    /* Quantity stepper (appears after add) fills the pinned row */
    .shop__card .shop__btn .add__count {
        width: 100%;
        height: 40px;
        margin: 0;
    }

    .shop__card .shop__btn .add__count img {
        width: 22px;
        height: 22px;
    }

    /* Out-of-stock: icon-only bell (the card already shows the "sold out"
       badge). The svg is orange, so it's applied as a mask and tinted:
       white bell on solid orange = "notify me"; inverted (soft bg, orange
       bell + border) = subscribed, tap to unsubscribe. Text/img children
       are hidden; the JS keeps working on the same element + classes.  */
    .shop__card .shop__btn .btn__notify {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        gap: 0;
        border-radius: 12px;
    }

    .shop__card .shop__btn .btn__notify img {
        display: none;
    }

    .shop__card .shop__btn .btn__notify::before {
        content: "";
        width: 20px;
        height: 20px;
        background-color: #fff;
        -webkit-mask: url("../assets/img/icons/notify.svg") center / contain no-repeat;
        mask: url("../assets/img/icons/notify.svg") center / contain no-repeat;
    }

    .shop__card .shop__btn .btn__notify.subscribed {
        background-color: #FFF1E7 !important;
        border: 1px solid #FF6A00;
    }

    .shop__card .shop__btn .btn__notify.subscribed::before {
        background-color: #FF6A00;
    }

    /* ── 4. Badges + wishlist sized for the small card ─────────────── */
    .shop__card .soldout h6,
    .shop__card .sale h6 {
        font-size: 11px;
        line-height: 1.2;
    }

    .shop__card .fav .fav-icon {
        width: 22px;
        height: 22px;
    }

    /* ── 5. Product page (PDP) — kill the dead space ────────────────────
       The image block reserved 60vh + 1.25rem gaps stacked everywhere,
       pushing name/price/CTA a full screen down. Compact gallery, tight
       title group, floating heart + share over the image.             */
    .product__main__img {
        height: 300px;
    }

    .product__details {
        gap: 10px;
    }

    .product__details__img {
        max-height: none;
        gap: 10px;
        padding-bottom: 12px;
    }

    .product__imgs {
        gap: 8px;
    }

    .product__imgs_slid {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }

    .product__content {
        gap: 12px;
    }

    .product__content__title {
        gap: 2px;
    }

    .product__name {
        font-size: 17px;
        line-height: 1.35;
    }

    .product__content__title .shop__content__link {
        font-size: 12px;
    }

    .product__content__price {
        padding-bottom: 10px;
        gap: 6px;
    }

    .product__content__price .price__new {
        font-size: 20px;
        font-weight: 700;
    }

    /* Heart + share float over the gallery (app pattern) */
    .product__details__img .shop__fav,
    .product__details__img .pdp-share {
        position: absolute;
        inset-inline-end: 8px;
        z-index: 5;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ececf1;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .product__details__img .shop__fav {
        top: 8px;
    }

    .product__details__img .pdp-share {
        top: 54px;
    }

    .product__details__img .shop__fav .fav-icon {
        width: 20px;
        height: 20px;
    }

    /* ── 6. Sticky buy bar (PDP) ────────────────────────────────────────
       .product__btn (existing Add / stepper / Notify controls — same DOM,
       same JS) is pinned to the bottom edge like the app. It replaces the
       tab bar on the product page (:has); on browsers without :has it
       simply covers it — same visual result.                          */
    .product__btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;              /* base css sets 100% — would fill the screen when fixed */
        z-index: 9995;
        background: #fff;
        border-top: 1px solid #ececf1;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: row;       /* base css stacks column */
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    body:has(.product__btn) .bottom-bar {
        display: none !important;
    }

    /* keep the page's tail (description/related/footer) reachable above
       the pinned bar */
    body:has(.product__btn) main {
        padding-bottom: 84px;
    }

    .product__btn .btn__add,
    .product__btn .product__btn_add {
        flex: 1;
        height: 46px;
        min-height: 46px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .product__btn .add__count {
        flex: 1;
        height: 46px;
        margin: 0;
    }

    .product__btn .btn__notify {
        flex: 1;
        height: 46px;
        min-height: 46px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    /* ── 7. PDP details: brand above name, variation chips, accordion ── */
    .product__content__title .shop__content__link {
        order: -1;                 /* brand line reads first, like the app */
    }

    /* Variation selects become tappable chips (the selects stay in the DOM,
       hidden — the chip enhancer drives them so all JS keeps working) */
    .product__options .option__group select.variation-select {
        display: none;
    }

    .product__options .option__group_label {
        font-size: 12px;
        font-weight: 600;
        color: #6a6f7a;
    }

    .option-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 6px;
    }

    .option-chip {
        border: 1.5px solid #d8d9e0;
        background: #fff;
        color: #1f2430;
        border-radius: 10px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }

    .option-chip.is-selected {
        border-color: #5C18E4;
        color: #5C18E4;
        background: rgba(92, 24, 228, 0.05);
    }

    .option-chip.is-disabled {
        opacity: 0.4;
        text-decoration: line-through;
    }

    /* About this product — app-style spec table */
    .pdp-about {
        border: 1px solid #ececf1;
        border-radius: 12px;
        background: #fff;
        margin-top: 8px;
        padding: 13px 14px;
    }

    .pdp-about__header {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 8px;
    }

    .pdp-about__table {
        width: 100%;
        border-collapse: collapse;
    }

    .pdp-about__table tr:nth-child(even) {
        background: #f7f7fa;
    }

    .pdp-about__table td {
        padding: 9px 8px;
        font-size: 13px;
    }

    .pdp-about__label {
        color: #8a8f98;
        width: 42%;
    }

    .pdp-about__value {
        color: #1f2430;
        font-weight: 600;
    }

    /* Share fallback menu (non-HTTPS / unsupported navigator.share) */
    .pdp-share-menu {
        position: absolute;
        top: 100px;
        inset-inline-end: 8px;
        z-index: 6;
        background: #fff;
        border: 1px solid #ececf1;
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
        display: flex;
        flex-direction: column;
        min-width: 150px;
        overflow: hidden;
    }

    .pdp-share-menu[hidden] {
        display: none;
    }

    .pdp-share-menu__item {
        padding: 12px 14px;
        font-size: 13px;
        font-weight: 600;
        color: #1f2430;
        text-decoration: none;
        text-align: start;
        background: #fff;
        border: none;
        border-bottom: 1px solid #f2f2f6;
        cursor: pointer;
    }

    .pdp-share-menu__item:last-child {
        border-bottom: none;
    }

    /* FAQ accordion (native <details>) */
    .pdp-faqs {
        border: 1px solid #ececf1;
        border-radius: 12px;
        background: #fff;
        margin-top: 8px;
        padding: 13px 14px;
    }

    .pdp-faqs__header {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 4px;
    }

    .pdp-faq {
        border-bottom: 1px solid #f2f2f6;
    }

    .pdp-faq:last-child {
        border-bottom: none;
    }

    .pdp-faq summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 0;
        font-size: 13.5px;
        font-weight: 600;
        color: #1f2430;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .pdp-faq summary::-webkit-details-marker {
        display: none;
    }

    .pdp-faq summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-inline-end: 2px solid #6a6f7a;
        border-bottom: 2px solid #6a6f7a;
        transform: rotate(45deg);
        transition: transform 0.2s;
        flex-shrink: 0;
    }

    .pdp-faq[open] summary::after {
        transform: rotate(225deg);
    }

    .pdp-faq p {
        padding: 0 0 11px;
        font-size: 13px;
        color: #4b5563;
        line-height: 1.5;
    }

    /* Recently viewed — horizontal scroll of mini cards */
    .pdp-recent {
        margin-top: 8px;
    }

    .pdp-recent__header {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 8px;
    }

    .pdp-recent__row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .pdp-recent__card {
        flex: 0 0 150px;
        display: flex;
        flex-direction: column;
        border: 1px solid #ececf1;
        border-radius: 14px;
        background: #fff;
        padding: 8px;
    }

    .pdp-recent__link {
        display: flex;
        flex-direction: column;
        gap: 6px;
        text-decoration: none;
    }

    /* Thumbnail on a soft tile (contains the image, consistent height) */
    .pdp-recent__thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 96px;
        border-radius: 10px;
        background: #f6f6fa;
        overflow: hidden;
    }

    .pdp-recent__card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pdp-recent__name {
        font-size: 12px;
        line-height: 1.35;
        color: #23262e;
        font-weight: 500;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-height: 32px; /* reserve 2 lines so every footer aligns */
    }

    .pdp-recent__price {
        font-size: 13px;
        font-weight: 800;
        color: #1D9E75;
        white-space: nowrap;
    }

    /* Footer: a compact icon button (right-aligned, like the grid cards)
       OR the full-width stepper */
    .pdp-recent__foot {
        margin-top: 8px;
        display: flex;
        justify-content: flex-end;
    }

    /* Add / notify button — compact rounded square, matches the grid cards */
    .pdp-recent__add {
        width: 46px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: #5C18E4;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 8px rgba(92, 24, 228, 0.28);
        transition: transform 0.1s, background 0.2s;
    }

    .pdp-recent__add img {
        width: 19px;
        height: 19px;
    }

    /* Out-of-stock → orange bell (white icon via filter) */
    .pdp-recent__add--notify {
        background: #F5811F;
        box-shadow: 0 3px 8px rgba(245, 129, 31, 0.28);
    }

    .pdp-recent__add--notify img {
        filter: brightness(0) invert(1);
    }

    .pdp-recent__add:active {
        transform: scale(0.93);
    }

    .pdp-recent__add.is-loading {
        opacity: 0.6;
    }

    /* stepper takes the full row (overrides the right-align) */
    .pdp-recent__foot:has(.pdp-recent__step) {
        justify-content: stretch;
    }

    /* Stepper — light pill + white button chips, dark glyphs (real imgs +
       filter, like the basket, so they render on every device) */
    .pdp-recent__step {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3px;
        width: 100%;
        height: 40px;
        padding: 3px;
        background: #f1eefb;
        border-radius: 12px;
    }

    .pdp-recent__stepbtn {
        width: 34px;
        height: 30px;
        flex-shrink: 0;
        border: none;
        background: #fff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .pdp-recent__stepbtn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) saturate(100%) invert(12%);
    }

    .pdp-recent__stepbtn.is-trash img {
        filter: none; /* keep the trash red */
    }

    .pdp-recent__stepbtn.is-trash {
        background: #fdf3f3;
    }

    .pdp-recent__qty {
        flex: 1;
        text-align: center;
        font-size: 14px;
        font-weight: 800;
        color: #23262e;
    }

    .pdp-recent__name {
        font-size: 11.5px;
        line-height: 1.3;
        color: #1f2430;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .pdp-recent__price {
        font-size: 12px;
        font-weight: 700;
        color: #1D9E75;
    }

    /* Filter trigger badge + sheet drag handle + compact sections */
    .filter-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin-inline-start: 6px;
        border-radius: 99px;
        background: #5C18E4;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    .brand__body_Filter__responsive:not(.hidden)::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 99px;
        background: #d8d9e0;
    }

    .brand__body_Filter__responsive_body__item {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .brand__body_Filter__responsive_body__item img {
        transition: transform 0.2s;
        transform: rotate(45deg);   /* expanded: + reads as × (close) */
    }

    .brand__body_Filter__responsive_body__item.is-collapsed img {
        transform: rotate(0deg);    /* collapsed: + (open) */
    }

    /* Description as a collapsed accordion card */
    .product__details__des {
        border: 1px solid #ececf1;
        border-radius: 12px;
        padding: 0;
        margin-top: 8px;
        background: #fff;
    }

    .product__details__des_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 14px;
        margin: 0;
        font-size: 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .product__details__des_header::after {
        content: "";
        width: 9px;
        height: 9px;
        border-inline-end: 2px solid #6a6f7a;
        border-bottom: 2px solid #6a6f7a;
        transform: rotate(45deg);
        transition: transform 0.2s;
        flex-shrink: 0;
    }

    .product__details__des.is-open .product__details__des_header::after {
        transform: rotate(225deg);
    }

    .product__details__des_text {
        display: none;
        padding: 0 14px 13px;
    }

    .product__details__des.is-open .product__details__des_text {
        display: block;
    }
}

@media (max-width: 768px) {

    /* ── 8. Listing pages: slim header instead of the hero block ────────
       The 200px+ banner (whose fallback logo overlapped the title) is
       replaced by a compact title + result count.                     */
    .hero__img .banner__img {
        display: none;
    }

    .hero__img .hero__content {
        position: static;
        height: auto;
        padding: 4px 0 0;
        gap: 2px;
        flex-direction: row;
        align-items: center;
    }

    .hero-back {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 50%;
        border: 1px solid #ececf1;
        background: #fff;
        color: #1f2430;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline-end: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    [dir="rtl"] .hero-back svg {
        transform: scaleX(-1);
    }

    .hero__img .hero__header {
        color: #1f2430;
        font-size: 19px;
        line-height: 1.3;
    }

    .hero__img .hero__results {
        color: #8a8f98;
        font-size: 12px;
        margin-inline-start: 8px;
    }

    /* ── 9. Sticky Filter / Sort toolbar ──────────────────────────────
       .brand__body / main are flex containers: without these the sticky
       child stretches to the parent height and never travels.        */
    .brand__body {
        flex-direction: column;
    }

    .brand__body_sort {
        position: sticky;
        top: 0;
        z-index: 900;
        align-self: stretch;
        width: 100%;
        background: #fbfbfd;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 0;
        margin: 0;
        border-bottom: 1px solid #ececf1;
    }

    /* the fixed smart banner overlays the viewport top — stick below it */
    body.smart-banner-visible .brand__body_sort {
        top: 89px;
    }

    .brand__body_sort .brand__body_Filter {
        width: auto;
    }

    .filter__open__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1.5px solid #d8d9e0;
        background: #fff;
        border-radius: 99px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        color: #1f2430;
        cursor: pointer;
        margin: 0;
    }

    .brand__body_sort .relative.w-full {
        width: auto !important;
        margin-inline-start: auto;
    }

    #dropdownSortButton {
        border: 1.5px solid #d8d9e0 !important;
        border-radius: 99px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        font-weight: 600;
        width: auto !important;
        gap: 6px !important;
    }

    #dropdownSortButton img {
        width: 14px;
        height: 14px;
    }

    /* Active filter chips row */
    .active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .active-filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #5C18E4;
        color: #fff;
        border-radius: 99px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        line-height: 1;
    }

    .active-filter-chip span {
        font-size: 14px;
        line-height: 1;
    }

    /* ── 10. Filter form as a bottom sheet ──────────────────────────────
       brand.js already toggles .block/.hidden on the existing form and
       locks body scroll — we only restyle the open state. The huge
       box-shadow spread doubles as the dark backdrop.                 */
    .brand__body_Filter__responsive:not(.hidden) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 10050;
        background: #fff;
        border-radius: 18px 18px 0 0;
        height: auto;              /* base css sets 100% (old full-screen modal) */
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 0 100vmax rgba(15, 15, 30, 0.45);
        animation: pk-sheet-up 0.22s ease-out;
    }

    @keyframes pk-sheet-up {
        from { transform: translateY(35%); opacity: 0.6; }
        to   { transform: none; opacity: 1; }
    }

    .brand__body_Filter__responsive_content {
        overflow-y: auto;
        flex: 1;
        padding: 0 16px 92px;
    }

    .brand__body_Filter__responsive_content__top {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0 10px;
    }

    .brand__body_Filter__responsive_content__header {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
    }

    .close__module {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f2f2f6;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .close__module img {
        width: 14px;
        height: 14px;
    }

    /* Apply / Reset pinned at the sheet's bottom */
    .brand__body_Filter__responsive:not(.hidden) .brand__btn {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #ececf1;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        display: flex;
        gap: 10px;
        margin: 0;
    }

    .brand__body_Filter__responsive:not(.hidden) .brand__btn button {
        flex: 1;
        height: 44px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .brand__body_Filter__responsive:not(.hidden) .brand__btn button[type="submit"] {
        background: #5C18E4;
        color: #fff;
    }

    .brand__body_Filter__responsive:not(.hidden) .brand__btn .btn__reset {
        background: #fff;
        border: 1.5px solid #d8d9e0;
        color: #1f2430;
    }

    /* Flat sections — kill the card-inside-a-sheet double border */
    .brand__body_Filter__responsive:not(.hidden) .brand__body_Filter__responsive_body {
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    /* Full-row tap targets, brand-colored checks, hairline dividers */
    .brand__body_Filter__responsive:not(.hidden) .brand__body_Filter__responsive_body__input {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0;
        border-bottom: 1px solid #f2f2f6;
    }

    .brand__body_Filter__responsive:not(.hidden) .brand__body_Filter__responsive_body__check {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        accent-color: #5C18E4;
    }

    .brand__body_Filter__responsive:not(.hidden) .brand__body_Filter__responsive_body__label {
        flex: 1;
        font-size: 14px;
        padding: 13px 0;
        margin: 0;
        cursor: pointer;
    }

    .brand__body_Filter__responsive:not(.hidden) .brand__body_Filter__responsive_body__header {
        font-size: 15px;
        font-weight: 700;
    }

    /* While a sheet is open, the tab bar gets out of the way (its z-index
       fights the sheet's Apply row otherwise) */
    body:has(.brand__body_Filter__responsive:not(.hidden)) .bottom-bar,
    body:has(#dropdownSort:not(.hidden)) .bottom-bar {
        display: none !important;
    }

    /* ── 11. Sort dropdown as a bottom sheet ────────────────────────────
       Flowbite positions it absolutely (popper) — forced into a sheet. */
    #dropdownSort:not(.hidden) {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 !important;
        width: 100% !important;
        z-index: 10050;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 0 0 100vmax rgba(15, 15, 30, 0.45);
        animation: pk-sheet-up 0.22s ease-out;
    }

    #dropdownSort:not(.hidden) ul {
        padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    #dropdownSort:not(.hidden) ul li a {
        padding: 14px 16px;
        font-size: 14px;
        border-radius: 10px;
    }
}

/* Chips are a mobile pattern — keep them off desktop */
@media (min-width: 769px) {
    .active-filters {
        display: none;
    }
}

@media (max-width: 768px) {

    /* ════════════════════════════════════════════════════════════════════
       12. Basket + checkout — app-style redesign
       ════════════════════════════════════════════════════════════════════ */

    /* ── 12a. Sticky total/CTA bar (basket + checkout) ──────────────────── */
    .pk-buybar,
    #place-order-form {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9995;
        background: #fff;
        border-top: 1px solid #ececf1;
        box-shadow: 0 -6px 22px rgba(15, 15, 30, 0.09);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
    }

    .pk-buybar__total {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        flex-shrink: 0;
    }

    .pk-buybar__label {
        font-size: 11px;
        color: #8a8f98;
    }

    .pk-buybar__total strong {
        font-size: 17px;
        font-weight: 800;
        color: #1f2430;
        white-space: nowrap;
    }

    .pk-buybar__cta,
    #place-order-form .bassket__price__btn {
        flex: 1;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #5C18E4;
        color: #fff;
        border: none;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        width: auto;
        box-shadow: 0 6px 16px rgba(92, 24, 228, 0.28);
    }

    .pk-buybar__cta::after {
        content: "";
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    [dir="rtl"] .pk-buybar__cta::after {
        transform: scaleX(-1);
    }

    /* the buybar owns the bottom edge on basket/checkout (like the PDP) */
    body:has(.pk-buybar) .bottom-bar,
    body:has(#place-order-form) .bottom-bar {
        display: none !important;
    }

    /* ── While ADDING an address: hide Place Order, make Save Address the sticky
          bottom action so the flow is Save Address → (reload) → Place Order ── */
    body.is-adding-address #place-order-form {
        display: none !important;
    }
    body.is-adding-address #add-address-section .basket__payment_btns {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9996;
        background: #fff;
        border-top: 1px solid #ececf1;
        box-shadow: 0 -6px 22px rgba(15, 15, 30, 0.09);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        display: flex;
        gap: 10px;
    }
    /* Save = primary (fills), Cancel = compact secondary */
    body.is-adding-address #add-address-section .basket__payment_btns button[type="submit"] {
        flex: 1 1 auto;
        width: auto !important;
        height: 50px;
        border-radius: 14px;
        background: #5C18E4;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        border: none;
        box-shadow: 0 6px 16px rgba(92, 24, 228, 0.28);
    }
    body.is-adding-address #add-address-section .basket__payment_btns .basket__payment_btn__edit {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 92px;
        height: 50px;
        border-radius: 14px;
    }
    /* clear space so the last fields aren't hidden behind the sticky Save bar */
    body.is-adding-address #add-address-section {
        padding-bottom: 84px;
    }
    body:has(.pk-buybar) main,
    body:has(#place-order-form) main {
        padding-bottom: 88px;
        /* main has 1.5rem side padding globally — reclaim it here so the
           gray canvas runs edge-to-edge and cards sit ~8px from the screen */
        padding-left: 0;
        padding-right: 0;
        margin-top: 12px;
    }

    /* the in-flow Proceed button (inside the totals card) gives way to the bar */
    .bassket__price .bassket__price__btn {
        display: none;
    }

    /* ── 12b. Page shell: soft gray canvas so white cards pop ────────────── */
    .bassket__section {
        background: #f5f5f8;
        padding: 4px 8px 8px;
    }

    .bassket__header h3 {
        font-size: 21px;
        font-weight: 800;
        color: #16181d;
    }

    .bassket__content {
        gap: 12px;
    }

    /* Flatten the nested gray box so line-items use (almost) full width —
       was a #f9fafb card with 1.5rem padding, wasting the sides. */
    .bassket__content__item {
        background: transparent !important;
        padding: 0 !important;
        gap: 10px;
    }

    /* ── 12c. Empty Cart → subtle icon chip, top-right ──────────────────── */
    .empty_cart {
        margin-bottom: 2px;
    }

    .empty-cart-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: auto !important;
        background: #fff !important;
        color: #d64545 !important;
        border: 1px solid #f0dede !important;
        font-size: 12.5px !important;
        font-weight: 600;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .empty-cart-btn__icon {
        flex-shrink: 0;
    }

    /* ── 12d. Line-item card: horizontal, compact (was giant image) ─────── */
    .bassket__proudact {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        border: 1px solid #eeeef2;
        border-radius: 16px;
        background: #fff;
        padding: 12px;
        position: relative;
        box-shadow: 0 1px 3px rgba(15, 15, 30, 0.04);
    }

    .bassket__proudact_value {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
    }

    .bassket__proudact_img {
        height: 80px;
        width: 80px;
        flex-shrink: 0;
        border-radius: 12px;
        background: #f6f6fa;
        border: 1px solid #f0f0f4;
        padding: 4px;
        box-sizing: border-box;
    }

    .bassket__proudact_content {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 3px;
        flex: 1;
        min-width: 0;
        padding-inline-end: 34px; /* room for the floating trash */
    }

    .bassket__proudact_content .shop__content__link {
        font-size: 11px;
        font-weight: 600;
        color: #9296a0;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .bassket__proudact_content__text {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
        font-weight: 600;
        color: #23262e;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bassket__proudact_content__price {
        font-size: 15px;
        margin-top: 2px;
    }

    .bassket__proudact_content__price .new-price {
        color: #5C18E4;
        font-weight: 800;
    }

    /* ── 12e. Stepper: compact pill ─────────────────────────────────────── */
    .bassket__proudact_btn {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        width: 100%;
    }

    .bassket__proudact_btn .add__count,
    .bassket__proudact_btn .basket-qty-counter {
        width: auto !important;
        height: auto !important;          /* wrap the buttons (global forces 40px) */
        padding: 4px !important;
        background: #f4f2fb !important;
        border-radius: 14px !important;   /* rounded-rect, not a pill (global sets 9999px) —
                                              a pill shape lets the flat button ends poke out */
        gap: 4px !important;
        overflow: hidden;                 /* belt-and-suspenders: clip any hairline overflow */
    }

    .add__count .add__count__up,
    .add__count .add__count__down {
        width: 40px !important;
        height: 36px !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 9px;
        position: relative;
    }

    /* Use the REAL <img> glyphs — crisp and reliable on every device (CSS
       masks didn't rasterize on some phones). The stroke-only source SVGs
       ALSO fail to paint on some devices UNLESS a filter is applied (that's
       why the purple pills, which global.css filters to white, always work).
       So we always apply a filter here too: dark on the light basket pill. */
    .add__count .add__count__up img,
    .add__count .add__count__down img {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
        /* dark tint — beats global.css's `.basket-qty-counter button img`
           (brightness(0) invert(1) = white-on-white, invisible). !important
           + higher specificity so the basket wins; cards/PDP keep global's
           white (their global rules are more specific still). */
        filter: brightness(0) saturate(100%) invert(12%) !important;
    }

    /* qty-1 trash: red on the LIGHT basket pill only (keep its native fill).
       On the purple pills (cards / PDP) global.css tints it white — don't
       override there, so scope this to the basket. */
    .bassket__proudact .add__count.pk-qty-1 .add__count__down img {
        filter: none !important;
    }

    .add__count .add__count__num {
        width: auto !important;
        min-width: 40px;
        background: transparent !important;
        font-size: 16px;
        font-weight: 800;
        color: #23262e !important;
        padding: 0 10px !important;
    }

    /* Noon pattern, everywhere: at qty 1 the minus button becomes a red trash
       (decrementing from 1 already removes the item via the existing JS).
       main.js toggles .pk-qty-1 on every .add__count as quantities change —
       basket, listing cards, and the PDP buy bar all get the same behavior.
       The basket's separate per-item trash button is redundant → hidden. */
    .bassket__proudact_btn .bassket__proudact_Remove {
        display: none !important;
    }

    /* qty 1: JS swaps the minus img → trash.svg. On the light basket pill the
       trash is red (its native colour); tint the button faint-red to match. */
    .add__count.pk-qty-1 .add__count__down {
        background: #fdf3f3 !important;
    }

    /* ── PDP buy-bar stepper: brand-purple pill → translucent-white button
       circles; global.css inverts the img glyphs to white. ─────────────── */
    .product__btn .add__count__up,
    .product__btn .add__count__down {
        background: rgba(255, 255, 255, 0.18) !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50%;
        box-shadow: none;
    }

    .product__btn .add__count .add__count__num {
        color: #fff !important;
        font-size: 17px;
    }

    .product__btn .add__count.pk-qty-1 .add__count__down {
        background: rgba(255, 255, 255, 0.18) !important;
    }

    .product__btn .add__count.pk-qty-1 .add__count__down::before {
        background: #fff;
    }
    /* (listing-card stepper styling lives in section 14 — light pill) */

    /* room for the trash is no longer needed — reclaim the padding */
    .bassket__proudact_content {
        padding-inline-end: 0;
    }

    /* ── Variation chips (size / colour) — compact on mobile ─────────────── */
    .pk-variation-chips {
        gap: 6px !important;
        margin-top: 4px !important;
    }

    .pk-variation-chip {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 9px !important;
        border-radius: 999px !important;
        font-size: 11.5px;
        background: #f5f2fd;
        border-color: #e4d9fb !important;
        line-height: 1.2;
    }

    .pk-variation-chip strong {
        font-weight: 700;
    }

    /* ── 12f. Totals panel → clean card ─────────────────────────────────── */
    .bassket__price {
        border: 1px solid #eeeef2 !important;
        border-width: 1px !important;
        border-radius: 16px;
        background: #fff;
        padding: 16px 14px !important;
        gap: 10px !important;
        box-shadow: 0 1px 3px rgba(15, 15, 30, 0.04);
    }

    .bassket__price__text {
        padding-bottom: 0 !important;
    }

    .bassket__price__header {
        font-size: 14px !important;
        color: #6a6f7a !important;
        font-weight: 500;
    }

    .bassket__price__header_sub {
        font-size: 14px;
        font-weight: 700;
        color: #23262e;
    }

    .bassket__price__text_edit .bassket__price__header {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #16181d !important;
    }

    .bassket__price__text_edit .basket-total {
        font-size: 18px;
        font-weight: 800;
        color: #5C18E4;
    }

    /* ── 12g. Empty-basket state: shrink oversized illustration ─────────── */
    .section__empty {
        padding: 40px 20px;
        gap: 18px;
    }

    .section__empty__img img {
        max-width: 180px;
        height: auto;
    }

    /* Funnel pages (basket + checkout) don't need the header search — remove
       it to declutter the flow (both pages carry .bassket__section). */
    body:has(.bassket__section) .web__search {
        display: none !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       12h. Checkout — sectioned cards
       ════════════════════════════════════════════════════════════════════ */
    .basket__payment,
    .checkout .bassket__price {
        gap: 14px;
    }

    .bassket__section .bassket__header h3 {
        font-size: 22px;
    }

    /* Section headers get a purple accent bar → scannable, app-like */
    .basket__payment_header h4,
    .payment__date_header h4,
    .bassket__price_header__title {
        font-size: 16px;
        font-weight: 800;
        color: #16181d;
        position: relative;
        padding-inline-start: 12px;
    }

    .basket__payment_header h4::before,
    .payment__date_header h4::before,
    .bassket__price_header__title::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 3px;
        bottom: 3px;
        width: 4px;
        border-radius: 2px;
        background: #5C18E4;
    }

    /* group the address/date/payment blocks into visible cards */
    #address-selection-section,
    #add-address-section,
    .payment__date,
    .payment__method,
    .wlt-checkout-toggle {
        background: #fff;
        border: 1px solid #eeeef2;
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 1px 3px rgba(15, 15, 30, 0.03);
    }

    /* Address selector → prominent tappable row: pin icon + label + chevron */
    .addres__text_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 4px 2px;
    }

    .addres__content_text h5 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 600;
        color: #23262e;
    }

    .addres__content_text h5::before {
        content: "";
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 9px;
        background: #f1eefb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C18E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/17px no-repeat;
    }

    .addres__text_img img {
        width: 20px;
        opacity: 0.5;
    }

    /* ── 12i. Promo → one unified pill (input + button share a border) ───── */
    .promo__code {
        display: flex !important;
        align-items: center !important;
        height: 52px !important;          /* fixed height + horizontal-only padding
                                             → the button centres symmetrically */
        box-sizing: border-box;
        gap: 6px;
        padding: 0 6px !important;
        border: 1.5px solid #e7e7ee !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    .promo__code__input {
        flex: 1 1 auto;
        width: auto !important;   /* base sets a fixed width → left the button off the edge */
        min-width: 0;
        height: 40px !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 12px !important;
        margin: 0 !important;
        font-size: 14px;
        background: transparent !important;
        outline: none;
    }

    .promo__code__btn {
        position: static !important;  /* base sets absolute + top:8px → off-centre */
        top: auto !important;
        right: auto !important;
        flex-shrink: 0;
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px !important;
        border-radius: 9px !important;
        background: #211436 !important;
        color: #fff !important;
        font-weight: 700;
        font-size: 14px;
        border: none;
    }

    .promo__code_submit {
        align-items: center;
        justify-content: space-between;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 12px;
        padding: 10px 12px;
    }

    .promo__code_submit__text {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #15803d;
        font-weight: 700;
    }

    .promo__code__remove {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: transparent;
        color: #b6415d;
        font-weight: 600;
        font-size: 0;
        border: none;
        padding: 6px;
    }

    .promo__code__remove::before {
        content: "";
        width: 20px;
        height: 20px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    /* ── 12j. Payment methods → selectable cards ─────────────────────────── */
    /* Flatten the payment__method sub-card so methods sit full-width in the
       section, consistent with the wallet card (no double-nesting). */
    .payment__method {
        display: flex !important;   /* base sets block → gap was ignored */
        flex-direction: column;
        align-items: stretch !important; /* base sets start → methods sized to text */
        gap: 12px;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Credit is wrapped in an extra <div> — make it transparent to the flex
       flow so every method is a real flex child (uniform 12px gap). */
    .payment__method > div:not(.method) {
        display: contents;
    }

    /* Wallet toggle → full-width card, consistent with the method cards */
    .wlt-checkout-toggle {
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 12px;
    }

    /* Edit Order link — was 20px, too loud */
    .bassket__price_header__link {
        font-size: 13px !important;
        font-weight: 700;
    }

    /* Order items are already reviewed on the cart — collapse them here.
       Keep the "Your Order · Edit Order" header + the totals. */
    .bassket__items {
        display: none;
    }

    /* ── Minimum-order status card (shown when below the district minimum) ── */
    .progress__bar_section {
        background: transparent !important;   /* base is a grey box */
        padding: 0 !important;
        text-align: start !important;
    }

    .progress__bar_section.is-active {
        display: block;
        background: linear-gradient(135deg, #fff7ed, #fef0e0) !important;
        border: 1px solid #fcd9a8;
        border-radius: 14px;
        padding: 13px 14px !important;
        margin: 10px 0 4px;
        animation: pk-minorder-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    }

    @keyframes pk-minorder-in {
        from { opacity: 0; transform: translateY(-6px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* headline with a cart icon */
    .progress__bar_section.is-active #minimum-order-message {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #b45309 !important;
        margin: 0;
    }

    .progress__bar_section.is-active #minimum-order-message::before {
        content: "";
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        background: #F5811F;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .progress__bar_section.is-active #minimum-progress-text {
        font-size: 12.5px !important;
        color: #92703a !important;
        margin: 6px 0 8px !important;
    }

    .progress__bar_section.is-active .minimum-progress-bar {
        height: 10px;
        border-radius: 999px;
        background: #fbe2be;
    }

    .progress__bar_section.is-active .minimum-progress-fill {
        border-radius: 999px;
        background: linear-gradient(90deg, #f59e0b, #F5811F);
        transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* CTA back to browsing — only when the card is active */
    .min-order-cta {
        display: none;
    }

    .progress__bar_section.is-active .min-order-cta {
        display: flex;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 12px;
        padding: 9px 16px;
        border-radius: 10px;
        background: #F5811F;
        color: #fff !important;
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 3px 8px rgba(245, 129, 31, 0.28);
    }

    [dir="rtl"] .min-order-cta svg {
        transform: scaleX(-1);
    }
    /* ── 12n. Account / settings section ────────────────────────────────── */
    /* Sub-pages (orders, address, district…) don't need the full menu — hide
       it and give the content the full width. The hub (profile) keeps it. */
    .setting__main--sub .setting__sidebar {
        display: none !important;
    }

    .setting__main--sub .setting__main__content {
        width: 100% !important;
    }

    /* Hub menu → clean full-width tappable list */
    .setting__main--hub .setting__sidebar {
        width: 100% !important;
        gap: 0 !important;
        border: 1px solid #eeeef2;
        border-radius: 16px;
        background: #fff;
        overflow: hidden;
        padding: 0 !important;
    }

    .setting__sidebar__item {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 15px 16px !important;
        border-bottom: 1px solid #f2f2f6;
        position: relative;
    }

    .setting__sidebar__item:last-child {
        border-bottom: none;
    }

    .setting__sidebar__item img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain;
    }

    .setting__sidebar__item__header {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #23262e !important;
        margin: 0 !important;
    }

    /* chevron affordance on each row */
    .setting__main--hub .setting__sidebar__item::after {
        content: "";
        position: absolute;
        inset-inline-end: 16px;
        width: 8px;
        height: 8px;
        border-top: 2px solid #c2c5cc;
        border-inline-end: 2px solid #c2c5cc;
        transform: rotate(45deg);
    }

    [dir="rtl"] .setting__main--hub .setting__sidebar__item::after {
        transform: rotate(-135deg);
    }

    .setting__sidebar__item_active {
        background: #faf8ff;
    }

    .setting__sidebar__item_active .setting__sidebar__item__header {
        color: #5C18E4 !important;
    }

    /* ── 12m. "Select your area" onboarding → app-style bottom sheet ─────── */
    .location__select {
        align-items: flex-end !important;
        z-index: 10065 !important;   /* above tab bar + buybars */
    }

    .module_location__select {
        width: 100% !important;
        /* Tall sheet so the district dropdown has room to open below its
           trigger (was content-height → the panel fell off-screen). Column
           layout so the drag handle sits on top, content below. */
        min-height: 82vh !important;
        max-height: 92vh !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        overflow-y: auto;
        border-radius: 22px 22px 0 0 !important;
        padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        animation: pk-sheet-up 0.24s ease-out;
    }

    .module_location__select::before {
        content: "";
        align-self: center;   /* centre the handle (was left, as a flex-row item) */
        width: 40px;
        height: 4px;
        flex-shrink: 0;
        border-radius: 999px;
        background: #e2e2ea;
        margin: 0 0 10px;
    }

    /* keep the header from stretching to fill the tall sheet */
    .module_location__select > .setting__main__content_div {
        flex: 0 0 auto;
        gap: 16px !important;
    }

    .location__select .setting__main__content__header {
        display: flex !important;      /* base is flex-row → icon + title sat side by side */
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px;
        text-align: center;
    }

    .location__select__icon {
        width: 52px;
        height: 52px;
        margin: 0 auto 10px;
        border-radius: 16px;
        background: #f1eefb;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .location__select .setting__main__content__header__title {
        font-size: 19px;
        font-weight: 800;
        color: #16181d;
        text-align: center;
    }

    .location__select__subtitle {
        font-size: 13px;
        color: #8a8f98;
        line-height: 1.45;
        margin: 6px 0 2px;
        text-align: center;
        text-transform: none;   /* base title-cases it → keep sentence case */
    }

    /* selects stack full-width on mobile */
    .location__select .basket__payment_govrnment {
        flex-direction: column !important;
        gap: 12px;
    }

    .location__select .form-select {
        width: 100% !important;
        height: 50px !important;
        border: 1.5px solid #e7e7ee !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        padding: 0 14px !important;
    }

    .location__select .setting__form_edit {
        width: 100% !important;
        height: 52px !important;
        border-radius: 14px !important;
        background: #5C18E4 !important;
        color: #fff !important;
        font-size: 15px;
        font-weight: 700;
        border: none;
    }

    /* ── 12l. Add-address form — cleaner, compact ───────────────────────── */
    /* Map: shrink so the form fields aren't pushed way down */
    #map {
        height: 180px !important;
        border-radius: 12px !important;
        border: 1px solid #ececf1 !important;
    }

    .map-search-input {
        height: 44px;
        border-radius: 12px !important;
        border-color: #e7e7ee !important;
    }

    .map-search-btn {
        height: 44px;
        border-radius: 12px !important;
    }

    /* Consistent field labels + inputs */
    #add-address-section .field-wrapper > label,
    #add-address-section .field-label {
        font-size: 12px !important;
        font-weight: 600;
        color: #6a6f7a !important;
        margin-bottom: 5px !important;
    }

    #add-address-section .field-wrapper input[type="text"],
    #add-address-section .form-select,
    #add-address-section .co-district-trigger {
        height: 46px !important;
        border: 1.5px solid #e7e7ee !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        box-sizing: border-box;
    }

    /* Field groups: tidy vertical rhythm */
    #add-address-section .basket__payment_title {
        margin-top: 12px;
    }

    /* Governorate + District: two columns */
    .basket__payment_govrnment {
        display: flex !important;
        gap: 10px;
        margin-top: 12px;
    }

    .basket__payment_govrnment .option__group {
        flex: 1;
        min-width: 0;
    }

    /* Building / Floor / Apartment: compact 3-up row */
    .basket__payment_title__edit {
        display: flex !important;
        gap: 8px;
    }

    .basket__payment_title__edit .basket__payment_title__input {
        flex: 1;
        min-width: 0;
    }

    /* Save / Cancel → full-width action pair */
    .basket__payment_btns {
        display: flex !important;
        gap: 10px;
        margin-top: 18px;
    }

    .basket__payment_btns .basket__payment_btn {
        flex: 1;
        height: 50px;
        border-radius: 14px !important;
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #5C18E4;
        color: #fff;
        border: none;
    }

    /* Cancel = ghost */
    .basket__payment_btns .basket__payment_btn__edit {
        background: #f3f2f7;
        color: #5b5f6a;
    }

    /* ── 12k. Delivery type (Instant / Scheduled) + date/time chips ──────── */
    .delivery-type-row {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
    }

    .delivery-type-row > div {
        flex: 1;
        display: flex;
    }

    .delivery-circle {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-align: center;
        padding: 14px 8px;
        border: 1.5px solid #ececf1;
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
    }

    .delivery-circle input {
        display: none;
    }

    .delivery-circle__icon {
        font-size: 22px;
        line-height: 1;
        color: #9296a0;   /* neutral until selected */
    }

    .delivery-circle__icon svg {
        width: 26px;
        height: 26px;
    }

    /* icon takes the theme colour when its card is selected */
    .instant-circle:has(.instant-card__check:checked) .delivery-circle__icon {
        color: #F5811F;
    }

    .scheduled-circle:has(.instant-card__check:checked) .delivery-circle__icon {
        color: #5C18E4;
    }

    .delivery-circle__label {
        font-size: 14px;
        font-weight: 700;
        color: #23262e;
        background: none !important;   /* kill the odd grey highlight */
    }

    .delivery-circle__eta {
        font-size: 11.5px;
        color: #8a8f98;
    }

    .delivery-circle__fee {
        font-size: 12px;
        font-weight: 800;
        color: #F5811F;
    }
    /* selection colours come from the base .instant-circle / .scheduled-circle
       :has(:checked) rules (orange / purple) — no unconditional override here,
       so only the SELECTED card is highlighted. */

    /* Date / time chips — smaller so they don't clip at the scroll edge
       (base min-width:160px made Tomorrow's border cut off). */
    .delivery-scroll-item {
        min-width: 116px !important;
    }

    .delivery-scroll-row {
        padding-inline-end: 8px;   /* breathing room so the last chip isn't flush */
    }

    .delivery-scroll-item .payment__date__text {
        border: 1.5px solid #ececf1;
        border-radius: 11px;
        padding: 12px 10px;
        font-weight: 600;
        font-size: 14px;
        color: #23262e;
        text-align: center;
    }

    .delivery-scroll-item.active:not(.disabled-day) .payment__date__text {
        border-color: #5C18E4 !important;
        background: #faf8ff !important;
        color: #5C18E4 !important;
    }

    .method {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        border: 1.5px solid #eeeef2;
        border-radius: 12px;
        margin-top: 0;
        position: relative;
        transition: border-color 0.15s, background 0.15s;
    }

    /* icon in a soft tile */
    .method .method__img {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 10px;
        background: #f6f6fa;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .method .method__img img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .method__title {
        font-size: 14.5px;
        font-weight: 600;
        color: #23262e;
        flex: 1;
    }

    /* radio dot on the inline-end */
    .method::after {
        content: "";
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        border-radius: 50%;
        border: 2px solid #d8d8e0;
        transition: border-color 0.15s;
    }

    .method.active {
        border-color: #5C18E4 !important;
        background: #faf8ff !important;
    }

    .method.active::after {
        border-color: #5C18E4;
        background: #5C18E4 radial-gradient(circle, #fff 0 30%, transparent 32%);
        box-shadow: inset 0 0 0 3px #5C18E4;
    }

    .bassket__proudact_edit {
        flex-direction: row !important;
        align-items: center;
        padding: 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f2f2f6 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .bassket__proudact_edit .bassket__proudact_img {
        height: 56px;
        width: 56px;
    }

    .bassket__proudact_edit .bassket__proudact_content {
        padding-inline-end: 0;
    }
}

@media (max-width: 768px) {

    /* ── 13. Confirm/alert dialogs → app-style bottom sheet ─────────────────
       Shared .modal (stock limit, remove item, empty cart). The base centers
       a tall card with min-height:30% → lots of empty space + a huge button.
       Turn it into a compact bottom sheet. */
    .modal {
        align-items: flex-end !important;
        z-index: 10060 !important;   /* above the tab bar (z 9990) + buybars */
    }

    .modal .modal-content {
        width: 100% !important;
        margin: 0 !important;
        min-height: 0 !important;
        border: none !important;
        border-radius: 22px 22px 0 0 !important;
        padding: 26px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 18px !important;
        animation: pk-sheet-up 0.24s ease-out;
    }

    /* drag handle */
    .modal .modal-content::before {
        content: "";
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #e2e2ea;
        margin: -8px auto 2px;
    }

    .modal p {
        font-size: 15px !important;
        color: #23262e !important;
        line-height: 1.5;
    }

    .modal .buttons {
        flex-direction: column;
        gap: 10px !important;
        margin-top: 0 !important;
    }

    .modal .buttons button,
    .modal #alert-ok-btn,
    .modal .cancel-btn,
    .modal #confirm-empty,
    .modal #confirm-remove {
        width: 100% !important;
        height: 50px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }

    /* ── 14. Listing-card stepper: kept the purple pill (global.css) — the
       white +/- and trash are REAL imgs (global inverts them white), so they
       render reliably. Only the qty-1 img→trash swap is JS. ──────────────── */

    /* Clearer card hierarchy: brand (muted caps) · name (dark) · price (bold) */
    .shop__card .shop__content__link {
        font-size: 10.5px;
        font-weight: 600;
        color: #9296a0;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .shop__card .shop__content__text {
        color: #23262e;
        font-weight: 600;
    }

    .shop__card .shop__price,
    .shop__card .shop__content__price {
        font-weight: 800;
        font-size: 15px;
    }
}

/* Toast / snackbar — bottom, above the sticky buy bar. All viewports. */
.pk-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(12px);
    z-index: 10070;
    max-width: 88vw;
    background: #23262e;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Breadcrumb (all viewports — mobile-first indexed content must be visible).
   Horizontal-scrollable on small screens; product name truncates. */
.pk-crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 12.5px;
    padding: 8px 0;
    margin-bottom: 4px;
}

.pk-crumbs::-webkit-scrollbar {
    display: none;
}

.pk-crumbs a {
    color: #6a6f7a;
    text-decoration: none;
    flex-shrink: 0;
}

.pk-crumbs a:hover {
    color: #5C18E4;
}

.pk-crumbs__sep {
    width: 6px;
    height: 6px;
    border-inline-end: 1.5px solid #b9bdc7;
    border-top: 1.5px solid #b9bdc7;
    transform: rotate(45deg);
    flex-shrink: 0;
}

[dir="rtl"] .pk-crumbs__sep {
    transform: rotate(-135deg);
}

.pk-crumbs__current {
    color: #1f2430;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45vw;
}

/* Stock chip next to the price (styled on all viewports — additive element) */
.pdp-stock {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 8px;
    margin-inline-start: 8px;
    align-self: center;
    white-space: nowrap;
}

.pdp-stock--in {
    background: #E1F5EE;
    color: #085041;
}

.pdp-stock--out {
    background: #FCEBEB;
    color: #791F1F;
}

/* Share button + About table are mobile-only — hidden on desktop to keep it
   untouched (outside the media query so it always applies). */
@media (min-width: 769px) {
    .pdp-share,
    .pdp-share-menu,
    .pdp-about,
    .pdp-faqs,
    .pdp-recent,
    .filter-count-badge,
    .hero-back,
    .pk-buybar,
    .pk-buybar__total,
    .empty-cart-btn__icon,
    .pk-trash-svg {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   13. Category page — clear subcategory grid (app-style)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Stack the desktop sidebar layout into a single column on mobile */
    .brand__body_content.brand__body_content__edit {
        display: block !important;
    }
    .brand__body_content__filter__edit {
        display: block !important;
        width: 100% !important;
        margin: 0 0 4px !important;
    }

    /* Mobile-only heading above the subcategory grid */
    .shop__category_grid_title {
        display: block !important;
        font-size: 15px;
        font-weight: 700;
        color: #1f2430;
        margin: 6px 2px 10px;
    }

    /* Turn the horizontal pill row into a clean 2-column grid of tiles */
    .brand__body_content__filter__edit .shop__category_section {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible !important;
        padding: 0 !important;
        margin-bottom: 22px;
    }

    .shop__category_section .shop__category {
        display: grid !important;
        grid-template-columns: 40px 1fr 16px;
        grid-template-areas: "icon name arrow" "icon count arrow";
        align-items: center;
        column-gap: 11px;
        row-gap: 1px;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
        background: #fff !important;
        border: 1px solid #ececf1 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    /* Icon tile (spans both rows) */
    .shop__category .shop__category_icon {
        display: flex !important;
        grid-area: icon;
        width: 40px;
        height: 40px;
        border-radius: 11px;
        background: #EEEDFE;
        color: #5C18E4;
        align-items: center;
        justify-content: center;
    }

    .shop__category .shop__category_header {
        grid-area: name;
        align-self: end;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #1f2430 !important;
        margin: 0 !important;
        line-height: 1.2;
    }

    /* Show the product count under the name */
    .shop__category .shop__category_count {
        display: block !important;
        grid-area: count;
        align-self: start;
        font-size: 11.5px;
        color: #8a8f98;
        margin: 0;
    }

    .shop__category .shop__category_img {
        grid-area: arrow;
        width: 16px;
        height: 16px;
        opacity: .45;
    }
    .shop__category .shop__category_img img { width: 16px; height: 16px; }

    /* Section titles above each product slider — a touch smaller/tighter */
    .shop__content_body .shop__slider_header {
        font-size: 15px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   14. Products listing — category chips (browse without the filter)
   ════════════════════════════════════════════════════════════════════ */
.cat-chips { display: none; }

@media (max-width: 768px) {
    .cat-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 12px 12px;
        margin: 0;
    }
    .cat-chips::-webkit-scrollbar { display: none; }

    .cat-chip {
        flex: 0 0 auto;
        padding: 8px 16px;
        border-radius: 999px;
        border: 1px solid #ececf1;
        background: #fff;
        font-size: 13.5px;
        font-weight: 600;
        color: #1f2430;
        text-decoration: none;
        white-space: nowrap;
    }
    .cat-chip--active {
        background: #5C18E4;
        border-color: #5C18E4;
        color: #fff;
    }
}

/* Filter button icon — mobile only (desktop untouched) */
.filter__open__icon { display: none; }
@media (max-width: 768px) {
    .brand__body_sort .filter__open__btn {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
    }
    .filter__open__icon { display: inline-block; color: #5C18E4; flex-shrink: 0; }
}

/* Filter/Sort bar — results count on the left + short labels (match mockup) */
.fs-short { display: none; }
.sort-bar-count { display: none; }
@media (max-width: 768px) {
    .sort-bar-count {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        margin-inline-end: auto;
        font-size: 12.5px;
        color: #8a8f98;
        white-space: nowrap;
    }
    .sort-bar-count strong { color: #1f2430; font-weight: 700; font-size: 13.5px; }
    /* short labels win on mobile */
    .brand__body_sort .fs-full { display: none; }
    .brand__body_sort .fs-short { display: inline; }
    /* drop the old auto-margin now that the count owns the left side */
    .brand__body_sort .relative.w-full { margin-inline-start: 0 !important; }
}

/* Subcategory quick-filter chips (appear under the pet chips when a pet is picked) */
.subcat-chips { display: none; }
@media (max-width: 768px) {
    .subcat-chips {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 12px 12px;
        margin: -4px 0 0;
    }
    .subcat-chips::-webkit-scrollbar { display: none; }
    .subcat-chip {
        flex: 0 0 auto;
        padding: 6px 13px;
        border-radius: 999px;
        border: 1px solid #ececf1;
        background: #f6f5fb;
        font-size: 12.5px;
        font-weight: 600;
        color: #4b4b57;
        text-decoration: none;
        white-space: nowrap;
    }
    .subcat-chip--active {
        background: #EEEDFE;
        border-color: #cfc4f7;
        color: #3C3489;
    }
}

/* Shop by category — icon-tile row on /products (always visible) */
.shopcat-row-label, .shopcat-row { display: none; }
.sort__icon { display: none; }
@media (max-width: 768px) {
    .shopcat-row-label {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: #6a6f7a;
        padding: 2px 12px 8px;
    }
    .shopcat-row {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 12px 12px;
        margin: 0;
    }
    .shopcat-row::-webkit-scrollbar { display: none; }
    .shopcat-tile {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        width: -moz-fit-content;
        width: fit-content;
        min-width: 52px;
    }
    .shopcat-tile__ic {
        width: 54px;
        height: 54px;
        border-radius: 15px;
        background: #EEEDFE;
        color: #5C18E4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .shopcat-tile__ic .cat-ic { width: 26px; height: 26px; }
    .shopcat-tile__label {
        font-size: 11px;
        color: #6a6f7a;
        white-space: nowrap;
        line-height: 1.1;
    }
    .shopcat-tile--active .shopcat-tile__ic { background: #5C18E4; color: #fff; }
    .shopcat-tile--active .shopcat-tile__label { color: #5C18E4; font-weight: 700; }

    /* sort button icon: SVG on mobile, keep PNG for desktop */
    .sort__icon-img { display: none; }
    .sort__icon { display: inline-block; color: #374151; }
}

/* ════════════════════════════════════════════════════════════════════
   15. Mobile slide-out menu — clean category accordion
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Each category is a row with a chevron; tap expands its subcategories */
    .sidebar .sidebar__link .action__btn {
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
        padding: 2px 0;
    }
    .sidebar .action__btn__div {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 4px 0;
    }
    .sidebar .action__btn__header {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin: 0 !important;
        padding: 10px 0 !important;
    }
    .sidebar .action__btn__img {
        width: 22px;
        height: 22px;
        transition: transform 0.28s ease;
        flex-shrink: 0;
    }
    .sidebar .action__btn__img img { width: 100%; height: 100%; object-fit: contain; }

    /* Accordion body — the existing desktop-popover rules force it to 0 height
       in the sidebar, so override decisively with the #mainSidebar id +
       !important and drive show/hide off the JS data-open attribute. */
    #mainSidebar .action__btn__dropDown {
        position: static !important;
        display: none !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
        /* translucent panel instead of the desktop popover's white bg */
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 4px !important;
        margin: 2px 0 8px !important;
    }
    #mainSidebar .action__btn__dropDown[data-open="true"] {
        display: flex !important;
    }
    /* Rotate the chevron when its accordion is open */
    #mainSidebar .action__btn:has(.action__btn__dropDown[data-open="true"]) .action__btn__img {
        transform: rotate(180deg);
    }

    /* Subcategory links — indented, lighter, comfortable tap targets */
    .sidebar .action__btn__dropDown .dropDown__header {
        display: block;
        padding: 11px 12px;
        font-size: 14.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.82) !important;
        text-decoration: none;
        border-radius: 10px;
    }
    .sidebar .action__btn__dropDown .dropDown__header:active {
        background: rgba(255, 255, 255, 0.12);
    }
    .sidebar .action__btn__dropDown .dropDown__header_edit {
        color: #fff !important;
        font-weight: 700;
        margin-top: 2px;
    }
}