/**
 * AIEO Recommendations — product-page CSS skin for .aieo-card.
 *
 * The same DTO-rendered .aieo-card markup is used in three contexts:
 *   - product-page recommendation sections   (this file: .aieo-recommendations .aieo-card)
 *   - side-cart left "you might like" list   (aieo-side-cart.css: .aieo-sc-reco-col .aieo-card)
 *   - side-cart bottom "you may also like..."(aieo-side-cart.css: .aieo-sc-maylike-track .aieo-card)
 *   - side-cart recently-viewed tab          (aieo-side-cart.css: .aieo-sc-rv-list .aieo-card)
 *
 * No styles outside `.aieo-recommendations` so this file can never bleed
 * into the side cart or the rest of the page.
 */

.aieo-recommendations {
    margin: 32px 0;
    padding: 0;
}

.aieo-recommendations-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 18px;
    color: #1a1a1a;
}

.aieo-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .aieo-recommendations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .aieo-recommendations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .aieo-recommendations-title { font-size: 18px; margin-bottom: 14px; }
}

/* ---- The shared card, scoped to the recommendations section. ---- */

.aieo-recommendations .aieo-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: opacity .2s ease;
}

.aieo-recommendations .aieo-card:hover {
    text-decoration: none;
    color: inherit;
}

.aieo-recommendations .aieo-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f7f7;
    margin-bottom: 12px;
}

.aieo-recommendations .aieo-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.aieo-recommendations .aieo-card:hover .aieo-card-img-wrap img {
    transform: scale(1.04);
}

.aieo-recommendations .aieo-card-onsale {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background: #c82d52;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 0;
    text-transform: uppercase;
}

.aieo-recommendations .aieo-card-body {
    padding: 0 2px;
}

.aieo-recommendations .aieo-card-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 6px;
    color: #1a1a1a;
    /* Two-line clamp so card heights stay aligned in the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.aieo-recommendations .aieo-card:hover .aieo-card-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aieo-recommendations .aieo-card-price {
    font-size: 14px;
    line-height: 1.2;
    color: #1a1a1a;
}

.aieo-recommendations .aieo-card-price del {
    color: #9a9a9a;
    margin-right: 6px;
}

.aieo-recommendations .aieo-card-price ins {
    text-decoration: none;
    font-weight: 600;
}

.aieo-recommendations .aieo-card.is-out-of-stock {
    opacity: 0.55;
}

/* ===== Role-pricing badge (product-page skin) ===========================
 * Same DTO field, same renderer markup as the side-cart, just sized for
 * the larger product-page card. Hover or focus shows the full message. */
.aieo-recommendations .aieo-card-img-wrap { position: relative; }
.aieo-recommendations .aieo-card-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    /* Frosted dark glass on product-page recommendation cards too —
     * matches the side-cart treatment so the badge reads consistently
     * across contexts. */
    background: rgba(20, 20, 20, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    color: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.4;
    text-transform: uppercase;
    cursor: help;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.aieo-recommendations .aieo-card-role-badge:hover {
    background: rgba(20, 20, 20, 0.62);
    border-color: rgba(255, 255, 255, 0.3);
}
.aieo-recommendations .aieo-card-role-badge-icon { font-size: 11px; line-height: 1; }
.aieo-recommendations .aieo-card-role-badge-text { line-height: 1; }
.aieo-recommendations .aieo-card-role-badge-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    text-align: left;
    white-space: normal;
    width: 240px;
    max-width: 80vw;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.aieo-recommendations .aieo-card-role-badge-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}
.aieo-recommendations .aieo-card-role-badge-tip a {
    color: #ffffff !important;
    text-decoration: underline !important;
}
.aieo-recommendations .aieo-card-role-badge:hover .aieo-card-role-badge-tip,
.aieo-recommendations .aieo-card-role-badge:focus .aieo-card-role-badge-tip,
.aieo-recommendations .aieo-card-role-badge.is-tap-open .aieo-card-role-badge-tip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================================================
   AIEO-OWNED RECOMMENDATION CARD DESIGN — theme-independent.
   Ported out of roosterx-ff/brand.css so the φ-card + carousel render the
   SAME on any theme (twentytwentyfive, classic, …). Every value is a
   --aieo-reco-* CSS var with a baked-in fallback default, and the Product
   Card settings module injects those vars on :root (desktop) + a 767px
   media query (mobile). Scoped under `.aieo-recommendations` (2 classes) so
   it out-specifies the theme's `.aieo-recommendations-grid …` rules — AIEO
   is authoritative everywhere without an !important arms race or editing the
   theme. Targets `> a` (the card, whatever its class) + the JS-emitted inner
   parts (.aieo-card-img-wrap / -body / -name / -price).
   ========================================================================= */
.aieo-recommendations {
    --aieo-reco-card-w:      284px;
    --aieo-reco-card-h:      455px;
    --aieo-reco-card-border: 1px solid #1a1a1a;
    --aieo-reco-card-radius: 0px;
    --aieo-reco-card-bg:     #ffffff;
    --aieo-reco-card-pad:    14px;
    --aieo-reco-card-gap:    16px;
    --aieo-reco-img-bg:      #ffffff;
    --aieo-reco-title-color: #c82d52;
    --aieo-reco-title-fs:    1.375rem;
    --aieo-reco-title-fs-m:  1.125rem;
    --aieo-reco-price-color: #1a1a1a;
    --aieo-reco-price-fs:    1.25rem;
    --aieo-reco-price-fs-m:  1.05rem;
    --aieo-reco-muted:       #9a9a9a;
}

/* Legacy-theme safety: keep the section + carousel WITHIN the viewport so the
   horizontal scroll stays inside the carousel and never widens the page.
   FSE containers constrain this for us; classic themes (Botiga etc.) don't,
   so the unbounded flex row leaked its full width onto the page on mobile. */
body:not(.aieo-cards-theme) .aieo-recommendations {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}
/* Carousel — horizontal scroll-snap row. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--aieo-reco-card-gap, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    /* Bound to the container so overflow-x scrolls INSIDE the grid instead of
       expanding the page. min-width:0 lets it shrink when it is itself a flex
       item in a classic-theme wrapper (default min-width:auto would not). */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Isolate the flex row so its off-screen cards can NEVER extend the page on
       classic themes. Shrink-to-fit parents (Botiga's flex content area) leaked
       the flex intrinsic width into document.scrollWidth → horizontal overflow
       and the fixed bottom bar mis-rendered. contain:paint drops scrollWidth
       from 724 to 390 (= viewport); the carousel still scrolls normally. */
    contain: paint;
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid::-webkit-scrollbar { display: none; }

/* Mobile: a PERSISTENT custom progress bar under the carousel. The native
   scrollbar is an overlay that auto-hides after scrolling, so we render our own
   always-visible bar. lazy-recommendations-v7.js sizes the thumb to
   (visible cards / total cards) and moves it with scroll. Track = full-width
   black line; thumb = title pink. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-reco-progress { display: none; }
@media (max-width: 767px) {
    /* Full-bleed the strip to the RIGHT page edge while the left keeps the page
       gutter — same technique as the promo-surface full-width, right side only.
       The mobile page container has side gutters; this lets the carousel + its
       progress line run to the edge. margin-box stays = the container width, so
       the right edge lands exactly on the viewport (no horizontal scroll), and
       off-screen cards remain clipped by the overflow rules above. */
    body:not(.aieo-cards-theme) .aieo-recommendations {
        margin-right: calc(50% - 50vw);
        max-width: none;
    }
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-reco-progress {
        display: block;
        position: relative;
        height: 9px;
        margin: 12px 0 9px;       /* full width; bottom room for the black line */
        background: transparent;  /* uncovered area stays WHITE */
    }
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-reco-progress-thumb {
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 25%;
        background: var(--aieo-reco-scroll-thumb, var(--aieo-reco-title-color, #c82d52));  /* settable */
        border-radius: 99px;
        z-index: 2;   /* pink thumb sits ABOVE the black line */
        transition: left .04s linear, width .04s linear;
    }
    /* a thin BLACK line, full width, UNDERNEATH the scroll bar */
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-reco-progress::after {
        content: '';
        position: absolute;
        left: 8px; right: 0;    /* right end runs to the carousel edge (no right gap); 8px kept on the left */
        bottom: 0;    /* 1px vertical overlap: the line tucks under the thumb's bottom edge */
        height: 1px;
        z-index: 1;   /* below the pink thumb */
        background: var(--aieo-reco-scroll-line, #1a1a1a);
    }
}

/* Card — fixed φ-rectangle, border, flex column. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid > a {
    flex: 0 0 auto;
    /* Mobile: 2 cards per view (+ a small peek of the next), like the legacy
       best-sellers slider. Desktop width is set in the >=768px rule below. */
    width: 44vw;
    aspect-ratio: 284 / 455;
    scroll-snap-align: start;
    border: var(--aieo-reco-card-border);
    border-radius: var(--aieo-reco-card-radius);
    background: var(--aieo-reco-card-bg);
    padding: var(--aieo-reco-card-pad);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}
@media (min-width: 768px) {
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid > a {
        width: var(--aieo-reco-card-w);
        height: var(--aieo-reco-card-h);
        aspect-ratio: auto;
    }
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid > a:hover,
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid > a:focus { text-decoration: none; }

/* Image fills the flexible top; body locks to the bottom → equal image
   heights so titles start at the same height. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-img-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: var(--aieo-reco-img-bg, #ffffff);
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

/* Title — centred, accent colour, clamped to 2 lines (constant height). */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-name {
    font-size: var(--aieo-reco-title-fs);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0.02em;
    color: var(--aieo-reco-title-color) !important;   /* theme sets the title colour !important — match it to win */
    text-align: center;
    margin: 0;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.36em;
}

/* Price — centred. A SALE stacks (regular <del> over sale <ins>); a variable
   product's min–max range (no <del>) stays on ONE inline row. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price {
    font-size: var(--aieo-reco-price-fs);
    color: var(--aieo-reco-price-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;   /* bottom-align so prices END level */
    line-height: 1.25;
    /* Reserve 2 price lines so the body is a CONSTANT height regardless of
       single-price (1 line) vs sale (regular+sale, 2 lines) — that keeps the
       flex:1 image box equal across cards, so titles START level too. */
    min-height: 2.5em;
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price:not(:has(del)) {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 4px;
    justify-content: center;
    align-items: flex-end;       /* range sits on the same baseline as sales */
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price del,
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price del .woocommerce-Price-amount {
    font-weight: 300;
    text-decoration: line-through;
    color: var(--aieo-reco-muted);
    opacity: 0.85;
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price ins {
    font-weight: 700;
    text-decoration: none;
    color: var(--aieo-reco-price-color);
}
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price > .woocommerce-Price-amount {
    font-weight: 600;
}

/* Per-element padding (operator overrides; default 0). */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-img-wrap { padding: var(--aieo-reco-img-pad, 0); }
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-name     { padding: var(--aieo-reco-title-pad, 0); }
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price    { padding: var(--aieo-reco-price-pad, 0); }

/* Short description under the title — gated by the Product Card setting
   (display var = `none` or `-webkit-box`), clamped to 2 lines. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-desc {
    display: var(--aieo-reco-desc-display, none);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--aieo-reco-desc-color, #6b7280);
    font-size: var(--aieo-reco-desc-fs, 0.85rem);
    line-height: 1.4;
    text-align: center;
    margin: 0;
    padding: var(--aieo-reco-desc-pad, 0);
}

/* Read-only rating aggregate under the price — gated by the setting. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-rating {
    display: var(--aieo-reco-rating-display, flex);
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}
/* Caption ("Vote to see the ratings") stacks BELOW the stars, not beside them. */
body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-rating .aieo-rating-aggregate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

@media (max-width: 767px) {
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-name     { font-size: var(--aieo-reco-title-fs-m); padding: var(--aieo-reco-title-pad-m, 0); }
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-price    { font-size: var(--aieo-reco-price-fs-m); padding: var(--aieo-reco-price-pad-m, 0); }
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-img-wrap { padding: var(--aieo-reco-img-pad-m, 0); }
    body:not(.aieo-cards-theme) .aieo-recommendations .aieo-recommendations-grid .aieo-card-desc     { font-size: var(--aieo-reco-desc-fs-m); padding: var(--aieo-reco-desc-pad-m, 0); }
}