/* Portada: hero, rejilla de categorías y rejillas de productos. Las tarjetas de producto las estiliza shop.css; el banner promo, promo.css. */
/* Hero: círculos difuminados sobre el degradado */
.jirehli-home-hero{position:relative;isolation:isolate;overflow:hidden}
.jirehli-home-hero::before,.jirehli-home-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:var(--wp--preset--color--blush-strong);filter:blur(70px);opacity:.85}
.jirehli-home-hero::before{top:-9rem;right:28%;width:26rem;height:26rem}
.jirehli-home-hero::after{bottom:-10rem;left:-6rem;width:22rem;height:22rem}
.jirehli-home-hero__title .jirehli-accent{display:block}
/* Categorías: bloque jirehli/category-grid; functions.php carga esta hoja dondequiera que se use */
.jirehli-categories{display:grid;grid-template-columns:repeat(7,1fr);gap:1.5rem;padding:0;list-style:none;text-align:center}
.jirehli-home-categories:not(:has(.jirehli-categories)):not(.editor-styles-wrapper *){display:none}
.jirehli-categories__item a{display:block;color:inherit;text-decoration:none}
/* La miniatura trae alto en el atributo HTML: height:auto deja mandar a aspect-ratio */
.jirehli-categories__image{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin-bottom:.6rem;border-radius:var(--wp--custom--radius--md);transition:box-shadow .2s,transform .2s}
.jirehli-categories__item a:hover .jirehli-categories__image{transform:translateY(-2px);box-shadow:var(--wp--custom--shadow--card-hover)}
.jirehli-categories__item a:hover .jirehli-categories__name{color:var(--wp--preset--color--primary)}
.jirehli-categories__name{display:block;font-size:var(--wp--preset--font-size--sm);font-weight:600;text-wrap:balance}
/* Rejillas de productos: 6 → 3 → 2 columnas */
.jirehli-home-products .wp-block-woocommerce-product-collection{margin-bottom:0}
.jirehli-home-products .wp-block-woocommerce-product-collection .wc-block-product-template__responsive{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.25rem}
/* Responsive */
/* Rejillas: la etiqueta más larga del botón ("Seleccionar opciones", 133 px en xs) exige tarjetas ≥ 160 px (2 borde + 24 padding + 133 texto; 152 px en móvil con relleno .5rem; shop.css baja el botón a xs sin relleno lateral por @container); los cortes dejan ≥ 178 px: 6 columnas desde 1234 px de ventana, 3 desde 625 px, 2 por debajo */
@media (max-width:1233px){
.jirehli-home-products .wp-block-woocommerce-product-collection .wc-block-product-template__responsive{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
.jirehli-categories{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:781px){
.jirehli-categories{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:thin}
.jirehli-categories__item{flex:0 0 min(38%,11rem);scroll-snap-align:start}
}
@media (max-width:624px){
.jirehli-home-products .wp-block-woocommerce-product-collection .wc-block-product-template__responsive{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
}