/**
 * product.css
 * Tarjeta de producto (templates/catalog/_partials/miniatures/product.tpl),
 * usada en home (destacados/novedades/ofertas), listados de categoría,
 * búsqueda y relacionados. Estilo tipo Shopify: imagen grande, hover
 * con zoom, botón "Añadir al carrito" flotante, etiquetas, precio
 * destacado, sombras suaves, radio uniforme. Depende de variables.css.
 */

.ap-product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.ap-product-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.ap-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #f5f6fa;
    overflow: hidden;
}
.ap-product-card__link {
    display: block;
    width: 100%;
    height: 100%;
}
.ap-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.ap-product-card:hover .ap-product-card__img {
    transform: scale(1.06);
}

/* Etiquetas Oferta / Nuevo (ver product-flags.tpl) */
.ap-product-card__flags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ap-product-card__flag {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-white);
    background-color: var(--color-primary);
}
.ap-product-card__flag--discount,
.ap-product-card__flag--on_sale {
    background-color: var(--color-price);
}
.ap-product-card__flag--new {
    background-color: var(--color-secondary);
}

/* Botón favoritos */
.ap-product-card__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.ap-product-card:hover .ap-product-card__wishlist,
.ap-product-card__wishlist:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.ap-product-card__wishlist[aria-pressed="true"] {
    color: var(--color-price);
}

/* Botón "Añadir al carrito": aparece flotando sobre la imagen al
   pasar el ratón (patrón habitual en tiendas tipo Shopify). */
.ap-product-card__add-form {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.ap-product-card:hover .ap-product-card__add-form,
.ap-product-card__add-form:focus-within {
    opacity: 1;
    transform: translateY(0);
}
.ap-product-card__add-btn {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.ap-product-card__add-btn:hover {
    background-color: var(--color-secondary);
}

.ap-product-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ap-product-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}
.ap-product-card__title a {
    color: var(--color-text);
    text-decoration: none;
}
.ap-product-card__title a:hover {
    color: var(--color-primary);
}

/* Valoraciones: el propio módulo de reseñas (si está instalado) pinta
   su HTML vía el hook displayProductListReviews; aquí solo se acota
   el tamaño para que encaje en la tarjeta. */
.ap-product-card__body [class*="comments"] {
    font-size: 12px;
}

.ap-product-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ap-product-card__price--current {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--color-price);
}
.ap-product-card__price--old {
    font-size: 13px;
    color: #9a9a9a;
    text-decoration: line-through;
}

/* --- Grid genérico para cualquier listado de tarjetas (home y
   Fase 5: categoría, búsqueda, relacionados). --- */
.ap-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}

/* ==================================================================
   FASE 5 — Listado de productos (categoría, búsqueda, marca,
   novedades, ofertas, más vendidos: todos comparten
   catalog/listing/product-list.tpl).
   ================================================================== */

.ap-page-header__title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}
.ap-listing__intro {
    color: var(--color-text);
    font-size: 14px;
    margin-bottom: 24px;
}

/* Introducción de categoría (nombre/descripción/portada) */
.ap-category-intro {
    padding-bottom: 8px;
}
.ap-category-intro__description {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 20px;
}
.ap-category-intro__cover img {
    width: 100%;
    border-radius: var(--radius-base);
    margin-bottom: 24px;
}
.ap-category-additional-description {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    color: var(--color-text);
}

/* Subcategorías */
.ap-subcategories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.ap-subcategories__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    text-align: center;
}
.ap-subcategories__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition-base);
}
.ap-subcategories__item:hover img {
    box-shadow: var(--shadow-hover);
}
.ap-subcategories__name {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Barra: nº resultados + orden + botón filtro móvil */
.ap-listing__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.ap-listing__count {
    margin: 0;
    font-size: 13px;
    color: #8a8a8a;
}
.ap-listing__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ap-sort__select {
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0 12px;
    font-family: var(--font-family-base);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-white);
}
.ap-listing__filters-toggle {
    display: none;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.ap-listing__active-filters {
    margin-bottom: 20px;
}

/* Paginación: botón "Cargar más" (ver product.js > initLoadMore) en
   vez de números de página. */
.ap-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.ap-pagination__summary {
    margin: 0;
    font-size: 13px;
    color: #8a8a8a;
}
.ap-load-more__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 48px;
    padding: 0 32px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ap-load-more__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}
.ap-load-more__btn[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* Sidebar de filtros (#left-column, hook displayLeftColumn ->
   ps_facetedsearch/ps_categorytree). Se deja el HTML propio de esos
   módulos tal cual por ahora; solo se ajusta tipografía/espaciado
   general para que no desentone con el resto del tema. */
#left-column {
    font-size: 13px;
}
#left-column h1,
#left-column h2,
#left-column h3 {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 12px;
}
#left-column a {
    color: var(--color-text);
}
#left-column a:hover {
    color: var(--color-secondary);
}

/* Listado de subcategorías de la categoría actual (category.tpl >
   left_column, ver category-menu.tpl). */
.ap-category-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ap-category-menu__list li + li {
    margin-top: 4px;
}
.ap-category-menu__list a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ap-category-menu__list a:hover {
    background: #f5f6fa;
    color: var(--color-secondary);
}