/* ── homepage spotlight carousel (premium, brand navy/teal/gold) ───────────── */
.spot { position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(900px 420px at 80% 0%, rgba(45, 212, 191, .22), transparent 60%),
              radial-gradient(700px 400px at 0% 100%, rgba(212, 167, 44, .16), transparent 60%),
              linear-gradient(160deg, #081020 0%, #0b1a2c 55%, #0a2426 100%);
  border-top: 1px solid rgba(255, 255, 255, .06); }
.spot-glow { position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 215, 122, .18), transparent 65%); filter: blur(10px); z-index: -1;
  animation: spotFloat 14s ease-in-out infinite alternate; }
@keyframes spotFloat { to { transform: translate(-120px, 80px); } }
.spot-in { position: relative; padding: 34px 16px 22px; }
.spot-track { position: relative; min-height: 380px; }
.spot-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 28px;
  opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .7s ease, transform .7s ease, visibility 0s .7s; }
[dir="rtl"] .spot-slide, .lang-ar .spot-slide { transform: translateX(-24px); }
.spot-slide.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease, transform .7s ease; }
.spot-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: .8rem;
  font-weight: 700; letter-spacing: .02em; color: #1a1406; background: linear-gradient(135deg, #d4a72c, #f5d77a);
  box-shadow: 0 6px 18px -6px rgba(212, 167, 44, .6); }
.spot-leak .spot-tag { background: linear-gradient(135deg, #f59e0b, #fcd34d); }
.spot-deal .spot-tag { background: linear-gradient(135deg, #f97316, #fdba74); }
.spot-text h2 { font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.2; margin: 14px 0 12px; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff 30%, #c9f3ec); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spot-text p { color: rgba(226, 236, 245, .82); font-size: 1rem; margin: 0 0 16px; max-width: 560px; }
.spot-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.spot-chips li { padding: 6px 12px; border-radius: 10px; font-size: .85rem; font-weight: 600; color: #e6fffb;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
.spot-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 18px; font-size: 1.05rem; }
.spot-price b { font-size: 1.6rem; color: #f5d77a; }
.spot-price s { color: rgba(226, 236, 245, .55); }
.spot-price em { font-style: normal; font-weight: 800; color: #1a1406; background: #fdba74; border-radius: 8px; padding: 1px 8px; }
.spot-price small { color: rgba(226, 236, 245, .7); width: 100%; font-size: .82rem; }
.spot-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 700;
  color: #06231f; background: linear-gradient(135deg, #2dd4bf, #5eead4); box-shadow: 0 12px 30px -10px rgba(45, 212, 191, .7);
  transition: transform .2s, box-shadow .2s; }
.spot-cta:hover { color: #06231f; transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(45, 212, 191, .85); }
.spot-cta svg { width: 18px; height: 18px; }
.lang-ar .spot-cta svg { transform: scaleX(-1); }
.spot-media { position: relative; display: flex; justify-content: center; align-items: center; height: 360px; }
.spot-media::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 234, 212, .28), rgba(13, 148, 136, .06) 60%, transparent 70%); }
.spot-media::after { content: ""; position: absolute; bottom: 14px; width: 55%; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); filter: blur(4px); }
.spot-img { position: relative; z-index: 1; max-height: 330px; max-width: 90%; object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .55)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.spot-slide.is-on .spot-img { animation: spotRise .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes spotRise { from { transform: translateY(26px) scale(.96); opacity: .3; } to { transform: none; opacity: 1; } }
.spot-duo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.spot-duo .spot-img { max-height: 290px; max-width: 44%; }
.spot-vs { position: relative; z-index: 2; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font: 800 1.15rem/1 Inter, sans-serif; font-style: normal; color: #1a1406;
  background: linear-gradient(135deg, #d4a72c, #f5d77a); box-shadow: 0 10px 26px -6px rgba(212, 167, 44, .7); }
.spot-cover { position: relative; z-index: 1; max-height: 320px; max-width: 100%; border-radius: 18px; object-fit: cover;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .1); }
.spot-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.spot-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s; }
.spot-arrow:hover { background: rgba(255, 255, 255, .16); }
.spot-dots { display: flex; gap: 8px; }
.spot-dots button { width: 34px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .18);
  cursor: pointer; overflow: hidden; }
.spot-dots button span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d4a72c, #f5d77a); }
.spot-dots button[aria-selected="true"] span { width: 100%; }
.spot.is-playing .spot-dots button[aria-selected="true"] span { width: 0; animation: spotBar var(--spot-ms, 6500ms) linear forwards; }
@keyframes spotBar { to { width: 100%; } }
@media (max-width: 760px) {
  .spot-in { padding: 22px 16px 16px; }
  .spot-track { min-height: 0; }
  .spot-slide { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .spot-media { order: -1; height: 230px; }
  .spot-img { max-height: 215px; }
  .spot-duo .spot-img { max-height: 190px; }
  .spot-cover { max-height: 210px; }
  .spot-text h2 { margin: 10px 0 8px; }
  .spot-chips, .spot-price { justify-content: center; }
  .spot-text p { margin-inline: auto; font-size: .93rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spot-slide, .spot-slide.is-on, .spot-img, .spot-glow { transition: none; animation: none !important; }
}

/* store photos are white squares: frame them as deliberate product tiles */
.spot-img:not(svg) { background: #fff; border-radius: 26px; padding: 14px; width: auto; aspect-ratio: 1; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 7px rgba(255, 255, 255, .06), 0 30px 60px -18px rgba(0, 0, 0, .75),
              0 0 70px -10px rgba(94, 234, 212, .35); filter: none; }
.spot-duo .spot-img:not(svg) { border-radius: 22px; padding: 10px; }
.spot-launch .spot-img:not(svg), .spot-top .spot-img:not(svg) { transform: rotate(-2deg); }
.lang-ar .spot-launch .spot-img:not(svg), .lang-ar .spot-top .spot-img:not(svg) { transform: rotate(2deg); }
.spot-slide.is-on .spot-img { animation-name: spotRise; }
@media (max-width: 760px) {
  .spot-img:not(svg) { padding: 10px; border-radius: 20px; }
  .spot-chips li:nth-child(n+4) { display: none; }
}