/**
 * Personalized Recommendations — Frontend Styles
 */

/* ── Base ── */
.wsb-recs {
    padding: 20px 0;
    background: var(--wsb-pr-bg, #fff);
}

.wsb-recs__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.wsb-recs__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--wsb-pr-title, #111827);
}

.wsb-recs__see-all {
    font-size: 13px;
    color: #3B82F6;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.wsb-recs__see-all:hover {
    text-decoration: underline;
}

/* ── Track (wraps grid + arrows) ── */
.wsb-recs__track {
    position: relative;
}

/* ── Grid ── */
.wsb-recs__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ── Card ── */
.wsb-recs__card {
    display: flex;
    flex-direction: column;
    background: var(--wsb-pr-card-bg, #fff);
    border: 1px solid var(--wsb-pr-card-border, #E5E7EB);
    border-radius: var(--wsb-pr-radius, 8px);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.wsb-recs__card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.wsb-recs__link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

/* ── Image ── */
.wsb-recs__img {
    position: relative;
    overflow: hidden;
    background: #F9FAFB;
    aspect-ratio: 1 / 1;
}

.wsb-recs__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.wsb-recs__card:hover .wsb-recs__img img {
    transform: scale(1.05);
}

/* ── Discount Badge ── */
.wsb-recs__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #EF4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.3;
}

/* ── Info ── */
.wsb-recs__info {
    padding: 10px 12px;
}

.wsb-recs__name {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wsb-recs__rating {
    display: block;
    font-size: 11px;
    color: #6B7280;
    margin-bottom: 2px;
}

.wsb-recs__rating-count {
    color: #9CA3AF;
    font-size: 10px;
}

.wsb-recs__price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--wsb-pr-price, #111827);
    line-height: 1.4;
}

.wsb-recs__price del { font-weight: 400; opacity: .5; font-size: 12px; }
.wsb-recs__price ins { text-decoration: none; }

.wsb-recs__sold {
    display: block;
    font-size: 11px;
    color: #9CA3AF;
    margin-top: 2px;
}

.wsb-recs__shipping {
    display: inline-block;
    font-size: 11px;
    color: #10B981;
    font-weight: 600;
    margin-top: 2px;
}

/* ── Button ── */
.wsb-recs__btn {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 8px 12px;
    background: var(--wsb-pr-btn-bg, #4F46E5);
    color: var(--wsb-pr-btn-text, #fff);
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: opacity .2s;
}

.wsb-recs__btn:hover { opacity: .9; }
.wsb-recs__btn--loading { opacity: .6; pointer-events: none; }

/* ── Load More Button ── */
.wsb-recs__load-more-wrap {
    text-align: center;
    margin-top: 16px;
}

.wsb-recs__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    background: transparent;
    color: var(--wsb-pr-btn-bg, #4F46E5);
    border: 1.5px solid var(--wsb-pr-btn-bg, #4F46E5);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.wsb-recs__load-more:hover {
    background: var(--wsb-pr-btn-bg, #4F46E5);
    color: var(--wsb-pr-btn-text, #fff);
}

/* Temu/AliExpress: orange/red load more */
.wsb-recs--temu .wsb-recs__load-more {
    color: #FB7701;
    border-color: #FB7701;
    border-radius: 24px;
}
.wsb-recs--temu .wsb-recs__load-more:hover {
    background: #FB7701;
    color: #fff;
}

.wsb-recs--aliexpress .wsb-recs__load-more {
    color: #E62E04;
    border-color: #E62E04;
    border-radius: 20px;
}
.wsb-recs--aliexpress .wsb-recs__load-more:hover {
    background: #E62E04;
    color: #fff;
}

/* ── Carousel Arrows ── */
.wsb-recs__arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    color: #333;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background .15s, box-shadow .15s;
    line-height: 1;
    padding: 0;
}

.wsb-recs__arrow:hover {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

.wsb-recs__arrow--prev { left: -12px; }
.wsb-recs__arrow--next { right: -12px; }


/* ═══════════════════════════════════════
   STYLE: card (default)
   ═══════════════════════════════════════ */
/* Base styles above */


/* ═══════════════════════════════════════
   STYLE: minimal
   ═══════════════════════════════════════ */
.wsb-recs--minimal .wsb-recs__card {
    border: none;
    border-radius: 0;
}

.wsb-recs--minimal .wsb-recs__card:hover {
    box-shadow: none;
    transform: none;
}

.wsb-recs--minimal .wsb-recs__img {
    border-radius: var(--wsb-pr-radius, 8px);
}


/* ═══════════════════════════════════════
   STYLE: carousel
   Horizontal single row with arrows
   ═══════════════════════════════════════ */
.wsb-recs--carousel .wsb-recs__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    scroll-behavior: smooth;
}

.wsb-recs--carousel .wsb-recs__grid::-webkit-scrollbar { display: none; }

.wsb-recs--carousel .wsb-recs__card {
    flex: 0 0 calc((100% - 42px) / var(--wsb-pr-columns, 4));
    scroll-snap-align: start;
    min-width: 160px;
}

.wsb-recs--carousel .wsb-recs__arrow {
    display: flex;
}


/* ═══════════════════════════════════════════════════════
   PLATFORM: Amazon
   Horizontal carousel, no card borders, teal titles,
   star rating + price ($ big ¢ small), no add-to-cart
   button, arrows on hover, 5-6 visible
   ═══════════════════════════════════════════════════════ */
.wsb-recs--amazon {
    --wsb-pr-bg: #FFFFFF;
    --wsb-pr-title: #0F1111;
    --wsb-pr-card-bg: #FFFFFF;
    --wsb-pr-card-border: transparent;
    --wsb-pr-price: #0F1111;
    --wsb-pr-radius: 0;
}

.wsb-recs--amazon .wsb-recs__title {
    font-size: 21px;
    font-weight: 700;
    color: #0F1111;
    border-bottom: 1px solid #E3E6E6;
    padding-bottom: 8px;
}

/* Amazon: carousel layout */
.wsb-recs--amazon .wsb-recs__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 14px;
    scroll-behavior: smooth;
}

.wsb-recs--amazon .wsb-recs__grid::-webkit-scrollbar { display: none; }

.wsb-recs--amazon .wsb-recs__card {
    flex: 0 0 190px;
    scroll-snap-align: start;
    border: none;
    border-radius: 0;
}

.wsb-recs--amazon .wsb-recs__card:hover {
    box-shadow: none;
    transform: none;
}

/* Amazon: arrows */
.wsb-recs--amazon .wsb-recs__arrow {
    display: flex;
    background: rgba(0,0,0,.6);
    border: none;
    color: #fff;
    width: 40px;
    height: 48px;
    border-radius: 4px;
}

.wsb-recs--amazon .wsb-recs__arrow:hover {
    background: rgba(0,0,0,.75);
}

.wsb-recs--amazon .wsb-recs__arrow--prev { left: 0; border-radius: 0 4px 4px 0; }
.wsb-recs--amazon .wsb-recs__arrow--next { right: 0; border-radius: 4px 0 0 4px; }

/* Amazon: image white bg, no zoom */
.wsb-recs--amazon .wsb-recs__img {
    background: #fff;
    border: 1px solid #E3E6E6;
}

.wsb-recs--amazon .wsb-recs__card:hover .wsb-recs__img img {
    transform: none;
}

/* Amazon: title as teal link */
.wsb-recs--amazon .wsb-recs__name {
    color: #007185;
    font-weight: 400;
    font-size: 13px;
}

/* Amazon: rating in orange */
.wsb-recs--amazon .wsb-recs__rating {
    color: #DE7921;
    font-size: 12px;
}

.wsb-recs--amazon .wsb-recs__rating-count {
    color: #007185;
}

/* Amazon: no add-to-cart button */
.wsb-recs--amazon .wsb-recs__btn {
    display: none;
}

/* Amazon: discount badge red */
.wsb-recs--amazon .wsb-recs__badge {
    background: #CC0C39;
    border-radius: 2px;
}

/* Amazon: see-all link */
.wsb-recs--amazon .wsb-recs__see-all {
    color: #007185;
}


/* ═══════════════════════════════════════════════════════
   PLATFORM: Temu
   2-column grid, compact dense cards, orange prices,
   discount badge on image, "X sold" count, no arrows
   ═══════════════════════════════════════════════════════ */
.wsb-recs--temu {
    --wsb-pr-bg: #FFFFFF;
    --wsb-pr-title: #222;
    --wsb-pr-card-bg: #FFFFFF;
    --wsb-pr-card-border: #F0F0F0;
    --wsb-pr-price: #FB7701;
    --wsb-pr-radius: 6px;
}

.wsb-recs--temu .wsb-recs__title {
    font-size: 16px;
    font-weight: 700;
}

/* Temu: always 2-col grid, compact */
.wsb-recs--temu .wsb-recs__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
}

.wsb-recs--temu .wsb-recs__card {
    border: 1px solid #F0F0F0;
    border-radius: 6px;
}

.wsb-recs--temu .wsb-recs__card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transform: none;
}

/* Temu: price bold orange */
.wsb-recs--temu .wsb-recs__price {
    font-size: 16px;
    font-weight: 800;
    color: #FB7701;
}

.wsb-recs--temu .wsb-recs__price del {
    color: #BBB;
    font-size: 11px;
}

/* Temu: orange discount badge */
.wsb-recs--temu .wsb-recs__badge {
    background: #FB7701;
    border-radius: 0 0 6px 0;
    top: 0;
    left: 0;
    font-size: 11px;
    padding: 3px 8px;
}

/* Temu: sold count visible */
.wsb-recs--temu .wsb-recs__sold {
    color: #999;
    font-size: 11px;
}

/* Temu: compact info area */
.wsb-recs--temu .wsb-recs__info {
    padding: 8px 10px;
}

.wsb-recs--temu .wsb-recs__name {
    font-size: 12px;
    font-weight: 400;
    -webkit-line-clamp: 1;
    margin-bottom: 2px;
}

/* Temu: no add-to-cart button (tap card to go) */
.wsb-recs--temu .wsb-recs__btn {
    display: none;
}


/* ═══════════════════════════════════════════════════════
   PLATFORM: AliExpress
   2-column grid, red/black price, green "Free shipping",
   orders count, star rating, "Choice" feel
   ═══════════════════════════════════════════════════════ */
.wsb-recs--aliexpress {
    --wsb-pr-bg: #FFFFFF;
    --wsb-pr-title: #191919;
    --wsb-pr-card-bg: #FFFFFF;
    --wsb-pr-card-border: #EFEFEF;
    --wsb-pr-price: #191919;
    --wsb-pr-radius: 8px;
}

.wsb-recs--aliexpress .wsb-recs__title {
    font-size: 18px;
    font-weight: 700;
    color: #191919;
}

/* AliExpress: 2-col grid */
.wsb-recs--aliexpress .wsb-recs__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
}

.wsb-recs--aliexpress .wsb-recs__card {
    border: 1px solid #EFEFEF;
    border-radius: 8px;
}

/* AliExpress: price bold, can be red on sale */
.wsb-recs--aliexpress .wsb-recs__price {
    font-size: 15px;
    font-weight: 800;
}

.wsb-recs--aliexpress .wsb-recs__price del {
    color: #999;
    font-size: 11px;
}

/* AliExpress: red discount badge */
.wsb-recs--aliexpress .wsb-recs__badge {
    background: #E62E04;
    border-radius: 2px;
    font-size: 10px;
    padding: 2px 5px;
}

/* AliExpress: green shipping badge */
.wsb-recs--aliexpress .wsb-recs__shipping {
    color: #00B578;
    font-weight: 600;
    font-size: 11px;
}

/* AliExpress: sold/orders count */
.wsb-recs--aliexpress .wsb-recs__sold {
    color: #666;
    font-size: 11px;
}

/* AliExpress: rating */
.wsb-recs--aliexpress .wsb-recs__rating {
    color: #191919;
    font-size: 11px;
}

/* AliExpress: no button */
.wsb-recs--aliexpress .wsb-recs__btn {
    display: none;
}

.wsb-recs--aliexpress .wsb-recs__name {
    font-size: 12px;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════
   PLATFORM: MercadoLibre
   Horizontal carousel, 6 visible, blue arrows,
   "Envío gratis" green, price + installments,
   "Ver todos" blue link, clean white cards
   ═══════════════════════════════════════════════════════ */
.wsb-recs--mercadolibre {
    --wsb-pr-bg: #FFFFFF;
    --wsb-pr-title: #333;
    --wsb-pr-card-bg: #FFFFFF;
    --wsb-pr-card-border: #E6E6E6;
    --wsb-pr-price: #333;
    --wsb-pr-radius: 4px;
}

.wsb-recs--mercadolibre .wsb-recs__title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* MercadoLibre: carousel layout */
.wsb-recs--mercadolibre .wsb-recs__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    scroll-behavior: smooth;
}

.wsb-recs--mercadolibre .wsb-recs__grid::-webkit-scrollbar { display: none; }

.wsb-recs--mercadolibre .wsb-recs__card {
    flex: 0 0 170px;
    scroll-snap-align: start;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
}

.wsb-recs--mercadolibre .wsb-recs__card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transform: none;
}

/* MercadoLibre: blue arrows */
.wsb-recs--mercadolibre .wsb-recs__arrow {
    display: flex;
    background: #fff;
    border: 1px solid #E6E6E6;
    color: #3483FA;
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.wsb-recs--mercadolibre .wsb-recs__arrow:hover {
    background: #F5F5F5;
}

/* MercadoLibre: price large, light weight */
.wsb-recs--mercadolibre .wsb-recs__price {
    font-size: 16px;
    font-weight: 400;
    color: #333;
}

.wsb-recs--mercadolibre .wsb-recs__price del {
    color: #999;
    font-size: 12px;
}

/* MercadoLibre: green shipping */
.wsb-recs--mercadolibre .wsb-recs__shipping {
    color: #00A650;
    font-weight: 600;
    font-size: 12px;
}

/* MercadoLibre: see-all blue link */
.wsb-recs--mercadolibre .wsb-recs__see-all {
    color: #3483FA;
    font-size: 14px;
}

/* MercadoLibre: discount green */
.wsb-recs--mercadolibre .wsb-recs__badge {
    background: #00A650;
    border-radius: 3px;
    font-size: 12px;
}

/* MercadoLibre: name smaller */
.wsb-recs--mercadolibre .wsb-recs__name {
    font-size: 13px;
    font-weight: 400;
    color: #333;
}

/* MercadoLibre: no button */
.wsb-recs--mercadolibre .wsb-recs__btn {
    display: none;
}

.wsb-recs--mercadolibre .wsb-recs__info {
    padding: 8px 10px;
}


/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */
@media (min-width: 480px) {
    .wsb-recs__name { font-size: 14px; }
    .wsb-recs__btn { font-size: 13px; }
}

@media (min-width: 768px) {
    .wsb-recs__grid { grid-template-columns: repeat(3, 1fr); }
    .wsb-recs__title { font-size: 20px; }

    /* Temu & AliExpress: 3 cols on tablet */
    .wsb-recs--temu .wsb-recs__grid,
    .wsb-recs--aliexpress .wsb-recs__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .wsb-recs__grid { grid-template-columns: repeat(var(--wsb-pr-columns, 4), 1fr); }

    /* Temu & AliExpress: 4-5 cols on desktop */
    .wsb-recs--temu .wsb-recs__grid,
    .wsb-recs--aliexpress .wsb-recs__grid {
        grid-template-columns: repeat(var(--wsb-pr-columns, 4), 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Hide arrows on mobile for all carousels */
    .wsb-recs__arrow { display: none !important; }
}