/**
 * KillHeat Brand Design System — v3
 * Flatsome Child Theme — Brand Visual Override
 *
 * Products: The AeroJet + The ArcticOasis
 * Homepage: "THE HEATWAVE ENDS HERE."
 * Bundle: Summer Survival Pack ($15 off)
 *
 * This file applies the KillHeat dark/ice-blue aesthetic on top of Flatsome.
 * It does NOT replicate Flatsome styles — only brand-specific overrides.
 *
 * @package KillHeat
 * @since 1.0.0
 */

/* ==========================================================================
   1. Brand Design Tokens
   ========================================================================== */

:root {
  /* Brand palette */
  --kh-black:       #0A0A0A;
  --kh-dark:        #141414;
  --kh-card:        #1A1A1A;
  --kh-border:      #2A2A2A;
  --kh-ice:         #00D4FF;
  --kh-ice-light:   #66E3FF;
  --kh-ice-dark:    #0099CC;
  --kh-white:       #FAFAFA;
  --kh-gray:        #888888;
  --kh-gray-light:  #AAAAAA;
  --kh-gradient:    linear-gradient(135deg, #00D4FF 0%, #0066FF 100%);
  --kh-gradient-subtle: linear-gradient(135deg, rgba(0,212,255,0.1) 0%, rgba(0,102,255,0.05) 100%);

  /* Spacing (4px base) */
  --kh-xs:   0.25rem;   /* 4px */
  --kh-sm:   0.5rem;    /* 8px */
  --kh-md:   1rem;      /* 16px */
  --kh-lg:   1.5rem;    /* 24px */
  --kh-xl:   2rem;      /* 32px */
  --kh-2xl:  3rem;      /* 48px */
  --kh-3xl:  4rem;      /* 64px */
  --kh-4xl:  6rem;      /* 96px */

  /* Typography */
  --kh-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --kh-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --kh-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Transitions */
  --kh-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Border radius */
  --kh-radius-sm: 4px;
  --kh-radius-md: 8px;
  --kh-radius-lg: 16px;
  --kh-radius-xl: 24px;
}

/* ==========================================================================
   2. Global Overrides
   ========================================================================== */

/* Dark body background */
body {
  background-color: var(--kh-black) !important;
  color: var(--kh-white);
  font-family: var(--kh-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kh-font-heading);
  color: var(--kh-white);
  letter-spacing: -0.02em;
}

h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

/* Links */
a {
  color: var(--kh-ice);
  transition: color var(--kh-transition);
}

a:hover {
  color: var(--kh-ice-light);
}

/* Selection */
::selection {
  background: var(--kh-ice);
  color: var(--kh-black);
}

/* ==========================================================================
   3. Navigation / Header
   ========================================================================== */

/* Dark header background */
#header,
.header-wrapper,
.header-main {
  background-color: var(--kh-black) !important;
}

/* Nav links */
.nav > li > a {
  color: var(--kh-gray-light) !important;
  font-weight: 500;
  transition: color var(--kh-transition);
}

.nav > li > a:hover,
.nav > li.current-menu-item > a,
.nav > li.active > a {
  color: var(--kh-ice) !important;
}

/* Mobile nav toggle */
.nav-icon,
.menu-icon {
  color: var(--kh-white) !important;
}

/* Dropdown menus */
.nav-dropdown {
  background-color: var(--kh-dark) !important;
  border: 1px solid var(--kh-border) !important;
  border-radius: var(--kh-radius-md) !important;
}

.nav-dropdown > li > a {
  color: var(--kh-gray-light) !important;
}

.nav-dropdown > li > a:hover {
  color: var(--kh-ice) !important;
  background-color: rgba(0,212,255,0.05) !important;
}

/* Header cart icon */
.header-cart-link {
  color: var(--kh-white) !important;
}

.cart-icon strong {
  background: var(--kh-gradient) !important;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

/* Primary button — ice gradient */
.button,
button,
input[type="submit"],
.woocommerce .button,
.single_add_to_cart_button {
  background: var(--kh-gradient) !important;
  color: var(--kh-black) !important;
  border: none !important;
  border-radius: var(--kh-radius-md) !important;
  font-family: var(--kh-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75em 2em;
  transition: all var(--kh-transition) !important;
  box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover {
  box-shadow: 0 6px 25px rgba(0,212,255,0.5);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,212,255,0.2);
}

/* Secondary / outline button */
.button.secondary,
.button.outline,
.button.is-outline {
  background: transparent !important;
  color: var(--kh-ice) !important;
  border: 2px solid var(--kh-ice) !important;
  box-shadow: none;
}

.button.secondary:hover,
.button.outline:hover,
.button.is-outline:hover {
  background: rgba(0,212,255,0.1) !important;
  border-color: var(--kh-ice-light) !important;
  color: var(--kh-ice-light) !important;
  box-shadow: 0 0 20px rgba(0,212,255,0.2);
}

/* Disabled state */
.button:disabled,
.button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   5. Product Cards / Shop Grid
   ========================================================================== */

/* Product card */
.product-small,
.product {
  background-color: var(--kh-card);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  overflow: hidden;
  transition: all var(--kh-transition);
}

.product-small:hover {
  border-color: var(--kh-ice);
  box-shadow: 0 8px 30px rgba(0,212,255,0.15);
  transform: translateY(-4px);
}

/* Product title */
.product-title a {
  color: var(--kh-white) !important;
  font-weight: 600;
}

.product-title a:hover {
  color: var(--kh-ice) !important;
}

/* Product price */
.product-price,
.price {
  font-family: var(--kh-font-mono) !important;
  color: var(--kh-ice) !important;
  font-weight: 500;
}

.price del {
  color: var(--kh-gray) !important;
}

.price ins {
  color: var(--kh-ice) !important;
  text-decoration: none;
}

/* Sale flash */
.onsale,
.badge {
  background: var(--kh-gradient) !important;
  color: var(--kh-black) !important;
  font-weight: 700;
  border-radius: var(--kh-radius-sm);
}

/* ==========================================================================
   6. Single Product Page
   ========================================================================== */

/* Product title */
.product-title.entry-title {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* Price on single product */
.product-info .price {
  font-size: 1.75rem;
  font-family: var(--kh-font-mono);
  color: var(--kh-ice);
}

/* Variation selector */
.variations select,
.variations .reset_variations {
  background-color: var(--kh-dark);
  color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-sm);
  padding: 0.5em 1em;
}

.variations select:focus {
  border-color: var(--kh-ice);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,212,255,0.2);
}

/* Quantity input */
.quantity input {
  background-color: var(--kh-dark) !important;
  color: var(--kh-white) !important;
  border: 1px solid var(--kh-border) !important;
  border-radius: var(--kh-radius-sm) !important;
  font-family: var(--kh-font-mono);
}

.quantity .button.minus,
.quantity .button.plus {
  background-color: var(--kh-dark) !important;
  color: var(--kh-ice) !important;
  border-color: var(--kh-border) !important;
}

/* Product tabs */
.product-tabs .nav-line > li > a {
  color: var(--kh-gray) !important;
  font-weight: 600;
}

.product-tabs .nav-line > li.active > a {
  color: var(--kh-ice) !important;
  border-bottom-color: var(--kh-ice) !important;
}

/* Product gallery */
.product-gallery .woocommerce-product-gallery__image img {
  border-radius: var(--kh-radius-lg);
  background-color: var(--kh-dark);
}

/* Trust badges area */
.trust-badges {
  display: flex;
  gap: var(--kh-lg);
  padding: var(--kh-lg) 0;
  border-top: 1px solid var(--kh-border);
  border-bottom: 1px solid var(--kh-border);
  margin: var(--kh-lg) 0;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--kh-sm);
  color: var(--kh-gray-light);
  font-size: 0.85rem;
}

.trust-badge .icon {
  color: var(--kh-ice);
  font-size: 1.25rem;
}

/* ==========================================================================
   7. Cart & Checkout
   ========================================================================== */

/* Cart table */
.shop_table,
.woocommerce-cart-form {
  background-color: var(--kh-card);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
}

.shop_table th {
  color: var(--kh-gray-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.shop_table td {
  color: var(--kh-white);
}

/* Cart totals */
.cart_totals {
  background-color: var(--kh-card);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  padding: var(--kh-lg);
}

/* Checkout form */
.woocommerce-checkout {
  color: var(--kh-white);
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background-color: var(--kh-dark) !important;
  color: var(--kh-white) !important;
  border: 1px solid var(--kh-border) !important;
  border-radius: var(--kh-radius-sm) !important;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--kh-ice) !important;
  box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

#footer,
.footer-wrapper {
  background-color: var(--kh-black) !important;
  color: var(--kh-gray) !important;
  border-top: 1px solid var(--kh-border);
}

#footer a {
  color: var(--kh-gray-light);
}

#footer a:hover {
  color: var(--kh-ice);
}

/* Footer widgets */
#footer .widget-title {
  color: var(--kh-white);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Absolute footer */
.absolute-footer {
  background-color: var(--kh-black) !important;
  color: var(--kh-gray) !important;
  border-top: 1px solid var(--kh-border);
}

/* ==========================================================================
   9. Homepage Custom Sections
   ========================================================================== */

/* Hero section */
.kh-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kh-black);
  overflow: hidden;
}

.kh-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(0,212,255,0.08) 0%,
    transparent 70%
  );
  animation: kh-hero-pulse 8s ease-in-out infinite;
}

@keyframes kh-hero-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.kh-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.kh-hero__title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--kh-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kh-hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--kh-gray-light);
  margin-top: var(--kh-lg);
  font-weight: 300;
}

/* Crisis stats section */
.kh-stats {
  background-color: var(--kh-dark);
  padding: var(--kh-4xl) 0;
}

.kh-stat-card {
  background: var(--kh-gradient-subtle);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  padding: var(--kh-xl);
  text-align: center;
  transition: border-color var(--kh-transition);
}

.kh-stat-card:hover {
  border-color: var(--kh-ice);
}

.kh-stat-card__number {
  font-size: 2.5rem;
  font-weight: 900;
  font-family: var(--kh-font-mono);
  background: var(--kh-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kh-stat-card__label {
  color: var(--kh-gray-light);
  font-size: 0.9rem;
  margin-top: var(--kh-sm);
}

/* Product showcase section */
.kh-product-showcase {
  background-color: var(--kh-black);
  padding: var(--kh-4xl) 0;
}

.kh-product-card {
  background-color: var(--kh-card);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-xl);
  overflow: hidden;
  transition: all var(--kh-transition);
  position: relative;
}

.kh-product-card:hover {
  border-color: var(--kh-ice);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,212,255,0.12);
}

.kh-product-card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--kh-radius-xl);
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(0,212,255,0.03) 100%
  );
  pointer-events: none;
}

.kh-product-card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--kh-dark);
  padding: var(--kh-xl);
}

.kh-product-card__body {
  padding: var(--kh-xl);
}

.kh-product-card__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--kh-white);
  letter-spacing: -0.02em;
}

.kh-product-card__tagline {
  color: var(--kh-gray);
  font-size: 0.95rem;
  margin-top: var(--kh-xs);
}

.kh-product-card__price {
  font-family: var(--kh-font-mono);
  font-size: 1.5rem;
  color: var(--kh-ice);
  margin-top: var(--kh-md);
  font-weight: 500;
}

/* Why KillHeat grid */
.kh-features {
  background-color: var(--kh-dark);
  padding: var(--kh-4xl) 0;
}

.kh-feature-item {
  text-align: center;
  padding: var(--kh-xl);
}

.kh-feature-item__icon {
  font-size: 2.5rem;
  margin-bottom: var(--kh-md);
}

.kh-feature-item__title {
  font-weight: 700;
  color: var(--kh-white);
  margin-bottom: var(--kh-sm);
}

.kh-feature-item__desc {
  color: var(--kh-gray);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Bundle / Summer Survival Pack CTA */
.kh-bundle-cta {
  background: var(--kh-gradient);
  padding: var(--kh-4xl) 0;
  text-align: center;
}

.kh-bundle-cta__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(10,10,10,0.7);
  font-weight: 600;
}

.kh-bundle-cta__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--kh-black);
  margin: var(--kh-md) 0;
}

.kh-bundle-cta__savings {
  color: var(--kh-black);
  font-weight: 600;
  font-size: 1.1rem;
  opacity: 0.8;
}

/* ==========================================================================
   10. Brand Story Page
   ========================================================================== */

.kh-story-hero {
  background: var(--kh-black);
  padding: var(--kh-4xl) 0;
  text-align: center;
}

.kh-story-section {
  padding: var(--kh-3xl) 0;
}

.kh-story-section--dark {
  background-color: var(--kh-dark);
}

.kh-story-section--black {
  background-color: var(--kh-black);
}

/* ==========================================================================
   11. FAQ Accordion
   ========================================================================== */

.kh-faq-item {
  border-bottom: 1px solid var(--kh-border);
}

.kh-faq-item__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--kh-lg) 0;
  background: none;
  border: none;
  color: var(--kh-white);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}

.kh-faq-item__question:hover {
  color: var(--kh-ice);
}

.kh-faq-item__question .icon {
  font-size: 0.7rem;
  transition: transform var(--kh-transition);
  color: var(--kh-ice);
}

.kh-faq-item__question[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}

.kh-faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.kh-faq-item__answer.is-open {
  max-height: 500px;
  padding-bottom: var(--kh-lg);
}

.kh-faq-item__answer p {
  color: var(--kh-gray-light);
  line-height: 1.7;
}

/* ==========================================================================
   12. Testimonial Cards
   ========================================================================== */

.kh-testimonial {
  background: var(--kh-card);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-lg);
  padding: var(--kh-xl);
  transition: border-color var(--kh-transition);
}

.kh-testimonial:hover {
  border-color: var(--kh-ice);
}

.kh-testimonial__stars {
  color: var(--kh-ice);
  font-size: 1rem;
  margin-bottom: var(--kh-md);
}

.kh-testimonial__text {
  color: var(--kh-gray-light);
  font-style: italic;
  line-height: 1.7;
  font-size: 0.95rem;
}

.kh-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--kh-sm);
  margin-top: var(--kh-lg);
  padding-top: var(--kh-md);
  border-top: 1px solid var(--kh-border);
}

.kh-testimonial__author-name {
  font-weight: 600;
  color: var(--kh-white);
  font-size: 0.9rem;
}

.kh-testimonial__author-role {
  color: var(--kh-gray);
  font-size: 0.8rem;
}

/* ==========================================================================
   13. Animations — Scroll Reveal
   ========================================================================== */

.kh-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.kh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grids */
.kh-reveal--d1 { transition-delay: 0.1s; }
.kh-reveal--d2 { transition-delay: 0.2s; }
.kh-reveal--d3 { transition-delay: 0.3s; }
.kh-reveal--d4 { transition-delay: 0.4s; }

/* ==========================================================================
   14. Newsletter Form
   ========================================================================== */

.kh-newsletter {
  background: var(--kh-dark);
  padding: var(--kh-3xl) 0;
  text-align: center;
}

.kh-newsletter input[type="email"] {
  background-color: var(--kh-card);
  color: var(--kh-white);
  border: 1px solid var(--kh-border);
  border-radius: var(--kh-radius-md);
  padding: 0.75em 1.25em;
  min-width: 300px;
  transition: border-color var(--kh-transition);
}

.kh-newsletter input[type="email"]:focus {
  border-color: var(--kh-ice);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,212,255,0.15);
}

/* ==========================================================================
   14b. V3 Homepage — Dual-Channel Hero
   ========================================================================== */

/* Hero v3 — split button layout */
.kh-hero-v3 {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kh-black);
  overflow: hidden;
}

.kh-hero-v3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,100,20,0.06) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.kh-hero-v3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    0deg,
    rgba(0,212,255,0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.kh-hero-v3__title {
  font-size: clamp(3.5rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-align: center;
  background: var(--kh-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kh-hero-v3__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--kh-gray-light);
  text-align: center;
  margin-top: var(--kh-lg);
  font-weight: 300;
}

/* Dual-channel split buttons */
.kh-channel-buttons {
  display: flex;
  gap: var(--kh-xl);
  justify-content: center;
  margin-top: var(--kh-2xl);
  flex-wrap: wrap;
}

.kh-channel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 280px;
  padding: var(--kh-xl) var(--kh-2xl);
  border-radius: var(--kh-radius-xl);
  text-decoration: none;
  transition: all var(--kh-transition);
  position: relative;
  overflow: hidden;
}

.kh-channel-btn--indoor {
  background: rgba(0,212,255,0.06);
  border: 2px solid rgba(0,212,255,0.3);
}

.kh-channel-btn--indoor:hover {
  background: rgba(0,212,255,0.12);
  border-color: var(--kh-ice);
  box-shadow: 0 0 40px rgba(0,212,255,0.15);
  transform: translateY(-4px);
}

.kh-channel-btn--outdoor {
  background: rgba(0,212,255,0.04);
  border: 2px solid rgba(0,212,255,0.2);
}

.kh-channel-btn--outdoor:hover {
  background: rgba(0,212,255,0.1);
  border-color: var(--kh-ice);
  box-shadow: 0 0 40px rgba(0,212,255,0.15);
  transform: translateY(-4px);
}

.kh-channel-btn__icon {
  font-size: 2.5rem;
  margin-bottom: var(--kh-md);
}

.kh-channel-btn__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--kh-gray);
  margin-bottom: var(--kh-sm);
}

.kh-channel-btn__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--kh-white);
  text-align: center;
  margin-bottom: var(--kh-xs);
}

.kh-channel-btn__product {
  font-size: 0.85rem;
  color: var(--kh-gray-light);
  text-align: center;
}

.kh-channel-btn__arrow {
  margin-top: var(--kh-md);
  color: var(--kh-ice);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ==========================================================================
   14c. V3 — Comparison Table
   ========================================================================== */

.kh-comparison-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--kh-white);
  margin-top: var(--kh-xl);
  font-size: 0.95rem;
}

.kh-comparison-table thead th {
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid var(--kh-ice);
  color: var(--kh-ice);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.kh-comparison-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--kh-border);
}

.kh-comparison-table tbody tr:hover td {
  background: rgba(0,212,255,0.03);
}

.kh-comparison-table .kh-table-highlight {
  color: var(--kh-ice);
  font-weight: 600;
}

/* ==========================================================================
   14d. V3 — Summer Survival Pack Banner
   ========================================================================== */

.kh-survival-pack {
  background: var(--kh-gradient);
  border-radius: var(--kh-radius-xl);
  padding: var(--kh-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.kh-survival-pack__badge {
  display: inline-block;
  background: rgba(10,10,10,0.15);
  color: rgba(10,10,10,0.8);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 100px;
  margin-bottom: var(--kh-md);
}

.kh-survival-pack__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--kh-black);
  margin-bottom: var(--kh-md);
}

.kh-survival-pack__body {
  color: rgba(10,10,10,0.85);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto var(--kh-lg);
}

.kh-survival-pack__price {
  font-family: var(--kh-font-mono);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--kh-black);
  margin-bottom: var(--kh-sm);
}

.kh-survival-pack__price del {
  font-size: 1.2rem;
  opacity: 0.5;
  margin-left: 0.5rem;
}

.kh-survival-pack__shipping {
  color: rgba(10,10,10,0.7);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--kh-lg);
}

.kh-survival-pack__btn {
  display: inline-block;
  background: var(--kh-black);
  color: var(--kh-ice) !important;
  padding: 1rem 2.5rem;
  border-radius: var(--kh-radius-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all var(--kh-transition);
  box-shadow: 0 4px 20px rgba(10,10,10,0.3);
}

.kh-survival-pack__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(10,10,10,0.4);
  color: var(--kh-ice-light) !important;
}

/* ==========================================================================
   14e. V3 — Energy Comparison Infographic
   ========================================================================== */

.kh-energy-compare {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 500px;
  margin: var(--kh-xl) auto 0;
}

.kh-energy-bar {
  display: flex;
  align-items: center;
  gap: var(--kh-md);
  font-size: 0.85rem;
}

.kh-energy-bar__label {
  flex: 0 0 120px;
  text-align: right;
  color: var(--kh-gray-light);
}

.kh-energy-bar__fill-wrapper {
  flex: 1;
  height: 24px;
  background: var(--kh-card);
  border-radius: 4px;
  overflow: hidden;
}

.kh-energy-bar__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1.5s ease;
}

.kh-energy-bar__fill--arcticoasis {
  background: var(--kh-ice);
  width: 2%;
}

.kh-energy-bar__fill--laptop {
  background: var(--kh-ice-dark);
  width: 4%;
}

.kh-energy-bar__fill--fan {
  background: var(--kh-gray);
  width: 8%;
}

.kh-energy-bar__fill--portable-ac {
  background: #FF6B35;
  width: 80%;
}

.kh-energy-bar__fill--window-ac {
  background: #FF4444;
  width: 100%;
}

.kh-energy-bar__watts {
  flex: 0 0 60px;
  font-family: var(--kh-font-mono);
  font-size: 0.8rem;
  color: var(--kh-gray-light);
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .kh-hero {
    min-height: 70vh;
    padding: var(--kh-2xl) var(--kh-md);
  }

  .kh-hero-v3 {
    min-height: 80vh;
  }

  .kh-product-showcase .kh-product-card {
    margin-bottom: var(--kh-lg);
  }

  .kh-product-card__image {
    padding: var(--kh-lg);
  }

  .kh-bundle-cta {
    padding: var(--kh-3xl) var(--kh-md);
  }

  .product-title.entry-title {
    font-size: 1.75rem;
  }

  .kh-newsletter input[type="email"] {
    min-width: 100%;
    margin-bottom: var(--kh-sm);
  }

  .kh-channel-buttons {
    flex-direction: column;
    align-items: center;
  }

  .kh-channel-btn {
    min-width: 100%;
  }

  .kh-survival-pack {
    padding: var(--kh-xl);
    border-radius: var(--kh-radius-lg);
  }

  .kh-survival-pack__price {
    font-size: 1.75rem;
  }

  .kh-energy-bar__label {
    flex: 0 0 80px;
    font-size: 0.75rem;
  }
}

@media (max-width: 375px) {
  .kh-hero__title {
    font-size: 2.5rem;
  }

  .kh-hero-v3__title {
    font-size: 2.25rem;
  }

  .kh-stat-card__number {
    font-size: 1.75rem;
  }
}