/** Shopify CDN: Minification failed

Line 750:0 Unexpected "}"
Line 756:0 Unexpected "}"
Line 874:0 Unexpected "}"
Line 1202:0 Unexpected "}"
Line 1383:0 Unexpected "}"
Line 1660:0 Unexpected "}"

**/
/* ====================================================
   GEEKFAN MONO-TECH · v2
   Complete visual system override for Dawn theme
   ==================================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Base Font Override ── */
body,
.shopify-section,
.header__heading-link,
.header__menu-item,
.menu-drawer__menu-item {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ====================================================
   HEADER & NAVIGATION — Premium Minimal
   ==================================================== */

/* Kill ALL default underlines from Dawn */
.header__menu-item--active,
.header__active-menu-item,
.header__menu-item:hover,
.header__menu-item span,
.header__menu-item--active span,
details[open] > .header__menu-item {
  text-decoration: none !important;
  text-underline-offset: unset !important;
}
.header__menu-item::after,
.header__menu-item span::after,
.header__active-menu-item::after,
header-menu .header__menu-item::after,
.list-menu__item--active::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
  height: 0 !important;
}

/* Nav link styling */
.header__menu-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #6B6B6B !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.header__menu-item:hover {
  color: #1A1A1A !important;
  background-color: rgba(0, 212, 255, 0.08) !important;
}
.header__menu-item--active,
.header__active-menu-item {
  color: #1A1A1A !important;
  font-weight: 600 !important;
  background-color: rgba(0, 212, 255, 0.1) !important;
}

/* Header icon buttons */
.header__icon {
  transition: all 0.2s ease !important;
}
.header__icon:hover {
  color: #00D4FF !important;
}

/* Announcement bar refinement */
.announcement-bar {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* ====================================================
   SECTION SEPARATION — Clear Visual Rhythm
   ==================================================== */

/* Every section gets breathing room */
.shopify-section + .shopify-section {
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* Dark sections don't need top border */
.color-scheme-3,
.color-scheme-4,
[class*="scheme-3"],
[class*="scheme-4"] {
  border-top: none !important;
}

/* ====================================================
   DUAL PATH (Multicolumn used as 2-card entry)
   ==================================================== */

/* Make multicolumn cards look like proper entry cards */
.multicolumn-card {
  background: #FFFFFF !important;
  border: 2px solid #E8E8E8 !important;
  border-radius: 16px !important;
  padding: 40px 32px !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
}
.multicolumn-card:hover {
  border-color: #00D4FF !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 212, 255, 0.12) !important;
}

/* Second card (Usado) gets amber accent on hover */
.multicolumn-list__item:nth-child(2) .multicolumn-card:hover {
  border-color: #FFB800 !important;
  box-shadow: 0 12px 32px rgba(255, 184, 0, 0.12) !important;
}

/* Card headings in dual path */
.multicolumn-card__heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}

/* Card description text */
.multicolumn-card .rte p {
  color: #6B6B6B !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

/* Card link/CTA */
.multicolumn-card .link {
  display: inline-block !important;
  margin-top: 16px !important;
  padding: 12px 28px !important;
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.multicolumn-card .link:hover {
  background: #00D4FF !important;
  color: #1A1A1A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,212,255,0.3) !important;
}

/* Second card link: amber CTA */
.multicolumn-list__item:nth-child(2) .multicolumn-card .link {
  background: #1A1A1A !important;
}
.multicolumn-list__item:nth-child(2) .multicolumn-card .link:hover {
  background: #FFB800 !important;
  color: #1A1A1A !important;
  box-shadow: 0 6px 16px rgba(255,184,0,0.3) !important;
}

/* ====================================================
   BUTTONS — High Visibility System
   ==================================================== */

.button,
.shopify-challenge__button,
button.button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  min-height: 48px !important;
  padding: 14px 32px !important;
  font-size: 0.92rem !important;
}

/* Primary: strong black, cyan on hover */
.button--primary {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  border: 2px solid #1A1A1A !important;
}
.button--primary:hover {
  background-color: #00D4FF !important;
  color: #1A1A1A !important;
  border-color: #00D4FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3) !important;
}

/* Secondary: outlined */
.button--secondary {
  background-color: transparent !important;
  color: #1A1A1A !important;
  border: 2px solid #1A1A1A !important;
}
.button--secondary:hover {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* On dark backgrounds */
.color-scheme-3 .button--primary,
[class*="scheme-3"] .button--primary {
  background-color: #00D4FF !important;
  color: #1A1A1A !important;
  border-color: #00D4FF !important;
}
.color-scheme-3 .button--primary:hover,
[class*="scheme-3"] .button--primary:hover {
  background-color: #FFFFFF !important;
  color: #1A1A1A !important;
  border-color: #FFFFFF !important;
}
.color-scheme-3 .button--secondary,
[class*="scheme-3"] .button--secondary {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.color-scheme-3 .button--secondary:hover,
[class*="scheme-3"] .button--secondary:hover {
  background-color: #FFFFFF !important;
  color: #1A1A1A !important;
}

/* On usado (amber) backgrounds */
.color-scheme-4 .button--primary,
[class*="scheme-4"] .button--primary {
  background-color: #FFB800 !important;
  color: #1A1A1A !important;
  border-color: #FFB800 !important;
}
.color-scheme-4 .button--primary:hover,
[class*="scheme-4"] .button--primary:hover {
  background-color: #FFFFFF !important;
  color: #1A1A1A !important;
  border-color: #FFFFFF !important;
}

/* ====================================================
   PRODUCT CARDS — Clean & Elevated
   ==================================================== */

.card-wrapper {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.card-wrapper:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.1) !important;
}

.card__heading,
.card-information__text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* Prices: mono font */
.price-item,
.price__regular .price-item--regular,
.price__sale .price-item--sale {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600 !important;
}
.price__sale .price-item--regular {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 400 !important;
  color: #B0B0B0 !important;
}

/* Quick add button */
.quick-add__submit {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* ====================================================
   HERO / SLIDESHOW
   ==================================================== */

.slideshow .banner__heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.slideshow .banner__text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

/* ====================================================
   SECTION TITLES
   ==================================================== */

.section-header__title,
.title,
h2.title,
.collection__title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ====================================================
   BENEFITS MULTICOLUMN (scheme-2, 6 cards)
   ==================================================== */

/* Benefits section gets special card treatment */
.color-scheme-2 .multicolumn-card,
[class*="scheme-2"] .multicolumn-card {
  background: #FFFFFF !important;
  border: 1px solid #E8E8E8 !important;
  border-radius: 12px !important;
  padding: 28px 20px !important;
  border-top: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}
.color-scheme-2 .multicolumn-card:hover,
[class*="scheme-2"] .multicolumn-card:hover {
  border-top-color: #00D4FF !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}

/* ====================================================
   NEWSLETTER
   ==================================================== */

.newsletter-form__field-wrapper .field__input {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
}
.newsletter-form__button {
  border-radius: 8px !important;
}

/* ====================================================
   RICH TEXT (Brand Story)
   ==================================================== */

.rich-text__heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
.rich-text__text p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #404040 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* ====================================================
   FOOTER
   ==================================================== */

.footer .footer-block__heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}
.footer a {
  font-size: 0.85rem !important;
  transition: color 0.2s ease !important;
}

/* ====================================================
   ACCESSIBILITY
   ==================================================== */

.button:focus-visible,
.header__menu-item:focus-visible,
a:focus-visible {
  outline: 2px solid #00D4FF !important;
  outline-offset: 3px !important;
}

/* ====================================================
   SCROLLBAR (subtle)
   ==================================================== */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F5F5F5; }
::-webkit-scrollbar-thumb { background: #D4D4D4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B0B0B0; }

/* ====================================================
   DROPDOWN MENU FIX
   ==================================================== */

details > summary.header__menu-item {
  padding-right: 26px !important;
}
.header__menu-item .icon-caret {
  margin-left: 5px !important;
  width: 9px !important;
  height: 9px !important;
  opacity: 0.4 !important;
}
.header__submenu {
  font-family: 'Inter', sans-serif !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
  border: 1px solid #E8E8E8 !important;
}
.header__submenu .header__menu-item {
  font-size: 0.82rem !important;
  text-transform: none !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
}

/* ====================================================
   LOGO — Reduce black box weight
   ==================================================== */

.header__heading-logo-image {
  border-radius: 8px !important;
  max-height: 44px !important;
  width: auto !important;
}

/* ====================================================
   Principles: card-based sections, deep/light rhythm,
   immersive hero, big typography, thin header
   ==================================================== */

  .header {
    padding: 4px 0 !important;
    min-height: unset !important;
  }
  .header-wrapper {
    padding: 6px 12px !important;
  }
  .header__heading-logo-image {
    max-height: 32px !important;
  }
  /* Hide "Geek Fan" text below logo on mobile if it exists */
  .header__heading-link span:not(:first-child) {
    display: none !important;
  }
  /* Announcement bar: compact */
  .announcement-bar {
    font-size: 0.65rem !important;
    padding: 6px 32px !important;
    letter-spacing: 0.02em !important;
    min-height: unset !important;
  }
  .announcement-bar .icon-caret {
    width: 8px !important;
    height: 8px !important;
  }

  /* ─────────────────────────────────────────────
     1. HERO — Full viewport immersive
     ───────────────────────────────────────────── */
  .slideshow,
  .slideshow .slideshow__slide,
  .slideshow .banner {
    min-height: 75vh !important;
  }
  .slideshow .banner__media,
  .slideshow .banner__media img {
    object-fit: cover !important;
    object-position: center 30% !important;
  }
  /* Hero content at bottom with gradient scrim */
  .slideshow .banner__content {
    justify-content: flex-end !important;
    padding-bottom: 48px !important;
  }
  .slideshow .banner__box {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%) !important;
    padding: 40px 20px 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  .slideshow .banner__heading {
    font-size: 2rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 8px !important;
  }
  .slideshow .banner__text {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    opacity: 0.85 !important;
  }
  /* Slide counter/dots at bottom */
  .slideshow__controls {
    bottom: 12px !important;
  }

  /* ─────────────────────────────────────────────
     2. SECTIONS — Card-based with rounded corners
     Every section looks like an independent card
     ───────────────────────────────────────────── */
  .shopify-section:not(.shopify-section-group-header-group):not(.shopify-section-group-footer-group) {
    margin: 6px 10px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  /* Remove old section borders */
  .shopify-section + .shopify-section {
    border-top: none !important;
  }

  /* ─────────────────────────────────────────────
     3. DUAL PATH — Two distinct action cards
     ───────────────────────────────────────────── */
  .multicolumn-card {
    padding: 32px 24px !important;
    border-radius: 16px !important;
    border-width: 2px !important;
    margin-bottom: 10px !important;
  }
  .multicolumn-card__heading {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 8px !important;
  }
  .multicolumn-card .rte p {
    font-size: 0.85rem !important;
    color: #6B6B6B !important;
    line-height: 1.45 !important;
  }
  .multicolumn-card .link {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 24px !important;
    display: block !important;
    font-size: 0.9rem !important;
    margin-top: 16px !important;
  }

  /* ─────────────────────────────────────────────
     4. PRODUCT GRIDS — Bigger cards, less clutter
     ───────────────────────────────────────────── */
  .collection .grid {
    gap: 10px !important;
  }
  .card-wrapper {
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  /* Remove hover effects on touch */
  .card-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .card-wrapper:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s !important;
  }
  .card__heading {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }
  .price-item {
    font-size: 0.9rem !important;
  }
  /* Quick add button */
  .quick-add__submit {
    border-radius: 12px !important;
    min-height: 40px !important;
  }

  /* ─────────────────────────────────────────────
     5. SECTION TITLES — Bold, left-aligned, big
     ───────────────────────────────────────────── */
  .section-header__title,
  h2.title,
  .title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    padding: 0 8px !important;
    line-height: 1.1 !important;
  }

  /* ─────────────────────────────────────────────
     6. IMAGE BANNER (Usado Promo) — Immersive card
     ───────────────────────────────────────────── */
  .banner {
    min-height: 50vh !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .banner__heading {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }
  .banner__text {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    opacity: 0.9 !important;
  }
  .banner .button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
  }
  /* Stack buttons vertically */
  .banner__buttons {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────
     7. BENEFITS GRID — Horizontal scroll cards
     ───────────────────────────────────────────── */
  .color-scheme-2 .multicolumn-card,
  [class*="scheme-2"] .multicolumn-card {
    padding: 20px 18px !important;
    border-radius: 14px !important;
    text-align: left !important;
    min-width: 260px !important;
  }
  .color-scheme-2 .multicolumn-card__heading,
  [class*="scheme-2"] .multicolumn-card__heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
  .color-scheme-2 .multicolumn-card .rte p,
  [class*="scheme-2"] .multicolumn-card .rte p {
    font-size: 0.78rem !important;
  }

  /* ─────────────────────────────────────────────
     8. RICH TEXT (Brand Story) — Magazine feel
     ───────────────────────────────────────────── */
  .rich-text__heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    text-align: left !important;
  }
  .rich-text__text p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #404040 !important;
    text-align: left !important;
  }
  .rich-text .button {
    width: 100% !important;
    border-radius: 12px !important;
  }

  /* ─────────────────────────────────────────────
     9. NEWSLETTER — Clean card
     ───────────────────────────────────────────── */
  .newsletter__heading {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
  }
  .newsletter-form {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .newsletter-form__field-wrapper {
    width: 100% !important;
  }
  .newsletter-form__field-wrapper .field__input {
    border-radius: 12px !important;
    min-height: 48px !important;
  }
  .newsletter-form__button {
    width: 100% !important;
    border-radius: 12px !important;
    min-height: 48px !important;
  }

  /* ─────────────────────────────────────────────
     10. FOOTER — Compact
     ───────────────────────────────────────────── */
  .footer {
    border-radius: 20px 20px 0 0 !important;
  }
  .footer-block__heading {
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
  }
  .footer a {
    font-size: 0.8rem !important;
    padding: 3px 0 !important;
  }

  /* ─────────────────────────────────────────────
     11. GLOBAL MOBILE
     ───────────────────────────────────────────── */
  .button {
    min-height: 48px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
  }
  body {
    overflow-x: hidden !important;
  }

  /* ── Mobile Drawer Menu ── */
  .menu-drawer__menu-item {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 14px 24px !important;
    text-transform: none !important;
  }
  .menu-drawer__submenu .menu-drawer__menu-item {
    font-size: 0.9rem !important;
    padding: 12px 36px !important;
    color: #6B6B6B !important;
  }
}

/* ── Tablet ── */
  .slideshow .banner__heading {
    font-size: 2.2rem !important;
  }
}

/* ============================================================
   GEEKFAN v3 HOTFIX — Hero Text, Button Visibility, Mobile Polish
   ============================================================ */

/* --- Hero Banner Text Overlay --- */
.banner__content {
  z-index: 2;
  position: relative;
}

.banner__heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
  line-height: 1.1 !important;
}

.banner__text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
  opacity: 0.92;
}

/* Hero CTA Buttons — high contrast on dark overlay */
.banner .button--primary,
.banner .shopify-section .button--primary {
  background-color: #00D4FF !important;
  color: #1A1A1A !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 16px rgba(0,212,255,0.3) !important;
  transition: all 0.25s ease !important;
}

.banner .button--primary:hover {
  background-color: #FFFFFF !important;
  color: #1A1A1A !important;
  box-shadow: 0 6px 24px rgba(255,255,255,0.3) !important;
  transform: translateY(-2px) !important;
}

/* Scheme-4 (Usado/amber) hero buttons */
.color-scheme-4 .banner .button--primary,
.banner.color-scheme-4 .button--primary {
  background-color: #FFB800 !important;
  box-shadow: 0 4px 16px rgba(255,184,0,0.3) !important;
}

.color-scheme-4 .banner .button--primary:hover,
.banner.color-scheme-4 .button--primary:hover {
  background-color: #FFFFFF !important;
  box-shadow: 0 6px 24px rgba(255,255,255,0.3) !important;
}

/* --- Desktop Hero Sizing --- */
@media screen and (min-width: 750px) {
  .banner__heading {
    font-size: 3.2rem !important;
  }
  .banner__text {
    font-size: 1.15rem !important;
    max-width: 600px;
  }
  .banner__content {
    padding: 48px 60px !important;
  }
}

  .banner__text {
    font-size: 0.88rem !important;
  }
  .banner__content {
    padding: 24px 20px !important;
  }
  .banner .button--primary {
    padding: 12px 24px !important;
    font-size: 0.85rem !important;
    width: auto !important;
  }
  
  /* Section spacing consistency */
  .shopify-section + .shopify-section {
    margin-top: 0 !important;
  }
  
  /* Dual path cards — stack cleanly */
  .multicolumn-list .multicolumn-list__item {
    margin-bottom: 12px !important;
  }
  
  /* Product card grid — tighter on mobile */
  .collection .grid .grid__item {
    padding: 4px !important;
  }
  
  /* Benefits — more compact */
  .section-benefits .multicolumn-list__item {
    padding: 16px 12px !important;
  }
  
  /* Newsletter section — reduce padding */
  .newsletter .newsletter__wrapper {
    padding: 32px 16px !important;
  }

  /* Brand story — compact */
  .section-brand_story .rich-text__wrapper {
    padding: 32px 16px !important;
  }
}

/* --- Announcement bar accents fix --- */
.announcement-bar__message {
  font-family: 'Inter', sans-serif !important;
}

/* --- "Ver todo" / "View all" link buttons — more visible --- */
.collection-product-list .view-all a,
a.full-unstyled-link[aria-label*="Ver todo"] {
  font-weight: 600 !important;
  color: #00D4FF !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* --- Sold out badge — clearer --- */
.badge--sold-out {
  background-color: #6B6B6B !important;
  color: #FFFFFF !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* --- Sale badge — amber pop --- */
.badge--sale {
  background-color: #FFB800 !important;
  color: #1A1A1A !important;
  font-weight: 700 !important;
}

/* ============================================================
   GEEKFAN v4 — Deep Polish: Cards, Footer, Typography, Micro-interactions
   ============================================================ */

/* --- Dual Path Section — Premium Card Upgrade --- */
.section-dual_path .multicolumn-card {
  background: #FFFFFF !important;
  border: 1px solid #E8E8E8 !important;
  border-radius: 16px !important;
  padding: 36px 28px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative;
  overflow: hidden;
}

.section-dual_path .multicolumn-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #00D4FF;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.section-dual_path .multicolumn-card:hover::before {
  transform: scaleX(1);
}

.section-dual_path .multicolumn-card:hover {
  border-color: #00D4FF !important;
  box-shadow: 0 8px 32px rgba(0,212,255,0.12) !important;
  transform: translateY(-4px) !important;
}

.section-dual_path .multicolumn-list__item:last-child .multicolumn-card::before {
  background: #FFB800;
}

.section-dual_path .multicolumn-list__item:last-child .multicolumn-card:hover {
  border-color: #FFB800 !important;
  box-shadow: 0 8px 32px rgba(255,184,0,0.12) !important;
}

.section-dual_path .multicolumn-card__info h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  margin-bottom: 8px !important;
}

/* --- Product Cards — Refined --- */
.card-wrapper .card {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.card-wrapper:hover .card {
  border-color: rgba(0,212,255,0.2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
}

.card__content .price {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
}

.card__content .price--on-sale .price-item--regular {
  color: #B0B0B0 !important;
  font-size: 0.85em !important;
}

.card__content .price--on-sale .price-item--sale {
  color: #00D4FF !important;
  font-weight: 700 !important;
}

.card__content .card__heading a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  color: #1A1A1A !important;
}

.card__content .card__heading a:hover {
  color: #00D4FF !important;
}

/* Vendor label */
.card .caption-with-letter-spacing {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #6B6B6B !important;
}

/* Quick add button */
.quick-add__submit {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* --- Benefits Section — Icon-style Cards --- */
.section-benefits .multicolumn-card {
  text-align: center !important;
  padding: 28px 20px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
}

.section-benefits .multicolumn-card:hover {
  border-color: rgba(0,212,255,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

.section-benefits .multicolumn-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1A1A1A !important;
  margin-bottom: 8px !important;
}

.section-benefits .multicolumn-card .rte p {
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: #6B6B6B !important;
}

/* --- Section Headers — Consistent --- */
.section-header__title,
h2.title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #1A1A1A !important;
}

/* --- Newsletter Section — Premium Feel --- */
.newsletter-form__field-wrapper {
  max-width: 480px !important;
  margin: 0 auto !important;
}

.newsletter-form__field-wrapper input[type="email"] {
  border-radius: 8px 0 0 8px !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  padding: 14px 16px !important;
}

.newsletter-form__field-wrapper input[type="email"]::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

.newsletter-form__field-wrapper .newsletter-form__button {
  border-radius: 0 8px 8px 0 !important;
  background: #00D4FF !important;
  color: #1A1A1A !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
}

/* --- Footer — Cleaner --- */
.footer .footer__content-top {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 48px !important;
}

.footer .footer-block__heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 16px !important;
}

.footer .footer-block a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.8) !important;
  transition: color 0.2s !important;
}

.footer .footer-block a:hover {
  color: #00D4FF !important;
}

.footer .footer__copyright {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.4) !important;
}

/* --- Brand Story Section — Editorial --- */
.section-brand_story .rich-text__text p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #4A4A4A !important;
  max-width: 680px !important;
  margin: 0 auto 24px !important;
}

.section-brand_story .rich-text__heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* --- Global Micro-interactions --- */
a, button, .card, .multicolumn-card {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Smooth page load */
.shopify-section {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

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

.shopify-section:nth-child(1) { animation-delay: 0s; }
.shopify-section:nth-child(2) { animation-delay: 0.05s; }
.shopify-section:nth-child(3) { animation-delay: 0.1s; }
.shopify-section:nth-child(4) { animation-delay: 0.15s; }
.shopify-section:nth-child(5) { animation-delay: 0.2s; }

  .section-dual_path .multicolumn-card h3 {
    font-size: 1.2rem !important;
  }
  
  /* Product cards tighter */
  .card__content {
    padding: 10px 8px !important;
  }
  
  .card__heading a {
    font-size: 0.82rem !important;
  }
  
  /* Benefits — 2 columns on mobile */
  .section-benefits .multicolumn-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  
  .section-benefits .multicolumn-card {
    padding: 16px 12px !important;
  }
  
  .section-benefits .multicolumn-card h3 {
    font-size: 0.85rem !important;
  }
  
  .section-benefits .multicolumn-card .rte p {
    font-size: 0.75rem !important;
  }
  
  /* Brand story compact */
  .section-brand_story .rich-text__text p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
  }
  
  /* Footer mobile */
  .footer .footer-block__heading {
    font-size: 0.72rem !important;
  }
  
  .footer .footer-block a {
    font-size: 0.82rem !important;
    padding: 4px 0 !important;
  }
}

/* ====================================================
   GEEKFAN REDESIGN v3 — 2026-04-18
   Navigation Enhancement + Price Pop + Banner Upgrade
   ==================================================== */

/* ── HEADER: Bigger, Bolder Navigation ── */
.header__menu-item {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 10px 16px !important;
  color: #1A1A1A !important;
}

@media screen and (min-width: 990px) {
  .header__menu-item {
    font-size: 1.0rem !important;
    padding: 12px 18px !important;
  }
  .header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .header__heading-logo-image {
    max-width: 120px !important;
  }
}

.header__menu-item:hover {
  color: #00D4FF !important;
  background-color: rgba(0, 212, 255, 0.1) !important;
  transform: translateY(-1px);
}

/* ── ANNOUNCEMENT BAR: Bigger, Bolder ── */
.announcement-bar {
  padding: 10px 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.announcement-bar__message {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

/* ── PRICE DISPLAY: Make Prices POP ── */
.price-item--sale,
.price__sale .price-item--sale,
.card__content .price--on-sale .price-item--sale {
  color: #FF3B30 !important;
  font-weight: 800 !important;
  font-size: 1.15em !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

.price-item--regular,
.price__sale .price-item--regular,
.card__content .price--on-sale .price-item--regular {
  text-decoration: line-through !important;
  color: #999 !important;
  font-size: 0.85em !important;
}

/* Sale badge */
.badge--sale,
.price__badge-sale {
  background-color: #FF3B30 !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

/* PDP price - even bigger */
.product__info-wrapper .price-item--sale,
.product__info-wrapper .price__sale .price-item--sale {
  font-size: 1.8rem !important;
  color: #FF3B30 !important;
  font-weight: 800 !important;
}
.product__info-wrapper .price-item--regular,
.product__info-wrapper .price__sale .price-item--regular {
  font-size: 1.1rem !important;
  text-decoration: line-through !important;
  color: #999 !important;
}

/* ── PRODUCT CARDS: Elevated Design ── */
.card-wrapper {
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.card-wrapper:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.card__content {
  padding: 12px 8px !important;
}

.card__heading {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* ── SECTION HEADINGS: Bolder ── */
.section-header__title,
.title,
h2.title {
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  letter-spacing: -0.02em !important;
}

@media screen and (min-width: 750px) {
  .section-header__title,
  .title,
  h2.title {
    font-size: 2rem !important;
  }
}

/* ── IMAGE BANNER: Stronger CTA ── */
.banner__content .button {
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.banner__heading {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ── SLIDESHOW HERO: Bigger Text ── */
.slideshow__text .banner__heading {
  font-size: 2.2rem !important;
}
@media screen and (min-width: 750px) {
  .slideshow__text .banner__heading {
    font-size: 3.2rem !important;
  }
}
.slideshow__text .banner__text {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
}

/* ── COLLECTION PAGE: Tighter Grid ── */
.collection .grid--4-col-desktop .grid__item {
  padding: 8px !important;
}

/* ── TRUST BADGES (Benefits Grid) ── */
.multicolumn-card__info h3 {
  font-weight: 700 !important;
  font-size: 1rem !important;
}

  .header__menu-item {
    font-size: 1rem !important;
    padding: 12px 16px !important;
  }
  .slideshow__text .banner__heading {
    font-size: 1.6rem !important;
  }
  .price-item--sale,
  .card__content .price--on-sale .price-item--sale {
    font-size: 1.05em !important;
  }
}

/* ====================================================
   ANIMATIONS & MOTION DESIGN — GeekFan v4
   ==================================================== */

/* ── Scroll Reveal Animation ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

/* ── Section Headings: Slide in from left ── */
.section-header__title,
h2.title {
  animation: fadeSlideRight 0.6s ease-out both;
}

/* ── Product Cards: Staggered fade up ── */
.collection .grid__item {
  animation: fadeSlideUp 0.5s ease-out both;
}
.collection .grid__item:nth-child(1) { animation-delay: 0.05s; }
.collection .grid__item:nth-child(2) { animation-delay: 0.1s; }
.collection .grid__item:nth-child(3) { animation-delay: 0.15s; }
.collection .grid__item:nth-child(4) { animation-delay: 0.2s; }
.collection .grid__item:nth-child(5) { animation-delay: 0.25s; }
.collection .grid__item:nth-child(6) { animation-delay: 0.3s; }

/* ── Product Card Hover: Lift + Glow ── */
.card-wrapper {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease !important;
}
.card-wrapper:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0, 212, 255, 0.15), 
              0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ── Price: Pulse on sale items ── */
@keyframes pricePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.price--on-sale .price-item--sale {
  animation: pricePulse 2s ease-in-out infinite;
  display: inline-block;
}

/* ── Hero Slideshow: Smooth Ken Burns on images ── */
@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.slideshow__media.banner__media img {
  animation: kenBurns 8s ease-in-out alternate infinite;
}

/* ── Hero Text: Fade in with delay ── */
.slideshow__text .banner__heading {
  animation: fadeSlideUp 0.8s ease-out 0.3s both;
}
.slideshow__text .banner__text {
  animation: fadeSlideUp 0.8s ease-out 0.5s both;
}
.slideshow__text .button {
  animation: fadeSlideUp 0.8s ease-out 0.7s both;
}

/* ── Slideshow Transition: Crossfade ── */
.slideshow__slide {
  transition: opacity 0.8s ease-in-out !important;
}

/* ── CTA Buttons: Glow effect ── */
.banner__content .button,
.slideshow__text .button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}
.banner__content .button::after,
.slideshow__text .button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.1) 50%,
    transparent 70%
  );
  animation: shimmer 3s ease-in-out infinite;
}
.banner__content .button:hover,
.slideshow__text .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3) !important;
}

/* ── Section Dividers: Subtle gradient line ── */
.shopify-section + .shopify-section::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
}

/* ── Announcement Bar: Smooth scroll ── */
.announcement-bar-slider {
  animation: fadeSlideUp 0.5s ease-out both;
}

/* ── Trust/Benefits Grid: Staggered entrance ── */
.multicolumn-list .multicolumn-list__item {
  animation: scaleIn 0.4s ease-out both;
}
.multicolumn-list .multicolumn-list__item:nth-child(1) { animation-delay: 0.1s; }
.multicolumn-list .multicolumn-list__item:nth-child(2) { animation-delay: 0.2s; }
.multicolumn-list .multicolumn-list__item:nth-child(3) { animation-delay: 0.3s; }
.multicolumn-list .multicolumn-list__item:nth-child(4) { animation-delay: 0.4s; }

/* ── "View All" Button: Elegant hover ── */
.collection__view-all a,
a.button--outline {
  transition: all 0.3s ease !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
}
.collection__view-all a:hover,
a.button--outline:hover {
  background: rgba(0, 212, 255, 0.08) !important;
  border-color: rgba(0, 212, 255, 0.6) !important;
  transform: translateX(4px) !important;
}

/* ── Smooth Scroll Behavior ── */
html {
  scroll-behavior: smooth;
}

/* ── Reduce motion for accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================================
   ==================================================== */

/* Mobile: Force text to overlay on image instead of stacking below */

  /* Make image container fill the full slide */
  .slideshow__media.banner__media {
    position: relative !important;
    min-height: 55vh !important;
    width: 100% !important;
  }

  /* Image: center on product */
  .slideshow__media.banner__media img {
    object-position: center 30% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Text: overlay on bottom of image with gradient */
  .slideshow__text-wrapper.banner__content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    height: auto !important;
    padding: 60px 20px 24px 20px !important;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.85) 100%
    ) !important;
  }

  .slideshow__text.banner__box {
    background: none !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Text styling on dark gradient */
  .slideshow__text .banner__heading {
    color: #fff !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    margin-bottom: 6px !important;
  }

  .slideshow__text .banner__text,
  .slideshow__text .banner__text p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  }

  /* CTA button on mobile */
  .slideshow__text .button {
    margin-top: 10px !important;
    padding: 10px 24px !important;
    font-size: 0.85rem !important;
    background: #00D4FF !important;
    color: #000 !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
  }

  /* Hide the separate text box below image */
  .banner--mobile-bottom .slideshow__text-wrapper {
    position: absolute !important;
    bottom: 0 !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
  }

  /* Slideshow counter/dots: above the gradient */
  .slider-counter {
    position: relative !important;
    z-index: 3 !important;
    margin-top: -40px !important;
  }
}

/* Tablet */
}


/* ====================================================
   MOBILE STYLES — CONSOLIDATED v5
   All mobile rules (max-width: 749px) in ONE block.
   DO NOT add mobile rules elsewhere in this file.
   ==================================================== */

@media screen and (max-width: 749px) {

  /* ── 0. GLOBAL MOBILE RESETS ── */
  body { overflow-x: hidden !important; }

  /* ── 1. HEADER — Ultra-thin, non-intrusive ── */
  .section-header,
  .shopify-section-group-header-group {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }
  .header {
    padding: 4px 0 !important;
    min-height: unset !important;
  }
  .header-wrapper { padding: 6px 12px !important; }
  .header__heading-logo-image { max-height: 32px !important; }
  .announcement-bar {
    font-size: 0.68rem !important;
    padding: 6px 32px !important;
    letter-spacing: 0.02em !important;
    min-height: unset !important;
  }
  .announcement-bar__message { font-size: 0.68rem !important; }

  /* ── 2. HERO / SLIDESHOW — Full viewport overlay ── */
  .slideshow,
  .slideshow .slideshow__slide,
  .slideshow .banner {
    min-height: 70vh !important;
  }
  .slideshow .banner__media,
  .slideshow .banner__media img {
    object-fit: cover !important;
    object-position: center 30% !important;
    width: 100% !important;
    height: 100% !important;
  }
  /* Force text overlay on image (override Dawn banner--mobile-bottom) */
  .banner--mobile-bottom .banner__content,
  .slideshow .banner__content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 0 !important;
    z-index: 2 !important;
  }
  .banner--mobile-bottom .banner__box,
  .slideshow .banner__box {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
    padding: 48px 20px 24px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .slideshow .banner__heading {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 6px !important;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }
  .slideshow .banner__text,
  .slideshow .banner__text p {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
  }
  .slideshow .banner .button,
  .slideshow .banner .button--primary {
    padding: 10px 24px !important;
    font-size: 0.85rem !important;
    width: auto !important;
    display: inline-block !important;
    background: #00D4FF !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
  }
  .slideshow__controls { bottom: 12px !important; }

  /* ── 3. IMAGE BANNERS (non-slideshow) ── */
  .banner:not(.slideshow__slide .banner) {
    min-height: 45vh !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .banner:not(.slideshow__slide .banner) .banner__heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }
  .banner:not(.slideshow__slide .banner) .banner__text {
    font-size: 0.84rem !important;
    line-height: 1.4 !important;
  }
  .banner:not(.slideshow__slide .banner) .banner__content {
    padding: 20px 16px !important;
  }
  .banner:not(.slideshow__slide .banner) .button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
  }
  .banner__buttons {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* ── 4. SECTION CARD SYSTEM ── */
  .shopify-section:not(.shopify-section-group-header-group):not(.shopify-section-group-footer-group) {
    margin: 6px 10px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .shopify-section + .shopify-section::before {
    display: none !important;
  }

  /* ── 5. SECTION TITLES ── */
  .section-header__title,
  h2.title,
  .title {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    padding: 0 8px !important;
    line-height: 1.15 !important;
  }

  /* ── 6. MULTICOLUMN / DUAL PATH ── */
  .multicolumn-card {
    padding: 24px 18px !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }
  .multicolumn-card__heading {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
  }
  .multicolumn-card .rte p {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    color: #6B6B6B !important;
  }

  /* ── 7. PRODUCT CARDS & GRID + PRICE FIX ── */
  .collection .grid {
    gap: 10px !important;
  }
  .card-wrapper {
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: none !important;
  }
  .card-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .card-wrapper:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s !important;
  }

  /* Card content — enough room for prices */
  .card__content {
    padding: 10px 10px 14px !important;
  }
  .card__heading,
  .card__heading a {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* === PRICE DISPLAY — CRITICAL FIX === */
  .price,
  .price__container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px 6px !important;
  }
  .price-item,
  .price-item--regular {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }
  .price--on-sale .price-item--sale,
  .card__content .price--on-sale .price-item--sale {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    color: #FF3B30 !important;
  }
  .price--on-sale .price-item--regular,
  .card__content .price--on-sale .price-item--regular {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    color: #999 !important;
    text-decoration: line-through !important;
  }
  /* Sale badge */
  .badge--sale,
  .price__badge-sale {
    font-size: 0.65rem !important;
    padding: 2px 5px !important;
  }
  /* Quick add */
  .quick-add__submit {
    border-radius: 12px !important;
    min-height: 40px !important;
  }

  /* ── 8. BENEFITS GRID — 2 columns ── */
  .multicolumn-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .multicolumn-list .multicolumn-list__item {
    min-width: unset !important;
  }
  .multicolumn-list .multicolumn-card {
    padding: 14px 12px !important;
    text-align: left !important;
  }
  .multicolumn-list .multicolumn-card h3 {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }
  .multicolumn-list .multicolumn-card .rte p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  /* ── 9. RICH TEXT ── */
  .rich-text__heading {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    text-align: left !important;
  }
  .rich-text__text p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
  }

  /* ── 10. NEWSLETTER ── */
  .newsletter__heading {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
  }
  .newsletter-form {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .newsletter-form__field-wrapper { width: 100% !important; }
  .newsletter-form__field-wrapper .field__input {
    border-radius: 12px !important;
    min-height: 48px !important;
  }
  .newsletter-form__button {
    width: 100% !important;
    border-radius: 12px !important;
    min-height: 48px !important;
  }
  .newsletter .newsletter__wrapper { padding: 28px 16px !important; }

  /* ── 11. FOOTER ── */
  .footer { border-radius: 20px 20px 0 0 !important; }
  .footer .footer-block__heading {
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
  }
  .footer a,
  .footer .footer-block a {
    font-size: 0.82rem !important;
    padding: 4px 0 !important;
  }

  /* ── 12. GLOBAL BUTTONS ── */
  .button {
    min-height: 46px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
  }

  /* ── 13. DRAWER MENU ── */
  .menu-drawer__menu-item {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 14px 24px !important;
    text-transform: none !important;
  }
  .menu-drawer__submenu .menu-drawer__menu-item {
    font-size: 0.9rem !important;
    padding: 12px 36px !important;
    color: #6B6B6B !important;
  }

  /* ── 14. ANIMATIONS — Mobile-safe ── */
  .card-wrapper { transition: none !important; }
  .slideshow__media.banner__media img {
    animation: none !important; /* disable Ken Burns on mobile for performance */
  }
  .price--on-sale .price-item--sale {
    animation: none !important; /* disable pulse on mobile */
  }

} /* END MOBILE CONSOLIDATED v5 */

/* ── TABLET ── */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .header__heading-logo-image { max-height: 40px !important; }
  .slideshow .banner__heading { font-size: 2.2rem !important; }
  .slideshow__media.banner__media img {
    object-position: center center !important;
  }
}

/* ====================================================
   HOTFIX v5.2 — ALL RULES MOBILE-ONLY
   ==================================================== */

@media screen and (max-width: 749px) {

  /* FIX 1: Hero banner — center product */
  .slideshow__media.banner__media img {
    object-position: center center !important;
  }

  /* FIX 2: Price — prevent overflow out of card */
  .card__content {
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .card__content .price {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .card__content .price__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    max-width: 100% !important;
  }
  .card__content .price-item,
  .card__content .price-item--regular,
  .card__content .price-item--sale {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }
  .card__content .price--on-sale .price-item--sale {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #FF3B30 !important;
    letter-spacing: -0.02em !important;
  }
  .card__content .price--on-sale .price-item--regular {
    font-size: 0.68rem !important;
    color: #999 !important;
  }
  .card__content .badge {
    font-size: 0.6rem !important;
    padding: 2px 4px !important;
  }
  .quick-add .button,
  .quick-add__submit {
    font-size: 0.72rem !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  /* FIX 3: PDP — remove strange frame around product images */
  .product__media-wrapper {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .product__media-item {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .product__media-list {
    border: none !important;
    padding: 0 !important;
  }
  .product__modal-opener {
    border: none !important;
    outline: none !important;
  }
  .product__media-toggle {
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
  }
  .product__modal-opener .product__media-icon {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.9) !important;
  }

  /* FIX 4: Card borders clean */
  .card-wrapper .card {
    border: none !important;
    outline: none !important;
  }

} /* END HOTFIX v5.2 */


/* ====================================================
   HERO / SLIDESHOW — Mobile-First Fixes
   Geekfan.mx v3
   ==================================================== */

/* ── Mobile Banner: Text above image, not overlapping ── */
@media screen and (max-width: 749px) {
  /* Force text BELOW the image on mobile (not overlaid) */
  .banner--mobile-bottom .slideshow__text-wrapper {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    padding: 20px 16px !important;
    background: #0b0f1a !important; /* Match dark theme bg */
  }

  .banner--mobile-bottom .slideshow__text.banner__box {
    max-width: 100% !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* Mobile banner image gets proper height */
  .slideshow.banner--adapt_image.banner--mobile-bottom .slideshow__media {
    height: 56vw !important;
    min-height: 200px !important;
    max-height: 320px !important;
  }

  /* Banner text font sizes for mobile */
  .slideshow__text .banner__heading {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .slideshow__text .banner__text {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .slideshow__text .banner__buttons {
    flex-direction: row !important;
    gap: 10px !important;
  }

  .slideshow__text .button {
    font-size: 0.88rem !important;
    padding: 12px 20px !important;
    min-height: 44px !important;
    width: auto !important;
    flex: 0 auto !important;
  }
}

/* ── Desktop banner: limit height, improve text readability ── */
@media screen and (min-width: 750px) {
  .slideshow.banner--adapt_image {
    max-height: 600px !important;
  }

  .slideshow__text.banner__box {
    max-width: 540px !important;
    padding: 3rem 4rem !important;
  }

  .slideshow__text .banner__heading {
    font-size: 2.4rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }

  .slideshow__text .banner__text {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

/* ── Reduce slideshow auto-rotate speed (from 5s to minimum 8s) ── */
slideshow-component[data-speed="5000"] {
  --slideshow-duration: 8000ms !important;
}

/* Hide slideshow dots/controls if only 1 slide */
slideshow-component:has(.slideshow__slide:only-child) .slideshow__controls,
slideshow-component:has(.slideshow__slide:only-child) .slideshow__autoplay {
  display: none !important;
}

/* ── Banner overlay: ensure text is always readable ── */
.slideshow__text-wrapper {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

@media screen and (max-width: 749px) {
  /* On mobile, no blur (performance + readability) */
  .slideshow__text-wrapper {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0b0f1a !important;
  }
}

/* ── Banner CTA buttons: high contrast on all slides ── */
.banner__box .button {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}

.banner__box .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ── Slide image: ensure it fills width completely ── */
.slideshow__media img,
.slideshow__media {
  width: 100% !important;
  object-fit: cover !important;
}

/* ── Hide the slideshow "dots" on mobile if > 3 slides ── */
@media screen and (max-width: 749px) {
  .slideshow__control-wrapper .dot {
    width: 6px !important;
    height: 6px !important;
    margin: 0 3px !important;
  }
}