/* ============================================================
           [CART SYSTEM -- Shopping Cart Drawer]
        ============================================================ */

        /* --- Cart trigger button in navbar --- */
        .cart-trigger {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: transparent;
            border: 1px solid var(--line-strong);
            color: var(--titanium);
            cursor: pointer;
            transition: border-color var(--transition), background var(--transition);
            flex-shrink: 0;
        }
        .cart-trigger:hover { border-color: var(--texas-red); background: var(--texas-red-dim); }
        .cart-trigger svg { width: 18px; height: 18px; stroke: var(--titanium); fill: none; stroke-width: 1.8; }

        .cart-trigger-label {
            display: none;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--titanium);
        }

        .cart-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            min-width: 18px;
            height: 18px;
            padding: 0 4px;
            border-radius: 9px;
            background: var(--texas-red);
            color: #fff;
            font-family: var(--font-mono);
            font-size: 0.62rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0);
            line-height: 1;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
            transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
            pointer-events: none;
        }
        .cart-badge.visible { opacity: 1; transform: scale(1); }
        @keyframes cartBump {
            0% { transform: scale(1); }
            45% { transform: scale(1.35); }
            100% { transform: scale(1); }
        }
        .cart-badge.bump {
            animation: cartBump 0.35s var(--ease);
        }
        .cart-trigger.bump {
            border-color: var(--texas-red);
            background: var(--texas-red-dim);
        }

        @media (min-width: 901px) {
            .cart-trigger {
                width: auto;
                height: 40px;
                padding: 0 1.1rem;
                gap: 0.65rem;
                background: rgba(255, 255, 255, 0.03);
            }
            .cart-trigger-label {
                display: inline-block;
            }
            .cart-badge {
                position: static;
                transform: none;
                margin-left: 2px;
                display: none;
            }
            .cart-badge.visible {
                display: flex;
                opacity: 1;
                transform: scale(1);
            }
        }

        /* --- Cart Notification Toast (Option A: Non-intrusive feedback) --- */
        .cart-toast {
            position: fixed;
            top: 86px;
            right: 24px;
            z-index: 2100;
            display: flex;
            align-items: center;
            gap: 1.25rem;
            background: rgba(20, 19, 18, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(197, 35, 74, 0.45);
            border-left: 3px solid var(--texas-red);
            padding: 0.75rem 1.15rem;
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
            color: var(--titanium);
            font-family: var(--font-mono);
            font-size: 0.72rem;
            letter-spacing: 0.04em;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
        }
        .cart-toast.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .cart-toast-content {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .cart-toast-check {
            color: #22c55e;
            font-weight: 700;
        }
        .cart-toast-link {
            background: transparent;
            border: none;
            color: var(--texas-red);
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 700;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            transition: color var(--transition);
        }
        .cart-toast-link:hover {
            color: #fff;
            text-decoration: underline;
        }
        @media (max-width: 540px) {
            .cart-toast {
                left: 12px;
                right: 12px;
                top: 80px;
                padding: 0.65rem 0.9rem;
                font-size: 0.68rem;
                gap: 0.6rem;
                justify-content: space-between;
            }
            .cart-toast-content {
                min-width: 0;
                font-size: 0.68rem;
            }
            .cart-toast-link {
                font-size: 0.68rem;
                white-space: nowrap;
                flex-shrink: 0;
            }
        }

        /* --- Overlay --- */
        .cart-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            z-index: 1998;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s var(--ease);
        }
        .cart-overlay.open { opacity: 1; pointer-events: all; }

        /* --- Drawer panel --- */
        .cart-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(480px, 100vw);
            background: #1a1918;
            border-left: 1px solid var(--line-strong);
            z-index: 1999;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.4s var(--ease);
            overflow: hidden;
        }
        .cart-drawer.open { transform: translateX(0); }

        /* Drawer header */
        .cart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--line);
            flex-shrink: 0;
        }
        .cart-header-title {
            display: flex;
            align-items: center;
        }
        .cart-header h2 {
            font-size: 1rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin: 0;
            color: var(--titanium);
            line-height: 1.2;
        }
        .cart-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--line);
            cursor: pointer;
            color: var(--titanium-dim);
            font-size: 1.2rem;
            transition: border-color var(--transition), color var(--transition);
            flex-shrink: 0;
        }
        .cart-close:hover { border-color: var(--texas-red); color: var(--titanium); }

        /* Drawer body scrollable */
        .cart-body {
            flex: 1;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--line-strong) transparent;
            padding: 0;
        }
        .cart-body::-webkit-scrollbar { width: 4px; }
        .cart-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

        .cart-items-wrapper {
            padding-bottom: 2.5rem;
        }

        /* Empty state */
        .cart-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 4rem 2rem;
            text-align: center;
            color: var(--titanium-dim);
        }
        .cart-empty svg { width: 48px; height: 48px; stroke: var(--line-strong); fill: none; stroke-width: 1.2; opacity: 0.6; }
        .cart-empty p { font-size: 0.85rem; font-weight: 400; }

        /* Cart items list */
        .cart-items { padding: 0; margin-bottom: 1.25rem; }
        .cart-item {
            display: grid;
            grid-template-columns: 72px 1fr auto;
            gap: 1rem;
            align-items: center;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--line);
            background: transparent;
            border-top: none;
            border-left: none;
            border-right: none;
            margin: 0;
        }
        .cart-item-img {
            width: 72px;
            height: 52px;
            aspect-ratio: 72 / 52;
            object-fit: contain;
            background: #fbfbfb;
            border: none;
            border-radius: 2px;
            flex-shrink: 0;
            padding: 3px 4px;
            box-sizing: border-box;
        }
        .cart-item-info { min-width: 0; }
        .cart-item-name {
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cart-item-platform {
            font-size: 0.62rem;
            color: var(--texas-red);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 2px;
            font-family: var(--font);
        }
        .cart-item-price {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--titanium);
            font-family: var(--font-mono);
            letter-spacing: 0.02em;
        }
        .cart-item-controls {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-top: 6px;
        }
        .cart-qty-stepper {
            display: inline-flex;
            align-items: stretch;
            border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.15));
            background: #141312;
            border-radius: 2px;
            overflow: hidden;
            height: 26px;
            flex-shrink: 0;
        }
        .cart-qty-btn {
            width: 24px;
            background: rgba(255, 255, 255, 0.04);
            border: none;
            color: var(--titanium, #f4f4f4);
            font-size: 0.9rem;
            font-family: var(--font-mono, monospace);
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background var(--transition), color var(--transition);
            user-select: none;
            padding: 0;
        }
        .cart-qty-btn:hover {
            background: var(--texas-red, #c0392b);
            color: #fff;
        }
        .cart-qty-val {
            min-width: 28px;
            padding: 0 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: var(--font-mono, monospace);
            color: #fff;
            background: rgba(0, 0, 0, 0.4);
            border-left: 1px solid var(--line, rgba(255, 255, 255, 0.08));
            border-right: 1px solid var(--line, rgba(255, 255, 255, 0.08));
            user-select: none;
        }
        .cart-item-remove {
            background: transparent;
            border: none;
            color: var(--titanium-dim);
            cursor: pointer;
            font-size: 1.15rem;
            padding: 4px;
            transition: color var(--transition);
            flex-shrink: 0;
        }
        .cart-item-remove:hover { color: var(--texas-red); }

        /* --- Cart Order Pricing Summary --- */
        .cart-pricing {
            margin: 0 1.5rem 1rem;
            padding: 1.15rem 1.25rem;
            border: 1px solid var(--line-strong);
            background: rgba(244, 244, 244, 0.02);
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }
        .cart-pricing-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.78rem;
            color: var(--titanium-dim);
        }
        .cart-pricing-row .pricing-val {
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--titanium);
            letter-spacing: 0.02em;
        }
        .cart-pricing-row.total {
            padding-top: 0.2rem;
            font-size: 0.88rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .cart-pricing-row.total .pricing-val {
            font-size: 1.05rem;
            color: var(--texas-red);
            font-weight: 800;
            font-family: var(--font-mono);
            letter-spacing: 0.02em;
        }

        /* --- Payment Notice --- */
        .cart-payment-notice {
            margin: 0 1.5rem 1rem;
            padding: 1rem 1.25rem;
            border: 1px solid var(--line-strong);
            background: rgba(24, 23, 22, 0.95);
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            border-radius: 2px;
        }
        .cart-payment-notice svg {
            width: 20px;
            height: 20px;
            stroke: var(--texas-red);
            fill: none;
            stroke-width: 2;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .cart-payment-notice-text {
            flex: 1;
        }
        .cart-payment-notice-title {
            display: block;
            font-size: 0.86rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.35rem;
            letter-spacing: 0.01em;
        }
        .cart-payment-notice-text p {
            margin: 0;
            font-size: 0.78rem;
            line-height: 1.55;
            color: var(--titanium-dim);
        }
        .cart-payment-notice-text strong {
            color: var(--titanium);
            font-weight: 600;
            display: inline;
            text-transform: none;
            margin: 0;
            letter-spacing: normal;
            font-size: inherit;
        }

        /* --- Transfer Process Block --- */
        .cart-compliance {
            margin: 0 1.5rem 1rem;
            padding: 1.25rem;
            border: 1px solid rgba(197, 35, 74, 0.25);
            background: rgba(197, 35, 74, 0.06);
        }
        .cart-compliance-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        .cart-compliance-header svg { width: 16px; height: 16px; stroke: var(--texas-red); fill: none; stroke-width: 2; flex-shrink: 0; }
        .cart-compliance-header strong {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--texas-red);
        }
        .cart-compliance p {
            font-size: 0.78rem;
            font-weight: 400;
            color: var(--titanium-dim);
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        .cart-compliance-steps {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin-bottom: 0;
            padding: 0;
        }
        .cart-compliance-steps li {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            font-size: 0.75rem;
            font-weight: 400;
            color: var(--titanium-dim);
            line-height: 1.5;
        }
        .cart-compliance-steps li .step-num {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: 1px solid var(--texas-red);
            color: var(--texas-red);
            font-size: 0.62rem;
            font-weight: 800;
            flex-shrink: 0;
            margin-top: 1px;
        }

        /* --- Document upload section --- */
        .cart-upload-section {
            margin: 0 1.5rem 1.5rem;
            border: 1px solid var(--line-strong);
            background: rgba(244, 244, 244, 0.02);
        }
        .cart-upload-header {
            padding: 0.9rem 1.25rem;
            border-bottom: 1px solid var(--line);
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--titanium);
        }
        .cart-upload-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

        .upload-field { margin-bottom: 0; }
        .upload-field label {
            display: block;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--titanium-dim);
            margin-bottom: 0.4rem;
        }
        .upload-field label span { color: var(--texas-red); }

        .upload-hint {
            display: block;
            font-size: 0.68rem;
            color: var(--titanium-dim);
            opacity: 0.75;
            margin-top: 0.35rem;
            line-height: 1.45;
        }
        .upload-hint strong, .upload-hint em {
            color: #fff;
            font-weight: 600;
            font-style: normal;
        }

        .upload-drop {
            border: 1px dashed var(--line-strong);
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: border-color var(--transition), background var(--transition);
            position: relative;
        }
        .upload-drop:hover, .upload-drop.drag-over {
            border-color: var(--texas-red);
            background: var(--texas-red-dim);
        }
        .upload-drop input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        .upload-drop-label {
            font-size: 0.7rem;
            color: var(--titanium-dim);
            pointer-events: none;
        }
        .upload-drop-label strong { color: var(--texas-red); }
        .upload-file-name {
            font-size: 0.65rem;
            color: var(--texas-red);
            margin-top: 0.3rem;
            font-weight: 600;
        }

        .upload-input {
            width: 100%;
            background: rgba(244, 244, 244, 0.04);
            border: 1px solid var(--line-strong);
            color: var(--titanium);
            padding: 0.6rem 0.75rem;
            font-size: 0.8rem;
            font-family: var(--font);
            caret-color: var(--texas-red);
            outline: none;
            transition: border-color var(--transition);
        }
        .upload-input:focus { border-color: var(--texas-red); background: var(--texas-red-dim); }
        .upload-input::placeholder { color: rgba(244, 244, 244, 0.25); }

        /* Submit button */
        .btn-cart-submit {
            width: 100%;
            padding: 0.9rem;
            background: var(--texas-red);
            border: none;
            color: #fff;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            cursor: pointer;
            transition: background var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-family: var(--font);
            margin-top: 0.25rem;
        }
        .btn-cart-submit:hover { background: #a01c3b; }
        .btn-cart-submit:disabled { background: var(--obsidian); color: var(--titanium-dim); cursor: not-allowed; }
        .btn-cart-submit svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.5; }

        .cart-submit-disclaimer {
            font-size: 0.68rem;
            color: var(--titanium-dim);
            opacity: 0.75;
            text-align: center;
            margin-top: 0.4rem;
            line-height: 1.45;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
        }
        .cart-submit-disclaimer svg {
            width: 12px;
            height: 12px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            flex-shrink: 0;
        }

        /* Status messages */
        .cart-status {
            margin: 0 1.5rem 1.5rem;
            padding: 0.9rem 1rem;
            font-size: 0.75rem;
            display: none;
            border: 1px solid;
        }
        .cart-status.success { border-color: #1a6b35; background: rgba(26, 107, 53, 0.12); color: #4caf50; }
        .cart-status.error { border-color: var(--texas-red); background: var(--texas-red-dim); color: #ff6b6b; }
        .cart-status.visible { display: block; }

        /* Empty cart notice hide logic */
        .cart-items-wrapper.has-items .cart-empty { display: none; }
        .cart-items-wrapper:not(.has-items) .cart-items { display: none; }
        .cart-items-wrapper:not(.has-items) .cart-pricing { display: none; }
        .cart-items-wrapper:not(.has-items) .cart-payment-notice { display: none; }
        .cart-items-wrapper:not(.has-items) .cart-compliance { display: none; }
        .cart-items-wrapper:not(.has-items) .cart-upload-section { display: none; }
        .cart-items-wrapper:not(.has-items) .cart-status { display: none !important; }

        /* --- Order Confirmation View --- */
        .cart-confirmation {
            display: none;
            padding: 2.5rem 1.5rem;
            text-align: center;
        }
        .cart-items-wrapper.is-confirmed .cart-empty,
        .cart-items-wrapper.is-confirmed .cart-items,
        .cart-items-wrapper.is-confirmed .cart-pricing,
        .cart-items-wrapper.is-confirmed .cart-payment-notice,
        .cart-items-wrapper.is-confirmed .cart-compliance,
        .cart-items-wrapper.is-confirmed .cart-upload-section,
        .cart-items-wrapper.is-confirmed .cart-status { display: none !important; }
        .cart-items-wrapper.is-confirmed .cart-confirmation { display: block; }

        .confirm-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(26, 107, 53, 0.15);
            border: 2px solid #1a6b35;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.25rem;
            color: #4ade80;
            font-size: 1.75rem;
            font-weight: 800;
        }
        .confirm-label {
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--texas-red);
            margin-bottom: 0.4rem;
        }
        .confirm-title {
            font-size: 1.25rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--titanium);
            margin-bottom: 0.9rem;
        }
        .confirm-desc {
            font-size: 0.8rem;
            font-weight: 400;
            color: var(--titanium-dim);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        .confirm-steps-box {
            padding: 1.15rem 1.25rem;
            border: 1px solid var(--line-strong);
            background: rgba(244, 244, 244, 0.02);
            text-align: left;
            margin-bottom: 1.5rem;
        }
        .confirm-steps-title {
            color: var(--titanium);
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.75rem;
        }
        .confirm-steps-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            font-size: 0.75rem;
            color: var(--titanium-dim);
            line-height: 1.5;
            padding: 0;
            margin: 0;
        }
        .confirm-steps-list li {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            font-weight: 400;
        }
        .confirm-steps-list li span {
            width: 18px;
            height: 18px;
            background: var(--texas-red-dim);
            border: 1px solid var(--texas-red);
            color: var(--texas-red);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .confirm-close-btn {
            width: 100%;
            justify-content: center;
            padding: 0.85rem;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }