/**
 * SKSculpts Premium — Pre-footer Benefits Marquee
 * Covers: .sks-prefooter-strip, .sks-prefooter-viewport,
 *         .sks-prefooter-track, .sks-prefooter-item, .sks-prefooter-icon
 * This section is intentionally branded (warm dark) in BOTH themes.
 * Depends on: tokens.css
 */

/* ============================================================
   STRIP — White theme in Light Mode, Bronze in Dark Mode
   ============================================================ */
.sks-prefooter-strip {
  width: 100%;
  overflow: hidden;
  border-top:    1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  color: #1a0308;
}

html[data-theme="dark"] .sks-prefooter-strip,
body.dark-theme .sks-prefooter-strip {
  border-top:    1px solid rgba(217, 169, 85, 0.30);
  border-bottom: 1px solid rgba(217, 169, 85, 0.30);
  background:
    radial-gradient(circle at 15% 50%, rgba(190, 122, 62, 0.18), transparent 28%),
    linear-gradient(100deg, #20272a 0%, #382820 34%, #4b3126 60%, #242b2e 100%);
  color: #f8f1e7;
}

.sks-prefooter-viewport,
.sks-prefooter-track { background: transparent; }

/* ============================================================
   MARQUEE TRACK
   ============================================================ */
.sks-prefooter-viewport { overflow: hidden; }
.sks-prefooter-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: sksBenefitMarquee 34s linear infinite;
}
.sks-prefooter-strip:hover .sks-prefooter-track { animation-play-state: paused; }
@keyframes sksBenefitMarquee { to { transform: translateX(-50%); } }

/* ============================================================
   INDIVIDUAL ITEM
   ============================================================ */
.sks-prefooter-item {
  flex: 0 0 auto;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px 34px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: #1a0308;
}
html[data-theme="dark"] .sks-prefooter-item,
body.dark-theme .sks-prefooter-item {
  border-right: 1px solid rgba(217, 169, 85, 0.24);
  color: #f8f1e7;
}

.sks-prefooter-item strong,
.sks-prefooter-item small { display: block; }

.sks-prefooter-item strong { color: #1a0308; font-size: 13px; letter-spacing: 0.02em; font-weight: 700; }
.sks-prefooter-item small  { color: #666666; margin-top: 5px; font-size: 11px; }

html[data-theme="dark"] .sks-prefooter-item strong,
body.dark-theme .sks-prefooter-item strong { color: #fff8ee; }
html[data-theme="dark"] .sks-prefooter-item small,
body.dark-theme .sks-prefooter-item small { color: #d8c9b8; }

.sks-prefooter-icon {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  color: #1a0308;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.03);
}

html[data-theme="dark"] .sks-prefooter-icon,
body.dark-theme .sks-prefooter-icon {
  border: 1px solid rgba(217, 169, 85, 0.45);
  color: #e1b461;
  background: transparent;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 700px) {
  .sks-prefooter-item { min-width: 235px; padding: 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sks-prefooter-track { animation: none; }
  .sks-prefooter-viewport { overflow-x: auto; }
}