/** Shopify CDN: Minification failed

Line 337:0 All "@import" rules must come first

**/
/* ================================================================
   AC V4 BRIDGE CSS — Acqua Club Design System v4
   Applica i token v4 alle sezioni esistenti del tema Shopify.
   Caricato globalmente su tema staging 195931701582.
   Fonte di verità token: lovable-scoped.css / ac-progetti-v4.css
   ================================================================ */

/* --- TOKEN ROOT: disponibili anche fuori .ac-v4 -------------- */
:root {
  --acb-blue:          hsl(215, 98%, 36%);   /* #0244B3 */
  --acb-blue-darker:   hsl(217, 100%, 22%);  /* #003A9C */
  --acb-blue-light:    hsl(210, 100%, 75%);  /* #80C0FF */
  --acb-deep:          hsl(222, 75%, 14%);   /* #0A1E45 */
  --acb-deep-2:        hsl(222, 60%, 9%);    /* #06132E */
  --acb-teal:          hsl(178, 70%, 41%);   /* #20B8AD */
  --acb-teal-dark:     hsl(180, 75%, 28%);   /* #127F7F */
  --acb-orange:        hsl(22, 95%, 56%);    /* #F78E31 */
  --acb-surface:       hsl(213, 40%, 97%);   /* #F2F6FB */
  --acb-surface-2:     hsl(213, 30%, 93%);   /* #EAEDF4 */
  --acb-text:          hsl(222, 40%, 12%);   /* #121D38 */
  --acb-text-soft:     hsl(222, 15%, 38%);   /* #535E70 */
  --acb-line:          hsl(213, 25%, 88%);   /* #D9E0EA */

  /* Gradienti */
  --acb-grad-blue:     linear-gradient(135deg, hsl(215, 98%, 36%), hsl(217, 100%, 22%));
  --acb-grad-deep:     linear-gradient(180deg, hsl(222, 75%, 14%), hsl(222, 60%, 9%));
  --acb-grad-teal:     linear-gradient(135deg, hsl(178, 70%, 41%), hsl(180, 75%, 28%));

  /* Ombre */
  --acb-shadow-blue:   0 8px 32px -8px hsl(215 98% 36% / 0.30);
  --acb-shadow-deep:   0 24px 64px -20px hsl(222 75% 14% / 0.50);
  --acb-shadow-card:   0 1px 3px hsl(222 75% 14% / 0.06), 0 18px 50px -20px hsl(215 98% 36% / 0.22);

  /* Transizione base v4 */
  --acb-transition:    all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ================================================================
   1. ECOBOCCIONE PARALLAX
   Rimappa --eco-* ai token v4.
   #02a0e2 (vecchio secondary) → ac-teal
   #c6d54f (vecchio accent) → ac-teal
   ================================================================ */

.ecoboccione-section {
  --eco-primary:    var(--acb-blue);
  --eco-secondary:  var(--acb-teal);
  --eco-accent:     var(--acb-teal);
  --eco-gradient:   var(--acb-grad-blue);
  --parallax-speed: 0.15;
}

/* Cerchi decorativi */
.ecoboccione-section .ecoboccione-parallax__circle--1,
.ecoboccione-section .ecoboccione-parallax__circle--2 {
  border-color: hsl(210 100% 75% / 0.22) !important;
}
.ecoboccione-section .ecoboccione-parallax__circle--3 {
  background: hsl(210 100% 75% / 0.07) !important;
  border-color: hsl(210 100% 75% / 0.16) !important;
}

/* Badge → gradient blu-teal, pill */
.ecoboccione-section .ecoboccione-parallax__badge {
  background: var(--acb-grad-blue) !important;
  border-radius: 999px !important;
  box-shadow: var(--acb-shadow-blue);
}

/* Feature icon → teal */
.ecoboccione-section .ecoboccione-parallax__feature-icon {
  background: hsl(178 70% 41% / 0.12) !important;
  color: var(--acb-teal) !important;
  border-color: hsl(178 70% 41% / 0.25) !important;
}

/* CTA button → pill + gradient blue */
.ecoboccione-section .ecoboccione-parallax__cta,
.ecoboccione-section .hero-modern__button--primary {
  border-radius: 999px !important;
  transition: var(--acb-transition) !important;
}
.ecoboccione-section .ecoboccione-parallax__cta:hover {
  box-shadow: 0 12px 40px -8px hsl(215 98% 36% / 0.40) !important;
  transform: translateY(-2px) !important;
}

/* Titoli sezione → Montserrat 900 */
.ecoboccione-section h1,
.ecoboccione-section h2,
.ecoboccione-section h3 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}


/* ================================================================
   2. HERO MODERNA
   Override pattern, button radius/secondary, heading weight.
   buttonBgColor e headingColor gestiti via settings staging.
   ================================================================ */

/* Pattern di sfondo → colori v4 */
.hero-modern-section::after {
  background-image:
    radial-gradient(circle at 20% 50%, hsl(215 98% 36% / 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, hsl(178 70% 41% / 0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, hsl(222 75% 14% / 0.03) 0%, transparent 40%) !important;
}

/* Heading → 900 + tracking v4 */
.hero-modern-section .hero-slide-modern__heading {
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

/* Button primary → pill */
.hero-modern-section .hero-modern__button--primary {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: var(--acb-transition) !important;
}
.hero-modern-section .hero-modern__button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--acb-shadow-blue) !important;
}

/* Button secondary → border ac-blue + pill */
.hero-modern-section .hero-modern__button--secondary {
  border-radius: 999px !important;
  border: 2px solid var(--acb-blue) !important;
  color: var(--acb-blue) !important;
  background: transparent !important;
  transition: var(--acb-transition) !important;
}
.hero-modern-section .hero-modern__button--secondary:hover {
  background: var(--acb-blue) !important;
  color: #fff !important;
}

/* Dots → ac-blue + transizione */
.hero-modern-section .hero-modern__dot--active {
  background: var(--acb-blue) !important;
  border-color: var(--acb-blue) !important;
}
.hero-modern-section .hero-modern__dot {
  transition: var(--acb-transition) !important;
}

/* Video shadow → v4 deep */
.hero-modern-section .hero-slide-modern__video {
  box-shadow: var(--acb-shadow-deep) !important;
}

/* Video badge → ac-blue pill */
.hero-modern-section .hero-slide-modern__video-badge {
  background: var(--acb-blue) !important;
  border-radius: 999px !important;
}

/* Titoli → Montserrat 900 */
.hero-modern-section h1,
.hero-modern-section h2,
.hero-modern-section h3 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
}


/* ================================================================
   3. CATEGORY CARDS PREMIUM
   Override: overlay → ac-deep gradient, badge → ac-blue pill,
   hover card → shadow v4
   ================================================================ */

/* Overlay: nero → deep blue AC */
.category-cards-premium .category-card__overlay {
  background: linear-gradient(
    to bottom,
    hsl(222 75% 14% / 0) 0%,
    hsl(222 75% 14% / 0.30) 50%,
    hsl(222 75% 14% / 0.88) 100%
  ) !important;
}
.category-cards-premium .category-card:hover .category-card__overlay {
  opacity: 1 !important;
  background: linear-gradient(
    to bottom,
    hsl(222 75% 14% / 0.05) 0%,
    hsl(222 75% 14% / 0.45) 50%,
    hsl(222 75% 14% / 0.96) 100%
  ) !important;
}

/* Badge: glassmorphism → ac-blue solido pill */
.category-cards-premium .category-card__badge {
  background: var(--acb-blue) !important;
  border-radius: 999px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* CTA arrow hover → blue-light */
.category-cards-premium .category-card__cta {
  transition: var(--acb-transition) !important;
}
.category-cards-premium .category-card:hover .category-card__cta {
  color: hsl(210 100% 75%) !important;
}

/* Card title → Montserrat 900 */
.category-cards-premium .category-card__title {
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
}

/* Card lift shadow → v4 */
.category-cards-premium .category-card:hover {
  box-shadow: var(--acb-shadow-card) !important;
}

/* Section heading → Montserrat 900 */
.category-cards-premium .category-cards-premium__title {
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: var(--acb-text) !important;
}
.category-cards-premium h2,
.category-cards-premium h3 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
}


/* ================================================================
   4. HERO SLIDESHOW (slider--hero)
   Dots/nav già a #0244b3 = ac-blue ✓
   Aggiunge: transizione v4, heading 900, button pill
   ================================================================ */

/* Dot → transizione v4 */
.slider.slider--hero .slider__dot {
  transition: var(--acb-transition) !important;
}
.slider.slider--hero .slider__dot--active {
  background: var(--acb-blue) !important;
  border-color: var(--acb-blue) !important;
}

/* Slide heading → 900 */
.slider.slider--hero .hero-slide__heading,
.slider.slider--hero .hero-slide-modern__heading {
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
}

/* Button → pill + transizione */
.slider.slider--hero .hero-slide__btn,
.slider.slider--hero .hero-slide__btn--primary,
.slider.slider--hero .hero-slide__btn--secondary {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: var(--acb-transition) !important;
}
.slider.slider--hero .hero-slide__btn--primary:hover,
.slider.slider--hero .hero-slide__btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--acb-shadow-blue) !important;
}


/* ================================================================
   5. FEATURED COLLECTION
   Override: heading section → Montserrat 900, eyebrow typography
   ================================================================ */

/* Heading principale sezione */
.section-featured-collection .s__heading h2,
.section-featured-collection .s__heading h3,
[class*="featured-collection"] .s__heading h2,
[class*="featured-collection"] .s__heading h3 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

/* Subheading → eyebrow v4 */
.section-featured-collection .s__heading .s__subheading,
[class*="featured-collection"] .s__heading .s__subheading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--acb-blue) !important;
}

/* CTA "show more" → pill */
.section-featured-collection .button,
[class*="featured-collection"] .button {
  border-radius: 999px !important;
  transition: var(--acb-transition) !important;
}


/* ================================================================
   6. TIPOGRAFIA GLOBALE BRAND
   Montserrat 900 su H1-H3 nelle sezioni benefit/prodotto.
   Non tocca il tema base (body, footer, header, ecc.)
   ================================================================ */

.ecoboccione-section h1,
.ecoboccione-section h2,
.ecoboccione-section h3,
.hero-modern-section h1,
.hero-modern-section h2,
.hero-modern-section h3,
.category-cards-premium h2,
.category-cards-premium h3,
.slider.slider--hero h2,
.slider.slider--hero h3 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
}

/* Preload Montserrat se non già caricato nel layout */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap");