/* ============================================================
   THEME 2 — storefront menu (/products)
   ------------------------------------------------------------
   The page reuses the QR menu's components (user/css/qr-menu-2026.css,
   the .qrm-* namespace). That stylesheet keeps its tokens — and its
   rules that hide the marketing header and footer — on html.qrm-root,
   which the storefront must never carry. So the tokens are declared
   again here, on the page wrapper (.qrm-store), and mapped onto the
   site theme's --m-* / --theme-* variables. That is what makes the
   screen follow theme 2's palette, its fonts and its dark mode without
   a second copy of the design. Loaded right after qr-menu-2026.css.
   ============================================================ */

/* ------------------------------------------------------------ 1. TOKENS */
.qrm-store {
    --qrm-brand:        var(--m-brand, var(--theme-brand, #B8541A));
    --qrm-brand-dark:   var(--m-brand-dark, var(--theme-brand-dark, #8B3F12));
    --qrm-brand-rgb:    var(--theme-brand-rgb, 184, 84, 26);
    --qrm-accent:       var(--m-amber, var(--theme-accent, #E0A82E));
    --qrm-accent-rgb:   var(--theme-accent-rgb, 224, 168, 46);

    --qrm-ink:          var(--m-text, var(--theme-text, #2A1F17));
    --qrm-ink-soft:     var(--m-text-soft, var(--theme-text-soft, #5C4938));
    --qrm-ink-mute:     var(--m-text-mute, var(--theme-text-muted, #8C7A66));
    --qrm-ink-rgb:      var(--theme-text-rgb, 42, 31, 23);

    /* The canvas is the site body itself, so the pinned filter bar and the
       rail fades blend into the page instead of drawing a second beige. */
    --qrm-canvas:       var(--m-bg, var(--theme-bg, #FBF7EE));
    --qrm-surface:      var(--m-surface, var(--theme-surface, #FFFFFF));
    --qrm-surface-2:    var(--m-surface-2, var(--theme-surface-alt, #FAF6EB));
    --qrm-line:         var(--m-line, var(--theme-line, rgba(60, 40, 20, .08)));
    --qrm-line-strong:  var(--m-line-2, var(--theme-line-strong, rgba(60, 40, 20, .14)));

    --qrm-success:      var(--m-success, var(--theme-success, #2D8659));
    --qrm-danger:       var(--m-danger, var(--theme-danger, #C73E3E));
    --qrm-warning:      var(--m-warning, var(--theme-warning, #D89B1F));

    --qrm-r-sm:  10px;
    --qrm-r-md:  14px;
    --qrm-r-lg:  20px;
    --qrm-r-xl:  26px;
    --qrm-r-pill: 999px;

    --qrm-sh-1: 0 1px 2px rgba(var(--qrm-ink-rgb), .05), 0 4px 14px -8px rgba(var(--qrm-ink-rgb), .16);
    --qrm-sh-2: 0 2px 4px rgba(var(--qrm-ink-rgb), .05), 0 12px 28px -14px rgba(var(--qrm-ink-rgb), .26);
    --qrm-sh-3: 0 18px 44px -18px rgba(var(--qrm-ink-rgb), .34);
    --qrm-sh-brand: 0 14px 30px -12px rgba(var(--qrm-brand-rgb), .55);

    --qrm-ease: cubic-bezier(.22, .61, .36, 1);

    /* The pinned filter bar docks under the site navbar, whose height the
       layout publishes as --m-nav-h on every resize. */
    --qrm-appbar-h: var(--m-nav-h, 76px);

    --qrm-font:         var(--m-font-body, 'Inter', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif);
    --qrm-font-display: var(--m-font-display, 'Playfair Display', 'Tajawal', Georgia, serif);

    position: relative;
    font-family: var(--qrm-font);
    color: var(--qrm-ink);
    padding-block: 0 32px;
}
/* The stored brand shade can be left over from another palette, so the
   gradient end is derived from the brand itself wherever that is supported. */
@supports (color: color-mix(in srgb, red 50%, black)) {
    .qrm-store { --qrm-brand-dark: color-mix(in srgb, var(--qrm-brand) 74%, #000); }
}
html[dir="rtl"] .qrm-store {
    --qrm-font:         'Tajawal', var(--m-font-body, 'Inter', system-ui, sans-serif);
    --qrm-font-display: 'Tajawal', var(--m-font-display, 'Playfair Display', Georgia, serif);
}

/* rtl.css sets `text-align: right` on every element directly, which beats
   any alignment a parent passes down. Zero specificity, so every component
   rule still wins on its own terms. */
:where(html[dir="rtl"] .qrm-store) * { text-align: inherit; }

.qrm-store :focus-visible {
    outline: 2px solid var(--qrm-brand);
    outline-offset: 2px;
    border-radius: 6px;
}
.qrm-store ::selection { background: rgba(var(--qrm-brand-rgb), .18); }
.qrm-store * { -webkit-tap-highlight-color: transparent; }

/* When the cart bar is up the last row of cards must still scroll clear of it. */
.qrm-store:has(.qrm-cartbar:not(.is-empty)) { padding-block-end: 104px; }
@media (max-width: 991.98px) {
    /* On a phone the layout's own spacer already reserves the tab dock's
       height, so this only has to clear the cart bar sitting on it. */
    .qrm-store:has(.qrm-cartbar:not(.is-empty)) { padding-block-end: 70px; }
}

/* -------------------------------------------------------- 2. BREADCRUMB */
.shm-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding-block: 18px 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qrm-ink-mute);
}
.shm-crumbs a,
.shm-crumbs span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.shm-crumbs a {
    color: var(--qrm-ink-soft) !important;
    text-decoration: none !important;
    transition: color .2s;
}
.shm-crumbs a:hover { color: var(--qrm-brand) !important; }
.shm-crumbs a i,
.shm-crumbs span i { font-size: 11px; opacity: .8; }
.shm-crumbs [aria-current] { color: var(--qrm-brand); }
.shm-crumbs [aria-current] i { opacity: 1; }
.shm-crumbs__sep { font-size: 9px; opacity: .55; }
html[dir="rtl"] .shm-crumbs__sep { transform: scaleX(-1); }

/* -------------------------------------------------------------- 3. HERO */
/* The crumbs already give the card air; the QR page has an app bar instead. */
.qrm-store .qrm-hero { padding-block: 12px 0; }

/* The QR app bar carries a labelled "my orders" on a laptop, so the QR
   stylesheet drops the strip's copy at that width. This page has no app
   bar, so the strip keeps it. */
.qrm-store .qrm-action--orders { display: inline-flex; }

/* ---------------------------------------------------------- 4. CART BAR */
/* Phones and tablets: the bar parks flush on top of the site's bottom tab
   dock, whose height the layout publishes as `--m-tabbar-h`. The full-bleed
   shape that goes with it lives in qr-menu-2026.css; here we only pin the
   offset so no hardcoded number can drift away from the dock again. */
.qrm-store a.qrm-cartbar.cart_icon {
    inset-block-end: var(--m-tabbar-h, calc(88px + env(safe-area-inset-bottom, 0px)));
}
@media (min-width: 992px) {
    /* Desktop: docked to the corner, above the site's scroll-to-top button. */
    .qrm-store a.qrm-cartbar.cart_icon { inset-block-end: 96px; }
}

/* ---------------------------------------------------------- 5. DARK MODE */
/* The layout's moon toggle flips the whole site with body.nx-dark. */
body.nx-dark .qrm-store {
    --qrm-ink:          #F5E6D0;
    --qrm-ink-soft:     #D9C7AE;
    --qrm-ink-mute:     #A8957E;
    --qrm-ink-rgb:      0, 0, 0;
    --qrm-canvas:       #14100C;
    --qrm-surface:      #1F170F;
    --qrm-surface-2:    #2A2017;
    --qrm-line:         rgba(255, 255, 255, .08);
    --qrm-line-strong:  rgba(255, 255, 255, .16);
    --qrm-sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px -8px rgba(0, 0, 0, .6);
    --qrm-sh-2: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px -14px rgba(0, 0, 0, .7);
    --qrm-sh-3: 0 18px 44px -18px rgba(0, 0, 0, .85);
}
body.nx-dark .qrm-store .qrm-card__media,
body.nx-dark .qrm-store .qrm-card__ph {
    background: linear-gradient(150deg, #2A2017, #1A140F);
}
body.nx-dark .qrm-store .qrm-card__ph { color: rgba(var(--qrm-brand-rgb), .45); }
body.nx-dark .qrm-store .qrm-shimmer {
    background: linear-gradient(100deg, #2A2017 20%, #372B1F 42%, #2A2017 64%);
    background-size: 220% 100%;
}
body.nx-dark .qrm-store .qrm-diet,
body.nx-dark .qrm-store .qrm-card__peek,
body.nx-dark .qrm-store .qrm-card__wish {
    background: rgba(31, 23, 15, .92);
    color: #F5E6D0;
}
body.nx-dark .qrm-store .qrm-card__peek:hover { background: var(--qrm-brand); }
body.nx-dark .qrm-store .qrm-card__wish:hover { background: var(--qrm-danger); }
/* The riyal glyph is drawn black for a light page. */
body.nx-dark .qrm-store .qrm-sar { filter: brightness(0) invert(1); }
body.nx-dark .qrm-store .qrm-price__was .qrm-sar { opacity: .5; }
body.nx-dark .qrm-store .qrm-hero__card { box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .85); }
body.nx-dark .qrm-store .qrm-search input,
body.nx-dark .qrm-store .qrm-sort select { color-scheme: dark; }

/* --------------------------------------------------------- 6. MOTION */
@media (prefers-reduced-motion: reduce) {
    .qrm-store *,
    .qrm-store *::before,
    .qrm-store *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}