/* ================================================================
   H2O CART + CHECKOUT v8.0 — CONVERSION MACHINE EDITION
   Ground-up rebuild: native-app feel, premium UX, conversion machine
   
   TABLE OF CONTENTS
   ─────────────────
   1.  Design Tokens
   2.  Reset & Container
   3.  Progress Stepper
   4.  Free Shipping Bar
   5.  Form Fields
   6.  Checkbox & Radio
   7.  CTA Buttons
   8.  Notices
   9.  Cart — Product Table (desktop base)
   10. Cart — Quantity Controls
   11. Cart — Coupon
   12. Cart — Totals
   13. Checkout — Billing Form
   14. Checkout — Order Review
   15. Checkout — Payment
   16. Checkout — Summary Toggle
   17. Sticky CTA Bar
   18. Toast Notifications
   19. Swipe-to-Delete (mobile)
   20. Animations & Keyframes
   21. Desktop Layout (≥769px)
   22. Mobile Layout (≤768px)
   23. Small Mobile (≤480px)
   24. Accessibility
   25. Safari / iOS Fixes
   ================================================================ */


/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* Brand */
  --h2o: #F26B22;
  --h2o-hover: #E05A10;
  --h2o-soft: rgba(242,107,34,0.06);
  --h2o-glow: rgba(242,107,34,0.10);
  --h2o-grad: linear-gradient(135deg, #F47920 0%, #FF8C38 100%);

  /* Ink */
  --ink: #1A1D26;
  --ink-2: #3D4152;
  --ink-3: #6B7080;
  --ink-4: #9CA1AE;
  --ink-5: #C8CBD2;

  /* Surface — CLEAN WHITE, airy, premium */
  --bg: #FFFFFF;
  --bg-soft: #F7F7F9;
  --card: #FFFFFF;
  --line: #EBEBEF;
  --line-soft: #F3F3F6;

  /* Semantic */
  --green: #16A34A;
  --green-soft: #DCFCE7;
  --red: #EF4444;
  --red-soft: #FEE2E2;
  --amber: #D97706;
  --amber-soft: #FEF3C7;
  --blue: #2563EB;
  --blue-soft: #DBEAFE;

  /* Radii — premium roundness */
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 100px;

  /* Shadows — elegant, subtle, premium */
  --sh-xs: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --sh-md: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  --sh-lg: 0 8px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --sh-cta: 0 6px 20px rgba(242,107,34,0.35), 0 2px 6px rgba(242,107,34,0.15);
  --sh-sticky: 0 -2px 16px rgba(0,0,0,0.06);

  /* Typography */
  --f: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.25s;
}


/* ================================================================
   2. RESET & CONTAINER
   ================================================================ */
/* Kill Kadence/WooCommerce hero sections and default titles */
.woocommerce-cart .entry-hero,
.woocommerce-cart .page-hero-section,
.woocommerce-cart .kadence-page-hero,
.woocommerce-cart .entry-header,
.woocommerce-cart .entry-hero-container-inner,
.woocommerce-checkout .entry-hero,
.woocommerce-checkout .page-hero-section,
.woocommerce-checkout .kadence-page-hero,
.woocommerce-checkout .entry-header,
.woocommerce-checkout .entry-hero-container-inner,
.woocommerce-checkout #order_review_heading,
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title,
.woocommerce-cart .cart-summary { display: none !important; }

/* Page background — clean white everywhere */
.woocommerce-cart,
.woocommerce-checkout { background: #FFFFFF !important; }
.woocommerce-cart .site,
.woocommerce-checkout .site,
.woocommerce-cart .site-container,
.woocommerce-checkout .site-container,
.woocommerce-cart .content-wrap,
.woocommerce-checkout .content-wrap,
.woocommerce-cart .site-main,
.woocommerce-cart article.entry,
.woocommerce-checkout .site-main,
.woocommerce-checkout article.entry {
  background: #FFFFFF !important;
}

/* Stacking context — CRITICAL: prevents content from scrolling over Kadence header/nav */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
  position: relative !important;
  z-index: 0 !important;
}

/* Main container */
.woocommerce-cart .entry-content-wrap,
.woocommerce-checkout .entry-content-wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 16px 12px 160px !important;
  font-family: var(--f) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Hide default stepper text */
.woocommerce-cart .entry-content-wrap::before,
.woocommerce-checkout .entry-content-wrap::before { display: none !important; content: none !important; }

/* Kill WooCommerce responsive table labels */
.woocommerce-cart .shop_table_responsive tbody td::before,
.woocommerce-cart .shop_table_responsive tbody td[data-title]::before { display: none !important; content: none !important; }
.woocommerce-cart .shop_table_responsive tbody td { float: none !important; width: auto !important; text-align: inherit !important; }

/* Select2 stays within stacking context */
.woocommerce-checkout .select2-container--open { z-index: 10 !important; }


/* ================================================================
   3. PROGRESS STEPPER
   ================================================================ */
.h2o-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 28px;
  max-width: 340px;
  padding: 0 16px;
}
.h2o-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.h2o-stepper__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f);
  font-size: 12px;
  font-weight: 800;
  transition: all 0.4s var(--ease);
}
.h2o-stepper__step--done .h2o-stepper__dot {
  background: var(--h2o);
  color: #fff;
}
.h2o-stepper__step--active .h2o-stepper__dot {
  background: var(--h2o);
  color: #fff;
  box-shadow: 0 0 0 4px var(--h2o-glow);
  animation: h2oPulse 2.5s ease-in-out infinite;
}
.h2o-stepper__step--upcoming .h2o-stepper__dot {
  background: var(--line);
  color: var(--ink-4);
}
.h2o-stepper__label {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.h2o-stepper__step--done .h2o-stepper__label { color: var(--h2o); }
.h2o-stepper__step--active .h2o-stepper__label { color: var(--ink); }
.h2o-stepper__step--upcoming .h2o-stepper__label { color: var(--ink-4); }

.h2o-stepper__line {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin: 0 -2px;
  margin-bottom: 22px;
  min-width: 36px;
  border-radius: 1px;
}
.h2o-stepper__line--done { background: var(--h2o); }


/* ================================================================
   4. FREE SHIPPING BAR
   ================================================================ */
.h2o-shipping-bar {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: none;
}
.h2o-shipping-bar__text {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
  line-height: 1.4;
}
.h2o-shipping-bar__text strong { color: var(--h2o); font-weight: 800; }
.h2o-shipping-bar__track {
  width: 100%;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.h2o-shipping-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--h2o-grad);
  transition: width 0.6s var(--ease);
  position: relative;
}
.h2o-shipping-bar__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: h2oShimmer 2s ease-in-out infinite;
}
.h2o-shipping-bar--complete .h2o-shipping-bar__fill { background: linear-gradient(135deg, var(--green) 0%, #22C55E 100%); }
.h2o-shipping-bar--complete .h2o-shipping-bar__text { color: var(--green); }
.h2o-shipping-bar--complete .h2o-shipping-bar__text strong { color: var(--green); }


/* ================================================================
   5. FORM FIELDS
   ================================================================ */
.woocommerce-cart label,
.woocommerce-checkout label {
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.woocommerce-cart .required,
.woocommerce-checkout .required { color: var(--h2o) !important; }
.woocommerce-checkout .optional { font-weight: 500 !important; color: var(--ink-4) !important; text-transform: none !important; font-size: 10px !important; }

/* Text inputs */
.woocommerce-cart input[type="text"],
.woocommerce-cart input[type="number"],
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-cart textarea,
.woocommerce-checkout textarea {
  width: 100% !important;
  padding: 14px 18px !important;
  font-family: var(--f) !important;
  font-size: 15px !important; /* ≥16px prevents iOS zoom */
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: var(--card) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  outline: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
.woocommerce-cart input:focus,
.woocommerce-checkout input:focus,
.woocommerce-cart textarea:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--h2o) !important;
  box-shadow: 0 0 0 3px var(--h2o-glow) !important;
  background: #FFFCF9 !important;
}
.woocommerce-cart input::placeholder,
.woocommerce-checkout input::placeholder,
.woocommerce-cart textarea::placeholder,
.woocommerce-checkout textarea::placeholder { color: var(--ink-5) !important; font-weight: 400 !important; }
.woocommerce-checkout textarea { min-height: 80px !important; resize: vertical !important; }
.woocommerce-checkout .form-row { margin-bottom: 16px !important; }

/* Validation — friendly, not aggressive */
.woocommerce-checkout .form-row.woocommerce-validated input { border-color: var(--green) !important; background: #F0FFF4 !important; }
.woocommerce-checkout .form-row.woocommerce-invalid input { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.08) !important; background: #FFFBFB !important; }
.woocommerce-checkout .form-row.woocommerce-invalid label { color: var(--red) !important; }

/* Select / Select2 */
.woocommerce-cart select,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  width: 100% !important;
  padding: 13px 40px 13px 16px !important;
  font-family: var(--f) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background-color: var(--card) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236B7080' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 15px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
.woocommerce-cart select:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--h2o) !important;
  box-shadow: 0 0 0 3px var(--h2o-glow) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single { min-height: 48px !important; display: flex !important; align-items: center !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { font-family: var(--f) !important; font-size: 15px !important; color: var(--ink) !important; padding: 0 !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { display: none !important; }
.select2-dropdown { border: 1.5px solid var(--line) !important; border-radius: var(--r-md) !important; box-shadow: var(--sh-lg) !important; overflow: hidden !important; }
.select2-results__option { font-family: var(--f) !important; font-size: 14px !important; padding: 11px 16px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--h2o-soft) !important; color: var(--h2o) !important; }

/* Autofill */
.woocommerce-cart input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--card) inset !important; -webkit-text-fill-color: var(--ink) !important; }


/* ================================================================
   6. CHECKBOX & RADIO
   ================================================================ */
.woocommerce-cart input[type="checkbox"],
.woocommerce-cart input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--ink-5) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  background: var(--card) !important;
  transition: all 0.15s var(--ease) !important;
}
.woocommerce-cart input[type="radio"],
.woocommerce-checkout input[type="radio"] { border-radius: 50% !important; }
.woocommerce-cart input[type="checkbox"]:checked,
.woocommerce-cart input[type="radio"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-checkout input[type="radio"]:checked { background: var(--h2o) !important; border-color: var(--h2o) !important; }
.woocommerce-cart input[type="checkbox"]:checked::after,
.woocommerce-checkout input[type="checkbox"]:checked::after { content: '' !important; position: absolute !important; left: 6px !important; top: 2px !important; width: 5px !important; height: 10px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; }
.woocommerce-cart input[type="radio"]:checked::after,
.woocommerce-checkout input[type="radio"]:checked::after { content: '' !important; position: absolute !important; left: 5px !important; top: 5px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #fff !important; }


/* ================================================================
   7. CTA BUTTONS
   ================================================================ */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 18px 28px !important;
  font-family: var(--f) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-align: center !important;
  background: var(--h2o-grad) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--sh-cta) !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 16px rgba(242,107,34,0.3), 0 12px 32px rgba(242,107,34,0.2), 0 0 0 1px rgba(242,107,34,0.1) !important; filter: brightness(1.05) !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce-checkout #place_order:active { transform: translateY(0) scale(0.97) !important; box-shadow: 0 3px 10px rgba(242,107,34,0.2) !important; filter: brightness(0.95) !important; }

/* CTA disabled during AJAX updates */
.h2o-cta--updating { opacity: 0.45 !important; pointer-events: none !important; cursor: wait !important; }

/* Trust micro-copy — removed, now injected via JS as real elements */


/* ================================================================
   7b. TRUST BADGES (injected by JS)
   ================================================================ */
.h2o-trust {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--line-soft) !important;
}
.h2o-trust__item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  white-space: nowrap !important;
}
.h2o-trust__item svg { color: var(--h2o) !important; flex-shrink: 0 !important; }

/* Microcopy */
.h2o-microcopy {
  text-align: center !important;
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-4) !important;
  margin: 10px 0 0 !important;
  letter-spacing: 0.01em !important;
}
.h2o-microcopy a { color: var(--h2o) !important; font-weight: 700 !important; text-decoration: none !important; }


/* ================================================================
   7c. COUPON TOGGLE
   ================================================================ */
.h2o-coupon-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--f) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  text-decoration: none !important;
  padding: 6px 0 !important;
  transition: color 0.15s ease !important;
}
.h2o-coupon-toggle:hover { color: var(--h2o) !important; }
.h2o-coupon-toggle svg { color: var(--h2o) !important; }
.h2o-coupon-toggle--open { margin-bottom: 10px !important; }
.h2o-coupon-hidden { display: none !important; }


/* ================================================================
   7d. CHECKOUT ENHANCEMENTS
   ================================================================ */
/* Payment "Recomandat" badge */
.h2o-badge-recommended {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  font-family: var(--f) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
  background: var(--green) !important;
  border-radius: var(--r-pill) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
}

/* Payment microcopy */
.h2o-pay-microcopy {
  display: block !important;
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-4) !important;
  margin-top: 6px !important;
}

/* Edit cart link */
.h2o-edit-cart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--h2o) !important;
  text-decoration: none !important;
  margin-bottom: 10px !important;
  padding: 2px 0 !important;
  transition: color 0.15s ease !important;
}
.h2o-edit-cart:hover { color: var(--h2o-hover) !important; }

/* Notes toggle */
.h2o-notes-hidden { display: none !important; }
.h2o-notes-toggle {
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.h2o-notes-chevron { transition: transform 0.25s var(--ease) !important; }
.h2o-notes-toggle--open .h2o-notes-chevron { transform: rotate(180deg) !important; }
.h2o-notes-toggle--open { border-bottom: 1px solid var(--line-soft) !important; padding-bottom: 14px !important; margin-bottom: 12px !important; }

/* Smart sticky — hide via IntersectionObserver */
.h2o-sticky-cta--hidden-io { transform: translateY(120%) !important; }


/* ================================================================
   8. NOTICES
   ================================================================ */
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message { background: var(--green-soft) !important; color: #15803D !important; border-left: 4px solid var(--green) !important; }
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error { background: var(--red-soft) !important; color: #991B1B !important; border-left: 4px solid var(--red) !important; }
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info { background: var(--blue-soft) !important; color: #1E40AF !important; border-left: 4px solid var(--blue) !important; }
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 16px !important;
  border: none !important;
  box-shadow: var(--sh-xs) !important;
  animation: h2oFadeSlide 0.3s var(--ease) !important;
}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before { display: none !important; }
.woocommerce-checkout .woocommerce-info a { color: var(--h2o) !important; font-weight: 700 !important; text-decoration: none !important; }


/* ================================================================
   9. CART — Product Table (desktop base)
   ================================================================ */
.woocommerce-cart table.shop_table.cart {
  background: var(--card) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm) !important;
  border: 1px solid var(--line) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  table-layout: fixed !important;
}
.woocommerce-cart table.shop_table.cart thead th {
  background: var(--bg-soft) !important;
  font-family: var(--f) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-4) !important;
  padding: 12px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
}
.woocommerce-cart table.shop_table.cart thead th.product-remove { font-size: 0 !important; width: 32px !important; }
.woocommerce-cart table.shop_table.cart thead th.product-thumbnail { font-size: 0 !important; width: 88px !important; padding: 0 !important; }
.woocommerce-cart table.shop_table.cart thead th.product-price { width: 110px !important; }
.woocommerce-cart table.shop_table.cart thead th.product-quantity { width: 120px !important; }
.woocommerce-cart table.shop_table.cart thead th.product-subtotal { width: 110px !important; }

.woocommerce-cart table.shop_table.cart tbody td {
  padding: 16px 14px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  vertical-align: middle !important;
  font-family: var(--f) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  background: var(--card) !important;
  transition: background var(--dur) ease !important;
}
.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease) !important;
}
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:hover td { background: #F8F8FA !important; }

/* Thumbnail — hero product display */
.woocommerce-cart td.product-thumbnail {
  width: 88px !important;
  max-width: 88px !important;
  padding: 14px 6px 14px 14px !important;
}
.woocommerce-cart td.product-thumbnail a {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
}
.woocommerce-cart td.product-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  object-fit: cover !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-soft) !important;
  transition: transform var(--dur) var(--ease) !important;
}
.woocommerce-cart tr.cart_item:hover td.product-thumbnail img { transform: scale(1.05) !important; }

/* Product name — prominent, readable */
.woocommerce-cart td.product-name {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}
.woocommerce-cart td.product-name a { color: var(--ink) !important; text-decoration: none !important; font-weight: 600 !important; font-size: 14px !important; transition: color 0.15s ease !important; line-height: 1.4 !important; }
.woocommerce-cart td.product-name a:hover { color: var(--h2o) !important; }

/* Remove button */
.woocommerce-cart td.product-remove a.remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--ink-4) !important;
  font-size: 18px !important;
  text-decoration: none !important;
  transition: all var(--dur) var(--ease) !important;
}
.woocommerce-cart td.product-remove a.remove:hover { background: var(--red-soft) !important; color: var(--red) !important; }

/* Prices — clear hierarchy */
.woocommerce-cart td.product-price { font-weight: 600 !important; color: var(--ink-3) !important; font-size: 14px !important; }
.woocommerce-cart td.product-subtotal { font-weight: 800 !important; color: var(--ink) !important; font-size: 15px !important; letter-spacing: -0.02em !important; }
.woocommerce-cart .tax_label { display: block !important; font-size: 10px !important; color: var(--ink-4) !important; font-weight: 500 !important; }


/* ================================================================
   10. CART — Quantity Controls
   ================================================================ */
.woocommerce-cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  background: var(--bg-soft) !important;
  position: relative !important;
  overflow: visible !important;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease) !important;
}
.woocommerce-cart .quantity:focus-within { border-color: var(--h2o) !important; box-shadow: 0 0 0 3px var(--h2o-glow) !important; }

.woocommerce-cart .quantity .qty {
  width: 38px !important;
  height: 36px !important;
  text-align: center !important;
  border: none !important;
  font-family: var(--f) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: transparent !important;
  -moz-appearance: textfield !important;
  padding: 0 !important;
  outline: none !important;
}
.woocommerce-cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none !important; }

.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus {
  width: 34px !important;
  height: 36px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.15s var(--ease) !important;
  -webkit-tap-highlight-color: transparent !important;
}
.woocommerce-cart .quantity .minus:hover { color: var(--ink) !important; background: rgba(0,0,0,0.04) !important; }
.woocommerce-cart .quantity .plus { background: var(--h2o) !important; color: #fff !important; border-radius: 0 var(--r-pill) var(--r-pill) 0 !important; }
.woocommerce-cart .quantity .plus:hover { background: var(--h2o-hover) !important; color: #fff !important; }
.woocommerce-cart .quantity .minus { border-radius: var(--r-pill) 0 0 var(--r-pill) !important; }
.woocommerce-cart .quantity .minus:active,
.woocommerce-cart .quantity .plus:active { transform: scale(0.9) !important; }

/* Stock badges */
.h2o-stock-badge {
  position: absolute !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: var(--f) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
}
.h2o-stock-badge--ok { color: var(--ink-4) !important; background: var(--bg-soft) !important; }
.h2o-stock-badge--low { color: var(--amber) !important; background: var(--amber-soft) !important; }
.h2o-stock-badge--limit { color: var(--red) !important; background: var(--red-soft) !important; }

/* Shake animation */
@keyframes h2oShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.h2o-qty-shake { animation: h2oShake 0.3s ease !important; border-color: var(--red) !important; }


/* ================================================================
   11. CART — Coupon
   ================================================================ */
.woocommerce-cart table.shop_table.cart td.actions { padding: 16px 18px !important; background: var(--card) !important; }
/* Coupon hidden state — must win over all display rules */
.woocommerce-cart .coupon.h2o-coupon-hidden { display: none !important; }
.woocommerce-cart .coupon { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.woocommerce-cart .coupon .input-text {
  padding: 10px 14px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--f) !important;
  font-size: 13px !important;
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
  width: 180px !important;
}
.woocommerce-cart .coupon .input-text:focus { border-color: var(--h2o) !important; }
.woocommerce-cart .coupon .button {
  padding: 10px 18px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--f) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  transition: background var(--dur) ease !important;
}
.woocommerce-cart .coupon .button:hover { background: var(--ink-2) !important; }

/* Hide update button (JS auto-updates) */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] { display: none !important; }


/* ================================================================
   12. CART — Totals (Decision Rail)
   ================================================================ */
.woocommerce-cart .cart_totals {
  background: var(--card) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-md) !important;
  border: 1px solid var(--line) !important;
  padding: 28px !important;
  transition: opacity 0.3s ease !important;
}
.woocommerce-cart .cart_totals.h2o-updating { opacity: 0.3 !important; pointer-events: none !important; }

.woocommerce-cart .cart_totals > h2 {
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-4) !important;
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

/* Kill responsive table labels in totals */
.woocommerce-cart .cart_totals table.shop_table_responsive tbody td::before { display: none !important; content: none !important; }
.woocommerce-cart .cart_totals table.shop_table_responsive tbody td { float: none !important; }

.woocommerce-cart .cart_totals table { border: none !important; margin: 0 !important; width: 100% !important; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  border: none !important;
  padding: 8px 0 !important;
  font-family: var(--f) !important;
  font-size: 14px !important;
  background: transparent !important;
  vertical-align: top !important;
}
.woocommerce-cart .cart_totals table th { font-weight: 600 !important; color: var(--ink-3) !important; text-align: left !important; width: 100px !important; white-space: nowrap !important; }
.woocommerce-cart .cart_totals table td { font-weight: 600 !important; color: var(--ink) !important; text-align: right !important; }

/* Total row */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td { padding-top: 16px !important; border-top: 2px solid var(--ink) !important; }
.woocommerce-cart .cart_totals .order-total td { font-size: 32px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--ink) !important; line-height: 1.1 !important; }
.woocommerce-cart .cart_totals .order-total th { font-weight: 700 !important; color: var(--ink) !important; }
.woocommerce-cart .cart_totals .includes_tax,
.woocommerce-cart .cart_totals small { font-size: 11px !important; color: var(--ink-4) !important; font-weight: 500 !important; }

/* Shipping methods */
.woocommerce-cart .cart_totals .shipping ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-cart .cart_totals .shipping ul li {
  padding: 10px 12px !important;
  background: var(--bg-soft) !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 5px !important;
  transition: background 0.15s ease !important;
}
.woocommerce-cart .cart_totals .shipping ul li:has(input:checked),
.woocommerce-cart .cart_totals .shipping ul li.is-selected { background: var(--h2o-soft) !important; outline: 1.5px solid var(--h2o) !important; outline-offset: -1.5px !important; }
.woocommerce-cart .cart_totals .shipping ul li label {
  font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; gap: 8px !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 11px !important; color: var(--ink-4) !important; margin-top: 4px !important; }
.woocommerce-cart .shipping-calculator-button { color: var(--h2o) !important; font-size: 12px !important; font-weight: 700 !important; text-decoration: none !important; margin-top: 4px !important; display: inline-block !important; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; margin-top: 22px !important; }

/* Shipping calculator */
.woocommerce-cart .shipping-calculator-form { margin-top: 10px !important; }
.woocommerce-cart .shipping-calculator-form .button {
  width: 100% !important; padding: 10px !important; font-family: var(--f) !important; font-size: 11px !important;
  font-weight: 800 !important; text-transform: uppercase !important; background: var(--h2o-soft) !important;
  color: var(--h2o) !important; border: 1.5px solid var(--h2o) !important; border-radius: var(--r-sm) !important; cursor: pointer !important;
}

/* AJAX overlay fix — smooth fade instead of ugly WooCommerce blockUI */
.woocommerce-checkout .blockOverlay { background: rgba(255,255,255,0.6) !important; opacity: 1 !important; }
.woocommerce-checkout .processing #order_review,
.woocommerce-checkout #order_review.processing { opacity: 0.4 !important; pointer-events: none !important; transition: opacity 0.2s ease !important; }
.woocommerce-checkout #order_review { min-height: 100px !important; transition: opacity 0.2s ease !important; }


/* ================================================================
   12b. KENDAMA UPSELL
   ================================================================ */
.h2o-upsell {
  margin-top: 20px !important;
  padding: 0 !important;
}
.h2o-upsell__header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding: 0 4px !important;
}
.h2o-upsell__icon { font-size: 16px !important; line-height: 1 !important; }
.h2o-upsell__title {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}
.h2o-upsell__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.h2o-upsell__card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xs) !important;
  transition: border-color 0.3s ease, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.h2o-upsell__card:hover { border-color: var(--h2o) !important; box-shadow: 0 4px 12px rgba(242,107,34,0.1), 0 0 0 1px rgba(242,107,34,0.06) !important; transform: translateY(-2px) !important; }

/* Image */
.h2o-upsell__img-link {
  flex-shrink: 0 !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-soft) !important;
}
.h2o-upsell__img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.2s ease !important;
}
.h2o-upsell__card:hover .h2o-upsell__img { transform: scale(1.06) !important; }

/* Info */
.h2o-upsell__info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.h2o-upsell__name {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.h2o-upsell__name:hover { color: var(--h2o) !important; }
.h2o-upsell__price {
  font-family: var(--f) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}

/* Add button */
.h2o-upsell__add {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 14px !important;
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--h2o) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 2px 8px rgba(242,107,34,0.25) !important;
}
.h2o-upsell__add:hover { background: var(--h2o-hover) !important; transform: scale(1.03) !important; box-shadow: 0 4px 12px rgba(242,107,34,0.35) !important; }
.h2o-upsell__add:active { transform: scale(0.96) !important; }

/* Loading state */
.h2o-upsell__add--loading {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

/* Success state */
.h2o-upsell__add--added {
  background: var(--green) !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.25) !important;
  pointer-events: none !important;
}

/* Card entrance */
.h2o-upsell__card {
  opacity: 0;
  transform: translateY(12px);
  animation: h2oCardEntrance 0.4s var(--ease) forwards;
}
.h2o-upsell__card:nth-child(1) { animation-delay: 0.5s; }
.h2o-upsell__card:nth-child(2) { animation-delay: 0.6s; }


/* ================================================================
   13. CHECKOUT — Billing Form
   ================================================================ */
.h2o-back-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  text-decoration: none !important;
  margin-bottom: 18px !important;
  padding: 6px 0 !important;
  transition: color var(--dur) var(--ease) !important;
}
.h2o-back-to-cart:hover { color: var(--h2o) !important; }
.h2o-back-to-cart svg { transition: transform var(--dur) var(--ease) !important; }
.h2o-back-to-cart:hover svg { transform: translateX(-3px) !important; }

.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
  background: var(--card) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm) !important;
  border: 1px solid var(--line) !important;
  padding: 28px 24px !important;
}
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  letter-spacing: 0.02em !important;
}
.woocommerce-checkout .woocommerce-additional-fields h3 { margin-top: 24px !important; }
.woocommerce-checkout .woocommerce-shipping-fields h3 { margin-top: 24px !important; }
.woocommerce-checkout #ship-to-different-address {
  font-family: var(--f) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink-2) !important;
  display: flex !important; align-items: center !important; margin: 18px 0 12px !important; padding-top: 14px !important; border-top: 1px solid var(--line-soft) !important;
}


/* ================================================================
   14. CHECKOUT — Order Review
   ================================================================ */
.woocommerce-checkout #order_review::before {
  content: 'Sumar comandă' !important;
  display: block !important;
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ink) !important;
  margin-bottom: 14px !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  background: var(--card) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xs) !important;
  border: 1px solid var(--line) !important;
  overflow: hidden !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  background: var(--bg-soft) !important; font-family: var(--f) !important; font-size: 10px !important;
  font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important;
  color: var(--ink-4) !important; padding: 11px 16px !important; border-bottom: 1px solid var(--line) !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  padding: 12px 16px !important; font-family: var(--f) !important; font-size: 13px !important;
  border-bottom: 1px solid var(--line-soft) !important; background: var(--card) !important;
}

/* Product card in checkout */
.h2o-checkout-product { display: flex !important; align-items: center !important; gap: 10px !important; }
.h2o-checkout-product__img { flex-shrink: 0 !important; width: 44px !important; height: 44px !important; border-radius: var(--r-sm) !important; overflow: hidden !important; border: 1px solid var(--line) !important; }
.h2o-checkout-product__img img,
img.h2o-checkout-thumb { width: 44px !important; height: 44px !important; object-fit: cover !important; display: block !important; border-radius: var(--r-sm) !important; }
.h2o-checkout-product__info { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; }
.h2o-checkout-product__name { font-family: var(--f) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; line-height: 1.3 !important; }
.h2o-checkout-product__qty { font-family: var(--f) !important; font-size: 11px !important; font-weight: 600 !important; color: var(--ink-4) !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity { display: none !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { font-weight: 600 !important; color: var(--ink-3) !important; text-align: left !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right !important; font-weight: 600 !important; color: var(--ink) !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th { border-top: 2px solid var(--ink) !important; border-bottom: none !important; padding-top: 14px !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th { font-weight: 700 !important; color: var(--ink) !important; }
.woocommerce-checkout .includes_tax,
.woocommerce-checkout small { font-size: 11px !important; color: var(--ink-4) !important; }


/* ================================================================
   15. CHECKOUT — Payment
   ================================================================ */
.woocommerce-checkout #payment {
  background: var(--card) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xs) !important;
  border: 1px solid var(--line) !important;
  padding: 22px !important;
  margin-top: 16px !important;
}
.woocommerce-checkout #payment ul.payment_methods { list-style: none !important; margin: 0 0 14px !important; padding: 0 !important; border: none !important; }
.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0 0 6px !important; padding: 12px 14px !important; background: var(--bg-soft) !important;
  border-radius: var(--r-md) !important; border: 1.5px solid var(--line) !important; transition: all var(--dur) var(--ease) !important;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked),
.woocommerce-checkout #payment ul.payment_methods li.is-selected { border-color: var(--h2o) !important; background: var(--h2o-soft) !important; }
.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--f) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important;
  text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li label img { max-height: 22px !important; flex-shrink: 0 !important; }
.woocommerce-checkout #payment .payment_box { background: transparent !important; padding: 8px 0 0 28px !important; font-size: 12px !important; color: var(--ink-4) !important; border: none !important; margin: 0 !important; }
.woocommerce-checkout #payment .payment_box::before { display: none !important; }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 12px !important; color: var(--ink-4) !important; line-height: 1.6 !important; margin: 10px 0 !important; }
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--h2o) !important; font-weight: 600 !important; }

/* Coupon / login toggles */
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-login {
  background: var(--card) !important; border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xs) !important; border: 1px solid var(--line) !important; padding: 20px !important;
}


/* ================================================================
   16. CHECKOUT — Summary Toggle (mobile)
   ================================================================ */
.h2o-summary-toggle {
  display: none;
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--sh-xs);
}
.h2o-summary-toggle__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h2o-summary-toggle__left { display: flex; align-items: center; gap: 6px; font-family: var(--f); font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.h2o-summary-toggle__left svg { color: var(--h2o); flex-shrink: 0; width: 16px; height: 16px; }
.h2o-summary-toggle__price { font-family: var(--f); font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.h2o-summary-toggle__chevron { color: var(--ink-4); transition: transform 0.3s var(--ease); margin-left: 4px; flex-shrink: 0; }
.h2o-summary-toggle--open .h2o-summary-toggle__chevron { transform: rotate(180deg); }


/* ================================================================
   17. STICKY CTA BAR
   ================================================================ */
.h2o-sticky-cta {
  display: none;
  position: fixed;
  bottom: 60px; /* above Kadence mobile nav */
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(232,234,237,0.5);
  padding: 14px 16px;
  box-shadow: var(--sh-sticky);
  transform: translateY(0);
  transition: transform 0.3s var(--ease);
  -webkit-transform: translateZ(0);
}
.h2o-sticky-cta--hidden { transform: translateY(120%); }
.h2o-sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 600px; margin: 0 auto; }
.h2o-sticky-cta__total { display: flex; flex-direction: column; gap: 1px; }
.h2o-sticky-cta__label { font-family: var(--f); font-size: 10px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.05em; }
.h2o-sticky-cta__price { font-family: var(--f); font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; }
.h2o-sticky-cta__btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 28px; font-family: var(--f); font-size: 13px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  background: var(--h2o-grad); border: none; border-radius: 50px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sh-cta);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.h2o-sticky-cta__btn:active { transform: scale(0.97); }
.h2o-sticky-cta__btn svg { flex-shrink: 0; }


/* ================================================================
   18. TOAST NOTIFICATIONS
   ================================================================ */
.h2o-toast {
  position: fixed !important;
  bottom: 140px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(16px) !important;
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
  border-radius: var(--r-pill) !important;
  box-shadow: var(--sh-lg) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 99999 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transition: all 0.3s var(--ease) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.h2o-toast--show { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; }
.h2o-toast--success { background: rgba(22,101,52,0.92) !important; color: #fff !important; }
.h2o-toast--warning { background: rgba(146,64,14,0.92) !important; color: #fff !important; }
.h2o-toast--info { background: rgba(17,19,24,0.88) !important; color: #fff !important; }


/* ================================================================
   19. SWIPE-TO-DELETE (mobile)
   ================================================================ */
.h2o-swipe-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--r-xl) !important;
  margin-bottom: 12px !important;
  box-shadow: var(--sh-xs) !important;
}
.h2o-swipe-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  z-index: 0;
}
.h2o-swipe-delete-icon {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.h2o-swipe-wrap.h2o-swiping .h2o-swipe-delete-icon { opacity: 1; }
.h2o-swipe-wrap.h2o-swipe-deleting { max-height: 0 !important; margin: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease, margin 0.3s ease !important; }


/* ================================================================
   20. ANIMATIONS & KEYFRAMES
   ================================================================ */
@keyframes h2oPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--h2o-glow); }
  50% { box-shadow: 0 0 0 8px rgba(242,107,34,0.06); }
}
@keyframes h2oShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes h2oFadeSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Item removal */
.h2o-removing { opacity: 0 !important; transform: translateX(-30px) scale(0.95) !important; transition: all 0.3s var(--ease) !important; }


/* ================================================================
   21. DESKTOP LAYOUT (≥769px)
   ================================================================ */
@media (min-width: 769px) {
  .woocommerce-cart .entry-content-wrap,
  .woocommerce-checkout .entry-content-wrap { padding: 40px 48px 80px !important; max-width: 1280px !important; }

  .h2o-stepper { margin-bottom: 32px; }

  /* Cart: side-by-side — Decision Rail dominant */
  .woocommerce-cart .kadence-woo-cart-form-wrap {
    display: flex !important; flex-wrap: wrap !important; gap: 32px !important; align-items: flex-start !important;
  }
  .woocommerce-cart .woocommerce-cart-form { flex: 1 !important; min-width: 0 !important; }
  .woocommerce-cart .cart-collaterals { width: 360px !important; flex-shrink: 0 !important; }
  .woocommerce-cart .cart_totals { position: sticky !important; top: 24px !important; }

  /* Checkout: side-by-side */
  .woocommerce-checkout form.checkout,
  .woocommerce-checkout form.woocommerce-checkout {
    display: flex !important; flex-wrap: wrap !important; gap: 32px !important; align-items: flex-start !important;
  }
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout #customer_details { flex: 1 !important; min-width: 0 !important; }
  .woocommerce-checkout #order_review_wrapper,
  .woocommerce-checkout #order_review { width: 380px !important; flex-shrink: 0 !important; }
  .woocommerce-checkout #order_review { position: sticky !important; top: 24px !important; }

  /* Inline first/last name on desktop */
  .woocommerce-checkout .form-row-first { width: calc(50% - 8px) !important; display: inline-block !important; vertical-align: top !important; margin-right: 16px !important; }
  .woocommerce-checkout .form-row-last { width: calc(50% - 8px) !important; display: inline-block !important; vertical-align: top !important; }

  .h2o-shipping-bar { order: -1; width: 100%; }

  /* Desktop trust badges — inline, well-spaced */
  .h2o-trust { gap: 20px !important; }
}


/* ================================================================
   22. MOBILE LAYOUT (≤768px)
   ================================================================ */
@media (max-width: 768px) {
  .h2o-sticky-cta { display: block; }
  .woocommerce-checkout .h2o-summary-toggle { display: block; }

  /* Cart: stack */
  .woocommerce-cart .kadence-woo-cart-form-wrap { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { width: 100% !important; flex: none !important; }
  .woocommerce-cart .cart_totals { position: static !important; }

  /* ── TABLE → APP-LIKE CARDS ── */
  .woocommerce-cart table.shop_table.cart {
    border: none !important; box-shadow: none !important; background: transparent !important;
    border-radius: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important;
  }
  .woocommerce-cart table.shop_table.cart thead { display: none !important; }

  /* Product card — CLEAN PREMIUM, airy */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item {
    display: grid !important;
    grid-template-columns: 84px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 16px !important;
    padding: 18px !important;
    background: var(--card) !important;
    border-radius: var(--r-xl) !important;
    border: 1px solid var(--line) !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: var(--sh-xs) !important;
    align-items: center !important;
    overflow: hidden !important;
    min-width: 0 !important;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
    will-change: transform !important;
  }
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item:not(.h2o-has-swipe) { margin-bottom: 12px !important; }

  /* Kill td defaults — prevent overflow */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
    display: block !important; border: none !important; padding: 0 !important; background: transparent !important;
    float: none !important; width: auto !important; text-align: left !important; min-width: 0 !important; overflow: hidden !important;
  }

  /* Remove button — HIDDEN on mobile (swipe-to-delete handles this) */
  .woocommerce-cart td.product-remove { display: none !important; }

  /* Thumbnail — spans both rows */
  .woocommerce-cart td.product-thumbnail { grid-row: 1 / 3 !important; grid-column: 1 !important; align-self: center !important; overflow: visible !important; }
  .woocommerce-cart td.product-thumbnail a { display: block !important; width: 84px !important; height: 84px !important; }
  .woocommerce-cart td.product-thumbnail img {
    width: 84px !important; height: 84px !important; border-radius: var(--r-md) !important;
    object-fit: cover !important; display: block !important;
    border: 1px solid var(--line) !important; 
    background: var(--bg-soft) !important;
  }

  /* Product name — row 1 */
  .woocommerce-cart td.product-name {
    grid-row: 1 !important; grid-column: 2 !important; align-self: end !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important;
    padding-right: 0 !important; color: var(--ink) !important;
    max-width: 100% !important; min-width: 0 !important;
    overflow: hidden !important; word-wrap: break-word !important; overflow-wrap: break-word !important;
  }
  .woocommerce-cart td.product-name a { 
    font-size: inherit !important; font-weight: inherit !important; 
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
  }
  .woocommerce-cart td.product-name .variation { font-size: 11px !important; color: var(--ink-4) !important; font-weight: 500 !important; }

  /* Row 2: Price + Quantity side by side */
  .woocommerce-cart td.product-price {
    display: inline-flex !important; grid-row: 2 !important; grid-column: 2 !important;
    font-size: 17px !important; font-weight: 800 !important; color: var(--ink) !important;
    align-self: center !important; align-items: center !important;
    letter-spacing: -0.02em !important; min-width: 0 !important;
  }
  .woocommerce-cart td.product-quantity { 
    grid-row: 2 !important; grid-column: 2 !important; align-self: center !important; 
    min-width: 0 !important; justify-self: end !important; 
  }

  /* KILL subtotal completely — multiple selectors for specificity */
  .woocommerce-cart td.product-subtotal,
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal,
  .woocommerce-cart table.shop_table.cart td.product-subtotal {
    display: none !important; visibility: hidden !important; 
    width: 0 !important; height: 0 !important; overflow: hidden !important;
    position: absolute !important; left: -9999px !important;
  }

  /* Qty controls — clean pill with orange accent */
  .woocommerce-cart .quantity { border: 1.5px solid var(--line) !important; border-radius: var(--r-pill) !important; height: 38px !important; background: var(--bg-soft) !important; }
  .woocommerce-cart .quantity .minus,
  .woocommerce-cart .quantity .plus { width: 36px !important; height: 35px !important; font-size: 17px !important; font-weight: 700 !important; }
  .woocommerce-cart .quantity .plus { background: var(--h2o) !important; color: #fff !important; border-radius: 0 var(--r-pill) var(--r-pill) 0 !important; }
  .woocommerce-cart .quantity .plus:active { background: var(--h2o-hover) !important; }
  .woocommerce-cart .quantity .minus { color: var(--ink-3) !important; border-radius: var(--r-pill) 0 0 var(--r-pill) !important; }
  .woocommerce-cart .quantity .qty { width: 34px !important; height: 35px !important; font-size: 14px !important; font-weight: 800 !important; }

  /* Coupon row — clean centered */
  .woocommerce-cart table.shop_table.cart td.actions {
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    background: transparent !important; border-radius: 0 !important; border: none !important;
    padding: 10px 0 !important; grid-column: 1 / -1 !important;
    align-items: center !important;
  }
  .woocommerce-cart .h2o-coupon-toggle { padding: 10px 0 !important; font-size: 13px !important; align-self: flex-start !important; }
  .woocommerce-cart .coupon { 
    width: 100% !important; min-width: 0 !important; 
    display: flex !important; flex-direction: column !important; gap: 10px !important;
    background: var(--bg-soft) !important; padding: 16px !important; border-radius: var(--r-lg) !important;
    border: 1px solid var(--line) !important; align-items: stretch !important;
  }
  .woocommerce-cart .coupon.h2o-coupon-hidden { display: none !important; }
  .woocommerce-cart .coupon .input-text {
    width: 100% !important; min-width: 0 !important;
    border: 1.5px solid var(--line) !important; border-radius: var(--r-md) !important; 
    padding: 13px 16px !important; font-size: 14px !important; background: #fff !important;
    text-align: center !important;
  }
  .woocommerce-cart .coupon .button { 
    width: 100% !important;
    border-radius: var(--r-md) !important; padding: 13px 20px !important; font-size: 13px !important; 
    font-weight: 800 !important; text-align: center !important;
    background: var(--ink) !important; color: #fff !important; border: none !important;
    text-transform: uppercase !important; letter-spacing: 0.04em !important;
  }
  .woocommerce-cart .coupon .button:active { transform: scale(0.97) !important; }

  /* Cart totals — Decision Stack */
  .woocommerce-cart .cart_totals { 
    background: var(--card) !important; 
    box-shadow: var(--sh-sm) !important; 
    border: 1px solid var(--line) !important;
    padding: 22px 18px !important; 
    border-radius: var(--r-xl) !important; 
    margin-top: 6px !important;
  }
  .woocommerce-cart .cart_totals > h2 { font-size: 11px !important; margin-bottom: 14px !important; color: var(--ink-4) !important; letter-spacing: 0.08em !important; }
  .woocommerce-cart .cart_totals table th,
  .woocommerce-cart .cart_totals table td { padding: 10px 0 !important; border-bottom: 1px solid var(--line-soft) !important; font-size: 14px !important; }
  .woocommerce-cart .cart_totals .order-total th,
  .woocommerce-cart .cart_totals .order-total td { border-bottom: none !important; padding-top: 16px !important; border-top: 2px solid var(--ink) !important; }
  .woocommerce-cart .cart_totals .order-total td { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }

  /* Checkout button — big, unmissable */
  .woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; margin-top: 12px !important; }
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { border-radius: var(--r-pill) !important; padding: 17px !important; font-size: 14px !important; box-shadow: var(--sh-cta) !important; letter-spacing: 0.06em !important; }

  /* Checkout stack */
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout #customer_details { padding: 20px 16px !important; }

  /* Collapsible order TABLE only (payment stays visible) */
  .woocommerce-checkout .woocommerce-checkout-review-order-table { transition: max-height 0.4s var(--ease), opacity 0.3s ease, margin 0.3s ease !important; overflow: hidden !important; }
  .woocommerce-checkout .woocommerce-checkout-review-order-table.h2o-collapsed { max-height: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; }

  /* Trust badges — compact row on mobile */
  .h2o-trust { gap: 12px !important; flex-wrap: wrap !important; justify-content: center !important; padding-top: 14px !important; margin-top: 14px !important; }
  .h2o-trust__item { font-size: 10px !important; gap: 4px !important; }
  .h2o-trust__item svg { width: 12px !important; height: 12px !important; }

  /* Coupon toggle full width */
  .h2o-coupon-toggle { display: flex !important; }

  /* Payment — fix label wrapping on mobile */
  .woocommerce-checkout #payment { padding: 16px !important; }

  /* Stock badges — hide on mobile (prevents visual band) */
  .h2o-stock-badge { display: none !important; }
  .woocommerce-checkout #payment ul.payment_methods li { padding: 12px !important; }
  .woocommerce-checkout #payment ul.payment_methods li label { 
    font-size: 13px !important; gap: 6px !important; 
  }
  .woocommerce-checkout #payment ul.payment_methods li label img { max-height: 18px !important; }
  .woocommerce-checkout #payment .payment_box { padding: 6px 0 0 0 !important; font-size: 11px !important; }
  .h2o-badge-recommended { font-size: 7px !important; padding: 2px 6px !important; }
  .h2o-pay-microcopy { font-size: 10px !important; }
}


/* ================================================================
   23. SMALL MOBILE (≤480px)
   ================================================================ */
@media (max-width: 480px) {
  .woocommerce-cart .entry-content-wrap,
  .woocommerce-checkout .entry-content-wrap { padding: 10px 8px 160px !important; }

  .h2o-stepper { gap: 0; }
  .h2o-stepper__dot { width: 28px; height: 28px; font-size: 10px; }
  .h2o-stepper__label { font-size: 9px; }
  .h2o-stepper__line { min-width: 22px; }

  .woocommerce-cart table.shop_table.cart tbody tr.cart_item { grid-template-columns: 68px 1fr !important; gap: 3px 12px !important; padding: 14px !important; border-radius: var(--r-lg) !important; }
  .woocommerce-cart td.product-thumbnail a { width: 68px !important; height: 68px !important; }
  .woocommerce-cart td.product-thumbnail img { width: 68px !important; height: 68px !important; border-radius: var(--r-sm) !important; }
  .woocommerce-cart td.product-name { font-size: 12px !important; }
  .woocommerce-cart td.product-price { font-size: 15px !important; }
  .woocommerce-cart .quantity { height: 34px !important; }
  .woocommerce-cart .quantity .qty { width: 30px !important; height: 32px !important; font-size: 13px !important; }
  .woocommerce-cart .quantity .minus,
  .woocommerce-cart .quantity .plus { width: 32px !important; height: 32px !important; font-size: 15px !important; }

  .woocommerce-checkout .col2-set,
  .woocommerce-checkout #customer_details { padding: 18px 14px !important; border-radius: var(--r-lg) !important; }
  .woocommerce-checkout #payment { padding: 16px !important; border-radius: var(--r-lg) !important; }

  .h2o-toast { font-size: 12px !important; padding: 10px 18px !important; }
  .h2o-sticky-cta__price { font-size: 20px; }
  .h2o-sticky-cta__btn { padding: 13px 22px; font-size: 12px; }

  .h2o-swipe-wrap { border-radius: 20px !important; margin-bottom: 12px !important; }
}


/* ================================================================
   24. ANIMATED GRADIENT CTA
   ================================================================ */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.h2o-sticky-cta__btn {
  background: linear-gradient(135deg, #F47920 0%, #FF8C38 25%, #F26B22 50%, #FF9E4A 75%, #F47920 100%) !important;
  background-size: 300% 300% !important;
  animation: h2oGradientShift 4s ease infinite !important;
}
@keyframes h2oGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ================================================================
   25. CARD ENTRANCE ANIMATIONS
   ================================================================ */
/* Cart product cards — staggered entrance */
.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  animation: h2oCardEntrance 0.5s var(--ease) forwards;
}
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:nth-child(1) { animation-delay: 0.05s; }
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:nth-child(2) { animation-delay: 0.12s; }
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:nth-child(3) { animation-delay: 0.19s; }
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:nth-child(4) { animation-delay: 0.26s; }
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:nth-child(5) { animation-delay: 0.33s; }
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:nth-child(6) { animation-delay: 0.40s; }
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:nth-child(n+7) { animation-delay: 0.45s; }

/* Totals sidebar entrance */
.woocommerce-cart .cart_totals {
  opacity: 0;
  transform: translateY(16px);
  animation: h2oCardEntrance 0.5s var(--ease) 0.25s forwards;
}

/* Stepper entrance */
.h2o-stepper {
  opacity: 0;
  transform: translateY(-10px);
  animation: h2oCardEntrance 0.4s var(--ease) 0s forwards;
}

/* Shipping bar entrance */
.h2o-shipping-bar {
  opacity: 0;
  transform: translateY(12px);
  animation: h2oCardEntrance 0.4s var(--ease) 0.1s forwards;
}

@keyframes h2oCardEntrance {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Checkout cards entrance */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
  opacity: 0;
  transform: translateY(20px);
  animation: h2oCardEntrance 0.5s var(--ease) 0.1s forwards;
}
.woocommerce-checkout #order_review {
  opacity: 0;
  transform: translateY(20px);
  animation: h2oCardEntrance 0.5s var(--ease) 0.2s forwards;
}
.woocommerce-checkout #payment {
  opacity: 0;
  transform: translateY(20px);
  animation: h2oCardEntrance 0.5s var(--ease) 0.3s forwards;
}


/* ================================================================
   26. SKELETON LOADING PLACEHOLDERS
   ================================================================ */
.h2o-skeleton {
  position: relative !important;
  overflow: hidden !important;
  background: var(--line) !important;
  border-radius: var(--r-sm) !important;
  color: transparent !important;
}
.h2o-skeleton * { visibility: hidden !important; }
.h2o-skeleton::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%) !important;
  animation: h2oSkeletonPulse 1.5s ease-in-out infinite !important;
}
@keyframes h2oSkeletonPulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Skeleton overlay on cart totals during update */
.h2o-skeleton-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: inherit !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: h2oFadeSlide 0.2s var(--ease) !important;
}
.h2o-skeleton-dots {
  display: flex !important;
  gap: 6px !important;
}
.h2o-skeleton-dots span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--h2o) !important;
  animation: h2oDotPulse 1.2s ease-in-out infinite !important;
}
.h2o-skeleton-dots span:nth-child(2) { animation-delay: 0.15s !important; }
.h2o-skeleton-dots span:nth-child(3) { animation-delay: 0.3s !important; }
@keyframes h2oDotPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}


/* ================================================================
   27. FREE SHIPPING CONFETTI
   ================================================================ */
.h2o-confetti-piece {
  position: fixed !important;
  width: 8px !important;
  height: 8px !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  border-radius: 2px !important;
  animation: h2oConfettiFall 2s var(--ease-out) forwards !important;
}
@keyframes h2oConfettiFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.3); }
}


/* ================================================================
   28. ANIMATED STEPPER LINE
   ================================================================ */
.h2o-stepper__line--done {
  background: var(--h2o);
  position: relative;
  overflow: hidden;
}
.h2o-stepper__line--done::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: h2oStepperShine 2s ease-in-out 0.5s 1;
}
@keyframes h2oStepperShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Animated line fill on load */
.h2o-stepper__line { overflow: hidden; position: relative; }
.h2o-stepper__line--animated {
  background: var(--line);
}
.h2o-stepper__line--animated::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--h2o);
  border-radius: 1px;
  animation: h2oLineFill 0.8s var(--ease) forwards;
}
.h2o-stepper__line--animated:nth-of-type(1)::before { animation-delay: 0.3s; }
.h2o-stepper__line--animated:nth-of-type(2)::before { animation-delay: 0.6s; }
@keyframes h2oLineFill {
  to { width: 100%; }
}


/* ================================================================
   29. ACCESSIBILITY
   ================================================================ */
.woocommerce-cart *:focus-visible,
.woocommerce-checkout *:focus-visible { outline: 2px solid var(--h2o) !important; outline-offset: 2px !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ================================================================
   25. SAFARI / iOS FIXES
   ================================================================ */
@supports (-webkit-touch-callout: none) {
  .h2o-sticky-cta { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); }
  .h2o-sticky-cta { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .woocommerce-cart .cart_totals,
  .woocommerce-checkout #order_review { -webkit-overflow-scrolling: touch; }
  .woocommerce-cart table.shop_table.cart,
  .woocommerce-checkout .woocommerce-checkout-review-order-table { -webkit-mask-image: -webkit-radial-gradient(white, black); }
}


/* ================================================================
   26. CART — PER-ITEM DELIVERY HINT (furnizor products)
   ================================================================ */
.h2o-cart-delivery-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  color: #059669;
  line-height: 1.3;
}
.h2o-cart-delivery-hint svg { flex-shrink: 0; color: #059669; }
.h2o-cart-delivery-hint strong { font-weight: 600; }