/* ============================================================ YAGARO · Página de favoritos (TI Wishlist) — grid editorial. Se carga solo en la página del wishlist (ver functions.php). Las cards de cross-sells reutilizan .yg-card de shop.css/style.css. ============================================================ */ /* Red de seguridad: este CSS solo carga en la página de favoritos. */ html, body { overflow-x: hidden; } /* ---------- Contención del body-grid (MISMO fix que carrito/ficha) ---------- El global está en display:grid (regla legacy heredada, ver legacy-custom.css). Sin acotar su columna a minmax(0,1fr), el track implícito es `auto` y crece hasta el max-content de su contenido: las imágenes de las cards a tamaño intrínseco (~1200px) estiran la columna del body y el .yg-fav__grid se hereda ese ancho (2 cols × ~1195px). minmax(0,1fr) rompe el bloqueo min-content sin cambiar el layout (sigue siendo 1 columna). */ body.yg-favorites-page { grid-template-columns: minmax(0, 1fr) !important; } /* Sin full-bleed: esta es una página normal y su contenedor de Bridge (.page_container_inner) ya tiene padding lateral. Usar 100vw + márgenes negativos desbordaba el contenido por la derecha. Ocupamos el ancho natural del contenedor. */ .yg-fav { --yg-ink: #1a1a1a; --yg-muted: #8a8a8a; --yg-cream: #f6f1ea; --yg-line: #e7e0d6; width: 100%; max-width: 100%; padding: 8px 0 80px; background: #fff; color: var(--yg-ink); -webkit-font-smoothing: antialiased; } .yg-fav *, .yg-fav *::before, .yg-fav *::after { box-sizing: border-box; } /* ============================ HEADER ============================ */ .yg-fav__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 14px 0 26px; border-bottom: 1px solid var(--yg-line); } .yg-fav__eyebrow { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yg-muted); font-weight: 600; margin-bottom: 10px; } .yg-fav__title { margin: 0; font-size: clamp(34px, 4.4vw, 52px); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; } .yg-fav__title em { font-style: italic; font-weight: 400; } .yg-fav__headmeta { display: flex; align-items: center; gap: 22px; } .yg-fav__count { font-size: 13px; color: var(--yg-muted); } .yg-fav__addall { appearance: none; border: 0; cursor: pointer; background: var(--yg-ink); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 26px; border-radius: 999px; transition: opacity .2s ease, transform .2s ease; } .yg-fav__addall:hover { opacity: .85; } .yg-fav__addall.is-done { background: #2c6e49; } /* ============================ GRID ============================ */ .yg-fav__grid { list-style: none; margin: 30px 0 0; padding: 0; display: grid; /* minmax(0,1fr) en vez de 1fr: sin el min:0 la pista hereda min-width:auto y la imagen a tamaño intrínseco (~3400px) revienta la columna y desborda toda la página en móvil. minmax(0,…) deja que la pista encoja por debajo del contenido (fix robusto del "grid blowout"). */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); } .yg-fav-card { display: flex; flex-direction: column; /* min-width:0 evita el "grid blowout": sin esto, los items del grid tienen min-width:auto y la imagen a tamaño intrínseco (~1300px) revienta la columna y la card crece enorme (visible sobre todo en móvil). */ min-width: 0; transition: opacity .3s ease, transform .3s ease; } .yg-fav-card.is-removing { opacity: 0; transform: scale(.96); pointer-events: none; } /* --- media --- */ .yg-fav-card__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: linear-gradient(155deg, #e7ded2, #cdbfa9); } .yg-fav-card__media--ph { background: linear-gradient(155deg, #ece4d8, #d6c8b3); } .yg-fav-card__imglink { display: block; width: 100%; height: 100%; } .yg-fav-card__imglink img { width: 100%; height: 100%; object-fit: cover; display: block; } .yg-fav-card.is-oos .yg-fav-card__imglink img { opacity: .8; } .yg-fav-card__remove { position: absolute; top: 12px; left: 12px; z-index: 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #1a1a1a; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background .2s ease, transform .2s ease; } .yg-fav-card__remove svg { width: 14px; height: 14px; } .yg-fav-card__remove:hover { background: #fff; transform: scale(1.08); } .yg-fav-card__badge { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1a1a; background: rgba(255, 255, 255, 0.92); padding: 7px 13px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .yg-fav-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 16px 14px; background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent); color: rgba(255, 255, 255, 0.92); pointer-events: none; } .yg-fav-card__ov-eyebrow { display: block; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: .85; margin-bottom: 3px; } .yg-fav-card__ov-name { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } /* --- meta --- */ .yg-fav-card__meta { padding: 14px 2px 0; } .yg-fav-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .yg-fav-card__eyebrow { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yg-muted); font-weight: 600; } .yg-fav-card__price { font-size: 15px; font-weight: 700; color: var(--yg-ink); white-space: nowrap; } .yg-fav-card__price del { font-size: 12px; font-weight: 400; color: #b0a99e; margin-right: 6px; } .yg-fav-card__price ins { text-decoration: none; } .yg-fav-card__title { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--yg-ink); text-decoration: none; } .yg-fav-card__title:hover { text-decoration: underline; text-underline-offset: 3px; } .yg-fav-card__swatches { display: flex; gap: 6px; margin-top: 9px; } .yg-fav-card__swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } /* --- cta --- */ .yg-fav-card__cta { margin-top: 14px; } .yg-fav-card__add, .yg-fav-card__notify { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; appearance: none; cursor: pointer; border-radius: 999px; /* font/line-height explícitos: el