/* ============================================================ ANNY — CATÁLOGO ============================================================ Responsabilidades: - Contenedor del catálogo - Estructura visual de la tarjeta - Galería - Información - Precio - Footer - Estados visuales NO INCLUIR: - Grid → anny-grid.css - Toolbar → anny-toolbar.css - Ordenamiento → anny-sort.css - Botones globales → anny-buttons.css - Responsive → anny-responsive.css ============================================================ */ /* ============================================================ 01 — CONTENEDOR GENERAL ============================================================ */ .woocommerce .anny-catalog { width: 100%; margin: 0; padding: 0; color: var(--anny-text); } /* ============================================================ 02 — LISTA WOOCOMMERCE ============================================================ */ .woocommerce .anny-catalog ul.products { width: 100%; margin: 0; padding: 0; list-style: none; } /* ============================================================ 03 — PRODUCTO / CELDA ============================================================ */ .woocommerce .anny-catalog ul.products li.anny-card.product { position: relative; min-width: 0; width: auto; margin: 0; padding: 0; list-style: none; color: var(--anny-text); } /* ============================================================ 04 — CONTENIDO INTERNO DE LA TARJETA ============================================================ */ .woocommerce .anny-catalog .anny-card__inner { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; background-color: var(--anny-white); color: var(--anny-text); overflow: hidden; transition: transform var(--anny-transition), box-shadow var(--anny-transition); } /* ============================================================ 05 — GALERÍA ============================================================ */ .woocommerce .anny-catalog .anny-card__top { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; background-color: var(--anny-cream-light); border-radius: var(--anny-radius-lg); touch-action: pan-y; } /* ============================================================ 06 — CONTENEDOR DE GALERÍA ============================================================ */ .woocommerce .anny-catalog .anny-card__gallery { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* ============================================================ 07 — TRACK DEL CARRUSEL ============================================================ */ .woocommerce .anny-catalog .anny-card__track { display: flex; flex-wrap: nowrap; width: 100%; margin: 0; padding: 0; transform: translate3d(0, 0, 0); will-change: transform; } /* ============================================================ 08 — SLIDE ============================================================ */ .woocommerce .anny-catalog .anny-card__slide { position: relative; flex: 0 0 100%; width: 100%; min-width: 100%; margin: 0; padding: 0; } /* ============================================================ 09 — LINK DE GALERÍA ============================================================ */ .woocommerce .anny-catalog ul.products li.anny-card a.anny-card__media-link { position: relative; display: block; width: 100%; margin: 0; padding: 0; color: inherit; text-decoration: none; } /* ============================================================ 10 — IMAGEN ============================================================ */ .woocommerce .anny-catalog ul.products li.anny-card img.anny-card__image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; margin: 0; padding: 0; background-color: var(--anny-cream-light); user-select: none; } /* ============================================================ 11 — ARRASTRE DEL CARRUSEL ============================================================ */ .woocommerce .anny-catalog .anny-card__top.is-dragging { cursor: grabbing; } .woocommerce .anny-catalog .anny-card__top.is-dragging .anny-card__track { transition: none; } /* ============================================================ 12 — FLECHAS ============================================================ */ .woocommerce .anny-catalog .anny-card__arrow { position: absolute; top: 50%; z-index: 5; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background-color: var(--anny-white); color: var(--anny-secondary); opacity: 0; transform: translateY(-50%); cursor: pointer; transition: opacity var(--anny-transition-fast), background-color var(--anny-transition-fast), color var(--anny-transition-fast); } .woocommerce .anny-catalog .anny-card__arrow--prev { left: 12px; } .woocommerce .anny-catalog .anny-card__arrow--next { right: 12px; } .woocommerce .anny-catalog .anny-card__top:hover .anny-card__arrow { opacity: 1; } .woocommerce .anny-catalog .anny-card__arrow:hover { background-color: var(--anny-secondary); color: var(--anny-white); } .woocommerce .anny-catalog .anny-card__arrow:disabled { opacity: 0; pointer-events: none; } /* ============================================================ 13 — DOTS ============================================================ */ .woocommerce .anny-catalog .anny-card__dots { position: absolute; right: 0; bottom: 12px; left: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0; } .woocommerce .anny-catalog .anny-card__dot { display: block; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 50%; background-color: var(--anny-secondary); opacity: .35; cursor: pointer; transition: opacity var(--anny-transition-fast), transform var(--anny-transition-fast); } .woocommerce .anny-catalog .anny-card__dot.is-active { opacity: 1; transform: scale(1.25); } /* ============================================================ 14 — INFORMACIÓN ============================================================ */ .woocommerce .anny-catalog .anny-card__information { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 1rem 0 0; } /* ============================================================ 15 — LINK DE INFORMACIÓN ============================================================ */ .woocommerce .anny-catalog .anny-card__info-link { display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 0; padding: 0; color: inherit; text-decoration: none; } /* ============================================================ 16 — TÍTULO ============================================================ */ .woocommerce .anny-catalog .anny-card__title { margin: 0; color: var(--anny-secondary); font-family: var(--anny-font-heading), sans-serif; font-size: 1.25rem; font-weight: var(--anny-weight-heading); line-height: 1.2; } /* ============================================================ 17 — TÍTULO HOVER ============================================================ */ .woocommerce .anny-catalog .anny-card__title { transition: color var(--anny-transition-fast); } .woocommerce .anny-catalog .anny-card__info-link:hover .anny-card__title { color: var(--anny-primary); } /* ============================================================ 18 — PRECIO ============================================================ */ .woocommerce .anny-catalog .anny-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; color: var(--anny-secondary); font-family: var(--anny-font-ui), sans-serif; font-size: .95rem; font-weight: 600; line-height: 1.3; } /* ============================================================ 19 — PRECIO WOOCOMMERCE ============================================================ */ .woocommerce .anny-catalog .anny-card__price .woocommerce-Price-amount { color: inherit; } .woocommerce .anny-catalog .anny-card__price del { color: var(--anny-text); font-size: .78rem; font-weight: 400; opacity: .55; } .woocommerce .anny-catalog .anny-card__price ins { color: var(--anny-primary); font-weight: 600; text-decoration: none; } /* ============================================================ 20 — FOOTER ============================================================ */ .woocommerce .anny-catalog .anny-card__footer { display: flex; align-items: stretch; width: 100%; margin-top: auto; padding-top: 1rem; } /* ============================================================ 21 — BOTÓN DE TARJETA ============================================================ */ .woocommerce .anny-catalog ul.products li.anny-card .anny-card__footer a.anny-card__button { width: 100%; margin: 0; } /* ============================================================ 22 — PRODUCTO SIN STOCK ============================================================ */ .woocommerce .anny-catalog li.anny-card.is-out-of-stock .anny-card__inner { opacity: .78; } .woocommerce .anny-catalog li.anny-card.is-out-of-stock .anny-card__image { filter: saturate(.75); } /* ============================================================ 23 — PRODUCTO DESTACADO ============================================================ */ .woocommerce .anny-catalog li.anny-card.is-featured .anny-card__title { font-weight: 600; } /* ============================================================ 24 — BADGES ============================================================ */ .woocommerce .anny-catalog .anny-card__badge { position: absolute; top: 14px; left: 14px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: .35rem .65rem; border-radius: 999px; background-color: var(--anny-secondary); color: var(--anny-white); font-family: var(--anny-font-ui), sans-serif; font-size: .65rem; font-weight: var(--anny-weight-ui); letter-spacing: .06em; line-height: 1; text-transform: uppercase; } .woocommerce .anny-catalog .anny-card__badge--sale { background-color: var(--anny-primary); } .woocommerce .anny-catalog .anny-card__badge--out { background-color: var(--anny-brown-dark); } /* ============================================================ 25 — PRODUCTOS SIN ENLACE ============================================================ */ .woocommerce .anny-catalog .anny-card__inner a:not([href]) { cursor: default; } /* ============================================================ 26 — ESTADOS WOOCOMMERCE ============================================================ */ .woocommerce .anny-catalog .anny-card__inner .woocommerce-loop-product__title { margin: 0; } .woocommerce .anny-catalog ul.products li.anny-card .anny-card__inner .price { margin: 0; } .woocommerce .anny-catalog .anny-card__inner .add_to_cart_button { margin: 0; } .woocommerce .anny-catalog .anny-card__inner .star-rating { margin: .5rem 0; } .woocommerce .anny-catalog ul.products li.anny-card .anny-card__inner .onsale { display: none; } /* ============================================================ 27 — ACCESIBILIDAD ============================================================ */ .woocommerce .anny-catalog .anny-card__inner a:focus-visible { outline: 2px solid var(--anny-accent); outline-offset: 3px; } .woocommerce .anny-catalog .anny-card__inner a:focus:not(:focus-visible) { outline: none; } /* ============================================================ 28 — REDUCIR MOVIMIENTO ============================================================ */ @media (prefers-reduced-motion: reduce) { .woocommerce .anny-catalog .anny-card__track { transition: none; } .woocommerce .anny-catalog .anny-card__arrow, .woocommerce .anny-catalog .anny-card__dot { transition: none; } }