/*
    Falak Theme 2026 — default theme stylesheet.

    RTL-first: every directional rule uses logical properties, so Arabic and
    English render natively from the same CSS. The platform injects the brand
    tokens (--color-primary, --color-primary-dark, --color-primary-light,
    --color-text, --font-main) in master.twig; everything below derives from
    them so a merchant's color choice restyles the whole theme.
*/

/* ---------------------------------------------------------------- tokens */

:root {
    /* fallbacks — overridden by the platform-injected block in master.twig */

    --color-primary: #eb3b67;
    --color-primary-dark: #176082;
    --color-primary-light: #382fb9;
    --color-text: #1f2430;
    --font-main: 'Cairo', sans-serif;
    /* derived neutrals */
    --color-bg: #f0f0f0;
    --color-surface: #f7f8fa;
    --color-border: #e8eaef;
    --color-text-soft: #6b7280;
    --color-text-faint: #9aa1ad;    
    --color-danger: #c0392b;
    --color-on-primary: #ffffff;

    /*
     * Ink for a surface that is a FIXED white whatever the colour scheme — the
     * round controls the video viewer floats over a clip. Those discs stay
     * white on purpose (white-on-photograph is legible over any frame), so
     * their ink must NOT follow --color-text: under the dark blocks further
     * down that flips pale and paints a near-white glyph on a white disc.
     * Deliberately not redefined there.
     */
    --color-on-white: #1f2430;

    /* One step up from body copy — the product name in the video viewer's
       foot. Named so that block can be the same in every theme that carries
       it. */
    --fs-lead: 1.125rem;

    /* rhythm */
    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
    --container: 1200px;
    --header-h: 4.75rem;

    --transition: 160ms ease;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-main);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.65;
    font-size: 1rem;
    /* Nothing may widen the page: stray overflow clips instead of adding a
       horizontal scrollbar on small screens. `clip` (unlike `hidden`) creates
       no scroll container, so the sticky header keeps working. */
    overflow-x: clip;
}

img { max-width: 100%; height: auto; }

/*
    The page-level guard. `overflow-x: clip` on <body> above does not reach the
    viewport on its own: with <html> left at `visible` the body value propagates
    up, but anything laid out wider than the screen still lets the viewport
    scroll sideways (RTL pages are scrolled there on load). Clipping the layout
    wrapper itself is what stops it; the fixed-position drawers and modals are
    not its descendants in the painting sense, so they are unaffected.
*/
.app-inner { overflow-x: clip; }

/* Content imagery shows a quiet surface, not a white flash, while loading.
   (Product cards already get this from their media box.) */
.hero-slider__img,
.hero-slider__video,
.photo-tile img,
.article-card > img {
    background: var(--color-surface);
}

h1, h2, h3, h4 {
    line-height: 1.3;
    margin-block: 0 0.75em;
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }
h3 { font-size: 1.125rem; }

a { color: var(--color-primary); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg));
}

/* The customizer's section-level "Content width" publishes --falak-container on
   the section root; every .container inside one inherits it. Without this line
   the control is in the panel and changes nothing, which is worse than not
   offering it. The fallback is the theme's own width, so an unstyled section is
   exactly as it was. */
.container {
    max-width: var(--falak-container, var(--container));
    margin-inline: auto;
    padding-inline: 1rem;
}

.skip-link {
    position: absolute;
    inset-inline-start: 0;
    top: -100%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: 0.5rem 1rem;
    z-index: 100;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn--outline:hover {
    background: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--block { width: 100%; }

/* Press feedback: a 1px settle while the button is held. */
.btn:active:not([disabled]) { transform: translateY(1px); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn.is-added { background: var(--color-primary-dark); }

/* ==== SDK COMPONENT CLASSES — generated, do not edit (see sync-theme-css.mjs) ==== */
/*
    Every class the SDK components render, copied from the SDK source so it is
    searchable here. The SDK ships the same rules inside @layer falak; this
    unlayered copy takes precedence but is identical, so nothing changes until
    you override a rule in the "platform components" section that follows.
    Because this copy is unlayered, an override must match the copied rule's
    specificity (e.g. two classes beat one) — unlike the SDK's layered sheet.
    Regenerate after an SDK update:
      node packages/falak-components/scripts/sync-theme-css.mjs <this file>
*/

/* ---- from packages/falak-components/src/components.css ---- */

/*
    FalakCart storefront components — default stylesheet.

    Linked at head:start for every storefront render — before the theme's own
    stylesheet and inside `@layer falak` (see styles.css) — so components are
    styled in any theme without the theme author doing anything, and any rule
    the theme writes wins over these.

    Everything here derives from the brand tokens master.twig already emits
    (--color-primary, --color-text, --font-main, ...), with fallbacks for each,
    so a merchant's colour choice restyles the components exactly as it
    restyles the theme's own markup. Themes override any rule by writing a
    plain selector in their own app.css — these are light-DOM elements with no
    shadow root, so nothing needs piercing and nothing needs !important.

    Tailwind-based themes need nothing extra: every value here derives from
    CSS custom properties, so a merchant palette reaches these components the
    same way it reaches the theme own markup.

    RTL-first, like the reference theme: logical properties throughout.
*/

/* ------------------------------------------------------------------ tokens */

:root {
    --f-radius: var(--radius-sm, 0.5rem);
    --f-border: var(--color-border, #e8eaef);
    --f-surface: var(--color-surface, #ffffff);
    --f-text: var(--color-text, #1f2430);
    --f-text-soft: var(--color-text-soft, #6b7280);
    --f-text-faint: var(--color-text-faint, #9aa1ad);
    --f-danger: var(--color-danger, #c0392b);
    --f-star: #facc15;
    --f-star-empty: #e2e5ea;
}

/*
    Components stay invisible until the SDK upgrades them (base.js sets
    data-falak on connect), so a slow bundle shows nothing rather than a flash
    of raw content and unstyled attributes.

    The list is deliberate rather than every falak-* element. It names only the
    components whose pre-upgrade DOM is *wrong*:

      - the first four render their own markup, so before upgrade they are
        either empty or showing unformatted attributes;
      - an accordion body holds author content that has no collapsed state yet,
        so it would appear expanded and then snap shut;
      - a modal holds author content with no dialog around it yet, so it would
        render inline at the foot of the page.

    Anything not listed is correct before upgrade and must stay visible —
    <falak-menu> in particular wraps server-rendered navigation, and hiding it
    would undo the very reason that markup is server-rendered.
*/
falak-quantity-input:not([data-falak]),
falak-rating-stars:not([data-falak]),
falak-product-card:not([data-falak]),
falak-products-list:not([data-falak]),
falak-accordion-body:not([data-falak]),
falak-modal:not([data-falak]) {
    visibility: hidden;
}

/* A modal must not occupy layout before it becomes a dialog. */
falak-modal:not([data-falak]) { display: none; }

falak-accordion,
falak-accordion-head,
falak-accordion-body,
falak-product-card,
falak-products-list {
    display: block;
}

/* --------------------------------------------------------- quantity input */

.f-qty {
    display: inline-flex;
    align-items: center;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    overflow: hidden;
}

.f-qty__step {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--f-text-soft);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.f-qty__step:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
.f-qty__step:disabled { opacity: 0.35; cursor: default; }

.f-qty__input {
    inline-size: 3rem;
    block-size: 2.25rem;
    padding: 0;
    text-align: center;
    font: inherit;
    font-size: 0.85rem;
    color: var(--f-text);
    background: transparent;
    border: 0;
    border-inline: 1px solid var(--f-border);
}

.f-qty__input:focus { outline: none; }

/* --------------------------------------------------------------- accordion */

.f-accordion {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    background: var(--f-surface);
    border-radius: var(--f-radius);
}

.f-accordion--bordered { border: 1px solid var(--f-border); }

.f-accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--f-text);
    cursor: pointer;
    user-select: none;
}

.f-accordion--sm .f-accordion__head { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
.f-accordion--lg .f-accordion__head { padding: 1.25rem 1.5rem; font-size: 1.05rem; }

.f-accordion__head[role='button']:focus-visible {
    outline: 2px solid var(--color-primary, #1d9e75);
    outline-offset: -2px;
    border-radius: var(--f-radius);
}

.f-accordion__icon {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--f-text-soft);
    font-size: 1rem;
    line-height: 1;
}

.f-accordion__body {
    padding: 0 1rem 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--f-text-soft);
}

/* The one rule that makes the accordion an accordion. */
.f-accordion__body[data-collapsed='true'] { display: none; }

/* ------------------------------------------------------------------- stars */

.f-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.f-stars__set {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;
}

/*
    Two stacked glyphs with the top one clipped to a width percentage, so a 4.2
    rating renders a genuinely 20%-filled fifth star instead of being rounded
    to the nearest half-star image.
*/
.f-stars__star {
    position: relative;
    display: inline-block;
    inline-size: 1rem;
    block-size: 1rem;
    line-height: 1;
    cursor: default;
}

.f-stars__star::before {
    content: '\2605';
    position: absolute;
    inset: 0;
    color: var(--f-star-empty);
}

.f-stars__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--f-star-fill, 0%);
    overflow: hidden;
    color: var(--f-star);
    font-style: normal;
    line-height: 1;
}

.f-stars__fill::before { content: '\2605'; }

.f-stars[role='radiogroup'] .f-stars__star { cursor: pointer; }
.f-stars[role='radiogroup'] .f-stars__star:focus-visible {
    outline: 2px solid var(--color-primary, #1d9e75);
    outline-offset: 2px;
}

.f-stars__value { font-size: 0.85rem; font-weight: 700; color: var(--f-text); }
.f-stars__count { font-size: 0.75rem; color: var(--f-text-faint); }

falak-rating-stars[data-busy] { opacity: 0.5; }

/* -------------------------------------------------------------- product card */

.f-card { block-size: 100%; }

.f-card__inner {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.f-card__inner:hover {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.f-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.f-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.f-card__placeholder { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.05); }

/*
 * Video commerce. Every rule here is keyed on .f-card__video, an element that
 * only exists when a card was explicitly asked for a clip (its own `video`
 * attribute, or a [data-video-commerce] ancestor) AND the product has one. A
 * card that is not showing video matches none of this, so adding it changes
 * nothing about how any existing card in any theme renders.
 */
/* The still sits UNDER the clip and fills the same box, so the swap from one to
   the other is invisible. Absolute, because the clip must be able to lie over
   it rather than push it out of the way. */
.f-card__still {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.f-card__video {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    /* Transparent on purpose: a background here would paint over the still
       while the clip is still arriving, which is the whole point of having
       one. */
    background: transparent;
}

.f-card__video-badge {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgb(0 0 0 / 55%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    pointer-events: none;
}

.f-card__badge {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
    font-size: 0.7rem;
    font-weight: 700;
}

/* The percentage inside the sale badge, and the two marks the legacy card
   also carries: "hot" under the sale badge from 30% off, and the
   merchant's free-shipping promise in the bottom corner. Each has its own
   corner or offset so a product carrying all of them stacks nothing. */
.f-card__badge-pct { font-size: 0.85rem; font-weight: 800; margin-inline-end: 0.15rem; }
/* Sale and hot stack in one column at the start corner, so a theme that
   draws the sale badge larger (Onyx's hexagon) pushes hot down with it
   instead of under it. The badge stays a positioned box for Onyx's
   ::after, which fills it to centre the percentage. */
.f-card__marks { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.f-card__marks .f-card__badge { position: relative; inset: auto; }
.f-card__hot {
    position: relative;
    inset: auto;    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.5;
}
.f-card__ship {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--f-success, #059669);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.5;
}

/*
 * The special-offer ribbon. Opposite corner to .f-card__badge, because a
 * discounted product that is ALSO in an offer carries both and they must not
 * stack on top of each other.
 *
 * It names the offer; it never carries its value. See loadOffer() in
 * product-card.js for why.
 */
.f-card__offer {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    max-inline-size: 65%;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--f-danger, #c0392b);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem;
    flex-grow: 1;
}

.f-card__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.f-card__link {
    color: var(--f-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.f-card__link:hover { color: var(--color-primary, #1d9e75); }

.f-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: auto 0 0;
    padding-block-start: 0.25rem;
}

.f-card__price-now { font-size: 1rem; font-weight: 700; color: var(--f-text); }
.f-card__price-was { font-size: 0.75rem; color: var(--f-text-faint); }
.f-card__stock { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--f-danger); }

.f-card__actions { display: flex; align-items: stretch; gap: 0.5rem; padding: 0 0.75rem 0.75rem; }
.f-card__actions:empty { display: none; }

/*
    The card's buy button. An outline that fills on hover, so a grid of
    cards reads as products first and buttons second; the theme restyles it
    through .f-card__add. The host is display:contents (see .f-add-product),
    so the button itself is the flex item and takes the remaining width.
*/
.f-card__add {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-block-size: 2.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: transparent;
    color: var(--f-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.f-card__add > span { overflow: hidden; text-overflow: ellipsis; }
.f-card__add > svg { flex: none; }
.f-card__add:hover:not(:disabled) {
    background: var(--color-primary, #1d9e75);
    border-color: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
}
.f-card__add:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-card__add:disabled { opacity: 0.55; cursor: not-allowed; }

.f-card__wishlist {
    flex: none;
    inline-size: 2.4rem;
    min-block-size: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: transparent;
    color: var(--f-text-soft);
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease;
}
.f-card__wishlist:hover { border-color: var(--color-primary, #1d9e75); color: var(--color-primary, #1d9e75); }
.f-card__wishlist.is-active { color: var(--f-danger); border-color: var(--f-danger); }

.f-card--out-of-stock .f-card__media { opacity: 0.6; }
.f-card--empty { display: none; }

.f-card--skeleton {
    border-radius: var(--f-radius);
    background: rgba(0, 0, 0, 0.05);
    aspect-ratio: 3 / 4;
    animation: f-pulse 1.4s ease-in-out infinite;
}

@keyframes f-pulse { 50% { opacity: 0.45; } }

/* ------------------------------------------------------------- products list */

.f-list { display: block; inline-size: 100%; }

.f-list__grid {
    display: grid;
    gap: 1rem;
    /* Column count is an element attribute, so density is a theme decision. */
    grid-template-columns: repeat(var(--f-list-columns, 4), minmax(0, 1fr));
}

@media (max-width: 1023px) {
    .f-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .f-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.f-list__count { margin: 0 0 0.75rem; font-size: 0.8rem; color: var(--f-text-faint); }

.f-list__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--f-text-soft);
}

.f-list__retry {
    padding: 0.5rem 1rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--f-text);
    cursor: pointer;
}

.f-list__retry:hover { background: rgba(0, 0, 0, 0.04); }

.f-list[data-busy] .f-list__grid { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
    .f-card__inner,
    .f-qty__step { transition: none; }
    .f-card__inner:hover { transform: none; }
    .f-card--skeleton { animation: none; }
}

/* ------------------------------------------------- product card variants */
/*
    Theme-raed's custom-salla-product-card vocabulary, as attributes:
    minimal · full-image · special · horizontal. Same data, four treatments.
*/

/* minimal: dense grids — image, title, price, nothing else */
.f-card--minimal .f-card__body { padding: 0.5rem 0.25rem 0.25rem; gap: 0.2rem; }
.f-card--minimal .f-card__inner { border: 0; background: transparent; }
.f-card--minimal .f-card__inner:hover { box-shadow: none; transform: none; }
.f-card--minimal .f-card__media { border-radius: var(--f-radius); }

/* full-image: the image is the card; title and price sit over its foot */
.f-card--full-image .f-card__inner { position: relative; border: 0; }
.f-card--full-image .f-card__media { aspect-ratio: 3 / 4; }

.f-card--full-image .f-card__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 2rem 0.9rem 0.9rem;
    gap: 0.15rem;
    background: linear-gradient(to top, rgba(10, 14, 12, 0.78), transparent);
}

.f-card--full-image .f-card__link,
.f-card--full-image .f-card__price-now { color: #fff; }
.f-card--full-image .f-card__price-was { color: rgba(255, 255, 255, 0.72); }

/* special: the featured slot — stronger frame + remaining-stock urgency */
.f-card--special .f-card__inner {
    border: 2px solid var(--color-primary, #1d9e75);
}

.f-card__remaining {
    margin: 0;
    align-self: flex-start;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 12%, transparent);
    color: var(--color-primary, #1d9e75);
    font-size: 0.7rem;
    font-weight: 700;
}

/* horizontal: image beside content — search results, compact lists */
.f-card--horizontal .f-card__inner { flex-direction: row; align-items: stretch; }
.f-card--horizontal .f-card__media { flex: none; inline-size: 7.5rem; aspect-ratio: 1; }
.f-card--horizontal .f-card__body { justify-content: center; }

/* ========================================================================
   Add-product button
   The host is display:contents so the inner <button> takes the host's place
   in whatever flex/grid row the theme laid out (a card's action row, the
   product page's CTA row); the theme skins the button via `button-class`.
   ======================================================================== */

.f-add-product { display: contents; }
.f-add-product[hidden] { display: none; }
.f-add-product[aria-busy="true"] .f-add-product__button { opacity: 0.7; cursor: progress; }
.f-add-product__button:disabled { cursor: not-allowed; }

/* ========================================================================
   Cart summary — the header's cart entry: icon, count, total
   ======================================================================== */

.f-cart-summary { display: inline-block; }
.f-cart-summary[hidden] { display: none; }

.f-cart-summary__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
}

.f-cart-summary__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
}

.f-cart-summary__icon.is-bumped { animation: f-cart-bump 0.5s ease; }

.f-cart-summary__count {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    min-inline-size: 1.2rem;
    block-size: 1.2rem;
    padding-inline: 0.3rem;
    border-radius: 999px;
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.f-cart-summary__count[hidden] { display: none; }

.f-cart-summary__content { display: flex; flex-direction: column; line-height: 1.15; }
.f-cart-summary__label { font-size: 0.7rem; color: var(--f-text-soft); }
.f-cart-summary__total { font-size: 0.85rem; font-weight: 700; color: var(--f-text); font-variant-numeric: tabular-nums; }

/* The product picture in flight (see animateToCart). */
.f-cart-thumb { position: fixed; pointer-events: none; z-index: 99999; }

@keyframes f-cart-bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.25, 0.8); }
    50% { transform: scale(0.85, 1.15); }
    70% { transform: scale(1.1, 0.95); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .f-cart-summary__icon.is-bumped { animation: none; }
}

/* ========================================================================
   Cart coupons — input + apply/remove, applied chip, coupon cards
   ======================================================================== */

.f-cart-coupons { display: block; }

/* <falak-cart-offers>: the cart page's offer tracker. One card per offer the
   cart is measured against — unlocked ones tinted and ticked, locked ones
   neutral with a progress bar. */
.f-cart-offers { display: block; margin-block-end: 1rem; }
.f-offer-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.f-offer-track__card { border: 1.5px solid var(--f-border); border-radius: calc(var(--f-radius) * 1.4); background: var(--f-surface); padding: 0.8rem 0.9rem; transition: border-color 0.3s ease, background-color 0.3s ease; }
.f-offer-track__card.is-unlocked { border-color: color-mix(in srgb, var(--f-success, #16a34a) 35%, transparent); background: color-mix(in srgb, var(--f-success, #16a34a) 7%, var(--f-surface)); }
.f-offer-track__top { display: flex; align-items: center; gap: 0.65rem; }
.f-offer-track__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 0.65rem; background: color-mix(in srgb, var(--color-primary, #1d9e75) 12%, transparent); color: var(--color-primary, #1d9e75); }
.f-offer-track__card.is-unlocked .f-offer-track__icon { background: color-mix(in srgb, var(--f-success, #16a34a) 14%, transparent); color: var(--f-success, #16a34a); }
.f-offer-track__text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.f-offer-track__title { font-size: 0.9rem; font-weight: 700; color: var(--f-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-offer-track__sub { font-size: 0.8rem; color: var(--f-text-soft); }
.f-offer-track__card.is-unlocked .f-offer-track__sub { color: var(--f-success, #16a34a); font-weight: 600; }
.f-offer-track__state { flex: none; display: inline-flex; color: var(--f-text-faint); }
.f-offer-track__card.is-unlocked .f-offer-track__state { color: var(--f-success, #16a34a); }
.f-offer-track__bar { margin-block-start: 0.6rem; block-size: 6px; border-radius: 999px; background: color-mix(in srgb, var(--f-text) 8%, transparent); overflow: hidden; }
.f-offer-track__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--color-primary, #1d9e75); transition: inline-size 0.4s ease; }
.f-cart-coupons[hidden] { display: none; }
.f-cart-coupons__label { display: block; margin-block-end: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--f-text); }
.f-cart-coupons__row { display: flex; gap: 0.5rem; }

.f-cart-coupons__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    letter-spacing: 0.03em;
}
.f-cart-coupons__input:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 1px; }
.f-cart-coupons__input:disabled { opacity: 0.75; }
.f-cart-coupons__input.is-invalid { border-color: var(--f-danger); }
.f-cart-coupons__button { flex: none; min-inline-size: 5.5rem; }
.f-cart-coupons__button[data-coupon-remove] { min-inline-size: 2.75rem; padding-inline: 0.75rem; }

.f-cart-coupons__error { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--f-danger); }
.f-cart-coupons__error[hidden] { display: none; }

.f-cart-coupons__applied {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--f-border);
    border-inline-start: 3px solid var(--color-primary, #1d9e75);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    font-size: 0.85rem;
}
.f-cart-coupons__code { font-weight: 700; letter-spacing: 0.04em; color: var(--f-text); }
.f-cart-coupons__code::before {
    content: "";
    display: inline-block;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    margin-inline-end: 0.4rem;
    border-radius: 50%;
    background: var(--color-primary, #1d9e75);
    vertical-align: middle;
}
.f-cart-coupons__applied-note { color: var(--f-text-soft); }

.f-cart-coupons__slider { display: block; margin-block-start: 1rem; }

/* Ticket-style card; the notches are the card background on purpose. */
.f-coupon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--f-border);
    border-radius: calc(var(--f-radius) * 1.2);
    background: var(--f-surface);
    cursor: pointer;
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.f-coupon-card:hover { border-color: var(--color-primary, #1d9e75); transform: translateY(-1px); }
.f-coupon-card:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-coupon-card--disabled { cursor: not-allowed; opacity: 0.55; }
.f-coupon-card--disabled:hover { border-color: var(--f-border); transform: none; }
.f-coupon-card--current { border-color: var(--color-primary, #1d9e75); }

.f-coupon-card__top { padding: 0.85rem 0.9rem 0.6rem; }
.f-coupon-card__amount { font-size: 1.2rem; font-weight: 800; color: var(--color-primary, #1d9e75); line-height: 1.1; }
.f-coupon-card__secondary { font-size: 0.75rem; color: var(--f-text-soft); margin-block-start: 0.15rem; }
.f-coupon-card__code {
    display: inline-block;
    margin-block-start: 0.5rem;
    padding: 0.2rem 0.5rem;
    border: 1px dashed var(--color-primary, #1d9e75);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--f-text);
}
.f-coupon-card__divider {
    position: relative;
    block-size: 0;
    border-block-start: 1px dashed var(--f-border);
    margin-inline: 0.6rem;
}
.f-coupon-card__divider::before,
.f-coupon-card__divider::after {
    content: "";
    position: absolute;
    inset-block-start: -0.5rem;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
    background: var(--color-bg, #f0f0f0);
    border: 1px solid var(--f-border);
}
.f-coupon-card__divider::before { inset-inline-start: -1.1rem; }
.f-coupon-card__divider::after { inset-inline-end: -1.1rem; }

.f-coupon-card__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.35rem 0.5rem; padding: 0.6rem 0.9rem 0.8rem; }
.f-coupon-card__terms { font-size: 0.72rem; color: var(--f-text-soft); line-height: 1.4; }
.f-coupon-card__expiry.is-soon { color: var(--f-danger); font-weight: 600; }
.f-coupon-card__action { flex: none; margin-inline-start: auto; font-size: 0.78rem; font-weight: 700; white-space: nowrap; color: var(--color-primary, #1d9e75); }
.f-coupon-card--disabled .f-coupon-card__action { color: var(--f-text-soft); }

@media (prefers-reduced-motion: reduce) {
    .f-coupon-card:hover { transform: none; }
}

/* ========================================================================
   Product options — variant pills
   ======================================================================== */

.f-options { display: flex; flex-direction: column; gap: 0.9rem; }
.f-options[hidden] { display: none; }
.f-options__group { display: flex; flex-direction: column; gap: 0.45rem; }
.f-options__label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; color: var(--f-text-soft); }
.f-options__name { font-weight: 600; color: var(--f-text); }
.f-options__name::after { content: ":"; }
.f-options__chosen { color: var(--f-text); }
.f-options__hint { font-size: 0.8rem; }
.f-options__group--invalid .f-options__hint { color: var(--f-danger); font-weight: 600; }
.f-options__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.f-options__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.25rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.f-options__pill:hover:not(:disabled) { border-color: var(--color-primary, #1d9e75); }
.f-options__pill:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-options__pill.is-selected {
    border-color: var(--color-primary, #1d9e75);
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
}
.f-options__pill:disabled { cursor: not-allowed; color: var(--f-text-faint); background: transparent; }
.f-options__pill--out_of_stock::after,
.f-options__pill--impossible::after {
    content: "";
    position: absolute;
    inset-inline: 0.4rem;
    inset-block-start: 50%;
    border-block-start: 1px solid currentColor;
    transform: rotate(-12deg);
    opacity: 0.7;
}
.f-options__group--invalid .f-options__pill:not(.is-selected) { border-color: var(--f-danger); }
.f-options__error { margin: 0; font-size: 0.82rem; color: var(--f-danger); }
.f-options__error[hidden] { display: none; }

/*
 * A `color` or `image` option's pill: the swatch IS the label, so the pill
 * shrinks to it and the selected state becomes a ring rather than the solid
 * primary fill the text pills use — that fill would paint over the very
 * colour the shopper is choosing.
 */
.f-options__pill--swatch {
    min-inline-size: 0;
    min-block-size: 0;
    padding: 0.2rem;
    border-radius: 50%;
}
.f-options__pill--swatch.is-selected {
    background: var(--f-surface);
    color: var(--f-text);
    box-shadow: 0 0 0 2px var(--color-primary, #1d9e75) inset;
}
.f-options__pill--image { border-radius: var(--f-radius); }

/*
 * The swatch carries its OWN shape rather than inheriting the pill's. Themes
 * reshape `.f-options__pill` freely — every one of them squares it off on the
 * product page — and an inherited radius would turn each colour circle into a
 * rounded rectangle wherever they did.
 */
.f-options__swatch {
    display: block;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    /* A white or near-white swatch would otherwise vanish into the pill. */
    box-shadow: 0 0 0 1px rgb(0 0 0 / 12%) inset;
}
.f-options__pill--image .f-options__swatch {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--f-radius);
}
.f-options__swatch--image { object-fit: cover; }

/* The strike-through marking an unbuyable value has to sit ABOVE the swatch. */
.f-options__pill--swatch.f-options__pill--out_of_stock::after,
.f-options__pill--swatch.f-options__pill--impossible::after {
    inset-inline: 0;
    z-index: 1;
    border-block-start-color: var(--f-danger);
    border-block-start-width: 2px;
    opacity: 0.9;
}
.f-options__pill--swatch:disabled { opacity: 0.45; }

/* A group with more values than pills can carry. */
.f-options__select {
    inline-size: 100%;
    max-inline-size: 22rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.f-options__select:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-options__select option:disabled { color: var(--f-text-faint); }
.f-options__group--invalid .f-options__select { border-color: var(--f-danger); }

/* ========================================================================
   Quick add — variant chooser dialog for cards
   ======================================================================== */

.f-quick-add__product { display: flex; align-items: center; gap: 0.9rem; margin-block-end: 1rem; }
.f-quick-add__image {
    flex: none;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: var(--f-radius);
    object-fit: cover;
    background: rgba(0, 0, 0, 0.05);
}
.f-quick-add__meta { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
.f-quick-add__eyebrow { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--f-text-soft); }
.f-quick-add__name { font-weight: 600; color: var(--f-text); text-decoration: none; }
.f-quick-add__name:hover { color: var(--color-primary, #1d9e75); }
.f-quick-add__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.f-quick-add__price { font-size: 1rem; color: var(--f-text); }
.f-quick-add__compare { font-size: 0.9rem; color: var(--f-text-faint); }
.f-quick-add__save {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(192, 57, 43, 0.1);
    color: var(--f-danger);
    font-size: 0.75rem;
    font-weight: 700;
}
/* Every optional row is rendered hidden until it has something to say, so
   the dialog never reserves space for a line the product has no data for. */
.f-quick-add__compare[hidden],
.f-quick-add__save[hidden],
.f-quick-add__stock[hidden] { display: none; }
.f-quick-add__form { display: flex; flex-direction: column; gap: 1rem; }
.f-quick-add__stock { margin: 0; font-size: 0.85rem; color: var(--f-text-soft); }
.f-quick-add__stock--out { color: var(--f-danger); }
.f-quick-add__actions { display: flex; align-items: stretch; gap: 0.75rem; }
.f-quick-add__actions .f-add-product__button { flex: 1 1 auto; }
.f-quick-add__footnote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--f-text-soft);
}
.f-quick-add__details { color: inherit; }

/* ========================================================================
   Wishlist button — the heart
   ======================================================================== */

.f-wishlist { display: contents; }
.f-wishlist[hidden] { display: none; }

.f-wishlist__button { color: var(--f-text-soft); }
.f-wishlist__button:hover:not(:disabled) { color: var(--f-danger); border-color: var(--f-danger); }
.f-wishlist__button.is-added { color: var(--f-danger); border-color: var(--f-danger); }
.f-wishlist__button.is-added .f-wishlist__icon { fill: currentColor; }
.f-wishlist__button.is-pulsing .f-wishlist__icon { animation: f-heart 0.45s ease; }
.f-wishlist__label { margin-inline-start: 0.4rem; font-size: 0.85rem; font-weight: 600; }

/* The card's square, matching .f-card__add's height. */
.f-card__wishlist.is-added { color: var(--f-danger); border-color: var(--f-danger); }
.f-card__wishlist.is-added .f-wishlist__icon { fill: currentColor; }

@keyframes f-heart {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .f-wishlist__button.is-pulsing .f-wishlist__icon { animation: none; }
}

/* ========================================================================
   Drawer — the off-canvas panel (wishlist drawer uses it)
   ======================================================================== */

.f-wishlist-drawer { display: inline-block; }
.f-wishlist-drawer[hidden] { display: none; }
body.f-drawer-open { overflow: hidden; }

.f-wishlist-drawer__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    cursor: pointer;
}
.f-wishlist-drawer__trigger:hover { color: var(--f-danger); }
.f-wishlist-drawer__trigger:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }

.f-search { display: inline-flex; }

.f-search__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    cursor: pointer;
}
.f-search__trigger:hover { color: var(--color-primary, #1d9e75); }
.f-search__trigger:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }

.f-wishlist-drawer__count {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    min-inline-size: 1.2rem;
    block-size: 1.2rem;
    padding-inline: 0.3rem;
    border-radius: 999px;
    background: var(--f-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.f-wishlist-drawer__count[hidden] { display: none; }

.f-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(8, 14, 12, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.f-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 1100;
    inline-size: min(26rem, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--f-surface);
    color: var(--f-text);
    box-shadow: -12px 0 40px rgba(8, 14, 12, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}
[dir="rtl"] .f-drawer { transform: translateX(-100%); }
.f-wishlist-drawer--start .f-drawer { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-100%); }
[dir="rtl"] .f-wishlist-drawer--start .f-drawer { transform: translateX(100%); }

.f-wishlist-drawer[open] .f-drawer { transform: translateX(0); visibility: visible; }
.f-wishlist-drawer[open] .f-drawer__backdrop { opacity: 1; visibility: visible; }

.f-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-block-end: 1px solid var(--f-border);
}
.f-drawer__title { margin: 0; font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.f-drawer__badge {
    min-inline-size: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.4rem;
}
.f-drawer__close {
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--f-text-soft);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.f-drawer__close:hover { background: rgba(0, 0, 0, 0.1); }
.f-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 1.25rem; }
.f-drawer__foot { padding: 1rem 1.25rem; border-block-start: 1px solid var(--f-border); }
.f-drawer__loading { display: flex; justify-content: center; padding: 2rem; }
.f-drawer__empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--f-text-soft); text-align: center; }
.f-drawer__empty-icon { color: var(--f-text-faint); }
.f-drawer__empty-icon svg { inline-size: 2.5rem; block-size: 2.5rem; }

.f-wishlist-drawer__list { list-style: none; margin: 0; padding: 0; }
.f-wishlist-drawer__item {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-block-end: 1px solid var(--f-border);
}
.f-wishlist-drawer__item:last-child { border-block-end: 0; }
.f-wishlist-drawer__media { flex: none; inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--f-radius); overflow: hidden; background: rgba(0, 0, 0, 0.05); }
.f-wishlist-drawer__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.f-wishlist-drawer__info { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.f-wishlist-drawer__name {
    font-weight: 600;
    color: var(--f-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.f-wishlist-drawer__name:hover { color: var(--color-primary, #1d9e75); }
.f-wishlist-drawer__price { margin: 0; font-size: 0.9rem; font-weight: 700; }
.f-wishlist-drawer__price del { margin-inline-start: 0.35rem; font-weight: 400; color: var(--f-text-faint); }
.f-wishlist-drawer__actions { display: flex; align-items: center; gap: 0.5rem; margin-block-start: 0.2rem; }
.f-wishlist-drawer__actions .f-add-product__button { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
    .f-drawer, .f-drawer__backdrop { transition: none; }
}

/* ========================================================================
   Checkout — steps + summary column; payment status
   ======================================================================== */

.f-checkout { display: block; }
.f-checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 2rem; align-items: start; }
@media (max-width: 899px) { .f-checkout__layout { grid-template-columns: minmax(0, 1fr); } .f-checkout__aside { order: -1; } }

.f-checkout__step { padding: 1.1rem 0; border-block-end: 1px solid var(--f-border); }
.f-checkout__step-head { display: flex; align-items: center; gap: 0.85rem; }
.f-checkout__step-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--f-border);
    color: var(--f-text-soft);
    background: var(--f-surface);
}
.f-checkout__step-icon.is-active { color: var(--color-on-primary, #fff); background: var(--color-primary, #1d9e75); border-color: transparent; }
.f-checkout__step--done .f-checkout__step-icon { color: var(--color-primary, #1d9e75); border-color: var(--color-primary, #1d9e75); }
.f-checkout__step--todo { opacity: 0.55; }
.f-checkout__step-text { flex: 1 1 auto; min-inline-size: 0; }
.f-checkout__step-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.f-checkout__step-sub { color: var(--f-text-soft); }
.f-checkout__edit { flex: none; }
.f-checkout__done-line { margin: 0.5rem 0 0 3.35rem; font-size: 0.9rem; color: var(--f-text-soft); }
.f-checkout__body { display: flex; flex-direction: column; gap: 1rem; margin-block-start: 1rem; }
.f-checkout__hint { margin: 0; font-size: 0.85rem; color: var(--f-text-soft); }
/* The contact step of a digital order: phone + send-code side by side, the
   code row beneath, and the "we found your details" note. */
.f-checkout__phone-row { display: flex; gap: 0.5rem; align-items: stretch; }
.f-checkout__phone-row .f-input { flex: 1 1 auto; min-inline-size: 0; }
.f-checkout__phone-row .f-btn { flex: none; white-space: nowrap; }
.f-checkout__recognized { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--f-radius); background: color-mix(in srgb, var(--color-primary, #1d9e75) 10%, transparent); color: var(--f-text); font-size: 0.88rem; }
.f-checkout__otp { gap: 0.5rem; }
.f-checkout__otp-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.f-checkout [hidden] { display: none !important; }
.f-checkout__error { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--f-radius); background: color-mix(in srgb, var(--f-danger) 10%, transparent); color: var(--f-danger); font-size: 0.88rem; }
.f-checkout__loading { display: flex; justify-content: center; padding: 2rem; }

.f-checkout__methods { display: grid; gap: 0.6rem; }
.f-checkout__method {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.f-checkout__method:hover { border-color: var(--color-primary, #1d9e75); }
.f-checkout__method.is-selected { border-color: var(--color-primary, #1d9e75); box-shadow: 0 0 0 1px var(--color-primary, #1d9e75) inset; }
.f-checkout__method input { accent-color: var(--color-primary, #1d9e75); }
.f-checkout__method-logo { flex: none; inline-size: 3rem; block-size: 2rem; object-fit: contain; }
.f-checkout__method-logo--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--f-text-faint); }
.f-checkout__method-text { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; }
.f-checkout__method-text small { color: var(--f-text-soft); }
/* "You'll be charged 12.50 USD" — only under a method that settles in another currency. */
.f-checkout__charge-note { font-size: 0.78rem; color: var(--f-text-faint); font-variant-numeric: tabular-nums; }
.f-checkout__tag { color: var(--color-primary, #1d9e75) !important; font-weight: 600; }

.f-checkout__form { display: flex; flex-direction: column; gap: 0.9rem; }
.f-checkout__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 599px) { .f-checkout__grid { grid-template-columns: minmax(0, 1fr); } }
.f-field { display: flex; flex-direction: column; gap: 0.35rem; min-inline-size: 0; }
.f-field--wide { grid-column: 1 / -1; }
.f-field__label { font-size: 0.85rem; font-weight: 600; color: var(--f-text); }
.f-input {
    inline-size: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
}
.f-input:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 1px; }
.f-input:disabled { opacity: 0.6; }

.f-checkout__review { display: grid; gap: 0.6rem; margin: 0; }
.f-checkout__review div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.9rem; }
.f-checkout__review dt { color: var(--f-text-soft); }
.f-checkout__review dd { margin: 0; }
.f-checkout__total-line { margin: 0; font-size: 1rem; display: flex; justify-content: space-between; }

.f-checkout__signin { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.5rem; border: 1px solid var(--f-border); border-radius: var(--f-radius); background: var(--f-surface); }
.f-checkout__title { margin: 0; font-size: 1.2rem; }
.f-checkout__back { font-size: 0.85rem; color: var(--f-text-soft); }

.f-checkout__summary { position: sticky; inset-block-start: 1rem; padding: 1.1rem; border: 1px solid var(--f-border); border-radius: calc(var(--f-radius) * 1.4); background: var(--f-surface); display: flex; flex-direction: column; gap: 1rem; }
.f-checkout__summary-title { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.f-checkout__count { min-inline-size: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: rgba(0, 0, 0, 0.06); font-size: 0.75rem; text-align: center; line-height: 1.4rem; }
.f-checkout__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; max-block-size: 18rem; overflow-y: auto; }
.f-checkout__line { display: flex; align-items: center; gap: 0.7rem; }
.f-checkout__line-media { position: relative; flex: none; inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--f-radius); overflow: visible; background: rgba(0, 0, 0, 0.05); }
/* display: block — an inline img sits on the text baseline and adds descender
   space below itself, so the list overflowed its box by ~8px and grew a
   scrollbar even when every line fit. */
.f-checkout__line-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--f-radius); }
.f-checkout__line-qty { position: absolute; inset-block-start: -0.35rem; inset-inline-end: -0.35rem; min-inline-size: 1.2rem; block-size: 1.2rem; padding-inline: 0.3rem; border-radius: 999px; background: var(--f-text); color: var(--f-surface); font-size: 0.68rem; line-height: 1.2rem; text-align: center; }
.f-checkout__line-text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; font-size: 0.85rem; }
.f-checkout__line-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-checkout__line-text small { color: var(--f-text-soft); }
.f-checkout__line-total { flex: none; font-weight: 700; font-size: 0.85rem; }
.f-checkout__totals { display: flex; flex-direction: column; gap: 0.45rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--f-border); }
.f-checkout__row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--f-text-soft); }
.f-checkout__row--discount { color: var(--color-primary, #1d9e75); }
.f-checkout__row--total { margin-block-start: 0.35rem; padding-block-start: 0.6rem; border-block-start: 1px solid var(--f-border); color: var(--f-text); font-size: 1.05rem; font-weight: 700; }
.f-checkout__row > span:first-child { display: inline-flex; align-items: center; gap: 0.3rem; }

.f-checkout__info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    border: 0;
    border-radius: 50%;
    background: var(--f-border);
    color: var(--f-text-soft);
    cursor: pointer;
    flex: none;
}
.f-checkout__info-btn:hover { background: var(--color-primary, #1d9e75); color: var(--color-on-primary, #fff); }

.f-checkout__progress { display: block; margin-block-end: 1.25rem; }

/* ---- payment return page: verifying / success / pending / failed / error ---- */
.f-payment-status { display: block; inline-size: 100%; max-inline-size: 60rem; margin-inline: auto; text-align: start; }
.f-payment-status__shell { display: flex; flex-direction: column; gap: 1.25rem; }

/* The hero: one panel that says where the payment stands. Its tone (the
   accent, the tint behind the icon, the ink of the title) is set per state
   with custom properties, so every piece below reads the same three. */
.f-payment-status__hero {
    --fps-accent: var(--f-text);
    --fps-ink: var(--f-text);
    --fps-tint: rgba(0, 0, 0, 0.05);
    --fps-ring: rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.75rem 1.5rem 2.25rem;
    border: 1px solid var(--f-border);
    border-radius: calc(var(--f-radius) * 2);
    background: var(--f-surface);
    text-align: center;
}
.f-payment-status__hero::before { content: ""; position: absolute; inset: 0 0 auto 0; block-size: 0.3rem; background: var(--fps-accent); }
.f-payment-status__hero::after {
    content: "";
    position: absolute;
    inset-inline: -20%;
    inset-block-start: -45%;
    block-size: 75%;
    background: radial-gradient(closest-side, var(--fps-tint), transparent);
    pointer-events: none;
}
.f-payment-status__hero > * { position: relative; z-index: 1; }
.f-payment-status__hero.is-success { --fps-accent: #16a34a; --fps-ink: #14532d; --fps-tint: rgba(22, 163, 74, 0.14); --fps-ring: rgba(22, 163, 74, 0.25); }
.f-payment-status__hero.is-pending { --fps-accent: #d97706; --fps-ink: #78350f; --fps-tint: rgba(217, 119, 6, 0.14); --fps-ring: rgba(217, 119, 6, 0.25); }
.f-payment-status__hero.is-failed { --fps-accent: #dc2626; --fps-ink: #7f1d1d; --fps-tint: rgba(220, 38, 38, 0.12); --fps-ring: rgba(220, 38, 38, 0.25); }

.f-payment-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    margin-block-end: 0.4rem;
    border-radius: 50%;
    background: var(--f-surface);
    color: var(--fps-accent);
    box-shadow: 0 0 0 0.5rem var(--fps-tint), 0 0 0 1px var(--fps-ring);
}
.f-payment-status__icon .f-order__icon { inline-size: 2.1rem; block-size: 2.1rem; }
.f-payment-status__eyebrow { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fps-accent); }
.f-payment-status__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.2; color: var(--fps-ink); }
.f-payment-status__text { margin: 0; max-inline-size: 34rem; color: var(--f-text-soft); line-height: 1.6; }

/* Order placed → Payment → Confirmed. The connector between two dots takes
   the accent once the step before it is done. */
.f-payment-status__steps {
    display: flex;
    align-items: flex-start;
    inline-size: 100%;
    max-inline-size: 30rem;
    margin: 1.1rem 0 0.4rem;
    padding: 0;
    list-style: none;
}
.f-payment-status__step {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--f-text-faint);
}
.f-payment-status__step + .f-payment-status__step::before {
    content: "";
    position: absolute;
    inset-block-start: 0.8rem;
    inset-inline-end: 50%;
    inline-size: 100%;
    block-size: 2px;
    background: var(--f-border);
}
.f-payment-status__step.is-done + .f-payment-status__step::before { background: var(--fps-accent); }
.f-payment-status__step-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    border: 2px solid var(--f-border);
    border-radius: 50%;
    background: var(--f-surface);
    color: var(--f-text-faint);
    font-size: 0.72rem;
}
.f-payment-status__step-dot i { font-style: normal; }
.f-payment-status__step-dot .f-order__icon { inline-size: 0.9rem; block-size: 0.9rem; }
.f-payment-status__step.is-done,
.f-payment-status__step.is-current,
.f-payment-status__step.is-failed { color: var(--f-text); }
.f-payment-status__step.is-done .f-payment-status__step-dot,
.f-payment-status__step.is-failed .f-payment-status__step-dot { border-color: var(--fps-accent); background: var(--fps-accent); color: #fff; }
.f-payment-status__step.is-current .f-payment-status__step-dot { border-color: var(--fps-accent); color: var(--fps-accent); box-shadow: 0 0 0 0.3rem var(--fps-tint); }
.f-payment-status__step.is-current { color: var(--fps-ink); }
.f-payment-status__step-label { padding-inline: 0.25rem; }

/* The order number is a button: tap to copy. */
.f-payment-status__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-block-start: 0.5rem;
    padding: 0.4rem 0.5rem;
    padding-inline-start: 0.9rem;
    border: 1px solid var(--f-border);
    border-radius: 999px;
    background: var(--f-surface);
    font: inherit;
    font-size: 0.88rem;
    color: var(--f-text);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.f-payment-status__pill:hover,
.f-payment-status__pill:focus-visible { border-color: var(--fps-accent); box-shadow: 0 0 0 0.2rem var(--fps-tint); outline: none; }
.f-payment-status__pill.is-copied { border-color: #16a34a; }
.f-payment-status__pill.is-copied .f-payment-status__pill-copy { background: #dcfce7; color: #16a34a; }
.f-payment-status__pill-label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f-text-soft); }
.f-payment-status__pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.f-payment-status__pill-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border-radius: 50%;
    background: var(--fps-tint);
    color: var(--fps-accent);
}
.f-payment-status__pill-copy .f-order__icon { inline-size: 0.85rem; block-size: 0.85rem; }

/* Total · method · date, under the pill. */
.f-payment-status__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 0;
    inline-size: 100%;
    max-inline-size: 34rem;
    margin: 1rem 0 0;
    padding: 0.85rem 0 0;
    border-block-start: 1px dashed var(--f-border);
}
.f-payment-status__meta-item { flex: 1 1 9rem; display: flex; flex-direction: column; gap: 0.15rem; padding-inline: 0.75rem; }
.f-payment-status__meta-item + .f-payment-status__meta-item { border-inline-start: 1px solid var(--f-border); }
.f-payment-status__meta dt { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f-text-faint); }
.f-payment-status__meta dd { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--f-text); }

.f-payment-status__spinner {
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: 50%;
    border: 3px solid var(--f-border);
    border-block-start-color: var(--fps-accent, var(--f-text));
    animation: f-payment-status-spin 0.7s linear infinite;
}
.f-payment-status__spinner--sm { inline-size: 0.9rem; block-size: 0.9rem; border-width: 2px; }
@keyframes f-payment-status-spin { to { transform: rotate(360deg); } }
.f-payment-status__polling,
.f-payment-status__redirect {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    font-size: 0.84rem;
    color: var(--f-text-soft);
}
.f-payment-status__polling-count { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--fps-tint); color: var(--fps-ink); font-size: 0.74rem; font-weight: 700; }
/* Fills over the moment before the thank-you page takes over. */
.f-payment-status__progress { display: block; inline-size: 12rem; block-size: 0.3rem; margin-block-start: 0.6rem; border-radius: 999px; background: var(--fps-tint); overflow: hidden; }
.f-payment-status__progress i { display: block; inline-size: 100%; block-size: 100%; background: var(--fps-accent); transform-origin: 0 50%; animation: f-payment-status-fill 1.8s linear forwards; }
[dir="rtl"] .f-payment-status__progress i { transform-origin: 100% 50%; }
@keyframes f-payment-status-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Items beside the payment, delivery and next-steps cards. */
.f-payment-status__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.f-payment-status__side { display: flex; flex-direction: column; gap: 1.25rem; }
.f-payment-status__card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--f-border);
    border-radius: calc(var(--f-radius) * 1.5);
    background: var(--f-surface);
    text-align: start;
}
.f-payment-status__card-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 700; color: var(--f-text); }
.f-payment-status__card-title .f-order__icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--f-text-soft); }
.f-payment-status__card-title small { margin-inline-start: auto; font-size: 0.75rem; font-weight: 600; color: var(--f-text-faint); }
.f-payment-status__items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.f-payment-status__item { display: flex; align-items: center; gap: 0.85rem; padding-block: 0.7rem; border-block-start: 1px solid var(--f-border); }
.f-payment-status__item:first-child { padding-block-start: 0; border-block-start: 0; }
.f-payment-status__thumb {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border: 1px solid var(--f-border);
    border-radius: 0.65rem;
    background: rgba(0, 0, 0, 0.03);
    color: var(--f-text-faint);
}
.f-payment-status__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
.f-payment-status__qty {
    position: absolute;
    inset-block-start: -0.45rem;
    inset-inline-end: -0.45rem;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: 0.3rem;
    border-radius: 999px;
    background: var(--f-text);
    color: var(--f-surface);
    font-size: 0.7rem;
    line-height: 1.25rem;
    text-align: center;
}
.f-payment-status__item-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.f-payment-status__item-name { font-size: 0.92rem; font-weight: 600; color: var(--f-text); overflow-wrap: anywhere; }
.f-payment-status__item-each { font-size: 0.78rem; color: var(--f-text-faint); }
.f-payment-status__item-total { font-size: 0.92rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.f-payment-status__totals { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding-block-start: 0.9rem; border-block-start: 1px solid var(--f-border); }
.f-payment-status__totals-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--f-text-soft); }
.f-payment-status__totals-row dd { margin: 0; color: var(--f-text); font-variant-numeric: tabular-nums; }
.f-payment-status__totals-row--grand { margin-block-start: 0.35rem; padding-block-start: 0.7rem; border-block-start: 1px dashed var(--f-border); font-size: 1.05rem; font-weight: 800; color: var(--f-text); }
.f-payment-status__facts { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; }
.f-payment-status__facts > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.9rem; }
.f-payment-status__facts dt { color: var(--f-text-soft); }
.f-payment-status__facts dd { margin: 0; text-align: end; color: var(--f-text); }
.f-payment-status__badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.06); color: var(--f-text); font-size: 0.75rem; font-weight: 700; }
.f-payment-status__badge.is-paid,
.f-payment-status__badge.is-completed { background: #dcfce7; color: #166534; }
.f-payment-status__badge.is-pending,
.f-payment-status__badge.is-unpaid { background: #fef3c7; color: #92400e; }
.f-payment-status__badge.is-failed { background: #fee2e2; color: #991b1b; }
.f-payment-status__note { margin: 0; font-size: 0.82rem; color: var(--f-text-soft); }
.f-payment-status__address { display: flex; flex-direction: column; gap: 0.2rem; font-style: normal; font-size: 0.9rem; line-height: 1.5; color: var(--f-text-soft); }
.f-payment-status__address-name { font-weight: 700; color: var(--f-text); }
.f-payment-status__next { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; counter-reset: fps-next; }
.f-payment-status__next li { position: relative; padding-inline-start: 2.1rem; font-size: 0.88rem; line-height: 1.5; color: var(--f-text-soft); counter-increment: fps-next; }
.f-payment-status__next li::before {
    content: counter(fps-next);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--f-text);
    font-size: 0.72rem;
    font-weight: 700;
}
.f-payment-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; }
.f-payment-status__actions .f-btn { justify-content: center; }

@media (max-width: 47.99rem) {
    .f-payment-status__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) {
    .f-payment-status__hero { padding: 2.1rem 1rem 1.75rem; }
    .f-payment-status__meta-item + .f-payment-status__meta-item { border-inline-start: 0; }
    .f-payment-status__actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .f-payment-status__spinner,
    .f-payment-status__progress i { animation-duration: 0.01ms; animation-iteration-count: 1; }
}

/* ========================================================================
   Product availability ("notify me"), size guide, reviews summary
   ======================================================================== */

.f-availability { display: block; }
.f-availability[hidden] { display: none; }
.f-availability__button { display: inline-flex; align-items: center; gap: 0.45rem; }
.f-availability__done { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--color-primary, #1d9e75); font-weight: 600; }
.f-availability__form { display: flex; flex-direction: column; gap: 0.9rem; }
.f-availability__error { margin: 0; font-size: 0.85rem; color: var(--f-danger); }
.f-availability__error[hidden] { display: none; }

.f-size-guide { display: inline-block; }
.f-size-guide[hidden] { display: none; }
.f-size-guide__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary, #1d9e75);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.f-size-guide__body { display: flex; flex-direction: column; gap: 1rem; }
/* A size guide is very often a phone screenshot — tall, and far bigger than
   the dialog meant to hold it. Width was capped and height was not, so the
   modal grew to whatever the merchant uploaded and pushed its own header off
   the screen. The ratio survives the cap because the width stays free to
   shrink with it. */
.f-size-guide__image { max-inline-size: 100%; block-size: auto; max-block-size: 70vh; align-self: center; border-radius: var(--f-radius); }
.f-size-guide__content table { inline-size: 100%; border-collapse: collapse; font-size: 0.9rem; }
.f-size-guide__content th, .f-size-guide__content td { padding: 0.5rem 0.6rem; border: 1px solid var(--f-border); text-align: start; }
.f-size-guide__content th { background: rgba(0, 0, 0, 0.04); font-weight: 700; }

.f-reviews-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.f-reviews-summary[hidden] { display: none; }
@media (max-width: 599px) { .f-reviews-summary { grid-template-columns: minmax(0, 1fr); } }
.f-reviews-summary__loading { display: flex; justify-content: center; padding: 1rem; }
.f-reviews-summary__empty { margin: 0; color: var(--f-text-soft); }
.f-reviews-summary__score { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-inline-size: 8rem; }
.f-reviews-summary__average { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--f-text); }
.f-reviews-summary__total { font-size: 0.85rem; color: var(--f-text-soft); }
.f-reviews-summary__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.f-reviews-summary__row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.f-reviews-summary__row-label { color: var(--f-text-soft); white-space: nowrap; }
.f-reviews-summary__star { color: #f5a623; }
.f-reviews-summary__bar { display: block; block-size: 0.55rem; border-radius: 999px; background: rgba(0, 0, 0, 0.07); overflow: hidden; }
.f-reviews-summary__fill { display: block; block-size: 100%; border-radius: 999px; background: #f5a623; transition: inline-size 0.4s ease; }
.f-reviews-summary__count { text-align: end; color: var(--f-text-soft); font-variant-numeric: tabular-nums; }
.f-availability__note { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--f-text-soft); }

/* ========================================================================
   Add-product toast — the "added to your cart" card
   ======================================================================== */
.f-add-toast {
    position: fixed;
    z-index: 1100;
    inline-size: min(22rem, calc(100vw - 2rem));
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.f-add-toast[hidden] { display: none; }
.f-add-toast.is-in { opacity: 1; transform: none; pointer-events: auto; }
.f-add-toast--bottom-end { inset-block-end: 1.25rem; inset-inline-end: 1.25rem; }
.f-add-toast--bottom-start { inset-block-end: 1.25rem; inset-inline-start: 1.25rem; }
.f-add-toast--bottom-center { inset-block-end: 1.25rem; inset-inline-start: 50%; transform: translate(-50%, 0.75rem); }
.f-add-toast--bottom-center.is-in { transform: translate(-50%, 0); }
.f-add-toast--top-end { inset-block-start: 1.25rem; inset-inline-end: 1.25rem; transform: translateY(-0.75rem); }
.f-add-toast--top-start { inset-block-start: 1.25rem; inset-inline-start: 1.25rem; transform: translateY(-0.75rem); }
.f-add-toast--top-center { inset-block-start: 1.25rem; inset-inline-start: 50%; transform: translate(-50%, -0.75rem); }
.f-add-toast--top-center.is-in { transform: translate(-50%, 0); }
.f-add-toast__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--f-surface, #fff);
    color: var(--f-text, #1f2937);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.f-add-toast__close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.f-add-toast__close:hover { background: rgba(0, 0, 0, 0.06); }
.f-add-toast__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline-end: 2rem;
    font-weight: 700;
    color: var(--f-success, #15803d);
}
.f-add-toast__icon { flex: none; }
.f-add-toast__product { display: flex; align-items: center; gap: 0.75rem; }
.f-add-toast__image {
    flex: none;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.05);
}
.f-add-toast__info { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.f-add-toast__name {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.f-add-toast__variant, .f-add-toast__price { font-size: 0.85rem; opacity: 0.75; }
.f-add-toast__summary {
    margin: 0;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.85rem;
    opacity: 0.85;
}
.f-add-toast__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.f-add-toast__actions .f-btn { justify-content: center; text-align: center; }
@media (prefers-reduced-motion: reduce) { .f-add-toast { transition: none; } }

/* ===== contact form ===== */
/* Every colour goes through the --f-* tokens, which fall back to the theme's
   --color-* names, so a theme restyles this form by setting the variables it
   already sets rather than by overriding selectors here. */

.f-contact {
    display: grid;
    gap: 1rem;
}

.f-contact__row {
    display: grid;
    /* Two up where there is room, stacked where there is not — the phone and
       email pair is the only row that shares a line. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
}

.f-contact__field { display: grid; gap: 0.5rem; min-inline-size: 0; }

.f-contact__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--f-text);
}
.f-contact__label-icon {
    display: inline-flex;
    color: var(--f-text-soft);
}
.f-contact__required { color: var(--f-danger); line-height: 1; }

.f-contact__input {
    inline-size: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--f-radius);
    /* The field is the light plate in the reference, sitting on a tinted
       panel the theme paints — hence a background of its own rather than a
       border alone. */
    background: var(--f-input-bg, #ffffff);
    color: var(--f-text);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.6;
}
.f-contact__input::placeholder { color: var(--f-text-faint); }
.f-contact__input:focus {
    outline: none;
    border-color: var(--color-primary, #b08658);
}

.f-contact__input--area {
    min-block-size: 8rem;
    resize: vertical;
}

/* File inputs cannot be styled through the input box itself in every engine,
   so the plate is kept and only the button part is toned down. */
.f-contact__input[type="file"] { padding: 0.6rem 0.75rem; cursor: pointer; }
.f-contact__input[type="file"]::file-selector-button {
    margin-inline-end: 0.75rem;
    padding: 0.4rem 0.9rem;
    border: 0;
    border-radius: calc(var(--f-radius) - 2px);
    background: var(--f-border);
    color: var(--f-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.f-contact__error {
    margin: 0;
    color: var(--f-danger);
    font-size: 0.875rem;
}
.f-contact__error[hidden] { display: none; }

.f-contact falak-button { margin-block-start: 0.25rem; }

/* The confirmation sits WITH the form, under the button — a banner on the
   row, not a panel in the form's place. */
.f-contact__done {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--f-radius);
    background: var(--f-success-bg, rgba(22, 163, 74, 0.1));
    color: var(--f-text);
}
.f-contact__done[hidden] { display: none; }
.f-contact__done p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.f-contact__done-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--f-success, #16a34a);
    color: #fff;
}

/* ===== contact links ===== */
/* The footer's "how to reach us" row: outlined chips, icon then label. Sits
   above <falak-social>, which is the same shop's profiles as bare icons. */

.f-contact-links { display: block; }
.f-contact-links[hidden] { display: none; }

.f-contact-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.f-contact-links__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid currentColor;
    border-radius: var(--f-radius);
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    /* The chip borrows the footer's ink at 65% so the outline reads as a
       hairline on a dark ground without needing a second colour token. */
    opacity: 0.65;
    transition: opacity 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.f-contact-links__chip:hover,
.f-contact-links__chip:focus-visible {
    opacity: 1;
    color: var(--color-primary, #b08658);
    text-decoration: none;
}

.f-contact-links__icon { display: inline-flex; flex: none; }
.f-contact-links__label { white-space: nowrap; }

/* ========================================================================
   NEWSLETTER — <falak-newsletter>
   ======================================================================== */
/* Structure only: the row, the growing field, the status line. Colours and
   shapes come from the theme, which is why every value here goes through the
   --f-* tokens with quiet fallbacks. */

.f-newsletter { display: block; }

.f-newsletter__form { margin: 0; }

.f-newsletter__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.f-newsletter__row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.f-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--f-border, rgba(0, 0, 0, 0.14));
    border-radius: var(--f-radius, 0.5rem);
    background: var(--f-bg, #fff);
    color: var(--f-text, inherit);
    font: inherit;
}

.f-newsletter__submit {
    flex: none;
    padding: 0.6rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--f-radius, 0.5rem);
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
    font: inherit;
    cursor: pointer;
}

.f-newsletter__submit:disabled { opacity: 0.6; cursor: wait; }

.f-newsletter__status {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}

.f-newsletter__status.is-error { color: var(--f-danger, #c0392b); }

@media (max-width: 479px) {
    .f-newsletter__row { flex-wrap: wrap; }
    .f-newsletter__submit { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ counter */

/*
 * justify-content matters more than it looks. Dropped into a grid or flex
 * parent — a stats row, say — an inline-flex element is blockified and
 * stretched to the full cell, and `text-align: center` on that parent cannot
 * reach flex children: the figure ends up hard against the start edge while
 * the label under it stays centred. Centring here costs nothing in normal
 * flow, where the box shrink-wraps anyway, and a theme that wants the figure
 * aligned to the edge overrides one property.
 */
.f-counter { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.1em; font-variant-numeric: tabular-nums; }
.f-counter[hidden] { display: none; }

/* ---------------------------------------------------------- image compare */

/*
 * Built around a native range input. Everything visible reads one custom
 * property, --f-compare-pos, so the block renders correctly at its 50% default
 * even if the script never runs.
 */
.f-compare {
    --f-compare-pos: 50%;
    --f-compare-knob: 2.75rem;
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--f-radius);
}

.f-compare[hidden] { display: none; }

/* A fixed ratio on both photos: a comparison whose halves are different shapes
   shows the crop rather than the difference. */
.f-compare__photo { display: block; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--f-surface); }

.f-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--f-compare-pos)) 0 0); }
.f-compare__before .f-compare__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; }

/* RTL reads the handle from the right, and so does the range input's own
   travel — clip from the opposite edge or the two move in opposite directions. */
[dir="rtl"] .f-compare__before { clip-path: inset(0 0 0 calc(100% - var(--f-compare-pos))); }

.f-compare__label {
    position: absolute;
    inset-block-start: 1rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
}

.f-compare__label--before { inset-inline-start: 1rem; }
.f-compare__label--after { inset-inline-end: 1rem; }

/*
 * The input covers the whole photo and draws nothing — its thumb is a
 * hairline, and the knob below is an ordinary element. A thumb styled as the
 * knob stops half a knob short of each edge while the divider runs the full
 * width, and Chrome paints it straight through the overflow clip above.
 */
.f-compare__range {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: ew-resize;
    touch-action: pan-y;
}

.f-compare__range:focus { outline: none; }
.f-compare__range::-webkit-slider-runnable-track { background: transparent; border: 0; }
.f-compare__range::-moz-range-track { background: transparent; border: 0; }
.f-compare__range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 1px; block-size: 100%; border: 0; background: transparent; cursor: ew-resize; }
.f-compare__range::-moz-range-thumb { inline-size: 1px; block-size: 100%; border: 0; border-radius: 0; background: transparent; cursor: ew-resize; }

/* margin-inline-start rather than a translate, so both centre on the handle in
   either writing direction without a second rule. */
.f-compare__divider {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--f-compare-pos);
    inline-size: 2px;
    margin-inline-start: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.f-compare__knob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--f-compare-pos);
    inline-size: var(--f-compare-knob);
    block-size: var(--f-compare-knob);
    margin-block-start: calc(var(--f-compare-knob) / -2);
    margin-inline-start: calc(var(--f-compare-knob) / -2);
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

/* Keyboard focus has to land on something visible, and the input draws
   nothing — so the ring goes on the knob it moves. */
.f-compare__range:focus-visible ~ .f-compare__knob { box-shadow: 0 0 0 3px var(--color-primary, #1d9e75), 0 6px 18px rgba(0, 0, 0, 0.28); }

@media (max-width: 639px) {
    .f-compare { --f-compare-knob: 2.25rem; }
    .f-compare__photo { aspect-ratio: 4 / 5; }
    .f-compare__label { inset-block-start: 0.75rem; padding: 0.25rem 0.6rem; }
    .f-compare__label--before { inset-inline-start: 0.75rem; }
    .f-compare__label--after { inset-inline-end: 0.75rem; }
}

/* --------------------------------------------------------------- categories */

.f-categories { display: block; }
.f-categories[hidden] { display: none; }
.f-categories__note { margin: 0; padding-block: 2rem; text-align: center; color: var(--f-text-soft); font-size: 0.9rem; }

.f-categories__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.25rem;
}

.f-categories__link { display: grid; gap: 0.5rem; text-align: center; color: inherit; text-decoration: none; }

.f-categories__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--f-radius);
    background: var(--f-surface);
}

.f-categories__image--empty { border: 1px dashed var(--f-border); }
.f-categories__name { font-weight: 600; font-size: 0.92rem; }
.f-categories__count { color: var(--f-text-soft); font-size: 0.78rem; }

/* Round tiles — the "shop by category" circles most storefronts open with. */
.f-categories--circles .f-categories__image { border-radius: 50%; }

.f-categories--list .f-categories__list { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.f-categories--list .f-categories__link { grid-template-columns: 3rem minmax(0, 1fr); align-items: center; text-align: start; gap: 0.75rem; }
.f-categories--list .f-categories__image { inline-size: 3rem; }

/* ---- from packages/falak-components/src/components.chrome.css ---- */

/*
    Storefront chrome — button, modal, slider, menu, breadcrumb and the footer
    trust row.

    Split from components.css only for file size; both are imported by the entry
    and Vite's library mode concatenates them into one extracted
    falak-components.css. Same rules apply: derive from the theme's brand
    tokens, logical properties throughout so RTL needs no second stylesheet.
*/

/* ========================================================================
   Button
   ======================================================================== */

.f-btn-wrap { display: inline-block; }
falak-button[width="wide"],
falak-button[width="wide"] .f-btn-wrap { display: block; inline-size: 100%; }
.f-btn__link { display: block; text-decoration: none; }

.f-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1.25rem;
    min-block-size: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--f-radius);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.f-btn:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-btn:hover:not(:disabled) { opacity: 0.88; }
.f-btn:disabled,
.f-btn--disabled { opacity: 0.5; cursor: not-allowed; }

.f-btn--primary { background: var(--color-primary, #1d9e75); color: var(--color-on-primary, #fff); }
.f-btn--light { background: rgba(0, 0, 0, 0.05); color: var(--f-text); }
.f-btn--danger { background: var(--f-danger); color: #fff; }

.f-btn--primary-outline { background: transparent; border-color: var(--color-primary, #1d9e75); color: var(--color-primary, #1d9e75); }
.f-btn--light-outline { background: transparent; border-color: var(--f-border); color: var(--f-text); }
.f-btn--danger-outline { background: transparent; border-color: var(--f-danger); color: var(--f-danger); }
.f-btn--fill-none { background: transparent; color: var(--f-text); }

.f-btn--primary-link,
.f-btn--light-link {
    background: none;
    border: 0;
    padding-inline: 0;
    min-block-size: auto;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.f-btn--primary-link { color: var(--color-primary, #1d9e75); }

.f-btn--icon { inline-size: 2.5rem; min-block-size: 2.5rem; padding: 0; border-radius: 50%; }
.f-btn--small { min-block-size: 2.15rem; padding-inline: 0.85rem; font-size: 0.8rem; }
.f-btn--large { min-block-size: 3.15rem; padding-inline: 1.75rem; font-size: 1rem; }
.f-btn--wide { inline-size: 100%; }

.f-btn__text { display: inline-flex; align-items: center; gap: 0.4rem; }
.f-btn__text--hidden { visibility: hidden; }

.f-btn__loader {
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: f-spin 0.7s linear infinite;
}

.f-btn--loader-center .f-btn__loader {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    margin-block-start: -0.5rem;
    margin-inline-start: -0.5rem;
}

.f-btn--loader-before { flex-direction: row-reverse; }

@keyframes f-spin { to { transform: rotate(360deg); } }

/* ========================================================================
   Modal
   ======================================================================== */

.f-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.f-modal[data-visible="true"] { display: block; }
body.f-modal-open { overflow: hidden; }

.f-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 14, 12, 0.55);
    animation: f-fade 0.18s ease;
}

.f-modal__wrapper {
    position: relative;
    block-size: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

/* `align-items: center` on a scroll container clips what it cannot fit, and it
   clips at the TOP — where the title and the close button are. A modal taller
   than the viewport put its own header at a negative offset that no scrolling
   could reach, because a flex item centred past the start edge sits outside
   the scrollable area entirely.

   `margin-block: auto` centres identically while there is room to spare and
   collapses to zero when there is not, so an oversized dialog starts at the
   top and scrolls normally. Preferred over `align-items: safe center`, which
   does the same in one line but only on newer engines. */
.f-modal__wrapper--middle { align-items: flex-start; }
.f-modal__wrapper--middle > .f-modal__body { margin-block: auto; }
.f-modal__wrapper--top { align-items: flex-start; }
.f-modal__wrapper--bottom { align-items: flex-end; }

.f-modal__body {
    position: relative;
    inline-size: 100%;
    background: var(--f-surface);
    border-radius: calc(var(--f-radius) * 1.6);
    box-shadow: 0 20px 60px rgba(8, 14, 12, 0.28);
    animation: f-rise 0.2s ease;
}

.f-modal__body:not(.f-modal__body--flush) { padding: 1.5rem; }
.f-modal__body--flush { padding: 0; }
.f-modal__body--xs { max-inline-size: 20rem; }
.f-modal__body--sm { max-inline-size: 26rem; }
.f-modal__body--md { max-inline-size: 34rem; }
.f-modal__body--lg { max-inline-size: 46rem; }
.f-modal__body--xl { max-inline-size: 60rem; }

.f-modal__header { display: flex; align-items: flex-start; gap: 1rem; }
.f-modal__header--center { justify-content: center; text-align: center; }
.f-modal__heading { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.f-modal__heading--reverse { flex-direction: column-reverse; }
.f-modal__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--f-text); }
.f-modal__subtitle { margin: 0; font-size: 0.85rem; color: var(--f-text-soft); }

.f-modal__close {
    order: 2;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--f-text-soft);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.f-modal__close:hover { background: rgba(0, 0, 0, 0.1); }
.f-modal__loading { display: flex; justify-content: center; padding: 2rem; }

.f-modal__spinner {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 2px solid var(--f-border);
    border-block-start-color: var(--color-primary, #1d9e75);
    border-radius: 50%;
    animation: f-spin 0.7s linear infinite;
}

.f-hidden { display: none !important; }

@keyframes f-fade { from { opacity: 0; } }
@keyframes f-rise { from { opacity: 0; transform: translateY(12px); } }

/* ========================================================================
   Slider
   ======================================================================== */

.f-slider { position: relative; display: block; }
.f-slider--static .f-slider__controls,
.f-slider--static .f-slider__dots { display: none; }

.f-slider__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.15rem;
}

.f-slider__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.f-slider__subtitle { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--f-text-soft); }
.f-slider__head-actions { flex: none; display: flex; align-items: center; gap: 0.75rem; }
.f-slider__all { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #1d9e75); text-decoration: none; }
.f-slider__all:hover { text-decoration: underline; }

.f-slider__viewport { position: relative; }

/*
    Native scroll-snap does the work. grid-auto-columns derives each slide's
    width from the requested slides-per-view, so a fractional value (peeking
    the next card) is a legitimate setting rather than a special case.
*/
.f-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--f-slider-per-view, 4) - 1) * 1rem) / var(--f-slider-per-view, 4));
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block-end: 0.25rem;
}

.f-slider__track::-webkit-scrollbar { display: none; }

.f-slider__track:focus-visible {
    outline: 2px solid var(--color-primary, #1d9e75);
    outline-offset: 3px;
    border-radius: var(--f-radius);
}

.f-slider__slide { scroll-snap-align: start; min-inline-size: 0; }

@media (max-width: 1023px) { .f-slider__track { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (max-width: 767px) { .f-slider__track { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (max-width: 479px) { .f-slider__track { grid-auto-columns: 78%; } }

.f-slider__controls { display: flex; gap: 0.5rem; }

.f-slider__arrow {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--f-border);
    border-radius: 50%;
    background: var(--f-surface);
    color: var(--f-text);
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.f-slider__arrow:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
.f-slider__arrow:disabled { opacity: 0.35; cursor: default; }

/* Chevron drawn from two borders — no icon asset, and it mirrors with the
   writing mode because the sides are logical. */
.f-slider__arrow::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-start: 2px solid currentColor;
    border-block-start: 2px solid currentColor;
}

.f-slider__arrow--prev::before { transform: rotate(-45deg); margin-inline-start: 0.2rem; }
.f-slider__arrow--next::before { transform: rotate(135deg); margin-inline-end: 0.2rem; }

/*
    The chevron's SIDES are logical (they follow the writing mode) but its
    ROTATION is not — in RTL the same -45° turned the glyph downwards. The
    angles flip with the direction so prev/next always point outwards.
*/
[dir='rtl'] .f-slider__arrow--prev::before,
.f-slider[dir='rtl'] .f-slider__arrow--prev::before { transform: rotate(45deg); }
[dir='rtl'] .f-slider__arrow--next::before,
.f-slider[dir='rtl'] .f-slider__arrow--next::before { transform: rotate(-135deg); }

.f-slider:not(.f-slider--controls-outer) .f-slider__controls {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    transform: translateY(-50%);
    justify-content: space-between;
    pointer-events: none;
}

.f-slider:not(.f-slider--controls-outer) .f-slider__arrow {
    pointer-events: auto;
    margin-inline: -0.75rem;
    box-shadow: 0 2px 10px rgba(8, 14, 12, 0.12);
}

.f-slider--arrows-centered .f-slider__controls { inset-block-start: 38%; }

.f-slider__dots { display: flex; justify-content: center; gap: 0.4rem; margin-block-start: 1rem; }

.f-slider__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--f-border);
    cursor: pointer;
    transition: inline-size 0.2s ease, background-color 0.2s ease;
}

.f-slider__dot.is-active {
    inline-size: 1.35rem;
    border-radius: 999px;
    background: var(--color-primary, #1d9e75);
}

/* ---- gap + auto widths (slides-per-view="auto") ---- */
.f-slider__track { gap: var(--f-slider-gap, 1rem); }
.f-slider--per-auto .f-slider__track { grid-auto-columns: max-content; }

/* ---- centered (blog / photos): active slide in the middle, edges peeking ---- */
.f-slider--centered .f-slider__slide { scroll-snap-align: center; }
.f-slider--centered .f-slider__track { scroll-padding-inline: 10%; padding-inline: 10%; }

/* ---- vertical & fullscreen: the same track, snapping on the other axis ---- */
@media (min-width: 768px) {
    .f-slider--vertical .f-slider__track {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-auto-rows: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        block-size: var(--f-slider-height, 480px);
    }
    .f-slider--vertical .f-slider__slide { scroll-snap-align: start; }
}
.f-slider--fullscreen { --f-slider-height: 100svh; }
.f-slider--fullscreen .f-slider__track { padding-block-end: 0; }

/* ---- type presets that are pure sizing ---- */
.f-slider--fullwidth .f-slider__track,
.f-slider--fullscreen .f-slider__track,
.f-slider--testimonials .f-slider__track,
.f-slider--blog .f-slider__track,
.f-slider--thumbs .f-slider__track {
    grid-auto-columns: 100%;
}
@media (min-width: 1024px) {
    .f-slider--testimonials .f-slider__track { grid-auto-columns: calc((100% - var(--f-slider-gap, 1rem)) / 2); }
}

/* ---- overlays: badges and buttons an author placed over the gallery ---- */
.f-slider__extra { position: absolute; z-index: 2; }

/* ---- thumbs gallery ---- */
.f-slider__body { display: flex; flex-direction: column; gap: 0.75rem; }
.f-slider__body .f-slider__viewport { min-inline-size: 0; flex: 1; }

.f-slider__thumbs { position: relative; }

.f-slider__thumbs-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.f-slider__thumbs-track::-webkit-scrollbar { display: none; }

.f-slider__thumb {
    flex: none;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--f-radius);
    overflow: hidden;
    background: none;
    cursor: pointer;
    scroll-snap-align: start;
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.f-slider__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.f-slider__thumb:hover { opacity: 1; }
.f-slider__thumb.is-active { opacity: 1; border-color: var(--color-primary, #1d9e75); }

.f-slider__thumbs-nav {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: -0.5rem;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}
.f-slider__thumbs-nav .f-slider__arrow { pointer-events: auto; inline-size: 1.75rem; block-size: 1.75rem; }

/* Thumbs beside the gallery on desktop. */
@media (min-width: 768px) {
    .f-slider--vertical-thumbs .f-slider__body { flex-direction: row-reverse; }
    .f-slider--vertical-thumbs .f-slider__thumbs-track {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        max-block-size: var(--f-slider-height, 480px);
        scroll-snap-type: y proximity;
    }
    .f-slider--vertical-thumbs .f-slider__thumbs-nav { display: none; }
}

/* Thumbs as a wrapping grid — no strip, no arrows. */
.f-slider--grid-thumbs .f-slider__thumbs-track { flex-wrap: wrap; overflow: visible; }
.f-slider--grid-thumbs .f-slider__thumbs-nav { display: none; }

.f-products-slider { display: block; }
.f-products-slider[hidden] { display: none; }

.f-products-slider__skeleton {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3rem) / 4);
    gap: 1rem;
    overflow: hidden;
}

/* ========================================================================
   Menu
   ======================================================================== */

/*
    The host is transparent to layout.

    In its default mode this component wraps markup the theme already rendered,
    and the theme's own rules position that markup — a header's flex row expects
    the <nav> as its child, not a wrapper around it. `display: contents` lets the
    element carry behaviour and state without introducing a box that would break
    whatever layout it was dropped into.
*/
.f-menu { display: contents; }
.f-menu[hidden] { display: none; }

/* Rendered mode supplies its own box, since there is no theme markup to defer to. */
.f-menu__nav { display: block; }
.f-menu__list { list-style: none; margin: 0; padding: 0; }
.f-menu__list--root { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.f-menu__item { position: relative; }

.f-menu__link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--f-radius);
    color: var(--f-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.f-menu__link:hover { color: var(--color-primary, #1d9e75); }
.f-menu__link:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: -2px; }
.f-menu__image { inline-size: 1.5rem; block-size: 1.5rem; border-radius: 4px; object-fit: cover; }

.f-menu__caret {
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-block-start: -0.2rem;
    transition: transform 0.18s ease;
}

.f-menu__item.is-open > .f-menu__link .f-menu__caret {
    transform: rotate(-135deg);
    margin-block-start: 0.15rem;
}

.f-menu__list--sub {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 60;
    min-inline-size: 12rem;
    padding: 0.4rem;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    box-shadow: 0 12px 32px rgba(8, 14, 12, 0.14);
    display: none;
}

/*
    State rules carry an extra class on purpose.

    A theme may put its own class on the host — the reference theme uses
    class="main-menu" so the component inherits its drawer transform and
    colours — and a descendant rule like `.main-menu ul { display: flex }`
    (0,0,1,1) outranks a single-class `.f-menu__list--sub` (0,0,1,0). That
    would leave every submenu permanently open. Two classes (0,0,2,0) win
    without reaching for !important.
*/
.f-menu .f-menu__list--sub { display: none; }
.f-menu .f-menu__item.is-open > .f-menu__list--sub { display: block; }

.f-menu__list--sub .f-menu__list--sub { inset-block-start: -0.4rem; inset-inline-start: 100%; }
.f-menu__list--flip { inset-inline-start: auto; inset-inline-end: 0; }
.f-menu__list--sub .f-menu__list--flip { inset-inline-end: 100%; }

/* The drawer is the same markup laid out as a stack that expands in place. */
.f-menu--mobile .f-menu__list--root { flex-direction: column; align-items: stretch; gap: 0; }
.f-menu--mobile .f-menu__link { padding: 0.85rem 0.25rem; border-block-end: 1px solid var(--f-border); }
.f-menu--mobile .f-menu__caret { margin-inline-start: auto; }

.f-menu--mobile .f-menu__list--sub {
    position: static;
    display: none;
    min-inline-size: 0;
    padding: 0;
    padding-inline-start: 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.f-menu--mobile .f-menu__item.is-open > .f-menu__list--sub { display: block; }

/* ========================================================================
   Breadcrumb
   ======================================================================== */

.f-breadcrumb { display: block; }
.f-breadcrumb[hidden] { display: none; }

.f-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--f-text-soft);
}

.f-breadcrumb__item { display: flex; align-items: center; gap: 0.4rem; }
.f-breadcrumb__item + .f-breadcrumb__item::before { content: "/"; color: var(--f-text-faint); }
.f-breadcrumb__item a { color: inherit; text-decoration: none; }
.f-breadcrumb__item a:hover { color: var(--color-primary, #1d9e75); }
.f-breadcrumb__item.is-current { color: var(--f-text); font-weight: 600; }

/* ========================================================================
   Footer: social, payments, apps, trust badges
   ======================================================================== */

.f-social[hidden],
.f-payments[hidden],
.f-apps[hidden],
.f-trust[hidden] { display: none; }

.f-social__title,
.f-payments__title,
.f-apps__title {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: inherit;
}

.f-social__list,
.f-payments__list,
.f-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.f-social__link {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--f-border);
    border-radius: 50%;
    color: inherit;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.f-social__link:hover {
    background: var(--color-primary, #1d9e75);
    border-color: transparent;
    color: var(--color-on-primary, #fff);
    transform: translateY(-1px);
}

.f-social__link:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-social--share .f-social__list { gap: 0.4rem; }

.f-payments__item {
    inline-size: 2.9rem;
    block-size: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--f-border);
    border-radius: 5px;
    background: var(--f-surface);
    color: var(--f-text-soft);
}

.f-payments__logo {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: 0.15rem 0.3rem;
}

.f-payments__label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.f-apps__list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.f-apps--vertical .f-apps__list { flex-direction: column; align-items: flex-start; }

.f-apps__item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.f-apps__item:hover { border-color: var(--color-primary, #1d9e75); transform: translateY(-1px); }
.f-apps__text { display: flex; flex-direction: column; line-height: 1.15; }
.f-apps__sub { font-size: 0.6rem; opacity: 0.72; }
.f-apps__store { font-size: 0.85rem; font-weight: 700; }

.f-trust__list { gap: 0.75rem; }

.f-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    font-size: 0.75rem;
}

.f-trust__text { display: flex; flex-direction: column; line-height: 1.25; }
.f-trust__label { font-size: 0.68rem; opacity: 0.7; }
.f-trust__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.f-trust__glyph { flex: none; color: var(--color-primary, #1d9e75); }

/* The certificate logos ship as 300–600px PNGs; without a cap they rendered
   at full size and the footer card grew to hold them. A badge is a chip:
   the logo is the height of two text lines, nothing more. */
.f-trust__logo {
    flex: none;
    block-size: 2.25rem;
    inline-size: auto;
    max-inline-size: 4.5rem;
    object-fit: contain;
    border-radius: 0.35rem;
}

.f-trust--dark .f-trust__item { border-color: rgba(255, 255, 255, 0.22); }
.f-trust--dark .f-trust__glyph { color: currentColor; }
/* On a dark footer the logos keep their white plate so colour marks stay legible. */
.f-trust--dark .f-trust__logo { background: #fff; padding: 0.15rem; }

@media (prefers-reduced-motion: reduce) {
    .f-slider__track { scroll-behavior: auto; }
    .f-btn__loader,
    .f-modal__spinner,
    .f-modal__overlay,
    .f-modal__body { animation: none; }
    .f-social__link:hover,
    .f-apps__item:hover { transform: none; }
}

/*
    `mobile` has to mean mobile. Without this the drawer variant renders as a
    plain vertical list in the desktop flow, on top of whatever the theme put
    in its header — which is exactly what it did.

    A theme that wants an always-visible menu omits the attribute.
*/
@media (min-width: 1024px) {
    .f-menu--mobile { display: none; }
}

/*
    Share row: a labelled strip, not a continuation of the buy box and not a
    bare cluster of circles. Laid out inline so the label and the icons read as
    one control, and aligned to the content start so it lines up with the
    buy box above it in either direction.
*/
.f-social--share {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--f-border);
}

.f-social--share .f-social__list { justify-content: flex-start; }

.f-social__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--f-text-soft);
}

/* Slightly smaller than the footer set — this is a secondary action. */
.f-social--share .f-social__link { inline-size: 2rem; block-size: 2rem; }

/*
    Product share row: the divider moves from the component to this wrapper so
    the copy-link button sits on the same strip. Telegram is dropped in favour
    of copying the URL.
*/
.product-single__share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--f-border);
}

.product-single__share .f-social--share { margin: 0; padding: 0; border: 0; }
.product-single__share .f-social__item:has(.f-social__link--telegram) { display: none; }

.product-single__copy-link {
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--f-border);
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.product-single__copy-link:hover,
.product-single__copy-link.is-copied {
    background: var(--color-primary, #1d9e75);
    border-color: transparent;
    color: var(--color-on-primary, #fff);
}

.product-single__copy-link:hover { transform: translateY(-1px); }
.product-single__copy-link:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.product-single__copied-icon,
.product-single__copy-link.is-copied .product-single__copy-icon { display: none; }
.product-single__copy-link.is-copied .product-single__copied-icon { display: block; }

/* ========================================================================
   Announcement bar
   A full-width strip above the header. Short text sits centred; text
   wider than the viewport becomes a marquee that follows the page
   direction and pauses on hover. Colours default to the primary but are
   plain custom properties for a theme to override.
   ======================================================================== */

.f-announce {
    display: block;
    background: var(--f-announce-bg, var(--color-primary, #1d9e75));
    color: var(--f-announce-fg, var(--color-on-primary, #fff));
    font-size: 0.85rem;
    font-weight: 600;
}
.f-announce[hidden] { display: none; }

.f-announce__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.35rem 2.5rem;
    overflow: hidden;
    text-align: center;
}

.f-announce__text,
.f-announce__link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.f-announce__link:hover { text-decoration: underline; }

/* Marquee: the track holds the message twice so the loop is seamless. */
.f-announce--scroll .f-announce__inner { justify-content: flex-start; padding-inline: 0; }
.f-announce__track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: f-announce-ltr var(--f-announce-duration, 18s) linear infinite;
}
.f-announce__track > * { padding-inline-end: 4rem; }
.f-announce[dir="rtl"] .f-announce__track,
[dir="rtl"] .f-announce__track { animation-name: f-announce-rtl; }
.f-announce__track:hover { animation-play-state: paused; }

@keyframes f-announce-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes f-announce-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

.f-announce__close {
    position: absolute;
    inset-inline-end: 1rem;
    top: 50%;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
}
.f-announce__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.f-announce--scroll .f-announce__close { inset-inline-end: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .f-announce__track { animation: none; }
    .f-announce--scroll .f-announce__inner { justify-content: center; overflow-x: auto; }
}

/* ========================================================================
   Loading — the shared spinner, standalone / overlay / full page
   ======================================================================== */

.f-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--f-text-soft, currentColor);
}

.f-loading__spinner {
    flex: none;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border: 2px solid var(--f-border);
    border-block-start-color: var(--color-primary, #1d9e75);
    border-radius: 50%;
    animation: f-spin 0.7s linear infinite;
}

.f-loading--sm .f-loading__spinner { inline-size: 1rem; block-size: 1rem; border-width: 2px; }
.f-loading--lg .f-loading__spinner { inline-size: 2.25rem; block-size: 2.25rem; border-width: 3px; }

/* A caption only makes sense on the full-page overlay; elsewhere it is
   screen-reader text so the spinner alone stays the visible affordance. */
.f-loading:not(.f-loading--page) .f-loading__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.f-loading--overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    justify-content: center;
    background: color-mix(in srgb, var(--f-surface, #fff) 80%, transparent);
}

.f-loading--page {
    position: fixed;
    inset: 0;
    z-index: 1300;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}

.f-loading--page .f-loading__spinner {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-width: 3px;
    border-color: rgba(255, 255, 255, 0.3);
    border-block-start-color: #fff;
}

.f-loading--page .f-loading__label { font-size: 0.95rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .f-loading__spinner { animation-duration: 1.4s; }
}

/* ========================================================================
   Notifications — the global toast stack
   ======================================================================== */

.f-notifications {
    position: fixed;
    z-index: 1150;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    inline-size: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.f-notifications--top-end { inset-block-start: 1.25rem; inset-inline-end: 1.25rem; }
.f-notifications--top-start { inset-block-start: 1.25rem; inset-inline-start: 1.25rem; }
.f-notifications--top-center { inset-block-start: 1.25rem; inset-inline-start: 50%; transform: translateX(-50%); }
.f-notifications--bottom-end { inset-block-end: 1.25rem; inset-inline-end: 1.25rem; }
.f-notifications--bottom-start { inset-block-end: 1.25rem; inset-inline-start: 1.25rem; }
.f-notifications--bottom-center { inset-block-end: 1.25rem; inset-inline-start: 50%; transform: translateX(-50%); }

.f-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.65rem;
    background: var(--f-surface, #fff);
    color: var(--f-text, #1f2937);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.f-notifications--bottom-end .f-toast,
.f-notifications--bottom-start .f-toast,
.f-notifications--bottom-center .f-toast { transform: translateY(0.5rem); }

.f-toast.is-in { opacity: 1; transform: none; }
.f-toast.is-out { opacity: 0; }

.f-toast__icon { flex: none; margin-block-start: 0.1rem; }
.f-toast--success .f-toast__icon { color: var(--f-success, #15803d); }
.f-toast--error .f-toast__icon { color: var(--f-danger, #b91c1c); }
.f-toast--warning .f-toast__icon { color: #b45309; }
.f-toast--info .f-toast__icon { color: var(--color-primary, #1d9e75); }

.f-toast__message { flex: 1; margin: 0; font-size: 0.88rem; line-height: 1.4; }

.f-toast__close {
    flex: none;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.f-toast__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

@media (prefers-reduced-motion: reduce) {
    .f-toast { transition: none; }
}

/* ========================================================================
   Progress bar — a filled bar for a value against a whole
   ======================================================================== */

.f-progress { display: block; }

.f-progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.4rem;
    font-size: 0.85rem;
}

.f-progress__label { color: var(--f-text, currentColor); }
.f-progress__value { color: var(--f-text-soft, currentColor); font-variant-numeric: tabular-nums; }

.f-progress__track {
    inline-size: 100%;
    block-size: 0.5rem;
    border-radius: 999px;
    background: var(--f-border, rgba(0, 0, 0, 0.08));
    overflow: hidden;
}

.f-progress__fill {
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-primary, #1d9e75);
    transition: inline-size 0.3s ease;
}

.f-progress--success .f-progress__fill { background: var(--f-success, #15803d); }
.f-progress--warning .f-progress__fill { background: #b45309; }
.f-progress--danger .f-progress__fill { background: var(--f-danger, #b91c1c); }

.f-progress--sm .f-progress__track { block-size: 0.3rem; }
.f-progress--lg .f-progress__track { block-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
    .f-progress__fill { transition: none; }
}

/* ========================================================================
   Tooltip — a small hover/focus hint
   ======================================================================== */

.f-tooltip {
    position: relative;
    display: inline-block;
}

.f-tooltip__trigger { display: inline-flex; }

.f-tooltip__bubble {
    position: absolute;
    z-index: 50;
    inline-size: max-content;
    max-inline-size: 16rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.4rem;
    background: var(--f-text, #1f2430);
    color: var(--f-surface, #fff);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.f-tooltip.is-open .f-tooltip__bubble { opacity: 1; visibility: visible; transform: none; }

.f-tooltip[data-tooltip-position="top"] .f-tooltip__bubble {
    inset-block-end: calc(100% + 0.4rem);
    inset-inline-start: 50%;
    translate: -50% 0;
}
.f-tooltip[data-tooltip-position="top"].is-open .f-tooltip__bubble { transform: translate(-50%, 0); }
.f-tooltip[data-tooltip-position="top"]:not(.is-open) .f-tooltip__bubble { transform: translate(-50%, 2px); }

.f-tooltip[data-tooltip-position="bottom"] .f-tooltip__bubble {
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-start: 50%;
}
.f-tooltip[data-tooltip-position="bottom"].is-open .f-tooltip__bubble { transform: translate(-50%, 0); }
.f-tooltip[data-tooltip-position="bottom"]:not(.is-open) .f-tooltip__bubble { transform: translate(-50%, -2px); }

.f-tooltip[data-tooltip-position="start"] .f-tooltip__bubble {
    inset-inline-end: calc(100% + 0.4rem);
    inset-block-start: 50%;
    transform: translateY(-50%);
}
.f-tooltip[data-tooltip-position="end"] .f-tooltip__bubble {
    inset-inline-start: calc(100% + 0.4rem);
    inset-block-start: 50%;
    transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .f-tooltip__bubble { transition: none; }
}

/* ========================================================================
   Skeleton — a content-shaped loading placeholder
   ======================================================================== */

.f-skeleton {
    display: block;
    border-radius: var(--f-radius, 0.5rem);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--f-text, #1f2430) 8%, transparent) 25%,
        color-mix(in srgb, var(--f-text, #1f2430) 14%, transparent) 37%,
        color-mix(in srgb, var(--f-text, #1f2430) 8%, transparent) 63%);
    background-size: 400% 100%;
    animation: f-shimmer 1.4s ease infinite;
}

.f-skeleton--circle { border-radius: 50%; }

.f-skeleton--text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: none;
    animation: none;
}

.f-skeleton__line {
    display: block;
    block-size: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--f-text, #1f2430) 8%, transparent) 25%,
        color-mix(in srgb, var(--f-text, #1f2430) 14%, transparent) 37%,
        color-mix(in srgb, var(--f-text, #1f2430) 8%, transparent) 63%);
    background-size: 400% 100%;
    animation: f-shimmer 1.4s ease infinite;
}

@keyframes f-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .f-skeleton, .f-skeleton__line { animation: none; }
}

/* ========================================================================
   Placeholder — the "nothing here" block
   ======================================================================== */

.f-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    text-align: center;
}

.f-placeholder__icon { font-size: 2.5rem; line-height: 1; }
.f-placeholder__text { margin: 0 0 0.4rem; color: var(--f-text-soft); }
.f-placeholder__action { margin-block-start: 0.25rem; }

/* ========================================================================
   Maintenance alert — a prominent, store-wide notice
   ======================================================================== */

.f-maintenance {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.9rem;
}

.f-maintenance[hidden] { display: none; }
.f-maintenance__icon { flex: none; margin-block-start: 0.1rem; }
.f-maintenance__text { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.f-maintenance__title { font-weight: 700; }

.f-maintenance__close {
    flex: none;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}
.f-maintenance__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }

/* ========================================================================
   File upload — a drag-and-drop picker with previews
   ======================================================================== */

.f-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    border: 1.5px dashed var(--f-border);
    border-radius: var(--f-radius);
    color: var(--f-text-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.f-upload__zone:hover,
.f-upload__zone:focus-visible { border-color: var(--color-primary, #1d9e75); }
.f-upload__zone.is-dragover { border-color: var(--color-primary, #1d9e75); background: color-mix(in srgb, var(--color-primary, #1d9e75) 6%, transparent); }
.f-upload__icon { color: var(--color-primary, #1d9e75); }
.f-upload__label { font-size: 0.88rem; text-align: center; }

.f-upload__error { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--f-danger, #b91c1c); }

.f-upload__list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.f-upload__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
}
.f-upload__thumb { flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: calc(var(--f-radius) * 0.6); object-fit: cover; background: rgba(0, 0, 0, 0.04); }
.f-upload__thumb--file { display: flex; align-items: center; justify-content: center; color: var(--f-text-soft); }
.f-upload__name { flex: 1; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-upload__size { flex: none; font-size: 0.78rem; color: var(--f-text-soft); }
.f-upload__remove {
    flex: none;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--f-text-soft);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.f-upload__remove:hover { background: rgba(0, 0, 0, 0.06); color: var(--f-danger, #b91c1c); }

/* ========================================================================
   Tabs — a horizontal switcher between panels
   ======================================================================== */

.f-tabs__header {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-block-end: 1px solid var(--f-border);
    margin-block-end: 1.25rem;
}

.f-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-block-end: 2px solid transparent;
    background: none;
    color: var(--f-text-soft);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.f-tabs__tab:hover { color: var(--f-text); }
.f-tabs__tab.is-active { color: var(--color-primary, #1d9e75); border-block-end-color: var(--color-primary, #1d9e75); }

.f-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--f-border);
    color: var(--f-text-soft);
    font-size: 0.72rem;
    font-weight: 700;
}
.f-tabs__tab.is-active .f-tabs__badge { background: var(--color-primary, #1d9e75); color: var(--color-on-primary, #fff); }

/* ========================================================================
   Price range — a min/max filter, two handles over one track
   ======================================================================== */

.f-price-range { display: block; }

.f-price-range__numbers {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 1rem;
}

.f-price-range__number { inline-size: 100%; min-inline-size: 0; text-align: center; font-variant-numeric: tabular-nums; }
.f-price-range__sep { flex: none; color: var(--f-text-soft); }

.f-price-range__track {
    position: relative;
    block-size: 4px;
    margin-block: 1.35rem;
    border-radius: 999px;
    background: var(--f-border);
}

.f-price-range__fill {
    position: absolute;
    inset-block: 0;
    border-radius: inherit;
    background: var(--color-primary, #1d9e75);
}

.f-price-range__slider {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 100%;
    block-size: 4px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.f-price-range__slider::-webkit-slider-runnable-track { background: transparent; }
.f-price-range__slider::-moz-range-track { background: transparent; }

.f-price-range__slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    border-radius: 50%;
    background: var(--color-primary, #1d9e75);
    border: 2px solid var(--f-surface, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.f-price-range__slider::-moz-range-thumb {
    pointer-events: auto;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    border-radius: 50%;
    background: var(--color-primary, #1d9e75);
    border: 2px solid var(--f-surface, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* ========================================================================
   Datetime picker — a date, and (given slots) a time to go with it
   ======================================================================== */

.f-datetime { display: flex; flex-direction: column; gap: 0.85rem; }
.f-datetime__date { inline-size: 100%; }

.f-datetime__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.f-datetime__slot {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface, #fff);
    color: var(--f-text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.f-datetime__slot:hover { border-color: var(--color-primary, #1d9e75); }
.f-datetime__slot.is-selected { border-color: var(--color-primary, #1d9e75); background: var(--color-primary, #1d9e75); color: var(--color-on-primary, #fff); }

/* ========================================================================
   Search — a header trigger opening a live product-result dropdown, hosted
   in the shared <falak-modal> (position="top") rather than its own overlay
   ======================================================================== */

#falak-search .f-modal__body { max-inline-size: 640px; }

.f-search__panel {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.f-search__form {
    position: relative;
    display: flex;
    align-items: center;
}

.f-search__form .f-search__icon {
    position: absolute;
    inset-inline-start: 0.9rem;
    display: inline-flex;
    color: var(--f-muted, #8a8f98);
    pointer-events: none;
}

.f-search__input {
    inline-size: 100%;
    padding-block: 0.75rem;
    padding-inline: 2.6rem 0.9rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface, #fff);
    color: var(--f-text);
    font: inherit;
    font-size: 1rem;
}
.f-search__input:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 1px; }

.f-search__results {
    margin-block-start: 0.75rem;
    max-block-size: min(60vh, 28rem);
    overflow-y: auto;
}

.f-search[data-busy="true"] .f-search__results { opacity: 0.6; }

.f-search__list { display: flex; flex-direction: column; gap: 0.25rem; }

.f-search__link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem;
    border-radius: var(--f-radius);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}
.f-search__link:hover,
.f-search__link:focus-visible { background: rgba(0, 0, 0, 0.04); }

.f-search__thumb {
    flex-shrink: 0;
    display: block;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--f-radius);
    overflow: hidden;
    background: var(--f-surface-alt, #f2f3f5);
}
.f-search__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.f-search__thumb-placeholder { display: block; inline-size: 100%; block-size: 100%; }

.f-search__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-inline-size: 0;
}

.f-search__name {
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-search__price { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.88rem; }
.f-search__price-now { font-weight: 600; color: var(--color-primary, #1d9e75); }
.f-search__price-was { color: var(--f-muted, #8a8f98); font-size: 0.8rem; }

.f-search__view-all {
    display: block;
    margin-block-start: 0.5rem;
    padding-block: 0.7rem;
    text-align: center;
    border-block-start: 1px solid var(--f-border);
    color: var(--color-primary, #1d9e75);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.f-search__view-all:hover { text-decoration: underline; }

.f-search__empty {
    padding-block: 1.5rem;
    text-align: center;
    color: var(--f-muted, #8a8f98);
    font-size: 0.9rem;
}

@media (max-width: 639px) {
    #falak-search .f-modal__wrapper--top { padding-block-start: 0; }
    #falak-search .f-modal__body { max-inline-size: 100%; border-radius: 0; min-block-size: 100dvh; }
}

/* ========================================================================
   Mini checkout — "buy now" for one product, hosted in the shared
   <falak-modal>. Its steps, methods, form and totals all reuse the
   .f-checkout__* classes above; only the product summary and footer are new.
   ======================================================================== */

.f-mini-checkout__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block-end: 1rem;
    margin-block-end: 1rem;
    border-block-end: 1px solid var(--f-border);
}

.f-mini-checkout__image {
    flex: none;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: var(--f-radius);
    object-fit: cover;
    background: var(--f-surface-alt, #f2f3f5);
}
.f-mini-checkout__image--empty { display: block; }

.f-mini-checkout__item-text { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.f-mini-checkout__item-name { font-weight: 700; color: var(--f-text); }
.f-mini-checkout__item-meta { font-size: 0.85rem; color: var(--f-text-soft); }

.f-mini-checkout__footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block-start: 1rem;
    margin-block-start: 0.5rem;
}
.f-datetime__slot.is-selected { border-color: var(--color-primary, #1d9e75); background: var(--color-primary, #1d9e75); color: var(--color-on-primary, #fff); }

/* ========================================================================
   Countdown — offer timers, pre-order clocks, and the offer band
   ======================================================================== */

.f-countdown { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.f-countdown[hidden] { display: none; }
.f-countdown--horizontal { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem 1.25rem; }
.f-countdown__prefix { font-weight: 600; color: var(--f-text); }
.f-countdown__hint { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--f-text-soft); }

/* Days → seconds reads the same way in both directions: it is a number, not a sentence. */
.f-countdown__list {
    display: flex;
    direction: ltr;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
}

.f-countdown__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.6rem;
    padding: 0.3rem 0.4rem;
    color: var(--f-text);
}

.f-countdown__item[hidden] { display: none; }

/* A colon before every visible unit but the first — `~` rather than `+`
   so a unit auto-segments hid does not leave a stray colon on the next one. */
.f-countdown:not(.f-countdown--boxed) .f-countdown__item:not([hidden]) ~ .f-countdown__item:not([hidden])::before {
    content: ":";
    position: absolute;
    left: -0.35rem;
    top: 0.25rem;
    font-weight: 700;
    color: var(--f-text-faint);
}

.f-countdown__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.f-countdown__label { font-size: 0.7rem; color: var(--f-text-soft); margin-block-start: 0.15rem; }

.f-countdown--boxed .f-countdown__list { gap: 0.5rem; }
.f-countdown--boxed .f-countdown__item {
    min-inline-size: 3.25rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
}

.f-countdown[data-size="sm"] .f-countdown__value { font-size: 0.95rem; }
.f-countdown[data-size="sm"] .f-countdown__item { min-inline-size: 2.1rem; padding: 0.2rem 0.3rem; }
.f-countdown[data-size="sm"] .f-countdown__label { font-size: 0.6rem; }
.f-countdown[data-size="lg"] .f-countdown__value { font-size: 2rem; }
.f-countdown[data-size="lg"] .f-countdown__item { min-inline-size: 4.25rem; padding: 0.6rem 0.75rem; }
.f-countdown[data-size="lg"] .f-countdown__label { font-size: 0.8rem; }

.f-countdown[data-color="light"] .f-countdown__value,
.f-countdown[data-color="light"] .f-countdown__prefix,
.f-countdown[data-color="light"] .f-countdown__ended { color: #fff; }
.f-countdown[data-color="light"] .f-countdown__label { color: rgba(255, 255, 255, 0.75); }
.f-countdown[data-color="light"].f-countdown--boxed .f-countdown__item { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
.f-countdown[data-color="primary"].f-countdown--boxed .f-countdown__item { background: var(--color-primary, #1d9e75); border-color: transparent; }
.f-countdown[data-color="primary"] .f-countdown__value { color: var(--color-on-primary, #fff); }
.f-countdown[data-color="primary"] .f-countdown__label { color: var(--color-on-primary, #fff); opacity: 0.8; }

.f-countdown__ended { margin: 0; font-weight: 600; color: var(--f-danger); }
.f-countdown__ended[hidden] { display: none; }
.f-countdown[data-ended="true"] .f-countdown__list { opacity: 0.45; }
.f-countdown__invalid { margin: 0; font-size: 0.85rem; color: var(--f-danger); }

.f-countdown__info { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; font-size: 0.9rem; color: var(--f-text-soft); }
.f-countdown__info b { color: var(--f-text); }
.f-countdown__pre-order { display: flex; flex-direction: column; align-items: center; }
.f-countdown__button { display: inline-flex; align-items: center; gap: 0.45rem; }

/* The band: headline, copy and button around the clock, on a coloured
   (or pictured) panel. The element itself is the panel so the customizer's
   background binding and the `image` attribute paint the same surface. */
.f-countdown--band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg, 1rem);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    background-size: cover;
    background-position: center;
}
.f-countdown--band[data-theme="dark"] { background-color: #1f2430; color: #fff; }
.f-countdown--band[data-theme="light"] { background-color: var(--color-surface-alt, #f4f5f7); color: var(--f-text); }
.f-countdown--band[data-theme="primary"] { background-color: var(--color-primary, #1d9e75); color: var(--color-on-primary, #fff); }
.f-countdown--image::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.f-countdown--image[data-theme="light"]::before { background: rgba(255, 255, 255, 0.7); }

.f-countdown__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-inline-size: 60ch; margin-inline: auto; }
.f-countdown__title { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); color: inherit; }
.f-countdown__description { margin: 0; opacity: 0.9; color: inherit; }
.f-countdown--band .f-countdown__list { margin-block: 0.5rem; }
.f-countdown--band[data-theme="primary"] .f-countdown__item { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); }
.f-countdown--band[data-theme="primary"] .f-countdown__button { border-color: currentColor; color: inherit; }

/* ========================================================================
   Filters — the listing sidebar
   ======================================================================== */

.f-filters { display: block; }
.f-filters[hidden] { display: none; }
.f-filters[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.f-filters__widget { border-block-end: 1px solid var(--f-border); padding-block: 0.25rem 1rem; margin-block-end: 0.75rem; }
.f-filters__widget:last-child { border-block-end: 0; }

.f-filters__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--f-text); }
.f-filters__title > span { display: block; padding-block: 0.6rem; }

.f-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    padding: 0.6rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

/* The +/- glyph: a horizontal bar always, a vertical one until open. */
.f-filters__plusminus { position: relative; inline-size: 0.75rem; block-size: 0.75rem; flex: none; }
.f-filters__plusminus::before,
.f-filters__plusminus::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    margin-block-start: -1px;
    background: currentColor;
    transition: transform 0.2s ease;
}
.f-filters__plusminus::after { transform: rotate(90deg); }
.f-filters__widget[data-open="true"] .f-filters__plusminus::after { transform: rotate(0deg); }

.f-filters__body { padding-block-start: 0.25rem; }
.f-filters__body[hidden] { display: none; }

.f-filters__search { inline-size: 100%; margin-block-end: 0.6rem; font-size: 0.85rem; }

.f-filters__values { display: flex; flex-direction: column; gap: 0.55rem; }

.f-filters__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--f-text);
    cursor: pointer;
}
.f-filters__option.is-selected { font-weight: 600; }
.f-filters__checkbox,
.f-filters__radio { flex: none; inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--color-primary, #1d9e75); cursor: pointer; }
.f-filters__option-name { flex: 1; min-inline-size: 0; }
.f-filters__count { font-size: 0.8rem; color: var(--f-text-faint); font-variant-numeric: tabular-nums; }
.f-filters__option falak-rating-stars + .f-filters__option-name { flex: none; font-size: 0.8rem; color: var(--f-text-soft); }
/* The rating row shows stars only; the "& up" qualifier stays for screen
   readers so "4 stars" is still announced as a minimum, not an exact match. */
.f-filters__option-name--sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.f-filters__empty { margin: 0; font-size: 0.85rem; color: var(--f-text-soft); }

.f-filters__more {
    margin-block-start: 0.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary, #1d9e75);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.f-filters__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.f-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(29, 158, 117, 0.12);
    color: var(--f-text);
    font-size: 0.8rem;
}
.f-filters__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--f-text-soft);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.f-filters__chip-remove:hover { background: rgba(0, 0, 0, 0.08); color: var(--f-text); }

.f-filters__reset,
.f-filters__footer .f-btn { inline-size: 100%; justify-content: center; }
.f-filters__footer { padding-block-start: 0.5rem; }

/* ---- from packages/falak-components/src/components.account.css ---- */

/*
    Account surface — login sheet, user menu, localization sheet, offer modal
    and the review list.

    Third of the three stylesheets the entry imports; Vite's library mode
    concatenates them into one falak-components.css. Same rules as the others:
    brand tokens only, logical properties throughout.
*/

/* ========================================================================
   Login sheet
   ======================================================================== */

.f-login { display: block; }

.f-login__form { display: flex; flex-direction: column; gap: 0.65rem; margin-block-start: 0.5rem; }
.f-login__label { font-size: 0.8rem; font-weight: 600; color: var(--f-text-soft); }

.f-login__input {
    inline-size: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.95rem;
}

.f-login__input:focus {
    outline: none;
    border-color: var(--color-primary, #1d9e75);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #1d9e75) 18%, transparent);
}

/* Country picker beside the number. The row follows the page direction so
   the picker sits at the start edge; the code and number themselves are LTR. */
.f-login__phone-row { display: flex; gap: 0.5rem; }
.f-login__phone-row .f-login__input { flex: 1 1 auto; min-inline-size: 0; }

.f-login__dial { position: relative; flex: 0 0 auto; }

.f-login__dial-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    block-size: 100%;
    padding: 0.7rem 0.7rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.f-login__dial-toggle:focus-visible,
.f-login__dial-toggle[aria-expanded="true"] {
    outline: none;
    border-color: var(--color-primary, #1d9e75);
}

.f-login__dial-flag {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.125rem;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* A chevron drawn from two borders; it flips while the list is open. */
.f-login__dial-chevron {
    inline-size: 0.45em;
    block-size: 0.45em;
    margin-block-start: -0.25em;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    opacity: 0.6;
}
.f-login__dial-toggle[aria-expanded="true"] .f-login__dial-chevron {
    margin-block-start: 0.25em;
    transform: rotate(-135deg);
}

.f-login__dial-menu {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(100% + 0.4rem);
    z-index: 5;
    inline-size: 16rem;
    max-inline-size: calc(100vw - 3rem);
    padding: 0.5rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    box-shadow: 0 12px 32px rgba(8, 14, 12, 0.16);
}

.f-login__dial-search { padding-block-end: 0.5rem; }
.f-login__dial-search-input {
    inline-size: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.9rem;
}
.f-login__dial-search-input:focus {
    outline: none;
    border-color: var(--color-primary, #1d9e75);
}

.f-login__dial-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-block-size: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.f-login__dial-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
    border-radius: calc(var(--f-radius) * 0.75);
    font-size: 0.9rem;
    cursor: pointer;
}
.f-login__dial-option[hidden] { display: none; }
.f-login__dial-option:hover,
.f-login__dial-option[data-active] { background: rgba(0, 0, 0, 0.05); }
.f-login__dial-option[aria-selected="true"] {
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 12%, transparent);
    font-weight: 600;
}
.f-login__dial-option-code { flex: none; direction: ltr; font-variant-numeric: tabular-nums; }
.f-login__dial-option-name {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.75;
}

/* The code field is read back digit by digit, so it gets room to breathe. */
.f-login__input--code {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    font-variant-numeric: tabular-nums;
}

.f-login__error {
    margin: 0;
    font-size: 0.8rem;
    color: var(--f-danger);
}

.f-login__hint {
    margin: 0;
    padding: 0.45rem 0.6rem;
    border-radius: var(--f-radius);
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 10%, transparent);
    font-size: 0.78rem;
    color: var(--f-text-soft);
}

.f-login__actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 0.15rem;
}

.f-login__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    color: var(--color-primary, #1d9e75);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.f-login__link:disabled { color: var(--f-text-faint); cursor: default; text-decoration: none; }

/* ========================================================================
   User menu
   ======================================================================== */

.f-user { display: inline-block; position: relative; }
.f-user__wrap { position: relative; }

.f-user__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.f-user__trigger:hover { background: rgba(0, 0, 0, 0.05); }
.f-user__trigger:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }

.f-user__avatar {
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.f-user__avatar--lg { inline-size: 2.6rem; block-size: 2.6rem; font-size: 0.9rem; }
.f-user__name { max-inline-size: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-user__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-end: 0;
    z-index: 70;
    min-inline-size: 14rem;
    padding: 0.4rem;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: calc(var(--f-radius) * 1.2);
    box-shadow: 0 14px 36px rgba(8, 14, 12, 0.16);
}

.f-user__panel[hidden] { display: none; }

.f-user__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.65rem 0.75rem;
    border-block-end: 1px solid var(--f-border);
    margin-block-end: 0.3rem;
}

.f-user__greeting { display: flex; flex-direction: column; line-height: 1.25; min-inline-size: 0; }
.f-user__greeting small { font-size: 0.68rem; color: var(--f-text-faint); }
.f-user__greeting strong { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-user__list { list-style: none; margin: 0; padding: 0; }

.f-user__link {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: var(--f-radius);
    background: none;
    color: var(--f-text);
    font: inherit;
    font-size: 0.85rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.f-user__link:hover { background: rgba(0, 0, 0, 0.05); }
.f-user__icon { flex: none; display: inline-flex; color: var(--f-text-soft); }
.f-user__item--logout { margin-block-start: 0.25rem; padding-block-start: 0.25rem; border-block-start: 1px solid var(--f-border); }
.f-user__item--logout .f-user__link { color: var(--f-danger); }
.f-user__item--logout .f-user__icon { color: currentColor; }

/* Inline is a sidebar list, not a dropdown. */
.f-user--inline { display: block; inline-size: 100%; }
.f-user--inline .f-user__link { border-radius: 0; padding-inline: 0; }

/* ========================================================================
   Localization sheet
   ======================================================================== */

.f-locale { position: relative; display: inline-block; }
.f-locale[hidden] { display: none; }
.f-locale__chevron { display: inline-flex; opacity: 0.6; transition: transform 0.18s ease; }

.f-locale__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.f-locale__trigger:hover { background: rgba(0, 0, 0, 0.05); }
.f-locale__trigger:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-locale__globe { display: inline-flex; opacity: 0.75; }
.f-locale__sep { opacity: 0.45; }

/* ---- the preferences sheet -------------------------------------------
   Two groups (language, currency) of option cards. Each card leads with a
   small code chip (AR / EN, ر.س / $), then the name, and the chosen one
   carries a check at its end. Cards sit two abreast: the sheet holds ten
   currencies without becoming a scroll, and still reads as a list on a
   phone because the names are short. */

#falak-localization .f-modal__body { max-inline-size: 30rem; }

.f-locale__group + .f-locale__group {
    margin-block-start: 1.4rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--f-border);
}

.f-locale__heading {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--f-text-faint);
}

.f-locale__options,
.f-currency__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.f-locale__option,
.f-currency__option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    min-inline-size: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.25;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.f-locale__option:hover,
.f-currency__option:hover {
    border-color: color-mix(in srgb, var(--color-primary, #1d9e75) 55%, var(--f-border));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.f-locale__option:active,
.f-currency__option:active { transform: scale(0.985); }

.f-locale__option:focus-visible,
.f-currency__option:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }

.f-locale__option-label,
.f-currency__option-label { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; line-height: 1.25; }
.f-locale__option-name,
.f-currency__option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-locale__option-sub { font-size: 0.74rem; font-weight: 400; color: var(--f-text-faint); }

/* ---- currency as a select, and the Ok that applies both ------------- */

.f-locale__select-wrap { position: relative; display: block; }

.f-locale__select {
    inline-size: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.8rem 2.6rem 0.8rem 1rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
}

[dir="rtl"] .f-locale__select { padding: 0.8rem 1rem 0.8rem 2.6rem; }

.f-locale__select:hover { border-color: color-mix(in srgb, var(--color-primary, #1d9e75) 55%, var(--f-border)); }
.f-locale__select:focus-visible {
    outline: none;
    border-color: var(--color-primary, #1d9e75);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #1d9e75) 18%, transparent);
}

.f-locale__select-chevron {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0.9rem;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    color: var(--f-text-soft);
}

.f-locale__actions { margin-block-start: 1.5rem; }

/* The code chip leads the card; it is what the eye scans down. */
.f-locale__code,
.f-currency__code {
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-inline-size: 2.5rem;
    block-size: 1.7rem;
    padding-inline: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--f-text) 6%, transparent);
    color: var(--f-text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.f-locale__option.is-current,
.f-currency__option.is-current {
    border-color: var(--color-primary, #1d9e75);
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 8%, var(--f-surface));
    font-weight: 600;
}

.f-locale__option.is-current .f-locale__code,
.f-currency__option.is-current .f-currency__code {
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
}

/* Check mark at the end of the chosen card. */
.f-locale__option.is-current::after,
.f-currency__option.is-current::after {
    content: "";
    flex: none;
    margin-inline-start: auto;
    inline-size: 1rem;
    block-size: 1rem;
    background: var(--color-primary, #1d9e75);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / contain no-repeat;
}

@media (max-width: 380px) {
    .f-locale__options,
    .f-currency__options { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------
   Currency switcher — hidden entirely on a one-currency store
   ------------------------------------------------------------------------ */

.f-currency { position: relative; display: inline-block; }
.f-currency[hidden] { display: none; }

/* The trigger pill: code + chevron (+ a coin a theme may hide). */
.f-currency__field {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.f-currency__field:hover { background: rgba(0, 0, 0, 0.05); }
.f-currency__field:focus-visible { outline: 2px solid var(--color-primary, #1d9e75); outline-offset: 2px; }
.f-currency__icon { display: inline-flex; opacity: 0.75; }
.f-currency__current { font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.f-currency__chevron { display: inline-flex; opacity: 0.6; transition: transform 0.18s ease; }
.f-currency.is-open .f-currency__chevron,
.f-locale.is-open .f-locale__chevron { transform: rotate(180deg); }

/* The panel hangs from the trigger's inline-end edge and opens towards the
   page; where that would leave the viewport the component sets
   --f-switch-shift to slide it back in (a `translate`, so the open
   animation's `transform` is untouched). */
.f-switch__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    translate: var(--f-switch-shift, 0px) 0;
    z-index: 900;
    min-inline-size: 16.5rem;
    max-inline-size: min(20rem, calc(100vw - 2rem));
    padding: 0.5rem;
    border: 1px solid var(--f-border);
    border-radius: 1rem;
    background: var(--f-surface, #fff);
    color: var(--f-text);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: start;
    animation: f-switch-in 0.16s ease;
}

.f-switch__panel[hidden] { display: none; }

@keyframes f-switch-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.f-switch__title {
    margin: 0;
    padding: 0.55rem 0.75rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--f-text-faint);
}

.f-switch__list {
    display: grid;
    gap: 0.15rem;
    max-block-size: min(60vh, 24rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* One row: chip, name + symbol, check. */
.f-switch__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.f-switch__item:hover,
.f-switch__item:focus-visible { background: color-mix(in srgb, var(--f-text) 5%, transparent); outline: none; }
.f-switch__item.is-current { background: color-mix(in srgb, var(--color-primary, #1d9e75) 10%, transparent); }
.f-switch__item.is-current:hover,
.f-switch__item.is-current:focus-visible { background: color-mix(in srgb, var(--color-primary, #1d9e75) 15%, transparent); }

.f-switch__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-inline-size: 2.75rem;
    block-size: 2.25rem;
    padding-inline: 0.4rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--f-text) 6%, transparent);
    color: var(--f-text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.f-switch__item.is-current .f-switch__code {
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
}

.f-switch__text { display: flex; flex-direction: column; min-inline-size: 0; gap: 0.1rem; }
.f-switch__name { font-weight: 600; font-size: 0.9rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-switch__sub { font-size: 0.74rem; line-height: 1.2; color: var(--f-text-faint); }
.f-switch__item.is-current .f-switch__name { font-weight: 700; }

.f-switch__item.is-current::after {
    content: "";
    flex: none;
    margin-inline-start: auto;
    inline-size: 1rem;
    block-size: 1rem;
    background: var(--color-primary, #1d9e75);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .f-switch__panel { animation: none; }
    .f-currency__chevron,
    .f-locale__chevron { transition: none; }
}

/* Inside the preferences sheet the host must fill the row, or the option
   grid shrink-wraps to one narrow column. The option cards themselves share
   the language cards' rules above. */
.f-locale__group > falak-currency,
.f-currency[inline] { display: block; }

/* ========================================================================
   Comments / reviews
   ======================================================================== */

.f-comments { display: block; }
.f-comments[hidden] { display: none; }

.f-comments__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1rem;
}

.f-comments__title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.f-comments__empty { margin: 0; padding: 1.5rem 0; color: var(--f-text-soft); font-size: 0.88rem; }

.f-comments__gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    border: 1px dashed var(--f-border);
    border-radius: var(--f-radius);
    margin-block-end: 1.25rem;
}

.f-comments__gate p { margin: 0; font-size: 0.85rem; color: var(--f-text-soft); }

.f-comments__form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 1.1rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    margin-block-end: 1.5rem;
}

.f-comments__rating { display: flex; align-items: center; gap: 0.6rem; }
.f-comments__label { font-size: 0.82rem; font-weight: 600; color: var(--f-text-soft); }

.f-comments__textarea {
    inline-size: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.f-comments__textarea:focus {
    outline: none;
    border-color: var(--color-primary, #1d9e75);
}

.f-comments__error { margin: 0; font-size: 0.8rem; color: var(--f-danger); }

.f-comments__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.f-comments__item { padding-block-end: 1.1rem; border-block-end: 1px solid var(--f-border); }
.f-comments__item:last-child { border-block-end: 0; padding-block-end: 0; }

.f-comments__meta { display: flex; align-items: center; gap: 0.65rem; margin-block-end: 0.4rem; }

.f-comments__avatar {
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--f-text-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

/*
    The name block must NOT stretch (`flex: 1` pushed the stars to the far
    edge of the row, a screen-width away from the name they belong to).
    Avatar, name and stars sit together as one group at the reading start.
*/
.f-comments__meta > div { display: flex; flex-direction: column; line-height: 1.3; min-inline-size: 0; }
.f-comments__author { font-size: 0.85rem; }
.f-comments__date { font-size: 0.72rem; color: var(--f-text-faint); }
.f-comments__text { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--f-text-soft); }
.f-comments__more { display: flex; justify-content: center; margin-block-start: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    .f-locale__option { transition: none; }
}

/* Signed in but nothing to review against — a statement, not a call to action. */
.f-comments__gate--quiet {
    justify-content: flex-start;
    border-style: solid;
    background: rgba(0, 0, 0, 0.02);
}

/* A submitted review acknowledged while it waits for moderation. */
.f-comments__pending {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: var(--f-radius);
    border: 1px solid color-mix(in srgb, var(--color-primary, #1d9e75) 35%, transparent);
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 8%, transparent);
    font-size: 0.85rem;
    color: var(--f-text);
}


/* ========================================================================
   Offers list — the React SpecialOffersModal, laid inline as a section
   ======================================================================== */

.f-offers { display: block; }
.f-offers[hidden] { display: none; }

.f-offers__title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; }

.f-offers__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.f-offers__card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.2rem;
    border: 1px dashed color-mix(in srgb, var(--color-primary, #1d9e75) 45%, transparent);
    border-radius: calc(var(--f-radius) * 1.4);
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 6%, var(--f-surface));
}

.f-offers__benefit {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary, #1d9e75);
}

.f-offers__name { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--f-text); }
.f-offers__text { margin: 0; font-size: 0.82rem; color: var(--f-text-soft); line-height: 1.55; }

.f-offers__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin-block-start: 0.3rem;
    font-size: 0.72rem;
    color: var(--f-text-faint);
}

/* ========================================================================
   Offers banner — the legacy OffersBanner strip + its list modal trigger
   ======================================================================== */

.f-offer-banner { display: block; }
.f-offer-banner[hidden] { display: none; }

.f-offer-banner__strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 10%, var(--f-surface));
    border-block-end: 1px solid color-mix(in srgb, var(--color-primary, #1d9e75) 25%, transparent);
    font-size: 0.85rem;
}

.f-offer-banner__text { font-weight: 600; color: var(--f-text); }

.f-offer-banner__more {
    padding: 0.25rem 0.9rem;
    border: 1px solid var(--color-primary, #1d9e75);
    border-radius: 999px;
    background: transparent;
    color: var(--color-primary, #1d9e75);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.f-offer-banner__more:hover {
    background: var(--color-primary, #1d9e75);
    color: var(--color-on-primary, #fff);
}

/* ========================================================================
   Product questions & answers
   ======================================================================== */

.f-questions { display: block; }
.f-questions[hidden] { display: none; }
.f-questions[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.f-questions__header { margin-block-end: 1rem; }
.f-questions__header-row { display: flex; align-items: center; gap: 0.75rem; }

.f-questions__badge {
    flex: none;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--f-radius);
    background: rgba(0, 0, 0, 0.06);
}

.f-questions__title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.f-questions__subtitle { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--f-text-soft); }

.f-questions__gate {
    display: block;
    inline-size: 100%;
    padding: 0.9rem 1.1rem;
    border: 1px dashed var(--f-border);
    border-radius: var(--f-radius);
    background: none;
    color: var(--f-text-soft);
    font: inherit;
    font-size: 0.87rem;
    text-align: center;
    cursor: pointer;
    margin-block-end: 1.25rem;
}

.f-questions__form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.1rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    margin-block-end: 1.5rem;
}

.f-questions__form-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.f-questions__textarea {
    inline-size: 100%;
    min-block-size: 5.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: var(--f-text);
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.f-questions__textarea:focus { outline: none; border-color: var(--color-primary, #1d9e75); }

.f-questions__form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.f-questions__anonymous {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--f-text-soft);
    cursor: pointer;
    user-select: none;
}

.f-questions__error { margin: 0; font-size: 0.8rem; color: var(--f-danger); }

.f-questions__list-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; }
.f-questions__list { display: grid; gap: 1rem; }

.f-questions__item {
    padding: 1.1rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
}

.f-questions__meta { display: flex; align-items: center; gap: 0.65rem; margin-block-end: 0.5rem; }

.f-questions__avatar {
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--f-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.f-questions__who { display: flex; flex-direction: column; gap: 0.1rem; }
.f-questions__name { font-size: 0.87rem; }
.f-questions__time { font-size: 0.72rem; color: var(--f-text-soft); }

.f-questions__text { margin: 0 0 0.75rem; font-size: 0.92rem; line-height: 1.6; }

.f-questions__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--f-border);
}

.f-questions__count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--f-text-soft);
}

.f-questions__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: none;
    border-radius: var(--f-radius);
    background: none;
    color: var(--color-primary, #1d9e75);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.f-questions__toggle:hover { background: rgba(0, 0, 0, 0.05); }

.f-questions__replies {
    margin-block-start: 0.9rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--f-border);
    display: grid;
    gap: 0.7rem;
}

.f-questions__reply { padding: 0.85rem; border-radius: var(--f-radius); background: rgba(0, 0, 0, 0.03); }

.f-questions__reply-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-block-end: 0.4rem;
}

.f-questions__replier {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.f-questions__replier--admin { color: var(--f-success, #28a745); background: rgba(40, 167, 69, 0.1); }
.f-questions__replier--customer { color: var(--color-primary, #1d9e75); background: rgba(0, 0, 0, 0.05); }

.f-questions__reply-text { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--f-text-soft); }

.f-questions__empty { text-align: center; padding: 2.5rem 1rem; }

.f-questions__empty-icon {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-primary, #1d9e75);
    margin-block-end: 1rem;
}

.f-questions__empty-title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; }
.f-questions__empty-text { margin: 0; font-size: 0.88rem; color: var(--f-text-soft); }

/* ========================================================================
   User profile — the customer's editable details
   ======================================================================== */
.f-profile { display: block; }
.f-profile__guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    opacity: 0.9;
}
.f-profile__icon { opacity: 0.5; }
.f-profile__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.f-profile__stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
}
.f-profile__stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.f-profile__stat-label { font-size: 0.8rem; opacity: 0.7; }
.f-profile__form { display: flex; flex-direction: column; gap: 1rem; }
.f-profile__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.f-profile__field--address { grid-column: 1 / -1; }
.f-profile__input { inline-size: 100%; }
.f-profile__custom-fields { display: flex; flex-direction: column; gap: 0.4rem; padding-block-start: 0.25rem; border-block-start: 1px solid var(--f-border); }
.f-field__error { font-size: 0.8rem; color: var(--f-danger, #b91c1c); }
.f-profile__error { margin: 0; font-size: 0.9rem; color: var(--f-danger, #b91c1c); }
.f-profile__actions { display: flex; justify-content: flex-end; }
.f-profile[aria-busy="true"] .f-profile__save { opacity: 0.6; pointer-events: none; }

/* ========================================================================
   Order — one order: banner, header, progress, products, downloads, payment,
   address, tracking, actions, info. Compact mode keeps items + totals only.
   ======================================================================== */
.f-order { display: flex; flex-direction: column; gap: 1.25rem; }
.f-order__guest, .f-order__empty, .f-order__loading { text-align: center; padding: 1.5rem 1rem; opacity: 0.85; }
.f-order__skeleton { display: flex; flex-direction: column; gap: 1rem; }
.f-order__guest { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.f-order__icon { inline-size: 1em; block-size: 1em; vertical-align: -0.15em; flex: none; }

.f-order__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--f-border);
    border-radius: calc(var(--f-radius) * 1.5);
    background: var(--f-surface);
}
.f-order__card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.f-order__card-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.05rem; font-weight: 700; }
.f-order__card-title .f-order__icon { inline-size: 1.15em; block-size: 1.15em; }

/* Two columns: the order on the start side, the cards about it on the end side. */
.f-order__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.f-order__main, .f-order__side { display: flex; flex-direction: column; gap: 1.25rem; min-inline-size: 0; }
@media (min-width: 900px) {
    .f-order__grid { grid-template-columns: minmax(0, 1fr) 19rem; }
}

/* ---- banner: payment required / failed / cancelled ---- */
.f-order__banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid;
    border-radius: var(--f-radius);
    font-size: 0.92rem;
}
.f-order__banner-icon { flex: none; display: inline-flex; }
.f-order__banner-icon .f-order__icon { inline-size: 1.25rem; block-size: 1.25rem; }
.f-order__banner-text { flex: 1; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.f-order__banner-cta { flex: none; }
.f-order__banner--warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.f-order__banner--danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.f-order__banner--muted { background: rgba(0, 0, 0, 0.03); border-color: var(--f-border); color: var(--f-text-soft); }

/* ---- header ---- */
.f-order__head { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.f-order__head-main { display: flex; flex-direction: column; gap: 0.6rem; min-inline-size: 0; }
.f-order__title { margin: 0; font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }
.f-order__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.f-order__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.85rem; color: var(--f-text-soft); }
.f-order__meta-sep { opacity: 0.6; }
.f-order__invoice { flex: none; }
.f-order__status, .f-order__pay-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.f-order__status--pending, .f-order__status--awaiting_payment { background: #fef3c7; color: #92400e; }
.f-order__status--processing, .f-order__status--in_processing { background: #dbeafe; color: #1e40af; }
.f-order__status--shipped, .f-order__status--out_for_delivery { background: #ede9fe; color: #5b21b6; }
.f-order__status--delivered, .f-order__status--completed, .f-order__status--waiting_for_review { background: #dcfce7; color: #166534; }
.f-order__status--cancelled, .f-order__status--returned { background: #fee2e2; color: #991b1b; }
.f-order__status--refunded { background: #ccfbf1; color: #115e59; }
.f-order__status--locked { background: rgba(0, 0, 0, 0.06); color: var(--f-text-soft); }
.f-order__status--return-pending { background: #fef3c7; color: #92400e; }
.f-order__status--return-approved, .f-order__status--return-return_received, .f-order__status--return-refunded { background: #dcfce7; color: #166534; }
.f-order__status--return-rejected { background: #fee2e2; color: #991b1b; }
.f-order__pay-status--paid, .f-order__pay-status--completed { background: #dcfce7; color: #166534; }
.f-order__pay-status--pending, .f-order__pay-status--unpaid { background: #fef3c7; color: #92400e; }
.f-order__pay-status--failed { background: #fee2e2; color: #991b1b; }
.f-order__pay-status--refunded, .f-order__pay-status--partially_refunded { background: #ccfbf1; color: #115e59; }

.f-order__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--f-border);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--f-text-soft);
    white-space: nowrap;
}
.f-order__tag--sm { padding: 0.1rem 0.5rem; font-size: 0.7rem; }
.f-order__tag--success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.f-order__tag--warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.f-order__badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.05);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--f-text-soft);
    white-space: nowrap;
}

/* ---- locked box: progress / tracking before payment ---- */
.f-order__locked {
    align-items: center;
    text-align: center;
    border-style: dashed;
    padding-block: 1.75rem;
    color: var(--f-text-soft);
}
.f-order__locked--inline { padding: 1.25rem 1rem; border: 1px dashed var(--f-border); border-radius: var(--f-radius); background: rgba(0, 0, 0, 0.02); gap: 0.5rem; display: flex; flex-direction: column; }
.f-order__locked-icon { display: inline-flex; opacity: 0.6; }
.f-order__locked-icon .f-order__icon { inline-size: 1.4rem; block-size: 1.4rem; }
.f-order__locked-text { margin: 0; font-size: 0.9rem; }

/* ---- progress stepper: a row on wide screens, a list on narrow ---- */
.f-order__steps { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.f-order__step { position: relative; display: flex; gap: 0.85rem; padding-inline-start: 0.25rem; }
.f-order__step-line { position: absolute; inset-inline-start: 0.85rem; inset-block-start: 1.35rem; inset-block-end: -1.1rem; border-inline-start: 2px solid var(--f-border); }
.f-order__step-line.is-done { border-color: #16a34a; }
.f-order__step-dot {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: 50%;
    border: 2px solid var(--f-border);
    background: var(--f-surface);
    color: #fff;
    z-index: 1;
}
.f-order__step-dot .f-order__icon { inline-size: 0.8rem; block-size: 0.8rem; }
.f-order__step.is-done .f-order__step-dot { border-color: #16a34a; background: #16a34a; }
.f-order__step.is-current .f-order__step-dot { border-color: var(--f-text); background: var(--f-surface); box-shadow: inset 0 0 0 3px var(--f-surface), inset 0 0 0 8px var(--f-text); }
.f-order__step:not(.is-done):not(.is-current) .f-order__step-body { opacity: 0.5; }
.f-order__step-body { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; }
.f-order__step-title { font-size: 0.85rem; }
.f-order__step-text, .f-order__step-date { font-size: 0.75rem; color: var(--f-text-soft); }
@media (min-width: 720px) {
    .f-order__steps { flex-direction: row; align-items: flex-start; gap: 0; padding-block-start: 0.25rem; }
    .f-order__step { flex: 1; flex-direction: column; align-items: center; text-align: center; padding: 0; gap: 0.5rem; }
    .f-order__step-line { inset-inline-start: 50%; inset-inline-end: -50%; inset-block-start: 0.6rem; inset-block-end: auto; border-inline-start: 0; border-block-start: 2px solid var(--f-border); }
    .f-order__step-line.is-done { border-color: #16a34a; }
    .f-order__step-body { align-items: center; padding-inline: 0.25rem; }
    .f-order__step-text { display: none; }
    .f-order__step[title]:hover .f-order__step-text {
        display: block;
        position: absolute;
        inset-block-end: calc(100% + 0.35rem);
        inset-inline-start: 50%;
        transform: translateX(-50%);
        padding: 0.35rem 0.6rem;
        border-radius: 0.4rem;
        background: var(--f-text);
        color: var(--f-surface);
        font-size: 0.72rem;
        white-space: nowrap;
        z-index: 2;
    }
    [dir="rtl"] .f-order__step[title]:hover .f-order__step-text { transform: translateX(50%); }
}

/* ---- products ---- */
.f-order__items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.f-order__item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.85rem; border-radius: var(--f-radius); background: rgba(0, 0, 0, 0.025); }
.f-order--compact .f-order__item, .f-order[compact] .f-order__item { padding: 0; background: none; align-items: center; }
.f-order__item-image { flex: none; inline-size: 3.25rem; block-size: 3.25rem; object-fit: cover; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.05); }
.f-order__item-image--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--f-text-faint); }
.f-order__item-info { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 0; }
.f-order__item-name { font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.f-order__item-meta { font-size: 0.82rem; color: var(--f-text-soft); }
.f-order__item-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.f-order__item-tags:empty { display: none; }
.f-order__item-total { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.f-order__item-rate { align-self: flex-start; margin-block-start: 0.25rem; }
.f-order__item-reviewed { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--f-text-soft); }

/* ---- digital downloads ---- */
.f-order__files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.f-order__file { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; border-radius: var(--f-radius); background: rgba(0, 0, 0, 0.025); }
.f-order__file-icon { flex: none; display: inline-flex; color: var(--f-text-soft); }
.f-order__file-info { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.f-order__file-name { font-weight: 600; overflow-wrap: anywhere; }
.f-order__file-meta { font-size: 0.78rem; color: var(--f-text-soft); }
.f-order__file-meta--warn { color: #b45309; }

/* ---- the customer's review ---- */
.f-order__review-text { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.f-order__review-reply { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.85rem; border-inline-start: 3px solid var(--f-border); background: rgba(0, 0, 0, 0.025); border-radius: 0 var(--f-radius) var(--f-radius) 0; font-size: 0.88rem; }
.f-order__review-reply time { font-size: 0.75rem; color: var(--f-text-soft); }
.f-order__review-reply p { margin: 0; }

/* ---- payment details + totals ---- */
.f-order__pay-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.f-order__pay-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: var(--f-radius); background: rgba(0, 0, 0, 0.025); }
.f-order__pay-row-icon { flex: none; display: inline-flex; color: var(--f-text-soft); }
.f-order__pay-row-body { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; }
.f-order__pay-row-label { font-size: 0.75rem; color: var(--f-text-soft); }
.f-order__pay-row-value { font-weight: 600; font-size: 0.92rem; }
.f-order__pay-failed { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; border-radius: var(--f-radius); background: #fef2f2; color: #991b1b; font-size: 0.85rem; }
.f-order__pay-failed span:nth-child(2) { flex: 1; }
.f-order__section { display: flex; flex-direction: column; gap: 0.75rem; }
.f-order__section-title { margin: 0; font-size: 0.95rem; font-weight: 700; opacity: 0.85; }
.f-order__totals { gap: 0.45rem; padding: 0.25rem 0 0; }
.f-order[compact] .f-order__totals { padding: 1rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.03); }
.f-order__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; color: var(--f-text-soft); }
.f-order__row > span:first-child { display: flex; flex-direction: column; gap: 0.05rem; }
.f-order__row > span:last-child { color: var(--f-text); font-variant-numeric: tabular-nums; }
.f-order__row-note { font-size: 0.72rem; color: var(--f-text-faint); }
.f-order__row--discount > span:last-child { color: #15803d; }
.f-order__row--total { margin-block-start: 0.35rem; padding-block-start: 0.7rem; border-block-start: 1px solid var(--f-border); font-weight: 700; font-size: 1.05rem; color: var(--f-text); }
/* The gateway's own currency, when it differs from what the shopper reads. */
.f-order__charged { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--f-text-faint); font-variant-numeric: tabular-nums; }

/* ---- sidebar cards ---- */
.f-order__detail-text { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.f-order__contact { display: flex; flex-direction: column; gap: 0.35rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--f-border); color: var(--f-text-soft); font-size: 0.85rem; }
.f-order__contact > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.f-order__kvs { display: flex; flex-direction: column; gap: 0.35rem; }
.f-order__kv { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem; border-radius: var(--f-radius); background: rgba(0, 0, 0, 0.025); font-size: 0.85rem; }
.f-order__kv-label { color: var(--f-text-soft); }
.f-order__kv-value { font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.f-order__kv-value.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.f-order__kv-value.is-positive { color: #15803d; }
.f-order__kv-value.is-negative { color: #b91c1c; }
.f-order__tracking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.f-order__link { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #1d9e75); text-decoration: none; }
.f-order__link:hover { text-decoration: underline; }
.f-order__action-list { display: flex; flex-direction: column; gap: 0.6rem; }
.f-order__action-list .f-btn { justify-content: center; }
.f-order__return-status { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--f-text-soft); }
.f-order__cancel { color: #b91c1c; }

/* ---- dialogs: pay, invoice, return, rate, track ---- */
.f-order-dialog { display: flex; flex-direction: column; gap: 1rem; }
.f-order-dialog__hint { margin: 0; font-size: 0.9rem; color: var(--f-text-soft); line-height: 1.5; }
.f-order-dialog__subtitle { margin: 0.25rem 0 0; font-size: 0.9rem; font-weight: 700; }
.f-order-dialog__error { margin: 0; padding: 0.6rem 0.85rem; border-radius: var(--f-radius); background: #fef2f2; color: #991b1b; font-size: 0.85rem; }
.f-order-dialog__error[hidden] { display: none; }
.f-order-dialog__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem; }
.f-order-dialog__choices .f-btn { justify-content: center; }
.f-order-dialog__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.9rem; border-radius: var(--f-radius); background: rgba(0, 0, 0, 0.035); font-size: 0.9rem; }
.f-order-dialog__methods { display: flex; flex-direction: column; gap: 0.5rem; min-block-size: 3rem; justify-content: center; }
.f-order-dialog__method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
    background: var(--f-surface);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.f-order-dialog__method img { inline-size: 2.25rem; block-size: 2.25rem; object-fit: contain; border-radius: 0.4rem; }
.f-order-dialog__method-icon { display: inline-flex; inline-size: 2.25rem; block-size: 2.25rem; align-items: center; justify-content: center; border-radius: 0.4rem; background: rgba(0, 0, 0, 0.05); color: var(--f-text-soft); }
.f-order-dialog__method:hover { border-color: var(--f-text-faint); }
.f-order-dialog__method.is-selected { border-color: var(--color-primary, #1d9e75); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #1d9e75) 25%, transparent); }
.f-order-dialog__form { display: flex; flex-direction: column; gap: 0.9rem; }
.f-order-dialog__stars { display: flex; justify-content: center; padding-block: 0.25rem; font-size: 1.6rem; }
.f-order-dialog__footer { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.f-order__events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; max-block-size: 18rem; overflow-y: auto; }
.f-order__event { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.75rem; border-inline-start: 3px solid var(--f-border); background: rgba(0, 0, 0, 0.025); font-size: 0.85rem; }
.f-order__event:first-child { border-color: #16a34a; }
.f-order__event-meta { font-size: 0.75rem; color: var(--f-text-soft); }

/* ========================================================================
   Orders list — status filter, search, paged
   ======================================================================== */

.f-orders__guest { text-align: center; padding: 1.5rem 1rem; opacity: 0.85; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.f-orders__skeleton { padding: 0.5rem 0; }

.f-orders__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-end: 1.25rem;
}
.f-orders__search { flex: 1; min-inline-size: 12rem; }
.f-orders__filter { flex: none; min-inline-size: 10rem; }

.f-orders__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.f-orders__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius);
}

.f-orders__main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; text-decoration: none; color: inherit; }
.f-orders__number { font-weight: 700; }
.f-orders__date { font-size: 0.82rem; color: var(--f-text-soft); }

.f-orders__status {
    flex: none;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
}
.f-orders__status--pending, .f-orders__status--awaiting_payment { background: #fef3c7; color: #92400e; }
.f-orders__status--processing { background: #dbeafe; color: #1e40af; }
.f-orders__status--shipped, .f-orders__status--out_for_delivery { background: #e0e7ff; color: #3730a3; }
.f-orders__status--delivered, .f-orders__status--completed { background: #dcfce7; color: #166534; }
.f-orders__status--cancelled, .f-orders__status--refunded, .f-orders__status--returned { background: #fee2e2; color: #991b1b; }

.f-orders__total { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.f-orders__more { display: flex; justify-content: center; margin-block-start: 1.25rem; }

/* ========================================================================
   Notification item — one row of a customer's notification history
   ======================================================================== */

.f-notification-item { display: block; }

.f-notification-item__link,
.f-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
}

.f-notification-item__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary, #1d9e75) 12%, transparent);
    color: var(--color-primary, #1d9e75);
}

.f-notification-item__text { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.f-notification-item__title { font-size: 0.92rem; }
.f-notification-item__body { font-size: 0.85rem; color: var(--f-text-soft); }
.f-notification-item__time { font-size: 0.78rem; color: var(--f-text-soft); }

.f-notification-item__dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-block-start: 0.4rem;
    border-radius: 50%;
    background: var(--color-primary, #1d9e75);
}

.f-notification-item.is-unread { background: color-mix(in srgb, var(--color-primary, #1d9e75) 5%, transparent); }

/* ========================================================================
   Custom fields — merchant-defined form fields
   ======================================================================== */

.f-custom-fields { display: flex; flex-direction: column; gap: 1rem; }
.f-custom-fields__field falak-file-upload { margin-block-start: 0.35rem; }

.f-custom-fields__options { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }

.f-custom-fields__option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ==== END SDK COMPONENT CLASSES ==== */

/* ------------------------------------------------ platform components */
/*
    WHERE A DEVELOPER RESTYLES THE SDK COMPONENTS.

    The platform links /sdk/falak-components.css BEFORE this file and wraps
    it in `@layer falak`, and the full class list is copied into the block
    above. Rules here beat both: the SDK's layered sheet on layering, the
    copy on source order — match the copied rule's specificity and no
    !important is ever needed. There are three levels, cheapest first:

      1. Tokens.  The SDK reads --color-primary, --radius-sm, --color-border…
         from :root above, so the theme palette already reaches every
         component with no rule at all.
      2. Component variables.  Some components expose their own knobs
         (--f-announce-bg, --f-announce-fg, --f-slider-per-view).
      3. Selectors.  Target the SDK's class (.f-btn, .f-modal__body) or the
         element itself (falak-announcement, falak-quantity-input) and write
         normal CSS. Class names are a stable contract across SDK releases.
*/

/* 2. Announcement bar: the brand colour itself, with the theme's close
      affordance. --color-primary-dark is the hover shade for primary
      buttons, not a brand token: on a store with no saved colour it is a
      fixed teal that has nothing to do with --color-primary, so the strip
      rendered off-palette. --color-primary follows the merchant's colour
      when one is saved (master.twig emits it for theme.color.source ==
      'store') and the theme's own pink otherwise. */
falak-announcement {
    --f-announce-bg: var(--color-primary);
    --f-announce-fg: var(--color-on-primary);
}
falak-announcement .f-announce__close:hover { background: rgba(255, 255, 255, 0.25); }

/* 3. Any SDK class can be overridden by name — the SDK sheet
      (/sdk/falak-components.css) is the reference for what exists. Here the
      bar gets the theme's taller rhythm; every other property stays the
      SDK's. */
.f-announce__inner { min-height: 2.75rem; }
/* Padding only for the centred bar: in marquee mode the copied rule
   `.f-announce--scroll .f-announce__inner` (two classes) zeroes it so the
   text can run edge to edge. Overrides must match the copied rule's
   specificity — the copy above is unlayered, unlike the SDK's own sheet. */
falak-announcement:not(.f-announce--scroll) .f-announce__inner { padding-inline: 3rem; }

/* Marquee: a seamless chain rather than the SDK's two-copy loop.

   The component scrolls merchant declarations whatever their length, over a
   track holding the message twice and travelling half its width. That only
   reads as continuous while one message is wider than the strip: a short
   message on a wide screen left most of the bar empty and snapped when the
   loop restarted. app.js repeats the message until the track covers the bar
   plus one spare copy and publishes one copy's width as --announce-step, so
   the loop travels exactly one copy and the frame it ends on is the frame it
   began on — unbroken text, no empty stretch, nothing to snap back to.

   The 50% fallback is the SDK's own distance over its two copies, so the bar
   still loops correctly if the script never runs.

   Direction follows the document, as the SDK's keyframes do: ltr drifts
   leftward so text enters at the right, rtl mirrors it. The SDK's
   timing-function, iteration count and :hover pause all still apply. */
falak-announcement.f-announce--scroll .f-announce__track {
    animation-name: announce-chain-ltr;
    animation-duration: var(--announce-chain-duration, 9s);
}
falak-announcement.f-announce--scroll[dir="rtl"] .f-announce__track { animation-name: announce-chain-rtl; }
@keyframes announce-chain-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--announce-step, 50%))); }
}
@keyframes announce-chain-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--announce-step, 50%)); }
}
/* The SDK's own reduced-motion `animation: none` is (0,1,0) and the rules
   above out-rank it, so it must be restated at their specificity. */
@media (prefers-reduced-motion: reduce) {
    falak-announcement.f-announce--scroll .f-announce__track { animation: none; }
}

/* 3. SDK buttons rendered without `button-class` (user menu, modals, the
      default add button) take this theme's .btn shape, so every button on
      the page shares one silhouette. */
.f-btn {
    padding: 0.7rem 1.6rem;
    min-block-size: auto;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.f-btn:hover:not(:disabled) { opacity: 1; }
.f-btn--primary:hover:not(:disabled) { background: var(--color-primary-dark); }
.f-btn:active:not(:disabled) { transform: translateY(1px); }

/* 3. Cards the SDK renders (home grid, sliders) carry the same buy button
      as the Twig card (.btn--card) so both card kinds look alike. */
.f-card__add {
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.f-card__add:active:not(:disabled) { transform: translateY(1px); }
.f-card__wishlist { border-radius: var(--radius-sm); }

/* 3. Header cart entry: the platform component wearing this theme's
      .cart-link outline. */
.cart-link .f-cart-summary__link { gap: 0.5rem; }
.cart-link .f-cart-summary__icon { width: auto; height: auto; background: transparent; }
.cart-link .f-cart-summary__count { position: static; margin-inline-start: 0.1rem; }
.cart-link .f-cart-summary__label { display: none; }
.cart-link .f-cart-summary__total { font-size: 0.9rem; }

/* 3. Modals and dropdowns follow the theme's radius and shadow rather than
      the SDK's derived ones. */
.f-modal__body { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.f-menu__list--sub { border-radius: var(--radius); box-shadow: var(--shadow); }

/* The login dialog's country list gives ground before the window does: past
   the SDK's 15rem cap the open picker would run under the bottom edge of a
   short window and hand the modal wrapper a scrollbar. The floor keeps a few
   rows visible even where the subtraction goes negative — the list scrolls
   internally regardless. */
#falak-login .f-login__dial-list {
    max-block-size: clamp(8rem, 100dvh - 30rem, 15rem);
}

/* 3. Quick add — the "choose options" dialog, laid out the way the nova
      theme lays it out: the picture down one side, the name, price and
      choices stacked beside it, rather than the SDK's single column.

      The dialog's markup is a flat pair (the picture and the name/price
      together in one wrapper, then the form), so `display: contents` on that
      wrapper promotes the image and the meta to grid items and lets a single
      grid place all three.

      Specificity note: the copied SDK rules above are unlayered, so every
      override here matches or beats the copy's selector — .f-quick-add is on
      the <falak-modal> element itself (the component sets it), which is what
      makes the descendant forms below two classes deep. */

.f-quick-add .f-modal__body {
    /* Narrower than the SDK's `md` slot allows to grow: this is a short list
       of choices, and a wider box just adds empty space around it. */
    max-inline-size: 40rem;
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    grid-template-areas:
        "head  head"
        "media meta"
        "media form";
    grid-template-rows: auto auto 1fr;
    column-gap: 1.35rem;
    align-items: start;
}

.f-quick-add .f-modal__header { grid-area: head; }

/* The wrapper itself lays nothing out; its two children are the grid items. */
.f-quick-add .f-quick-add__product { display: contents; }

.f-quick-add .f-quick-add__image {
    grid-area: media;
    /* A square 200x200 box pinned to the top of its column rather than
       stretched down it: filling the full height renders 200x300 and crops
       the photo to a portrait it was never shot as. The room left under it
       is the price of showing the picture the way the card does. */
    align-self: start;
    inline-size: 12.5rem;
    block-size: 12.5rem;
    border-radius: var(--radius);
    object-fit: cover;
    background: var(--color-surface);
}

.f-quick-add .f-quick-add__meta {
    grid-area: meta;
    gap: 0.2rem;
    margin-block-end: 1.1rem;
    padding-block-end: 0.9rem;
    border-block-end: 1px solid var(--color-border);
}

.f-quick-add .f-quick-add__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
}

.f-quick-add .f-quick-add__name {
    font-size: 1.05rem;
    line-height: 1.4;
    text-decoration: none;
    /* A long name is the one thing that can drive the dialog taller than the
       photo beside it. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.f-quick-add .f-quick-add__prices { margin-block-start: 0.15rem; gap: 0.5rem; }
.f-quick-add .f-quick-add__price { font-size: 1.3rem; font-weight: 700; }
.f-quick-add .f-quick-add__compare { font-size: 0.9rem; color: var(--color-text-faint); }
.f-quick-add .f-quick-add__save {
    padding: 0.1rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
    background: transparent;
    color: var(--color-danger);
    font-size: 0.72rem;
}

.f-quick-add .f-quick-add__form { grid-area: form; }

/* The rows the SDK only renders when the card had the data for them: a
   stock line under the choices, and a reassurance/details pair under the
   button. Both sit inside the form column. */
.f-quick-add .f-quick-add__stock {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
}
.f-quick-add .f-quick-add__stock::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.f-quick-add .f-quick-add__stock--in { color: #1d8a5f; }

.f-quick-add .f-quick-add__footnote { font-size: 0.78rem; }
.f-quick-add .f-quick-add__details {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* The buy row follows this theme's button shape; the stepper keeps its
   natural width so the button takes the rest. */
.f-quick-add .f-quick-add__actions .f-btn { border-radius: var(--radius-sm); font-weight: 700; }

/*
   Phone: the photo becomes a thumbnail beside the name and the choices take
   the FULL width underneath. Keeping them in a narrow second column leaves
   them cramped against a tall strip of image with dead space beside it.
*/
@media (max-width: 40rem) {
    .f-quick-add .f-modal__body {
        grid-template-columns: 5rem minmax(0, 1fr);
        grid-template-areas:
            "head  head"
            "media meta"
            "form  form";
        column-gap: 0.9rem;
    }

    .f-quick-add .f-quick-add__image {
        inline-size: 5rem;
        block-size: 5rem;
        min-block-size: 0;
    }

    .f-quick-add .f-quick-add__meta { margin-block-end: 0.9rem; padding-block-end: 0.7rem; }
    .f-quick-add .f-quick-add__name { font-size: 0.95rem; }
    .f-quick-add .f-quick-add__price { font-size: 1.1rem; }

    /* Side by side at this width leaves the button too narrow to read. */
    .f-quick-add .f-quick-add__actions { flex-direction: column; }
}

/* ---------------------------------------------------------------- header */

/* Two-row header: brand bar on top, navigation bar below (Al-Mahud style). */
.site-header {
    /* --color-header-bg is only emitted when the merchant sets one, so an
       unset value falls through to the page background rather than pinning
       the header to a colour the theme never chose. */
    background: var(--color-header-bg, var(--color-bg));
}

.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Soft edge so the header reads as its own surface over page content. */
    box-shadow: var(--shadow-sm);
}

.site-header__topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--header-h);
}

/* categories bar — its own menu (handle: categories-menu), nothing else in it */
.site-header__navbar {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.cat-bar ul {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cat-bar ul::-webkit-scrollbar { display: none; }

.cat-bar a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.cat-bar a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.cat-bar img { border-radius: 4px; object-fit: cover; }

/* ---------------------------------- categories strip: More (priority+) */

/* app.js sets the attribute while it owns the desktop row. The strip's own
   overflow-x:auto would clip the dropdown; once the fold has run nothing
   overflows the row, so visible is safe. */
@media (min-width: 861px) {
    .cat-bar ul[data-cat-overflow] { overflow: visible; }
}

/* A chip the row could not fit, folded into the dropdown. */
.cat-bar li.is-collapsed { display: none; }

.cat-bar__more { position: relative; }

/* A control, not a destination: an outlined pill with the count, set off a
   touch from the last chip. Overrides the chip's underline-hover border. */
.cat-bar__more > a {
    gap: 0.4rem;
    margin-inline-start: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.cat-bar__more > a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.cat-bar__more-count { font-weight: 700; }

.cat-bar__more > a svg { transition: transform var(--transition); }
.cat-bar__more.is-open > a svg { transform: rotate(180deg); }

/* Pinned to the inline end — the More pill is the row's last item, and a
   panel opening toward inline-start from there stays on screen. A long list
   scrolls inside the panel rather than past the fold.

   Two classes on the closed state, because the panel is itself a <ul> inside
   .cat-bar and `.cat-bar ul` (0,1,1) would outrank a single class's
   display:none — the same specificity trap the onyx submenu notes call out,
   which left this panel permanently open. */
.cat-bar .cat-bar__more-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.4rem);
    min-width: 13rem;
    max-height: min(24rem, 70vh);
    overflow-y: auto;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    z-index: 60;
}

.cat-bar .cat-bar__more.is-open > .cat-bar__more-panel { display: block; }

.cat-bar__more-panel a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-bottom: 0;
    border-radius: var(--radius-sm);
    white-space: normal;
}

.cat-bar__more-panel a:hover { background: var(--color-surface); }
.cat-bar__more-panel a.is-active { color: var(--color-primary); }

.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
}

.site-header__logo img {
    max-width: 180px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-inline-start: auto;
}

/* The account dropdown is the shared <falak-user-menu>; this theme has no
   notifications page, so its notifications row goes wherever the menu renders
   (header, drawer, account pages). The SDK marks rows by href only, so match on
   that; app.js also removes the node for browsers without :has(). */
.f-user__item:has(> .f-user__link[href="/customer/notifications"]),
.f-user__link[href="/customer/notifications"] { display: none !important; }

/* cart pill */
.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: border-color var(--transition);
}
.cart-link:hover { border-color: var(--color-primary); }

/* dark top bar variant */
.topnav-is-dark .site-header {
    /* This selector outranks .site-header, so it has to honour the merchant's
       colour too — otherwise picking one does nothing while dark mode is on. */
    background: var(--color-header-bg, #171a21);
    color: #fff;
}
.topnav-is-dark .site-header__navbar { border-color: #2a2e38; }
.topnav-is-dark .site-header .cart-link { border-color: #3a3f4b; }
.topnav-is-dark .site-header .main-menu a { color: inherit; }
.topnav-is-dark .site-header .main-menu__submenu { background: #21252e; border-color: #3a3f4b; }

/* ------------------------------------------------------------- main menu */

.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
    Row layout goes on the primary list by class, not on `.main-menu ul`: that
    descendant selector (0,1,1) outranks the single-class `.main-menu__submenu`
    (0,1,0), so a `display: flex` there would beat the submenu's
    `display: none` and leave every dropdown open before <falak-menu> ever
    toggles .is-open. The shared list resets above stay as they are.
*/
.main-menu__list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/*
    Everything else in the <nav> is the phone drawer (menu.twig): the brand
    row, search, the account card, section labels, the account list and the
    footer. Desktop shows only the primary list, inline in the top bar, so the
    wrapper is display:contents there — the list stays a direct flex item of
    the bar — and the rest does not paint at all.
*/
.main-menu__body { display: contents; }

/* Phone-only header pieces (header.twig): the search row under the icons and
   the "All" chip that leads the categories strip. */
.site-header__search,
.cat-bar__all { display: none; }

/*
    Desktop bar, when the menu is longer than the screen. A merchant with nine
    top-level links on a 1000px window had the right-hand controls — language,
    currency, account, wishlist, cart — pushed clean off the edge, because the
    link row refused to shrink and the actions group took the loss. Here the
    nav is the only thing allowed to give: it wraps onto a second line, and
    the actions and the brand mark keep their size. When everything fits, as
    it does on most stores, nothing here changes a pixel.
*/
@media (min-width: 861px) {
    .site-header .main-menu { flex: 1 1 auto; min-width: 0; }
    .main-menu__list { flex-wrap: wrap; row-gap: 0; }
    .main-menu__list > .main-menu__item > a { white-space: nowrap; }
    .site-header__logo,
    .site-header__actions { flex-shrink: 0; }
}
.main-menu__list svg.main-menu__icon { display: none; }

/* Sized here, outside the phone block: an unsized <svg> is the UA's 300x150
   box, and with the rule only under 860px every top-bar row grew to 150px. */
.main-menu__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

img.main-menu__icon { object-fit: contain; border-radius: 4px; }
.main-menu__head,
.main-menu__foot,
.main-menu__welcome,
.main-menu__tiles,
.main-menu__section,
.main-menu__list--account,
.main-menu__item--drawer-only { display: none; }

/* The tiles hold <a>s, so the desktop link rule (.main-menu a, inline-flex)
   would otherwise outrank the UA's [hidden] and paint them in the top bar
   before app.js has even decided who is signed in. */
.main-menu__tiles[hidden],
.main-menu__welcome[hidden] { display: none; }

.main-menu a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color var(--transition), background var(--transition);
}
.main-menu a:hover { color: var(--color-primary); }

.main-menu__item { position: relative; }

.main-menu__item.has-children > a::after {
    content: '';
    border: 4px solid transparent;
    border-top-color: currentColor;
    translate: 0 2px;
    transition: rotate var(--transition);
}

.main-menu__item.has-children.is-open > a::after {
    rotate: 180deg;
    translate: 0 -2px;
}

.main-menu__submenu {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 12rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    margin: 0;
    list-style: none;
    display: none;
    flex-direction: column;
    z-index: 60;
}

/* Opened by <falak-menu>, which toggles .is-open here; closed by outside
   click, Escape, or a second click on the parent. */
.main-menu__item.is-open > .main-menu__submenu { display: flex; }

.main-menu__submenu a {
    display: block;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

/* mobile menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 10px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    /* The bars are currentColor, and a <button> does not inherit colour: the
       browser paints it `buttontext`, which is pure black on a light scheme
       and whatever the platform likes elsewhere — never the header ink the
       icons beside it use, and wrong again on the dark top bar. */
    color: inherit;
    cursor: pointer;
    /* Never squeezed. Without this the flex row shrank the button to a 22px
       sliver — three bars with no box around them — long before it gave up
       any of the six action controls beside it. */
    flex: 0 0 auto;
}

.menu-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

@media (max-width: 860px) {
    .menu-toggle { display: flex; }
    .main-menu__body { display: block; }
    .main-menu__section { display: block; }
    .cat-bar__all { display: list-item; }
    .main-menu__item--drawer-only { display: list-item; }

    /* Tighter rhythm: at desktop gaps the toggle + brand + actions row is
       wider than a phone screen, which pushed the whole page into a
       horizontal scroll and shoved the menu button out of view. */
    .site-header__topbar-inner { gap: 0.6rem; min-width: 0; }

    /*
        Every control keeps its own size and the brand mark absorbs what is
        left. `min-width: 0` on both the row and the actions group is what
        makes that possible: a flex item's default `min-width: auto` refuses
        to shrink below its content, so the row overflowed the header — and
        `overflow-x: clip` on <body> turned that overflow into controls
        sheared off at both edges rather than into a scrollbar that would at
        least have shown the problem.
    */
    .site-header__actions {
        gap: 0.4rem;
        min-width: 0;
        flex: 0 0 auto;
    }

    .site-header__actions > * { flex: 0 0 auto; }

    /* A long store name must squeeze and ellipsize, never widen the page.
       It may shrink but never grow: the actions group is pushed to the end by
       its own auto margin, and a growing logo box would hand the brand mark a
       tablet-wide click target made almost entirely of blank space. */
    .site-header__logo {
        flex: 0 1 auto;
        min-width: 0;
    }

    .site-header__logo img { max-height: 2.4rem; }

    .site-header__logo span {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 1.05rem;
        /* The name's own script sets its direction, so truncation always
           keeps the START of the name ("Tahseen U…"), never the tail
           ("…o Store") — e.g. a Latin store name on the RTL storefront. */
        unicode-bidi: plaintext;
        text-align: start;
    }

    /* ------------------------------------------ phone header: rows two and three */

    /* The live search trigger leaves the icon row; the field below takes its
       place, full width, as the mockup draws it. */
    .site-header__actions .search-link { display: none; }

    .site-header__search {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 2.75rem;
        /* It wears .container for the max-width, but the border is on this
           box, so the page gutter has to be a margin here, not padding. */
        margin: 0 1rem 0.75rem;
        padding-inline: 0.9rem;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        color: var(--color-text-faint);
    }

    .site-header__search:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
    }

    .site-header__search input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        background: transparent;
        font: inherit;
        font-size: 0.95rem;
        color: var(--color-text);
        outline: none;
    }

    .site-header__search input::placeholder { color: var(--color-text-faint); }

    /* Icon row: wishlist, cart, account — in that order, badges riding the
       icon corner, no outlines. The hamburger is bare lines too. */
    .site-header__actions .wishlist-link { order: 1; }
    .site-header__actions .cart-link { order: 2; }
    .site-header__actions .f-user { order: 3; }

    .site-header__actions .wishlist-link .f-wishlist-drawer__trigger,
    .site-header__actions .cart-link {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .site-header__actions .cart-link .f-cart-summary__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

    .site-header__actions .cart-link .f-cart-summary__icon { position: relative; display: inline-flex; }
    .site-header__actions .cart-link .f-cart-summary__count {
        position: absolute;
        inset-block-start: -0.45rem;
        inset-inline-end: -0.55rem;
        margin: 0;
        background: var(--color-text);
        color: #fff;
    }
    .site-header__actions .wishlist-link .f-wishlist-drawer__count {
        inset-block-start: -0.15rem;
        inset-inline-end: -0.25rem;
        background: var(--color-text);
        color: #fff;
    }

    .menu-toggle { border: 0; padding-inline: 4px; width: 2.25rem; }

    /* The account trigger joins the row on the same terms. The SDK draws it
       as a filled primary-colour disc, which beside bare heart and bag
       outlines reads as the one coloured, solid control in the row. Signed
       out, it is the person outline alone, sized like its neighbours; signed
       in, the initials keep a ring so they still read as an avatar — but an
       outline in the header ink, like everything else here. */
    .site-header__actions .f-user__trigger {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        justify-content: center;
    }

    .site-header__actions .f-user__avatar {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        background: transparent;
        color: inherit;
        border: 1.5px solid currentColor;
        font-size: 0.6rem;
    }

    .site-header__actions .f-user__trigger--guest .f-user__avatar { border: 0; }

    .site-header__actions .f-user__trigger--guest .f-user__avatar svg {
        inline-size: 1.375rem;
        block-size: 1.375rem;
    }

    /* Page menu moves to the drawer; the categories bar is a strip of chips.
       The strip bleeds into the page gutter so the edge fade (above) sits over
       the gutter, not over the first chip. */
    .cat-bar { margin-inline: -1rem; }
    .cat-bar ul { justify-content: flex-start; gap: 0.45rem; padding-block: 0.6rem; }

    .cat-bar a {
        min-height: 2.1rem;
        padding: 0.3rem 0.85rem;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        background: #fff;
        font-size: 0.88rem;
        font-weight: 600;
    }

    .cat-bar a:hover { border-color: var(--color-text); color: var(--color-text); }

    /* The chip for the page being viewed — app.js matches each link to the
       location, so "All" fills on the listing and a category fills on its own
       filtered listing. */
    .cat-bar a.is-active {
        background: var(--color-text);
        border-color: var(--color-text);
        color: #fff;
    }

    .site-header__navbar { border-top: 0; }

    /* Edge fade hints that the categories bar keeps scrolling. Symmetric, so
       it needs no RTL variant. */
    .cat-bar {
        -webkit-mask-image: linear-gradient(to right,
            transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
        mask-image: linear-gradient(to right,
            transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    }

    /*
        The mask only hints that the strip continues; these make it usable.
        Inline padding lets the first and last chip clear the fade instead of
        sitting half-faded under it, snapping stops a swipe mid-label, and
        `overscroll-behavior-inline: contain` keeps a swipe past the last chip
        from triggering the browser's back gesture.
    */
    .cat-bar ul {
        padding-inline: 1rem;
        scroll-snap-type: inline proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .cat-bar li { scroll-snap-align: start; }


    /* ------------------------------------------------- the drawer itself */

    .site-header .main-menu {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(22rem, 86vw);
        /* Column flow: the brand row and the footer keep their place while
           only .main-menu__body between them scrolls. */
        display: flex;
        flex-direction: column;
        /* A white panel, not the page's grey: over a dimmed page the body
           background read as a second, washed-out backdrop rather than as a
           sheet lying on top of it. */
        background: #fff;
        color: var(--color-text);
        box-shadow: 0 0 40px rgba(16, 24, 40, 0.18);
        /* Rounded trailing edge — the drawer reads as a card, not a cut. */
        border-start-end-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg);
        transform: translateX(calc(var(--rtl-flip, -1) * 105%));
        transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 80;
        overflow: hidden;
    }

    [dir="rtl"] .site-header .main-menu { --rtl-flip: 1; }

    body.menu-is-open .site-header .main-menu { transform: translateX(0); }

    /* The page behind must not scroll under the drawer — the same lock the
       SDK's own modals take with body.f-modal-open, kept on its own class so
       closing one never releases the other. */
    body.menu-is-open { overflow: hidden; }

    /* Row icons paint only in the drawer; the top bar stays text. */
    .main-menu__list svg.main-menu__icon { display: block; }

    /* -------------------------------------------------- drawer: brand row */

    .main-menu__head {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 0 0 auto;
        padding: 1rem 1rem 0.75rem;
    }

    /* Shrinks first: the pills and the close button keep their size, and
       a text brand ellipsizes before the row breaks. */
    .main-menu__brand {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        flex: 0 1 auto;
        margin-inline-end: auto;
        font-weight: 700;
        font-size: 1.1rem;
        color: inherit;
        text-decoration: none;
    }

    .main-menu__brand img {
        max-width: 6rem;
        max-height: 2.25rem;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .main-menu__brand span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        unicode-bidi: plaintext;
    }

    .main-menu__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        color: var(--color-text);
        cursor: pointer;
        transition: color var(--transition), border-color var(--transition);
    }

    .main-menu__close:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* ----------------------------------------------------- drawer: body */

    .main-menu__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 1rem 1rem;
        scrollbar-width: thin;
    }

    .main-menu__search {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 2.75rem;
        padding-inline: 0.9rem;
        margin-block-end: 0.9rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        color: var(--color-text-faint);
    }

    .main-menu__search:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
    }

    .main-menu__search input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        background: transparent;
        font: inherit;
        font-size: 0.95rem;
        color: var(--color-text);
        outline: none;
    }

    .main-menu__search input::placeholder { color: var(--color-text-faint); }

    /* The account card: brand-coloured, so it is the one thing in a white
       panel that asks to be tapped. Hidden until app.js knows which of the
       two states applies. */
    .main-menu__welcome {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.75rem;
        row-gap: 0.75rem;
        align-items: center;
        padding: 0.9rem;
        margin-block-end: 1.1rem;
        /* A tint of the brand colour, as in the mockup, not the solid brand:
           it is a card the shopper reads, not a button they press. */
        background: color-mix(in srgb, var(--color-primary) 22%, #fff);
        color: var(--color-text);
        border-radius: var(--radius);
    }

    .main-menu__welcome[hidden] { display: none; }

    .main-menu__avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-primary) 30%, #fff);
        color: var(--color-text);
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 0.02em;
    }

    .main-menu__welcome-text { min-width: 0; line-height: 1.4; }
    .main-menu__welcome-text strong { display: block; font-size: 1rem; }
    .main-menu__welcome-text small { display: block; font-size: 0.8rem; opacity: 0.85; }
    .main-menu__welcome-text p { margin: 0.15rem 0 0; font-size: 0.85rem; opacity: 0.9; }

    .main-menu__welcome-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .main-menu__btn {
        min-height: 2.5rem;
        padding: 0.4rem 0.75rem;
        border-radius: var(--radius-sm);
        font: inherit;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .main-menu__btn--solid {
        background: var(--color-primary);
        color: var(--color-on-primary);
        border: 1px solid var(--color-primary);
    }

    .main-menu__btn--ghost {
        background: #fff;
        color: var(--color-text);
        border: 1px solid var(--color-border);
    }

    /* Two shortcut tiles under the card. */
    .main-menu__tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 0.6rem;
        margin-block-end: 1.1rem;
    }

    .main-menu__tiles[hidden] { display: none; }

    .main-menu__tile {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-height: 3rem;
        padding: 0.6rem 0.8rem;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        color: var(--color-text);
        font-weight: 600;
        font-size: 0.92rem;
        text-decoration: none;
    }

    .main-menu__tile[hidden] { display: none; }
    .main-menu__tile .main-menu__icon { color: var(--color-text-soft); }

    /* The categories entry sits second — after Home — whatever order the
       markup emitted it in (see menu.twig). */
    .main-menu__list > .main-menu__item:first-child { order: -2; }
    .main-menu__item--cats { order: -1; }

    .main-menu__section {
        margin: 0.25rem 0 0.15rem;
        padding-inline: 0.25rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-faint);
    }

    .main-menu__list + .main-menu__section { margin-block-start: 1rem; }

    /* ------------------------------------------------------ drawer: links */

    .main-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main-menu__list { display: flex; }

    /* A 48px row is the smallest comfortable touch target; the desktop
       padding left these at 34px. */
    .main-menu a {
        /* Block-level in the drawer: the desktop pill is inline-flex and only
           as wide as its label, which left the caret glued to the text instead
           of at the far end of the row. */
        display: flex;
        width: 100%;
        min-height: 2.9rem;
        padding: 0.55rem 0.5rem;
        gap: 0.75rem;
        border-radius: var(--radius-sm);
        font-size: 0.98rem;
        font-weight: 500;
    }

    .main-menu__list > .main-menu__item > a > .main-menu__icon { color: var(--color-text-soft); }
    .main-menu a:hover .main-menu__icon { color: inherit; }

    /*
        The caret belongs at the far end of a full-width row, not tucked
        against the label as in the desktop bar. `margin-inline-start: auto`
        is direction-aware, so it lands on the left in Arabic and the right in
        English with no second rule.
    */
    .main-menu__item.has-children > a::after {
        margin-inline-start: auto;
        border-width: 5px;
    }

    .main-menu__submenu {
        position: static;
        border: none;
        box-shadow: none;
        padding: 0 0 0.4rem;
        padding-inline-start: 0.9rem;
        margin-inline-start: 1.1rem;
        border-inline-start: 2px solid var(--color-border);
        border-radius: 0;
        background: transparent;
        min-width: 0;
    }

    .main-menu__submenu a {
        min-height: 2.5rem;
        padding-block: 0.45rem;
        font-size: 0.93rem;
        color: var(--color-text-soft);
    }

    /* ---------------------------------------------------- drawer: footer */

    .main-menu__foot {
        display: block;
        flex: 0 0 auto;
        padding: 0.75rem 1rem max(0.9rem, env(safe-area-inset-bottom));
        border-block-start: 1px solid var(--color-border);
        background: #fff;
    }

    /* Language and currency, side by side above sign-out. */
    .main-menu__prefs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    /* Each switcher pill fills its column; the header's pill rules do not
       reach in here (they are scoped to .site-header__actions). */
    .main-menu__prefs falak-language,
    .main-menu__prefs falak-currency { display: block; min-width: 0; }

    .main-menu__prefs [hidden] { display: none; }

    .main-menu__prefs .f-locale__trigger,
    .main-menu__prefs .f-currency__field {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        width: 100%;
        min-height: 2.6rem;
        padding: 0.4rem 0.75rem;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        font: inherit;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--color-text);
        cursor: pointer;
        white-space: nowrap;
    }

    .main-menu__prefs .f-locale__globe,
    .main-menu__prefs .f-currency__icon { color: var(--color-primary); opacity: 1; }

    .main-menu__prefs .f-locale__chevron,
    .main-menu__prefs .f-currency__chevron { display: none; }

    .main-menu__logout {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 2.6rem;
        margin-block-start: 0.6rem;
        padding: 0.4rem 0.75rem;
        background: color-mix(in srgb, var(--color-danger) 8%, #fff);
        border: 1px solid color-mix(in srgb, var(--color-danger) 25%, #fff);
        border-radius: var(--radius-sm);
        font: inherit;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--color-danger);
        cursor: pointer;
    }

    .main-menu__logout[hidden],
    .main-menu__foot[hidden] { display: none; }

    /* --------------------------------------------------------- backdrop */

    .menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 18, 24, 0.55);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
        z-index: 70;
    }

    body.menu-is-open .menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-footer-bg, var(--color-surface));
    padding-block: 2.5rem 1.5rem;
    font-size: 0.95rem;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
}

/* Stacked footer centers instead of ragged-wrapping. */
@media (max-width: 640px) {
    .site-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .site-footer__menu ul { justify-content: center; }
}

.site-footer__brand { max-width: 32ch; }

/*
 * The footer logo.
 *
 * It had no rule at all, so the img's width/height attributes won: every mark
 * was drawn 48×48, which reads as a favicon beside the store name — and a wide
 * wordmark was squeezed into that square. Same shape of rule as the header's
 * (cap the box, let the picture keep its own proportions inside it), one size
 * up, because the footer has the room the header bar does not.
 *
 * inline-block rather than block so it still centres with the rest of the
 * brand column when the footer stacks on a phone.
 */
.site-footer__brand img {
    display: inline-block;
    max-width: 220px;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 0.85rem;
    border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
    .site-footer__brand img { max-height: 72px; }
}

.site-footer__brand-name {
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.35rem;
}

.site-footer__about {
    color: var(--color-text-soft);
    margin: 0;
    /* Merchant copy. One unbroken run — a pasted URL, an email, a 113-character
       mash seen on a test store — laid the column out 660px wide, and on an RTL
       page the viewport then scrolled to it: every screen opened 285px off
       with the header sheared on both sides. Break anywhere rather than widen. */
    overflow-wrap: anywhere;
}

.site-footer__menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__menu a {
    color: var(--color-text-soft);
    text-decoration: none;
}
.site-footer__menu a:hover { color: var(--color-primary); }

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-footer__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-soft);
    text-decoration: none;
    font-size: 0.92rem;
}

.site-footer__contact a:hover { color: var(--color-primary); }

.site-footer__contact svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.site-footer__copyright {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-faint);
    font-size: 0.85rem;
    text-align: center;
    width: 100%;
}

/* Footer newsletter band — <falak-newsletter> under the footer's top edge,
   switched on from theme settings (footer_newsletter_enabled).

   A direct child of <footer> carrying its own .container, so the rule under
   it runs the full width of the footer rather than stopping at the content
   column, the way the heading/form row above it does. */
.site-footer__newsletter {
    margin-block-end: 2rem;
    padding-block-end: 2rem;
    border-block-end: 1px solid var(--color-border);
}

.site-footer__newsletter-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.site-footer__newsletter-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Grows into the space the heading leaves, but never the full width of a
   desktop footer — a 1200px-wide email field looks like a mistake. */
.site-footer__newsletter-form {
    flex: 1 1 20rem;
    max-width: 28rem;
}

.site-footer__newsletter-form .f-newsletter__input,
.site-footer__newsletter-form .f-newsletter__submit { border-radius: var(--radius-sm); }
.site-footer__newsletter-form .f-newsletter__submit { font-weight: 700; }

/* Stacked, the heading sits above its own form rather than beside it. */
@media (max-width: 640px) {
    .site-footer__newsletter-inner { justify-content: center; text-align: center; }
    .site-footer__newsletter-form { flex-basis: 100%; max-width: none; }
}

/* Dark footer: the divider follows the dark palette. The field itself keeps
   its light plate — the SDK draws it that way on purpose, and a dark input
   on a dark footer reads as disabled. */
.footer-is-dark .site-footer__newsletter,
.site-footer--dark .site-footer__newsletter { border-block-end-color: #2a2e38; }

.footer-is-dark .site-footer {
    background: var(--color-footer-bg, #171a21);
    border-top-color: #2a2e38;
    color: #d5d9e0;
}
.footer-is-dark .site-footer__about,
.footer-is-dark .site-footer__contact a,
.footer-is-dark .site-footer__menu a { color: #9aa1ad; }
.footer-is-dark .site-footer__contact a:hover { color: var(--color-primary-light); }
.footer-is-dark .site-footer__menu a:hover { color: var(--color-primary-light); }
.footer-is-dark .site-footer__copyright { border-top-color: #2a2e38; color: #6b7280; }

/* ==========================================================================
   Footer — columns, compliance band, legal line
   --------------------------------------------------------------------------
   The same footer onyx carries, in this theme's own tokens: light by default,
   dark under body.footer-is-dark. Columns the store does not have simply do
   not render, and the grid adapts (auto-fit) so there is never a reserved
   hole. Preview-only shells (customizer draft renders) are dashed and dimmed
   so sample chrome cannot be mistaken for content.
   ========================================================================== */

/* ---- newsletter band: words beside the form ---- */
.site-footer__newsletter-words { display: grid; gap: 0.25rem; }
.site-footer__newsletter-text { margin: 0; color: var(--color-text-soft); font-size: 0.92rem; }

/* ---- the columns ---- */
.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(10rem, 1fr));
    gap: 2.5rem 3rem;
    align-items: start;
}

.site-footer__col { min-inline-size: 0; }
.site-footer__col--brand { display: grid; gap: 1.25rem; justify-items: start; }

.site-footer__heading {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.site-footer__links a {
    color: var(--color-text-soft);
    text-decoration: none;
}
.site-footer__links a:hover { color: var(--color-primary); }

/* "Show more" under a capped categories list — the rows past the cap ship
   hidden and the button reveals them. */
.site-footer__links li[hidden] { display: none; }

.site-footer__more-btn {
    margin-block-start: 0.6rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}
.site-footer__more-btn:hover { text-decoration: underline; }

.site-footer__social-wrap { display: grid; gap: 0.5rem; }
.site-footer__apps-text { margin: 0 0 0.75rem; color: var(--color-text-soft); font-size: 0.92rem; }

/* ---- compliance band: badges one side, payment marks the other ---- */
.site-footer__bottom {
    margin-block-start: 2.5rem;
    border-block-start: 1px solid var(--color-border);
}

.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-block: 1.5rem;
}

.site-footer__marks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.site-footer__marks .f-trust__list { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }

.site-footer__marks .f-trust__item {
    margin: 0;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

/* The official mark beside each certificate — a white tile because the marks
   are designed for paper; `contain` because the three are different shapes. */
.site-footer__marks .f-trust__logo {
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0.2rem;
    border-radius: 0.4rem;
    background: #fff;
    object-fit: contain;
}

/* <falak-payments> is full-width elsewhere in this theme; in the band it
   sizes to its marks and sits at the row's end. */
.site-footer__bottom-inner falak-payments.f-payments { inline-size: auto; flex: 0 1 auto; margin: 0; }
.site-footer__bottom-inner .f-payments__list { inline-size: auto; margin: 0; justify-content: flex-end; gap: 0.5rem; }

/* ---- legal line ---- */
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 1rem 0;
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-faint);
    font-size: 0.85rem;
}

.site-footer__legal .site-footer__copyright {
    margin: 0;
    padding: 0;
    border: 0;
    width: auto;
    text-align: start;
}

.site-footer__legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}
.site-footer__legal-links a { color: inherit; text-decoration: none; }
.site-footer__legal-links a:hover { color: var(--color-primary); }
.site-footer__powered { margin: 0; }

/* ---- preview-only shells ---- */
.site-footer__about.is-placeholder,
.site-footer__group.is-placeholder .site-footer__heading { opacity: 0.55; }

.site-footer__add {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-text-faint);
}
.site-footer__add--inline { display: inline-block; }

/* The numbers prompt stands in for the badges only while there are none: the
   component hides itself when it has nothing to show, and that is the signal. */
.site-footer__marks falak-trust-badges:not([hidden]) ~ .site-footer__add--docs { display: none; }

/* ---- dark footer ---- */
.footer-is-dark .site-footer__heading { color: #f5f5f5; }
.footer-is-dark .site-footer__links a,
.footer-is-dark .site-footer__newsletter-text,
.footer-is-dark .site-footer__apps-text { color: #9aa1ad; }
.footer-is-dark .site-footer__links a:hover,
.footer-is-dark .site-footer__legal-links a:hover { color: var(--color-primary-light); }
.footer-is-dark .site-footer__more-btn { color: var(--color-primary-light); }
.footer-is-dark .site-footer__bottom,
.footer-is-dark .site-footer__legal { border-color: #2a2e38; }
.footer-is-dark .site-footer__marks .f-trust__item { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }
.footer-is-dark .site-footer__add { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); }

/* ---- phones ---- */
@media (max-width: 767px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .site-footer__bottom-inner { justify-content: center; }
    .site-footer__bottom-inner .f-payments__list { justify-content: center; }
    .site-footer__legal { justify-content: center; text-align: center; }
    .site-footer__legal .site-footer__copyright { text-align: center; }
}

/* ------------------------------------------------------- blocks (areas) */

.block { margin-block: 3.5rem; }

.block__title {
    text-align: center;
    margin-bottom: 2rem;
}

/* Raed-style accent: a short primary bar anchors every section heading. */
.block__title::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 3px;
    border-radius: 999px;
    background: var(--color-primary);
    margin: 0.6rem auto 0;
}

/*
    Merchant prose: honour typed line breaks.

    Every `format: "textarea"` field in this theme's schemas lands in one of
    the elements below. A merchant who presses Enter in one of those boxes
    means it, so the newline is honoured in CSS rather than in markup:
    `nl2br` is not on the sandbox's filter allowlist (ThemeRenderer::
    securityPolicy), and building <br> out of merchant-typed text would mean
    emitting markup from a field that is deliberately plain.

    `pre-line` also makes the TEMPLATE's own whitespace visible, so each of
    these expressions has to stay flush against its tags on one line. Do not
    reformat `<p>{{ component.text }}</p>` onto three.
*/
.banner__content p,           /* banner.description                 */
.hero-slider__content p,      /* enhanced-slider.slides.description */
.feature-card p,              /* features.items.text                */
.image-text__body p,          /* image-with-text.text               */
.testimonial-card blockquote, /* testimonials.items.text            */
.f-countdown__description {   /* offer-countdown.description        */
    white-space: pre-line;
}

/* hero slider — full-bleed photography with a directional scrim (Al-Mahud style) */
/* The optional line under a section heading (contact, and any block that
   wants one). Sits below the accent bar the title draws. */
.block__subtitle {
    margin: -1.25rem auto 2rem;
    max-width: 40rem;
    text-align: center;
    color: var(--color-text-soft);
}

.block--hero-slider { margin-top: 0; }

.hero-slider {
    position: relative;
    overflow: hidden;
}

.hero-slider__slide {
    position: relative;
    min-height: clamp(340px, 44vw, 540px);
    display: none;
    align-items: center;
    color: #fff;
}

.hero-slider__slide.is-active { display: flex; }

.hero-slider__img,
.hero-slider__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A background clip is decoration: it must not be reachable or grabbable,
   and a tap on it has to land on the slide (its button) like a tap on the
   photo does. */
.hero-slider__video {
    pointer-events: none;
    -webkit-user-drag: none;
}

/* A slide with no title, text or button is a banner whose words are baked
   into the picture, so cropping it to the slide's fixed height cuts them
   off. Let the picture set the slide's height instead and show it whole,
   at every width: this used to apply below 1024px only, and a 3:1 banner
   on a 1280px laptop lost a third of its width to the fixed height (while
   a phone and a 1920px desktop happened to fit, so the crop looked random).
   The empty content box is lifted out of flow so its padding adds no
   height, but it stays in the DOM for the customizer to select. */
.hero-slider__slide:not(:has(.hero-slider__content > *)) {
    min-height: 0;
}

.hero-slider__slide:not(:has(.hero-slider__content > *)) .hero-slider__img,
.hero-slider__slide:not(:has(.hero-slider__content > *)) .hero-slider__video {
    position: static;
    height: auto;
}

.hero-slider__slide:not(:has(.hero-slider__content > *)) .hero-slider__content {
    position: absolute;
    inset: 0;
    padding: 0;
}

/* Scrim anchored to the reading side, so text stays legible on any photo.
   Dimmable from the customizer — see .banner::before for the contract. Worth
   knowing before you drag it to 0: this scrim is what keeps the slide's text
   readable over a bright photo. */
.hero-slider__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 14, 18, 0.66) 8%, rgba(12, 14, 18, 0.25) 55%, rgba(12, 14, 18, 0.05));
    opacity: var(--falak-overlay, 0%);
}

[dir="rtl"] .hero-slider__slide::after {
    background: linear-gradient(270deg, rgba(12, 14, 18, 0.66) 8%, rgba(12, 14, 18, 0.25) 55%, rgba(12, 14, 18, 0.05));
}

.hero-slider__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: 3rem;
}

.hero-slider__content h2 {
    font-size: clamp(1.7rem, 1.1rem + 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.6rem;
    max-width: 22ch;
}

.hero-slider__content p {
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
    max-width: 44ch;
    margin: 0 0 1.5rem;
    opacity: 0.92;
    line-height: 1.55;
}

.hero-slider__content .btn {
    padding: 0.85rem 2.2rem;
    font-size: 1.02rem;
}

.hero-slider__dots {
    position: absolute;
    inset-inline: 0;
    bottom: 1.1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
}

.hero-slider__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background var(--transition), width var(--transition);
}

.hero-slider__dot.is-active {
    background: #fff;
    width: 1.5rem;
}

.hero-slider__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background var(--transition);
}

.hero-slider__arrow:hover { background: rgba(255, 255, 255, 0.34); }

.hero-slider__arrow--prev { inset-inline-start: 1rem; }
.hero-slider__arrow--next { inset-inline-end: 1rem; }

/*
    Deliberately no RTL flip. The prev/next glyphs are U+2039 / U+203A,
    which are Bidi_Mirrored: under [dir="rtl"] the browser already mirrors
    them, so prev points right and next points left, which is what RTL
    wants. A `scale: -1 1` on top of that flips them back and leaves both
    arrows pointing into the slide. If these are ever swapped for SVG or
    any non-mirrored glyph, the flip has to come back.
*/

@media (max-width: 640px) {
    .hero-slider__arrow { display: none; }

    /* No reading side on a narrow slide: an even scrim keeps the title
       legible wherever it lands on the photo. Also stated for RTL because
       the directional RTL scrim rule is more specific than this one. */
    .hero-slider__slide::after,
    [dir="rtl"] .hero-slider__slide::after {
        background: rgba(12, 14, 18, 0.5);
    }

    .hero-slider__content { padding-block: 2.5rem 3.25rem; }
}

/* testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.testimonial-card {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.testimonial-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.testimonial-card__stars {
    color: #f5a623;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.testimonial-card blockquote {
    margin: 0 0 0.75rem;
    color: var(--color-text-soft);
}

.testimonial-card figcaption { font-weight: 700; font-size: 0.9rem; }

/* The "real reviews" source's loading state: card-shaped blanks, the same
   idea as .blog-card--skeleton, so the band holds its height while the
   reviews are fetched. */
.testimonial-card--skeleton {
    min-block-size: 9rem;
    background: var(--color-surface);
    border-color: transparent;
    box-shadow: none;
}

/* banner */
.banner {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: clamp(200px, 28vw, 340px);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 12, 16, 0.55), rgba(10, 12, 16, 0.1));
    /* The customizer's section-level "Background dimming" publishes
       --falak-overlay on the section root; this scrim inherits it. 0 turns the
       scrim off, and unset is 0% — no scrim until the merchant asks for one. `opacity`
       takes a percentage directly, which is what the platform emits. */
    opacity: var(--falak-overlay, 0%);
}

[dir="rtl"] .banner::before {
    background: linear-gradient(270deg, rgba(10, 12, 16, 0.55), rgba(10, 12, 16, 0.1));
}

.banner__content {
    position: relative;
    padding: 2rem clamp(1.25rem, 4vw, 3rem);
    max-width: 46ch;
}

.banner__content h2 { margin-bottom: 0.5rem; }
.banner__content p { margin: 0 0 1.25rem; opacity: 0.92; }

/* The button is styleable, and "Element alignment" moves it with auto margins —
   which an inline box ignores. Block-level with a fit-content width renders
   identically to the inline-flex it replaces (it is already on its own line),
   and gives those margins something to push against. */
.banner__content .btn {
    display: flex;
    inline-size: fit-content;
}

/* offer countdown block — the band itself is <falak-countdown theme="…">, SDK-styled */
.block--countdown falak-countdown { display: flex; }

/* Expired: the live page drops the block server-side; `is-ended` is the page
   that was open when the clock ran out (app.js, on the component's `ended`).
   `is-expired` is the customizer's view: kept, greyed, with the note as a
   pencil to the date that brings it back. */
.block--countdown.is-ended { display: none; }
.block--countdown.is-expired falak-countdown { filter: grayscale(1); }

/* The band is the SDK's own markup, so the note cannot sit inside it: it is a
   tab fixed to the band's top edge instead (in flow, so it never covers the
   headline however many lines it wraps to), and the band squares its top
   corners to meet it. */
.block__expired-note {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border: 1px dashed rgba(0, 0, 0, 0.4);
    border-block-end: 0;
    border-radius: var(--radius-lg, 1rem) var(--radius-lg, 1rem) 0 0;
    background: var(--color-surface-alt, #f4f5f7);
    color: #1a1a1a;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}
.block--countdown.is-expired falak-countdown {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

/* features row */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.feature-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.feature-card__icon {
    width: 3rem;
    height: 3rem;
    margin-inline: auto;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: 1.35rem;
}

.feature-card__icon img { width: 1.6rem; height: 1.6rem; }

.feature-card h3 { margin-bottom: 0.35rem; font-size: 1.05rem; }
.feature-card p { margin: 0; color: var(--color-text-soft); font-size: 0.92rem; }

/* image with text */
.image-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.image-text--flipped .image-text__media { order: 2; }

.image-text__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.image-text__body h2 { margin-bottom: 0.75rem; }
.image-text__body p { color: var(--color-text-soft); margin: 0 0 1.5rem; }

@media (max-width: 720px) {
    .image-text { grid-template-columns: 1fr; }
    .image-text--flipped .image-text__media { order: 0; }
}

/* contact form — the SDK's <falak-contact-form> in this theme's frame.

   The component paints its inputs as light plates on a panel it expects the
   THEME to tint (see --f-input-bg in the SDK sheet), so .contact__form is
   that panel: the same surface, border and radius the feature cards use. */
.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    /* Stretch, so the picture column is exactly as tall as the form card. */
    align-items: stretch;
}

/* No side image: the form alone, held to a readable measure rather than
   stretched across the full container width. */
.contact--single {
    grid-template-columns: 1fr;
    max-width: 44rem;
    margin-inline: auto;
}

/* Side by side, the picture takes the form's height — the row is sized by
   the card, the image is pinned to the cell and cropped to fit, so the two
   edges always line up whatever the form's length or the photo's ratio. */
.contact__media { position: relative; min-height: 16rem; }

.contact__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--color-surface);
}

.contact__form {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* The plates the SDK draws inside that panel, on this theme's radius. */
.contact__form .f-contact__input { border-radius: var(--radius-sm); }
.contact__form .f-contact falak-button { margin-block-start: 0.5rem; }

@media (max-width: 720px) {
    .contact { grid-template-columns: 1fr; }
    /* Stacked, the picture goes back into the flow as a 16:9 band — a tall
       portrait would be a full screen the visitor scrolls past before
       reaching the form the section exists for. */
    .contact__media { min-height: 0; }
    .contact__image { position: static; height: auto; aspect-ratio: 16 / 9; }
}

/* newsletter — the SDK's <falak-newsletter> in this theme's frame.

   One centred column on a tinted panel: the section is an interruption in
   the page, not a card in a row, so it reads as a band rather than sitting
   in the same rhythm as the product grids above and below it. */
.newsletter {
    max-width: 44rem;
    margin-inline: auto;
    padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
}

/* The title's centring and accent bar already come from .block__title; only
   the trailing margin changes, because the subtitle follows it closely. */
.newsletter .block__title { margin-bottom: 1.25rem; }
.newsletter .block__subtitle { margin-block: 0 1.5rem; }

.newsletter__form { display: block; }

/* The SDK lays the field and button out as one row and wraps them under
   479px. The only thing this theme changes is the shape. */
.newsletter__form .f-newsletter__input,
.newsletter__form .f-newsletter__submit { border-radius: var(--radius-sm); }
.newsletter__form .f-newsletter__submit { font-weight: 700; }
.newsletter__form .f-newsletter__status { text-align: start; }

.newsletter__note {
    margin: 1rem 0 0;
    color: var(--color-text-faint);
    font-size: 0.82rem;
}

/* -------------------------------------------------------------- listing */

.page-head {
    padding-block: 2rem 0.5rem;
}

.page-head h1 { margin-bottom: 0.25rem; }

.page-head__meta { color: var(--color-text-soft); font-size: 0.92rem; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.5rem;
    padding-block: 1.5rem 0;
}

/* The wishlist on a phone: two narrow columns, as the listing shows them,
   rather than one 210px card after another. */
@media (max-width: 480px) {
    .account__content .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* ------------------------------------------------------- video commerce */
/* The row reuses .product-grid so its cards sit on the same rhythm as the
   listing; only the column count is its own, because the block lets the
   merchant choose it. */
.vp-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

@media (min-width: 861px) {
    .vp-grid {
        grid-template-columns: repeat(var(--vp-columns, 4), minmax(0, 1fr));
    }
}

/*
   More products than columns: one row that SCROLLS, not a second row.

   app.js sets [data-scroll-rail] when the wall holds more than it can show
   across. A merchant who asks for eight products across four columns wants
   eight products, and stacking them two-deep turns a lean band into a block of
   video that pushes the whole page down.

   Large screens only. On a phone the wall stays the grid it already is;
   scrolling there belongs to the viewer, which opens as a reel.

   The slide width comes from --vp-columns, so the merchant's own column count
   still decides how many are in view and the cards keep the size the static
   grid would have given them.
*/
/*
   EVERY width, not just the desk.

   The attribute is only set when the wall holds MORE products than it shows
   across, so the ordinary phone grid is untouched — with the default of four
   products it simply never matches. What this covers is the case the raised
   cap allows: a merchant who asks for forty used to get ten stacked rows,
   thousands of pixels of column. One swipeable row is the right answer at
   every size.
*/
.vp-grid[data-scroll-rail] {
    /*
       How many cards are in view, stepping up with the screen the way the
       static grid above does: two on a phone, three on a tablet, and from
       861px the column count the merchant chose — which is the same point
       the grid itself starts following it.
    */
    --vp-visible: 2;

    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(
        (100% - (var(--vp-visible) - 1) * var(--grid-gap, 1.25rem)) / var(--vp-visible)
    );
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block-end: 0.25rem;
}

.vp-grid[data-scroll-rail]::-webkit-scrollbar { display: none; }

.vp-grid[data-scroll-rail] > * { scroll-snap-align: start; }

/*
   The row's scroll affordances, drawn by app.js under the grid: a thin line
   showing how far along it is, and from laptop widths a pair of arrows beside
   it. Without them a desktop shopper saw four cards, had no scrollbar to drag
   and no wheel that moves a horizontal container — and so no reason to think
   there were more.
*/
.vp-foot {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-block-start: 1.5rem;
}

.vp-foot[hidden] { display: none; }

.vp-rail {
    position: relative;
    flex: 1;
    block-size: 2px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}

/* The arrows are for the mouse. A thumb already scrolls the row natively and
   two tap targets under it would only crowd the band, so they appear at the
   same 861px where the grid starts following the merchant's column count. */
.vp-nav { display: none; }

@media (min-width: 53.8125rem) {
    .vp-nav {
        display: flex;
        gap: 0.5rem;
    }
}

.vp-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.vp-nav__btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.vp-nav__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* app.js draws ONE chevron, pointing toward inline-start. The next button
   mirrors it, and RTL mirrors the pair again — both arrows, one path. */
.vp-nav__btn[data-vp-next] svg,
[dir="rtl"] .vp-nav__btn[data-vp-prev] svg { transform: scaleX(-1); }

[dir="rtl"] .vp-nav__btn[data-vp-next] svg { transform: none; }

.vp-rail__thumb {
    position: absolute;
    inset-block: 0;
    border-radius: 10px;
    background: var(--color-primary);
    transition: inset-inline-start 0.15s linear;
}

/* While a card is being dragged, the pointer is moving the row — not hovering
   anything — so the cursor says so and text stops selecting under it. */
.vp-grid[data-scroll-rail] { cursor: grab; }
.vp-grid[data-scroll-rail].is-dragging { cursor: grabbing; user-select: none; }

@media (min-width: 48rem) {
    .vp-grid[data-scroll-rail] { --vp-visible: 3; }
}

/* 861px is where this theme's grid starts following --vp-columns; the scroller
   follows it from the same point. */
@media (min-width: 53.8125rem) {
    .vp-grid[data-scroll-rail] { --vp-visible: var(--vp-columns, 4); }
}

/* Placeholder tiles, sized to the reel card's 9/16 portrait so the grid is
   the right height before the fetch lands and nothing below it jumps. */
.vp-skeleton {
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface) 25%,
        color-mix(in srgb, var(--color-surface) 60%, var(--color-bg)) 37%,
        var(--color-surface) 63%
    );
    background-size: 400% 100%;
    animation: vp-shimmer 1.4s ease infinite;
}

@keyframes vp-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* Motion is decoration here — the tile still reserves the space without it. */
@media (prefers-reduced-motion: reduce) {
    .vp-skeleton { animation: none; }
}

/*
   The reel card.

   The wall renders the SDK's ordinary <falak-product-card>, but a card whose
   subject is a clip should read like the viewer it opens into: the video
   full-bleed and portrait, with the name, the price and the buy row laid over
   its foot instead of boxed underneath. Everything here is a reskin of the
   markup the SDK already emits — scoped to .vp-grid so the same card keeps
   its ordinary shape in the listing and on every other home row.

   The inner keeps its flex column; the media is simply lifted out of the flow
   to fill the whole card, and justify-content pins the body and actions to
   the bottom edge, over a scrim that keeps white type legible on any frame.
*/
.vp-grid .f-card__inner {
    position: relative;
    justify-content: flex-end;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: var(--radius-lg);
    background: #15181d;
}

.vp-grid .f-card__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: transparent;
}

/* The scrim. A pseudo-element on the inner rather than a background on the
   body, so the fade can run taller than the text it protects. It paints
   after the (static) body in the stacking order, which is why the body and
   actions below carry their own z-index. */
.vp-grid .f-card__inner::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 55%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78),
        rgba(0, 0, 0, 0.42) 45%,
        rgba(0, 0, 0, 0)
    );
    pointer-events: none;
}

/* The sale/hot column keeps the top start corner; the free-shipping promise
   moves up from the bottom so it never sits under the overlay. The clip
   badge goes entirely — on a wall of nothing but clips a "product video"
   pill on every card says nothing. */
.vp-grid .f-card__marks {
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
}

.vp-grid .f-card__video-badge { display: none; }

.vp-grid .f-card__ship {
    inset-block-end: auto;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
}

.vp-grid .f-card__body {
    position: relative;
    z-index: 1;
    flex-grow: 0;
    gap: 0.4rem;
    padding: 0 1rem 0.15rem;
    text-align: center;
}

.vp-grid .f-card__title { font-size: 0.95rem; }

.vp-grid .f-card__link { color: #fff; }
.vp-grid .f-card__link:hover { color: rgba(255, 255, 255, 0.85); }

/* The stars belong to the grid card; over a clip they are clutter the
   viewer itself also does without. */
.vp-grid .f-card falak-rating-stars { display: none; }

.vp-grid .f-card__price {
    justify-content: center;
    margin: 0;
    padding-block-start: 0;
}

.vp-grid .f-card__price-now { font-size: 1.15rem; color: #fff; }
.vp-grid .f-card__price-was { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }

/* The theme's danger red disappears into the scrim; a lighter tint of it
   stays legible there. */
.vp-grid .f-card__stock { color: #fda4af; }

.vp-grid .f-card__actions {
    position: relative;
    z-index: 1;
    padding: 0.5rem 0.9rem 0.9rem;
}

/* The buy row: the add button filled with the brand colour and carrying its
   bag icon, the heart a frosted square beside it — the pair the reference
   mock draws. */
.vp-grid .f-card__add {
    min-block-size: 2.75rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.vp-grid .f-card__add:hover:not(:disabled) {
    background: var(--color-primary-dark);
    color: var(--color-on-primary);
}

.vp-grid .f-card__wishlist {
    flex: none;
    inline-size: 2.75rem;
    min-block-size: 2.75rem;
    border: 0;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    backdrop-filter: blur(6px);
}

.vp-grid .f-card__wishlist:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.vp-grid .f-card__wishlist.is-active,
.vp-grid .f-card__wishlist.is-added { color: #f87171; }

/* Under 560px the global card rule hides the button label and leaves the
   bag icon — right here too: two reel cards share a phone's width, and
   "أضف إلى السلة" beside a heart does not fit a half-width button. The
   heart keeps its fixed square from above, so the bag takes the rest. */

.block--video-products .block__subtitle {
    margin-block: -0.25rem 0;
    color: var(--color-text-soft);
}

.block--video-products .block__footer {
    display: flex;
    justify-content: center;
    padding-block-start: 1.5rem;
}

@media (max-width: 560px) {
    /*
        Two cards per row, always. `1fr` alone is minmax(auto, 1fr): a column
        never goes below its card's min-content width, and the nowrap
        "choose options" + heart row held that at ~210px — so on a 390px
        phone the two columns summed to 440px and the second card hung off
        the edge of the screen, sheared by the body's overflow clip.
    */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .product-grid > falak-product-card { min-width: 0; }

    /*
        The buy row is two icons — on every card the theme shows, not only
        the listing: the home grid, the sliders, related products and video
        commerce all render the same <falak-product-card>. At half a phone's
        width there is no room for "choose options" beside a heart, so the
        bag the button already carries stands alone and the heart takes the
        other half. The label stays in the DOM for screen readers; a sold-out
        card still says so in the body copy above. Both hosts are
        display:contents, so the inner buttons are the flex items here.
    */
    .f-card__actions { gap: 0.5rem; padding-inline: 0.6rem; }

    .f-card__add,
    .f-card__wishlist {
        flex: 1 1 0;
        min-inline-size: 0;
        inline-size: auto;
        min-block-size: 2.5rem;
        padding: 0;
    }

    .f-card__add { position: relative; gap: 0; }
    .f-card__add > svg { width: 20px; height: 20px; }

    .f-card__add > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/*
    Sold out is said once. With an add button on the card its label already
    reads "out of stock", so the red body-copy line is a duplicate — hidden
    only above the phone breakpoint: under 560px the button collapses to a
    bare icon (its label goes sr-only, above) and the body line becomes the
    one visible indicator again. A card without the button keeps the line
    at every width — it is the only indicator it has.
*/
@media (min-width: 561px) {
    falak-product-card[show-add-button] .f-card__stock { display: none; }
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}

/* The name link stretches over the whole card; interactive children sit above. */
.product-card__link {
    color: inherit;
    text-decoration: none;
}

.product-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.product-card .btn--card { position: relative; z-index: 1; }

.btn--card {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn--card:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn--card.is-added {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.product-card__media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* The image zoom reads as elevation once the frame lifts with it. */
.product-card:hover .product-card__media {
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    box-shadow: var(--shadow);
}

.product-card__media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}

.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-faint);
    font-size: 2rem;
}

.product-card h3 {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-card__price {
    margin: 0;
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* ------------------------------------------------------- product single */

.product-single { padding-block: 1rem 2rem; }

/* The related rail excludes the product the page is on (data-exclude-product
   in single.twig), so on a store whose only product is this one the list now
   comes back empty — the "none found" message under a "related" heading is
   worse than no section at all. */
.product-single__related:has(.f-list__message--empty) { display: none; }

.product-single__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

@media (max-width: 820px) {
    .product-single__layout { grid-template-columns: 1fr; }
}

/* gallery */
.gallery__main {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.gallery__main img {
    width: 100%;
    aspect-ratio: 1;
    display: block;
}

.gallery__thumbs {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.gallery__thumb {
    flex: 0 0 4.5rem;
    padding: 0;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-surface);
}

.gallery__thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.gallery__thumb.is-active { border-color: var(--color-primary); }

.product-image--contain { object-fit: contain; }
.product-image--cover { object-fit: cover; }

/* buy box */
.product-single__info h1 { margin-bottom: 0.5rem; }

.product-single__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-block: 0 1rem;
}

/* The SKU line under the title — reference metadata, kept quiet. */
.product-single__sku {
    font-size: 0.8rem;
    color: var(--color-text-faint);
    margin-block: 0 0.75rem;
}

/* The product's categories, a row of links above the title. */
.product-single__categories {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.product-single__categories a {
    color: var(--color-primary);
    text-decoration: none;
}

.product-single__categories a:hover { text-decoration: underline; text-underline-offset: 3px; }

.product-single__categories a + a::before {
    content: "/";
    display: inline-block;
    margin-inline: 0.55rem;
    color: var(--color-text-faint);
    pointer-events: none;
}

/*
    Product description — clamped preview + "see more".

    The clamp height lives here and nowhere else: app.js reads it back off the
    element to animate between the two states, so changing the line count is a
    one-line edit. `is-clampable` is set by JS only when the copy actually
    overflows, which means a short description never fades and never grows a
    button, and with JS off nothing is ever hidden.
*/
.product-single__description {
    --description-lines: 7;
    color: var(--color-text-soft);
    margin-bottom: 1.75rem;
}

.product-single__description-body > :first-child { margin-block-start: 0; }
.product-single__description-body > :last-child { margin-block-end: 0; }

.product-single__description-body {
    transition: max-height 320ms ease;
}

.product-single__description.is-clampable .product-single__description-body {
    max-height: calc(var(--description-lines) * 1.65em);
    overflow: hidden;
}

/* The fade is a mask, not a gradient overlay, so it works on whatever
   background the merchant's palette puts behind the info column. */
.product-single__description.is-clampable:not(.is-open) .product-single__description-body {
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.15) 100%);
            mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.15) 100%);
}

/* `display: inline-flex` below would beat the UA's [hidden] rule, so the
   button has to opt back out explicitly — otherwise a short description
   still shows a "see more" that does nothing. */
.product-single__description-toggle[hidden] { display: none; }

.product-single__description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-block-start: 0.85rem;
    padding: 0.4rem 0.95rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-dark);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition),
                background var(--transition), box-shadow var(--transition);
}

.product-single__description-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.product-single__description-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.product-single__description-toggle svg {
    flex-shrink: 0;
    transition: transform var(--transition);
}

.product-single__description.is-open .product-single__description-toggle svg {
    transform: rotate(180deg);
}

@media (max-width: 640px) {
    .product-single__description { --description-lines: 5; }
}

@media (prefers-reduced-motion: reduce) {
    .product-single__description-body,
    .product-single__description-toggle,
    .product-single__description-toggle svg { transition: none; }
}

.buy-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* ------------------------------------------------------------------ cart */

.cart-page { padding-block: 1rem 2rem; }

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 820px) {
    /* minmax(0, 1fr), not 1fr: a grid track's automatic minimum is its widest
       item's MIN-CONTENT, so the summary's coupon control was stretching the
       single column to 455px inside a 390px phone and taking every cart line
       off the right of the screen with it. The desktop rule above already
       says minmax(0, 1fr) for the same reason. */
    .cart-layout { grid-template-columns: minmax(0, 1fr); }
}

.cart-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cart-item {
    display: flex;
    gap: 1rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}

.cart-item img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
}

.cart-item__info { flex: 1; min-width: 0; }

.cart-item__info a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    display: block;
    margin-bottom: 0.2rem;
}
.cart-item__info a:hover { color: var(--color-primary); }

.cart-item__meta { color: var(--color-text-soft); font-size: 0.9rem; }

.cart-item__line-total { font-weight: 700; white-space: nowrap; }

.cart-summary {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.cart-summary h2 { font-size: 1.1rem; margin-bottom: 1rem; }

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    color: var(--color-text-soft);
}

.cart-summary__row--total {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.1rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.cart-summary .btn { margin-top: 1rem; }

/* ---------------------------------------------------------- misc / pages */

.empty-state {
    text-align: center;
    padding-block: 4rem;
    color: var(--color-text-soft);
}

.empty-state__icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.empty-state p { margin-bottom: 1.5rem; }

/*
    The "other products" grid shown when a category turns up empty. Only the
    heading needs rules — the grid and cards inside it are <falak-products-list>,
    styled by the platform's falak-components.css.
*/
.product-listing__fallback {
    margin-block-start: 1rem;
    padding-block-start: 2.5rem;
    border-block-start: 1px solid var(--color-border);
}

.product-listing__fallback h2 {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

/*
    Listing layout: sidebar (<falak-filters>, SDK-styled) beside the grid on
    wide screens; on phones the sidebar is an off-canvas drawer opened by the
    toolbar button (app.js toggles .is-open).
*/
.product-listing__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.product-listing--with-sidebar .product-listing__layout { grid-template-columns: 16.5rem minmax(0, 1fr); }

.product-listing__sidebar {
    position: sticky;
    top: 5.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface, #fff);
}

.product-listing__sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.25rem; }
.product-listing__sidebar-head h2 { font-size: 1rem; margin: 0; }
.product-listing__sidebar-close { display: none; border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-soft); }

.product-listing__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.product-listing__filters-trigger { display: none; position: relative; }
.product-listing__filters-dot { position: absolute; inset-inline-end: 0.35rem; inset-block-start: 0.35rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--color-primary); }

/*
    Tabular numerals so "1–24 of 33" does not re-measure itself between pages.
    The auto end-margin is for the wrapped phone row: without it the toolbar's
    space-between throws the count against the far edge, away from the filters
    button it shares that line with. On wide screens it changes nothing — the
    sort's own auto start-margin already holds the far end.
*/
.product-listing__count {
    margin: 0;
    margin-inline-end: auto;
    color: var(--color-text-soft);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.product-listing__sort { display: inline-flex; align-items: center; gap: 0.6rem; margin-inline-start: auto; font-size: 0.9rem; }
.product-listing__sort span { color: var(--color-text-soft); white-space: nowrap; }
.product-listing__sort select { min-inline-size: 11rem; }

.product-listing__backdrop { display: none; }

/*
    Pager. Logical properties throughout (inline-size, padding-inline,
    margin-block) so the whole strip mirrors itself under [dir="rtl"] without a
    second rule set — the numbers run right-to-left and Previous/Next swap
    sides on their own. Tabular numerals keep the boxes from twitching between
    "9" and "10".
*/
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-start: 2.5rem;
}

.pager__page,
.pager__step {
    min-inline-size: 2.5rem;
    min-block-size: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 0.87rem;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.pager__page:hover,
.pager__step:hover:not(.is-disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pager__page.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* The disabled ends are <span>, not <a> — nothing to click and nothing for a
   screen reader to announce as a link. */
.pager__step.is-disabled { opacity: 0.4; cursor: default; }
.pager__gap { padding-inline: 0.25rem; color: var(--color-text-faint); }

@media (max-width: 899px) {
    .product-listing--with-sidebar .product-listing__layout { grid-template-columns: minmax(0, 1fr); }
    .product-listing__filters-trigger { display: inline-flex; }
    .product-listing__sidebar-close { display: inline-block; }

    .product-listing__sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: min(20rem, 88vw);
        z-index: 60;
        overflow-y: auto;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    [dir="rtl"] .product-listing__sidebar { transform: translateX(100%); }
    .product-listing__sidebar.is-open { transform: none; }

    .product-listing__backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.4); }
    .product-listing__backdrop[hidden] { display: none; }
    body.filters-are-open { overflow: hidden; }
}

.error-page { text-align: center; padding-block: 6rem 5rem; }

.error-page__code {
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-border);
    margin-bottom: 0.5rem;
}

.error-page p { color: var(--color-text-soft); margin-bottom: 1.75rem; }

/* static content pages (page-single) */
.content-page { padding-block: 1.5rem 2rem; max-width: 760px; }
.content-page h1 { margin-bottom: 1.25rem; }
.content-page__body { color: var(--color-text-soft); }
.content-page__body img { border-radius: var(--radius); }

/* -------------------------------------------------------- customer area */

.account { padding-block: 1.5rem 2rem; }

.account__layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 720px) {
    /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr), and
       'auto' let the nav's four nowrap tabs set the column's minimum. The
       whole account area then laid out 385px wide on a 358px screen, and
       every page under it — orders, wishlist — was sheared off at the edge. */
    .account__layout { grid-template-columns: minmax(0, 1fr); }
    .account__nav,
    .account__content { min-width: 0; }
}

.account__nav {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 0.6rem;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.account__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

@media (max-width: 720px) {
    .account__nav { position: static; }
    .account__nav ul {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .account__nav ul::-webkit-scrollbar { display: none; }
}

.account__nav a {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.account__nav a:hover { color: var(--color-primary); }

.account__nav a.is-active {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.account-details {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.account-details__row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.9rem 1.25rem;
}

.account-details__row + .account-details__row { border-top: 1px solid var(--color-border); }

.account-details dt { color: var(--color-text-soft); font-weight: 600; }
.account-details dd { margin: 0; }

/*
   An order number is one unbreakable token (`#ORD202610121035206409`) in a
   flex row beside the status pill and the total. On a phone it needed more
   than the column left over and, with nothing to break on, painted straight
   past the card's edge. `anywhere` (not `break-word`, which won't break a
   token alone on its line) lets it wrap instead of escaping.
*/
.f-orders__number { overflow-wrap: anywhere; }

/* Below 560px the pill and the total drop to their own line so the number
   gets the full card width. */
@media (max-width: 35rem) {
    .f-orders__row { flex-wrap: wrap; row-gap: 0.6rem; }
    .f-orders__main { flex: 1 0 100%; }
    .f-orders__total { margin-inline-start: auto; }
}

/* orders */
.order-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.order-row__main {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 8rem;
}

.order-row__number { font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.order-row__date { color: var(--color-text-soft); font-size: 0.85rem; }
.order-row__total { font-weight: 700; white-space: nowrap; }

.order-status {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
}

.order-status--completed,
.order-status--delivered { background: #e3f3ea; border-color: #bfe4d0; color: #1e7a4d; }
.order-status--cancelled,
.order-status--refunded { background: #fbe9e7; border-color: #f2c8c4; color: #b3372f; }
.order-status--shipped,
.order-status--processing { background: #e8eafb; border-color: #ccd2f2; color: #2f3eb5; }

.order-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.order-head h1 { margin: 0; }
.order-head__date { color: var(--color-text-soft); margin-block: 0.25rem 1.5rem; }

.order-totals {
    margin-top: 1.5rem;
    max-width: 22rem;
    margin-inline-start: auto;
}

/* notifications */
.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------- blog */
/* The card, the index, the article and its comment thread. Everything is
   built in the browser by the custom-falak-blog-* elements in app.js, which
   read /api/storefront/blogs; the Twig pages are shells. The card is ONE
   definition — the index grid creates the element rather than markup of its
   own — so keep these selectors and the element's classes in step. */

:root {
    --t26-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --t26-user:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
    --t26-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
    --t26-tag:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}

.blog-index,
.blog-post { padding-block-end: 2.5rem; }

/* ---- the card ---------------------------------------------------------- */

/* The card is a custom element, so it needs the box an <article> would have
   given it for free. The element adds .blog-card to itself, and the class is
   what the rules below are written against. */
custom-falak-blog-card { display: block; height: 100%; }

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow); }

.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--color-surface);
    overflow: hidden;
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__placeholder { display: block; width: 100%; height: 100%; }

.blog-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-soft);
}
.blog-card__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.blog-card__meta-glyph {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    background: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;    mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.blog-card__meta-glyph--date { -webkit-mask-image: var(--t26-calendar); mask-image: var(--t26-calendar); }
.blog-card__meta-glyph--user { -webkit-mask-image: var(--t26-user);     mask-image: var(--t26-user); }

.blog-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    /* Two lines, then ellipsis — a long headline must not push the "read more"
       of one card out of line with its neighbours in the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__title a { color: var(--color-text); text-decoration: none; }
.blog-card__title a:hover { color: var(--color-primary); text-decoration: none; }

.blog-card__excerpt {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-faint);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pushed to the foot so it lines up across a row of cards whose excerpts run
   to different lengths. */
.blog-card__more {
    margin-block-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.blog-card__more:hover { color: var(--color-primary-dark); text-decoration: none; }

.blog-card__more-chevron {
    width: 0.7rem;
    height: 0.7rem;
    background: currentColor;
    -webkit-mask: var(--t26-chevron) center / contain no-repeat;
    mask: var(--t26-chevron) center / contain no-repeat;
}
/* The chevron points the way the language reads. */
[dir="rtl"] .blog-card__more-chevron { transform: scaleX(-1); }

/* ---- the index --------------------------------------------------------- */

.blog-grid {
    display: grid;
    /* auto-FIT, not auto-fill: three articles in a container wide enough for
       four would leave an empty track and push the row off to one side. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Card-shaped blanks while the request is out, so the grid does not jump when
   the articles land. */
.blog-card--skeleton {
    min-block-size: 22rem;
    background: var(--color-surface);
    border-color: transparent;
}

.blog-index__filter {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-soft);
}
.blog-index__filter a { margin-inline-start: 0.75rem; }

.blog-index__empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-faint);
}

/* ---- the article ------------------------------------------------------- */

.blog-post__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block-start: 1.5rem;
}
/* The sidebar arrives only when there is room for it beside the prose; below
   that the related list follows the article instead of squeezing it. */
@media (min-width: 1024px) {
    .blog-post__grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

.blog-post__title {
    margin: 0 0 0.9rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.5;
    text-wrap: balance;
}

.blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    color: var(--color-text-soft);
}
.blog-post__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.blog-post__category { color: var(--color-primary); text-decoration: none; }

.blog-post__figure {
    margin: 0 0 1.75rem;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}
/* A wide crop. Article heroes arrive at whatever ratio the merchant uploaded,
   and a portrait shot rendered at its natural height pushes the whole article
   below the fold. */
.blog-post__figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* Merchant HTML from the admin editor lands here, so the tags it may contain
   are given a house style rather than left to the browser's defaults. */
.blog-post__body { font-size: 1rem; line-height: 1.9; color: var(--color-text-soft); }
.blog-post__body > * + * { margin-block-start: 1.1rem; }
.blog-post__body h2,
.blog-post__body h3 { color: var(--color-text); font-weight: 700; line-height: 1.5; }
.blog-post__body h2 { font-size: 1.25rem; }
.blog-post__body h3 { font-size: 1.0625rem; }
.blog-post__body ul,
.blog-post__body ol { padding-inline-start: 1.35rem; }
.blog-post__body li + li { margin-block-start: 0.4rem; }
.blog-post__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.blog-post__body a { color: var(--color-primary); }
.blog-post__body blockquote {
    margin-inline: 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--color-primary);
    color: var(--color-text);
}
/* A pasted table must scroll inside the article rather than widen the page. */
.blog-post__body table { display: block; overflow-x: auto; max-width: 100%; }

.blog-post__tags {
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.blog-post__tags a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    text-decoration: none;
}
.blog-post__tags a:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
    text-decoration: none;
}
.blog-post__tag-glyph {
    width: 0.8rem;
    height: 0.8rem;
    background: currentColor;
    -webkit-mask: var(--t26-tag) center / contain no-repeat;
    mask: var(--t26-tag) center / contain no-repeat;
}

.blog-post__aside { display: grid; gap: 1rem; align-content: start; }

.blog-post__aside-title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.blog-aside-card {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    text-decoration: none;
    transition: box-shadow var(--transition);
}
.blog-aside-card:hover { box-shadow: var(--shadow); text-decoration: none; }

.blog-aside-card__media {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
}
.blog-aside-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-aside-card__body { display: grid; gap: 0.35rem; }
.blog-aside-card__date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-faint);
}
.blog-aside-card__title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-aside-card:hover .blog-aside-card__title { color: var(--color-primary); }

@media (max-width: 767px) {
    .blog-post__title { font-size: 1.375rem; }
    .blog-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the comment thread ------------------------------------------------ */
/* A hairline above the block, the thread, then a bordered textarea with the
   submit sitting at its inline end. */

.blog-comments {
    margin-block-start: 2.5rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--color-border);
}

.blog-comments__title {
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}
.blog-comments__count {
    min-inline-size: 1.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    font-weight: 400;
    text-align: center;
}

.blog-comments__list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.blog-comment {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

/* No customer avatars on this platform, so the author's initial stands in.
   The disc is a tint of the brand colour, mixed here because the theme has no
   tint token; the fallback is the plain surface for browsers without
   color-mix. */
.blog-comment__avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
    color: var(--color-primary-dark);
    font-weight: 700;
}

.blog-comment__body {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    background: var(--color-surface);
}

.blog-comment__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 0.35rem;
}
.blog-comment__author { font-weight: 700; font-size: 0.9375rem; }
.blog-comment__date { font-size: 0.75rem; color: var(--color-text-faint); }

/* Shopper-written prose: wrap long words rather than let one unbroken string
   widen the article. */
.blog-comment__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text-soft);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.blog-comments__empty {
    margin: 0 0 1.75rem;
    color: var(--color-text-faint);
    font-size: 0.9375rem;
}

.blog-comments__form { display: grid; gap: 0.75rem; }

.blog-comments__input {
    inline-size: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.7;
    resize: vertical;
}
.blog-comments__input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.blog-comments__input::placeholder { color: var(--color-text-faint); }

/* The button sits at the inline end under the box. */
.blog-comments__submit { justify-self: end; min-inline-size: 8rem; }

.blog-comments__status {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-danger);
}
.blog-comments__status[hidden] { display: none; }

.blog-comments__signin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius);
    background: var(--color-surface);
}
.blog-comments__signin p { margin: 0; color: var(--color-text-soft); font-size: 0.9375rem; }

/* ------------------------------------------------------------- brands */

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    padding-block: 1rem 2rem;
}

.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    padding: 1.25rem;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.brand-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.brand-card img { max-height: 100%; object-fit: contain; }

.brand-card__name { font-weight: 700; color: var(--color-text); text-align: center; }

.brand-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-head__logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.4rem;
    background: var(--color-bg);
}

/* ---------------------------------------------------------- thank you */

.thank-you {
    text-align: center;
    padding-block: 5rem 4rem;
    max-width: 34rem;
}

.thank-you__icon {
    width: 4.5rem;
    height: 4.5rem;
    margin-inline: auto;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 2rem;
}

.thank-you p { color: var(--color-text-soft); }
.thank-you__order { margin-block: 1rem 1.5rem; }
.thank-you .btn { margin-inline: 0.35rem; }

/* ---------------------------------------------- photo grid + video */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

@media (max-width: 560px) {
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

.photo-tile {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
}

.photo-tile img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}

a.photo-tile:hover img { transform: scale(1.04); }

.photo-tile__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.5rem 1rem 0.75rem;
    background: linear-gradient(transparent, rgba(10, 12, 16, 0.65));
    color: #fff;
    font-weight: 600;
}

/* portrait video cards — the videos-slider block (reels row) */
.block--videos-slider .f-slider__slide { min-width: 0; }

/*
    Overlay arrows, kept inside the row.

    The SDK straddles them across the slider edge (`margin-inline: -0.75rem`),
    which reads well where the row has a gutter to hang into. This slider fills
    the container, so a third of the prev arrow landed on the page background —
    and the arrow's fill (--f-surface #f7f8fa) is all but the page's own
    (#fafafa), so that third disappeared and the control looked cropped in half.
    Disabled on the first slide at opacity 0.35, it vanished completely.
*/
.block--videos-slider .f-slider:not(.f-slider--controls-outer) .f-slider__arrow {
    margin-inline: 0.5rem;
}

.video-card {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    overflow: hidden;
    background: #14161a;
    box-shadow: 0 10px 28px rgba(15, 23, 32, 0.14);
    transform: translateZ(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.video-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 32, 0.22); }
.video-card.is-unmuted { box-shadow: 0 0 0 2px var(--color-primary), 0 18px 40px rgba(15, 23, 32, 0.22); }

.video-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.video-card:hover .video-card__media { transform: scale(1.05); }

/* Frosted-glass sound toggle; the slash lifts when the card is unmuted. */
.video-card__sound {
    position: absolute;
    inset-block-start: 0.7rem;
    inset-inline-end: 0.7rem;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(20, 22, 26, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.video-card__sound:hover { transform: scale(1.08); background: rgba(20, 22, 26, 0.55); }

.video-card__sound-icon {
    position: relative;
    inline-size: 0.9rem;
    block-size: 0.9rem;
    background: currentColor;
    clip-path: polygon(0 35%, 30% 35%, 60% 8%, 60% 92%, 30% 65%, 0 65%);
}
.video-card:not(.is-unmuted) .video-card__sound::after {
    content: "";
    position: absolute;
    inline-size: 1.35rem;
    block-size: 2px;
    border-radius: 2px;
    background: #fff;
    transform: rotate(-45deg);
}

.video-card__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 3.5rem 1rem 1.1rem;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 14, 18, 0.25) 40%, rgba(10, 14, 18, 0.78) 100%);
    color: #fff;
    z-index: 2;
}
.video-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* White pill CTA — flips to the store colour on hover. */
.video-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #14161a;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.video-card__link::after { content: "←"; font-size: 0.85em; transition: transform 0.2s ease; }
[dir='ltr'] .video-card__link::after { content: "→"; }
.video-card__link:hover { background: var(--color-primary); color: #fff; transform: translateY(-1px); }

/* Reels-style progress line along the bottom edge. */
.video-card__progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 3px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 3;
}
.video-card__progress i {
    display: block;
    block-size: 100%;
    inline-size: 0;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------- custom html */
/* Merchant markup is unknown — keep its media inside the column. */
.custom-html__body {
    overflow-wrap: anywhere;
}

.custom-html__body :where(img, video, iframe) {
    max-width: 100%;
}

.custom-html__body :where(img, video) {
    height: auto;
}

/* ---------------------------------------------------------------- toasts */
/* The visible half of falak.notify(): bottom-centre, colour by type. */
.toasts {
    position: fixed;
    inset-inline: 0;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    pointer-events: none;
    z-index: 1000;
}
.toast {
    max-width: min(26rem, 100%);
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}
.toast.is-in { opacity: 1; transform: none; }
.toast--success { background: var(--color-primary); color: var(--color-on-primary); }
.toast--error { background: #c0392b; color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: none; } }

/* The SDK add button inherits this theme's .btn skin through button-class;
   the host is display:contents so the button takes its place in the layout. */
.buy-box .f-add-product__button { flex: 1 1 auto; }

/* ------------------------------------------------------ cart page v2 */
/* Lines with a quantity stepper and remove; coupon; summary. Extends the
   base .cart-* rules above. */

.cart-item__media { flex: none; }
/* .cart-item__clip is the seeked first frame of a video-commerce product's clip,
   standing in where the merchant uploaded neither a photograph nor a poster. It
   is a thumbnail, so it fills the tile exactly as a photograph would. */
.cart-item__media img,
.cart-item__clip { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-item__name { font-weight: 600; color: var(--color-text); text-decoration: none; display: block; }
.cart-item__name:hover { color: var(--color-primary); }
.cart-item__variation { display: block; font-size: 0.85rem; color: var(--color-text-soft); }

/* The chosen options, one chip each.
 *
 * `.cart-item__placeholder` is the empty media tile, sized to match the
 * photograph it stands in for so the line keeps its first column.
 */
.cart-item__placeholder {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.cart-item__options {
    list-style: none;
    margin: 0.35rem 0 0.4rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.cart-item__option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* The block padding is the smaller of the two: a chip wrapping a single
       line of 0.8rem text wants to read as a tag, not as a button. */
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg, #fff);
    font-size: 0.8rem;
    line-height: 1.35;
    max-inline-size: 100%;
}
.cart-item__option-label { color: var(--color-text-soft); }
.cart-item__option-value {
    font-weight: 600;
    color: var(--color-text);
    /* A merchant-typed value can be any length; it ellipsises inside the chip
       rather than stretching the row past the price column. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
}

/* The colour/image a variant was chosen by, so a cart line shows the same
   swatch the product page did beside the value's name. The value is
   validated server-side (ProductOptionPresenter::safeDisplay) before it
   reaches the style attribute.

   Scoped under .cart-item__option deliberately. `.cart-item img` up in the
   base cart rules is (0,1,1) and sizes EVERY image in a line to 76px, so a
   bare `.cart-item__swatch--image` (0,1,0) lost to it and the swatch drew at
   the size of the product photograph. These win on specificity, not order. */
.cart-item__option .cart-item__swatch {
    flex: none;
    display: inline-block;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 18%) inset;
}
.cart-item__option .cart-item__swatch--image {
    /* A hair larger than the colour dot: a cropped photograph needs the extra
       pixels to be recognisable where a flat colour does not. */
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    object-fit: cover;
    box-shadow: none;
}

.cart-item__unit { display: block; font-size: 0.9rem; color: var(--color-text-soft); }
.cart-item__unit-suffix { color: var(--color-text-faint); }
.cart-item__unit del { margin-inline-start: 0.35rem; color: var(--color-text-faint); }

.cart-item__qty {
    flex: none;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.cart-item__step {
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}
.cart-item__step:hover { background: var(--color-surface); color: var(--color-primary); }
.cart-item__qty-value { min-width: 2rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.cart-item__remove {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-faint);
    cursor: pointer;
}
.cart-item__remove:hover { background: var(--color-surface); color: var(--color-danger); }

.cart-page.is-busy .cart-layout { opacity: 0.55; pointer-events: none; }

/* Coupon control is <falak-cart-coupons>; it wears the theme's inputs. */
.cart-coupon { display: block; margin-bottom: 1rem; }
.cart-coupon .f-cart-coupons__input { border-radius: var(--radius-sm); background: #fff; }
.cart-coupon .f-cart-coupons__button { border-radius: var(--radius-sm); }

.cart-summary__row--discount { color: var(--color-primary); }
.cart-summary__continue { display: block; margin-top: 0.75rem; text-align: center; font-size: 0.9rem; color: var(--color-text-soft); }

@media (max-width: 767px) {
    .cart-item { flex-wrap: wrap; }
    .cart-item__info { flex: 1 1 60%; }
    .cart-item__line-total { margin-inline-start: auto; }
}
.cart-summary__note { margin: 0.25rem 0 0.5rem; font-size: 0.85rem; color: var(--color-primary); }

/* ------------------------------------------------------ variant chooser */
.product-single__options { margin-block: 0.25rem 1rem; }

/*
    Weight and dimensions, under the variant picker. Tinted chips in the
    store's own primary (color-mix, so it follows the merchant's colour
    rather than a fixed theme tint), the value set in the darker shade.
*/
.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.product-specs__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    font-size: 0.82rem;
    line-height: 1.3;
}

.product-specs__label { color: var(--color-text-soft); }
.product-specs__value { font-weight: 600; color: var(--color-primary-dark); }
.product-single__price del { margin-inline-start: 0.4rem; font-size: 0.85em; font-weight: 400; color: var(--color-text-faint); }
.product-single__options .f-options__pill { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------ wishlist */
/* The card row: buy button + heart square side by side. */
.product-card falak-add-product-button,
.product-card falak-wishlist-button { display: contents; }
.product-card .btn--card-icon {
    position: absolute;
    inset-inline-end: 0.75rem;
    inset-block-start: 0.75rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text-soft);
}
.product-card .btn--card-icon:hover,
.product-card .btn--card-icon.is-added { color: var(--color-danger); border-color: var(--color-danger); background: #fff; }
.product-card .btn--card-icon.is-added .f-wishlist__icon { fill: currentColor; }

.buy-box .btn--wishlist {
    flex: none;
    width: 2.75rem;
    padding: 0;
    color: var(--color-text-soft);
}
.buy-box .btn--wishlist:hover,
.buy-box .btn--wishlist.is-added { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }
.buy-box .btn--wishlist.is-added .f-wishlist__icon { fill: currentColor; }

/* ------------------------------------------------------------- search */
/* Header trigger matches the wishlist/account icons; the dropdown panel
   takes the theme's surface, radius and price colours. */
.search-link .f-search__trigger {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    transition: border-color var(--transition), color var(--transition);
}
.search-link .f-search__trigger:hover { border-color: var(--color-primary); color: var(--color-primary); }
.topnav-is-dark .site-header .search-link .f-search__trigger { border-color: #3a3f4b; }

/* The dropdown panel. The meta line, clear ×, quick-add button and chevron
   below are markup the falak-search patch at the end of app.js renders —
   the SDK's own markup has none of them.
   Ink is pinned to --color-on-white: the element lives in the header, and
   under a dark topnav the panel would otherwise inherit its light text. */
#falak-search .f-modal__body {
    background: var(--color-surface);
    border-radius: calc(var(--radius) * 1.5);
    color: var(--color-on-white);
}
#falak-search .f-search__panel { padding: 1.25rem; }

/* The dialog is flush (no-padding) and has no title, so its header — which
   holds only the close × — would sit hard against the top corner. Inset it,
   and take the same amount off the panel's top padding so the pill below
   does not move: 0.75rem + 2rem button + 0.5rem = the old 2rem + 1.25rem. */
#falak-search .f-modal__header {
    justify-content: flex-end;
    padding: 0.75rem 0.75rem 0;
}
#falak-search .f-search__panel { padding-block-start: 0.5rem; }

#falak-search .f-search__form .f-search__icon { inset-inline-start: 1.1rem; }
#falak-search .f-search__input {
    background: var(--color-bg);
    /* --color-border alone can vanish on a store whose bg is near-white;
       the mockup draws the pill in a tint of the brand colour. */
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    border-radius: 999px;
    padding-block: 0.8rem;
    padding-inline: 2.9rem;     /* room for the magnifier and the × */
}
/* Chromium draws its own cancel ×; the injected one is the design's. */
#falak-search .f-search__input::-webkit-search-cancel-button { display: none; }

.f-search__clear {
    position: absolute;
    inset-inline-end: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-soft);
    cursor: pointer;
}
.f-search__clear:hover { color: var(--color-on-white); background: var(--color-bg); }

/* "PRODUCTS — N results" */
.f-search__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-block: 0.25rem 0.6rem;
    font-size: 0.78rem;
    color: var(--color-text-soft);
}
.f-search__meta-label { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* Result rows as cards; the <li> (not the SDK's <a>) is the bordered box,
   so the quick-add button and chevron can sit beside the link, not in it. */
.f-search__list { list-style: none; margin: 0; padding: 0; gap: 0.6rem; }
.f-search__item {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    padding-inline-end: 0.9rem;
    transition: border-color var(--transition);
}
.f-search__item:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
#falak-search .f-search__link { flex: 1 1 auto; min-width: 0; padding: 0.65rem; }
#falak-search .f-search__link:hover { background: transparent; }
#falak-search .f-search__thumb { inline-size: 4rem; block-size: 4rem; border-radius: var(--radius-sm); }
#falak-search .f-search__name { font-weight: 600; white-space: normal; }
#falak-search .f-search__price-now { color: var(--color-primary); }

/* Quick-add — a circled bag between the link and the chevron. */
.f-search__item falak-add-product-button { flex: none; display: inline-flex; }
.f-search__add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-on-white);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.f-search__add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.f-add-product--unavailable .f-search__add-btn { opacity: 0.45; cursor: not-allowed; }

.f-search__chevron { flex: none; display: inline-flex; margin-inline-start: 0.5rem; color: var(--color-text-faint); }
[dir="rtl"] .f-search__chevron svg { transform: scaleX(-1); }

/* View all — a full-width dark pill with a forward arrow, replacing the
   SDK's bordered text link. */
#falak-search .f-search__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 0.9rem;
    padding-block: 0.85rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-text);
    color: #fff;
    font-weight: 600;
}
#falak-search .f-search__view-all:hover { text-decoration: none; opacity: 0.92; }
#falak-search .f-search__view-all::after { content: '→'; }
[dir="rtl"] #falak-search .f-search__view-all::after { content: '←'; }

/* ------------------------------------------------------ wishlist drawer */
/* Header trigger matches the account avatar / cart link; the panel takes
   the theme's surface, radius and button skins. */
.wishlist-link .f-wishlist-drawer__trigger {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    transition: border-color var(--transition), color var(--transition);
}
.wishlist-link .f-wishlist-drawer__trigger:hover { border-color: var(--color-danger); color: var(--color-danger); }
.wishlist-link .f-wishlist-drawer__count { background: var(--color-primary); color: var(--color-on-primary); }
.topnav-is-dark .site-header .wishlist-link .f-wishlist-drawer__trigger { border-color: #3a3f4b; }

.wishlist-link .f-drawer { background: var(--color-bg); color: var(--color-text); }
.wishlist-link .f-drawer__head { background: var(--color-surface); }
.wishlist-link .f-drawer__title { font-size: 1.15rem; }
.wishlist-link .f-drawer__badge { background: var(--color-primary); color: var(--color-on-primary); }
.wishlist-link .f-drawer__close { border-radius: var(--radius-sm); }
.wishlist-link .f-wishlist-drawer__item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem; margin-block: 0.6rem; }
.wishlist-link .f-wishlist-drawer__media { border-radius: var(--radius-sm); }
.wishlist-link .f-wishlist-drawer__name { font-size: 0.92rem; }
.wishlist-link .f-wishlist-drawer__actions .f-add-product__button {
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.wishlist-link .f-wishlist-drawer__actions .f-wishlist__button {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--radius-sm);
}
.wishlist-link .f-drawer__foot { background: var(--color-surface); }
.wishlist-link .f-wishlist-drawer__all { border-radius: var(--radius-sm); padding: 0.7rem 1.6rem; min-block-size: auto; }

@media (max-width: 767px) {
    .wishlist-link .f-drawer { inline-size: 100vw; }
}

/* ------------------------------------------------------------- checkout */
/* The platform checkout wearing this theme: card steps, the theme's inputs
   and buttons, the summary as a surface card. */
.checkout-page { padding-block: 1rem 3rem; }
.checkout-page .f-checkout__step { padding: 1.25rem; margin-block-end: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.checkout-page .f-checkout__step--active { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.checkout-page .f-checkout__step-icon { border-radius: var(--radius-sm); }
.checkout-page .f-input { border-radius: var(--radius-sm); background: #fff; }
.checkout-page .f-checkout__method { border-radius: var(--radius-sm); background: #fff; }
.checkout-page .f-checkout__summary { background: var(--color-surface); border-radius: var(--radius); }
/* The product list scrolls, and each thumbnail's count badge rides 0.35rem
   above it, so the first row's badge was cut off by the list's top edge.
   Room above the first row keeps it whole. */
.checkout-page .f-checkout__lines { padding-block-start: 0.45rem; }
.checkout-page .f-btn { border-radius: var(--radius-sm); }
.checkout-page .f-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.checkout-page .f-btn--primary:hover:not(:disabled) { background: var(--color-primary-dark); opacity: 1; }
.checkout-page .f-checkout__signin { border-radius: var(--radius); }

.payment-status-page { padding-block: 2rem 4rem; }

.thank-you__note { color: var(--color-text-soft); }
.thank-you__items { list-style: none; margin: 1.25rem auto; padding: 0; max-width: 32rem; text-align: start; display: flex; flex-direction: column; gap: 0.6rem; }
.thank-you__items li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; }
.thank-you__items img { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: var(--radius-sm); }
.thank-you__item-name { flex: 1 1 auto; min-width: 0; }
.thank-you__item-qty { color: var(--color-text-soft); }
.thank-you__item-total { font-weight: 700; white-space: nowrap; }
.order-head__address { color: var(--color-text-soft); font-size: 0.9rem; }

/* ------------------------------ availability / size guide / reviews summary */
.product-single__availability { margin-block-start: 0.75rem; }

/* Sold out: add-to-cart already says so — the buy-now twin would only
   repeat it. Hidden here (not in the shared SDK) so it comes back the
   moment a variant with stock is picked. */
.buy-box .f-add-product--quick-buy.f-add-product--unavailable { display: none; }

/* Detail panels: breathe between each other and from whatever sits above
   (notify-me, offers). */
.product-single__panels { display: grid; gap: 0.75rem; margin-block-start: 1.25rem; }
.btn--notify { display: inline-flex; align-items: center; gap: 0.45rem; }
.product-single__size-guide { margin-block: 0.25rem 0.75rem; }
.product-single__reviews { margin-block-start: 2.5rem; }
.product-single__reviews-summary { padding: 1.25rem; margin-block-end: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }

/* With no reviews, the sign-in gate (or the review form) is the only thing
   worth showing — the list's "no reviews yet" line under it just repeated
   what the empty page already made obvious. */
.product-single__reviews .f-comments__empty { display: none; }

/* The review form is for customers who bought and received the product;
   everyone else gets the reviews themselves and nothing more. The SDK
   explains the rule in a dashed gate box ("sign in" / "only customers who
   bought..."), and the component prints its own "Reviews" subheading under
   the section — both stand down here. The form itself is untouched, so an
   eligible customer still sees it. */
.product-single__reviews .f-comments__title,
.product-single__reviews .f-comments__gate { display: none; }

.product-single__questions { margin-block-start: 2.5rem; }

/* "All questions — 0" sat directly above the empty block's own "No questions
   yet", counting a list that isn't there. The component renders the heading
   next to whichever of the two follows it, so it stands down only when the
   list is empty and still divides the ask form from a real list. */
.product-single__questions .f-questions__list-title:has(+ .f-questions__empty) { display: none; }

/* ========================================================================
   Customizer style hooks
   ========================================================================
   Two jobs, both of them the theme's half of the styling contract.

   1. "Element alignment" moves a box with auto margins, and an inline box
      ignores those. Every styleable button here is inline-flex, so it is made
      block-level with a fit-content width — visually identical, since each
      already sits on its own line — which gives those margins something to
      push against.

   2. SDK components render their own markup, so the theme cannot tag a node
      inside them. Those roles are declared with no element at all and reach
      their target through the custom properties the platform publishes on the
      section root. Each fallback below is the value that rule had before, so a
      control the merchant has not touched changes nothing.

      `revert` is the fallback where the theme never set the property itself:
      it hands the declaration back to the browser's own value, which is what
      was rendering before this rule existed.
   ======================================================================== */

.hero-slider__content .btn,
.image-text__body .btn,
.video-card__caption .btn {
    display: flex;
    inline-size: fit-content;
}

/* offer-countdown — <falak-countdown> */
.block--countdown .f-countdown__title {
    font-size: var(--falak-el-heading-size, clamp(1.4rem, 3vw, 2rem));
    font-weight: var(--falak-el-heading-weight, revert);
    color: var(--falak-el-heading-color, inherit);
}

.block--countdown .f-countdown__description {
    font-size: var(--falak-el-copy-size, revert);
    font-weight: var(--falak-el-copy-weight, revert);
    color: var(--falak-el-copy-color, inherit);
}

.block--countdown .f-countdown__button {
    font-size: var(--falak-el-cta-size, revert);
    font-weight: var(--falak-el-cta-weight, revert);
    color: var(--falak-el-cta-color, revert);
    background-color: var(--falak-el-cta-bg, revert);
    border-radius: var(--falak-el-cta-radius, revert);
}

/* products-slider — <falak-products-slider> */
.block--products-slider .f-slider__title {
    font-size: var(--falak-el-heading-size, 1.25rem);
    font-weight: var(--falak-el-heading-weight, 700);
    color: var(--falak-el-heading-color, revert);
}

/* The view-all centred under the carousel: plain text and an arrow, the
   arrow pointing left (forward in Arabic) and mirrored in English. Rendered by
   the template, not the component — see products-slider.twig. */
.products-slider__all {
    display: flex;
    justify-content: center;
    margin-block-start: 1.25rem;
}

.products-slider__all > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}

.products-slider__all > a:hover { color: var(--color-primary); }

.products-slider__all svg { flex: none; transition: transform 0.2s ease; }
[dir="ltr"] .products-slider__all svg { transform: scaleX(-1); }
.products-slider__all > a:hover svg { transform: translateX(-3px); }
[dir="ltr"] .products-slider__all > a:hover svg { transform: scaleX(-1) translateX(-3px); }

/* An empty catalogue swaps the track for the empty message; a view-all under
   a row of nothing reads as a broken section. */
.block--products-slider:has(.f-list__message--empty) .products-slider__all { display: none; }

/* app.js unhides it once the slider reports more products than the threshold. */
.products-slider__all[hidden] { display: none; }

/* products — the cards inside <falak-products-list> */
.block--products .f-card__inner {
    border-radius: var(--falak-el-card-radius, revert);
    background-color: var(--falak-el-card-bg, revert);
}

/* all-categories band — round tiles built by app.js from the catalogue.
   Nova's equivalent is .cat-circles; this is the 2026 reading of it: the
   theme's own border/radius tokens, the same lift-on-hover as .feature-card,
   and the heading handled by .block__title's accent bar rather than a rule. */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(var(--cat-grid-columns, 6), minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

.cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
}

.cat-tile__figure {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 7.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.cat-tile:hover .cat-tile__figure {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.cat-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-tile__name {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
}

.cat-tile__text {
    color: var(--color-text-soft);
    font-size: 0.85rem;
    line-height: 1.4;
    /* Descriptions are merchant prose of any length; two lines keeps every
       tile the same height so the row does not go ragged. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 0.75rem; }
    .cat-tile__text { display: none; }
}


/* ============================================== video-commerce viewer

   The wall's own dialog, built by <custom-falak-video-view> in app.js: the clip
   full-bleed, with the name, the price, the variant picker and the add laid
   over its foot. The quick-view dialog above is unchanged and still serves
   every other card in the theme.

   The shape is 9:16 because the clips are — a merchant filming a garment films
   it in portrait, and a reel letterboxed into a landscape dialog is two black
   bars and a thin strip of product. The panel is therefore sized off the
   VIEWPORT HEIGHT and the width derived from it, which is the only order that
   guarantees the whole clip is on screen: sizing by width instead produces a
   box taller than the window on any laptop, and the add-to-cart is the part
   that falls off the bottom.

   Everything is written in logical properties, so the corner controls swap
   sides with the document's direction without a second rule.
   ------------------------------------------------------------------------- */

/* Darker than the library's default scrim. The dialog is a lit rectangle in a
   dark room here, not a card floating over a page the shopper is still meant to
   read. */
.f-video-view .f-modal__overlay { background: rgba(6, 8, 10, 0.82); }

.f-video-view .f-modal__body {
    /* The one measurement everything else is derived from. 86vh leaves the
       overlay visible at the top and bottom, so the dialog still reads as a
       dialog; 45rem stops it growing absurdly tall on a very tall monitor. */
    --vv-block: min(86vh, 45rem);

    block-size: var(--vv-block);
    inline-size: min(calc(var(--vv-block) * 9 / 16), 100%);
    /* The width modifier from the `width` attribute would otherwise cap this
       at its own value and break the ratio. */
    max-inline-size: none;
    padding: 0;
    overflow: hidden;
    background: #0a0b0d;
    border-radius: var(--radius-lg);
}

/*
   The header is only ever the close button here — no title. Lifted out of the
   flow and into the corner, exactly as the quick view does it, so the clip runs
   to the dialog's top edge instead of starting a row down.

   Restyling the LIBRARY's button rather than drawing a second one is what keeps
   Escape, the backdrop click and the focus return working: turning the
   library's × off (is-closable="false") turns all three off with it.
*/
.f-video-view .f-modal__header {
    position: absolute;
    inset-block-start: 0.85rem;
    /* End side, which is the quick view's corner too — the physical LEFT on
       this theme's Arabic pages, where the reference design puts it. */
    inset-inline-end: 0.85rem;
    z-index: 4;
}

/*
   A frosted white disc with dark ink, for both corner controls.

   White-on-glass rather than the theme's surface token: these sit on a moving
   photograph whose brightness is unknown and changes frame to frame, and a
   translucent white disc is the one treatment that stays legible over both a
   pale studio backdrop and a night shot. --color-on-white is the ink that
   deliberately does NOT follow the dark theme, for exactly this reason.

   The shadow is not decoration, it is the disc's only edge on a WHITE frame —
   a garment shot against a studio backdrop opens with the corner over plain
   white, and a white disc on white left the glyph floating with no control
   around it. On a dark frame it is invisible and the disc provides its own
   contrast, so one rule covers both.
*/
.f-video-view .f-modal__close,
.vv__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: var(--color-on-white);
    box-shadow: 0 2px 12px rgba(4, 6, 8, 0.35);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background var(--transition), color var(--transition);
}

.f-video-view .f-modal__close { font-size: 1.45rem; line-height: 1; }

.f-video-view .f-modal__close:hover,
.vv__chip:hover {
    background: #fff;
    color: var(--color-primary-dark);
}

.vv {
    position: relative;
    block-size: 100%;
    overflow: hidden;
}

/* ------------------------------------------------------------------- reel */

/*
   The wall, swipeable.

   On a phone the slides are a full-height vertical scroll-snap column: a swipe
   up is the next product, exactly the gesture every product reel has trained
   people to use, and a shopper who came to browse video never has to close the
   dialog to see the next clip. app.js gives only the slide being watched — and
   its two neighbours — a source, so a reel of twelve is still one download.

   On a larger screen the reel collapses to the active slide (below): a
   full-height snap column is a thumb gesture, and a pointer has the wall itself
   behind the dialog to go back to.
*/
.vv__reel {
    block-size: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    /* The page behind must not start scrolling when the reel hits its end. */
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.vv__reel::-webkit-scrollbar { display: none; }

.vv__slide {
    position: relative;
    block-size: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/*
   One at a time above the phone breakpoint.

   `display: none` rather than a transform or a height of zero: a hidden slide
   must not be reachable by the tab key, must not contribute a scroll position,
   and — the reason it matters here — its <falak-product-options> must not be
   found by anything looking for a picker, which is what would let one slide's
   variant end up on another slide's add-to-cart.
*/
@media (min-width: 48.0625rem) {
    .vv__reel { overflow: hidden; scroll-snap-type: none; }
    .vv__slide { display: none; }
    .vv__slide.is-active { display: block; }
}


/* ------------------------------------------------------------------- stage */

/* The stage owns the dark ground. It used to sit on .vv__video, where it was an
   OPAQUE layer painted over the poster beneath — the clip has to be transparent
   until it has frames for the poster to be worth having at all. */
.vv__stage {
    position: absolute;
    inset: 0;
    background: #0a0b0d;
}

/*
   `cover`, not `contain`. A merchant's clip is not reliably 9:16 — phones shoot
   portrait, but a re-encode or a crop can arrive at 3:4 or 1:1 — and `contain`
   answers that with pillarboxes, which read as a broken player. Cover fills the
   panel in every case, and the foot's scrim is deep enough that what it takes
   off the bottom is the part being covered by the buy box anyway.
*/
/* Stacked in the same box: the poster underneath, the clip over it. Both cover,
   so they crop identically and the swap from one to the other is invisible. */
.vv__poster,
.vv__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* Transparent on purpose — see above. A background here hides the poster. */
.vv__video { background: transparent; }

/* No clip and no photograph: a flat ground rather than a broken-image glyph. */
.vv__placeholder {
    position: absolute;
    inset: 0;
    background: #1b1d21;
}

/*
   Buffering.

   Laid over the poster, not instead of it: the shopper keeps seeing the product
   while the file arrives, and the spinner is only saying which of the two
   states a motionless frame is in. app.js sets `data-loading` on the stage in
   the markup itself, so this is on screen in the frame the dialog opens, and
   clears it on the first moving frame.

   `pointer-events: none` because the speaker sits above this and has to stay
   clickable while the clip is still loading — unmuting is often exactly what a
   shopper does during that wait.
*/
.vv__loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /*
       ABOVE the scrim, which is its sibling and comes after it in the markup.
       Without this the gradient painted straight over the spinner: the scrim
       covers the bottom 72% of the stage and the spinner is centred inside
       that, so it sat under about 70% black and dimmed to a grey smudge
       nobody could see. It reads as "there is no loader".
    */
    z-index: 1;
}

.vv__stage[data-loading] .vv__loader { display: flex; }

/*
   The clip did not arrive.

   Shown INSTEAD of the spinner, never beside it: those two say opposite things
   and a shopper looking at both learns nothing. The buy box underneath is
   untouched — a video that will not play is no reason to stop someone buying
   the product — so this only covers the picture.
*/
.vv__lost {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.5rem;
    text-align: center;
    color: #fff;
}

.vv__slide[data-vv-failed] .vv__lost { display: flex; }

/* Both belong to a clip that is not coming: the frozen frame it never had, and
   a speaker for audio that does not exist. */
.vv__slide[data-vv-failed] .vv__video,
.vv__slide[data-vv-failed] .vv__loader { display: none; }

.vv__lost-text {
    margin: 0;
    font-size: var(--fs-meta);
    color: rgba(255, 255, 255, 0.82);
    max-inline-size: 18rem;
}

/* White on the clip's own dark ground rather than the theme's outline skin,
   which is drawn for a light surface and reads as a smudge here. */
.vv__lost-retry {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vv__lost-retry:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/*
   A ring with a dark translucent middle, rather than a bare ring: the poster
   behind it is the merchant's photograph and may be a white studio backdrop or
   a night shot, and a white ring alone disappears into the first of those.
*/
.vv__loader::after {
    content: "";
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 3px solid rgba(255, 255, 255, 0.45);
    border-block-start-color: #fff;
    border-radius: 50%;
    background: rgba(6, 8, 10, 0.45);
    box-shadow: 0 2px 16px rgba(4, 6, 8, 0.55);
    animation: nova-spin 0.75s linear infinite;
}

/*
   The gradient the foot is read against.

   A separate element rather than a background on .vv__foot, because the foot is
   only as tall as its contents and the fade has to start well above them — a
   gradient that begins at the product name puts a hard edge across the middle
   of the clip. Two stops rather than one: a linear fade to transparent looks
   grey over the whole lower half, while a fast rise to 72% and a slow tail is
   read as light falling off.
*/
.vv__scrim {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 72%;
    background: linear-gradient(
        to top,
        rgba(4, 6, 8, 0.94) 0%,
        rgba(4, 6, 8, 0.72) 30%,
        rgba(4, 6, 8, 0) 100%
    );
    pointer-events: none;
}

.vv__chip { position: absolute; z-index: 4; }

/* The opposite corner from the close button, so the two never collide and the
   shopper's thumb reaching for one cannot dismiss the dialog with the other. */
.vv__chip--sound {
    inset-block-start: 0.85rem;
    inset-inline-start: 0.85rem;
}

/*
   The reel's arrows: mid-height on the OVERLAY, flanking the panel, pointer
   screens only. Below the breakpoint the next clip is a swipe away and two
   discs would just crowd the frame; above it the reel cannot scroll at all
   (only the active slide is drawn), and these are a mouse's one way from clip
   to clip. app.js disables the arrow with nothing left on its side, and here a
   disabled step disappears rather than greying out over the scrim.

   position: fixed is what gets them OUT of the dialog: they are rendered
   inside the panel, whose overflow:hidden (the corner radius clip) would
   swallow anything hung past its edge — fixed re-homes them to the viewport,
   which the full-screen modal already covers. The one thing that would break
   that is a transformed ancestor, and the body's f-rise entrance is exactly
   that for its 0.2s — so the arrows fade in only after it has finished.
*/
.vv__chip--step {
    display: none;
    position: fixed;
    inset-block-start: 50%;
    translate: 0 -50%;
    /* The panel's own width formula — --vv-block is inherited from the modal
       body above — so the arrows track the dialog's edge at every viewport
       instead of hugging the screen's. */
    --vv-panel: min(calc(var(--vv-block, 45rem) * 9 / 16), 100vw);
    animation: f-fade 0.18s ease 0.22s backwards;
}

@media (min-width: 48.0625rem) {
    .vv__chip--step { display: inline-flex; }
    .vv__chip--step:disabled { display: none; }
}

/* A 1rem breath from the panel's edge, but never pushed off a screen that is
   barely wider than the dialog. */
.vv__chip--prev { inset-inline-start: max(0.75rem, calc(50% - var(--vv-panel) / 2 - 3.4rem)); }
.vv__chip--next { inset-inline-end: max(0.75rem, calc(50% - var(--vv-panel) / 2 - 3.4rem)); }

/* One chevron, drawn pointing toward inline-start: the next arrow mirrors it,
   and RTL mirrors the pair again. */
.vv__chip--next svg,
[dir="rtl"] .vv__chip--prev svg { transform: scaleX(-1); }

[dir="rtl"] .vv__chip--next svg { transform: none; }

/*
   Tinted while the sound is ON.

   The clip always starts muted — a browser refuses to autoplay audio — so the
   speaker is the one control whose state the shopper has actually chosen, and
   it has to be readable at a glance from across the panel. aria-pressed is both
   the accessible state and the styling hook, so there is no second copy of it
   to fall out of step.
*/
.vv__chip--sound[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.vv__chip--sound[aria-pressed="true"]:hover {
    background: var(--color-primary-dark);
    color: var(--color-on-primary);
}

/* Before the record lands, when the viewer was opened from the bus with only an
   id and has nothing to paint yet. */
.vv__stage--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14161a;
}

.vv__spinner {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-block-start-color: #fff;
    border-radius: 50%;
    animation: nova-spin 0.7s linear infinite;
}

@keyframes nova-spin { to { transform: rotate(360deg); } }

.vv__failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    block-size: 100%;
    padding: 2rem;
    text-align: center;
    color: #fff;
}

/* --------------------------------------------------------------- buy box */

.vv__foot {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem;
    color: #fff;
}

.vv__name {
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.vv__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.vv__amount { font-size: 1.15rem; font-weight: 700; color: #fff; }
.vv__was { font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); }

.vv__buy {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-block-start: 0.5rem;
}

/*
   The picker gets its own opaque card.

   It is the one part of the foot a shopper has to READ rather than glance at —
   labels, values, which values are sold out — and white text over a moving
   picture is exactly the wrong surface for that. On its own ground the SDK's
   pills, swatches and <select> skins all apply unchanged, which is the other
   half of the reason: they are written for a page, not for a photograph.

   Capped and scrollable because the number of groups is the merchant's
   decision, not the theme's: four of them unrolled would push the add-to-cart
   off the bottom of the panel, and the add is the one thing that must never go.
*/
.vv__panel {
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1rem;
    max-block-size: 32vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vv__add { display: block; }
.vv__add-btn { inline-size: 100%; }

.vv__notify { display: block; }
.vv__notify .btn { inline-size: 100%; }

/*
   Edge to edge on a phone.

   The panel's whole point is that the clip is the screen; 1rem of overlay
   showing down each side of a 390px window is not a frame, it is a waste of the
   only thing there is. 100dvh rather than 100vh so the browser's collapsing
   address bar does not leave the add-to-cart under it.
*/
@media (max-width: 48rem) {
    .f-video-view .f-modal__wrapper { padding: 0; }

    .f-video-view .f-modal__body {
        inline-size: 100%;
        block-size: 100dvh;
        border-radius: 0;
    }

    /* Clear of a notch, and of the home indicator at the foot. */
    .f-video-view .f-modal__header {
        inset-block-start: max(0.85rem, env(safe-area-inset-top));
    }

    .vv__chip {
        inset-block-start: max(0.85rem, env(safe-area-inset-top));
    }

    .vv__foot {
        padding-block-end: max(1.1rem, env(safe-area-inset-bottom));
    }
}

/* Slowed rather than stopped. A spinner is the only thing telling the shopper
   the clip is still coming; removing the motion removes the message with it. */
@media (prefers-reduced-motion: reduce) {
    .vv__spinner,
    .vv__loader::after { animation-duration: 2s; }
}

/* ------------------------------------------ header: language + currency */

/*
 * The language trigger and the currency dropdown wear the same soft pill as
 * the cart — border, 999px radius, 600 weight — so the whole actions row
 * reads as one family. The icons take the brand colour: at this size a grey
 * globe looks like a disabled control.
 */
.site-header__actions .f-locale__trigger,
.site-header__actions .f-currency__field {
    gap: 0.45rem;
    min-block-size: 2.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.2;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.site-header__actions .f-locale__trigger:hover,
.site-header__actions .f-currency__field:hover {
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.site-header__actions .f-locale__globe,
.site-header__actions .f-currency__icon { color: var(--color-primary); opacity: 1; }
.site-header__actions .f-currency__chevron { opacity: 0.55; }

/*
 * The preferences sheet lives inside the sticky header, so it is stacked in
 * the header's own context (z-index 50) — and a hero layer above 50 would
 * paint over it. While a sheet is open, the header rises above everything.
 */
.site-header:has(.f-modal[data-visible="true"]) { z-index: 1200; }

/* ---------------------------------------- phones: locale lives in the drawer */

/*
 * The actions row carries six controls — search, language, currency, account,
 * wishlist, cart — beside the brand mark and the menu button. That fits a
 * desktop bar and nothing narrower: on a phone the row kept its controls at
 * full size and took the space out of the only two items that would yield,
 * squeezing the logo to a 23px stub and the hamburger to three bare lines,
 * then shearing whatever was left off both edges (<body> clips overflow, so
 * there was not even a scrollbar to show it).
 *
 * So the two that have somewhere else to go, go. The language and currency
 * pills leave the row and the drawer gains one entry (menu.twig) that opens
 * the very same preferences sheet the pills open, with both choices in it.
 * <falak-localization-modal> itself stays in the header — it is the sheet,
 * it renders no inline box, and the drawer entry reaches it through the
 * SDK bus.
 *
 * Hidden by element name, not by class: <falak-localization-modal> wears
 * `.f-locale` too (as `.f-locale--sheet`), so a class selector here would
 * switch off the very sheet the drawer entry is meant to open.
 */
@media (max-width: 860px) {
    .site-header__actions falak-language,
    .site-header__actions falak-currency { display: none; }

    /*
     * The cart's amount goes with them. It is the widest thing in the row
     * (a five-figure total in a long currency name runs past 120px), it
     * re-renders on every cart change, and it is the one value that is
     * already repeated on the page it links to. Icon and count badge stay —
     * those are what the control is for.
     */
    .site-header__actions .cart-link .f-cart-summary__total { display: none; }
    .site-header__actions .cart-link { padding-inline: 0.6rem; }
}

/* The narrowest phones: four icon controls plus the brand mark and the menu
   button are what is left, and under 380px even those crowd. The gaps close
   up first; the brand mark keeps at least its icon width. */
@media (max-width: 380px) {
    .site-header__topbar-inner { gap: 0.4rem; }
    .site-header__actions { gap: 0.2rem; }
    .site-header__actions .cart-link { padding-inline: 0.45rem; }
    .site-header__logo { min-width: 2.25rem; }
}


/* ------------------------------------------------ thank-you page (theme look) */
/* A hero card, then the order beside what the shopper needs to know next.
   Written after the base .thank-you rules so these win on source order. */
.thank-you { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; max-inline-size: 60rem; margin-inline: auto; padding-block: 1.5rem 3rem; text-align: center; }
.thank-you > * { margin-block: 0; }
.thank-you__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 1rem);
    background: var(--color-bg, #fff);
}
.thank-you__hero > * { margin: 0; }
.thank-you__mark,
.thank-you__icon {
    display: grid;
    place-items: center;
    inline-size: 64px;
    block-size: 64px;
    margin: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg, #fff));
    color: var(--color-primary);
    font-size: 1.75rem;
}
.thank-you__title,
.thank-you__hero h1 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700; }
.thank-you__message,
.thank-you__hero > p { color: var(--color-text-soft); }
.thank-you__order { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
.thank-you__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: var(--color-surface);
    font-size: 0.9rem;
}
.thank-you__pill-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-soft); }
.thank-you__copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text-soft);
    cursor: pointer;
}
.thank-you__copy:hover { background: var(--color-border); color: var(--color-text); }
.thank-you__copied {
    position: absolute;
    inset-block-end: calc(100% + 0.35rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    background: var(--color-text);
    color: var(--color-bg, #fff);
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
[dir="rtl"] .thank-you__copied { transform: translateX(50%); }
.thank-you__copy.is-copied .thank-you__copied { opacity: 1; }
.thank-you__total { font-size: 1.05rem; font-weight: 700; margin: 0; }
.thank-you__sent { font-size: 0.875rem; color: var(--color-text-soft); }
.thank-you__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; text-align: start; }
@media (min-width: 820px) {
    .thank-you__grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
.thank-you__aside { display: flex; flex-direction: column; gap: 1rem; min-inline-size: 0; }
.thank-you__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 1rem);
    background: var(--color-bg, #fff);
}
.thank-you__card-title { margin: 0; font-size: 1rem; font-weight: 700; }
.thank-you__card-text { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.thank-you__card-text--soft { font-size: 0.8rem; color: var(--color-text-soft); }
.thank-you__facts { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.thank-you__facts > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; border-block-end: 1px solid var(--color-border); font-size: 0.88rem; }
.thank-you__facts > div:last-child { border-block-end: 0; }
.thank-you__facts dt { color: var(--color-text-soft); }
.thank-you__facts dd { margin: 0; font-weight: 600; }
.thank-you__status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--color-surface); }
.thank-you__status--paid, .thank-you__status--completed { background: #dcfce7; color: #166534; }
.thank-you__status--pending, .thank-you__status--unpaid { background: #fef3c7; color: #92400e; }
.thank-you__status--failed { background: #fee2e2; color: #991b1b; }
.thank-you__steps { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; color: var(--color-text-soft); }
.thank-you__steps li::marker { color: var(--color-primary); font-weight: 700; }
.thank-you__summary { display: block; inline-size: 100%; margin: 0; }
.thank-you__card .thank-you__items { max-width: none; margin: 0; }
.thank-you__card .f-order__totals { padding: 1rem 0 0; background: none; border-radius: 0; border-block-start: 1px solid var(--color-border); }
.thank-you__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-start: 0.25rem; }

/* The SDK chips the currency row with the payment gateway (TAP) — that names
   the processor, not the currency, and read as a mislabel. The method row
   already says how the order was paid; the reference chip there is a <code>. */
.f-order__pay-row > span.f-order__badge { display: none; }