/* ─────────────────────────────────────────────────
   TOP PICKS FOR YOU — homepage section (template-parts/top-picks.php) and its
   compact card (template-parts/top-pick-card.php).

   Loaded on the homepage only, and only when the section renders
   (farahat_top_picks_enqueue(), 14.2). Every colour, radius, shadow, space and
   duration is a css/main.css :root token — no new token namespace (9.1). Written
   in logical properties, so rtl.css needs no entry (11.3).

   CAROUSEL (patch 53). One row, never wrapped: the list is a horizontal scroll
   container with CSS scroll snap, and swiping, a trackpad, the arrow buttons or
   tabbing to a card all move it natively. Cards visible at once — mobile first
   (10.1): 1 below 340px, 2 from 340px, 3 from 768px, 4 from 992px — the same card
   widths as the grid it replaces at 340-767px and from 992px. More switched-on
   cards than fit scroll; fewer are centred. Only switched-on cards are rendered,
   so a switched-off card never leaves a gap. The arrow buttons
   (js/top-picks-carousel.js) only enhance it: without JavaScript they stay hidden
   and the row still scrolls.

   Contrast, measured with the token values (WCAG 2.2, text on its background):
     title         --fm-brand-900 on --fm-surface ............ 11.33:1
     price         --fm-brand-700 on --fm-surface ............  7.27:1
     struck price  --fm-muted on --fm-surface ................  5.47:1
     sale flag     white on --fm-danger-strong ...............  5.82:1
     badge Featured       white on --fm-brand-600 ............  5.57:1
     badge Best Seller    white on --fm-warning-strong .......  5.19:1
     badge Special Offer  white on --fm-danger-strong ........  5.82:1
     badge New            white on --fm-success-strong .......  5.38:1
     out of stock  --fm-danger-strong on --fm-danger-bg ......  5.10:1
     backorder     --fm-warning-strong on --fm-warning-bg ....  4.72:1
     Add to cart   white on --fm-brand-600 ...................  5.57:1
     arrow         --fm-brand-700 on --fm-surface ............  7.27:1 (white on --fm-brand-600 hovered, 5.57:1)
     View Product  --fm-brand-700 on --fm-surface ............  7.27:1
   Focus: main.css's canonical :where(...):focus-visible ring applies; nothing
   here touches outline.
   ───────────────────────────────────────────────── */

/* The carousel: the positioning context of the arrows and the container their
   vertical position is measured against (cqi). --fm-tp-visible cards fit across. */
.fm-top-picks__carousel {
    --fm-tp-visible: 1;
    --fm-tp-gap: var(--fm-space-3);
    /* Room the scroll container keeps around the cards so their shadow and the
       3px hover lift are not clipped by its overflow; taken back with negative
       margins, so the section's spacing and the card widths stay as they were. */
    --fm-tp-bleed: var(--fm-space-2);
    --fm-tp-foot: var(--fm-space-8);
    position: relative;
    container-type: inline-size;
}

@media (min-width: 340px) {
    .fm-top-picks__carousel {
        --fm-tp-visible: 2;
    }
}

@media (min-width: 768px) {
    .fm-top-picks__carousel {
        --fm-tp-visible: 3;
        --fm-tp-gap: var(--fm-space-4);
    }
}

@media (min-width: 992px) {
    .fm-top-picks__carousel {
        --fm-tp-visible: 4;
        --fm-tp-gap: var(--fm-space-6);
    }
}

/* One row that scrolls on its own; never the page (10.3). The negative inline
   margin stays inside the .container's own padding. */
.fm-top-picks__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--fm-tp-gap);
    margin-block: calc(-1 * var(--fm-space-1)) calc(-1 * var(--fm-tp-foot));
    margin-inline: calc(-1 * var(--fm-tp-bleed));
    padding-block: var(--fm-space-1) var(--fm-tp-foot);
    padding-inline: var(--fm-tp-bleed);
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--fm-tp-bleed);
    scrollbar-width: thin;
    scrollbar-color: var(--fm-brand-200) transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .fm-top-picks__grid {
        scroll-behavior: smooth;
    }
}

/* A fixed share of the row per card; the card fills its item, so every card has
   the row's height and the buttons line up. */
.fm-top-picks__item {
    display: flex;
    flex: 0 0 calc((100% - (var(--fm-tp-visible) - 1) * var(--fm-tp-gap)) / var(--fm-tp-visible));
    min-inline-size: 0;
    scroll-snap-align: start;
}

/* Fewer cards than fit: auto margins centre them. Unlike justify-content: center,
   they fall to 0 once the row overflows, so no card is ever cut off at the start. */
.fm-top-picks__item:first-child {
    margin-inline-start: auto;
}

.fm-top-picks__item:last-child {
    margin-inline-end: auto;
}

/* ── arrows: over the row's edges, centred on the card images ──
   Absolutely positioned, so showing or hiding them never moves anything (CLS).
   The image is square and inset by the card's padding, so its centre sits half a
   card width below the top of the row: calc() on the container width (cqi), with
   a plain percentage first for a browser without container units. */
.fm-top-picks__nav {
    position: absolute;
    z-index: var(--fm-z-raised);
    inset-block-start: 30%;
    inset-block-start: calc((100cqi - (var(--fm-tp-visible) - 1) * var(--fm-tp-gap)) / var(--fm-tp-visible) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    background: var(--fm-surface);
    border: 1px solid var(--fm-brand-200);
    border-radius: 50%;
    box-shadow: var(--fm-shadow-md);
    color: var(--fm-brand-700);
    /* The glyphs are bidi-mirrored characters: in Arabic (RTL) the browser draws
       them pointing the other way by itself, no rtl.css entry (11.3). */
    font-size: 1.75rem;
    font-weight: var(--fm-weight-bold);
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--fm-duration-fast) var(--fm-ease),
                color var(--fm-duration-fast) var(--fm-ease),
                opacity var(--fm-duration-fast) var(--fm-ease);
}

/* The class sets display, which would otherwise override the hidden attribute. */
.fm-top-picks__nav[hidden] {
    display: none;
}

.fm-top-picks__nav--prev {
    inset-inline-start: var(--fm-space-1);
}

.fm-top-picks__nav--next {
    inset-inline-end: var(--fm-space-1);
}

/* From 992px the page margin has room: the arrows sit half outside the row. */
@media (min-width: 992px) {
    .fm-top-picks__nav--prev {
        inset-inline-start: -20px;
    }

    .fm-top-picks__nav--next {
        inset-inline-end: -20px;
    }
}

.fm-top-picks__nav:hover:not([aria-disabled="true"]),
.fm-top-picks__nav:focus-visible:not([aria-disabled="true"]) {
    background: var(--fm-brand-600);
    border-color: var(--fm-brand-600);
    color: var(--fm-surface);
}

/* At the start or the end: still focusable (aria-disabled, not disabled, so a
   keyboard user's focus is not dropped), visibly inactive, does nothing. */
.fm-top-picks__nav[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.fm-top-picks__nav span {
    margin-block-start: -0.1em;
}

/* ── card ── */
.fm-pick {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    inline-size: 100%;
    min-inline-size: 0;
    padding: var(--fm-space-2);
    background: var(--fm-surface);
    border: var(--fm-border);
    border-radius: var(--fm-radius-lg);
    box-shadow: var(--fm-shadow-md);
    transition: box-shadow var(--fm-duration-base) var(--fm-ease),
                transform var(--fm-duration-base) var(--fm-ease),
                border-color var(--fm-duration-base) var(--fm-ease);
}

@media (min-width: 576px) {
    .fm-pick {
        padding: var(--fm-space-3);
    }
}

@media (min-width: 992px) {
    .fm-pick {
        border-radius: var(--fm-radius-xl);
    }
}

/* The shared card's lift, only where a pointer hovers and motion is welcome. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .fm-pick:hover {
        transform: translateY(-3px);
    }
}

@media (hover: hover) {
    .fm-pick:hover {
        border-color: var(--fm-brand-200);
        box-shadow: var(--fm-shadow-overlay);
    }
}

.fm-pick:focus-within {
    border-color: var(--fm-brand-300);
    box-shadow: var(--fm-shadow-overlay);
}

/* ── media: square, like every catalogue image (they are all square) ── */
.fm-pick__media {
    position: relative;
    /* A ratio, not a height: every card in a row is the same shape and the
       space is reserved before the image arrives (14.3, CLS). */
    aspect-ratio: 1 / 1;
    margin-block-end: var(--fm-space-3);
    background: var(--fm-canvas);
    border-radius: var(--fm-radius-md);
    overflow: hidden;
}

.fm-pick__media-link {
    display: block;
    block-size: 100%;
}

/* contain, never cover: cropping an instrument hides product information. The
   3% pad and 1.06 scale are the shared card's measured values (main.css §17,
   --fm-pc-zoom): the source photos carry their own white margin. */
.fm-pick .fm-pick__media .fm-pick__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 3%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.06);
}

/* ── flags over the image: the admin badge at the inline start, the sale flag at
   the inline end. One flex row that wraps, so on a narrow phone card the flag
   drops under the badge instead of overlapping it. pointer-events: none keeps
   the image itself clickable underneath. ── */
.fm-pick__flags {
    position: absolute;
    inset-block-start: var(--fm-space-2);
    inset-inline: var(--fm-space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--fm-space-1);
    pointer-events: none;
}

/* Truncated rather than wrapped; min-inline-size: 0 lets it shrink to fit. */
.fm-pick__badge {
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-block: 3px;
    padding-inline: var(--fm-space-2);
    overflow: hidden;
    background: var(--fm-brand-600);
    border-radius: var(--fm-radius-pill);
    box-shadow: var(--fm-shadow-sm);
    color: var(--fm-surface);
    font-size: var(--fm-text-xs);
    font-weight: var(--fm-weight-bold);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-pick__badge--best_seller {
    background: var(--fm-warning-strong);
}

.fm-pick__badge--special_offer {
    background: var(--fm-danger-strong);
}

.fm-pick__badge--new {
    background: var(--fm-success-strong);
}

/* The sale flag: WooCommerce's actual percentage (or "SALE" for a variable
   product), always at the same corner, in the store's sale red. */
.fm-pick__discount {
    flex: none;
    margin-inline-start: auto;
    padding-block: 3px;
    padding-inline: var(--fm-space-2);
    background: var(--fm-danger-strong);
    border-radius: var(--fm-radius-pill);
    box-shadow: var(--fm-shadow-sm);
    color: var(--fm-surface);
    font-size: var(--fm-text-xs);
    font-weight: var(--fm-weight-bold);
    line-height: 1.4;
    white-space: nowrap;
}

/* ── body ── */
.fm-pick__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--fm-space-2);
    padding-inline: var(--fm-space-1);
}

.fm-pick__title {
    margin: 0;
    font-size: var(--fm-text-base);
    font-weight: var(--fm-weight-bold);
    line-height: var(--fm-leading-tight);
}

@media (min-width: 992px) {
    .fm-pick__title {
        font-size: var(--fm-text-lg);
    }
}

/* EXACTLY two lines tall, for every name: a one-line name keeps the second line
   empty and a longer one is cut with an ellipsis, so the price and the button
   below it start at the same height in every card of a row. The clamp sits on
   the link, not on the heading, so the link's own focus ring is drawn outside
   its box and never cut off by an ancestor's overflow (2.4.7). The full name
   stays in the link text. */
.fm-pick__title-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    block-size: calc(2em * 1.25);
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--fm-brand-900);
    text-decoration: none;
}

.fm-pick__title-link:hover,
.fm-pick__title-link:focus-visible {
    color: var(--fm-brand-700);
    text-decoration: underline;
}

/* ── pricing: core's price HTML, styled, never rebuilt ──
   A two-line slot in every card: the price charged now on the first line, the
   struck regular price (during a sale) on the second. A card without a sale
   keeps the second line empty, so prices, stock notes and buttons line up
   across the row. 2.25em = one 1.25 line + one 0.8em line at 1.25. */
.fm-pick__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--fm-space-2);
    min-block-size: 2.25em;
    color: var(--fm-brand-700);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
    font-weight: var(--fm-weight-bold);
    line-height: 1.25;
}

/* Current price first on screen, on its own line; DOM order (del, then ins) is
   core's and is what a screen reader announces (1.3.2). */
.fm-pick__price ins {
    flex-basis: 100%;
    order: -1;
    background: none;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.fm-pick__price del {
    color: var(--fm-muted);
    font-size: 0.8em;
    font-weight: var(--fm-weight-medium);
    text-decoration: line-through;
}

.fm-pick__price .woocommerce-Price-amount {
    white-space: nowrap;
}

/* ── stock: said in words, not only by the button changing (12.3) ── */
.fm-pick__stock {
    align-self: flex-start;
    margin: 0;
    padding-block: 2px;
    padding-inline: var(--fm-space-2);
    border-radius: var(--fm-radius-pill);
    font-size: var(--fm-text-xs);
    font-weight: var(--fm-weight-semibold);
    line-height: 1.4;
}

.fm-pick__stock--out {
    background: var(--fm-danger-bg);
    color: var(--fm-danger-strong);
}

.fm-pick__stock--backorder {
    background: var(--fm-warning-bg);
    color: var(--fm-warning-strong);
}

/* ── action: one full-width button at the foot of every card ── */
.fm-pick__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--fm-space-1);
    /* Pushes the button to the bottom, so a row's buttons share one line. */
    margin-block-start: auto;
    padding-block-start: var(--fm-space-1);
}

/* (0,3,3): outranks woocommerce.css's loop-button rules wherever this card is
   rendered, the way main.css §17 does for the shared card's buttons. */
article.fm-pick div.fm-pick__actions a.fm-pick__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    inline-size: 100%;
    /* Commerce action: the 44px house target (12.2). */
    min-block-size: var(--fm-target-comfy);
    margin: 0;
    padding-block: var(--fm-space-2);
    padding-inline: var(--fm-space-3);
    border: 2px solid var(--fm-brand-600);
    border-radius: var(--fm-radius-md);
    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-semibold);
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background var(--fm-duration-fast) var(--fm-ease),
                border-color var(--fm-duration-fast) var(--fm-ease),
                color var(--fm-duration-fast) var(--fm-ease);
}

article.fm-pick div.fm-pick__actions a.fm-pick__btn--cart {
    background: var(--fm-brand-600);
    color: var(--fm-surface);
}

article.fm-pick div.fm-pick__actions a.fm-pick__btn--cart:hover,
article.fm-pick div.fm-pick__actions a.fm-pick__btn--cart:focus-visible {
    background: var(--fm-brand-700);
    border-color: var(--fm-brand-700);
    color: var(--fm-surface);
}

article.fm-pick div.fm-pick__actions a.fm-pick__btn--view {
    background: var(--fm-surface);
    color: var(--fm-brand-700);
}

article.fm-pick div.fm-pick__actions a.fm-pick__btn--view:hover,
article.fm-pick div.fm-pick__actions a.fm-pick__btn--view:focus-visible {
    background: var(--fm-brand-50);
    color: var(--fm-brand-700);
}

/* Core marks the button while its request runs and once the item is in. */
article.fm-pick div.fm-pick__actions a.fm-pick__btn--cart.loading {
    opacity: 0.7;
    pointer-events: none;
}

article.fm-pick div.fm-pick__actions a.fm-pick__btn--cart.added {
    background: var(--fm-success-strong);
    border-color: var(--fm-success-strong);
}

/* Core's "View cart" link after a successful add: a real link, kept, and given
   at least the 24px target (2.5.8). */
.fm-pick__actions .added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--fm-target-min);
    padding-block: var(--fm-space-1);
    color: var(--fm-brand-700);
    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-semibold);
    text-align: center;
}