/**
 * SKSculpts Premium — Offers Carousel + Section Wrapper
 * Covers: .sk-section, .sk-section-head, .sk-offers, .sk-offer-shell,
 *         .sk-offer-viewport, .sk-offer-track, .sk-offer,
 *         .sk-offer-arrow, .sk-offer-progress
 * HTML uses bare .sk-section and .sk-offers (no wrapper scope needed).
 * Depends on: tokens.css
 */

/* ============================================================
   SECTION WRAPPER (used by Trending, Best Sellers, etc.)
   ============================================================ */
.sk-section {
  padding: clamp(16px, 2.2vw, 32px) 0;
}

html[data-theme="dark"] .sk-section {
  background: transparent !important;
}

/* ============================================================
   SECTION HEAD (Heading title with right-aligned View All link)
   ============================================================ */
.sk-section-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: clamp(16px, 2.2vw, 30px);
  width: 100%;
}
.sk-section-head h2 {
  grid-column: 2;
  font-family: var(--sk-font-display);
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--sk-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.sk-section-head h2::after {
  content: "";
  display: inline-block;
  width: clamp(20px, 4vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, var(--sk-gold), transparent);
  opacity: 0.6;
}
.sk-section-head > a,
.sks-view-all {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
  font-family: var(--sk-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-gold2);
  transition: color 0.25s ease, transform 0.25s ease;
}
.sk-section-head > a:hover,
.sks-view-all:hover { color: var(--sk-gold); transform: translateX(2px); }

@media (max-width: 768px) {
  .sk-section-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .sk-section-head h2 { font-size: 1.6rem; }
  .sk-section-head > a,
  .sks-view-all {
    align-self: flex-end;
    margin-top: 2px;
  }
}

/* ============================================================
   OFFERS SECTION
   ============================================================ */
.sk-offers {
  padding: clamp(20px, 3vw, 40px) 0;
  background: var(--sk-bg);
}
.sk-offer-shell   { position: relative; }
.sk-offer-viewport {
  overflow: hidden;
  border: 1px solid var(--sk-border);
  background: var(--sk-card);
}
.sk-offer-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sk-offer-track::-webkit-scrollbar { display: none; }

/* ============================================================
   INDIVIDUAL OFFER CARD
   ============================================================ */
.sk-offer {
  flex: 0 0 33.3333%;
  min-width: 0;
  min-height: 340px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 58px);
  background:
    radial-gradient(circle at 88% 20%, rgba(201, 164, 92, 0.08), transparent 35%),
    linear-gradient(125deg, #ffffff, #f4f5f6);
  border-right: 1px solid var(--sk-border);
  color: var(--sk-text);
}
.sk-offer:last-child { border-right: 0; }
.sk-offer-copy { position: relative; z-index: 3; width: min(100%, 360px); }
.sk-offer small { display: block; color: var(--sk-gold2); font-size: 13px; margin-bottom: 18px; }
.sk-offer h3 {
  font-family: var(--sk-font-display);
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: #a87422;
  margin: 0 0 14px;
}
.sk-offer p { color: var(--sk-muted); font-size: 0.9rem; max-width: 28ch; line-height: 1.6; margin: 0 0 24px; }
.sk-offer .sk-btn { color: var(--sk-text); border-color: var(--sk-gold); background: transparent; }
.sk-offer .sk-btn:hover { background: var(--sk-gold); color: #151515; }
.sk-offer img { position: absolute; z-index: 2; right: -3%; bottom: 0; width: 43%; height: 92%; object-fit: contain; }

/* Dark theme overrides */
html[data-theme="dark"] .sk-offers {
  background: linear-gradient(180deg, #111920, #151b1f) !important;
}
html[data-theme="dark"] .sk-offer-viewport {
  background: #171b1d !important;
  border-color: rgba(202, 170, 109, 0.18) !important;
}
html[data-theme="dark"] .sk-offer {
  background:
    radial-gradient(circle at 86% 22%, rgba(173, 128, 65, 0.12), transparent 35%),
    linear-gradient(125deg, #171b1d 0%, #1d1b17 52%, #242019 100%) !important;
  color: var(--sk-text) !important;
  border-right-color: rgba(202, 170, 109, 0.16) !important;
}
html[data-theme="dark"] .sk-offer:nth-child(2) {
  background: radial-gradient(circle at 82% 20%, rgba(167, 137, 83, 0.10), transparent 36%), linear-gradient(125deg, #151c20, #20201b) !important;
}
html[data-theme="dark"] .sk-offer:nth-child(3) {
  background: radial-gradient(circle at 85% 20%, rgba(98, 111, 120, 0.13), transparent 38%), linear-gradient(125deg, #151b20, #211d18) !important;
}
html[data-theme="dark"] .sk-offer h3    { color: #e2b967 !important; }
html[data-theme="dark"] .sk-offer small { color: #cda85f !important; }
html[data-theme="dark"] .sk-offer p     { color: #c1c6c8 !important; }
html[data-theme="dark"] .sk-offer .sk-btn { background: transparent !important; color: #f5f0e7 !important; border-color: #a98243 !important; }
html[data-theme="dark"] .sk-offer .sk-btn:hover { background: #b99355 !important; color: #101418 !important; }

/* ============================================================
   OFFER ARROWS & PROGRESS
   ============================================================ */
.sk-offer-arrow {
  position: absolute; z-index: 8;
  top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  border: 1px solid var(--sk-border);
  border-radius: 50%;
  background: var(--sk-card);
  color: var(--sk-text);
  box-shadow: var(--sk-shadow);
  cursor: pointer; font-size: 24px;
  display: grid; place-items: center;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sk-offer-arrow:hover { color: var(--sk-gold2); border-color: var(--sk-gold); transform: translateY(-50%) scale(1.05); }
.sk-offer-prev { left: -21px; }
.sk-offer-next { right: -21px; }
.sk-offer-progress { width: 120px; height: 2px; margin: 15px auto 0; background: var(--sk-border); overflow: hidden; }
.sk-offer-progress span { display: block; width: 33.333%; height: 100%; background: var(--sk-gold2); transform: translateX(0); transition: transform 0.35s ease; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sk-offer { flex-basis: 50%; }
  .sk-offer-progress span { width: 50%; }
}
@media (max-width: 700px) {
  .sk-section-head { align-items: center; }
}
@media (max-width: 640px) {
  .sk-offer-viewport { overflow: visible; }
  .sk-offer-track    { gap: 12px; padding-right: 12%; }
  .sk-offer          { flex-basis: 88%; min-height: 285px; padding: 34px 28px; border: 1px solid var(--sk-border); }
  .sk-offer-arrow    { display: none; }
  .sk-offer-progress span { width: 33.333%; }
}