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

/* Antes fondo sólido #101018, ahora la foto de llantas — mismo criterio que
   .tc-cart-hero (page/cart.css): el navbar flota transparente encima, así
   que este padding extra arriba es lo que evita que lo tape, y de paso hace
   que ambos se vean como un solo bloque en vez de dos secciones
   independientes. Cubre /ofertas y cualquier búsqueda por medida (esta
   vista, page.search.showBySize, es compartida por ambas rutas). */
.tc-size-hero {
    --tc-hero-img: url('/img/page/search/size-hero.jpg');
    background-image: var(--tc-hero-img);
    background-repeat: no-repeat;
    background-position: center 75%;
    background-size: cover;
    min-height: 340px;
    display: flex;
    align-items: flex-start;
    padding: 130px 0 24px;
    /* Mismo desvanecido que .tc-cart-hero (page/cart.css): el final de la
       foto se pierde en el fondo de la página en vez de cortarse en seco. */
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
/* Versión clara: mismo criterio que .tc-cart-hero (page/cart.css) — foto
   clara propia y título/subtítulo (fijos en blanco en el blade, pensados
   para la foto oscura) pasan a oscuros para seguir siendo legibles. */
:root[data-theme="light"] .tc-size-hero {
    --tc-hero-img: url('/img/page/search/size-hero-light.jpg');
}
:root[data-theme="light"] .tc-size-hero h1,
:root[data-theme="light"] .tc-size-hero h2,
:root[data-theme="light"] .tc-size-hero p,
:root[data-theme="light"] .tc-size-hero .btn {
    /* .btn: el botón "Filtrar" de celular, también blanco fijo en el blade. */
    color: #16161c !important;
}
@media (max-width: 991.98px) {
    .tc-size-hero { padding-top: 100px; }
    /* Alinear el título del hero con el contenido real del navbar, no con
       el borde de la pantalla — bajo 992px el navbar es una píldora
       flotante con margin:0 16px + padding:10px 16px (navbar-footer.css),
       así que su contenido (logo) empieza a 32px del borde real. El
       .container de Bootstrap de aquí solo trae 12px de gutter por
       defecto, se notaba el título más pegado al borde que el navbar de
       arriba. Solo el .container del hero (el texto) — NO
       .tc-tire-page-container, que también envuelve la grilla de tarjetas:
       subirle el padding angostaba las tarjetas y truncaba sus badges
       ("Llega gratis el ..."), pedido explícito de no tocarlas. */
    .tc-size-hero > .container {
        padding-left: 32px;
        padding-right: 32px;
    }
    /* Mismo criterio que arriba, pero para "Mostrando X modelo(s)" (/modelos,
       /marca/{slug}) — es texto suelto, hermano de la grilla dentro del
       mismo contenedor, así que se indenta solo a él y no a
       .tc-tire-page-container completo (eso sí afectaría las tarjetas). */
    .tc-tire-results > p {
        padding-left: 32px;
        padding-right: 32px;
    }
}
@media (max-width: 767.98px) {
    /* Celular: la foto va sola y más baja (el título y "Filtrar" están sobre
       los productos). Misma foto ancha del tema activo, recortada hacia la
       derecha para que las llantas queden a la vista, y el mismo
       desvanecido del final que en escritorio. */
    .tc-size-hero {
        background-position: 82% 75%;
        padding-top: 96px;
        min-height: 200px;
    }
    /* "Filtrar" más pegado al subtítulo (antes gap-3 = 16px): así queda
       sobre la parte lisa de la foto y no encima de las llantas. */
    .tc-size-hero > .container {
        row-gap: 6px !important;
    }
}
/* Botón "Filtrar" (celular/tablet, bajo el título; abre el offcanvas de filtros):
   SOLO alineación, sin tocar su apariencia (fondo/padding/forma) — la
   clase "orange-btn2" del blade no tenía ninguna regla propia de layout,
   así que texto e ícono de embudo se alineaban por baseline normal de
   texto en vez de centrados, y se veían torcidos entre sí. Flex +
   align-items:center los centra en el mismo eje sin cambiar nada más. */
.orange-btn2 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    /* Texto del tema (blanco en oscuro, negro en claro): el botón ya no vive
       sobre la foto del hero, que era la que le daba el contraste. */
    --bs-btn-color: var(--tc-p-text);
    --bs-btn-hover-color: var(--tc-p-text);
    --bs-btn-active-color: var(--tc-p-text);
}
.orange-btn2 i { line-height: 1; }

.gray-bg2 {
    background-color: #f0f0f0 !important;
}

.red-bg {
    background-color: #f40d31;
}

.really-tiny-text {
    font-size: 10px;
    line-height: 1.2!important;
}


.carousel-indicators [data-bs-target] {
    background-color: #000;
    width: 12px;
    height: 12px;
    border-radius: 100%;
}

.carousel-indicators {
    bottom: -40px;
}


.carousel-control-prev {
    left: -80px;
}

.carousel-control-next {
    right: -80px;
}

.carousel-control-prev i,
.carousel-control-next i {
    font-size: 2rem;
    /* más grande */
    color: black;
}

/* Panel de filtros (offcanvas): estilos compartidos movidos a
   navbar-footer.css (.tc-p-filters/.tc-p-filter-input/.tc-p-brand-checkboxes)
   — ya no es exclusivo de esta página, /marca/{slug} usa el mismo patrón. */

/* ==========================================================================
   Rediseño /ofertas (showBySize): filtros a la izquierda + tarjetas nuevas
   tc-tire-card-*, inspirado en SimpleTire pero con menos densidad de datos.
   Vive en esta página primero; se replica a otras vistas de catálogo cuando
   se confirme el diseño (ver comentario en tire-card.blade.php).
   ========================================================================== */

/* Contenido (filtros + tarjetas) subido sobre la foto del encabezado, por encima de ella (z-index) para que el
   título no quede bajo su degradado. */
.tc-tire-page-container { position: relative; z-index: 2; margin-top: -60px; }
/* Con el panel de filtros abierto (celular/tablet) el contenedor deja de crear
   su propio nivel de apilamiento: si no, el offcanvas (position:fixed) queda
   atrapado dentro de su z-index:2 y el navbar flotante (z-index 1030) le
   tapa el título "Filtrar por". */
@media (max-width: 991.98px) {
    .tc-tire-page-container:has(.offcanvas-lg.show, .offcanvas-lg.showing) { z-index: auto; }
}

.tc-tire-layout { display: flex; flex-direction: column; gap: 24px; }

/* offcanvas-lg (Bootstrap 5.3): por debajo de lg sigue siendo el panel
   deslizable de siempre (ver botón "Filtrar" del hero); desde lg se vuelve
   un bloque normal del documento, así que aquí solo se le da ancho fijo y
   se deja "pegado" (sticky) mientras se hace scroll por la grilla. */
@media (min-width: 992px) {
    .tc-tire-layout { flex-direction: row; align-items: flex-start; gap: 28px; }
    .tc-tire-filters.offcanvas-lg {
        flex: 0 0 280px;
        width: 280px;
        position: sticky;
        top: 110px;
        /* Si el panel es más alto que la pantalla tiene su propio scroll: al desplazar con el mouse sobre los filtros
           bajan ellos y no la grilla de llantas (overscroll-behavior evita que el scroll "se pase" a la página). */
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .tc-tire-results { flex: 1 1 auto; min-width: 0; }
}
.tc-tire-filters .offcanvas-body,
.tc-tire-filters .offcanvas-header { padding-left: 22px; }
/* Bootstrap's .offcanvas-body is a row-direction flex container by default,
   so its single <form> child only takes its content width instead of
   filling the sidebar column — selects/inputs inside end up narrower than
   the panel. flex-direction:column stretches the form across the cross
   axis (width) instead. */
.tc-tire-filters .offcanvas-body { display: flex; flex-direction: column; }
.tc-tire-filters .offcanvas-body > form { width: 100%; }
/* Los filtros se desplazan, pero sin barra de scroll visible (ni en el panel de PC ni en el desplegable de celular). */
.tc-tire-filters, .tc-tire-filters .offcanvas-body, .tc-tire-filters .tc-fchips { scrollbar-width: none; }
.tc-tire-filters::-webkit-scrollbar, .tc-tire-filters .offcanvas-body::-webkit-scrollbar, .tc-tire-filters .tc-fchips::-webkit-scrollbar { display: none; }

.tc-tire-filters-header {
    border-bottom: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tc-tire-filters-header .offcanvas-title { font-size: 22px; }
.tc-tire-filter-group { margin-bottom: 18px; }
.tc-tire-filter-group:last-child { margin-bottom: 0; }

/* Línea separadora entre secciones del filtro (estilo de referencia:
   título grande arriba, checkboxes rápidos, luego secciones tipo acordeón
   separadas por líneas finas en vez de bordes alrededor de cada bloque). */
.tc-tire-filter-divider {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 20px 0;
}
:root[data-theme="light"] .tc-tire-filter-divider { background: #e6e6ec; }

.tc-tire-filter-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 0;
    font-size: 15px; font-weight: 800; color: inherit;
    text-transform: none; cursor: pointer;
}
.tc-tire-filter-toggle i { transition: transform .2s ease; font-size: 13px; }
.tc-tire-filter-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.tc-tire-filter-reset {
    font-size: 13px; font-weight: 600; color: #6b7280;
    text-decoration: none; white-space: nowrap;
}
.tc-tire-filter-reset:hover { color: var(--tc-p-orange); text-decoration: underline; }

.tc-tire-filter-actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.tc-tire-filter-actions .tc-tire-filter-reset { text-align: center; }
.tc-tire-filter-apply {
    width: 100%; border-radius: 999px; padding: 12px 28px; font-size: 14px;
}

/* Scroll interno de vuelta en las listas largas (marcas/desempeño/rin) —
   sin esto, abrir un desplegable con muchas opciones hacía scroll en toda
   la página en vez de solo en la lista. La barra visible se oculta (sigue
   funcionando con rueda del mouse/touch, solo no se ve la barra gris). */
.tc-tire-filters .tc-p-brand-checkboxes {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 0;
    scrollbar-width: none;
}
.tc-tire-filters .tc-p-brand-checkboxes::-webkit-scrollbar { width: 0; height: 0; }

/* Tarjetas (.tc-tire-grid / .tc-tire-card-*): viven en
   css/redesign/tire-card.css, compartido con "Ofertas" del home. */

/* ---- "Atrás" y migas de pan sobre la foto: encabezado de los detalles de
   llanta y de modelo (mismo .tc-size-hero que /modelos y /ofertas). En modo
   claro pasan a oscuros, igual que el título. ---- */
.tc-size-hero .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,.1);
    transition: background .15s ease;
}
.tc-size-hero .tc-detail-back:hover { background: rgba(255,255,255,.18); color: #fff; }
.tc-size-hero .tc-detail-back i { color: #ff5c00; font-size: 13px; }
.tc-size-hero .tc-detail-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12.5px; color: rgba(255,255,255,.45);
}
.tc-size-hero .tc-detail-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.tc-size-hero .tc-detail-breadcrumb a:hover { color: #ff5c00; }

:root[data-theme="light"] .tc-size-hero .tc-detail-back { color: #16161c; background: rgba(0,0,0,.06); }
:root[data-theme="light"] .tc-size-hero .tc-detail-back:hover { background: rgba(0,0,0,.1); color: #16161c; }
:root[data-theme="light"] .tc-size-hero .tc-detail-breadcrumb { color: rgba(20,20,26,.4); }
:root[data-theme="light"] .tc-size-hero .tc-detail-breadcrumb a { color: rgba(20,20,26,.7); }
:root[data-theme="light"] .tc-size-hero .tc-detail-breadcrumb a:hover { color: #ff5c00; }