/* ==========================================================================
   Tarjeta de llanta (page/search/partials/tire-card.blade.php): /ofertas,
   /medida y "Ofertas" del home. Oscura con el tema oscuro del sitio y blanca
   con [data-theme="light"]. Movida desde page/search/showBySize.css para
   poder cargarla en el home sin traer los estilos propios de esa página.
   ========================================================================== */

/* public/css/app.css define `i { color: #ff5c00; }` de forma global (legacy
   del sitio V1), lo que fuerza cualquier ícono de la tarjeta a naranja aunque
   su badge pida otro color (ej. el camión de "Llega gratis el <día>", que
   debe verse del mismo verde que su texto). redesign/shared.css ya trae este
   mismo override pero solo se carga en /v1-clean, /v2-bento-dark, /v3-speed-retail,
   el home y buying-guide — no en showBySize.blade.php (/ofertas, /medida), que
   es justo donde se veían los íconos naranjas. Se repite aquí en vez de cargar
   shared.css completo en esa página, para no traer estilos de las vistas
   prototipo. Un color explícito más específico (ej. el carrito, a propósito
   naranja) sigue ganando. */
.tc-tire-card .bi { color: inherit; }

/* ---- Tarjetas ----
   Mismo estilo horizontal (foto izquierda, info derecha) en TODOS los
   tamaños, una por fila siempre (antes: 2 por fila desde 1200px) — pedido
   explícito de dejar más aire al contenido informativo en vez de apretarlo
   en columnas. */
.tc-tire-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (max-width: 575.98px) { .tc-tire-grid { gap: 16px; } }

/* Colores de la tarjeta como tokens: oscura con el tema oscuro del sitio
   (default, sin data-theme) y blanca con [data-theme="light"]. */
.tc-tire-card {
    --tc-card-bg: var(--tc-p-surface, #101018);
    /* rgba en vez de depender de --tc-p-border (#1f1f2b): ese tono está
       pensado para líneas divisorias discretas sobre superficies ya
       distintas entre sí (navbar/footer), pero aquí la tarjeta y el fondo
       de la página son ambos casi negros — la diferencia entre #101018 y
       #1f1f2b terminaba leyéndose como "sin borde". Blanco muy translúcido
       sí se nota contra cualquier fondo oscuro real, pedido explícito tras
       quedar invisible. */
    --tc-card-line: rgba(255,255,255,.16);
    --tc-card-text: #f2f2f6;
    --tc-card-dim: var(--tc-p-text-dim, #9a9aab);
    --tc-card-soft: #181822;
    --tc-card-plate: #f1f1f4;
    --tc-card-brand-bg: #fff;
    --tc-card-btn: #262632;
    /* Ícono del botón flotante de carrito: blanco en oscuro (contra el
       --tc-card-btn gris oscuro de abajo) y naranja en claro (contra el
       --tc-card-btn blanco) — pedido explícito, cada tema con su propio
       contraste en vez del mismo color fijo en los dos. */
    --tc-card-cart-icon: #fff;
    position: relative;
    background: var(--tc-card-bg);
    border: 1px solid var(--tc-card-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
:root[data-theme="light"] .tc-tire-card {
    --tc-card-text: #16161c;
    --tc-card-soft: #f7f7f8;
    --tc-card-plate: #fff;
    --tc-card-brand-bg: transparent;
    --tc-card-btn: #fff;
    --tc-card-cart-icon: var(--tc-p-orange);
    /* rgba en vez de un gris sólido tipo #d7d7de: a esa claridad, contra una
       página y tarjeta blancas, se leía casi como una línea blanca —
       "notorio" en el sentido de blancura, no de contraste. .1 de opacidad
       (primer intento) se fue al otro extremo: contra blanco sobre blanco
       quedó invisible. .18 es el punto medio pedido explícito — se nota el
       borde sin leerse como una línea blanca dura. */
    /* Pedido explícito: en claro sin borde, solo sombra para separar la
       tarjeta del fondo (transparent en vez de la rgba de arriba — esa
       sigue viva para los usos NO decorativos de --tc-card-line: chips de
       stock, divisor de precio/compra, etc., que si deben notarse). */
    --tc-card-line: rgba(0,0,0,.18);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.tc-tire-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(0,0,0,.3); border-color: rgba(255,92,0,.45); }
:root[data-theme="light"] .tc-tire-card:hover { border-color: transparent; box-shadow: 0 14px 30px rgba(0,0,0,.14); }
/* Tarjeta de MODELO (page/search/partials/model-card.blade.php): no hay un
   SKU único que comprar directo, así que toda la tarjeta es un <a> a
   /modelo/{slug} en vez de <div> + botones — reset de estilos de link. */
.tc-tire-card--model { color: inherit; text-decoration: none; cursor: pointer; }
.tc-tire-card--model:hover { color: inherit; }
.tc-tire-card--model .tc-tire-card-name:hover { color: inherit; }
@media (min-width: 992px) {
    .tc-tire-card:hover { transform: none; box-shadow: 0 10px 20px rgba(0,0,0,.3); }
}

/* Mismo diseño que la llanta del home (.tc-p-bestseller-img-bg,
   navbar-footer.css): asoma grande, rotada y "sangrando" fuera del borde
   izquierdo, con mix-blend-mode:multiply para que se funda con el fondo
   blanco en vez de verse recortada dentro de un recuadro contenido. */
.tc-tire-card-media {
    position: relative;
    background: var(--tc-card-plate);
    margin: 0; /* pegada al borde: sin aire a la izquierda ni arriba/abajo */
    /* En oscuro la placa clara se redondea del lado de la info; en claro no
       hace falta (tarjeta y placa son blancas, no se ve el borde). */
    border-radius: 0 14px 14px 0;
    flex: 0 0 140px;
    height: auto;
    align-self: stretch;
    box-sizing: border-box;
    overflow: hidden;
}
@media (min-width: 992px) {
    /* 170px (antes 210): la tarjeta ya es más baja y la llanta sigue
       "sangrando"; el ancho que se libera es para precio y botón. */
    .tc-tire-card-media { flex: 0 0 170px; }
}
/* Una por fila en pantallas medianas (ver .tc-tire-grid): hay ancho de sobra
   para la foto. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .tc-tire-card-media { flex: 0 0 200px; }
}
/* Ancho en % de la caja (mismo criterio que el home), pero la caja ahora es
   más ancha (230px) para que la llanta se vea grande — la versión anterior
   escalaba por ALTO (132% de una tarjeta ya alta) y eso la recortaba tanto
   que se perdía la rotación/sangrado y se veía el borde de la foto. */
.tc-tire-card-media img {
    position: absolute;
    left: -70%; top: 50%;
    width: 170%;
    height: auto;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: multiply;
    transform: translateY(-50%) rotate(-18deg);
    transition: transform .3s ease;
}
.tc-tire-card:hover .tc-tire-card-media img { transform: translateY(-50%) rotate(-14deg) scale(1.05); }
.tc-tire-card-img-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 42px; color: #c7c7cf; }

/* La galería se abre presionando la foto directamente (pedido explícito,
   sin ícono/botón aparte encima) — el botón cubre toda la caja. */
.tc-tire-card-img-link {
    position: absolute; inset: 0; display: block;
    pointer-events: auto; border: none; background: transparent; padding: 0; cursor: pointer;
}

/* ---- Móvil: layout vertical (foto arriba, derecha, info abajo) — el
   horizontal comprimido se veía demasiado apretado en pantallas angostas.
   La foto va recta y centrada, contenida con aire arriba/abajo (sin llegar
   a los bordes ni rotar/sangrar) — más parecido a una ficha de producto
   normal (estilo SimpleTire) que al recorte diagonal del home, que aquí se
   veía forzado al no tener ancho de sobra para "sangrar" a los lados. La
   info/compra se queda exactamente igual, solo cambia la orientación de la
   tarjeta y el tratamiento de la imagen. ---- */
@media (max-width: 575.98px) {
    .tc-tire-card {
        flex-direction: column;
    }
    /* Fondo BLANCO real (no la variable --tc-card-plate, que en tema oscuro
       es un gris clarito #f1f1f4 pensado para la placa de escritorio) detrás
       de la llanta — el gris va en la sección informativa de abajo, al revés
       de como había quedado. */
    .tc-tire-card-media { flex: 0 0 200px; align-self: stretch; padding: 0; box-sizing: border-box; margin: 0; background: #fff; border-radius: 0 0 14px 14px; }
    /* Más grande que la caja a propósito (150% de alto), pero anclada por
       ARRIBA con aire (top:16px, no toca el borde superior) — el recorte
       pasa solo abajo (el sobrante que no cabe en la caja), no repartido
       arriba y abajo como antes. */
    .tc-tire-card-media img {
        left: 50%; top: 16px;
        width: auto; height: 150%;
        max-height: none;
        object-fit: contain;
        mix-blend-mode: normal;
        transform: translateX(-50%);
    }
    .tc-tire-card:hover .tc-tire-card-media img { transform: translateX(-50%) scale(1.03); }
}

/* Listón diagonal de "-X%": quitado en toda la tarjeta (pedido explícito) —
   el descuento ya se ve en el chip junto al precio
   (.tc-tire-card-discount-chip), mostrarlo dos veces era redundante. */
.tc-tire-card-badge { display: none; }
/* Info y compra apilados (uno debajo del otro), no en columnas lado a lado
   — solo la foto se queda a la izquierda del bloque de texto, en todos los
   tamaños (antes esto solo pasaba desde 992px). */
.tc-tire-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.tc-tire-card-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tc-tire-card-purchase {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tc-card-line);
    margin-top: auto;
}
/* Marca a la izquierda y "Ver detalles" a la derecha; el margen derecho deja
   libre la esquina del listón de descuento. */
.tc-tire-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 44px; min-height: 24px; }
.tc-tire-card-brand { height: 22px; width: auto; max-width: 120px; object-fit: contain; }
/* Los logos de marca son oscuros sobre transparente — en la tarjeta oscura
   van sobre una pastilla clara para que se lean. */
.tc-tire-card-brand { background: var(--tc-card-brand-bg); border-radius: 6px; padding: 3px 6px; box-sizing: content-box; height: 18px; }
@media (min-width: 992px) {
    .tc-tire-card-body { padding: 18px 18px 18px 12px; }
    .tc-tire-card-brand { height: 24px; }
}
.tc-tire-card-name {
    display: block; font-size: 15.5px; font-weight: 700; color: var(--tc-card-text);
    text-decoration: none; line-height: 1.3;
    white-space: normal; overflow-wrap: break-word;
}
@media (min-width: 992px) { .tc-tire-card-name { font-size: 17px; } }
.tc-tire-card-name:hover { color: var(--tc-p-orange); }

/* Línea informativa en pastillas de color (estilo "chip" tipo marketplace:
   verde para stock/envío, ámbar para poco stock, gris para cita/centro) en
   vez del texto plano con separadores "|" — ahora que la tarjeta es una por
   fila sobra ancho de sobra para que cada dato respire en su propia pastilla. */
.tc-tire-card-quickinfo {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
    font-size: 12px; font-weight: 700;
}
/* La 2ª fila (cita/centro) solo trae el contenedor de service-info-badges.js
   — si ese cookie todavía no existe, queda vacío y no debe dejar un hueco. */
.tc-tire-card-quickinfo:has(> .tc-tire-card-service:empty:only-child) { display: none; }
.tc-tire-card-quickinfo > * {
    display: flex; align-items: center; gap: 5px;
    background: var(--tc-card-soft); border: 1px solid var(--tc-card-line);
    border-radius: 999px; padding: 4px 10px; color: var(--tc-card-dim);
}
.tc-tire-card-stock {
    background: rgba(22, 163, 74, .12) !important; border-color: rgba(22, 163, 74, .3) !important;
    color: #16a34a !important;
}
.tc-tire-card-stock i { color: #16a34a; font-size: 12px; }
.tc-tire-card-stock--low { background: rgba(217, 119, 6, .12) !important; border-color: rgba(217, 119, 6, .3) !important; color: #d97706 !important; }
.tc-tire-card-stock--low i { color: #d97706; }
.tc-tire-card-stock--out { background: rgba(220, 38, 38, .1) !important; border-color: rgba(220, 38, 38, .28) !important; color: #dc2626 !important; }
.tc-tire-card-stock--out i { color: #dc2626; }

/* Cita/instalación (pintadas por service-info-badges.js, data-compact) —
   cada badge es ahora su propia pastilla gris (ya no texto corrido con
   separadores), consistente con la pastilla de stock de al lado. */
.tc-tire-card-service { display: contents; }
.tc-tire-card-service .tc-service-badge {
    display: flex; align-items: center; gap: 5px;
    background: var(--tc-card-soft); border: 1px solid var(--tc-card-line);
    border-radius: 999px; padding: 4px 10px;
    font-size: 12px; font-weight: 700; color: var(--tc-card-dim);
}
.tc-tire-card-service .tc-service-badge strong { color: var(--tc-card-text); margin-left: 2px; white-space: nowrap; }

/* "Llega gratis el <día>" (service-info-badges.js, wants('homeDate')): sin
   el margin-left de arriba — aquí el gap del flex ya separa ícono/texto/día
   por igual, y sumarle margin-left dejaba un hueco mucho más grande antes
   del día que el que hay entre el ícono y el texto. Regla global (no
   limitada a un ancho ni a una página) para que se vea igual en /ofertas,
   /medida y en la grilla de inicio (tc-tire-grid--home). */
.tc-tire-card-service .tc-service-badge.tc-service-badge--tight strong { margin-left: 0; }

/* Mismo badge "Llega gratis el <día>" pero dentro de .tc-tire-card-mobile-info
   (≥576px) en vez de .tc-tire-card-service — ahí el pill es más angosto (el
   ancho real de la columna de info en una tarjeta de 2 por fila, ~140px) y
   "Llega gratis el miércoles" no cabe en una sola línea con días largos
   ("miércoles", "viernes"...).
   Primer intento (flex-wrap:nowrap) estaba mal: con nowrap los 3 hijos
   (ícono, texto plano "Llega gratis el", <strong>) se quedan en UNA fila,
   pero como esa fila no alcanza, el texto plano (sin white-space propio)
   rompía A LA MITAD ("Llega gratis" / "el"), y como el badge sigue
   centrado verticalmente (align-items:center) sobre esa fila ya más alta,
   el <strong> del día quedaba flotando centrado a la derecha — el bug
   exacto del screenshot ("el" solo a la izquierda, "miércoles" grande y
   suelto a la derecha).
   Fix real: white-space:nowrap en el badge completo (se hereda al texto
   plano, ya no se parte a media frase) + flex-wrap:wrap en el contenedor,
   para que si no cabe todo, el <strong> completo baje ENTERO a su propio
   renglón en vez de partirse el texto de en medio. */
.tc-tire-card-mobile-info .tc-service-badge { flex-wrap: wrap; white-space: nowrap; row-gap: 0; }
.tc-tire-card-mobile-info .tc-service-badge strong { white-space: nowrap; margin-left: 2px; }
.tc-tire-card-mobile-info .tc-service-badge.tc-service-badge--tight strong { margin-left: 0; }

/* UTQG como pills (mismo patrón que tc-utqg-pill del detalle de producto),
   variante clara fija ya que la tarjeta siempre tiene fondo blanco. Ahora
   vive a la derecha del precio (.tc-tire-card-price-row), aprovechando el
   espacio libre en vez de su propia fila aparte arriba. */
.tc-tire-card-utqg { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; flex: 0 0 auto; }
.tc-tire-card-utqg-pill {
    display: flex; flex-direction: column; align-items: center;
    background: var(--tc-card-soft); border: 1px solid var(--tc-card-line); border-radius: 7px;
    padding: 3px 9px; min-width: 42px;
}
.tc-tire-card-utqg-label {
    font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: #9ca3af; line-height: 1; margin-bottom: 1px;
}
.tc-tire-card-utqg-val { font-size: 12px; font-weight: 800; color: var(--tc-card-text); line-height: 1.2; }

.tc-tire-card-service:empty { display: none; }

.tc-tire-card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; }
/* Precio tachado ARRIBA (su propia línea) y precio grande + chip de
   descuento abajo, en ese orden — mismo patrón que un marketplace. */
.tc-tire-card-price { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tc-tire-card-price-main-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Precio grande, protagonista del contenido (antes 18px) — mismo criterio
   que un marketplace: es lo primero que se lee después del nombre. Negro,
   no naranja — pedido explícito en inicio y en /ofertas, el naranja se
   queda para el chip de descuento y el ícono de envío. */
.tc-tire-card-price-main { font-size: 24px; font-weight: 800; color: var(--tc-card-text); }
@media (min-width: 992px) { .tc-tire-card-price-main { font-size: 27px; } }
.tc-tire-card-price-unit { font-size: 12.5px; font-weight: 600; color: var(--tc-card-dim); }
.tc-tire-card-price-old { font-size: 13px; font-weight: 500; color: #9ca3af; text-decoration: line-through; }
/* Chip "X% OFF" junto al precio (además del listón diagonal de la foto) —
   mismo patrón visual que un badge de descuento de marketplace. */
.tc-tire-card-discount-chip {
    display: inline-flex; align-items: center; font-size: 12px; font-weight: 800;
    color: #fff; background: #00a650; border: none;
    border-radius: 4px; padding: 3px 7px;
}

/* Compra en un solo renglón: stepper a la izquierda, botón con el total de
   esa cantidad a la derecha — sustituye la caja de resumen, el botón a todo
   el ancho y el link final (≈130px menos de alto por tarjeta). */
.tc-tire-card-buy { display: flex; align-items: center; gap: 8px; }
.tc-tire-card-buy .tc-p-qty-stepper { height: 44px; padding: 4px 6px; background: var(--tc-card-soft); border-color: var(--tc-card-line); }
.tc-tire-card-buy .tc-p-qty-btn { width: 32px; height: 32px; font-size: 14px; }
.tc-tire-card-buy .tc-p-qty-value { width: 26px; font-size: 14px; color: var(--tc-card-text); }
.tc-tire-card-buy .tc-p-qty-btn { background: var(--tc-card-btn); color: var(--tc-card-text); }

.tc-tire-card-cart-btn {
    flex: 1 1 auto; min-width: 0;
    width: 100%; height: 44px; padding: 0 12px; border: none; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--tc-p-orange); color: #fff; font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: background .15s ease, transform .15s ease;
}
/* El botón no usa la clase .btn de Bootstrap (que ya resuelve esto vía
   "i { color: inherit }") — sin este override el ícono hereda el naranja
   global de app.css y queda invisible sobre el fondo naranja del botón. */
.tc-tire-card-cart-btn i { font-size: 15px; color: #fff; }
/* Ícono compacto (bi-cart3, sin relleno, igual al del navbar): solo se usa
   en la tarjeta de celular de 2 por fila — en el resto el botón usa el
   ícono relleno de siempre. */
.tc-tire-card-cart-icon-compact { display: none; }
.tc-tire-card-cart-btn:hover { background: #e65500; transform: translateY(-1px); }
.tc-tire-card-cart-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.tc-tire-card-cart-btn strong { font-weight: 800; white-space: nowrap; }
.tc-tire-card-cart-btn strong::before { content: "·"; margin-right: 6px; opacity: .7; font-weight: 600; }

/* Quitado en toda la tarjeta (pedido explícito) — el nombre y la tarjeta ya
   llevan al detalle, era redundante. */
.tc-tire-card-details { display: none; }
.tc-tire-card-details:hover { color: var(--tc-p-orange); gap: 8px; }

/* ---- Escritorio: un poco más de aire que móvil, pero comprimido a
   propósito (2 tarjetas por fila, no 1 a todo el ancho). ---- */
@media (min-width: 992px) {
    .tc-tire-card-info { gap: 6px; }
    .tc-tire-card-name { font-size: 14.5px; }
    .tc-tire-card-feat { font-size: 10.5px; padding: 3px 9px 3px 5px; }
    .tc-tire-card-feat-icon { width: 13px; height: 13px; }
    .tc-tire-card-stock { font-size: 11.5px; }
    .tc-tire-card-utqg-pill { min-width: 40px; padding: 3px 8px; }
    .tc-tire-card-utqg-label { font-size: 8px; }
    .tc-tire-card-utqg-val { font-size: 12px; }
    .tc-tire-card-price-main { font-size: 19px; }
    .tc-tire-card-price-unit { font-size: 12px; }
    .tc-tire-card-price-old { font-size: 12px; }
    .tc-tire-card-details { font-size: 12px; }
    .tc-service-badge { font-size: 10.5px; padding: 4px 9px; }
}

/* ---- Modal de galería a pantalla completa (estilo SimpleTire): marca y nombre arriba a la izquierda, X arriba a la
   derecha, foto grande al centro, nota de rines y miniaturas centradas debajo. ---- */
.tc-tire-gallery-modal .modal-content { border: none; border-radius: 0; box-shadow: none; background: var(--tc-p-bg, #fff); color: var(--tc-p-text, inherit); }
:root[data-theme="light"] .tc-tire-gallery-modal .modal-content { background: #fff; }
.tc-tire-gallery-modal .modal-header { align-items: flex-start; padding: 28px 5% 8px; border-bottom: none; }
.tc-tire-gallery-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tc-tire-gallery-brand-logo { height: 44px; width: auto; max-width: 220px; object-fit: contain; padding: 2px 6px; background: #fff; border-radius: 6px; }
.tc-tire-gallery-modal .modal-title { font-size: 18px; }
/* Botón de cerrar propio en vez de la X genérica de Bootstrap: el ::before/::after dibujan la cruz a mano (la X de
   Bootstrap es un background-image que no hereda currentColor). */
.tc-tire-gallery-modal .btn-close {
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    opacity: 1;
    box-shadow: none;
    flex-shrink: 0;
}
.tc-tire-gallery-modal .btn-close::before,
.tc-tire-gallery-modal .btn-close::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 16px; height: 2px; border-radius: 2px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}
.tc-tire-gallery-modal .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* La galería vive en el <body> (fuera de .tc-p-page), así que no hereda los colores del tema: la cruz y su fondo se fijan aquí. */
:root:not([data-theme="light"]) .tc-tire-gallery-modal .btn-close { background: rgba(255, 255, 255, .08) !important; }
:root[data-theme="light"] .tc-tire-gallery-modal .btn-close { background: rgba(0, 0, 0, .08) !important; }
:root[data-theme="light"] .tc-tire-gallery-modal .btn-close::before,
:root[data-theme="light"] .tc-tire-gallery-modal .btn-close::after { background: #16161c; }
:root .tc-tire-gallery-modal .btn-close:hover { background: rgba(255, 92, 0, .35) !important; }
.tc-tire-gallery-modal .modal-body { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 5% 28px; overflow-y: auto; }
.tc-tire-gallery-modal .carousel { width: min(100%, 900px); }
/* Sin placa en claro (la página es blanca); en oscuro la foto conserva su placa clara para no perderse. multiply funde
   el fondo blanco propio de las fotos con la placa. */
.tc-tire-gallery-stage { display: flex; align-items: center; justify-content: center; padding: 12px; }
:root:not([data-theme="light"]) .tc-tire-gallery-stage { background: #f1f1f4; border-radius: 14px; }
.tc-tire-gallery-img { width: 100%; max-height: calc(100vh - 330px); min-height: 200px; object-fit: contain; display: block; mix-blend-mode: multiply; }
.tc-tire-gallery-img--single { max-height: calc(100vh - 220px); }
.tc-tire-gallery-thumbs { display: flex; flex: none; flex-wrap: wrap; justify-content: center; gap: 16px 22px; margin-top: 14px; padding: 4px; overflow: visible; }
.tc-tire-gallery-thumb {
    width: 76px; height: 76px; object-fit: contain; border-radius: 10px;
    cursor: pointer; border: 2px solid transparent; background: #f1f1f4;
    flex: none; opacity: .75; padding: 4px; box-sizing: border-box;
    mix-blend-mode: multiply;
    transition: border-color .15s ease, opacity .15s ease;
}
.tc-tire-gallery-thumb:hover { opacity: 1; }
.tc-tire-gallery-thumb--active { border-color: var(--tc-p-orange); opacity: 1; }
/* Flechas prev/next: mismo círculo discreto que el resto del sitio, en vez de las barras grises default de Bootstrap. */
.tc-tire-gallery-modal .carousel-control-prev,
.tc-tire-gallery-modal .carousel-control-next {
    width: 40px; height: 40px; top: 50%; bottom: auto;
    transform: translateY(-50%);
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    opacity: .85;
}
.tc-tire-gallery-modal .carousel-control-prev { left: 12px; }
.tc-tire-gallery-modal .carousel-control-next { right: 12px; }
.tc-tire-gallery-modal .carousel-control-prev:hover,
.tc-tire-gallery-modal .carousel-control-next:hover { opacity: 1; }
.tc-tire-gallery-modal .carousel-control-prev-icon,
.tc-tire-gallery-modal .carousel-control-next-icon { width: 16px; height: 16px; }

@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card-head { flex-wrap: wrap; row-gap: 6px; padding-right: 0; }
}

/* Botón de galería de la card: flota sobre la foto, en el espacio libre que deja la llanta (card horizontal: esquina superior
   derecha de la caja de la foto; card vertical: arriba a la izquierda). */
.tc-tire-card-gallery-btn { display: none; }
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card-gallery-btn {
        display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; left: calc(var(--tc-media-w, 200px) - 46px); z-index: 3;
        width: 34px; height: 34px; padding: 0; font-size: 16px; color: var(--tc-p-text, inherit);
        background: var(--tc-card-soft, rgba(128, 128, 128, .12)); border: none; border-radius: 50%; cursor: pointer;
        transition: color .15s ease;
    }
    .tc-tire-grid--offers2 .tc-tire-card-gallery-btn:hover { color: var(--tc-p-orange); }
    .tc-tire-grid--offers2 .tc-tire-card-gallery-btn i { color: inherit; }
}

/* ---- "Ofertas" del home (.tc-tire-grid--home): 6 tarjetas, 3 por fila
   desde 1200px, 2 entre 992 y 1199, una por fila horizontal en medianas y
   carrusel de una por pantalla en móvil (como las demás secciones del home). */
@media (min-width: 1200px) {
    .tc-tire-grid.tc-tire-grid--home { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .tc-tire-grid--home .tc-tire-card-media { flex: 0 0 140px; }
}
@media (max-width: 575.98px) {
    .tc-tire-grid.tc-tire-grid--home {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: 14px; padding: 6px 0 16px; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: var(--tc-p-orange) transparent;
    }
    .tc-tire-grid--home .tc-tire-card { flex: 0 0 100%; scroll-snap-align: center; }
}

/* Tema claro: placa sin redondeo (ver .tc-tire-card-media). */
:root[data-theme="light"] .tc-tire-card-media { border-radius: 0; }

/* ---- Móvil (<576px), listados /medida y /ofertas: tarjeta vertical, DOS
   por fila, estilo marketplace (referencia explícita del usuario): foto
   arriba sin sangrar/rotar (plana, centrada, sobre su placa clara), botón de
   carrito circular flotando sobre la esquina de la foto (sin stepper +/-:
   cada click suma 1 y el número dentro del círculo aumenta), info apilada
   abajo (nombre, precio, "Llega gratis el <fecha>", "Instalación
   disponible"). Se ocultan "Ver detalles", UTQG, cita/centro y el ícono de
   galería — no caben a este ancho. ---- */
@media (max-width: 575.98px) {
    .tc-tire-grid:not(.tc-tire-grid--home) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card { flex-direction: column; border-radius: 14px; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-media {
        flex: none;
        width: 100%;
        height: 150px;
        align-self: stretch;
        background: var(--tc-card-plate);
        border-radius: 14px 14px 0 0;
    }
    /* Foto plana centrada (sin sangrar ni rotar) pero con fondo gris claro
       (--tc-card-plate) + mix-blend-mode:multiply para fundir el blanco de
       la foto del producto con esa placa, igual que el resto de tarjetas
       del sitio (pedido explícito). */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-media img {
        position: absolute; inset: 10px;
        left: 10px; top: 10px;
        width: calc(100% - 20px); height: calc(100% - 20px);
        max-width: none;
        object-fit: contain;
        mix-blend-mode: multiply;
        transform: none;
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card:hover .tc-tire-card-media img { transform: none; }

    /* El listón diagonal de "-X%" se quita en esta tarjeta compacta (pedido
       explícito) — el descuento ya se ve en el chip junto al precio
       (.tc-tire-card-discount-chip), mostrarlo dos veces era redundante. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-badge { display: none; }

    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-body { padding: 10px; gap: 6px; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-info { gap: 4px; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-head { padding-right: 0; min-height: 0; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-brand { height: 20px; max-width: 110px; padding: 2px 4px; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-details { display: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-name {
        font-size: 12.5px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* El bloque de cita/centro y el de stock/envío de arriba se ocultan (no
       caben), pero el nuevo .tc-tire-card-mobile-info (instalación +
       entrega) sí debe verse — por eso el :not() en vez de ocultar
       .tc-tire-card-service a secas. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-quickinfo,
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-utqg { display: none !important; }

    /* "Llega gratis el <fecha>" como chip verde (igual que el ejemplo) +
       "Instalación disponible" como texto simple con ícono — ver
       data-service-info="homeDate" en tire-card.blade.php. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info {
        display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
        margin-top: 2px;
    }
    /* Verde pensado para fondo oscuro (default del sitio): texto verde claro
       sobre verde translúcido, no el verde clarito de fondo blanco de antes
       (#e3f7e9 se perdía/desentonaba sobre tarjeta oscura). */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info .tc-service-badge {
        display: flex; align-items: center; gap: 4px;
        font-size: 10.5px; font-weight: 700; color: #4ade80;
        background: rgba(74, 222, 128, .14); border-radius: 6px; padding: 3px 8px;
    }
    :root[data-theme="light"] .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info .tc-service-badge {
        color: #1a8d4a; background: #e3f7e9;
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info .tc-service-badge strong { color: inherit; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-badge {
        display: flex; align-items: center; gap: 4px;
        font-size: 10.5px; font-weight: 600; color: var(--tc-p-orange);
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-badge i { font-size: 12px; }

    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-purchase { gap: 4px; padding-top: 6px; border-top: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-price { margin-top: 0; gap: 2px 6px; }
    /* Precio negro (no naranja) y sin "/llanta" — pedido explícito, igual
       que el ejemplo de referencia. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-price-main { font-size: 18px; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-price-unit { display: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-price-old { font-size: 11px; }

    /* Sin stepper +/- ni barra de compra a todo lo ancho: un solo botón
       circular flotando sobre la esquina de la foto. Cada click suma 1 al
       carrito (deal-add-to-cart.js) y el número dentro del círculo aumenta
       en vez de mostrar el ícono — .tc-tire-card tiene position:relative,
       así que el botón se posiciona sobre la caja de la foto sin moverlo
       en el DOM. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-buy .tc-p-qty-stepper { display: none; }
    /* Antes de agregar: fondo --tc-card-btn (blanco en claro, gris oscuro de
       superficie en oscuro — mismo token que ya usaba el resto de la
       tarjeta) con ícono naranja y borde sutil de --tc-card-line, no
       relleno desde el inicio — pedido explícito. Antes esto estaba
       hardcodeado a var(--tc-p-orange) + ícono blanco en los DOS temas
       (perdiendo el diseño blanco original del modo claro); con los tokens
       cada tema saca su propio estilo sin duplicar la regla. Tamaño subido
       de 30px a 36px en celular (pedido explícito, quedaba chico). */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn {
        position: absolute; right: 8px; top: 124px; z-index: 4;
        flex: none; width: 36px; height: 36px; min-height: 0; padding: 0;
        border-radius: 50%; justify-content: center;
        background: var(--tc-card-btn); border: 1px solid var(--tc-card-line); color: var(--tc-p-orange);
        box-shadow: 0 2px 10px rgba(0,0,0,.3);
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn i { font-size: 15px; color: var(--tc-card-cart-icon); }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-icon-wide { display: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-icon-compact { display: inline-block; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-label,
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn strong { display: none; }
    /* Número de veces presionado (data-counter-badge, deal-add-to-cart.js) —
       reemplaza el ícono del carrito en vez de convivir con él. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn .tc-tire-card-counter-badge {
        display: none; font-size: 12px; font-weight: 800;
    }
    /* Después de agregar: se rellena de naranja y el número va en blanco. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting i { display: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting .tc-tire-card-counter-badge { display: block; color: #fff; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting {
        background: var(--tc-p-orange); color: #fff;
    }
}

/* ---- Tablet/PC (≥576px, tarjeta horizontal con la llanta a la izquierda):
   mismo botón circular de carrito que en celular, flotando en la esquina
   inferior derecha del área de la foto, en vez del stepper +/- y el botón
   de "Agregar $X" a todo lo ancho — pedido explícito. La foto mide 200px de
   ancho en tablet (576–1199.98px) y 170px en PC (≥1200px, ver
   .tc-tire-card-media más arriba), así que el botón se posiciona distinto
   en cada rango. ---- */
/* Vistas con filtros a la izquierda (/ofertas, /medida, /marcas/{marca}, modelos):
   2 por fila en PC. En TABLET (576-991.98px, el mismo corte que offcanvas-lg: el
   sidebar de filtros todavía es overlay, no fijo) se queda en 1 por fila, y en
   celular 2 por fila. */
@media (min-width: 992px) {
    /* Dos cards por fila cuando caben dos de ≥440px (según el ancho del contenedor, no el de la pantalla); si no, una. */
    .tc-tire-grid.tc-tire-grid--offers2 { grid-template-columns: repeat(auto-fill, minmax(max(440px, calc((100% - 18px) / 2)), 1fr)); gap: 18px; }
}
@media (min-width: 576px) {
    /* Un poco más separado de la foto (pedido explícito) y sin la línea
       divisora entre la info y el precio/compra. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-body { padding-left: 20px; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-purchase { border-top: none; padding-top: 0; }

    /* Mismo contenido informativo que la tarjeta de celular: fuera las
       pastillas UTQG (Desgaste/Tracción/Temp.) y el bloque de cita/centro,
       entra "Instalación disponible" + "Envío gratis el <día>" — pedido
       explícito de igualar el contenido en todos los anchos. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-utqg,
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-quickinfo { display: none !important; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info {
        display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
        margin-top: 2px;
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info .tc-service-badge {
        display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #4ade80;
        background: rgba(74, 222, 128, .14); border-radius: 6px; padding: 4px 10px;
    }
    :root[data-theme="light"] .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info .tc-service-badge {
        color: #1a8d4a; background: #e3f7e9;
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-info .tc-service-badge strong { color: inherit; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-badge {
        display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tc-p-orange);
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-badge i { font-size: 13px; }

    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-buy .tc-p-qty-stepper { display: none; }
    /* Mismos tokens --tc-card-btn/--tc-card-line que la versión de celular
       (ver comentario arriba) — blanco+ícono naranja en claro, superficie
       oscura+ícono naranja en oscuro, en vez de naranja+ícono blanco fijo en
       los dos temas. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn {
        position: absolute; bottom: 28px; z-index: 4;
        flex: none; width: 38px; height: 38px; min-height: 0; padding: 0;
        border-radius: 50%; justify-content: center;
        background: var(--tc-card-btn); border: 1px solid var(--tc-card-line); color: var(--tc-p-orange);
        box-shadow: 0 2px 10px rgba(0,0,0,.3);
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn i { font-size: 15px; color: var(--tc-card-cart-icon); }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-icon-wide { display: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-icon-compact { display: inline-block; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-label,
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn strong { display: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn .tc-tire-card-counter-badge { display: none; font-size: 14px; font-weight: 800; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting i { display: none; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting .tc-tire-card-counter-badge { display: block; color: #fff; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting { background: var(--tc-p-orange); color: #fff; }

    /* "Ver detalles" pedido explícito solo en PC — ya existía en el markup
       (junto a la marca) pero .tc-tire-card-details queda en display:none
       global (línea ~366, nunca se usó en ningún breakpoint) y aquí
       específicamente se ocultaba de nuevo (ver regla de celular arriba).
       En vez de moverlo de lugar en el flujo, se saca con position:absolute
       a la esquina inferior derecha de la tarjeta (ya es position:relative)
       — mismo patrón que el UTQG y el botón de carrito de aquí arriba. */
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-details {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        position: absolute;
        right: 18px;
        /* Centrado con el renglón de "Llega gratis el <día>" (el último badge
           de .tc-tire-card-mobile-info, pedido explícito) — medido contra su
           centro vertical real en vez de un valor a ojo. */
        bottom: 34px;
        z-index: 2;
        font-size: 12px;
        font-weight: 700;
        color: var(--tc-card-dim);
        text-decoration: none;
    }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-details i { font-size: 11px; }
}
/* Tablet: foto de 200px de ancho. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn { left: 154px; }
}
/* PC: foto de 170px de ancho — contenido y botón un poco más a la derecha
   (pedido explícito, solo en PC). */
@media (min-width: 1200px) {
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-body { padding-left: 30px; }
    .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-cart-btn { left: 118px; }

    /* UTQG (Desgaste/Tracción/Temp.), solo en PC y solo en tarjetas anchas
       de 2 por fila (.tc-tire-grid--offers2, catálogo completo de /ofertas)
       — pedido explícito: esta tarjeta deja un espacio en blanco a la
       derecha del precio que no aparece en tablet/celular. En el home
       (.tc-tire-grid--home3, 3 por fila) la tarjeta es más angosta y el
       UTQG empujaba el chip de descuento hacia abajo, así que ahí no se
       muestra — solo cabe bien en la tarjeta ancha de 2 columnas.
       Primer intento (en flujo, junto al precio) también se veía mal: el
       ancho disponible varía según el nombre/precio de cada tarjeta, así
       que a veces cabía en la misma línea y a veces se iba a una línea
       aparte — inconsistente entre tarjetas. En vez de competir por ese
       espacio, se saca del flujo (.tc-tire-card ya es position:relative) y
       se fija a la derecha, centrado verticalmente en toda la tarjeta —
       mismo lugar siempre, sin importar el contenido. */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg {
        display: flex !important;
        position: absolute;
        top: 50%; right: 22px;
        transform: translateY(-50%);
        flex-direction: column; gap: 8px;
        z-index: 1;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg-pill { min-width: 54px; }
    /* El precio ya no comparte renglón con el UTQG (que ahora flota aparte),
       así que no necesita dejarle espacio a la derecha. La tarjeta de
       modelo (.tc-tire-card--model) no entra aquí: sus cubos de
       medidas/rin van bajo el nombre, no flotando — no deben perder ese
       espacio reservado. */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row { padding-right: 90px; }
}

/* Oculto por default (desktop/tablet) — solo se muestra dentro del bloque
   compacto de celular de arriba. */
.tc-tire-card-mobile-info { display: none; }

/* Overlay que cubre la mitad de info y lleva al producto — inerte por default (pointer-events:none): las cards de
   producto usan el botón explícito "Ver detalles"; solo lo activan las tarjetas de modelo del home
   (.tc-tire-grid--home3 sin --offers2, ver más abajo), que recortan el lado izquierdo para no tapar la foto. Se posiciona
   respecto a .tc-tire-card (ya es position:relative), no a .tc-tire-card-body. */
.tc-tire-card-body-link {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    text-indent: -9999px;
    overflow: hidden;
}

/* Sugeridos del detalle y ofertas del home en escritorio (≥1200px): la card es la misma de /ofertas (.tc-tire-grid--offers2),
   horizontal; aquí solo cambia la cantidad de columnas (3) y la foto, que se angosta a 150px (170px en oscuro) para que el
   contenido quepa. En los sugeridos va una sola fila de 3 (la 4ª es para el 2x2 de celular; se cuentan solo tarjetas con ~
   porque cada una trae al lado su modal de galería); en el home se ven las 6. */
@media (min-width: 1200px) {
    .tc-tire-grid.tc-tire-grid--offers2.tc-tire-grid--3,
    .tc-tire-grid.tc-tire-grid--home3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    :root .tc-tire-grid.tc-tire-grid--offers2:is(.tc-tire-grid--3, .tc-tire-grid--home3) .tc-tire-card { --tc-media-w: 150px; }
    :root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2:is(.tc-tire-grid--3, .tc-tire-grid--home3) .tc-tire-card { --tc-media-w: 130px; }
    .tc-tire-grid--3 > .tc-tire-card ~ .tc-tire-card ~ .tc-tire-card ~ .tc-tire-card { display: none; }
}

/* "Modelos más vendidos" del home (tarjetas de modelo, .tc-tire-grid--home3 sin --offers2): foto más angosta, sin botón
   "Ver detalles" y toda la mitad de info clicable (.tc-tire-card-body-link). */
@media (min-width: 1200px) {
    .tc-tire-grid--home3:not(.tc-tire-grid--offers2) .tc-tire-card-media { flex: 0 0 150px; }
    .tc-tire-grid:not(.tc-tire-grid--home).tc-tire-grid--home3:not(.tc-tire-grid--offers2) .tc-tire-card-details { display: none; }
    .tc-tire-grid--home3:not(.tc-tire-grid--offers2) .tc-tire-card-body-link { pointer-events: auto; left: 150px; }
}

/* "Ver modelo →" de la tarjeta de modelo (search/partials/model-card):
   texto discreto que se pone naranja con el hover de la tarjeta, igual que
   .tc-p-bestseller-cta de "Modelos más vendidos" del home. */
.tc-tire-card-model-cta {
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
    font-size: 12.5px; font-weight: 600;
    color: var(--tc-card-dim);
    transition: color .15s ease;
}
.tc-tire-card--model:hover .tc-tire-card-model-cta { color: var(--tc-p-orange); }
.tc-tire-card-model-cta i { font-size: 12px; }
/* "Ver modelo →": en PC va debajo del precio (renglón completo); en celular, a la derecha del precio. */
@media (min-width: 576px) {
    .tc-tire-card-model-cta { flex: 0 0 100%; }
}
@media (max-width: 575.98px) {
    .tc-tire-card-model-cta { margin-left: auto; }
}


/* Tarjeta de modelo (search/partials/model-card): medidas disponibles y rines del modelo, en texto bajo el nombre. */
.tc-tire-card-model-info { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--tc-card-dim, #6b6b76); }
.tc-tire-card-model-info span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tc-tire-card-model-info i { font-size: 13px; color: var(--tc-p-orange, #ff6000); }

/* ---- Tarjetas de 2 por fila con filtros a la izquierda (.tc-tire-grid--offers2) en TABLET y PC
   (≥576px): vuelven el stepper +/− (4 por defecto) y el botón "Agregar $total", en vez del
   círculo flotante sobre la foto. En celular (<576px) se queda el círculo de siempre. ---- */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy { margin-top: 10px; gap: 10px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-p-qty-stepper { display: inline-flex; flex: none; height: 44px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn {
        position: static; left: auto; bottom: auto;
        flex: 1 1 auto; width: auto; height: 44px; padding: 0 18px; justify-content: center;
        border: none; border-radius: 999px; background: var(--tc-p-orange); color: #fff;
        box-shadow: 0 4px 12px rgba(255, 96, 0, .3);
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn:hover { background: #e65500; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn i { color: #fff; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-icon-wide { display: inline-block; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-icon-compact { display: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-label { display: inline; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn strong { display: inline; }
    /* Ya no hay círculo con contador: tras agregar, el botón conserva su ícono. */
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn .tc-tire-card-counter-badge { display: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting i.tc-tire-card-cart-icon-wide { display: inline-block; }
    /* "Ver detalles" deja de flotar sobre la esquina: queda en el renglón de "Llega gratis…". */
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-details { position: static; }
}
/* La columna de info es angosta (≈220px con el sidebar de filtros): stepper y botón compactos,
   sin ícono dentro del botón, para que "Agregar · $total" quepa completo. */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy { gap: 6px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-p-qty-stepper { padding: 4px; gap: 2px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-p-qty-btn { width: 26px; height: 26px; font-size: 12px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-p-qty-value { width: 22px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn {
        padding: 0 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; gap: 3px;
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-icon-wide,
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting i.tc-tire-card-cart-icon-wide { display: none; }
}
/* Ícono del carrito dentro del botón (más compacto, sin el "·" antes del total para que quepa). */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-icon-wide,
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn.tc-tire-card-cart-btn--counting i.tc-tire-card-cart-icon-wide { display: inline-block; font-size: 13px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn strong::before { content: none; }
}
/* "Ver detalles" en la esquina superior derecha de la tarjeta (PC/tablet, vistas con filtros). */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-details { position: absolute; top: 16px; right: 18px; bottom: auto; }
}
/* Stepper más amplio y botón de carrito compacto (ícono + total, sin la palabra "Agregar"). */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy { gap: 10px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-p-qty-stepper { padding: 4px 6px; gap: 6px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-p-qty-btn { width: 32px; height: 32px; font-size: 14px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-p-qty-value { width: 24px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn { flex: 1 1 auto; width: auto; padding: 0 16px; gap: 6px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-label { display: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-icon-wide { font-size: 15px; }
}
/* Botón con la palabra "Agregar". Si la tarjeta es angosta (con el sidebar de filtros) solo
   cabe ícono + "Agregar"; el total se muestra cuando hay ancho de sobra. */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy { container-type: inline-size; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-label { display: inline; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn { padding: 0 14px; gap: 8px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-btn strong { display: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-icon-wide { font-size: 14px; }
}
@container (min-width: 290px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-cart-btn strong { display: inline; }
}
/* PC/tablet (vistas con filtros): UTQG más arriba y "Llega gratis…" (izquierda) junto a
   "Instalación disponible" (derecha); si no caben en un renglón, se acomodan uno debajo del otro. */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg { top: 52px; transform: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-mobile-info {
        flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px;
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-mobile-info-row { order: 1; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-mobile-badge { order: 2; }
}
@media (min-width: 576px) {
    /* Con el UTQG subido, el nombre y la medida dejan su espacio para que no se encimen. */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-name { padding-right: 78px; }
}
/* Modo claro: el texto de "Instalación disponible" va en negro (el ícono se queda naranja). */
:root[data-theme="light"] .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-badge { color: #0e0e14; }
:root[data-theme="light"] .tc-tire-grid:not(.tc-tire-grid--home) .tc-tire-card-mobile-badge i { color: var(--tc-p-orange); }

/* =====================================================================
   Panel de filtros (page/catalog/filters.blade.php): tarjeta con secciones
   separadas por líneas, opciones como "chips", precio con "$" e
   interruptor para "solo con stock". Mismos colores en claro y oscuro.
   ===================================================================== */
.tc-ffilters {
    --ff-bg: #17171d;
    --ff-line: rgba(255, 255, 255, .1);
    --ff-field: rgba(255, 255, 255, .06);
    --ff-text: #f2f2f5;
    --ff-dim: rgba(255, 255, 255, .55);
}
:root[data-theme="light"] .tc-ffilters {
    --ff-bg: #fff;
    --ff-line: #e6e6ec;
    --ff-field: #fff;
    --ff-dim: #6b7280;
    --ff-text: #16161c;
}

/* Escritorio: el panel va plano sobre la página (sin card); en celular/tablet sigue siendo el panel deslizable de siempre. */
@media (min-width: 992px) {
    :root .tc-ffilters.offcanvas-lg { background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--ff-text); }
    :root .tc-ffilters .tc-ffilters-header,
    :root .tc-ffilters .tc-ffilters-body { background: transparent; color: inherit; }
    .tc-ffilters .tc-ffilters-header { display: flex; padding: 0 0 4px; align-items: baseline; }
    .tc-ffilters .tc-ffilters-body { padding: 0; }
    .tc-ffilters .tc-ffilter:first-child { padding-top: 14px; }
}

.tc-ffilters-header .offcanvas-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}
.tc-ffilters-badge,
.tc-ffilter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--tc-p-orange);
    border-radius: 999px;
}

/* Secciones */
.tc-ffilter { margin-bottom: 0; padding: 16px 0; }
.tc-ffilter + .tc-ffilter { border-top: 1px solid var(--ff-line); }

.tc-ffilters .tc-ffilter-select,
.tc-ffilters .tc-ffilter-search input,
.tc-ffilters .tc-fprice-field {
    height: 42px;
    border-radius: 12px;
    background: var(--ff-field);
    border: 1px solid var(--ff-line);
    color: var(--ff-text);
}
.tc-ffilter-select { padding: 0 12px; }
/* Filtro por medida: ancho, perfil y rin en una sola fila. */
.tc-fsize { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tc-fsize .tc-ffilter-select { padding: 0 8px; }
.tc-ffilter-select:focus,
.tc-fprice-field:focus-within,
.tc-ffilter-search input:focus { border-color: var(--tc-p-orange); box-shadow: 0 0 0 3px rgba(255, 96, 0, .15); outline: none; }

/* Precio */
.tc-fprice { display: flex; align-items: center; gap: 8px; }
.tc-fprice-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.tc-fprice-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
    outline: none;
}
.tc-fprice-sign { font-weight: 700; color: var(--ff-dim); }
.tc-fprice-dash { color: var(--ff-dim); }

/* Buscador dentro de un desplegable */
.tc-ffilter-search { position: relative; margin: 12px 0 10px; }
.tc-ffilter-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ff-dim); pointer-events: none; }
.tc-ffilter-search input { width: 100%; padding: 0 12px 0 34px; }

/* Opciones como chips */
.tc-ffilter-search + .tc-fchips { margin-top: 0; }
.tc-fchip[hidden] { display: none; }
.tc-fchip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.tc-ffilters-actions { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--ff-line); }

/* =====================================================================
   Cards de producto en vistas con filtros (2 por fila, .tc-tire-grid--offers2): jerarquía más limpia, sin
   el hueco entre desempeño y precio, UTQG compacto junto al precio y compra separada por una línea.
   La foto de la llanta a la izquierda no se toca.
   ===================================================================== */
.tc-tire-meta-fallback { display: none; }
.tc-tire-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

@media (min-width: 576px) {
    /* Contenedor */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model),
    .tc-tire-grid--home3:not(.tc-tire-grid--offers2) .tc-tire-card--model {
        border: 1px solid var(--tc-card-line, rgba(255, 255, 255, .1));
        border-radius: 18px;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
    }

    /* Título siempre a 2 líneas de alto: todas las cards tienen la misma estructura y la compra
       queda alineada sin dejar huecos distintos según el largo del nombre. */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-name {
        padding-right: 0;
        min-height: 2.5em;
        font-size: 15px;
        line-height: 1.25;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-info { gap: 8px; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-body { gap: 10px; }

    /* Desempeño: más discreto (sin brillo) */
    .tc-tire-grid--offers2 .tc-tire-card .tc-card-performance {
        padding: 3px 10px;
        font-size: 11px;
        box-shadow: none;
    }

    /* Precio a la izquierda, UTQG compacto a la derecha en la misma fila (sin columna flotante) */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row {
        padding-right: 0;
        align-items: flex-end;
        gap: 8px 14px;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg {
        position: static;
        transform: none;
        flex-direction: row;
        gap: 6px;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg-pill {
        min-width: 0;
        padding: 3px 9px;
        border-radius: 8px;
        background: var(--tc-card-soft, rgba(0, 0, 0, .04));
        border: 1px solid var(--tc-card-line, rgba(0, 0, 0, .1));
    }

    /* Compra: separada por una línea. El stepper (− / +) conserva su diseño original. */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy {
        margin-top: 4px;
        padding-top: 14px;
        border-top: 1px solid var(--tc-card-line, rgba(0, 0, 0, .1));
    }
}

/* Botón "Agregar" de las cards de 2 por fila: mismo alto que el stepper, degradado sutil de naranja, brillo
   interior y sombra de color en lugar de un bloque plano; el total de la compra va dentro, separado por una línea. */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn {
        gap: 8px;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .2px;
        background: linear-gradient(180deg, #ff7a1f 0%, #ff5c00 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -8px rgba(255, 92, 0, .7);
        transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn:hover {
        background: linear-gradient(180deg, #ff7a1f 0%, #ff5c00 100%);
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 20px -8px rgba(255, 92, 0, .8);
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn:active { transform: translateY(0); filter: brightness(.97); }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn strong {
        padding-left: 10px;
        font-weight: 600;
        border-left: 1px solid rgba(255, 255, 255, .45);
    }
}
@container (min-width: 310px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn strong { display: inline; }
}

/* Precio del panel de filtros: el <input> no debe pintar su propio fondo/borde dentro del campo con "$" (los estilos
   globales de .tc-p-filter-input le ponían una caja blanca encima), ni mostrar las flechitas del número. */
.tc-ffilters .tc-fprice .tc-fprice-field input.tc-p-filter-input {
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}
.tc-ffilters .tc-fprice-field input::-webkit-outer-spin-button,
.tc-ffilters .tc-fprice-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tc-ffilters .tc-fprice-field input::placeholder { color: var(--ff-dim); opacity: 1; }

/* =====================================================================
   Cards de producto (2 por fila, vistas con filtros) — rediseño del contenido.
   Orden: marca · título · medida y desempeño · precio con el anterior tachado · UTQG · entrega e instalación ·
   compra. El descuento va como etiqueta sobre la foto (que queda a la izquierda, sin cambios) y los avisos de
   servicio son renglones con ícono, sin pastillas de colores.
   ===================================================================== */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) { position: relative; }

    /* El descuento se queda en el bloque de la derecha (chip junto al precio); nada encima de la foto. */

    /* Cabecera: marca a la izquierda, "Ver detalles" discreto a la derecha */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-brand { max-height: 26px; width: auto; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-details { font-size: 12px; font-weight: 600; }

    /* Título y datos */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-name {
        font-size: 16px;
        font-weight: 800;
        line-height: 1.25;
        min-height: 2.5em;
        color: var(--tc-card-text, inherit);
    }

    /* Precio: grande, con el anterior tachado a su lado (una sola línea, sin el hueco de antes) */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 10px;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main-row { order: 1; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-old { order: 2; font-size: 13px; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main { font-size: 26px; letter-spacing: -.3px; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-unit { font-size: 12px; font-weight: 600; }

    /* Entrega e instalación: dos renglones de texto con ícono */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: 0;
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--tc-card-text, inherit);
        background: transparent;
        border: 0;
        border-radius: 0;
    }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge i { color: #14a44d; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge strong { color: inherit; font-weight: 800; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge {
        font-size: 13px;
        font-weight: 600;
        color: var(--tc-card-text, inherit);
    }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge i { color: var(--tc-p-orange); }
    :root[data-theme="light"] .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge { color: #16161c; }
}

/* Corrección (cards de 2 por fila):
   1) El bloque de precio ya no se pega al fondo de la card (margin-top:auto): cuando una card vecina tenía más
      contenido (por ejemplo el UTQG), todo el espacio sobrante quedaba como un hueco enorme entre el desempeño
      y el precio. Ahora el precio va justo debajo de los datos y solo la barra de compra baja al fondo.
   2) El reserva de 78 px a la derecha de la medida (era para el UTQG flotante) empujaba el chip de desempeño lejos
      de ella; el UTQG ya no flota, así que se quita. */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-purchase {
        margin-top: 0;
        flex: 1 1 auto;
        border-top: 0;
        padding-top: 4px;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { margin-top: auto; }
}

/* =====================================================================
   Cards de 2 por fila (vistas con filtros) — contenido de la derecha, rediseñado.
   Sin cajas de color: jerarquía por tamaño y peso, y una sola línea de separación antes de la compra.
     marca ................................ Ver detalles
     título (2 líneas)
     MEDIDA  |  desempeño (badge negra con sombra)
     precio grande + /llanta ............. UTQG (3 mini datos)
     precio anterior tachado · -9% · Ahorras $340
     ícono Instalación disponible
     ícono Llega gratis el viernes
     ─────────────────────────────────────────
     [ − 4 + ]  [ Agregar | $13,587 ]
   ===================================================================== */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-info { gap: 10px; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-name { min-height: 0; font-size: 17px; line-height: 1.22; }

    /* Medida y desempeño: una sola línea, sin etiquetas pegadas al valor */
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tile-label { display: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-card-performance {
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .35);
    }
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-card-performance {
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .15);
    }

    /* Bloque de compra: cuadrícula de 2 columnas (precio | UTQG) y renglones completos debajo */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-purchase {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 8px;
        align-items: end;
        flex: 1 1 auto;
        margin-top: 0;
        padding-top: 2px;
        border-top: 0;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row {
        grid-column: 1; grid-row: 1; padding: 0; background: none; border-radius: 0;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg {
        grid-column: 2; grid-row: 1; justify-self: end; display: flex !important; position: static; flex-direction: row; gap: 5px;
    }

    /* Precio: grande; debajo, anterior tachado + descuento + ahorro en una línea tenue */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price {
        display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main-row { grid-column: 1 / -1; order: 0; display: block; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main { font-size: 30px; letter-spacing: -.5px; line-height: 1.05; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-unit { font-size: 12px; font-weight: 600; margin-left: 3px; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-discount-chip { display: none; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-old { grid-row: 2; order: 0; font-size: 13px; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-savings {
        grid-row: 2; font-size: 12.5px; font-weight: 700; color: var(--tc-p-orange, #ff6000);
    }

    /* Instalación y entrega: renglones de texto con ícono naranja, sin fondos ni colores extra */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info,
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info-row { display: contents; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-badge { grid-column: 1 / -1; grid-row: 2; font-size: 13px; font-weight: 600; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info-row .tc-tire-card-service {
        grid-column: 1 / -1; grid-row: 3; display: block; padding: 0; background: none; border-radius: 0;
    }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info-row .tc-tire-card-service:empty { display: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge {
        display: inline-flex; flex-direction: row; align-items: center; gap: 7px; flex-wrap: nowrap; white-space: nowrap;
        padding: 0; background: none; border: 0; font-size: 13px; font-weight: 600; color: var(--tc-card-text, inherit);
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge i { margin: 0; font-size: 14px; color: var(--tc-p-orange, #ff6000); }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge strong { color: inherit; font-weight: 800; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge,
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge i,
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge strong { color: inherit; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge i { color: var(--tc-p-orange, #ff6000); }

    /* Compra: abajo, con una línea que la separa; el botón Agregar sin sombra */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy {
        grid-column: 1 / -1; grid-row: 4; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tc-card-border, rgba(255, 255, 255, .12));
    }
    :root[data-theme="light"] .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { border-top-color: rgba(0, 0, 0, .1); }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn,
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn:hover { box-shadow: none; }
}

/* Versión minimalista: sin contornos ni cajas; solo texto, aire y una acción clara. */
@media (min-width: 576px) {

    /* UTQG: una línea de texto tenue en lugar de tres cajitas, debajo del precio */
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg {
        grid-column: 1 / -1; grid-row: 4; justify-self: start; gap: 14px;
    }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-pill {
        display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; min-width: 0;
    }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-label { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tc-card-dim, #8a8a96); }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-val { font-size: 12px; font-weight: 800; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row { grid-column: 1 / -1; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { grid-row: 5; }

    /* Servicios en tono tenue, sin negritas salvo el día */
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge,
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-badge { font-size: 12.5px; font-weight: 500; color: var(--tc-card-dim, #8a8a96); }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge,
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge strong { color: var(--tc-card-dim, #8a8a96); }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge strong { font-weight: 700; color: var(--tc-card-text, inherit); }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge i { color: var(--tc-card-dim, #8a8a96); }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge i { color: var(--tc-card-dim, #8a8a96); }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { border-top: 0; padding-top: 4px; }
}

/* "Llega gratis el <día>": todo en el mismo tono tenue (el día sin negro) y sin el fondo verde del modo claro */
@media (min-width: 576px) {
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge,
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge {
        background: none !important;
        border: 0;
        padding: 0;
        color: var(--tc-card-dim, #6b6b76);
    }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge strong,
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge strong {
        color: inherit;
        font-weight: 600;
    }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge i,
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge i {
        color: inherit;
    }
}

/* Entrega visible (pastilla naranja tenue, sin verde) con el día pegado al texto, y UTQG con el contenido centrado */
@media (min-width: 576px) {
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge,
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge {
        display: inline-block !important;
        padding: 6px 12px !important;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        background: rgba(74, 222, 128, .16) !important;
        color: #4ade80;
    }
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge {
        background: #e3f7e9 !important;
        color: #1a8d4a;
    }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge i { margin-right: 7px; color: inherit; vertical-align: -1px; }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge strong { margin-left: 3px; font-weight: 900; color: inherit; }

    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg { gap: 8px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-pill {
        display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
        min-width: 0; padding: 6px 12px; line-height: 1;
        border: 1px solid var(--tc-card-border, rgba(128, 128, 128, .35)); border-radius: 999px; background: transparent;
    }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-label,
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-val { line-height: 1; margin: 0; padding: 0; display: block; }
}

/* Etiquetas y ahorro que solo existen en las cards de ficha: ocultos por defecto (home, móvil, 3 por fila) */
.tc-tire-card .tc-tile-label { display: none; }
.tc-tire-card .tc-tire-card-savings { display: none; }
.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-savings { display: block; }

/* Móvil (<576px), vistas con filtros: mismo acomodo que PC — medida tenue + badge de desempeño, precio con anterior
   tachado y ahorro, instalación tenue y entrega en pastilla naranja suave con el día pegado al texto. El botón
   circular de carrito (flotando sobre la foto) no se toca. */
@media (max-width: 575.98px) {
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-info { gap: 6px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-card-performance {
        padding: 3px 9px; font-size: 10px;
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .35);
    }
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-card-performance {
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .15);
    }

    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 1px 6px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-price-main-row { grid-column: 1 / -1; display: block; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-price-main { font-size: 22px; line-height: 1.05; letter-spacing: -.4px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-discount-chip { display: none; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-price-old { grid-row: 2; font-size: 11px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-savings { grid-row: 2; font-size: 11px; font-weight: 700; color: var(--tc-p-orange, #ff6000); }

    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info { gap: 5px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge { font-size: 10.5px; font-weight: 500; color: var(--tc-card-dim, #8a8a96); }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge i { color: var(--tc-card-dim, #8a8a96); }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge,
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge {
        display: inline-block !important;
        padding: 5px 8px !important;
        border-radius: 12px;
        /* La letra se ajusta al ancho de la pantalla (de 9px a 12px, según cuánto espacio deja la card) para que "Llega gratis el <día>" quepa en un renglón. */
        font-size: clamp(9px, calc(3.2vw - 2.6px), 12px);
        font-weight: 500;
        line-height: 1.25;
        white-space: nowrap;
        background: rgba(74, 222, 128, .16) !important;
        color: #4ade80;
    }
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge {
        background: #e3f7e9 !important;
        color: #1a8d4a;
    }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge i { margin-right: 5px; color: inherit; vertical-align: -1px; }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-service .tc-service-badge strong { margin-left: 2px; font-weight: 900; color: inherit; }
}

/* Cards de 2 por fila (PC/tablet): "Instalación disponible" y "Llega gratis el…" en el mismo renglón, uno al lado del otro */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-purchase { grid-template-columns: auto auto 1fr; column-gap: 12px; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-badge { grid-column: 1; grid-row: 2; align-self: center; white-space: nowrap; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info-row .tc-tire-card-service { grid-column: 2; grid-row: 2; align-self: center; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg { grid-row: 3; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { grid-row: 4; }
}

/* Orden del renglón de servicios: entrega a la izquierda, instalación a la derecha */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info-row .tc-tire-card-service { grid-column: 1; grid-row: 2; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-badge { grid-column: 2; grid-row: 2; }
}

/* Cards de 2 por fila (PC/tablet): precio a la izquierda; a su derecha, apilados, el anterior tachado y "Ahorras $X" */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 0; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main-row { grid-column: 1; grid-row: 1 / span 2; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-old { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; }
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-savings { grid-column: 2; grid-row: 2; align-self: start; justify-self: start; }
}

/* Bloque de precio (2 por fila, PC/tablet): menos aire arriba y más abajo, antes de los servicios */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row { margin-top: -8px; padding-bottom: 10px; }
}

/* Ajuste fino (2 por fila, PC/tablet): menos separación bajo el precio; UTQG con más padding interno */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row { padding-bottom: 2px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg { gap: 10px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-pill { padding: 8px 16px; gap: 8px; }
}

/* UTQG (2 por fila): el relleno extra va arriba y abajo; a los lados se queda como estaba */
@media (min-width: 576px) {
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-pill { padding: 9px 12px; gap: 6px; }
    .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg { gap: 8px; }
}

/* UTQG (2 por fila): relleno vertical real (una regla previa con :not() lo dejaba en 3px) */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg-pill {
        padding: 10px 12px;
        border-radius: 999px;
    }
}

/* UTQG (2 por fila): el aire va alrededor de la fila (arriba hacia entrega/instalación y abajo hacia la compra), no dentro de cada píldora */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg-pill {
        padding: 5px 12px;
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg {
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

/* Línea separadora sobre el stepper y el botón Agregar (2 por fila, PC/tablet) */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy {
        border-top: 1px solid var(--tc-card-line, rgba(255, 255, 255, .14));
        padding-top: 12px;
    }
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { border-top-color: rgba(0, 0, 0, .12); }
}

/* Servicios apilados: "Llega gratis el…" arriba e "Instalación disponible" debajo, con el ícono del color del texto */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-info-row .tc-tire-card-service { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-badge { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg { grid-row: 4; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { grid-row: 5; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge i,
    :root[data-theme="light"] .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge i { color: inherit; }
}

/* Badge de desempeño sin sombra en todas las cards (2 y 3 por fila, PC/tablet y móvil) */
.tc-tire-card .tc-card-performance,
:root[data-theme="light"] .tc-tire-card .tc-card-performance { box-shadow: none !important; }

/* Precio tachado y "Ahorras $X" en una sola línea, a la derecha del precio */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price { grid-template-columns: auto auto auto; justify-content: start; align-items: baseline; column-gap: 12px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main-row { grid-column: 1; grid-row: 1; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-old { grid-column: 2; grid-row: 1; align-self: baseline; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-savings { grid-column: 3; grid-row: 1; align-self: baseline; white-space: nowrap; }
}

/* Precio con aire arriba (quita el margen negativo anterior y suma padding) */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row { margin-top: 0; padding-top: 8px; }
}

/* Precio tachado arriba y "Ahorras $X" debajo, a la derecha del precio */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price { grid-template-columns: auto auto; align-items: center; column-gap: 14px; row-gap: 0; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main-row { grid-column: 1; grid-row: 1 / span 2; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-old { grid-column: 2; grid-row: 1; align-self: end; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-savings { grid-column: 2; grid-row: 2; align-self: start; }
}

/* Modo oscuro: textos secundarios de las cards en blanco suave (nada de grises difíciles de leer) */
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge,
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-mobile-badge i,
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-label,
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-price-unit,
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-price-old,
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-details {
    color: rgba(255, 255, 255, .88) !important;
}
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-pill,
:root:not([data-theme="light"]) .tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-utqg-val { color: #fff; }

/* Compra más ligera (2 por fila, PC/tablet): barra de 40px en vez de ~54px, texto más fino y color plano */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy { gap: 10px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-p-qty-stepper { height: 40px; padding: 3px 5px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-p-qty-btn { width: 30px; height: 30px; font-size: 13px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn {
        height: 40px; min-height: 0; padding-top: 0; padding-bottom: 0;
        font-size: 13px; font-weight: 700; letter-spacing: 0;
        background: #ff6000;
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn:hover { background: #ee5800; filter: none; transform: none; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn i { font-size: 14px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn strong { font-weight: 600; padding-left: 8px; }
}

/* Foto de la llanta (2 por fila, PC/tablet): la caja crece un poco hacia el contenido (el padding del texto baja lo
   mismo, así el texto no se mueve) y su borde derecho se difumina en lugar de cortarse en seco; se acaba la línea
   vertical que separaba foto y contenido. */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card { --tc-media-w: 224px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-media {
        flex-basis: var(--tc-media-w);
        border-radius: 0;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-body { padding-left: 4px; }
}
@media (min-width: 1200px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card { --tc-media-w: 194px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-body { padding-left: 6px; }
}

/* Fila de compra angosta (card de 3 por fila): el botón queda solo con el ícono del carrito. */
@container (max-width: 235px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card-buy .tc-tire-card-cart-label { display: none; }
}

/* Precio: un poco menos de padding arriba */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-row { padding-top: 3px; }
}

/* Sin Desgaste / Tracción / Temp. en las cards de 2 por fila (siguen en el detalle del producto) */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-utqg { display: none !important; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy { grid-row: 4; }
}

/* Modo oscuro: la foto de la llanta vuelve a como estaba (sin degradado, mismo ancho de caja y mismo padding del texto) */
@media (min-width: 576px) {
    :root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card { --tc-media-w: 200px; }
    :root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-media {
        flex-basis: var(--tc-media-w);
        border-radius: 0 14px 14px 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
    :root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-body { padding-left: 20px; }
}
@media (min-width: 1200px) {
    :root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card { --tc-media-w: 170px; }
    :root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-body { padding-left: 30px; }
}

/* =====================================================================
   Paginación (page/partials/pager.blade.php): "Anterior · 1 … 4 5 6 … 20 · Siguiente" con el contador encima.
   ===================================================================== */
.tc-pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 28px 0 8px; }
.tc-pager-info { margin: 0; font-size: 13px; color: var(--tc-p-text-dim, #9a9aab); }
:root:not([data-theme="light"]) .tc-pager-info { color: rgba(255, 255, 255, .8); }
.tc-pager-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tc-pager-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 40px; height: 40px; padding: 0 12px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    color: var(--tc-p-text, #f2f2f6); background: transparent;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
:root[data-theme="light"] .tc-pager-btn { color: #16161c; border-color: rgba(0, 0, 0, .15); }
a.tc-pager-btn:hover { border-color: var(--tc-p-orange, #ff6000); color: var(--tc-p-orange, #ff6000); }
.tc-pager-btn.is-active { background: var(--tc-p-orange, #ff6000); border-color: var(--tc-p-orange, #ff6000); color: #fff; }
.tc-pager-btn.is-disabled { opacity: .4; cursor: not-allowed; }
.tc-pager-gap { padding: 0 4px; color: var(--tc-p-text-dim, #9a9aab); }
@media (max-width: 575.98px) {
    .tc-pager-label { display: none; }
    .tc-pager-btn { min-width: 38px; height: 38px; padding: 0 10px; }
}
.tc-tire-results, #resultados { scroll-margin-top: 90px; }

/* Paginación: el número de la página activa va en blanco también en modo claro */
:root .tc-pager .tc-pager-btn.is-active,
:root[data-theme="light"] .tc-pager .tc-pager-btn.is-active { color: #fff; }

/* Modo oscuro: bordes algo más marcados (card, stepper y línea separadora) */
:root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card {
    --tc-card-line: rgba(255, 255, 255, .22);
}
:root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card {
    border-color: rgba(255, 255, 255, .22);
}
:root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-p-qty-stepper {
    border: 1px solid rgba(255, 255, 255, .22);
}
:root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy {
    border-top-color: rgba(255, 255, 255, .18);
}

/* Modo oscuro: bordes más marcados también en el panel de filtros (tarjeta, campos, chips, separadores) y en la paginación */
:root:not([data-theme="light"]) .tc-ffilters {
    --ff-line: rgba(255, 255, 255, .34);
    --ff-field: rgba(255, 255, 255, .09);
}
:root:not([data-theme="light"]) .tc-ffilters .tc-ffilter + .tc-ffilter,
:root:not([data-theme="light"]) .tc-ffilters .tc-ffilters-actions { border-top-color: rgba(255, 255, 255, .24); }
:root:not([data-theme="light"]) .tc-pager-btn { border-color: rgba(255, 255, 255, .38); }
:root:not([data-theme="light"]) .tc-pager-btn.is-active { border-color: var(--tc-p-orange, #ff6000); }

/* Modo oscuro: los círculos − / + se distinguen del fondo del stepper (superficie del stepper como antes, círculos más claros) */
:root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card { --tc-card-soft: #181822; }
:root:not([data-theme="light"]) .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-p-qty-btn {
    background: #34344a;
    color: #fff;
}

/* Botón Agregar: la línea que separa el texto del total se ve en cualquier tema (antes era blanca y en claro desaparecía) */
@media (min-width: 576px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn strong { border-left: 1px solid rgba(128, 128, 128, .6); }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn:hover strong { border-left-color: rgba(255, 255, 255, .7); }
}

/* =====================================================================
   Detalle de llanta (page/productInformation.blade.php): mismo lenguaje que las cards nuevas.
   Precio con tachado y ahorro apilados a su derecha, stepper y botón Agregar con la misma superficie y borde
   (el botón se vuelve naranja al pasar el mouse), entrega en pastilla naranja suave, instalación en texto tenue,
   sin sombra en la badge de desempeño y bordes más marcados en modo oscuro.
   ===================================================================== */
.tc-detail-panel {
    --pd-surface: #181822;
    --pd-circle: #34344a;
    --pd-line: rgba(255, 255, 255, .38);
    --pd-dim: rgba(255, 255, 255, .85);
    --pd-chip-bg: rgba(255, 96, 0, .16);
    --pd-chip-fg: #ff8a3d;
}
:root[data-theme="light"] .tc-detail-panel {
    --pd-surface: #f6f6f9;
    --pd-circle: #fff;
    --pd-line: rgba(0, 0, 0, .15);
    --pd-dim: #6b6b76;
    --pd-chip-bg: #ffe9db;
    --pd-chip-fg: #b83e00;
}

/* Desempeño sin sombra */
.tc-detail-panel .tc-card-performance { box-shadow: none !important; }

/* Precio: grande a la izquierda; tachado arriba y ahorro abajo, a la derecha */
.tc-detail-panel .tc-detail-price-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.tc-detail-panel .tc-detail-price-main-row { grid-column: 1; grid-row: 1 / span 2; }
.tc-detail-panel .tc-detail-discount-chip { display: none; }
.tc-detail-panel .tc-detail-price-old { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 14px; color: var(--pd-dim); }
.tc-detail-panel .tc-detail-savings { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0 !important; font-size: 13px; font-weight: 700; color: var(--tc-p-orange, #ff6000); }
.tc-detail-panel .tc-price-note { grid-column: 1 / -1; color: var(--pd-dim); }
.tc-detail-panel .tc-detail-currency { color: var(--pd-dim); }

/* Compra: stepper y botón con el mismo diseño */
.tc-detail-panel .tc-pd-qty-stepper { background: var(--pd-surface); border: 1px solid var(--pd-line); }
.tc-detail-panel .tc-pd-qty-btn { background: var(--pd-circle); color: inherit; }
.tc-detail-panel .tc-pd-qty-btn:hover:not(:disabled) { background: var(--tc-p-orange, #ff6000); color: #fff; }
.tc-detail-panel .tc-tire-card-cart-btn.select-product-btn {
    flex: 1 1 auto; height: 50px; min-height: 0; padding: 0 20px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
    border-radius: 999px; font-size: 14px; font-weight: 700;
    background: #ff6000; border: none; color: #fff;
    box-shadow: none; transition: background .18s ease;
}
.tc-detail-panel .tc-tire-card-cart-btn.select-product-btn i,
.tc-detail-panel .tc-tire-card-cart-btn.select-product-btn strong { color: inherit; }
.tc-detail-panel .tc-tire-card-cart-btn.select-product-btn strong { font-weight: 600; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .6); }
.tc-detail-panel .tc-tire-card-cart-btn.select-product-btn strong::before { content: none; }
.tc-detail-panel .tc-tire-card-cart-btn.select-product-btn:hover,
.tc-detail-panel .tc-tire-card-cart-btn.select-product-btn:focus-visible { background: #e65200; }

/* Detalle de llanta y de modelo (service-info-badges.js, data-service-info="homeDate,installDate", vacío hasta que hay CP):
   "Llega gratis el <día>" en pastilla verde, la misma de las tarjetas, y a su derecha "Instalación disponible" en texto
   plano con ícono (baja a otra línea si no cabe). */
.tc-service-info:empty { display: none; }
.tc-service-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tc-service-info .tc-service-badge.tc-service-badge--tight {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    color: #4ade80; background: rgba(74, 222, 128, .14); border: none;
}
.tc-service-info .tc-service-badge.tc-service-badge--tight i { margin-right: 6px; vertical-align: -1px; color: inherit; }
.tc-service-info .tc-service-badge.tc-service-badge--tight strong { margin-left: 3px; font-weight: 800; color: inherit; }
:root[data-theme="light"] .tc-service-info .tc-service-badge.tc-service-badge--tight { color: #1a8d4a; background: #e3f7e9; }
.tc-service-plain-text { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: inherit; }
.tc-service-plain-text i { color: inherit; font-size: 13px; }

/* Bordes más marcados en modo oscuro en las fichas del detalle */
:root:not([data-theme="light"]) .tc-detail-panel .tc-utqg-pill,
:root:not([data-theme="light"]) .tc-detail-panel .tc-feat-chip,
:root:not([data-theme="light"]) .tc-detail-panel .tc-dim-chip,
:root:not([data-theme="light"]) .tc-detail-panel .tc-trust-item { border-color: rgba(255, 255, 255, .3); }
:root .tc-detail-panel .tc-pd-qty-stepper { background: var(--pd-surface); border: 1px solid var(--pd-line); }
:root .tc-detail-panel .tc-pd-qty-btn { background: var(--pd-circle); color: inherit; }
:root .tc-detail-panel .tc-pd-qty-btn:hover:not(:disabled) { background: var(--tc-p-orange, #ff6000); color: #fff; }

/* =====================================================================
   Panel de filtros con el estilo de SimpleTire: plano sobre la página (sin card), título grande, secciones con título
   en negritas y chevron separadas por líneas finas, opciones como lista con casilla cuadrada a la derecha y, abajo,
   "Limpiar filtros" + botón "Aplicar filtros" en píldora.
   ===================================================================== */
.tc-ffilters-header .offcanvas-title { font-size: 28px; font-weight: 800; letter-spacing: -.3px; }

/* Secciones */
.tc-ffilters .tc-ffilter { padding: 22px 0; }
.tc-ffilters .tc-ffilter + .tc-ffilter { border-top: 2px solid var(--ff-line); }
.tc-ffilters .tc-ffilter-toggle {
    margin: 0 0 12px; font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ff-text);
}
.tc-ffilters .tc-ffilter-toggle { width: 100%; margin: 0; padding: 0; background: none; border: none; text-align: left; display: flex; align-items: center; gap: 8px; }
.tc-ffilters .tc-ffilter-toggle i { margin-left: auto; font-size: 17px; color: var(--ff-text); transition: transform .2s ease; }
.tc-ffilters .tc-ffilter-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.tc-ffilters .tc-ffilter--collapsible .collapse.show,
.tc-ffilters .tc-ffilter--collapsible .collapsing { padding-top: 14px; }

/* Opciones: texto a la izquierda, casilla cuadrada a la derecha */
.tc-ffilters .tc-fchips { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 0; padding: 0; max-height: 260px; }
.tc-ffilters .tc-fchip { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 9px 0; cursor: pointer; }
.tc-ffilters .tc-fchip span,
.tc-ffilters .tc-fchip:hover span,
.tc-ffilters .tc-fchip input:checked + span {
    padding: 0; border: none; border-radius: 0; background: none; color: var(--ff-text);
    font-size: 15px; font-weight: 700; text-align: left;
}
.tc-ffilters .tc-fchip::after {
    content: ""; flex: none; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--ff-line);
    border-radius: 7px; background: transparent center / 16px no-repeat; transition: background-color .15s ease, border-color .15s ease;
}
:root:not([data-theme="light"]) .tc-ffilters .tc-fchip::after { border-color: rgba(255, 255, 255, .5); }
:root[data-theme="light"] .tc-ffilters .tc-fchip::after { border-color: #9a9aa6; }
.tc-ffilters .tc-fchip:hover::after { border-color: var(--tc-p-orange); }
.tc-ffilters .tc-fchip:has(input:checked)::after {
    background-color: var(--tc-p-orange); border-color: var(--tc-p-orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.tc-ffilters .tc-fchip input:focus-visible + span { outline: 2px solid var(--tc-p-orange); outline-offset: 2px; }


/* Barra inferior fija: Limpiar filtros + Aplicar filtros */
.tc-ffilters .tc-ffilters-actions {
    display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 0; padding: 16px 0; border-top: 2px solid var(--ff-line);
    /* Fija abajo del panel (siempre visible mientras el panel está en pantalla), como en SimpleTire */
    position: sticky; bottom: 0; z-index: 3; background: var(--tc-p-bg, #fff);
}
.tc-ffilters .tc-ffilters-actions .tc-tire-filter-apply {
    flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; box-shadow: none;
}
.tc-ffilters .tc-ffilters-actions .tc-tire-filter-reset { flex: none; font-size: 13px; font-weight: 700; color: var(--ff-dim); text-decoration: none; }
.tc-ffilters .tc-ffilters-actions .tc-tire-filter-reset:hover { color: var(--tc-p-orange); }

/* =====================================================================
   Pestañas de orden (page/partials/sort-tabs.blade.php): fila con una línea fina debajo; la pestaña activa lleva una
   línea negra más gruesa (blanca en modo oscuro) sobre la fina. La línea fina va como sombra interior de la barra
   (.tc-sort-bar) para que la gruesa no se recorte con el scroll horizontal de las pestañas. A la derecha, en escritorio,
   el selector de diseño de las cards (horizontal / vertical).
   ===================================================================== */
.tc-sort-bar { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; box-shadow: inset 0 -2px 0 var(--ff-line, rgba(128, 128, 128, .25)); }
.tc-sort-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.tc-sort-tabs::-webkit-scrollbar { display: none; }
.tc-sort-tab {
    flex: none; padding: 10px 2px 12px; border-bottom: 4px solid transparent;
    font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--tc-p-text-dim, #6b6b76);
    transition: color .15s ease, border-color .15s ease;
}
.tc-sort-tab:hover { color: var(--tc-p-text, inherit); }
.tc-sort-tab.is-active { color: var(--tc-p-text, inherit); border-bottom-color: #16161c; }
:root[data-theme="light"] .tc-sort-tab:hover, :root[data-theme="light"] .tc-sort-tab.is-active { color: #16161c; }
:root:not([data-theme="light"]) .tc-sort-tab { color: rgba(255, 255, 255, .8); }
:root:not([data-theme="light"]) .tc-sort-tab.is-active { color: #fff; border-bottom-color: #fff; }

.tc-layout-toggle { flex: none; gap: 4px; padding-bottom: 6px; }
.tc-layout-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
    font-size: 18px; color: var(--tc-p-text-dim, #6b6b76); background: transparent; border: none; border-radius: 10px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tc-layout-btn:hover { color: var(--tc-p-text, inherit); background: rgba(128, 128, 128, .12); }
.tc-layout-btn.is-active { color: var(--tc-p-text, inherit); background: rgba(128, 128, 128, .2); }
.tc-layout-btn i { color: inherit; }

/* =====================================================================
   Cards verticales en escritorio (.tc-tire-grid--vertical, ver layout-toggle.js): foto arriba y contenido debajo, como
   en celular, en una cuadrícula de tarjetas angostas, con el stepper y el botón de agregar en una fila abajo. El botón
   "Ver detalles" se omite (el nombre y la foto ya llevan al producto).
   ===================================================================== */
@media (min-width: 992px) {
    .tc-tire-grid.tc-tire-grid--offers2.tc-tire-grid--vertical { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .tc-tire-grid--vertical .tc-tire-card { flex-direction: column; }
    .tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-media {
        flex: none; width: 100%; height: 210px; border-radius: 0; -webkit-mask-image: none; mask-image: none;
    }
    .tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-media img {
        left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 24px); max-width: none;
        object-fit: contain; mix-blend-mode: multiply; transform: none;
    }
    .tc-tire-grid--vertical .tc-tire-card:hover .tc-tire-card-media img { transform: none; }
    .tc-tire-grid--vertical .tc-tire-card-gallery-btn { left: 12px; }
    .tc-tire-grid.tc-tire-grid--offers2.tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-body { padding: 16px; gap: 12px; }
    .tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-details { display: none; }
    .tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-name { font-size: 15px; min-height: 0; }
    .tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-price-main { font-size: 26px; }
    /* Compra abajo, en una fila: stepper a la izquierda y el botón ocupando lo que sobra (sin el total, para que quepa); si
       la card es muy angosta el botón queda solo con el ícono del carrito. */
    :root .tc-tire-grid.tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy .tc-tire-card-cart-btn {
        flex: 1 1 0; min-width: 0; padding: 0 10px; gap: 6px;
    }
    .tc-tire-grid.tc-tire-grid--vertical .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-buy .tc-tire-card-cart-btn strong { display: none; }
    /* La pastilla de entrega puede partir su texto en dos renglones en vez de cortarlo con "…". */
    :root .tc-tire-grid.tc-tire-grid--vertical .tc-tire-card .tc-tire-card-mobile-info .tc-service-badge { white-space: normal; border-radius: 14px; }
}

/* Celular (<576px), listados con filtros (/ofertas, /medida): igual que la card vertical de escritorio — stepper − 4 + y,
   a su lado, el botón de agregar compacto (solo el ícono del carrito, sin total) en una fila abajo; ya no hay círculo
   flotante sobre la foto. */
@media (max-width: 575.98px) {
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-p-qty-stepper { display: inline-flex; flex: none; height: 36px; padding: 3px 4px; gap: 2px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-p-qty-btn { width: 26px; height: 26px; font-size: 12px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-p-qty-value { width: 20px; font-size: 13px; }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn {
        position: static; right: auto; top: auto; flex: 1 1 0; min-width: 0; width: auto; height: 36px; padding: 0;
        border-radius: 999px; background: var(--tc-p-orange); border: none; color: #fff; box-shadow: none;
    }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card .tc-tire-card-buy .tc-tire-card-cart-btn i { font-size: 16px; color: #fff; }
}

/* Cards de /ofertas y /medida (≥576px): "Detalles" es un enlace de texto con ícono de info en la fila de "Instalación disponible", alineado a la derecha. */
@media (min-width: 576px) {
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-details {
        position: static; grid-column: 3; grid-row: 3; justify-self: end; align-self: center;
        font-size: 12.5px; font-weight: 500; color: var(--tc-card-dim, #6b6b76); white-space: nowrap;
        display: inline-flex; align-items: center; gap: 4px;
    }
    .tc-tire-grid--offers2 .tc-tire-card-details i { font-size: 13px; }
    :root .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-details:hover { color: var(--tc-p-orange); border-color: var(--tc-p-orange); }
    .tc-tire-grid.tc-tire-grid--offers2 .tc-tire-card:not(.tc-tire-card--model) .tc-tire-card-mobile-badge { grid-column: 1 / 3; }
}

/* Calificación de clientes (★★★★★ y cantidad) en la esquina superior derecha de la card, a la altura del logo. */
.tc-tire-card-rating { position: relative; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--tc-card-dim, #6b6b76); }
.tc-tire-card-rating-stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; line-height: 1; color: rgba(128, 128, 128, .4); }
.tc-tire-card-rating-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--tc-p-orange, #ff6000); }
:root:not([data-theme="light"]) .tc-tire-card-rating { color: rgba(255, 255, 255, .85); }
.tc-tire-card-rating:hover .tc-tire-card-rating-count { color: var(--tc-p-orange, #ff6000); text-decoration: underline; }

/* Panel lateral de reseñas (reviews-panel.blade.php) */
.tc-reviews-panel, .tc-reviews-section { --rv-bg: #17171d; --rv-text: #f2f2f5; --rv-dim: rgba(255, 255, 255, .6); --rv-line: rgba(255, 255, 255, .14); --rv-field: rgba(255, 255, 255, .07);
}
.tc-reviews-panel { width: min(440px, 100vw); background: var(--rv-bg); color: var(--rv-text); }
:root[data-theme="light"] .tc-reviews-panel, :root[data-theme="light"] .tc-reviews-section { --rv-bg: #fff; --rv-text: #16161c; --rv-dim: #6b7280; --rv-line: #e6e6ec; --rv-field: #f4f4f7; }
.tc-reviews-panel { border-radius: 20px 0 0 20px; overflow: hidden; }
.tc-reviews-panel .offcanvas-header { justify-content: flex-end; padding-bottom: 4px; }
.tc-reviews-panel .btn-close { filter: none; }
:root:not([data-theme="light"]) .tc-reviews-panel .btn-close { filter: invert(1); }
.tc-rv-top { padding: 0 var(--bs-offcanvas-padding-x, 1rem) 18px; border-bottom: 1px solid var(--rv-line); }
.tc-rv-product { display: flex; align-items: center; gap: 14px; }
.tc-rv-product-img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.tc-rv-product-brand { display: block; height: 20px; width: auto; max-width: 110px; object-fit: contain; margin-bottom: 4px; }
.tc-rv-product-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.tc-rv-summary { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.tc-rv-average { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.tc-rv-stars { position: relative; display: inline-block; font-size: 34px; line-height: 1; white-space: nowrap; }
.tc-rv-stars i { font-style: normal; color: inherit; display: inline-block; margin-right: 3px; }
.tc-rv-stars-base { color: rgba(128, 128, 128, .35); }
.tc-rv-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--tc-p-orange, #ff6000);
    transition: width 1.1s cubic-bezier(.22, 1, .36, 1) .25s; }
.tc-reviews-panel.show .tc-rv-stars i { animation: tc-rv-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.tc-reviews-panel.show .tc-rv-stars i:nth-child(2) { animation-delay: .08s; }
.tc-reviews-panel.show .tc-rv-stars i:nth-child(3) { animation-delay: .16s; }
.tc-reviews-panel.show .tc-rv-stars i:nth-child(4) { animation-delay: .24s; }
.tc-reviews-panel.show .tc-rv-stars i:nth-child(5) { animation-delay: .32s; }
@keyframes tc-rv-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .tc-reviews-panel .tc-rv-stars i { animation: none !important; }
    .tc-rv-stars-fill { transition: none; }
}
.tc-rv-count { margin-top: 6px; font-size: 13px; color: var(--rv-dim); }
.tc-rv-body { display: block; padding-top: 18px; overscroll-behavior: contain; }
.tc-rv-notice, .tc-rv-form { margin-bottom: 20px; padding: 16px; border-radius: 14px; background: var(--rv-field); font-size: 14px; }
.tc-rv-notice p { margin: 0 0 12px; }
.tc-rv-form-title { font-weight: 800; margin-bottom: 8px; }
.tc-rv-picker { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; }
.tc-rv-picker-star { padding: 0 2px; border: 0; background: none; font-size: 30px; line-height: 1; color: rgba(128, 128, 128, .4); cursor: pointer; transition: transform .15s ease, color .15s ease; }
.tc-rv-picker-star:hover { transform: scale(1.2); }
.tc-rv-picker-star.is-on { color: var(--tc-p-orange, #ff6000); }
.tc-rv-picker-word { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--rv-dim); }
.tc-rv-field { display: block; width: 100%; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--rv-line); border-radius: 10px; background: var(--rv-bg); color: inherit; font-size: 14px; resize: vertical; }
.tc-rv-field:focus { outline: 2px solid var(--tc-p-orange, #ff6000); outline-offset: 0; }
.tc-rv-form-error { min-height: 0; margin-bottom: 8px; font-size: 13px; color: #dc2626; }
.tc-rv-submit { height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--tc-p-orange, #ff6000); color: #fff; font-size: 14px; font-weight: 800; }
.tc-rv-submit:disabled { opacity: .6; }
.tc-rv-item { padding: 16px 0; border-bottom: 1px solid var(--rv-line); }
.tc-rv-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-rv-item-stars { color: var(--tc-p-orange, #ff6000); letter-spacing: 1px; }
.tc-rv-item-date { margin-top: 2px; font-size: 12px; color: var(--rv-dim); }
.tc-rv-item-title { margin-top: 8px; font-weight: 700; }
.tc-rv-item-comment { margin: 6px 0 0; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.tc-rv-item-photos { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.tc-rv-item-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }
.tc-rv-empty { padding: 24px 0; text-align: center; color: var(--rv-dim); }
.tc-rv-more { display: block; margin: 16px auto 4px; padding: 10px 22px; border: 1px solid var(--rv-line); border-radius: 999px; background: none; color: inherit; font-weight: 700; }

/* Calificación: el promedio compacto (★ 4.8) solo se ve en celular, donde las 5 estrellas no caben junto al logo en la card angosta. */
.tc-tire-card-rating-avg { display: none; }
@media (max-width: 575.98px) {
    .tc-tire-grid--offers2 .tc-tire-card-rating-stars { display: none; }
    .tc-tire-grid--offers2 .tc-tire-card-rating-avg { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
    .tc-tire-grid--offers2 .tc-tire-card-rating-avg i { font-size: 12px; color: var(--tc-p-orange, #ff6000); }
    .tc-tire-grid--offers2 .tc-tire-card-rating-avg.is-empty i { color: rgba(128, 128, 128, .5); }
}

/* Sección de comentarios del detalle de llanta (reviews-section.blade.php) y estrellas bajo el título. */
.tc-reviews-section { color: var(--rv-text); }
.tc-rv-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tc-reviews-section .tc-rv-summary { margin: 0 0 8px; }
/* Lista con scroll propio: la sección no se alarga con la cantidad de comentarios. */
.tc-rv-section-list { max-height: 560px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--tc-p-orange, #ff6000) transparent; }
.tc-rv-section-list::-webkit-scrollbar { width: 6px; }
.tc-rv-section-list::-webkit-scrollbar-track { background: transparent; }
.tc-rv-section-list::-webkit-scrollbar-thumb { background: var(--tc-p-orange, #ff6000); border-radius: 999px; }
.tc-pd-rating { font-size: 14px; }
.tc-pd-rating .tc-tire-card-rating-stars { font-size: 18px; }
@media (max-width: 575.98px) {
    .tc-pd-rating .tc-tire-card-rating-stars { display: inline-block; }
    .tc-pd-rating .tc-tire-card-rating-avg { display: none; }
}