/**
 * 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;
}