:root {
    --salinas-black: #171717;
    --salinas-red: #c8272f;
    --salinas-red-dark: #a91f27;
    /* Amarillo tomado de las piezas nuevas del carrusel. */
    --salinas-yellow: #f8ca48;
    --salinas-yellow-soft: #fbd96f;
    --salinas-gray: #6f6f72;
    --salinas-gray-light: #f3f3f3;
    --primary-color: var(--salinas-black);
    --secondary-color: var(--salinas-red);
    --foreground-color: var(--salinas-black);
    --body-text-color: #202020;
    --bg-black-color: var(--salinas-black);
    --bg-light-dark-color: #303030;
}

/* Encabezado: negro informativo, blanco para el nuevo logo. */
body .header__topbar,
body .header__topbar.bg_red {
    background: var(--salinas-black) !important;
}

body .main__header,
body .salinas-sticky-header .main__header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body .salinas-sticky-header {
    background: #ffffff !important;
}

/* El carrusel conserva sus imágenes; únicamente cambia el fondo azul anterior. */
body .slider__section--bg2 {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(128deg, transparent 0 8%, rgba(23, 23, 23, 0.055) 8% 11%, transparent 11% 17%, rgba(23, 23, 23, 0.035) 17% 20%, transparent 20% 100%),
        linear-gradient(128deg, transparent 0 79%, rgba(23, 23, 23, 0.035) 79% 83%, transparent 83% 89%, rgba(23, 23, 23, 0.055) 89% 93%, transparent 93% 100%),
        linear-gradient(180deg, #f8f8f8 0%, #eeeeee 100%) !important;
}

body .slider__section--bg2::before,
body .slider__section--bg2::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 24px;
    height: 190px;
    pointer-events: none;
    transform: rotate(39deg);
}

body .slider__section--bg2::before {
    left: 36px;
    bottom: -58px;
    background: var(--salinas-red);
    box-shadow:
        48px -76px 0 var(--salinas-yellow),
        96px -119px 0 var(--salinas-black);
}

body .slider__section--bg2::after {
    right: 42px;
    top: -62px;
    background: var(--salinas-red);
    box-shadow:
        -46px 82px 0 var(--salinas-yellow),
        -92px 120px 0 var(--salinas-black);
}

body .slider__section--bg2 > .container {
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 767px) {
    body .slider__section--bg2::before,
    body .slider__section--bg2::after {
        width: 16px;
        height: 135px;
        opacity: 0.78;
    }

    body .slider__section--bg2::before {
        left: 12px;
        bottom: -44px;
        box-shadow:
            34px -55px 0 var(--salinas-yellow),
            68px -87px 0 var(--salinas-black);
    }

    body .slider__section--bg2::after {
        right: 14px;
        top: -50px;
        box-shadow:
            -32px 58px 0 var(--salinas-yellow),
            -64px 90px 0 var(--salinas-black);
    }

    body .hero-search-layout {
        row-gap: 18px !important;
    }

    body .hero-search-layout .search__filter--area {
        margin-top: 0 !important;
    }

    /* Buscador compacto exclusivo para celulares. */
    body .hero-search-layout .search__filter--area {
        padding: 12px 14px 14px !important;
    }

    body .hero-search-layout .search__filter--header {
        margin-bottom: 8px !important;
    }

    body .hero-search-layout .search__filter--header__icon {
        width: 34px !important;
        height: 34px !important;
        margin-right: 9px !important;
        border-radius: 10px !important;
    }

    body .hero-search-layout .search__filter--header__icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    body .hero-search-layout .search__filter--title {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    body .hero-search-layout #myTabs {
        padding: 3px !important;
        gap: 3px !important;
    }

    body .hero-search-layout #myTabs .nav-link {
        min-height: 35px !important;
        padding: 7px 3px !important;
        font-size: 11px !important;
    }

    body .hero-search-layout .tab-content {
        margin-top: 9px !important;
    }

    body .hero-search-layout #tab1 .search__filter--form,
    body .hero-search-layout #tab3 .search__filter--form {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 76px;
        gap: 6px !important;
        align-items: stretch;
    }

    body .hero-search-layout #tab2 .search__filter--form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 6px !important;
        align-items: stretch;
    }

    body .hero-search-layout .search__filter--select {
        min-width: 0 !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    body .hero-search-layout .search__filter--select__field {
        width: 100% !important;
        height: 38px !important;
        padding: 0 22px 0 9px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    body .hero-search-layout .search__filter--btn {
        width: 76px !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    body .hero-search-layout #vehicle-search {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 76px;
        gap: 6px;
        align-items: stretch;
    }

    body .hero-search-layout #vehicle-search .vehicle-search__fields {
        display: contents;
    }

    body .hero-search-layout #vehicle-search .vehicle-search__field:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    body .hero-search-layout #vehicle-search .vehicle-search__field:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    body .hero-search-layout #vehicle-search .vehicle-search__field:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }

    body .hero-search-layout #vehicle-version-group:not([hidden]) {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    body .hero-search-layout #vehicle-search .vehicle-search__submit {
        grid-column: 4;
        grid-row: 1;
    }

    body .hero-search-layout #vehicle-search:has(#vehicle-version-group:not([hidden])) .vehicle-search__submit {
        grid-row: 2;
    }

    body .hero-search-layout #vehicle-search .vehicle-search__status {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0 !important;
    }

    body .hero-search-layout #vehicle-search:has(#vehicle-version-group:not([hidden])) .vehicle-search__status {
        grid-row: 3;
    }

    body .hero-search-layout #vehicle-search .vehicle-search__status:empty {
        display: none;
    }
}

/* Slider a todo el ancho, sin alterar su altura original ni el fondo. */
@media only screen and (max-width: 767px) {
    html body .hero-search-layout .hero-promo-column {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .hero-search-layout .hero__slider--inner,
    html body .hero-search-layout .hero__slider--wrapper,
    html body .hero-search-layout .swiper-slide,
    html body .hero-search-layout .slider__promo_link {
        height: calc(100vw - 30px) !important;
        aspect-ratio: auto !important;
    }

    html body .hero-search-layout .hero__slider--inner,
    html body .hero-search-layout .swiper-slide,
    html body .hero-search-layout .slider__promo_link,
    html body .hero-search-layout .slider__image {
        border-radius: 0 !important;
    }

    html body .hero-search-layout .hero__slider--inner {
        box-sizing: border-box !important;
        border: 0 !important;
        box-shadow:
            inset 0 1px 0 rgba(19, 0, 92, 0.09),
            inset 0 -1px 0 rgba(19, 0, 92, 0.09) !important;
    }

    html body .hero-search-layout .slider__promo_link,
    html body .hero-search-layout .slider__image {
        display: block !important;
        width: 100% !important;
    }

    html body .hero-search-layout .hero-slider-pagination {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        height: 24px;
        padding-top: 8px;
        align-items: flex-start;
        justify-content: center;
        transform: none !important;
        background: transparent !important;
    }

    html body .hero-search-layout .hero-slider-pagination .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        margin: 0 3px !important;
        border: 1px solid rgba(23, 23, 23, 0.38) !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
        opacity: 1 !important;
    }

    html body .hero-search-layout .hero-slider-pagination .swiper-pagination-bullet-active {
        border-color: var(--salinas-red) !important;
        background: var(--salinas-red) !important;
        transform: scale(1.18);
    }
}

body .hero-search-layout .hero-slider-pagination {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    height: 24px;
    padding-top: 8px;
    align-items: flex-start;
    justify-content: center;
    transform: none !important;
    background: transparent !important;
}

body .hero-search-layout .hero-slider-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    margin: 0 3px !important;
    border: 1px solid rgba(23, 23, 23, 0.38) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    opacity: 1 !important;
}

body .hero-search-layout .hero-slider-pagination .swiper-pagination-bullet-active {
    border-color: var(--salinas-red) !important;
    background: var(--salinas-red) !important;
    transform: scale(1.18);
}

body .hero-search-layout .hero__slider--inner {
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .hero-search-layout .swiper-slide,
body .hero-search-layout .slider__promo_link,
body .hero-search-layout .slider__image {
    border-radius: 11px !important;
}

body .hero-search-layout .slider__image {
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    background: #ffffff;
    border: 0 !important;
    box-shadow: none !important;
}

/* Una sola pieza visible; filtro y carrusel crecen juntos en escritorio. */
@media only screen and (min-width: 992px) {
    body .hero-search-layout {
        grid-template-columns: minmax(390px, 470px) minmax(0, 470px) !important;
    }

    body .hero-search-layout .search__filter--area {
        height: 460px !important;
    }

    body .hero-search-layout .hero__slider--inner,
    body .hero-search-layout .hero__slider--wrapper,
    body .hero-search-layout .swiper-slide,
    body .hero-search-layout .slider__promo_link {
        height: 460px !important;
    }

    body .hero-search-layout .swiper-slide {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    body .hero-search-layout .hero__slider--inner {
        aspect-ratio: 1 / 1 !important;
    }

    body .hero-search-layout .swiper-slide,
    body .hero-search-layout .slider__promo_link {
        width: 100% !important;
        height: 100% !important;
    }
}

@media only screen and (max-width: 767px) {
    body .hero-search-layout .hero__slider--inner {
        aspect-ratio: 1 / 1 !important;
    }

    body .hero-search-layout .swiper-slide,
    body .hero-search-layout .slider__promo_link {
        width: 100% !important;
        height: 100% !important;
    }
}

body .header__menu--link,
body .header__account--btn,
body .offcanvas__header--menu__open--btn {
    color: var(--salinas-black) !important;
}

body .offcanvas__header--menu__open--svg,
body .offcanvas__header--menu__open--svg path {
    color: var(--salinas-black) !important;
    fill: var(--salinas-black) !important;
    stroke: var(--salinas-black) !important;
}

/* Los SVG originales tenían blanco escrito directamente en sus trazos. */
body .header__account--profile__items .header__account--btn svg {
    stroke: var(--salinas-black) !important;
}

body .header__minicart--items .header__account--btn svg path {
    fill: var(--salinas-black) !important;
}

body .header__account--profile__items .header__account--btn:hover svg {
    stroke: var(--salinas-red) !important;
}

body .header__minicart--items .header__account--btn:hover svg path {
    fill: var(--salinas-red) !important;
}

body .header__menu--items:hover .header__menu--link,
body .header__menu--link.active,
body .header__sub--menu__link:hover,
body .offcanvas__menu_item:hover {
    color: var(--salinas-red) !important;
    border-color: var(--salinas-red) !important;
}

body .header__menu--link::before {
    background: #b8b8b8;
    opacity: 0.55;
}

body .promo-header-link,
body .promo-header-link.active,
body .promo-header-link:hover,
body .promo-header-link.active:hover,
body .offcanvas__promo_link,
body .offcanvas__promo_link:hover {
    border-color: var(--salinas-yellow) !important;
    background: var(--salinas-yellow) !important;
    color: var(--salinas-black) !important;
    box-shadow: 0 8px 18px rgba(248, 202, 72, 0.28) !important;
}

body .offcanvas__header,
body .offcanvas__inner,
body .offcanvas__menu {
    background: #ffffff !important;
}

/* Acciones principales en rojo; promociones en amarillo. */
body .primary__btn,
body .cart__summary--footer__btn,
body .checkout__now--btn,
body .contact__form--btn,
body .salinas-cart-button {
    border-color: var(--salinas-red) !important;
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body .primary__btn:hover,
body .cart__summary--footer__btn:hover,
body .checkout__now--btn:hover,
body .contact__form--btn:hover,
body .salinas-cart-button:hover {
    border-color: var(--salinas-black) !important;
    background: var(--salinas-black) !important;
    color: #ffffff !important;
}

body .promotion-badge,
body .product__badge,
body .product__badge--new,
body .quantity-discount-badge,
body .salinas-cart-promo-label,
body .salinas-cart-count,
body .banner__badge {
    border-color: var(--salinas-red) !important;
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body .hero-search-layout #myTabs .nav-link.active {
    border-color: var(--salinas-red) !important;
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body .ver-mas-promociones,
body #btnAbrirCarritoDesdeAviso {
    border-color: var(--salinas-red) !important;
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body .ver-mas-promociones {
    border-color: var(--salinas-red) !important;
    background: #ffffff !important;
    color: var(--salinas-red) !important;
}

body .ver-mas-promociones:hover {
    border-color: var(--salinas-red) !important;
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body #btnSeguirViendo {
    border-color: var(--salinas-black) !important;
    background: #ffffff !important;
    color: var(--salinas-black) !important;
}

body #btnSeguirViendo:hover {
    border-color: var(--salinas-red) !important;
    color: var(--salinas-red) !important;
}

body .brand-filter-clear,
body .catalog-filter-clear,
body .promotions-filter-clear {
    color: var(--salinas-red) !important;
}

/* Los precios siempre se muestran en negro; rojo queda para acciones y avisos. */
body .promo-home-price,
body .promo-home-promo-mxn,
body .promotion-price,
body .catalog-product-price,
body .cart-unit-mxn,
body #cart-total-mxn,
body .salinas-cart-product-prices strong,
body .salinas-cart-product-subtotal strong,
body .salinas-cart-total strong,
body [data-cart-unit-price],
body [data-cart-subtotal],
body #totalCarritoLateral {
    color: var(--salinas-black) !important;
}

/* El rótulo del precio permanece negro; sólo la cantidad final se destaca. */
body .product__details--info__price {
    color: var(--salinas-black) !important;
}

body .product__details--info__price #precio_mxn_producto {
    color: var(--salinas-black) !important;
}

/* Sombras del buscador alineadas con el rojo de la nueva identidad. */
body .hero-search-layout #myTabs .nav-link.active,
body .hero-search-layout .search__filter--btn {
    box-shadow: 0 7px 18px rgba(200, 39, 47, 0.26) !important;
}

body .hero-search-layout .search__filter--title,
body .hero-search-layout .search__filter--header__icon svg,
body .hero-search-layout .swiper__nav--btn,
body .quantity-deal__title,
body .quantity-deal__option,
body .quantity-deal__message strong,
body .salinas-cart-placeholder h3,
body .salinas-cart-quantity-button {
    color: var(--salinas-black) !important;
}

body .hero-search-layout .swiper__nav--btn {
    border-color: var(--salinas-red) !important;
    background: #ffffff !important;
}

body .hero-search-layout .swiper__nav--btn:hover {
    border-color: var(--salinas-red) !important;
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body .salinas-cart-close:hover {
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body .hero-search-layout .search__filter--area::before {
    background: linear-gradient(
        90deg,
        var(--salinas-red) 0%,
        var(--salinas-red) 43%,
        var(--salinas-yellow) 43%,
        var(--salinas-yellow) 72%,
        var(--salinas-black) 72%,
        var(--salinas-black) 100%
    ) !important;
}

body select:focus,
body input:focus,
body textarea:focus,
body .search__filter--select:focus-within,
body .catalog-filter-select select:focus,
body .brand-filter-select select:focus,
body .promotions-filter-select select:focus {
    border-color: var(--salinas-red) !important;
    box-shadow: 0 0 0 3px rgba(200, 39, 47, 0.14) !important;
}

body .quantity-deal__option:hover,
body .quantity-deal__option:focus-visible {
    border-color: var(--salinas-red) !important;
}

body .quantity-deal__option.is-active {
    border-color: var(--salinas-black) !important;
    background: var(--salinas-black) !important;
    color: #ffffff !important;
}

body .quantity__value,
body .salinas-cart-quantity-button {
    color: var(--salinas-black) !important;
}

body .quantity__value:hover,
body .salinas-cart-quantity-button:hover {
    background: rgba(200, 39, 47, 0.08) !important;
    color: var(--salinas-red) !important;
}

body .quantity-discount-summary,
body .salinas-cart-savings,
body #cart-savings-row,
body #cart-savings-mxn {
    color: #16823b !important;
}

body #scroll__top {
    background: var(--salinas-black) !important;
    color: #ffffff !important;
}

body #scroll__top:hover {
    background: var(--salinas-red) !important;
    color: #ffffff !important;
}

body .footer__bg,
body .footer__section,
body .footer__bottom {
    background: var(--salinas-black) !important;
}

body .footer__widget--title::after,
body .section__heading--maintitle::before {
    background: var(--salinas-red) !important;
}

body a:hover,
body .copyright__content--link:hover {
    color: var(--salinas-red);
}

body .main__logo--img {
    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
}

body .footer__logo--link img {
    width: 220px;
    max-width: 100%;
    height: auto;
}

body .footer__logo--link {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 8px;
    background: #ffffff;
}

@media (max-width: 991px) {
    body .main__logo--img {
        width: 205px !important;
        max-width: 205px !important;
    }
}

@media (max-width: 420px) {
    body .main__logo--img {
        width: 175px !important;
        max-width: 175px !important;
    }
}

/* En computadora, solo replica el borde y la sombra del buscador. */
@media only screen and (min-width: 768px) {
    html body .hero-search-layout .hero-promo-column {
        position: relative !important;
        overflow: visible !important;
    }

    html body .hero-search-layout .hero__slider--inner {
        box-sizing: border-box !important;
        /* Linea visual sin reducir el ancho calculado por Swiper. */
        border: 0 !important;
        box-shadow: inset 0 0 0 1px rgba(19, 0, 92, 0.09) !important;
    }

    html body .hero-search-layout .hero-slider-pagination {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        bottom: auto !important;
        left: 0 !important;
        height: 8px !important;
        padding: 0 !important;
    }
}