/* Sidebar user skeleton */
        .sidebar-user-skeleton .user-avatar { background: var(--color-bg-elevated); color: transparent; }
        .sidebar-user-skeleton .user-name { background: var(--color-bg-elevated); color: transparent; border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        .sidebar-user-skeleton .user-role { background: var(--color-bg-elevated); color: transparent; border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        
        /* Skeleton product card */
        .skeleton-product-card { border: 1px solid var(--color-border); overflow: hidden; }
        .skeleton-product-image { aspect-ratio: 1; background: var(--color-bg-elevated); animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        .skeleton-product-info { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
        .skeleton-product-category { height: 10px; width: 60px; background: var(--color-bg-elevated); border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        .skeleton-product-name { height: 20px; width: 80%; background: var(--color-bg-elevated); border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        .skeleton-product-desc { height: 14px; width: 100%; background: var(--color-bg-elevated); border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        .skeleton-product-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-md); margin-top: var(--space-md); border-top: 1px solid var(--color-border); }
        .skeleton-product-price { height: 24px; width: 80px; background: var(--color-bg-elevated); border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        .skeleton-product-btn { height: 32px; width: 80px; background: var(--color-bg-elevated); border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--color-bg-elevated) 0%, var(--color-border) 50%, var(--color-bg-elevated) 100%); }
        .skeleton-hidden { display: none; }

        /* ============================================
           HEADER BUTTON SIZING
           ============================================ */
        /* Ridimensionamento bottoni nell'header */
        .page-header .page-actions .btn {
            padding: var(--space-xs) var(--space-lg);
            font-size: 0.8438rem;
            height: auto;
            min-height: unset;
        }

        .page-header .page-actions .btn .icon {
            width: 15px;
            height: 15px;
        }

        /* Responsive: mobile */
        @media (max-width: 768px) {
            .page-header .page-actions .btn {
                padding: var(--space-sm) var(--space-md);
                font-size: 0.875rem;
                min-height: 44px;
            }

            .page-header .page-actions .btn .icon {
                width: 16px;
                height: 16px;
            }
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
            gap: var(--space-lg);
        }
        
        .product-card {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            /* Text overflow handling - previene overflow su viewport stretti */
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            min-width: 0; /* Importante per flex child */
        }
        
        .product-image {
            aspect-ratio: 1;
            background: var(--color-bg-elevated);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        /* Product Image Gallery/Carousel */
        .product-image-carousel {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .product-image-carousel-inner {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            overflow: hidden;
        }

        .product-image-carousel-item {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity var(--duration-normal) var(--ease-out);
            pointer-events: none;
        }

        .product-image-carousel-item.active {
            opacity: 1;
            pointer-events: auto;
        }

        .product-image-carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .product-image-carousel-controls {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--space-sm);
            opacity: 0;
            transition: opacity var(--duration-fast) var(--ease-out);
            pointer-events: none;
        }

        .product-card:hover .product-image-carousel-controls {
            opacity: 1;
            pointer-events: auto;
        }

        .carousel-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 10, 10, 0.9);
            border: 1px solid var(--color-border);
            color: var(--color-text);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            z-index: 2;
        }

        .carousel-btn:hover {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: var(--color-bg);
        }

        .carousel-btn svg {
            width: 16px;
            height: 16px;
        }

        .carousel-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .carousel-indicators {
            position: absolute;
            bottom: var(--space-sm);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: var(--space-xs);
            z-index: 2;
        }

        .carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(245, 245, 245, 0.5);
            border: 1px solid rgba(245, 245, 245, 0.3);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }

        .carousel-indicator.active {
            background: var(--color-accent);
            border-color: var(--color-accent);
        }

        @media (max-width: 768px) {
            /* Always show carousel controls on mobile */
            .product-image-carousel-controls {
                opacity: 1;
                pointer-events: auto;
            }
        }
        
        .product-placeholder {
            color: var(--color-text-subtle);
            opacity: 0.5;
        }
        
        .product-badge {
            position: absolute;
            top: var(--space-md);
            left: var(--space-md);
            padding: 6px 12px;
            font-size: 0.6875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .product-badge.new {
            background: var(--color-accent);
            color: var(--color-bg);
        }
        
        .product-badge.limited {
            background: var(--color-bg);
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }
        
        .product-badge.sold-out {
            background: var(--color-text-muted);
            color: var(--color-bg);
        }
        
        .product-info {
            padding: var(--space-xl);
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: var(--space-sm);
        }
        
        .product-category {
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
        }
        
        .product-name {
            font-family: var(--font-display);
            font-size: 1.25rem;
            letter-spacing: 0.02em;
        }
        
        .product-description {
            font-size: 0.875rem;
            color: var(--color-text-muted);
            line-height: 1.5;
            flex: 1;
        }
        
        .product-footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding-top: var(--space-lg);
            margin-top: var(--space-sm);
            border-top: 1px solid var(--color-border);
            gap: var(--space-md);
            box-sizing: border-box;
        }
        
        .product-footer .btn {
            width: 100%;
        }
        
        .product-price {
            font-family: var(--font-display);
            font-size: 1.75rem;
            color: var(--color-accent);
            letter-spacing: 0.02em;
        }
        
        .product-price .currency {
            display: none;
        }
        
        .product-price .currency {
            font-size: 1rem;
            color: var(--color-text-muted);
        }
        
        /* Size selector */
        .size-selector {
            display: flex;
            gap: var(--space-xs);
            margin-bottom: var(--space-md);
        }
        
        .size-option {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .size-option:hover:not(.disabled) {
            border-color: var(--color-accent);
        }
        
        .size-option.selected {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: var(--color-bg);
        }
        
        .size-option.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            text-decoration: line-through;
        }
        
        /* Cart counter */
        .cart-counter {
            position: fixed;
            bottom: var(--space-lg);
            right: var(--space-xl);
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-md) var(--space-lg);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            z-index: 200;
            transform: translateY(120%);
            transition: transform var(--duration-normal) var(--ease-out);
            max-width: calc(100% - var(--space-xl) * 2); /* Era 100vw - causa overflow con scrollbar */
        }
        
        .cart-counter.visible {
            transform: translateY(0);
        }
        
        .cart-count {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-accent);
            color: var(--color-bg);
            font-weight: 700;
            font-size: 0.875rem;
        }
        
        /* Filter bar */
        .filter-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-lg);
            border-bottom: 1px solid var(--color-border);
        }
        
        .filter-categories {
            display: flex;
            gap: var(--space-sm);
        }
        
        .filter-category {
            padding: 8px 16px;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-text-muted);
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .filter-category:hover {
            color: var(--color-text);
        }
        
        .filter-category.active {
            color: var(--color-accent);
            border-color: var(--color-accent);
        }
        
        @media (max-width: 768px) {
            .filter-bar {
                flex-direction: column;
                gap: var(--space-md);
                align-items: flex-start;
            }
            
            .filter-categories {
                overflow-x: auto;
                width: 100%;
                padding-bottom: var(--space-sm);
            }
            
            .cart-counter {
                bottom: calc(var(--space-md) + 60px); /* Above mobile nav */
                right: var(--space-md);
                left: var(--space-md);
                max-width: none;
            }
        }

        /* ===========================================
           CART SIDEBAR
           =========================================== */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: 0;
            width: 400px;
            max-width: 90vw;
            height: 100vh;
            background: var(--color-bg);
            border-left: 1px solid var(--color-border);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        .cart-sidebar.open { transform: translateX(0); }
        .cart-header { padding: 1.5rem; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
        .cart-header h3 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.05em; }
        .cart-close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; }
        .cart-close:hover { color: var(--color-text); }
        .cart-items { flex: 1; overflow-y: auto; padding: 1rem; }
        
        /* Custom scrollbar per cart-items */
        .cart-items::-webkit-scrollbar {
            width: 6px;
        }
        
        .cart-items::-webkit-scrollbar-track {
            background: var(--color-bg);
            border-radius: 3px;
        }
        
        .cart-items::-webkit-scrollbar-thumb {
            background: var(--color-border);
            border-radius: 3px;
            transition: background var(--duration-normal) var(--ease-out);
        }
        
        .cart-items::-webkit-scrollbar-thumb:hover {
            background: var(--color-accent);
        }
        
        /* Firefox scrollbar */
        .cart-items {
            scrollbar-width: thin;
            scrollbar-color: var(--color-border) var(--color-bg);
        }
        
        /* Cart Item - Layout principale */
        .cart-item { 
            display: flex; 
            gap: var(--space-md); 
            padding: var(--space-md) 0; 
            border-bottom: 1px solid var(--color-border); 
            align-items: flex-start;
        }
        
        /* Immagine prodotto */
        .cart-item-image { 
            width: 64px; 
            height: 64px; 
            background: var(--color-bg-elevated); 
            flex-shrink: 0; 
            border: 1px solid var(--color-border);
            overflow: hidden;
        }
        .cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Info prodotto */
        .cart-item-info { 
            flex: 1; 
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }
        .cart-item-name { 
            font-weight: 600; 
            font-size: 0.9375rem;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cart-item-size,
        .cart-item-color { 
            font-size: 0.8125rem; 
            color: var(--color-text-muted); 
        }
        .cart-item-details { 
            font-size: 0.8125rem; 
            color: var(--color-text-muted); 
        }
        .cart-item-price { 
            font-family: var(--font-display); 
            font-size: 1.125rem;
            color: var(--color-accent); 
            letter-spacing: 0.02em;
            margin-top: var(--space-xs);
        }
        
        /* Actions container */
        .cart-item-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: var(--space-sm);
            flex-shrink: 0;
        }
        
        /* Quantity selector */
        .cart-item-quantity {
            display: flex;
            align-items: center;
            border: 1px solid var(--color-border);
            background: var(--color-bg);
        }
        .cart-item-quantity .qty-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-elevated);
            border: none;
            color: var(--color-text);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.15s ease;
        }
        .cart-item-quantity .qty-btn:hover {
            background: var(--color-accent);
            color: var(--color-bg);
        }
        .cart-item-quantity .qty-btn:active {
            transform: scale(0.95);
        }
        .cart-item-quantity span {
            min-width: 32px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.875rem;
            background: var(--color-bg);
        }
        
        /* Remove button */
        .cart-item-remove { 
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent; 
            border: 1px solid transparent; 
            color: var(--color-text-muted); 
            cursor: pointer; 
            transition: all 0.15s ease;
            padding: 0;
        }
        .cart-item-remove:hover { 
            color: #ef4444; 
            border-color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
        }
        .cart-item-remove .icon {
            width: 16px;
            height: 16px;
        }
        
        .cart-footer { padding: 1.5rem; border-top: 1px solid var(--color-border); }
        .cart-total { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 1.125rem; }
        .cart-total-amount { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-accent); }
        .btn-block { width: 100%; }
        .cart-empty { text-align: center; padding: 3rem; color: var(--color-text-muted); }

        /* ===========================================
           CART OVERLAY
           =========================================== */
        .cart-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .cart-overlay.open,
        .cart-overlay.visible { opacity: 1; visibility: visible; }

        /* ===========================================
           CART FLOATING BUTTON
           =========================================== */
        .cart-floating-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--color-accent);
            color: var(--color-bg);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(255, 92, 0, 0.4);
            z-index: 100;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .cart-floating-btn:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(255, 92, 0, 0.5); }
        .cart-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 22px;
            height: 22px;
            background: var(--color-bg);
            color: var(--color-text);
            font-size: 0.75rem;
            font-weight: 700;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--color-accent);
        }
        .cart-floating-btn.empty { opacity: 0.5; pointer-events: none; }

        /* ===========================================
           CART MOBILE BUTTON (Floating left of hamburger)
           =========================================== */
        .cart-mobile-btn {
            display: none; /* Hidden on desktop - shown only on mobile */
            position: fixed;
            bottom: var(--space-lg);
            left: var(--space-lg);
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--color-bg-elevated);
            border: 2px solid var(--color-accent);
            color: var(--color-accent);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 101;
            transition: all 0.2s ease;
        }
        
        .cart-mobile-btn:hover,
        .cart-mobile-btn:active {
            background: var(--color-accent);
            color: var(--color-bg);
            transform: scale(1.05);
        }
        
        .cart-mobile-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 22px;
            height: 22px;
            background: var(--color-accent);
            color: var(--color-bg);
            font-size: 0.75rem;
            font-weight: 700;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .cart-mobile-btn.empty {
            opacity: 0.6;
        }
        
        .cart-mobile-btn.empty .cart-mobile-badge {
            display: none;
        }

        /* ===========================================
           CART HEADER BUTTON (Deprecated - use cart-mobile-btn)
           =========================================== */
        .cart-header-btn {
            display: none; /* Hidden everywhere now */
            position: relative;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid var(--color-border);
            color: var(--color-text);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .cart-header-btn:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }
        .cart-header-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            min-width: 18px;
            height: 18px;
            background: var(--color-accent);
            color: var(--color-bg);
            font-size: 0.625rem;
            font-weight: 700;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-header-btn.empty .cart-header-badge {
            display: none;
        }

        /* ===========================================
           MODAL TABS
           =========================================== */
        
        .modal-tabs {
            display: flex;
            border-bottom: 1px solid var(--color-border);
            background: var(--color-bg-elevated);
        }
        
        .modal-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xs);
            padding: var(--space-md) var(--space-lg);
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--color-text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .modal-tab:hover {
            color: var(--color-text);
            background: rgba(255, 255, 255, 0.03);
        }
        
        .modal-tab.active {
            color: var(--color-accent);
            border-bottom-color: var(--color-accent);
            background: transparent;
        }
        
        .modal-tab-content {
            display: none;
        }
        
        .modal-tab-content.active {
            display: block;
        }

/* ========================================
   DISCLAIMERS
   ======================================== */
.product-disclaimer {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: var(--color-background-secondary);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.product-disclaimer .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-accent);
}

.product-disclaimer p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.checkout-disclaimer {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.checkout-disclaimer .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-accent);
}

.checkout-disclaimer p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}

.checkout-disclaimer strong {
    color: var(--color-text);
    font-weight: 600;
}
        /* ===========================================
           DISCLAIMERS
           =========================================== */
        .product-disclaimer {
            display: flex;
            gap: var(--space-xs);
            align-items: flex-start;
            margin-top: var(--space-md);
            padding: var(--space-sm);
            background: var(--color-background-secondary);
            border-left: 2px solid var(--color-accent);
            border-radius: var(--radius-sm);
        }
        
        .product-disclaimer .icon {
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--color-accent);
        }
        
        .product-disclaimer p {
            margin: 0;
            font-size: 0.75rem;
            line-height: 1.4;
            color: var(--color-text-secondary);
        }
        
        .checkout-disclaimer {
            display: flex;
            gap: var(--space-sm);
            align-items: flex-start;
            margin-bottom: var(--space-lg);
            padding: var(--space-md);
            background: var(--color-background-secondary);
            border: 1px solid var(--color-border);
            border-left: 3px solid var(--color-accent);
            border-radius: var(--radius-md);
        }
        
        .checkout-disclaimer .icon {
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--color-accent);
        }
        
        .checkout-disclaimer p {
            margin: 0;
            font-size: 0.875rem;
            line-height: 1.5;
            color: var(--color-text);
        }
        
        .checkout-disclaimer strong {
            color: var(--color-text);
            font-weight: 600;
        }

        /* ===========================================
           PRODUCT DETAIL MODAL - COMPACT VERSION
           =========================================== */
        
        /* Override modal-body per il product detail - permetti scroll su mobile */
        #modal-product-detail .modal-body {
            padding: var(--space-md);
            overflow-y: auto;
            max-height: calc(90vh - 80px); /* Altezza modal meno header */
        }
        
        /* Custom scrollbar per product detail modal */
        #modal-product-detail .modal-body::-webkit-scrollbar {
            width: 6px;
        }
        
        #modal-product-detail .modal-body::-webkit-scrollbar-track {
            background: var(--color-bg-elevated);
            border-radius: 3px;
        }
        
        #modal-product-detail .modal-body::-webkit-scrollbar-thumb {
            background: var(--color-border);
            border-radius: 3px;
            transition: background var(--duration-normal) var(--ease-out);
        }
        
        #modal-product-detail .modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--color-accent);
        }
        
        /* Firefox scrollbar */
        #modal-product-detail .modal-body {
            scrollbar-width: thin;
            scrollbar-color: var(--color-border) var(--color-bg-elevated);
        }
        
        #modal-product-detail .modal {
            max-height: 90vh;
            overflow: hidden;
        }
        
        .product-detail-grid { 
            display: grid; 
            grid-template-columns: minmax(300px, 400px) 1fr; 
            gap: var(--space-xl); 
            align-items: start;
        }
        
        /* Product Gallery - E-commerce style */
        .product-gallery {
            display: flex;
            gap: var(--space-md);
            width: 100%;
        }
        
        .product-gallery-thumbnails {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            width: 80px;
            flex-shrink: 0;
        }
        
        .product-gallery-thumbnail {
            width: 80px;
            height: 80px;
            background: var(--color-bg-elevated);
            border: 2px solid var(--color-border);
            cursor: pointer;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .product-gallery-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-gallery-thumbnail:hover {
            border-color: var(--color-accent);
            transform: translateY(-2px);
        }
        
        .product-gallery-thumbnail.active {
            border-color: var(--color-accent);
            border-width: 3px;
        }
        
        .product-gallery-main {
            flex: 1;
            aspect-ratio: 1;
            background: var(--color-bg-elevated);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        
        .product-gallery-main img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform var(--duration-normal) var(--ease-out);
        }
        
        .product-gallery-main:hover img {
            transform: scale(1.05);
        }
        
        /* Legacy support - mantieni per compatibilità */
        .product-detail-image { 
            width: 100%;
            aspect-ratio: 1;
            background: var(--color-bg-elevated); 
            display: flex; 
            align-items: center; 
            justify-content: center;
            overflow: hidden;
        }
        
        .product-detail-image img { 
            max-width: 100%; 
            max-height: 100%; 
            object-fit: contain; 
        }
        
        .product-detail-info { 
            display: flex; 
            flex-direction: column; 
            gap: var(--space-sm); 
        }
        
        .product-detail-category { 
            text-transform: uppercase; 
            font-size: 0.6875rem; 
            letter-spacing: 0.1em; 
            color: var(--color-text-muted); 
        }
        
        .product-detail-description { 
            color: var(--color-text-muted); 
            line-height: 1.5; 
            font-size: 0.875rem;
            /* Permetti scroll per contenuti lunghi (es. bundle con prodotti inclusi) */
            max-height: 180px;
            overflow-y: auto;
        }
        
        /* Custom scrollbar per product-description */
        .product-description::-webkit-scrollbar {
            width: 4px;
        }
        
        .product-description::-webkit-scrollbar-track {
            background: var(--color-bg-elevated);
            border-radius: 2px;
        }
        
        .product-description::-webkit-scrollbar-thumb {
            background: var(--color-border);
            border-radius: 2px;
            transition: background var(--duration-normal) var(--ease-out);
        }
        
        .product-description::-webkit-scrollbar-thumb:hover {
            background: var(--color-accent);
        }
        
        /* Firefox scrollbar */
        .product-description {
            scrollbar-width: thin;
            scrollbar-color: var(--color-border) var(--color-bg-elevated);
        }
        
        .product-detail-price { 
            font-family: var(--font-display); 
            font-size: 1.5rem; 
            color: var(--color-accent); 
            line-height: 1;
        }
        
        .product-detail-price .original-price { 
            text-decoration: line-through; 
            color: var(--color-text-muted); 
            font-size: 1rem; 
            margin-left: var(--space-sm); 
        }
        
        .product-detail-sizes { 
            display: flex; 
            gap: var(--space-xs); 
            flex-wrap: wrap; 
        }
        
        /* Size buttons compatti */
        .product-detail-sizes .size-option {
            width: 32px;
            height: 32px;
            font-size: 0.6875rem;
        }
        
        .product-detail-status { 
            font-size: 0.75rem; 
            border-radius: 2px; 
            display: block; 
            width: fit-content;
            text-align: left;
            padding: 0;
        }
        
        .product-detail-status .badge {
            margin: 0;
        }
        
        .product-detail-status.on-sale { 
            background: rgba(255, 92, 0, 0.2); 
            color: var(--color-accent); 
        }
        
        .product-detail-status.sold-out { 
            background: rgba(255,255,255,0.1); 
            color: var(--color-text-muted); 
        }
        
        .product-detail-actions { 
            display: flex; 
            gap: var(--space-sm); 
            align-items: center; 
            margin-top: var(--space-sm);
            flex-wrap: wrap;
        }
        
        /* Size select compatto */
        .product-detail-actions .form-select {
            height: 36px;
            padding: var(--space-xs) var(--space-md);
            padding-right: var(--space-xl);
            font-size: 0.875rem;
            min-width: 80px;
        }
        
        /* Button più compatto nel detail */
        .product-detail-actions .btn {
            padding: var(--space-xs) var(--space-md);
            font-size: 0.875rem;
            height: 36px;
            white-space: nowrap;
        }

        /* ===========================================
           REPORT FILTERS & SUMMARY
           =========================================== */
        .report-filters {
            margin-bottom: var(--space-xl);
            padding: var(--space-lg);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
        }
        
        .report-filter-header {
            margin-bottom: var(--space-md);
        }
        
        .report-filter-header h4 {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-family: var(--font-display);
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
            margin: 0;
        }
        
        .report-filter-header h4 .icon {
            color: var(--color-accent);
        }
        
        .report-period-tabs {
            margin-bottom: var(--space-md);
        }
        
        .custom-period {
            padding-top: var(--space-md);
            border-top: 1px solid var(--color-border);
        }
        
        .custom-period-inputs {
            display: flex;
            align-items: flex-end;
            gap: var(--space-md);
            flex-wrap: wrap;
        }
        
        .date-input-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }
        
        .date-input-group .form-label {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            margin: 0;
        }
        
        .date-input-group .form-input {
            width: 160px;
        }
        
        .date-separator {
            color: var(--color-text-muted);
            padding-bottom: var(--space-sm);
        }
        
        /* Report Summary Cards */
        .report-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
            gap: var(--space-md);
            margin-bottom: var(--space-xl);
        }
        
        .report-card {
            background: var(--color-bg-elevated);
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        
        .report-card:hover {
            border-color: var(--color-accent);
            box-shadow: 0 4px 20px rgba(255, 92, 0, 0.1);
        }
        
        .report-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .report-card-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
        }
        
        .report-card-icon .icon {
            width: 20px;
            height: 20px;
            color: var(--color-text-muted);
        }
        
        .report-card-trend {
            display: flex;
            align-items: center;
            gap: var(--space-2xs);
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .report-card-trend.up {
            color: #10b981;
        }
        
        .report-card-trend.down {
            color: #ef4444;
        }
        
        .report-card-value {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-accent);
            line-height: 1;
            letter-spacing: 0.02em;
        }
        
        .report-card-label {
            font-size: 0.8125rem;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        /* Report card variants */
        .report-card.highlight {
            border-color: var(--color-accent);
            background: linear-gradient(135deg, var(--color-bg-elevated) 0%, rgba(255, 92, 0, 0.05) 100%);
        }
        
        .report-card.highlight .report-card-icon {
            background: rgba(255, 92, 0, 0.1);
            border-color: var(--color-accent);
        }
        
        .report-card.highlight .report-card-icon .icon {
            color: var(--color-accent);
        }
        
        /* Status breakdown in report */
        .report-status-breakdown {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
            padding-top: var(--space-md);
            border-top: 1px solid var(--color-border);
            margin-top: var(--space-sm);
        }
        
        .report-status-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8125rem;
        }
        
        .report-status-label {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            color: var(--color-text-muted);
        }
        
        .report-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        
        .report-status-dot.pending { background: #f59e0b; }
        .report-status-dot.confirmed { background: #10b981; }
        .report-status-dot.processing { background: #3b82f6; }
        .report-status-dot.ready { background: #a855f7; }
        .report-status-dot.completed { background: #22c55e; }
        .report-status-dot.cancelled { background: #ef4444; }
        
        .report-status-count {
            font-weight: 600;
            color: var(--color-text);
        }
        
        /* Top Products Section */
        .report-card.top-products {
            grid-column: span 2;
        }
        
        .top-products-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            margin-top: var(--space-sm);
        }
        
        .top-product-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-sm) var(--space-md);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
        }
        
        .top-product-rank {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--color-text-muted);
        }
        
        .top-product-rank.gold {
            background: rgba(245, 158, 11, 0.1);
            border-color: #f59e0b;
            color: #f59e0b;
        }
        
        .top-product-rank.silver {
            background: rgba(156, 163, 175, 0.1);
            border-color: #9ca3af;
            color: #9ca3af;
        }
        
        .top-product-rank.bronze {
            background: rgba(180, 83, 9, 0.1);
            border-color: #b45309;
            color: #b45309;
        }
        
        .top-product-info {
            flex: 1;
            margin-left: var(--space-md);
        }
        
        .top-product-name {
            font-weight: 500;
            color: var(--color-text);
            font-size: 0.875rem;
        }
        
        .top-product-category {
            font-size: 0.75rem;
            color: var(--color-text-muted);
        }
        
        .top-product-stats {
            text-align: right;
        }
        
        .top-product-qty {
            font-family: var(--font-display);
            font-size: 1rem;
            color: var(--color-accent);
        }
        
        .top-product-revenue {
            font-size: 0.75rem;
            color: var(--color-text-muted);
        }
        
        /* Period badge */
        .report-period-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs) var(--space-sm);
            background: rgba(255, 92, 0, 0.1);
            border: 1px solid var(--color-accent);
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            color: var(--color-accent);
            margin-bottom: var(--space-md);
        }
        
        .report-period-badge .icon {
            width: 12px;
            height: 12px;
        }
        
        /* Loading state */
        .report-summary.loading .report-card {
            opacity: 0.5;
            pointer-events: none;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .report-card.top-products {
                grid-column: span 1;
            }
        }
        
        @media (max-width: 768px) {
            .report-filters {
                padding: var(--space-md);
            }
            
            .custom-period-inputs {
                flex-direction: column;
                align-items: stretch;
            }
            
            .date-input-group .form-input {
                width: 100%;
            }
            
            .date-separator {
                display: none;
            }
            
            .report-summary {
                grid-template-columns: 1fr;
            }
            
            .report-card.top-products {
                grid-column: span 1;
            }
        }

        /* ===========================================
           QUANTITY SELECTOR - COMPACT
           =========================================== */
        .quantity-selector { 
            display: flex; 
            align-items: center; 
            border: 1px solid var(--color-border); 
            height: 36px;
        }
        
        .qty-btn { 
            width: 32px; 
            height: 100%; 
            background: var(--color-bg-elevated); 
            border: none; 
            color: var(--color-text); 
            cursor: pointer; 
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
        }
        
        .qty-btn:hover { 
            background: var(--color-accent); 
            color: var(--color-bg); 
        }
        
        .qty-input { 
            width: 40px; 
            height: 100%; 
            background: var(--color-bg); 
            border: none; 
            border-left: 1px solid var(--color-border); 
            border-right: 1px solid var(--color-border); 
            color: var(--color-text); 
            text-align: center; 
            font-size: 0.875rem; 
        }
        
        .qty-input::-webkit-inner-spin-button { 
            -webkit-appearance: none; 
        }

        /* ===========================================
           CHECKOUT MODAL
           =========================================== */
        .checkout-summary { background: var(--color-bg-elevated); padding: 1.5rem; margin-bottom: 1.5rem; }
        
        /* Checkout skeleton loader */
        .checkout-skeleton {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }
        .checkout-skeleton .skeleton-item {
            height: 60px;
            background: linear-gradient(90deg, var(--color-bg-elevated) 25%, rgba(255,255,255,0.08) 50%, var(--color-bg-elevated) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite ease-in-out;
            border-radius: 4px;
            border-bottom: 1px solid var(--color-border);
        }
        .checkout-skeleton .skeleton-divider {
            height: 2px;
            background: var(--color-accent);
            opacity: 0.3;
            margin: var(--space-sm) 0;
        }
        .checkout-skeleton .skeleton-total {
            height: 36px;
            background: linear-gradient(90deg, var(--color-bg-elevated) 25%, rgba(255,255,255,0.08) 50%, var(--color-bg-elevated) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite ease-in-out;
            border-radius: 4px;
        }
        
        .checkout-item { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
        .checkout-item:last-child { border-bottom: none; }
        .checkout-item-name { font-weight: 500; }
        .checkout-item-details { font-size: 0.875rem; color: var(--color-text-muted); }
        .checkout-total { display: flex; justify-content: space-between; padding-top: 1rem; margin-top: 1rem; border-top: 2px solid var(--color-accent); font-size: 1.25rem; font-weight: 700; }
        .checkout-total-amount { font-family: var(--font-display); color: var(--color-accent); }
        .checkout-info { margin-top: 1.5rem; }
        .info-card { display: flex; gap: 1rem; padding: 1rem; background: var(--color-bg-elevated); align-items: flex-start; }
        .info-card i { color: var(--color-accent); flex-shrink: 0; }
        .info-card strong { display: block; margin-bottom: 0.25rem; }
        .info-card p { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; }

        /* ===========================================
           ORDERS MANAGEMENT SECTION
           =========================================== */
        .orders-management { padding: var(--space-lg); } /* Ridotto da 48px a 24px per tablet */
        
        /* Media query iPad: padding ancora più ridotto */
        @media (min-width: 769px) and (max-width: 1024px) {
            .orders-management {
                padding: var(--space-md) var(--space-lg); /* 16px vertical, 24px horizontal */
            }
            
            .product-summary-section {
                padding: var(--space-lg); /* 24px su tutti i lati */
            }
            
            /* KPI Stats: 4 → 2 colonne (ogni stat ~350-370px invece di ~150px) */
            .orders-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-md);
            }
            
            /* Orders List: minmax più compatto per 2 colonne */
            .orders-list {
                grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
                gap: var(--space-md);
            }
            
            /* Product Grid: minmax più compatto per 2-3 colonne */
            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
                gap: var(--space-md);
            }
            
            /* Report Summary: 2 colonne */
            .report-summary {
                grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
                gap: var(--space-md);
            }
            
            /* Tabs: scroll orizzontale con snap per UX touch */
            .filter-tabs,
            .report-period-tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin; /* Firefox */
                scroll-snap-type: x mandatory;
                scroll-padding: var(--space-md);
            }
            
            .filter-tab {
                flex-shrink: 0; /* Non comprimere tabs */
                scroll-snap-align: start;
            }
            
            .filter-tab.active {
                scroll-snap-align: center; /* Active tab al centro */
            }
            
            /* Scrollbar sottile e visibile su hover */
            .filter-tabs::-webkit-scrollbar,
            .report-period-tabs::-webkit-scrollbar {
                height: 6px;
            }
            
            .filter-tabs::-webkit-scrollbar-thumb,
            .report-period-tabs::-webkit-scrollbar-thumb {
                background: var(--color-border);
                border-radius: 3px;
            }
            
            .filter-tabs::-webkit-scrollbar-thumb:hover,
            .report-period-tabs::-webkit-scrollbar-thumb:hover {
                background: var(--color-text-muted);
            }
        }
        .orders-header { display: flex; align-items: center; gap: var(--space-xl); margin-bottom: var(--space-lg); }
        
        /* Title row con titolo e ricavi */
        .orders-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-xl);
            margin-bottom: var(--space-2xl);
            flex-wrap: wrap;
        }
        .orders-title-row h2 {
            font-family: var(--font-display);
            font-size: 2.5rem;
            letter-spacing: 0.05em;
            margin: 0;
        }
        
        /* Revenue text display */
        .orders-revenue {
            display: flex;
            align-items: baseline;
            gap: var(--space-md);
        }
        .revenue-label {
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
        }
        .revenue-value {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--color-accent);
            letter-spacing: 0.02em;
        }
        
        .orders-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); margin-bottom: var(--space-2xl); }
        
        /* Stat Card - Enhanced Style */
        .stat-card { 
            background: var(--color-bg-card); 
            border: 1px solid var(--color-border); 
            padding: var(--space-xl);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: var(--space-lg);
            /* Text overflow handling */
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }
        
        .stat-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            flex-shrink: 0;
        }
        .stat-icon .icon {
            width: 22px;
            height: 22px;
            color: var(--color-text-muted);
        }
        
        .stat-card > .stat-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-xs);
        }
        .stat-value { 
            font-family: var(--font-display); 
            font-size: 2rem; 
            line-height: 1;
            letter-spacing: 0.02em;
            color: var(--color-text);
        }
        .stat-label { 
            font-size: 0.75rem; 
            color: var(--color-text-muted); 
            text-transform: uppercase; 
            letter-spacing: 0.08em;
        }
        
        .stat-card.highlight { border-color: var(--color-accent); }
        .orders-filters { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-2xl); flex-wrap: wrap; }
        .filter-tabs { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
        .filter-tab { 
            padding: var(--space-sm) var(--space-lg); 
            font-size: 0.875rem; 
            background: transparent; 
            border: 1px solid var(--color-border); 
            color: var(--color-text-muted); 
            cursor: pointer; 
            transition: all 0.2s;
            white-space: nowrap;
            min-height: 44px; /* Apple HIG touch target */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .filter-tab:hover { border-color: var(--color-text-muted); color: var(--color-text); }
        .filter-tab.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
        
        /* Focus state per accessibilità */
        .filter-tab:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            scroll-margin: var(--space-md);
        }

        /* ===========================================
           ORDER CARD - New Layout
           =========================================== */
        .order-card {
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            padding: var(--space-lg);
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .order-card:hover {
            border-color: var(--color-accent);
            box-shadow: 0 4px 20px rgba(255, 92, 0, 0.1);
        }

        /* Order Card Header: Number + Date on left, Badge on right */
        .order-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: var(--space-md);
        }
        .order-card-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
        }
        .order-number {
            font-family: var(--font-display);
            font-size: 1.125rem;
            letter-spacing: 0.05em;
            color: var(--color-text);
        }
        .order-date {
            font-size: 0.8125rem;
            color: var(--color-text-muted);
        }

        /* Order Card Customer */
        .order-card-customer {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: 0.9375rem;
            color: var(--color-text);
        }
        .order-card-customer .icon {
            color: var(--color-text-muted);
            flex-shrink: 0;
        }
        .order-customer { font-weight: 500; }
        .order-email { font-size: 0.875rem; color: var(--color-text-muted); }

        /* Order Card Items */
        .order-card-items {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) 0;
            font-size: 0.8125rem;
            color: var(--color-text-muted);
        }
        .order-item-badge {
            color: var(--color-text-muted);
        }
        .order-item-badge:not(:last-of-type)::after {
            content: ',';
            margin-right: var(--space-2xs);
        }
        .order-item-more {
            font-size: 0.8125rem;
            color: var(--color-text-muted);
            font-style: italic;
        }
        .order-items-count { font-size: 0.875rem; color: var(--color-text-muted); }

        /* Order Card Footer */
        .order-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: var(--space-md);
            border-top: 1px solid var(--color-border);
            margin-top: var(--space-xs);
        }
        .order-total {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--color-accent);
            letter-spacing: 0.02em;
        }

        /* Order Status Badges */
        .order-status-badge { padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; }
        .order-status-badge.pending { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
        .order-status-badge.confirmed { background: rgba(34, 197, 94, 0.2); color: #10b981; }
        .order-status-badge.processing { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
        .order-status-badge.ready { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
        .order-status-badge.completed { background: rgba(34, 197, 94, 0.3); color: #10b981; }
        .order-status-badge.cancelled { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

        /* Desktop: Card grid layout for order cards */
        .orders-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
            gap: var(--space-lg);
        }

        .order-card {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            /* Text overflow handling */
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }

        /* ===========================================
           ORDER DETAIL MODAL - Compact Layout
           =========================================== */
        #modal-order-detail .modal {
            max-width: 700px;
            max-height: 90vh;
            overflow: hidden;
        }

        #modal-order-detail .modal-body {
            padding: var(--space-md);
            overflow-y: auto;
            max-height: calc(90vh - 140px); /* Altezza modal meno header e footer */
        }
        
        /* Custom scrollbar per order detail modal */
        #modal-order-detail .modal-body::-webkit-scrollbar {
            width: 6px;
        }
        
        #modal-order-detail .modal-body::-webkit-scrollbar-track {
            background: var(--color-bg-elevated);
            border-radius: 3px;
        }
        
        #modal-order-detail .modal-body::-webkit-scrollbar-thumb {
            background: var(--color-border);
            border-radius: 3px;
            transition: background var(--duration-normal) var(--ease-out);
        }
        
        #modal-order-detail .modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--color-accent);
        }
        
        /* Firefox scrollbar */
        #modal-order-detail .modal-body {
            scrollbar-width: thin;
            scrollbar-color: var(--color-border) var(--color-bg-elevated);
        }

        .order-detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-sm);
        }

        /* Le note occupano tutta la larghezza sulla seconda riga */
        .order-info-section:nth-child(3),
        .order-info-section:nth-child(4) {
            grid-column: span 1;
        }

        .order-info-section {
            background: var(--color-bg-elevated);
            padding: var(--space-md);
            border: 1px solid var(--color-border);
        }

        /* Rimosso il bordo arancione laterale */

        .order-info-section h4 {
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: var(--space-sm);
            color: var(--color-text-muted);
        }

        /* Customer Info Styling - Compact */
        .order-customer-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .order-customer-info p {
            margin: 0;
            font-size: 0.8125rem;
            line-height: 1.4;
        }

        .order-customer-info p strong {
            color: var(--color-text-muted);
            font-weight: 500;
        }

        /* Order Items List Styling - Compact */
        .order-items-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
        }

        .order-detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-xs) var(--space-sm);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            font-size: 0.8125rem;
        }

        .order-detail-item .item-name {
            font-weight: 500;
            color: var(--color-text);
            flex: 1;
        }

        .order-detail-item .item-size {
            color: var(--color-text-muted);
            font-size: 0.75rem;
        }

        .order-detail-item .item-qty {
            color: var(--color-text-muted);
        }

        .order-detail-item .item-price {
            font-family: var(--font-display);
            font-size: 0.9375rem;
            color: var(--color-accent);
        }

        /* Legacy support for order-item-row */
        .order-item-row {
            display: flex;
            justify-content: space-between;
            padding: var(--space-md) 0;
            border-bottom: 1px solid var(--color-border);
        }

        .order-item-row:last-child {
            border-bottom: none;
        }

        /* Order Total Section - Compact */
        .order-total-section {
            margin-top: var(--space-sm);
            padding-top: var(--space-sm);
            border-top: 1px solid var(--color-border);
            text-align: right;
            font-size: 1rem;
        }

        .order-total-section strong {
            color: var(--color-text);
        }

        .order-total-section span {
            font-family: var(--font-display);
            font-size: 1.25rem;
            color: var(--color-accent);
        }

        /* Customer/Admin Notes - Compact */
        .order-info-section .text-muted {
            color: var(--color-text-muted);
            font-style: italic;
            font-size: 0.8125rem;
            margin: 0;
        }

        .order-info-section .form-textarea {
            width: 100%;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            color: var(--color-text);
            padding: var(--space-sm);
            font-size: 0.8125rem;
            resize: none;
            min-height: 50px;
            max-height: 60px;
            transition: border-color 0.2s ease;
        }

        .order-info-section .form-textarea:focus {
            outline: none;
            border-color: var(--color-accent);
        }

        .order-info-section .form-textarea::placeholder {
            color: var(--color-text-muted);
        }

        /* Order Status Actions in Footer */
        .order-status-actions {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .order-status-actions .form-label {
            margin: 0;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-muted);
            white-space: nowrap;
        }

        .order-status-actions .form-select {
            min-width: 140px;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            color: var(--color-text);
            padding: var(--space-xs) var(--space-sm);
            font-size: 0.8125rem;
            cursor: pointer;
            height: 36px;
        }

        .order-status-actions .form-select:focus {
            outline: none;
            border-color: var(--color-accent);
        }

        /* Modal footer per order detail - Bottoni allineati */
        #modal-order-detail .modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-sm);
            padding: var(--space-md);
            background: var(--color-bg-elevated);
            border-top: 1px solid var(--color-border);
        }

        #modal-order-detail .modal-footer .order-status-actions {
            margin-right: auto;
        }

        #modal-order-detail .modal-footer .btn {
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 var(--space-md);
            font-size: 0.8125rem;
        }

        /* ===========================================
           MY ORDERS SECTION (USER)
           =========================================== */
        .my-orders-section { background: var(--color-bg-card); border: 1px solid var(--color-border); padding: 1.5rem; margin-bottom: 2rem; }
        .my-orders-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
        .my-orders-section h3 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.05em; }
        .my-orders-list { display: flex; flex-direction: column; gap: 1rem; }
        .my-order-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); }
        .my-order-header { display: flex; justify-content: space-between; align-items: center; }
        .my-order-info { display: flex; flex-direction: column; gap: 0.25rem; }
        .my-order-number { font-family: var(--font-display); letter-spacing: 0.05em; display: flex; flex-direction: column; gap: 0.25rem; }
        .my-order-date { font-size: 0.875rem; color: var(--color-text-muted); }
        .my-order-items { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; color: var(--color-text-muted); }
        .my-order-item { display: flex; justify-content: space-between; padding: 0.25rem 0; }
        .my-order-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
        .my-order-total { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-accent); }

        /* ===========================================
           BUNDLE PRODUCTS LIST
           =========================================== */
        .bundle-products-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 200px; overflow-y: auto; padding: 1rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); }
        
        /* Bundle Products Section - Stile professionale nel modal */
        .bundle-products-section {
            margin-top: var(--space-md);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            overflow: hidden;
        }
        
        .bundle-products-header {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-md);
            background: var(--color-bg-elevated);
            border-bottom: 1px solid var(--color-border);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
        }
        
        .bundle-products-header .icon {
            color: var(--color-accent);
        }
        
        .bundle-products-items {
            display: flex;
            flex-direction: column;
        }
        
        .bundle-product-row {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--color-border);
            transition: background 0.15s ease;
        }
        
        .bundle-product-row:last-child {
            border-bottom: none;
        }
        
        .bundle-product-row:hover {
            background: var(--color-bg-elevated);
        }
        
        .bundle-product-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .bundle-product-name {
            flex: 1;
            font-size: 0.875rem;
            color: var(--color-text);
        }
        
        .bundle-product-price {
            font-family: var(--font-display);
            font-size: 0.875rem;
            color: var(--color-text-muted);
            letter-spacing: 0.02em;
        }
        
        .bundle-savings {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            margin-top: var(--space-md);
            padding: var(--space-sm) var(--space-md);
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #22c55e;
            font-size: 0.875rem;
        }
        
        .bundle-savings .icon {
            flex-shrink: 0;
        }
        
        .bundle-savings strong {
            font-family: var(--font-display);
            letter-spacing: 0.02em;
        }
        .bundle-product-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; }
        .bundle-product-item:hover { background: var(--color-bg-card); }

        /* ===========================================
           PRODUCT BADGE UPDATES
           =========================================== */
        .product-badge.on-sale, .product-badge.sale { background: var(--color-accent); color: var(--color-bg); }
        .product-badge.bundle { background: var(--color-primary); color: white; }
        .product-price-original { text-decoration: line-through; color: var(--color-text-muted); font-size: 0.875rem; margin-left: 0.5rem; }

        /* Bundle Card Styling */
        .bundle-card { border: 2px solid var(--color-primary); }
        .bundle-card:hover { border-color: var(--color-accent); }

        /* Bundle Image Grid */
        .bundle-image-grid {
            width: 100%;
            height: 100%;
            display: grid;
            gap: 2px;
            padding: 4px;
        }

        .bundle-grid-2 {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
        }

        .bundle-grid-3 {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }

        .bundle-grid-3 .bundle-image-item:first-child {
            grid-row: 1 / 3;
        }

        .bundle-grid-4 {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }

        .bundle-image-item {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: var(--color-bg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bundle-image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ===========================================
           CUSTOM FILE INPUT
           =========================================== */
        .file-upload-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 140px;
            padding: var(--space-lg);
            background: var(--color-bg);
            border: 2px dashed var(--color-border);
            cursor: pointer;
            transition: border-color var(--duration-fast) var(--ease-out),
                        background-color var(--duration-fast) var(--ease-out);
        }

        .file-upload-wrapper:hover {
            border-color: var(--color-accent);
            background: var(--color-bg-elevated);
        }

        .file-upload-wrapper.dragover {
            border-color: var(--color-accent);
            background: var(--color-bg-elevated);
        }

        .file-upload-wrapper input[type="file"] {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .file-upload-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-sm);
            pointer-events: none;
        }

        .file-upload-icon {
            width: 40px;
            height: 40px;
            color: var(--color-text-muted);
            transition: color var(--duration-fast) var(--ease-out);
        }

        .file-upload-wrapper:hover .file-upload-icon {
            color: var(--color-accent);
        }

        .file-upload-text {
            font-family: var(--font-body);
            font-size: 0.875rem;
            color: var(--color-text-muted);
            text-align: center;
        }

        .file-upload-text strong {
            color: var(--color-accent);
            font-weight: 600;
        }

        .file-upload-hint {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            opacity: 0.7;
        }

        .file-upload-preview {
            display: none;
            align-items: center;
            gap: var(--space-md);
            width: 100%;
        }

        .file-upload-preview.has-file {
            display: flex;
        }

        .file-upload-preview img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border: 1px solid var(--color-border);
        }

        .file-upload-filename {
            flex: 1;
            font-size: 0.875rem;
            color: var(--color-text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-upload-remove {
            background: transparent;
            border: 1px solid var(--color-border);
            color: var(--color-text-muted);
            padding: var(--space-xs) var(--space-sm);
            font-size: 0.75rem;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }

        .file-upload-remove:hover {
            border-color: #ef4444;
            color: #ef4444;
        }

        /* File Upload Preview Grid - Multiple Images */
        .file-upload-preview-grid {
            display: none;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: var(--space-md);
            width: 100%;
            margin-top: var(--space-md);
        }

        .file-upload-preview-grid.has-files {
            display: grid;
        }

        .file-preview-item {
            position: relative;
            aspect-ratio: 1;
            border: 1px solid var(--color-border);
            overflow: hidden;
            background: var(--color-bg-elevated);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .file-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .file-preview-item .primary-badge {
            position: absolute;
            top: var(--space-xs);
            left: var(--space-xs);
            background: var(--color-accent);
            color: var(--color-bg);
            font-size: 0.625rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 2px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .file-preview-item .file-preview-actions {
            position: absolute;
            top: var(--space-xs);
            right: var(--space-xs);
            display: flex;
            gap: var(--space-2xs);
            opacity: 0;
            transition: opacity var(--duration-fast) var(--ease-out);
        }

        .file-preview-item:hover .file-preview-actions {
            opacity: 1;
        }

        .file-preview-item .file-preview-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 10, 10, 0.9);
            border: 1px solid var(--color-border);
            color: var(--color-text);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            padding: 0;
        }

        .file-preview-item .file-preview-btn:hover {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: var(--color-bg);
        }

        .file-preview-item .file-preview-btn.btn-delete:hover {
            background: #ef4444;
            border-color: #ef4444;
        }

        .file-preview-item .file-preview-btn svg {
            width: 14px;
            height: 14px;
        }

        .file-preview-item .file-preview-order {
            position: absolute;
            bottom: var(--space-xs);
            left: var(--space-xs);
            display: flex;
            gap: var(--space-2xs);
        }

        .file-preview-item .file-preview-order-btn {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 10, 10, 0.9);
            border: 1px solid var(--color-border);
            color: var(--color-text-muted);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            padding: 0;
        }

        .file-preview-item .file-preview-order-btn:hover {
            background: var(--color-bg);
            color: var(--color-text);
            border-color: var(--color-accent);
        }

        .file-preview-item .file-preview-order-btn svg {
            width: 12px;
            height: 12px;
        }

        .file-preview-item .file-preview-order-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        @media (max-width: 768px) {
            .file-upload-preview-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: var(--space-sm);
            }
            
            .file-preview-item .file-preview-actions {
                opacity: 1; /* Always visible on mobile */
            }
        }

        /* ===========================================
           CUSTOM CHECKBOX - SIZE CHIPS
           =========================================== */
        .form-checkbox {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
        }

        .form-checkbox input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        .form-checkbox .checkbox-mark {
            display: none;
        }

        .form-checkbox span:last-child {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            height: 44px;
            padding: 0 var(--space-md);
            font-family: var(--font-body);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-text);
            background: transparent;
            border: 1px solid var(--color-border);
            transition: all var(--duration-fast) var(--ease-out);
        }

        .form-checkbox:hover span:last-child {
            border-color: var(--color-accent);
        }

        .form-checkbox input[type="checkbox"]:checked + .checkbox-mark + span,
        .form-checkbox input[type="checkbox"]:checked ~ span:last-child {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: var(--color-bg);
        }

        .form-checkbox input[type="checkbox"]:focus-visible ~ span:last-child {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        /* Sizes checkbox container - prevent overflow in modal */
        #modal-add-product .flex.gap-sm.flex-wrap {
            max-width: 100%;
            overflow-x: hidden;
            gap: 6px;
        }

        /* Sizes checkbox items - compact sizing for modal */
        #modal-add-product .form-checkbox {
            flex: 0 0 auto;
        }

        #modal-add-product .form-checkbox span:last-child {
            min-width: 34px;
            height: 34px;
            padding: 0 8px;
            font-size: 0.75rem;
        }

        /* ===========================================
           MOBILE RESPONSIVE
           =========================================== */
        @media (max-width: 768px) {
            .cart-sidebar { width: 100%; }
            /* Nasconde il carrello flottante desktop su mobile */
            .cart-floating-btn { display: none !important; }
            
            /* Mostra il carrello mobile floating (a sinistra) */
            .cart-mobile-btn { display: flex !important; }
            
            /* Product detail modal - mobile single column */
            .product-detail-grid { 
                grid-template-columns: 1fr; 
                gap: var(--space-md);
            }
            
            .product-detail-image {
                max-height: 200px;
            }
            
            #modal-product-detail .modal-body {
                padding: var(--space-sm);
            }
            
            .product-detail-info {
                gap: var(--space-xs);
            }
            
            .product-detail-actions {
                flex-direction: column;
                align-items: stretch;
                gap: var(--space-xs);
            }
            
            .product-detail-actions .quantity-selector,
            .product-detail-actions .form-select,
            .product-detail-actions .btn {
                width: 100%;
            }
            
            .product-detail-actions .quantity-selector {
                justify-content: center;
            }
            
            .product-detail-price {
                font-size: 1.25rem;
            }
            
            .product-detail-description {
                /* Rimuovere line-clamp su mobile per vedere prodotti bundle */
                -webkit-line-clamp: unset;
                line-clamp: unset;
                max-height: 150px;
            }
            
            /* Order detail modal mobile - permetti scroll */
            #modal-order-detail .modal-body {
                max-height: calc(100vh - 180px);
                overflow-y: auto;
            }
            
            /* Order detail modal mobile */
            .order-detail-grid {
                grid-template-columns: 1fr;
                gap: var(--space-xs);
            }

            .order-info-section {
                padding: var(--space-sm);
            }

            /* Orders list single column on mobile */
            .orders-list {
                grid-template-columns: 1fr;
                gap: var(--space-sm);
            }
            
            /* Product grid single column */
            .product-grid {
                grid-template-columns: 1fr;
                gap: var(--space-sm);
            }
            
            /* Orders stats: 2 colonne su mobile medio */
            .orders-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-sm);
            }
            
            /* Report summary: 1 colonna */
            .report-summary {
                grid-template-columns: 1fr;
                gap: var(--space-sm);
            }

            /* Footer compact on mobile */
            #modal-order-detail .modal-footer {
                flex-wrap: wrap;
                gap: var(--space-xs);
            }

            #modal-order-detail .modal-footer .order-status-actions {
                width: 100%;
                margin-right: 0;
                margin-bottom: var(--space-xs);
            }

            .order-status-actions .form-select {
                flex: 1;
                min-width: unset;
            }

            #modal-order-detail .modal-footer .btn {
                flex: 1;
            }

            .orders-filters { flex-direction: column; align-items: stretch; }
            
            .filter-tabs,
            .report-period-tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 0.5rem;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
                scroll-padding: var(--space-md);
            }
            
            .filter-tab {
                flex-shrink: 0;
                padding: var(--space-md) var(--space-lg); /* Aumenta hit area touch */
                scroll-snap-align: start;
            }
            
            .filter-tab.active {
                scroll-snap-align: center;
            }
            
            /* Orders management responsive */
            .orders-title-row { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
            /* Orders stats già fixato sopra - 2 colonne */
            .orders-revenue { flex-direction: column; gap: var(--space-xs); }
            .revenue-value { font-size: 1.5rem; }

            .file-upload-wrapper {
                min-height: 120px;
                padding: var(--space-md);
            }

            .form-checkbox span:last-child {
                min-width: 40px;
                height: 40px;
                font-size: 0.8125rem;
            }
            
            /* Product gallery responsive */
            .product-detail-grid {
                grid-template-columns: 1fr;
                gap: var(--space-lg);
            }
            
            .product-gallery {
                flex-direction: column-reverse;
            }
            
            .product-gallery-thumbnails {
                flex-direction: row;
                width: 100%;
                overflow-x: auto;
            }
            
            .product-gallery-thumbnail {
                width: 60px;
                height: 60px;
                flex-shrink: 0;
            }
        }
        
        @media (max-width: 480px) {
            /* Tutte le griglie → 1 colonna su schermi molto stretti */
            .orders-stats,
            .orders-list,
            .product-grid,
            .report-summary {
                grid-template-columns: 1fr;
                gap: var(--space-sm);
            }
            
            /* Stat card padding ridotto */
            .stat-card {
                padding: var(--space-md);
            }
            
            /* Order/Product card padding ridotto */
            .order-card,
            .product-card {
                padding: var(--space-sm);
            }
            
            .filter-tabs,
            .report-period-tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
                gap: var(--space-xs); /* Gap ridotto per schermo stretto */
                scroll-snap-type: x mandatory;
                scroll-padding: var(--space-sm);
            }
            
            .filter-tab {
                padding: var(--space-sm) var(--space-md); /* Più compatto */
                font-size: 0.875rem; /* 14px */
                flex-shrink: 0;
                scroll-snap-align: start;
            }
            
            .filter-tab.active {
                scroll-snap-align: center;
            }
        }
        
        /* Tablet breakpoint per product detail */
        @media (max-width: 900px) and (min-width: 769px) {
            .product-detail-grid {
                grid-template-columns: minmax(180px, 220px) 1fr;
                gap: var(--space-md);
            }
            
            .product-detail-image {
                max-height: 220px;
            }
        }

        /* Product Edit Button */
        .product-edit-btn {
            position: absolute;
            top: var(--space-sm);
            right: var(--space-sm);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(10, 10, 10, 0.8);
            border: 1px solid var(--color-border);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: all 0.2s var(--ease-out);
            z-index: 10;
        }
        .product-edit-btn:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }
        .product-edit-btn svg {
            width: 16px;
            height: 16px;
            color: var(--color-text);
            stroke: var(--color-text);
        }

        /* ===========================================
           COUPON SYSTEM STYLES
           =========================================== */
        
        /* Coupon Section in Checkout */
        .coupon-section {
            margin: var(--space-lg) 0;
            padding: var(--space-lg);
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
        }
        
        .coupon-section .form-label {
            margin-bottom: var(--space-sm);
        }
        
        .coupon-input-wrapper {
            display: flex;
            gap: var(--space-sm);
        }
        
        .coupon-input-wrapper .form-input {
            flex: 1;
            text-transform: uppercase;
        }
        
        .coupon-input-wrapper .btn {
            flex-shrink: 0;
        }
        
        .coupon-feedback {
            margin-top: var(--space-sm);
            min-height: 24px;
        }
        
        .coupon-applied {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: var(--radius-sm);
            color: #22c55e;
            font-size: 0.875rem;
        }
        
        .coupon-applied .coupon-remove-btn {
            margin-left: auto;
            background: none;
            border: none;
            color: #22c55e;
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
            transition: opacity 0.15s;
        }
        
        .coupon-applied .coupon-remove-btn:hover {
            opacity: 1;
        }
        
        .coupon-error {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: var(--radius-sm);
            color: #ef4444;
            font-size: 0.875rem;
        }
        
        .coupon-loading {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            color: var(--color-text-muted);
            font-size: 0.875rem;
        }
        
        .coupon-loading .spin {
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Checkout Summary with Coupon */
        .checkout-subtotal {
            display: flex;
            justify-content: space-between;
            padding: var(--space-md) 0;
            border-top: 1px solid var(--color-border);
            color: var(--color-text-muted);
            font-size: 0.9375rem;
        }
        
        .checkout-discount {
            display: flex;
            justify-content: space-between;
            padding: var(--space-sm) 0;
            color: #22c55e;
            font-size: 0.9375rem;
        }
        
        .checkout-discount-amount {
            font-weight: 600;
        }
        
        /* ===========================================
           COUPON MANAGEMENT MODAL
           =========================================== */
        
        #modal-manage-coupons .modal-body {
            padding: 0;
        }
        
        /* Coupon Tabs */
        .coupon-tabs {
            display: flex;
            border-bottom: 1px solid var(--color-border);
            background: var(--color-bg-elevated);
        }
        
        .coupon-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xs);
            padding: var(--space-md) var(--space-lg);
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--color-text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .coupon-tab:hover {
            color: var(--color-text);
            background: rgba(255, 255, 255, 0.03);
        }
        
        .coupon-tab.active {
            color: var(--color-accent);
            border-bottom-color: var(--color-accent);
            background: transparent;
        }
        
        .coupon-tab-content {
            display: none;
            padding: var(--space-lg);
        }
        
        .coupon-tab-content.active {
            display: block;
        }
        
        /* Coupons List */
        .coupons-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            max-height: 400px;
            overflow-y: auto;
        }
        
        /* Coupon Card */
        .coupon-card {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            overflow: visible;
            transition: border-color 0.15s ease;
        }
        
        .coupon-card:hover {
            border-color: var(--color-accent);
        }
        
        .coupon-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-lg);
            background: var(--color-bg);
            border-bottom: 1px solid var(--color-border);
        }
        
        .coupon-code-badge {
            font-family: var(--font-mono, monospace);
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--color-accent);
            letter-spacing: 0.08em;
            background: rgba(255, 92, 0, 0.15);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-sm);
        }
        
        /* Coupon Badge Status */
        .coupon-badge {
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        
        .coupon-badge.active {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
        }
        
        .coupon-badge.inactive {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .coupon-badge.expired {
            background: rgba(156, 163, 175, 0.1);
            color: #9ca3af;
        }
        
        .coupon-badge.scheduled {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }
        
        .coupon-badge.exhausted {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }
        
        .coupon-card-body {
            padding: var(--space-lg);
            display: flex;
            gap: var(--space-xl);
            align-items: flex-start;
        }
        
        .coupon-discount {
            text-align: center;
            min-width: 100px;
            padding: var(--space-md);
            background: rgba(255, 92, 0, 0.05);
            border-radius: var(--radius-sm);
        }
        
        .coupon-discount-value {
            display: block;
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--color-accent);
            line-height: 1;
            margin-bottom: var(--space-xs);
        }
        
        .coupon-discount-label {
            display: block;
            font-size: 0.75rem;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .coupon-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }
        
        .coupon-detail {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: 0.875rem;
            color: var(--color-text);
        }
        
        .coupon-detail .icon {
            color: var(--color-text-muted);
            flex-shrink: 0;
        }
        
        .coupon-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-lg);
            border-top: 1px solid var(--color-border);
            background: var(--color-bg);
            gap: var(--space-md);
        }
        
        /* Coupon Toggle Switch */
        .coupon-toggle {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            cursor: pointer;
            user-select: none;
        }
        
        .coupon-toggle input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        .coupon-toggle-slider {
            width: 48px;
            height: 26px;
            background: var(--color-bg-elevated);
            border: 2px solid var(--color-border);
            border-radius: 13px;
            position: relative;
            transition: all 0.25s ease;
            flex-shrink: 0;
        }
        
        .coupon-toggle-slider::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            background: var(--color-text-muted);
            border-radius: 50%;
            transition: all 0.25s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .coupon-toggle input:checked + .coupon-toggle-slider {
            background: rgba(34, 197, 94, 0.2);
            border-color: #22c55e;
        }
        
        .coupon-toggle input:checked + .coupon-toggle-slider::after {
            left: 24px;
            background: #22c55e;
        }
        
        .coupon-toggle-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--color-text);
        }
        
        /* Delete button */
        .btn-danger {
            background: #ef4444;
            border: 1px solid #ef4444;
            color: white;
            padding: var(--space-sm) var(--space-md);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xs);
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .btn-danger:hover {
            background: #dc2626;
            border-color: #dc2626;
        }
        
        .btn-danger-outline {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: #ef4444;
            padding: var(--space-sm) var(--space-md);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xs);
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .btn-danger-outline:hover {
            background: rgba(239, 68, 68, 0.15);
            border-color: #ef4444;
        }
        
        /* Coupon Form */
        #form-create-coupon .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-md);
        }
        
        #form-create-coupon .form-group {
            margin-bottom: var(--space-md);
        }
        
        /* ===========================================
           RESPONSIVE COUPON STYLES
           =========================================== */
        
        @media (max-width: 768px) {
            .coupon-input-wrapper {
                flex-direction: column;
            }
            
            .coupon-input-wrapper .btn {
                width: 100%;
            }
            
            .coupon-card-body {
                flex-direction: column;
                gap: var(--space-md);
            }
            
            .coupon-discount {
                width: 100%;
                display: flex;
                align-items: center;
                gap: var(--space-sm);
            }
            
            .coupon-discount-label {
                margin-top: 0;
            }
            
            #form-create-coupon .form-row {
                grid-template-columns: 1fr;
            }
            
            .coupons-list {
                max-height: 300px;
            }
        }

        /* ===========================================
           ORDER TYPE SECTION
           =========================================== */
        
        .order-type-section {
            padding: var(--space-xl);
            background: var(--color-bg-elevated);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-xl);
        }
        
        .divider {
            height: 1px;
            background: var(--color-border);
            margin: var(--space-xl) 0;
        }
        
        /* Order Badge */
        .order-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: 4px 10px;
            background: rgba(255, 92, 0, 0.1);
            border: 1px solid rgba(255, 92, 0, 0.3);
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 600;
            color: var(--color-accent);
        }
        
        .order-badge .icon {
            width: 14px;
            height: 14px;
        }
        
        /* Badge for orders made by representative */
        .order-badge-rep {
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
            color: #3b82f6;
        }

        /* ===========================================
           PRODUCT SUMMARY & CLASS MANAGEMENT SECTIONS
           =========================================== */
        
        .product-summary-section,
        .class-management-section {
            padding: var(--space-2xl) 0;
        }
        
        #product-summary-section,
        #class-management-section {
            padding: var(--space-2xl);
        }
        
        .section-header-with-back {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
            margin-bottom: var(--space-2xl);
        }
        
        .section-header-with-back h2 {
            font-family: var(--font-display);
            font-size: 2rem;
            letter-spacing: 0.02em;
            margin: 0;
        }
        
        /* Loading States */
        .summary-loading,
        .class-loading {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
        }
        
        .class-loading .skeleton,
        .summary-loading .skeleton {
            background: linear-gradient(90deg, var(--color-bg-elevated) 25%, rgba(255,255,255,0.08) 50%, var(--color-bg-elevated) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite ease-in-out;
            border-radius: 4px;
        }
        
        @keyframes skeleton-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .skeleton-hidden {
            display: none;
        }
        
        /* Card Styling */
        .card {
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: var(--space-xl);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-xl);
            border-bottom: 1px solid var(--color-border);
        }
        
        .card-header h3 {
            font-family: var(--font-display);
            font-size: 1.25rem;
            letter-spacing: 0.02em;
            margin: 0;
        }
        
        .card-actions {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }
        
        .card-body {
            padding: var(--space-xl);
        }
        
        /* Table Styling */
        .table-container {
            overflow-x: auto;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }
        
        .data-table thead {
            background: var(--color-bg-elevated);
            border-bottom: 1px solid var(--color-border);
        }
        
        .data-table th {
            padding: var(--space-md) var(--space-lg);
            text-align: left;
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-muted);
        }
        
        .data-table td {
            padding: var(--space-md) var(--space-lg);
            border-bottom: 1px solid var(--color-border);
        }
        
        .data-table tbody tr {
            transition: background var(--duration-fast) var(--ease-out);
        }
        
        .data-table tbody tr:hover {
            background: var(--color-bg-elevated);
        }
        
        .data-table tbody tr:last-child td {
            border-bottom: none;
        }
        
        /* Number highlighting */
        .number-warning {
            color: #f59e0b;
            font-weight: 600;
        }
        
        .number-positive {
            color: #10b981;
            font-weight: 600;
        }
        
        /* Class Management */
        .class-accordion {
            margin-bottom: var(--space-lg);
        }
        
        .class-accordion-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-xl);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        .class-accordion-header:hover {
            border-color: var(--color-accent);
        }
        
        .class-accordion-header.active {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-color: transparent;
        }
        
        .class-info {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
        }
        
        .class-name {
            font-family: var(--font-display);
            font-size: 1.5rem;
            letter-spacing: 0.02em;
        }
        
        .class-meta {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            font-size: 0.875rem;
            color: var(--color-text-muted);
        }
        
        .class-stats {
            display: flex;
            align-items: center;
            gap: var(--space-xl);
        }
        
        .class-stat {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: 0.875rem;
        }
        
        .class-stat-value {
            font-family: var(--font-display);
            font-size: 1.25rem;
            color: var(--color-accent);
        }
        
        .class-accordion-content {
            display: none;
            border: 1px solid var(--color-border);
            border-top: none;
            border-bottom-left-radius: var(--radius-lg);
            border-bottom-right-radius: var(--radius-lg);
            background: var(--color-bg-card);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .class-accordion-content.active {
            display: block;
        }
        
        .class-orders-table {
            width: 100%;
            min-width: 900px; /* Forza min-width per scroll su tablet/desktop */
        }
        
        /* Sticky header per mantenere visibili le colonne durante scroll */
        .class-orders-table thead {
            position: sticky;
            top: 0;
            z-index: 20;
            background: var(--color-bg-elevated);
        }
        
        .class-orders-table thead th {
            background: var(--color-bg-elevated);
            box-shadow: 0 1px 0 var(--color-border);
        }
        
        .class-orders-table th,
        .class-orders-table td {
            padding: var(--space-md);
            font-size: 0.8125rem;
        }
        
        .student-order-row {
            background: var(--color-bg);
        }
        
        .student-order-row td {
            vertical-align: middle;
        }
        
        .student-name-col {
            font-weight: 600;
        }
        
        /* Student total row: stile desktop/tablet */
        .student-total-row {
            background: var(--color-bg-elevated) !important;
            border-top: 2px solid var(--color-accent) !important;
        }
        
        .student-total-row td {
            font-weight: 700 !important;
            padding: var(--space-md) var(--space-lg) !important;
        }
        
        .student-total-row td:last-child {
            color: var(--color-accent);
            font-size: 1.25rem;
        }
        
        .student-total-row td:last-child strong {
            color: var(--color-accent);
            font-size: 1.25rem;
        }
        
        /* Status badges */
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .status-badge.pending {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }
        
        .status-badge.confirmed {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        
        .status-badge.processing {
            background: rgba(168, 85, 247, 0.1);
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.3);
        }
        
        .status-badge.ready {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }
        
        .status-badge.completed {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        .status-badge.cancelled {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        /* Form Controls for Class Management Filters */
        #class-management-section .form-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }
        
        #class-management-section .form-group label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-text-muted);
        }
        
        #class-management-section .form-control {
            padding: var(--space-sm) var(--space-md);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            color: var(--color-text);
            transition: border-color var(--duration-fast) var(--ease-out);
        }
        
        #class-management-section .form-control:focus {
            outline: none;
            border-color: var(--color-accent);
        }
        
        #class-management-section .form-control-sm {
            padding: 6px 10px;
            font-size: 0.8125rem;
            border-radius: var(--radius-sm);
        }
        
        /* Empty state */
        .empty-state-table {
            text-align: center;
            padding: var(--space-3xl);
            color: var(--color-text-muted);
        }
        
        .empty-state-table .icon {
            width: 48px;
            height: 48px;
            opacity: 0.3;
            margin-bottom: var(--space-md);
        }
        
        /* Add product dropdown menu */
        #add-product-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            min-width: 200px;
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            z-index: 1000;
        }
        
        #add-product-dropdown[style*="display: none"] {
            display: none !important;
        }
        
        #add-product-dropdown[style*="display: block"] {
            display: block !important;
        }
        
        #add-product-dropdown .dropdown-item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-md) var(--space-lg);
            width: 100%;
            border: none;
            background: transparent;
            color: var(--color-text);
            font-size: 0.875rem;
            text-align: left;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        
        #add-product-dropdown .dropdown-item:hover {
            background: var(--color-bg-elevated);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            /* Section padding ridotto */
            #class-management-section {
                padding: var(--space-md);
                padding-bottom: 120px; /* Spazio per FAB/floating buttons */
            }
            
            .section-header-with-back {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-md);
            }
            
            .section-header-with-back h2 {
                font-size: 1.5rem;
            }
            
            /* Filtri: stack verticale su mobile */
            .card > div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }
            
            .card {
                padding: var(--space-md);
            }
            
            .class-info {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-sm);
            }
            
            .class-stats {
                flex-direction: row;
                align-items: center;
                gap: var(--space-lg);
                width: 100%;
                flex-wrap: wrap;
            }
            
            .class-stat {
                flex: 1;
                min-width: 120px;
            }
            
            .class-accordion-header {
                padding: var(--space-md);
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-md);
            }
            
            .card-body {
                padding: var(--space-sm);
            }
            
            .card-header {
                padding: var(--space-md);
            }
        }
        
        /* ============================================
           TABLET 481-1024px: Tabella con scroll migliorato
           ============================================ */
        @media (min-width: 481px) and (max-width: 1024px) {
            #class-management-section {
                padding-bottom: 100px;
            }
            
            /* Accordion content: scroll visibile */
            .class-accordion-content {
                /* Scrollbar visibile ma sottile */
                scrollbar-width: thin;
            }
            
            .class-accordion-content::-webkit-scrollbar {
                height: 8px;
            }
            
            .class-accordion-content::-webkit-scrollbar-track {
                background: var(--color-bg);
            }
            
            .class-accordion-content::-webkit-scrollbar-thumb {
                background: var(--color-border);
                border-radius: 4px;
            }
            
            .class-accordion-content::-webkit-scrollbar-thumb:hover {
                background: var(--color-text-muted);
            }
            
            /* Opzionale: prima colonna sticky per contesto */
            .class-orders-table thead th:first-child,
            .class-orders-table tbody td:first-child {
                position: sticky;
                left: 0;
                background: var(--color-bg-card);
                z-index: 15;
                box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
            }
            
            .class-orders-table thead th:first-child {
                z-index: 25; /* Sopra header sticky + colonna sticky */
                background: var(--color-bg-elevated);
            }
        }
        
        /* ============================================
           MOBILE ≤480px: Card Layout Stacked
           ============================================ */
        @media (max-width: 480px) {
            #class-management-section {
                padding: var(--space-sm);
                padding-bottom: 120px;
            }
            
            .section-header-with-back h2 {
                font-size: 1.25rem;
            }
            
            .class-accordion-header {
                padding: var(--space-sm);
            }
            
            .class-name {
                font-size: 1.125rem;
            }
            
            .class-stat {
                font-size: 0.8125rem;
            }
            
            .class-stat-value {
                font-size: 1rem;
            }
            
            /* Accordion content: no scroll su mobile, usa card layout */
            .class-accordion-content {
                overflow-x: visible;
                padding: var(--space-sm);
            }
            
            /* Nascondi table, usa card layout */
            .class-orders-table {
                display: block;
                width: 100%;
                min-width: unset; /* Rimuovi min-width su mobile */
            }
            
            .class-orders-table thead {
                display: none; /* Nascondi thead su mobile */
            }
            
            .class-orders-table tbody {
                display: block;
            }
            
            /* Ogni riga diventa una card */
            .class-orders-table tbody tr {
                display: block;
                background: var(--color-bg);
                border: 1px solid var(--color-border);
                border-radius: var(--radius-md);
                padding: var(--space-md);
                margin-bottom: var(--space-md);
                position: relative;
            }
            
            .class-orders-table tbody tr.student-total-row {
                background: var(--color-bg-elevated);
                border: 2px solid var(--color-accent);
                padding: var(--space-sm) var(--space-md);
                margin-bottom: var(--space-lg);
                margin-top: 0;
            }
            
            .class-orders-table tbody tr.student-order-row {
                background: var(--color-bg-card);
            }
            
            /* Ogni cella mostra label + valore (SOLO per student-order-row) */
            .class-orders-table tbody tr.student-order-row td {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: var(--space-xs) 0;
                border: none;
                text-align: right;
                gap: var(--space-md);
                /* Permetti wrap del testo */
                overflow-wrap: break-word;
                word-break: break-word;
            }
            
            .class-orders-table tbody tr.student-order-row td:not(:last-child) {
                border-bottom: 1px solid var(--color-border);
                padding-bottom: var(--space-sm);
                margin-bottom: var(--space-sm);
            }
            
            /* Aggiungi label prima del valore usando nth-child */
            .class-orders-table tbody tr.student-order-row td:nth-child(1)::before { content: "Studente: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(2)::before { content: "Ordine: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(3)::before { content: "Prodotto: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(4)::before { content: "Taglia: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(5)::before { content: "Qta: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(6)::before { content: "Totale: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(7)::before { content: "Sconto: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(8)::before { content: "Con Sconto: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(9)::before { content: "Stato: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(10)::before { content: "Note: "; }
            .class-orders-table tbody tr.student-order-row td:nth-child(11)::before { content: "Azioni: "; }
            
            /* Label styling */
            .class-orders-table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--color-text-muted);
                text-align: left;
                flex-shrink: 0;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
            
            /* Valore della cella */
            .class-orders-table tbody td > * {
                flex: 1;
                text-align: right;
            }
            
            /* Select stato full-width su mobile */
            .class-orders-table tbody td select.form-control {
                width: 100%;
                min-width: unset;
                max-width: 100%;
                font-size: 0.75rem;
                padding: var(--space-xs) var(--space-sm);
            }
            
            /* Note con wrap */
            .class-orders-table tbody td > div {
                max-width: 100%;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                word-wrap: break-word;
            }
            
            /* Bottoni azioni */
            .class-orders-table tbody td .btn {
                width: 100%;
                justify-content: center;
            }
            
            /* Student total row: layout speciale mobile */
            .class-orders-table tbody tr.student-total-row {
                display: block !important;
                padding: var(--space-md) !important;
                background: var(--color-bg-elevated) !important;
                border: 2px solid var(--color-accent) !important;
            }
            
            .class-orders-table tbody tr.student-total-row td {
                display: block !important;
                text-align: left !important;
                font-weight: 700 !important;
                padding: var(--space-sm) var(--space-md) !important;
                border: none !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            
            .class-orders-table tbody tr.student-total-row td::before {
                content: "" !important;
                display: none !important;
            }
            
            /* Prima cella: label "Totale Nome:" */
            .class-orders-table tbody tr.student-total-row td:first-child {
                color: var(--color-text-muted) !important;
                font-size: 0.9375rem !important;
                padding-bottom: var(--space-sm) !important;
                text-align: left !important;
                font-weight: 600 !important;
            }
            
            /* Seconda cella: valore € */
            .class-orders-table tbody tr.student-total-row td:nth-child(2),
            .class-orders-table tbody tr.student-total-row td:last-child {
                color: var(--color-accent) !important;
                font-size: 2rem !important;
                line-height: 1.2 !important;
                padding-top: var(--space-xs) !important;
                text-align: left !important;
                display: block !important;
                width: 100% !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            /* Forza visibilità del contenuto strong */
            .class-orders-table tbody tr.student-total-row td strong {
                display: block !important;
                color: var(--color-accent) !important;
                font-weight: 700 !important;
                font-size: 2rem !important;
                line-height: 1.2 !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100% !important;
                text-align: left !important;
            }
            
            /* Override colspan su mobile */
            .class-orders-table tbody tr.student-total-row td[colspan] {
                width: 100% !important;
                max-width: 100% !important;
                display: block !important;
            }
            
            /* Hide rowspan cells duplicates su mobile (gestito da nth-child) */
            .class-orders-table tbody td[rowspan] {
                display: flex !important;
            }
            
            /* Empty state */
            .empty-state-table {
                display: block;
                padding: var(--space-xl);
                text-align: center;
            }
        }