/* ========================================
   CSS OTTIMIZZATO SEO/SEM - NEW DRINK STORE
   Performance: Core Web Vitals Optimized
   Mobile-First: iOS/Android Compatible
   Minified: Critical CSS Inline Ready
   ======================================== */

/* CRITICAL CSS - Da inserire inline nel <head> per LCP veloce */
/* Copia questo blocco e mettilo in <style> nel <head> dell'HTML */
/*
:root{--brand:#ff8c00;--mint-green:#febd6e;--text:#ebe9e9;--shadow-light:rgba(0,0,0,.96);--border-light:#eee;--touch-target:3.5rem}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;font-size:clamp(14px,1vw + .5rem,18px)}body{position:relative;background:#ece9e8e8;color:#e2dcda;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;min-height:100vh;overflow-x:hidden}body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url('birra.jpg');background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;z-index:-1;filter:brightness(.85) contrast(1.1)}
*/
/* FINE CRITICAL CSS */

:root {
    /* Colori Brand */
    --brand: #ff8c00;
    --mint-green: #febd6e;
    --soft-blue: #09090a;
    --vibrant-orange: #ff8c00;
    --text: #ebe9e9;
    --text-light: #e7dfdf;
    --white: #c54e4e;
    --shadow-light: rgba(0, 0, 0, 0.96);
    --border-light: #EEEEEE;
    
    /* Touch Target WCAG 2.1 AA Compliant */
    --touch-target: 3.5rem; /* 56px minimo per mobile */
    --delivery-cost: 1;
    
    /* Performance Variables */
    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --blur-light: 10px;
    --blur-heavy: 20px;
}

/* ========================================
   RESET E BASE - Performance Optimized
   ======================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Lazy Loading Images - SEO Critical */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Preload Hint per immagini critiche */
img[loading="eager"] {
    content-visibility: auto;
}

html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    font-size: clamp(14px, 1vw + 0.5rem, 18px);
    /* Fix iOS zoom on input focus */
    -webkit-text-size-adjust: 100%;
}

/* ========================================
   BODY CON BACKGROUND OTTIMIZZATO
   Fix iOS/Android background-attachment
   ======================================== */
body {
    position: relative;
    background: #ece9e8e8;
    color: #0e0e0e;
    
    /* Font Rendering Optimization */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* System Font Stack - No External Font Download */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    
    /* GPU Acceleration */
    /* transform: translateZ(0); */
    will-change: scroll-position;
}


/* Background Image - Performance Critical */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* WebP Fallback - SEO Image Optimization */
    background-image: url('birra.webp'), url('birra.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    
    /* Filtri Performance-Friendly */
    filter: brightness(0.85) contrast(1.1);
    
    /* Mobile: Scroll invece di Fixed (iOS bug fix) */
    background-attachment: fixed;
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

/* ========================================
   MOBILE OPTIMIZATIONS - Core Web Vitals
   ======================================== */
@media (max-width: 768px) {
    html {
        /* iOS Safari 100vh fix */
        height: 100vh;
        height: -webkit-fill-available;
    }
    
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    /* iOS Background Attachment Fix */
    body::before {
        background-attachment: scroll;
        background-size: cover;
        background-position: center top;
        
        /* Prevent layout shift */
        content-visibility: auto;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    body::before {
        background-size: cover;
        background-position: center center;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    body::before {
        background-attachment: scroll; /* Performance su tablet */
        background-size: cover;
        background-position: center center;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    body::before {
        background-attachment: fixed; /* OK su desktop */
        background-size: cover;
        background-position: center center;
    }
}

/* ========================================
   LOGO - LCP Optimization
   ======================================== */
.logo-container {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: clamp(12px, 2vw, 15px);
    width: 100%;
    max-width: clamp(180px, 25vw, 220px);
    margin: clamp(0.75rem, 2vw, 1.5rem) auto;
    user-select: none;
    
    /* Performance: Solo transform/opacity per animazioni */
    transition: transform var(--transition-normal) ease;
    will-change: transform;
}

.logo-container:hover {
    transform: scale(1.02);
}

.logo-cerchio {
    width: clamp(80px, 20vw, 120px);
    height: auto;
    aspect-ratio: 1/1; /* CLS Prevention */
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 18px var(--shadow-light);
    
    /* GPU Acceleration */
    transition: transform var(--transition-normal) ease;
    will-change: transform;
}

.logo-container:hover .logo-cerchio {
    transform: scale(1.05);
}

/* ========================================
   SUBTITLE - Ottimizzato con backdrop-filter
   ======================================== */
.subtitle {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--brand);
    letter-spacing: clamp(0.5px, 0.15vw, 1px);
    margin: clamp(0.5rem, 1.5vw, 1rem) 0;
    text-align: center;
    width: 100%;
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem);
    
    /* Backdrop Filter - Performance OK su modern browsers */
    background: rgba(0, 0, 0, 0.5);
    border-radius: clamp(8px, 1.5vw, 12px);
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 140, 0, 0.2);
    
    /* Text Shadow per leggibilitÃ  */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        -1px -1px 2px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 140, 0, 0.4);
}

/* ========================================
   TOP RIGHT BUTTONS - Fixed Position Optimized
   ======================================== */
.top-right-buttons {
    position: fixed;
    top: max(0.5rem, env(safe-area-inset-top)); /* iOS Safe Area */
    right: clamp(0.25rem, 1vw, 0.75rem);
    display: flex;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
    z-index: 1001;
    flex-direction: row;
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

.top-right-buttons a {
    /* WCAG Touch Target 48x48px Minimum */
    width: var(--touch-target);
    height: var(--touch-target);
    min-width: 48px;
    min-height: 48px;
    
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* WhatsApp Green Brand Color */
    background-color: #25D366;
    color: #fff;
    box-shadow: 0 4px 12px var(--shadow-light);
    
    /* Performance: Solo transform */
    transition: transform var(--transition-fast) ease;
    text-decoration: none;
    flex-shrink: 0;
    touch-action: manipulation;
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

.top-right-buttons a:hover,
.top-right-buttons a:active {
    transform: scale(0.95) translateZ(0);
}

@media (max-width: 480px) {
    .top-right-buttons {
        flex-direction: column;
        gap: 0.5rem;
        right: 0.25rem;
    }
}

/* ========================================
   NAVIGATION - Sticky Header Performance
   ======================================== */
nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px var(--shadow-light);
    border-bottom: 1px solid var(--border-light);
    
    /* Backdrop Filter - Modern Performance */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    width: 100%;
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

.nav-inner {
    position: relative;
    z-index: 1001;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(0.4rem, 1vw, 0.75rem) clamp(0.5rem, 1.5vw, 1rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ========================================
   HAMBURGER BUTTON - Mobile Fix
   ======================================== */
#hamburger {
    display: none;
    width: clamp(40px, 8vw, 48px); /* Aumentato per WCAG */
    height: clamp(40px, 8vw, 48px);
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    padding: clamp(8px, 1.5vw, 12px);
    position: relative;
    z-index: 1003;
    
    /* Mobile Tap Optimization */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    
    /* Accessibility */
    min-width: 44px;
    min-height: 44px;
}

#hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    
    /* Performance: Solo transform */
    transition: all var(--transition-normal) ease;
    pointer-events: none;
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

/* Hamburger Animation - GPU Accelerated */
#hamburger.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg) translateZ(0);
}

#hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0) translateZ(0);
}

#hamburger.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg) translateZ(0);
}

/* ========================================
   MENU - Desktop/Mobile Responsive
   ======================================== */
.menu {
    list-style: none;
    display: flex;
    gap: clamp(0.5rem, 1vw, 1rem);
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.menu a {
    color: #333 !important;
    text-decoration: none;
    padding: clamp(0.6rem, 1.5vw, 0.8rem);
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Performance: Solo transform/opacity */
    transition: all var(--transition-fast) ease;
    touch-action: manipulation;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    
    /* WCAG Touch Target */
    min-height: 44px;
    min-width: 44px;
    
    /* Background Gradient */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 140, 0, 0.1) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hover SOLO su desktop (no touch devices) */
@media (hover: hover) and (pointer: fine) {
    .menu a:hover,
    .menu a[aria-current="page"] {
        background: linear-gradient(135deg, rgba(254, 189, 110, 0.9) 0%, rgba(255, 140, 0, 0.8) 100%);
        color: #fff !important;
        transform: translateY(-2px);
    }
}

/* ========================================
   MOBILE MENU - Performance Optimized
   ======================================== */
@media (max-width: 768px) {
    #hamburger {
        display: flex !important;
    }
    
    .nav-inner {
        padding: 0.4rem 0.5rem;
        flex-wrap: wrap;
    }
    
    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0;
        box-shadow: 0 4px 12px var(--shadow-light);
        gap: 0;
        align-items: stretch;
        z-index: 999;
        
        /* Backdrop Filter */
        backdrop-filter: blur(var(--blur-heavy));
        -webkit-backdrop-filter: blur(var(--blur-heavy));
        
        /* GPU Acceleration */
        transform: translateZ(0);
    }
    
    .menu.open {
        display: flex !important;
        
        /* Animazione Apertura */
        animation: slideDown 0.3s ease-out;
    }
    
    .menu a {
        padding: 1rem;
        text-align: center;
        border-bottom: 1px solid var(--border-light);
        justify-content: center;
        width: 100%;
        min-height: 56px; /* WCAG Touch Target */
    }
    
    .menu a[aria-current="page"] {
        background: linear-gradient(135deg, rgba(254, 189, 110, 0.9) 0%, rgba(255, 140, 0, 0.8) 100%);
        color: #fff !important;
    }
}

/* Desktop Menu */
@media (min-width: 769px) {
    .menu {
        display: flex !important;
        gap: 1rem;
    }
}

/* Menu Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* ========================================
   SEZIONE OFFERTE INTRO - Hero Section
   ======================================== */
#offerte-intro {
    min-height: clamp(60vh, 75vh, 85vh);
    text-align: center;
    margin-bottom: clamp(1rem, 2vw, 2rem);
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
    
    /* Content Visibility API - Performance */
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* H2 Titoli Principali - SEO Optimized + Giustificato Centrato */
#offerte-intro h2,
#offerte h2,
#chi-siamo h2,
#ordina h2,
#contatti h2 {
    font-size: clamp(0.1rem, 7vw, 2.5rem);
    color: var(--brand);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    
    
    /* Background Gradient */
    background: rgba(0, 0, 0, 0.5);
    border-radius: clamp(8px, 1.5vw, 12px);
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 140, 0, 0.3);
    
    /* Text Shadow per LeggibilitÃ  */
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.9),
        -1px -1px 3px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(255, 140, 0, 0.4);
    font-weight: 800;
    
    /* Performance */
    will-change: contents;
}

/* Paragrafi Descrittivi - LeggibilitÃ  */
#offerte-intro p,
#offerte > p,
#chi-siamo p,
#ordina > p:not(.order-buttons p) {
    color: #ffffff !important;
    font-size: clamp(1.0rem, 2.5vw, 1.1rem);
    line-height: 1.7;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    
    /* Background con Backdrop Filter */
    background: rgba(0, 0, 0, 0.45);
    border-radius: clamp(8px, 1.5vw, 12px);
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    text-align: justify;
    hyphens: auto;
    word-break: break-word;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    max-width: min(95%, 900px);
    margin-left: auto;
    margin-right: auto;
    
    /* Text Shadow */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

/* ========================================
   TEASER CARDS - Grid Ottimizzato
   ======================================== */
.offerte-teaser-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 320px));
    gap: clamp(0.75rem, 2vw, 1.5rem);
    max-width: 1400px;
    margin: clamp(1rem, 2vw, 2rem) auto;
    width: 100%;
    padding: 0 clamp(0.5rem, 2vw, 1rem);
    justify-content: center;
    
    /* Performance */
    contain: layout style paint;
}

.teaser-card {
    background-color: rgba(255, 255, 255, 0.97);
    border-radius: clamp(10px, 1.5vw, 14px);
    overflow: hidden;
    box-shadow: 0 8px 24px var(--shadow-light);
    
    /* Performance: Solo transform */
    transition: transform var(--transition-normal) ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    width: 100%;
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-heavy));
    -webkit-backdrop-filter: blur(var(--blur-heavy));
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

.teaser-card:hover {
    transform: scale(1.02) translateY(-2px) translateZ(0);
}

/* Card Image Wrapper - Aspect Ratio Fix CLS */
.card-image-wrapper {
    overflow: hidden;
    border-radius: clamp(10px, 1.5vw, 12px) clamp(10px, 1.5vw, 12px) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* CLS Prevention */
    min-height: clamp(150px, 25vw, 220px);
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.teaser-card-image,
.promo-card-image {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    object-position: center;
    display: block;
    
    /* Performance: Solo transform */
    transition: transform var(--transition-normal) ease;
    transform: translateZ(0);
    will-change: transform;
}

.teaser-card:hover .teaser-card-image,
.promo-card-detail:hover .promo-card-image {
    transform: scale(1.05) translateZ(0);
}

/* Card Overlay */
.teaser-card-overlay {
    padding: clamp(0.75rem, 2vw, 1.25rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    
    /* Background Gradient */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));
    color: white;
    border-radius: 0 0 clamp(10px, 1.5vw, 12px) clamp(10px, 1.5vw, 12px);
}

/* Titoli Card */
.teaser-card-overlay h3,
.promo-card-detail h3 {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.6rem, 1.5vw, 0.8rem);
    
    /* Background */
    background: rgba(0, 0, 0, 0.3);
    border-radius: clamp(6px, 1vw, 8px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* Text Shadow */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(255, 140, 0, 0.4);
}

/* Descrizioni Card */
.teaser-card-overlay p {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    line-height: 1.5;
    color: #ffffff;
    padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.6rem, 1.5vw, 0.8rem);
    
    /* Background */
    background: rgba(0, 0, 0, 0.25);
    border-radius: clamp(6px, 1vw, 8px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* Text Shadow */
    text-shadow: 
        1px 1px 3px rgba(0, 0, 0, 0.9),
        2px 2px 5px rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

/* Price Container */
.price-container,
.price-comparison {
    margin: clamp(0.3rem, 1vw, 0.5rem) 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    background: linear-gradient(135deg, #f9f9f9 0%, #efefef 100%);
    border-radius: clamp(6px, 1vw, 10px);
    border: 1px solid var(--border-light);
}

/* Prezzo Originale Barrato */
.price,
.original-price {
    font-weight: bold;
    text-decoration: line-through;
    color: #999;
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    padding: clamp(0.3rem, 0.75vw, 0.5rem);
    background: rgba(0, 0, 0, 0.05);
    border-radius: clamp(4px, 0.75vw, 6px);
}

/* Prezzo Scontato - Evidenziato */
.discount-price,
.discounted-price {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--mint-green);
    font-weight: 800;
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
    
    /* Background Gradient */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(255, 140, 0, 0.3) 100%);
    border-radius: clamp(6px, 1vw, 8px);
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 140, 0, 0.3);
    
    /* Text Shadow */
    text-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(254, 189, 110, 0.5);
}

/* Countdown */
.countdown {
    font-size: clamp(0.7rem, 1.8vw, 0.8rem);
    font-weight: 600;
    color: var(--vibrant-orange);
    padding: clamp(0.3rem, 0.75vw, 0.5rem);
    background: rgba(0, 0, 0, 0.35);
    border-radius: clamp(4px, 0.75vw, 6px);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* ========================================
   BUTTONS - Performance Optimized
   ======================================== */
.add-to-cart,
.btn-primary,
.btn-cta,
.btn-cta-primary,
.btn-cta-secondary {
    /* Gradient Background */
    background: linear-gradient(135deg, rgba(254, 189, 110, 0.95) 0%, rgba(69, 160, 73, 0.9) 100%);
    color: #fff;
    border: none;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.5rem);
    border-radius: 25px;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    font-weight: 700;
    cursor: pointer;
    
    /* Performance: Solo transform */
    transition: all var(--transition-fast) ease;
    
    /* WCAG Touch Target */
    min-height: var(--touch-target);
    touch-action: manipulation;
    
    /* Flexbox Center */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    width: 100%;
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Text Shadow */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

.add-to-cart:hover,
.btn-primary:hover,
.btn-cta:hover,
.btn-cta-primary:hover,
.btn-cta-secondary:hover,
.add-to-cart:active,
.btn-primary:active {
    background: linear-gradient(135deg, rgba(69, 160, 73, 0.95) 0%, rgba(254, 189, 110, 0.9) 100%);
    transform: translateY(-2px) translateZ(0);
}

/* Button Variants */
.btn-cta-primary {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.95) 0%, rgba(255, 87, 34, 0.9) 100%);
}

.btn-cta-secondary {
    background: linear-gradient(135deg, rgba(254, 189, 110, 0.95) 0%, rgba(69, 160, 73, 0.9) 100%);
}

/* ========================================
   PROMO GRID - Offerte Dettagliate
   ======================================== */
#offerte {
    padding: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Content Visibility */
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 320px));
    gap: clamp(1rem, 2vw, 1.75rem);
    width: 100%;
    max-width: 1400px;
    padding: 0 clamp(0.5rem, 2vw, 1rem);
    justify-content: center;
    
    /* Performance */
    contain: layout style paint;
}

.promo-card-detail {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.97);
    border-radius: clamp(12px, 2vw, 16px);
    overflow: hidden;
    box-shadow: 0 8px 24px var(--shadow-light);
    
    /* Performance */
    transition: transform var(--transition-normal) ease;
    border: 1px solid var(--border-light);
    width: 100%;
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-heavy));
    -webkit-backdrop-filter: blur(var(--blur-heavy));
    
    /* GPU Acceleration */
    transform: translateZ(0);
    will-change: transform;
}

.promo-card-detail:hover {
    transform: translateY(-3px) translateZ(0);
}

.card-content {
    padding: clamp(0.75rem, 2vw, 1.25rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    justify-content: space-between;
}

/* ========================================
   QUICK ACTIONS - Icon Buttons
   ======================================== */
.quick-actions {
    display: flex;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    margin-top: clamp(0.4rem, 1vw, 0.6rem);
    flex-wrap: wrap;
}

.quick-actions button {
    flex: 1;
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    border: none;
    border-radius: 20px;
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    
    /* WCAG Touch Target */
    min-height: 48px;
    touch-action: manipulation;
    
    /* Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Performance */
    transition: transform var(--transition-fast) ease;
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* GPU Acceleration */
    transform: translateZ(0);
}

.quick-actions button:first-child {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.95) 0%, rgba(0, 200, 83, 0.9) 100%);
}

.quick-actions button:last-child {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.95) 0%, rgba(255, 152, 0, 0.9) 100%);
}

.quick-actions button:hover,
.quick-actions button:active {
    transform: scale(0.98) translateZ(0);
}

/* ========================================
   CTA SECTION - Call to Action
   ======================================== */
.cta-section {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    justify-content: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    flex-wrap: wrap;
    width: 100%;
}

/* ========================================
   FORM INPUTS - Mobile Optimized
   ======================================== */
.pack-type,
.qty-input,
#order-form input {
    border: 1px solid var(--border-light);
    border-radius: clamp(6px, 1vw, 8px);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    font-size: 16px; /* Prevent iOS zoom on focus */
    width: 100%;
    background-color: #fff;
    
    /* WCAG Touch Target */
    min-height: 48px;
    
    /* Performance */
    transition: border-color var(--transition-fast) ease;
}

.pack-type:focus,
.qty-input:focus,
#order-form input:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-color: var(--brand);
}

/* Quantity Control */
.qty-control {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 1vw, 0.5rem);
    margin: clamp(0.4rem, 1vw, 0.6rem) 0;
}

.qty-control label {
    font-weight: 600;
    color: var(--brand);
    font-size: clamp(0.75rem, 2vw, 0.85rem);
}

.qty-input {
    width: clamp(60px, 10vw, 80px);
    text-align: center;
}

/* ========================================
   CARRELLO - Shopping Cart
   ======================================== */
#carrello {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    background-color: rgba(249, 249, 249, 0.97);
    padding: clamp(1rem, 2vw, 1.5rem);
    border-radius: clamp(8px, 1.5vw, 12px);
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-heavy));
    -webkit-backdrop-filter: blur(var(--blur-heavy));
    
    /* Content Visibility */
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

#carrello h2 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    color: var(--brand);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    background: rgba(0, 0, 0, 0.05);
    border-radius: clamp(6px, 1vw, 8px);
}

#cart-count {
    color: var(--mint-green);
    font-weight: 800;
}

#cart-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1vw, 0.6rem);
}

#cart-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.75rem, 2vw, 1rem);
    border-bottom: 1px solid var(--border-light);
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    flex-wrap: wrap;
    background-color: #ffffff;
    border-radius: clamp(6px, 1vw, 10px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Cart Buttons */
.qty-btn,
.remove-item {
    background: #fff;
    border: 1px solid var(--border-light);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.85rem, 2vw, 1rem);
    
    /* Performance */
    transition: all var(--transition-fast) ease;
    touch-action: manipulation;
    
    /* GPU Acceleration */
    transform: translateZ(0);
}

.remove-item {
    color: #FF5722;
    border-color: #FF5722;
}

.remove-item:hover {
    background-color: #FF5722;
    color: #fff;
}

.qty-btn:hover {
    background-color: var(--soft-blue);
    color: #fff;
}

#cart-summary {
    margin: clamp(0.75rem, 1.5vw, 1rem) 0;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    background: linear-gradient(135deg, #f9f9f9 0%, #efefef 100%);
    padding: clamp(0.75rem, 2vw, 1.25rem);
    border-radius: clamp(8px, 1.5vw, 12px);
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 1vw, 0.5rem);
}

/* Cart Actions */
.cart-actions {
    display: flex;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    margin-top: clamp(0.75rem, 1.5vw, 1rem);
    flex-wrap: wrap;
    justify-content: center;
}

.cart-actions button,
.cart-actions a {
    flex: 1;
    min-width: clamp(100px, 20vw, 140px);
    padding: clamp(0.75rem, 2vw, 1rem);
    border: none;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    
    /* Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    
    /* WCAG Touch Target */
    min-height: 48px;
    touch-action: manipulation;
    
    /* Performance */
    transition: transform var(--transition-fast) ease;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* GPU Acceleration */
    transform: translateZ(0);
}

#clear-cart {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.95) 0%, rgba(244, 67, 54, 0.9) 100%);
}

#whatsapp-order {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.95) 0%, rgba(0, 200, 83, 0.9) 100%);
}

.cart-actions a {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.95) 0%, rgba(255, 152, 0, 0.9) 100%);
}

#info-request {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.95) 0%, rgba(255, 193, 7, 0.9) 100%);
}

#continue-shopping {
    background: linear-gradient(135deg, rgba(69, 160, 73, 0.95) 0%, rgba(56, 142, 60, 0.9) 100%);
}

.cart-actions button:hover,
.cart-actions a:hover {
    transform: translateY(-2px) translateZ(0);
}

/* Order Form */
#order-form {
    margin-top: clamp(0.75rem, 1.5vw, 1rem);
    display: none;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1rem);
}

#order-form div {
    display: flex;
    gap: clamp(0.5rem, 1vw, 0.75rem);
    flex-wrap: wrap;
}

#order-form button[type="submit"] {
    width: 100%;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.95) 0%, rgba(0, 200, 83, 0.9) 100%);
    color: #fff;
    padding: clamp(0.75rem, 2vw, 1rem);
    border: none;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
}

/* ========================================
   CHI SIAMO E ORDINA - Content Sections
   ======================================== */
#chi-siamo,
#ordina,
#contatti {
    padding: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    
    /* Content Visibility */
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Order Buttons */
.order-buttons {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    width: 100%;
    align-items: center;
}

#ordina .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.5rem);
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.95) 0%, rgba(255, 87, 34, 0.9) 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 700;
    min-height: 48px;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    width: 100%;
    max-width: 300px;
    
    /* Performance */
    transition: transform var(--transition-fast) ease;
    touch-action: manipulation;
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* GPU Acceleration */
    transform: translateZ(0);
}

#ordina .btn[href*="wa.me"] {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.95) 0%, rgba(0, 200, 83, 0.9) 100%);
}

#ordina .btn:hover {
    transform: translateY(-2px) translateZ(0);
}

@media (min-width: 769px) {
    .order-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    #ordina .btn {
        width: auto;
    }
}

/* ========================================
   CONTATTI - Address Section
   ======================================== */
#contatti address {
    font-style: normal;
    line-height: 1.6;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    align-items: center;
    text-align: center;
    padding: clamp(1rem, 2vw, 1.5rem);
    
    /* Background */
    background: rgb(237 233 233 / 42%);
    border-radius: clamp(8px, 1.5vw, 12px);
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#contatti address strong {
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: var(--brand);
    display: block;
    padding: clamp(0.4rem, 1vw, 0.6rem);
    background: rgba(0, 0, 0, 0.3);
    border-radius: clamp(6px, 1vw, 8px);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#contatti a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.6rem, 1.5vw, 0.8rem);
    background: rgba(0, 0, 0, 0.3);
    border-radius: clamp(6px, 1vw, 8px);
    
    /* Performance */
    transition: all var(--transition-fast) ease;
}

#contatti a:hover {
    color: var(--vibrant-orange);
    background: rgba(0, 0, 0, 0.5);
}

/* Map */
.map {
    margin-top: clamp(0.75rem, 2vw, 1.25rem);
    border-radius: clamp(10px, 1.5vw, 14px);
    overflow: hidden;
    box-shadow: 0 4px 16px var(--shadow-light);
    width: 100%;
    max-width: 100%;
}

.map iframe {
    width: 100%;
    height: clamp(250px, 35vh, 400px);
    border: none;
    display: block;
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    text-align: center;
    padding: clamp(1rem, 2vw, 1.5rem);
    margin-top: auto;
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    border-top: 1px solid var(--border-light);
    width: 100%;
    
    /* Backdrop Filter */
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Text Shadow */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.contact-footer a {
    color: #25D366;
    font-weight: 600;
}

/* Social Links (se aggiunti) */
.social-footer {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.social-footer a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    
    /* Performance */
    transition: transform var(--transition-fast) ease;
    transform: translateZ(0);
}

.social-footer a:hover {
    transform: scale(1.1) translateZ(0);
    background: rgba(255, 140, 0, 0.3);
}

/* Trust Badges (se aggiunti all'HTML) */
.trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    max-width: 800px;
    width: 100%;
}

.trust-badges .badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
}

.trust-badges .badge i {
    font-size: 2rem;
    color: var(--brand);
}

.trust-badges .badge span {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 480px) {
    /* Prevent Zoom on Input Focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* Isolation per evitare stacking context issues */
    .section,
    .teaser-card,
    .promo-card-detail {
        isolation: isolate;
    }
}

/* ========================================
   CUSTOM SCROLLBAR - Desktop Only
   ======================================== */
@media (min-width: 769px) {
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: var(--brand);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background-color: #e67e00;
    }
    
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--brand) #f1f1f1;
    }
}

/* ========================================
   FALLBACK PER BROWSER VECCHI
   Senza supporto backdrop-filter
   ======================================== */
@supports not (backdrop-filter: blur(1px)) {
    .subtitle,
    #offerte-intro h2,
    #offerte-intro p,
    #offerte h2,
    #offerte > p,
    #chi-siamo h2,
    #ordina h2,
    #contatti h2,
    #chi-siamo p,
    #ordina p,
    .teaser-card-overlay h3,
    .teaser-card-overlay p,
    .menu a,
    .btn-cta,
    .btn-primary,
    #contatti address,
    footer {
        background: rgba(0, 0, 0, 0.75) !important;
    }
}

/* ========================================
   ACCESSIBILITY - Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   PRINT STYLES - SEO/UX
   ======================================== */
@media print {
    body::before {
        display: none;
    }
    
    nav,
    .top-right-buttons,
    .add-to-cart,
    .quick-actions,
    footer {
        display: none;
    }
    
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

/* ========================================
   PERFORMANCE HINTS
   ======================================== */
/* Content Visibility per sezioni non visibili */
.section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Preload Hint per Font */
@font-face {
    font-family: 'Great Vibes';
    font-display: swap; /* FOUT prevention */
    src: url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
}

