.tienda-banner-principal,
.tienda-banner-secundario,
.tienda-banner-caducidad {
    min-height: 250px;
    position: relative;
    background: linear-gradient(135deg, #111827 0%, #2563eb 45%, #0ea5e9 100%);
}

.tienda-banner-secundario {
    min-height: 210px;
    background: linear-gradient(135deg, #312e81 0%, #7c3aed 50%, #ec4899 100%);
}

.tienda-banner-caducidad {
    min-height: 210px;
    background: linear-gradient(135deg, #7f1d1d 0%, #ea580c 55%, #facc15 100%);
}

.tienda-banner-principal::after,
.tienda-banner-secundario::after,
.tienda-banner-caducidad::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.25), transparent 28%);
    pointer-events: none;
}

.tienda-product-img-wrap {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tienda-product-img {
    max-height: 150px;
    object-fit: contain;
}

.tienda-product-detail-img {
    max-height: 430px;
    width: 100%;
    object-fit: contain;
}

.tienda-product-thumb {
    height: 120px;
    width: 100%;
    object-fit: contain;
}

.product-card .product-name {
    min-height: 2.6rem;
}

/* Etapa 7: filtros, búsqueda y mejoras públicas */
.tienda-filtros-card {
    top: 1rem;
    z-index: 1;
}

.tienda-product-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.tienda-product-card:hover {
    transform: translateY(-2px);
}

.tienda-banner-search {
    max-width: 520px;
}

.tienda-product-img-wrap {
    overflow: hidden;
}

.tienda-product-img-wrap img {
    transition: transform .25s ease;
}

.tienda-product-card:hover .tienda-product-img-wrap img {
    transform: scale(1.04);
}

@media (max-width: 991.98px) {
    .tienda-filtros-card {
        position: static !important;
    }
}

/* Etapa 11: banners administrables */
.tienda-banner-dinamico {
    min-height: 230px;
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #111827 0%, #334155 100%);
}

.tienda-banner-dinamico::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 30%, rgba(255,255,255,.18), transparent 28%);
    pointer-events: none;
}

.tienda-banner-dinamico .banner-text,
.tienda-banner-principal .banner-text {
    position: relative;
    z-index: 1;
}

.tienda-banner-dinamico .banner-button,
.tienda-banner-principal .banner-button {
    position: relative;
    z-index: 2;
}

/* Validación etapa 11: navegación pública responsive */
.tienda-navbar-publica .container-small {
    min-width: 0;
}

.tienda-navbar-publica .tienda-navbar-header {
    min-width: 0;
}

.tienda-navbar-publica [data-category-btn="data-category-btn"] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tienda-navbar-publica .tienda-navbar-collapse {
    min-width: 0;
}

.tienda-navbar-publica .navbar-nav {
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .tienda-navbar-publica .container-small {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tienda-navbar-publica .tienda-navbar-header {
        width: auto;
        flex: 0 0 auto;
    }

    .tienda-navbar-publica .tienda-navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
    }

    .tienda-navbar-publica .navbar-nav {
        margin-left: auto;
    }
}

@media (max-width: 991.98px) {
    .tienda-navbar-publica {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .tienda-navbar-publica .container-small {
        display: block;
    }

    .tienda-navbar-publica .tienda-navbar-header {
        width: 100%;
    }

    .tienda-navbar-publica [data-category-btn="data-category-btn"] {
        max-width: calc(100vw - 6rem);
    }

    .tienda-navbar-publica .navbar-toggler {
        border-color: var(--phoenix-border-color, #cbd0dd);
        padding: .25rem .55rem;
    }

    .tienda-navbar-publica .tienda-navbar-collapse {
        width: 100%;
        margin-top: .75rem;
    }

    .tienda-navbar-publica .navbar-nav {
        align-items: stretch !important;
        gap: .35rem;
    }

    .tienda-navbar-publica .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .65rem .85rem !important;
        border-radius: .65rem;
        background: var(--phoenix-gray-100, #f5f7fa);
    }

    .tienda-navbar-publica .nav-link.active {
        background: var(--phoenix-primary-bg-subtle, rgba(56, 116, 255, .12));
    }

    .tienda-navbar-publica .category-dropdown-menu {
        max-width: calc(100vw - 1.5rem);
        overflow: hidden;
    }

    .tienda-navbar-publica .category-dropdown-menu .card-body {
        padding: 1.25rem !important;
    }

    .tienda-navbar-publica .category-dropdown-menu .text-nowrap {
        white-space: normal !important;
    }
}

@media (max-width: 575.98px) {
    .ecommerce-topbar .logo-text {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Validación etapa 11.2: corrección de categorías, filtros y vista tablet/móvil */
.tienda-navbar-publica {
    position: relative;
    z-index: 1060;
}

.tienda-navbar-publica .tienda-categorias-dropdown {
    position: relative;
}

.tienda-navbar-publica .tienda-category-dropdown-menu {
    z-index: 1080;
    width: min(936px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    box-shadow: 0 1rem 2rem rgba(18, 38, 63, .12) !important;
}

.tienda-navbar-publica .tienda-category-dropdown-menu.show {
    display: block;
}

.tienda-navbar-publica .tienda-category-dropdown-menu .card {
    background-color: var(--phoenix-white, #fff);
}

.tienda-listado-productos,
.tienda-listado-productos .container-small {
    position: relative;
    z-index: 1;
}

.tienda-listado-productos .breadcrumb {
    position: relative;
    z-index: 1;
}

.tienda-filtros-card {
    z-index: 2;
}

.tienda-filtros-card .card-body {
    overflow: hidden;
}

.tienda-filtros-card .form-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--phoenix-gray-700, #525b75);
}

.tienda-grid-productos > [class*="col-"] {
    min-width: 0;
}

@media (max-width: 1199.98px) {
    .tienda-filtros-card {
        position: static !important;
        margin-bottom: 1rem;
    }

    .tienda-filtros-card .card-body {
        padding: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .tienda-filtros-card {
        top: 1rem;
    }
}

@media (max-width: 991.98px) {
    .tienda-navbar-publica .tienda-category-dropdown-menu {
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        max-height: 70vh;
        overflow-y: auto;
    }
}

@media (max-width: 575.98px) {
    .tienda-navbar-publica .tienda-category-dropdown-menu {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .tienda-navbar-publica .tienda-category-dropdown-menu .row {
        --phoenix-gutter-y: 1rem;
    }

    .tienda-listado-productos {
        padding-top: 1.5rem !important;
    }
}

/* Validación etapa 11.3: menú público con comportamiento tipo Phoenix More */
.tienda-navbar-publica .container-small[data-navbar="data-navbar"] {
    min-width: 0;
    gap: 1rem;
    overflow: visible;
}

.tienda-navbar-publica .tienda-categorias-dropdown {
    flex: 0 0 auto;
}

.tienda-navbar-publica .tienda-navbar-more {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap !important;
    overflow: visible;
}

.tienda-navbar-publica .tienda-navbar-more [data-nav-item="data-nav-item"] {
    flex: 0 0 auto;
}

.tienda-navbar-publica .tienda-navbar-more .nav-link {
    white-space: nowrap;
}

.tienda-navbar-publica .tienda-navbar-more .dropdown-menu {
    z-index: 1090;
}

.tienda-navbar-publica .tienda-nav-hidden {
    display: none !important;
}

.tienda-navbar-publica [data-more-item="data-more-item"].d-none {
    display: none !important;
}

.tienda-navbar-publica [data-category-list="data-category-list"] .dropdown-item.active,
.tienda-navbar-publica [data-category-list="data-category-list"] .dropdown-item:active {
    color: var(--phoenix-white, #fff);
    background-color: var(--phoenix-primary, #3874ff);
}

@media (max-width: 767.98px) {
    .tienda-navbar-publica .container-small[data-navbar="data-navbar"] {
        gap: .5rem;
    }

    .tienda-navbar-publica [data-category-btn="data-category-btn"] {
        padding-right: .75rem !important;
    }

    .tienda-navbar-publica .tienda-navbar-more .nav-link {
        padding-left: .55rem;
        padding-right: .55rem;
    }
}

@media (max-width: 575.98px) {
    .tienda-navbar-publica .container-small[data-navbar="data-navbar"] {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .tienda-navbar-publica [data-category-btn="data-category-btn"] {
        max-width: 42vw;
    }
}

/* Validación etapa 11.4: filtros con estructura tipo Phoenix y prioridad correcta del menú Categorías */
.tienda-navbar-publica {
    position: relative !important;
    z-index: 1200 !important;
    overflow: visible !important;
}

.tienda-navbar-publica .container-small,
.tienda-navbar-publica .dropdown,
.tienda-navbar-publica .navbar-nav {
    overflow: visible !important;
}

.tienda-navbar-publica .tienda-category-dropdown-menu,
.tienda-navbar-publica .category-dropdown-menu,
.tienda-navbar-publica .dropdown-menu.show {
    position: absolute !important;
    z-index: 1210 !important;
}

.tienda-listado-productos,
.tienda-listado-productos .container-small,
.tienda-product-filter-container {
    position: relative;
    z-index: 1;
}

.tienda-filtros-columna {
    position: relative;
    z-index: 1;
}

.tienda-product-filter-offcanvas {
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: .75rem;
    background-color: var(--phoenix-soft-bg, #f5f7fa) !important;
    padding: 1.25rem;
}

.tienda-product-filter-offcanvas .form-label,
.tienda-filtros-card .form-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--phoenix-gray-700, #525b75);
}

@media (min-width: 992px) {
    .tienda-product-filter-offcanvas.phoenix-offcanvas-fixed {
        position: sticky !important;
        top: 1rem;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        visibility: visible !important;
        width: 100% !important;
        height: calc(100vh - 2rem);
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        z-index: 1 !important;
        box-shadow: none;
    }

    .tienda-product-filter-container .phoenix-offcanvas-backdrop {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .tienda-product-filter-offcanvas.phoenix-offcanvas-fixed {
        z-index: 1045 !important;
        padding: 1.25rem;
        border-radius: 0;
    }

    .tienda-product-filter-container .phoenix-offcanvas-backdrop {
        z-index: 1040 !important;
    }

    .tienda-navbar-publica {
        z-index: 1200 !important;
    }

    .tienda-navbar-publica .tienda-category-dropdown-menu,
    .tienda-navbar-publica .category-dropdown-menu,
    .tienda-navbar-publica .dropdown-menu.show {
        z-index: 1210 !important;
    }
}

@media (max-width: 575.98px) {
    .tienda-product-filter-offcanvas.phoenix-offcanvas-fixed {
        width: min(88vw, 22rem) !important;
    }
}

/* Validación etapa 11.6: espaciado correcto en banners de página principal */
.tienda-banner-principal,
.tienda-banner-secundario,
.tienda-banner-caducidad,
.tienda-banner-dinamico {
    display: flex !important;
    align-items: center !important;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 4rem) !important;
}

.tienda-banner-principal {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1rem;
}

.tienda-banner-secundario {
    justify-content: center !important;
}

.tienda-banner-caducidad,
.tienda-banner-dinamico {
    justify-content: flex-start !important;
}

.tienda-banner-principal .banner-text,
.tienda-banner-secundario .banner-text,
.tienda-banner-caducidad .banner-text,
.tienda-banner-dinamico .banner-text {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2;
}

.tienda-banner-principal .banner-text {
    max-width: min(760px, 100%);
}

.tienda-banner-secundario .banner-text {
    max-width: min(640px, 100%);
    text-align: center !important;
}

.tienda-banner-caducidad .banner-text,
.tienda-banner-dinamico .banner-text {
    max-width: min(560px, 100%);
    text-align: left !important;
}

.tienda-banner-principal .banner-button,
.tienda-banner-secundario .banner-button,
.tienda-banner-caducidad .banner-button,
.tienda-banner-dinamico .banner-button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 2;
    margin-top: 1rem;
    white-space: nowrap;
}

.tienda-banner-principal h2 {
    font-size: clamp(2rem, 4.8vw, 4rem) !important;
    line-height: 1 !important;
    margin-bottom: .35rem !important;
}

.tienda-banner-principal h3 {
    font-size: clamp(1.25rem, 3vw, 2.35rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
}

.tienda-banner-secundario h2,
.tienda-banner-caducidad h2,
.tienda-banner-dinamico h2 {
    font-size: clamp(1.75rem, 3.5vw, 3rem) !important;
    line-height: 1.12 !important;
}

.tienda-banner-caducidad p,
.tienda-banner-dinamico p {
    font-size: clamp(.95rem, 1.4vw, 1.125rem);
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .tienda-banner-principal,
    .tienda-banner-secundario,
    .tienda-banner-caducidad,
    .tienda-banner-dinamico {
        min-height: auto !important;
        padding: 1.5rem !important;
    }

    .tienda-banner-principal {
        min-height: 280px !important;
    }

    .tienda-banner-secundario,
    .tienda-banner-caducidad,
    .tienda-banner-dinamico {
        min-height: 220px !important;
    }

    .tienda-banner-secundario .banner-text,
    .tienda-banner-caducidad .banner-text,
    .tienda-banner-dinamico .banner-text {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .tienda-banner-principal .banner-button,
    .tienda-banner-secundario .banner-button,
    .tienda-banner-caducidad .banner-button,
    .tienda-banner-dinamico .banner-button {
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .tienda-banner-principal,
    .tienda-banner-secundario,
    .tienda-banner-caducidad,
    .tienda-banner-dinamico {
        padding: 1.15rem !important;
    }

    .tienda-banner-principal h2 {
        font-size: 2rem !important;
    }

    .tienda-banner-principal h3 {
        font-size: 1.25rem !important;
    }
}

/* Validación etapa 11.7: filtros tipo Phoenix sin card y compatibles con modo oscuro */
.tienda-product-filter-container {
    overflow: visible;
}

.tienda-filtros-columna {
    position: relative;
    z-index: 1;
}

.tienda-product-filter-offcanvas {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: var(--phoenix-soft-bg) !important;
    color: var(--phoenix-body-color) !important;
    padding: 1.25rem 1.25rem 1.25rem 0 !important;
}

.tienda-product-filter-offcanvas .collapse-indicator {
    width: 100%;
    border: 0;
    text-align: left;
    text-decoration: none;
    box-shadow: none !important;
}

.tienda-product-filter-offcanvas .collapse-indicator:hover,
.tienda-product-filter-offcanvas .collapse-indicator:focus {
    text-decoration: none;
}

.tienda-product-filter-offcanvas .toggle-icon {
    transition: transform .2s ease;
}

.tienda-product-filter-offcanvas .collapse-indicator[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.tienda-product-filter-offcanvas .form-check-label,
.tienda-product-filter-offcanvas .fs-0,
.tienda-product-filter-offcanvas .text-1000,
.tienda-product-filter-offcanvas .text-900,
.tienda-product-filter-offcanvas .text-700 {
    color: var(--phoenix-body-color) !important;
}

.tienda-product-filter-offcanvas .form-control,
.tienda-product-filter-offcanvas .form-select {
    background-color: var(--phoenix-input-bg, var(--phoenix-body-bg)) !important;
    color: var(--phoenix-body-color) !important;
    border-color: var(--phoenix-border-color) !important;
}

.tienda-product-filter-offcanvas .form-control::placeholder {
    color: var(--phoenix-gray-500) !important;
}

.tienda-product-filter-offcanvas .input-group .form-control + .form-control {
    border-left-width: 0;
}

@media (min-width: 992px) {
    .tienda-product-filter-offcanvas.phoenix-offcanvas-fixed {
        position: sticky !important;
        top: 1rem;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        visibility: visible !important;
        width: 100% !important;
        height: calc(100vh - 2rem);
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        z-index: 1 !important;
    }
}

@media (max-width: 991.98px) {
    .tienda-product-filter-offcanvas {
        padding: 1.25rem !important;
        background-color: var(--phoenix-body-bg) !important;
        border-radius: 0 !important;
    }
}

[data-bs-theme="dark"] .tienda-product-filter-offcanvas,
[data-theme="dark"] .tienda-product-filter-offcanvas,
.dark .tienda-product-filter-offcanvas {
    background-color: var(--phoenix-body-bg) !important;
    color: var(--phoenix-body-color) !important;
}

[data-bs-theme="dark"] .tienda-product-filter-offcanvas .form-control,
[data-bs-theme="dark"] .tienda-product-filter-offcanvas .form-select,
[data-theme="dark"] .tienda-product-filter-offcanvas .form-control,
[data-theme="dark"] .tienda-product-filter-offcanvas .form-select,
.dark .tienda-product-filter-offcanvas .form-control,
.dark .tienda-product-filter-offcanvas .form-select {
    background-color: var(--phoenix-gray-1100, #141824) !important;
    color: var(--phoenix-gray-100, #eff2f6) !important;
    border-color: var(--phoenix-gray-700, #373e53) !important;
}

[data-bs-theme="dark"] .tienda-product-filter-offcanvas .btn-phoenix-secondary,
[data-theme="dark"] .tienda-product-filter-offcanvas .btn-phoenix-secondary,
.dark .tienda-product-filter-offcanvas .btn-phoenix-secondary {
    color: var(--phoenix-gray-100, #eff2f6) !important;
}