@font-face {
    font-family: MontRegular;
    src: url("/fonts/Mont.ttf");
    font-display: swap;
}

@font-face {
    font-family: MontLight;
    src: url("/fonts/MontLight.ttf");
    font-display: swap;
}

@font-face {
    font-family: MontBold;
    src: url("/fonts/MontBold.ttf");
    font-display: swap;
}

.font-montbold {
    font-family: 'MontBold' !important;
}

body {
    font-family: 'MontRegular', sans-serif;
    overflow-x: clip;
}

html {
    overflow-x: clip;
}
html.tc-modal-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'MontRegular', sans-serif;
}

.navbar-icon { font-size: 1.2rem; color: #ff5c00; }

/* ── Navbar wrapper ─────────────────────────── */
.tc-navbar-wrap {
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
}

/* ── Top bar ────────────────────────────────── */
.tc-topbar {
    background: #111;
    padding: 7px 0;
    font-family: 'MontRegular', sans-serif;
}
.tc-topbar-item {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    font-family: inherit;
}
.tc-topbar-item i { color: #ff5c00; margin-right: 4px; font-size: 11px; }

@media (max-width: 767.98px) {
    .tc-topbar .container { padding-left: 12px; padding-right: 12px; }
    .tc-topbar-items {
        gap: 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .tc-topbar-items::-webkit-scrollbar { display: none; }
    .tc-topbar-item {
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ── Main navbar ────────────────────────────── */
.tc-mainnav {
    background: #fff !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0;
    font-family: 'MontRegular', sans-serif;
}
.tc-logo {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.navbar { background-color: #fff !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.navbar-collapse { padding-right: 0; padding-left: 0; }

/* ── Nav links ──────────────────────────────── */
.tc-nav-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'MontRegular', sans-serif !important;
    color: #374151 !important;
    padding: 7px 13px !important;
    border-radius: 7px !important;
    transition: color .15s, background .15s !important;
}
.tc-nav-link:hover,
.tc-nav-link.active {
    color: #ff5c00 !important;
    background: #fff3ec !important;
}

/* ── Icon buttons ───────────────────────────── */
.tc-nav-icon-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: #374151;
    font-size: 1.15rem;
    font-family: 'MontRegular', sans-serif;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none !important;
}
.tc-nav-icon-btn:hover { background: #f3f4f6; color: #ff5c00; }
.tc-nav-icon-btn i { color: inherit !important; }

/* ── Login button ───────────────────────────── */
.tc-nav-login-btn {
    background: #ff5c00;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'MontRegular', sans-serif;
    cursor: pointer;
    transition: background .18s;
    white-space: nowrap;
}
.tc-nav-login-btn:hover { background: #111; }
.tc-nav-login-btn i { color: #fff !important; }

/* ── Mobile toggler ─────────────────────────── */
.tc-toggler:focus { box-shadow: none !important; outline: none; }
.tc-toggler i { color: #111; }

/* ── Cart badge ─────────────────────────────── */
#cartIcon { cursor: pointer; }
.cart-count-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 17px; height: 17px;
    border-radius: 50%;
    background: #ff5c00;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* ── Navbar links — legacy fallback ─────────── */
.navbar-nav .nav-link { color: #374151; }
.navbar-nav .font-montbold { color: #ff5c00 !important; }

.orange-bg {
    background-color: #ff5c00 !important;
    border-color: #ff5c00 !important;
}

i {
    color: #ff5c00;
}

/* Icons inside buttons must match the button's own text color,
   otherwise an orange icon disappears on an orange button background. */
.btn i {
    color: inherit;
}

/* ===== Modal "¿Qué es UTQG?" — antes era un modal blanco de Bootstrap con
   un borde naranja genérico (.orange-border); ahora sigue el mismo lenguaje
   visual oscuro/con degradado que el resto de modales rediseñados del sitio
   (ver .tc-deal-name-modal en redesign/index.css). ===== */
.tc-utqg-info-modal .modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    background: #101018;
    color: #fff;
}
/* background-color, no "background" a secas — ver comentario igual en
   .tc-deal-name-modal-close (index.css): el shorthand pisa la X de .btn-close. */
.tc-utqg-info-close {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    background-color: rgba(255,255,255,.9); border-radius: 50%;
    width: 30px; height: 30px; opacity: 1;
}
.tc-utqg-info-header {
    padding: 30px 28px 22px;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(255,92,0,.18), transparent 65%);
}
.tc-utqg-info-header i {
    font-size: 30px; color: #ff5c00; margin-bottom: 8px; display: inline-block;
}
.tc-utqg-info-header h5 { font-weight: 800; margin: 0 0 4px; color: #fff; }
.tc-utqg-info-header p { margin: 0; font-size: 13px; font-style: italic; color: rgba(255,255,255,.6); }

.tc-utqg-info-modal .modal-body { padding: 4px 24px 26px; }
.tc-utqg-info-section {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.tc-utqg-info-section:last-child { margin-bottom: 0; }
.tc-utqg-info-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tc-utqg-info-icon {
    width: 32px; height: 32px; border-radius: 10px; flex: none;
    background: rgba(255,92,0,.15); color: #ff5c00;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.tc-utqg-info-section h6 { margin: 0; font-weight: 800; color: #fff; font-size: 14.5px; }
.tc-utqg-info-section p { margin: 0 0 10px; font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; }
.tc-utqg-info-section img { max-width: 50%; display: block; border-radius: 10px; }
.tc-utqg-info-section img.tc-utqg-info-img-sm { max-width: 30%; }
@media (max-width: 575.98px) {
    .tc-utqg-info-section img { max-width: 100%; }
    .tc-utqg-info-section img.tc-utqg-info-img-sm { max-width: 60%; }
}
:root[data-theme="light"] .tc-utqg-info-modal .modal-content { background: #fff; color: #16161c; }
:root[data-theme="light"] .tc-utqg-info-close { background: rgba(0,0,0,.06); }
:root[data-theme="light"] .tc-utqg-info-header h5 { color: #16161c; }
:root[data-theme="light"] .tc-utqg-info-header p { color: #6b7280; }
:root[data-theme="light"] .tc-utqg-info-section { background: #f7f7f8; border-color: #e6e6ec; }
:root[data-theme="light"] .tc-utqg-info-section h6 { color: #16161c; }
:root[data-theme="light"] .tc-utqg-info-section p { color: #6b7280; }

#carousel {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 7px 0;
}
.carousel-item-content {
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
    letter-spacing: .1px;
}

.logo-size {
    width: auto;
    height: 44px;
    max-width: 180px;
    mix-blend-mode: multiply;
    object-fit: contain;
}

.navbar-collapse {
    padding-right: 12px;
    padding-left: 12px;
}

@media (max-width: 991.98px) {
    #tcNavCollapse.collapse:not(.show) { display: none; }
    #tcNavCollapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        box-shadow: 0 12px 24px rgba(0,0,0,.12);
        z-index: 1040;
    }
}

a {
    text-decoration: none !important;
    color: black
}

/* Footer */

.dark-bg {
    background-color: black;
    height: auto;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
}

.img-footer {
    width: 20%;
}

.btn-footer {
    width: 250px;
    border-radius: 20px !important;
}

.orange-mode {
    color: #ff5c00 !important;
}

.btn-footer:hover {
    background-color: white;
    color: black;
    text-decoration: none;
}

.btn-suscribe {
    border-radius: 20px !important;
    font-size: 12px;
    width: 200px;
    position: relative;
    right: 20px;
    background-color: #ff5c00 !important;
    border: none !important;
}

.btn-suscribe:hover {
    background-color: #ff5c00 !important;
}

.input-rounded {
    border-radius: 20px !important;
}

.italic-text {
    font-style: italic;
    font-weight: bold;
}

.font-18 {
    font-size: 18px !important;
}

.text-decoration-none {
    text-decoration: none !important;
}

.black-mode {
    color: black;
}

.z-index {
    z-index: 1030;
}

/* Carrito */
.nav-cart-wrapper {
    position: relative;
}

.nav-cart-wrapper.show-overlay::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, .45);
    opacity: 0;
    animation: fadeInOverlay .25s ease forwards;
    z-index: 1040;
    pointer-events: auto;
}

.nav-cart-wrapper.hide-overlay::before {
    display: none;
}

@keyframes fadeInOverlay {
    to { opacity: 1; }
}

@keyframes fadeOutOverlay {
    to { opacity: 0; }
}

/* Carrito como sidebar fijo a la derecha (antes era un popover pequeño
   anclado bajo el ícono) — pantalla completa de alto, entra/sale con un
   slide horizontal en vez de fundido. */
.cart-popover {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    /* Fondo gris cálido (mismo --tc-p-bg que usa el resto del sitio en modo
       claro) en vez de blanco plano — así las tarjetas de producto, blancas
       con sombra, se separan del panel en vez de fundirse en un solo bloque
       gris-sobre-gris sin profundidad. */
    background: var(--tc-p-bg, #f7f7fa);
    border: none;
    border-left: 1px solid #e5e7eb;
    padding: 0;
    /* Sin sombra, pedido explícito: el panel ya ocupa toda la altura de la
       vista (100vh) y tiene su propio overlay detrás, una sombra ahí no
       separa nada de nada. */
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    transform: translateX(100%);
    pointer-events: none;
    z-index: 1050;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cart-popover.show {
    /* Antes tenía display:block aquí — pisaba el display:flex de
       .cart-popover (necesario para que #cartPopoverContent, flex:1,
       ocupe el espacio disponible con scroll propio y #cartPopoverFooter,
       flex:none, quede pegado abajo). Con block, el layout se rompía y el
       botón "Ver carrito y pagar" terminaba empujado fuera del área
       visible del panel. */
    transform: translateX(0);
    pointer-events: auto;
}

.cart-popover.hide {
    transform: translateX(100%);
    pointer-events: none;
}

.navbar-icon {
    cursor: pointer;
}

/* Cookie banner */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    max-width: 900px;
    width: 90%;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: sans-serif;
    flex-wrap: wrap;
}

.cookie-icon {
    width: 80px;
    height: 80px;
}

.cookie-text {
    flex: 1;
    min-width: 200px;
    font-size: 0.95rem;
}

.cookie-text a {
    color: #ff6a00;
    text-decoration: underline;
}

.cookie-accept-btn {
    background: #ff6a00;
    color: white;
    border: none;
    border-radius: 0.7rem;
    padding: 0.7rem 2rem;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap;
}

.light-gray {
    color: #9c9c9c;
}

.border-tireclick {
    border: 1px solid #ff6a00 !important;
}

#cartPopover {
    width: 400px;
    max-width: 92vw;
}

#cartPopoverTitle {
    position: relative;
    flex: none;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 18px 16px 16px;
    margin: 0;
    border-bottom: 1px solid var(--tc-p-border, #e6e6ec);
    background: var(--tc-p-surface, #ffffff);
}
.tc-cart-pop-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.05);
    color: #374151;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tc-cart-pop-close:hover { background: var(--tc-p-orange, #ff5c00); color: #fff; }
:root:not([data-theme="light"]) .tc-cart-pop-close { background: rgba(255,255,255,.1); color: #f2f2f5; }

#cartPopoverContent {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 4px;
}

#cartPopoverFooter {
    flex: none;
    padding: 14px;
    background: var(--tc-p-surface, #ffffff);
    border-top: 1px solid var(--tc-p-border, #e6e6ec);
    box-shadow: 0 -8px 20px rgba(0,0,0,.05);
}

/* ─── Popover product items ──────────────────── */
.tc-cart-pop-item {
    display: flex;
    gap: 10px;
    padding: 12px;
    margin-bottom: 10px;
    /* Tarjeta blanca real con borde + sombra suave (no un gris plano
       casi idéntico al fondo) — mismo lenguaje que las demás tarjetas de
       producto del sitio (tc-tire-card, tc-p-bestseller-card). */
    background: var(--tc-p-surface, #ffffff);
    border: 1px solid var(--tc-p-border, #e6e6ec);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(16,16,24,.04);
    align-items: flex-start;
    transition: box-shadow .15s ease, transform .15s ease;
}
.tc-cart-pop-item:hover { box-shadow: 0 6px 16px rgba(16,16,24,.08); }
.tc-cart-pop-item:last-child { margin-bottom: 0; }

.tc-cart-pop-img-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--tc-p-border, #e6e6ec);
}
.tc-cart-pop-img {
    width: 100%;
    height: 100%;
    /* object-fit: cover recortaba la foto del producto (muchas se
       fotografían en ángulo) dejando la llanta "chueca"/cortada dentro del
       cuadro chico — contain la muestra completa y derecha, sin recortar. */
    object-fit: contain;
    padding: 4px;
    mix-blend-mode: multiply;
}
.tc-cart-pop-info { flex: 1; min-width: 0; }

.tc-cart-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
/* mix-blend-mode:multiply (antes) asumía siempre un fondo blanco detrás —
   sobre la tarjeta oscura del carrito en modo oscuro, esa mezcla apagaba
   los logos casi a negro, perdiéndolos. Una placa blanca propia (no un
   blend mode) garantiza el mismo fondo para el logo sin importar el tema. */
.tc-cart-pop-brand {
    max-height: 17px;
    width: auto;
    display: block;
    background: #fff;
    border-radius: 4px;
    padding: 2px 5px;
}

.tc-cart-pop-name {
    /* Antes truncaba a una sola línea con "..." — un nombre real como
       "Llanta 215/45R18 89V Toyo Proxes A40" casi nunca cabía completo.
       Sin nowrap/ellipsis ni line-clamp: envuelve las líneas que haga
       falta para mostrar el nombre completo, sin cortar nada. */
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
    display: block;
    line-height: 1.35;
    margin-bottom: 8px;
}
.tc-cart-pop-name:hover { color: #ff5c00; }

.tc-cart-pop-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tc-cart-pop-prices { text-align: left; }
.tc-cart-pop-unit {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.3;
}
.tc-cart-pop-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ff5c00;
}
/* Mismo patrón que la tarjeta de llanta (tc-tire-card-price-old/-discount-chip):
   precio tachado arriba y chip de descuento junto al precio, en vez de solo
   el total — pedido explícito de usar la misma estructura aquí. */
.tc-cart-pop-price-old {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
}
.tc-cart-pop-price-main-row { display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.tc-cart-pop-discount-chip {
    display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800;
    color: #fff; background: #00a650; border-radius: 4px; padding: 2px 6px;
    white-space: nowrap; flex-shrink: 0;
}

/* Qty pill */
/* Mismo lenguaje que el stepper +/- de las tarjetas de producto
   (.tc-p-qty-stepper en navbar-footer.css): píldora redondeada con botones
   circulares "flotando" adentro, en vez del rectángulo de bordes cuadrados
   de antes. */
.tc-qty-pill {
    display: flex;
    align-items: center;
    gap: 2px;
    height: auto;
    border: 1px solid #e6e6ec;
    border-radius: 999px;
    overflow: visible;
    background: #f3f3f6;
    padding: 3px;
    box-sizing: border-box;
}
.tc-qty-pill-btn {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #16161c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: background .15s, color .15s, transform .1s ease;
}
.tc-qty-pill-btn:hover  { background: var(--tc-p-orange, #ff5c00); color: #fff; }
.tc-qty-pill-btn:active { transform: scale(.88); }
.tc-qty-pill-btn i       { color: inherit !important; pointer-events: none; }
.tc-qty-pill-val {
    font-size: 12.5px;
    font-weight: 800;
    color: #16161c;
    min-width: 26px;
    text-align: center;
    border-left: none;
    border-right: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
}

.tc-cart-pop-del {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.tc-cart-pop-del:hover { background: #dc2626; color: #fff; }

/* Texto "Tu carrito está vacío" y total del pedido: antes iban sin color
   propio (el vacío) o con estilos inline fijos en tonos claros (el total,
   ver app.js loadCartItemsAjax) — invisibles o casi sobre el fondo oscuro
   del carrito. Colores base para claro aquí; oscuro en el bloque de abajo. */
.tc-cart-pop-empty { color: #374151; }
.tc-cart-pop-total-wrap { border-top: 1px solid #e5e7eb; padding-top: 12px; margin-top: 6px; }
.tc-cart-pop-total-label { font-size: 13px; color: #6b7280; }
.tc-cart-pop-total-value { font-size: 16px; font-weight: 700; color: #111827; }
.tc-cart-pop-total-currency { font-size: 11px; font-weight: 400; color: #9ca3af; }
/* !important necesario: el .btn base de Bootstrap (cargado después de este
   archivo, ver layouts/app.blade.php) trae su propio background-color
   transparent con la misma especificidad — sin esto, por orden en el
   cascade Bootstrap gana y el botón queda transparente (texto blanco
   sobre el panel blanco del carrito = invisible). Mismo patrón que
   .orange-bg más arriba. */
.tc-cart-pop-checkout-btn { background: #ff5c00 !important; border-radius: 8px; font-size: 13px; padding: 11px 0; }

/* ─── Carrito lateral en modo oscuro ──────────────────
   Todo lo de arriba se diseñó pensando solo en fondo claro; por default
   (sin [data-theme="light"] en <html>) el sitio está en oscuro, así que el
   carrito necesita su propia versión oscura en vez de quedar como una
   tarjeta blanca de golpe sobre el resto de la página oscura. */
:root:not([data-theme="light"]) .cart-popover {
    background: #16161c;
    border-left: 1px solid rgba(255,255,255,.1);
}
:root:not([data-theme="light"]) #cartPopoverTitle {
    background: #1c1c22;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
:root:not([data-theme="light"]) #cartPopoverFooter {
    border-top: 1px solid rgba(255,255,255,.1);
}
:root:not([data-theme="light"]) .tc-cart-pop-item { background: #1c1c22; }
:root:not([data-theme="light"]) .tc-cart-pop-img-wrap {
    background: #fff;
    border-color: rgba(255,255,255,.1);
}
:root:not([data-theme="light"]) .tc-cart-pop-name { color: #f2f2f5; }
:root:not([data-theme="light"]) .tc-cart-pop-name:hover { color: #ff5c00; }
:root:not([data-theme="light"]) .tc-cart-pop-unit { color: rgba(255,255,255,.5); }
:root:not([data-theme="light"]) .tc-cart-pop-empty { color: #f2f2f5; }
:root:not([data-theme="light"]) .tc-cart-pop-total-wrap { border-top-color: rgba(255,255,255,.1); }
:root:not([data-theme="light"]) .tc-cart-pop-total-label { color: rgba(255,255,255,.55); }
:root:not([data-theme="light"]) .tc-cart-pop-total-value { color: #f2f2f5; }
:root:not([data-theme="light"]) .tc-cart-pop-total-currency { color: rgba(255,255,255,.4); }
:root:not([data-theme="light"]) .tc-qty-pill {
    background: #16161c;
    border-color: rgba(255,255,255,.15);
}
:root:not([data-theme="light"]) .tc-qty-pill-btn {
    background: #232329;
    color: #d1d5db;
}
:root:not([data-theme="light"]) .tc-qty-pill-val {
    color: #f2f2f5;
    border-left-color: rgba(255,255,255,.15);
    border-right-color: rgba(255,255,255,.15);
}


.add-subtract-button {
    background-color: #ff5c00 !important;
    border: none !important;
    width: 40px !important;
    height: 30px !important;
}

.add-subtract-button:hover {
    background-color: black;
}

.black-border {
    border: 1px solid rgb(70, 70, 70) !important;
}

.quantity-block {
    width: fit-content;
    margin-left: 0;
}

.quantity-input {
    height: 30px;
    max-width: 50px;
}

.cart-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #ff6a00;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    padding: 0;
    display: none;
    pointer-events: none;
    user-select: none;
    line-height: 18px;
    text-align: center;
}


.orange-btn {
    border-color: #ff5c00 !important;
    color: #ff5c00 !important;
}

.orange-btn:hover {
    background-color: #ff5c00 !important;
    color: white !important;
}

/* :not(...) — esta regla global (con !important, de antes del rediseño con
   tema oscuro) forzaba TODO input/textarea a fondo blanco sin importar el
   tema. Los inputs que ya traen su propio claro/oscuro vía data-theme
   (navbar-footer.css) quedaban con texto casi blanco sobre fondo blanco
   forzado por esta regla — ilegible en modo oscuro. Cada input con tema
   propio necesita su clase aquí en la exclusión (si no, aunque tenga su
   propio "!important" pierde: el :not(.clase) de este selector le suma
   especificidad extra a ESTA regla y el empate por !important se rompe a
   favor de la más específica, que pasa a ser esta). */
input:not(.tc-p-filter-input):not(.tc-p-navbar-search-input):not(.tc-p-qty-value):not(.tc-cart-qty-val):not(.tc-p-mega-input):not([type="checkbox"]):not([type="radio"]):not(:disabled),
textarea:not(.tc-p-filter-input):not(:disabled) {
    border: 1px solid var(--tc-p-input-border, #cfd4dc) !important;
    background: var(--tc-p-field-bg, var(--tc-p-surface, white)) !important;
    color: var(--tc-p-input-text, #16161c) !important;
}

/* Mismos colores para los <select> de Bootstrap (colonia en los modales de
   dirección, etc.): sin esto salían blancos en modo oscuro. Solo
   background-color, para no borrar la flecha (background-image) del select.
   select.form-select: Bootstrap se carga después de app.css y a la misma
   especificidad ganaba el suyo. */
select.form-select {
    border: 1px solid var(--tc-p-input-border, #cfd4dc);
    background-color: var(--tc-p-field-bg, var(--tc-p-surface, white));
    color: var(--tc-p-input-text, #16161c);
}
select.form-select:disabled {
    opacity: 1;
}
/* Tema oscuro (el default: sin data-theme="light"): flecha clara. */
:root:not([data-theme="light"]) select.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b4b4c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

input:not(.tc-p-filter-input):not(.tc-p-navbar-search-input):not(.tc-p-qty-value):not(.tc-cart-qty-val):not(.tc-p-mega-input)::placeholder,
textarea:not(.tc-p-filter-input)::placeholder {
    color: var(--tc-p-field-label, #7f8b9e) !important;
    opacity: 1;
}

.form-floating>label {
    color: var(--tc-p-field-label, #7f8b9e);
}

.form-floating>input:focus,
.form-floating>input:not(:placeholder-shown) {
    color: var(--tc-p-input-text, #16161c);
}

.form-floating>input:focus~label,
.form-floating>input:not(:placeholder-shown)~label,
.form-floating>select~label {
    color: var(--tc-p-field-label, #7f8b9e);
}
/* Bootstrap le pone un fondo blanco a la etiqueta flotante encogida
   (::after); en modo oscuro se veía como un parche. */
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background-color: transparent !important;
}

.orange-border {
    border: 1px solid #ff5c00 !important;
}

/* ─── Modal de ubicación (global, todas las páginas) ────────── */
.tc-loc-modal {
    border: none;
    border-radius: 20px;
    padding: 16px;
}
.tc-loc-modal { position: relative; }
.tc-loc-modal-close { display: none; position: absolute; top: 14px; right: 14px; z-index: 2; }
.tc-loc-modal--change .tc-loc-modal-close { display: block; }
.tc-loc-modal-icon-wrap {
    width: 220px;
    height: 90px;
    margin: 0 auto 20px;
    background: rgba(255, 92, 0, .08);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tc-loc-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ff5c00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.tc-loc-modal-icon i { color: #fff; }
.tc-loc-modal-title {
    font-size: 22px;
    font-style: italic;
    margin-bottom: 12px;
}
.tc-loc-modal-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}
.tc-loc-modal-btn {
    background: #ff5c00 !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 14px;
    border: none;
    transition: background .15s ease;
}
.tc-loc-modal-btn:hover { background: #e65200 !important; color: #fff !important; }
.tc-loc-modal-link {
    color: #ff5c00;
    font-weight: 700;
    text-decoration: none;
}
.tc-loc-modal-link:hover { color: #e65200; text-decoration: underline; }

.login-btn {
    width: 70px;
    height: 70px;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
    font-size: 1.5rem;
}

/* Enlace "Regístrate" / "Iniciar sesión" del modal de acceso y borde del botón de Google: legibles en claro y oscuro. */
.tc-auth-switch-link { color: #16161c; text-decoration: underline; }
.tc-auth-switch-link:hover { color: var(--tc-p-orange, #ff6000); }
.login-btn { border: 1px solid #d9d9e0; }
:root:not([data-theme="light"]) .tc-auth-switch-link { color: #fff; }
:root:not([data-theme="light"]) .login-btn { border-color: rgba(255, 255, 255, .35); }

.black-bg {
    background-color: black !important;
}

.btn-tireclick {
    background-color: #ff5c00 !important;
    color: white !important;
    padding: 10px;
}

.btn-tireclick .tireclick-icon {
    color: black !important;
    transition: color 0.3s;
}

.btn-tireclick:hover {
    background-color: black !important;
    color: white !important;
}

.btn-tireclick:hover .tireclick-icon {
    color: #ff5c00 !important;
}

/* Campos bloqueados: colores del tema (oscuro/claro), iguales para input,
   select y textarea. */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--tc-p-field-disabled-bg, #ededf1) !important;
    border-color: var(--tc-p-field-disabled-border, #dcdce2) !important;
    color: var(--tc-p-field-disabled-text, #8a8a96) !important;
    opacity: 1;
    cursor: not-allowed;
}
input:disabled::placeholder,
textarea:disabled::placeholder {
    color: var(--tc-p-field-disabled-text, #8a8a96) !important;
}
.form-floating>:disabled~label {
    color: var(--tc-p-field-disabled-text, #8a8a96) !important;
}
button:disabled {
    background-color: #dbdbdb !important;
    color: #848484;
    cursor: not-allowed;
}

.top-z-index {
    z-index: 1056;
}

.tiny-profile-picture {
    width: 40px;
    height: 40px;
}

.form-floating .form-control {
    background-color: #f0f0f0!important;
    border: 1px solid #ccc!important;
}

/* Campos bloqueados dentro de .form-floating (ciudad/estado/colonia hasta
   que el CP es válido): le gana a la regla de arriba (#f0f0f0). */
.form-floating > .form-control:disabled,
.form-floating > .form-select:disabled {
    background-color: var(--tc-p-field-disabled-bg, #ededf1) !important;
    border-color: var(--tc-p-field-disabled-border, #dcdce2) !important;
    color: var(--tc-p-field-disabled-text, #8a8a96) !important;
}

.cursor-pointer{
    cursor: pointer;
}

#cookieBanner {
    display: none;
}

/* Model/product card hover — used across home, brand, model pages */
.model-card {
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: default;
}
.model-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,.13) !important;
}
.model-card:hover img {
    transform: scale(1.05);
}

/* ===================================================
   Model card — minimalista
   =================================================== */
.tc-model-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    height: 100%;
    color: inherit;
    transition: transform .2s ease;
}
.tc-model-card:hover { transform: translateY(-3px); }

.tc-tire-panel {
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
    width: 100%;
    height: 175px;
    padding-top: 6px;
    position: relative;
}

.tc-tire-img {
    width: 100%;
    max-width: 230px;
    height: 210px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transform: translateX(-22%);
}

.tc-card-info {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(17,17,17,.07);
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 1;
    margin-top: -70px;
    width: 78%;
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .tc-tire-img { transform: none; }
    .tc-card-info { width: 100%; margin-left: 0; margin-top: 8px; }
}

.tc-card-brand-logo {
    height: 20px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    object-position: left;
    margin-bottom: 6px;
}

.tc-model-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin: 0 0 4px;
    transition: color .15s ease;
}

.tc-cat-line {
    font-size: 12.5px;
    color: #111827;
    margin: 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-model-price-label {
    display: block;
    color: #111827;
    font-size: 11.5px;
    font-weight: 400;
    margin-bottom: 1px;
}

.tc-model-price {
    color: #111827;
    font-weight: 800;
    font-size: 19.5px;
    white-space: nowrap;
    line-height: 1.2;
    margin-bottom: 10px;
}
.tc-model-price small {
    color: #111827;
    font-size: 10px;
    font-weight: 600;
}

.tc-model-price-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
}
.tc-model-price-row .tc-model-price {
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-model-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff5c00;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 4px;
    white-space: nowrap;
    transition: background .15s ease;
}
.tc-model-card:hover .tc-model-btn { background: #111827; }


/* ─── Cart add toast (SweetAlert2 bottom-right) ─ */
.tc-toast.swal2-popup {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
    border: 1px solid #e5e7eb !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    min-width: 260px !important;
    max-width: 320px !important;
}
.tc-toast .swal2-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tc-toast .swal2-html-container {
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
}
.tc-toast .swal2-timer-progress-bar {
    background: #ff5c00 !important;
}
.tc-toast .swal2-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 8px 0 0 !important;
    border-width: 2px !important;
}
.tc-toast .swal2-icon .swal2-icon-content {
    font-size: 14px !important;
}

/* ─── Botón flotante de WhatsApp ─ */
.tc-whatsapp-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 20px rgba(37,211,102,.4), 0 2px 8px rgba(0,0,0,.15);
    z-index: 1030;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tc-whatsapp-fab:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 26px rgba(37,211,102,.5), 0 4px 10px rgba(0,0,0,.18);
}
.tc-whatsapp-fab i { color: #fff; position: relative; z-index: 1; }
.tc-whatsapp-fab-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    opacity: .6;
    animation: tc-whatsapp-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes tc-whatsapp-ping {
    0%   { transform: scale(1);   opacity: .5; }
    75%  { transform: scale(1.7); opacity: 0;  }
    100% { transform: scale(1.7); opacity: 0;  }
}
/* ─── Botón "subir al inicio" (solo móvil, sobre el de WhatsApp) ─ */
.tc-back-to-top {
    display: none;
    position: fixed;
    right: 14px;
    bottom: 76px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(26,26,26,.85);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 1030;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.tc-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 767.98px) {
    .tc-back-to-top { display: flex; right: 14px; bottom: 74px; width: 40px; height: 40px; }
    .tc-whatsapp-fab { width: 50px; height: 50px; font-size: 25px; right: 14px; bottom: 14px; }
}

/* =====================================================================
   Carrito lateral — rediseño (sep-2026). Encabezado a la izquierda con el
   número de llantas, lista en filas (no tarjetas con borde), pie fijo
   abajo con resumen y dos acciones. Pisa las reglas de arriba sin
   borrarlas: el markup viejo (layouts/navbar.blade.php) sigue usando
   algunas. Claro por default; oscuro al final del bloque.
   ===================================================================== */
#cartPopover.cart-popover {
    flex-direction: column;
    width: 420px;
    max-width: 100vw;
    background: #fff;
    border-left: none;
    /* Sin sombra (pedido explícito, ver .cart-popover más arriba): a todo
       lo alto de la pantalla no hay nada que "levantar" con una sombra. */
    box-shadow: none;
}
@media (min-width: 576px) {
    #cartPopover.cart-popover { border-radius: 20px 0 0 20px; }
}

/* Encabezado */
.tc-cart-pop-header#cartPopoverTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 18px;
    background: transparent;
    border-bottom: 1px solid #eeeef2;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
}
.tc-cart-pop-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tc-cart-pop-title { margin: 0; font-size: 20px; font-weight: 800; color: #16161c; letter-spacing: -.01em; }
.tc-cart-pop-count { font-size: 13px; font-weight: 600; color: #8a8a99; white-space: nowrap; }
.tc-cart-pop-header .tc-cart-pop-close {
    position: static;
    transform: none;
    width: 36px; height: 36px;
    font-size: 14px;
    flex: none;
}

/* Lista */
#cartPopover #cartPopoverContent { padding: 4px 24px; }
.tc-cart-pop-list { list-style: none; margin: 0; padding: 0; }
#cartPopover .tc-cart-pop-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 18px 0;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #eeeef2;
    border-radius: 0;
    box-shadow: none;
}
#cartPopover .tc-cart-pop-item:last-child { border-bottom: none; }
#cartPopover .tc-cart-pop-item:hover { box-shadow: none; }
#cartPopover .tc-cart-pop-img-wrap {
    width: 84px; height: 84px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eeeef2;
    display: block;
}
#cartPopover .tc-cart-pop-img { padding: 6px; mix-blend-mode: normal; }
/* Logo más grande y pegado al nombre (antes mucho aire entre los dos) —
   pedido explícito. */
#cartPopover .tc-cart-pop-head { margin-bottom: 2px; }
#cartPopover .tc-cart-pop-brand { max-height: 22px; padding: 0; background: transparent; }
/* Espacio a la derecha para que el nombre no se meta debajo del botón de
   eliminar, que ahora flota en la esquina superior derecha de la tarjeta. */
/* Solo la cabecera (logo) y el nombre necesitan ceder espacio al botón de
   eliminar (arriba a la derecha) — si se lo pone a .tc-cart-pop-info
   completo, el renglón de precio/cantidad de abajo también se encoge y la
   píldora de cantidad ya no queda pegada al borde derecho real de la
   tarjeta. */
#cartPopover .tc-cart-pop-head { padding-right: 30px; }
#cartPopover .tc-cart-pop-name { padding-right: 30px; }
#cartPopover .tc-cart-pop-name {
    font-size: 14px;
    font-weight: 700;
    color: #16161c;
    line-height: 1.35;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#cartPopover .tc-cart-pop-name:hover { color: var(--tc-p-orange, #ff5c00); }
/* Esquina superior derecha de la tarjeta (pedido explícito), en vez de
   junto al logo. */
#cartPopover .tc-cart-pop-del {
    position: absolute;
    top: 18px;
    right: 0;
    width: 28px; height: 28px;
    background: transparent;
    color: #a1a1ad;
    font-size: 13px;
}
#cartPopover .tc-cart-pop-del:hover { background: #fee2e2; color: #dc2626; }
#cartPopover .tc-cart-pop-footer { align-items: flex-end; }
#cartPopover .tc-cart-pop-price { font-size: 16px; font-weight: 800; color: #16161c; line-height: 1.2; }
#cartPopover .tc-cart-pop-unit { font-size: 11.5px; color: #8a8a99; }
#cartPopover .tc-qty-pill { background: #f4f4f7; border-color: transparent; padding: 3px; }
#cartPopover .tc-qty-pill-btn { width: 28px; height: 28px; font-size: 13px; }
#cartPopover .tc-qty-pill-val { min-width: 30px; font-size: 13.5px; }

/* Pie fijo */
#cartPopover #cartPopoverFooter {
    padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #eeeef2;
    box-shadow: 0 -12px 30px rgba(0,0,0,.05);
}
#cartPopover #cartPopoverFooter:empty { display: none; }
.tc-cart-pop-summary { margin-bottom: 16px; }
.tc-cart-pop-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: #6b6b7b; padding: 3px 0; }
.tc-cart-pop-row--ship span:last-child { color: #16a34a; font-weight: 700; }
.tc-cart-pop-row--total { margin-top: 8px; padding-top: 12px; border-top: 1px dashed #e2e2e8; }
#cartPopover .tc-cart-pop-total-label { font-size: 15px; font-weight: 700; color: #16161c; }
#cartPopover .tc-cart-pop-total-value { font-size: 22px; font-weight: 800; color: #16161c; letter-spacing: -.01em; }
#cartPopover .tc-cart-pop-total-currency { font-size: 12px; font-weight: 600; color: #8a8a99; }

.tc-cart-pop-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    height: 52px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tc-cart-pop-btn--primary { background: var(--tc-p-orange, #ff5c00); color: #fff !important; }
/* "Ir a pagar": no a todo el ancho del popover como el resto de los
   botones — pedido explícito, se veía demasiado ancho/pesado como acción
   principal sola en su renglón. */
.tc-cart-pop-btn--checkout { height: 46px; }
.tc-cart-pop-btn--primary:hover { background: #e65500; box-shadow: 0 10px 22px rgba(255,92,0,.3); transform: translateY(-1px); }
.tc-cart-pop-btn--primary i { color: #fff !important; }
.tc-cart-pop-btn--ghost { margin-top: 8px; height: 44px; background: transparent; color: #16161c; font-weight: 700; font-size: 14px; }
.tc-cart-pop-btn--ghost:hover { background: #f4f4f7; }
.tc-cart-pop-secure { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: #8a8a99; }
.tc-cart-pop-secure i { color: #16a34a; margin-right: 4px; }

/* Vacío */
.tc-cart-pop-empty-state { text-align: center; padding: 64px 12px; }
.tc-cart-pop-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: #fff1e8; color: var(--tc-p-orange, #ff5c00);
    font-size: 30px; margin-bottom: 16px;
}
.tc-cart-pop-empty-icon i { color: inherit !important; }
.tc-cart-pop-empty-state .tc-cart-pop-empty { font-size: 17px; font-weight: 800; color: #16161c; margin: 0 0 6px; }
.tc-cart-pop-empty-sub { font-size: 13.5px; color: #8a8a99; margin: 0 0 22px; }
.tc-cart-pop-empty-state .tc-cart-pop-btn { max-width: 240px; margin: 0 auto; height: 48px; }

/* Oscuro */
:root:not([data-theme="light"]) #cartPopover.cart-popover { background: #121218; }
:root:not([data-theme="light"]) .tc-cart-pop-header#cartPopoverTitle { background: transparent; border-bottom-color: rgba(255,255,255,.08); }
:root:not([data-theme="light"]) .tc-cart-pop-title,
:root:not([data-theme="light"]) #cartPopover .tc-cart-pop-name,
:root:not([data-theme="light"]) #cartPopover .tc-cart-pop-price,
:root:not([data-theme="light"]) #cartPopover .tc-cart-pop-total-label,
:root:not([data-theme="light"]) #cartPopover .tc-cart-pop-total-value,
:root:not([data-theme="light"]) .tc-cart-pop-empty-state .tc-cart-pop-empty,
:root:not([data-theme="light"]) .tc-cart-pop-btn--ghost { color: #f2f2f5; }
:root:not([data-theme="light"]) #cartPopover .tc-cart-pop-item { background: transparent; border-bottom-color: rgba(255,255,255,.08); }
:root:not([data-theme="light"]) #cartPopover .tc-cart-pop-img-wrap { border-color: rgba(255,255,255,.08); }
:root:not([data-theme="light"]) #cartPopover .tc-cart-pop-brand { background: #fff; border-radius: 4px; padding: 2px 5px; }
:root:not([data-theme="light"]) #cartPopover #cartPopoverFooter { background: #16161d; border-top-color: rgba(255,255,255,.08); box-shadow: 0 -12px 30px rgba(0,0,0,.3); }
:root:not([data-theme="light"]) .tc-cart-pop-row { color: rgba(255,255,255,.6); }
:root:not([data-theme="light"]) .tc-cart-pop-row--total { border-top-color: rgba(255,255,255,.12); }
:root:not([data-theme="light"]) .tc-cart-pop-btn--ghost:hover { background: rgba(255,255,255,.06); }
:root:not([data-theme="light"]) #cartPopover .tc-qty-pill { background: rgba(255,255,255,.06); }
:root:not([data-theme="light"]) .tc-cart-pop-empty-icon { background: rgba(255,92,0,.14); }

/* Toast de "agregado al carrito": arriba a la izquierda, debajo de la barra de navegación fija. */
.swal2-container.tc-toast-container.swal2-top-start { top: 84px !important; padding-left: 16px; }
/* Oscuro (por defecto): fondo oscuro y texto claro; claro: fondo blanco (reglas de arriba). */
.tc-toast.swal2-popup { background: #1c1c24 !important; border-color: #2e2e3a !important; }
.tc-toast .swal2-title { color: #fff !important; }
:root[data-theme="light"] .tc-toast.swal2-popup { background: #fff !important; border-color: #e5e7eb !important; }
:root[data-theme="light"] .tc-toast .swal2-title { color: #111827 !important; }

/* =====================================================================
   Carrito (mini-carrito lateral y página de carrito/checkout) con el diseño nuevo de las cards:
   precio grande con el tachado y "Ahorras $X" apilados a su derecha, stepper con la misma superficie y borde
   (círculos − / +), botones sin sombra, bordes más marcados en modo oscuro y textos secundarios claros.
   ===================================================================== */
:root {
    --cd-surface: #f6f6f9;
    --cd-circle: #fff;
    --cd-line: rgba(0, 0, 0, .15);
    --cd-sep: #e6e6ec;
    --cd-dim: #6b6b76;
}
:root:not([data-theme="light"]) {
    --cd-surface: #181822;
    --cd-circle: #34344a;
    --cd-line: rgba(255, 255, 255, .38);
    --cd-sep: rgba(255, 255, 255, .22);
    --cd-dim: rgba(255, 255, 255, .85);
}

/* ---- Mini-carrito (#cartPopover) ---- */
#cartPopover .tc-cart-pop-prices { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; justify-content: start; }
#cartPopover .tc-cart-pop-price-main-row { grid-column: 1; grid-row: 1 / span 2; }
#cartPopover .tc-cart-pop-price-old { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 12px; color: var(--cd-dim); }
#cartPopover .tc-cart-pop-savings { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; font-weight: 700; color: var(--tc-p-orange, #ff5c00); white-space: nowrap; }
#cartPopover .tc-cart-pop-unit { grid-column: 1 / -1; grid-row: 3; color: var(--cd-dim); }
#cartPopover .tc-qty-pill { background: var(--cd-surface); border: 1px solid var(--cd-line); }
#cartPopover .tc-qty-pill-btn { background: var(--cd-circle); color: inherit; box-shadow: none; }
#cartPopover .tc-qty-pill-btn:hover { background: var(--tc-p-orange, #ff5c00); color: #fff; }
#cartPopover .tc-cart-pop-item { border-bottom-color: var(--cd-sep); }
#cartPopover .tc-cart-pop-img-wrap { border-color: var(--cd-sep); }
#cartPopover #cartPopoverFooter { border-top-color: var(--cd-sep); }
#cartPopover .tc-cart-pop-row--total { border-top-color: var(--cd-sep); }
#cartPopover .tc-cart-pop-row,
#cartPopover .tc-cart-pop-secure { color: var(--cd-dim); }
.tc-cart-pop-btn--primary:hover { box-shadow: none; transform: none; }
#cartPopover .tc-cart-pop-btn--ghost { background: var(--cd-surface); border: 1px solid var(--cd-line); color: #f2f2f5; }
:root[data-theme="light"] #cartPopover .tc-cart-pop-btn--ghost { color: #16161c; }
#cartPopover .tc-cart-pop-btn--ghost:hover { background: var(--tc-p-orange, #ff5c00); border-color: var(--tc-p-orange, #ff5c00); color: #fff; }

/* ---- Página de carrito / checkout (.tc-cart-item, mismo markup en las dos) ---- */
:root .tc-cart-item { border-bottom-color: var(--cd-sep); }
:root .tc-cart-item__right { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; justify-content: start; }
:root .tc-cart-item-price-main-row { grid-column: 1; grid-row: 1 / span 2; }
:root .tc-cart-item-price-old { grid-column: 2; grid-row: 1; align-self: end; color: var(--cd-dim); }
:root .tc-cart-item-savings-text { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; font-weight: 700; color: var(--tc-p-orange, #ff5c00); white-space: nowrap; }
:root .tc-cart-item .tc-unit-price { grid-column: 1 / -1; grid-row: 3; color: var(--cd-dim); }
:root .tc-cart-item .tc-cart-item__spec { color: var(--cd-dim); }
:root .tc-cart-qty-ctrl { background: var(--cd-surface); border: 1px solid var(--cd-line); }
:root .tc-cart-qty-btn { background: var(--cd-circle); box-shadow: none; }
:root .tc-cart-qty-btn:hover { background: var(--tc-p-orange, #ff5c00); color: #fff; }

/* Carrito/checkout: precio en una columna (total, luego tachado + ahorro en una línea, luego precio por llanta),
   para que no se amontone junto al stepper */
:root .tc-cart-item__right { grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; justify-content: stretch; }
:root .tc-cart-item-price-main-row { grid-column: 1 / -1; grid-row: 1; }
:root .tc-cart-item-price-old { grid-column: 1; grid-row: 2; align-self: center; }
:root .tc-cart-item-savings-text { grid-column: 2; grid-row: 2; align-self: center; }
:root .tc-cart-item .tc-unit-price { grid-column: 1 / -1; grid-row: 3; }
:root .tc-cart-item__footer { align-items: flex-end; gap: 16px; }

/* Mini-carrito lateral: mismo acomodo en columna que la página de carrito (total, tachado + ahorro en una línea, precio por llanta) */
#cartPopover .tc-cart-pop-prices { grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; justify-content: stretch; }
#cartPopover .tc-cart-pop-price-main-row { grid-column: 1 / -1; grid-row: 1; }
#cartPopover .tc-cart-pop-price-old { grid-column: 1; grid-row: 2; align-self: center; }
#cartPopover .tc-cart-pop-savings { grid-column: 2; grid-row: 2; align-self: center; }
#cartPopover .tc-cart-pop-unit { grid-column: 1 / -1; grid-row: 3; }
#cartPopover .tc-cart-pop-footer { align-items: flex-end; gap: 12px; }

/* Carrito (mini-carrito y página de carrito/checkout): sin el texto "Ahorras $X"; queda el precio tachado junto al total */
#cartPopover .tc-cart-pop-savings,
:root .tc-cart-item-savings-text { display: none; }

/* "Ahorras $X" de vuelta en el carrito, acomodado distinto: píldora naranja suave en su propia fila, debajo del renglón
   "precio tachado · precio por llanta" (ya no pegado al tachado) */
#cartPopover .tc-cart-pop-prices { grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px; }
#cartPopover .tc-cart-pop-price-old { grid-column: 1; grid-row: 2; }
#cartPopover .tc-cart-pop-unit { grid-column: 2; grid-row: 2; align-self: center; }
#cartPopover .tc-cart-pop-savings,
:root .tc-cart-item-savings-text {
    display: inline-block; justify-self: start; grid-column: 1 / -1; grid-row: 3; align-self: start;
    margin-top: 3px; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; line-height: 1.3; white-space: nowrap;
    background: rgba(255, 96, 0, .16); color: #ff8a3d;
}
:root[data-theme="light"] #cartPopover .tc-cart-pop-savings,
:root[data-theme="light"] .tc-cart-item-savings-text { background: #ffe9db; color: #b83e00; }
:root .tc-cart-item-price-old { grid-column: 1; grid-row: 2; }
:root .tc-cart-item .tc-unit-price { grid-column: 2; grid-row: 2; align-self: center; }

/* Carrito (mini-carrito y página de carrito/checkout): precio unitario y total bien diferenciados.
   Debajo del nombre va el precio por llanta ("$X c/u" con el tachado unitario); abajo, junto al stepper, el bloque
   "Total" con la cantidad grande y, si hay descuento, la píldora "Ahorras". Sin tres montos seguidos. */
#cartPopover .tc-cart-pop-unitline,
:root .tc-cart-item__unitline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 10px; }
#cartPopover .tc-cart-pop-unitline .tc-cart-pop-unit,
:root .tc-cart-item__unitline .tc-unit-price { font-size: 12.5px; font-weight: 600; color: var(--cd-dim); }
#cartPopover .tc-cart-pop-unitline .tc-cart-pop-price-old,
:root .tc-cart-item__unitline .tc-cart-item-price-old { font-size: 12px; font-weight: 500; color: var(--cd-dim); text-decoration: line-through; opacity: .85; }

#cartPopover .tc-cart-pop-prices,
:root .tc-cart-item__right { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.tc-cart-pop-line-label,
.tc-cart-item-total-label { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--cd-dim); line-height: 1.2; }
#cartPopover .tc-cart-pop-price { font-size: 19px; }
#cartPopover .tc-cart-pop-savings,
:root .tc-cart-item-savings-text { margin-top: 5px; }

/* Carrito/checkout: sin sombra al pasar el mouse sobre cada producto */
:root .tc-cart-item:hover,
:root[data-theme="light"] .tc-cart-item:hover { box-shadow: none !important; transform: none !important; }

/* Mini-carrito: línea de UTQG igual que en la lista del carrito/checkout (.tc-cart-item__spec) */
#cartPopover .tc-cart-pop-spec { font-size: 12px; line-height: 1.4; color: var(--cd-dim); margin: -6px 0 4px; }

/* Stepper del carrito (mini-carrito y página de carrito/checkout): una sola pieza. Los botones − / + ya no son círculos
   con fondo propio encima de la píldora; quedan integrados en ella (solo se rellenan de naranja al pasar el mouse). */
#cartPopover .tc-qty-pill-btn,
:root .tc-cart-qty-btn { background: transparent; box-shadow: none; }
#cartPopover .tc-qty-pill-btn:hover,
:root .tc-cart-qty-btn:hover { background: var(--tc-p-orange, #ff5c00); color: #fff; }

/* Carrito/checkout: cada producto en su propio recuadro con borde, más compacto (menos relleno y menos huecos entre
   la línea del precio unitario, el total y el stepper). */
:root .tc-cart-item {
    padding: 12px;
    row-gap: 4px;
    column-gap: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--cd-sep);
    border-bottom: 1px solid var(--cd-sep);
    border-radius: 16px;
}
:root .tc-cart-item:last-child { margin-bottom: 0; border-bottom: 1px solid var(--cd-sep); }
:root .tc-cart-item__name { margin-bottom: 0 !important; }
:root .tc-cart-brand-wrap { margin-bottom: 3px; }
:root .tc-cart-item__unitline { margin-bottom: 0; }
:root .tc-cart-item__footer { align-items: center; gap: 12px; }
:root .tc-cart-item__right { gap: 0; }
:root .tc-cart-item-savings-text { margin-top: 3px; padding: 2px 9px; }
:root .tc-cart-item__del { top: 10px; right: 10px; }

/* Stepper del carrito igual que el de /ofertas: píldora con superficie y borde, círculos − / + visibles
   (gris claro en oscuro, blanco en claro) que se rellenan de naranja al pasar el mouse. Misma medida (40px). */
#cartPopover .tc-qty-pill,
:root .tc-cart-qty-ctrl {
    height: 40px; padding: 4px; gap: 2px; box-sizing: border-box;
    background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 999px;
}
#cartPopover .tc-qty-pill-btn,
:root .tc-cart-qty-btn {
    width: 30px; height: 30px; font-size: 13px;
    background: var(--cd-circle); color: inherit; box-shadow: none;
}
#cartPopover .tc-qty-pill-btn:hover,
:root .tc-cart-qty-btn:hover { background: var(--tc-p-orange, #ff5c00); color: #fff; }
#cartPopover .tc-qty-pill-val,
:root .tc-cart-qty-val { min-width: 28px; width: 28px; font-size: 14px; font-weight: 800; }
/* Celular: stepper más compacto para que quepa junto al precio sin salirse de la card del producto. */
@media (max-width: 575.98px) {
    :root .tc-cart-qty-ctrl { height: 34px; padding: 3px; }
    :root .tc-cart-qty-btn { width: 26px; height: 26px; font-size: 12px; }
    :root .tc-cart-qty-val { min-width: 22px; width: 22px; font-size: 13px; }
}

/* Carrito: sin negritas en los montos por producto (el único monto destacado es el Total final), sin etiqueta "Total"
   por producto, y renglones del resumen (subtotal, envío, descuento) en peso normal */
#cartPopover .tc-cart-pop-price,
:root .tc-cart-item .tc-total-price { font-size: 16px; font-weight: 500; letter-spacing: 0; }
:root .tc-cart-item__name,
#cartPopover .tc-cart-pop-name { font-weight: 600 !important; }
.tc-checkout-content > .row > .col-lg-5 .small.fw-bold { font-weight: 500 !important; }

/* Checkout: la columna izquierda (pasos + contacto/entrega/pago) va directo sobre el fondo de la página, sin efecto de
   card; solo la columna derecha (carrito y resumen) conserva la card. Reemplaza la unión de pasos+card de arriba. */
:root .tc-checkout-content .col-lg-7 > .tc-checkout-steps,
:root .tc-checkout-content .col-lg-7 > .tc-checkout-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
    padding-left: 0;
    padding-right: 0;
}
:root .tc-checkout-content .col-lg-7 > .tc-checkout-steps { padding-top: 0; padding-bottom: 20px; margin-bottom: 0 !important; }
:root .tc-checkout-content .col-lg-7 > .tc-checkout-card { padding-top: 8px; padding-bottom: 8px; }

/* Carrito/checkout (columna derecha): fotos más chicas y menos relleno entre el contenido de cada producto */
:root .tc-cart-item { grid-template-columns: 64px 1fr; padding: 8px 10px; column-gap: 10px; row-gap: 2px; margin-bottom: 8px; }
:root .tc-cart-item__img { width: 64px; height: 64px; }
:root .tc-cart-item__del { top: 6px; right: 8px; }
:root .tc-cart-brand-wrap { margin-bottom: 2px; padding: 1px 5px; }
:root .tc-cart-brand { height: 18px; }
:root .tc-cart-item__footer { gap: 8px; }
@media (max-width: 575.98px) {
    :root .tc-cart-item { grid-template-columns: 56px 1fr; }
    :root .tc-cart-item__img { width: 56px; height: 56px; }
}

/* Checkout: sin cards en ninguna de las dos columnas (los productos ya llevan su propio borde) y, en modo claro, fondo
   blanco en toda la vista en vez del gris de la página. El modo oscuro conserva su fondo. */
:root .tc-checkout-content .col-lg-5 > .tc-checkout-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
:root[data-theme="light"] .tc-p-page:has(.tc-checkout-content) { background: #fff; }

/* Carrito/checkout: el borde inferior de la foto del encabezado se desvanece con degradado hacia el fondo de la página, y el
   contenido (título, pasos) sube sobre ella con margen negativo (ver page/cart.css). */
:root .tc-cart-hero {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* Checkout, columna derecha: en vez del efecto de card (fondo y sombra), la sección lleva solo un borde fino */
:root .tc-checkout-content .col-lg-5 > .tc-checkout-card {
    border: 1px solid var(--cd-sep);
    border-radius: 16px;
    padding: 20px;
    background: transparent;
    box-shadow: none;
}
/* Celular: sin el borde de la sección (ya cada producto lleva el suyo): se evita el doble borde. */
@media (max-width: 767.98px) {
    :root .tc-checkout-content .col-lg-5 > .tc-checkout-card { border: none; padding: 0; }
}

/* Checkout, métodos de pago: filas simples sin borde y sin desplegable. Un clic actúa directo (PayPal: el botón real de
   PayPal va transparente encima de la fila; MercadoPago: redirige; transferencia: pide confirmación). */
:root .tc-pay-option,
:root .tc-pay-option:hover,
:root .tc-pay-option.tc-pay-option--selected {
    position: relative;
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--cd-surface);
    margin-bottom: 10px;
    transition: background .15s ease;
}
:root .tc-pay-option:hover { background: color-mix(in srgb, var(--cd-surface) 85%, var(--tc-p-orange, #ff5c00) 15%); }
:root .tc-pay-option-header { min-height: 56px; padding-top: 0; padding-bottom: 0; align-items: center; }
.tc-pay-go { margin-left: auto; font-size: 15px; opacity: .55; }
.tc-pay-overlay { position: absolute; inset: 0; z-index: 3; opacity: .01; padding: 0; margin: 0; }
.tc-pay-overlay #paypal-button-container { height: 100%; }

/* Checkout: botones minimalistas (superficie y borde del tema, como en las cards de producto) que se pintan de naranja
   al pasar el mouse. "Continuar" no reacciona al mouse: se pinta solo cuando los datos de contacto están completos
   (cart.js le pone la clase --solid) o ya hay sesión iniciada. */
:root .tc-form-submit-btn--solid,
:root .tc-form-submit-btn--outline {
    background: var(--cd-surface);
    border: 1px solid var(--cd-line);
    color: var(--tc-p-text, inherit);
    box-shadow: none;
}
:root[data-theme="light"] .tc-form-submit-btn--solid,
:root[data-theme="light"] .tc-form-submit-btn--outline { color: #16161c; }
:root .tc-form-submit-btn--solid:hover,
:root .tc-form-submit-btn--outline:hover {
    background: var(--tc-p-orange, #ff5c00);
    border-color: var(--tc-p-orange, #ff5c00);
    color: #fff;
}
/* Continuar (invitado): sin efecto al pasar el mouse mientras falten datos */
:root #contactContinueBtn.tc-form-submit-btn--outline:hover {
    background: var(--cd-surface);
    border-color: var(--cd-line);
    color: var(--tc-p-text, inherit);
    cursor: default;
}
:root[data-theme="light"] #contactContinueBtn.tc-form-submit-btn--outline:hover { color: #16161c; }
/* Continuar listo (datos completos) o con sesión iniciada: naranja */
:root #contactContinueBtn.tc-form-submit-btn--solid,
:root #contactContinueBtn.tc-form-submit-btn--solid:hover,
:root #contactSection .tc-form-submit-btn--solid[onclick*="goToDeliveryStep"],
:root #contactSection .tc-form-submit-btn--solid[onclick*="goToDeliveryStep"]:hover {
    background: var(--tc-p-orange, #ff5c00);
    border-color: var(--tc-p-orange, #ff5c00);
    color: #fff;
}
:root #contactContinueBtn.tc-form-submit-btn--solid:hover,
:root #contactSection .tc-form-submit-btn--solid[onclick*="goToDeliveryStep"]:hover { background: #e65200; border-color: #e65200; }

/* Bootstrap .text-white (!important) en estos botones: reposo con el color del tema, blanco al pintarse */
:root .tc-form-submit-btn--solid.text-white { color: var(--tc-p-text, inherit) !important; }
:root[data-theme="light"] .tc-form-submit-btn--solid.text-white { color: #16161c !important; }
:root .tc-form-submit-btn--solid.text-white:hover,
:root #contactContinueBtn.tc-form-submit-btn--solid.text-white,
:root #contactSection .tc-form-submit-btn--solid.text-white[onclick*="goToDeliveryStep"] { color: #fff !important; }

/* "¿Ya tienes cuenta? Iniciar sesión": aviso a la derecha del título del paso de contacto (solo invitados) */
.tc-contact-login { font-size: 13px; color: var(--cd-dim); white-space: nowrap; }
.tc-login-link {
    display: inline; padding: 0; margin: 0 0 0 4px; background: none; border: none;
    font-size: 13px; font-weight: 700; color: var(--tc-p-orange, #ff5c00); text-decoration: none; cursor: pointer;
}
.tc-login-link:hover { text-decoration: underline; }
/* Celular: el número y el título van en la primera línea y "¿Ya tienes cuenta? Iniciar sesión" baja a una segunda línea, alineado con el
   título (32px del número + 12px de separación), en vez de apretarse a su derecha; y el checkout deja más aire a los lados. */
@media (max-width: 575.98px) {
    #contactSection .tc-checkout-card-header { flex-wrap: wrap; row-gap: 6px; }
    #contactSection .tc-contact-login { white-space: normal; flex-basis: calc(100% - 44px); margin: 0 0 0 44px !important; line-height: 1.4; }
    :root .tc-checkout-content { padding-left: 22px; padding-right: 22px; }
}

/* Carrito/checkout y mini-carrito: nombre más chico, logo pegado al nombre y el total por producto en negritas */
:root .tc-cart-item__name,
#cartPopover .tc-cart-pop-name { font-size: 14px; line-height: 1.3; }
:root .tc-cart-brand-wrap { margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
:root .tc-cart-item__body { display: flex; flex-direction: column; gap: 0; }
#cartPopover .tc-cart-pop-head { margin-bottom: 0; }
#cartPopover .tc-cart-pop-name { margin-bottom: 6px; }
#cartPopover .tc-cart-pop-price,
:root .tc-cart-item .tc-total-price { font-weight: 800; }

/* Carrito/checkout y mini-carrito: más aire arriba y abajo del nombre de cada producto */
:root .tc-cart-item__name { margin-top: 6px; margin-bottom: 6px !important; }
#cartPopover .tc-cart-pop-name { margin-top: 6px; margin-bottom: 10px; }

/* Métodos de pago: más aire arriba y abajo en cada fila */
:root .tc-pay-option-header { min-height: 80px; padding-top: 18px; padding-bottom: 18px; }
.tc-pay-overlay { overflow: hidden; }
.tc-pay-overlay #paypal-button-container { height: 55px; }

/* Métodos de pago: flecha a la derecha (no puntos de selección), visible en ambos temas y naranja al pasar el mouse */
.tc-pay-go { margin-left: auto; font-size: 18px; opacity: .8; color: inherit; transition: transform .15s ease, color .15s ease; }
:root .tc-pay-option:hover .tc-pay-go { color: var(--tc-p-orange, #ff5c00); opacity: 1; transform: translateX(3px); }