/* Semiramis storefront (2026-10-12). One stylesheet for the shell every page shares (header, search, menu, basket,
   footer), the home page and the product card. Light and dark come from the tokens below; every font size follows
   --scale; the heaviest weight anywhere is 500.

   Vazirmatn (SIL Open Font Licence, fonts/vazirmatn/OFL.txt): one variable family for Arabic and English, in two
   files a browser fetches only when a page uses their letters. The declared range stops at 500 on purpose: nothing on
   the site can render bolder than medium, whatever a rule asks for. */
@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/vazirmatn/vazirmatn-arabic.woff2') format('woff2');
    font-weight: 300 500;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1
}
@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/vazirmatn/vazirmatn-latin.woff2') format('woff2');
    font-weight: 300 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
:root {
    color-scheme: light;
    /* «عسل وفستق» (owner 2026-10-13, in place of «ورد وفستق»): honey leads and pistachio follows. A warm near-white
       ground, white surfaces, the logo's crimson as the one accent (--red keeps its name so every rule follows).
       --plate is honey: the picture plate and the head of a page. --second is the pale pistachio: the band, every
       second tile. --soft is the tint of a chosen or flagged thing, honey too. --tint is the pistachio of small
       tags. */
    --canvas: #faf9f5;
    --surface: #f4f0e6;
    --elevated: #fff;
    --ink: #20241e;
    --muted: #60675b;
    --line: #e8e2d3;
    --red: #a3153a;
    --soft: #f7eedb;
    --on-red: #fff5f7;
    --plate: #f7eedb;
    --second: #eef2e3;
    --tint: #dbe8bb;
    --on-tint: #33451a;
    --shadow: #20241e;
    --font: Vazirmatn,Tahoma,Arial,sans-serif;
    --gutter: 32px;
    --radius: 16px;
    --gap: 22px;
    --ease: cubic-bezier(.22,1,.36,1);
    --fast: 180ms;
    --header-h: calc(92px * var(--scale));
    --section: calc(64px * var(--scale));
    --heading: calc(21px * var(--scale));
    /* A 14" laptop is the baseline (1320px shell, scale 1). Large desktops widen the shell (about 86% of the
       screen, capped at 1800px) and step the type up a little, so text keeps pace with the larger cards. */
    --page-max: clamp(1320px, 86vw, 1800px);
    --scale: 1
}
@media(min-width:1800px) {
    :root {
        --scale: 1.0625;
        --gutter: 40px
    }
}
@media(min-width:2200px) {
    :root {
        --scale: 1.125;
        --gutter: 48px;
        --gap: 26px
    }
}
@media(max-width:960px) {
    :root {
        --gutter: 24px;
        --gap: 16px;
        --header-h: 78px;
        --section: 52px;
        --heading: 20px
    }
}
@media(max-width:640px) {
    :root {
        --gutter: 16px;
        --gap: 12px;
        --header-h: 68px;
        --section: 40px;
        --heading: 18px
    }
}
:root[data-theme=dark] {
    color-scheme: dark;
    --canvas: #14130f;
    --surface: #24221a;
    --elevated: #1d1c16;
    --ink: #eef2e8;
    --muted: #a7ae9d;
    --line: #343027;
    --red: #e9587a;
    --soft: #332a1b;
    --on-red: #1c0a10;
    --plate: #2e281b;
    --second: #262c1f;
    --tint: #313d20;
    --on-tint: #d2e6a6;
    --shadow: #000
}
* {
    box-sizing: border-box
}
html {
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%
}
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 400 calc(15px * var(--scale))/1.75 var(--font);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased
}
button,input,select,textarea {
    font: inherit
}
/* iOS Safari zooms the page into any field under 16px when it takes focus (2026-09-30):
   on touch screens a text field is never smaller. Fields with their own size keep it. */
@media (pointer: coarse) {
    input:where(:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image])) {
        font-size: max(16px, 1em)
    }
}
/* Delegated click listeners make the entire root tappable to WebKit/Blink.
   Suppress that ancestor highlight, not keyboard focus or text selection. */
.semiramis-home-page {
    -webkit-tap-highlight-color: transparent
}
a {
    color: inherit;
    text-decoration: none
}
button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0
}
button:disabled {
    opacity: .4;
    cursor: not-allowed
}
img {
    display: block;
    max-width: 100%;
    object-fit: cover
}
input {
    min-width: 0;
    color: inherit;
    caret-color: var(--red)
}
input::placeholder {
    color: var(--muted);
    opacity: 1
}
h1,h2,h3,h4,p {
    margin: 0
}
h1,h2,h3,h4,strong,b,th {
    font-weight: 500
}
h2 {
    font-size: var(--heading);
    line-height: 1.5
}
button,a {
    touch-action: manipulation
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px
}
::selection {
    background: var(--red);
    color: var(--on-red)
}
[hidden] {
    display: none!important
}
summary {
    list-style: none;
    cursor: pointer
}
summary::-webkit-details-marker {
    display: none
}
.icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none
}
.arrow-back {
    transform: rotate(180deg)
}
:root[dir=ltr] .arrow-forward {
    transform: rotate(180deg)
}
:root[dir=ltr] .arrow-back {
    transform: none
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}
.skip {
    position: fixed;
    top: -80px;
    z-index: 100;
    background: var(--ink);
    color: var(--canvas);
    padding: 12px
}
.skip:focus {
    top: 0
}
.deferred-media[data-src] {
    opacity: 0
}
.deferred-media {
    transition: opacity 320ms var(--ease)
}
/* The page's width: the header row, the main column and each band of the footer share it. */
.sm-bar,main,.sm-footer>div {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter)
}
main {
    padding-top: 20px
}

/* ---- Actions: one filled button per page, the rest stay quiet ------------------------------------------------- */
.solid-action,.outline-action,.quiet-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 24px;
    border-radius: 999px;
    font-size: calc(14px * var(--scale));
    font-weight: 500;
    line-height: 1.4;
    transition: background var(--fast),color var(--fast),transform var(--fast),box-shadow var(--fast)
}
.solid-action {
    background: var(--red);
    color: var(--on-red)
}
.outline-action {
    box-shadow: inset 0 0 0 1px var(--red);
    color: var(--red)
}
.quiet-action {
    box-shadow: inset 0 0 0 1px var(--line);
    background: var(--elevated)
}
.solid-action .icon,.outline-action .icon {
    width: 17px;
    height: 17px;
    transition: transform var(--fast) var(--ease)
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: calc(13px * var(--scale));
    color: var(--muted);
    transition: color var(--fast)
}
.text-link .icon {
    width: 15px;
    height: 15px;
    transition: transform var(--fast) var(--ease)
}
.sm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}
.sm-chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--surface);
    font-size: calc(13px * var(--scale));
    transition: background var(--fast),color var(--fast)
}
/* A row of two or three choices; the chosen one sits on a small white plate. */
.sm-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface)
}
.sm-seg button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: calc(13px * var(--scale));
    white-space: nowrap;
    color: var(--muted);
    transition: background var(--fast),color var(--fast)
}
.sm-seg button[aria-pressed=true] {
    background: var(--elevated);
    color: var(--red);
    box-shadow: 0 0 0 1px var(--line)
}
.sm-seg .icon {
    width: 16px;
    height: 16px
}
.sm-prefs-list {
    display: grid;
    gap: 14px
}
.sm-pref {
    display: grid;
    gap: 6px
}
.sm-pref>span {
    font-size: calc(12px * var(--scale));
    color: var(--muted)
}

/* ---- Announcement: the shop's own moving line, above the header ----------------------------------------------- */
.announcement {
    height: 32px;
    background: var(--announcement-bg);
    color: var(--announcement-fg);
    display: flex;
    padding-inline: var(--gutter);
    gap: 12px
}
.announcement-viewport {
    position: relative;
    flex: 1;
    overflow: hidden
}
.announcement-message {
    position: absolute;
    left: 0;
    top: 5px;
    white-space: nowrap;
    width: max-content;
    font: 400 calc(12px * var(--scale))/22px Vazirmatn,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
    animation: announcement-rtl var(--announcement-duration,30s) linear infinite;
    animation-delay: calc(var(--announcement-duration,30s) * -.35)
}
[dir=ltr] .announcement-message {
    animation-name: announcement-ltr
}
.announcement button {
    width: 32px;
    display: grid;
    place-items: center
}
.announcement .icon {
    width: 14px;
    height: 14px
}
.announcement:is(:hover,:focus-within) .announcement-message,.announcement.is-paused .announcement-message {
    animation-play-state: paused
}
@keyframes announcement-rtl {
    from {
        transform: translateX(calc(var(--announcement-text,600px) * -1))
    }
    to {
        transform: translateX(var(--announcement-start,1200px))
    }
}
@keyframes announcement-ltr {
    from {
        transform: translateX(var(--announcement-start,1200px))
    }
    to {
        transform: translateX(calc(var(--announcement-text,600px) * -1))
    }
}

/* ---- Header: one calm row that stays with the shopper --------------------------------------------------------- */
.sm-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--canvas);
    transition: box-shadow 240ms var(--ease)
}
.sm-header.is-stuck {
    box-shadow: 0 1px 0 var(--line),0 14px 28px -22px color-mix(in srgb,var(--shadow) 45%,transparent)
}
.sm-bar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 16px;
    min-height: var(--header-h)
}
.sm-bar-start,.sm-bar-end {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0
}
.sm-bar-end {
    justify-content: flex-end
}
.sm-logo {
    display: block;
    flex: none
}
.logo img {
    width: auto;
    height: calc(76px * var(--scale));
    object-fit: contain;
    transition: transform 320ms var(--ease)
}
/* The logo's crimson and green do not read on a dark ground, so dark mode shows the logo's own light version
   (owner's choice 2026-10-13): the same drawing in cream, with the green kept light. Each rule only hides the one
   that is not wanted, so the one in use keeps whatever layout its place gives it. */
:root:not([data-theme=dark]) .logo-mark-dark {
    display: none
}
:root[data-theme=dark] .logo-mark-light {
    display: none
}
.sm-menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-height: 42px;
    padding-inline: 12px 16px;
    margin-inline-start: -12px;
    border-radius: 999px;
    font-size: calc(14px * var(--scale));
    transition: background var(--fast),color var(--fast)
}
.sm-menu-button .icon {
    width: 20px;
    height: 20px
}
/* The links wrap out of sight when the row runs short, one whole link at a time: nothing is ever cut in half. */
.sm-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2px;
    height: 42px;
    overflow: hidden;
    min-width: 0;
    margin-inline-start: 6px;
    padding-inline-start: 10px;
    border-inline-start: 1px solid var(--line)
}
.sm-nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding-inline: 11px;
    font-size: calc(14px * var(--scale));
    white-space: nowrap;
    color: var(--muted);
    transition: color var(--fast)
}
.sm-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 11px;
    bottom: 7px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease)
}
[dir=rtl] .sm-nav a::after {
    transform-origin: right
}
.sm-nav a[aria-current] {
    color: var(--ink)
}
.sm-nav a[aria-current]::after {
    transform: scaleX(1)
}
/* A small tilted «خصم» tag beside «العروض» (owner's pick, 14/10/2026). Only the tag is red: the word looks like every
   other menu link, in the header and in the phone menu (owner, 15/10/2026). */
.nav-deals-tag {
    position: relative;
    inset-block-start: -9px;
    display: inline-grid;
    place-items: center;
    height: 18px;
    margin-inline-start: 4px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--red);
    color: var(--on-red);
    font-size: calc(11px * var(--scale));
    line-height: 1;
    transform: rotate(-8deg);
    box-shadow: 0 3px 8px -2px color-mix(in srgb,var(--red) 55%,transparent)
}
.sm-search-open {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: calc(168px * var(--scale));
    min-height: 42px;
    padding-inline: 14px 18px;
    margin-inline-end: 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: calc(13px * var(--scale));
    transition: background var(--fast),color var(--fast)
}
.sm-search-open .icon {
    width: 18px;
    height: 18px
}
.sm-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: background var(--fast),color var(--fast),transform var(--fast)
}
.sm-icon .icon {
    width: 21px;
    height: 21px
}
.sm-icon b {
    position: absolute;
    top: 3px;
    inset-inline-end: 1px;
    min-width: 17px;
    padding-inline: 4px;
    border-radius: 9px;
    background: var(--red);
    color: var(--on-red);
    font: 500 calc(10px * var(--scale))/17px var(--font);
    text-align: center;
    font-variant-numeric: tabular-nums
}
.sm-icon b.is-bumped {
    animation: sm-bump 420ms var(--ease)
}
.cart-access {
    display: flex
}
/* One-tap switches: the other language, the other currency, light or dark. */
.sm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    min-width: 42px;
    height: 42px;
    padding-inline: 10px;
    border-radius: 999px;
    font-size: calc(13px * var(--scale));
    white-space: nowrap;
    transition: background var(--fast),color var(--fast)
}
.sm-toggle .icon {
    width: 15px;
    height: 15px;
    color: var(--muted);
    transition: transform 320ms var(--ease)
}
.sm-theme {
    display: inline-flex;
    flex: none
}
/* The turn plays when the shopper switches the look, not on every page load. */
:root[data-theme-turned] .sm-theme button {
    animation: sm-turn 420ms var(--ease)
}
.sm-theme [data-theme-choice=light],:root[data-theme=dark] .sm-theme [data-theme-choice=dark] {
    display: none
}
:root[data-theme=dark] .sm-theme [data-theme-choice=light] {
    display: grid
}
.sm-theme-phone,.sm-currency-phone {
    display: none
}
.sm-pop {
    position: relative
}
.sm-pop-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 40;
    min-width: 236px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--elevated);
    box-shadow: 0 22px 44px -24px color-mix(in srgb,var(--shadow) 40%,transparent);
    transform-origin: top;
    animation: sm-pop 200ms var(--ease)
}
.sm-pop[open]>summary {
    background: var(--surface);
    color: var(--red)
}
.account-panel {
    display: grid;
    gap: 2px
}
.account-panel strong {
    padding: 4px 10px 8px;
    font-size: calc(14px * var(--scale))
}
.account-panel>a,.account-panel button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding-inline: 10px;
    border-radius: 12px;
    font-size: calc(14px * var(--scale));
    text-align: start;
    transition: background var(--fast),color var(--fast)
}
.account-panel>a:active,.account-panel button:active {
    color: var(--red)
}
@media(max-width:1180px) {
    .sm-nav {
        display: none
    }
}
@media(max-width:960px) {
    .sm-search-open {
        min-width: 0;
        width: 42px;
        padding: 0;
        margin: 0;
        justify-content: center;
        background: none;
        color: var(--ink)
    }
    .sm-search-open span,.sm-menu-button span {
        display: none
    }
    .sm-search-open .icon {
        width: 21px;
        height: 21px
    }
    .sm-menu-button {
        width: 42px;
        padding: 0;
        margin-inline-start: -8px;
        justify-content: center
    }
    .sm-menu-button .icon {
        width: 22px;
        height: 22px
    }
    .logo img {
        height: 64px
    }
}
@media(max-width:640px) {
    .sm-bar {
        gap: 8px
    }
    .sm-bar-end .sm-pop,.sm-bar-end .wishlist-action,.sm-bar-end .sm-toggle,.sm-bar-end .sm-theme {
        display: none
    }
    .sm-theme-phone {
        display: inline-flex
    }
    /* The currency beside light/dark (owner, 20/10/2026): its code small, the swap under it. */
    .sm-currency-phone {
        display: grid;
        align-content: center;
        gap: 3px;
        font: 500 calc(11.5px * var(--scale))/1 var(--font);
        letter-spacing: .02em
    }
    .sm-currency-phone .icon {
        width: 14px;
        height: 14px;
        color: var(--muted);
        stroke-width: 1.7
    }
    .logo img {
        height: 56px
    }
}

/* ---- Sheets: the menu, the basket and search open over the page ------------------------------------------------ */
dialog {
    border: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink);
    padding: 0;
    border-radius: 20px;
    max-height: calc(100dvh - 48px);
    overscroll-behavior: contain
}
dialog::backdrop {
    background: #10140c80;
    animation: sm-fade 240ms ease-out
}
body:has(dialog.sm-sheet[open],dialog.sm-search[open]) {
    overflow: hidden
}
.sm-sheet {
    position: fixed;
    inset-block: 0;
    inset-inline: 0 auto;
    width: min(408px,90vw);
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-start-end-radius: 28px;
    border-end-end-radius: 28px;
    box-shadow: 0 0 60px -20px color-mix(in srgb,var(--shadow) 60%,transparent)
}
.sm-sheet[open] {
    display: flex;
    flex-direction: column
}
.sm-cart {
    inset-inline: auto 0;
    border-radius: 0;
    border-start-start-radius: 28px;
    border-end-start-radius: 28px
}
.sm-sheet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px 22px;
    flex: none
}
[dir=rtl] .sm-sheet-top {
    padding: 16px 22px 12px 16px
}
.sm-sheet-top h2 {
    font-size: calc(18px * var(--scale))
}
.sm-drawer-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    padding: 4px 22px 28px
}
.sm-drawer-label {
    margin-bottom: 8px;
    font-size: calc(12px * var(--scale));
    color: var(--muted)
}
.sm-drawer-shelves {
    display: grid;
    gap: 4px
}
.sm-shelf>summary,a.sm-shelf {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 6px 12px 6px 6px;
    border-radius: 18px;
    font-size: calc(15px * var(--scale));
    transition: background var(--fast),color var(--fast)
}
[dir=rtl] :is(.sm-shelf>summary,a.sm-shelf) {
    padding: 6px 6px 6px 12px
}
.sm-shelf img {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 28px 28px 14px 14px;
    background: var(--plate);
    object-fit: contain;
    padding: 5px
}
.sm-shelf span {
    flex: 1;
    min-width: 0
}
.sm-shelf small {
    color: var(--muted);
    font-size: calc(12px * var(--scale));
    font-variant-numeric: tabular-nums
}
.sm-shelf .icon {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform var(--fast) var(--ease)
}
.sm-shelf[open]>summary .icon {
    transform: rotate(180deg)
}
.sm-shelf-inner {
    display: grid;
    margin: 2px 0 10px;
    margin-inline-start: 34px;
    padding-inline-start: 26px;
    border-inline-start: 1px solid var(--line)
}
.sm-shelf-inner a {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: calc(14px * var(--scale));
    transition: color var(--fast)
}
.sm-shelf-inner a:first-child {
    color: var(--red);
    font-size: calc(13px * var(--scale))
}
/* The third level sits a step further in, lighter, under its own second-level name. */
.sm-shelf-inner .sm-shelf-deep {
    min-height: 36px;
    padding-inline-start: 16px;
    font-size: calc(13px * var(--scale));
    color: var(--muted)
}
.sm-drawer-links,.sm-drawer-account {
    display: grid;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line)
}
.sm-drawer-links a,.sm-drawer-account a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    font-size: calc(15px * var(--scale));
    transition: color var(--fast)
}
.sm-drawer-account .icon {
    width: 19px;
    height: 19px;
    color: var(--muted)
}
.sm-drawer-prefs {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}
.sm-drawer-prefs .sm-seg button {
    min-height: 42px
}
/* The basket sheet: the shop's own mini cart, refreshed by the server after every change. */
.cart-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}
.mini-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 22px
}
.mini-item {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) 36px;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
    border-bottom: 1px solid var(--line)
}
.mini-item:last-child {
    border-bottom: 0
}
.mini-media img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--plate);
    object-fit: contain;
    padding: 6px
}
.mini-item>div {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-size: calc(13px * var(--scale));
    line-height: 1.6
}
.mini-item>div>a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}
.mini-item small {
    font-size: calc(12px * var(--scale));
    color: var(--muted)
}
.mini-item button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 44px;
    color: var(--muted)
}
.mini-item button .icon {
    width: 16px;
    height: 16px
}
.mini-foot {
    flex: none;
    display: grid;
    gap: 10px;
    padding: 16px 22px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--elevated)
}
.mini-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: calc(14px * var(--scale));
    color: var(--muted)
}
.mini-total strong {
    font-size: calc(17px * var(--scale));
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums
}
.mini-empty {
    flex: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 32px 22px;
    text-align: center;
    color: var(--muted)
}
.mini-empty>.icon {
    width: 64px;
    height: 64px;
    padding: 18px;
    border-radius: 32px 32px 18px 18px;
    background: var(--plate);
    color: var(--red);
    stroke-width: 1.2
}
/* Search: a sheet from the top with one wide field. */
.sm-search {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0 0 28px 28px;
    padding: 18px var(--gutter) 26px;
    overflow-y: auto;
    box-shadow: 0 30px 60px -30px color-mix(in srgb,var(--shadow) 55%,transparent)
}
.sm-search-inner {
    position: relative;
    max-width: 760px;
    margin-inline: auto
}
.search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 56px;
    padding-inline: 8px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow var(--fast),background var(--fast)
}
.search:focus-within {
    background: var(--elevated);
    box-shadow: inset 0 0 0 1.5px var(--red)
}
.search input {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    background: none;
    font-size: calc(16px * var(--scale))
}
.search input:focus-visible {
    outline: none
}
.search input::-webkit-search-cancel-button {
    display: none
}
.search button {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--muted)
}
.search .icon {
    width: 20px;
    height: 20px
}
.search-results {
    display: grid;
    gap: 2px;
    max-height: min(52vh,420px);
    margin-top: 10px;
    overflow: auto
}
.search-results a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 16px
}
.search-results a[aria-selected=true] {
    background: var(--surface)
}
.search-results a:active {
    background: var(--surface)
}
.search-results img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--plate);
    object-fit: contain;
    padding: 4px
}
.search-results span {
    display: grid;
    gap: 2px
}
.search-results strong {
    font-size: calc(14px * var(--scale));
    font-weight: 400
}
.search-results small,.search-results p {
    font-size: calc(13px * var(--scale));
    color: var(--muted)
}
.search-results p {
    padding: 14px 8px
}
.sm-search-quick {
    display: grid;
    gap: 10px;
    margin-top: 18px
}
.sm-search-quick p {
    font-size: calc(12px * var(--scale));
    color: var(--muted)
}
@media(max-width:640px) {
    .sm-search {
        padding-top: 12px;
        border-radius: 0 0 22px 22px
    }
    .search {
        height: 52px
    }
    .sm-sheet {
        width: min(408px,88vw)
    }
}

/* ---- The shop's own banners (the top of the home page) and the exchange-rate strip ------------------------------ */
.hero-stage {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: var(--surface);
    /* A calm wide strip (owner 2026-10-12: the first banners felt tall): 1796 x 700. */
    aspect-ratio: 1796/700;
    container-type: size
}
.hero-stage>a {
    position: relative;
    display: grid;
    /* One cell exactly the stage's size, so the artwork's height:100% is the
       capped stage height (an auto row would grow to the artwork and crop it). */
    grid-template: 100% / 100%;
    place-items: center;
    width: 100%;
    height: 100%;
    isolation: isolate
}
.hero-stage picture {
    display: contents
}
/* The complete approved artwork, never cropped: as wide as the page until the
   height cap, then centred at its own proportions. */
.hero-stage img {
    position: relative;
    z-index: 1;
    grid-area: 1/1;
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain
}
/* Owner 2026-09-28: the banner spans the page on every screen. Where the screen
   is wider than the artwork, a soft blurred copy of the same picture fills the
   sides (no white bars, nothing cut off), and the artwork edges fade into it. */
.hero-stage .hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    filter: blur(26px) saturate(1.1);
    transform: scale(1.15);
    pointer-events: none
}
/* Only where the height cap below can make the stage wider than the artwork. Asked on every screen, the
   question was also answered "yes" by a rounding hair on common phones (360, 390 and 402 wide: the browser
   compares whole pixels), and a phone then fetched the desktop picture for a backdrop nobody could see. */
@media(min-width:901px) {
@container (min-aspect-ratio: 1800/700) {
    .hero-stage .hero-backdrop { display: block }
    .hero-stage img:not(.hero-backdrop) {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent)
    }
}
}
/* Desktop height: at most 72% of the screen, never under 500px or over 680px. 500px lets a 14" laptop show the
   whole banner edge to edge (its natural height there is about 490px), so the blurred side fill only ever
   appears on screens far wider than the artwork. */
@media(min-width:901px) {
    .hero-stage { width: 100%; max-height: max(500px, min(72vh, 680px)) }
}
.hero-stage picture {
    display: block;
    width: 100%;
    height: 100%
}
/* The backdrop's own picture (15/10/2026) makes no box: its image stays the absolutely placed layer it always was. */
.hero-stage picture.hero-backdrop-frame {
    display: contents
}
.hero-stage {
    touch-action: pan-y
}
.hero-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 12px 0;
    flex-wrap: wrap
}
.hero-frame {
    position: relative
}
/* The slider's controls lie on the banner: round arrows at its sides, the dots on a small plate at its foot. */
.slide-navigation {
    display: contents
}
.slide-controls .slide-navigation button {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--canvas) 86%,transparent);
    box-shadow: 0 10px 20px -12px color-mix(in srgb,var(--shadow) 60%,transparent);
    translate: 0 -50%;
    transition: background var(--fast),color var(--fast),opacity 260ms var(--ease);
    /* Out of the picture's way (owner 2026-10-13): the arrows show while the mouse rests on the banner, while the
       keyboard is on its controls, and for a moment after a finger slides it. */
    opacity: 0;
    pointer-events: none
}
.hero-frame.is-sliding .slide-navigation button,.hero-frame:has(:focus-visible) .slide-navigation button {
    opacity: 1;
    pointer-events: auto
}
@media(hover:hover) and (pointer:fine) {
    .hero-frame:hover .slide-navigation button {
        opacity: 1;
        pointer-events: auto
    }
}
.slide-controls .slide-navigation button:first-child {
    inset-inline-start: 16px
}
.slide-controls .slide-navigation button:last-child {
    inset-inline-end: 16px
}
.slide-controls .icon {
    width: 18px;
    height: 18px
}
.slide-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    gap: 2px;
    width: max-content;
    margin-inline: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb,var(--canvas) 86%,transparent)
}
.slide-dots button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 28px
}
.slide-dots span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 10px;
    background: color-mix(in srgb,var(--ink) 28%,transparent);
    transition: width var(--fast),background var(--fast)
}
.slide-dots [aria-pressed=true] span {
    width: 18px;
    background: var(--red)
}
.fx {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 6px 20px;
    border-radius: 999px;
    background: var(--surface);
    font-variant-numeric: tabular-nums
}
.fx>strong {
    font-size: calc(13px * var(--scale));
    font-weight: 400;
    color: var(--muted);
    white-space: nowrap
}
.fx>strong span {
    color: var(--muted);
    margin: 0 4px
}
.fx dl {
    display: flex;
    gap: 24px;
    margin: 0
}
.fx dl>div {
    display: flex;
    align-items: baseline;
    gap: 7px
}
.fx dt {
    color: var(--muted);
    font-size: calc(12px * var(--scale))
}
.fx dd {
    margin: 0;
    font-size: calc(15px * var(--scale));
    font-weight: 500
}
.fx-date {
    font-size: calc(10px * var(--scale));
    line-height: 1.6;
    color: var(--muted)
}
.fx-date time {
    display: block;
    font-size: calc(10px * var(--scale))
}
/* Where the rate comes from (owner 2026-10-04): a quiet mark at the strip's end; its words open only when asked. */
.fx-source {
    position: relative;
    flex: none;
    /* Room for a finger without making the strip any taller than it was. */
    margin-block: -8px;
    margin-inline-start: -10px
}
.fx-source summary {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--muted);
    opacity: .7;
    cursor: pointer;
    list-style: none;
    transition: opacity var(--fast),background var(--fast)
}
.fx-source summary::-webkit-details-marker {
    display: none
}
.fx-source summary .icon {
    width: 16px;
    height: 16px
}
.fx-source[open] summary {
    opacity: 1;
    background: var(--surface)
}
.fx-source p {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 6;
    width: max-content;
    max-width: min(300px,calc(100vw - 2 * var(--gutter)));
    margin: 0;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--elevated);
    color: var(--ink);
    font-size: calc(12px * var(--scale));
    line-height: 1.75;
    box-shadow: 0 10px 26px #0000001f
}
.fx-source a {
    color: inherit;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px
}
@media(hover:hover) {
    .fx-source summary:hover {
        opacity: 1
    }
}
@media(max-width:960px) {
    .fx {
        width: 100%;
        justify-content: space-between;
        gap: 14px;
        margin: 0;
        border-radius: 20px
    }
    .fx dl {
        gap: 16px
    }
}
@media(max-width:640px) {
    .fx {
        flex-wrap: wrap;
        gap: 10px 12px
    }
    .fx>strong {
        font-size: calc(12px * var(--scale))
    }
    .fx dd {
        font-size: calc(15px * var(--scale))
    }
    .fx dt {
        font-size: calc(11px * var(--scale))
    }
    .fx-date {
        flex: 1 0 calc(100% - 44px);
        display: flex;
        justify-content: space-between;
        gap: 8px
    }
    .fx-date time {
        display: inline;
        direction: inherit
    }
    .fx-source {
        margin-inline-start: auto
    }
    .fx-source summary .icon {
        width: 14px;
        height: 14px
    }
    /* A phone turns the slider with a finger: the arrows step aside and the dots stay small. */
    .slide-controls .slide-navigation button {
        display: none
    }
    .slide-dots {
        bottom: 6px;
        padding: 0 6px
    }
    .slide-dots button {
        width: 16px;
        height: 20px
    }
    .slide-dots span {
        width: 5px;
        height: 5px
    }
    .slide-dots [aria-pressed=true] span {
        width: 14px
    }
    /* A phone shows the banner a little closer: a 2:1 window on its middle, so its words stay readable. About a
       ninth of the picture is out of sight at each side; a banner keeps its words and its subject off the edges. */
    .hero-stage {
        aspect-ratio: 2/1;
        border-radius: 20px
    }
    .hero-stage img:not(.hero-backdrop) {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

/* ---- Where the page sits: a home sign, quiet links, small chevrons, the page itself on a soft plate -------------- */
.eh-crumbs {
    margin-block-end: 22px
}
.eh-crumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 -10px;
    padding: 0;
    list-style: none;
    font-size: calc(13px * var(--scale));
    color: var(--muted)
}
.eh-crumbs li {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0
}
.eh-crumbs a,.eh-crumbs-here {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding-inline: 10px;
    border-radius: 999px;
    transition: background var(--fast),color var(--fast)
}
.eh-crumbs-home .icon {
    width: 15px;
    height: 15px;
    color: var(--on-tint)
}
.eh-crumbs-sep {
    display: grid;
    flex: none;
    opacity: .45
}
.eh-crumbs-sep .icon {
    width: 12px;
    height: 12px;
    transform: rotate(90deg)
}
[dir=ltr] .eh-crumbs-sep .icon {
    transform: rotate(-90deg)
}
.eh-crumbs-here {
    display: block;
    max-width: min(56ch,100%);
    padding-block: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px
}
.eh-crumbs [aria-current] {
    background: var(--surface);
    color: var(--ink)
}
:root[data-theme=dark] .eh-crumbs-home .icon {
    color: var(--tint)
}
@media(hover:hover) {
    .eh-crumbs a:hover {
        background: var(--soft);
        color: var(--red)
    }
    .eh-crumbs a:hover .icon {
        color: inherit
    }
}
@media(max-width:640px) {
    .eh-crumbs {
        margin-block-end: 14px
    }
    .eh-crumbs ol {
        margin: 0 -8px;
        font-size: calc(12px * var(--scale))
    }
    .eh-crumbs a,.eh-crumbs-here {
        padding-inline: 8px
    }
}
/* ---- Sections and rows ------------------------------------------------------------------------------------------ */
.section {
    margin-top: var(--section);
    min-width: 0
}
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px
}
.section-heading>div:not(.section-title) {
    display: flex;
    align-items: center;
    gap: 14px
}
.section-title {
    display: grid;
    gap: 2px;
    min-width: 0
}
.section-title p {
    font-size: calc(13px * var(--scale));
    color: var(--muted)
}
.rail-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none
}
.rail-controls button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--line);
    transition: background var(--fast),color var(--fast),transform var(--fast),opacity var(--fast)
}
.rail-controls .icon {
    width: 16px;
    height: 16px
}
.rail-controls button:disabled {
    opacity: .3
}
.rail-controls button:not(:disabled):active {
    transform: scale(.92)
}
.rail {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding-block: 3px 9px
}
@media(hover:hover) and (pointer:fine) {
    .rail {
        cursor: grab
    }
}
.rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none
}
.rail.is-dragging a {
    cursor: grabbing
}
.rail::-webkit-scrollbar {
    display: none
}
.rail>* {
    flex: none;
    scroll-snap-align: start;
    min-width: 0
}
/* A little of the next card always shows, so the row says «there is more» without an arrow. */
.products>.product {
    width: calc((100% - 4 * var(--gap))/4.6)
}
@media(min-width:1500px) {
    .products>.product {
        width: calc((100% - 5 * var(--gap))/5.6)
    }
}
@media(max-width:960px) {
    .products>.product {
        width: calc((100% - 3 * var(--gap))/3.4)
    }
    .section-heading {
        margin-bottom: 16px
    }
}
@media(max-width:640px) {
    .products>.product {
        width: calc((100% - 2 * var(--gap))/2.25)
    }
    .section-heading {
        margin-bottom: 14px
    }
    .section-heading .rail-controls {
        display: none
    }
}
/* «شاهدتها مؤخراً» (20/10/2026): the row of the products opened last, at the foot of the page. Its mark is only there
   to tell the script the foot of the page is near; the row shows once it has cards. */
.recently-mark {
    height: 1px;
    margin-bottom: -1px
}
.recently-clear {
    min-height: 36px;
    padding-inline: 2px
}

/* ---- The shop's sections: the section's own picture is the star ----------------------------------------------- */
.sm-cats--few {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
    gap: var(--gap);
    padding-top: calc(30px * var(--scale))
}
/* A wide card on a soft tint: the name, its link and the inner sections at the start; the picture stands large at
   the far side on a pale disc and rises above the card's edge. The whole card opens the section. */
.category-tile {
    --pic: min(46%,calc(280px * var(--scale)));
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    min-height: calc(210px * var(--scale));
    padding: 28px 34px;
    padding-inline-end: calc(var(--pic) + 34px);
    border-radius: 30px;
    background: var(--second);
    transition: background 300ms var(--ease)
}
.category-tile:nth-child(even) {
    background: var(--plate)
}
.category-tile:nth-child(3n) {
    background: var(--surface)
}
.category-tile .category::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit
}
.category-tile .category:focus-visible {
    outline: none
}
.category-tile .category:focus-visible::after {
    outline: 2px solid var(--red);
    outline-offset: 3px
}
.category-tile .category-media {
    position: absolute;
    inset-inline-end: 22px;
    bottom: 14px;
    width: var(--pic);
    aspect-ratio: 1;
    display: grid;
    place-items: center
}
/* The pale disc the picture rests on. */
.category-tile .category-media::before {
    content: "";
    position: absolute;
    inset: 12% 6% 0;
    border-radius: 50%;
    background: color-mix(in srgb,var(--elevated) 72%,transparent)
}
.category-media img {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 16px 14px color-mix(in srgb,var(--shadow) 20%,transparent));
    transition: transform 520ms var(--ease)
}
.category-name {
    display: grid;
    justify-items: start;
    gap: 10px;
    min-width: 0
}
.category h3 {
    font-size: calc(24px * var(--scale));
    line-height: 1.45
}
.category small {
    font-size: calc(12px * var(--scale));
    color: var(--muted)
}
.category-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 999px;
    background: var(--elevated);
    font-size: calc(13px * var(--scale));
    color: var(--red);
    transition: background var(--fast),color var(--fast)
}
.category-go .icon {
    width: 15px;
    height: 15px;
    transition: transform var(--fast) var(--ease)
}
.category-subs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}
.category-subs .sm-chip {
    min-height: 32px;
    padding: 3px 13px;
    background: color-mix(in srgb,var(--elevated) 70%,transparent);
    font-size: calc(12.5px * var(--scale))
}
/* Many sections: the same card, upright, in a row to slide. The row keeps room above for the rising pictures. */
.category-rail {
    padding-top: calc(22px * var(--scale))
}
.category-rail .category {
    display: grid;
    align-content: end;
    gap: 6px;
    width: calc((100% - 5 * var(--gap))/5.4);
    padding: 0 12px 18px;
    border-radius: 26px;
    background: var(--plate);
    text-align: center;
    transition: background 300ms var(--ease)
}
.category-rail .category:nth-child(3n+2) {
    background: var(--second)
}
.category-rail .category:nth-child(3n) {
    background: var(--surface)
}
.category-rail .category-media {
    display: block;
    width: 88%;
    margin: calc(-18px * var(--scale)) auto 0
}
.category-rail .category-name {
    justify-items: center;
    gap: 0
}
.category-rail .category h3 {
    font-size: calc(15px * var(--scale));
    line-height: 1.6
}
@media(max-width:1180px) {
    .category-rail .category {
        width: calc((100% - 4 * var(--gap))/4.4)
    }
}
@media(max-width:960px) {
    .category-rail .category {
        width: calc((100% - 3 * var(--gap))/3.4)
    }
    .category-tile {
        --pic: min(44%,220px);
        padding: 24px;
        padding-inline-end: calc(var(--pic) + 20px)
    }
    .category-tile .category-media {
        inset-inline-end: 14px
    }
}
@media(max-width:640px) {
    .sm-cats--few {
        padding-top: 18px
    }
    .category-tile {
        --pic: 44%;
        gap: 10px;
        min-height: 150px;
        padding: 20px 18px;
        padding-inline-end: calc(var(--pic) + 10px);
        border-radius: 24px
    }
    .category-tile .category-media {
        inset-inline-end: 8px;
        bottom: 8px
    }
    .category h3 {
        font-size: calc(19px * var(--scale))
    }
    .category-go {
        min-height: 36px;
        padding-inline: 14px
    }
    .category-rail {
        padding-top: 18px
    }
    .category-rail .category {
        width: calc((100% - 2 * var(--gap))/2.4);
        padding: 0 8px 14px;
        border-radius: 22px
    }
    .category-rail .category-media {
        margin-top: -14px
    }
    .category-rail .category h3 {
        font-size: calc(14px * var(--scale))
    }
}

/* ---- Product card: the picture alone on a pale plate, then the name, then one quiet line ------------------------ */
.product {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0
}
.product-media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 22px;
    background: var(--plate);
    transition: background 300ms var(--ease)
}
.product-media>a {
    display: block;
    width: 100%;
    height: 100%
}
.product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10%;
    transition: transform 520ms var(--ease),opacity 320ms var(--ease)
}
.product-overlays {
    position: absolute;
    inset: 4px 4px auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    pointer-events: none
}
.save {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--muted);
    pointer-events: auto;
    transition: color var(--fast),transform var(--fast)
}
.save .icon {
    width: 18px;
    height: 18px
}
.save[aria-pressed=true] {
    color: var(--red)
}
.save[aria-pressed=true] .icon {
    fill: currentColor
}
.badge-rail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    padding: 8px 8px 0
}
.discount,.stock {
    max-width: 100%;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: calc(11px * var(--scale));
    line-height: 1.6;
    overflow-wrap: anywhere
}
.discount {
    background: var(--red);
    color: var(--on-red)
}
.stock {
    background: var(--elevated);
    color: var(--muted)
}
.product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
    padding: 10px 4px 2px
}
.brand-name {
    font-size: calc(11px * var(--scale));
    line-height: 1.6;
    color: var(--muted)
}
.product h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2em;
    font-size: calc(14px * var(--scale));
    font-weight: 400;
    line-height: 1.6;
    transition: color var(--fast)
}
.product-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: calc(12px * var(--scale));
    color: var(--muted)
}
.product-rating .icon {
    width: 12px;
    height: 12px;
    color: var(--red);
    fill: currentColor
}
.product-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    margin-top: auto;
    padding-top: 4px
}
.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
    text-align: start;
    font-variant-numeric: tabular-nums
}
.price strong {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: calc(15px * var(--scale));
    line-height: 1.4;
    font-weight: 500
}
.price-number {
    font-size: inherit
}
.price-currency {
    order: 2;
    font-size: calc(11px * var(--scale));
    line-height: 1;
    font-weight: 400;
    color: var(--muted)
}
/* An Arabic currency name («دولار», «ل.س») follows its amount and is never letter-spaced. */
.price-named .price-currency {
    font-size: calc(12px * var(--scale));
    letter-spacing: 0
}
.price del {
    color: var(--muted);
    font-size: calc(12px * var(--scale))
}
/* A price that is the lowest of several (the box filled to taste): «يبدأ من» on its own small line above it. */
.price-from-wrap {
    display: grid;
    gap: 0;
    min-width: 0
}
.price-from {
    color: var(--muted);
    font-size: calc(11.5px * var(--scale));
    line-height: 1.3
}
/* The buy control: a small round «+» at the end of the price line. It opens in place into «− 1 +», which lies over
   the line for a moment and then rests as the number in the basket. Nothing in the card moves. */
.buy {
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex: none;
    width: 34px;
    height: 34px;
    transition: opacity var(--fast)
}
.buy[aria-busy=true] {
    opacity: .6
}
.buy .add,.qty-count {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: background var(--fast),color var(--fast),transform 220ms var(--ease),box-shadow var(--fast)
}
/* Room for a finger around the small circle. */
.buy .add::after,.qty-count::after {
    content: "";
    position: absolute;
    inset: -6px
}
.buy .add {
    background: var(--elevated);
    color: var(--red);
    box-shadow: inset 0 0 0 1px var(--line)
}
.buy .add .icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
    transition: transform 260ms var(--ease)
}
.buy .add span {
    display: none
}
.buy .add.is-added {
    background: var(--soft)
}
.buy .add-options {
    color: var(--ink)
}
.buy .add:disabled {
    opacity: .4
}
.qty-count {
    background: var(--red);
    color: var(--on-red);
    font-size: calc(13px * var(--scale));
    font-weight: 500;
    font-variant-numeric: tabular-nums
}
.qty {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 2px;
    border-radius: 999px;
    background: var(--elevated);
    box-shadow: inset 0 0 0 1px var(--line),0 10px 22px -12px color-mix(in srgb,var(--shadow) 45%,transparent);
    transform-origin: right
}
[dir=rtl] .qty {
    transform-origin: left
}
.qty button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background var(--fast),transform 150ms var(--ease)
}
.qty .icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.8
}
.qty .qty-more {
    background: var(--soft);
    color: var(--red)
}
.qty output {
    min-width: 28px;
    text-align: center;
    font-size: calc(14px * var(--scale));
    font-weight: 500;
    font-variant-numeric: tabular-nums
}
.qty button:active,.buy .add:active,.qty-count:active {
    transform: scale(.9)
}
@media(max-width:640px) {
    .product-media {
        border-radius: 18px
    }
    .product h3 {
        font-size: calc(13.5px * var(--scale))
    }
    .product-body {
        padding-inline: 2px
    }
}

/* ---- The shop's own extras: flash deal, today's pick, tabs, banners --------------------------------------------- */
.deals {
    padding: 28px;
    border-radius: 30px;
    background: var(--second);
    --plate: var(--elevated)
}
.deal-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 20px
}
.deal-title {
    display: flex;
    align-items: center;
    gap: 10px
}
.deal-title>.icon {
    width: 20px;
    height: 20px;
    color: var(--red)
}
.deal-expiry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-inline-start: auto;
    color: var(--muted);
    font-size: calc(12px * var(--scale))
}
.deal-expiry time {
    font-size: calc(13px * var(--scale));
    color: var(--ink)
}
.deal-products>.product {
    width: calc((100% - 3 * var(--gap))/4)
}
.deals .rail-controls {
    display: none
}
.deals:has(.product:nth-child(5)) .rail-controls {
    display: flex
}
.today-feature {
    display: grid;
    grid-template-columns: calc(230px * var(--scale)) 1fr;
    align-items: center;
    gap: 32px;
    max-width: 860px;
    margin-inline: auto;
    padding: 22px 30px;
    border-radius: 30px;
    background: var(--plate)
}
.today-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    padding: 9%;
    border-radius: 50%;
    background: var(--elevated)
}
.today-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: contain;
    transition: transform 500ms var(--ease)
}
/* The discount on the picture's corner, like the cards' badge but larger. */
.today-badge {
    position: absolute;
    inset-block-start: 6%;
    inset-inline-end: 2%;
    display: grid;
    place-items: center;
    min-width: calc(56px * var(--scale));
    min-height: calc(56px * var(--scale));
    padding: 6px;
    border-radius: 999px;
    background: var(--red);
    color: var(--on-red);
    font-size: calc(14px * var(--scale));
    font-weight: 500;
    box-shadow: 0 6px 16px -6px color-mix(in srgb,var(--red) 60%,transparent)
}
.today-copy {
    display: grid;
    justify-items: start;
    gap: 10px
}
.today-label {
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--tint);
    color: var(--on-tint);
    font-size: calc(12px * var(--scale))
}
.today h2 {
    max-width: 24ch;
    font-size: calc(22px * var(--scale));
    line-height: 1.45
}
.today h2 a {
    color: inherit
}
.today .price strong {
    font-size: calc(20px * var(--scale))
}
.today .price-currency {
    font-size: calc(13px * var(--scale))
}
.today-save {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--second);
    color: var(--on-tint);
    font-size: calc(13px * var(--scale))
}
.today-note {
    max-width: 46ch;
    color: var(--muted);
    font-size: calc(13px * var(--scale));
    line-height: 1.7
}
.today-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 4px
}
/* The cards' basket button, grown into a labelled pill; after a tap it opens into «− 1 +» and stays open. */
.today-buy {
    width: auto;
    height: 48px;
    justify-content: flex-start
}
.today-buy .add {
    display: inline-flex;
    gap: 8px;
    width: auto;
    height: 48px;
    padding-inline: 22px;
    border-radius: 999px;
    background: var(--red);
    color: var(--on-red);
    box-shadow: none;
    font-size: calc(15px * var(--scale));
    font-weight: 500
}
.today-buy .add span {
    display: inline
}
.today-buy .add.is-added {
    background: var(--red)
}
.today-buy .qty {
    position: static;
    height: 48px;
    padding: 4px
}
.today-buy .qty button {
    width: 40px;
    height: 40px
}
.today-details {
    color: var(--ink);
    font-size: calc(14px * var(--scale));
    text-decoration: underline;
    text-underline-offset: 4px
}
.tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0 6px;
    margin-bottom: 14px
}
.tabs::-webkit-scrollbar {
    display: none
}
.tabs>button {
    flex: none;
    min-height: 40px;
    padding: 6px 18px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--muted);
    font-size: calc(14px * var(--scale));
    transition: background var(--fast),color var(--fast),box-shadow var(--fast)
}
.tabs>button[aria-selected=true] {
    background: var(--ink);
    color: var(--canvas);
    box-shadow: none
}
.tab-destination {
    display: flex;
    justify-content: center;
    margin-top: 14px
}
.tab-destination .text-link {
    min-height: 44px;
    padding-inline: 22px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink)
}
.promotion-rail .promotion {
    width: calc((100% - var(--gap))/2)
}
.promotions>.rail-controls {
    justify-content: flex-end;
    margin-top: 8px
}
.promotion {
    overflow: hidden;
    border-radius: 26px;
    background: var(--surface)
}
.promotion picture {
    display: block;
    width: 100%
}
.promotion img {
    width: 100%;
    height: auto;
    object-fit: cover;
    padding: 0
}
/* The pistachio band: one sentence and one way to reach the shop, with a scalloped edge like a pastry paper. */
.sm-band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 32px;
    padding: 34px clamp(24px,5vw,64px);
    background: var(--second)
}
.sm-band::before,.sm-band::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 11px;
    background: radial-gradient(circle at 11px 11px,var(--second) 10.5px,transparent 11px) 0 0/22px 11px repeat-x
}
.sm-band::before {
    bottom: 100%
}
.sm-band::after {
    top: 100%;
    transform: scaleY(-1)
}
.sm-band-copy {
    display: grid;
    gap: 4px
}
.sm-band h2 {
    font-size: calc(22px * var(--scale))
}
/* A band with more than one way out (the shop features' band on the home page). */
.sm-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}
.sm-band p {
    color: var(--muted);
    font-size: calc(14.5px * var(--scale))
}
.reliability {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: var(--gap)
}
.reliability>div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--surface);
    font-size: calc(13px * var(--scale))
}
.reliability img {
    width: 40px;
    height: 40px;
    object-fit: contain
}
.brand-rail {
    gap: 14px
}
.brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc((100% - 8 * 14px)/8.5);
    height: 96px;
    border-radius: 20px;
    transition: color var(--fast),transform var(--fast),background var(--fast)
}
.brand img {
    max-width: 88%;
    width: var(--brand-width,92px);
    height: var(--brand-height,45px);
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 200ms var(--ease)
}
.brand span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(11px * var(--scale));
    line-height: 1.4;
    color: var(--muted)
}
.brand .brand-stage {
    position: relative;
    width: 120px;
    max-width: 94%;
    height: 60px;
    overflow: hidden;
    flex: none;
    background: transparent
}
.brand-stage img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--logo-w);
    height: var(--logo-h);
    max-width: none;
    margin-left: var(--logo-x);
    margin-top: var(--logo-y);
    object-fit: contain
}
.brand-stage:not([style]) img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    object-fit: contain
}
:root[data-theme=dark] .brand img {
    mix-blend-mode: normal
}
:root[data-theme=dark] .brand-stage {
    background: #f4f4ef;
    border-radius: 6px
}
@media(max-width:960px) {
    .brand {
        width: calc((100% - 6 * 14px)/6.25)
    }
    .deal-products>.product {
        width: calc((100% - 2 * var(--gap))/3.2)
    }
    .today-feature {
        gap: 24px;
        padding-inline: 24px
    }
    .reliability {
        grid-template-columns: repeat(2,1fr)
    }
}
@media(max-width:640px) {
    .deals {
        padding: 20px 14px;
        border-radius: 24px;
        margin-inline: -4px
    }
    .deal-products>.product {
        width: calc((100% - var(--gap))/2.2)
    }
    .deal-expiry {
        width: 100%;
        margin: 0;
        justify-content: space-between
    }
    .today-feature {
        grid-template-columns: 120px 1fr;
        gap: 16px;
        padding: 16px;
        border-radius: 24px
    }
    .today-badge {
        min-width: 42px;
        min-height: 42px;
        inset-block-start: 0;
        inset-inline-end: 0;
        font-size: calc(12px * var(--scale))
    }
    .today h2 {
        font-size: calc(17px * var(--scale))
    }
    .today .price strong {
        font-size: calc(17px * var(--scale))
    }
    .today-note {
        display: none
    }
    .today-actions {
        grid-column: 1/-1
    }
    .today .solid-action,.today-buy .add {
        min-height: 44px;
        height: 44px;
        padding-inline: 16px;
        font-size: calc(14px * var(--scale))
    }
    .promotion-rail .promotion {
        width: 88%
    }
    .promotion {
        border-radius: 20px
    }
    .sm-band {
        padding: 26px 20px
    }
    .sm-band h2 {
        font-size: calc(19px * var(--scale))
    }
    .brand {
        width: calc((100% - 4 * 8px)/4.25);
        height: 78px
    }
    .brand .brand-stage {
        width: 76px;
        height: 42px
    }
    .brand-stage img {
        width: var(--logo-w-mobile);
        height: var(--logo-h-mobile);
        margin-left: var(--logo-x-mobile);
        margin-top: var(--logo-y-mobile)
    }
}
/* Wide shells show more brands instead of stretching the gaps between the same logos. */
@media(min-width:1800px) {
    .brand {
        width: calc((100% - 9 * 14px)/9.5)
    }
}
@media(min-width:2200px) {
    .brand {
        width: calc((100% - 10 * 14px)/10.5)
    }
}
.story {
    /* 160px on laptops; on wider rails stories fill the row like the other rails. */
    width: max(160px, calc((100% - 7 * var(--gap))/7.5));
    text-align: start
}
.story-cover {
    display: block;
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface)
}
.story img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: var(--surface)
}
.story-fallback {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    background: linear-gradient(145deg,var(--surface),var(--elevated));
    border: 1px solid var(--line);
    border-radius: inherit
}
.story-fallback>.icon { width: 36px; height: 36px; color: var(--red) }
.story-play {
    position: absolute;
    inset-inline-end: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--elevated);
    color: var(--ink);
    box-shadow: 0 2px 10px #0002
}
.story-play .icon { width: 17px; height: 17px }
.story strong {
    display: block;
    font-size: calc(14px * var(--scale));
    margin-top: 9px
}
.vendor {
    width: calc((100% - 3 * var(--gap))/3.25)
}
.vendor-banner {
    width: 100%;
    aspect-ratio: 2;
    object-fit: cover;
    border-radius: var(--radius)
}
.vendor>div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-block: 12px
}
.vendor>div>img {
    object-fit: contain;
    width: 44px;
    height: 44px
}
.vendor h3 {
    font-size: calc(16px * var(--scale))
}
.vendor span,.vendor small {
    font-size: calc(12px * var(--scale));
    color: var(--muted)
}
/* Like the app (owner 2026-09-28): the story is one rounded card at the video's own shape (--story-ratio,
   9:16 until the video says otherwise), so nothing is cropped and there are no bars. */
#story-viewer {
    --story-ratio: .5625;
    width: min(440px,calc((100dvh - 32px) * var(--story-ratio)),calc(100% - 32px));
    height: auto;
    aspect-ratio: var(--story-ratio);
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: #fff;
    isolation: isolate;
    /* The viewer owns every direction: sideways changes story, up opens the product, down closes. */
    touch-action: none
}
#story-viewer::backdrop { background: #08090beb }
body:has(#story-viewer[open]) { overflow: hidden }
.story-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #101012;
    -webkit-touch-callout: none;
    user-select: none
}
.story-card:focus { outline: none }
[data-story-player] { position: absolute; inset: 0 }
#story-viewer video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #101012;
    object-fit: contain
}
/* Press and hold: the picture alone, as in the app. */
.story-viewer-top,.story-viewer-footer,.story-navigation { transition: opacity 140ms }
#story-viewer.is-holding :is(.story-viewer-top,.story-viewer-footer,.story-navigation) { opacity: 0; pointer-events: none }
.story-spinner {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 3;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid #ffffff4d;
    border-top-color: #fff;
    border-radius: 50%;
    animation: story-spin .8s linear infinite;
    pointer-events: none
}
.story-spinner[hidden] { display: none }
@keyframes story-spin { to { transform: rotate(1turn) } }
.story-viewer-top { position:absolute; inset:0 0 auto; padding:14px 12px 38px; background:linear-gradient(#0009,transparent); pointer-events:none; z-index:2 }
.story-progress { display:flex; gap:4px; margin-bottom:8px }
.story-progress>span { flex:1; height:3px; overflow:hidden; border-radius:3px; background:#ffffff50 }
.story-progress i { display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left }
[dir=rtl] .story-progress i { transform-origin:right }
.story-playback-controls { display:flex; flex-shrink:0; gap:0; pointer-events:auto }
.story-playback-controls button { width:44px; height:44px; display:grid; place-items:center; color:#fff; border-radius:50%; background:transparent }
.story-playback-controls .icon { width:20px; height:20px; filter:drop-shadow(0 1px 2px #0008) }
.story-navigation button:disabled { opacity:0; pointer-events:none }
.story-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:4px;
    font-size:calc(12px * var(--scale));
    text-shadow:0 1px 3px #0008
}
.story-caption { min-width:0 }
.story-caption [data-story-position] { opacity:.8; font-size:calc(11px * var(--scale)) }
.story-navigation { position:absolute; inset:48% 6px auto; display:flex; justify-content:space-between; pointer-events:none }
.story-navigation button { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#fff; background:#0003; pointer-events:auto }
.story-navigation .icon { width:18px; height:18px }
#story-viewer h2 {
    font-size:calc(14px * var(--scale));
    font-weight:500;
    line-height:1.45;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.story-viewer-footer { position:absolute; inset:auto 0 0; display:flex; justify-content:center; padding:44px 20px 24px; background:linear-gradient(transparent,#0009); pointer-events:none }
[data-story-cta] { pointer-events:auto; max-width:100%; padding:11px 22px; border-radius:24px; background:#fffffff2; color:#17181b; text-align:center; font-size:calc(14px * var(--scale)); font-weight:600; text-decoration:none }
[data-story-cta][hidden] { display:none }
#story-viewer [data-story-error] { position:absolute; inset:40% 24px auto; padding:16px; border-radius:12px; background:#17181be8; color:#fff; font-size:calc(14px * var(--scale)); text-align:center }
#story-viewer :focus-visible { outline:2px solid #fff; outline-offset:2px }
@media(max-width:560px) {
    /* Phones: black screen, the card right under the status bar, full width. Taps replace the arrows. */
    #story-viewer { width:100%; max-width:none; height:100dvh; max-height:none; aspect-ratio:auto; margin:0; background:#000 }
    .story-card { height:auto; aspect-ratio:var(--story-ratio); max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - 8px); margin-top:max(8px,env(safe-area-inset-top)); border-radius:12px }
    .story-navigation { display:none }
}
@media(prefers-reduced-motion:reduce) {
    .story-spinner { animation:none; border-top-color:#ffffffb3 }
    .story-viewer-top,.story-viewer-footer,.story-navigation { transition:none }
}
@media(max-width:640px) {
    .vendor {
        width: 85%
    }
    .story {
        width: 130px
    }
}

/* ---- Footer: a light ground with a scalloped edge ---------------------------------------------------------------- */
.sm-footer {
    position: relative;
    margin-top: calc(var(--section) + 24px);
    padding-top: 12px;
    background: var(--surface);
    font-size: calc(14px * var(--scale))
}
.sm-footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: 12px;
    background: radial-gradient(circle at 12px 12px,var(--surface) 11.5px,transparent 12px) 0 0/24px 12px repeat-x
}
.sm-footer-top {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(280px,440px);
    align-items: center;
    gap: 32px 64px;
    padding-block: 30px 24px
}
.sm-footer-brand {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 14px 24px
}
.sm-footer-brand>a img {
    width: auto;
    height: calc(96px * var(--scale));
    object-fit: contain
}
.sm-footer-brand p {
    max-width: 52ch;
    color: var(--muted);
    line-height: 1.9
}
.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 2
}
.footer-social-links a {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding-inline: 10px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line);
    background: var(--elevated);
    font-size: calc(13px * var(--scale));
    transition: color var(--fast),transform var(--fast)
}
.footer-social-links .icon {
    width: 19px;
    height: 19px
}
.sm-footer-news h2 {
    font-size: calc(18px * var(--scale))
}
.sm-footer-news p {
    margin-top: 2px;
    color: var(--muted);
    font-size: calc(13px * var(--scale))
}
.sm-footer-news form {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    margin-top: 14px;
    padding: 4px;
    padding-inline-start: 18px;
    border-radius: 999px;
    background: var(--elevated);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow var(--fast)
}
.sm-footer-news form:focus-within {
    box-shadow: inset 0 0 0 1.5px var(--red)
}
.sm-footer-news input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: none;
    background: none;
    font-size: calc(14px * var(--scale))
}
.sm-footer-news input:focus-visible {
    outline: none
}
.sm-footer-news button {
    flex: none;
    height: 44px;
    padding-inline: 20px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--canvas);
    font-size: calc(13px * var(--scale));
    transition: background var(--fast),color var(--fast)
}
.sm-footer-news [role=alert] {
    margin-top: 8px;
    color: var(--red)
}
/* The links in even columns (owner 20/10/2026): the shop, its services (while any runs), its own pages with the ways
   to ask for help, and how to reach it with the ways to pay under it; each column about as long as the next. */
.sm-footer-links {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px 40px;
    padding-block: 28px;
    border-top: 1px solid var(--line)
}
.sm-footer-links--four {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 24px 32px
}
.sm-footer-links>*,.footer-fold>nav {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 9px;
    min-width: 0
}
.footer-fold {
    min-width: 0
}
.footer-fold>nav {
    margin-top: 13px
}
/* On a wide screen a group is a plain column: its title is a heading, not a button. */
.footer-fold>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    cursor: default
}
.footer-fold>summary::-webkit-details-marker {
    display: none
}
.footer-fold>summary .icon {
    display: none;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform var(--fast) var(--ease)
}
.sm-footer-links h3 {
    margin: 0;
    font-size: calc(14px * var(--scale))
}
.footer-contact>h3 {
    margin-bottom: 4px
}
.sm-footer-links a,.footer-address {
    max-width: 100%;
    color: var(--muted);
    overflow-wrap: anywhere;
    transition: color var(--fast)
}
/* Each way to reach the shop opens with its small sign; a number or an address keeps its own direction. */
.footer-contact a,.footer-contact .footer-address {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums
}
.footer-contact .icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--red)
}
/* A number or an e-mail reads left to right; the address, a link too since 17/10/2026, keeps the page's direction. */
.footer-contact a:not(.footer-address) bdi {
    direction: ltr;
    unicode-bidi: isolate
}
.footer-contact a[href^="tel:"] {
    color: var(--ink);
    font-size: calc(16px * var(--scale))
}
.footer-contact .footer-address {
    direction: inherit;
    font-size: calc(13px * var(--scale));
    line-height: 1.8
}
/* The ways to pay close the contact column, a little apart from it. */
.sm-footer-pay {
    display: grid;
    justify-items: start;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line)
}
.payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}
.pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: 64px;
    height: 36px;
    padding: 0 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(25, 25, 25, .08)
}
.pay-badge img {
    display: block;
    width: auto;
    height: 18px;
    object-fit: contain
}
.pay-badge--visa img {
    height: 13px
}
.pay-badge--mastercard img {
    height: 22px
}
.pay-badge--paymera img {
    height: 24px
}
.pay-badge--qi img {
    height: 24px
}
.pay-badge--shamcash img {
    height: 26px
}
.pay-badge--cash {
    background: var(--elevated);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--muted);
    font-size: calc(12px * var(--scale));
    white-space: nowrap
}
.pay-badge--cash .icon {
    width: 18px;
    height: 18px
}
.footer-app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px
}
.footer-app-badges img {
    width: 135px;
    height: 40px;
    object-fit: contain
}
.sm-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-block: 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: calc(12px * var(--scale))
}
.sm-footer-bottom>div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px
}
@media(max-width:960px) {
    .sm-footer-top {
        grid-template-columns: 1fr;
        padding-block: 28px 24px
    }
    .sm-footer-links,.sm-footer-links--four {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}
@media(max-width:640px) {
    .sm-footer-top {
        gap: 20px;
        padding-block: 24px 20px
    }
    .sm-footer-brand {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center
    }
    .sm-footer-brand>a img {
        height: 72px
    }
    .footer-social-links {
        grid-column: auto;
        justify-content: center
    }
    .sm-footer-news {
        text-align: center
    }
    .sm-footer-news form {
        text-align: start
    }
    /* A phone: each group is one line that opens with a tap (semiramis-home.js closes them there), so the footer stays
       short; how to reach the shop and the ways to pay stay open under them. */
    .sm-footer-links,.sm-footer-links--four {
        grid-template-columns: minmax(0,1fr);
        gap: 0;
        padding-block: 6px 22px
    }
    .footer-fold {
        border-bottom: 1px solid var(--line)
    }
    .footer-fold>summary {
        min-height: 52px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent
    }
    .footer-fold>summary .icon {
        display: block
    }
    .footer-fold[open]>summary .icon {
        transform: rotate(180deg)
    }
    .footer-fold>nav {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 4px 16px;
        margin-top: 0;
        padding-bottom: 16px
    }
    .footer-fold>nav a,.footer-fold>nav .sm-footer-install:not([hidden]) {
        display: flex;
        align-items: center;
        min-height: 36px
    }
    .footer-contact {
        padding-top: 20px
    }
    .footer-contact a {
        min-height: 34px
    }
    .sm-footer-bottom {
        justify-content: center;
        text-align: center
    }
}

/* ---- The installed app only (owner, 20/10/2026) ---------------------------------------------------------------- */
/* Neither shows on the website: the head's script marks the page «is-app» only inside the installed app. */
.sm-splash,.sm-appbar {
    display: none
}
/* The opening: the logo on the site's cream where the phone's own opening picture showed it, alive for a moment, then
   flying into the header (semiramis-install.js). It always leaves: without its script it fades by itself. */
html.is-app-opening .sm-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: block;
    background: #faf9f5;
    touch-action: none;
    animation: sm-splash-leave .45s ease 3.4s forwards
}
@keyframes sm-splash-leave {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none
    }
}
.sm-splash-logo {
    position: absolute;
    left: 50%;
    top: var(--sm-splash-y, 46%);
    width: var(--sm-splash-w, 46vw);
    transform: translate(-50%, -50%);
    display: grid
}
.sm-splash-logo img {
    display: block;
    width: 100%;
    height: auto
}
.sm-splash-rose {
    position: relative;
    transform-origin: 50% 80%
}
.sm-splash-words {
    position: relative;
    display: block
}
/* A light running over the words, kept to their letters. */
.sm-splash-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, .95) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
    -webkit-mask: url(../img/semiramis/app/splash-words.webp) center / 100% 100% no-repeat;
    mask: url(../img/semiramis/app/splash-words.webp) center / 100% 100% no-repeat;
    opacity: 0
}
/* A soft crimson glow behind the rose as it opens. */
.sm-splash-glow {
    position: absolute;
    left: 50%;
    top: 21%;
    width: 64%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(163, 21, 58, .2), rgba(163, 21, 58, .06) 62%, transparent);
    transform: translate(-50%, -50%) scale(.6);
    opacity: 0;
    pointer-events: none
}
/* A thin line drawn under the logo while it comes alive. */
.sm-splash-line {
    justify-self: center;
    width: 0;
    height: 2px;
    margin-top: 9%;
    border-radius: 2px;
    background: #a3153a;
    opacity: 0
}
/* The bar at the foot of the screen, inside the app on a touch screen: call, WhatsApp, home in the middle raised a
   little, the address and all the sweets. Everything that sits at the foot of a page rises above it. */
@media (hover: none) and (pointer: coarse) {
    html.is-app {
        --app-bar-space: calc(84px + env(safe-area-inset-bottom, 0px))
    }
    html.is-app body {
        padding-bottom: var(--app-bar-space)
    }
    html.is-app .sm-appbar:not([data-app-bar-aside]) {
        position: fixed;
        inset-inline: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 28;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        max-width: 540px;
        height: 64px;
        margin-inline: auto;
        padding-inline: 4px;
        border-radius: 22px;
        background: var(--elevated);
        box-shadow: inset 0 0 0 1px var(--line), 0 16px 34px -16px color-mix(in srgb, var(--shadow) 55%, transparent)
    }
    html.is-app .back-top,html.is-app .toast {
        bottom: calc(var(--app-bar-space) + 12px)
    }
    /* The product's own bar rises clear of the home button that stands above the app's bar; the way back to the top
       steps aside while it shows, as it is under it anyway. */
    html.is-app .ts-pdv2-sticky.is-visible {
        bottom: calc(var(--app-bar-space) + 26px)
    }
    html.is-app body:has(.ts-pdv2-sticky.is-visible) .back-top {
        visibility: hidden
    }
    /* The basket bar stands clear above the app's bar and its raised home button. */
    html.is-app .sm-cartbar {
        bottom: calc(var(--app-bar-space) + 30px)
    }
    html.is-app body:has(.sm-cartbar:not([hidden])) {
        --cart-bar-space: calc(var(--app-bar-space) + 106px)
    }
}
.sm-appbar-item {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    color: var(--muted);
    font-size: calc(11.5px * var(--scale));
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent
}
.sm-appbar-icon {
    display: grid;
    place-items: center;
    transition: transform var(--fast) var(--ease)
}
.sm-appbar-icon .icon {
    width: 23px;
    height: 23px
}
.sm-appbar-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.sm-appbar-item[aria-current=page] {
    color: var(--red)
}
.sm-appbar-item:active .sm-appbar-icon {
    transform: scale(.9)
}
/* Home, in the middle: a crimson circle standing a little above the bar. */
.sm-appbar-home {
    align-content: end;
    padding-bottom: 9px;
    color: var(--ink)
}
.sm-appbar-home .sm-appbar-icon {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 56px;
    height: 56px;
    margin-left: -28px;
    border-radius: 50%;
    background: var(--red);
    color: var(--on-red);
    box-shadow: 0 0 0 5px var(--elevated), 0 12px 22px -10px color-mix(in srgb, var(--red) 70%, transparent)
}
.sm-appbar-home .sm-appbar-icon .icon {
    width: 25px;
    height: 25px
}
.sm-appbar-home[aria-current=page] {
    color: var(--red)
}
/* The next page on its way, inside the app (owner, 20/10/2026: «مابحس انو في شي عم يتحمل»), as semiramis-install.js
   marks it at the tap: a thin crimson line runs across the top, the page under the header steps back a little, and
   the bar's button that was tapped lights and breathes. The line never quite ends: the next page takes its place. */
.sm-app-line {
    display: none
}
html.is-app .sm-app-line {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    inset-inline: 0;
    z-index: 2147482000;
    display: block;
    height: 3px;
    background: var(--red);
    box-shadow: 0 0 10px color-mix(in srgb, var(--red) 45%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease
}
html.is-app[dir=rtl] .sm-app-line {
    transform-origin: right
}
html.is-app-going .sm-app-line {
    opacity: 1;
    animation: sm-app-line 9s cubic-bezier(.1, .75, .25, 1) forwards
}
@keyframes sm-app-line {
    0% {
        transform: scaleX(0)
    }
    8% {
        transform: scaleX(.35)
    }
    to {
        transform: scaleX(.92)
    }
}
html.is-app main,html.is-app .sm-footer {
    transition: opacity .25s ease
}
html.is-app-going main,html.is-app-going .sm-footer {
    opacity: .55
}
.sm-appbar-item.is-going {
    color: var(--red)
}
.sm-appbar:has(.is-going) .sm-appbar-item[aria-current=page]:not(.is-going) {
    color: var(--muted)
}
.sm-appbar:has(.is-going) .sm-appbar-home[aria-current=page]:not(.is-going) {
    color: var(--ink)
}
.sm-appbar-item.is-going .sm-appbar-icon {
    animation: sm-appbar-going .8s ease-in-out infinite alternate
}
@keyframes sm-appbar-going {
    to {
        transform: scale(.86)
    }
}
/* While one page melts into the next the app's bar stays where it is, like the header, and the new page rises a
   little into place. */
html.is-app .sm-appbar {
    view-transition-name: sm-appbar
}
@media(prefers-reduced-motion:no-preference) {
    html.is-app::view-transition-new(root) {
        animation: 300ms cubic-bezier(.22,1,.36,1) both sm-page-in
    }
}
@keyframes sm-page-in {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}
@media(prefers-reduced-motion:reduce) {
    .sm-appbar-icon {
        transition: none
    }
    html.is-app-going .sm-app-line {
        transform: none
    }
}

/* ---- The basket bar (owner, 20/10/2026) ------------------------------------------------------------------------ */
/* «لما بضيف ع السلة مابنتبه الشخص انو ضاف»: from the first thing put in the basket, a crimson bar at the foot of the
   screen with the number of boxes, the total and the way into the basket; on a wide screen it stands in the middle.
   It rises with the first add, the product's picture flies into it (semiramis-home.js), and what else sits at the
   foot of a page rises above it. */
.sm-cartbar {
    position: fixed;
    inset-inline: max(12px, calc((100% - 460px) / 2));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 27;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding-inline: 9px;
    border-radius: 22px;
    background: var(--red);
    color: var(--on-red);
    text-decoration: none;
    box-shadow: 0 24px 40px -22px color-mix(in srgb, var(--red) 85%, transparent);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--fast) var(--ease)
}
.sm-cartbar[hidden] {
    display: none
}
.sm-cartbar:active {
    transform: scale(.985)
}
.sm-cartbar.is-rising {
    animation: sm-cartbar-rise .6s cubic-bezier(.18, 1.3, .35, 1) backwards
}
@keyframes sm-cartbar-rise {
    from {
        transform: translateY(170%);
        opacity: 0
    }
    40% {
        opacity: 1
    }
}
.sm-cartbar-bag {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--on-red) 15%, transparent)
}
.sm-cartbar-bag .icon {
    width: 23px;
    height: 23px;
    stroke-width: 1.6
}
.sm-cartbar-bag b {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border-radius: 11px;
    background: var(--on-red);
    color: var(--red);
    font: 500 calc(12px * var(--scale))/22px var(--font);
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--red)
}
.sm-cartbar-text {
    display: grid;
    gap: 3px;
    min-width: 0
}
.sm-cartbar-total {
    justify-self: start;
    font-size: calc(16px * var(--scale));
    font-weight: 500;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}
.sm-cartbar-total small {
    margin-inline-start: 3px;
    font-size: .72em;
    opacity: .85
}
.sm-cartbar-words {
    overflow: hidden;
    font-size: calc(12.5px * var(--scale));
    line-height: 1.2;
    opacity: .86;
    white-space: nowrap;
    text-overflow: ellipsis
}
.sm-cartbar-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding-inline: 15px;
    border-radius: 15px;
    background: var(--on-red);
    color: var(--red);
    font-size: calc(14px * var(--scale));
    font-weight: 500;
    white-space: nowrap
}
.sm-cartbar-go .icon {
    width: 17px;
    height: 17px;
    stroke-width: 1.8
}
/* The added product's picture on its way into the bar, and the «+1» that greets it there. */
.sm-cartbar-fly {
    position: fixed;
    z-index: 31;
    margin: 0;
    border-radius: 20px;
    background: var(--plate);
    object-fit: contain;
    pointer-events: none;
    box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--shadow) 50%, transparent)
}
.sm-cartbar-one {
    position: fixed;
    z-index: 31;
    padding: 4px 7px;
    border-radius: 10px;
    background: var(--elevated);
    color: var(--red);
    font: 500 calc(14px * var(--scale))/1 var(--font);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--shadow) 45%, transparent);
    pointer-events: none
}
body:has(.sm-cartbar:not([hidden])) {
    --cart-bar-space: calc(88px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--cart-bar-space)
}
body:has(.sm-cartbar:not([hidden])) .back-top,body:has(.sm-cartbar:not([hidden])) .toast {
    bottom: calc(var(--cart-bar-space) + 12px)
}
body:has(.sm-cartbar:not([hidden])) .sm-install {
    bottom: calc(var(--cart-bar-space) + 4px)
}
/* The product page's own small bar (its price and the way back to the buy panel) has the foot while it shows. */
body:has(.ts-pdv2-sticky.is-visible) .sm-cartbar {
    display: none
}

/* ---- Small things every page shares ---------------------------------------------------------------------------- */
.server-feedback {
    padding: 12px var(--gutter);
    background: var(--soft);
    color: var(--ink);
    font-size: calc(14px * var(--scale))
}
.back-top {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 20px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--elevated);
    box-shadow: inset 0 0 0 1px var(--line),0 10px 22px -14px color-mix(in srgb,var(--shadow) 50%,transparent);
    transition: color var(--fast),transform var(--fast)
}
.back-top .icon,[dir=ltr] .back-top .icon {
    transform: rotate(90deg);
    width: 17px;
    height: 17px
}
.toast {
    position: fixed;
    z-index: 60;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--canvas);
    font-size: calc(13.5px * var(--scale));
    text-align: center;
    /* It is shown as a popover where the browser can, to sit above an open sheet: undo the popover's own box. */
    top: auto;
    right: auto;
    margin: 0;
    border: 0;
    overflow: visible;
    animation: sm-toast 320ms var(--ease)
}
.toast.is-error {
    box-shadow: inset 0 0 0 1.5px var(--red)
}
/* «تثبيت الموقع على الموبايل» (20/10/2026): the invitation to install, a quiet card at the foot of the screen with the
   rose, two lines and the way to install that this browser has. It never covers the header or an open sheet. */
.sm-install {
    position: fixed;
    z-index: 20;
    inset-inline: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: 460px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 12px 14px;
    padding: 16px 16px 14px;
    border-radius: 22px;
    background: var(--elevated);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--line),0 22px 48px -18px color-mix(in srgb,var(--shadow,#20241e) 45%,transparent);
    animation: sm-install-in 360ms var(--ease) both
}
.sm-install[hidden] {
    display: none
}
.sm-install.is-leaving {
    animation: sm-install-out 220ms var(--ease) both
}
.sm-install-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--line)
}
.sm-install-copy h2 {
    margin: 2px 0 2px;
    font-size: calc(15.5px * var(--scale));
    font-weight: 500;
    line-height: 1.5
}
.sm-install-copy p {
    margin: 0;
    color: var(--muted);
    font-size: calc(13.5px * var(--scale));
    line-height: 1.8
}
.sm-install-share {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin-inline: 4px;
    vertical-align: -.25em;
    fill: none;
    stroke: var(--red);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}
.sm-install-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px
}
.sm-install-actions button {
    min-height: 40px;
    padding: 8px 20px
}
.sm-footer-install {
    padding: 0;
    color: var(--muted);
    font-size: inherit;
    text-align: start;
    transition: color var(--fast)
}
.sm-footer-install[hidden] {
    display: none
}
@keyframes sm-install-in {
    from {
        opacity: 0;
        transform: translateY(18px)
    }
}
@keyframes sm-install-out {
    to {
        opacity: 0;
        transform: translateY(18px)
    }
}
@media(prefers-reduced-motion:reduce) {
    .sm-install,.sm-install.is-leaving {
        animation: none
    }
}
@media(hover:hover) and (pointer:fine) {
    .sm-footer-install:hover {
        color: var(--red)
    }
}
@media(max-width:640px) {
    .back-top {
        width: 38px;
        height: 38px;
        bottom: 16px;
        inset-inline-end: 12px
    }
    .toast {
        bottom: 16px;
        border-radius: 18px
    }
}

/* ---- Motion: light, quick, and only where a real mouse or a calm reader asks for it ------------------------------ */
@keyframes sm-fade {
    from {
        opacity: 0
    }
}
@keyframes sm-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.97)
    }
}
@keyframes sm-toast {
    from {
        opacity: 0;
        transform: translate(-50%,10px)
    }
}
@keyframes sm-turn {
    from {
        opacity: 0;
        transform: rotate(-70deg) scale(.6)
    }
}
@keyframes sm-bump {
    40% {
        transform: scale(1.35)
    }
}
@keyframes sm-enter {
    from {
        opacity: .15;
        transform: translateY(28px)
    }
}
/* Rows rise gently into view as the page is scrolled, where the browser can tie it to the scroll itself
   (no script, nothing to wait for). Elsewhere the rows are simply there. */
@supports (animation-timeline: view()) {
    @media(prefers-reduced-motion:no-preference) {
        main>.section,main>.hero {
            animation: sm-enter linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 42%
        }
    }
}
/* Main titles come in word by word (owner, 15/10/2026, after the launch videos): each word rises a little and fades
   in after the one before it, and a page title's line follows its last word. A title on the screen when the page
   opens plays at once, with no script; a section title further down waits, hidden, until it is seen
   (semiramis-home.js adds .sm-words-wait while it is below the screen). Words are split on spaces only
   (App\Support\RevealWords), so Arabic letters stay joined. With reduced motion everything simply stands. */
.sm-word {
    display: inline-block
}
@media(prefers-reduced-motion:no-preference) {
    .sm-word,.sm-rise {
        animation: sm-word 700ms var(--ease) both;
        animation-delay: calc(min(var(--i,0), 10) * 90ms + 60ms)
    }
    .sm-rise {
        animation-delay: calc(min(var(--i,0), 10) * 90ms + 160ms)
    }
    .sm-words-wait .sm-word {
        animation: none;
        opacity: 0
    }
}
@keyframes sm-word {
    from {
        opacity: 0;
        transform: translateY(.45em)
    }
}
/* One page melts into the next where the browser supports it. */
@view-transition {
    navigation: auto
}
::view-transition-old(root),::view-transition-new(root) {
    animation-duration: 220ms
}
.sm-header {
    view-transition-name: sm-header
}
@media(hover:hover) and (pointer:fine) {
    .sm-menu-button:hover,.sm-icon:hover {
        background: var(--surface);
        color: var(--red)
    }
    .sm-search-open:hover {
        background: var(--plate);
        color: var(--ink)
    }
    .sm-nav a:hover {
        color: var(--ink)
    }
    .sm-nav a:hover::after {
        transform: scaleX(1)
    }
    .logo:hover img {
        transform: scale(1.04)
    }
    .account-panel>a:hover,.account-panel button:hover,.sm-shelf>summary:hover,a.sm-shelf:hover,.search-results a:hover {
        background: var(--surface)
    }
    .sm-seg button:hover,.text-link:hover,.sm-drawer-links a:hover,.sm-drawer-account a:hover,.sm-shelf-inner a:hover,.sm-footer-links a:hover,.sm-footer-bottom a:hover,.footer-social-links a:hover,.mini-item button:hover,.mini-item>div>a:hover,.search button:hover,.back-top:hover,.save:hover {
        color: var(--red)
    }
    .text-link:hover .icon,.category-tile:hover .category-go .icon,.solid-action:hover .icon,.outline-action:hover .icon {
        transform: translateX(-4px)
    }
    [dir=ltr] :is(.text-link:hover .icon,.category-tile:hover .category-go .icon,.solid-action:hover .icon,.outline-action:hover .icon) {
        transform: rotate(180deg) translateX(-4px)
    }
    .sm-chip:hover {
        background: var(--soft);
        color: var(--red)
    }
    .solid-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 24px -14px var(--red)
    }
    .outline-action:hover {
        background: var(--red);
        color: var(--on-red)
    }
    .quiet-action:hover {
        box-shadow: inset 0 0 0 1px var(--ink)
    }
    .sm-footer-news button:hover {
        background: var(--red);
        color: var(--on-red)
    }
    .rail-controls button:not(:disabled):hover,.tabs>button:not([aria-selected=true]):hover {
        background: var(--surface);
        color: var(--red)
    }
    .slide-controls .slide-navigation button:hover {
        background: var(--canvas);
        color: var(--red)
    }
    .tab-destination .text-link:hover {
        box-shadow: inset 0 0 0 1px var(--red)
    }
    .product:hover .product-media {
        background: color-mix(in srgb,var(--plate) 82%,var(--tint))
    }
    .product:hover .product-media img {
        transform: scale(1.06) rotate(-2deg)
    }
    .product:hover h3 {
        color: var(--red)
    }
    .buy .add:not(:disabled):hover {
        background: var(--red);
        color: var(--on-red);
        box-shadow: none
    }
    .buy .add:not(:disabled):hover .icon {
        transform: rotate(90deg)
    }
    .qty button:hover {
        background: var(--surface)
    }
    .qty .qty-more:hover {
        background: var(--red);
        color: var(--on-red)
    }
    .qty-count:hover {
        transform: scale(1.08)
    }
    .today-media:hover img {
        transform: scale(1.05) rotate(-2deg)
    }
    .category:hover img,.category-tile:hover .category-media img {
        transform: translateY(-8px) scale(1.04) rotate(-3deg)
    }
    .category-tile:hover .category-go {
        background: var(--red);
        color: var(--on-red)
    }
    .category-rail .category:hover h3 {
        color: var(--red)
    }
    .sm-toggle:hover {
        background: var(--surface);
        color: var(--red)
    }
    .sm-toggle:hover .icon {
        transform: rotate(180deg)
    }
    .brand:hover {
        color: var(--red);
        transform: translateY(-2px)
    }
    .brand:hover img {
        transform: scale(1.035)
    }
}
button:active,.solid-action:active,.outline-action:active,.quiet-action:active {
    transform: scale(.97)
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior: auto!important;
        animation: none!important;
        transition: none!important
    }
    .announcement {
        height: auto;
        min-height: 32px
    }
    .announcement-message {
        position: static;
        white-space: normal;
        width: auto;
        font-size: calc(11px * var(--scale));
        line-height: 1.6;
        padding-block: 5px;
        transform: none
    }
    .announcement button {
        display: none
    }
    .product:hover img,.category:hover img,.today-media:hover img {
        transform: none
    }
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) {
        animation: none!important
    }
}

/* Semiramis blog (2026-10-13): the article card, shared by the home page, the article list and the end of an
   article. A soft white card: the cover inside a rounded frame, a small crimson tag, the title in two calm lines,
   one line of the opening words and a quiet «read» link. The first card of the list can lie wide. */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap)
}
.article-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px 10px 18px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--elevated)
}
.article-card-media {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 18px;
    background: var(--plate)
}
.article-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease)
}
.article-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 14px 8px 0
}
.article-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    color: var(--muted);
    font-size: calc(12px * var(--scale))
}
.article-card-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 11px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--red);
    font-size: calc(12px * var(--scale))
}
.article-card-title {
    margin: 0;
    font-size: calc(17px * var(--scale));
    font-weight: 500;
    line-height: 1.7;
    overflow-wrap: anywhere
}
.article-card-text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: calc(14px * var(--scale));
    line-height: 1.9;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}
.article-card-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--red);
    font-size: calc(13px * var(--scale))
}
.article-card-more .icon {
    width: 15px;
    height: 15px
}
.article-card.is-featured {
    grid-column: 1/-1;
    flex-direction: row;
    padding: 12px
}
.article-card.is-featured .article-card-media {
    flex: 0 0 56%;
    aspect-ratio: 16/9;
    border-radius: 20px
}
.article-card.is-featured .article-card-body {
    justify-content: center;
    gap: 12px;
    padding: 18px 26px
}
.article-card.is-featured .article-card-title {
    font-size: calc(24px * var(--scale));
    line-height: 1.6
}
.article-card.is-featured .article-card-text {
    font-size: calc(15px * var(--scale));
    -webkit-line-clamp: 3
}
.article-card.is-featured .article-card-more {
    margin-top: 4px
}
@media (hover: hover) {
    .article-card:hover .article-card-media img {
        transform: scale(1.04)
    }
    .article-card-title a:hover {
        color: var(--red)
    }
}
.article-card-title a:active {
    color: var(--red)
}
/* The home page's four newest articles stand side by side (owner 20/10/2026); a narrower screen takes them two by two. */
.blog-shelf .article-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}
@media (max-width: 1000px) {
    .article-grid,.blog-shelf .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .article-card.is-featured .article-card-title {
        font-size: calc(20px * var(--scale))
    }
}
@media (max-width: 700px) {
    .article-grid,.blog-shelf .article-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px
    }
    .article-card.is-featured {
        flex-direction: column;
        padding: 10px 10px 18px
    }
    .article-card.is-featured .article-card-media {
        flex: none;
        aspect-ratio: 16/10
    }
    .article-card.is-featured .article-card-body {
        padding: 14px 8px 0
    }
    .article-card.is-featured .article-card-title {
        font-size: calc(18px * var(--scale))
    }
    /* On the home page a phone gets three short rows, picture beside words, so the section stays brief. */
    .blog-shelf .article-card {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 8px
    }
    .blog-shelf .article-card-media {
        flex: 0 0 34%;
        aspect-ratio: 1;
        border-radius: 16px
    }
    .blog-shelf .article-card-body {
        padding: 4px 10px
    }
    .blog-shelf .article-card-title {
        font-size: calc(15px * var(--scale))
    }
    .blog-shelf .article-card-text,.blog-shelf .article-card-more {
        display: none
    }
}