/**
 * ============================================================
 * GSUK Shop/Archive Product Cards — Styling
 * ============================================================
 * Applies to the Shop page and category archives (Elementor's Loop
 * Grid template for products, confirmed 31 July to still render
 * through WooCommerce's own standard classes — woocommerce-loop-
 * product__title, add_to_cart_button, woocommerce-loop-product__link
 * etc. — not a fully custom Elementor markup, which is why plain
 * WooCommerce hooks work for this instead of needing per-product
 * AJAX calls).
 *
 * Colours (#24346A) match what's already used elsewhere on the site
 * (single product page swatches, gallery arrows, buttons).
 */

/* 1. Title above the image, image slightly smaller (Hayley's
   feedback, 3 Aug — wanted 5 cards to comfortably fit per row on
   laptop-size screens, plus title-above-image matches the updated
   Figma layout).
   Image, title, and swatches all turn out to be nested INSIDE the
   same <a class="woocommerce-LoopProduct-link"> element (confirmed
   by inspecting the actual DOM — not separate siblings), and that
   link is `display:block` by default, so a plain CSS `order` alone
   wouldn't do anything until the link itself becomes a flex
   container. Point 2 ("move swatches/buttons up") turned out to need
   no separate work — once the title moves above the image, the flow
   naturally becomes Title → Image → Swatches → Buy Now already,
   confirmed visually. */
.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    cursor: default; /* no longer a clickable link — only "Buy Now" navigates (Hayley's feedback, 1 Aug) */
}

.woocommerce-loop-product__title {
    order: 1;
    text-align: left;
    width: 92%;
    padding: 0;
    margin: 0 0 2px;
    /* Reserves a FIXED height (2 lines' worth) so every card in a row
       stays vertically aligned regardless of whether a given
       product's own name happens to be 1 or 2 lines — measured live
       (31 July): 1-line = 39.59px, 2-line = 61.19px, i.e. ~3.4em.
       Safe to keep fixed like this now that the colour name no
       longer changes the title's own text on hover (moved to a
       tooltip on the swatch instead, 4 Aug) — the title's content is
       now static, so this height genuinely never needs to grow. */
    min-height: 3.4em;
}

.woocommerce-loop-product__link img {
    order: 2;
    width: 92% !important;
    margin: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.gsuk-shop-swatches {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 92%;
    gap: 8px;
    margin: 4px 0 4px;
}

/* NOTE on "5 per row not fitting on laptop screens": the product
   grid's column count is controlled by Elementor's own WooCommerce
   Archive Products widget (not by this stylesheet) — it applies a
   DIFFERENT "Columns" value per responsive breakpoint (Desktop/
   Tablet/etc.), so a laptop-width screen can fall into a lower-
   column breakpoint even though the top-level Desktop setting is 5.
   Tried overriding this via CSS (grid-template-columns) but
   Elementor's own breakpoint-driven rule kept winning regardless of
   specificity/!important — this needs checking directly in the
   widget's own Layout → Columns responsive control in Elementor,
   not something this stylesheet can reliably force from outside. */

/* Tooltip showing the colour's name, positioned directly above the
   swatch (4 Aug — replaces the earlier approach of appending the
   name onto the title text, which caused layout-shift problems; see
   gsuk-shop-swatches.js for the fuller explanation). Built as a
   normal CSS pin-point tooltip: small box + a triangular arrow
   pointing down at the swatch. Hidden by default and only shown via
   the swatch's own :hover state — desktop only in practice, since
   the JS only ever binds hover behaviour on non-touch devices. */
.gsuk-shop-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    background: #24346A;
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease;
}

.gsuk-shop-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #24346A;
}

.gsuk-shop-swatch:hover .gsuk-shop-tooltip {
    opacity: 1;
    visibility: visible;
}

/* 3. Price hidden on the shop/archive grid specifically — scoped to
   the actual per-product card class (works regardless of which
   widget/page produced the loop — see gsuk-custom-functions.php
   Section 14a's note, 7 Aug) rather than a specific widget's wrapper
   class, so it doesn't affect price displays elsewhere that don't
   use this same card markup. */
.product.type-product .price {
    display: none !important;
}

.gsuk-shop-swatch {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s ease, border-color 0.15s ease;
}

.gsuk-shop-swatch:hover,
.gsuk-shop-swatch.gsuk-pinned {
    border-color: #24346A;
    box-shadow: 0 0 0 1px #24346A;
    transform: scale(1.08);
}

/* 4. "Buy Now" button — reuse the site's existing button look;
   Elementor's own per-widget CSS for this button (same situation as
   the single product page's Buy Now button) needs !important to
   reliably win on colour, same reasoning documented there. */
.product.type-product .add_to_cart_button,
.product.type-product a.button {
    background: #24346A !important;
    color: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    font-family: "Bitter", sans-serif !important;
}

/* Hover colour (Hayley's feedback, 4 Aug) — same red used on the
   single product page's three buttons (see gsuk-crate-calculator.css)
   for consistency. */
.product.type-product .add_to_cart_button:hover,
.product.type-product a.button:hover {
    background: #DC002C !important;
}

@media (min-width: 481px) {
    /* Desktop-only padding (Hayley's feedback, 4 Aug) — left off
       mobile deliberately, this padding would make the button too
       wide/tall for small screens. */
    .product.type-product .add_to_cart_button,
    .product.type-product a.button {
        padding: 20px 50px 20px 50px !important;
    }

    /* Point 2 (Hayley's feedback, 4 Aug): larger swatches on desktop
       only — the default 26px (22px on the existing small-mobile
       breakpoint below) stays as-is below this width. */
    .gsuk-shop-swatch {
        width: 35px !important;
        height: 35px !important;
    }
}

@media (max-width: 480px) {
    .gsuk-shop-swatch {
        width: 22px;
        height: 22px;
    }
}