/* ===== 01-base.css ===== */
        :root {
            --bg-primary: #fafafa;
            --bg-secondary: #ffffff;
            --bg-tertiary: #f5f5f5;
            --text-primary: #1a1a1a;
            --text-secondary: #4a4a4a;
            --text-muted: #8a8a8a;
            --border-color: #e0e0e0;
            --accent: #1a1a1a;
            --accent-dark: #0a0a0a;
            --accent-light: #404040;
            --accent-hover: #2d2d2d;
            --gradient-start: #1a1a1a;
            --gradient-mid: #2d2d2d;
            --gradient-end: #404040;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
            --shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
            --shadow-accent: 0 4px 20px rgba(0,0,0,0.25);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --success-color: #0a0a0a;
            --success-bg: #d1fae5;
            --cart-color: #1a1a1a;
            --cart-bg: #dcfce7;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: 
                linear-gradient(180deg, 
                    rgba(26,26,26,0.06) 0%, 
                    rgba(26,26,26,0.05) 100px,
                    rgba(26,26,26,0.04) 200px,
                    rgba(26,26,26,0.03) 350px,
                    rgba(26,26,26,0.02) 500px,
                    rgba(26,26,26,0.01) 700px,
                    rgba(26,26,26,0.005) 900px,
                    var(--bg-primary) 1200px
                ),
                var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 400px;
            background: linear-gradient(180deg, 
                rgba(26,26,26,0.05) 0%, 
                rgba(26,26,26,0.04) 15%,
                rgba(26,26,26,0.03) 30%,
                rgba(26,26,26,0.02) 50%,
                rgba(26,26,26,0.01) 70%,
                rgba(26,26,26,0.005) 85%,
                transparent 100%
            );
            pointer-events: none;
            z-index: 0;
        }


/* ===== 02-cabecalho-busca-cliente.css ===== */
        /* HEADER - Mobile First */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0,0,0,0.08);
            padding: 0 1rem;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo img {
            height: 42px;
            width: auto;
            object-fit: contain;
        }

        /* logo REDEPLAST B2B (horizontal, ~9:1): mais baixo que o antigo para caber com os botões no celular.
           Claro = texto preto; tema escuro troca pelo branco (10-tema-escuro.css) */
        .logo a { display: inline-flex; align-items: center; }
        .logo img.logo-b2b { height: 18px; max-width: 46vw; }
        .logo img.logo-b2b-branco { display: none; }
        @media (min-width: 768px) {
            .logo img.logo-b2b { height: 24px; max-width: none; }
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
            position: relative;
        }

        .btn-icon:hover {
            background: var(--bg-tertiary);
        }

        .btn-icon svg {
            width: 22px;
            height: 22px;
        }

        /* Cart Badge */
        .cart-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            min-width: 18px;
            height: 18px;
            background: var(--cart-color);
            color: #ffffff;
            font-size: 0.625rem;
            font-weight: 700;
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            transform: scale(0);
            transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .cart-badge.visible {
            transform: scale(1);
        }

        .cart-badge.animate {
            animation: cartBounce 0.4s ease;
        }

        @keyframes cartBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        /* SEARCH EXPANDABLE */
        .search-container {
            position: fixed;
            top: 56px;
            right: 0;
            z-index: 999;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            border-left: 1px solid var(--border-color);
            border-radius: 0 0 0 var(--radius-lg);
            box-shadow: var(--shadow-md);
            width: 0;
            overflow: hidden;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .search-container.active {
            width: 280px;
            padding: 0.75rem 1rem;
        }

        .search-wrapper {
            position: relative;
            width: 100%;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .search-container.active .search-wrapper {
            opacity: 1;
            transition-delay: 0.1s;
        }

        .search-input {
            width: 100%;
            height: 44px;
            padding: 0 1rem 0 44px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            background: var(--bg-tertiary);
            font-size: 0.938rem;
            color: var(--text-primary);
            transition: var(--transition);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--bg-secondary);
            box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
        }

        .search-input::placeholder {
            color: var(--text-muted);
        }

        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            pointer-events: none;
        }

        .search-icon svg {
            width: 18px;
            height: 18px;
        }

        /* FILTER CHIPS */
        .filter-chips {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
            padding: 0 1rem 1.5rem;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .filter-chips::-webkit-scrollbar {
            display: none;
        }

        /* LISTA DE PREÇO NO HEADER (modo iframe) */
        .header-lp-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        .header-lp-btn {
            position: relative;
        }
        .header-lp-btn.active {
            background: var(--bg-tertiary, rgba(0,0,0,.06));
        }
        .header-lp-tooltip {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: rgba(30,30,30,.92);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
            padding: 5px 10px;
            border-radius: 6px;
            pointer-events: none;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity .15s, transform .15s;
            z-index: 1100;
        }
        .header-lp-wrap:hover .header-lp-tooltip,
        .header-lp-wrap:focus-within .header-lp-tooltip {
            opacity: 1;
            transform: translateY(0);
        }
        .header-lp-dropdown[hidden] { display: none !important; }
        .header-lp-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 200px;
            background: var(--bg-primary, #fff);
            border: 1px solid var(--border-color, rgba(0,0,0,.1));
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,.14);
            z-index: 1200;
            overflow: hidden;
        }
        .header-lp-option {
            padding: 0.6rem 0.9rem;
            font-size: 0.813rem;
            cursor: pointer;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color, rgba(0,0,0,.06));
            transition: background .12s;
        }
        .header-lp-option:last-child { border-bottom: 0; }
        .header-lp-option:hover { background: var(--bg-secondary, #f5f5f5); }
        .header-lp-option.selected {
            font-weight: 700;
            color: var(--accent-color, #2b3641);
            background: rgba(43, 54, 65,.06);
        }

        /* BOTÃO PESQUISAR CLIENTE */
        .btn-pesquisar-cliente {
            height: 48px;
            padding: 0 1rem;
            border: 1px solid var(--accent-color, #2b3641);
            border-radius: var(--radius-md);
            background: transparent;
            color: var(--accent-color, #2b3641);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            white-space: nowrap;
            transition: background .15s, color .15s;
            flex-shrink: 0;
        }
        .btn-pesquisar-cliente:hover {
            background: var(--accent-color, #2b3641);
            color: #fff;
        }

        /* CLIENTE PICKER MODAL */
        .client-picker-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.45);
            z-index: 10200;
        }
        .client-picker-overlay.active { display: block; }
        .client-picker-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(.96);
            width: min(520px, calc(100vw - 2rem));
            max-height: calc(100vh - 4rem);
            background: var(--bg-primary, #fff);
            border-radius: var(--radius-lg, 12px);
            box-shadow: 0 20px 60px rgba(0,0,0,.2);
            z-index: 10201;
            flex-direction: column;
            opacity: 0;
            transition: opacity .15s, transform .15s;
        }
        .client-picker-modal.active {
            display: flex;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .client-picker-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .client-picker-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .client-picker-close {
            width: 32px;
            height: 32px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: background .15s;
        }
        .client-picker-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .client-picker-body {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 1rem 1.25rem 0;
            min-height: 0;
        }
        .client-picker-list {
            flex: 1;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            margin-bottom: 0;
            min-height: 120px;
        }
        .client-picker-footer {
            display: flex;
            gap: 0.75rem;
            justify-content: flex-end;
            padding: 0.85rem 1.25rem;
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .btn-client-picker-cancel {
            height: 40px;
            padding: 0 1.25rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
        }
        .btn-client-picker-cancel:hover { background: var(--bg-secondary); }
        .btn-client-picker-confirm {
            height: 40px;
            padding: 0 1.25rem;
            border: 0;
            border-radius: var(--radius-md);
            background: var(--accent-color, #2b3641);
            color: #fff;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            transition: background .15s;
        }
        .btn-client-picker-confirm:hover:not(:disabled) { filter: brightness(1.1); }
        .btn-client-picker-confirm:disabled { opacity: .45; cursor: not-allowed; }

        /* CLIENT SEARCH (modo iframe representante) */
        .client-search-section {
            padding: 0 1rem;
            margin: 0 auto 1rem;
            max-width: 720px;
        }
        .client-search-wrap {
            position: relative;
        }
        .client-search-label {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            margin-bottom: 0.4rem;
        }
        .client-search-box {
            position: relative;
            display: flex;
            align-items: center;
        }
        .client-search-icon {
            position: absolute;
            left: 0.85rem;
            color: var(--text-muted);
            font-size: 0.875rem;
            pointer-events: none;
        }
        .client-search-input {
            width: 100%;
            height: 44px;
            padding: 0 2.5rem 0 2.25rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 0.938rem;
            transition: border-color .15s, box-shadow .15s;
        }
        .client-search-input:focus {
            outline: none;
            border-color: var(--accent-color, #000);
            box-shadow: 0 0 0 3px rgba(0,0,0,.06);
        }
        .client-search-clear {
            position: absolute;
            right: 0.5rem;
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .client-search-clear:hover { background: var(--bg-tertiary); }
        .client-search-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            max-height: 320px;
            overflow-y: auto;
            background: var(--bg-primary, #fff);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: 0 12px 32px rgba(0,0,0,.12);
            z-index: 50;
        }
        .client-search-item {
            padding: 0.6rem 0.85rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            font-size: 0.875rem;
            transition: background .15s;
        }
        .client-search-item:last-child { border-bottom: 0; }
        .client-search-item:hover,
        .client-search-item.active { background: var(--bg-tertiary); }
        .client-search-item-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        .client-search-item-meta {
            font-size: 0.75rem;
            color: var(--text-muted);
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .client-search-empty {
            padding: 0.85rem;
            text-align: center;
            font-size: 0.813rem;
            color: var(--text-muted);
        }
        .client-selected-badge {
            margin-top: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.6rem 0.85rem;
            border-radius: var(--radius-md);
            background: rgba(43, 54, 65, 0.08);
            border: 1px solid rgba(43, 54, 65, 0.25);
            color: var(--text-primary);
        }
        .client-selected-info { display: flex; flex-direction: column; min-width: 0; }
        .client-selected-name { font-weight: 600; font-size: 0.875rem; }
        .client-selected-meta { font-size: 0.75rem; color: var(--text-muted); }
        .client-selected-clear {
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .client-selected-clear:hover { background: rgba(0,0,0,.05); color: var(--danger, #c00); }


/* ===== 03-marcas-banners.css ===== */
        /* BRANDS CONTAINER */
        .brands-container {
            padding: 1.5rem 1rem;
            background: transparent;
            position: relative;
            z-index: 1;
        }

        .brands-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .brand-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: var(--radius-md);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            cursor: pointer;
        }

        .brand-item:hover {
            opacity: 1;
            border-color: var(--accent);
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }

        .brand-item.active {
            opacity: 1;
            border-color: var(--accent);
            box-shadow: var(--shadow-md);
            background: var(--bg-tertiary);
        }

        .brand-item.inactive {
            opacity: 0.4;
        }

        .brand-item.inactive:hover {
            opacity: 0.6;
        }

        .brand-item img {
            max-width: 100%;
            max-height: 60px;
            object-fit: contain;
            display: block;
        }

        @media (min-width: 768px) {
            .brands-container {
                padding: 2rem;
            }

            .brands-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 1.5rem;
            }

            .brand-item img {
                max-height: 80px;
            }
        }

        /* OLD FILTER CHIPS STYLES */
        .old-filter-chips {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            z-index: 998;
            background: var(--bg-secondary);
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
            overflow-x: auto;
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .filter-chips::-webkit-scrollbar {
            display: none;
        }

        .chip {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            border-radius: 100px;
            font-size: 0.688rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
        }

        .chip:hover {
            background: rgba(26,26,26,0.06);
        }

        .chip.active {
            background: rgba(26,26,26,0.06);
            color: var(--text-secondary);
        }

        .chip svg {
            width: 14px;
            height: 14px;
        }

        /* MAIN CONTENT */
        main {
            padding-top: 86px;
            padding-bottom: 2rem;
            min-height: 100vh;
        }

        @media (min-width: 640px) {
            main {
                padding-top: 56px;
            }
        }

        /* BANNER SECTION */
        .banner-section {
            padding: 0 1rem 1rem;
            position: relative;
            z-index: 1;
        }

        .banner-wrapper {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }
        
        .banner-carousel {
            position: relative;
            width: 100%;
            height: auto;
            touch-action: pan-y;
            user-select: none;
        }
        
        .banner-carousel-track {
            display: flex;
            transition: transform 0.5s ease;
        }
        
        .banner-carousel-track.dragging {
            transition: none;
        }
        
        .banner-carousel-slide {
            min-width: 100%;
            position: relative;
        }

        .banner-image {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            aspect-ratio: 16 / 6;
        }
        
        .banner-carousel-indicators {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 10;
        }
        
        .banner-carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            border: none;
            cursor: pointer;
            transition: var(--transition);
            padding: 0;
        }
        
        .banner-carousel-indicator.active {
            background: #ffffff;
            width: 24px;
            border-radius: 4px;
        }

        .banner-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                rgba(0,0,0,0.5) 0%,
                rgba(0,0,0,0.2) 40%,
                transparent 70%
            );
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1.5rem;
        }

        .banner-tag {
            font-size: 0.625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.85);
            margin-bottom: 0.5rem;
        }

        .banner-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.2;
            margin-bottom: 0.5rem;
            max-width: 60%;
        }

        .banner-subtitle {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.8);
            max-width: 50%;
        }

        @media (min-width: 640px) {
            .banner-section {
                padding: 0 1.5rem 1.5rem;
            }

            .banner-overlay {
                padding: 2rem;
            }

            .banner-tag {
                font-size: 0.688rem;
            }

            .banner-title {
                font-size: 1.75rem;
            }

            .banner-subtitle {
                font-size: 0.875rem;
            }
        }

        @media (min-width: 1024px) {
            .banner-section {
                padding: 0 2rem 2rem;
                max-width: 1400px;
                margin: 0 auto;
            }

            .banner-wrapper {
                border-radius: var(--radius-xl);
            }

            .banner-overlay {
                padding: 3rem;
            }

            .banner-tag {
                font-size: 0.75rem;
            }

            .banner-title {
                font-size: 2.25rem;
                max-width: 45%;
            }

            .banner-subtitle {
                font-size: 1rem;
                max-width: 40%;
            }
        }

        /* HERO SECTION */
        .hero {
            padding: 2rem 1rem 1.5rem;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .hero-tag {
            display: inline-block;
            font-size: 0.688rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-secondary);
            margin-top: 1.5rem;
            padding: 0.375rem 0.75rem;
            background: rgba(26,26,26,0.06);
            border-radius: 100px;
        }

        .hero h1 {
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            line-height: 1.15;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }

        .hero p {
            font-size: 0.938rem;
            color: var(--text-secondary);
            max-width: 320px;
            margin: 0 auto;
        }

        .product-banner-carousel {
            position: relative;
            width: 100%;
            height: auto;
            touch-action: pan-y;
            user-select: none;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .product-banner-carousel.loaded {
            opacity: 1;
        }
        
        .product-banner-track {
            display: flex;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform;
        }
        
        .product-banner-track.dragging {
            transition: none;
        }
        
        .product-banner-slide {
            min-width: 100%;
            position: relative;
        }
        
        .product-banner-slide img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            aspect-ratio: 16 / 6;
        }
        
        .product-banner-indicators {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 10;
        }
        
        .product-banner-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            border: none;
            cursor: pointer;
            transition: var(--transition);
            padding: 0;
        }
        
        .product-banner-indicator.active {
            background: #ffffff;
            width: 24px;
            border-radius: 4px;
        }


/* ===== 04-grade-produtos.css ===== */
        /* PRODUCTS GRID */
        .products-container {
            padding: 0 0.75rem;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .product-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--border-color);
            transition: var(--transition);
            position: relative;
            cursor: pointer;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
            opacity: 0;
            transition: var(--transition);
        }

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

        .product-card:active {
            transform: scale(0.98);
        }

        .product-card:hover {
            border-color: rgba(26,26,26,0.15);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }

        .product-image-wrapper {
            position: relative;
            aspect-ratio: 1;
            background: #ffffff;
            overflow: hidden;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.4s ease;
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .product-badge {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            padding: 0.25rem 0.5rem;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
            color: #ffffff;
            font-size: 0.625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            z-index: 10;
            overflow: hidden;
            position: relative;
        }

        .product-badge::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 50%;
            height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            transform: skewX(-25deg);
        }

        .product-image-wrapper [style*="#d4af37"] {
            animation: badgePulseBestSeller 2s ease-in-out infinite;
        }

        .product-image-wrapper [style*="#d4af37"]::after {
            animation: badgeShine 2s ease-in-out infinite;
        }

        .product-image-wrapper [style*="#dc2626"] {
            animation: badgePulseSale 2s ease-in-out infinite;
        }

        .product-image-wrapper [style*="#dc2626"]::after {
            animation: badgeShine 2s ease-in-out infinite;
        }

        @keyframes badgePulseBestSeller {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 4px 12px rgba(212,175,55,0.6);
            }
        }

        @keyframes badgePulseSale {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            }
            50% {
                transform: scale(1.15);
                box-shadow: 0 6px 20px rgba(220,38,38,0.8);
            }
        }

        @keyframes badgeShine {
            0% {
                left: -100%;
            }
            50% {
                left: 150%;
            }
            100% {
                left: 150%;
            }
        }

        .product-info {
            padding: 0.875rem;
        }

        .product-brand {
            font-size: 0.625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-bottom: 0.25rem;
        }

        .product-name {
            font-size: 0.813rem;
            font-weight: 500;
            color: var(--text-primary);
            line-height: 1.4;
            margin-bottom: 0.375rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.28rem;
        }

        .product-model {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .product-price {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .product-price-old {
            font-size: 1rem;
            color: var(--text-primary);
            text-decoration: line-through;
            margin-right: 0.5rem;
            display: inline-block;
            font-weight: 700;
        }

        .product-price-discount {
            font-size: 1rem;
            font-weight: 700;
            color: #dc2626;
        }

        .product-price-suggested {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        .product-price-suggested span {
            font-weight: 600;
            color: var(--text-primary);
        }

        /* LOADING */
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 1rem;
            gap: 1rem;
        }

        .spinner {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(26,26,26,0.1);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            font-size: 0.813rem;
            color: var(--text-muted);
        }

        /* END MESSAGE */
        .end-message {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 500;
        }

        /* NO RESULTS */
        .no-results {
            text-align: center;
            padding: 4rem 2rem;
        }

        .no-results-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 1rem;
            color: var(--text-muted);
        }

        .no-results h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .no-results p {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }


/* ===== 05-gaveta-compartilhar-desktop.css ===== */
        /* FILTER DRAWER */
        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .drawer-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .filter-drawer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            z-index: 2001;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .filter-drawer.active {
            transform: translateY(0);
        }

        .drawer-handle {
            width: 40px;
            height: 4px;
            background: linear-gradient(90deg, #d0d0d0 0%, #a0a0a0 100%);
            border-radius: 2px;
            margin: 0.75rem auto;
            flex-shrink: 0;
        }

        .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.25rem 1rem;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .drawer-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .btn-clear {
            font-size: 0.875rem;
            color: var(--text-secondary);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }

        .btn-clear:hover {
            color: var(--text-primary);
        }

        .drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 1.25rem;
            -webkit-overflow-scrolling: touch;
        }

        .filter-section {
            margin-bottom: 1.5rem;
        }

        .filter-section:last-child {
            margin-bottom: 0;
        }

        .filter-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-bottom: 0.75rem;
            display: block;
        }

        .filter-select {
            width: 100%;
            height: 48px;
            padding: 0 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            font-size: 0.938rem;
            color: var(--text-primary);
            appearance: none;
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 18px;
            transition: var(--transition);
        }

        .filter-select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
        }

        .price-inputs {
            display: flex;
            gap: 0.75rem;
        }

        .price-input {
            flex: 1;
            height: 48px;
            padding: 0 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            font-size: 0.938rem;
            color: var(--text-primary);
            transition: var(--transition);
        }

        .price-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
        }

        .drawer-footer {
            padding: 1rem 1.25rem;
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .btn-apply {
            width: 100%;
            height: 52px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
            color: #ffffff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.938rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-accent);
        }

        .btn-apply:hover {
            background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-dark) 100%);
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(0,0,0,0.35);
        }

        .btn-apply:active {
            transform: translateY(0);
        }

        /* SHARE BUTTON */
        .share-button {
            position: fixed;
            bottom: 1.5rem;
            right: 5rem;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.25);
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition: var(--transition);
            z-index: 100;
        }

        .share-button.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .share-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(0,0,0,0.35);
        }

        .share-button:active {
            transform: translateY(0);
        }

        .share-button svg {
            width: 22px;
            height: 22px;
        }

        @media (max-width: 768px) {
            .share-button {
                right: 1rem;
                bottom: 1rem;
                width: 46px;
                height: 46px;
            }

            .share-button svg {
                width: 20px;
                height: 20px;
            }
        }

        /* Share Cart Link */
        .share-cart-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            padding: 0.625rem;
            background: none;
            color: #000000;
            border: 1px solid #000000;
            border-radius: 0.5rem;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .share-cart-link:hover {
            color: var(--text-primary);
            border-color: var(--text-muted);
            background: var(--bg-secondary);
        }

        .share-cart-link svg {
            width: 16px;
            height: 16px;
        }

        .btn-export-pdf {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            padding: 0.625rem;
            background: none;
            color: #000000;
            border: 1px solid #000000;
            border-radius: 0.5rem;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-export-pdf:hover {
            color: #dc2626;
            border-color: #dc2626;
            background: #fef2f2;
        }

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

        /* Share Modal */
        .share-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .share-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .share-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: white;
            border-radius: 1rem;
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .share-modal.active {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        .share-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            border-bottom: 1px solid #e5e5e5;
            flex-shrink: 0;
        }

        .share-modal-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .share-modal-close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            color: var(--text-muted);
            transition: color 0.2s;
        }

        .share-modal-close:hover {
            color: var(--text-primary);
        }

        .share-url-container {
            display: flex;
            gap: 0.5rem;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e5e5e5;
            flex-shrink: 0;
        }

        .share-url-input {
            flex: 1;
            padding: 0.75rem 1rem;
            border: 1px solid #e5e5e5;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            color: var(--text-primary);
            background: #f9fafb;
        }

        .share-url-input:focus {
            outline: none;
            border-color: var(--text-primary);
        }

        .btn-copy-url {
            padding: 0.75rem 1.25rem;
            background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
            color: white;
            border: none;
            border-radius: 0.5rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .btn-copy-url:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .btn-copy-url.copied {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
        }

        .share-cart-items-container {
            flex: 1;
            overflow-y: auto;
            min-height: 200px;
            max-height: 400px;
        }

        .share-cart-table {
            width: 100%;
            border-collapse: collapse;
        }

        .share-cart-table thead {
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .share-cart-table th {
            padding: 0.75rem;
            text-align: left;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #e5e5e5;
        }

        .share-cart-table td {
            padding: 0.75rem;
            font-size: 0.875rem;
            color: var(--text-primary);
            border-bottom: 1px solid #e5e5e5;
            background: white;
        }

        .share-cart-table tbody tr:hover td {
            background: #f9fafb;
        }

        .share-cart-table tbody tr:last-child td {
            border-bottom: none;
        }

        .share-cart-table .col-item {
            width: 15%;
        }

        .share-cart-table .col-descricao {
            width: 35%;
        }

        .share-cart-table .col-grade {
            width: 30%;
            font-size: 0.75rem;
        }

        .share-cart-table .col-qtd {
            width: 10%;
            text-align: center;
        }

        .share-cart-table .col-preco {
            width: 10%;
            text-align: right;
            font-weight: 600;
            color: var(--cart-color);
        }

        .share-filters-info {
            background: #f9fafb;
            padding: 1rem 1.5rem;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            border-top: 1px solid #e5e5e5;
            flex-shrink: 0;
        }

        .share-filters-info h4 {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .share-filters-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .share-filter-tag {
            background: white;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            border: 1px solid #e5e5e5;
        }

        /* DESKTOP STYLES */
        @media (min-width: 768px) {
            header {
                padding: 0 2rem;
                height: 64px;
            }

            .logo {
                font-size: 1.5rem;
            }

            .search-container.active {
                width: 400px;
            }

            .filter-chips {
                top: 64px;
                padding: 1rem 2rem;
                justify-content: center;
            }

            main {
                padding-top: 130px;
            }

            .hero {
                padding: 3rem 2rem 2rem;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero p {
                font-size: 1rem;
                max-width: 400px;
            }

            .products-container {
                padding: 0 2rem;
                max-width: 1400px;
                margin: 0 auto;
            }

            .products-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.25rem;
            }

            .product-card:hover {
                box-shadow: var(--shadow-md);
                border-color: var(--text-muted);
            }

            .product-info {
                padding: 1rem;
            }

            .product-name {
                font-size: 0.875rem;
            }

            .product-price {
                font-size: 1.125rem;
            }
        }

        @media (min-width: 1024px) {
            .products-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 1.5rem;
            }

            .hero h1 {
                font-size: 3rem;
            }
        }

        @media (min-width: 1280px) {
            .products-grid {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        /* ANIMATIONS */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .product-card {
            animation: fadeIn 0.4s ease forwards;
        }

        .product-card:nth-child(1) { animation-delay: 0.05s; }
        .product-card:nth-child(2) { animation-delay: 0.1s; }
        .product-card:nth-child(3) { animation-delay: 0.15s; }
        .product-card:nth-child(4) { animation-delay: 0.2s; }
        .product-card:nth-child(5) { animation-delay: 0.25s; }
        .product-card:nth-child(6) { animation-delay: 0.3s; }

        /* Hidden utility */
        .hidden {
            display: none !important;
        }


/* ===== 06-modal-variacoes-grade.css ===== */
        /* MODAL */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 3000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 0;
        }

        @media (min-width: 768px) {
            .modal-overlay {
                align-items: center;
                padding: 1.5rem;
            }
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: var(--bg-secondary);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            max-width: 100%;
            width: 100%;
            max-height: 92vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        }

        @media (min-width: 768px) {
            .modal-content {
                max-width: 1100px;
                max-height: 85vh;
                border-radius: var(--radius-xl);
                transform: scale(0.9) translateY(20px);
                transition: transform 0.3s ease;
            }
        }

        .modal-overlay.active .modal-content {
            transform: translateY(0);
        }

        @media (min-width: 768px) {
            .modal-overlay.active .modal-content {
                transform: scale(1) translateY(0);
            }
        }

        .modal-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            background: var(--bg-secondary);
            z-index: 10;
        }

        .modal-header::before {
            content: '';
            position: absolute;
            top: 0.5rem;
            left: 50%;
            transform: translateX(-50%);
            width: 36px;
            height: 4px;
            background: var(--border-color);
            border-radius: 2px;
        }

        @media (min-width: 768px) {
            .modal-header {
                padding: 1.25rem 1.5rem;
            }
            .modal-header::before {
                display: none;
            }
        }

        .modal-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        @media (min-width: 768px) {
            .modal-title {
                font-size: 1.125rem;
            }
        }

        .modal-title-count {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
            background: var(--bg-tertiary);
            padding: 0.25rem 0.5rem;
            border-radius: 100px;
        }

        .btn-close-modal {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: var(--bg-tertiary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
            flex-shrink: 0;
        }

        .btn-close-modal svg {
            stroke: currentColor;
        }

        .btn-close-modal:hover {
            background: var(--border-color);
        }

        .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 0.75rem;
            overscroll-behavior: contain;
        }

        @media (min-width: 768px) {
            .modal-body {
                padding: 1.25rem;
            }
        }

        /* VARIATIONS LIST - Mobile: Horizontal Scroll, Desktop: Grid */
        .variations-grid {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        @media (min-width: 768px) {
            .variations-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 1rem;
            }
        }

        .variation-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--border-color);
            transition: var(--transition);
            display: flex;
            flex-direction: row;
            cursor: pointer;
        }

        @media (min-width: 768px) {
            .variation-card {
                flex-direction: column;
                border: 1px solid var(--border-color);
            }
        }

        .variation-card:hover {
            border-color: var(--accent);
            box-shadow: var(--shadow-md);
        }

        .variation-card.selected {
            border-color: var(--success-color);
            box-shadow: 0 0 0 2px var(--success-color);
        }

        @media (min-width: 768px) {
            .variation-card:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow-lg);
            }
        }

        .variation-carousel {
            position: relative;
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            overflow: hidden;
            touch-action: pan-y;
            user-select: none;
            background: var(--bg-tertiary);
        }

        @media (min-width: 768px) {
            .variation-carousel {
                width: 100%;
                height: auto;
                aspect-ratio: 1;
            }
        }

        /* Zoom icon overlay */
        .variation-carousel::after {
            content: '';
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            width: 28px;
            height: 28px;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='11' y1='8' x2='11' y2='14'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 14px;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            z-index: 5;
        }

        .variation-card:hover .variation-carousel::after {
            opacity: 1;
        }

        @media (hover: none) {
            .variation-carousel::after {
                opacity: 0.7;
            }
        }

        .variation-carousel-track {
            display: flex;
            transition: transform 0.3s ease;
            height: 100%;
            will-change: transform;
        }

        .variation-carousel-track.dragging {
            transition: none;
        }

        .variation-carousel-slide {
            min-width: 100%;
            height: 100%;
        }

        .variation-image {
            width: 100%;
            height: 100%;
            background: #ffffff;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        .variation-card:hover .variation-image {
            transform: scale(1.05);
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(255,255,255,0.95);
            border: none;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: var(--transition);
            opacity: 0;
            color: var(--text-primary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        @media (min-width: 768px) {
            .carousel-btn {
                display: flex;
                width: 32px;
                height: 32px;
            }
        }

        .carousel-btn svg {
            stroke: currentColor;
        }

        @media (hover: hover) {
            .variation-card:hover .carousel-btn {
                opacity: 1;
            }
        }

        @media (hover: none) {
            .carousel-btn {
                opacity: 0.8;
            }
        }

        .carousel-btn:hover {
            background: #ffffff;
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-btn-prev {
            left: 0.5rem;
        }

        .carousel-btn-next {
            right: 0.5rem;
        }

        .carousel-indicators {
            position: absolute;
            bottom: 0.375rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.25rem;
            z-index: 10;
            padding: 0.25rem 0.5rem;
            background: rgba(0,0,0,0.3);
            border-radius: 100px;
        }

        @media (min-width: 768px) {
            .carousel-indicators {
                bottom: 0.75rem;
            }
        }

        .carousel-indicator {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            transition: var(--transition);
        }

        @media (min-width: 768px) {
            .carousel-indicator {
                width: 6px;
                height: 6px;
            }
        }

        .carousel-indicator.active {
            background: #ffffff;
            width: 16px;
            border-radius: 3px;
        }

        @media (min-width: 768px) {
            .carousel-indicator.active {
                width: 20px;
            }
        }

        .variation-info {
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            min-width: 0;
        }

        @media (min-width: 768px) {
            .variation-info {
                padding: 1rem;
            }
        }

        .variation-name {
            font-size: 0.813rem;
            font-weight: 500;
            color: var(--text-primary);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        @media (min-width: 768px) {
            .variation-name {
                font-size: 0.875rem;
                -webkit-line-clamp: 3;
            }
        }

        .variation-code {
            font-size: 0.688rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
            font-weight: 500;
        }

        .btn-add-variation {
            width: 100%;
            height: 36px;
            background: var(--accent);
            color: #ffffff;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 0.813rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 0.5rem;
        }

        .btn-add-variation:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
        }

        .btn-add-variation:active {
            transform: translateY(0);
        }

        /* Loading state for modal */
        .variations-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 1rem;
            gap: 1rem;
        }

        .variations-loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border-color);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .variations-loading-text {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* Empty state */
        .variations-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 1rem;
            gap: 0.75rem;
            text-align: center;
        }

        .variations-empty-icon {
            width: 48px;
            height: 48px;
            color: var(--text-muted);
            opacity: 0.5;
        }

        .variations-empty-text {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* GRADE DETAILS PANEL */
        .grade-details-panel {
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            padding: 1rem;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
            border: 2px solid var(--success-color);
            animation: slideDown 0.3s ease;
            width: 100%;
        }

        @media (min-width: 768px) {
            .grade-details-panel {
                grid-column: 1 / -1;
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .grade-details-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-color);
        }

        .grade-details-title {
            font-size: 0.938rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .grade-details-title svg {
            width: 18px;
            height: 18px;
            color: var(--success-color);
            flex-shrink: 0;
        }

        .grade-details-title-text {
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            line-height: 1.3;
        }

        .btn-close-grade {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: var(--bg-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-muted);
        }

        .btn-close-grade:hover {
            background: var(--border-color);
            color: var(--text-primary);
        }

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

        .grade-details-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            gap: 0.75rem;
        }

        .grade-details-loading .spinner {
            width: 24px;
            height: 24px;
        }

        .grade-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .grade-item {
            background: var(--bg-secondary);
            border-radius: var(--radius-sm);
            padding: 1rem;
            border: 1px solid var(--border-color);
            transition: var(--transition);
        }
        
        .grade-item.in-cart {
            border-color: var(--cart-color);
        }

        .grade-item:hover {
            border-color: var(--accent);
            box-shadow: var(--shadow-sm);
        }

        .grade-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.75rem;
        }

        .grade-item-code {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .grade-item-price {
            font-size: 1rem;
            font-weight: 700;
            color: var(--success-color);
        }

        .grade-item-sizes {
            background: var(--bg-tertiary);
            border-radius: var(--radius-sm);
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .grade-item-sizes-label {
            font-size: 0.688rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.375rem;
            display: block;
        }

        /* Teclado numérico virtual dos campos de quantidade em celular/tablet (tecladoAbrir) */
        .tecl-num {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 20000;
            margin: 0 auto;
            max-width: 460px;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
            padding: 0.625rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
            transform: translateY(110%);
            transition: transform 0.18s ease;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }

        .tecl-num.aberto { transform: translateY(0); }

        .tecl-num-topo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .tecl-num-campo { flex: 1; min-width: 0; }

        .tecl-num-rot {
            display: block;
            font-size: 0.688rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
        }

        .tecl-num-valor {
            display: block;
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
            min-height: 1.65rem;
            font-variant-numeric: tabular-nums;
        }

        .tecl-num-topo button {
            height: 40px;
            min-width: 44px;
            padding: 0 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .tecl-num-topo button:disabled { opacity: 0.35; }

        .tecl-num-topo .tecl-num-ok {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            min-width: 64px;
        }

        .tecl-num-teclas {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.375rem;
        }

        .tecl-num-teclas button {
            height: 52px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font: inherit;
            font-size: 1.375rem;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .tecl-num-teclas button:active,
        .tecl-num-topo button:active { background: var(--border-color); }

        .tecl-num-teclas .tecl-num-fn { font-size: 0.875rem; color: var(--text-secondary); }

        input.tecl-num-ativo {
            outline: 2px solid var(--accent) !important;
            outline-offset: 1px;
            background: var(--bg-tertiary) !important;
        }

        /* Produção: grade pré-preenchida com a última usada no mesmo tipo de grade (gradeMemoriaAplicar) */
        .grade-memoria-aviso {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-top: 0.5rem;
            padding: 0.375rem 0.625rem;
            border-radius: var(--radius-sm);
            background: var(--bg-tertiary);
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .grade-memoria-aviso button {
            border: 0;
            background: none;
            padding: 0;
            font: inherit;
            font-weight: 600;
            color: var(--text-primary);
            text-decoration: underline;
            cursor: pointer;
            white-space: nowrap;
        }

        .grade-item-sizes-value {
            font-size: 0.813rem;
            color: var(--text-primary);
            line-height: 1.5;
            word-break: break-word;
        }

        .grade-item-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .grade-stat {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .grade-stat-label {
            font-size: 0.688rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .grade-stat-value {
            font-size: 0.938rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .grade-stat-value.highlight {
            color: var(--success-color);
        }

        .grade-empty {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--text-muted);
        }

        .grade-empty-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 0.75rem;
            opacity: 0.5;
        }

        .grade-empty-text {
            font-size: 0.875rem;
        }

        /* ADD TO CART BUTTON */
        .btn-add-cart {
            width: 100%;
            height: 44px;
            background: var(--cart-color);
            color: #ffffff;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 0.813rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .btn-add-cart:hover {
            background: #166534;
            transform: translateY(-1px);
        }

        .btn-add-cart:active {
            transform: translateY(0);
        }

        .btn-add-cart svg {
            width: 18px;
            height: 18px;
        }

        .btn-add-cart:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #9ca3af;
        }
        
        .btn-add-cart:disabled:hover {
            background: #9ca3af;
            transform: none;
        }

.btn-add-cart.added::after {
  content: '✓ Adicionado';
  }
  
  /* ADD TO CART CONTAINER */
  .add-to-cart-container {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.75rem;
      align-items: stretch;
  }
  
  .quantity-selector {
      display: flex;
      align-items: center;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      background: var(--bg-secondary);
      overflow: hidden;
      flex-shrink: 0;
  }
  
  .quantity-selector .qty-btn {
      width: 36px;
      height: 44px;
      border: none;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      transition: var(--transition);
      font-size: 1.25rem;
      font-weight: 500;
  }
  
  .quantity-selector .qty-btn:hover {
      background: var(--bg-tertiary);
  }
  
  .quantity-selector .qty-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
  }
  
  .quantity-selector .qty-btn:disabled:hover {
      background: transparent;
  }
  
  .quantity-selector .qty-input {
      width: 48px;
      height: 44px;
      border: none;
      border-left: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      text-align: center;
      font-size: 0.938rem;
      font-weight: 600;
      color: var(--text-primary);
      -moz-appearance: textfield;
  }
  
  .quantity-selector .qty-input::-webkit-outer-spin-button,
  .quantity-selector .qty-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  
  .quantity-selector .qty-input:focus {
      outline: none;
      background: var(--bg-secondary);
  }
  
  .add-to-cart-container .btn-add-cart {
      flex: 1;
      margin-top: 0;
  }
  
  .qty-max-label {
      font-size: 0.688rem;
      color: var(--text-muted);
      text-align: center;
      margin-top: 0.25rem;
  }
  
  /* CART DRAWER */
        .cart-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: 420px;
            background: var(--bg-secondary);
            z-index: 3001;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 40px rgba(0,0,0,0.15);
        }

        .cart-drawer.active {
            transform: translateX(0);
        }

        .cart-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .cart-drawer-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .cart-drawer-title svg {
            width: 24px;
            height: 24px;
            color: var(--cart-color);
        }

        .cart-count-badge {
            font-size: 0.75rem;
            font-weight: 600;
            color: #ffffff;
            background: var(--cart-color);
            padding: 0.25rem 0.625rem;
            border-radius: 100px;
        }

        .btn-close-cart {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: var(--bg-tertiary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
        }

        .btn-close-cart:hover {
            background: var(--border-color);
        }

        .cart-drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            -webkit-overflow-scrolling: touch;
        }

        .cart-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            padding: 2rem;
        }

        .cart-empty-icon {
            width: 64px;
            height: 64px;
            color: var(--text-muted);
            opacity: 0.5;
            margin-bottom: 1rem;
        }

        .cart-empty-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .cart-empty-text {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .cart-items {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .cart-item {
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            padding: 1rem;
            position: relative;
            animation: fadeIn 0.3s ease;
            display: flex;
            gap: 0.875rem;
        }

        .cart-item-image {
            width: 70px;
            height: 70px;
            flex-shrink: 0;
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: var(--bg-secondary);
        }

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

        .cart-item-info {
            flex: 1;
            min-width: 0;
        }

        .cart-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        .cart-item-title {
            font-size: 0.813rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.4;
            flex: 1;
            padding-right: 0.5rem;
        }

        .btn-remove-item {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: var(--bg-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .btn-remove-item:hover {
            background: #fee2e2;
            color: #dc2626;
        }

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

        .cart-item-codes {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .cart-item-code {
            font-size: 0.688rem;
            font-weight: 500;
            color: var(--text-muted);
            background: var(--bg-secondary);
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);
        }

        .cart-item-code strong {
            color: var(--text-secondary);
        }

        .cart-item-grade {
            font-size: 0.75rem;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            margin-bottom: 0.75rem;
            line-height: 1.5;
        }

        .cart-item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-item-qty {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .qty-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 600;
        }

        .qty-btn:hover:not(:disabled) {
            border-color: var(--accent);
            background: var(--accent);
            color: #ffffff;
        }
        
        .qty-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .qty-value {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            min-width: 24px;
            text-align: center;
        }

        .cart-item-price {
            font-size: 1rem;
            font-weight: 700;
            color: var(--cart-color);
        }

        .cart-drawer-footer {
            padding: 1rem 1.25rem;
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
            background: var(--bg-secondary);
        }

        .cart-summary {
            margin-bottom: 1rem;
        }

        .cart-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .cart-summary-row:last-child {
            margin-bottom: 0;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
        }

        .cart-summary-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .cart-summary-value {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .cart-summary-row:last-child .cart-summary-label {
            font-weight: 600;
            color: var(--text-primary);
        }

        .cart-summary-row:last-child .cart-summary-value {
            font-size: 1.25rem;
            color: var(--cart-color);
        }

        .cart-actions {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0.5rem;
        }

        .cart-actions .btn-checkout {
            grid-column: 1 / -1;
        }

        .btn-checkout {
            width: 100%;
            height: 52px;
            background: var(--cart-color);
            color: #ffffff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.938rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-checkout:hover {
            background: #15803d;
            transform: translateY(-1px);
        }

        .btn-checkout:disabled,
        .btn-checkout[disabled] {
            background: #9ca3af;
            cursor: not-allowed;
            transform: none;
        }

        .btn-checkout:disabled:hover,
        .btn-checkout[disabled]:hover {
            background: #9ca3af;
            transform: none;
        }

        .btn-checkout svg {
            width: 20px;
            height: 20px;
        }

        .btn-clear-cart {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            padding: 0.625rem;
            background: none;
            color: #000000;
            border: 1px solid #000000;
            border-radius: 0.5rem;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-clear-cart:hover {
            border-color: #dc2626;
            color: #dc2626;
            background: #fef2f2;
        }


/* ===== 07-lightbox-toast.css ===== */
        /* LIGHTBOX - Image Viewer */
        .lightbox-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 4000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .lightbox-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .lightbox-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
        }

        .lightbox-title {
            color: #ffffff;
            font-size: 0.875rem;
            font-weight: 500;
            max-width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .lightbox-counter {
            color: rgba(255,255,255,0.7);
            font-size: 0.813rem;
            font-weight: 500;
        }

        .lightbox-close {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            transition: var(--transition);
        }

        .lightbox-close:hover {
            background: rgba(255,255,255,0.25);
            transform: scale(1.05);
        }

        .lightbox-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem 1rem 6rem;
            position: relative;
            overflow: hidden;
        }

        .lightbox-image-wrapper {
            position: relative;
            max-width: 100%;
            max-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: var(--radius-md);
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.3s ease, transform 0.3s ease;
            user-select: none;
            -webkit-user-drag: none;
        }

        .lightbox-image.loaded {
            opacity: 1;
            transform: scale(1);
        }

        .lightbox-loading {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255,255,255,0.2);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            transition: var(--transition);
            z-index: 10;
        }

        .lightbox-nav:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-50%) scale(1.05);
        }

        .lightbox-nav:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .lightbox-nav:disabled:hover {
            background: rgba(255,255,255,0.15);
            transform: translateY(-50%);
        }

        .lightbox-nav-prev {
            left: 1rem;
        }

        .lightbox-nav-next {
            right: 1rem;
        }

        @media (max-width: 767px) {
            .lightbox-nav {
                width: 40px;
                height: 40px;
            }
            .lightbox-nav-prev {
                left: 0.5rem;
            }
            .lightbox-nav-next {
                right: 0.5rem;
            }
        }

        .lightbox-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1rem;
            background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
        }

        .lightbox-thumbnails {
            display: flex;
            gap: 0.5rem;
            overflow-x: auto;
            max-width: 100%;
            padding: 0.25rem;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .lightbox-thumbnails::-webkit-scrollbar {
            display: none;
        }

        .lightbox-thumb {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            border-radius: var(--radius-sm);
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: var(--transition);
            opacity: 0.6;
        }

        .lightbox-thumb:hover {
            opacity: 0.9;
        }

        .lightbox-thumb.active {
            border-color: #ffffff;
            opacity: 1;
        }

        .lightbox-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .lightbox-dots {
            display: flex;
            gap: 0.375rem;
        }

        .lightbox-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: var(--transition);
        }

        .lightbox-dot:hover {
            background: rgba(255,255,255,0.6);
        }

        .lightbox-dot.active {
            background: #ffffff;
            width: 24px;
            border-radius: 4px;
        }

        /* Toast notification */
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--accent);
            color: #ffffff;
            padding: 0.875rem 1.5rem;
            border-radius: var(--radius-lg);
            font-size: 0.875rem;
            font-weight: 500;
            box-shadow: var(--shadow-lg);
            z-index: 100000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .toast.success {
            background: #059669;
        }

        .toast.visible {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .toast svg {
            width: 20px;
            height: 20px;
        }


/* ===== 08-checkout-cliente-resultado.css ===== */
        /* CHECKOUT MODAL */
        .checkout-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 4000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .checkout-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .checkout-modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: 420px;
            background: var(--bg-secondary);
            z-index: 4001;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 40px rgba(0,0,0,0.15);
        }

        .checkout-modal.active {
            transform: translateX(0);
        }

        .checkout-modal-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .checkout-modal-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .checkout-modal-title svg {
            width: 24px;
            height: 24px;
            color: var(--cart-color);
        }

        .btn-close-checkout {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: var(--bg-tertiary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
        }

        .btn-close-checkout:hover {
            background: var(--border-color);
        }

        .checkout-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.25rem;
            -webkit-overflow-scrolling: touch;
        }

        .checkout-form-group {
            margin-bottom: 1.25rem;
        }

        .checkout-form-group:last-child {
            margin-bottom: 0;
        }

        .checkout-form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .checkout-form-input {
            width: 100%;
            height: 48px;
            padding: 0 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            font-size: 0.938rem;
            color: var(--text-primary);
            transition: var(--transition);
        }

        .checkout-form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
        }

        .checkout-cnpj-input-group {
            display: flex;
            gap: 0.5rem;
        }

        .checkout-cnpj-input-group .checkout-form-input {
            flex: 1;
        }

        /* Linha de botões abaixo do CNPJ (modo iframe com dois botões) */
        .checkout-cnpj-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .checkout-cnpj-actions { flex-wrap: wrap; }
        /* encolhem e quebram de linha no celular ("Consultar CNPJ" saía 24 px fora da tela em 390) */
        .checkout-cnpj-actions .btn-pesquisar-cliente,
        .checkout-cnpj-actions .btn-consultar-cnpj {
            flex: 1 1 140px;
            min-width: 0;
            flex-shrink: 1;
            padding: 0 0.75rem;
            justify-content: center;
        }

        .btn-consultar-cnpj {
            height: 48px;
            padding: 0 1.5rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
        }

        .btn-consultar-cnpj:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .btn-consultar-cnpj:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-consultar-cnpj svg {
            flex-shrink: 0;
        }

        .checkout-form-select {
            width: 100%;
            height: 48px;
            padding: 0 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            font-size: 0.938rem;
            color: var(--text-primary);
            appearance: none;
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 18px;
            transition: var(--transition);
        }

        .checkout-form-select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
        }

        .campo-invalido {
            border-color: #dc3545 !important;
            background-color: rgba(220, 53, 69, 0.06) !important;
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12) !important;
        }

        .label-obrigatorio-faltante {
            color: #dc3545 !important;
        }

        .checkout-info-box {
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            padding: 1rem;
        }

        .checkout-info-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.25rem;
        }

        .checkout-info-value {
            font-size: 0.938rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .checkout-datas-entrega-container {
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            padding: 1rem;
            margin-top: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .checkout-datas-entrega-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .checkout-datas-entrega-header svg {
            color: var(--primary-color);
        }

        .checkout-datas-entrega-body {
            display: flex;
            flex-direction: column;
            gap: 0.875rem;
        }

        .checkout-data-entrega-item {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .checkout-data-entrega-label {
            font-size: 0.813rem;
            font-weight: 600;
            color: var(--text-secondary);
        }

        .checkout-data-entrega-select {
            width: 100%;
            height: 48px;
            padding: 0 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-primary);
            font-size: 0.938rem;
            color: var(--text-primary);
            transition: var(--transition);
            cursor: pointer;
        }

        .checkout-data-entrega-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
        }

        .checkout-data-entrega-select:hover {
            border-color: var(--primary-color);
        }

        .checkout-data-entrega-info {
            width: 100%;
            padding: 1rem;
            background: #f3f4f6;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 0.938rem;
            font-weight: 600;
            color: #1f2937;
            display: flex;
            align-items: center;
            min-height: 48px;
        }

        .checkout-cliente-info {
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            padding: 1rem;
            margin-top: 1.25rem;
            margin-bottom: 1.25rem;
            display: none;
        }

        .checkout-cliente-info.visible {
            display: block;
        }

        .checkout-cliente-info-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }

        .checkout-cliente-info-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .btn-edit-cliente {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
        }

        .btn-edit-cliente:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .checkout-cliente-info-item {
            font-size: 0.813rem;
            color: var(--text-secondary);
            margin-bottom: 0.375rem;
            line-height: 1.5;
        }

        .checkout-cliente-info-item:last-child {
            margin-bottom: 0;
        }

        .checkout-cliente-info-item strong {
            color: var(--text-primary);
        }

        /* Info do Representante */
        .checkout-representante-info {
            background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);
            border: 1px solid #d1d5db;
            border-radius: var(--radius-md);
            padding: 1rem;
            margin-top: 1rem;
            margin-bottom: 1.25rem;
            display: none;
        }

        .checkout-representante-info.visible {
            display: block;
        }

        .checkout-representante-info-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .checkout-representante-info-header svg {
            color: #6b7280;
        }

        .checkout-representante-info-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: #374151;
        }

        .checkout-representante-info-item {
            font-size: 0.813rem;
            color: var(--text-secondary);
            margin-bottom: 0.375rem;
            line-height: 1.5;
        }

        .checkout-representante-info-item:last-child {
            margin-bottom: 0;
        }

        .checkout-representante-info-item strong {
            color: #374151;
        }

        /* Cards de representantes por marca */
        .representante-marca-card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: var(--radius-sm);
            padding: 0.75rem;
            margin-bottom: 0.5rem;
        }

        .representante-marca-card:last-child {
            margin-bottom: 0;
        }

        .representante-marca-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .representante-marca-badge {
            display: inline-block;
            background: #6b7280;
            color: white;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.2rem 0.5rem;
            border-radius: 9999px;
            text-transform: uppercase;
        }

        .btn-alterar-representante {
            background: none;
            border: none;
            color: #6b7280;
            font-size: 0.7rem;
            cursor: pointer;
            padding: 0.2rem 0.4rem;
            border-radius: var(--radius-sm);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .btn-alterar-representante:hover {
            background: #e5e7eb;
            color: #374151;
        }

        .representante-marca-card .checkout-representante-info-item {
            margin-bottom: 0.25rem;
            font-size: 0.75rem;
        }

        .representante-marca-card .checkout-representante-info-item:last-child {
            margin-bottom: 0;
        }

        /* Select de representantes */
        .representante-select-container {
            margin-top: 0.5rem;
            display: none;
        }

        .representante-select-container.visible {
            display: block;
        }

        .representante-select {
            width: 100%;
            padding: 0.5rem;
            font-size: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: var(--radius-sm);
            background: white;
            color: var(--text-primary);
            cursor: pointer;
        }

        .representante-select:focus {
            outline: none;
            border-color: #9ca3af;
            box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.2);
        }

        #representantesDinamicos:empty::after {
            content: 'Carregando representantes...';
            color: var(--text-muted);
            font-size: 0.813rem;
            font-style: italic;
        }

        /* Alerta de Dados Incompletos */
        .checkout-alerta-dados-incompletos {
            background: #fef3c7;
            border: 2px solid #f59e0b;
            border-radius: var(--radius-md);
            padding: 1rem;
            margin-top: 1.25rem;
            margin-bottom: 1.25rem;
            display: flex;
            gap: 0.875rem;
            animation: slideDown 0.3s ease-out;
        }

        .checkout-alerta-icon {
            flex-shrink: 0;
            color: #f59e0b;
        }

        .checkout-alerta-conteudo {
            flex: 1;
        }

        .checkout-alerta-titulo {
            font-size: 0.875rem;
            font-weight: 700;
            color: #92400e;
            margin-bottom: 0.25rem;
        }

        .checkout-alerta-mensagem {
            font-size: 0.813rem;
            color: #78350f;
            line-height: 1.5;
            margin-bottom: 0.5rem;
        }

        .checkout-alerta-campos {
            font-size: 0.75rem;
            color: #92400e;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        /* Novo Cliente Form */
        .checkout-novo-cliente {
            background: var(--bg-secondary);
            border: 2px solid var(--accent);
            border-radius: var(--radius-md);
            margin-top: 1.25rem;
            margin-bottom: 1.25rem;
            overflow: hidden;
            animation: slideDown 0.3s ease-out;
            box-shadow: var(--shadow-md);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .checkout-novo-cliente-header {
            background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
            padding: 0.875rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .checkout-novo-cliente-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            gap: 0.625rem;
        }

        .checkout-novo-cliente-title svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        .checkout-novo-cliente-body {
            padding: 1rem;
        }

        .checkout-form-row {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .checkout-form-row:last-of-type {
            margin-bottom: 1rem;
        }

        .checkout-form-row .checkout-form-group {
            flex: 1;
            margin-bottom: 0;
        }

        .checkout-novo-cliente-actions {
            display: flex;
            gap: 0.75rem;
            padding-top: 0.5rem;
        }

        .btn-cadastrar-cliente {
            flex: 1;
            height: 44px;
            border: none;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: var(--transition);
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
        }

        .btn-cadastrar-cliente:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
            transform: translateY(-1px);
        }

        .btn-cadastrar-cliente:active {
            transform: translateY(0);
        }

        .btn-cadastrar-cliente:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .btn-cadastrar-cliente svg {
            width: 18px;
            height: 18px;
        }

        .btn-cancelar-cadastro {
            height: 44px;
            padding: 0 1.25rem;
            border: 2px solid var(--accent);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
        }

        .btn-cancelar-cadastro:hover {
            background: var(--bg-tertiary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .btn-cancelar-cadastro svg {
            width: 18px;
            height: 18px;
        }

        /* Loading indicator para consulta CNPJ */
        .checkout-cnpj-loading {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            margin-top: 0.75rem;
            background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
            border-radius: var(--radius-md);
            color: white;
            font-size: 0.875rem;
            font-weight: 500;
            box-shadow: var(--shadow-accent);
            animation: slideDown 0.3s ease-out;
        }

        .checkout-cnpj-loading .spinner {
            width: 20px;
            height: 20px;
            animation: rotate 2s linear infinite;
        }

        .checkout-cnpj-loading .path {
            stroke: white;
            stroke-linecap: round;
            animation: dash 1.5s ease-in-out infinite;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1, 150;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -35;
            }
            100% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -124;
            }
        }

        .checkout-modal-footer {
            padding: 1rem 1.25rem;
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
            background: var(--bg-secondary);
        }

        .checkout-actions {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .btn-checkout-confirm {
            width: 100%;
            height: 52px;
            background: var(--cart-color);
            color: #ffffff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.938rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-checkout-confirm:hover {
            background: #15803d;
            transform: translateY(-1px);
        }

        .btn-checkout-confirm:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-checkout-confirm:disabled:hover {
            transform: none;
        }

        .btn-checkout-cancel {
            width: 100%;
            height: 44px;
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-checkout-cancel:hover {
            background: var(--bg-tertiary);
        }

        /* SPINNER ANIMATION */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .spinner {
            display: inline-block;
            animation: spin 1s linear infinite;
        }

        /* RESULT MODAL */
        .result-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 6000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .result-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .result-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            background: var(--bg-secondary);
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            z-index: 6001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .result-modal.active {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        .result-modal-content {
            display: flex;
            flex-direction: column;
            max-height: 80vh;
            overflow: hidden;
        }

        .result-modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .result-modal-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .btn-close-result {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: var(--bg-tertiary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
        }

        .btn-close-result:hover {
            background: var(--border-color);
        }

        .result-modal-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 1.5rem;
            min-height: 0;
            -webkit-overflow-scrolling: touch;
        }

        .result-modal-body::-webkit-scrollbar {
            width: 8px;
        }

        .result-modal-body::-webkit-scrollbar-track {
            background: var(--bg-tertiary);
            border-radius: 4px;
        }

        .result-modal-body::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }

        .result-modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        .result-item {
            background: var(--bg-tertiary);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .result-item:last-child {
            margin-bottom: 0;
        }

        .result-item.success {
            border-left: 4px solid #10b981;
        }

        .result-item.error {
            border-left: 4px solid #ef4444;
        }

        .result-item-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }

        .result-item-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .result-item-icon.success {
            color: #046e4b;
        }

        .result-item-icon.error {
            color: #ef4444;
        }

        .result-item-title {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1rem;
        }

        .result-item-details {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-top: 0.5rem;
        }

        .result-item-details strong {
            color: var(--cart-color);
            font-weight: 600;
        }

        .result-item-error {
            font-size: 0.875rem;
            color: #ef4444;
            margin-top: 0.5rem;
            padding: 0.5rem;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 4px;
        }

        .result-modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            flex-shrink: 0;
        }

        .btn-result-close {
            padding: 0.75rem 2rem;
            background: var(--cart-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-result-close:hover {
            background: var(--cart-hover-color);
        }

        /* AVISO DE BLOQUEIO FINANCEIRO (acima do checkout, z-index do result-modal) */
        .bloqueio-financeiro-modal {
            max-width: 480px;
        }

        .bloqueio-financeiro-icone {
            width: 52px;
            height: 52px;
            margin: 0 auto 1rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
        }

        .bloqueio-financeiro-texto {
            margin: 0 0 0.85rem;
            color: var(--text-primary);
            line-height: 1.55;
            text-align: center;
        }

        .bloqueio-financeiro-nota {
            margin-bottom: 0;
            color: var(--text-muted);
            font-size: 0.9rem;
        }


/* ===== 09-edicao-carrinho-tablet.css ===== */
        /* EDIT MODAL */
        .edit-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 5000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .edit-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .edit-modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            max-width: 500px;
            background: var(--bg-secondary);
            z-index: 5001;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 40px rgba(0,0,0,0.15);
        }

        .edit-modal.active {
            transform: translateX(0);
        }

        .edit-modal-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .edit-modal-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .edit-modal-title svg {
            width: 24px;
            height: 24px;
            color: var(--accent);
        }

        .btn-close-edit-modal {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: var(--bg-tertiary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--text-primary);
        }

        .btn-close-edit-modal:hover {
            background: var(--border-color);
        }

        .edit-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.25rem;
            -webkit-overflow-scrolling: touch;
        }

        .edit-form-section {
            margin-bottom: 1.5rem;
        }

        .edit-form-section:last-child {
            margin-bottom: 0;
        }

        .edit-form-section-title {
            font-size: 0.938rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .edit-form-row {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .edit-form-row:last-of-type {
            margin-bottom: 0;
        }

        .edit-form-group {
            flex: 1;
            margin-bottom: 0.75rem;
        }

        .edit-form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .edit-form-input {
            width: 100%;
            height: 48px;
            padding: 0 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            font-size: 0.938rem;
            color: var(--text-primary);
            transition: var(--transition);
        }

        .edit-form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
        }

        .edit-form-input:disabled,
        .edit-form-input[disabled] {
            background: #e9ecef;
            color: #6c757d;
            border-color: #ced4da;
            cursor: not-allowed;
            opacity: 1;
        }

        .edit-modal-footer {
            padding: 1rem 1.25rem;
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
            background: var(--bg-secondary);
            display: flex;
            gap: 0.75rem;
        }

        .btn-edit-save {
            flex: 1;
            height: 48px;
            border: none;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: var(--transition);
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
        }

        .btn-edit-save:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
            transform: translateY(-1px);
        }

        .btn-edit-save:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .btn-edit-save svg {
            width: 18px;
            height: 18px;
        }

        .btn-edit-cancel {
            height: 48px;
            padding: 0 1.25rem;
            border: 2px solid var(--accent);
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-edit-cancel:hover {
            background: var(--bg-tertiary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        /* ===== Carrinho em tela cheia no tablet: representante no app (html.rp-rep, core/include/rp_offline.php) =====
           Opção A escolhida pelo usuário (22/10/2026): lista em tabela + resumo fixo ao lado (deitado) ou embaixo (em pé).
           Ligado por JS (classe .ct-modo na gaveta, carrinhoTablet()) só ≥768px; o resto do site não muda.
           Desde 29/10/2026 também no navegador para o representante logado (html.ct-rep), igual ao iPad. */
        html.rp-rep .cart-drawer.ct-modo, html.ct-rep .cart-drawer.ct-modo {
            max-width: none; display: grid; background: var(--bg-primary);
            grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto minmax(0, 1fr);
        }
        .ct-modo .cart-drawer-header { grid-column: 1 / -1; grid-row: 1; padding: 0.625rem 1.25rem; background: var(--bg-secondary); }
        .ct-modo .cart-drawer-title { font-size: 1rem; }
        .ct-modo .rp-cb {
            grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center;
            gap: 0.5rem 1rem; padding: 0.5rem 1.25rem; background: var(--bg-secondary);
        }
        .ct-modo .rp-cb-linha:first-child { flex: 1 1 320px; }
        .ct-modo .rp-cb-btn.cheio { flex: 0 0 auto; }
        .ct-modo .rp-cb-alerta { flex-basis: 100%; }
        .ct-modo .cart-drawer-content { grid-column: 1; grid-row: 3; padding: 1rem 1.25rem; min-height: 0; }
        .ct-modo .cart-drawer-footer {
            grid-column: 2; grid-row: 3; min-height: 0; overflow-y: auto; padding: 1.25rem;
            border-top: 0; border-left: 1px solid var(--border-color); background: var(--bg-secondary);
            display: flex; flex-direction: column;
        }
        /* seções e cartões */
        .ct-secao { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.125rem 0.5rem; cursor: pointer; font-size: 0.938rem; font-weight: 700; color: var(--text-primary); }
        .ct-secao svg { flex-shrink: 0; transition: transform 0.2s ease; }
        .ct-sec-info { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
        .ct-sec-valor { margin-left: auto; font-size: 0.938rem; }
        .ct-sec-corpo { margin-bottom: 1.25rem; }   /* toggleCartSection troca display p/ block */
        .ct-sec-corpo > .ct-card + .ct-card { margin-top: 0.75rem; }
        .ct-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
        .ct-card-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.625rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--border-color); }
        .ct-card-cab b { font-size: 0.813rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; }
        .ct-card-sub { font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 6px; }
        .ct-card-pares { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }
        .ct-card-valor { font-size: 0.875rem; font-weight: 700; color: var(--cart-color); }
        .ct-card > div[style*="fff7ed"] { margin: 0.5rem 1rem !important; }
        /* tabela */
        .ct-cols, .cart-item.ct-linha {
            display: grid; grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1.5fr) 124px 52px 104px 32px;
            gap: 0.75rem; align-items: center; padding: 0.5rem 1rem;
        }
        .ct-cols { font-size: 0.656rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-tertiary); padding-top: 0.375rem; padding-bottom: 0.375rem; }
        .ct-cols span:nth-child(5), .ct-cols span:nth-child(6) { text-align: right; }
        .cart-item.ct-linha { background: transparent; border-radius: 0; border-top: 1px solid var(--border-color); animation: none; }
        .ct-cols + .cart-item.ct-linha { border-top: 0; }
        .ct-foto { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--bg-tertiary); }
        .ct-nome { font-size: 0.813rem; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
        .ct-cod { font-size: 0.719rem; color: var(--text-muted); margin-top: 0.125rem; }
        .ct-grade { display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.719rem; color: var(--text-secondary); }
        .ct-grade span { padding: 0.125rem 0.375rem; border-radius: 6px; background: var(--bg-tertiary); white-space: nowrap; }
        .ct-grade b { font-weight: 600; color: var(--text-primary); }
        .ct-qtd { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
        .ct-qtd button {
            width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary);
            color: var(--text-primary); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
        }
        .ct-qtd button:disabled { opacity: 0.4; cursor: not-allowed; }
        .ct-qtd > span { min-width: 22px; text-align: center; font-weight: 700; font-size: 0.875rem; color: var(--text-primary); }
        .ct-qtd small { flex-basis: 100%; font-size: 0.656rem; color: var(--text-muted); }
        .ct-pares { text-align: right; font-size: 0.813rem; color: var(--text-secondary); }
        .ct-valor { text-align: right; font-size: 0.875rem; font-weight: 700; color: var(--cart-color); white-space: nowrap; }
        .ct-valor s { display: block; font-size: 0.719rem; font-weight: 500; color: var(--text-muted); }
        .ct-valor em { font-style: normal; color: #dc2626; }
        .ct-remover { width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
        .ct-remover:hover { color: #dc2626; }
        .ct-linha .rp-ci-falta { margin-top: 0.25rem; }
        /* resumo */
        .ct-resumo { display: flex; flex-direction: column; gap: 0.875rem; flex: 1; }
        .ct-res-titulo { font-size: 0.688rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
        .ct-res-linhas { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.813rem; }
        .ct-res-linhas div { display: flex; justify-content: space-between; gap: 0.75rem; }
        .ct-res-linhas span { color: var(--text-secondary); }
        .ct-res-linhas b { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
        .ct-res-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
        .ct-res-total span { font-weight: 600; color: var(--text-primary); }
        .ct-res-total b { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
        .ct-res-aviso { font-size: 0.75rem; line-height: 1.4; color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 0.5rem 0.625rem; }
        .ct-res-rep select { width: 100%; height: 38px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); padding: 0 0.5rem; }
        .ct-res-acoes { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; }
        .ct-res-acoes .btn-checkout { height: 50px; font-size: 0.938rem; }
        .ct-res-sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
        .ct-res-sec button { height: 40px; padding: 0 0.25rem; font-size: 0.781rem; margin: 0; width: 100%; }
        /* iPad em pé: uma coluna, resumo embaixo em faixa */
        @media (max-width: 1099px) {
            html.rp-rep .cart-drawer.ct-modo, html.ct-rep .cart-drawer.ct-modo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
            .ct-modo .cart-drawer-footer { grid-column: 1; grid-row: 4; border-left: 0; border-top: 1px solid var(--border-color); padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom)); }
            .ct-resumo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: center; }
            .ct-res-titulo { display: none; }
            .ct-res-linhas { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
            .ct-res-linhas div { justify-content: flex-start; gap: 0.375rem; }
            .ct-res-total { padding-top: 0; border-top: 0; gap: 0.75rem; }
            .ct-res-aviso, .ct-res-rep, .ct-res-acoes { grid-column: 1 / -1; }
            .ct-res-acoes { flex-direction: row; margin-top: 0; }
            .ct-res-acoes .btn-checkout { flex: 2 1 0; height: 46px; }
            .ct-res-sec { flex: 3 1 0; }
            .ct-res-sec button { height: 46px; }
            .ct-cols, .cart-item.ct-linha { grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1.3fr) 116px 44px 96px 32px; gap: 0.625rem; padding-left: 0.75rem; padding-right: 0.75rem; }
            .ct-foto { width: 44px; height: 44px; }
        }
        /* dividir / reagrupar pedidos (botões no cabeçalho do cartão + janela) */
        .ct-card-acoes { display: flex; gap: 0.375rem; margin-left: 0.25rem; }
        .ct-card-acoes button { height: 30px; padding: 0 0.625rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary);
            color: var(--text-primary); font-size: 0.75rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
        .ct-card-acoes button:hover { border-color: var(--accent); }
        .ct-modal-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 10020; display: flex; align-items: center; justify-content: center; padding: 1rem; }
        .ct-modal { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; background: var(--bg-secondary); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; }
        .ct-modal-cab { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--border-color); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
        .ct-modal-cab button { margin-left: auto; width: 34px; height: 34px; border: 0; background: transparent; font-size: 1.25rem; color: var(--text-muted); cursor: pointer; }
        .ct-modal-corpo { padding: 1rem 1.125rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.813rem; color: var(--text-secondary); }
        .ct-modal-corpo p { margin: 0; line-height: 1.45; }
        .ct-modal-itens { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
        .ct-modal-itens label { display: flex; gap: 0.625rem; align-items: center; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border-color); cursor: pointer; color: var(--text-primary); }
        .ct-modal-itens label:first-child { border-top: 0; }
        .ct-modal-itens input { width: 18px; height: 18px; flex-shrink: 0; }
        .ct-modal-itens small { display: block; color: var(--text-muted); font-size: 0.719rem; }
        .ct-modal-campo { display: flex; flex-direction: column; gap: 0.25rem; }
        .ct-modal-campo b { font-size: 0.75rem; color: var(--text-primary); }
        .ct-modal-campo input, .ct-modal-campo select { height: 42px; border: 1px solid var(--border-color); border-radius: 8px; padding: 0 0.625rem; background: var(--bg-primary); color: var(--text-primary); font-size: 0.875rem; }
        .ct-modal-rodape { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.75rem 1.125rem; border-top: 1px solid var(--border-color); }
        .ct-modal-rodape button { height: 42px; padding: 0 1rem; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-weight: 600; cursor: pointer; }
        .ct-modal-rodape .ct-ok { background: var(--accent); border-color: var(--accent); color: #fff; }
        .ct-modal-rodape .ct-ok:disabled { opacity: 0.45; cursor: not-allowed; }
        .ct-modal-erro { color: #b91c1c; font-weight: 600; }
        /* barra e lista dos carrinhos salvos na web (CarrinhoWeb) — mesmo desenho da barra do app (catalogo.js);
           :where() sem peso: no carrinho em tela cheia valem as regras .ct-modo .rp-cb (barra em linha) */
        :where(html.ct-rep) .rp-cb { padding: .75rem 1.25rem; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; }
        :where(html.ct-rep) .rp-cb-linha { display: flex; align-items: center; gap: .5rem; }
        :where(html.ct-rep) .rp-cb-cli { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
        :where(html.ct-rep) .rp-cb-rot { font-size: .688rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
        :where(html.ct-rep) .rp-cb-nome { font-size: .875rem; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
        :where(html.ct-rep) .rp-cb-nome.vazio { font-weight: 500; color: var(--text-secondary); }
        :where(html.ct-rep) .rp-cb-cliente { font-size: .75rem; color: var(--text-secondary); margin-top: .1rem; overflow-wrap: anywhere; }
        :where(html.ct-rep) .rp-cb-cliente b { font-weight: 600; color: var(--text-primary); }
        :where(html.ct-rep) .rp-cb-cliente.vazio { color: var(--text-muted); }
        :where(html.ct-rep) .rp-cl-res { display: flex; flex-direction: column; gap: .5rem; }
        :where(html.ct-rep) .rp-cl-corpo > * { flex-shrink: 0; }   /* lista longa rola; a busca não encolhe */
        :where(html.ct-rep) .rp-cl-cli { text-align: left; width: 100%; border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: var(--radius-sm);
            padding: .6rem .75rem; cursor: pointer; font-family: inherit; color: var(--text-primary); }
        :where(html.ct-rep) .rp-cl-cli:hover { border-color: var(--accent); }
        :where(html.ct-rep) .rp-cl-cli.sem { border-style: dashed; }
        :where(html.ct-rep) .rp-cb-situacao { font-size: .75rem; font-weight: 600; color: var(--text-muted); }
        :where(html.ct-rep) .rp-cb-situacao.pendente { color: #a66a1e; }
        :where(html.ct-rep) .rp-cb-btn { flex-shrink: 0; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: var(--radius-sm);
            padding: .45rem .7rem; font-size: .813rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-family: inherit; }
        :where(html.ct-rep) .rp-cb-btn:disabled { opacity: .45; cursor: not-allowed; }
        :where(html.ct-rep) .rp-cb-btn.forte { background: var(--accent); border-color: var(--accent); color: #fff; }
        :where(html.ct-rep) .rp-cb-btn.cheio { flex: 1; justify-content: center; }
        :where(html.ct-rep) .rp-cl-corpo { padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
        :where(html.ct-rep) .rp-cl-item { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); }
        :where(html.ct-rep) .rp-cl-item.aberto { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
        :where(html.ct-rep) .rp-cl-info { flex: 1; min-width: 0; }
        :where(html.ct-rep) .rp-cl-nome { font-weight: 600; font-size: .9rem; color: var(--text-primary); overflow-wrap: anywhere; }
        :where(html.ct-rep) .rp-cl-sub { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
        :where(html.ct-rep) .rp-cl-acoes { display: flex; gap: .35rem; flex-shrink: 0; }
        :where(html.ct-rep) .rp-cl-x { border: 1px solid var(--border-color); background: none; border-radius: var(--radius-sm); width: 34px; height: 34px; display: inline-flex;
            align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); }
        :where(html.ct-rep) .rp-cl-x.confirmar { width: auto; padding: 0 .6rem; color: #fff; background: #dc2626; border-color: #dc2626; font-size: .75rem; font-weight: 600; }
        :where(html.ct-rep) .rp-cl-rodape { padding: .75rem 1rem; border-top: 1px solid var(--border-color); display: flex; gap: .5rem; }
        :where(html.ct-rep) .rp-cl-vazio { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: .875rem; }
        :where(html.ct-rep) .rp-cl-busca { width: 100%; height: 44px; padding: 0 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary);
            font-size: .938rem; color: var(--text-primary); font-family: inherit; }
        /* tablet em diante: o celular segue a largura própria do modal (com 92vw o modal ficava estreito e rolava de lado) */
        @media (min-width: 768px) {
            html.rp-rep .checkout-modal, html.ct-rep .checkout-modal { max-width: min(720px, 92vw); }
        }


/* ===== 10-tema-escuro.css ===== */
        /* ===== Tema escuro (html.tema-escuro, como no portal): as cores do catálogo são variáveis ===== */
        html.tema-escuro {
            color-scheme: dark;
            --bg-primary: #14181c; --bg-secondary: #1b2126; --bg-tertiary: #363636;
            --text-primary: #E0E0E0; --text-secondary: #A0A0A0; --text-muted: #8f8f8f; --border-color: #444444;
            --accent: #555555; --accent-dark: #444444; --accent-light: #707070; --accent-hover: #444444;
            --gradient-start: #1b2126; --gradient-mid: #232a30; --gradient-end: #363636;
            --success-color: #E0E0E0; --success-bg: #1e3a2b; --cart-color: #E0E0E0; --cart-bg: #1e3a2b;
            --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.45);
            --shadow-lg: 0 12px 40px rgba(0,0,0,.55); --shadow-accent: 0 4px 20px rgba(0,0,0,.5);
        }
        html.tema-escuro body { background: var(--bg-primary); color: var(--text-primary); }
        html.tema-escuro .share-modal, html.tema-escuro .share-cart-table thead, html.tema-escuro .share-cart-table td,
        html.tema-escuro .share-filter-tag, html.tema-escuro .representante-marca-card, html.tema-escuro .representante-select {
            background: #1b2126; color: #E0E0E0; border-color: #444444;
        }
        html.tema-escuro .carousel-btn:hover { background: #363636; }
        /* cartões de logo das marcas no escuro: fundo como antes, borda branca e logo na versão branca
           (assets/logos/branco; sem a versão branca fica o logo normal) */
        .brand-item img.logo-branco { display: none; }
        html.tema-escuro .brand-item img.logo-claro { display: none; }
        html.tema-escuro .brand-item img.logo-branco { display: block; }
        html.tema-escuro .brand-item { border-color: rgba(255, 255, 255, 0.55); }
        html.tema-escuro .brand-item:hover { border-color: #ffffff; }
        html.tema-escuro .brand-item.active { border-color: #ffffff; box-shadow: 0 0 0 1px #ffffff; }
        /* barra do topo do catálogo (pesquisa, filtros, lista de preço, carrinho): fundo branco fixo */
        html.tema-escuro header { background: rgba(27, 33, 38, 0.96) !important; border-bottom-color: #444444 !important; }
        html.tema-escuro .logo img.logo-b2b-claro { display: none; }
        html.tema-escuro .logo img.logo-b2b-branco { display: block; }
        html.tema-escuro .btn-icon { color: #E0E0E0; }
        html.tema-escuro .btn-icon:hover { background: #363636; }
        html.tema-escuro .hero-tag { background: rgba(255, 255, 255, 0.06); color: #A0A0A0; }
        html.tema-escuro .header-lp-tooltip { background: #E0E0E0; color: #1b2126; }
        html.tema-escuro .carousel-btn, html.tema-escuro [class*="carousel"] button { background: rgba(27, 33, 38, 0.9); color: #E0E0E0; }
        html.tema-escuro input, html.tema-escuro select, html.tema-escuro textarea { background-color: #1b2126; color: #E0E0E0; border-color: #444444; }
        html.tema-escuro input::placeholder, html.tema-escuro textarea::placeholder { color: #707070; }
        /* fotos ficam em fundo branco (as fotos de produto têm fundo branco) */
        html.tema-escuro .product-image-wrapper, html.tema-escuro .variation-image, html.tema-escuro .ct-foto { background: #ffffff; }
        /* avisos claros (mínimo, sem estoque, expedição) ficam legíveis */
        html.tema-escuro .ct-res-aviso, html.tema-escuro [style*="#fff7ed"] { background: #3a2a14 !important; border-color: #6b4a1e !important; color: #e5a54b !important; }
        html.tema-escuro .rp-cb-alerta { background: #3a1c1a; color: #f0a39d; }
        html.tema-escuro .ct-modal-erro, html.tema-escuro .rp-ci-falta, html.tema-escuro .rp-cl-falta { color: #f0a39d; }
        html.tema-escuro .ct-card-sub[style*="#e0ecf5"] { background: #1f3346 !important; color: #a9c7dd !important; }
        /* botões que usavam a cor do preço (escura) como fundo: claros com texto escuro */
        html.tema-escuro .cart-badge, html.tema-escuro .btn-add-cart, html.tema-escuro .cart-count-badge, html.tema-escuro .btn-checkout,
        html.tema-escuro .btn-checkout-confirm, html.tema-escuro .btn-result-close { background: #E0E0E0; color: #1b2126; }
        html.tema-escuro .btn-checkout:disabled, html.tema-escuro .btn-checkout-confirm:disabled { background: #444444; color: #707070; }
        html.tema-escuro .btn-clear-cart, html.tema-escuro .share-cart-link, html.tema-escuro .btn-export-pdf { color: #E0E0E0; border-color: #707070; }
        html.tema-escuro .hero-tag[style*="#000000"], html.tema-escuro .hero-tag[style*="rgb(0, 0, 0)"] { border-color: #E0E0E0 !important; color: #E0E0E0 !important; }
        /* etiquetas de expedição (cores claras vindas do JS) */
        html.tema-escuro [style*="#fef3c7"] { background: #3a2a14 !important; color: #e5a54b !important; }
        html.tema-escuro [style*="#dcfce7"] { background: #1e3a2b !important; color: #86d0a3 !important; }
        html.rp-rep .share-modal, html.ct-rep .share-modal { max-width: 680px !important; }
        /* "Pesquisar Cliente" usa --accent-color (não existe no escuro: texto sumia) e "Itens incluídos" do compartilhar */
        html.tema-escuro .btn-pesquisar-cliente { color: #E0E0E0; border-color: #707070; }
        html.tema-escuro .share-filters-info { background: #14181c; border-top-color: #444444; color: #E0E0E0; }

/* ===== 11-ajustes-revisao-layout.css ===== */
        /* ===== Ajustes da revisão de layout de 06/11/2026 (capturas 390/820/1440 px, claro e escuro) ===== */

        /* Painéis laterais fechados (carrinho, checkout, edição de cliente) ficam fora da tela com translateX(100%):
           a sombra -10px 0 40px vazava uma faixa cinza de ~40 px na borda direita de TODA a página. Fechados: sem sombra
           e fora da ordem de tabulação (o Tab entrava nos campos invisíveis). A visibilidade muda só no fim da animação. */
        .cart-drawer:not(.active),
        .checkout-modal:not(.active),
        .edit-modal:not(.active) {
            box-shadow: none;
            visibility: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, visibility 0s linear 0.3s;
        }
        .cart-drawer.active,
        .checkout-modal.active,
        .edit-modal.active {
            visibility: visible;
        }

        /* Fechar do painel de grades: 28 px era alvo de toque pequeno demais no celular/iPad (mínimo ~40 px) */
        .btn-close-grade {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }

        /* Foco de teclado: vários controles tinham outline: none sem substituto (navegação por Tab sem indicação) */
        button:focus-visible,
        a:focus-visible,
        select:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid var(--text-primary, #1a1a1a);
            outline-offset: 2px;
        }

        /* Botão flutuante de compartilhar quase sumia no tema escuro (fundo escuro sobre fundo escuro) */
        html.tema-escuro .share-button {
            background: #2b3138;
            box-shadow: 0 0 0 1px #4a5058, 0 4px 20px rgba(0, 0, 0, 0.45);
        }

        /* Referência sem preço na lista de preço da página: o servidor não deixa ir ao carrinho (antes entrava a R$ 0,00) */
        .product-price-sem {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
        }

        /* Nome longo da variação/grade não estoura a largura (código de cor, referência sem espaço) */
        .variation-name,
        .grade-details-title-text,
        .product-name {
            overflow-wrap: anywhere;
            min-width: 0;
        }