/* =========================================================
   KOVIA — Recommendation shelves
   Cart: "شاید این‌ها را هم دوست داشته باشید" (.cart-recommendations)
   Product page: "محصولات مشابه / پیشنهاد برای شما" (.recommendation-section)
   Same card language, type scale, buttons and hover as the homepage cards.
   ========================================================= */

.cart-recommendations,
.recommendation-section {
    --kr-ink: #211713;
    --kr-ink-2: #3a261b;
    --kr-gold: #c7a15a;
    --kr-gold-strong: #a9823d;
    --kr-muted: #75675d;
    --kr-surface: #fffdfb;
    --kr-media: linear-gradient(160deg, #f6ecdd 0%, #fbf7f1 100%);
    --kr-border: rgba(199, 161, 90, 0.28);
    --kr-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --kr-card-w: clamp(150px, 44vw, 190px);

    min-width: 0;
    margin-top: 32px;
    color: var(--kr-ink);
}

/* ---------- Heading ---------- */
.recommendations-heading,
.recommendation-section .recommendation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.recommendations-heading h2,
.recommendation-section .recommendation-header .section-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: var(--kr-ink);
    font-size: clamp(1rem, 3.2vw + 0.25rem, 1.375rem);
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.recommendations-heading h2::before,
.recommendation-section .recommendation-header .section-title::before {
    content: "";
    position: static;
    flex: none;
    width: 4px;
    height: 1.05em;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--kr-gold), rgba(199, 161, 90, 0.35));
}

.recommendations-heading a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0 14px;
    border: 1px solid rgba(58, 38, 27, 0.16);
    border-radius: 999px;
    color: var(--kr-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}

.recommendations-heading a:hover {
    border-color: var(--kr-ink-2);
    background: var(--kr-ink-2);
    color: #fff;
}

/* ---------- Shelf ---------- */
.recommendations-list,
.recommendation-section .recommendation-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--kr-card-w);
    grid-template-columns: none;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 161, 90, 0.6) transparent;
    /* Room for the hover lift and shadow inside the scroller. */
    padding: 8px 2px 18px;
}

/* ---------- Card ---------- */
.recommendation-card,
.recommendation-section .rec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid var(--kr-border);
    border-radius: 18px;
    background: var(--kr-surface);
    box-shadow: 0 14px 30px -24px rgba(33, 23, 19, 0.55);
    transition:
        transform 450ms var(--kr-ease),
        box-shadow 450ms var(--kr-ease),
        border-color 300ms ease;
}

.recommendation-card {
    gap: 6px;
    padding: 0 0 10px;
}

/* Media */
.recommendation-image,
.recommendation-section .rec-image-wrap {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: auto;
    margin: 6px 6px 2px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: var(--kr-media);
}

.recommendation-image img,
.recommendation-section .rec-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    /* Keeps alt text of a missing image small instead of 16px inside the card. */
    color: var(--kr-muted);
    font-size: 0.6875rem;
    line-height: 1.6;
    transition: transform 700ms var(--kr-ease);
}

.recommendation-section .rec-image-wrap.is-missing::after {
    content: "تصویر در دسترس نیست";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--kr-muted);
    font-size: 0.6875rem;
}

/* Badges (product page) */
.recommendation-section .rec-discount,
.recommendation-section .rec-unavailable {
    position: absolute;
    z-index: 2;
    top: 12px;
    inset-inline-start: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--kr-gold), var(--kr-gold-strong));
    color: var(--kr-ink);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 6px 14px -8px rgba(33, 23, 19, 0.6);
}

.recommendation-section .rec-unavailable {
    inset-inline-start: auto;
    inset-inline-end: 12px;
    background: rgba(33, 23, 19, 0.78);
    color: #fff;
}

/* Body */
.recommendation-section .rec-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 6px 10px 10px;
}

.recommendation-title,
.recommendation-section .rec-title {
    display: -webkit-box;
    min-height: calc(1.65em * 2);
    height: auto;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--kr-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.65;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 200ms ease;
}

.recommendation-title {
    padding-inline: 10px;
}

.recommendation-section .rec-title a {
    color: inherit;
    text-decoration: none;
}

.recommendation-section .rec-attributes {
    height: auto;
    min-height: 0;
    max-height: 36px;
    overflow: hidden;
    color: var(--kr-muted);
    font-size: 0.6875rem;
    line-height: 18px;
}

.recommendation-section .rec-attributes .product-card-attributes {
    margin: 0;
    font-size: inherit;
}

/* Price */
.recommendation-section .rec-price-box {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: auto;
}

.recommendation-section .rec-old-price {
    height: 18px;
    color: var(--kr-muted);
    font-size: 0.6875rem;
    line-height: 18px;
    text-decoration: line-through;
}

.recommendation-price,
.recommendation-section .rec-price {
    color: var(--kr-ink-2);
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.recommendation-price {
    margin-top: auto;
    padding-inline: 10px;
}

.recommendation-price small,
.recommendation-section .rec-price small {
    color: var(--kr-muted);
    font-size: 0.6875rem;
    font-weight: 500;
}

.recommendation-section .rec-unit {
    height: 18px;
    color: var(--kr-muted);
    font-size: 0.6875rem;
    line-height: 18px;
}

/* Stock */
.recommendation-stock,
.recommendation-section .rec-stock {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #2f8059;
    background: rgba(47, 128, 89, 0.1);
    font-size: 0.6875rem;
    font-weight: 700;
}

.recommendation-stock {
    margin-inline: 10px;
}

.recommendation-section .rec-stock.out-stock {
    color: #bd4545;
    background: rgba(189, 69, 69, 0.1);
}

/* Button — same as the homepage primary card button */
.recommendation-add,
.recommendation-section .rec-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #4a2f1e 0%, #3a2415 55%, #2a1810 100%);
    color: #f5ecdf;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(42, 24, 16, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.recommendation-add {
    margin: 4px 10px 0;
}

.recommendation-section .rec-action {
    margin-top: 6px;
}

.recommendation-add i {
    font-size: 0.8125rem;
    color: var(--kr-gold);
}

.recommendation-add:hover:not(:disabled),
.recommendation-section .rec-action:hover {
    color: #f5ecdf;
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(42, 24, 16, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.recommendation-add:active:not(:disabled),
.recommendation-section .rec-action:active {
    transform: scale(0.97);
}

.recommendation-add:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Focus */
.recommendation-card a:focus-visible,
.recommendation-add:focus-visible,
.recommendations-heading a:focus-visible,
.recommendation-section .rec-card a:focus-visible {
    outline: 2px solid var(--kr-gold);
    outline-offset: 2px;
}

.recommendations-list:focus-visible,
.recommendation-section .recommendation-grid:focus-visible {
    outline: 2px solid var(--kr-gold);
    outline-offset: 4px;
    border-radius: 12px;
}

/* Hover — pointer devices only, so tapped cards don't stay lifted */
@media (hover: hover) {
    .recommendation-card:hover,
    .recommendation-section .rec-card:hover {
        transform: translateY(-5px);
        border-color: rgba(199, 161, 90, 0.6);
        box-shadow: 0 26px 44px -26px rgba(33, 23, 19, 0.6);
    }

    .recommendation-card:hover .recommendation-image img,
    .recommendation-section .rec-card:hover .rec-image {
        transform: scale(1.05);
    }

    .recommendation-title:hover,
    .recommendation-section .rec-title a:hover {
        color: #8a6526;
    }
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
    .cart-recommendations,
    .recommendation-section {
        --kr-card-w: 210px;
        margin-top: 40px;
    }

    .recommendations-heading a {
        font-size: 0.8125rem;
    }

    .recommendation-title,
    .recommendation-section .rec-title {
        font-size: 0.8125rem;
    }

    .recommendation-price,
    .recommendation-section .rec-price {
        font-size: 0.9375rem;
    }
}

/* Cart has the full width on desktop: a tidy grid instead of a shelf. */
@media (min-width: 992px) {
    .recommendations-list {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        overflow: visible;
    }
}

@media (min-width: 1200px) {
    .recommendation-section {
        --kr-card-w: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recommendation-card,
    .recommendation-section .rec-card,
    .recommendation-image img,
    .recommendation-section .rec-image,
    .recommendation-add,
    .recommendation-section .rec-action {
        transition: none;
    }

    .recommendation-card:hover,
    .recommendation-section .rec-card:hover,
    .recommendation-card:hover .recommendation-image img,
    .recommendation-section .rec-card:hover .rec-image {
        transform: none;
    }
}