/* ═══════════════════════════════════════════════════════════════════════
   KAKOARA LOGO COLOR SYSTEM — Design Tokens
   Pixel-extracted from the uploaded Kakoara logo
   
   Usage:
     <link rel="stylesheet" href="assets/css/kakoara-logo-colors.css">
     Then use var(--logo-teal), var(--gradient-primary), etc.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Exact Logo Colors ─── */
  --logo-teal:       #33C9BA;
  --logo-blue:       #4E95BC;
  --logo-cyan:       #4EBAB8;
  --logo-violet:     #7185C2;
  --logo-deep:       #2E676E;
  --logo-light-vio:  #A399DA;
  --logo-dark-vio:   #50507B;
  --logo-bright-cy:  #85EEDB;
  --logo-deep-cy:    #066D5B;

  /* ─── RGB Versions (for rgba() use) ─── */
  --logo-teal-rgb:       51, 201, 186;
  --logo-blue-rgb:       78, 149, 188;
  --logo-cyan-rgb:       78, 186, 184;
  --logo-violet-rgb:     113, 133, 194;
  --logo-deep-rgb:       46, 103, 110;
  --logo-light-vio-rgb:  163, 153, 218;
  --logo-dark-vio-rgb:   80, 80, 123;
  --logo-bright-cy-rgb:  133, 238, 219;
  --logo-deep-cy-rgb:    6, 109, 91;

  /* ─── Gradients ─── */
  --gradient-horiz:  linear-gradient(90deg, #33C9BA, #4E95BC, #7185C2, #A399DA);
  --gradient-primary: linear-gradient(180deg, #A399DA, #7185C2, #4E95BC, #4EBAB8, #33C9BA);
  --gradient-glow:   radial-gradient(circle, rgba(163,153,218,0.4), rgba(78,149,188,0.2), transparent);

  /* ─── Derived Shadows & Glows ─── */
  --logo-teal-glow:     rgba(51, 201, 186, 0.3);
  --logo-cyan-glow:     rgba(78, 186, 184, 0.25);
  --logo-blue-glow:     rgba(78, 149, 188, 0.25);
  --logo-violet-glow:   rgba(113, 133, 194, 0.25);
  --logo-deep-glow:     rgba(46, 103, 110, 0.15);
  --logo-bright-glows:  rgba(133, 238, 219, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   1. TEXT SELECTION
   ═══════════════════════════════════════════════════════════════════════ */
::selection {
  background: rgba(var(--logo-teal-rgb), 0.25);
  color: var(--logo-deep);
}
::-moz-selection {
  background: rgba(var(--logo-teal-rgb), 0.25);
  color: var(--logo-deep);
}

/* ─── Section Edge Fades ─── */
.k-home-section::before,
.section::before,
.k-home-section::after,
.section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 0;
}
.k-home-section::before,
.section::before {
  top: 0;
  background: linear-gradient(180deg, rgba(var(--logo-teal-rgb), 0.03), transparent);
}
.k-home-section::after,
.section::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(var(--logo-violet-rgb), 0.03), transparent);
}

/* ─── Vertical Dividers ─── */
.site-topbar__right > *,
.footer__column,
.metric-card {
  border-color: transparent;
  border-image: linear-gradient(180deg, transparent, rgba(var(--logo-teal-rgb), 0.15), rgba(var(--logo-blue-rgb), 0.2), transparent) 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. CUSTOM SCROLLBAR — Global
   ═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--logo-teal), var(--logo-violet)) !important;
  border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--logo-cyan), var(--logo-light-vio)) !important;
}
* {
  scrollbar-color: var(--logo-teal) rgba(16, 12, 8, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. SCROLL PROGRESS BAR — Gold gradient from core CSS
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   4. BACK-TO-TOP BUTTON
   ═══════════════════════════════════════════════════════════════════════ */
.k-global-scroll-top,
.scroll-top-button {
  background: #2d241e !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 20px var(--logo-teal-glow) !important;
}
.k-global-scroll-top:hover,
.scroll-top-button:hover,
.k-global-scroll-top:focus-visible,
.scroll-top-button:focus-visible {
  box-shadow: 0 6px 30px rgba(var(--logo-bright-cy-rgb), 0.4), 0 0 0 4px var(--logo-bright-glows) !important;
}
.scroll-top-button span {
  border-top-color: #fff !important;
  border-left-color: #fff !important;
}
.k-global-scroll-top span {
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. BUTTON HOVER EFFECTS
   ═══════════════════════════════════════════════════════════════════════ */
.button:hover,
.button:focus-visible,
.button-ghost:hover,
.button-ghost:focus-visible,
.button-secondary:hover,
.button-secondary:focus-visible,
.product-link:hover,
.product-link:focus-visible,
.bag-link:hover,
.bag-link:focus-visible,
.add-to-cart-button:hover,
.add-to-cart-button:focus-visible,
.menu-button:hover,
.menu-button:focus-visible,
.icon-button:hover,
.icon-button:focus-visible {
  border-color: rgba(var(--logo-teal-rgb), 0.25) !important;
  box-shadow: 0 4px 20px var(--logo-teal-glow), 0 8px 30px rgba(var(--logo-teal-rgb), 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. LINK HOVER — Gradient underline
   ═══════════════════════════════════════════════════════════════════════ */
a:hover,
.text-link:hover,
.site-nav__links a:hover,
.footer__list a:hover,
.footer__column a:hover,
.footer__brand-column a:hover {
  color: var(--logo-teal) !important;
}
.text-link::after {
  background: var(--gradient-horiz) !important;
}
.site-nav__links a::after,
.site-nav__links a[aria-current="page"]::after {
  background: var(--gradient-horiz) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. TAB SELECTION — Active tab styles
   ═══════════════════════════════════════════════════════════════════════ */
.goo-nav__item[aria-current="page"],
.goo-nav__item.is-active,
.k-home-curated__tab.active,
.shop-chip.is-active,
.shop-size-pill.is-active,
.k-navbar.site-nav__links.goo-nav a.goo-nav__item[aria-current="page"] {
  background: linear-gradient(135deg, #c8943b, #d4a84b) !important;
  color: #fff !important;
  border-color: #c8943b !important;
  box-shadow: 0 0 20px rgba(200, 148, 59, 0.25) !important;
}

/* ─── Active tab underline (if used) ─── */
.k-home-curated__tab.active {
  box-shadow: 0 2px 8px rgba(var(--logo-teal-rgb), 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. INPUT FOCUS RINGS
   ═══════════════════════════════════════════════════════════════════════ */
input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.k-header__search-input:focus,
.footer__capture input:focus {
  border-color: var(--logo-teal) !important;
  box-shadow: 0 0 0 3px rgba(var(--logo-teal-rgb), 0.1), 0 2px 8px rgba(var(--logo-teal-rgb), 0.08) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. FOCUS-VISIBLE RINGS
   ═══════════════════════════════════════════════════════════════════════ */
.button:focus-visible,
.button-ghost:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.add-to-cart-button:focus-visible,
.product-link:focus-visible,
.site-nav__actions button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--logo-teal) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(var(--logo-teal-rgb), 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. SECTION DIVIDERS — Gradient fade lines
   ═══════════════════════════════════════════════════════════════════════ */
hr,
.section-divider,
.footer__hero,
.footer__grid,
.footer__bottom,
.site-topbar,
.site-header {
  border-image: linear-gradient(90deg, transparent, rgba(var(--logo-teal-rgb), 0.2) 20%, rgba(var(--logo-blue-rgb), 0.3) 50%, rgba(var(--logo-violet-rgb), 0.2) 80%, transparent) 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. PAGE AMBIENT GLOW — Subtle body edge glow
   ═══════════════════════════════════════════════════════════════════════ */
body::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(var(--logo-teal-rgb), 0.06), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(var(--logo-violet-rgb), 0.04), transparent 22%),
    radial-gradient(circle at 72% 82%, rgba(var(--logo-blue-rgb), 0.04), transparent 24%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. LOADING SPINNER
   ═══════════════════════════════════════════════════════════════════════ */
.kpo-spinner,
.loading-spinner,
.ac-btn__spinner {
  border-top-color: var(--logo-teal) !important;
  border-right-color: var(--logo-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. BADGE / PILL TAGS
   ═══════════════════════════════════════════════════════════════════════ */
.k-header__badge,
.bag-link [data-cart-count],
.kb-cart-drawer__count,
.kb-global-header__cart-badge {
  background: linear-gradient(135deg, var(--logo-teal), var(--logo-blue)) !important;
  box-shadow: 0 0 8px var(--logo-teal-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. MODAL OVERLAY — Logo-deep backdrop
   ═══════════════════════════════════════════════════════════════════════ */
.kb-account-overlay,
.kpo-overlay,
.k-cart-popup-overlay,
.kb-cart-overlay,
.site-search__backdrop {
  background: rgba(var(--logo-deep-rgb), 0.4) !important;
  backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. REDUCED MOTION — Safety override
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .k-global-scroll-top,
  .scroll-top-button {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   17. CARET / CURSOR COLOR — Teal caret in all text inputs
   ═══════════════════════════════════════════════════════════════════════ */
input, textarea, select, [contenteditable] {
  caret-color: var(--logo-teal) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   18. CHECKBOX & RADIO — Logo color overrides
   ═══════════════════════════════════════════════════════════════════════ */
input[type="checkbox"]:checked {
  accent-color: var(--logo-teal) !important;
}
input[type="radio"]:checked {
  accent-color: var(--logo-teal) !important;
  box-shadow: 0 0 0 2px rgba(var(--logo-violet-rgb), 0.3) !important;
}
/* Custom checkbox fallback */
.custom-checkbox.is-checked,
.checkbox-custom.is-checked {
  background: linear-gradient(135deg, var(--logo-teal), var(--logo-blue)) !important;
  border-color: var(--logo-teal) !important;
}
.custom-radio.is-selected .custom-radio__dot,
.radio-custom.is-selected .radio-custom__dot {
  background: var(--logo-teal) !important;
  box-shadow: 0 0 0 4px rgba(var(--logo-violet-rgb), 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. RANGE SLIDER — Teal thumb with glow trail
   ═══════════════════════════════════════════════════════════════════════ */
input[type="range"]::-webkit-slider-thumb {
  background: var(--logo-teal) !important;
  box-shadow: 0 0 12px var(--logo-teal-glow), 0 0 24px rgba(var(--logo-bright-cy-rgb), 0.2) !important;
}
input[type="range"]::-moz-range-thumb {
  background: var(--logo-teal) !important;
  box-shadow: 0 0 12px var(--logo-teal-glow), 0 0 24px rgba(var(--logo-bright-cy-rgb), 0.2) !important;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(var(--logo-teal-rgb), 0.15) !important;
}
input[type="range"]::-moz-range-track {
  background: rgba(var(--logo-teal-rgb), 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   20. DROPDOWN SELECT — Teal accent + violet background tint
   ═══════════════════════════════════════════════════════════════════════ */
select option:checked,
select option:hover {
  background: rgba(var(--logo-violet-rgb), 0.08) !important;
}
select:focus option:checked {
  background: rgba(var(--logo-violet-rgb), 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   21. NOTIFICATION TOASTS — Logo color accents
   ═══════════════════════════════════════════════════════════════════════ */
.toast--success,
.k-toast--success,
.kb-toast--success,
.notification--success {
  border-left: 3px solid var(--logo-teal) !important;
}
.toast--success .toast__icon,
.k-toast--success .k-toast__icon,
.notification--success .notification__icon {
  color: var(--logo-bright-cy) !important;
  filter: drop-shadow(0 0 6px rgba(var(--logo-teal-rgb), 0.3)) !important;
}
.toast--error .toast__recovery,
.k-toast--error .k-toast__recovery,
.notification--error .notification__recovery {
  color: var(--logo-teal) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   22. BADGE DOTS — Cart count, new messages with teal pulse
   ═══════════════════════════════════════════════════════════════════════ */
.badge-dot,
.unread-dot,
[data-badge-dot],
.kb-unread-dot {
  background: var(--logo-teal) !important;
  box-shadow: 0 0 0 2px rgba(var(--logo-bright-cy-rgb), 0.4) !important;
}
.badge-dot--pulse,
.unread-dot--pulse,
[data-badge-pulse] {
  animation: logo-badge-pulse 2s ease-in-out infinite !important;
}
@keyframes logo-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--logo-bright-cy-rgb), 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(var(--logo-bright-cy-rgb), 0.1), 0 0 12px rgba(var(--logo-teal-rgb), 0.15); }
}

/* ═══════════════════════════════════════════════════════════════════════
   23. PRODUCT BADGES — "Collections" = violet, "Sale" = teal shimmer
   ═══════════════════════════════════════════════════════════════════════ */
.product-badge--new,
.badge--collections,
.k-badge--collections,
[data-badge="Collections"],
.ni-card__badge {
  background: var(--logo-light-vio) !important;
  color: #fff !important;
}
.product-badge--sale,
.badge--sale,
.k-badge--sale,
[data-badge="Sale"] {
  background: linear-gradient(135deg, #C65D3B, #D4845E) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
.product-badge--sale::after,
.badge--sale::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--logo-bright-cy-rgb), 0.2), transparent);
  transform: translateX(-100%);
  animation: logo-shimmer-sweep 3s ease-in-out infinite;
}
@keyframes logo-shimmer-sweep {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════════════════
   24. SOLD OUT OVERLAY — Teal-dark overlay with strike-through
   ═══════════════════════════════════════════════════════════════════════ */
.sold-out-overlay,
.product-card__sold-out,
.k-sold-out {
  background: rgba(var(--logo-deep-rgb), 0.7) !important;
}
.sold-out-overlay .sold-out-text,
.product-card__sold-out .sold-out-text,
.k-sold-out .k-sold-out-text {
  text-decoration: line-through;
  text-decoration-color: var(--logo-teal) !important;
  text-decoration-thickness: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   25. WISHLIST HEART — Violet default, teal active
   ═══════════════════════════════════════════════════════════════════════ */
.wishlist-button:not(.is-active),
.k-wishlist-btn:not(.is-active),
.wl-heart:not(.is-active) {
  color: var(--logo-violet) !important;
}
.wishlist-button.is-active,
.k-wishlist-btn.is-active,
.wl-heart.is-active {
  color: var(--logo-teal) !important;
  fill: var(--logo-teal) !important;
  filter: drop-shadow(0 0 6px rgba(var(--logo-teal-rgb), 0.3)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   26. SIZE SELECTOR ACTIVE — Teal border + green inner glow
   ═══════════════════════════════════════════════════════════════════════ */
.size-btn.is-active,
.k-size-btn.is-active,
.shop-size-pill.is-active,
.k-size-pill.is-active {
  border-color: var(--logo-teal) !important;
  box-shadow: inset 0 0 8px rgba(var(--logo-bright-cy-rgb), 0.15), 0 0 0 2px rgba(var(--logo-teal-rgb), 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   27. TYPOGRAPHY — Drop caps, blockquotes, highlights, price slashes
   ═══════════════════════════════════════════════════════════════════════ */
/* Drop caps in editorial content */
.editorial-content p:first-of-type::first-letter,
.k-editorial p:first-of-type::first-letter,
.blog-content p:first-of-type::first-letter,
.article-content p:first-of-type::first-letter {
  font-size: 3.2em !important;
  font-weight: 700 !important;
  float: left !important;
  padding-right: 8px !important;
  line-height: 0.9 !important;
  background: var(--gradient-horiz) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* Blockquote left border */
blockquote,
.k-blockquote,
.editorial-content blockquote {
  border-left: 3px solid transparent !important;
  border-image: linear-gradient(180deg, var(--logo-teal), var(--logo-violet)) 1 !important;
}
/* Highlighted text (search results) */
::highlight(search-result),
mark,
.search-highlight {
  background: rgba(var(--logo-bright-cy-rgb), 0.25) !important;
  color: inherit !important;
}
/* Price slash strikethrough */
.price-original,
.k-price-original,
.old-price,
.product-card__price--original {
  text-decoration-color: var(--logo-light-vio) !important;
  text-decoration-thickness: 1.5px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   28. BREADCRUMB SEPARATOR — Teal
   ═══════════════════════════════════════════════════════════════════════ */
.breadcrumb-separator,
.breadcrumb__sep {
  color: var(--logo-cyan) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   29. PAGINATION — Active page in teal
   ═══════════════════════════════════════════════════════════════════════ */
.pagination .page-number.is-active,
.pagination .page-number.active,
.pagination a.is-active,
.pagination .current,
.k-pagination .is-active {
  background: var(--logo-teal) !important;
  color: #fff !important;
  border-color: var(--logo-teal) !important;
  box-shadow: 0 0 12px var(--logo-teal-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   30. SKELETON SHIMMER — Logo gradient sweep
   ═══════════════════════════════════════════════════════════════════════ */
.k-skeleton__bar-fill,
.skeleton-shimmer,
.skeleton-loader::before,
.product-skeleton::before,
.k-product-skeleton::before {
  background: linear-gradient(90deg,
    rgba(var(--logo-teal-rgb), 0.06),
    rgba(var(--logo-violet-rgb), 0.06),
    rgba(var(--logo-teal-rgb), 0.06)
  ) !important;
  background-size: 200% 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   31. LOADING SPINNER V2 — Teal ring with violet accent chasing dot
   ═══════════════════════════════════════════════════════════════════════ */
.loading-spinner--v2,
.k-spinner--logo {
  border-top-color: var(--logo-teal) !important;
  border-right-color: var(--logo-cyan) !important;
  border-bottom-color: rgba(var(--logo-teal-rgb), 0.15) !important;
  border-left-color: rgba(var(--logo-teal-rgb), 0.15) !important;
  box-shadow: 0 0 12px var(--logo-teal-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   32. FOOTER — Newsletter input focus, social icons, payments, copyright
   ═══════════════════════════════════════════════════════════════════════ */
/* Newsletter input focus — teal bottom border glow */
.footer__capture input:focus,
.newsletter-input:focus,
.footer-signup input:focus {
  border-bottom-color: var(--logo-teal) !important;
  box-shadow: 0 2px 8px rgba(var(--logo-teal-rgb), 0.1), 0 0 0 3px rgba(var(--logo-teal-rgb), 0.06) !important;
}
/* Social icons — logo colors per platform */
.social-icon:hover,
.social-link:hover,
.topbar-socials a:hover,
.footer__socials a:hover {
  filter: none !important;
}
.social-icon:hover svg,
.social-link:hover svg,
.topbar-socials a:hover svg,
.footer__socials a:hover svg {
  transition: color 0.3s ease;
}
.social-icon[aria-label*="instagram"]:hover svg,
a[href*="instagram"]:hover svg {
  color: var(--logo-violet) !important;
  fill: var(--logo-violet) !important;
}
.social-icon[aria-label*="tiktok"]:hover svg,
a[href*="tiktok"]:hover svg,
.social-icon[aria-label*="TikTok"]:hover svg {
  color: var(--logo-cyan) !important;
  fill: var(--logo-cyan) !important;
}
.social-icon[aria-label*="facebook"]:hover svg,
a[href*="facebook"]:hover svg,
.social-icon[aria-label*="pinterest"]:hover svg,
a[href*="pinterest"]:hover svg {
  color: var(--logo-teal) !important;
  fill: var(--logo-teal) !important;
}
/* Payment icons hover */
.payment-icon:hover,
.footer__payment-pill:hover,
[data-footer-payments] span:hover {
  background: rgba(var(--logo-cyan-rgb), 0.08) !important;
  border-color: rgba(var(--logo-cyan-rgb), 0.2) !important;
}
/* Copyright year */
.footer__copyright,
.footer__legal,
[data-current-year] {
  color: rgba(var(--logo-deep-rgb), 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   33. DARK MODE TOGGLE — Teal gradient track when ON
   ═══════════════════════════════════════════════════════════════════════ */
.theme-toggle[data-theme="dark"] .theme-toggle__track {
  background: linear-gradient(90deg, var(--logo-deep), var(--logo-teal)) !important;
  border-color: var(--logo-teal) !important;
}
.theme-toggle[data-theme="dark"] .theme-toggle__orb {
  transform: translateX(20px) !important;
}
.theme-toggle[data-theme="light"] .theme-toggle__track {
  background: rgba(var(--logo-teal-rgb), 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   34. CHECKOUT FLOW — Progress, security, confetti, thank you
   ═══════════════════════════════════════════════════════════════════════ */
/* Checkout progress steps */
.checkout-step.is-done .checkout-step__dot,
.cko-tracker__step.is-done .cko-tracker__dot {
  background: var(--logo-teal) !important;
  border-color: var(--logo-teal) !important;
  box-shadow: 0 0 16px var(--logo-teal-glow) !important;
}
.checkout-step.is-active .checkout-step__dot,
.cko-tracker__step.is-active .cko-tracker__dot {
  border-color: var(--logo-cyan) !important;
  box-shadow: 0 0 0 6px rgba(var(--logo-teal-rgb), 0.12), 0 4px 16px var(--logo-teal-glow) !important;
}
.checkout-step__connector.is-filled,
.cko-tracker__connector.is-filled::after {
  background: var(--logo-cyan) !important;
}
/* Security lock icon */
.security-icon,
.lock-icon,
[data-security-icon] {
  color: var(--logo-teal) !important;
  filter: drop-shadow(0 0 6px rgba(var(--logo-teal-rgb), 0.2)) !important;
}
/* Confirmation "Thank You" heading */
.order-confirm h2,
.checkout-confirm h2,
.cko-confirm h2 {
  background: var(--gradient-horiz) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.order-confirm .order-confirm__icon-wrap,
.checkout-confirm .confirm-icon-wrap,
.cko-confirm .cko-confirm__icon-wrap {
  background: linear-gradient(135deg, var(--logo-teal), var(--logo-blue)) !important;
  box-shadow: 0 12px 32px rgba(var(--logo-teal-rgb), 0.25) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   35. EMPTY STATES — Faint teal/violet text color
   ═══════════════════════════════════════════════════════════════════════ */
.empty-state--cart .empty-state__illustration,
.cart-empty .cart-empty__illustration,
.wishlist-empty .wishlist-empty__icon {
  color: var(--logo-teal) !important;
  opacity: 0.08 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   36. VOICE BROWSE — Mic button states
   ═══════════════════════════════════════════════════════════════════════ */
.pa-mic-btn:not(.is-active) {
  color: var(--logo-violet) !important;
}
.pa-mic-btn.is-active,
.pa-mic-btn.pa-mic--listening {
  color: var(--logo-teal) !important;
  animation: logo-mic-pulse 1.5s ease-in-out infinite !important;
}
.pa-mic-btn .pa-mic-ring {
  border-color: rgba(var(--logo-teal-rgb), 0.15) !important;
}
.pa-mic-btn.is-active .pa-mic-ring {
  border-color: var(--logo-teal) !important;
  animation: logo-ripple-ring 1.5s ease-out infinite !important;
}
.pa-mic-btn.pa-mic--error {
  color: #e74c3c !important;
  animation: none !important;
}
@keyframes logo-mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes logo-ripple-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   37. KONAMI CODE EASTER EGG — Fullscreen horn logo animation
   ═══════════════════════════════════════════════════════════════════════ */
.konami-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--logo-teal), var(--logo-violet)) !important;
  opacity: 0 !important;
  animation: konami-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  cursor: pointer !important;
}

.konami-overlay .konami-logo {
  max-width: 200px !important;
  width: 25vw !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  animation: konami-spin 4s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important;
}

.konami-overlay .konami-close-hint {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  opacity: 0 !important;
  animation: konami-fade-in 0.8s ease-out 1.2s forwards !important;
}

@keyframes konami-fade-in {
  0% { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes konami-spin {
  0%, 100% { transform: rotateY(0deg) scale(1); }
  25% { transform: rotateY(180deg) scale(1.08); }
  50% { transform: rotateY(360deg) scale(1); }
  75% { transform: rotateY(180deg) scale(1.08); }
}

/* ═══════════════════════════════════════════════════════════════════════
   38. BIRTHDAY INPUT SPARKLE — Violet accent
   ═══════════════════════════════════════════════════════════════════════ */
.birthday-field:valid {
  background-image: radial-gradient(circle at 90% 50%, rgba(var(--logo-light-vio-rgb), 0.2), transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   39. FIRST VISIT PARTICLE — Single teal/cyan drift
   ═══════════════════════════════════════════════════════════════════════ */
.first-visit-particle {
  background: radial-gradient(circle, var(--logo-bright-cy), transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   40. CHECKOUT CONFETTI — Teal and violet particles
   ═══════════════════════════════════════════════════════════════════════ */
.confetti-particle--teal {
  background: var(--logo-teal) !important;
}
.confetti-particle--violet {
  background: var(--logo-light-vio) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   41. NEWSLETTER / SIGNUP FORM — Focus underline animation
   ═══════════════════════════════════════════════════════════════════════ */
.footer__capture input:focus ~ .footer__capture-underline,
.newsletter-field:focus-within .newsletter-underline {
  transform: scaleX(1) !important;
  background: linear-gradient(90deg, var(--logo-teal), var(--logo-blue)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   42. REDUCED MOTION — Safety override for new sections
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .k-global-scroll-top,
  .scroll-top-button,
  .badge-dot--pulse,
  .unread-dot--pulse,
  .product-badge--sale::after,
  .badge--sale::after,
  .pa-mic-btn.is-active,
  .pa-mic-btn .pa-mic-ring,
  .pa-mic-btn.is-active .pa-mic-ring {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .konami-overlay {
    animation: none !important;
    opacity: 1 !important;
  }
  .konami-overlay .konami-logo {
    animation: none !important;
  }
  .konami-overlay .konami-close-hint {
    animation: none !important;
    opacity: 1 !important;
  }
}