/* ============================================================
   VIBE VIVID — Mediterranean Brutalism Enhancement Layer
   Stile: brutalismo vivace | Greek islands | Ibiza | Capri vibes
   Override layer — si carica DOPO style.css
   ============================================================ */

/* ============================================================
   PALETTE OVERRIDE — Più satura, più elettrica, più mediterranea
   Sistema: Split-Complementary (coral + teal + yellow)
   ============================================================ */
:root {
  /* Core vivid palette */
  --coral:           #FF4726;
  --coral-bright:    #FF6B00;
  --hot-pink:        #FF1F6B;
  --rose-vivid:      #FF4D9E;
  --sun:             #FFD000;
  --saffron:         #FF9A00;
  --teal:            #00C8C0;
  --electric-blue:   #0076FF;
  --sea-green:       #00AA7C;
  --purple-med:      #9B27AF;
  --lavender:        #C97FE8;
  --cream:           #FFFEF0;
  --butter:          #FFF5D6;

  /* Dark base */
  --ink:             #1A0800;

  /* Colored shadows (il cuore del Mediterranean Brutalism vivace) */
  --shadow-card:       5px 5px 0 var(--ink);
  --shadow-card-hover: 8px 8px 0 var(--ink);
  --shadow-btn:        4px 4px 0 var(--ink);
  --shadow-btn-hover:  6px 6px 0 var(--ink);
  --shadow-coral:      5px 5px 0 var(--coral);
  --shadow-pink:       5px 5px 0 var(--hot-pink);
  --shadow-teal:       5px 5px 0 var(--teal);
  --shadow-yellow:     5px 5px 0 var(--sun);

  /* Border upgrade */
  --border-color:    var(--ink);
}

/* ============================================================
   GLOBAL BODY TEXTURE
   ============================================================ */
body {
  background-color: var(--cream);
  background-image: radial-gradient(circle, rgba(255,71,38,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ============================================================
   KEYFRAMES — ANIMAZIONI
   ============================================================ */

/* Fiore che ondeggia */
@keyframes petalSway {
  0%, 100% { transform: rotate(-6deg) scale(1);   }
  50%       { transform: rotate(6deg)  scale(1.06); }
}

/* Orbit lento (decorazioni hero) */
@keyframes floatOrb {
  0%,100% { transform: translate(0, 0)   scale(1);    }
  33%     { transform: translate(30px,-30px) scale(1.06); }
  66%     { transform: translate(-20px,20px) scale(0.94); }
}

/* Bloom in (card, icone) */
@keyframes bloomIn {
  0%  { transform: scale(0) rotate(-30deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(8deg); }
  100%{ transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* Ticker orizzontale */
@keyframes tickerScroll {
  0%   { transform: translateX(0);    }
  100% { transform: translateX(-50%); }
}

/* Rotazione lenta decorativa */
@keyframes rotateSlow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Scroll progress glow */
@keyframes progressGlow {
  0%,100% { opacity: 0.85; }
  50%      { opacity: 1;    }
}

/* Cinematic text word-reveal */
@keyframes wordReveal {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

/* FAB WhatsApp pulse */
@keyframes waPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5), 4px 4px 0 var(--ink); }
  50%     { box-shadow: 0 0 0 14px rgba(37,211,102,0),4px 4px 0 var(--ink); }
}

/* Flower particle float */
@keyframes floatFlower {
  0%   { transform: translateY(0) translateX(0)    rotate(0deg)   scale(0.7); opacity: 0;   }
  8%   { opacity: 0.95; transform: scale(1); }
  50%  { transform: translateY(-50vh) translateX(var(--drift,40px)) rotate(180deg) scale(1.1); }
  92%  { opacity: 0.7; }
  100% { transform: translateY(-108vh) translateX(calc(var(--drift,40px)*1.6)) rotate(360deg) scale(0.6); opacity: 0; }
}

/* Petal burst on click */
@keyframes petalBurst {
  0%   { transform: rotate(var(--a,0deg)) translate(0,0) scale(1.2); opacity: 1; }
  100% { transform: rotate(var(--a,0deg)) translate(var(--tx,50px),var(--ty,50px)) scale(0); opacity: 0; }
}

/* Image shimmer load */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center;  }
}

/* Manifesto color cycle */
@keyframes hueShift {
  0%   { filter: hue-rotate(0deg);   }
  100% { filter: hue-rotate(360deg); }
}

/* Section color stripe slide */
@keyframes stripeSlide {
  from { background-position: 0 0;    }
  to   { background-position: 80px 0; }
}

/* Drift del pattern tessile */
@keyframes patternDrift {
  from { background-position: 0 0;       }
  to   { background-position: 100px 100px; }
}

/* Breathing glow del pattern */
@keyframes patternBreath {
  0%,100% { opacity: 0.32; }
  50%     { opacity: 0.44; }
}

/* Emblem bloom in — come il fiore che sboccia */
@keyframes emblemBloom {
  0%   { transform: scale(0) rotate(-200deg); opacity: 0; }
  65%  { transform: scale(1.15) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Emblem float — levita dolcemente */
@keyframes emblemFloat {
  0%,100% { transform: translateY(0)    rotate(0deg); }
  33%     { transform: translateY(-9px) rotate(3deg); }
  66%     { transform: translateY(-4px) rotate(-2deg); }
}

/* Emblem inner pulse (raggi del sole) */
@keyframes sunRayPulse {
  0%,100% { opacity: 0.88; }
  50%     { opacity: 1;    }
}

/* Wave morph left/right */
@keyframes waveMorphL {
  0%,100% { transform: translateY(0) scaleX(1); }
  50%     { transform: translateY(-15px) scaleX(1.05); }
}
@keyframes waveMorphR {
  0%,100% { transform: translateY(0) scaleX(1); }
  50%     { transform: translateY(15px) scaleX(1.05); }
}

/* Ornamental divider shimmer */
@keyframes dividerShimmer {
  from { background-position: 0 0; }
  to   { background-position: 48px 0; }
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 70px;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--hot-pink), var(--coral), var(--saffron), var(--sun));
  background-size: 200% 100%;
  z-index: 1001;
  transition: width 0.08s linear;
  animation: progressGlow 2s ease-in-out infinite;
}

/* ============================================================
   HERO — Vivid upgrade
   ============================================================ */
.hero {
  background: linear-gradient(
    135deg,
    #FFF8E1 0%,
    #FFE8D6 20%,
    #FFD9E8 55%,
    #D9F5F3 100%
  ) !important;
  overflow: hidden;
}

/* Dot texture overlay on hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,71,38,0.10) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  z-index: 0;
  pointer-events: none;
}

/* Light ray cinematic overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(255,208,0,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 70%, rgba(0,200,192,0.06) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* Decorative floral SVGs animate */
.hero-decoration {
  animation: petalSway 4s ease-in-out infinite;
}
.hero-decoration.top-right  { animation-delay: 0s;  }
.hero-decoration.bottom-left{ animation-delay: -2s; }

/* Content above overlays */
.hero-content { position: relative; z-index: 2; }

/* ============================================================
   FLOATING COLOR ORBS
   ============================================================ */
.floral-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.25;
  z-index: 0;
}
.floral-orb-1 {
  width: 420px; height: 420px;
  background: var(--hot-pink);
  top: -100px; right: -80px;
  animation: floatOrb 9s ease-in-out infinite;
}
.floral-orb-2 {
  width: 320px; height: 320px;
  background: var(--teal);
  bottom: -60px; left: -60px;
  animation: floatOrb 12s ease-in-out infinite reverse;
}
.floral-orb-3 {
  width: 220px; height: 220px;
  background: var(--sun);
  top: 40%; right: 15%;
  animation: floatOrb 14s ease-in-out infinite;
  animation-delay: -5s;
}

/* ============================================================
   BRAND TICKER (sostituzione brand-strip)
   ============================================================ */
.brand-strip {
  background: #F50057 !important;
  padding: 0 !important;
  overflow: hidden;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  position: relative;
}

.brand-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 18px,
    rgba(255,255,255,0.07) 18px, rgba(255,255,255,0.07) 36px
  );
  animation: stripeSlide 3s linear infinite;
  pointer-events: none;
}

/* Ticker wrapper */
.brand-ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
  position: relative;
  z-index: 1;
}

.brand-ticker {
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: tickerScroll 22s linear infinite;
}

.brand-ticker:hover { animation-play-state: paused; }

.brand-ticker-item {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: white;
  padding: 0 40px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.brand-ticker-item .ticker-dot {
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.brand-ticker-item .ticker-flower {
  font-size: 18px;
  opacity: 0.8;
}

/* ============================================================
   SECTION PATTERN BACKGROUNDS
   ============================================================ */
.section-alt {
  background-color: var(--butter) !important;
  background-image:
    radial-gradient(circle, rgba(255,154,0,0.12) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}

.section-mint {
  background-color: #E5F9F7 !important;
  background-image:
    radial-gradient(circle, rgba(0,200,192,0.12) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
}

/* ============================================================
   WAVE DIVIDERS — colorati
   ============================================================ */
.wave-divider svg path {
  fill: var(--butter);
}

/* ============================================================
   CATEGORY CARDS — ogni categoria ha il suo colore
   ============================================================ */
.cat-card:nth-child(1) { --card-accent: var(--hot-pink); }
.cat-card:nth-child(2) { --card-accent: var(--teal);     }
.cat-card:nth-child(3) { --card-accent: var(--sun);      }

.cat-card {
  border: 2.5px solid var(--card-accent, var(--ink)) !important;
  box-shadow: 6px 6px 0 var(--card-accent, var(--ink)) !important;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.22s cubic-bezier(0.22,1,0.36,1),
              background 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--card-accent) 10%, transparent);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}

.cat-card:hover::before { opacity: 1; }

.cat-card:hover {
  transform: translate(-5px, -5px) !important;
  box-shadow: 11px 11px 0 var(--card-accent, var(--ink)) !important;
}

.cat-card > * { position: relative; z-index: 1; }

.cat-icon {
  font-size: 60px !important;
  animation: petalSway 3.5s ease-in-out infinite;
  display: block !important;
  margin: 0 auto 20px !important;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.15));
}

.cat-card:nth-child(1) .cat-icon { animation-delay: 0s; }
.cat-card:nth-child(2) .cat-icon { animation-delay: -1.2s; }
.cat-card:nth-child(3) .cat-icon { animation-delay: -2.4s; }

.cat-card .cat-arrow {
  color: var(--card-accent);
  font-weight: 600;
}

/* ============================================================
   PRODUCT CARDS — ombre vivide
   ============================================================ */
.card {
  border: 2.5px solid var(--ink) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  transition:
    transform 0.22s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.22s cubic-bezier(0.22,1,0.36,1) !important;
}

.card:hover {
  transform: translate(-5px, -5px) !important;
  box-shadow: 10px 10px 0 var(--ink) !important;
}

/* Card image container */
.card-img-wrap { position: relative; overflow: hidden; }

.card-img {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1) !important;
}

.card:hover .card-img {
  transform: scale(1.06) !important;
}

/* Badge colori vividi */
.badge-new      { background: var(--hot-pink)  !important; color: white !important; }
.badge-popular  { background: var(--sun)        !important; color: var(--ink) !important; }
.badge-handmade { background: var(--lavender)   !important; color: var(--ink) !important; }
.badge-sale     { background: var(--teal)       !important; color: white !important; }

/* Card CTA WhatsApp */
.btn-whatsapp {
  background: #25D366 !important;
  border-color: var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  color: white !important;
}

.btn-whatsapp:hover {
  background: #1DB954 !important;
  transform: translate(-2px,-2px) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}

/* ============================================================
   BUTTON UPGRADES
   ============================================================ */
.btn-primary {
  background: var(--coral) !important;
  border-color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  color: white !important;
}

.btn-primary:hover {
  background: var(--coral-bright) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  transform: translate(-2px,-2px) !important;
}

.btn-secondary {
  border-color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}

.btn-secondary:hover {
  background: var(--sun) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  transform: translate(-2px,-2px) !important;
}

/* ============================================================
   FEATURES — icone colorate vivide
   ============================================================ */
.feature-item:nth-child(1) .feature-icon {
  background: var(--hot-pink); color: white;
  border-color: var(--hot-pink);
  box-shadow: 3px 3px 0 var(--ink);
}
.feature-item:nth-child(2) .feature-icon {
  background: var(--teal); color: white;
  border-color: var(--teal);
  box-shadow: 3px 3px 0 var(--ink);
}
.feature-item:nth-child(3) .feature-icon {
  background: var(--sun); color: var(--ink);
  border-color: var(--sun);
  box-shadow: 3px 3px 0 var(--ink);
}
.feature-item:nth-child(4) .feature-icon {
  background: var(--electric-blue); color: white;
  border-color: var(--electric-blue);
  box-shadow: 3px 3px 0 var(--ink);
}

.feature-icon {
  font-size: 32px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border-width: 2px !important;
  border-style: solid !important;
  animation: petalSway 4s ease-in-out infinite;
}

.feature-item:nth-child(2) .feature-icon { animation-delay: -1s; }
.feature-item:nth-child(3) .feature-icon { animation-delay: -2s; }
.feature-item:nth-child(4) .feature-icon { animation-delay: -3s; }

/* ============================================================
   GALLERY — bordi multicolori
   ============================================================ */
.gallery-item {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s cubic-bezier(0.22,1,0.36,1) !important;
}

.gallery-item:nth-child(1) { border: 2.5px solid var(--coral)  !important; box-shadow: 4px 4px 0 var(--coral)  !important; }
.gallery-item:nth-child(2) { border: 2.5px solid var(--teal)   !important; box-shadow: 4px 4px 0 var(--teal)   !important; }
.gallery-item:nth-child(3) { border: 2.5px solid var(--sun)    !important; box-shadow: 4px 4px 0 var(--sun)    !important; }
.gallery-item:nth-child(4) { border: 2.5px solid var(--hot-pink)!important; box-shadow: 4px 4px 0 var(--hot-pink)!important; }
.gallery-item:nth-child(5) { border: 2.5px solid var(--lavender)!important; box-shadow: 4px 4px 0 var(--lavender)!important; }
.gallery-item:nth-child(6) { border: 2.5px solid var(--saffron) !important; box-shadow: 4px 4px 0 var(--saffron) !important; }

.gallery-item:hover {
  transform: translate(-4px,-4px) scale(1.01) !important;
  box-shadow: 8px 8px 0 currentColor !important;
}

/* ============================================================
   CTA STRIP — gradiente cinematico
   ============================================================ */
.cta-strip {
  background: linear-gradient(
    135deg,
    var(--hot-pink) 0%,
    var(--coral) 40%,
    var(--saffron) 75%,
    var(--sun) 100%
  ) !important;
  position: relative;
  overflow: hidden;
}

.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='white' fill-opacity='0.06'%3E%3Cpath d='M30 5 C30 5 36 16 30 26 C24 16 30 5 30 5Z'/%3E%3Cpath d='M30 34 C30 34 36 45 30 55 C24 45 30 34 30 34Z'/%3E%3Cpath d='M5 30 C5 30 16 24 26 30 C16 36 5 30 5 30Z'/%3E%3Cpath d='M34 30 C34 30 45 24 55 30 C45 36 34 30 34 30Z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.cta-strip .cta-title {
  color: white !important;
  text-shadow: 3px 3px 0 rgba(26,8,0,0.25);
}

.cta-strip .cta-subtitle {
  color: rgba(255,255,255,0.9) !important;
}

/* CTA strip WhatsApp btn override */
.cta-strip .btn-whatsapp {
  background: white !important;
  color: #1DB954 !important;
  border-color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}
.cta-strip .btn-whatsapp:hover {
  background: var(--sun) !important;
  color: var(--ink) !important;
  transform: translate(-2px,-2px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}

/* ============================================================
   MANIFESTO SECTION — sezione cinematica narrativa
   ============================================================ */
.manifesto-section {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}

.manifesto-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,71,38,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 85%, rgba(0,200,192,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 35% 35% at 85% 15%, rgba(255,31,107,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.manifesto-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,208,0,0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

.manifesto-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 6.5vw, 86px);
  line-height: 1.15;
  color: white;
  position: relative;
  z-index: 1;
  max-width: 900px;
  letter-spacing: -1px;
}

.manifesto-text .highlight {
  color: var(--sun);
}

.manifesto-text .highlight-pink {
  color: var(--rose-vivid);
}

.manifesto-text .outline-text {
  -webkit-text-stroke: 2px white;
  color: transparent;
  display: inline;
}

/* ============================================================
   CINEMATIC TEXT REVEAL — word-by-word
   ============================================================ */
.cin-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.cin-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.cin-word.revealed .cin-word-inner {
  transform: translateY(0);
}

/* Stagger delays per word */
.cin-word:nth-child(1)  .cin-word-inner { transition-delay: 0.00s; }
.cin-word:nth-child(2)  .cin-word-inner { transition-delay: 0.07s; }
.cin-word:nth-child(3)  .cin-word-inner { transition-delay: 0.14s; }
.cin-word:nth-child(4)  .cin-word-inner { transition-delay: 0.21s; }
.cin-word:nth-child(5)  .cin-word-inner { transition-delay: 0.28s; }
.cin-word:nth-child(6)  .cin-word-inner { transition-delay: 0.35s; }
.cin-word:nth-child(7)  .cin-word-inner { transition-delay: 0.42s; }
.cin-word:nth-child(8)  .cin-word-inner { transition-delay: 0.49s; }
.cin-word:nth-child(9)  .cin-word-inner { transition-delay: 0.56s; }
.cin-word:nth-child(10) .cin-word-inner { transition-delay: 0.63s; }
.cin-word:nth-child(11) .cin-word-inner { transition-delay: 0.70s; }
.cin-word:nth-child(12) .cin-word-inner { transition-delay: 0.77s; }

/* ============================================================
   HERO TITLE — Cinematic
   ============================================================ */
.hero-title {
  position: relative;
}

.hero-title .accent {
  color: var(--coral) !important;
  font-style: italic;
  position: relative;
  display: inline-block;
}

/* Underline decorativo sull'accent */
.hero-title .accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--sun), var(--coral));
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.22,1,0.36,1) 0.8s;
}

body.loaded .hero-title .accent::after {
  transform: scaleX(1);
}

/* Hero badge upgrade */
.hero-badge {
  background: var(--hot-pink) !important;
  border-color: var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  animation: bloomIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

/* ============================================================
   SCROLL HINT — upgrade
   ============================================================ */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: petalSway 2s ease-in-out infinite;
}

.hero-scroll-hint svg {
  width: 24px;
  height: 24px;
  stroke: var(--coral);
}

/* ============================================================
   FLOWER PARTICLE SYSTEM
   ============================================================ */
.flower-particle {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  top: auto;
  animation: floatFlower linear infinite;
  opacity: 0;
  will-change: transform, opacity;
}

/* ============================================================
   CURSOR FLOWER (desktop)
   ============================================================ */
#cursor-flower {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: transform, left, top;
}

#cursor-flower.visible {
  opacity: 1;
}

/* ============================================================
   STAGGER REVEAL
   ============================================================ */
.stagger-children > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

.stagger-children.triggered > *:nth-child(1)  { opacity:1; transform:none; transition-delay:0.00s; }
.stagger-children.triggered > *:nth-child(2)  { opacity:1; transform:none; transition-delay:0.09s; }
.stagger-children.triggered > *:nth-child(3)  { opacity:1; transform:none; transition-delay:0.18s; }
.stagger-children.triggered > *:nth-child(4)  { opacity:1; transform:none; transition-delay:0.27s; }
.stagger-children.triggered > *:nth-child(5)  { opacity:1; transform:none; transition-delay:0.36s; }
.stagger-children.triggered > *:nth-child(6)  { opacity:1; transform:none; transition-delay:0.45s; }
.stagger-children.triggered > *:nth-child(7)  { opacity:1; transform:none; transition-delay:0.54s; }
.stagger-children.triggered > *:nth-child(8)  { opacity:1; transform:none; transition-delay:0.63s; }

/* ============================================================
   FADE-IN UPGRADE
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SECTION TITLE — typography upgrade
   ============================================================ */
.section-title {
  letter-spacing: -0.5px;
  position: relative;
  display: inline-block;
}

/* Decorative accent line sotto i section title */
.section-title::after {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--coral), var(--hot-pink), var(--sun));
  border-radius: 3px;
  margin-top: 10px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s;
}

.section-title.visible-title::after,
.fade-in.visible .section-title::after,
.section-header.fade-in.visible + * .section-title::after {
  transform: scaleX(1);
}

/* Trigger when section-header is visible */
.section-header.fade-in.visible .section-title::after {
  transform: scaleX(1);
}

/* ============================================================
   NAVIGATION UPGRADE
   ============================================================ */
.site-header {
  border-bottom: 3px solid var(--ink) !important;
}

.nav-links a::after {
  background: var(--coral) !important;
  height: 3px !important;
  border-radius: 2px !important;
}

.nav-logo .logo-shopping {
  color: var(--coral) !important;
}

/* ============================================================
   WhatsApp FAB — pulse glow
   ============================================================ */
.whatsapp-fab button,
.whatsapp-fab {
  animation: waPulse 2.5s ease-in-out infinite !important;
}

/* ============================================================
   FOOTER — upgrade
   ============================================================ */
footer, .site-footer {
  background: var(--ink) !important;
}

.footer-logo {
  color: var(--coral) !important;
}

/* Footer top border colorata */
footer::before, .site-footer::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--hot-pink) 0%, var(--coral) 25%,
    var(--sun) 50%, var(--teal) 75%,
    var(--electric-blue) 100%
  );
}

/* ============================================================
   SHOP PAGE — filter tabs
   ============================================================ */
.filter-tab {
  border: 2px solid var(--ink) !important;
  transition: all 0.2s !important;
  box-shadow: 3px 3px 0 transparent !important;
}

.filter-tab:hover {
  box-shadow: 3px 3px 0 var(--ink) !important;
  transform: translate(-1px,-1px) !important;
}

.filter-tab.active {
  background: var(--coral)   !important;
  border-color: var(--ink)   !important;
  color: white               !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  transform: translate(-1px,-1px) !important;
}

/* ============================================================
   CONTACT PAGE — card upgrades
   ============================================================ */
.contact-info-block:nth-child(1) { border-left: 5px solid #25D366; }
.contact-info-block:nth-child(2) { border-left: 5px solid #E1306C; }
.contact-info-block:nth-child(3) { border-left: 5px solid var(--electric-blue); }
.contact-info-block:nth-child(4) { border-left: 5px solid var(--sun); }

/* ============================================================
   HERO — PATTERN TESSILE ANIMATO (ispirato ad Azizeh.com)
   Background: terracotta-corallo → mauve mediterraneo
   Pattern: fiori bianchi su tessuto (si muove lentamente)
   ============================================================ */

/* Override base hero */
.hero {
  background:
    linear-gradient(145deg,
      #C23515 0%,
      #CC3D0A 18%,
      #B82E52 52%,
      #8B2570 80%,
      #6B1D7A 100%
    ) !important;
}

/* Pattern tessile — SVG floreale mediterraneo (tile 100x100) */
.hero-pattern-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- fiore centrale 6 petali --%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.18)' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.18)' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.18)' transform='rotate(120 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.18)' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.18)' transform='rotate(240 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.18)' transform='rotate(300 50 50)'/%3E%3Ccircle cx='50' cy='50' r='6' fill='rgba(255%2C208%2C0%2C0.28)'/%3E%3C!-- fogliolina angoli --%3E%3Cpath d='M12 12 C14 8 20 10 18 16 C16 20 10 18 12 12' fill='rgba(255%2C255%2C255%2C0.12)'/%3E%3Cpath d='M88 12 C90 8 96 10 94 16 C92 20 86 18 88 12' fill='rgba(255%2C255%2C255%2C0.12)'/%3E%3Cpath d='M12 88 C14 84 20 86 18 92 C16 96 10 94 12 88' fill='rgba(255%2C255%2C255%2C0.12)'/%3E%3Cpath d='M88 88 C90 84 96 86 94 92 C92 96 86 94 88 88' fill='rgba(255%2C255%2C255%2C0.12)'/%3E%3C!-- puntini mezzeria --%3E%3Ccircle cx='50' cy='5' r='2.5' fill='rgba(255%2C208%2C0%2C0.22)'/%3E%3Ccircle cx='50' cy='95' r='2.5' fill='rgba(255%2C208%2C0%2C0.22)'/%3E%3Ccircle cx='5' cy='50' r='2.5' fill='rgba(255%2C208%2C0%2C0.22)'/%3E%3Ccircle cx='95' cy='50' r='2.5' fill='rgba(255%2C208%2C0%2C0.22)'/%3E%3C!-- onda decorativa --%3E%3Cpath d='M0 75 Q25 68 50 75 Q75 82 100 75' stroke='rgba(255%2C255%2C255%2C0.1)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  animation: patternDrift 28s linear infinite, patternBreath 6s ease-in-out infinite;
}

/* Gradient overlay per contrasto testo */
.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255,208,0,0.06) 0%, transparent 65%),
    linear-gradient(180deg,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.18) 60%,
      rgba(0,0,0,0.38) 100%
    );
}

/* Onde laterali decorative */
.hero-wave-left, .hero-wave-right {
  position: absolute;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  width: 140px;
  height: 140px;
  opacity: 0.18;
}

.hero-wave-left {
  left: -30px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='70' cy='70' r='60' stroke='white' stroke-width='3' fill='none' stroke-dasharray='8 6'/%3E%3Ccircle cx='70' cy='70' r='40' stroke='rgba(255%2C208%2C0%2C0.8)' stroke-width='2' fill='none' stroke-dasharray='5 4'/%3E%3Ccircle cx='70' cy='70' r='20' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  animation: waveMorphL 7s ease-in-out infinite;
}

.hero-wave-right {
  right: -30px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='70' cy='70' r='60' stroke='white' stroke-width='3' fill='none' stroke-dasharray='8 6'/%3E%3Ccircle cx='70' cy='70' r='40' stroke='rgba(255%2C208%2C0%2C0.8)' stroke-width='2' fill='none' stroke-dasharray='5 4'/%3E%3Ccircle cx='70' cy='70' r='20' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  animation: waveMorphR 7s ease-in-out infinite;
}

/* Hero content above all layers */
.hero .container { position: relative; z-index: 3; }
.hero-content     { position: relative; z-index: 3; }

/* ---- EMBLEMA SOLARE ---- */
.hero-emblem {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.emblem-svg {
  width: 110px;
  height: 110px;
  animation:
    emblemBloom 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both,
    emblemFloat 5s ease-in-out 1.3s infinite;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45))
          drop-shadow(0 0 30px rgba(255, 208, 0, 0.4));
}

/* Raggi del sole pulsano leggermente */
.emblem-svg ellipse {
  animation: sunRayPulse 2.5s ease-in-out infinite;
}

/* ---- Hero testo bianco su fondo scuro ---- */
.hero-title {
  color: white !important;
  text-shadow: 2px 3px 12px rgba(0,0,0,0.5);
}

.hero-title .accent {
  color: #FFD000 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 0 30px rgba(255,208,0,0.6), 2px 3px 12px rgba(0,0,0,0.5);
}

.hero-title .accent::after {
  background: linear-gradient(90deg, #FFD000, rgba(255,208,0,0.4)) !important;
}

.hero-subtitle {
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 1px 2px 6px rgba(0,0,0,0.4);
}

/* Hero badge — sun yellow su sfondo scuro */
.hero-badge {
  background: #FFD000 !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4) !important;
  animation: bloomIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.8s both !important;
}

/* Hero CTA buttons — su sfondo scuro */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  background: white;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-hero-primary:hover {
  background: var(--sun);
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
}

.btn-hero-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  background: #25D366;
  color: white;
  border: 2.5px solid rgba(0,0,0,0.4);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-hero-whatsapp:hover {
  background: #1DB954;
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
}

/* Scroll hint — bianco su fondo scuro */
.hero-scroll-hint {
  color: rgba(255,255,255,0.75) !important;
}
.hero-scroll-hint svg {
  stroke: rgba(255,255,255,0.75) !important;
}

/* ============================================================
   DIVISORI ORNAMENTALI (stile Azizeh — strisce con pattern)
   ============================================================ */
.ornamental-divider {
  height: 36px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  position: relative;
  overflow: hidden;
}

/* Pattern diamante/fiore ripetuto (come la striscia verde di Azizeh) */
.ornamental-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='36' viewBox='0 0 48 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='24%2C4 32%2C18 24%2C32 16%2C18' fill='rgba(255%2C255%2C255%2C0.55)' stroke='rgba(0%2C0%2C0%2C0.15)' stroke-width='0.5'/%3E%3Ccircle cx='24' cy='18' r='3' fill='rgba(255%2C255%2C255%2C0.9)'/%3E%3Cline x1='0' y1='18' x2='16' y2='18' stroke='rgba(255%2C255%2C255%2C0.4)' stroke-width='1'/%3E%3Cline x1='32' y1='18' x2='48' y2='18' stroke='rgba(255%2C255%2C255%2C0.4)' stroke-width='1'/%3E%3Ccircle cx='0' cy='18' r='2' fill='rgba(255%2C255%2C255%2C0.5)'/%3E%3Ccircle cx='48' cy='18' r='2' fill='rgba(255%2C255%2C255%2C0.5)'/%3E%3C/svg%3E");
  background-size: 48px 36px;
  animation: dividerShimmer 3s linear infinite;
}

.ornamental-divider--coral  { background: var(--coral); }
.ornamental-divider--teal   { background: var(--teal);  }
.ornamental-divider--yellow { background: var(--sun);   }
.ornamental-divider--pink   { background: var(--hot-pink); }

/* ============================================================
   MOBILE — responsive adjustments
   ============================================================ */
@media (max-width: 768px) {
  .brand-ticker-item { font-size: 20px; padding: 0 24px; }
  .manifesto-text { font-size: clamp(30px, 8vw, 52px); }
  .floral-orb-1 { width: 250px; height: 250px; }
  .floral-orb-2 { width: 200px; height: 200px; }
  .floral-orb-3 { display: none; }
  #cursor-flower { display: none; }
  .hero-wave-left, .hero-wave-right { display: none; }
  .emblem-svg { width: 80px; height: 80px; }
  .btn-hero-primary, .btn-hero-whatsapp { padding: 12px 20px; font-size: 14px; }
}

/* ============================================================
   VIVID SYSTEM — Full Palette Override (No Pastels)
   ============================================================ */
:root {
  --coral:         #FF3D00;
  --coral-bright:  #FF6D00;
  --hot-pink:      #F50057;
  --rose-vivid:    #FF1744;
  --sun:           #FFD600;
  --saffron:       #FF6F00;
  --teal:          #00BCD4;
  --electric-blue: #2979FF;
  --sea-green:     #00C853;
  --purple-vivid:  #AA00FF;
  --lavender:      #D500F9;
  --cream:         #FFFFFF;
  --butter:        #FFF9E6;
}

/* Body — white, clean, vivid comes from sections */
body {
  background: #FFFFFF !important;
  background-image: none !important;
}

/* ============================================================
   SECTION BACKGROUNDS — VIVID solid colors (no pastels/dots)
   ============================================================ */

/* Yellow vivid — Categories, Gallery */
.section-alt {
  background-color: #FFD600 !important;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 18px,
    rgba(0,0,0,0.025) 18px, rgba(0,0,0,0.025) 36px
  ) !important;
  border-top: 3px solid var(--ink) !important;
  border-bottom: 3px solid var(--ink) !important;
  color: var(--ink) !important;
}

.section-alt .section-title,
.section-alt .section-subtitle,
.section-alt .cat-title,
.section-alt .cat-desc { color: var(--ink) !important; }

/* Coral vivid — Features / Why Us */
.section-mint {
  background-color: #FF3D00 !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0px, transparent 20px,
    rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 40px
  ) !important;
  border-top: 3px solid var(--ink) !important;
  border-bottom: 3px solid var(--ink) !important;
  color: white !important;
}

.section-mint .section-title { color: white !important; }
.section-mint .section-subtitle { color: rgba(255,255,255,0.85) !important; }
.section-mint .feature-title { color: white !important; font-size: 18px; }
.section-mint .feature-desc { color: rgba(255,255,255,0.82) !important; }
.section-mint .section-title::after { background: white !important; }

.section-mint .feature-icon {
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  color: white !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3) !important;
}

/* ============================================================
   CARDS on YELLOW sections — upgrade contrast
   ============================================================ */
.section-alt .card {
  background: white !important;
  border: 2.5px solid var(--ink) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}

.section-alt .gallery-item:nth-child(1) { border-color: #FF3D00 !important; box-shadow: 4px 4px 0 #FF3D00 !important; }
.section-alt .gallery-item:nth-child(2) { border-color: #00BCD4 !important; box-shadow: 4px 4px 0 #00BCD4 !important; }
.section-alt .gallery-item:nth-child(3) { border-color: #F50057 !important; box-shadow: 4px 4px 0 #F50057 !important; }
.section-alt .gallery-item:nth-child(4) { border-color: #2979FF !important; box-shadow: 4px 4px 0 #2979FF !important; }
.section-alt .gallery-item:nth-child(5) { border-color: #AA00FF !important; box-shadow: 4px 4px 0 #AA00FF !important; }
.section-alt .gallery-item:nth-child(6) { border-color: #FF6D00 !important; box-shadow: 4px 4px 0 #FF6D00 !important; }

/* ============================================================
   CAT CARDS on YELLOW — vivid colored accents
   ============================================================ */
.section-alt .cat-card:nth-child(1) { --card-accent: #F50057; }
.section-alt .cat-card:nth-child(2) { --card-accent: #00BCD4; }
.section-alt .cat-card:nth-child(3) { --card-accent: #2979FF; }

/* ============================================================
   STATS CARDS (chi-siamo inline-styled) — vivid
   ============================================================ */
.stat-card {
  background: white !important;
  border: 2.5px solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}

/* ============================================================
   PAGE HERO BASE — shared vivid pattern system
   Ogni pagina ha il suo gradiente unico
   ============================================================ */
.shop-hero,
.about-hero,
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 80px;
  min-height: 380px;
  display: flex;
  align-items: center;
}

/* Pattern tessile shared (uguale al hero) */
.shop-hero::before,
.about-hero::before,
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.15)' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.15)' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.15)' transform='rotate(120 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.15)' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.15)' transform='rotate(240 50 50)'/%3E%3Cellipse cx='50' cy='32' rx='6' ry='13' fill='rgba(255%2C255%2C255%2C0.15)' transform='rotate(300 50 50)'/%3E%3Ccircle cx='50' cy='50' r='6' fill='rgba(255%2C208%2C0%2C0.25)'/%3E%3Cpath d='M12 12 C14 8 20 10 18 16 C16 20 10 18 12 12' fill='rgba(255%2C255%2C255%2C0.1)'/%3E%3Cpath d='M88 88 C90 84 96 86 94 92 C92 96 86 94 88 88' fill='rgba(255%2C255%2C255%2C0.1)'/%3E%3Ccircle cx='50' cy='5' r='2.5' fill='rgba(255%2C208%2C0%2C0.2)'/%3E%3Ccircle cx='95' cy='50' r='2.5' fill='rgba(255%2C208%2C0%2C0.2)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  animation: patternDrift 28s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* Gradient overlay for text readability */
.shop-hero::after,
.about-hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Content above layers */
.shop-hero .container,
.about-hero .container,
.page-hero .container {
  position: relative;
  z-index: 2;
}

/* SHOP HERO — Electric Yellow (energia, shopping, allegria) */
.shop-hero {
  background: linear-gradient(145deg,
    #FFD600 0%, #FFAB00 35%, #FF6D00 70%, #FF3D00 100%
  ) !important;
}

/* Shop hero text: dark ink on yellow/warm bg */
.shop-hero-title,
.shop-hero .shop-hero-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 6vw, 76px) !important;
  color: var(--ink) !important;
  letter-spacing: -1px !important;
  line-height: 1.05 !important;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.3) !important;
}

.shop-hero-sub {
  font-size: 18px !important;
  color: rgba(26,8,0,0.75) !important;
  margin-top: 12px !important;
}

/* Breadcrumb on vivid bg */
.shop-hero a[href="index.html"],
.shop-hero span { color: rgba(26,8,0,0.6) !important; }

/* ABOUT HERO — Electric Teal (fiducia, autenticità, mediterraneo) */
.about-hero {
  background: linear-gradient(145deg,
    #00BCD4 0%, #0097A7 30%, #006064 65%, #1A237E 100%
  ) !important;
}

.about-hero h1 {
  color: white !important;
  text-shadow: 2px 3px 12px rgba(0,0,0,0.4) !important;
}

.about-hero p {
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 1px 2px 6px rgba(0,0,0,0.3) !important;
}

.about-hero a[href="index.html"] { color: rgba(255,255,255,0.6) !important; }
.about-hero span { color: rgba(255,255,255,0.9) !important; }

/* CONTACT HERO — Electric Fuchsia (calore, contatto, energia) */
.page-hero {
  background: linear-gradient(145deg,
    #F50057 0%, #D500F9 40%, #AA00FF 75%, #6200EA 100%
  ) !important;
}

.page-hero-title,
.page-hero .page-hero-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 6vw, 76px) !important;
  color: white !important;
  text-shadow: 2px 3px 12px rgba(0,0,0,0.4) !important;
  letter-spacing: -1px !important;
}

.page-hero-sub,
.page-hero p {
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 1px 2px 6px rgba(0,0,0,0.3) !important;
}

.page-hero a[href="index.html"] { color: rgba(255,255,255,0.6) !important; }
.page-hero > .container > div > span { color: rgba(255,255,255,0.9) !important; }

/* ============================================================
   SHOP FILTERS — vivid
   ============================================================ */
.shop-filters {
  background: var(--ink) !important;
  border-bottom: 3px solid var(--ink) !important;
  padding: 16px 0 !important;
}

.shop-filters .filter-tab {
  background: transparent !important;
  color: white !important;
  border-color: rgba(255,255,255,0.3) !important;
}

.shop-filters .filter-tab:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: white !important;
  box-shadow: none !important;
  transform: none !important;
}

.shop-filters .filter-tab.active {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-color: var(--sun) !important;
  box-shadow: 3px 3px 0 rgba(255,255,255,0.3) !important;
}

.shop-filters input[type="search"] {
  border: 2px solid rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}

.shop-filters input[type="search"]::placeholder { color: rgba(255,255,255,0.5) !important; }
.shop-filters .results-count { color: rgba(255,255,255,0.6) !important; }

/* ============================================================
   CONTACT PAGE — vivid cards
   ============================================================ */
.contact-info-block:nth-child(1) {
  border-left: 6px solid #00C853 !important;
  box-shadow: 5px 5px 0 #00C853 !important;
}
.contact-info-block:nth-child(2) {
  border-left: 6px solid #F50057 !important;
  box-shadow: 5px 5px 0 #F50057 !important;
}
.contact-info-block:nth-child(3) {
  border-left: 6px solid #2979FF !important;
  box-shadow: 5px 5px 0 #2979FF !important;
}
.contact-info-block:nth-child(4) {
  border-left: 6px solid #FFD600 !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}

/* Contact form focus */
.contact-form input:focus,
.contact-form textarea:focus,
input:focus, textarea:focus {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 4px rgba(255,61,0,0.15), 3px 3px 0 var(--coral) !important;
}

/* ============================================================
   CHI SIAMO — vivid stat cards
   ============================================================ */
.about-story-img img {
  border: 3px solid var(--ink) !important;
  box-shadow: 8px 8px 0 var(--coral) !important;
}

/* Value cards */
.value-card, .values-grid > * {
  border: 2.5px solid var(--ink) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}

.values-grid > *:nth-child(1) { box-shadow: 5px 5px 0 #FF3D00 !important; border-color: #FF3D00 !important; }
.values-grid > *:nth-child(2) { box-shadow: 5px 5px 0 #00BCD4 !important; border-color: #00BCD4 !important; }
.values-grid > *:nth-child(3) { box-shadow: 5px 5px 0 #FFD600 !important; border-color: #FFD600 !important; }

/* ============================================================
   MANIFESTO — vivid upgrade
   ============================================================ */
.manifesto-section {
  background: var(--ink) !important;
}

/* ============================================================
   ORNAMENTAL DIVIDER — yellow variant
   ============================================================ */
.ornamental-divider--yellow {
  background: #FFD600;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .shop-hero, .about-hero, .page-hero {
    min-height: 280px;
    padding: 100px 0 60px;
  }
  .shop-hero-title { font-size: clamp(32px,8vw,52px) !important; }
  .page-hero-title { font-size: clamp(32px,8vw,52px) !important; }
}