/* ============================================================
   WATEC PRODUCT CARD — Block 5.2
   Tokens only (--w-*), and deliberately NO !important.

   The block this replaces (frontend.css "PRODUCT CARDS — Shop Grid")
   declared every property with !important, which is why .w-card could
   never take effect and design-system.css had to fight it back with
   more !important. Keep this file clean: if a rule here needs
   !important to land, something upstream is wrong — fix that instead.

   Load order: frontend.css -> product-card.css -> design-system.css.
   design-system.css owns .w-card / __media / __body / __footer and
   loads last, so it stays the source of truth for those. This file
   adds the card internals and the grid.
   ============================================================ */

/* ------------------------------------------------------------
   GRID — replaces WooCommerce's float layout.
   Floats cannot give equal-height cards, which 5.2 requires so
   every CTA aligns along the bottom of the row.
   ------------------------------------------------------------ */
/* :not(.elementor-grid) is deliberate. Elementor's product widgets (related
   products, the Products widget) render their loop into a ul that carries
   BOTH `products` and `elementor-grid`, and Elementor already owns that grid:
     .elementor-grid-5 .elementor-grid { grid-template-columns: repeat(5,1fr) }
   plus tablet/mobile variants driven by the widget's own responsive controls.
   Our rule is (0,2,1) and outranks Elementor's (0,2,0), so without this
   exclusion we forced --w-cols onto those widgets — a widget set to 5 columns
   rendered 5 products into 4 tracks, orphaning the last card on its own row.
   Let Elementor size its own grids; .w-card still styles the items. */
.woocommerce ul.products:not(.elementor-grid),
ul.products:not(.elementor-grid) {
    display: grid;
    grid-template-columns: repeat(var(--w-cols, 4), minmax(0, 1fr));
    gap: var(--w-space-5);
    margin: 0 0 var(--w-space-6);
    padding: 0;
    list-style: none;
}

/* Neutralise the legacy clearfix; it inserts phantom grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}

/* Honour WooCommerce's catalog_columns setting on desktop. */
.woocommerce ul.products.columns-1 { --w-cols: 1; }
.woocommerce ul.products.columns-2 { --w-cols: 2; }
.woocommerce ul.products.columns-3 { --w-cols: 3; }
.woocommerce ul.products.columns-4 { --w-cols: 4; }
.woocommerce ul.products.columns-5 { --w-cols: 5; }
.woocommerce ul.products.columns-6 { --w-cols: 6; }

/* Desktop cap at 4. WooCommerce is set to catalog_columns=5, but the archive
   container on this theme is ~1141px, so 5 tracks give a 209px card — 177px
   of inner width, which cannot hold the 104px qty stepper plus a readable
   add-to-cart on one row. 5.2 requires that row at >=768px, so the card sets
   the density rather than the other way round. 4 tracks give a 267px card
   (235px inner) and the buy row fits at every width down to 768.
   To go back to 5, drop this rule and accept a stacked buy row on desktop. */
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 { --w-cols: 4; }

/* Undo the float-era geometry WooCommerce still ships.
 *
 * The [class*="columns-"] attribute selector is load-bearing, not decoration.
 * woocommerce-layout.css ships per-column-count widths:
 *
 *   .woocommerce ul.products.columns-5 li.product { width: 16.95%; }   (0,4,2)
 *
 * and woocommerce-smallscreen.css ships `width: 48%` under the same shape.
 * A plain `.woocommerce ul.products li.product` rule is only (0,3,2), so it
 * LOSES and the percentage survives. On a float layout that was harmless; on
 * a grid item the percentage resolves against the TRACK, not the row, so each
 * card became 16.95% of its own 208.8px track = 35px. Matching the attribute
 * selector brings this to (0,4,2) — and product-card.css is enqueued after
 * every WooCommerce sheet, so the tie resolves our way.
 *
 * width:100% rather than auto: equivalent here (border-box, zero margin), but
 * it keeps filling the track even if something later sets justify-items to a
 * non-stretch value, which `auto` would not survive.
 */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product,
ul.products li.product {
    width: 100%;
    max-width: 100%;
    min-width: 0;      /* let the 2-line clamp shrink below min-content */
    margin: 0;
    padding: 0;
    float: none;
    clear: none;
    text-align: left;
}

/* ------------------------------------------------------------
   CARD SHELL
   .w-card itself comes from design-system.css (radius 12, 1px
   border, hover shadow, flex column, height 100%).
   ------------------------------------------------------------ */
.w-card__media {
    display: flex;
    text-decoration: none;
}

.w-card__media img {
    margin: 0;
    mix-blend-mode: multiply; /* product shots are on white */
}

.w-card__body {
    gap: var(--w-space-1);
}

/* ------------------------------------------------------------
   CARD CONTENT
   ------------------------------------------------------------ */
.w-card__brand {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--w-slate);
}

.w-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserve both lines so titles of differing length still align the
       rows beneath them. 2 x 1.4 x 15px. */
    min-height: 42px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--w-navy);
    text-decoration: none;
}

.w-card__title:hover,
.w-card__title:focus {
    color: var(--w-aqua-dark);
    text-decoration: underline;
}

.w-card__sku {
    font-size: 12px;
    color: var(--w-slate);
    font-variant-numeric: tabular-nums;
}

.w-card__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-1);
    font-size: 13px;
    font-weight: 600;
}

.w-card__stock::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.w-card__stock--in    { color: var(--w-success); }
.w-card__stock--order { color: var(--w-warning); }
.w-card__stock--out   { color: var(--w-error); }

/* ------------------------------------------------------------
   PRICE
   ------------------------------------------------------------ */
.w-card__price {
    margin-top: var(--w-space-2);
    font-size: 18px;
    font-weight: 700;
    color: var(--w-navy);
    line-height: 1.3;
}

.w-card__price del {
    font-size: 14px;
    font-weight: 400;
    color: var(--w-slate);
    margin-right: var(--w-space-2);
}

.w-card__price ins {
    text-decoration: none;
}

.w-card__price .woocommerce-price-suffix {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--w-slate);
}

/* `Vaša cena` badge from PricingHooks::price_html_savings(). */
.w-card__price .watec-b2b-price-badge {
    display: inline-block;
    margin-top: var(--w-space-1);
    font-size: 11px;
}

/* Locked state — guests and pending users. Compact variant of
   .w-price-hidden (design-system.css), which is sized for the
   single-product page. */
.w-card__price-locked {
    padding: var(--w-space-3);
    gap: var(--w-space-1);
}

.w-card__price-locked .w-price-hidden__message {
    font-size: 13px;
}

/* ------------------------------------------------------------
   FOOTER — exactly one CTA, plus optional secondary actions
   ------------------------------------------------------------ */
.w-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--w-space-2);
    padding: 0 var(--w-space-4) var(--w-space-4);
}

.w-card__cta {
    width: 100%;
}

/* Qty stepper + add-to-cart. They share a row whenever both fit; the button
   carries a flex-basis floor so it drops to its own line rather than being
   squeezed to an unreadable stub on the narrowest (5-column) cards. */
.w-card__buy {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--w-space-2);
}

.w-qty {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
    overflow: hidden;
    background: var(--w-white);
}

/* The .w-card .w-qty prefixes are required, not stylistic. Both the theme and
   the Elementor kit style bare form controls at (0,1,1):
     style.min.css : input[type="number"] { width:100%; padding:.5rem 1rem }
     post-6.css    : .elementor-kit-6 button { padding:12px 24px }
   A single-class .w-qty__btn / .w-qty__input is only (0,1,0) and loses, which
   blew the input out to 220px and the buttons to 56px — a 339px stepper that
   pushed add-to-cart onto its own line at every width. These are (0,3,0). */
.w-card .w-qty .w-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 30px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: var(--w-bg-soft);
    color: var(--w-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: var(--w-transition);
}

.w-card .w-qty .w-qty__btn:hover,
.w-card .w-qty .w-qty__btn:focus {
    background: var(--w-line);
}

.w-card .w-qty .w-qty__input {
    box-sizing: border-box;
    flex: none;
    width: 42px;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-inline: 1px solid var(--w-line);
    border-radius: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--w-ink);
    background: var(--w-white);
    -moz-appearance: textfield;
    appearance: textfield;
}

.w-card .w-qty .w-qty__input::-webkit-outer-spin-button,
.w-card .w-qty .w-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* WooCommerce's loop add-to-cart button. frontend.css used to paint
   every .button inside a card red with !important — including both
   guest login links, which is what read as "two red CTAs". Style the
   real add-to-cart only.
 *
 * The `.w-card` prefix and `a.`/`button.` element qualifiers are required.
 * WooCommerce 11 ships:
 *   .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button {…}
 * `:where()` contributes nothing, but the rest totals (0,2,1) — which beats a
 * plain `.w-card__buy .button` (0,2,0). The symptom was subtle: `flex` applied
 * (WooCommerce does not set it) while background/color/display silently lost,
 * so the approved add-to-cart rendered in WooCommerce grey. This selector is
 * (0,3,1) and wins outright rather than relying on load order. */
ul.products li.w-card .w-card__buy a.button,
ul.products li.w-card .w-card__buy button.button,
ul.products li.w-card .w-card__buy .add_to_cart_button {
    flex: 1 1 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 44px;
    /* WooCommerce/theme give loop buttons a top margin (14px here), which
       knocked the button out of vertical alignment with the stepper. */
    margin: 0;
    padding: 0 var(--w-space-3);
    border: 0;
    border-radius: var(--w-radius);
    background: var(--w-cta);
    color: var(--w-white);
    font-family: var(--w-font);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--w-transition);
}

ul.products li.w-card .w-card__buy a.button:hover,
ul.products li.w-card .w-card__buy a.button:focus,
ul.products li.w-card .w-card__buy button.button:hover,
ul.products li.w-card .w-card__buy button.button:focus,
ul.products li.w-card .w-card__buy .add_to_cart_button:hover,
ul.products li.w-card .w-card__buy .add_to_cart_button:focus {
    background: var(--w-cta-hover);
    color: var(--w-white);
}

ul.products li.w-card .w-card__buy .add_to_cart_button.added {
    background: var(--w-success);
}

ul.products li.w-card .w-card__buy .add_to_cart_button.loading {
    opacity: 0.75;
    pointer-events: none;
}

/* The "View cart" link WooCommerce appends after an ajax add. */
.w-card .added_to_cart {
    flex: 1 0 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--w-aqua-dark);
    text-decoration: underline;
}

/* Secondary actions (quick view, add to list) attach here via the
   watec_b2b_product_card_actions hook. */
.w-card__actions {
    display: flex;
    gap: var(--w-space-2);
    justify-content: space-between;
}

/* Tertiary card actions. Prefixed past the Elementor kit's
   `.elementor-kit-6 a` (0,1,1) and the theme's bare `button` rules, the same
   trap that hit the CTA and the qty stepper. */
ul.products li.w-card .w-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--w-space-1);
    flex: 1 1 auto;
    box-sizing: border-box;
    min-height: 36px;
    margin: 0;
    padding: 0 var(--w-space-2);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
    background: var(--w-white);
    color: var(--w-aqua-dark);
    font-family: var(--w-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--w-transition);
}

ul.products li.w-card .w-card__action:hover,
ul.products li.w-card .w-card__action:focus {
    border-color: var(--w-aqua-dark);
    color: var(--w-navy);
    text-decoration: none;
}

/* Saved state — the button carries aria-pressed, so style from that rather
   than a parallel class that could drift out of sync with the a11y state. */
ul.products li.w-card .w-card__action[aria-pressed="true"] {
    border-color: var(--w-aqua-dark);
    background: var(--w-aqua-pale);
    color: var(--w-navy);
}

ul.products li.w-card .w-card__action[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* ------------------------------------------------------------
   RESPONSIVE
   Column counts override the columns-N setting below desktop.
   ------------------------------------------------------------ */
@media (max-width: 1439px) {
    .woocommerce ul.products[class*="columns-"] { --w-cols: 4; }
}

@media (max-width: 1199px) {
    .woocommerce ul.products[class*="columns-"] { --w-cols: 3; }
}

@media (max-width: 1023px) {
    .woocommerce ul.products[class*="columns-"] { --w-cols: 2; }
}

/* Phone catalogue: one properly readable card per row.  At 480–767px the
   previous two-column layout left each card too narrow; the quantity controls
   wrapped into a three-storey stack and the input expanded across the card.
   A single card has room for a stable, touch-friendly horizontal stepper and
   its add-to-cart CTA. */
@media (max-width: 767px) {
    .woocommerce ul.products[class*="columns-"] { --w-cols: 1; }

    .w-card__buy {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .w-card .w-qty {
        display: inline-flex;
        flex: 0 0 104px;
        flex-direction: row;
        width: 104px;
        max-width: 104px;
        align-self: stretch;
    }

    .w-card .w-qty .w-qty__btn {
        flex: 0 0 30px;
        width: 30px;
        min-width: 30px;
    }

    .w-card .w-qty .w-qty__input {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        max-width: 42px;
    }

    .w-card__title {
        font-size: 14px;
        min-height: 0;
    }

    .w-card__price {
        font-size: 16px;
    }
}