/**
 * SKSculpts Premium — Hero / Slider
 * Covers: .sk-hero, .sk-slide, .sk-hero-grid, .sk-copybox, .sk-art,
 *         .sk-mandala, .sk-btn, .sk-arrow, hero progress / dots,
 *         diamond-cut decoration, mobile image-first layout.
 * Depends on: tokens.css, base.css
 */

/* ============================================================
   HERO SHELL
   ============================================================ */
.sk-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(820px, calc(100svh - 38px));
  background:
    radial-gradient(circle at 76% 44%, rgba(40, 67, 96, 0.56), transparent 38%),
    linear-gradient(112deg, #202327 0%, #1d232a 46%, #1c2633 100%);
  color: #f7f3eb;
}
html:not([data-theme="dark"]) .sk-hero,
html[data-theme="light"] .sk-hero {
  background:
    radial-gradient(circle at 76% 44%, rgba(204, 177, 119, 0.16), transparent 35%),
    linear-gradient(112deg, #fff 0%, #f7f5f1 48%, #eef1f4 100%);
  color: #18222e;
}
html[data-theme="dark"] .sk-hero {
  background:
    radial-gradient(ellipse at 76% 45%, rgba(118, 124, 124, 0.15), transparent 38%),
    linear-gradient(118deg, #09141d 0%, #101d27 52%, #252a2d 100%) !important;
}

/* ============================================================
   SLIDES
   ============================================================ */
.sk-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.sk-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================================
   HERO GRID & LAYOUTS
   ============================================================ */
.sk-hero-grid {
  min-height: clamp(590px, 43vw, 760px);
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: center;
}

/* ============================================================
   SPLIT LAYOUT — Premium left text + image badge
   ============================================================ */
@media (min-width: 992px) {
  /* 40 / 60 grid for split */
  .sk-slide.sk-layout-split .sk-hero-grid {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    align-items: stretch;
    min-height: clamp(590px, 43vw, 760px);
    overflow: hidden;
    /* Break out of .sk-container constraints so image bleeds to viewport edge */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Left text panel — premium font + full content ── */
  .sk-slide.sk-layout-split .sk-copybox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 5vw, 80px) clamp(24px, 3.5vw, 56px) clamp(40px, 5vw, 80px) clamp(40px, 4.5vw, 72px);
    max-width: 100%;
    position: relative;
    z-index: 4;
  }

  /* Brand label — small cap elegant row */
  .sk-slide.sk-layout-split .sk-copybox .sk-glass-brand {
    font-family: var(--sk-font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Kicker badge — keep the pill style, prevent full-width stretch */
  .sk-slide.sk-layout-split .sk-copybox .sk-kicker {
    display: inline-flex;
    align-self: flex-start;   /* prevent flex-column from stretching it */
    width: fit-content;
    max-width: 100%;
    margin-bottom: 20px;
  }

  /* Title — large display serif, relaxed line-height */
  .sk-slide.sk-layout-split .sk-copybox h1 {
    font-family: var(--sk-font-display, Georgia, serif);
    font-size: clamp(2.4rem, 4vw, 4.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    color: inherit;
  }

  /* Aesthetic italic tagline */
  .sk-slide.sk-layout-split .sk-copybox .sk-aesthetic-text {
    display: block;
    font-family: var(--sk-font-display, Georgia, serif);
    font-size: clamp(13px, 1.1vw, 16px);
    font-style: italic;
    font-weight: 400;
    color: var(--sk-gold, #c9953d);
    margin: 0 0 16px;
    letter-spacing: 0.01em;
  }

  /* Description text */
  .sk-slide.sk-layout-split .sk-copybox .sk-product-desc {
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    line-height: 1.85;
    max-width: 44ch;
    margin: 0 0 20px;
    -webkit-line-clamp: 4;
  }

  /* Price row */
  .sk-slide.sk-layout-split .sk-hero-price {
    margin: 0 0 26px;
    font-family: var(--sk-font-ui);
    font-size: 17px;
    font-weight: 700;
    color: var(--sk-gold2, #e6bd69);
    letter-spacing: 0.02em;
  }
  .sk-slide.sk-layout-split .sk-hero-price .woocommerce-Price-amount { color: var(--sk-gold2, #e6bd69); }
  .sk-slide.sk-layout-split .sk-hero-price del { opacity: 0.5; font-size: 13px; margin-right: 6px; }

  /* Buttons */
  .sk-slide.sk-layout-split .sk-copybox .sk-buttons {
    gap: 14px;
    flex-wrap: nowrap;
  }
  .sk-slide.sk-layout-split .sk-copybox .sk-btn-buy {
    background: transparent;
    border-color: var(--sk-gold, #c9953d);
    color: var(--sk-gold2, #e6bd69);
  }
  .sk-slide.sk-layout-split .sk-copybox .sk-btn-buy:hover {
    background: var(--sk-gold, #c9953d);
    color: #111;
  }

  /* ── Right image panel — covers the full 60% column ── */
  .sk-slide.sk-layout-split .sk-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: clamp(590px, 43vw, 760px);
    overflow: hidden;
    display: block;       /* disable the flex centering */
    isolation: isolate;
  }
  /* Hide the decorative patterns for split — image is the hero */
  .sk-slide.sk-layout-split .sk-art::before,
  .sk-slide.sk-layout-split .sk-mandala { display: none !important; }

  .sk-slide.sk-layout-split .sk-art picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sk-slide.sk-layout-split .sk-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    filter: none;
    opacity: 0.25;
    transform: scale(1.02);
    transition: transform 7s ease, opacity 0.7s ease;
  }
  .sk-slide.is-active.sk-layout-split .sk-art img {
    opacity: 1;
    transform: scale(1);
  }

  /* ── Badge ribbon on top of split image ── */
  .sk-slide.sk-layout-split .sk-hero-img-badge {
    display: flex !important;
    position: absolute;
    top: 0;
    right: clamp(16px, 2.5vw, 32px);
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sk-gold), #b38b4a);
    color: #111;
    padding: clamp(18px, 2.5vw, 28px) clamp(12px, 1.5vw, 20px) clamp(30px, 4vw, 40px);
    font-family: var(--sk-font-ui);
    font-weight: 800;
    font-size: clamp(10px, 1.1vw, 13px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    /* Ribbon tail cutout at bottom */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 14px), 0 100%);
    /* Honour badge-specific colour overrides */
  }
}

/* Full Bleed Layout (Desktop ONLY: min-width: 992px) */
@media (min-width: 992px) {
  .sk-hero:has(.sk-slide.sk-layout-full.is-active) {
    min-height: calc(100vh - 75px) !important;
  }
  .sk-slide.sk-layout-full {
    height: 100% !important;
    min-height: calc(100vh - 75px) !important;
    width: 100% !important;
    max-width: 100% !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sk-layout-full .sk-hero-grid {
    position: relative !important;
    z-index: 5 !important;
    min-height: calc(100vh - 75px) !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* Dynamic Admin Glass Box Position Rules (Desktop) */
  .sk-layout-full .sk-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .sk-slide.sk-glass-pos-top-left .sk-copybox {
    margin-top: clamp(20px, 3vh, 40px) !important;
    margin-bottom: auto !important;
  }

  .sk-slide.sk-glass-pos-center-left .sk-copybox {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .sk-slide.sk-glass-pos-bottom-left .sk-copybox {
    margin-top: auto !important;
    margin-bottom: clamp(60px, 8vh, 90px) !important;
  }

  .sk-layout-full .sk-art {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sk-layout-full .sk-art picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .sk-layout-full .sk-art img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: var(--sk-mob-align, 85% center) !important;
    filter: none;
    opacity: 1;
    transform: scale(1.02);
    transition: transform 7s ease;
  }

  .sk-slide.is-active.sk-layout-full .sk-art img {
    transform: scale(1);
  }

  .sk-layout-full .sk-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
    z-index: 2;
  }

  /* ── Glassmorphism Card — full layout desktop ─────────────── */
  .sk-layout-full .sk-copybox {
    z-index: 8;
    background: rgba(12, 17, 24, 0.72) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    /* Tight padding — card only needs title + price + buttons */
    padding: 20px 26px 22px !important;
    margin-left: clamp(20px, 4vw, 60px) !important;
    margin-right: auto !important;
    text-align: left !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
    max-width: 360px !important;
    color: #fff !important;
  }

  /* Hide cluttering elements — badge is already the top-right ribbon */
  .sk-layout-full .sk-copybox .sk-kicker        { display: none !important; }
  .sk-layout-full .sk-copybox .sk-aesthetic-text { display: none !important; }
  .sk-layout-full .sk-copybox .sk-product-desc  { display: none !important; }

  /* Compact title — prominent but not page-filling */
  .sk-layout-full .sk-copybox h1 {
    color: #ffffff !important;
    font-size: clamp(1.5rem, 2.4vw, 2.6rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    text-align: left !important;
  }

  /* Price display */
  .sk-layout-full .sk-hero-price {
    margin: 0 0 16px !important;
    font-family: var(--sk-font-ui) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sk-gold2, #e6bd69) !important;
    letter-spacing: 0.03em !important;
  }
  .sk-layout-full .sk-hero-price .woocommerce-Price-amount { color: var(--sk-gold2, #e6bd69) !important; }
  .sk-layout-full .sk-hero-price del { opacity: 0.55 !important; font-size: 12px !important; margin-right: 6px !important; }

  /* Buttons row */
  .sk-layout-full .sk-copybox .sk-buttons {
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .sk-layout-full .sk-copybox .sk-btn {
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: 9.5px !important;
    border-radius: 6px !important;
  }
  /* Buy Now — outlined gold */
  .sk-layout-full .sk-copybox .sk-btn-buy {
    background: transparent !important;
    border-color: var(--sk-gold, #c9953d) !important;
    color: var(--sk-gold2, #e6bd69) !important;
  }
  .sk-layout-full .sk-copybox .sk-btn-buy:hover {
    background: var(--sk-gold, #c9953d) !important;
    color: #111 !important;
  }
}

/* ── Right-side glass position classes (desktop ≥992px) ──────── */
@media (min-width: 992px) {
  .sk-slide.sk-glass-pos-top-right .sk-copybox {
    margin-left: auto !important;
    margin-right: clamp(20px, 4vw, 60px) !important;
    margin-top: clamp(20px, 3vh, 40px) !important;
    margin-bottom: auto !important;
  }
  .sk-slide.sk-glass-pos-center-right .sk-copybox {
    margin-left: auto !important;
    margin-right: clamp(20px, 4vw, 60px) !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .sk-slide.sk-glass-pos-bottom-right .sk-copybox {
    margin-left: auto !important;
    margin-right: clamp(20px, 4vw, 60px) !important;
    margin-top: auto !important;
    margin-bottom: clamp(60px, 8vh, 90px) !important;
  }
}

/* In full layout, hide the internal kicker so we can use the top ribbon instead */
.sk-layout-full .sk-copybox .sk-kicker {
  display: none !important;
}

/* Transform the hero image badge into a premium hanging ribbon */
.sk-layout-full .sk-hero-img-badge {
  display: flex !important;
  position: absolute;
  top: 0;
  right: clamp(20px, 5vw, 60px);
  background: linear-gradient(135deg, var(--sk-gold), #b38b4a);
  color: #111;
  padding: clamp(25px, 3vw, 35px) clamp(15px, 2vw, 25px) clamp(40px, 5vw, 50px);
  font-family: var(--sk-font-ui);
  font-weight: 800;
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  z-index: 15;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  /* Ribbon tail cutout at the bottom */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 18px), 0 100%);
}

/* ============================================================
   GLASS BRANDING
   ============================================================ */
.sk-glass-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sk-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sk-glass-brand span.sk-divider {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}
.sk-glass-brand .sk-brand-red {
  color: #ff5252; /* High-contrast bright ruby red */
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.sk-glass-brand .sk-brand-gold {
  color: #f3c87a; /* Bright metallic gold */
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ============================================================
   COPY BOX
   ============================================================ */
.sk-copybox {
  position: relative;
  z-index: 8;
  padding: clamp(58px, 6vw, 104px) clamp(20px, 3vw, 52px) clamp(90px, 8vw, 130px) clamp(50px, 5vw, 80px);
  max-width: 680px;
}
.sk-kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;          /* never stretch in flex column containers */
  width: fit-content;              /* cap to content regardless of parent display */
  background: var(--sk-gold2);
  color: #111;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--sk-font-ui);
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Dynamic Premium Badge Colors */
.badge-best-seller { background: linear-gradient(135deg, #7b1e1e, #4a0d0d) !important; color: #f5e4c3 !important; }
.sk-hero-img-badge.badge-best-seller { border: 1px solid rgba(245, 228, 195, 0.2); }

.badge-new-arrival { background: linear-gradient(135deg, #7c688b, #4a3a56) !important; color: #fcfbfe !important; }
.sk-hero-img-badge.badge-new-arrival { border: 1px solid rgba(252, 251, 254, 0.2); }

.badge-special-offer { background: linear-gradient(135deg, #2b5d44, #133323) !important; color: #dbe9e2 !important; }
.sk-hero-img-badge.badge-special-offer { border: 1px solid rgba(219, 233, 226, 0.2); }

.sk-copybox h1 {
  font-family: var(--sk-font-display);
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  margin: 16px 0 20px;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  color: inherit;
}
.sk-copybox h1 em { font-style: normal; color: var(--sk-gold2); }
.sk-copybox p.sk-aesthetic-text {
  font-family: var(--sk-font-ui);
  font-size: clamp(14px, 1.1vw, 16px);
  font-style: italic;
  font-weight: 500;
  color: var(--sk-gold);
  margin: 0 0 16px;
  max-width: 45ch;
  letter-spacing: 0.02em;
}
.sk-copybox p.sk-product-desc {
  color: rgba(247, 243, 235, 0.78);
  font-size: clamp(0.91rem, 1.15vw, 1.05rem);
  line-height: 1.9;
  max-width: 48ch;
  margin: 0 0 32px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:not([data-theme="dark"]) .sk-copybox p.sk-product-desc,
html[data-theme="light"] .sk-copybox p.sk-product-desc { color: #59636d; }

/* ============================================================
   BUTTONS
   ============================================================ */
.sk-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

.sk-btn {
  min-height: 52px;
  padding: 0 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sk-gold);
  font-family: var(--sk-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.sk-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201, 164, 92, 0.18); }
.sk-btn-primary { background: linear-gradient(100deg, #c9953d, #e6bd69); color: #151515; }

/* ============================================================
   ART PANEL
   ============================================================ */
.sk-art {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(560px, 42vw, 750px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sk-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5% -7% 0 -12%;
  background:
    linear-gradient(135deg, transparent 48%, rgba(201, 164, 92, 0.10) 49%, transparent 50%),
    linear-gradient(45deg, transparent 48%, rgba(92, 111, 133, 0.13) 49%, transparent 50%);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle, #000 15%, transparent 72%);
  opacity: 0.75;
}
.sk-mandala {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  width: min(105%, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: url("../sk-chakra-faceted.svg") center / contain no-repeat;
  opacity: 0.82;
  filter: drop-shadow(0 0 22px rgba(201, 164, 92, 0.09));
  transition: transform 7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sk-hero-img-badge {
  position: absolute;
  top: 10%;
  right: 10%;
  z-index: 10;
  background: linear-gradient(135deg, var(--sk-gold), var(--sk-gold2));
  color: #111;
  font-family: var(--sk-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  pointer-events: none;
}
.sk-slide.is-active .sk-mandala { transform: translate(-50%, -50%) rotate(3deg) scale(1.025); }
html:not([data-theme="dark"]) .sk-mandala,
html[data-theme="light"] .sk-mandala { opacity: 0.46; }

.sk-art img {
  position: relative;
  z-index: 4;
  width: auto; height: auto;
  max-width: min(90%, 700px);
  max-height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.48));
  transform: translateY(18px) scale(0.975);
  opacity: 0.25;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.7s ease;
}
.sk-slide.is-active .sk-art img { transform: translateY(0) scale(1); opacity: 1; }
html:not([data-theme="dark"]) .sk-art img,
html[data-theme="light"] .sk-art img { filter: drop-shadow(0 30px 30px rgba(27, 36, 45, 0.20)); }
.sk-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  width: 60%; height: 44px;
  background: radial-gradient(ellipse, rgba(201, 164, 92, 0.35), transparent 68%);
  filter: blur(12px);
}

/* ============================================================
   NAVIGATION ARROWS
   ============================================================ */
.sk-arrow {
  position: absolute;
  z-index: 12;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 50%;
  background: rgba(21, 27, 35, 0.48);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.sk-arrow:hover { background: rgba(201, 164, 92, 0.22); transform: translateY(-50%) scale(1.05); }
html:not([data-theme="dark"]) .sk-arrow,
html[data-theme="light"] .sk-arrow { background: rgba(255, 255, 255, 0.7); color: #18222e; }
.sk-prev { left: 18px; }
.sk-next { right: 18px; }

/* ============================================================
   PROGRESS BAR & DOTS
   ============================================================ */
.sk-hero-progress {
  position: absolute;
  z-index: 12;
  left: max(35px, calc((100% - min(calc(100% - clamp(28px, 5vw, 96px)), 1500px)) / 2));
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  font: 600 13px/1 var(--sk-font-ui);
  letter-spacing: 0.08em;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.sk-progress-line {
  position: relative;
  width: clamp(120px, 16vw, 260px);
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
html:not([data-theme="dark"]) .sk-progress-line,
html[data-theme="light"] .sk-progress-line { background: rgba(255, 255, 255, 0.35); }
.sk-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sk-gold2); }
.sk-slide.is-active ~ .sk-hero-progress .sk-progress-fill { animation: skHeroProgress 5s linear forwards; }
.sk-hero.is-paused .sk-progress-fill { animation-play-state: paused; }
@keyframes skHeroProgress { from { width: 0; } to { width: 100%; } }

.sk-dots {
  position: absolute;
  z-index: 12;
  right: max(35px, calc((100% - min(calc(100% - clamp(28px, 5vw, 96px)), 1500px)) / 2));
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sk-dot {
  width: 58px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 25, 30, 0.6);
  padding: 2px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.65;
  transition: all 0.25s ease;
}
.sk-dot:hover,
.sk-dot.is-active {
  opacity: 1;
  border-color: var(--sk-gold2);
  box-shadow: 0 0 12px rgba(201, 164, 92, 0.4);
  transform: translateY(-2px);
}
.sk-dot span {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(201, 164, 92, 0.28), rgba(28, 38, 51, 0.6));
}
html:not([data-theme="dark"]) .sk-dot,
html[data-theme="light"] .sk-dot { background: rgba(255, 255, 255, 0.72); }

/* ============================================================
   DIAMOND DECORATION
   ============================================================ */
.sks-hero-chakra.sks-diamond-cut {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0.76 !important;
  z-index: 0 !important;
}
.sks-hero-chakra.sks-diamond-cut svg {
  position: absolute !important;
  width: min(54vw, 700px) !important;
  height: min(54vw, 700px) !important;
  right: 2% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(0 28px 55px rgba(0, 0, 0, 0.18)) !important;
}
.sks-diamond-cut .diamond-main  { fill: rgba(30, 39, 44, 0.13);   stroke: url(#sksDiamondGold); stroke-width: 1.5; }
.sks-diamond-cut .diamond-inner { fill: rgba(55, 61, 62, 0.08);   stroke: rgba(196, 160, 96, 0.28); stroke-width: 0.9; }
.sks-diamond-cut .diamond-facet { fill: rgba(255, 255, 255, 0.008); stroke: rgba(196, 160, 96, 0.14); stroke-width: 0.65; }
.sks-diamond-cut .diamond-soft  { fill: rgba(99, 104, 103, 0.035); stroke: rgba(196, 160, 96, 0.08); stroke-width: 0.55; }

html[data-theme="light"] .sks-diamond-cut .diamond-main  { fill: rgba(255, 255, 255, 0.18); stroke: url(#sksDiamondGold); }
html[data-theme="light"] .sks-diamond-cut .diamond-inner { fill: rgba(218, 213, 203, 0.14); stroke: rgba(169, 133, 72, 0.30); }
html[data-theme="light"] .sks-diamond-cut .diamond-facet { fill: rgba(23, 32, 40, 0.012);   stroke: rgba(169, 133, 72, 0.16); }

.hero, .hero-section, .hero-carousel, .homepage-hero { isolation: isolate; }
.hero > *:not(.sks-hero-chakra),
.hero-section > *:not(.sks-hero-chakra),
.hero-carousel > *:not(.sks-hero-chakra),
.homepage-hero > *:not(.sks-hero-chakra) { position: relative; z-index: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sk-slide:not(.sk-layout-full) .sk-hero-grid { grid-template-columns: 46% 54%; }
}

@media (max-width: 991px) {
  /* ═══════════════════════════════════════════════════════════
     ALL SLIDES (Split & Full) — NON-DESKTOP (tablet + mobile ≤ 991px)
     Fixed-height hero, image covers background, compact glass
     card pinned to corner. Same for every screen ≤ 991px.
     ═══════════════════════════════════════════════════════════ */

  /* 1 · Hero shell — fixed height, no viewport blowout */
  .sk-hero,
  .sk-hero:has(.sk-slide.is-active) {
    height: 70vh !important;
    min-height: 70vh !important;
    max-height: 70vh !important;
    overflow: hidden !important;
  }
  .sk-slide {
    height: 70vh !important;
    min-height: 70vh !important;
    max-height: 70vh !important;
    overflow: hidden !important;
  }

  /* 2 · Grid — full coverage, position context for absolute children */
  .sk-slide .sk-hero-grid {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 70vh !important;
    min-height: 70vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }

  /* 3 · Image — covers the full 360px hero */
  .sk-slide .sk-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background: #0c1118 !important;
    display: block !important;
  }
  .sk-slide .sk-art picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .sk-slide .sk-art img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: var(--sk-mob-align, center 20%) !important;
    opacity: 0.25 !important;
    transform: scale(1.03) !important;
    transition: opacity 0.7s ease, transform 7s ease !important;
    margin: 0 !important;
  }
  .sk-slide.is-active .sk-art img {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* 4 · Dark gradient — heavier on the right side where card sits */
  .sk-slide .sk-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.55) 60%,
      rgba(0, 0, 0, 0.75) 100%
    ) !important;
    z-index: 2 !important;
  }

  /* 5 · Glass card — default absolute position */
  .sk-slide .sk-copybox {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    width: clamp(180px, 52vw, 260px) !important;
    max-width: calc(100% - 28px) !important;
    z-index: 8 !important;
    margin: 0 !important;
    padding: 12px 14px 12px !important;
    background: rgba(8, 12, 20, 0.78) !important;
    backdrop-filter: blur(18px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
    text-align: left !important;
  }

  /* 6 · Brand label — tiny, top of card */
  .sk-slide .sk-copybox .sk-glass-brand {
    display: flex !important;
    font-size: clamp(7px, 1.8vw, 9px) !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 5px !important;
    opacity: 0.85 !important;
    gap: 6px !important;
  }

  /* 7 · Badge (New Arrival etc.) — shown inside the card */
  .sk-slide .sk-copybox .sk-kicker {
    display: inline-flex !important;
    font-size: clamp(6px, 1.6vw, 8px) !important;
    padding: 3px 8px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.12em !important;
    align-self: flex-start !important;
    width: fit-content !important;
  }

  /* 8 · Title */
  .sk-slide .sk-copybox h1 {
    color: #ffffff !important;
    font-size: clamp(0.95rem, 3.8vw, 1.3rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 5px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
    letter-spacing: -0.01em !important;
  }

  /* 9 · Price */
  .sk-slide .sk-hero-price {
    margin: 0 0 9px !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    font-weight: 700 !important;
    color: var(--sk-gold2, #e6bd69) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
  }
  .sk-slide .sk-hero-price .woocommerce-Price-amount {
    color: var(--sk-gold2, #e6bd69) !important;
  }
  .sk-slide .sk-hero-price del {
    opacity: 0.5 !important;
    font-size: 10px !important;
    margin-right: 3px !important;
    display: inline !important;
  }

  /* 10 · Always hide these inside the card */
  .sk-slide .sk-copybox .sk-aesthetic-text { display: none !important; }
  .sk-slide .sk-copybox .sk-product-desc   { display: none !important; }

  /* 11 · Buttons — side by side, full width of card */
  .sk-slide .sk-copybox .sk-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }
  .sk-slide .sk-copybox .sk-btn {
    flex: 1 !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    font-size: clamp(6.5px, 1.7vw, 8px) !important;
    letter-spacing: 0.08em !important;
    border-radius: 5px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .sk-slide .sk-copybox .sk-btn-primary {
    background: linear-gradient(100deg, #c9953d, #e6bd69) !important;
    color: #111 !important;
    border-color: transparent !important;
  }
  .sk-slide .sk-copybox .sk-btn-buy {
    background: transparent !important;
    border: 1px solid var(--sk-gold, #c9953d) !important;
    color: var(--sk-gold2, #e6bd69) !important;
  }

  /* 12 · Hide decorative / navigation elements */
  .sk-hero-progress,
  .sk-dots,
  .sk-slide .sk-art .sk-hero-img-badge { display: none !important; }

  /* ── Mobile Glass Card Position Classes ──────────────────────────
     Admin selects position per-slide via the Hero Banner meta box.
     ─────────────────────────────────────────────────────────────── */
  .sk-mob-glass-bottom-right .sk-slide .sk-copybox {
    bottom: 14px !important; right: 14px !important;
    left: auto !important;   top: auto !important;
    transform: none !important;
  }
  .sk-mob-glass-bottom-left .sk-slide .sk-copybox {
    bottom: 14px !important; left: 14px !important;
    right: auto !important;  top: auto !important;
    transform: none !important;
  }
  .sk-mob-glass-bottom-center .sk-slide .sk-copybox {
    bottom: 14px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }
  .sk-mob-glass-top-right .sk-slide .sk-copybox {
    top: 14px !important;    right: 14px !important;
    bottom: auto !important; left: auto !important;
    transform: none !important;
  }
  .sk-mob-glass-top-left .sk-slide .sk-copybox {
    top: 14px !important;    left: 14px !important;
    bottom: auto !important; right: auto !important;
    transform: none !important;
  }
}

@media (max-width: 600px) {
  .sk-arrow     { display: none !important; }
  .sk-kicker    { font-size: 9px; gap: 8px; }
}