:root {
            --ink: #0D0D0D;
            --ink-soft: #3A3A3A;
            --ink-muted: #8A8A8A;
            --paper: #FAF9F7;
            --paper-warm: #F3F1ED;
            --paper-border: #E8E4DE;
            --accent: #C8A96E;
            --accent-light: #F5EDD9;
            --accent-dark: #A8893E;
            --danger-light: #FFF0EE;
            --font-serif: 'Cormorant Garamond', Georgia, serif;
            --font-sans: 'DM Sans', sans-serif;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--paper);
            color: var(--ink);
        }

        /* ── PAGE HEADER ── */
        .page-header {
            background: var(--ink);
            padding: 2.5rem 0;
            position: relative;
            overflow: hidden;
        }

        .page-header::before,
        .page-header::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(200, 169, 110, 0.12);
            pointer-events: none;
        }

        .page-header::before { width: 260px; height: 260px; top: -80px; right: 5%; }
        .page-header::after  { width: 180px; height: 180px; bottom: -90px; left: 8%; }

        .page-header h1 {
            font-family: var(--font-serif);
            font-weight: 300;
            font-size: 2.8rem;
            letter-spacing: -0.02em;
            color: #fff;
            line-height: 1;
            margin: 0;
        }

        .badge-count {
            font-family: var(--font-sans);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--accent);
            border: 1px solid rgba(200, 169, 110, 0.4);
            background: transparent;
            padding: 4px 10px;
            border-radius: 2px;
        }

        /* ── CARD OVERRIDES ── */
        .cart-card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(13, 13, 13, 0.07);
            overflow: hidden;
        }

        .cart-card .card-header {
            background: #fff;
            border-bottom: 1px solid var(--paper-border);
            padding: 1.25rem 1.75rem;
        }

        .section-label {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--ink-muted);
            margin: 0;
        }

        .btn-clear {
            font-size: 0.75rem;
            color: var(--ink-muted);
            background: none;
            border: none;
            padding: 0;
            transition: color 0.2s;
            cursor: pointer;
        }

        .btn-clear:hover { color: #dc3545; }

        /* ── CART ITEM ── */
        .cart-item {
            padding: 1.5rem 1.75rem;
            border-bottom: 1px solid var(--paper-border);
            transition: background 0.2s;
            animation: fadeUp 0.4s ease both;
        }

        .cart-item:last-child { border-bottom: none; }
        .cart-item:hover { background-color: var(--paper); }

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

        .cart-item:nth-child(1) { animation-delay: 0.06s; }
        .cart-item:nth-child(2) { animation-delay: 0.12s; }
        .cart-item:nth-child(3) { animation-delay: 0.18s; }

        .item-img {
            width: 88px;
            height: 88px;
            border-radius: 10px;
            object-fit: cover;
            border: 1px solid var(--paper-border);
            flex-shrink: 0;
            transition: transform 0.4s ease;
        }

        .cart-item:hover .item-img { transform: scale(1.04); }

        .item-img-placeholder {
            width: 88px;
            height: 88px;
            border-radius: 10px;
            background: var(--paper-warm);
            border: 1px solid var(--paper-border);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ink-muted);
            font-size: 1.5rem;
        }

        .item-name {
            font-family: var(--font-serif);
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: 0.01em;
            margin-bottom: 0.3rem;
        }

        .attr-tag {
            font-size: 0.68rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-muted);
            background: var(--paper-warm);
            border: 1px solid var(--paper-border);
            padding: 2px 8px;
            border-radius: 2px;
        }

        .item-unit-price {
            font-size: 0.8rem;
            color: var(--ink-muted);
        }

        .item-unit-price span {
            color: var(--ink-soft);
            font-weight: 500;
        }

        /* ── QTY CONTROLS ── */
        .qty-group {
            display: inline-flex;
            align-items: center;
            border: 1.5px solid var(--paper-border);
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
        }

        .qty-group .btn-qty {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            color: var(--ink-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            padding: 0;
        }

        .qty-group .btn-qty:hover:not(:disabled) {
            background: var(--accent-light);
            color: var(--accent-dark);
        }

        .qty-group .btn-qty:disabled { opacity: 0.35; cursor: not-allowed; }

        .qty-group .qty-val {
            width: 42px;
            height: 32px;
            border: none;
            border-left: 1.5px solid var(--paper-border);
            border-right: 1.5px solid var(--paper-border);
            text-align: center;
            font-weight: 600;
            font-size: 0.88rem;
            color: var(--ink);
            background: transparent;
        }

        /* ── SUBTOTAL ── */
        .item-subtotal {
            font-family: var(--font-serif);
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--ink);
            white-space: nowrap;
        }

        .item-subtotal .cur {
            font-family: var(--font-sans);
            font-size: 0.75rem;
            font-weight: 400;
            color: var(--ink-muted);
            margin-left: 3px;
        }

        /* ── REMOVE BTN ── */
        .btn-remove {
            width: 32px;
            height: 32px;
            border: 1.5px solid var(--paper-border);
            background: #fff;
            color: var(--ink-muted);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0;
        }

        .btn-remove:hover {
            border-color: #dc3545;
            background: var(--danger-light);
            color: #dc3545;
            transform: scale(1.06);
        }

        /* ── SUMMARY CARD ── */
        .summary-card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(13, 13, 13, 0.07);
            overflow: hidden;
            position: sticky;
            top: 1.5rem;
        }

        .summary-card .summary-head {
            background: var(--ink);
            padding: 1.4rem 1.75rem;
        }

        .summary-head-title {
            font-family: var(--font-serif);
            font-size: 1.35rem;
            font-weight: 300;
            color: #fff;
            letter-spacing: 0.02em;
            margin: 0;
        }

        .summary-body { padding: 1.25rem 1.75rem 0; }

        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.55rem 0;
            font-size: 0.88rem;
            color: var(--ink-muted);
            border-bottom: 1px dashed var(--paper-border);
        }

        .summary-row:last-child { border-bottom: none; }
        .summary-row strong { color: var(--ink-soft); font-weight: 500; }
        .summary-row .text-success { color: #10b981 !important; }

        .summary-total-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 1.1rem 1.75rem;
            background: var(--paper);
            border-top: 1.5px solid var(--paper-border);
        }

        .total-label {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--ink-muted);
        }

        .total-amount {
            font-family: var(--font-serif);
            font-size: 2rem;
            font-weight: 600;
            color: var(--ink);
        }

        .total-amount .cur {
            font-family: var(--font-sans);
            font-size: 0.82rem;
            font-weight: 400;
            color: var(--ink-muted);
            margin-left: 4px;
        }

        /* ── PROMO ── */
        .promo-section { padding: 0.9rem 1.75rem; border-top: 1px solid var(--paper-border); }

        .promo-input {
            border: 1.5px solid var(--paper-border);
            border-radius: 6px 0 0 6px;
            font-size: 0.85rem;
            background: var(--paper);
            color: var(--ink);
            padding: 0.55rem 0.9rem;
        }

        .promo-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: none;
        }

        .btn-promo {
            border: 1.5px solid var(--accent);
            border-left: none;
            border-radius: 0 6px 6px 0;
            background: transparent;
            color: var(--accent);
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            padding: 0.55rem 0.9rem;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .btn-promo:hover { background: var(--accent); color: #fff; }

        /* ── ACTION BUTTONS ── */
        .actions-section { padding: 0.9rem 1.75rem 1.5rem; }

        .btn-checkout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 0.9rem;
            background: #8a2432;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.25s;
            position: relative;
            overflow: hidden;
        }

        .btn-checkout::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .btn-checkout:hover {
            background: #57111a;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(13, 13, 13, 0.18);
        }

        .btn-checkout:hover::after { transform: scaleX(1); }

        .btn-continue-shop {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 0.8rem;
            background: transparent;
            border: 1.5px solid var(--paper-border);
            color: var(--ink-muted);
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s;
        }

        .btn-continue-shop:hover {
            border-color: var(--ink-soft);
            color: var(--ink);
        }

        /* ── TRUST BADGES ── */
        .trust-section {
            padding: 0.9rem 1.75rem;
            border-top: 1px solid var(--paper-border);
        }

        .trust-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-size: 0.68rem;
            color: var(--ink-muted);
            text-align: center;
        }

        .trust-item i { font-size: 1.1rem; color: var(--accent); }

        /* ── EMPTY STATE ── */
        .empty-state {
            padding: 5rem 2rem;
            text-align: center;
        }

        .empty-icon {
            font-size: 3.5rem;
            color: var(--ink-muted);
            opacity: 0.3;
        }

        .empty-title {
            font-family: var(--font-serif);
            font-size: 1.8rem;
            font-weight: 300;
            color: var(--ink);
        }

        /* ── LOADING TOAST ── */
        .loading-toast {
            position: fixed;
            top: 1.2rem;
            right: 1.2rem;
            background: var(--ink);
            color: #fff;
            padding: 0.8rem 1.2rem;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.83rem;
            z-index: 1055;
            box-shadow: 0 8px 30px rgba(13,13,13,0.18);
            border-left: 3px solid var(--accent);
            animation: fadeUp 0.3s ease;
        }

        .toast-spinner {
            width: 16px; height: 16px;
            border: 2px solid rgba(255,255,255,0.2);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
        }

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

        /* ── RESPONSIVE TWEAKS ── */
        @media (max-width: 576px) {
            .page-header h1 { font-size: 2rem; }
            .cart-item { padding: 1.2rem; }
            .item-img, .item-img-placeholder { width: 72px; height: 72px; }
        }