/* ════════════════════════════════════════════════════════════════════════════ SUTIL FRAGANCIA — TIENDA (catálogo) v3.3.0 Mobile-first scoped CSS · prefijo .sf-tienda-* · vars de palette-system.php Adaptado de tienda-mobile.html (mockup aprobado) con: · --noir/--marfil/--dorado/etc → vars de la paleta dinámica · clases .card/.grid/.bottom-bar/.sheet → sf-tienda-{card,grid,bottombar,sheet} · Removidos del mockup: wishlist, comparador Liverpool, search modal, hamburger drawer, social proof, advisor banner, footer (ya viven en otros files) ════════════════════════════════════════════════════════════════════════════ */ :root { --sf-tienda-success: var(--sf-success, #3B6D11); --sf-tienda-danger: var(--sf-danger, #A03C2A); --sf-tienda-bbar-h: 64px; --sf-tienda-safe-bottom: env(safe-area-inset-bottom, 0px); } /* Reservar espacio para bottom bar SOLO en pages de tienda mobile */ @media (max-width: 920px) { body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag, body.post-type-archive-product { padding-bottom: calc(var(--sf-tienda-bbar-h) + var(--sf-tienda-safe-bottom)); } } /* v3.3.8 FIX 4 — Body no-scroll: el JS aplica position:fixed + top:-scrollY (en openSheet/closeSheet) que SÍ bloquea el scroll en iOS Safari. La clase queda solo como hook semántico CSS. `overflow: hidden` no funciona en iOS porque es el contexto principal de scroll, no . */ body.sf-tienda-no-scroll { /* position:fixed aplicado vía JS inline styles */ } /* ════════════════════════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════════════════════════ */ .sf-tienda-hero { padding: 14px 18px 4px; /* v3.3.5 FIX 4: top 24→14 — espacio entre header y "CATÁLOGO" era excesivo en mobile */ text-align: center; } .sf-tienda-hero__eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 8px; font-weight: 500; font-family: 'DM Sans', -apple-system, sans-serif; } .sf-tienda-hero__title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.1; margin: 0 0 10px; color: var(--sf-text); } .sf-tienda-hero__sub { font-size: 13px; color: var(--sf-muted); margin: 0; line-height: 1.4; font-family: 'DM Sans', -apple-system, sans-serif; } /* ════════════════════════════════════════════════════════════════════════════ TRUST ROW — slim horizontal, 4 íconos ════════════════════════════════════════════════════════════════════════════ */ .sf-tienda-trust { display: flex; justify-content: space-between; gap: 8px; padding: 14px 14px 0; margin-top: 16px; border-top: 1px solid var(--sf-secondary); max-width: 1100px; margin-left: auto; margin-right: auto; } .sf-tienda-trust__item { display: flex; align-items: center; gap: 6px; /* v3.3.1 FIX 7 — font-size 11→12px para mejor legibilidad mobile */ font-size: 12px; color: var(--sf-text); line-height: 1.2; flex: 1; min-width: 0; font-family: 'DM Sans', -apple-system, sans-serif; } .sf-tienda-trust__item svg { /* v3.3.1 FIX 7 — íconos 14→16px y stroke 1.6→1.8 para mejor visibilidad */ width: 16px; height: 16px; stroke: var(--sf-accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════════════════════ GIFT BANNER (muestra gratis) ════════════════════════════════════════════════════════════════════════════ */ .sf-tienda-gift { margin: 14px 14px 0; background: linear-gradient(to right, rgba(184,146,74,0.12), rgba(184,146,74,0.05)); border: 1px solid rgba(184,146,74,0.3); border-radius: 2px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; max-width: 1100px; margin-left: auto; margin-right: auto; } /* v3.3.9 FIX — Hardcodear colores del banner de muestra gratis. Las variables --sf-accent y --sf-text se estaban INVIRTIENDO en este componente por cascading externo (plugin, wrapper con paleta inversa, dark mode parcial). La regla original con var(--sf-accent) + var(--sf-text) producía fondo noir con icono dorado en lugar de fondo dorado con icono noir. El intento previo de v3.3.9 (entrega que no resolvió) atacaba `fill: none !important` defensivo en el SVG — diagnóstico equivocado. Esta versión correcta hardcodea los hex del brand book v3 con !important, ignorando las variables de paleta para este componente específico. El banner es parte del brand book y siempre debe verse igual sin importar Customizer ni dark mode. */ .sf-tienda-gift__icon { width: 36px; height: 36px; flex-shrink: 0; background: #B8924A !important; /* Dorado Sutil — brand book v3 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; } .sf-tienda-gift__icon svg { width: 18px; height: 18px; stroke: #1C1A17 !important; /* Noir Cálido — brand book v3 */ fill: none !important; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sf-tienda-gift__text { flex: 1; min-width: 0; } .sf-tienda-gift__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 500; line-height: 1.15; margin: 0 0 2px; color: var(--sf-text); } .sf-tienda-gift__sub { font-size: 11px; color: var(--sf-muted); line-height: 1.3; font-family: 'DM Sans', -apple-system, sans-serif; margin: 0; } /* ════════════════════════════════════════════════════════════════════════════ DELIVERY ESTIMATOR (línea minimalista con CP input) ════════════════════════════════════════════════════════════════════════════ */ .sf-tienda-delivery { margin: 14px 14px 0; padding: 10px 14px; background: var(--sf-secondary); border-radius: 2px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; max-width: 1100px; margin-left: auto; margin-right: auto; font-family: 'DM Sans', -apple-system, sans-serif; } .sf-tienda-delivery__text { color: var(--sf-muted); line-height: 1.3; flex: 1; min-width: 0; } .sf-tienda-delivery__text strong { color: var(--sf-text); font-weight: 500; } .sf-tienda-delivery__cp { background: var(--sf-bg); border: 1px solid var(--sf-secondary); color: var(--sf-text); border-radius: 2px; padding: 6px 8px; font-size: 12px; width: 64px; text-align: center; outline: none; font-variant-numeric: tabular-nums; flex-shrink: 0; font-family: inherit; } .sf-tienda-delivery__cp:focus { border-color: var(--sf-text); } .sf-tienda-delivery__cp::placeholder { color: var(--sf-muted); } /* ════════════════════════════════════════════════════════════════════════════ RESULTS HEADER (count + sort trigger) ════════════════════════════════════════════════════════════════════════════ */ .sf-tienda-results-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 14px 14px; max-width: 1280px; margin: 0 auto; font-family: 'DM Sans', -apple-system, sans-serif; } .sf-tienda-count { font-size: 13px; color: var(--sf-muted); } .sf-tienda-count strong { color: var(--sf-text); font-weight: 500; } .sf-tienda-sort-trigger { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 0; color: var(--sf-text); background: none; border: 0; cursor: pointer; font-family: inherit; } .sf-tienda-sort-trigger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; } /* ════════════════════════════════════════════════════════════════════════════ ACTIVE FILTERS CHIP ROW ════════════════════════════════════════════════════════════════════════════ */ .sf-tienda-active-filters { display: flex; gap: 6px; padding: 0 14px 14px; overflow-x: auto; scrollbar-width: none; max-width: 1280px; margin: 0 auto; } .sf-tienda-active-filters::-webkit-scrollbar { display: none; } .sf-tienda-active-filters:empty { display: none; } .sf-tienda-active-chip { flex-shrink: 0; background: var(--sf-text); color: var(--sf-bg); font-size: 11px; letter-spacing: 0.04em; padding: 6px 10px 6px 12px; border-radius: 2px; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font-family: 'DM Sans', -apple-system, sans-serif; text-decoration: none; } .sf-tienda-active-chip svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; } /* ════════════════════════════════════════════════════════════════════════════ PRODUCT GRID — sobreescribe el default de WC dentro de .sf-tienda-grid ════════════════════════════════════════════════════════════════════════════ */ .sf-tienda-grid.products, ul.products.sf-tienda-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 10px; padding: 0 14px 32px; max-width: 1280px; margin: 0 auto; list-style: none; } .sf-tienda-grid li.product, .sf-tienda-grid > li.product { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; float: none !important; list-style: none !important; display: flex; flex-direction: column; position: relative; } /* CARD interna (los hooks de WC renderean adentro) */ .sf-tienda-grid li.product > a:first-child { display: block; text-decoration: none; color: inherit; } /* Imagen del producto: aspect-ratio 1/1, fondo piedra */ .sf-tienda-grid li.product .woocommerce-loop-product__link img, .sf-tienda-grid li.product img.attachment-woocommerce_thumbnail, .sf-tienda-grid li.product img.wp-post-image { aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; object-fit: contain !important; background: var(--sf-secondary); border-radius: 2px; margin-bottom: 10px !important; padding: 6% !important; /* v3.3.4 FIX 4: bajado de 12% a 6% — los frascos se veían chicos en un mar gris */ } /* ════════════════════════════════════════════════════════════════════════════ v3.4.0 — REDISEÑO DE CARDS · Dirección "Boutique con dorados" (Opción C aprobada) ════════════════════════════════════════════════════════════════════════════ Filosofía: - Sello dorado con check en top-right (USP "originales verificables") - Strip noir inferior unifica descuento + bestseller (resuelve doble badge agresivo) - Marca centrada con flanking lines (boutique premium) - Línea dorada decorativa de 24px sobre el bloque de precio - Composición simétrica centrada Hex hardcodeados (#B8924A dorado, #1C1A17 noir) por consistencia con brand book. ════════════════════════════════════════════════════════════════════════════ */ /* v3.4.2 FIX + v3.4.3 FIX — Modelo de layout de cards refactorizado. v3.4.2: el wrapper de Astra y el vuelven a flujo natural. El cuadrado pasa a un sub-contenedor `.sf-tienda-card__media` creado por JS (wrapCardMedia en tienda.js). El resto del contenido queda sin clipping. v3.4.3 FIX: selectores CSS RELAJADOS. v3.4.2 requería `.sf-tienda-grid li.product` como ancestro, pero archives de categoría (/product-category/X/) y de marca (/brand/X/) usan `