/**
 * Global Product Card — single source of truth.
 *
 * This is the CODLEADE product card identity, promoted from what used to be the
 * "Featured Products 1" (.fp-style-minimal) treatment. Every place a product is
 * rendered goes through template-parts/product/product-card.php and is styled
 * here — Featured Products 1/2/3, the shop archive, category archives, filtered
 * (AJAX) results, recommended/related products, and any other WooCommerce loop
 * via woocommerce/content-product.php.
 *
 * Do NOT restyle .fp-product-card from a section stylesheet. Sections own their
 * heading, padding and column count; the card itself is owned here.
 *
 * Enqueued globally as `codleade-product-card` in inc/performance/assets.php.
 */

.fp-product-card {
    /* Component tokens — override on a section only for a deliberate variant. */
    --pc-ink: #1a1a1a;
    --pc-muted: #776f67; /* 4.9:1 on white, 4.5:1 on #f5f5f5 (WCAG AA); was #8a8279, 3.8:1. */
    --pc-ground: #f6f3f0;          
    --pc-card-border: var(--codleade-border, rgba(0, 0, 0, 0.09));
    /* The storefront master radius. This card image is the visual reference
       the global system was derived from; it now consumes the token so the
       card and the rest of the store can never drift apart. */
    --pc-radius: var(--codleade-radius);

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    background: #ffffff;
    border: none;
    border-radius: var(--pc-radius);
    padding: clamp(8px, 1.2vw, 12px);
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.fp-product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ── Image ───────────────────────────────────────────────────────────── */
.product-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--pc-radius) - 2px);
}

.fp-product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: var(--fp-img-ratio, 1 / 1);
    overflow: hidden;
    background-color: var(--pc-ground);
    border: 0;
    border-radius: calc(var(--pc-radius) - 2px);
}

.fp-product-image-link img,
.fp-product-image-link .codleade-product-img {
    width: 100%;
    height: 100%;
    object-fit: var(--fp-img-fit, cover);
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

/* Second gallery image, cross-faded on hover. */
.fp-product-image-link .codleade-hover-img {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.fp-product-card:hover .fp-product-image-link.has-hover-image .codleade-primary-img {
    opacity: 0;
}

.fp-product-card:hover .fp-product-image-link.has-hover-image .codleade-hover-img {
    opacity: 1;
}


/* ── Natural (un-cropped) ratio ────────────────────────────────────────
 *
 * Selected by Customizer → WooCommerce → Product Images → Product Image
 * Ratio. `CODLEADE\Helpers\ProductImage\body_class()` puts .has-natural-ratio on
 * <body>, so these descendant selectors reach every product card on the page
 * whatever rendered it. They used to be paired with
 * `.fp-product-card.has-natural-ratio` variants for a class that was only ever
 * printed on the Featured Products section wrapper — the card itself never
 * carried it, so those never matched and are gone.
 *
 * There is no fixed pixel width anywhere here: the frame drops its
 * aspect-ratio and the image keeps its own proportions under a max-height, so
 * the card stays fluid at every breakpoint. */
.has-natural-ratio .fp-product-image-link {
    aspect-ratio: auto;
    min-height: 180px;
}

.has-natural-ratio .fp-product-image-link img,
.has-natural-ratio .fp-product-image-link .codleade-product-img {
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

.has-natural-ratio .fp-product-image-link .codleade-hover-img {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

.has-natural-ratio .fp-product-card:hover .fp-product-image-link.has-hover-image .codleade-hover-img {
    opacity: 1;
}

/* Out of stock replaces the discount badge in the corner. */
.fp-stock-badge {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    inset-inline-end: auto;
    bottom: auto;
    margin: 0;
    z-index: 2;
    background: #D32F2F;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    padding: 5px 10px;
    /* Follows Site Identity → Corner Radius, scaled to the badge's size. */
    border-radius: calc(var(--codleade-radius, 13px) * 0.6);
    white-space: nowrap;
}

/* Discount badge: circular badge pinned to top corner of product image (34px desktop) */
.fp-discount-badge {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    inset-inline-end: auto;
    bottom: auto;
    margin: 0;
    z-index: 2;
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--codleade-brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ── Type ──────────────────────────────────────────────────────────────
 * flex-grow lets leftover row height collect BELOW the price, so the price
 * always sits directly under the title and buttons stay aligned across a row. */
.fp-product-info {
    padding: clamp(8px, 1vw, 12px) 2px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    /* Title and price follow the reading direction, flush with the image edge.
     * `start` (not `left`) so RTL mirrors automatically. */
    text-align: start;
}

.fp-product-action {
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
}

.fp-product-title {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pc-ink);
    line-height: 1.35;
    /* No fixed height: a one-line name must not reserve two lines. Long names
     * are still capped at two lines by the clamp below. */
    height: auto;
    min-height: 0;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-product-title a {
    color: inherit;
    text-decoration: none;
}

.fp-product-price {
    display: flex;
    /* Flush with the title, not centred. flex-start is direction-relative, so
     * RTL flips it without a separate rule. baseline keeps the struck-through
     * old price sitting on the same line as the sale price. */
    justify-content: flex-start;
    align-items: baseline;
    gap: 6px;
    margin-top: clamp(6px, 0.95vw, 11px);
    margin-bottom: 0;
}

.fp-price-new {
    color: var(--pc-ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Brand colour earns its place only when there is a genuine reduction. */
.fp-product-card:has(.fp-price-old) .fp-price-new {
    color: var(--fp-accent, var(--codleade-c-price, var(--codleade-brand)));
}

.fp-price-old {
    color: var(--pc-muted);
    text-decoration: line-through;
    font-size: 12px;
}

/* ── Inline discount badge ─────────────────────────────────────────────
 * Sits directly after .fp-price-new in the same baseline-aligned flex row,
 * so it needs no positioning of its own to line up with the price digits.
 *
 * Deliberately quiet. This appears on every discounted card in a grid, and a
 * loud percentage is the fastest way to make a jewellery catalogue read like a
 * clearance rail. It borrows the corner badge's exact vocabulary — square
 * edge, 500 weight, wide letter-spacing, brand ink — so the two read as one
 * system rather than two competing labels.
 *
 * No transition and no :hover: the card already animates its image and its
 * add-to-cart control, and a third moving element on hover is noise. */
/* Remove inline discount badge beside price on product cards everywhere */
.fp-product-card .fp-price-discount {
    display: none !important;
}

/* Fallback styling for inline discount badge if used outside cards (e.g. single product) */
.fp-price-discount {
    color: var(--fp-accent, var(--codleade-c-discount, var(--codleade-brand)));
    background: color-mix(in srgb, var(--codleade-c-discount, rgb(var(--codleade-brand-rgb))) 7%, transparent);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 5px;
    border-radius: calc(var(--codleade-radius, 13px) * 0.6);
    white-space: nowrap;
}

.fp-price-currency {
    font-size: 11px;
    font-weight: 400;
    margin-inline-start: 1px;
}

/* ── Add to cart: full-width action under the price ──────────────────── */
.fp-atc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--codleade-brand) 70%, transparent) !important;
    border-radius: var(--codleade-radius) !important;
    background: var(--codleade-brand) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    position: relative;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

.fp-atc-btn:hover {
    background: color-mix(in srgb, var(--codleade-brand) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--codleade-brand) 88%, #000) !important;
}

.fp-atc-btn:active {
    background: color-mix(in srgb, var(--codleade-brand) 78%, #000) !important;
}

.fp-atc-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

.fp-atc-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

.fp-atc-btn:focus-visible {
    outline: 2px solid var(--codleade-brand);
    outline-offset: 2px;
}

.fp-atc-btn.out-of-stock {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed;
    opacity: 0.85;
}

.fp-atc-btn.is-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.fp-atc-btn.is-loading svg,
.fp-atc-btn.is-loading .fp-atc-label {
    opacity: 0;
    visibility: hidden;
}

.fp-atc-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: calc(50% - 9px);
    inset-inline-start: calc(50% - 9px);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: #fff;
    animation: button-spin 0.6s linear infinite;
}

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

/* ── Shared grid rhythm & equal heights ────────────────────────────────
 * Column COUNT stays with each section; the gap and equal height flex
 * behavior are defined here for all product cards. */
.products-grid,
.shop-products-grid {
    gap: clamp(18px, 2.4vw, 32px) clamp(10px, 1.6vw, 24px);
}

.products-grid > *,
.shop-products-grid > *,
.codleade-fc-slide {
    display: flex;
    flex-direction: column;
}

.products-grid > * > .fp-product-card,
.shop-products-grid > * > .fp-product-card,
.codleade-fc-slide > .fp-product-card {
    height: 100%;
    flex: 1 1 auto;
}

@media (max-width: 767px) {
    .fp-product-card {
        padding: 4px;
    }

    .fp-product-info {
        padding: 5px 2px 0;
    }

    .fp-product-action {
        padding-top: 6px;
    }

    .fp-product-card .fp-atc-btn,
    .fp-product-card .fp-atc-btn:not(.fp-atc-circle) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px !important;
        min-height: 0 !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        font-weight: 600;
        line-height: 1;
        gap: 4px !important;
        white-space: nowrap;
        box-sizing: border-box;
        width: 100%;
        border-radius: var(--codleade-radius) !important;
    }

    .fp-product-card .fp-atc-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .fp-product-card .fp-atc-label {
        min-width: 0;
        letter-spacing: -0.025em;
        white-space: nowrap;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }

    .fp-product-title {
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: 0.04em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fp-product-price {
        gap: 4px;
        margin-top: 4px;
    }

    .fp-price-new {
        font-size: 12px;
    }

    .fp-price-old {
        font-size: 10.5px;
    }

    /* Two cards per row on a phone: the badge steps down with the prices so
       "1.900 Dhs 189 Dhs 89% OFF" still fits one line in a half-width card. */
    .fp-price-discount {
        font-size: 8.5px;
        letter-spacing: 0.06em;
        padding: 2px 4px;
    }

    /* Mobile circular discount badge (26px) pinned 8px from corner */
    .fp-discount-badge {
        position: absolute;
        top: 8px;
        inset-inline-start: 8px;
        inset-inline-end: auto;
        bottom: auto;
        margin: 0;
        width: 26px;
        height: 26px;
        min-width: 26px;
        max-width: 26px;
        font-size: 9px;
    }

    /* Compact corner badges on product card image for mobile/iPhone. */
    .fp-stock-badge {
        top: 8px;
        inset-inline-start: 8px;
        inset-inline-end: auto;
        bottom: auto;
        margin: 0;
        font-size: 8px;
        letter-spacing: 0.06em;
        line-height: 1.2;
        padding: 2.5px 6px;
    }
}