/* Pedido explícito: nada de texto gris (--tc-p-text-dim, #9a9aab) en modo
   oscuro en esta página — se leía difícil contra el fondo oscuro. Se
   sobreescribe la variable SOLO dentro de .tc-p-page (no es un cambio
   sitio-completo, el resto de páginas/tarjetas siguen con su gris normal)
   y solo en oscuro (el claro ya usa un gris más oscuro/legible, #6c6c78,
   no se tocó). Todo lo que ya usaba var(--tc-p-text-dim) en esta página
   (labels de ancho/rin, unidades, UTQG, tabs, etc.) pasa a blanco solo con
   este cambio, sin tocar cada regla una por una. */
:root:not([data-theme="light"]) .tc-p-page {
    --tc-p-text-dim: #f2f2f6;
}

/* Franja de regreso + breadcrumb (mismo patrón .tc-p-hero-band que
   tc-size-hero/tc-cart-hero: fondo negro, línea naranja abajo, padding-top
   para no quedar tapada por el navbar flotante). Mucho más baja que esas
   porque aquí no hay título, solo el enlace de volver y las migas de pan. */
.tc-detail-hero {
    background: #101018;
    padding: 112px 0 16px;
    border-bottom: 3px solid #ff5c00;
}
@media (max-width: 991.98px) { .tc-detail-hero { padding-top: 92px; } }
.tc-detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #fff;
    text-decoration: none; white-space: nowrap;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.08);
    transition: background .15s ease;
}
.tc-detail-back:hover { background: rgba(255,255,255,.16); color: #fff; }
.tc-detail-back i { color: #ff5c00; font-size: 13px; }
.tc-detail-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12.5px; color: rgba(255,255,255,.45); min-width: 0;
}
.tc-detail-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.tc-detail-breadcrumb a:hover { color: #ff5c00; }
.tc-detail-breadcrumb-current {
    color: #fff; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
@media (max-width: 575.98px) { .tc-detail-breadcrumb-current { max-width: 160px; } }

.big-image {
    max-height: 500px;
}

.gray-bg {
    background-color: #e9e9e9;
}

.category-badge {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    background-color: #ff5c00 !important;
    color: white;
    font-size: 14px;
}

.big-image {
    max-height: 50vh;
    width: auto;
    object-fit: contain;
}


.thumbnail-img {
    max-width: 70px;
    max-height: 70px;
    object-fit: cover;
}

/* Stepper de cantidad a escala del detalle de producto (mismo lenguaje que
   .tc-p-qty-stepper de las tarjetas/carrito — círculo blanco sobre píldora
   gris — pero más grande, ya que aquí es el control principal, no algo
   dentro de una tarjeta chica). */
/* Mismos colores exactos que usa el stepper dentro de las tarjetas de
   producto (.tc-p-bestseller-grid--themed .tc-p-qty-stepper/-btn, ver
   navbar-footer.css) — esos usan tokens --tc-card-soft/--tc-card-btn que
   solo existen dentro de esa clase, así que aquí se repiten los mismos
   valores literales en vez de reusar el token (fuera de alcance). */
.tc-pd-qty-stepper {
    padding: 4px;
    background: #181822;
    border-color: var(--tc-p-border);
}
.tc-pd-qty-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: #262632;
    color: #f2f2f6;
    box-shadow: none;
}
:root[data-theme="light"] .tc-pd-qty-stepper { background: #f7f7f8; }
:root[data-theme="light"] .tc-pd-qty-btn { background: #fff; color: #16161c; }
.tc-pd-qty-value {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: transparent;
    border: none;
    color: inherit;
}

.logo-size {
    width: 150px;
    height: auto;
    /* Antes solo mix-blend-mode:multiply, que asume que ya hay un fondo
       blanco detrás — en modo oscuro el logo (casi siempre PNG con fondo
       transparente) se fundía casi a negro. Misma "placa" blanca que ya
       usan los demás logos de marca del sitio (tc-p-bestseller-brand,
       tc-cart-pop-brand). */
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    box-sizing: border-box;
    /* app.css's base .logo-size sets mix-blend-mode:multiply — left as-is it
       blends this element's own white background against whatever sits
       behind it (dark page bg in dark mode), making the white plate vanish
       instead of showing solid white. */
    mix-blend-mode: normal;
}

.cute-badge {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    font-size: 14px;
    color: white;
}

.carousel-img {
    width: 70px;
    cursor: pointer;
}

.h-30 {
    height: 30px;
}

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

/* Logo de la marca a la izquierda y calificación de clientes a la derecha, en el mismo renglón sobre el título. */
.tc-detail-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Bootstrap pone estas utilidades con !important y colores fijos claros —
   se sobreescriben solo dentro de esta página (adaptado al tema). La
   galería de fotos NO se toca (necesita quedarse siempre clara para el
   mix-blend-mode:multiply de las imágenes de producto). */
.tc-p-page .text-muted { color: var(--tc-p-text-dim) !important; }
.tc-p-page .border-bottom { border-bottom-color: var(--tc-p-border) !important; }
.tc-p-page .border-top { border-top-color: var(--tc-p-border) !important; }
.tc-p-page .border-start { border-left-color: var(--tc-p-border) !important; }
.tc-p-page .bg-light { background-color: var(--tc-p-surface) !important; }
.tc-p-page .border { border-color: var(--tc-p-border) !important; }
.tc-p-page .btn-light {
    background-color: rgba(255,255,255,.06) !important;
    color: inherit !important;
}
.tc-p-page .btn-light:hover { background-color: rgba(255,92,0,.12) !important; color: var(--tc-p-orange) !important; }
.tc-p-page .quantity-input.form-control {
    background: transparent !important;
    color: inherit !important;
    border-color: var(--tc-p-border) !important;
}
:root[data-theme="light"] .tc-p-page .btn-light { background-color: rgba(0,0,0,.04) !important; }

.tc-p-page .nav-link {
    color: var(--tc-p-text-dim);
}

.tc-p-page .nav-link:hover {
    color: var(--tc-p-text-dim);
}

.tc-p-page .nav-tabs .nav-link.active {
    color: inherit;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid var(--tc-p-orange);
}
.tc-p-page .nav-tabs { border-bottom-color: var(--tc-p-border); }

.content-container {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.collapsed-content {
    max-height: 150px;
}

.content-container.expanded-content {
    max-height: 1000px;
}

.read-more-btn {
    cursor: pointer;
    user-select: none;
    color: #ff5c00;
}

.text-success{
    color: #40840c!important;
}

.car-btn{
    border: 1px solid #ff5c00!important;
    color: #ff5c00;
}

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

/* Tire dimension chips — adaptado a modo oscuro/claro con las variables
   compartidas de navbar-footer.css. */
.tc-dims-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tc-dim-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1.5px solid var(--tc-p-border);
    border-radius: 12px;
    padding: 8px 16px;
    min-width: 74px;
    transition: border-color .15s;
}
.tc-dim-chip:hover { border-color: var(--tc-p-orange); }
.tc-dim-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--tc-p-text-dim);
    line-height: 1;
    margin-bottom: 2px;
}
.tc-dim-value {
    font-size: 24px;
    font-weight: 800;
    color: inherit;
    line-height: 1.1;
}
.tc-dim-unit {
    font-size: 9px;
    color: var(--tc-p-text-dim);
    font-weight: 600;
    line-height: 1;
    margin-top: 1px;
}
.tc-dim-slash {
    font-size: 24px;
    font-weight: 700;
    color: var(--tc-p-border);
    margin-top: 10px;
    flex-shrink: 0;
}
:root[data-theme="light"] .tc-dim-chip { background: rgba(0,0,0,.03); }

/* Feature attribute chips */
/* Gris neutro (mismo tono que .tc-tire-card-feat de /ofertas) en vez del
   naranja de antes — el naranja se reserva para precio/CTA, no para
   badges informativos. */
.tc-feat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #181822;
    border: 1px solid var(--tc-p-border);
    border-radius: 20px;
    padding: 4px 10px 4px 6px;
}
:root[data-theme="light"] .tc-feat-chip { background: #f7f7f8; }
.tc-feat-icon { height: 18px; width: auto; }
.tc-feat-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--tc-p-text-dim);
    white-space: nowrap;
}

/* UTQG pills compactos (inline, lado derecho del stock) */
.tc-utqg-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #181822;
    border: 1px solid var(--tc-p-border);
    border-radius: 7px;
    padding: 3px 10px;
    min-width: 44px;
}
.tc-utqg-pill-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tc-p-text-dim);
    line-height: 1;
    margin-bottom: 1px;
}
.tc-utqg-pill-val {
    font-size: 14px;
    font-weight: 800;
    color: inherit;
    line-height: 1.2;
}
:root[data-theme="light"] .tc-utqg-pill { background: #f7f7f8; }
/* Panel derecho del detalle alineado al contenedor (mismo ancho que el
   navbar): sin relleno extra en el borde exterior derecho, para que el
   contenido termine donde termina el navbar. */
@media (min-width: 992px) {
    .tc-detail-panel.tc-detail-panel--aligned { padding-right: 0; padding-left: 3rem; }
}

/* Miniatura activa del carrusel: naranja suave (antes el naranja fuerte de
   .border-tireclick, que competía con los botones). Mismo tono que en el
   detalle de modelo (.tc-thumb-active, modelInformation.css). */
#carouselThumbnails .thumbnail-img.border-tireclick { border-color: #ffb183 !important; }