/** Shopify CDN: Minification failed

Line 92:0 Expected "]" to go with "["

**/
/* ============================================================
   MOLY THEME PRO — Core CSS
   BoostingGrowth | Enterprise-Grade Shopify Theme
   Inspired by Shrine Pro architecture
   ============================================================ */

/* ── 1. CSS CUSTOM PROPERTIES (Global Design Tokens) ─────── */
:root {
  /* Brand Colors */
  --moly-accent: #000000;
  --moly-accent-light: #333333;
  --moly-success: #22c55e;
  --moly-warning: #f59e0b;
  --moly-danger: #ef4444;
  --moly-info: #3b82f6;
  --moly-star: #f59e0b;

  /* Layout */
  --moly-page-width: 1400px;
  --moly-section-gap: 36px;
  --moly-gutter: 16px;
  --moly-border-radius: 8px;
  --moly-border-radius-lg: 16px;
  --moly-border-radius-xl: 24px;

  /* Shadows */
  --moly-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --moly-shadow: 0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --moly-shadow-lg: 0 10px 40px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08);
  --moly-shadow-xl: 0 20px 60px rgba(0,0,0,.20), 0 8px 24px rgba(0,0,0,.10);

  /* Transitions */
  --moly-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --moly-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --moly-duration-fast: 150ms;
  --moly-duration: 250ms;
  --moly-duration-slow: 400ms;

  /* Typography Scale */
  --moly-text-xs: 0.75rem;
  --moly-text-sm: 0.875rem;
  --moly-text-base: 1rem;
  --moly-text-lg: 1.125rem;
  --moly-text-xl: 1.25rem;
  --moly-text-2xl: 1.5rem;
  --moly-text-3xl: 1.875rem;
  --moly-text-4xl: 2.25rem;
  --moly-text-5xl: 3rem;
  --moly-text-6xl: 3.75rem;
  --moly-text-7xl: 4.5rem;

  /* Z-Index Scale */
  --moly-z-base: 1;
  --moly-z-above: 10;
  --moly-z-sticky: 100;
  --moly-z-overlay: 200;
  --moly-z-modal: 300;
  --moly-z-toast: 400;
  --moly-z-top: 500;
}

/* ── 2. PERFORMANCE: Critical Paint Optimization ─────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Critical Image Performance */
img[loading="{% if media.id == product.media.first.id %}eager{% else %}lazy{% endif %}"
fetchpriority="{% if media.id == product.media.first.id %}high{% else %}auto{% endif %}"] {
  content-visibility: auto;
}

.moly-img-wrapper {
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
}

.moly-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--moly-duration-slow) var(--moly-ease);
  will-change: transform;
}

.moly-img-wrapper:hover img {
  transform: scale(1.04);
}

/* ── 3. SECTION ANIMATIONS ───────────────────────────────── */
@keyframes moly-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes moly-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes moly-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes moly-slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes moly-slide-left {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes moly-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes moly-ticker-vertical {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes moly-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes moly-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes moly-countdown-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes moly-progress-bar {
  from { width: 0; }
}

@keyframes moly-spin {
  to { transform: rotate(360deg); }
}

/* Section Load Animations */
.moly-animate {
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: var(--moly-duration-slow);
  animation-timing-function: var(--moly-ease);
}

.moly-animate.moly-visible {
  animation-name: moly-fade-up;
}

.moly-animate--fade.moly-visible {
  animation-name: moly-fade-in;
}

.moly-animate--scale.moly-visible {
  animation-name: moly-scale-in;
}

.moly-animate--left.moly-visible {
  animation-name: moly-slide-right;
}

.moly-animate--right.moly-visible {
  animation-name: moly-slide-left;
}

/* Staggered children */
.moly-stagger > * {
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: var(--moly-duration-slow);
  animation-timing-function: var(--moly-ease);
}

.moly-stagger.moly-visible > *:nth-child(1)  { animation-delay: 0ms;   animation-name: moly-fade-up; }
.moly-stagger.moly-visible > *:nth-child(2)  { animation-delay: 80ms;  animation-name: moly-fade-up; }
.moly-stagger.moly-visible > *:nth-child(3)  { animation-delay: 160ms; animation-name: moly-fade-up; }
.moly-stagger.moly-visible > *:nth-child(4)  { animation-delay: 240ms; animation-name: moly-fade-up; }
.moly-stagger.moly-visible > *:nth-child(5)  { animation-delay: 320ms; animation-name: moly-fade-up; }
.moly-stagger.moly-visible > *:nth-child(6)  { animation-delay: 400ms; animation-name: moly-fade-up; }

/* ── 4. HIDE ON BREAKPOINTS ──────────────────────────────── */
@media screen and (max-width: 749px) {
  .moly-hide-mobile { display: none !important; }
}

@media screen and (min-width: 750px) {
  .moly-hide-desktop { display: none !important; }
}

/* ── 5. BUTTONS ──────────────────────────────────────────── */
.moly-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--moly-border-radius);
  font-weight: 600;
  font-size: var(--moly-text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--moly-duration) var(--moly-ease);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.moly-btn:active {
  transform: scale(0.97);
}

/* Primary */
.moly-btn--primary {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-foreground));
}

.moly-btn--primary:hover {
  background: transparent;
  color: rgb(var(--color-foreground));
  transform: translateY(-2px);
  box-shadow: var(--moly-shadow);
}

/* Secondary */
.moly-btn--secondary {
  background: transparent;
  color: rgb(var(--color-foreground));
  border-color: rgb(var(--color-foreground));
}

.moly-btn--secondary:hover {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  transform: translateY(-2px);
}

/* Ghost */
.moly-btn--ghost {
  background: transparent;
  color: rgb(var(--color-foreground));
  border-color: rgba(var(--color-foreground), 0.2);
}

.moly-btn--ghost:hover {
  border-color: rgb(var(--color-foreground));
  transform: translateY(-2px);
}

/* Sizes */
.moly-btn--sm { padding: 8px 16px; font-size: var(--moly-text-xs); }
.moly-btn--lg { padding: 18px 36px; font-size: var(--moly-text-base); }
.moly-btn--xl { padding: 22px 44px; font-size: var(--moly-text-lg); font-weight: 700; }
.moly-btn--full { width: 100%; }

/* Hover Ripple Effect */
.moly-btn--ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
  border-radius: inherit;
  transition: transform 0.5s var(--moly-ease);
}
.moly-btn--ripple:hover::after {
  transform: scale(2);
  opacity: 0;
}

/* Shimmer Effect */
.moly-btn--shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: moly-shimmer 2s infinite;
}

/* ── 6. BADGES & TAGS ────────────────────────────────────── */
.moly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: var(--moly-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.moly-badge--primary { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
.moly-badge--sale { background: var(--moly-danger); color: #fff; }
.moly-badge--new { background: var(--moly-info); color: #fff; }
.moly-badge--sold-out { background: #6b7280; color: #fff; }
.moly-badge--best-seller { background: var(--moly-warning); color: #fff; }
.moly-badge--success { background: var(--moly-success); color: #fff; }

/* ── 7. RATING STARS ─────────────────────────────────────── */
.moly-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--moly-star);
}

.moly-stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.moly-stars--lg svg { width: 20px; height: 20px; }
.moly-stars--sm svg { width: 12px; height: 12px; }

.moly-rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moly-rating-count {
  font-size: var(--moly-text-sm);
  opacity: 0.7;
}

/* ── 8. TICKER (Announcement Scrolling) ──────────────────── */
.moly-ticker {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.moly-ticker__track {
  display: inline-flex;
  animation: moly-ticker var(--ticker-speed, 20s) linear infinite;
  will-change: transform;
}

.moly-ticker__track:hover {
  animation-play-state: paused;
}

.moly-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  white-space: nowrap;
}

/* Vertical Ticker */
.moly-ticker--vertical {
  overflow: hidden;
  height: var(--ticker-height, 200px);
}

.moly-ticker--vertical .moly-ticker__track {
  display: inline-flex;
  flex-direction: column;
  animation: moly-ticker-vertical var(--ticker-speed, 10s) linear infinite;
}

/* ── 9. COUNTDOWN TIMER ──────────────────────────────────── */
.moly-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moly-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.moly-countdown__num {
  font-size: var(--moly-text-3xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-heading-family);
}

.moly-countdown__label {
  font-size: var(--moly-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-top: 2px;
}

.moly-countdown__sep {
  font-size: var(--moly-text-2xl);
  font-weight: 700;
  opacity: 0.4;
  margin-bottom: 16px;
  animation: moly-countdown-blink 1s ease-in-out infinite;
}

/* Compact variant */
.moly-countdown--compact .moly-countdown__unit {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  padding: 8px 12px;
  border-radius: var(--moly-border-radius);
  min-width: 48px;
}

.moly-countdown--compact .moly-countdown__num {
  font-size: var(--moly-text-xl);
}

/* ── 10. BEFORE & AFTER SLIDER ───────────────────────────── */
.moly-before-after {
  position: relative;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  border-radius: var(--moly-border-radius-lg);
}

.moly-before-after__before,
.moly-before-after__after {
  position: absolute;
  inset: 0;
}

.moly-before-after__before { overflow: hidden; }

.moly-before-after__before img,
.moly-before-after__after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moly-before-after__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  cursor: col-resize;
  z-index: 10;
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

.moly-before-after__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  cursor: col-resize;
  transition: transform var(--moly-duration) var(--moly-ease-bounce);
}

.moly-before-after__handle:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.moly-before-after__label {
  position: absolute;
  top: 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: var(--moly-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.moly-before-after__label--before { left: 12px; }
.moly-before-after__label--after { right: 12px; }

/* ── 11. COMPARISON TABLE ────────────────────────────────── */
.moly-comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--moly-border-radius-lg);
  overflow: hidden;
  box-shadow: var(--moly-shadow);
}

.moly-comparison-table th,
.moly-comparison-table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

.moly-comparison-table th {
  font-weight: 700;
  font-size: var(--moly-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(var(--color-foreground), 0.04);
}

.moly-comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.moly-comparison-table .moly-check {
  color: var(--moly-success);
  font-size: 1.2rem;
}

.moly-comparison-table .moly-cross {
  color: var(--moly-danger);
  opacity: 0.5;
}

.moly-comparison-table__highlight td {
  background: rgba(var(--color-foreground), 0.03);
}

/* ── 12. PRICING TABLE ───────────────────────────────────── */
.moly-pricing-table {
  display: grid;
  gap: 24px;
}

@media screen and (min-width: 750px) {
  .moly-pricing-table { grid-template-columns: repeat(var(--cols, 3), 1fr); }
}

.moly-pricing-card {
  border: 2px solid rgba(var(--color-foreground), 0.12);
  border-radius: var(--moly-border-radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all var(--moly-duration) var(--moly-ease);
  position: relative;
  overflow: hidden;
}

.moly-pricing-card:hover {
  border-color: rgb(var(--color-foreground));
  box-shadow: var(--moly-shadow-lg);
  transform: translateY(-4px);
}

.moly-pricing-card--featured {
  border-color: rgb(var(--color-foreground));
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

.moly-pricing-card__badge {
  position: absolute;
  top: 20px;
  right: -20px;
  transform: rotate(45deg);
  background: var(--moly-warning);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 28px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.moly-pricing-card__price {
  font-size: var(--moly-text-5xl);
  font-weight: 900;
  font-family: var(--font-heading-family);
  line-height: 1;
}

.moly-pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.moly-pricing-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--moly-text-sm);
}

/* ── 13. QUANTITY BREAKS ─────────────────────────────────── */
.moly-qty-breaks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.moly-qty-break {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 2px solid rgba(var(--color-foreground), 0.12);
  border-radius: var(--moly-border-radius-lg);
  cursor: pointer;
  transition: all var(--moly-duration) var(--moly-ease);
  position: relative;
  background: rgb(var(--color-background));
}

.moly-qty-break:hover {
  border-color: rgb(var(--color-foreground));
  background: rgba(var(--color-foreground), 0.02);
}

.moly-qty-break.moly-active {
  border-color: rgb(var(--color-foreground));
  background: rgba(var(--color-foreground), 0.04);
}

.moly-qty-break__image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}

.moly-qty-break__info {
  flex: 1;
}

.moly-qty-break__name {
  font-weight: 700;
  font-size: var(--moly-text-base);
  margin-bottom: 2px;
}

.moly-qty-break__per-unit {
  font-size: var(--moly-text-sm);
  opacity: 0.6;
}

.moly-qty-break__save {
  background: var(--moly-success);
  color: #fff;
  font-size: var(--moly-text-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
}

.moly-qty-break__price {
  font-weight: 800;
  font-size: var(--moly-text-xl);
  font-family: var(--font-heading-family);
  text-align: right;
}

.moly-qty-break__old-price {
  font-size: var(--moly-text-sm);
  opacity: 0.5;
  text-decoration: line-through;
  text-align: right;
}

.moly-qty-break__radio {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(var(--color-foreground), 0.3);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--moly-duration) var(--moly-ease);
}

.moly-qty-break.moly-active .moly-qty-break__radio {
  border-color: rgb(var(--color-foreground));
  background: rgb(var(--color-foreground));
}

.moly-qty-break.moly-active .moly-qty-break__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--color-background));
}

/* ── 14. STICKY ADD TO CART ──────────────────────────────── */
.moly-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--moly-z-sticky);
  background: rgb(var(--color-background));
  border-top: 1px solid rgba(var(--color-foreground), 0.12);
  padding: 12px 16px;
  transform: translateY(100%);
  transition: transform var(--moly-duration-slow) var(--moly-ease);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
  will-change: transform;
}

.moly-sticky-atc.moly-visible {
  transform: translateY(0);
}

.moly-sticky-atc__inner {
  max-width: var(--moly-page-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.moly-sticky-atc__product {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.moly-sticky-atc__image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.moly-sticky-atc__title {
  font-weight: 700;
  font-size: var(--moly-text-sm);
  line-height: 1.3;
}

.moly-sticky-atc__price {
  font-weight: 800;
  font-size: var(--moly-text-lg);
}

.moly-sticky-atc__btn {
  flex-shrink: 0;
}

/* ── 15. CART DRAWER ─────────────────────────────────────── */
.moly-cart-progress {
  height: 6px;
  background: rgba(var(--color-foreground), 0.1);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;
}

.moly-cart-progress__bar {
  height: 100%;
  background: var(--moly-success);
  border-radius: 100px;
  transition: width 0.5s var(--moly-ease);
  animation: moly-progress-bar 0.5s var(--moly-ease) both;
}

.moly-cart-checkpoint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(var(--color-foreground), 0.04);
  border-radius: var(--moly-border-radius);
  margin-bottom: 12px;
}

.moly-cart-checkpoint__icon {
  font-size: 1.4rem;
}

.moly-cart-checkpoint__text {
  font-size: var(--moly-text-sm);
  font-weight: 600;
  flex: 1;
  padding: 0 10px;
}

/* ── 16. TRUST BADGES / PAYMENT ICONS ───────────────────── */
.moly-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.moly-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--moly-text-xs);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--moly-border-radius);
  border: 1px solid rgba(var(--color-foreground), 0.1);
  transition: border-color var(--moly-duration) var(--moly-ease);
}

.moly-trust-badge:hover {
  border-color: rgba(var(--color-foreground), 0.3);
}

.moly-trust-badge svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.moly-payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.moly-payment-badge {
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  padding: 2px 6px;
  object-fit: contain;
}

/* ── 17. SHIPPING CHECKPOINTS ────────────────────────────── */
.moly-shipping-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  gap: 8px;
}

.moly-shipping-steps::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: rgba(var(--color-foreground), 0.15);
  z-index: 0;
}

.moly-shipping-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.moly-shipping-step__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(var(--color-foreground), 0.2);
  background: rgb(var(--color-background));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all var(--moly-duration) var(--moly-ease);
  flex-shrink: 0;
}

.moly-shipping-step.moly-active .moly-shipping-step__dot {
  background: var(--moly-success);
  border-color: var(--moly-success);
  color: #fff;
}

.moly-shipping-step__label {
  font-size: var(--moly-text-xs);
  font-weight: 600;
  text-align: center;
  opacity: 0.7;
}

/* ── 18. PRODUCT IMAGE SLIDER ────────────────────────────── */
.moly-slider {
  position: relative;
  overflow: hidden;
}

.moly-slider__track {
  display: flex;
  transition: transform var(--moly-duration-slow) var(--moly-ease);
  will-change: transform;
}

.moly-slider__slide {
  flex-shrink: 0;
  width: 100%;
}

.moly-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 12px;
  pointer-events: none;
  z-index: 10;
}

.moly-slider__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--moly-shadow);
  pointer-events: all;
  transition: all var(--moly-duration) var(--moly-ease);
  backdrop-filter: blur(4px);
}

.moly-slider__btn:hover {
  background: #fff;
  transform: scale(1.1);
  box-shadow: var(--moly-shadow-lg);
}

.moly-slider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.moly-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: rgba(var(--color-foreground), 0.2);
  cursor: pointer;
  transition: all var(--moly-duration) var(--moly-ease);
  border: none;
  padding: 0;
}

.moly-slider__dot.moly-active {
  background: rgb(var(--color-foreground));
  width: 24px;
}

/* Thumbnails */
.moly-slider-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.moly-slider-thumbs::-webkit-scrollbar { display: none; }

.moly-slider-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: border-color var(--moly-duration) var(--moly-ease);
  opacity: 0.7;
}

.moly-slider-thumb.moly-active,
.moly-slider-thumb:hover {
  border-color: rgb(var(--color-foreground));
  opacity: 1;
}

/* ── 19. TABS ────────────────────────────────────────────── */
.moly-tabs__nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid rgba(var(--color-foreground), 0.1);
  overflow-x: auto;
  scrollbar-width: none;
}

.moly-tabs__nav::-webkit-scrollbar { display: none; }

.moly-tab-btn {
  padding: 12px 20px;
  font-size: var(--moly-text-sm);
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  color: rgba(var(--color-foreground), 0.5);
  transition: color var(--moly-duration) var(--moly-ease);
}

.moly-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgb(var(--color-foreground));
  transform: scaleX(0);
  transition: transform var(--moly-duration) var(--moly-ease);
}

.moly-tab-btn.moly-active,
.moly-tab-btn:hover {
  color: rgb(var(--color-foreground));
}

.moly-tab-btn.moly-active::after {
  transform: scaleX(1);
}

.moly-tab-panel {
  display: none;
  padding: 24px 0;
  animation: moly-fade-in var(--moly-duration) var(--moly-ease) both;
}

.moly-tab-panel.moly-active {
  display: block;
}

/* ── 20. TESTIMONIALS / REVIEWS ──────────────────────────── */
.moly-review-card {
  background: rgba(var(--color-foreground), 0.03);
  border: 1px solid rgba(var(--color-foreground), 0.08);
  border-radius: var(--moly-border-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--moly-duration) var(--moly-ease);
}

.moly-review-card:hover {
  box-shadow: var(--moly-shadow);
}

.moly-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.moly-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(var(--color-foreground), 0.1);
}

.moly-review-name {
  font-weight: 700;
  font-size: var(--moly-text-sm);
}

.moly-review-verified {
  font-size: var(--moly-text-xs);
  color: var(--moly-success);
  font-weight: 600;
}

.moly-review-text {
  font-size: var(--moly-text-sm);
  line-height: 1.7;
  opacity: 0.85;
}

/* Facebook-style testimonials */
.moly-fb-review {
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--moly-shadow-sm);
}

.moly-fb-review__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.moly-fb-review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.moly-fb-review__meta {
  flex: 1;
}

.moly-fb-review__name {
  font-weight: 700;
  font-size: var(--moly-text-sm);
  color: #1877f2;
}

.moly-fb-review__time {
  font-size: var(--moly-text-xs);
  opacity: 0.5;
}

.moly-fb-review__content {
  font-size: var(--moly-text-sm);
  line-height: 1.6;
  margin-bottom: 12px;
}

.moly-fb-review__image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 12px;
}

.moly-fb-review__actions {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
}

.moly-fb-review__action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--moly-text-sm);
  font-weight: 600;
  opacity: 0.6;
  cursor: pointer;
}

/* ── 21. RESULTS SECTION ─────────────────────────────────── */
.moly-results {
  display: grid;
  gap: 24px;
}

@media screen and (min-width: 750px) {
  .moly-results { grid-template-columns: repeat(var(--cols, 3), 1fr); }
}

.moly-result-item {
  text-align: center;
  padding: 32px 24px;
}

.moly-result-number {
  font-size: var(--moly-text-6xl);
  font-weight: 900;
  font-family: var(--font-heading-family);
  line-height: 1;
  margin-bottom: 8px;
}

.moly-result-label {
  font-size: var(--moly-text-sm);
  opacity: 0.7;
  line-height: 1.5;
}

/* Counter animation */
.moly-counter {
  display: inline-block;
  transition: opacity 0.3s;
}

/* ── 22. BUNDLE OFFER ────────────────────────────────────── */
.moly-bundle {
  border: 2px solid rgba(var(--color-foreground), 0.12);
  border-radius: var(--moly-border-radius-xl);
  overflow: hidden;
}

.moly-bundle__header {
  background: rgba(var(--color-foreground), 0.04);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

.moly-bundle__title {
  font-weight: 800;
  font-size: var(--moly-text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.moly-bundle__save {
  background: var(--moly-danger);
  color: #fff;
  font-weight: 700;
  font-size: var(--moly-text-xs);
  padding: 4px 10px;
  border-radius: 100px;
}

.moly-bundle__products {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  flex-wrap: wrap;
}

.moly-bundle__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.moly-bundle__product-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(var(--color-foreground), 0.1);
  padding: 8px;
}

.moly-bundle__product-name {
  font-size: var(--moly-text-xs);
  font-weight: 600;
  max-width: 80px;
  line-height: 1.3;
}

.moly-bundle__plus {
  font-size: var(--moly-text-xl);
  font-weight: 300;
  opacity: 0.3;
  flex-shrink: 0;
}

.moly-bundle__footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.moly-bundle__prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.moly-bundle__price-new {
  font-size: var(--moly-text-2xl);
  font-weight: 900;
  font-family: var(--font-heading-family);
}

.moly-bundle__price-old {
  font-size: var(--moly-text-base);
  text-decoration: line-through;
  opacity: 0.5;
}

/* ── 23. COLLAPSIBLE ROWS ────────────────────────────────── */
.moly-accordion {
  border-top: 1px solid rgba(var(--color-foreground), 0.12);
}

.moly-accordion__item {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.12);
}

.moly-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--moly-text-base);
  font-weight: 600;
  gap: 16px;
  transition: opacity var(--moly-duration) var(--moly-ease);
}

.moly-accordion__trigger:hover {
  opacity: 0.7;
}

.moly-accordion__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
}

.moly-accordion__icon::before,
.moly-accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--moly-duration) var(--moly-ease);
}

.moly-accordion__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}

.moly-accordion__icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.moly-accordion__item.moly-open .moly-accordion__icon::after {
  transform: translateX(-50%) rotate(90deg);
}

.moly-accordion__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--moly-duration-slow) var(--moly-ease);
}

.moly-accordion__item.moly-open .moly-accordion__body {
  max-height: 600px;
}

.moly-accordion__content {
  padding-bottom: 20px;
  font-size: var(--moly-text-sm);
  line-height: 1.7;
  opacity: 0.8;
}

/* ── 24. URGENCY / INVENTORY ─────────────────────────────── */
.moly-urgency {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--moly-border-radius);
  font-size: var(--moly-text-sm);
  font-weight: 600;
}

.moly-urgency--warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #92400e;
}

.moly-urgency--danger {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #991b1b;
}

.moly-urgency--success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #166534;
}

.moly-inventory-bar {
  height: 6px;
  background: rgba(var(--color-foreground), 0.1);
  border-radius: 100px;
  overflow: hidden;
}

.moly-inventory-bar__fill {
  height: 100%;
  border-radius: 100px;
  background: var(--moly-danger);
  transition: width 0.6s var(--moly-ease);
}

/* ── 25. EMOJI BENEFITS ──────────────────────────────────── */
.moly-emoji-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.moly-emoji-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--moly-text-sm);
  font-weight: 600;
}

.moly-emoji-benefit__emoji {
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ── 26. INSTAGRAM STORIES LAYOUT ────────────────────────── */
.moly-stories {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.moly-stories::-webkit-scrollbar { display: none; }

.moly-story {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.moly-story__ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  padding: 3px;
  transition: transform var(--moly-duration) var(--moly-ease-bounce);
}

.moly-story__ring:hover {
  transform: scale(1.05);
}

.moly-story__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgb(var(--color-background));
}

.moly-story__label {
  font-size: var(--moly-text-xs);
  font-weight: 600;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 27. PROMO POPUP ─────────────────────────────────────── */
.moly-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--moly-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--moly-duration) var(--moly-ease);
  backdrop-filter: blur(4px);
}

.moly-popup-overlay.moly-visible {
  opacity: 1;
  pointer-events: all;
}

.moly-popup {
  background: rgb(var(--color-background));
  border-radius: var(--moly-border-radius-xl);
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  transform: scale(0.9) translateY(24px);
  transition: transform var(--moly-duration-slow) var(--moly-ease-bounce);
  box-shadow: var(--moly-shadow-xl);
}

.moly-popup-overlay.moly-visible .moly-popup {
  transform: scale(1) translateY(0);
}

.moly-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--color-foreground), 0.08);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--moly-duration) var(--moly-ease);
}

.moly-popup__close:hover {
  background: rgba(var(--color-foreground), 0.15);
}

/* ── 28. SCROLL TO TOP ───────────────────────────────────── */
.moly-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--moly-shadow-lg);
  z-index: var(--moly-z-above);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all var(--moly-duration) var(--moly-ease);
}

.moly-scroll-top.moly-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.moly-scroll-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--moly-shadow-xl);
}

/* ── 29. PAGE SCROLL PROGRESS ────────────────────────────── */
.moly-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: rgb(var(--color-foreground));
  z-index: var(--moly-z-top);
  transition: width 0.1s linear;
  will-change: width;
}

/* ── 30. MEGA MENU ───────────────────────────────────────── */
.moly-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgb(var(--color-background));
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
  box-shadow: var(--moly-shadow-xl);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all var(--moly-duration) var(--moly-ease);
  z-index: var(--moly-z-overlay);
}

.moly-megamenu.moly-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.moly-megamenu__inner {
  max-width: var(--moly-page-width);
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.moly-megamenu__column-title {
  font-size: var(--moly-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  opacity: 0.5;
}

.moly-megamenu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.moly-megamenu__link {
  font-size: var(--moly-text-sm);
  font-weight: 500;
  transition: opacity var(--moly-duration) var(--moly-ease);
  text-decoration: none;
  color: rgb(var(--color-foreground));
}

.moly-megamenu__link:hover {
  opacity: 0.6;
}

/* ── 31. SHOPPABLE IMAGE ─────────────────────────────────── */
.moly-shoppable {
  position: relative;
  display: inline-block;
}

.moly-shoppable__dot {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(var(--color-background));
  border: 2px solid rgb(var(--color-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: all var(--moly-duration) var(--moly-ease-bounce);
  z-index: 5;
}

.moly-shoppable__dot::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  animation: moly-pulse 2s ease-in-out infinite;
}

.moly-shoppable__dot:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.moly-shoppable__card {
  position: absolute;
  background: rgb(var(--color-background));
  border-radius: var(--moly-border-radius-lg);
  padding: 16px;
  box-shadow: var(--moly-shadow-xl);
  width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: all var(--moly-duration) var(--moly-ease-bounce);
  z-index: 10;
}

.moly-shoppable__dot:hover .moly-shoppable__card,
.moly-shoppable__dot.moly-active .moly-shoppable__card {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

/* ── 32. TIMELINE ────────────────────────────────────────── */
.moly-timeline {
  position: relative;
  padding-left: 32px;
}

.moly-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(var(--color-foreground), 0.1);
}

.moly-timeline__item {
  position: relative;
  margin-bottom: 32px;
}

.moly-timeline__item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgb(var(--color-foreground));
  border: 3px solid rgb(var(--color-background));
  box-shadow: 0 0 0 2px rgba(var(--color-foreground), 0.3);
}

.moly-timeline__date {
  font-size: var(--moly-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin-bottom: 6px;
}

.moly-timeline__title {
  font-weight: 700;
  margin-bottom: 6px;
}

.moly-timeline__text {
  font-size: var(--moly-text-sm);
  line-height: 1.6;
  opacity: 0.75;
}

/* ── 33. 3D PARALLAX HERO ────────────────────────────────── */
.moly-parallax {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.moly-parallax__layer {
  position: absolute;
  inset: -20%;
  will-change: transform;
  transition: transform 0.05s linear;
}

.moly-parallax__layer--1 { z-index: 1; }
.moly-parallax__layer--2 { z-index: 2; }
.moly-parallax__layer--3 { z-index: 3; }
.moly-parallax__content  { position: relative; z-index: 10; }

/* ── 34. HIGHLIGHTED TEXT ────────────────────────────────── */
.moly-highlight {
  position: relative;
  display: inline;
}

.moly-highlight--underline {
  text-decoration: underline;
  text-decoration-color: rgb(var(--color-button));
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.moly-highlight--bg {
  background: rgba(var(--color-button), 0.15);
  padding: 0 4px;
  border-radius: 4px;
}

.moly-highlight--marker {
  background: linear-gradient(104deg, rgba(130,255,173,.0) 0.9%, rgba(130,255,173,.7) 2.4%, rgba(130,255,173,.5) 5.8%, rgba(130,255,173,.1) 93%, rgba(130,255,173,.7) 96%, rgba(130,255,173,.0) 98%);
  padding: 0 3px;
}

.moly-highlight--italic {
  font-style: italic;
  color: rgb(var(--color-button));
}

/* ── 35. SUBSCRIPTION WIDGET ─────────────────────────────── */
.moly-subscription {
  border: 2px solid rgba(var(--color-foreground), 0.12);
  border-radius: var(--moly-border-radius-xl);
  overflow: hidden;
}

.moly-subscription__option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background var(--moly-duration) var(--moly-ease);
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

.moly-subscription__option:last-child {
  border-bottom: none;
}

.moly-subscription__option.moly-active {
  background: rgba(var(--color-foreground), 0.03);
}

.moly-subscription__option:hover {
  background: rgba(var(--color-foreground), 0.02);
}

.moly-subscription__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(var(--color-foreground), 0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--moly-duration) var(--moly-ease);
}

.moly-subscription__option.moly-active .moly-subscription__radio {
  border-color: rgb(var(--color-foreground));
  background: rgb(var(--color-foreground));
}

.moly-subscription__option.moly-active .moly-subscription__radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--color-background));
}

.moly-subscription__info {
  flex: 1;
}

.moly-subscription__label {
  font-weight: 700;
  font-size: var(--moly-text-sm);
}

.moly-subscription__perks {
  font-size: var(--moly-text-xs);
  opacity: 0.6;
  margin-top: 2px;
}

.moly-subscription__price {
  font-weight: 800;
  font-size: var(--moly-text-xl);
  font-family: var(--font-heading-family);
}

.moly-subscription__save {
  background: var(--moly-success);
  color: #fff;
  font-size: var(--moly-text-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
}

/* ── 36. UPSELL CARD ─────────────────────────────────────── */
.moly-upsell {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1.5px solid rgba(var(--color-foreground), 0.12);
  border-radius: var(--moly-border-radius-lg);
  cursor: pointer;
  transition: all var(--moly-duration) var(--moly-ease);
  background: rgb(var(--color-background));
}

.moly-upsell:hover {
  border-color: rgb(var(--color-foreground));
  box-shadow: var(--moly-shadow);
}

.moly-upsell.moly-active {
  border-color: rgb(var(--color-foreground));
  background: rgba(var(--color-foreground), 0.02);
}

.moly-upsell__image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}

.moly-upsell__info {
  flex: 1;
  min-width: 0;
}

.moly-upsell__name {
  font-weight: 700;
  font-size: var(--moly-text-sm);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moly-upsell__desc {
  font-size: var(--moly-text-xs);
  opacity: 0.6;
}

.moly-upsell__price {
  font-weight: 800;
  font-size: var(--moly-text-lg);
  flex-shrink: 0;
}

.moly-upsell__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(var(--color-foreground), 0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--moly-duration) var(--moly-ease);
}

.moly-upsell.moly-active .moly-upsell__check {
  background: var(--moly-success);
  border-color: var(--moly-success);
  color: #fff;
}

/* ── 37. SIZING CHART ────────────────────────────────────── */
.moly-sizing-modal {
  max-width: 640px;
}

.moly-sizing-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--moly-text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity var(--moly-duration) var(--moly-ease);
  background: transparent;
  border: none;
  color: rgb(var(--color-foreground));
}

.moly-sizing-trigger:hover {
  opacity: 0.7;
}

/* ── 38. VARIANT PICKER ──────────────────────────────────── */
.moly-variant-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--moly-text-sm);
  font-weight: 600;
  margin-bottom: 10px;
}

.moly-variant-label__selected {
  font-weight: 400;
  opacity: 0.6;
}

.moly-variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.moly-variant-pill {
  padding: 8px 18px;
  border: 2px solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--moly-border-radius);
  font-size: var(--moly-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--moly-duration) var(--moly-ease);
  background: transparent;
  color: rgb(var(--color-foreground));
  position: relative;
}

.moly-variant-pill:hover {
  border-color: rgb(var(--color-foreground));
}

.moly-variant-pill.moly-active {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-foreground));
}

.moly-variant-pill.moly-sold-out {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Color swatches */
.moly-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--moly-duration) var(--moly-ease);
  border: 2px solid rgba(var(--color-foreground), 0.1);
  padding: 2px;
  position: relative;
}

.moly-swatch:hover {
  transform: scale(1.1);
}

.moly-swatch.moly-active {
  border-color: rgb(var(--color-foreground));
}

.moly-swatch__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Select dropdown */
.moly-variant-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--moly-border-radius);
  font-size: var(--moly-text-sm);
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background: rgb(var(--color-background)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  transition: border-color var(--moly-duration) var(--moly-ease);
  color: rgb(var(--color-foreground));
}

.moly-variant-select:focus {
  outline: none;
  border-color: rgb(var(--color-foreground));
}

/* ── 39. ICON WITH TEXT / ICON BAR ───────────────────────── */
.moly-icon-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.moly-icon-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--moly-text-sm);
  font-weight: 600;
}

.moly-icon-bar__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--moly-border-radius);
  background: rgba(var(--color-foreground), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

/* ── 40. SKELETON LOADER ─────────────────────────────────── */
.moly-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: moly-shimmer 1.5s infinite;
  border-radius: var(--moly-border-radius);
}

/* ── 41. TRACK ORDER ─────────────────────────────────────── */
.moly-track-form {
  max-width: 480px;
  margin: 0 auto;
}

.moly-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--moly-border-radius);
  font-size: var(--moly-text-base);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  transition: border-color var(--moly-duration) var(--moly-ease);
}

.moly-input:focus {
  outline: none;
  border-color: rgb(var(--color-foreground));
}

/* ── 42. MUSIC PLAYER ────────────────────────────────────── */
.moly-music-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(var(--color-foreground), 0.04);
  border-radius: var(--moly-border-radius-lg);
  border: 1px solid rgba(var(--color-foreground), 0.1);
}

.moly-music-player__artwork {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.moly-music-player__info {
  flex: 1;
  min-width: 0;
}

.moly-music-player__title {
  font-weight: 700;
  font-size: var(--moly-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moly-music-player__artist {
  font-size: var(--moly-text-xs);
  opacity: 0.6;
}

.moly-music-player__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.moly-music-player__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--moly-duration) var(--moly-ease-bounce);
  font-size: 16px;
}

.moly-music-player__btn:hover {
  transform: scale(1.1);
}

.moly-music-player__progress {
  flex: 1;
  height: 4px;
  background: rgba(var(--color-foreground), 0.15);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
}

.moly-music-player__progress-fill {
  height: 100%;
  background: rgb(var(--color-foreground));
  border-radius: 100px;
  pointer-events: none;
}

/* ── 43. QUANTITY SELECTOR ───────────────────────────────── */
.moly-qty-selector {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--moly-border-radius);
  overflow: hidden;
  width: fit-content;
}

.moly-qty-selector__btn {
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(var(--color-foreground), 0.04);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--moly-duration) var(--moly-ease);
  color: rgb(var(--color-foreground));
}

.moly-qty-selector__btn:hover {
  background: rgba(var(--color-foreground), 0.1);
}

.moly-qty-selector__input {
  width: 56px;
  text-align: center;
  border: none;
  font-weight: 700;
  font-size: var(--moly-text-base);
  background: transparent;
  color: rgb(var(--color-foreground));
  -moz-appearance: textfield;
}

.moly-qty-selector__input::-webkit-outer-spin-button,
.moly-qty-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* ── 44. SECTION LAYOUT UTILITIES ────────────────────────── */
.moly-section {
  padding-top: var(--section-padding-top, 60px);
  padding-bottom: var(--section-padding-bottom, 60px);
}

.moly-section--narrow { max-width: 720px; margin: 0 auto; }
.moly-section--full { max-width: 100%; }

.moly-grid {
  display: grid;
  gap: var(--grid-gap, 24px);
}

.moly-grid--1 { grid-template-columns: 1fr; }
.moly-grid--2 { grid-template-columns: repeat(2, 1fr); }
.moly-grid--3 { grid-template-columns: repeat(3, 1fr); }
.moly-grid--4 { grid-template-columns: repeat(4, 1fr); }
.moly-grid--5 { grid-template-columns: repeat(5, 1fr); }
.moly-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media screen and (max-width: 749px) {
  .moly-grid--2,
  .moly-grid--3,
  .moly-grid--4,
  .moly-grid--5,
  .moly-grid--6 {
    grid-template-columns: var(--mobile-cols, 1fr);
  }
}

/* Text alignment classes */
.moly-text-left   { text-align: left; }
.moly-text-center { text-align: center; }
.moly-text-right  { text-align: right; }

/* Flex utilities */
.moly-flex { display: flex; }
.moly-flex-center { display: flex; align-items: center; justify-content: center; }
.moly-flex-between { display: flex; align-items: center; justify-content: space-between; }
.moly-flex-col { display: flex; flex-direction: column; }
.moly-gap-xs { gap: 4px; }
.moly-gap-sm { gap: 8px; }
.moly-gap { gap: 16px; }
.moly-gap-lg { gap: 24px; }
.moly-gap-xl { gap: 32px; }

/* ── 45. INDIVIDUAL PAGE COLOR CHANGER ───────────────────── */
.moly-page-colors {
  --page-bg: rgb(var(--color-background));
  --page-text: rgb(var(--color-foreground));
  background: var(--page-bg);
  color: var(--page-text);
}

/* ── 46. JSON ANIMATION CONTAINER ────────────────────────── */
.moly-lottie {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 47. TIKTOK VIDEOS ───────────────────────────────────── */
.moly-tiktok-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
}

@media screen and (max-width: 749px) {
  .moly-tiktok-grid { grid-template-columns: repeat(2, 1fr); }
}

.moly-tiktok-item {
  aspect-ratio: 9/16;
  border-radius: var(--moly-border-radius-lg);
  overflow: hidden;
  position: relative;
  background: #000;
}

.moly-tiktok-item iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ── 48. FEATURED ON / PRESS ─────────────────────────────── */
.moly-press {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: center;
}

.moly-press__logo {
  height: 32px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all var(--moly-duration) var(--moly-ease);
  object-fit: contain;
}

.moly-press__logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ── 49. CUSTOM COLUMNS ──────────────────────────────────── */
.moly-custom-cols {
  display: grid;
  gap: var(--cols-gap, 24px);
}

@media screen and (min-width: 750px) {
  .moly-custom-cols {
    grid-template-columns: var(--cols-template, repeat(3, 1fr));
  }
}

.moly-custom-col {
  position: relative;
  overflow: hidden;
  border-radius: var(--col-radius, 0px);
}

/* ── 50. SAVINGS DISPLAY ─────────────────────────────────── */
.moly-savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--moly-text-sm);
  font-weight: 700;
  color: var(--moly-success);
}

.moly-savings__amount {
  font-size: var(--moly-text-lg);
}

/* ── 51. RESPONSIVE UTILITIES ────────────────────────────── */
@media screen and (max-width: 749px) {
  .moly-section {
    padding-top: var(--section-padding-top-mobile, calc(var(--section-padding-top, 60px) * 0.6));
    padding-bottom: var(--section-padding-bottom-mobile, calc(var(--section-padding-bottom, 60px) * 0.6));
  }

  .moly-countdown__num {
    font-size: var(--moly-text-2xl);
  }

  .moly-result-number {
    font-size: var(--moly-text-5xl);
  }
}

/* ── 52. PRINT ───────────────────────────────────────────── */
@media print {
  .moly-sticky-atc,
  .moly-scroll-top,
  .moly-popup-overlay,
  .moly-page-progress {
    display: none !important;
  }
}