/* TS Cross-Sell — sekcja + karuzela (karty: style motywu .product-card) */
.tscs-section{
    --tscs-per-view:4;
    --tscs-gap:20px;
    --tscs-pink:#F48FB1;
    --tscs-pink-dark:#EC6FA0;
    --tscs-ink:#5C5470;
    --tscs-muted:#8a83a0;
    --tscs-line:#FAD8E5;
    position:relative;
    margin:56px 0 8px;
    clear:both;
}
.tscs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.tscs-head-text{min-width:0}
.tscs-title{margin:0;font-family:'Baloo 2',inherit;font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.15;color:var(--tscs-ink)}
.tscs-subtitle{margin:6px 0 0;font-size:15px;color:var(--tscs-muted)}

.tscs-nav{display:flex;gap:10px;flex-shrink:0}
.tscs-arrow{
    width:44px;height:44px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:#fff;color:var(--tscs-pink-dark);
    border:1px solid var(--tscs-line);
    box-shadow:0 4px 12px rgba(244,143,177,.15);
    cursor:pointer;transition:background .2s,color .2s,opacity .2s,transform .2s;
    padding:0;font-size:15px;
}
.tscs-arrow:hover:not(:disabled){background:var(--tscs-pink);border-color:var(--tscs-pink);color:#fff;transform:translateY(-1px)}
.tscs-arrow:focus-visible{outline:2px solid var(--tscs-pink-dark);outline-offset:2px}
.tscs-arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.tscs-no-nav .tscs-nav{display:none}

/* padding + ujemny margines = cienie kart nie są ucinane przez overflow */
.tscs-viewport{overflow:hidden;padding:8px 6px 18px;margin:-8px -6px -18px}
.tscs-track{
    display:flex;gap:var(--tscs-gap);
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    will-change:transform;touch-action:pan-y;
}
.tscs-track.is-dragging{transition:none;cursor:grabbing}
.tscs-slide{
    flex:0 0 calc((100% - (var(--tscs-per-view) - 1) * var(--tscs-gap)) / var(--tscs-per-view));
    min-width:0;display:flex;
}
.tscs-slide > .product-card{width:100%;height:100%;margin:0}
.tscs-track.is-dragging a,.tscs-track.is-dragging button{pointer-events:none}

@media (max-width:1100px){.tscs-section{--tscs-per-view:3}}
/* telefon: zawsze 2 karty, przesuw o 1 */
@media (max-width:820px){.tscs-section{--tscs-per-view:2;--tscs-gap:12px;margin-top:40px}.tscs-arrow{width:40px;height:40px}}
@media (max-width:560px){.tscs-head{align-items:center}.tscs-subtitle{display:none}}

@media (prefers-reduced-motion:reduce){.tscs-track{transition:none}}

/* =========================================================
 * Skórka "fx" — motyw Twój Sportowy (ciemny, nagłówki fx-sec-*)
 * Kolory z zmiennych motywu, z bezpiecznymi wartościami zapasowymi.
 * ========================================================= */
.tscs-skin-fx{
    --tscs-ink:var(--color-white,#fff);
    --tscs-muted:var(--color-gray,rgba(255,255,255,.6));
    --tscs-line:rgba(255,255,255,.16);
    --tscs-accent:var(--color-primary,var(--color-accent,#10b981));
}
.tscs-skin-fx .tscs-head{position:relative;padding-top:6px;overflow-x:clip}
@media (max-width:560px){.tscs-skin-fx .tscs-ghost{font-size:64px}}
.tscs-skin-fx .tscs-head-text,.tscs-skin-fx .tscs-nav{position:relative;z-index:1}
.tscs-skin-fx .tscs-head .fx-sec-eyebrow{margin-bottom:8px}
.tscs-skin-fx .tscs-ghost{pointer-events:none;user-select:none}
.tscs-skin-fx .tscs-title{font-family:inherit;font-weight:800;color:var(--tscs-ink);letter-spacing:-.01em}
.tscs-skin-fx .tscs-subtitle{color:var(--tscs-muted)}
.tscs-skin-fx .tscs-arrow{
    background:transparent;color:var(--tscs-ink);
    border:1px solid var(--tscs-line);box-shadow:none;border-radius:50%;
}
.tscs-skin-fx .tscs-arrow:hover:not(:disabled){background:var(--tscs-accent);border-color:var(--tscs-accent);color:#fff}
.tscs-skin-fx .tscs-arrow:focus-visible{outline-color:var(--tscs-accent)}

/* Skórka "fx-light" — jasny motyw (Twoje Łapki: granat / turkus / pomarańcz) */
.tscs-skin-fx-light{
    --tscs-ink:var(--color-dark,#172B3D);
    --tscs-muted:var(--color-gray,#647483);
    --tscs-line:rgba(23,43,61,.14);
    --tscs-accent:var(--color-primary,#08A9B8);
}
.tscs-skin-fx-light .tscs-arrow{background:#fff;box-shadow:0 4px 12px rgba(23,43,61,.08)}

/* Kontener z klasą siatki sklepu (np. .ts-shop-products) — bierzemy z niej style kart,
   ale układ siatki/padding/min-height motywu wyłączamy, żeby nie psuły karuzeli. */
.tscs-section .tscs-viewport.tscs-scoped{
    display:block!important;grid-template-columns:none!important;gap:0!important;column-gap:0!important;row-gap:0!important;
    width:auto!important;max-width:none!important;min-height:0!important;columns:auto!important;
    padding:8px 6px 18px!important;margin:-8px -6px -18px!important;overflow:hidden!important;
    background:none!important;border:0!important;box-shadow:none!important;
}
.tscs-section .tscs-scoped > .tscs-track{display:flex!important;gap:var(--tscs-gap)!important}
.tscs-section .tscs-slide > *{width:100%;max-width:none;margin:0}
/* karta motywu nie może rozepchnąć slajdu (np. min-width / flex-basis z siatki sklepu) —
   wtedy na telefonie mieściłaby się tylko 1 */
.tscs-section .tscs-slide > *{min-width:0!important;flex:1 1 auto!important}
.tscs-section .tscs-slide{max-width:calc((100% - (var(--tscs-per-view) - 1) * var(--tscs-gap)) / var(--tscs-per-view))}
@media (max-width:820px){
  .tscs-section .tscs-slide > *{width:100%!important;max-width:100%!important}
  .tscs-section .tscs-slide img{max-width:100%;height:auto}
}