/* Tendlio - storefront (Experimental).
   Self-contained recommendation cards (.tendlio-bt-card): we render our own card
   markup, NOT the theme's product template, so no theme grid can override the slider
   width (the "how many to show" count now works on every theme). We still show the
   real image, the theme's price HTML and the standard WC / YITH / theme badges, so it
   stays integrated. Kept small: just the card + slider styling. */

.tendlio-bt {
    margin: 2.5em 0;
    clear: both;
}
.tendlio-bt__title {
    margin: 0 0 1em;
}

/* Slider layout. Recommendation rows use Swiper (bundled locally, no CDN) - it owns the
   slidesPerView / breakpoints / dots / touch + drag, exactly like the old plugin, so it
   works the same on every theme. The free-gift band keeps a tiny native scroll row.
   The cards themselves are our own markup (never the theme's li.product), so no theme
   grid can fight the layout - that's what fixes "how many to show" everywhere. */
.tendlio-bt__slider { position: relative; }

/* --- Free-gift band: a lightweight native scroll-snap row (Swiper is overkill for a
   few reward cards). The recommendation rows use Swiper instead - see .tendlio-swiper. --- */
.tendlio-bt__list.tendlio-bt--slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0 0 6px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tendlio-bt__list.tendlio-bt--slider::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tendlio-bt__list.tendlio-bt--slider > li.tendlio-gift-card { scroll-snap-align: start; }

/* --- Recommendation carousel (Swiper sizes the slides via slidesPerView). We only add
   room for the dots and tidy the slide box + the bullet colour (theme-inherit). --- */
.tendlio-swiper { position: relative; padding-bottom: 26px; }
.tendlio-swiper .swiper-wrapper { align-items: flex-start; } /* natural slide heights, don't stretch */
.tendlio-swiper .swiper-slide { height: auto; box-sizing: border-box; }
.tendlio-swiper .swiper-pagination { bottom: 0; line-height: 0; }
.tendlio-swiper .swiper-pagination-bullet { background: currentColor; opacity: .35; }
.tendlio-swiper .swiper-pagination-bullet-active { opacity: .9; }

/* The card itself (theme-independent): centered, image on top with the standard
   badges absolutely placed over it, a two-line clamped name and the price below. */
.tendlio-bt-card { position: relative; box-sizing: border-box; }
.tendlio-bt-card__imglink { display: block; }
.tendlio-bt-card__body { display: block; text-align: center; text-decoration: none; color: inherit; }
.tendlio-bt-card__media { position: relative; display: block; overflow: hidden; border-radius: 8px; }
.tendlio-bt-card__media img {
    width: 100%; height: auto; display: block; border-radius: 8px; transition: opacity .2s;
    -webkit-user-drag: none; user-select: none; /* so a desktop image-drag doesn't fight drag-to-scroll */
}
.tendlio-bt-card:hover .tendlio-bt-card__media img { opacity: .92; }
/* Place 3rd-party / core loop badges (YITH WCBM, WC .onsale) over the image. On cart /
   checkout some badge plugins don't enqueue their own CSS, so anchor them here. */
.tendlio-bt-card__media > .yith-wcbm-badge,
.tendlio-bt-card__media > .onsale {
    position: absolute; top: 8px; left: 8px; z-index: 5; margin: 0; pointer-events: none;
}
/* Add-to-cart overlay (bottom-right of the image). Hover-reveal on desktop, always
   visible on touch. Reuses the WC ajax loop button under the hood (see ProductRow). */
.tendlio-bt-card__atc {
    position: absolute; bottom: 8px; right: 8px; z-index: 4;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(0, 0, 0, 0.1);
    color: #222; font-size: 18px; line-height: 1; text-decoration: none; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, background .2s;
}
.tendlio-bt-card:hover .tendlio-bt-card__atc { opacity: 1; transform: translateY(0); }
.tendlio-bt-card__atc:hover { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }
.tendlio-bt-card__atc.added { background: #e8f5e9; color: #2e7d32; }
@media (hover: none) { .tendlio-bt-card__atc { opacity: 0.92; transform: none; } }
.tendlio-bt-card__name {
    font-size: 14px; margin: 8px 4px 4px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tendlio-bt-card__price { display: block; font-size: 14px; margin: 0 4px; opacity: .9; }
.tendlio-bt-card__price del { opacity: .6; margin-right: 4px; }
.tendlio-bt-card__price ins { text-decoration: none; }

/* Desktop prev/next arrows. Hidden by default; storefront.js shows them only when
   the row overflows and toggles [hidden] at each end. Mobile uses swipe, no arrows. */
.tendlio-bt__arrow {
    position: absolute; top: 38%; z-index: 2;
    width: 36px; height: 36px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: #111;
    font-size: 20px; line-height: 34px; text-align: center; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); display: none;
}
.tendlio-bt__slider.tendlio-bt--has-overflow .tendlio-bt__arrow:not([hidden]) { display: block; }
.tendlio-bt__arrow--prev { left: -6px; }
.tendlio-bt__arrow--next { right: -6px; }
@media (max-width: 768px) {
    .tendlio-bt__arrow { display: none !important; }
}

/* In-stock alternatives: the out-of-stock prompt near the (greyed-out) cart area.
   Theme-inherit: currentColor picks up the theme's own text colour. */
.tendlio-alt-oos { margin: 12px 0; }
.tendlio-alt-oos a {
    display: inline-block; font-weight: 600; text-decoration: none;
    padding: 8px 14px; border: 1px solid currentColor; border-radius: 6px;
}
.tendlio-alt-oos a:hover { text-decoration: underline; }

/* Deals page [tendlio_deals]: the grid is the theme's own ul.products; we only
   add the count / Load more controls around it. */
.tendlio-deals__summary { margin: 0 0 1em; opacity: 0.75; font-size: 0.95em; }
.tendlio-deals__more { text-align: center; margin: 22px 0; }
.tendlio-deals__btn.is-loading { opacity: 0.75; cursor: progress; }
.tendlio-deals__fallback { margin: 8px 0 0; opacity: 0.72; font-size: 0.9em; }
.tendlio-deals-empty { padding: 20px 0; }

/* Smart 404 suggestions block. */
.tendlio-404-suggest { margin: 28px auto; max-width: 1200px; }

/* "Claim your free gift" on the cart. A distinct REWARD band (not a recommendation
   row): a tinted, bordered box at the top of the cart with smaller cards, so it
   reads as "you've earned a gift", not a third "shop more" slider. Reuses the slider
   shell so the scroll-snap + arrows still work; cards are custom (free + Claim). */
.tendlio-giftslider {
    margin: 0 0 1.8em;
    padding: 14px 18px 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 196, 0, 0.07); /* faint gift tint, subtle on most themes */
}
.tendlio-giftslider .tendlio-bt__title { margin: 0 0 0.6em; font-size: 1.05em; }
.tendlio-bt__list.tendlio-bt--slider > li.tendlio-gift-card {
    flex: 0 0 calc(100% / var(--tendlio-cols, 6));
    max-width: none; width: auto; margin: 0;
    scroll-snap-align: start; list-style: none;
    text-align: center; padding: 4px;
}
@media (max-width: 768px) {
    .tendlio-bt__list.tendlio-bt--slider > li.tendlio-gift-card {
        flex-basis: calc(100% / (var(--tendlio-cols-m, 2) + 0.3));
    }
}
.tendlio-gift-card__img img { width: 100%; height: auto; border-radius: 6px; display: block; }
.tendlio-gift-card__name { font-size: 14px; margin: 5px 0 2px; line-height: 1.2; }
.tendlio-gift-card__free { font-size: 14px; font-weight: 700; letter-spacing: .05em; opacity: .85; margin-bottom: 5px; }
.tendlio-gift-claim { width: 100%; padding: 4px 6px; font-size: 14px; }
.tendlio-cartrec-note {
    margin: 16px 0;
    padding: 10px 12px;
    border-left: 3px solid #4a90d9;
    background: #f4f8fc;
    color: #3c434a;
    font-size: 14px;
}