/*!
 * TopSaho Carousel — styles frontend
 * Toutes les classes sont préfixées "tsc-" pour éviter les conflits avec le thème.
 */

.tsc-carousel{
  --tsc-yellow-1: #FFE94D;
  --tsc-yellow-2: #FFC61E;
  --tsc-yellow-3: #F5B300;
  --tsc-ink: #1c1c1c;
  --tsc-green: #1f7a4d;
  --tsc-speed: 4200ms;

  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: var(--tsc-max-width, 1180px);
  margin: 0 auto;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tsc-carousel *{ box-sizing:border-box; }

.tsc-header{ text-align:center; margin-bottom:8px; }
.tsc-eyebrow{
  font-size:12px; letter-spacing:.28em; font-weight:700;
  color:rgba(28,28,28,.55); text-transform:uppercase;
}
.tsc-title{
  margin:6px 0 0; font-size:32px; font-weight:900;
  color:var(--tsc-ink); letter-spacing:-0.01em;
}
@media (max-width:760px){ .tsc-title{ font-size:24px; } }

.tsc-badge{
  display:inline-flex; align-items:baseline; gap:6px;
  background:#fff; padding:10px 20px; border-radius:999px;
  box-shadow: 0 10px 22px -8px rgba(150,110,0,.55);
  position:relative; overflow:hidden;
}
.tsc-badge b{ font-size:14px; font-weight:800; color:var(--tsc-ink); letter-spacing:.01em; white-space:nowrap; }
.tsc-badge span{ font-family:'Caveat',cursive; font-size:21px; font-weight:700; color:var(--tsc-green); white-space:nowrap; }

.tsc-price-flag{
  background:var(--tsc-ink); color:#fff; font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.tsc-stock-flag{
  background:#fff; color:var(--tsc-green); font-size:11px; font-weight:800;
  letter-spacing:.04em; padding:5px 10px; border-radius:999px; text-transform:uppercase;
}
.tsc-attrs{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:10px;
}
.tsc-attr-tag{
  background:rgba(28,28,28,.08); color:var(--tsc-ink);
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px;
}

/* ============ STYLE 1 : CLASSIQUE ============ */
.tsc-carousel[data-style="classic"] .tsc-stage{
  position:relative; border-radius:28px; overflow:hidden;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, var(--tsc-yellow-1) 0%, var(--tsc-yellow-2) 55%, var(--tsc-yellow-3) 100%);
  padding:52px 40px 40px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.35);
}
.tsc-track-viewport{ overflow:hidden; margin-top:28px; }
.tsc-track{ display:flex; transition: transform .55s cubic-bezier(.65,.05,.36,1); will-change:transform; }
.tsc-slide-group{ flex:0 0 100%; display:grid; grid-template-columns:repeat(var(--tsc-cols,3),1fr); gap:18px; }

.tsc-card{ position:relative; text-align:center; padding:18px 10px 26px; }
.tsc-card .tsc-price-flag{ position:absolute; top:6px; right:14px; box-shadow:0 6px 14px rgba(0,0,0,.25); }
.tsc-card .tsc-stock-flag{ position:absolute; top:6px; left:14px; }

.tsc-can{ height:260px; display:flex; align-items:flex-end; justify-content:center; animation: tsc-bob 4.5s ease-in-out infinite; }
.tsc-card:nth-child(2) .tsc-can{ animation-delay:.3s; }
.tsc-card:nth-child(3) .tsc-can{ animation-delay:.6s; }
@keyframes tsc-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.tsc-can img{ max-height:100%; max-width:100%; filter:drop-shadow(0 22px 18px rgba(150,110,0,.35)); }

.tsc-carousel[data-style="classic"] .tsc-badge{ margin-top:14px; }
.tsc-carousel[data-style="classic"] .tsc-badge::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.9), transparent);
  animation: tsc-shine 3.2s ease-in-out infinite;
}
@keyframes tsc-shine{ 0%{left:-60%;} 35%{left:130%;} 100%{left:130%;} }

.tsc-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:none; background:#fff;
  color:var(--tsc-green); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px -6px rgba(0,0,0,.35);
  transition:transform .15s ease, background .15s ease; z-index:5;
}
.tsc-nav-btn:hover{ transform:translateY(-50%) scale(1.08); background:var(--tsc-green); color:#fff; }
.tsc-nav-prev{ left:6px; } .tsc-nav-next{ right:6px; }

.tsc-dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
.tsc-dot{ width:9px; height:9px; border-radius:50%; background:rgba(28,28,28,.25); border:none; cursor:pointer; transition:all .25s ease; }
.tsc-dot.active{ background:var(--tsc-ink); width:24px; border-radius:6px; }

@media (max-width:760px){
  .tsc-carousel[data-style="classic"] .tsc-slide-group{ grid-template-columns:1fr; }
  .tsc-carousel[data-style="classic"] .tsc-can{ height:210px; }
  .tsc-carousel[data-style="classic"] .tsc-stage{ padding:40px 16px 30px; }
}

/* ============ STYLE 2 : CARTES GLISSANTES ============ */
.tsc-rail{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:14px 8px 30px; cursor:grab; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tsc-rail.tsc-dragging{ cursor:grabbing; scroll-snap-type:none; }
.tsc-rail::-webkit-scrollbar{ display:none; }

.tsc-rail-card{
  scroll-snap-align:center; flex:0 0 320px; position:relative; border-radius:26px;
  padding:26px 20px 22px;
  background:
    radial-gradient(120% 130% at 50% -20%, rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--tsc-yellow-1), var(--tsc-yellow-2));
  box-shadow: 0 18px 34px -18px rgba(150,110,0,.55);
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
  opacity:.55; transform:scale(.9); user-select:none;
}
.tsc-rail-card.active{ opacity:1; transform:scale(1); box-shadow: 0 26px 46px -18px rgba(150,110,0,.65); }
.tsc-rail-card .tsc-price-flag{ position:absolute; top:14px; right:16px; }
.tsc-rail-card .tsc-stock-flag{ position:absolute; top:14px; left:16px; }
.tsc-rail-card .tsc-can{ height:230px; margin-top:12px; pointer-events:none; animation:none; }
.tsc-rail-card .tsc-badge{ display:flex; justify-content:center; margin-top:16px; width:100%; }

.tsc-add-btn{
  display:block; width:100%; margin-top:14px; border:none; background:var(--tsc-ink); color:#fff;
  font-family:inherit; font-weight:700; font-size:13px; padding:12px 0; border-radius:999px; cursor:pointer;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease, background .2s ease;
  pointer-events:none; text-decoration:none; text-align:center;
}
.tsc-rail-card.active .tsc-add-btn{ opacity:1; transform:translateY(0); pointer-events:auto; }
.tsc-add-btn:hover{ background:var(--tsc-green); color:#fff; }

.tsc-progress-wrap{ max-width:320px; margin:0 auto; height:4px; border-radius:4px; background:rgba(0,0,0,.12); overflow:hidden; }
.tsc-progress-bar{ height:100%; width:33.33%; background:var(--tsc-green); border-radius:4px; transition:transform .35s ease, width .35s ease; }

@media (max-width:760px){ .tsc-rail-card{ flex-basis:78%; } }

/* ============ STYLE 3 : SPOTLIGHT ============ */
.tsc-carousel[data-style="spotlight"] .tsc-stage{
  position:relative; border-radius:28px; overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    linear-gradient(155deg, var(--tsc-yellow-1) 0%, var(--tsc-yellow-2) 55%, var(--tsc-yellow-3) 100%);
  padding:50px 20px 34px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.35);
}
.tsc-coverflow{ position:relative; height:340px; display:flex; align-items:center; justify-content:center; margin-top:10px; }
.tsc-glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); z-index:0;
}
.tsc-slot{
  position:absolute; top:50%; left:50%; text-align:center; cursor:pointer;
  transition: transform .5s cubic-bezier(.65,.05,.36,1), opacity .5s ease, filter .5s ease;
}
.tsc-slot .tsc-can{ height:230px; animation:none; }
.tsc-slot .tsc-badge{ opacity:0; transition:opacity .35s ease; margin-top:12px; }
.tsc-slot.tsc-center .tsc-badge{ opacity:1; }

.tsc-thumb-rail{ display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.tsc-thumb{
  position:relative; border:none; background:#fff; padding:9px 20px; border-radius:999px;
  font-family:inherit; font-weight:700; font-size:13px; color:rgba(28,28,28,.55); cursor:pointer; overflow:hidden;
  transition:color .25s ease;
}
.tsc-thumb.active{ color:var(--tsc-ink); }
.tsc-thumb .tsc-ring{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--tsc-green); transform:scaleX(0); transform-origin:left; }
.tsc-thumb.active .tsc-ring{ animation: tsc-fillbar var(--tsc-speed) linear forwards; }
@keyframes tsc-fillbar{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

@media (max-width:760px){
  .tsc-carousel[data-style="spotlight"] .tsc-coverflow{ height:280px; }
  .tsc-carousel[data-style="spotlight"] .tsc-slot .tsc-can{ height:180px; }
  .tsc-glow{ width:240px; height:240px; }
}

/* ============ Cartes cliquables (liens vers la page produit) ============ */
.tsc-carousel a.tsc-card,
.tsc-carousel a.tsc-rail-card,
.tsc-carousel a.tsc-slot{
  color:inherit;
  text-decoration:none;
  display:block;
}
.tsc-carousel a.tsc-card:hover .tsc-can img,
.tsc-carousel a.tsc-rail-card:hover .tsc-can img{
  transform: translateY(-4px);
  transition: transform .25s ease;
}
.tsc-carousel a.tsc-slot.tsc-center{ cursor:pointer; }

/* ============ Générique ============ */
.tsc-empty{
  text-align:center; padding:40px 20px; border-radius:20px; background:#f6f6f6;
  color:#777; font-size:14px;
}