/* ============================================================
   ESTANDARTE — woocommerce.css
   Tienda (listado de productos).
   Figma 778:11366 (layout), 826:4792 (filtros), 1049:5100 (tarjeta).
   ============================================================ */

/* ----------------------------------------------------------
   0. Encabezado: migas + título (Figma 778:11370)
   Banner → 30px → "INICIO / TIENDA" → 20px → "TIENDA" → 19px
   ---------------------------------------------------------- */
.shop-page .page-head-sec { padding-block: 30px 0; }
.shop-page .page-head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.shop-page .page-head__crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #0072ce;
    font-weight: var(--fw-roman, 400);
    font-size: var(--fs-18);
    line-height: normal;
    text-transform: uppercase;
}
.shop-page .page-head__crumb a { color: #0072ce; }
.shop-page .page-head__crumb a:hover { color: #0e1946; }
.shop-page .page-head__title {
    margin: 0;
    color: #0e1946;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-64);
    line-height: normal;
    text-transform: uppercase;
}

/* ----------------------------------------------------------
   1. Sección: filtros + rejilla
   Figma: contenedor 1402 · sidebar 320 · gap 41 · grid 1042
   ---------------------------------------------------------- */
.shop-sec { background: var(--color-white); padding-block: 19px 100px; }
.shop-sec__inner { display: flex; gap: 41px; align-items: flex-start; }

/* ----------------------------------------------------------
   2. Sidebar de filtros (panel gris #f6f6f6, radio 5, padding 20)
   ---------------------------------------------------------- */
.shop-filters { flex: 0 0 320px; max-width: 320px; }
.shop-filters__form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    background: #f6f6f6;
    border-radius: 5px;
}

.shop-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-filters__title {
    margin: 0;
    color: #0e1946;
    font-weight: var(--fw-black);
    font-size: var(--fs-18);
    text-transform: uppercase;
}
.shop-filters__clear { color: #0072ce; font-size: var(--fs-18); text-decoration: underline; }
.shop-filters__clear:hover { text-decoration: none; }

/* ── Buscador de productos (en la cabecera, a la derecha del título) ── */
.shop-page .page-head__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    flex-wrap: wrap;
}
.shop-search { position: relative; flex: 0 1 380px; min-width: 240px; }
.shop-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #8e92a6;
    pointer-events: none;
    transition: color 0.18s ease;
}
/* Se sube la especificidad con .shop-page para ganarle a la regla global
   input[type="search"] de main.css (si no, pierde el padding y el fondo). */
.shop-page .shop-search__input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 48px;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    color: #0e1946;
    font-family: inherit;
    font-size: var(--fs-16);
    line-height: normal;
    box-shadow: 0 1px 2px rgba(14, 25, 70, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.shop-page .shop-search__input::placeholder { color: #8e92a6; }
.shop-page .shop-search__input:hover { border-color: #b9bdca; }
.shop-page .shop-search__input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.15);
}
.shop-search:focus-within .shop-search__icon { color: var(--color-blue); }
/* Oculta la "x" nativa duplicada de algunos navegadores */
.shop-page .shop-search__input::-webkit-search-decoration,
.shop-page .shop-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (max-width: 640px) {
    .shop-page .page-head__bar { flex-direction: column; align-items: stretch; gap: 14px; }
    .shop-search { flex: 1 1 auto; }
}

/* Grupos: separador superior + 30px de aire (menos el primero) */
.shop-filters__group { display: flex; flex-direction: column; gap: 10px; }
.shop-filters__group + .shop-filters__group { padding-top: 30px; border-top: 1px solid #dadada; }

/* Cabecera del grupo (acordeón) */
.shop-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.shop-filters__group-title {
    color: #0e1946;
    font-weight: 600;
    font-size: var(--fs-14);
    letter-spacing: 0.56px;
    text-transform: uppercase;
}
.shop-filters__chevron {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    color: #0e1946;
    transition: transform var(--transition);
}
/* Abierto = triángulo hacia arriba */
.shop-filters__group.is-open .shop-filters__chevron { transform: scaleY(-1); }

.shop-filters__panel { display: flex; flex-direction: column; gap: 10px; }
.shop-filters__panel[hidden] { display: none; }

/* Listado de opciones */
.shop-filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shop-filters__item label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0e1946;
    font-size: var(--fs-16);
    line-height: 1.35;
    cursor: pointer;
}
.shop-filters__item input[type="checkbox"] {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    margin: 0;
    background: transparent;
    border: 2px solid #0e1946;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: background var(--transition), border-color var(--transition);
}
.shop-filters__item input[type="checkbox"]:checked {
    background: #0072ce;
    border-color: #0072ce;
}
.shop-filters__item input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.shop-filters__item input[type="checkbox"]:focus-visible { outline: 2px solid #0072ce; outline-offset: 2px; }
.shop-filters__item label:hover { color: #0072ce; }
/* El nombre ocupa el espacio; el precio se alinea a la derecha */
.shop-filters__name { flex: 1 1 auto; min-width: 0; }
/* Recargo del término: a la derecha, en gris, sin resaltar */
.shop-filters__price { flex: 0 0 auto; margin-left: 12px; color: #8e92a6; font-weight: var(--fw-roman); white-space: nowrap; }
.shop-filters__price .woocommerce-Price-amount { font-weight: var(--fw-roman); }

/* ----------------------------------------------------------
   3. Sliders dobles de Tamaño (Ancho / Alto)
   ---------------------------------------------------------- */
.shop-filters__group--size .shop-filters__panel { gap: 30px; }

.shop-range { --from: 0%; --to: 100%; display: flex; flex-direction: column; gap: 10px; }
.shop-range__label { color: #0e1946; font-weight: var(--fw-light, 300); font-size: 11px; letter-spacing: 0.44px; }

/* Pista: los dos inputs se superponen sobre una línea de 1px */
.shop-range__track { position: relative; height: 12px; }
.shop-range__track::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: #979797;
}
/* Tramo seleccionado, en azul */
.shop-range__track::after {
    content: "";
    position: absolute;
    left: var(--from); right: calc(100% - var(--to));
    top: 50%;
    height: 1px;
    background: #0072ce;
}
.shop-range__input {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 12px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    pointer-events: none; /* solo las manijas son interactivas */
}
.shop-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #0072ce;
    border: none;
    cursor: pointer;
}
.shop-range__input::-moz-range-thumb {
    pointer-events: auto;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #0072ce;
    border: none;
    cursor: pointer;
}
.shop-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid #0e1946; outline-offset: 2px; }

/* Valores bajo cada manija */
.shop-range__values { position: relative; height: 16px; }
.shop-range__out {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    color: #0072ce;
    font-weight: var(--fw-heavy);
    font-size: 11px;
    letter-spacing: 0.44px;
    white-space: nowrap;
}

.shop-filters__apply { width: 100%; justify-content: center; }

/* ----------------------------------------------------------
   4. Rejilla de productos — 4 columnas, gap 40px
   ---------------------------------------------------------- */
.shop-main { flex: 1 1 auto; min-width: 0; position: relative; }
/* Mientras se filtra por AJAX */
.shop-main.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; }
.shop-main.is-loading::after {
    content: "";
    position: absolute;
    left: 50%; top: 80px;
    width: 32px; height: 32px;
    margin-left: -16px;
    border: 3px solid #d5d6e6;
    border-top-color: #0072ce;
    border-radius: 50%;
    animation: estandarte-spin 0.7s linear infinite;
}
@keyframes estandarte-spin { to { transform: rotate(360deg); } }
/* 4 por fila, con la tarjeta topada en los 230px del Figma: si el contenedor
   es más ancho, sobra espacio a la derecha en vez de estirarse la tarjeta. */
.shop-main ul.products,
.shop-main ul.products.columns-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 260px));
    justify-content: start;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.shop-main__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 60px 40px;
    background: #f6f6f6;
    border-radius: 5px;
    text-align: center;
}
.shop-main__empty-title {
    margin: 0;
    color: #0e1946;
    font-weight: var(--fw-black);
    font-size: var(--fs-24);
    text-transform: uppercase;
}
.shop-main__empty-copy {
    margin: 0;
    max-width: 460px;
    color: #172222;
    font-size: var(--fs-16);
    line-height: 1.5;
}
.shop-main__empty .btn { margin-top: 8px; }

/* Neutraliza los anchos/floats que WooCommerce aplica a li.product: dentro de
   la rejilla la tarjeta siempre ocupa toda su celda. */
.shop-main ul.products li.product,
.woocommerce .shop-main ul.products li.product,
.woocommerce-page .shop-main ul.products li.product {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px;
    float: none;
    clear: none;
}
.shop-main ul.products::before,
.shop-main ul.products::after { content: none; }

/* ----------------------------------------------------------
   5. Tarjeta de producto (Figma 1049:5100 · 230 × 326)
   ---------------------------------------------------------- */
.shop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 326px;
    margin: 0;
    padding: 10px;
    background: var(--color-white);
    border: 1px solid #d5d6e6;
    border-radius: 5px;
    transition: box-shadow var(--transition), border-color var(--transition);
}
/* Hover: borde azul marino + sombra para resaltar la tarjeta */
.shop-card:hover {
    border-color: #0e1946;
    box-shadow: 0 10px 24px rgba(14, 25, 70, 0.16);
}

/* Estrella de favorito: 24px, top 4 / right 6 */
.shop-card__fav {
    position: absolute;
    top: 4px; right: 6px;
    z-index: 2;
    width: 24px; height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #0e1946;
    cursor: pointer;
    transition: color var(--transition);
}
.shop-card__fav svg { width: 24px; height: 24px; display: block; }
.shop-card__fav:hover { color: #0072ce; }

/* Sin marcar: solo el contorno. Marcada: solo la sólida, en azul. */
.star-icon__solid { display: none; }
.shop-card__fav[aria-pressed="true"] { color: #0072ce; }
.shop-card__fav[aria-pressed="true"] .star-icon__outline { display: none; }
.shop-card__fav[aria-pressed="true"] .star-icon__solid { display: block; }

.shop-card__fav:focus-visible { outline: 2px solid #0072ce; outline-offset: 2px; border-radius: 3px; }

/* Imagen: ocupa el espacio libre, sin recortar */
.shop-card__media {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    border-radius: 3px;
    overflow: hidden;
}
/* WooCommerce fuerza `height: auto` sobre las imágenes del loop con una regla
   más específica; sin ganarle, la señal desborda la caja y el overflow la
   recorta por abajo. Estos selectores igualan su especificidad y, al cargarse
   después, tienen la última palabra. */
.shop-card__img,
.shop-card .shop-card__media img,
.woocommerce .shop-card .shop-card__media img,
.woocommerce ul.products li.product .shop-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Textos: separaciones de 2px, todo alineado a la izquierda */
.shop-card__body { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.shop-card__title { margin: 0; }
.shop-card__title a {
    display: block;
    color: #172222;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-14);
    line-height: 1.341;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shop-card__title a:hover { color: #0072ce; }
/* La línea de normativa nunca se corta: baja de cuerpo y, si aún no cabe,
   pasa a una segunda línea. */
.shop-card__meta {
    margin: 0;
    color: #0072ce;
    font-weight: var(--fw-heavy);
    font-size: 12px;
    line-height: 1.341;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-card__price {
    margin: 3px 0 0;
    color: #172222;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-14);
    line-height: 1.341;
    letter-spacing: 0.56px;
    text-align: left;
}
.shop-card__price .woocommerce-Price-amount { font-weight: var(--fw-heavy); }

/* Botón "Ver detalles" */
.shop-card__btn {
    width: 100%;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 5px;
    font-weight: var(--fw-black);
    font-size: 13px;
    white-space: nowrap;
}

/* ----------------------------------------------------------
   6. Paginación
   ---------------------------------------------------------- */
.woocommerce-pagination { margin-top: 48px; }
.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; height: 44px;
    padding: 0 12px;
    border: 1px solid #d5d6e6;
    border-radius: 5px;
    color: #172222;
    font-weight: var(--fw-black);
}
.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li a:hover {
    background: #0072ce;
    border-color: #0072ce;
    color: var(--color-white);
}

/* ----------------------------------------------------------
   7. Responsive
   ---------------------------------------------------------- */
/* Botón, cierre y fondo del panel: solo existen en móvil */
.shop-filters__open,
.shop-filters__close,
.shop-filters__done,
.shop-filters__backdrop { display: none; }

@media (max-width: 1280px) {
    .shop-sec__inner { gap: 32px; }
    .shop-filters { flex-basis: 280px; max-width: 280px; }
    .shop-main ul.products,
    .shop-main ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 260px)); gap: 28px; }
}

/* ── Tablet y móvil: los filtros pasan a panel deslizante ── */
@media (max-width: 992px) {
    .shop-sec { padding-block: 16px 72px; }
    .shop-sec__inner { flex-direction: column; align-items: stretch; gap: 20px; }
    .shop-filters { flex: none; max-width: none; }

    /* Botón "Filtros" encima de la rejilla */
    .shop-filters__open {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        align-self: flex-start;
        padding: 12px 20px;
        background: #f6f6f6;
        border: 1px solid #dadada;
        border-radius: 5px;
        color: #0e1946;
        font-weight: var(--fw-black);
        font-size: var(--fs-14);
        letter-spacing: 0.56px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .shop-filters__open svg { width: 20px; height: 20px; }

    .shop-filters__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(14, 25, 70, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 120;
    }
    .shop-filters__backdrop.is-open { opacity: 1; visibility: visible; }

    /* El panel entra desde la derecha */
    .shop-filters__form {
        position: fixed;
        top: 0; right: 0;
        width: min(380px, 88vw);
        height: 100vh;
        height: 100dvh;
        padding: 20px 20px 24px;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        box-shadow: -8px 0 24px rgba(0, 3, 47, 0.18);
        z-index: 121;
    }
    .shop-filters__form.is-open { transform: translateX(0); }

    /* La X queda arriba a la derecha del panel, alejada del borde de la pantalla */
    .shop-filters__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 40px; height: 40px;
        margin: -8px -8px -10px 0;
        padding: 0;
        background: none;
        border: none;
        color: #0e1946;
        cursor: pointer;
    }
    .shop-filters__close svg { width: 24px; height: 24px; }

    /* "Ver resultados" pegado al pie del panel */
    .shop-filters__done {
        display: inline-flex;
        position: sticky;
        bottom: 0;
        justify-content: center;
        width: 100%;
        margin-top: auto;
    }

    .shop-main ul.products,
    .shop-main ul.products.columns-4 {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        justify-content: stretch;
        gap: 20px;
    }
}

/* Bloquea el scroll del fondo con el panel abierto */
html.shop-filters-open,
html.shop-filters-open body { overflow: hidden; }

@media (max-width: 768px) {
    .shop-sec { padding-block: 12px 56px; }
    .shop-page .page-head-sec { padding-block: 20px 0; }
    .shop-page .page-head { gap: 12px; }
    .shop-page .page-head__crumb { font-size: var(--fs-16); }

    .shop-main ul.products,
    .shop-main ul.products.columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .shop-card { height: 330px; gap: 8px; }
    .shop-card__media { min-height: 140px; }
    .shop-card__title a { font-size: 13px; letter-spacing: 0.4px; }
    .shop-card__meta { font-size: 11px; }
    .shop-card__price { font-size: 13px; }
    .shop-card__btn { padding: 9px 16px; font-size: 12px; }
    .shop-filters__item label { font-size: var(--fs-16); }
    .shop-main__empty { padding: 40px 24px; }
    .shop-main__empty-title { font-size: var(--fs-20); }
}

@media (max-width: 480px) {
    .shop-main ul.products,
    .shop-main ul.products.columns-4 { gap: 10px; }
    .shop-card { height: 300px; padding: 8px; }
    .shop-card__media { min-height: 120px; }
    .shop-card__fav { top: 2px; right: 4px; width: 20px; height: 20px; }
    .shop-card__fav svg { width: 20px; height: 20px; }
    .shop-card__title a { font-size: 12px; }
    .shop-card__meta { font-size: 10px; }
    .shop-card__btn { padding: 8px 10px; font-size: 11px; }
    .woocommerce-pagination ul li a,
    .woocommerce-pagination ul li span { min-width: 38px; height: 38px; padding: 0 8px; }
}