:root {
  --bg: #060608;
  --panel: #0d0f14;
  --panel-2: #121521;
  --text: #f7f6f2;
  --muted: #a9a7a2;
  --accent: #9ee6bf;
  --accent-2: #6ab7ff;
  --line: rgba(255, 255, 255, 0.08);
  --card: rgba(255, 255, 255, 0.04);
  --radius: 18px;
  --shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Space Grotesk", serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hidden {
  display: none !important;
}

.is-hidden {
  display: none !important;
}

.is-block {
  display: block !important;
}

.is-flex {
  display: flex !important;
}

.is-inline-block {
  display: inline-block !important;
}

.no-scroll {
  overflow: hidden !important;
}

body {
  font-family: var(--font-body);
  background: radial-gradient(circle at 20% 20%, rgba(110, 231, 183, 0.08), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(106, 183, 255, 0.07), transparent 30%),
    linear-gradient(145deg, #050607, #07090d 60%, #060608);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  padding: 32px 32px 64px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 16px;
  z-index: 10;
  box-shadow: var(--shadow);
}

.promo-banner {
  position: relative;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(106, 183, 255, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 50%, rgba(158, 230, 191, 0.24), transparent 34%),
    radial-gradient(circle at 88% 50%, rgba(106, 183, 255, 0.24), transparent 38%),
    linear-gradient(125deg, #0f1724, #132033 52%, #0f1a2a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 30px rgba(106, 183, 255, 0.08);
  overflow: hidden;
}

.promo-rotator {
  margin-top: 16px;
}

.promo-rotator-track {
  position: relative;
}

.promo-slide {
  display: none;
}

.promo-slide.is-active {
  display: flex;
  animation: promoFadeIn 0.3s ease;
}

.promo-rotator-dots {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.promo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
}

.promo-dot.is-active {
  background: #9ee6bf;
  border-color: #9ee6bf;
}

@keyframes promoFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.promo-banner-secondary {
  margin-top: 0;
  border-color: rgba(158, 230, 191, 0.34);
  background:
    radial-gradient(circle at 10% 50%, rgba(106, 183, 255, 0.16), transparent 34%),
    radial-gradient(circle at 88% 50%, rgba(158, 230, 191, 0.16), transparent 38%),
    linear-gradient(125deg, #111a1a, #132423 52%, #10201f);
}

.promo-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -36%;
  width: 32%;
  height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.17), transparent);
  transform: skewX(-16deg);
  animation: promoSweep 4.8s ease-in-out infinite;
}

.promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(158, 230, 191, 0.28);
  pointer-events: none;
}

.promo-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.promo-banner-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-banner-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #d9fff0;
  font-weight: 700;
  margin: 0;
  background: rgba(158, 230, 191, 0.18);
  border: 1px solid rgba(158, 230, 191, 0.4);
  border-radius: 999px;
  padding: 4px 9px;
}

.promo-banner-limit {
  margin: 0;
  color: #b7c8df;
  font-size: 12px;
  font-weight: 600;
}

.promo-banner-statline {
  margin: 4px 0 2px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  color: #ffe9c6;
  border-bottom: 1px solid rgba(255, 208, 138, 0.45);
  padding-bottom: 2px;
}

.promo-banner-stat-value {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #ffd08a;
  text-shadow: 0 0 14px rgba(255, 200, 102, 0.45);
}

.promo-banner-stat-label {
  font-size: clamp(12px, 1.25vw, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f2dcb8;
}

.promo-banner-title {
  margin: 0;
  color: #f3f8ff;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.08;
  font-weight: 700;
  font-family: var(--font-display);
  text-wrap: balance;
}

.promo-banner-title span {
  color: #9ee6bf;
  text-shadow: 0 0 18px rgba(158, 230, 191, 0.35);
}

.promo-banner-text {
  margin: 0;
  color: #d8e0ec;
  font-size: 15px;
  line-height: 1.45;
  max-width: 780px;
}

.promo-banner-cta {
  white-space: nowrap;
  min-height: 52px;
  min-width: 208px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(158, 230, 191, 0.38), 0 14px 30px rgba(110, 231, 183, 0.34);
}

.promo-banner-cta:hover {
  transform: translateY(-3px) scale(1.03);
}

@keyframes promoSweep {
  0% { left: -35%; }
  55% { left: 128%; }
  100% { left: 135%; }
}

.nav nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav nav > * {
  flex-shrink: 0;
}

.nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.nav a:hover {
  color: var(--accent);
  opacity: 0.9;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.brand-link:hover {
  opacity: 0.9;
}

.brand-logo {
  height: 56px;
  max-height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(127, 173, 92, 0.3));
  transition: all 0.3s ease;
  margin-right: 10px;
}

.brand-logo:hover {
  transform: scale(1.08);
  filter: brightness(1.25) drop-shadow(0 0 16px rgba(127, 173, 92, 0.5));
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04100c;
  font-weight: 700;
  letter-spacing: 1px;
}

.brand-text .tag {
  color: var(--muted);
  font-size: 14px;
}

.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.tag {
  font-weight: 600;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.1; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

.lede { color: var(--muted); max-width: 640px; margin-top: 16px; }
.meta { color: var(--muted); font-size: 15px; }
.secure-note { max-width: 360px; }

main { display: flex; flex-direction: column; gap: 72px; margin-top: 32px; }

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  align-items: center;
}

.hero-copy {
  padding: 28px;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero-actions { margin: 24px 0 16px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 18px; }

.stat { font-size: 24px; font-weight: 700; }

.hero-card {
  padding: 28px;
  border-radius: var(--radius);
  background: radial-gradient(circle at 20% 20%, rgba(158, 230, 191, 0.14), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(106, 183, 255, 0.12), transparent 40%),
    var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-lede { color: var(--muted); margin: 10px 0 12px; }
.hero-card ul { color: var(--muted); margin-left: 18px; }
.hero-card li { margin-bottom: 8px; }

.section { display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 150px; }
.section-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

.products .filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { background: transparent; border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: 999px; transition: all 0.2s ease; }
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.active { background: var(--accent); color: #04100c; border-color: var(--accent); }

.product-grid {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.product {
  max-width: 600px;
  width: 100%;
  padding: 24px;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.price { font-size: 18px; font-weight: 700; }

.product .price-row .quantity-selector {
  margin-left: auto;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.badge { border: 1px solid var(--line); padding: 6px 10px; border-radius: 10px; color: var(--muted); font-size: 13px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-weight: 600; background: rgba(255, 255, 255, 0.03); }
.pill.light { background: rgba(255, 255, 255, 0.06); color: var(--text); }

.btn { border: none; border-radius: 12px; padding: 12px 16px; font-weight: 700; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04100c; box-shadow: 0 12px 40px rgba(110, 231, 183, 0.25); }
.btn.ghost { background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid var(--line); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.benefits .mini-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }

.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.benefit-card { padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.benefit-card p { color: var(--muted); margin-top: 8px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gallery-card { padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.gallery-card img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; }

.story { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: stretch; }
.story-copy, .story-panel { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.story-panel { background: var(--panel-2); }
.story-panel ul { margin-left: 18px; color: var(--muted); }
.story-panel li { margin-bottom: 8px; }
.mission { margin-top: 14px; }
.mission ul { margin-left: 18px; color: var(--muted); }
.mission li { margin-bottom: 6px; }

.pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.testimonial-grid article { padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.quote { font-size: 16px; line-height: 1.5; }

.journal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.journal-card { padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.journal-card .btn { align-self: flex-start; }

.answers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.answer-card { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }

.dots { display: flex; gap: 6px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dot.active { background: var(--accent); }

.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.faq-question { width: 100%; text-align: left; padding: 18px; background: transparent; border: none; color: var(--text); font-weight: 600; font-size: 18px; line-height: 1.4; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s ease; }
.faq-question::after { content: "\25BC"; font-size: 16px; color: var(--muted); transition: transform 0.3s ease, color 0.3s ease; margin-left: 8px; }
.faq-answer { padding: 0 20px 0; color: var(--text); font-size: 17px; line-height: 1.7; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease; word-wrap: break-word; hyphens: auto; }
.faq-item.open .faq-answer { max-height: 500px; opacity: 1; padding: 0 20px 16px; }
.faq-item.open .faq-question { color: var(--accent); }
.faq-item.open .faq-question::after { transform: rotate(180deg); color: var(--accent); }

.guarantee { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px dashed var(--accent); background: rgba(158, 230, 191, 0.08); }

.cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(158, 230, 191, 0.12), rgba(106, 183, 255, 0.1)); border: 1px solid var(--line); box-shadow: var(--shadow); }

.cta-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-form input, .cta-form textarea { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); min-width: 220px; font-family: var(--font-body); }
.cta-form textarea { min-width: 300px; flex: 1 1 100%; resize: vertical; }

.footer { margin-top: 48px; padding: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.footer a { color: var(--text); text-decoration: none; margin-right: 12px; }
.footer a:hover { color: var(--accent); }

/* Cart styles */
.cart-btn {
  position: relative;
  background: var(--accent);
  color: #04100c;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  font-family: inherit;
}
.cart-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
  box-shadow: 0 4px 16px rgba(158, 230, 191, 0.35);
}
.cart-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 2.5;
}
.cart-badge { 
  background: #04100c; 
  color: var(--accent); 
  border-radius: 50%; 
  width: 22px; 
  height: 22px; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  font-size: 12px; 
  font-weight: 700;
}

.cart-badge.is-visible {
  display: flex;
}

.cart-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--accent);
  color: #04100c;
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transform: translateX(400px);
  transition: transform 0.3s ease;
  z-index: 1000;
}
.cart-notification.show { transform: translateX(0); }

#reviewsSubmitStatus.is-error {
  color: #fecaca;
}

/* Success/Cancel pages */
.success-page { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 48px 24px; }
.success-card { 
  max-width: 600px; 
  text-align: center; 
  padding: 48px 32px; 
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: var(--radius); 
  box-shadow: var(--shadow);
}
.success-icon { 
  width: 80px; 
  height: 80px; 
  margin: 0 auto 24px; 
  background: var(--accent); 
  color: #04100c; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 48px; 
  font-weight: 700;
}
.success-icon.cancel { background: rgba(255, 82, 82, 0.2); color: #ff5252; }
.success-card h1 { margin-bottom: 16px; }
.success-card .lede { text-align: center; margin: 0 auto 32px; }
.order-details { 
  background: var(--panel-2); 
  padding: 18px; 
  border-radius: 12px; 
  border: 1px solid var(--line); 
  margin: 24px 0;
  text-align: left;
}
.order-details p { margin-bottom: 8px; color: var(--muted); }
.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.success-info { 
  margin-top: 32px; 
  padding-top: 24px; 
  border-top: 1px solid var(--line); 
  text-align: left;
}
.success-info ul { margin-left: 24px; color: var(--muted); margin-top: 12px; }
.success-info li { margin-bottom: 8px; }

@media (max-width: 720px) {
  body { padding: 18px 18px 48px; }
  .nav { position: static; flex-wrap: wrap; }
  .nav nav { flex-wrap: wrap; gap: 16px; width: 100%; justify-content: center; margin-top: 12px; }
  .promo-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .promo-banner-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
  .promo-banner-statline {
    margin-top: 2px;
  }
  .promo-banner-stat-value {
    font-size: 24px;
  }
  .promo-banner-stat-label {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  .promo-banner-title {
    font-size: 25px;
  }
  .promo-banner-text {
    font-size: 14px;
  }
  .promo-banner::before {
    animation-duration: 4.5s;
  }
  .promo-banner-cta {
    width: 100%;
    min-width: 0;
  }
  .hero-copy, .hero-card { padding: 22px; }
  .product-hero { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
  .success-card { padding: 32px 24px; }
}

/* Product page styles */
.product-detail { display: flex; flex-direction: column; gap: 48px; }

.product-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; align-items: start; }

.product-image-col { display: flex; flex-direction: column; gap: 14px; }

.product-image-placeholder { 
  width: 100%; 
  aspect-ratio: 1; 
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: var(--radius); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 12px;
  box-shadow: var(--shadow);
}

.product-thumbnails { display: flex; gap: 10px; }
.thumbnail { 
  width: 80px; 
  height: 80px; 
  background: var(--panel); 
  border: 2px solid var(--line); 
  border-radius: 12px; 
  cursor: pointer; 
  transition: border-color 0.2s ease;
}
.thumbnail.active { border-color: var(--accent); }
.thumbnail:hover { border-color: var(--accent); opacity: 0.8; }

.product-info-col { display: flex; flex-direction: column; gap: 16px; }

.breadcrumb { font-size: 14px; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--text); }

.product-link { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.product-link:hover { color: var(--accent); }

.product-tagline { color: var(--muted); font-size: 17px; line-height: 1.5; }

.price-section { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; }
.price-large { font-size: 36px; font-weight: 700; }
.price-meta { color: var(--muted); font-size: 16px; }

.product-actions { display: flex; gap: 12px; align-items: stretch; margin: 16px 0; }
.flex-1 { flex: 1; }

.quantity-selector { 
  display: flex; 
  border: 1px solid var(--line); 
  border-radius: 12px; 
  overflow: hidden;
  background: var(--panel);
}
.qty-btn { 
  padding: 12px 16px; 
  background: transparent; 
  border: none; 
  color: var(--text); 
  cursor: pointer; 
  font-size: 18px; 
  font-weight: 700;
  transition: background 0.2s ease;
}
.qty-btn:hover { background: rgba(255, 255, 255, 0.04); }
.qty-input { 
  width: 60px; 
  text-align: center; 
  border: none; 
  background: transparent; 
  color: var(--text); 
  font-weight: 600;
  font-family: var(--font-body);
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input[type=number] { -moz-appearance: textfield; }

.product-highlights { 
  padding: 18px; 
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: var(--radius); 
}
.product-highlights ul { margin-left: 18px; color: var(--muted); margin-top: 12px; }
.product-highlights li { margin-bottom: 8px; }

.product-details-tabs { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }

.tabs { 
  display: flex; 
  gap: 8px; 
  border-bottom: 1px solid var(--line); 
  padding-bottom: 12px;
  flex-wrap: wrap;
}
.tab { 
  padding: 10px 16px; 
  background: transparent; 
  border: 1px solid var(--line); 
  border-radius: 12px 12px 0 0; 
  color: var(--muted); 
  cursor: pointer; 
  font-weight: 600;
  transition: all 0.2s ease;
}
.tab:hover { border-color: var(--accent); color: var(--text); }
.tab.active { background: var(--panel); color: var(--text); border-color: var(--accent); border-bottom-color: var(--panel); }

.tab-content { 
  display: none; 
  padding: 24px; 
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: var(--radius);
}
.tab-content.active { display: block; }
.tab-content h3 { margin-bottom: 12px; }
.tab-content h4 { margin-top: 18px; margin-bottom: 8px; }
.tab-content p { color: var(--muted); margin-bottom: 12px; line-height: 1.6; }
.tab-content ul, .tab-content ol { margin-left: 24px; color: var(--muted); }
.tab-content li { margin-bottom: 8px; line-height: 1.6; }

.related-section { margin-top: 48px; }
.related-section h3 { margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.product-card { 
  padding: 18px; 
  background: var(--panel); 
  border-radius: var(--radius); 
  border: 1px solid var(--line); 
  display: flex; 
  flex-direction: column; 
  gap: 12px;
  box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  .product-hero { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
}

/* Cookie Consent Banner */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  background: rgba(26, 26, 26, 0.98);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 20px;
  z-index: 9999;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  opacity: 1;
}

.cookie-banner.hidden {
  display: none;
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cookie-text {
  flex: 1;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.cookie-text p {
  margin: 0;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cookie-banner {
    padding: 16px;
  }
  
  .cookie-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .cookie-actions {
    width: 100%;
  }
  
  .cookie-actions button {
    flex: 1;
  }
}
.price-large {
  color: #8bc34a;
  font-weight: 700;
}

.reviewsSection {
  scroll-margin-top: 24px;
  position: relative;
}

.reviewsSection .reviews {
  display: grid;
  gap: 20px;
}

.reviewsSection .reviews__header {
  margin-bottom: -6px;
}

.reviewsSection .reviews__subtext {
  margin-top: 8px;
  max-width: 60ch;
}

.reviewsSection .reviews-disclaimer {
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.14), rgba(250, 204, 21, 0.06));
  color: #fff8dd;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.reviewsSection .reviews-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.2fr);
  gap: 24px;
  align-items: start;
}

.reviewsSection .reviews-card {
  padding: 22px;
}

.reviewsSection .reviews-card h4 {
  margin: 0 0 16px;
  font-size: 22px;
}

.reviewsSection .reviews-card .meta {
  font-size: 14px;
}

.reviewsSection .reviews__listCard {
  min-height: 100%;
}

.reviewsSection .reviews-form {
  display: grid;
  gap: 14px;
}

.reviewsSection .reviews-form__required {
  display: grid;
  gap: 8px;
}

.reviewsSection .reviews-form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.reviewsSection .reviews-form__optional {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.reviewsSection .reviews-form__optional[open] {
  padding-bottom: 2px;
}

.reviewsSection .reviews-form__sectionTitle {
  margin: 0;
  padding: 8px 0 10px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.reviewsSection .reviews-form__sectionTitle::-webkit-details-marker {
  display: none;
}

.reviewsSection .reviews-form__sectionTitle::after {
  content: '+';
  float: right;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.reviewsSection .reviews-form__optional[open] .reviews-form__sectionTitle::after {
  content: '−';
}

.reviewsSection .reviews-form__optionalGrid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 2px;
}

.reviewsSection .reviews-form__field {
  display: grid;
  gap: 6px;
}

.reviewsSection .reviews-form__field--wide {
  grid-column: auto;
}

.reviewsSection .reviews-form__miniLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.reviewsSection .reviews-form textarea,
.reviewsSection .reviews-form input,
.reviewsSection .reviews-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.reviewsSection .reviews-form textarea::placeholder,
.reviewsSection .reviews-form input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.reviewsSection .reviews-form textarea:focus,
.reviewsSection .reviews-form input:focus,
.reviewsSection .reviews-form select:focus {
  outline: none;
  border-color: rgba(158, 230, 191, 0.75);
  box-shadow: 0 0 0 3px rgba(158, 230, 191, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.reviewsSection .reviews-form textarea {
  min-height: 120px;
  resize: vertical;
}

.reviewsSection .review-count {
  text-align: right;
  margin: -2px 0 4px;
  color: rgba(255, 255, 255, 0.5);
}

.reviewsSection .reviews-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-height: 600px;
  overflow: auto;
  padding-right: 4px;
}

.reviewsSection .review-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.reviewsSection .review-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.reviewsSection .review-item__date {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.reviewsSection .review-item h5 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
}

.reviewsSection .review-item p {
  margin: 0;
  line-height: 1.65;
}

.reviewsSection .review-item .quote {
  font-size: 16px;
}

.reviewsSection .review-item__footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 13px;
}

.reviewsSection .review-stars {
  color: #facc15;
  letter-spacing: 0.08em;
  font-size: 14px;
  line-height: 1;
}

.reviewsSection .reviews-list-state {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  color: var(--muted);
  font-size: 14px;
}

.reviewsSection .reviews-skeleton {
  display: grid;
  gap: 8px;
}

.reviewsSection .reviews-skeleton__line {
  height: 11px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  background-size: 200% 100%;
  animation: reviewsShimmer 1.2s linear infinite;
}

.reviewsSection .reviews-skeleton__line--short {
  width: 38%;
}

.reviewsSection .reviews-skeleton__line--medium {
  width: 72%;
}

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

.reviewsSection #reviewsLoadMoreBtn {
  margin-top: 14px;
  width: 100%;
}

.reviewsSection #reviewsSubmitStatus {
  margin-top: 2px;
  min-height: 20px;
}

.honeypot {
  position: absolute;
  left: -99999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 820px) {
  .reviewsSection .reviews-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .reviewsSection .reviews-card {
    padding: 18px;
  }
  .reviewsSection .reviews-form__optionalGrid {
    grid-template-columns: 1fr;
  }
  .reviewsSection .reviews-form__field--wide {
    grid-column: auto;
  }
}

body.kanna-glass-disclaimer-open {
  overflow: hidden;
}

.kanna-glass-disclaimer-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  padding: 18px;
}

.kanna-glass-disclaimer-modal.active {
  display: flex;
}

.kanna-glass-disclaimer-card {
  width: min(680px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 159, 67, 0.55);
  background: linear-gradient(170deg, #131820, #0e1218);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  padding: 24px;
}

.kanna-glass-disclaimer-card h3 {
  margin: 0 0 12px 0;
  color: #ffd08a;
}

.kanna-glass-disclaimer-card p {
  margin: 0 0 12px 0;
  color: #f1f5f9;
  line-height: 1.55;
}

.kanna-glass-disclaimer-card ul {
  margin: 0 0 14px 20px;
  color: #f8fafc;
}

.kanna-glass-disclaimer-card li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.kanna-glass-disclaimer-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 159, 67, 0.45);
  background: rgba(255, 159, 67, 0.1);
  color: #ffe6c7;
  line-height: 1.45;
}

.kanna-glass-disclaimer-check input {
  margin-top: 4px;
  accent-color: #ff9f43;
}

.kanna-glass-disclaimer-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .kanna-glass-disclaimer-card {
    padding: 18px;
  }

  .kanna-glass-disclaimer-actions {
    flex-direction: column-reverse;
  }
}


/* INLINE STYLE UTILITIES: START */
.u-s-045aac899d { margin-bottom: 16px;; }
.u-s-06d5f32be0 { margin: 0; font-size: 0.9em; color: #666;; }
.u-s-0d4e007b71 { width: 100%; height: 100%; object-fit: cover; border-radius: 8px;; }
.u-s-0e27afce8a { margin: 4px 0 0 0; font-size: 0.85em; color: #666;; }
.u-s-0f3e03e83d { text-align: right; margin-left: 16px;; }
.u-s-13cbe03b9a { text-align: right;; }
.u-s-17065a1e2d { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;; }
.u-s-18e61edcf0 { list-style: none; padding: 0; margin: 0; color: var(--text); line-height: 2;; }
.u-s-1e7ae31e81 { margin: 20px 0;; }
.u-s-1f319156a9 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);; }
.u-s-1f70a08de1 { padding: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-align: center;; }
.u-s-22cd5add23 { margin-top: 20px; padding: 15px; background: white; border-radius: 4px;; }
.u-s-25664fc02a { font-weight: 600; color: var(--text); padding: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; user-select: none;; }
.u-s-27304b847b { height:56px; width:auto;; }
.u-s-2e04e8d24e { font-size: 0.95em; color: var(--muted);; }
.u-s-304119de2f { font-size: 0.85em; color: var(--muted); margin-top: 4px;; }
.u-s-34273516a0 { margin-left: 18px; line-height: 1.8; color: #e5e7eb; font-size: 15px;; }
.u-s-36ca0aff10 { margin-top: 8px;; }
.u-s-372f48aea9 { margin-bottom: 0; background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 159, 67, 0.45);; }
.u-s-3907588b81 { margin-bottom: 14px;; }
.u-s-3a4b6c098d { margin-bottom: 24px; font-size: 2.5em; font-family: var(--font-display); color: var(--text);; }
.u-s-3a55a5d47b { margin-top: 40px;; }
.u-s-3fa8a717a4 { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px;; }
.u-s-42d268cfcb { background: rgba(255, 159, 67, 0.12); border: 1px solid rgba(255, 159, 67, 0.5); border-radius: 12px; padding: 16px; margin: 16px 0 22px;; }
.u-s-47b4cb421a { font-weight: bold; margin-bottom: 10px; font-size: 0.9em;; }
.u-s-492915dd7f { margin-top: 60px;; }
.u-s-4a36c24a49 { background: rgba(255, 193, 7, 0.12); border: 2px solid rgba(255, 193, 7, 0.4); padding: 28px; border-radius: 12px; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15); margin-bottom: 28px;; }
.u-s-4a8943f267 { width: 100%; height: auto; border-radius: 16px;; }
.u-s-4ad1783410 { margin-top: 0; margin-bottom: 8px;; }
.u-s-4ffb324c7f { color: var(--muted); text-align: center; padding: 20px;; }
.u-s-55ff99fd92 { margin-top: 0; color: #ffc107;; }
.u-s-59caaa8fdd { margin-top: 28px;; }
.u-s-62efb583c9 { margin-right: 12px;; }
.u-s-637dc3c2f1 { margin-top: 60px; padding: 40px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px;; }
.u-s-655ce5e405 { color: var(--text); font-size: 16px; line-height: 1.6;; }
.u-s-65e3620ebc { padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2);; }
.u-s-68eae2429a { margin-bottom: 16px; cursor: pointer;; }
.u-s-6b0c13639b { max-width: 800px; margin: 0 auto;; }
.u-s-72d6c38e5f { margin-bottom: 12px;; }
.u-s-79e958f59a { margin-top: 0; color: var(--text);; }
.u-s-7cf326aaff { margin-top: 0; color: #f9a825; font-size: 24px;; }
.u-s-7d0c0ea964 { color: var(--error);; }
.u-s-804dd9b4d9 { margin: 0 0 8px; color: #ffd08a;; }
.u-s-8192bbffd4 { font-size: 1.1em; color: var(--muted); margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.7;; }
.u-s-83212d01d4 { margin-bottom: 0; cursor: pointer;; }
.u-s-865daac255 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;; }
.u-s-8850f69c8d { margin: 16px 0; display: flex; flex-direction: column; gap: 12px;; }
.u-s-8a7b428856 { max-width: 1200px; margin: 80px auto; padding: 60px 40px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: var(--radius); text-align: center;; }
.u-s-8c678085be { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 100%;; }
.u-s-8d703344e0 { margin-bottom: 24px;; }
.u-s-90816560d9 { color: #f3f4f6;; }
.u-s-91b434c2e8 { color: var(--accent);; }
.u-s-927f6dbd92 { margin-top: 8px; color: #555; font-size: 0.9em;; }
.u-s-930d87fbe8 { display: flex; flex-direction: column; gap: 12px;; }
.u-s-95e6d8bcaf { display: flex; gap: 12px; margin-bottom: 20px;; }
.u-s-9851464944 { font-size: 0.9em; margin-top: 10px;; }
.u-s-98d0ca309d { margin-top: 8px; color: #ffd08a;; }
.u-s-9e4a349230 { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: rgba(255,255,255,0.03); border-radius: 12px; border: 2px solid var(--line); cursor: pointer; transition: all 0.2s ease;; }
.u-s-a164a7380d { margin: 0; color: #ffe6c7;; }
.u-s-a2e869f9f4 { font-size: 16px; line-height: 1.6; color: #f3f4f6;; }
.u-s-a8240a6443 { width: 100%; height: auto; border-radius: 10px; display: block;; }
.u-s-b32921d462 { margin: 16px 12px 0; color: var(--muted); line-height: 1.6;; }
.u-s-b5693bba69 { padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);; }
.u-s-bba118e1af { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid var(--line);; }
.u-s-bff45a79b4 { width:50px; height:50px; object-fit:cover; border-radius:8px; background:#e0f2f1;; }
.u-s-c15a2febee { display: flex; align-items: center; flex: 1; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 12px; border: 2px solid var(--line); cursor: pointer; transition: all 0.2s ease;; }
.u-s-ca4db62483 { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2);; }
.u-s-ca7d8fdf51 { margin-left: 18px; line-height: 1.8; color: #e8e6e1; font-size: 15px;; }
.u-s-cb40f1638c { display: flex; gap: 10px; margin-top: 15px;; }
.u-s-cb8e78bc79 { width: 100%; height: auto; display: block;; }
.u-s-cc4c0226c6 { display: flex; gap: 12px; margin-top: 12px;; }
.u-s-d08eb7b455 { margin: 0; color: var(--muted); line-height: 1.6;; }
.u-s-d265a6b9b9 { margin-top: 16px;; }
.u-s-d28e7cd286 { padding: 8px 16px; font-size: 14px;; }
.u-s-d31b1fab34 { background: rgba(255, 193, 7, 0.08); border: 1px solid rgba(255, 193, 7, 0.3); padding: 24px; border-radius: 12px;; }
.u-s-d647d908cf { color: #856404; text-decoration: underline;; }
.u-s-dd3e945eaa { background: rgba(255, 193, 7, 0.12); border: 2px solid rgba(255, 193, 7, 0.4); padding: 28px; border-radius: 12px; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15);; }
.u-s-dd92937ecb { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;; }
.u-s-de3f802061 { height: 24px;; }
.u-s-e07f8c7742 { color: var(--accent); text-decoration: none;; }
.u-s-e5e6786385 { color: #666;; }
.u-s-e9a5836552 { margin: 0 0 8px;; }
.u-s-eca4b6dfaa { margin: 0 0 12px; color: #222;; }
.u-s-ee3d55bf99 { flex: 1;; }
.u-s-f1d7498a0d { color: var(--muted); margin-bottom: 20px; font-size: 0.95em;; }
.u-s-f239769ffd { margin-left: 18px; line-height: 1.7; color: #e5e7eb;; }
.u-s-f2892a2e8a { display: none;; }
.u-s-f3e26fadbe { display: flex; gap: 10px; flex-wrap: wrap;; }
.u-s-f56b89ad67 { margin: 0 0 18px;; }
.u-s-f7bec619b8 { margin: 0; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px; background: #fff;; }
.u-s-f9843fdd78 { padding: 10px; border-radius: 14px; border: 1px solid rgba(255, 159, 67, 0.5); background: linear-gradient(160deg, rgba(255, 159, 67, 0.16), rgba(255, 255, 255, 0.02));; }
.u-s-fe10e25439 { font-size: 1.1em; line-height: 1.8; margin: 40px 0;; }
/* INLINE STYLE UTILITIES: END */