/* ==========================================================================
   Tarjetas de producto y modelo "bestseller" (.tc-p-bestseller-*): usadas en
   el home (Ofertas y Modelos más vendidos, redesign/index.blade.php) y en
   listados reales como brandInformation.blade.php, productInformation.blade.php
   y modelInformation.blade.php ("Otros productos/modelos similares").
   Movido desde navbar-footer.css (donde vivía históricamente junto a los
   estilos de navbar/footer, sin relación real con ellos) para que el
   componente de tarjetas de producto/modelo tenga su propio archivo.
   ========================================================================== */

/* ---- Tarjeta de modelo "Pulse" (bestseller en /v1-clean, listados reales
   como brandInformation.blade.php) — siempre blanca, no cambia con el tema,
   así resalta igual sobre fondo oscuro o claro de la página. ---- */
.tc-p-bestseller-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1199.98px) { .tc-p-bestseller-grid { grid-template-columns: repeat(2, 1fr); } }

.tc-p-bestseller-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 230px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #16161c;
    box-shadow: 0 10px 20px rgba(0,0,0,.22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tc-p-bestseller-card:hover { transform: translateY(-5px); box-shadow: 0 16px 28px rgba(0,0,0,.3); color: #16161c; }
.tc-p-bestseller-card:hover .tc-p-bestseller-img-bg img { transform: translateY(-50%) rotate(-14deg) scale(1.05); }

/* La llanta, grande y detrás del contenido, asomándose por la izquierda */
.tc-p-bestseller-img-bg { position: absolute; left: -34%; top: 50%; width: 78%; z-index: 0; pointer-events: none; }
.tc-p-bestseller-img-bg img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    transform: translateY(-50%) rotate(-18deg);
    transition: transform .3s ease;
}
.tc-p-bestseller-rank {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--tc-p-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 4px 9px;
    border-radius: 999px;
    z-index: 2;
}

.tc-p-bestseller-body { position: relative; z-index: 1; width: 64%; margin-left: auto; padding: 16px 16px 18px 16px; }
.tc-p-bestseller-brand { height: 22px; object-fit: contain; margin-bottom: 8px; }
/* Siempre 2 renglones (con "…" si no cabe) y la fila de categorías con
   altura reservada aunque el producto tenga 0/1/2 — antes las tarjetas
   quedaban a distinta altura entre sí según cuánto texto/categorías traía
   cada modelo. */
.tc-p-bestseller-body h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4em;
    font-size: 14px; font-weight: 600; color: #16161c; line-height: 1.2; margin: 0 0 8px;
}
/* nowrap + overflow-x:auto en vez de wrap — si hay varias badges largas
   (Compacto/Sedán/All Terrain...) se recorren con scroll horizontal en vez
   de saltar a una segunda línea, para no romper la altura uniforme de la
   tarjeta. Scrollbar oculta (funciona igual, solo no se ve la barra). */
.tc-p-bestseller-cats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    margin-bottom: 12px;
    min-height: 22px;
    scrollbar-width: none;
}
.tc-p-bestseller-cats::-webkit-scrollbar { display: none; }
/* /marca/{slug}: tarjeta de 2 por fila (mucho más ancha que la del carrusel
   del home), sobra espacio de sobra para mostrar todas las categorías sin
   recortar con scroll horizontal. */
.tc-p-bestseller-cats--wrap { flex-wrap: wrap; overflow-x: visible; }

/* Tarjeta de ancho completo (grid de 2 columnas de /marca/{slug}, en vez del
   carrusel angosto del home) — la imagen "flotando" a la izquierda
   (posicionada en % pensados para una tarjeta angosta) se ve desproporcionada
   en un contenedor mucho más ancho; aquí es una imagen normal arriba. */
.tc-p-bestseller-card--full { flex-direction: column; align-items: stretch; min-height: 0; }
/* .tc-p-bestseller-grid--themed .tc-p-bestseller-img-bg (más abajo en este
   archivo) also matches at 0,2,0 specificity y va después en la cascada,
   así que le ganaba a estas reglas y dejaba el thumbnail encogido a
   calc(36% - 8px) en vez de la imagen completa arriba de la tarjeta — se
   agrega el ancestro --themed aquí también para subir a 0,3,0 y ganar
   siempre, sin importar el orden. */
.tc-p-bestseller-grid--themed .tc-p-bestseller-card--full .tc-p-bestseller-img-bg {
    position: relative; left: 0; top: 0; width: 100%; aspect-ratio: 16/10;
    background: var(--tc-card-plate, #f3f3f6);
}
.tc-p-bestseller-grid--themed .tc-p-bestseller-card--full .tc-p-bestseller-img-bg img {
    position: absolute; left: 50%; top: 50%; width: 60%; max-width: none;
    transform: translate(-50%, -50%) rotate(-18deg);
}
.tc-p-bestseller-grid--themed .tc-p-bestseller-card--full:hover .tc-p-bestseller-img-bg img { transform: translate(-50%, -50%) rotate(-14deg) scale(1.05); }
.tc-p-bestseller-card--full .tc-p-bestseller-body { width: 100%; margin-left: 0; }
.tc-p-bestseller-cats span {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 10px;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e6e6ec;
    border-radius: 999px;
    padding: 2px 8px;
}
.tc-p-bestseller-price { font-size: 15px; font-weight: 700; color: var(--tc-p-orange); margin-bottom: 8px; }
.tc-p-bestseller-price small { font-size: 10px; font-weight: 500; color: #6b7280; }
.tc-p-bestseller-price-unit { font-size: 10.5px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: .2px; }
/* Precio regular tachado en las tarjetas de Ofertas (mismo tc-p-bestseller-*
   que "Modelos más vendidos", que no tiene precio anterior que tachar). */
.tc-p-bestseller-price-old { margin-left: 4px; text-decoration: line-through; }
.tc-p-bestseller-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: #16161c; }
/* En la tarjeta de "Ofertas" este link vive suelto (no toda la tarjeta es
   un <a>, ver nota más abajo), así que sí necesita su propio hover. */
.tc-p-bestseller-offer-details { text-decoration: none; transition: gap .2s ease, color .2s ease; }
.tc-p-bestseller-offer-details:hover { color: var(--tc-p-orange); gap: 8px; }

/* ---- Variante "Ofertas" de la tarjeta de más vendidos: mismo look de foto
   grande + logo, pero con precio más grande y sus propios botones
   Agregar/Detalles en vez de un solo CTA de texto (aquí sí importa poder
   comprar sin salir de la tarjeta). La tarjeta deja de ser un <a> completo
   (no se puede anidar un <button> dentro de un enlace), así que la foto y el
   nombre llevan su propio link. ---- */
.tc-p-bestseller-card--offer .tc-p-bestseller-img-bg { pointer-events: auto; }
/* Siempre 2 renglones (con "…" si no cabe) para que las tarjetas de la
   grilla queden a la misma altura sin importar qué tan largo sea el nombre.
   El nombre completo se ve al pasar el mouse vía el atributo title nativo
   (sin CSS/JS extra, así no se toca el resto de la tarjeta). */
.tc-p-bestseller-offer-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #16161c;
    text-decoration: none;
    cursor: default;
    margin: 0 0 8px;
    outline: none;
}
.tc-p-bestseller-offer-name:hover,
.tc-p-bestseller-offer-name:focus-visible { color: var(--tc-p-orange); }
.tc-p-bestseller-card--offer .tc-p-bestseller-price { font-size: 19px; margin-bottom: 0; }
.tc-p-bestseller-card--offer .tc-p-bestseller-price-old { font-size: 12.5px; margin-left: 6px; }
/* El % de descuento ya no es la misma pastilla naranja que el "Top N" de
   más vendidos — es lo primero que debe llamar la atención en una tarjeta
   de oferta, así que va como listón rojo en diagonal sobre la esquina
   (la tarjeta ya tiene overflow:hidden, así que recorta limpio). */
.tc-p-bestseller-card--offer .tc-p-bestseller-rank {
    top: 16px;
    right: -34px;
    width: 130px;
    padding: 5px 0;
    text-align: center;
    background: linear-gradient(135deg, #ff4d3d, #d70015);
    box-shadow: 0 3px 8px rgba(215, 0, 21, .4);
    transform: rotate(45deg);
    font-size: 11.5px;
}
/* Antes el botón quedaba pegado abajo (margin-top:auto) de una tarjeta más
   alta que su contenido — dejaba un hueco vacío grande entre el precio y los
   botones. Pegado al precio con un gap fijo en vez de forzar una altura
   mínima mayor a la que el contenido realmente necesita. */
.tc-p-bestseller-offer-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* Fila de acciones: stepper compacto (ancho de su contenido, no se estira)
   + botón de carrito que se lleva el resto del espacio — antes el stepper
   también era flex:1 y dejaba un hueco vacío enorme entre los botones +/-
   y el borde de su propia píldora. */
.tc-p-bestseller-offer-row { display: flex; align-items: center; gap: 8px; }

/* Stepper +/- en píldora compacta: solo elige cuántas piezas quiere agregar
   (arranca en 4), ya no dispara una llamada de red por clic — ver
   deal-qty-stepper.js. Botones circulares "flotando" dentro de la píldora. */
.tc-p-qty-stepper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f3f3f6;
    border: 1px solid #e6e6ec;
    border-radius: 999px;
    padding: 3px;
}
.tc-p-qty-btn {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #fff;
    font-size: 10.5px;
    color: #16161c;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.tc-p-qty-btn:hover:not(:disabled) { background: var(--tc-p-orange); color: #fff; }
.tc-p-qty-btn:active:not(:disabled) { transform: scale(.88); }
.tc-p-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
/* El ícono (bi-dash-lg/bi-plus-lg) siempre hereda el color del botón, en
   cualquier estado — sin esto, si algo más específico le fija su propio
   color al ícono, se puede quedar naranja-sobre-naranja al pasar el botón
   a fondo naranja en :hover. */
.tc-p-qty-btn i { color: inherit !important; pointer-events: none; }
.tc-p-qty-value { width: 22px; text-align: center; font-size: 12.5px; font-weight: 800; color: #16161c; }

/* Botón de carrito: degradado + texto, se lleva el resto del ancho de la
   fila — reemplaza el texto "Detalles" de antes, que ahora es el link de
   abajo (tc-p-bestseller-offer-details). */
.tc-p-bestseller-cart-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: var(--tc-p-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 92, 0, .3);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tc-p-bestseller-cart-btn i { font-size: 13px; color: inherit !important; }
.tc-p-bestseller-cart-btn:hover { background: #e65500; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(255, 92, 0, .4); }
.tc-p-bestseller-cart-btn:active { transform: translateY(0) scale(.97); }
.tc-p-bestseller-cart-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* En móvil, carrusel horizontal con scroll-snap en vez de una grilla de 2
   columnas. Cada tarjeta recupera el ancho completo del layout de
   escritorio (llanta grande sangrada + texto), que le sobra espacio de
   sobra dentro del ~80% del viewport que ocupa. */
@media (max-width: 767.98px) {
    /* Cada tarjeta ocupa el 100% del ancho (antes 80%, dejaba asomar la
       siguiente) — pedido explícito para Ofertas y Modelos más vendidos,
       las dos secciones del home que usan esta grilla en carrusel. */
    .tc-p-bestseller-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 16px; padding: 6px 0 16px; -webkit-overflow-scrolling: touch; }
    .tc-p-bestseller-card { flex: 0 0 100%; scroll-snap-align: center; min-height: 290px; box-shadow: none; }
    .tc-p-bestseller-card:hover { box-shadow: none; }
}
.tc-p-bestseller-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--tc-p-orange) transparent;
}

/* Variante "mostrar todas" (catálogo /ofertas, sugeridos en detalle de
   producto): mismo diseño de tarjeta que el home, pero sin el carrusel de
   una sola tarjeta por pantalla — en móvil vuelve a ser una grilla normal
   de 1 columna con todas las tarjetas visibles. */
.tc-p-bestseller-grid.tc-p-bestseller-grid--all { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199.98px) { .tc-p-bestseller-grid.tc-p-bestseller-grid--all { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) {
    .tc-p-bestseller-grid.tc-p-bestseller-grid--all {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
    .tc-p-bestseller-grid.tc-p-bestseller-grid--all .tc-p-bestseller-card { flex: none; min-height: 290px; }
}
/* "Otros productos/modelos similares" siempre trae exactamente 3 tarjetas
   (PageController::take(3)) — a 2 columnas (tablet, 768–1199px) la 3ª queda
   sola en su fila, pegada a la izquierda; centrada se ve más intencional. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .tc-p-bestseller-grid.tc-p-bestseller-grid--all > :nth-child(3):last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 9px);
        justify-self: center;
    }
}
.tc-p-bestseller-grid::-webkit-scrollbar { height: 5px; }
.tc-p-bestseller-grid::-webkit-scrollbar-track { background: transparent; margin: 0 20px; }
.tc-p-bestseller-grid::-webkit-scrollbar-thumb { background: var(--tc-p-orange); border-radius: 4px; }

/* ---- Variante del home (Ofertas y Modelos más vendidos): mismo estilo que
   las tarjetas de /ofertas (tc-tire-card, showBySize.css) — oscura con el
   tema oscuro del sitio y blanca con [data-theme="light"]. Las fotos son JPG
   con fondo blanco, así que la llanta va sobre una "placa" clara redondeada
   a la izquierda (multiply funde el blanco con la placa) en vez de
   sangrar sobre toda la tarjeta. Solo aplica con --themed: marca, modelo y
   detalle de producto siguen con la tarjeta blanca de siempre. ---- */
/* Una por fila siempre en tablet/escritorio (antes: 3 desde 1200px, 2 entre
   768 y 1199) — pedido explícito de dejar más aire al contenido informativo
   de Ofertas y Modelos más vendidos del home; en móvil sigue el carrusel de
   una por pantalla. */
.tc-p-bestseller-grid.tc-p-bestseller-grid--themed { grid-template-columns: 1fr; }
@media (min-width: 1200px) {
    .tc-p-bestseller-grid.tc-p-bestseller-grid--themed { gap: 20px; }
}

/* /marca/{slug}: 2 por fila siempre en escritorio (junto al sidebar de
   filtros hay menos ancho libre que un catálogo a todo el container), 1 en
   móvil — después en la cascada que la regla de 3 columnas de arriba para
   ganarle en ≥1200px (misma especificidad, entonces gana quien va después). */
.tc-p-bestseller-grid.tc-p-bestseller-grid--2col { grid-template-columns: repeat(2, 1fr) !important; overflow: visible; margin: 0; padding: 0; }
@media (max-width: 767.98px) {
    .tc-p-bestseller-grid.tc-p-bestseller-grid--2col { grid-template-columns: 1fr !important; }
}

.tc-p-bestseller-grid--themed .tc-p-bestseller-card {
    --tc-card-bg: var(--tc-p-surface, #101018);
    --tc-card-line: var(--tc-p-border, #1f1f2b);
    --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;
    align-items: stretch;
    background: var(--tc-card-bg);
    border: 1px solid var(--tc-card-line);
    color: var(--tc-card-text);
    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-p-bestseller-grid--themed .tc-p-bestseller-card {
    --tc-card-text: #16161c;
    --tc-card-soft: #f7f7f8;
    --tc-card-plate: #fff;
    --tc-card-brand-bg: transparent;
    --tc-card-btn: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.tc-p-bestseller-grid--themed .tc-p-bestseller-card:hover {
    color: var(--tc-card-text);
    border-color: rgba(255,92,0,.45);
    box-shadow: 0 14px 26px rgba(0,0,0,.3);
}

.tc-p-bestseller-grid--themed .tc-p-bestseller-img-bg {
    left: 0; top: 0; bottom: 0; /* pegada al borde de la tarjeta */
    width: 36%;
    /* Redondeada del lado de la info solo en oscuro (en claro no se nota). */
    border-radius: 0 14px 14px 0;
    overflow: hidden;
    background: var(--tc-card-plate);
}
:root[data-theme="light"] .tc-p-bestseller-grid--themed .tc-p-bestseller-img-bg { border-radius: 0; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-img-bg img {
    position: absolute;
    left: -70%; top: 50%;
    width: 170%;
    max-width: none;
}

.tc-p-bestseller-grid--themed .tc-p-bestseller-body { display: flex; flex-direction: column; padding: 22px 14px 14px 12px; }
/* Solo la variante --full (tarjetas anchas de /marca/{slug}) es
   flex-direction:column A CUALQUIER ancho (ver .tc-p-bestseller-card--full
   más abajo) — ahí sí hace falta flex:1 en el body para que "Ver modelo"
   (margin-top:auto) llegue hasta abajo cuando el grid estira la tarjeta a
   la altura de una vecina con más contenido. En la variante base (fila en
   escritorio) el body ya llena el alto solo, vía align-items:stretch del
   propio contenedor — ponerle flex:1 aquí también rompe esa variante,
   estirando el body más allá de su contenido y encimando "Ver detalles"
   con el botón de carrito (visto en "Otros productos similares"). */
.tc-p-bestseller-grid--themed .tc-p-bestseller-card--full .tc-p-bestseller-body { flex: 1 1 auto; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-brand {
    height: 18px; max-width: 110px; padding: 3px 6px; box-sizing: content-box;
    border-radius: 6px; background: var(--tc-card-brand-bg); margin-bottom: 8px; align-self: flex-start;
}

.tc-p-bestseller-grid--themed .tc-p-bestseller-body h3,
.tc-p-bestseller-grid--themed .tc-p-bestseller-offer-name { color: var(--tc-card-text); }
/* Que el nombre no quede debajo del listón de descuento. */
.tc-p-bestseller-grid--themed .tc-p-bestseller-card--offer .tc-p-bestseller-offer-name { padding-right: 30px; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-cats span {
    color: var(--tc-card-dim); background: var(--tc-card-soft); border-color: var(--tc-card-line);
}
.tc-p-bestseller-grid--themed .tc-p-bestseller-price small,
.tc-p-bestseller-grid--themed .tc-p-bestseller-price-unit { color: var(--tc-card-dim); }
.tc-p-bestseller-grid--themed .tc-p-bestseller-cta { color: var(--tc-card-dim); margin-top: auto; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-card:hover .tc-p-bestseller-cta { color: var(--tc-p-orange); }

/* Precio protagonista (como un marketplace): ahora que la tarjeta es una
   por fila sobra ancho de sobra para que el precio sea lo primero que se
   lea, igual que se hizo en tire-card.css. */
@media (min-width: 768px) {
    .tc-p-bestseller-grid--themed .tc-p-bestseller-price { font-size: 22px; }
    .tc-p-bestseller-grid--themed .tc-p-bestseller-card--offer .tc-p-bestseller-price { font-size: 26px; }
    .tc-p-bestseller-grid--themed .tc-p-bestseller-price-old { font-size: 14px; }
}

/* Oferta: UTQG (pills de css/redesign/tire-card.css, que toman los mismos
   tokens --tc-card-* de esta tarjeta), "Ver detalles" y compra al fondo. */
.tc-p-bestseller-grid--themed .tc-p-bestseller-utqg { justify-content: flex-start; margin-top: 4px; }
/* Modelos: precio va justo después de las pills de medidas/rin (a diferencia
   de Ofertas, donde el precio va antes) — separado con su propio margen en
   vez de quedar pegado directo abajo de las pills. */
.tc-p-bestseller-utqg + .tc-p-bestseller-price { margin-top: 12px; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-offer-details { font-size: 11.5px; white-space: nowrap; margin: 10px 0 0; align-self: flex-start; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-offer-actions { margin-top: auto; }
/* La línea divisora vive entre "Ver detalles" (arriba) y el stepper/botón
   de compra (abajo) — antes estaba pegada arriba de todo el bloque de
   acciones, dejando "Ver detalles" debajo de los botones en vez de arriba
   de la línea. */
.tc-p-bestseller-grid--themed .tc-p-bestseller-offer-row {
    padding-top: 8px; border-top: 1px solid var(--tc-card-line);
}
/* Mismo gap de 8px que .tc-p-bestseller-offer-actions usa entre sus
   elementos en el resto de variantes (y que tire-card.css usa en
   .tc-tire-card-buy) — antes sumaba 10px de margin-bottom aquí + 10px de
   padding-top en la fila de abajo, 20px de aire sobre la línea divisora. */
.tc-p-bestseller-grid--themed .tc-p-bestseller-card--offer .tc-p-bestseller-offer-details { margin-bottom: 0; }
.tc-p-bestseller-grid--themed .tc-p-qty-stepper { background: var(--tc-card-soft); border-color: var(--tc-card-line); }
.tc-p-bestseller-grid--themed .tc-p-qty-btn { width: 28px; height: 28px; background: var(--tc-card-btn); color: var(--tc-card-text); }
.tc-p-bestseller-grid--themed .tc-p-qty-value { color: var(--tc-card-text); }
.tc-p-bestseller-grid--themed .tc-p-bestseller-cart-btn { height: 36px; font-weight: 700; padding: 0 10px; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-cart-btn strong { font-weight: 800; white-space: nowrap; }
.tc-p-bestseller-grid--themed .tc-p-bestseller-cart-btn strong::before { content: "·"; margin-right: 5px; opacity: .7; font-weight: 600; }

/* Móvil (carrusel de una por pantalla): tarjeta vertical como la de /ofertas
   en móvil — foto recta arriba sobre su placa, info y compra abajo. */
@media (max-width: 767.98px) {
    .tc-p-bestseller-grid--themed .tc-p-bestseller-card { flex-direction: column; min-height: 0; }
    .tc-p-bestseller-grid--themed .tc-p-bestseller-img-bg {
        position: relative; left: auto; top: auto; bottom: auto;
        width: auto; height: 200px; flex: none;
        margin: 0;
        border-radius: 0 0 14px 14px;
    }
    .tc-p-bestseller-grid--themed .tc-p-bestseller-img-bg img {
        left: 50%; top: 16px;
        width: auto; height: 150%;
        transform: translateX(-50%);
    }
    .tc-p-bestseller-grid--themed .tc-p-bestseller-card:hover .tc-p-bestseller-img-bg img { transform: translateX(-50%) scale(1.03); }
    .tc-p-bestseller-grid--themed .tc-p-bestseller-body { width: 100%; margin-left: 0; padding: 14px; flex: 1; }
}

/* ---- Home: Ofertas y Modelos más vendidos en celular — una tarjeta por
   fila (antes: 2x2) mostrando las 6, pedido explícito de no dejar nunca 2
   tarjetas en la misma fila en ningún ancho. La tarjeta se compacta como la
   de /medida (tire-card.css): foto más chica, marca, nombre en 2 renglones,
   precio y compra; se ocultan categorías, UTQG/medidas y "Ver detalles" (la
   foto y el nombre ya llevan al detalle). ---- */
@media (max-width: 767.98px) {
    .tc-p-bestseller-grid.tc-p-bestseller-grid--home {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        gap: 10px; margin: 0; padding: 0;
    }
    .tc-p-bestseller-grid--home .tc-p-bestseller-card { flex: none; min-height: 0; border-radius: 14px; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-img-bg { height: 132px; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-img-bg img { top: 10px; height: 145%; }
    .tc-p-bestseller-grid--home .tc-p-bestseller-rank { font-size: 10px; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-body { padding: 10px; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-brand { height: 13px; max-width: 90px; padding: 2px 4px; margin-bottom: 6px; }
    .tc-p-bestseller-grid--home .tc-p-bestseller-body h3,
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-card--offer .tc-p-bestseller-offer-name {
        font-size: 12.5px; line-height: 1.3; padding-right: 0; margin: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .tc-p-bestseller-grid--home .tc-p-bestseller-cats,
    .tc-p-bestseller-grid--home .tc-p-bestseller-utqg,
    .tc-p-bestseller-grid--home .tc-p-bestseller-offer-details { display: none !important; }
    .tc-p-bestseller-grid--home .tc-p-bestseller-price { font-size: 15px; margin-top: 8px; }
    .tc-p-bestseller-grid--home .tc-p-bestseller-price small,
    .tc-p-bestseller-grid--home .tc-p-bestseller-price-unit { font-size: 10.5px; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-cta { font-size: 12px; margin-top: 8px; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-offer-actions { margin-top: 8px; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-offer-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .tc-p-bestseller-grid--home .tc-p-qty-stepper { width: 100%; height: 38px; justify-content: space-between; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-qty-btn { width: 26px; height: 26px; }
    /* flex:none: con el flex:1 de escritorio, en columna el botón se
       aplastaba a ~20px de alto. Mismo ancho y alto que el stepper. */
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-cart-btn { flex: none; width: 100%; height: 38px; min-height: 38px; justify-content: center; font-size: 13px; }
    .tc-p-bestseller-grid--home .tc-p-bestseller-cart-btn span { display: none; }
    .tc-p-bestseller-grid--themed.tc-p-bestseller-grid--home .tc-p-bestseller-cart-btn strong::before { content: none; }
}