/* ========================================
   ZENOVA MOBILE OPTIMIZATIONS
   ======================================== */

/* Mobile Header - Always visible */

/* Hide desktop elements on mobile */
@media (max-width: 968px) {

    /* Global touch optimization - elimina ritardo 300ms */
    button, a, .product-card, .qty-btn, .cart-item-remove {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Hide desktop nav menu and icons */
    .nav-menu {
        display: none !important;
    }

    .nav-icons {
        display: none !important;
    }

    /* Show mobile icons */
    .nav-icons-mobile {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    /* Mobile menu toggle button (hamburger) */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        position: relative;
        z-index: 1001;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-color, #333);
        margin: 3px 0;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Nascondi logo su mobile - semplifica navigazione */
    .logo {
        display: none !important;
    }

    /* Mobile nav layout */
    .nav {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem;
        padding: 0.5rem 0 !important;
    }

    /* Mobile icons styling - HEADER: icone GRANDI e visibili */
    .nav-icons-mobile .cart-btn,
    .nav-icons-mobile .search-btn,
    .nav-icons-mobile button,
    .nav-icons-mobile a {
        width: 56px !important;
        height: 56px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: 2px solid #333 !important;
        border-radius: 12px !important;
        cursor: pointer;
        position: relative;
    }

    /* Bottone cerca visibile su mobile */
    #searchBtnMobile,
    .nav-icons-mobile .search-btn {
        display: flex !important;
    }

    .nav-icons-mobile .cart-btn svg,
    .nav-icons-mobile .search-btn svg,
    .nav-icons-mobile button svg {
        width: 30px !important;
        height: 30px !important;
        stroke: #333 !important;
        stroke-width: 2.5 !important;
    }

    .cart-count-mobile {
        position: absolute;
        top: 0px;
        right: 0px;
        background: #ff4757;
        color: white;
        font-size: 0.8rem;
        font-weight: bold;
        padding: 4px 8px;
        border-radius: 12px;
        min-width: 26px;
        text-align: center;
        border: 3px solid white;
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    }
}

/* Hide mobile elements on desktop */
@media (min-width: 969px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .nav-icons-mobile {
        display: none !important;
    }
}

/* Migliori font size per mobile */
@media (max-width: 768px) {

    /* Font base più grandi */
    body {
        font-size: 16px; /* minimo leggibile su mobile */
    }

    /* Titoli più leggibili */
    h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.3rem !important;
    }

    /* Prodotti - testo più grande */
    .product-name {
        font-size: 1.1rem !important;
        line-height: 1.4;
    }

    .product-price {
        font-size: 1.3rem !important;
        font-weight: 600;
    }

    .product-description {
        font-size: 0.95rem !important;
        line-height: 1.5;
    }

    /* Bottoni touch-friendly */
    button,
    .btn,
    .nav-link,
    .category-nav-item {
        min-height: 44px; /* Apple raccomanda minimo 44px */
        min-width: 44px;
        font-size: 1rem !important;
        padding: 0.75rem 1.25rem !important;
    }

    /* Card prodotti ottimizzate */
    .product-card {
        padding: 1rem !important;
    }

    /* Navigazione categorie scorrevole */
    .categories-nav-list {
        gap: 0.5rem !important;
        padding: 1rem 0 !important;
    }

    .category-nav-item {
        font-size: 1rem !important;
        padding: 0.75rem 1.25rem !important;
        white-space: nowrap;
    }

    /* Hero section */
    .hero-title {
        font-size: 2rem !important;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.6;
    }

    /* Filtri e dropdown */
    .category-dropdown {
        font-size: 1rem !important;
        min-width: 200px !important;
    }

    .category-dropdown-item {
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
        min-height: 44px;
    }

    /* Carrello Mobile - Icona Visibile */
    .cart-header {
        background: linear-gradient(135deg, #8B6F47 0%, #D4A373 100%) !important;
        padding: 1.5rem !important;
        border-bottom: none !important;
    }

    .cart-header h3 {
        color: white !important;
        font-size: 1.3rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .cart-header h3::before {
        content: "🛒" !important;
        font-size: 2rem !important;
        display: inline-block !important;
    }

    .cart-header .close-btn {
        color: white !important;
        font-size: 2rem !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cart-item-name {
        font-size: 1rem !important;
    }

    .cart-item-price {
        font-size: 1.1rem !important;
    }

    /* Input fields */
    input,
    select,
    textarea {
        font-size: 16px !important; /* Previene zoom su iOS */
        min-height: 44px;
        padding: 0.75rem !important;
    }

    /* Spacing migliore */
    .container {
        padding: 0 1rem !important;
    }

    section {
        padding: 2rem 0 !important;
    }

    /* Grid prodotti - 2 colonne massimo */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Featured products - 1 colonna */
    .featured-products-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Tech features grid - 2 colonne su mobile */
    .tech-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .tech-feature-card {
        padding: 1rem !important;
    }

    .tech-feature-icon {
        font-size: 2rem !important;
    }

    .tech-feature-title {
        font-size: 0.9rem !important;
    }

    .tech-feature-description {
        font-size: 0.85rem !important;
    }

    /* Logo più piccolo su mobile */
    .logo h1 {
        font-size: 1.3rem !important;
    }

    .logo-experience {
        font-size: 0.75rem !important;
    }

    .tagline {
        font-size: 0.7rem !important;
    }

    /* Icone navigazione */
    .nav-icons button,
    .nav-icons a {
        width: 44px !important;
        height: 44px !important;
    }

    .nav-icons svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Badge e count */
    .cart-count,
    .wishlist-count {
        font-size: 0.75rem !important;
        min-width: 20px;
        height: 20px;
    }

    /* Footer */
    .footer {
        font-size: 0.95rem !important;
    }

    .footer h3 {
        font-size: 1.2rem !important;
    }
}

/* Extra small devices (< 480px) */
@media (max-width: 480px) {

    /* Grid prodotti - 1 colonna su schermi molto piccoli */
    .products-grid {
        grid-template-columns: 1fr !important;
    }

    /* Titoli ancora più compatti */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    /* Logo ancora più compatto */
    .logo-icon img {
        width: 35px !important;
        height: 35px !important;
    }

    .logo h1 {
        font-size: 1.1rem !important;
    }
}

/* ========================================
   MOBILE E-COMMERCE REDESIGN
   ======================================== */

@media (max-width: 768px) {

    /* === 1. CERCA E CARRELLO SU MOBILE === */

    /* === 2. CATEGORIE SCROLL ORIZZONTALE (solo HOME) === */
    /* Su prodotti.html, nascondere categories-nav e usare solo sidebar */
    body:not(.home-page) .categories-nav {
        display: none !important; /* Nascondi su prodotti.html */
    }

    /* Su home page (index.html), mostrare categories-nav scorrevole */
    .home-page .categories-nav,
    .categories-nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
        background: white !important;
        position: sticky !important;
        top: 60px !important;
        z-index: 50 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        padding: 10px 0 !important;
    }

    .categories-nav::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }

    .categories-nav-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        padding: 0 15px !important;
        width: max-content !important;
    }

    .category-nav-item-wrapper {
        flex-shrink: 0 !important;
    }

    .category-nav-item {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        padding: 12px 20px !important;
        background: transparent !important;
        color: #333 !important;
        border: 1px solid #ddd !important;
        border-radius: 25px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        transition: transform 0.2s !important;
    }

    .category-nav-item:active {
        transform: scale(0.95) !important;
    }

    /* Dropdown categorie navigazione - nascondi mega menu SOLO */
    .mega-menu,
    .categories-nav-mega .mega-menu {
        display: none !important; /* No mega menu su mobile */
    }

    /* Dropdown categorie - nascosto di default, visibile al click */
    .category-dropdown-menu {
        z-index: 999999 !important;
        position: fixed !important;
        background: white !important;
        border: 2px solid #333 !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.25) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        min-width: 250px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
    }

    /* Dropdown aperto tramite JavaScript (classe .open aggiunta al click) */
    .category-nav-dropdown.open .category-dropdown-menu {
        display: block !important; /* Forza display anche per mega-menu */
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Assicura che mega-menu sia visibile quando dropdown e' aperto */
    .category-nav-dropdown.open .mega-menu,
    .category-nav-mega-dropdown.open .mega-menu,
    .category-nav-item-wrapper.open .mega-menu,
    .open > .mega-menu,
    .open .category-dropdown-menu.mega-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* MEGA MENU BEAUTY - override dimensioni per mobile */
    .category-dropdown-menu.mega-menu {
        min-width: unset !important;
        max-width: 95vw !important;
        width: 95vw !important;
        left: 2.5vw !important;
        right: 2.5vw !important;
        transform: none !important;
        flex-direction: column !important;
        padding: 15px !important;
    }

    .mega-menu-column {
        width: 100% !important;
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #eee !important;
    }

    .mega-menu-column:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    .mega-menu-column h4 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }

    .dropdown-sublink {
        display: block !important;
        padding: 10px 0 !important;
        font-size: 1rem !important;
    }

    .category-dropdown {
        z-index: 999999 !important;
        position: relative !important;
    }

    .category-nav-dropdown {
        position: relative !important;
        z-index: 999999 !important;
    }

    /* Dropdown link styling */
    .category-dropdown-menu .dropdown-link {
        display: block !important;
        padding: 14px 18px !important;
        color: #333 !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
        border-bottom: 1px solid #eee !important;
    }

    .category-dropdown-menu .dropdown-link:last-child {
        border-bottom: none !important;
    }

    .category-dropdown-menu .dropdown-link:hover,
    .category-dropdown-menu .dropdown-link:active {
        background: #f5f5f5 !important;
    }

    /* === 3. PRODOTTI SCROLL VERTICALE (non carousel) === */
    .featured-products-grid,
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px 0 !important;
    }

    .product-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Bottone "Aggiungi al carrello" - solo icona su mobile */
    /* BOTTONE CARRELLO PRODOTTI - MINIMAL (solo icona) */
    .add-to-cart-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important; /* Nasconde il testo */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 5px auto 0 auto !important;
        /* Fix mobile touch delay */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
    }

    .add-to-cart-btn::before {
        content: "🛒" !important;
        font-size: 1.4rem !important;
        display: block !important;
    }

    .add-to-cart-btn:active {
        transform: scale(0.9) !important;
        opacity: 0.7 !important;
    }

    /* === 4. SIDEBAR CATEGORIE MOBILE (prodotti.html) - IN ALTO === */
    .categories-sidebar {
        width: 100% !important;
        position: static !important;
        margin-bottom: 20px !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
        padding: 15px !important;
        order: -1 !important; /* Forza sidebar in alto */
    }

    .sidebar-header h3 {
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }

    .category-btn {
        font-size: 1rem !important;
        padding: 12px 15px !important;
        width: 100% !important;
        min-height: 48px !important;
    }

    .subcategory-list {
        padding-left: 10px !important;
    }

    .subcategory-link {
        font-size: 0.95rem !important;
        padding: 10px 12px !important;
        min-height: 44px !important;
    }

    /* Nascondi pulsante "Scopri tutti" su mobile */
    .mobile-discover-all {
        display: none !important;
    }

    /* Layout prodotti: sidebar SOPRA, prodotti SOTTO */
    .products-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .products-container {
        order: 1 !important; /* Prodotti sotto la sidebar */
        width: 100% !important;
    }

    /* === 5. FRECCE NAVIGAZIONE IMMAGINI PRODOTTO - Sotto immagine === */
    .gallery-nav {
        top: 250px !important; /* Alzate sotto all'immagine (non su descrizione) */
        width: 44px !important;
        height: 44px !important;
        font-size: 1.5rem !important;
    }

    .gallery-prev {
        left: 10% !important;
    }

    .gallery-next {
        right: 10% !important;
    }

    /* === 6. NASCONDI ELEMENTI INUTILI SU MOBILE === */

    /* Nascondi hero banner grande */
    .hero {
        display: none !important;
    }

    /* Nascondi griglia categorie con immagini */
    .categories-grid,
    .category-grid,
    .tech-features-grid {
        display: none !important;
    }

    /* Nascondi immagini decorative */
    .hero-image,
    .category-image,
    .banner-image {
        display: none !important;
    }

    /* === 5. LAYOUT PULITO === */
    body {
        background: #f9f9f9 !important;
    }

    .container {
        padding: 0 15px !important;
    }

    section {
        padding: 15px 0 !important;
    }

    /* Titoli sezioni più compatti */
    .section-title {
        font-size: 1.3rem !important;
        margin: 15px 0 !important;
        padding-left: 15px !important;
    }

    /* === 6. SEARCH MODAL FULL SCREEN === */
    .search-modal {
        padding-top: 0 !important;
        align-items: stretch !important;
    }

    .search-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .search-results {
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
    }

    /* === 7. PRODUCT MODAL FIX === */
    .product-detail-modal {
        padding: 20px 10px !important;
    }

    .product-detail-content {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* === 7. CART FOOTER STICKY === */
    .cart-footer {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
    }
}

/* Landscape mobile */
@media (max-width: 896px) and (orientation: landscape) {

    /* Header compatto in landscape */
    .header {
        padding: 0.5rem 0 !important;
    }

    .nav {
        min-height: auto !important;
    }

    /* Hero più compatto */
    .hero-section {
        padding: 2rem 0 !important;
    }
}

/* Migliorie generali touch */
@media (hover: none) and (pointer: coarse) {

    /* Rimuovi effetti hover che non funzionano su touch */
    *:hover {
        transform: none !important;
    }

    /* Touch feedback visivo */
    button:active,
    .btn:active,
    .product-card:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}