/* ==========================================================================
   shopking-theme.css  v2  —  4700bc.com reference
   Warm cream ground · Black bold type · Yellow accent · Wave dividers
   Loaded after custom.css in master.blade.php.
   FRONTEND ONLY — admin pages are completely unaffected.
   ========================================================================== */

/* ─── Google Fonts ──────────────────────────────────────────────────────────── */
/* Manrope for body; Clash Display (Fontshare) for headlines */

/* ─── §1  COLOUR SYSTEM ─────────────────────────────────────────────────────── */
/* Values below are the real 4700bc.com colour-scheme tokens, read out of their
   published stylesheet. Variable NAMES are kept from v2 so the rest of this
   file keeps working; only the values moved. */
:root {
  /* warm ground ramp — sand */
  --sand-50:    #FFF9EF;
  --sand-100:   #FFF6E0;   /* their default page ground (scheme-1) */
  --sand-200:   #FDEBBE;   /* scheme-6 */
  --sand-300:   #F3D9B5;   /* scheme-10 */
  --sand-400:   #F5CB7C;
  --sand-500:   #F2B65E;   /* scheme-8 */

  /* accents */
  --amber-500:  #FCC000;
  --amber-400:  #FFE11B;   /* scheme-5 */
  --orange-600: #DD7819;   /* scheme-2 */

  /* deep tones */
  --maroon-700: #70012B;
  --maroon-900: #5C0124;   /* scheme-9 */
  --cocoa-800:  #280F11;
  --cocoa-600:  #592C29;   /* body text on warm grounds */
  --ink:        #070707;   /* their foreground everywhere */
  --parchment:  #F9E2AF;   /* foreground on maroon */

  /* ── legacy aliases, re-pointed at the real palette ── */
  --cream:      var(--sand-100);
  --cream-mid:  var(--sand-200);
  --black:      var(--ink);
  --yellow:     var(--amber-500);
  --yellow-mid: var(--amber-400);
  --red:        #CD2525;   /* their nachos flavour tone — used for sale/urgency */
  --red-dark:   #A81D1D;
  --maroon:     var(--maroon-700);
  --white:      #FFFFFF;
  --gray-100:   var(--sand-50);
  --gray-800:   var(--cocoa-800);

  --bg-cream:   var(--sand-100);
  --bg-red:     var(--maroon-700);
  --bg-yellow:  var(--amber-500);
  --bg-black:   var(--ink);
}

/* ─── §1b  SECTION COLOUR SCHEMES ───────────────────────────────────────────── */
/* One scheme per full-bleed band. Nothing inside a band picks its own colours —
   it inherits --scheme-bg / --scheme-fg / --scheme-btn from here. */
[data-scheme] {
  background: var(--scheme-bg);
  color: var(--scheme-fg);
}
[data-scheme="1"],
[data-scheme="cream"] {
  --scheme-bg: var(--sand-100); --scheme-fg: var(--ink);
  --scheme-btn: var(--ink);     --scheme-btn-text: #FFFFFF;
  --scheme-accent: var(--maroon-700);
}
[data-scheme="2"] {
  --scheme-bg: var(--orange-600); --scheme-fg: var(--ink);
  --scheme-btn: #121212;          --scheme-btn-text: #F3F3F3;
  --scheme-accent: var(--sand-100);
}
[data-scheme="3"],
[data-scheme="black"] {
  --scheme-bg: var(--ink);     --scheme-fg: var(--amber-500);
  --scheme-btn: #FFFFFF;       --scheme-btn-text: var(--ink);
  --scheme-accent: var(--amber-500);
}
[data-scheme="4"] {
  --scheme-bg: #000000;        --scheme-fg: #FFFFFF;
  --scheme-btn: #FFFFFF;       --scheme-btn-text: #121212;
  --scheme-accent: var(--amber-500);
}
[data-scheme="5"],
[data-scheme="yellow"] {
  --scheme-bg: var(--amber-400); --scheme-fg: var(--cocoa-600);
  --scheme-btn: var(--cocoa-600); --scheme-btn-text: #FFFFFF;
  --scheme-accent: var(--cocoa-600);
}
[data-scheme="6"] {
  --scheme-bg: var(--sand-200); --scheme-fg: var(--ink);
  --scheme-btn: var(--ink);     --scheme-btn-text: #FFFFFF;
  --scheme-accent: var(--maroon-700);
}
[data-scheme="8"],
[data-scheme="sand"] {
  --scheme-bg: var(--sand-500); --scheme-fg: var(--cocoa-600);
  --scheme-btn: var(--sand-100); --scheme-btn-text: var(--ink);
  --scheme-accent: var(--maroon-700);
}
[data-scheme="9"],
[data-scheme="maroon"],
[data-scheme="red"] {
  --scheme-bg: var(--maroon-900); --scheme-fg: #FFFFFF;
  --scheme-btn: var(--sand-100);  --scheme-btn-text: var(--ink);
  --scheme-accent: var(--amber-500);
}
[data-scheme="10"] {
  --scheme-bg: var(--sand-300); --scheme-fg: var(--cocoa-600);
  --scheme-btn: var(--ink);     --scheme-btn-text: #FFFFFF;
  --scheme-accent: var(--maroon-700);
}
[data-scheme="amber"] {
  --scheme-bg: var(--amber-500); --scheme-fg: var(--ink);
  --scheme-btn: #FFFFFF;         --scheme-btn-text: var(--ink);
  --scheme-accent: var(--maroon-700);
}

/* ─── §2  TYPOGRAPHY ────────────────────────────────────────────────────────── */
:root {
  /* 4700BC pairs Formula Condensed 800 (licensed) with Manrope.
     Anton is the closest openly-licensed heavy condensed display; Manrope is
     the real body face and is free on Google Fonts. */
  --ff-display: 'Anton', 'Formula Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --ff-body:    'Manrope', 'Inter', system-ui, sans-serif;

  /* fluid sizes — their display type runs very large and very tight */
  --fs-hero:    clamp(56px, 9vw, 150px);
  --fs-section: clamp(40px, 6.5vw, 112px);
  --fs-ticker:  clamp(20px, 3vw, 42px);
  --fs-card:    clamp(18px, 2vw,   26px);
  --fs-lead:    clamp(15px, 1.6vw, 18px);
  --fs-body:    16px;
  --fs-btn:     13px;
  --fs-nav:     13px;
  --fs-micro:   12px;
}

/* ─── §3  LAYOUT ────────────────────────────────────────────────────────────── */
:root {
  --container:    1280px;
  --gutter:       clamp(20px, 5vw, 80px);
  --sec-y:        clamp(60px, 8vw, 120px);
  --grid-gap:     24px;
  --r-card:       24px;
  --r-pill:       100px;
  --r-promo:      32px;
}

/* ─── §4  MOTION ────────────────────────────────────────────────────────────── */
:root {
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --t-fast:   .2s;
  --t-base:   .35s;
  --t-slow:   .65s;
}

/* ─── §5  GLOBAL BASE ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  font-family: var(--ff-body);
  color: var(--black);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Smooth font rendering */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* focus ring */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── §6  REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .sk-reveal, .sk-reveal-up, .sk-reveal-scale { opacity: 1 !important; transform: none !important; }
  .sk-cursor { display: none !important; }
  body, a, button { cursor: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLL PROGRESS
══════════════════════════════════════════════════════════════════════════════ */
#sk-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--yellow);
  z-index: 99999;
  pointer-events: none;
  will-change: width;
  transition: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════════════════════════════════ */
#sk-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity .5s var(--e-out), visibility .5s;
}
#sk-preloader.exit { opacity: 0; visibility: hidden; pointer-events: none; }

#sk-preloader .sk-pre-logo {
  width: 96px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  animation: preloaderFloat 1.2s ease-in-out infinite alternate;
}
#sk-preloader .sk-pre-bar-wrap {
  width: 240px;
  height: 4px;
  background: rgba(255,255,255,.14);
  border-radius: 4px;
  overflow: hidden;
}
#sk-preloader .sk-pre-bar {
  height: 100%;
  width: 0;
  background: var(--yellow);
  border-radius: 4px;
  animation: preloaderBar 1.8s var(--e-out) forwards;
}

@keyframes preloaderFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
@keyframes preloaderPulse {
  from { opacity: .5; }
  to   { opacity: 1; }
}
@keyframes preloaderBar {
  from { width: 0; }
  to   { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CUSTOM CURSOR — monogram, desktop+fine-pointer only
══════════════════════════════════════════════════════════════════════════════ */
.sk-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 9999999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s, transform .25s var(--e-spring);
}
.sk-cursor.active   { opacity: 1; }
.sk-cursor.hovering { transform: translate(-50%, -50%) scale(1.6) rotate(12deg); }
.sk-cursor img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.3));
  transition: filter var(--t-base) ease;
}
/* Colour adapts to the section beneath the pointer (spec §5) */
.sk-cursor.on-dark   img { filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.sk-cursor.on-yellow img { filter: brightness(0) drop-shadow(0 3px 10px rgba(0,0,0,.2)); }
.sk-cursor.on-cream  img { filter: brightness(0) drop-shadow(0 3px 10px rgba(0,0,0,.2)); }
.sk-cursor.on-red    img { filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(0,0,0,.35)); }

@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .sk-cursor { display: none !important; }
  body, a, button { cursor: auto !important; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  body, a, button, .sk-product-card, .sk-cat-pill { cursor: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR  —  yellow bg, bold black uppercase text
══════════════════════════════════════════════════════════════════════════════ */
.sk-announce {
  background: var(--yellow);
  overflow: hidden;
  white-space: nowrap;
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 400;
}
.sk-announce-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sk-announce-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: announceScroll 24s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.sk-announce:hover .sk-announce-track { animation-play-state: paused; }
.sk-announce-item {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  padding: 0 32px;
  white-space: nowrap;
}
.sk-announce-sep {
  color: var(--black);
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  opacity: .4;
}
@keyframes announceScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAVIGATION  —  black bg, yellow logo highlight, pill action buttons
══════════════════════════════════════════════════════════════════════════════ */
.sk-nav {
  background: var(--black);
  position: sticky;
  top: 0;
  z-index: 300;
  transition: box-shadow .3s var(--e-out);
}
.sk-nav.has-shadow { box-shadow: 0 4px 24px rgba(0,0,0,.4); }

.sk-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Split navigation — gifting | LOGO | snacking */
.sk-nav-split {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.sk-nav-split-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: var(--fs-nav);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-nav-split-btn.gifting {
  background: var(--cream);
  color: var(--black);
}
.sk-nav-split-btn.gifting:hover {
  background: var(--yellow);
  color: var(--black);
  transform: scale(1.04);
}
.sk-nav-split-btn.snacking {
  background: var(--yellow);
  color: var(--black);
}
.sk-nav-split-btn.snacking:hover {
  background: var(--cream);
  color: var(--black);
  transform: scale(1.04);
}

/* Logo center */
.sk-nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sk-nav-logo img {
  height: 48px;
  width: auto;
}
.sk-nav-logo-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--black);
  border: 3px solid var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-nav-logo-circle:hover { border-color: var(--cream); transform: scale(1.08); }
.sk-nav-logo-circle img { width: 46px; height: 46px; object-fit: contain; }

/* Right side — links + icons */
.sk-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
.sk-nav-link {
  font-family: var(--ff-display);
  font-size: var(--fs-nav);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--yellow);
  padding: 8px 12px;
  border-radius: 8px;
  transition: color var(--t-fast), background var(--t-fast);
}
.sk-nav-link:hover { color: var(--cream); background: rgba(255,255,255,.08); }

.sk-nav-icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--yellow);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-spring);
  position: relative;
}
.sk-nav-icon-btn:hover { background: rgba(255,255,255,.18); transform: scale(1.1); }
.sk-nav-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--black);
}

/* Hamburger for mobile */
.sk-nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
}
.sk-nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--yellow);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}

@media (max-width: 768px) {
  .sk-nav-right .sk-nav-link { display: none; }
  .sk-nav-hamburger { display: flex; }
  .sk-nav-split-btn { padding: 8px 16px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY
══════════════════════════════════════════════════════════════════════════════ */
.sk-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--e-out);
}
.sk-mobile-nav.open { opacity: 1; pointer-events: auto; }
.sk-mobile-nav a {
  font-family: var(--ff-display);
  font-size: clamp(32px, 8vw, 56px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cream);
  transition: color var(--t-fast);
}
.sk-mobile-nav a:hover { color: var(--yellow); }
.sk-mobile-nav-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 32px;
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-mobile-nav-close:hover { color: var(--yellow); transform: rotate(90deg); }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO BANNER  —  full-bleed image slideshow
══════════════════════════════════════════════════════════════════════════════ */
.sk-banner {
  position: relative;
  /* Fills the viewport under the header, but capped so short landscape
     laptops don't get a hero taller than the screen. */
  height: clamp(460px, calc(100vh - 108px), 820px);
  min-height: 0;
  overflow: hidden;
  background: var(--sand-200);
}
.sk-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--e-out), visibility .9s;
}
.sk-banner-slide.active { opacity: 1; visibility: visible; }

.sk-banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 7s linear;
}
.sk-banner-slide.active .sk-banner-media { transform: scale(1); }

/* Legibility wash under the copy — bottom-weighted so the artwork stays clear */
.sk-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(7,7,7,.74) 0%,
    rgba(7,7,7,.42) 32%,
    rgba(7,7,7,.06) 62%,
    transparent 100%
  );
}

.sk-banner-content {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  inset-inline: 0;
  padding: 0 var(--gutter) clamp(44px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.sk-banner-eyebrow {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--amber-500);
}
.sk-banner-title {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  font-weight: 400;          /* Anton ships one weight and is already heavy */
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: .01em;
  color: #FFFFFF;
  max-width: 15ch;
  text-wrap: balance;
}

/* Dots */
.sk-banner-dots {
  position: absolute;
  bottom: clamp(18px, 3vw, 34px);
  inset-inline-end: var(--gutter);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.sk-banner-dot {
  width: 34px; height: 4px;
  border: none;
  border-radius: 4px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
  transition: background var(--t-base), width var(--t-base);
}
.sk-banner-dot.active { background: var(--amber-500); width: 56px; }

@media (max-width: 750px) {
  .sk-banner { height: clamp(420px, 74vh, 620px); }
  .sk-banner-content { align-items: center; text-align: center; }
  .sk-banner-title { max-width: 100%; }
  .sk-banner-dots { inset-inline-end: 0; inset-inline-start: 0; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   WAVE SVG DIVIDERS  —  organic curve between sections
══════════════════════════════════════════════════════════════════════════════ */
.sk-wave {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  /* margin-bottom: -2px compensates sub-pixel rendering */
  margin-bottom: -2px;
}
.sk-wave svg { display: block; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════════
   CAUTION TAPE TICKER  —  yellow bg, bold black uppercase text, slightly tilted
══════════════════════════════════════════════════════════════════════════════ */
.sk-tape {
  background: var(--yellow);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  /* Optional: slight rotation like 4700bc uses */
  position: relative;
  z-index: 2;
}
.sk-tape-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: tapeScroll 14s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.sk-tape:hover .sk-tape-track { animation-play-state: paused; }
.sk-tape-item {
  font-family: var(--ff-display);
  font-size: var(--fs-ticker);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--black);
  padding: 0 48px;
  white-space: nowrap;
}
.sk-tape-sep {
  font-size: 24px;
  color: var(--black);
  opacity: .35;
  flex-shrink: 0;
}
@keyframes tapeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION TITLES
══════════════════════════════════════════════════════════════════════════════ */
.sk-section-eyebrow {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: rgba(26,26,26,.45);
  margin-bottom: 12px;
}
.sk-section-title {
  font-family: var(--ff-display);
  font-size: var(--fs-section);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .02em;
  color: var(--black);
}
.sk-section-title.on-dark { color: var(--cream); }
.sk-section-title.on-yellow { color: var(--black); }

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════════════ */
.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: 2.5px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast) var(--e-spring),
    box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}
.sk-btn:hover { transform: scale(1.04); }
.sk-btn:active { transform: scale(.98); }

/* Black filled — primary (dark sections) */
.sk-btn-primary {
  background: var(--black);
  color: var(--cream);
  border-color: var(--black);
}
.sk-btn-primary:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
  box-shadow: 0 8px 24px rgba(245,197,24,.35);
}

/* White outlined — ghost (dark sections) */
.sk-btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(255,255,255,.5);
}
.sk-btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--cream);
}

/* Cream filled — on yellow/cream sections */
.sk-btn-cream {
  background: var(--cream);
  color: var(--black);
  border-color: var(--black);
}
.sk-btn-cream:hover {
  background: var(--black);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* Arrow spin on hover */
.sk-btn-arrow .arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--e-spring);
}
.sk-btn-arrow:hover .arrow { transform: translateX(5px); }

/* ══════════════════════════════════════════════════════════════════════════════
   PRODUCT CARDS  —  floating cut-out style on cream bg (no borders)
══════════════════════════════════════════════════════════════════════════════ */
.sk-products-section {
  background: var(--cream);
  padding: var(--sec-y) 0;
  overflow: hidden;
}
.sk-products-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sk-products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 48px;
}
.sk-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  /* Products on 4700bc have no card box, just floating images */
}
/* The horizontal drag rail for products */
.sk-products-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.sk-products-rail::-webkit-scrollbar { display: none; }
.sk-products-rail.is-dragging { cursor: grabbing; }

.sk-product-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 32px;
  border-radius: var(--r-card);
  cursor: pointer;
  transition:
    transform var(--t-base) var(--e-spring),
    background var(--t-fast);
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 240px;
  position: relative;
}
.sk-product-card:hover { background: rgba(0,0,0,.03); transform: translateY(-8px); }

/* Pack count badge */
.sk-product-card-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--black);
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sk-product-card-badge .pack-num {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* Pack image */
.sk-product-card-img-wrap {
  width: 180px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
}
.sk-product-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.15));
  transition: transform var(--t-base) var(--e-spring);
}
.sk-product-card:hover .sk-product-card-img { transform: scale(1.08) translateY(-8px); }

/* Sale badge */
.sk-product-sale-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 40px;
}

/* Name + price */
.sk-product-card-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--black);
  margin-bottom: 8px;
  line-height: 1.2;
}
.sk-product-card-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.sk-product-card-price {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}
.sk-product-card-compare {
  font-size: 13px;
  color: var(--red);
  text-decoration: line-through;
}
.sk-product-card-cta {
  padding: 10px 24px;
  font-size: 11px;
}

/* Wishlist icon */
.sk-product-card-wish {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--black);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  z-index: 2;
}
.sk-product-card-wish:hover,
.sk-product-card-wish.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════════════
   RED PRODUCT RANGE SECTION  —  matching 4700bc's red circular product display
══════════════════════════════════════════════════════════════════════════════ */
.sk-range-section {
  background: var(--red);
  position: relative;
  padding: var(--sec-y) var(--gutter);
  overflow: hidden;
}
.sk-range-section::before {
  /* bottom cream wave built-in */
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 120px;
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 120px 120px 0 0;
}
.sk-range-title {
  font-family: var(--ff-display);
  font-size: var(--fs-section);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  margin-bottom: 48px;
}
.sk-range-carousel {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.sk-range-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}
/* Glowing circle bg behind each product */
.sk-range-circle {
  width: clamp(200px, 28vw, 340px);
  height: clamp(200px, 28vw, 340px);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--t-base);
}
.sk-range-circle::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  transition: opacity var(--t-base);
}
.sk-range-item:hover .sk-range-circle { background: rgba(255,255,255,.2); }
.sk-range-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.3));
  transition: transform var(--t-base) var(--e-spring);
}
.sk-range-item:hover .sk-range-img { transform: scale(1.1) translateY(-12px); }
.sk-range-label {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 20px;
  letter-spacing: .06em;
}
/* Flavour dots below label */
.sk-range-dots {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.sk-range-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--white);
  transition: transform var(--t-fast) var(--e-spring);
}
.sk-range-dot:hover { transform: scale(1.15); }
.sk-range-dot img { width: 100%; height: 100%; object-fit: cover; }

/* Carousel arrows */
.sk-range-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: none;
  color: var(--white);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-spring);
  z-index: 2;
}
.sk-range-arrow:hover { background: rgba(255,255,255,.35); transform: translateY(-50%) scale(1.1); }
.sk-range-arrow.prev { left: var(--gutter); }
.sk-range-arrow.next { right: var(--gutter); }

/* ══════════════════════════════════════════════════════════════════════════════
   CATEGORY PILLS  —  horizontal scrollable row of pills
══════════════════════════════════════════════════════════════════════════════ */
.sk-cats-section {
  background: var(--cream);
  padding: var(--sec-y) 0;
}
.sk-cats-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sk-cats-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.sk-cats-row::-webkit-scrollbar { display: none; }
.sk-cat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--white);
  border-radius: 20px;
  border: 1.5px solid rgba(0,0,0,.1);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 120px;
  text-align: center;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast) var(--e-spring),
    box-shadow var(--t-fast);
  scroll-snap-align: start;
}
.sk-cat-pill:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(245,197,24,.3);
}
.sk-cat-pill-img {
  width: 64px; height: 64px;
  object-fit: contain;
  transition: transform var(--t-base) var(--e-spring);
}
.sk-cat-pill:hover .sk-cat-pill-img { transform: scale(1.1) rotate(-5deg); }
.sk-cat-pill-name {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--black);
}
.sk-cat-pill-count {
  font-family: var(--ff-body);
  font-size: 10px;
  color: rgba(26,26,26,.45);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROMO BANNER CARDS  —  maroon + yellow pair (like 4700bc's "hidden secret")
══════════════════════════════════════════════════════════════════════════════ */
.sk-promos-section {
  background: var(--cream);
  padding: 0 var(--gutter) var(--sec-y);
}
.sk-promos-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.sk-promos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 680px) {
  .sk-promos-grid { grid-template-columns: 1fr; }
}
.sk-promo-card {
  border-radius: var(--r-promo);
  overflow: hidden;
  position: relative;
  padding: 48px 40px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-base) var(--e-spring), box-shadow var(--t-base);
}
.sk-promo-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,.18); }
.sk-promo-card.maroon { background: var(--maroon); }
.sk-promo-card.yellow { background: var(--yellow); }
.sk-promo-card-title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  color: var(--white);
  margin-bottom: 20px;
}
.sk-promo-card.yellow .sk-promo-card-title { color: var(--black); }
.sk-promo-card-img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 85%;
  object-fit: contain;
  opacity: .9;
}
.sk-promo-card-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--white);
  transition: background var(--t-fast), transform var(--t-fast) var(--e-spring);
  width: fit-content;
  padding: 12px;
}
.sk-promo-card.yellow .sk-promo-card-arrow { background: rgba(0,0,0,.12); color: var(--black); }
.sk-promo-card:hover .sk-promo-card-arrow { background: rgba(255,255,255,.35); transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════════
   STATS SECTION  —  cream bg, large numbers
══════════════════════════════════════════════════════════════════════════════ */
.sk-stats-section {
  background: var(--black);
  padding: var(--sec-y) var(--gutter);
  position: relative;
}
.sk-stats-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 768px) {
  .sk-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
  .sk-stats-inner { grid-template-columns: 1fr; }
}
.sk-stat {
  text-align: center;
  padding: 24px;
}
.sk-stat-number {
  font-family: var(--ff-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: .92;
  display: block;
  margin-bottom: 12px;
}
.sk-stat-label {
  font-family: var(--ff-body);
  font-size: 14px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TESTIMONIALS  —  cream bg, white card, yellow stars, person cutout
══════════════════════════════════════════════════════════════════════════════ */
.sk-reviews-section {
  background: var(--cream);
  padding: var(--sec-y) 0;
  position: relative;
  overflow: hidden;
}
.sk-reviews-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) {
  .sk-reviews-inner { grid-template-columns: 1fr; }
  .sk-reviews-person { display: none; }
}
.sk-reviews-left {}
.sk-review-card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: 32px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  transition: transform var(--t-base) var(--e-spring), box-shadow var(--t-base);
}
.sk-review-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.sk-review-author {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}
.sk-review-stars {
  color: var(--yellow);
  font-size: 18px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.sk-review-text {
  font-family: var(--ff-body);
  font-size: 15px;
  color: rgba(26,26,26,.7);
  line-height: 1.65;
}
.sk-review-text::before {
  content: '"';
  font-size: 48px;
  line-height: 0;
  vertical-align: -18px;
  color: var(--yellow);
  font-family: Georgia, serif;
  margin-right: 4px;
}
/* Person cutout (right side) */
.sk-reviews-person {
  position: relative;
}
.sk-reviews-person-img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(4px 0 0 var(--yellow)) drop-shadow(-4px 0 0 var(--yellow));
}

/* ══════════════════════════════════════════════════════════════════════════════
   CTA BAND  —  yellow section, big text
══════════════════════════════════════════════════════════════════════════════ */
.sk-cta-section {
  background: var(--yellow);
  padding: var(--sec-y) var(--gutter);
  text-align: center;
}
.sk-cta-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.sk-cta-title {
  font-family: var(--ff-display);
  font-size: clamp(36px, 7vw, 96px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  color: var(--black);
  margin-bottom: 40px;
}
.sk-cta-subtitle {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  color: rgba(26,26,26,.65);
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER  —  black outer, dark gray rounded card inside
══════════════════════════════════════════════════════════════════════════════ */
.sk-footer {
  background: var(--black);
  padding: 24px var(--gutter) 24px;
}
.sk-footer-card {
  max-width: var(--container);
  margin: 0 auto;
  background: #2B2B2B;
  border-radius: 28px;
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .sk-footer-card { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .sk-footer-card { grid-template-columns: 1fr; gap: 28px; }
}
.sk-footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.sk-footer-brand-logo img { height: 44px; width: auto; }
.sk-footer-brand-name {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: .04em;
}
.sk-footer-tagline {
  font-family: var(--ff-body);
  font-size: 15px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin-bottom: 24px;
  font-style: italic;
  max-width: 280px;
}
/* Newsletter */
.sk-footer-newsletter {
  display: flex;
  height: 48px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.12);
  max-width: 320px;
}
.sk-footer-newsletter input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 18px;
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--cream);
}
.sk-footer-newsletter input::placeholder { color: rgba(255,255,255,.3); }
.sk-footer-newsletter button {
  flex-shrink: 0;
  padding: 0 20px;
  background: var(--cream);
  color: var(--black);
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border: none;
  cursor: pointer;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  transition: background var(--t-fast);
}
.sk-footer-newsletter button:hover { background: var(--yellow); }

/* Footer columns */
.sk-footer-col-title {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.35);
  margin-bottom: 20px;
}
.sk-footer-link {
  display: block;
  font-family: var(--ff-body);
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-bottom: 12px;
  transition: color var(--t-fast);
  width: fit-content;
}
.sk-footer-link:hover { color: var(--yellow); }

/* Contact items */
.sk-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.sk-footer-contact-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--yellow);
}
.sk-footer-contact-text {
  font-family: var(--ff-body);
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}

/* Social row */
.sk-footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.sk-footer-social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sk-footer-social-btn:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}

/* Footer bottom */
.sk-footer-bottom {
  max-width: var(--container);
  margin: 16px auto 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-body);
  font-size: 11px;
  color: rgba(255,255,255,.25);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM
══════════════════════════════════════════════════════════════════════════════ */
.sk-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}
.sk-reveal-up {
  opacity: 0;
  transform: translateY(60px) scale(.97);
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}
.sk-reveal-scale {
  opacity: 0;
  transform: scale(.88);
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-spring);
}
.sk-reveal.visible,
.sk-reveal-up.visible,
.sk-reveal-scale.visible {
  opacity: 1;
  transform: none;
}
/* Stagger via CSS custom property */
.sk-reveal[style*="--i"],
.sk-reveal-up[style*="--i"],
.sk-reveal-scale[style*="--i"] {
  transition-delay: min(calc(var(--i, 0) * 90ms), 450ms);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════════════════════════════════════════════ */
.sk-max-w {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.sk-section-pad { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }

/* ══════════════════════════════════════════════════════════════════════════════
   FLASH SALE / MOST POPULAR  —  generic product section on cream
══════════════════════════════════════════════════════════════════════════════ */
.sk-generic-section {
  background: var(--cream);
  padding: var(--sec-y) 0;
}
.sk-generic-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sk-generic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION COLOUR WRAPPERS  (for data-scheme / wave dividers)
══════════════════════════════════════════════════════════════════════════════ */
[data-scheme="black"]  { background: var(--black);  }
[data-scheme="cream"]  { background: var(--cream);  }
[data-scheme="yellow"] { background: var(--yellow); }
[data-scheme="red"]    { background: var(--red);    }

/* ══════════════════════════════════════════════════════════════════════════════
   ▓▓ PART 2 — INNER PAGES ▓▓
   Everything below extends the home-page system to the rest of the storefront:
   catalog, PDP, cart, checkout, auth, account. Same tokens, same rhythm.
══════════════════════════════════════════════════════════════════════════════ */

/* ─── Shared page shell ─────────────────────────────────────────────────────── */
.sk-page {
  background: var(--cream);
  min-height: 60vh;
  padding-bottom: var(--sec-y);
}
.sk-page-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Black masthead band that opens every inner page */
.sk-page-head {
  background: var(--black);
  padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(48px, 7vw, 88px);
  position: relative;
  overflow: hidden;
}
.sk-page-head::after {
  /* soft yellow bloom, echoes the hero glow */
  content: '';
  position: absolute;
  top: 50%; right: -120px;
  width: 420px; height: 420px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,24,.16) 0%, transparent 70%);
  pointer-events: none;
}
.sk-page-head-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.sk-page-eyebrow {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--yellow);
  margin-bottom: 14px;
}
.sk-page-title {
  font-family: var(--ff-display);
  font-size: clamp(34px, 5.5vw, 76px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .01em;
  color: var(--cream);
}
.sk-page-sub {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.55);
  margin-top: 16px;
  max-width: 560px;
  line-height: 1.7;
}
/* Pull the first content block up over the band edge */
.sk-page-lift {
  margin-top: -32px;
  position: relative;
  z-index: 2;
}

/* ─── Breadcrumbs ───────────────────────────────────────────────────────────── */
.sk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sk-crumbs a { color: rgba(255,255,255,.5); transition: color var(--t-fast); }
.sk-crumbs a:hover { color: var(--yellow); }
.sk-crumbs .sep { color: rgba(255,255,255,.25); }
.sk-crumbs .current { color: var(--cream); }
/* Light variant, for crumbs sitting on cream */
.sk-crumbs.on-cream a { color: rgba(26,26,26,.45); }
.sk-crumbs.on-cream a:hover { color: var(--red); }
.sk-crumbs.on-cream .sep { color: rgba(26,26,26,.25); }
.sk-crumbs.on-cream .current { color: var(--black); }

/* ─── Generic surface card ──────────────────────────────────────────────────── */
.sk-card {
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.09);
  border-radius: var(--r-card);
  box-shadow: 0 4px 24px rgba(26,26,26,.04);
}
.sk-card-pad { padding: clamp(20px, 3vw, 32px); }
.sk-card-title {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--black);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sk-card-title::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--yellow);
  border-radius: 4px;
  flex-shrink: 0;
}

/* ─── Forms ─────────────────────────────────────────────────────────────────── */
.sk-field { margin-bottom: 18px; }
.sk-label {
  display: block;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(26,26,26,.55);
  margin-bottom: 8px;
}
.sk-label .req { color: var(--red); }
.sk-input,
.sk-select,
.sk-textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--black);
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.14);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
}
.sk-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.sk-input::placeholder, .sk-textarea::placeholder { color: rgba(26,26,26,.32); }
.sk-input:focus, .sk-select:focus, .sk-textarea:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 4px rgba(245,197,24,.28);
}
.sk-input.has-error, .sk-select.has-error, .sk-textarea.has-error {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(200,57,43,.12);
}
.sk-error {
  display: block;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-top: 6px;
}
.sk-input-group { position: relative; }
.sk-input-group .sk-input { padding-right: 46px; }
.sk-input-icon {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(26,26,26,.4);
  font-size: 16px;
  cursor: pointer;
  transition: color var(--t-fast);
}
.sk-input-icon:hover { color: var(--black); }

/* Checkbox + radio — squared-off, brand yellow */
.sk-check, .sk-radio {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 2px solid rgba(26,26,26,.25);
  background: var(--white);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.sk-check { border-radius: 6px; }
.sk-radio { border-radius: 50%; }
.sk-check:hover, .sk-radio:hover { border-color: var(--black); }
.sk-check:checked, .sk-radio:checked {
  background: var(--black);
  border-color: var(--black);
}
.sk-check:checked::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--yellow);
  border-bottom: 2.5px solid var(--yellow);
  transform: rotate(-45deg) translate(1px, -1px);
}
.sk-radio:checked::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.sk-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(26,26,26,.75);
  transition: color var(--t-fast);
}
.sk-opt:hover { color: var(--black); }

/* ─── Buttons: extra variants ───────────────────────────────────────────────── */
.sk-btn-yellow {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--black);
}
.sk-btn-yellow:hover {
  background: var(--black);
  color: var(--yellow);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.sk-btn-outline {
  background: transparent;
  color: var(--black);
  border-color: rgba(26,26,26,.28);
}
.sk-btn-outline:hover {
  background: var(--black);
  color: var(--cream);
  border-color: var(--black);
}
.sk-btn-danger {
  background: transparent;
  color: var(--red);
  border-color: rgba(200,57,43,.35);
}
.sk-btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.sk-btn-block { width: 100%; }
.sk-btn-sm { padding: 10px 20px; font-size: 11px; }
.sk-btn-lg { padding: 17px 40px; font-size: 14px; }
.sk-btn:disabled,
.sk-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── Status badges ─────────────────────────────────────────────────────────── */
.sk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
.sk-badge-neutral { background: rgba(26,26,26,.07); color: rgba(26,26,26,.65); }
.sk-badge-warn    { background: rgba(245,197,24,.22); color: #8A6D00; }
.sk-badge-ok      { background: rgba(26,150,90,.14);  color: #10804C; }
.sk-badge-danger  { background: rgba(200,57,43,.12);  color: var(--red); }
.sk-badge-info    { background: rgba(40,59,142,.12);  color: #283B8E; }

/* ─── Empty state ───────────────────────────────────────────────────────────── */
.sk-empty {
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 24px;
  max-width: 460px;
  margin: 0 auto;
}
.sk-empty-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 20px;
  display: block;
  opacity: .8;
}
.sk-empty-title {
  font-family: var(--ff-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--black);
  margin-bottom: 10px;
}
.sk-empty-text {
  font-family: var(--ff-body);
  font-size: 15px;
  color: rgba(26,26,26,.5);
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ─── Product grid (catalog pages) ──────────────────────────────────────────── */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
@media (max-width: 640px) {
  .sk-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

/* ─── Catalog layout: sidebar + results ─────────────────────────────────────── */
.sk-shop {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 900px) {
  .sk-shop { grid-template-columns: 1fr; }
}

.sk-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.sk-shop-count {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26,26,26,.5);
}
.sk-shop-count b { color: var(--black); }

/* Sidebar */
.sk-shop-sidebar {
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.09);
  border-radius: var(--r-card);
  padding: 8px 22px;
  box-shadow: 0 4px 24px rgba(26,26,26,.04);
  position: sticky;
  top: 84px;
}
.sk-filter-group { border-bottom: 1.5px solid rgba(26,26,26,.07); }
.sk-filter-group:last-child { border-bottom: none; }
.sk-filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--black);
  transition: color var(--t-fast);
}
.sk-filter-btn:hover { color: var(--red); }
.sk-filter-btn i { font-size: 13px; transition: transform var(--t-base) var(--e-out); }
.sk-filter-btn.collapsed i { transform: rotate(180deg); }
.sk-filter-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 22px;
  max-height: 320px;
  overflow-y: auto;
}
.sk-filter-body::-webkit-scrollbar { width: 4px; }
.sk-filter-body::-webkit-scrollbar-thumb { background: rgba(26,26,26,.15); border-radius: 4px; }

/* Mobile filter drawer */
.sk-filter-toggle { display: none; }
@media (max-width: 900px) {
  .sk-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .sk-shop-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 320px);
    z-index: 9997;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--e-out);
    box-shadow: 20px 0 60px rgba(0,0,0,.2);
  }
  .sk-shop-sidebar.open { transform: none; }
  .sk-filter-scrim {
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
  }
  .sk-filter-scrim.open { opacity: 1; pointer-events: auto; }
}
.sk-filter-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  border-bottom: 1.5px solid rgba(26,26,26,.07);
}
@media (max-width: 900px) { .sk-filter-head { display: flex; } }

/* ─── Pagination ────────────────────────────────────────────────────────────── */
.sk-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
}
.sk-pagination .page-item { list-style: none; }
.sk-pagination .page-link,
.sk-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.12);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-pagination .page-link:hover,
.sk-page-btn:hover {
  background: var(--yellow);
  border-color: var(--black);
  transform: translateY(-2px);
}
.sk-pagination .active .page-link,
.sk-page-btn.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--yellow);
}
.sk-pagination .disabled .page-link,
.sk-page-btn:disabled { opacity: .4; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
══════════════════════════════════════════════════════════════════════════════ */
.sk-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .sk-pdp { grid-template-columns: 1fr; } }

/* Gallery */
.sk-pdp-gallery { position: sticky; top: 88px; }
@media (max-width: 900px) { .sk-pdp-gallery { position: static; } }
.sk-pdp-stage {
  position: relative;
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.09);
  border-radius: var(--r-card);
  padding: clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.sk-pdp-stage::before {
  /* warm glow behind the pack, same language as the hero */
  content: '';
  position: absolute;
  width: 72%; height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,24,.34) 0%, rgba(245,197,24,.06) 60%, transparent 78%);
}
.sk-pdp-stage img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.16));
}
.sk-pdp-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.sk-pdp-thumbs::-webkit-scrollbar { display: none; }
.sk-pdp-thumb {
  flex-shrink: 0;
  width: 74px; height: 74px;
  border-radius: 16px;
  background: var(--white);
  border: 2px solid rgba(26,26,26,.1);
  padding: 8px;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-pdp-thumb:hover { transform: translateY(-3px); }
.sk-pdp-thumb.active { border-color: var(--black); }
.sk-pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Info column */
.sk-pdp-brand {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: rgba(26,26,26,.45);
  margin-bottom: 12px;
}
.sk-pdp-title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  color: var(--black);
  margin-bottom: 16px;
}
.sk-pdp-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--ff-body);
  font-size: 13px;
  color: rgba(26,26,26,.5);
}
.sk-pdp-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.sk-pdp-price {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--black);
  letter-spacing: .01em;
}
.sk-pdp-compare {
  font-family: var(--ff-body);
  font-size: 18px;
  font-weight: 500;
  color: rgba(26,26,26,.35);
  text-decoration: line-through;
}
.sk-pdp-save {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  background: var(--red);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.sk-pdp-desc {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(26,26,26,.62);
  margin-bottom: 26px;
}
.sk-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 20px 0;
  margin-bottom: 24px;
  border-top: 1.5px solid rgba(26,26,26,.08);
  border-bottom: 1.5px solid rgba(26,26,26,.08);
}
.sk-pdp-meta-item {
  font-family: var(--ff-body);
  font-size: 13px;
  color: rgba(26,26,26,.5);
}
.sk-pdp-meta-item b {
  display: block;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(26,26,26,.38);
  margin-bottom: 4px;
}

/* Variation chips */
.sk-pdp-attr { margin-bottom: 22px; }
.sk-pdp-attr-name {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(26,26,26,.5);
  margin-bottom: 12px;
}
.sk-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-chip {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(26,26,26,.14);
  background: var(--white);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-chip:hover { border-color: var(--black); transform: translateY(-2px); }
.sk-chip.active { background: var(--black); border-color: var(--black); color: var(--yellow); }
.sk-chip:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* Quantity stepper */
.sk-qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--black);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--white);
  height: 52px;
}
.sk-qty-btn {
  width: 46px;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  display: grid;
  place-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.sk-qty-btn:hover { background: var(--yellow); }
.sk-qty-btn:disabled { opacity: .3; cursor: not-allowed; background: none; }
.sk-qty-val {
  width: 52px;
  text-align: center;
  border: none;
  outline: none;
  background: none;
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  -moz-appearance: textfield;
}
.sk-qty-val::-webkit-outer-spin-button,
.sk-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk-qty.sm { height: 40px; }
.sk-qty.sm .sk-qty-btn { width: 34px; font-size: 15px; }
.sk-qty.sm .sk-qty-val { width: 38px; font-size: 14px; }

/* Action row */
.sk-pdp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.sk-btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #1FAE53;
}
.sk-btn-whatsapp:hover { background: #1FAE53; color: #fff; border-color: #17843E; }
.sk-icon-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(26,26,26,.16);
  background: var(--white);
  display: grid;
  place-content: center;
  font-size: 18px;
  color: rgba(26,26,26,.55);
  cursor: pointer;
  transition: all var(--t-fast) var(--e-spring);
}
.sk-icon-btn:hover { border-color: var(--black); color: var(--black); transform: scale(1.08); }
.sk-icon-btn.active { background: var(--red); border-color: var(--red); color: #fff; }

/* Trust strip under the buy box */
.sk-pdp-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.sk-pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(245,197,24,.14);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(26,26,26,.7);
}
.sk-pdp-trust-item span:first-child { font-size: 20px; flex-shrink: 0; }

/* Tabs */
.sk-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1.5px solid rgba(26,26,26,.1);
  margin-bottom: 32px;
}
.sk-tab {
  padding: 14px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(26,26,26,.42);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sk-tab:hover { color: var(--black); }
.sk-tab.active { color: var(--black); border-bottom-color: var(--yellow); }

/* Review list */
.sk-review-item {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1.5px solid rgba(26,26,26,.07);
}
.sk-review-item:last-child { border-bottom: none; }
.sk-review-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--yellow);
}
.sk-review-name {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--black);
}
.sk-review-date { font-family: var(--ff-body); font-size: 12px; color: rgba(26,26,26,.4); }
.sk-review-body { font-family: var(--ff-body); font-size: 14px; line-height: 1.7; color: rgba(26,26,26,.65); margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════════
   CART · CHECKOUT
══════════════════════════════════════════════════════════════════════════════ */
.sk-checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 980px) { .sk-checkout { grid-template-columns: 1fr; } }

/* Step indicator */
.sk-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.sk-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(26,26,26,.35);
}
.sk-step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(26,26,26,.18);
  display: grid;
  place-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all var(--t-base) var(--e-out);
}
.sk-step.active { color: var(--black); }
.sk-step.active .sk-step-num { background: var(--black); border-color: var(--black); color: var(--yellow); }
.sk-step.done { color: rgba(26,26,26,.6); }
.sk-step.done .sk-step-num { background: var(--yellow); border-color: var(--black); color: var(--black); }
.sk-step-line {
  width: clamp(28px, 8vw, 90px);
  height: 2px;
  background: rgba(26,26,26,.14);
  margin: 0 14px;
  flex-shrink: 0;
}
.sk-step-line.done { background: var(--black); }
@media (max-width: 560px) {
  .sk-step span:last-child { display: none; }
  .sk-step-line { margin: 0 8px; }
}

/* Cart line item */
.sk-cart-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1.5px solid rgba(26,26,26,.07);
}
.sk-cart-row:last-child { border-bottom: none; }
.sk-cart-img {
  width: 92px; height: 92px;
  border-radius: 18px;
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.08);
  padding: 8px;
  object-fit: contain;
}
.sk-cart-name {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 6px;
  transition: color var(--t-fast);
}
a:hover > .sk-cart-name, .sk-cart-name:hover { color: var(--red); }
.sk-cart-variant {
  font-family: var(--ff-body);
  font-size: 12px;
  color: rgba(26,26,26,.45);
  margin-bottom: 10px;
}
.sk-cart-price {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  white-space: nowrap;
}
.sk-cart-actions { display: flex; align-items: center; gap: 14px; }
.sk-cart-remove {
  background: none;
  border: none;
  color: rgba(26,26,26,.3);
  font-size: 17px;
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-cart-remove:hover { color: var(--red); transform: scale(1.15); }
@media (max-width: 620px) {
  .sk-cart-row { grid-template-columns: 76px 1fr; row-gap: 12px; }
  .sk-cart-img { width: 76px; height: 76px; }
  .sk-cart-end { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
}

/* Order summary */
.sk-summary {
  background: var(--black);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 34px);
  position: sticky;
  top: 88px;
  color: var(--cream);
}
@media (max-width: 980px) { .sk-summary { position: static; } }
.sk-summary-title {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--yellow);
  margin-bottom: 24px;
}
.sk-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-family: var(--ff-body);
  font-size: 14px;
  color: rgba(255,255,255,.6);
}
.sk-summary-row b { color: var(--cream); font-weight: 600; }
.sk-summary-row.discount b { color: #6BE39A; }
.sk-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(255,255,255,.14);
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cream);
}
.sk-summary-total b { font-size: 26px; color: var(--yellow); letter-spacing: .01em; }
.sk-summary .sk-btn { margin-top: 26px; }
/* Coupon field inside the dark summary */
.sk-coupon { display: flex; gap: 8px; margin-top: 22px; }
.sk-coupon input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--cream);
  outline: none;
  transition: border-color var(--t-fast);
}
.sk-coupon input::placeholder { color: rgba(255,255,255,.32); }
.sk-coupon input:focus { border-color: var(--yellow); }
.sk-coupon button {
  flex-shrink: 0;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  border: none;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--black);
  cursor: pointer;
  transition: background var(--t-fast);
}
.sk-coupon button:hover { background: var(--cream); }

/* Selectable option card (address / payment method) */
.sk-pick {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 2px solid rgba(26,26,26,.12);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-pick:hover { border-color: rgba(26,26,26,.4); transform: translateY(-2px); }
.sk-pick.active { border-color: var(--black); background: rgba(245,197,24,.1); }
.sk-pick-title {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--black);
  margin-bottom: 4px;
}
.sk-pick-text { font-family: var(--ff-body); font-size: 13px; color: rgba(26,26,26,.55); line-height: 1.6; }
.sk-pick-logo { height: 26px; width: auto; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════════════════
   AUTH
══════════════════════════════════════════════════════════════════════════════ */
/* Auth pages render inside the frontend layout (nav above, footer below), so
   this is a contained card rather than a full-viewport split. */
.sk-auth {
  background: var(--cream);
  padding: clamp(32px, 5vw, 72px) var(--gutter);
}
.sk-auth-shell {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.09);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(26,26,26,.08);
}
@media (max-width: 900px) { .sk-auth-shell { grid-template-columns: 1fr; } }

/* Left: brand panel */
.sk-auth-brand {
  background: var(--black);
  padding: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) { .sk-auth-brand { display: none; } }
.sk-auth-brand::after {
  content: '';
  position: absolute;
  bottom: -160px; left: -100px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,24,.18) 0%, transparent 70%);
}
.sk-auth-brand-inner { position: relative; z-index: 1; max-width: 440px; }
.sk-auth-brand img { height: 56px; width: auto; margin-bottom: 40px; }
.sk-auth-brand h2 {
  font-family: var(--ff-display);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .95;
  color: var(--cream);
  margin-bottom: 20px;
}
.sk-auth-brand h2 em { font-style: normal; color: var(--yellow); }
.sk-auth-brand p {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.5);
}
.sk-auth-perks { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.sk-auth-perk {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
}
.sk-auth-perk span:first-child {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(245,197,24,.16);
  display: grid;
  place-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* Right: form panel */
.sk-auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}
.sk-auth-card { width: 100%; max-width: 420px; }
.sk-auth-title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  color: var(--black);
  margin-bottom: 10px;
}
.sk-auth-sub {
  font-family: var(--ff-body);
  font-size: 14px;
  color: rgba(26,26,26,.5);
  line-height: 1.7;
  margin-bottom: 32px;
}
.sk-auth-alt {
  text-align: center;
  margin-top: 26px;
  font-family: var(--ff-body);
  font-size: 14px;
  color: rgba(26,26,26,.5);
}
.sk-auth-alt a { font-weight: 700; color: var(--black); border-bottom: 2px solid var(--yellow); transition: color var(--t-fast); }
.sk-auth-alt a:hover { color: var(--red); }
.sk-auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(26,26,26,.32);
}
.sk-auth-divider::before,
.sk-auth-divider::after { content: ''; flex: 1; height: 1.5px; background: rgba(26,26,26,.1); }

/* OTP boxes */
.sk-otp { display: flex; gap: 10px; justify-content: center; }
.sk-otp input {
  width: 52px; height: 60px;
  text-align: center;
  border-radius: 14px;
  border: 2px solid rgba(26,26,26,.14);
  background: var(--white);
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--black);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sk-otp input:focus { border-color: var(--black); box-shadow: 0 0 0 4px rgba(245,197,24,.28); }

/* ══════════════════════════════════════════════════════════════════════════════
   ACCOUNT AREA
══════════════════════════════════════════════════════════════════════════════ */
.sk-acc {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
@media (max-width: 900px) { .sk-acc { grid-template-columns: 1fr; } }

.sk-acc-side {
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.09);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(26,26,26,.04);
  position: sticky;
  top: 88px;
}
@media (max-width: 900px) { .sk-acc-side { position: static; } }
.sk-acc-user {
  background: var(--black);
  padding: 28px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sk-acc-user img {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--yellow);
  flex-shrink: 0;
}
.sk-acc-user-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cream);
  line-height: 1.3;
}
.sk-acc-user-meta { font-family: var(--ff-body); font-size: 12px; color: rgba(255,255,255,.45); margin-top: 3px; }
.sk-acc-menu { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sk-acc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(26,26,26,.62);
  transition: background var(--t-fast), color var(--t-fast);
}
.sk-acc-link i { font-size: 15px; width: 20px; text-align: center; color: rgba(26,26,26,.35); transition: color var(--t-fast); }
.sk-acc-link:hover { background: rgba(26,26,26,.05); color: var(--black); }
.sk-acc-link:hover i { color: var(--black); }
.sk-acc-link.router-link-active,
.sk-acc-link.active { background: var(--yellow); color: var(--black); }
.sk-acc-link.router-link-active i,
.sk-acc-link.active i { color: var(--black); }
.sk-acc-link.danger { color: var(--red); }
.sk-acc-link.danger i { color: var(--red); }
.sk-acc-link.danger:hover { background: rgba(200,57,43,.08); color: var(--red); }

/* Overview stat tiles */
.sk-acc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.sk-acc-tile {
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.09);
  border-radius: 20px;
  padding: 24px;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast);
}
.sk-acc-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(26,26,26,.08); }
.sk-acc-tile-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(245,197,24,.2);
  display: grid;
  place-content: center;
  font-size: 19px;
  margin-bottom: 16px;
}
.sk-acc-tile-num {
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--black);
  line-height: 1;
}
.sk-acc-tile-label {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(26,26,26,.42);
  margin-top: 8px;
}

/* ─── Data table ────────────────────────────────────────────────────────────── */
.sk-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-card);
  border: 1.5px solid rgba(26,26,26,.09);
  background: var(--white);
}
.sk-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.sk-table th {
  text-align: left;
  padding: 16px 20px;
  background: rgba(26,26,26,.035);
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(26,26,26,.5);
  white-space: nowrap;
}
.sk-table td {
  padding: 18px 20px;
  border-top: 1.5px solid rgba(26,26,26,.06);
  font-family: var(--ff-body);
  font-size: 14px;
  color: rgba(26,26,26,.72);
  vertical-align: middle;
}
.sk-table tbody tr { transition: background var(--t-fast); }
.sk-table tbody tr:hover { background: rgba(245,197,24,.07); }
.sk-table .num { font-family: var(--ff-display); font-weight: 700; color: var(--black); }
[dir="rtl"] .sk-table th { text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════════
   BRAND STRIP · PROMO TILES  (home page tail sections)
══════════════════════════════════════════════════════════════════════════════ */
.sk-brands-section { background: var(--white); padding: clamp(44px, 6vw, 72px) 0; }
.sk-brands-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px var(--gutter) 12px;
  scrollbar-width: none;
  cursor: grab;
  max-width: var(--container);
  margin: 0 auto;
}
.sk-brands-rail::-webkit-scrollbar { display: none; }
.sk-brands-rail.is-dragging { cursor: grabbing; }
.sk-brand-tile {
  flex: 0 0 auto;
  width: 150px;
  padding: 22px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(26,26,26,.1);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-fast), box-shadow var(--t-fast);
}
.sk-brand-tile:hover {
  transform: translateY(-6px);
  border-color: var(--black);
  box-shadow: 0 12px 28px rgba(26,26,26,.1);
}
.sk-brand-tile img { height: 46px; width: auto; object-fit: contain; }
.sk-brand-tile span {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--black);
}

.sk-promo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.sk-promo-tile {
  display: block;
  border-radius: var(--r-promo);
  overflow: hidden;
  border: 1.5px solid rgba(26,26,26,.1);
  transition: transform var(--t-card) var(--e-spring), box-shadow var(--t-card);
}
.sk-promo-tile:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(26,26,26,.14); }
.sk-promo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Section title underline wipe (spec §3.3) ──────────────────────────────── */
.sk-section-title,
.sk-page-title { position: relative; }
.sk-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--e-out) .15s;
}
.sk-underline.visible::after,
.visible .sk-underline::after { transform: scaleX(1); }
[dir="rtl"] .sk-underline::after { left: auto; right: 0; transform-origin: right; }

/* ─── Skeleton shimmer for loading grids ────────────────────────────────────── */
.sk-skeleton {
  border-radius: var(--r-card);
  background: linear-gradient(100deg, rgba(26,26,26,.05) 30%, rgba(26,26,26,.10) 50%, rgba(26,26,26,.05) 70%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
}
@keyframes skShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Floating WhatsApp button ──────────────────────────────────────────────── */
.sk-wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-content: center;
  box-shadow: 0 8px 26px rgba(37,211,102,.42);
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast);
}
.sk-wa-float:hover { transform: scale(1.1); box-shadow: 0 12px 32px rgba(37,211,102,.55); }
.sk-wa-float svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 1024px) {
  /* clear the mobile bottom bar */
  .sk-wa-float { bottom: 78px; right: 16px; width: 50px; height: 50px; }
  .sk-wa-float svg { width: 25px; height: 25px; }
}

/* ─── Utility helpers ───────────────────────────────────────────────────────── */
.sk-stack   { display: flex; flex-direction: column; }
.sk-gap-8   { gap: 8px; }
.sk-gap-12  { gap: 12px; }
.sk-gap-16  { gap: 16px; }
.sk-gap-24  { gap: 24px; }
.sk-row     { display: flex; align-items: center; }
.sk-between { justify-content: space-between; }
.sk-wrap    { flex-wrap: wrap; }
.sk-grow    { flex: 1; min-width: 0; }
.sk-mt-24   { margin-top: 24px; }
.sk-mt-32   { margin-top: 32px; }
.sk-mb-24   { margin-bottom: 24px; }
.sk-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 18px;
}
.sk-span-2 { grid-column: 1 / -1; }

/* ─── Back to top ───────────────────────────────────────────────────────────── */
.sk-to-top {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 9989;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  border: 2px solid var(--yellow);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base) var(--e-spring), background var(--t-fast);
}
.sk-to-top.show { opacity: 1; visibility: visible; transform: none; }
.sk-to-top:hover { background: var(--yellow); color: var(--black); }
@media (max-width: 1024px) { .sk-to-top { bottom: 138px; right: 16px; width: 42px; height: 42px; } }

/* ─── Product section on a coloured ground ──────────────────────────────────── */
.sk-products-section.is-red   { background: var(--red); }
.sk-products-section.is-black { background: var(--black); }

.sk-section-eyebrow.on-red,
.sk-section-eyebrow.on-dark  { color: rgba(255,255,255,.6); }
.sk-section-title.on-red     { color: var(--cream); }

/* Cards sitting on a dark ground invert their text + controls */
.is-red   .sk-product-card-name,
.is-black .sk-product-card-name  { color: var(--cream); }
.is-red   .sk-product-card-price,
.is-black .sk-product-card-price { color: var(--yellow); }
.is-red   .sk-product-card-compare,
.is-black .sk-product-card-compare { color: rgba(255,255,255,.4); }
.is-red   .sk-product-card-wish,
.is-black .sk-product-card-wish {
  background: rgba(255,255,255,.16);
  color: var(--cream);
}
.is-red   .sk-product-card-cta,
.is-black .sk-product-card-cta {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}
.is-red   .sk-product-card-cta:hover,
.is-black .sk-product-card-cta:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--black);
}
.is-red .sk-underline::after   { background: var(--yellow); }

/* ─── Coupon (inside the dark order summary) ────────────────────────────────── */
.sk-coupon-applied {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(107,227,154,.12);
  border: 1.5px solid rgba(107,227,154,.35);
}
.sk-coupon-applied-title {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6BE39A;
}
.sk-coupon-applied-text { font-family: var(--ff-body); font-size: 12px; color: rgba(255,255,255,.5); margin-top: 3px; }
.sk-coupon-drop {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--t-fast);
}
.sk-coupon-drop:hover { color: var(--red); }
.sk-coupon-error {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  color: #FF8A80;
}
.sk-coupon-browse {
  margin-top: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--yellow);
  transition: opacity var(--t-fast);
}
.sk-coupon-browse:hover { opacity: .75; }

.sk-coupon-card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(245,197,24,.1);
  border: 1.5px solid rgba(245,197,24,.4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sk-coupon-card-desc { font-family: var(--ff-body); font-size: 14px; font-weight: 600; color: var(--black); }
.sk-coupon-card-dates { font-family: var(--ff-body); font-size: 12px; color: rgba(26,26,26,.45); }

/* ─── Phone field with country-code dropdown ────────────────────────────────── */
.sk-phone {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.14);
  border-radius: 14px;
  overflow: visible;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sk-phone:focus-within { border-color: var(--black); box-shadow: 0 0 0 4px rgba(245,197,24,.28); }
.sk-phone.has-error { border-color: var(--red); }
.sk-phone > input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  padding: 13px 14px;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--black);
}
.sk-phone-code { position: relative; flex-shrink: 0; }
.sk-phone-code-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  background: rgba(26,26,26,.04);
  border: none;
  border-inline-end: 1.5px solid rgba(26,26,26,.1);
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
}
.sk-phone-code-list {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  width: 130px;
  max-height: 210px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.1);
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}
.sk-phone-code-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 13px;
  transition: background var(--t-fast);
}
.sk-phone-code-list li:hover { background: rgba(245,197,24,.2); }

/* vue-next-select adopts the field styling */
.sk-vue-select { padding: 0 !important; display: flex; align-items: center; }
.sk-vue-select .vue-input { padding: 12px 16px; }
.sk-vue-select .vue-input input { font-family: var(--ff-body); font-size: 15px; }
.sk-vue-select .vue-dropdown {
  border-radius: 14px;
  border: 1.5px solid rgba(26,26,26,.1);
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  overflow: hidden;
  margin-top: 6px;
}
.sk-vue-select .vue-dropdown-item { font-family: var(--ff-body); font-size: 14px; padding: 10px 14px; }
.sk-vue-select .vue-dropdown-item.highlighted { background: rgba(245,197,24,.22); }
.sk-vue-select .vue-dropdown-item.selected { background: var(--black); color: var(--yellow); }

/* Payment method tile — a .sk-pick that stacks its logo above the label */
.sk-pay-pick {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 22px 14px;
}
.sk-pay-pick .sk-pick-title { margin: 0; font-size: 12px; letter-spacing: .06em; }

/* ─── Inline text button / link ─────────────────────────────────────────────── */
.sk-link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--black);
  border-bottom: 2px solid var(--yellow);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sk-link-btn:hover { color: var(--red); border-color: var(--red); }

/* ─── Alerts ────────────────────────────────────────────────────────────────── */
.sk-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  margin-bottom: 20px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.sk-alert button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  opacity: .6;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}
.sk-alert button:hover { opacity: 1; }
.sk-alert-danger  { background: rgba(200,57,43,.1);  border: 1.5px solid rgba(200,57,43,.3);  color: var(--red); }
.sk-alert-success { background: rgba(26,150,90,.1);  border: 1.5px solid rgba(26,150,90,.3);  color: #10804C; }
.sk-alert-info    { background: rgba(245,197,24,.16); border: 1.5px solid rgba(245,197,24,.45); color: #7A5F00; }

/* ─── "Add new" dashed tile (address book, etc.) ────────────────────────────── */
.sk-add-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 160px;
  width: 100%;
  padding: 28px 20px;
  border-radius: var(--r-card);
  border: 2px dashed rgba(26,26,26,.2);
  background: rgba(245,197,24,.08);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-add-tile:hover {
  border-color: var(--black);
  background: rgba(245,197,24,.18);
  transform: translateY(-3px);
}
.sk-add-tile i { font-size: 24px; color: var(--black); }
.sk-add-tile span {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--black);
}

/* ─── Inner panel (order details, receipts) ─────────────────────────────────── */
.sk-panel {
  border: 1.5px solid rgba(26,26,26,.1);
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
}
.sk-panel > h3 {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(26,26,26,.55);
  background: rgba(26,26,26,.035);
}
.sk-panel ul li span:first-child { color: rgba(26,26,26,.5); }

/* ─── Order tracker ─────────────────────────────────────────────────────────── */
.sk-track-bar {
  display: block;
  border: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(26,26,26,.12);
  transition: background var(--t-base) var(--e-out);
}
.sk-track-bar.done { background: var(--black); }
.sk-track-dot {
  flex-shrink: 0;
  width: 28px; height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: rgba(26,26,26,.12);
  font-size: 14px;
  transition: background var(--t-base) var(--e-out), color var(--t-base);
}
.sk-track-dot.done {
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 0 0 4px rgba(245,197,24,.28);
}
.sk-track-dot.done::before {
  content: '\2713';
  font-weight: 700;
}
.sk-track-label {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  text-align: center;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(26,26,26,.55);
}

/* ─── Star rating input ─────────────────────────────────────────────────────── */
.sk-rate { display: flex; align-items: center; gap: 10px; }
.sk-rate button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  color: rgba(26,26,26,.16);
  transition: color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-rate button:hover { transform: scale(1.15); }
.sk-rate button.active { color: var(--yellow); }

/* ─── Image upload tile ─────────────────────────────────────────────────────── */
.sk-upload-tile {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 14px;
  border: 2px dashed rgba(26,26,26,.2);
  background: rgba(245,197,24,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.sk-upload-tile:hover { border-color: var(--black); background: rgba(245,197,24,.18); }
.sk-upload-tile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sk-upload-tile i { font-size: 18px; color: rgba(26,26,26,.45); }
.sk-upload-tile span {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(26,26,26,.45);
}
.sk-thumb-drop {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  z-index: 2;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.12);
  color: var(--red);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  transition: background var(--t-fast), color var(--t-fast);
}
.sk-thumb-drop:hover { background: var(--red); color: #fff; }

/* ─── Long-form CMS content (pages, PDP tabs) ───────────────────────────────── */
.sk-prose,
.text-description {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.8;
  color: rgba(26,26,26,.72);
}
.sk-prose h1, .sk-prose h2, .sk-prose h3, .sk-prose h4,
.text-description h1, .text-description h2, .text-description h3, .text-description h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--black);
  margin: 1.6em 0 .6em;
}
.sk-prose h1, .text-description h1 { font-size: clamp(26px, 3vw, 38px); }
.sk-prose h2, .text-description h2 { font-size: clamp(22px, 2.4vw, 30px); }
.sk-prose h3, .text-description h3 { font-size: 20px; }
.sk-prose h4, .text-description h4 { font-size: 16px; letter-spacing: .08em; }
.sk-prose > :first-child, .text-description > :first-child { margin-top: 0; }
.sk-prose p, .text-description p { margin-bottom: 1.1em; }
.sk-prose a, .text-description a {
  color: var(--black);
  font-weight: 600;
  border-bottom: 2px solid var(--yellow);
}
.sk-prose a:hover, .text-description a:hover { color: var(--red); border-color: var(--red); }
.sk-prose ul, .sk-prose ol,
.text-description ul, .text-description ol { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.sk-prose ul, .text-description ul { list-style: disc; }
.sk-prose ol, .text-description ol { list-style: decimal; }
.sk-prose li, .text-description li { margin-bottom: .45em; }
.sk-prose img, .text-description img { border-radius: 18px; margin: 1.2em 0; }
.sk-prose blockquote, .text-description blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-inline-start: 4px solid var(--yellow);
  font-size: 18px;
  font-style: italic;
  color: rgba(26,26,26,.6);
}
.sk-prose table, .text-description table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; }
.sk-prose th, .sk-prose td,
.text-description th, .text-description td {
  padding: 10px 14px;
  border: 1.5px solid rgba(26,26,26,.1);
  text-align: start;
}
.sk-prose th, .text-description th { background: rgba(26,26,26,.04); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE TAB BAR
══════════════════════════════════════════════════════════════════════════════ */
.sk-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--black);
  box-shadow: 0 -6px 28px rgba(0,0,0,.28);
}
@media (max-width: 1024px) { .sk-tabbar { display: flex; } }

.sk-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.55);
  transition: color var(--t-fast);
}
.sk-tabbar-item i { font-size: 19px; line-height: 1; }
.sk-tabbar-item span {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sk-tabbar-item:hover,
.sk-tabbar-item.active,
.sk-tabbar-item.router-link-active { color: var(--yellow); }

.sk-tabbar-fab {
  position: relative;
  flex-shrink: 0;
  margin-top: -30px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--black);
  color: var(--black);
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-content: center;
  box-shadow: 0 8px 22px rgba(245,197,24,.42);
  transition: transform var(--t-fast) var(--e-spring);
}
.sk-tabbar-fab:hover { transform: scale(1.08); }
.sk-tabbar-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--red);
  border: 2px solid var(--black);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Keep page content clear of the fixed tab bar */
@media (max-width: 1024px) {
  .sk-page, .sk-products-section, .sk-footer { padding-bottom: 92px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDE DRAWER  (cart, mobile menu)
══════════════════════════════════════════════════════════════════════════════ */
.sk-drawer {
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  transition: transform .5s var(--e-out);
  transform: translateX(100%);
}
[dir="rtl"] .sk-drawer { transform: translateX(-100%); }
.canvas-active .sk-drawer,
#cart-canvas.canvas-active .sk-drawer { transform: none; }

.sk-drawer-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1.5px solid rgba(26,26,26,.09);
  background: var(--white);
}
.sk-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px;
}
.sk-drawer-foot {
  flex-shrink: 0;
  padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
  border-top: 1.5px solid rgba(26,26,26,.09);
  background: var(--white);
}
.sk-drawer-note {
  margin-top: 12px;
  text-align: center;
  font-family: var(--ff-body);
  font-size: 11px;
  color: rgba(26,26,26,.45);
}

/* Drawer that opens from the inline-start edge */
.sk-drawer.start {
  margin-inline-start: 0;
  margin-inline-end: auto;
  max-width: 340px;
  transform: translateX(-100%);
}
[dir="rtl"] .sk-drawer.start { transform: translateX(100%); }

/* Drawer nav list (mobile categories) */
.sk-drawer-list { display: flex; flex-direction: column; }
.sk-drawer-list > li { border-bottom: 1.5px solid rgba(26,26,26,.08); padding: 4px 0; }
.sk-drawer-list > li:last-child { border-bottom: none; }
.sk-drawer-link {
  display: block;
  padding: 12px 0;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--black);
  transition: color var(--t-fast);
}
.sk-drawer-link:hover { color: var(--red); }
.sk-drawer-more {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: none;
  background: rgba(245,197,24,.24);
  color: var(--black);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--t-fast);
}
.sk-drawer-more:hover { background: var(--yellow); }
[dir="rtl"] .sk-drawer-more i { transform: rotate(180deg); }

/* ─── Social pill button ────────────────────────────────────────────────────── */
.sk-social-btn {
  width: 34px; height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  color: var(--black);
  background: rgba(26,26,26,.07);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-social-btn:hover { background: var(--yellow); transform: translateY(-2px); }

/* ─── Cookie consent card ───────────────────────────────────────────────────── */
.sk-cookies {
  position: fixed;
  z-index: 500;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  max-width: 100%;
  padding: 22px;
  border-radius: 24px 24px 0 0;
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.1);
  box-shadow: 0 -12px 40px rgba(0,0,0,.14);
  transition: transform var(--t-slow) var(--e-out), opacity var(--t-slow);
}
.sk-cookies i { color: var(--black); }
@media (min-width: 640px) {
  .sk-cookies {
    bottom: 24px;
    inset-inline-start: 24px;
    max-width: 340px;
    border-radius: var(--r-card);
  }
}
@media (max-width: 1024px) { .sk-cookies { bottom: 84px; } }

/* ─── Nested category submenu drawer ────────────────────────────────────────── */
.sk-submenu {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 40;
  width: 100%;
  max-width: 340px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  transition: transform .5s var(--e-out);
}

/* ─── Nav dropdown category links ───────────────────────────────────────────── */
.sk-menu-child {
  display: block;
  padding: 5px 0;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(26,26,26,.7);
  transition: color var(--t-fast), padding-inline-start var(--t-fast);
}
.sk-menu-child:hover { color: var(--red); padding-inline-start: 4px; }
.sk-menu-child.nested { font-weight: 500; color: rgba(26,26,26,.55); }
.sk-menu-child i { font-size: 9px; opacity: .5; }
[dir="rtl"] .sk-menu-child i { transform: rotate(180deg); }

/* ─── Hero text column + trust feature grid (used with utility markup) ──────── */
.sk-hero-text { position: relative; z-index: 2; }
.sk-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 60px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════════════════════════════════════════ */
.sk-search { background: var(--cream); }
.sk-search-field {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  height: 62px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 2.5px solid var(--black);
  transition: box-shadow var(--t-fast);
}
.sk-search-field:focus-within { box-shadow: 0 0 0 5px rgba(245,197,24,.35); }
.sk-search-field i { color: rgba(26,26,26,.4); font-size: 18px; flex-shrink: 0; }
.sk-search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font-family: var(--ff-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--black);
}
.sk-search-field input::placeholder { color: rgba(26,26,26,.35); }
.sk-search-field input::-webkit-search-cancel-button { display: none; }
.sk-search-field button {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(26,26,26,.35);
  font-size: 16px;
  transition: color var(--t-fast);
}
.sk-search-field button:hover { color: var(--red); }

.sk-search-results {
  width: 100%;
  max-width: 760px;
  margin: 16px auto 0;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1.5px solid rgba(26,26,26,.1);
  box-shadow: 0 16px 44px rgba(0,0,0,.12);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}
.sk-search-results li {
  padding: 15px 24px;
  border-bottom: 1.5px solid rgba(26,26,26,.06);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  color: rgba(26,26,26,.75);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), padding-inline-start var(--t-fast);
}
.sk-search-results li:last-child { border-bottom: none; }
.sk-search-results li:hover {
  background: rgba(245,197,24,.2);
  color: var(--black);
  padding-inline-start: 30px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CURVE-TEXT MARQUEE  —  message riding a wave path
══════════════════════════════════════════════════════════════════════════════ */
.sk-curve-marquee {
  /* Zero layout height: the ribbon floats over the seam so the bands above and
     below meet with no page background showing between them. */
  position: relative;
  height: 0;
  z-index: 5;
  pointer-events: none;
  background: transparent !important;
}
.sk-curve-marquee-inner {
  position: absolute;
  inset-inline: 0;
  top: 0;
  transform: translateY(-50%);
  line-height: 0;
}
.sk-curve-svg {
  display: block;
  width: 100%;
  height: auto;          /* height follows the viewBox — no distortion, no crop */
}
.sk-curve-svg-narrow { display: none; }
@media (max-width: 749px) {
  .sk-curve-svg-wide   { display: none; }
  .sk-curve-svg-narrow { display: block; }
}

.sk-curve-ribbon {
  fill: var(--scheme-bg);
  /* black keyline on both wave edges, as on the reference band */
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linejoin: round;
}
.sk-curve-path { fill: none; stroke: none; }
.sk-curve-text {
  fill: var(--ink);
  font-family: var(--ff-display);
  font-size: 76px;       /* user units, so it tracks the ribbon */
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: pre;
}

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CURVED SECTION EDGES
   The reference site rounds the seam between colour bands rather than butting
   them together. `.sk-curve-top` / `.sk-curve-bottom` carve the current
   section's own background into an arc.
══════════════════════════════════════════════════════════════════════════════ */
.sk-curve-top {
  border-start-start-radius: 50% 90px;
  border-start-end-radius: 50% 90px;
  margin-top: -60px;
  position: relative;
  z-index: 2;
}
.sk-curve-bottom {
  border-end-start-radius: 50% 90px;
  border-end-end-radius: 50% 90px;
  margin-bottom: -60px;
  position: relative;
  z-index: 2;
}
@media (max-width: 750px) {
  .sk-curve-top    { border-start-start-radius: 50% 46px; border-start-end-radius: 50% 46px; margin-top: -32px; }
  .sk-curve-bottom { border-end-start-radius: 50% 46px;   border-end-end-radius: 50% 46px;   margin-bottom: -32px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRODUCT RANGE  —  one category at a time on a ringed dome
   Every colour comes from the active category's flavour ramp:
   --c1 dome, --c2 inner ring, --c3 outer ring.
══════════════════════════════════════════════════════════════════════════════ */
.sk-range-band {
  --c1: #CD2525;
  --c2: #F1B3B3;
  --c3: #FDF4F4;
  position: relative;
  background: var(--sand-50);
  overflow: hidden;
}

/* The dome. Built from three stacked arc layers rather than box-shadow spread:
   a spread shadow wraps the whole box, and because this box is wider than the
   viewport with square top corners, that painted flat bands across the top
   instead of rings around the bottom. */
.sk-range-arcs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sk-range-arc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  border-end-start-radius: 50% 100%;
  border-end-end-radius: 50% 100%;
  transition: background .55s var(--e-out);
}
/* widest + shortest sits furthest back, so each one peeks out below the next */
.arc-3 { width: 168%; height: calc(100% - 18px);  background: var(--c3); }
.arc-2 { width: 154%; height: calc(100% - 62px);  background: var(--c2); }
.arc-1 { width: 140%; height: calc(100% - 106px); background: var(--c1); }
@media (max-width: 749px) {
  .arc-3 { height: calc(100% - 10px); }
  .arc-2 { height: calc(100% - 38px); }
  .arc-1 { height: calc(100% - 66px); }
}

.sk-range-dome {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 8vw, 120px) 0 clamp(90px, 11vw, 150px);
}

.sk-range-kicker {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: rgba(255,255,255,.72);
  margin-bottom: 10px;
}
.sk-range-heading {
  font-family: var(--ff-display);
  font-size: clamp(34px, 5vw, 88px);
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .02em;
  /* their heading is a near-invisible watermark; this keeps the same recessive
     role but stays legible */
  color: rgba(255,255,255,.42);
}

/* Active category */
.sk-range-stage {
  display: flex;
  justify-content: center;
  margin: clamp(28px, 4vw, 52px) 0 clamp(20px, 3vw, 36px);
}
.sk-range-hero {
  display: block;
  width: clamp(180px, 26vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c3);
  box-shadow: 0 0 0 clamp(10px, 1.4vw, 22px) var(--c2);
  overflow: hidden;
  transition: transform .45s var(--e-spring), box-shadow .45s var(--e-out);
}
.sk-range-hero:hover { transform: translateY(-8px) scale(1.03); }
.sk-range-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sk-range-name {
  font-family: var(--ff-display);
  font-size: clamp(24px, 3.4vw, 52px);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
  color: #FFFFFF;
}

/* Cross-fade between categories */
.sk-range-fade-enter-active,
.sk-range-fade-leave-active { transition: opacity .28s ease, transform .28s var(--e-out); }
.sk-range-fade-enter-from   { opacity: 0; transform: translateY(10px); }
.sk-range-fade-leave-to     { opacity: 0; transform: translateY(-10px); }

/* Thumbnail selector */
.sk-range-thumbs {
  display: flex;
  justify-content: flex-start;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(24px, 3.4vw, 44px);
  padding: 6px 4px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.sk-range-thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 750px) {
  /* centre them while there are few enough to fit */
  .sk-range-thumbs { justify-content: center; }
}
.sk-range-thumb {
  flex: 0 0 auto;
  width: clamp(52px, 5vw, 72px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--ring, var(--c2));
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: center;
  opacity: .72;
  transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-range-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-range-thumb:hover { opacity: 1; transform: translateY(-3px); }
.sk-range-thumb.active {
  opacity: 1;
  border-color: var(--ink);
  transform: scale(1.06);
}

/* Edge arrows */
.sk-range-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(44px, 4vw, 58px);
  aspect-ratio: 1;
  border-radius: 18px;
  border: 2.5px solid var(--ink);
  background: var(--sand-50);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-range-arrow:hover { background: var(--amber-500); transform: translateY(-50%) scale(1.06); }
.sk-range-arrow.prev { inset-inline-start: var(--gutter); }
.sk-range-arrow.next { inset-inline-end:  var(--gutter); }
@media (max-width: 749px) {
  .sk-range-arrow { display: none; }   /* the thumb rail scrolls on touch */
}

/* ══════════════════════════════════════════════════════════════════════════════
   CURVE-TEXT MARQUEE  —  message riding a wave path
══════════════════════════════════════════════════════════════════════════════ */
.sk-curve-marquee {
  /* Zero layout height: the ribbon floats over the seam so the bands above and
     below meet with no page background showing between them. */
  position: relative;
  height: 0;
  z-index: 5;
  pointer-events: none;
  background: transparent !important;
}
.sk-curve-marquee-inner {
  position: absolute;
  inset-inline: 0;
  top: 0;
  transform: translateY(-50%);
  line-height: 0;
}
.sk-curve-svg {
  display: block;
  width: 100%;
  height: auto;          /* height follows the viewBox — no distortion, no crop */
}
.sk-curve-svg-narrow { display: none; }
@media (max-width: 749px) {
  .sk-curve-svg-wide   { display: none; }
  .sk-curve-svg-narrow { display: block; }
}

.sk-curve-ribbon {
  fill: var(--scheme-bg);
  /* black keyline on both wave edges, as on the reference band */
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linejoin: round;
}
.sk-curve-path { fill: none; stroke: none; }
.sk-curve-text {
  fill: var(--ink);
  font-family: var(--ff-display);
  font-size: 76px;       /* user units, so it tracks the ribbon */
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: pre;
}

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CURVED SECTION EDGES
   The reference site rounds the seam between colour bands rather than butting
   them together. `.sk-curve-top` / `.sk-curve-bottom` carve the current
   section's own background into an arc.
══════════════════════════════════════════════════════════════════════════════ */
.sk-curve-top {
  border-start-start-radius: 50% 90px;
  border-start-end-radius: 50% 90px;
  margin-top: -60px;
  position: relative;
  z-index: 2;
}
.sk-curve-bottom {
  border-end-start-radius: 50% 90px;
  border-end-end-radius: 50% 90px;
  margin-bottom: -60px;
  position: relative;
  z-index: 2;
}
@media (max-width: 750px) {
  .sk-curve-top    { border-start-start-radius: 50% 46px; border-start-end-radius: 50% 46px; margin-top: -32px; }
  .sk-curve-bottom { border-end-start-radius: 50% 46px;   border-end-end-radius: 50% 46px;   margin-bottom: -32px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRODUCT RANGE BAND  —  flavour colour follows the active item
══════════════════════════════════════════════════════════════════════════════ */
.sk-range-band {
  --flavour: var(--sand-500);
  --flavour-mid: var(--sand-200);
  --flavour-wash: var(--sand-50);
  background: var(--flavour);
  /* extra top padding: the marquee ribbon straddles this band's top edge */
  padding: clamp(104px, 13vw, 190px) 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
  transition: background .55s var(--e-out);
}
.sk-range-band-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sk-section-eyebrow.on-flavour { color: rgba(255,255,255,.72); }
.sk-section-title.on-flavour   { color: #FFFFFF; }
.sk-range-band .sk-underline::after { background: #FFFFFF; }

/* Track */
.sk-range-track {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(32px, 5vw, 64px);
  padding-bottom: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sk-range-track::-webkit-scrollbar { display: none; }

/* Slide */
.sk-range-slide {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 280px);
  scroll-snap-align: center;
  background: none;
  border: none;
  padding: 0 0 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: .62;
  transform: scale(.92);
  transition: opacity .45s var(--e-out), transform .45s var(--e-spring);
}
.sk-range-slide.active { opacity: 1; transform: scale(1); }

/* Disc behind the pack shot */
.sk-range-disc {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c2, #fff);
  opacity: 0;
  transition: opacity .45s var(--e-out), transform .45s var(--e-spring);
}
.sk-range-slide.active .sk-range-disc { opacity: .55; transform: translateX(-50%) scale(1.04); }

.sk-range-pack {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.26));
  transition: transform .45s var(--e-spring);
}
.sk-range-slide.active .sk-range-pack { transform: translateY(-10px) rotate(-2deg); }

.sk-range-name {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.4vw, 34px);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
  color: #FFFFFF;
}

/* Prev / next */
.sk-range-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.sk-range-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12);
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.sk-range-btn:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--flavour);
  transform: scale(1.08);
}