/*
 * Refinamientos visuales del catálogo administrado 0.18.3.
 * Este archivo se carga después de shop-catalog.css para aislar el catálogo
 * de estilos globales del tema/constructores sin alterar otras páginas.
 */

/* El conteo total no aporta una acción al comprador y se retira de la interfaz. */
.cmds-shop-page .cmds-shop-hero__metric,
.cmds-shop-page [data-cmds-count] {
    display: none !important;
}

.cmds-shop-page .cmds-shop-hero {
    justify-content: flex-start;
}

.cmds-shop-page .cmds-shop-hero > div:first-child {
    width: 100%;
    max-width: 900px;
}

.cmds-shop-page .cmds-shop-results__head {
    justify-content: flex-end;
    min-height: 18px;
}

/* Reset acotado: evita que estilos globales de button/.button cambien fondos,
 * bordes, sombras, mayúsculas o transformaciones dentro del catálogo. */
.cmds-shop-page .cmds-shop-search__clear,
.cmds-shop-page .cmds-shop-filter-toggle,
.cmds-shop-page .cmds-shop-reset,
.cmds-shop-page .cmds-shop-filters__head button,
.cmds-shop-page .cmds-shop-pagination button,
.cmds-shop-page .cmds-shop-empty button,
.cmds-shop-page .cmds-shop-card__button {
    box-sizing: border-box !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Limpiar búsqueda. */
.cmds-shop-page .cmds-shop-search__clear {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border: 1px solid #e0e5ec !important;
    border-radius: 10px !important;
    background: #f7f8fa !important;
    color: #667085 !important;
    box-shadow: none !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.cmds-shop-page .cmds-shop-search__clear:hover {
    border-color: #ffc56b !important;
    background: #fff7e8 !important;
    color: #9a5700 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .10) !important;
    transform: none !important;
}

.cmds-shop-page .cmds-shop-search__clear:focus-visible {
    border-color: #ff9700 !important;
    background: #fffaf2 !important;
    color: #7f4800 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .18) !important;
}

/* El botón que abre el panel lateral solo debe existir en tablet/móvil.
 * Se fuerza display:none para que reglas globales de button no lo hagan visible
 * en escritorio cuando la barra lateral ya está presente. */
.cmds-shop-page .cmds-shop-filter-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid #d8dee7 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #273244 !important;
    box-shadow: 0 5px 16px rgba(16, 24, 40, .05) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.cmds-shop-page .cmds-shop-filter-toggle:hover,
.cmds-shop-page .cmds-shop-filter-toggle[aria-expanded="true"] {
    border-color: #ffbd5e !important;
    background: #fff8ed !important;
    color: #7a4a00 !important;
    box-shadow: 0 6px 18px rgba(255, 151, 0, .10) !important;
    transform: none !important;
}

.cmds-shop-page .cmds-shop-filter-toggle:focus-visible {
    border-color: #ff9700 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .18) !important;
}

/* Cerrar panel de filtros: permanece oculto en escritorio y solo aparece
 * cuando el panel se transforma en drawer responsive. */
.cmds-shop-page .cmds-shop-filters__head button {
    display: none !important;
    place-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border: 1px solid #e1e6ed !important;
    border-radius: 10px !important;
    background: #f7f8fa !important;
    color: #667085 !important;
    box-shadow: none !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease !important;
}

.cmds-shop-page .cmds-shop-filters__head button:hover,
.cmds-shop-page .cmds-shop-filters__head button:focus-visible {
    border-color: #ffbd5e !important;
    background: #fff7e8 !important;
    color: #8a5000 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .10) !important;
    transform: none !important;
}

/* Limpiar filtros. */
.cmds-shop-page .cmds-shop-reset {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 15px 0 0 !important;
    padding: 9px 14px !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #475467 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.cmds-shop-page .cmds-shop-reset:hover {
    border-color: #ffbd5e !important;
    background: #fff8ed !important;
    color: #7a4a00 !important;
    box-shadow: 0 5px 14px rgba(255, 151, 0, .08) !important;
    transform: none !important;
}

.cmds-shop-page .cmds-shop-reset:focus-visible {
    border-color: #ff9700 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .18) !important;
}

/* CTA de tarjetas: más limpio y con hover encapsulado. */
.cmds-shop-page .cmds-shop-card__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid #dfe4eb !important;
    border-radius: 10px !important;
    background: #f8f9fb !important;
    color: #344054 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.cmds-shop-page .cmds-shop-card__button:hover {
    border-color: #ff9700 !important;
    background: #ff9700 !important;
    color: #171717 !important;
    box-shadow: 0 7px 18px rgba(255, 151, 0, .18) !important;
    transform: none !important;
}

.cmds-shop-page .cmds-shop-card__button:focus-visible {
    border-color: #ff9700 !important;
    background: #fff7e8 !important;
    color: #7a4a00 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .18) !important;
}

.cmds-shop-page .cmds-shop-card__button.added,
.cmds-shop-page .cmds-shop-card__button.added:hover {
    border-color: #b7e4c7 !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
    box-shadow: none !important;
}

/* Paginación. */
.cmds-shop-page .cmds-shop-pagination button {
    display: grid !important;
    place-items: center !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #dfe3e8 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #566174 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.cmds-shop-page .cmds-shop-pagination button:hover {
    border-color: #ffbd5e !important;
    background: #fff8ed !important;
    color: #7a4a00 !important;
    box-shadow: 0 4px 12px rgba(255, 151, 0, .10) !important;
    transform: none !important;
}

.cmds-shop-page .cmds-shop-pagination button:focus-visible {
    border-color: #ff9700 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .18) !important;
}

.cmds-shop-page .cmds-shop-pagination button.is-active,
.cmds-shop-page .cmds-shop-pagination button.is-active:hover,
.cmds-shop-page .cmds-shop-pagination button.is-active:focus-visible {
    border-color: #202020 !important;
    background: #202020 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* CTA del estado vacío. */
.cmds-shop-page .cmds-shop-empty button {
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    border: 1px solid #202020 !important;
    border-radius: 10px !important;
    background: #202020 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.cmds-shop-page .cmds-shop-empty button:hover,
.cmds-shop-page .cmds-shop-empty button:focus-visible {
    border-color: #ff9700 !important;
    background: #ff9700 !important;
    color: #171717 !important;
    box-shadow: 0 0 0 3px rgba(255, 151, 0, .14) !important;
    transform: none !important;
}

@media (max-width: 820px) {
    .cmds-shop-page .cmds-shop-filter-toggle {
        display: flex !important;
    }

    .cmds-shop-page .cmds-shop-filters__head button {
        display: grid !important;
    }
}

@media (max-width: 650px) {
    .cmds-shop-page .cmds-shop-results__head {
        justify-content: flex-start;
    }
}