/* ============================================================================
   CARRITO OVERRIDE — Adapta landing.css al tema claro del sitio Maxical
   Se carga DESPUÉS de landing.css y catalogo.css
   ============================================================================ */

/* ── Variables adaptadas al modo claro ── */
:root {
    --bg:      #f4f6fa;
    --bg2:     #ffffff;
    --bg3:     #f0f2f5;
    --surface:     #ffffff;
    --surface2:    #f4f6fa;
    --border:      #e5e9f0;
    --border2:     #d1d5db;
    --txt1:    #111827;
    --txt2:    #374151;
    --txt3:    #6b7280;
    --txt4:    #9ca3af;
    --accent:  #37c0fb;
    --accent2: #1aa8e8;
    --accent-glow: rgba(55,192,251,.2);
    --gold:    #f59e0b;
    --green:   #25d366;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 6px rgba(0,0,0,.06);
    --shadow-md: 0 4px 18px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 36px rgba(0,0,0,.13);
    --shadow-xl: 0 14px 48px rgba(0,0,0,.16);
    --transition: all .22s ease;
}

/* ── Modo oscuro ── */
[data-theme="dark"] {
    --bg:      #0d1117;
    --bg2:     #161b2a;
    --bg3:     #1e2538;
    --surface:     #1e2538;
    --surface2:    #252d42;
    --border:      rgba(255,255,255,.08);
    --border2:     rgba(255,255,255,.13);
    --txt1:    #f0f2f8;
    --txt2:    #c8cdd8;
    --txt3:    #8b95a8;
    --txt4:    #5a6478;
}

/* ── Fondo body controlado por maxical.css ── */
body {
    background-color: var(--bg) !important;
    color: var(--txt2) !important;
    font-family: 'Inter', 'Source Sans Pro', system-ui, sans-serif !important;
}

/* ── Cards del catálogo ── */
.cat-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.cat-card:hover {
    border-color: var(--border2) !important;
}

.cat-card-body h3 {
    color: var(--txt1) !important;
    font-size: 1.05rem !important;
}

.cat-card-body p {
    color: var(--txt2) !important;
    font-size: .88rem !important;
}

.cat-card-app-pill {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
    color: var(--txt3) !important;
}

/* ── Precio ── */
.cat-card-price {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
}

/* ════════════════════════════════════════════════════════════
   BOTÓN CERRAR PANEL — pequeño y circular, no píldora
   ════════════════════════════════════════════════════════════ */

.cart-panel-header .cart-close-btn,
#cart-close-btn {
    all: unset !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;       /* círculo perfecto */
    background: var(--surface2, #f4f6fa) !important;
    border: 1px solid var(--border2, #d1d5db) !important;
    color: var(--txt3, #6b7280) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .85rem !important;
    flex-shrink: 0 !important;
    transition: all .18s !important;
    box-sizing: border-box !important;
}

.cart-panel-header .cart-close-btn:hover,
#cart-close-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   ITEMS DEL CARRITO — layout correcto, papelera a la derecha
   ════════════════════════════════════════════════════════════ */

.cart-item {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .75rem !important;
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #e5e9f0) !important;
    border-radius: 12px !important;
}

.cart-item-img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.cart-item-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .2rem !important;
}

.cart-item-qty {
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
    margin-top: .3rem !important;
}

/* Botones −/+ del panel del carrito — pequeños y cuadrados */
.cart-item-qty-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 5px !important;
    background: var(--surface2, #f4f6fa) !important;
    border: 1px solid var(--border2, #d1d5db) !important;
    color: var(--txt1, #111827) !important;
    font-size: .85rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background .15s, color .15s !important;
    flex-shrink: 0 !important;
}

.cart-item-qty-btn:hover {
    background: var(--accent, #37c0fb) !important;
    border-color: var(--accent, #37c0fb) !important;
    color: #fff !important;
}

.cart-item-qty-num {
    min-width: 22px !important;
    text-align: center !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    color: var(--txt1, #111827) !important;
}

/* Papelera — al extremo derecho, sin superponerse */
.cart-item-remove {
    all: unset !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 6px !important;
    background: none !important;
    color: var(--txt3, #9ca3af) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .85rem !important;
    flex-shrink: 0 !important;
    transition: color .15s, background .15s !important;
    box-sizing: border-box !important;
}

.cart-item-remove:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, .08) !important;
}

/* ════════════════════════════════════════════════════════════
   QTY CONTROL EN CARDS DEL CATÁLOGO — forzar layout correcto
   ════════════════════════════════════════════════════════════ */

.qty-control {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    border: 1.5px solid var(--border2, #d1d5db) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    width: auto !important;     /* no ancho fijo — deja que los hijos lo definan */
    background: var(--surface2, #f4f6fa) !important;
}

.qty-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 38px !important;
    max-width: 32px !important;
    min-width: 32px !important;
    background: var(--surface2, #f4f6fa) !important;
    border: none !important;
    color: var(--txt2, #374151) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background .15s, color .15s !important;
}

.qty-btn:hover {
    background: var(--accent, #37c0fb) !important;
    color: #fff !important;
}

.qty-input {
    flex: 0 0 38px !important;
    width: 38px !important;
    max-width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    background: var(--surface, #fff) !important;
    border: none !important;
    border-left: 1px solid var(--border, #e5e9f0) !important;
    border-right: 1px solid var(--border, #e5e9f0) !important;
    color: var(--txt1, #111827) !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    outline: none !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none !important; }

/* Botón Añadir — al lado del qty, ocupa el espacio restante */
.btn-add-cart {
    flex: 1 1 auto !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    padding: 0 .9rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: filter .15s, transform .15s !important;
}

.btn-add-cart:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.btn-add-cart.added { background: #25d366 !important; }

/* Footer de la card — flex horizontal garantizado */
.cat-card-footer {
    border-top: 1px solid var(--border, #e5e9f0) !important;
    padding-top: .85rem !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    flex-wrap: nowrap !important;
}

/* ── Panel del carrito ── */
.cart-panel {
    background: var(--bg2) !important;
    border-left-color: var(--border2) !important;
}

.cart-panel-header {
    border-bottom-color: var(--border) !important;
}

.cart-panel-header h2 {
    color: var(--txt1) !important;
    font-size: 1rem !important;
}

.cart-close-btn {
    background: var(--surface2) !important;
    border-color: var(--border) !important;
    color: var(--txt2) !important;
}

.cart-close-btn:hover {
    background: var(--border2) !important;
    color: var(--txt1) !important;
}

.cart-empty {
    color: var(--txt3) !important;
}

.cart-item {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.cart-item:hover {
    border-color: var(--border2) !important;
}

.cart-item-name  { color: var(--txt1) !important; }
.cart-item-brand { color: var(--txt3) !important; }

.cart-item-qty-btn {
    background: var(--surface2) !important;
    border-color: var(--border2) !important;
    color: var(--txt1) !important;
}

.cart-item-qty-btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

.cart-item-qty-num { color: var(--txt1) !important; }

.cart-item-remove { color: var(--txt3) !important; }
.cart-item-remove:hover { color: #ef4444 !important; }

.cart-panel-footer {
    border-top-color: var(--border) !important;
}

.cart-summary-row span  { color: var(--txt2) !important; }
.cart-summary-row strong { color: var(--txt1) !important; }
.cart-summary-note { color: var(--txt3) !important; }

.cart-totals-block {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.cart-total-row { color: var(--txt2) !important; }
.cart-total-row--items { border-bottom-color: var(--border) !important; }

/* ── Modal checkout ── */
.checkout-modal {
    background: var(--bg2) !important;
    border-color: var(--border2) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
}

.checkout-modal-header {
    border-bottom-color: var(--border) !important;
}

.checkout-modal-header h2 {
    color: var(--txt1) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
}

/* Steps */
.checkout-step-dot {
    background: var(--surface2) !important;
    border-color: var(--border2) !important;
    color: var(--txt3) !important;
}

.checkout-step.active .checkout-step-dot {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.checkout-step.done .checkout-step-dot {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #fff !important;
}

.checkout-step-label { color: var(--txt3) !important; }
.checkout-step.active .checkout-step-label { color: var(--accent) !important; }
.checkout-step-line { background: var(--border) !important; }
.checkout-step-line.done { background: var(--green) !important; }

/* Form */
.form-label { color: var(--txt2) !important; }

.form-input {
    background: var(--surface) !important;
    border-color: var(--border2) !important;
    color: var(--txt1) !important;
    font-size: .9rem !important;
}

.form-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.form-input::placeholder { color: var(--txt4) !important; }

/* Métodos de pago */
.payment-method {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.payment-method:hover {
    border-color: var(--border2) !important;
    background: var(--surface2) !important;
}

.payment-method.selected {
    border-color: var(--accent) !important;
    background: rgba(55,192,251,.08) !important;
}

.payment-method-name { color: var(--txt2) !important; }
.payment-method.selected .payment-method-name { color: var(--accent) !important; }

/* Resumen del pedido */
.checkout-order-summary {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.checkout-order-summary h4 { color: var(--txt3) !important; }
.checkout-order-item { color: var(--txt2) !important; border-bottom-color: var(--border) !important; }
.checkout-order-item strong { color: var(--txt1) !important; }

/* Totales en checkout */
.checkout-totals-summary {
    background: var(--surface) !important;
    border-color: var(--border2) !important;
}

.cts-row { color: var(--txt2) !important; }

/* Botones modal */
.btn-modal-back {
    background: var(--surface) !important;
    border-color: var(--border2) !important;
    color: var(--txt2) !important;
}

.btn-modal-back:hover {
    background: var(--surface2) !important;
    color: var(--txt1) !important;
}

/* Éxito */
.checkout-success h3 { color: var(--txt1) !important; }
.checkout-success p  { color: var(--txt2) !important; }

/* Comprobante */
.comprobante-upload-wrap {
    background: rgba(55,192,251,.04) !important;
    border-color: rgba(55,192,251,.25) !important;
}

/* ── Grid catálogo — garantizar 3 columnas ── */
.cat-products-grid,
#catalogo-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
}

@media (max-width: 768px) {
    .cat-products-grid,
    #catalogo-grid { grid-template-columns: 1fr !important; }
}

/* ── Toast del carrito ── */
.cart-toast {
    background: var(--bg2) !important;
    border-color: var(--border2) !important;
    color: var(--txt1) !important;
}

/* ════════════════════════════════════════════════════════════
   POSICIÓN FINAL — FABs separados para nunca superponerse
   ════════════════════════════════════════════════════════════ */

/* WhatsApp → izquierda */
.whatsapp-float {
    left: 2rem !important;
    right: auto !important;
    bottom: 2rem !important;
    z-index: 500 !important;
    width: 52px !important;
    height: 52px !important;
}

/* Carrito/Despacho → derecha */
.cart-fab {
    right: 2rem !important;
    left: auto !important;
    bottom: 2rem !important;
    z-index: 950 !important;
}

@media (max-width: 480px) {
    .whatsapp-float { left: 1.2rem !important; bottom: 1.2rem !important; width: 46px !important; height: 46px !important; }
    .cart-fab       { right: 1.2rem !important; bottom: 1.2rem !important; }
}

/* ════════════════════════════════════════════════════════════
   MODAL CHECKOUT — layout correcto
   ════════════════════════════════════════════════════════════ */

.checkout-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(5px);
    z-index: 8000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem;
}

.checkout-modal-overlay.open {
    display: flex !important;
}

.checkout-modal {
    background: var(--bg2, #ffffff) !important;
    border: 1px solid var(--border2, #d1d5db) !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 540px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    animation: coModalIn .3s ease !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.22) !important;
}

@keyframes coModalIn {
    from { opacity: 0; transform: scale(.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Botón X del header del modal */
.checkout-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 1.5rem 1rem !important;
    border-bottom: 1px solid var(--border, #e5e9f0) !important;
    gap: 1rem !important;
}

.checkout-modal-header h2 {
    color: var(--txt1, #111827) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    flex: 1 !important;
}

.checkout-modal-header .cart-close-btn,
.checkout-modal-header button.cart-close-btn {
    all: unset !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--surface2, #f4f6fa) !important;
    border: 1px solid var(--border2, #d1d5db) !important;
    color: var(--txt3, #6b7280) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .9rem !important;
    flex-shrink: 0 !important;
    transition: all .2s !important;
    box-sizing: border-box !important;
}

.checkout-modal-header .cart-close-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}

/* Body del modal */
.checkout-modal-body {
    padding: 1.25rem 1.5rem 1.5rem !important;
}

/* ════════════════════════════════════════════════════════════
   PANEL DEL CARRITO — z-index mayor que el navbar
   ════════════════════════════════════════════════════════════ */

.cart-panel-overlay {
    z-index: 7000 !important;
}

/* ════════════════════════════════════════════════════════════
   SPINNER FA — para el botón de envío del pedido
   ════════════════════════════════════════════════════════════ */

.fa-spin,
.icon.solid.fa-circle-notch.fa-spin {
    display: inline-block !important;
    animation: iconSpin .8s linear infinite !important;
}

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════
   GRID CATÁLOGO — columnas consistentes
   ════════════════════════════════════════════════════════════ */

.cat-products-grid,
#catalogo-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    gap: 1.5rem !important;
}

@media (max-width: 860px) {
    .cat-products-grid,
    #catalogo-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
    .cat-products-grid,
    #catalogo-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   MODO OSCURO — carrito panel
   ════════════════════════════════════════════════════════════ */

[data-theme="dark"] .cart-panel {
    background: #161b2a !important;
    border-left-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .cart-item {
    background: #1e2538 !important;
    border-color: rgba(255,255,255,.07) !important;
}

[data-theme="dark"] .checkout-modal {
    background: #161b2a !important;
    border-color: rgba(255,255,255,.1) !important;
}

[data-theme="dark"] .checkout-modal-header {
    border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ════════════════════════════════════════════════════════════
   OVERRIDE FINAL — mayor especificidad para ganar sobre catalogo.css
   ════════════════════════════════════════════════════════════ */

/* Botón X del panel — circular pequeño */
html body #cart-close-btn,
html body .cart-panel .cart-close-btn {
    all: unset !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    background: var(--surface2, #f4f6fa) !important;
    border: 1px solid var(--border2, #d1d5db) !important;
    color: var(--txt3, #6b7280) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .85rem !important;
    flex-shrink: 0 !important;
    transition: all .18s !important;
    box-sizing: border-box !important;
}

html body #cart-close-btn:hover,
html body .cart-panel .cart-close-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

/* Botones qty del panel — layout forzado */
html body .cart-item-qty {
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
    flex-wrap: nowrap !important;
}

/* Papelera — siempre al final y sin solaparse */
html body .cart-item-remove {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;  /* empuja al extremo derecho */
    border-radius: 6px !important;
    background: none !important;
    border: none !important;
    color: var(--txt3, #9ca3af) !important;
    cursor: pointer !important;
    font-size: .85rem !important;
    transition: color .15s, background .15s !important;
}

html body .cart-item-remove:hover {
    color: #ef4444 !important;
    background: rgba(239,68,68,.08) !important;
}

/* El item mismo — siempre flex con el remove al final */
html body .cart-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: .65rem !important;
}

html body .cart-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   FAB CARRITO — círculo perfecto, NO píldora/óvalo
   ════════════════════════════════════════════════════════════ */

html body .cart-fab,
html body #cart-fab {
    position: fixed !important;
    right: 2rem !important;
    left: auto !important;
    bottom: 2rem !important;
    z-index: 950 !important;
    width: 52px !important;
    height: 52px !important;
    /* Oculto por defecto — solo aparece en catálogos */
    display: none !important;
}

/* Solo visible cuando el body tiene data-page de catálogo */
html body[data-page="maxical"]  .cart-fab,
html body[data-page="produmil"] .cart-fab,
html body[data-page="cantera"]  .cart-fab,
html body[data-page="maxical"]  #cart-fab,
html body[data-page="produmil"] #cart-fab,
html body[data-page="cantera"]  #cart-fab {
    display: block !important;
}

html body .cart-fab-btn,
html body #cart-fab-btn {
    all: unset !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    /* Color base — Maxical azul */
    background: linear-gradient(135deg, #1aa8e8, #37c0fb) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 16px rgba(55,192,251,.45) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Produmil — rojo */
body[data-page="produmil"] .cart-fab-btn,
body[data-page="produmil"] #cart-fab-btn {
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
    box-shadow: 0 4px 16px rgba(231,76,60,.45) !important;
}

/* Cantera — naranja */
body[data-page="cantera"] .cart-fab-btn,
body[data-page="cantera"] #cart-fab-btn {
    background: linear-gradient(135deg, #ca6f1e, #e67e22) !important;
    box-shadow: 0 4px 16px rgba(230,126,34,.45) !important;
}

html body .cart-fab-btn:hover,
html body #cart-fab-btn:hover {
    transform: scale(1.1) !important;
}

body[data-page="maxical"] .cart-fab-btn:hover,
body[data-page="maxical"] #cart-fab-btn:hover {
    box-shadow: 0 8px 24px rgba(55,192,251,.6) !important;
}

body[data-page="produmil"] .cart-fab-btn:hover,
body[data-page="produmil"] #cart-fab-btn:hover {
    box-shadow: 0 8px 24px rgba(231,76,60,.6) !important;
}

body[data-page="cantera"] .cart-fab-btn:hover,
body[data-page="cantera"] #cart-fab-btn:hover {
    box-shadow: 0 8px 24px rgba(230,126,34,.6) !important;
}

/* Badge contador — esquina superior derecha */
html body .cart-fab-count,
html body #cart-fab-count {
    all: unset !important;
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    color: #fff !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.2) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

html body .cart-fab-count.visible,
html body #cart-fab-count.visible {
    display: flex !important;
}

@media (max-width: 480px) {
    html body .cart-fab, html body #cart-fab { right: 1.2rem !important; bottom: 1.2rem !important; }
    html body .cart-fab-btn, html body #cart-fab-btn { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; font-size: 1.05rem !important; }
}

/* ════════════════════════════════════════════════════════════
   MODAL CHECKOUT PREMIUM UI/UX OVERRIDE
   ════════════════════════════════════════════════════════════ */
html body .checkout-modal {
    background: var(--bg2, #ffffff) !important;
    border: none !important;
    border-radius: 24px !important;
    width: 100% !important;
    max-width: 580px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    animation: coModalIn .4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 25px 80px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.04) !important;
}

@keyframes coModalIn {
    from { opacity: 0; transform: scale(.95) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

html body .checkout-modal-header {
    padding: 1.5rem 2rem 1.25rem !important;
    border-bottom: 1px solid var(--border, #e5e9f0) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

html body .checkout-modal-header h2 {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

html body .checkout-modal-body {
    padding: 1.5rem 2rem 2rem !important;
}

/* Premium Form Inputs */
html body .form-input {
    background: var(--surface2) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
    transition: all 0.25s ease !important;
    color: var(--txt1) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.02) !important;
}

html body .form-input:focus {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--accent-glow), inset 0 2px 4px rgba(0,0,0,.01) !important;
}

html body .form-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--txt3) !important;
}

/* Premium Buttons */
html body .btn-modal-next, html body .btn-modal-back {
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

html body .btn-modal-next {
    background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 20px var(--accent-glow) !important;
}

html body .btn-modal-next:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px var(--accent-glow) !important;
    filter: brightness(1.05) !important;
}

html body .btn-modal-back {
    background: var(--surface) !important;
    border: 1px solid var(--border2) !important;
    color: var(--txt2) !important;
}

html body .btn-modal-back:hover {
    background: var(--surface2) !important;
    color: var(--txt1) !important;
}

html body .checkout-modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--border) !important;
}

/* Premium Order Summary */
html body .checkout-order-summary {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.02) !important;
    margin-bottom: 1.5rem !important;
}

html body .checkout-order-item {
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--border) !important;
    font-size: 0.95rem !important;
}

html body .checkout-order-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

html body .checkout-totals-summary {
    background: linear-gradient(135deg, var(--surface2), var(--surface)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

html body .cts-row strong {
    font-size: 1.2rem !important;
    color: var(--txt1) !important;
}

/* Steps indicators */
html body .checkout-steps {
    margin-bottom: 2rem !important;
}
html body .checkout-step-dot {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
}