/* ===========================================
   PRODUCT CARD
   ===========================================
   One card, every grid. The homepage sections and the shop grid render the
   same `template-parts/product-card.php`, so they read from this one file —
   the card used to live inside `homepage.css`, which is enqueued on the front
   page only, and the shop therefore carried a second card of its own that had
   already drifted (it printed the category where the mockup asks for the
   maker).

   Nothing here is scoped to a surface or to a grid. The rules that exist only
   to outrank Flatsome double their class rather than borrow a `body` prefix,
   because there is no shop equivalent of `body.watchit-homepage` and inventing
   one to win a specificity contest would tie the card to the page again.
   =========================================== */

/* The product grid's own row/column gap, and the step the „Rodoma N prekės."
   counter drops by below the grid. One value so the counter moves with the
   rows rather than beside them. It sits on `:root` and not on the homepage
   body because the shop now draws the same card; it was front-page-only for
   as long as the card was. Widened at the four-column breakpoint. */
:root {
    --watchit-grid-gap: 12px;
}

@media (min-width: 900px) {
    :root {
        --watchit-grid-gap: 18px;
    }
}

/* --- grid ---------------------------------------------------------------
   The container for every secondary run of cards: related products, recently
   viewed, and the search-suggestion rows on the shop. The shop's own product
   grid keeps `.watchit-products-grid` — the two are deliberately separate
   classes, because `shop.js` scopes its GA4 `select_item` to the shop grid and
   must not fire for a recently-viewed or suggestion click.

   Four columns, not `repeat(auto-fill, minmax(200px, 1fr))`. Auto-fill sized
   the old `.watchit-related-grid` to FIVE tracks in an 1100px container while
   the related query is hard-capped at four products (`single-product.php`:
   `array_slice($upsell_ids, 0, 4)`), so one track could never be filled by
   construction, and with today's three products the row ended at x=820.4
   inside a grid ending at x=1270 — 449.6px of empty cream, measured live.

   At four columns the card is 257px against the shop grid's 264px, inside 3%,
   which is why there is no compact variant of the card: a modifier for a 7px
   difference would be a second system wearing a variant's name. */
.watchit-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--watchit-grid-gap, 12px);
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1023.98px) {
    .watchit-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Two columns below 600 — the same breakpoint at which the card's foot stacks,
   so the two decisions cannot drift apart. */
@media (max-width: 599.98px) {
    .watchit-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.watchit-card {
    /* Meta eilutės matmenys — vienas šaltinis. Gamintojas ir techninė eilutė
       ima dydį ir tarpą būtent iš čia, o kūno tinklelio eilutės aukštis
       skaičiuojamas iš tų pačių dviejų reikšmių (`--w-card-meta-line`), tad
       rezervuotas tarpas negali atitrūkti nuo teksto, kuriam jis skirtas.
       Įrašyta reikšme jis atitrūktų — tai ta pati klaida kaip #126, tik
       viena skale mažesnė. */
    --w-card-meta-size: 10.5px;
    --w-card-meta-leading: 1.6;
    --w-card-meta-line: calc(var(--w-card-meta-size) * var(--w-card-meta-leading));
    --w-card-body-gap: 4px;

    display: flex;
    flex-direction: column;
    background: var(--watchit-bg-white, #fff);
    border: 1px solid var(--watchit-border, #E5E7EB);
    border-radius: var(--watchit-radius-lg, 12px);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

/*
 * The gender filter needs this rule to do anything at all.
 *
 * `hidden` hides through the UA stylesheet, and the card carries an author
 * `display: flex`. Author beats UA, so the attribute landed on exactly the
 * right cards, `el.hidden` read true, and every card stayed on screen —
 * measured live: counter „Rodoma 2 prekės." while five cards still computed
 * `display: flex` and the grid stayed 770px tall on every tab.
 *
 * It is a rule and not `style.display` in the JS on purpose: the moment the
 * card's display type changes again, one CSS line follows it, whereas an
 * inline value would have to be kept in step from the other side.
 */
.watchit-card[hidden] {
    display: none;
}

.watchit-card-shot {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--watchit-bg-cream, #F5EFE8);
}

.watchit-card-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Discount and „Naujiena" share this corner and never appear together — the
   discount is the stronger of the two claims, so the template picks it first
   and this class carries both looks. */
.watchit-card-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
}

.watchit-card-tag.is-new {
    background: var(--watchit-primary, #E8D5B7);
    color: var(--w-charcoal, #353837);
}

/* Tinklelis, ne stulpelis, dėl vienos priežasties: gamintojo ir techninės
   eilutės šablone gali nebūti visai (jos apgaubtos sąlygomis), o srauto
   stulpelyje tada pakyla pavadinimas ir eilutė netenka bendros linijos —
   kainos juosta lieka vietoje, nes `--w-card-foot` turi `margin-top: auto`,
   tad tuščia vieta atsiveria kaip tik virš pavadinimo.

   Dvi pirmos eilutės turi grindis (`minmax`), o ne fiksuotą aukštį: grindys
   išlaiko tarpą, kai turinio nėra, o `auto` viršus leidžia eilutei paaugti,
   jei ji kada nors susilaužytų. Tuščių `<p>` į DOM nededama — ekrano
   skaitytuvui nėra ko skaityti, o rezervas yra maketo, ne turinio.

   `minmax(0, 1fr)` stulpeliui reikalingas tam, kad techninė eilutė galėtų
   susitraukti ir pasilikti savo `text-overflow: ellipsis`. */
.watchit-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
        minmax(var(--w-card-meta-line), auto)
        minmax(var(--w-card-meta-line), auto)
        auto
        1fr;
    flex: 1;
    gap: var(--w-card-body-gap);
    padding: 10px 12px 13px;
}

.watchit-card-brand {
    grid-row: 1;
    margin: 0;
    font-size: var(--w-card-meta-size);
    line-height: var(--w-card-meta-leading);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--watchit-text-muted, #5A6A74);
}

/* One line, never wrapped: it is a technical string, and a broken „40-44mm ·
   Mechaninis" reads as two facts instead of one. It is allowed to ellipsis at
   the narrow end — the terms are printed size · movement · water resistance,
   so what a 360px card drops is the last one, never the two a buyer scans
   first. Measured at 360: three of six cards lose „10 ATM", nothing else. */
.watchit-card-spec {
    grid-row: 2;
    margin: 0;
    font-size: var(--w-card-meta-size);
    line-height: var(--w-card-meta-leading);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--watchit-text-secondary, #5A6A74);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchit-card-body h3 {
    grid-row: 3;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--watchit-text);
}

.watchit-card-foot {
    grid-row: 4;
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.watchit-card-price {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--watchit-text);
}

/* WooCommerce prints a sale price as <del> + <ins>; the mockup draws <s> then
   the new price. Both are styled so the markup stays WooCommerce's own. */
.watchit-card-price del,
.watchit-card-price s {
    color: var(--watchit-text-muted, #5A6A74);
    font-weight: 400;
    font-size: 12.5px;
    margin-right: 5px;
    text-decoration: line-through;
}

.watchit-card-price ins {
    text-decoration: none;
    background: none;
    color: inherit;
}

.watchit-card-price .woocommerce-Price-amount {
    white-space: nowrap;
}

/* The card renders `get_price_html()`, and Flatsome styles the inner span
   directly (`span.amount { color: #111; font-weight: 700 }`). A colour on the
   wrapper never reaches the number, because the number is not inheriting — it
   has its own declaration. So the amount is addressed here, not the wrapper.

   The struck price is a separate rule and not an afterthought: one rule on
   `.amount` would repaint it charcoal too, which would make the old price read
   louder than the new one. `del` keeps the muted grey it already declares, and
   the descendant selector is a level more specific, so the pair is
   order-independent. `ins` takes the same treatment as a plain price. */
.watchit-card-price.watchit-card-price .woocommerce-Price-amount,
.watchit-card-price.watchit-card-price ins .woocommerce-Price-amount {
    color: var(--w-charcoal);
    font-weight: 600;
}

.watchit-card-price.watchit-card-price del .woocommerce-Price-amount {
    color: var(--watchit-text-muted, #5A6A74);
    font-weight: 400;
}

.watchit-card-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--watchit-text-secondary, #5A6A74);
}

/* Same four colours as the product page (product.css:279-282), so one watch
   reads the same on both surfaces. */
.watchit-card-stock .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--w-green);
    flex: 0 0 auto;
}

.watchit-card-stock.is-order .dot {
    background: var(--watchit-primary, #E8D5B7);
}

.watchit-card-stock.is-backorder .dot {
    background: #F59E0B;
}

.watchit-card-stock.is-unavailable .dot {
    background: #DC2626;
}

/* --- two-column density ---------------------------------------------------
   Below 600px both grids are two columns, which makes the card 188px wide at
   412 and 162px at 360, and at those widths the price and the stock line stop
   fitting on one row together. Left to `flex-wrap` they wrapped only on the
   cards that needed it, so the foot was 33.6px on most cards and 59.2px on the
   expensive ones and the grid's rhythm broke on exactly the products worth the
   most. Measured on the live grid with a four-digit sale price: the foot needs
   214.2px against 162px available.

   So the foot stacks here by design rather than by overflow. Every card gets
   the same 54px foot, whatever its price, and the sale case (del + ins + stock)
   stacks the same way as a plain one. Dropping the spec line instead was built
   and measured first: it buys 21px of height and leaves this wrap exactly where
   it was, because the spec was never what overflowed. */
@media (max-width: 599.98px) {
    .watchit-card-foot {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 3px;
    }
}

/* Hover only where a pointer can actually hover — on touch it would stick. */
@media (hover: hover) and (pointer: fine) {
    .watchit-card:hover {
        border-color: var(--watchit-primary, #E8D5B7);
        box-shadow: 0 4px 14px rgba(var(--w-charcoal-rgb), 0.08);
    }

    .watchit-card:hover .watchit-card-shot img {
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .watchit-card,
    .watchit-card-shot img {
        transition: none;
    }

    .watchit-card:hover .watchit-card-shot img {
        transform: none;
    }
}

/* --- Flatsome overrides --------------------------------------------------
   Flatsome styles bare `a`, `h3` and `p` inside page content and wins on
   specificity for colour and margin. Only the declarations it actually
   overrides are repeated here, and the class is doubled rather than prefixed
   with a page body class — see the file header. */

.watchit-card.watchit-card,
.watchit-card.watchit-card:hover {
    color: var(--watchit-text);
    text-decoration: none;
}

.watchit-card-body.watchit-card-body h3 {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35;
}

.watchit-card-brand.watchit-card-brand,
.watchit-card-spec.watchit-card-spec {
    margin: 0;
}