/* Theme Name: Los Vestidos de Tammy Theme URI: https://rayoweb.cl Author: RayoWeb Author URI: https://rayoweb.cl Description: Tema base de bloques para las tiendas WooCommerce de RayoWeb. Paleta, tipografia y radios se cambian en theme.json; los datos del cliente son marcadores entre dobles corchetes que reemplaza pintar.py. Requires at least: 6.5 Tested up to: 6.9 Requires PHP: 8.0 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: losvestidosdetammy Tags: e-commerce, full-site-editing, block-patterns */ /* ---------- La escala de espaciado ---------- Los seis pasos del theme.json,con nombre corto. Todo margin,padding y gap nuevo sale de acá:tener veinte espaciados distintos es lo mismo que no tener ninguno,y el cliente lo nota sin poder señalar dónde ("no hay espaciados","le falta actitud"). No se agregan pasos intermedios — si algo no calza,se elige el paso de al lado,y en la duda el más grande. La única excepción es un ajuste óptico de verdad,y va marcado en la MISMA línea con un comentario que empiece por 'fuera-de-escala:' y explique por qué. Eso es lo que el verificador de `rayoweb-estilo` acepta y cuenta. ⚠️ Declarar la escala en theme.json NO la enciende:desde WP 6.6 hace falta además `"defaultSpacingSizes":false`,o el núcleo gana por colisión de slug y `--wp--preset--spacing--40` sirve 1rem en vez de 2.5rem. El respaldo de cada `var()` de abajo es el valor correcto,para que el CSS no dependa de eso;el theme.json ya lo trae desde el 2026-08-29. */ :root{--e1:var(--wp--preset--spacing--10,0.5rem);--e2:var(--wp--preset--spacing--20,1rem);--e3:var(--wp--preset--spacing--30,1.5rem);--e4:var(--wp--preset--spacing--40,2.5rem);--e5:var(--wp--preset--spacing--50,4rem);--e6:var(--wp--preset--spacing--60,6rem)}:root{--rw-margen:clamp(var(--e2),3.5vw,var(--e5))}body{--wp--style--root--padding-left:var(--rw-margen);--wp--style--root--padding-right:var(--rw-margen)}.rw-hero,.rw-ventajas,.rw-categorias,.rw-novedades,.rw-cta,.rw-marcas{padding-left:var(--rw-margen);padding-right:var(--rw-margen)}:root{--rw-tira-alto:2.5rem;--rw-barra-alto:3.75rem}/* ⚠️ EL `sticky` VA EN EL ENVOLTORIO,NO EN `.rw-header`. WordPress envuelve la parte de plantilla en `
`,y un elemento `sticky` sólo puede desplazarse DENTRO de su padre. Como ese envoltorio mide exactamente lo mismo que la cabecera,el margen de viaje era cero:la cabecera se iba con la página. Medido — a 600 px de scroll su borde inferior quedaba en -460,o sea fuera de la pantalla. Es la peor forma de fallar que tiene esto,porque **el CSS decía `position:sticky` y era verdad**:la propiedad estaba aplicada y la declaración se leía correcta. Sólo la medición en el navegador lo delata. Cualquier revisión que se hiciera leyendo la hoja de estilos daba el visto bueno. (La cabecera pegajosa nunca funcionó en ninguna tienda:la regla estaba desde el principio en `.rw-header`.) */ .wp-site-blocks>header.wp-block-template-part,.rw-header{position:sticky;top:calc(-1 * var(--rw-tira-alto));z-index:100;border-bottom:1px solid var(--wp--preset--color--borde);/* La cabecera manda sus propios márgenes a cada fila (regla de más abajo). Sin esto hereda el padding lateral de la página y la cinta queda con dos franjas blancas a los costados:medido,1424 px de fondo en una pantalla de 1500. Eso era el "se ve cortada". */ padding-left:0;padding-right:0;transition:box-shadow .18s ease}.rw-header--compacta{box-shadow:0 2px 16px rgba(22,32,46,.10)}.rw-header>.rw-tira,.rw-header>.wp-block-group{margin-left:0;margin-right:0;max-width:none;width:100%}.rw-header{gap:0}.rw-header>*{margin-block-start:0;margin-block-end:0}.rw-header>.wp-block-group>.wp-block-group,.rw-tira>.wp-block-group{max-width:none;padding-left:var(--rw-margen);padding-right:var(--rw-margen)}.rw-tira{font-size:0.875rem;letter-spacing:0.01em;text-align:center}.rw-tira>.wp-block-group{flex-wrap:nowrap;justify-content:center;gap:var(--e2)}.rw-tira a{color:inherit}.rw-tira p{margin:0}.rw-tira__dato:empty{display:none}.rw-barra{background:var(--wp--preset--color--blanco)}.rw-barra__fila{gap:var(--e3);min-height:var(--rw-barra-alto)}.rw-barra__logo{order:0;flex:0 0 auto}.rw-barra__nav{order:1;flex:1 1 auto;min-width:0}.rw-barra__acc{order:2;flex:0 0 auto;gap:var(--e1)}.rw-barra__logo .wp-block-site-logo img,.rw-header .wp-block-site-logo img{max-height:48px;width:auto;transform-origin:left center;transition:transform .18s ease}.rw-header--compacta .wp-block-site-logo img{transform:scale(.72)}.rw-header--compacta .rw-barra__fila{min-height:3rem;/* fuera-de-escala:es un ALTO de barra,no un espaciado */}.rw-header .wp-block-navigation{font-family:var(--wp--preset--font-family--titulos);font-weight:600;gap:var(--e3)}.rw-header .wp-block-navigation .wp-block-navigation-item__content{padding-top:var(--e1);padding-bottom:var(--e1)}.rw-header .wp-block-navigation a:hover{color:var(--wp--preset--color--marca-oscura);text-decoration:underline;text-underline-offset:4px}.rw-header .wp-block-navigation .wp-block-navigation__submenu-container{border:1px solid var(--wp--preset--color--borde);border-radius:var(--wp--custom--radio--campo);box-shadow:0 10px 28px rgba(22,32,46,.10);padding-top:var(--e1);padding-bottom:var(--e1);min-width:15rem}.rw-header .wp-block-navigation .wp-block-navigation__submenu-container a{padding-top:var(--e1);padding-bottom:var(--e1);padding-left:var(--e2);padding-right:var(--e2)}.rw-header .rw-nav__vertodo{border-top:1px solid var(--wp--preset--color--borde);margin-top:var(--e1);font-weight:700}/* Los tres controles miden lo mismo y se alinean por su centro. 44 px es el mínimo táctil recomendado y es lo que evita el "controles chicos" en el teléfono. */ .rw-barra__acc .wp-block-woocommerce-customer-account a,.rw-barra__acc .wc-block-mini-cart__button,.rw-buscador__lupa{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--wp--custom--radio--campo);color:var(--wp--preset--color--tinta);background:transparent;border:0;cursor:pointer;padding:0;transition:background-color .15s ease}.rw-barra__acc .wp-block-woocommerce-customer-account a:hover,.rw-barra__acc .wc-block-mini-cart__button:hover,.rw-buscador__lupa:hover{background:var(--wp--preset--color--humo);color:var(--wp--preset--color--marca)}.rw-barra__acc .wp-block-woocommerce-customer-account svg,.rw-barra__acc .wc-block-mini-cart__button svg{width:24px;height:24px}.rw-barra__acc .wc-block-mini-cart__badge{background:var(--wp--preset--color--marca);color:var(--wp--preset--color--blanco);font-weight:700;font-size:0.875rem;min-width:1.375rem;height:1.375rem;border:2px solid var(--wp--preset--color--blanco);border-radius:999px;display:inline-flex;align-items:center;justify-content:center}.rw-barra__acc .wc-block-mini-cart__badge[hidden]{display:none}.rw-barra__acc .wc-block-mini-cart__amount{display:none}.rw-barra__acc .rw-buscador{margin:0;width:clamp(11rem,20vw,18rem)}.rw-barra__acc .rw-buscador .wp-block-search__inside-wrapper{border:1px solid var(--wp--preset--color--borde);border-radius:var(--wp--custom--radio--campo);background:var(--wp--preset--color--humo);padding:0;transition:border-color .15s ease,background-color .15s ease}.rw-barra__acc .rw-buscador:focus-within .wp-block-search__inside-wrapper{border-color:var(--wp--preset--color--marca);background:var(--wp--preset--color--blanco)}.rw-barra__acc .rw-buscador .wp-block-search__input{border:0;background:transparent;padding:var(--e1) var(--e2);/* 1rem y no menos:**por debajo de 16 px Safari en iPhone hace zoom al enfocar el campo** y deja la página descuadrada. Es un bug de móvil que se ve como "el sitio salta al buscar". */ font-size:1rem;min-height:42px}.rw-barra__acc .rw-buscador .wp-block-search__button{background:transparent;color:var(--wp--preset--color--tinta-suave);padding:0 var(--e2);min-height:42px}.rw-barra__acc .rw-buscador .wp-block-search__button:hover{color:var(--wp--preset--color--marca)}.rw-buscador__lupa{display:none}@media (max-width:781px){.rw-barra__nav{order:0;flex:1 1 0;justify-content:flex-start}.rw-barra__logo{order:1;flex:0 0 auto;justify-content:center}.rw-barra__acc{order:2;flex:1 1 0;justify-content:flex-end}.rw-barra__acc .rw-cuenta{display:none}.rw-barra__fila{gap:var(--e1)}.rw-header .wp-block-site-logo img{max-height:38px}.rw-tira__dato{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.rw-barra__acc .rw-buscador{display:none;width:100%}.rw-buscador__lupa{display:inline-flex}.rw-barra--buscando .rw-barra__fila{flex-wrap:wrap}.rw-barra--buscando .rw-buscador{display:block;order:3;flex:1 0 100%;margin-top:var(--e1)}}@media (max-width:480px){.rw-tira{font-size:0.875rem}}.wp-block-navigation__responsive-container.is-menu-open{padding-top:var(--e4);padding-bottom:var(--e5)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:var(--e1)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{padding-top:var(--e2);padding-bottom:var(--e2);font-size:1.25rem;width:100%;border-bottom:1px solid var(--wp--preset--color--borde)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{border:0;box-shadow:none;background:transparent;min-width:0;padding:0 0 0 var(--e3)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{padding-left:0;padding-right:0;font-size:1rem;font-weight:400}.wp-block-navigation__responsive-container-open,.wp-block-navigation__responsive-container-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.rw-sugerencias{position:absolute;top:calc(100% + var(--e1));left:0;right:0;z-index:120;background:var(--wp--preset--color--blanco);border:1px solid var(--wp--preset--color--borde);border-radius:var(--wp--custom--radio--campo);box-shadow:0 10px 28px rgba(22,32,46,.14);overflow:hidden;max-height:70vh;overflow-y:auto}.rw-sugerencias[hidden]{display:none}.rw-buscador{position:relative}.rw-sug__item{display:flex;align-items:center;gap:var(--e2);padding:var(--e1) var(--e2);text-decoration:none;color:var(--wp--preset--color--tinta);border-bottom:1px solid var(--wp--preset--color--borde)}.rw-sug__item:last-child{border-bottom:0}.rw-sug__item:hover,.rw-sug__item[aria-selected="true"]{background:var(--wp--preset--color--humo);color:var(--wp--preset--color--tinta)}.rw-sug__foto{width:48px;height:48px;object-fit:contain;background:var(--wp--preset--color--blanco);border:1px solid var(--wp--preset--color--borde);border-radius:var(--wp--custom--radio--campo);flex:0 0 auto}.rw-sug__texto{min-width:0;flex:1 1 auto}.rw-sug__nombre{display:block;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rw-sug__precio{display:block;font-size:0.875rem;font-weight:700;color:var(--wp--preset--color--marca);font-variant-numeric:tabular-nums}.rw-sug__estado{padding:var(--e2);font-size:0.875rem;color:var(--wp--preset--color--tinta-suave);text-align:center}.rw-sug__todos{display:block;padding:var(--e2);text-align:center;font-weight:700;background:var(--wp--preset--color--humo);color:var(--wp--preset--color--marca);text-decoration:none}.rw-sug__todos:hover{text-decoration:underline}ul.wc-block-grid__products,ul.wc-block-product-template,.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:clamp(var(--e2),1.6vw,var(--e3));margin:0;padding:0;list-style:none}@media (min-width:640px){ul.wc-block-grid__products,ul.wc-block-product-template,.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}@media (min-width:1000px){ul.wc-block-grid__products,ul.wc-block-product-template,.woocommerce ul.products{grid-template-columns:repeat(4,minmax(0,1fr)) !important}}@media (min-width:1400px){ul.wc-block-grid__products,ul.wc-block-product-template,.woocommerce ul.products{grid-template-columns:repeat(5,minmax(0,1fr)) !important}}.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}.woocommerce ul.products li.product{width:100% !important;margin:0 !important;float:none !important;clear:none !important}.wc-block-grid .wc-block-grid__products>li.wc-block-grid__product,.wc-block-product-template>li.wc-block-product,.woocommerce ul.products li.product{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:none;min-width:0;flex:none;background:var(--wp--preset--color--blanco);border:1px solid var(--wp--preset--color--borde);border-radius:14px;padding:var(--e2) var(--e2) var(--e2);margin:0;text-align:left;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}ul.wc-block-product-template.is-flex-container>li.wc-block-product{width:100% !important;max-width:none !important;flex:none !important}li.wc-block-grid__product:hover,li.wc-block-product:hover,.woocommerce ul.products li.product:hover{transform:translateY(-4px);border-color:var(--wp--preset--color--borde);box-shadow:0 12px 30px rgba(51,38,47,.10)}/* Todas las fotos al mismo cuadrado,con el producto entero adentro. `contain` y no `cover`:son portadas de libros y cajas,y recortarlas para llenar el marco les corta el título,que es justo lo que hay que ver. El `!important` es por los relacionados de la ficha:ese bloque escribe `style="object-fit:cover;aspect-ratio:1/1;"` como ATRIBUTO en la etiqueta —no en una hoja—,y un estilo en línea le gana a cualquier selector por especificidad. Se veía como portadas cortadas arriba y abajo:la foto es de 169×210 y el marco es cuadrado. Es la única forma de ganarle sin editar el patrón de WooCommerce,que no es nuestro. */ li.wc-block-grid__product .wc-block-grid__product-image img,li.wc-block-product .wc-block-components-product-image img,.woocommerce ul.products li.product a img{aspect-ratio:1 / 1;object-fit:contain !important;width:100%;height:auto;border-radius:10px;background:#fff;transition:transform .35s ease}li.wc-block-grid__product:hover .wc-block-grid__product-image img,li.wc-block-product:hover .wc-block-components-product-image img,.woocommerce ul.products li.product:hover a img{transform:scale(1.04)}li.wc-block-grid__product .wc-block-grid__product-image,li.wc-block-product .wc-block-components-product-image{margin:0 0 var(--e1);overflow:hidden;border-radius:10px}li.wc-block-grid__product .wc-block-grid__product-title,li.wc-block-product .wp-block-post-title,.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--wp--preset--font-family--titulos);font-size:1rem;font-weight:500;line-height:1.32;color:var(--wp--preset--color--tinta);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em;margin:0 0 var(--e1);padding:0}li.wc-block-grid__product a,li.wc-block-product a,.woocommerce ul.products li.product a{text-decoration:none}li.wc-block-grid__product:hover .wc-block-grid__product-title,li.wc-block-product:hover .wp-block-post-title a,.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{color:var(--wp--preset--color--marca)}li.wc-block-grid__product .wc-block-grid__product-price,li.wc-block-product .wc-block-components-product-price,.woocommerce ul.products li.product .price{color:var(--wp--preset--color--marca);font-family:var(--wp--preset--font-family--titulos);font-weight:600;font-size:1.125rem;display:block;margin:0 0 var(--e2)}li.wc-block-grid__product .wc-block-grid__product-add-to-cart,li.wc-block-product .wp-block-woocommerce-product-button,.woocommerce ul.products li.product .button{margin-top:auto;margin-bottom:0;width:100%}li.wc-block-grid__product .wc-block-grid__product-add-to-cart a,li.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link,li.wc-block-product .wp-block-woocommerce-product-button a,.woocommerce ul.products li.product .button{display:block;width:100%;text-align:center;border-radius:10px;font-size:0.875rem;padding:var(--e2) var(--e2)}.wc-block-product-template>li.wc-block-product .wp-block-post-title,.wc-block-product-template>li.wc-block-product .wc-block-components-product-price{text-align:left}.wc-block-product-template>li.wc-block-product .wp-block-button.align-center{justify-content:stretch;text-align:left}.wc-block-product-template>li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link{display:block;width:100%}li.wc-block-grid__product .wc-block-grid__product-onsale,li.wc-block-product .wc-block-components-product-sale-badge,.woocommerce ul.products li.product .onsale{position:absolute;top:0.9rem;left:0.9rem;right:auto;margin:0;min-height:0;min-width:0;line-height:1;padding:var(--e1) var(--e1);border-radius:6px;border:0;background:var(--wp--preset--color--acento);color:var(--wp--preset--color--blanco);font-family:var(--wp--preset--font-family--titulos);font-size:0.875rem;font-weight:700;z-index:2}.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--wp--preset--color--marca);color:var(--wp--preset--color--blanco);font-family:var(--wp--preset--font-family--titulos);font-weight:500;border-radius:999px;padding:var(--e2) var(--e3);transition:background .15s ease}.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--wp--preset--color--marca-oscura);color:var(--wp--preset--color--blanco)}.woocommerce a.button.added_to_cart{color:var(--wp--preset--color--marca);text-decoration:underline}.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--wp--preset--color--acento);border-radius:10px;background:var(--wp--preset--color--blanco)}.woocommerce-message::before,.woocommerce-info::before{color:var(--wp--preset--color--acento)}.wp-block-columns.rw-ficha,.alignwide.rw-detalle{max-width:1280px;margin-left:auto;margin-right:auto}.wp-block-columns.rw-ficha{gap:clamp(var(--e3),4vw,var(--e5))}.woocommerce div.product .product_title{font-family:var(--wp--preset--font-family--titulos);color:var(--wp--preset--color--marca)}.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--wp--preset--color--marca);font-family:var(--wp--preset--font-family--titulos);font-weight:600;font-size:1.5rem}.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--wp--preset--color--acento)}/* ---------- Elegir la variación ---------- WooCommerce arma esto como una :etiqueta en una celda,desplegable en la otra. Dos problemas,y el segundo sólo se ve en el celular. 1. El ancho de un