/*
Theme Name: Óptica Ruglio
Theme URI: https://opticaruglio.uy
Author: Carlos Aiello — nextto.ai
Description: Block theme (FSE) para la tienda WooCommerce de Óptica Ruglio, basado en su design system (crema + rojo, Lato/Arvo/JetBrains Mono).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.22.23
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ruglio
Tags: block-theme, full-site-editing, e-commerce
*/

/* ---- Resaltado de títulos: Arvo bold rojo (regla DS) ---- */
.is-style-ruglio-highlight,
h1 mark, h2 mark, h3 mark {
	font-family:"Arvo",Georgia,serif; font-weight:700;
	color:var(--wp--preset--color--primary); background:transparent;
}

/* ---- Eyebrow: etiqueta mono en mayúsculas sobre los títulos ---- */
.ruglio-eyebrow{
	font-family:"JetBrains Mono",ui-monospace,monospace;
	font-size:12px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--wp--preset--color--primary-ink); font-weight:500; margin-bottom:.4rem;
}

/* ---- Botones tipo píldora (DS) ---- */
.wp-block-button__link{ border-radius:999px !important; font-weight:600; }
.wp-block-button.is-style-outline .wp-block-button__link{
	background:transparent; color:var(--wp--preset--color--primary);
	border:1px solid var(--wp--preset--color--outline);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
	background:#FDEAEB; border-color:var(--wp--preset--color--primary);
}

/* ---- Marca / logo ---- */
.ruglio-logo img{ display:block; height:auto; }

/* ---- Cards estilo DS: superficie + borde + radio 16 + hover ---- */
.ruglio-card{
	background:#fff; border:1px solid var(--wp--preset--color--outline);
	border-radius:16px; overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease;
}
.ruglio-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(42,43,42,.10); }
.ruglio-card-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* ---- Hero editorial (crema con tinte rojo) ---- */
.ruglio-hero{
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(223,41,53,.08), transparent 55%),
		var(--wp--preset--color--surface);
	border-radius:32px;
}

/* ---- Foto con R roja translúcida (motivo gestionphi) ---- */
.ruglio-photo-r{ position:relative; border-radius:24px; overflow:hidden; box-shadow:0 8px 20px rgba(42,43,42,.12); }
.ruglio-photo-r img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.ruglio-photo-r::after{
	content:""; position:absolute; bottom:-9%; right:-8%; width:52%; aspect-ratio:1;
	background:url(assets/brand/ruglio-rmark-red.svg) no-repeat center/contain;
	opacity:.5; pointer-events:none;
}

/* ---- Tile de mascota (patrón + drop shadow) ---- */
.ruglio-mascota-tile{
	position:relative; border-radius:16px; overflow:hidden;
	border:1px solid var(--wp--preset--color--outline);
	background:var(--wp--preset--color--cream);
	min-height:280px; display:grid; place-items:center; isolation:isolate;
}
.ruglio-mascota-tile::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background:url(assets/brand/ruglio-glasses-pattern-tint.svg) repeat; background-size:300px; opacity:.5;
}
.ruglio-mascota-tile img{ width:62%; max-width:230px; height:auto; filter:drop-shadow(0 14px 22px rgba(20,17,13,.32)); }

/* ---- Banda con patrón de lentes ---- */
.ruglio-pattern-band{ position:relative; isolation:isolate; }
.ruglio-pattern-band::before{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:url(assets/brand/ruglio-glasses-pattern-tint.svg) repeat; background-size:300px; opacity:.5;
}

/* ---- Barra de anuncios (Xi'an marquee, estático) ---- */
.ruglio-topbar{
	background:var(--wp--preset--color--graphite); color:var(--wp--preset--color--cream);
	font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.06em;
	text-align:center; padding:8px 12px;
}
.ruglio-topbar b{ color:#fff; font-weight:700; }

/* ============ HEADER estilo DS (storenav) ============ */
.wp-block-template-part:has(> .ruglio-header){ position:sticky; top:0; z-index:100; }
.ruglio-header{
	background:#fff;
	border-bottom:1px solid var(--wp--preset--color--outline);
	padding:14px 16px;
	transition:padding .28s ease, background .28s ease, border-color .28s ease;
}
body.rl-scrolled .ruglio-header{
	padding:10px 16px;
	background:transparent;
	border-bottom-color:transparent;
}

.ruglio-storenav{
	position:relative;
	display:flex; align-items:center; gap:20px;
	max-width:1200px; margin:0 auto;
	background:transparent; border:1px solid transparent;
	border-radius:16px; padding:10px 20px; box-shadow:none;
	transition:background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.rl-scrolled .ruglio-storenav{
	background:#fff; border-color:var(--wp--preset--color--outline);
	box-shadow:0 6px 20px rgba(42,43,42,.12);
}
.ruglio-storenav .logo a{ position:relative; display:inline-flex; align-items:center; line-height:0;
	height:38px; width:115px; transition:width .28s cubic-bezier(.4,0,.2,1); }
/* Los dos logos se cruzan con fundido (no hay corte por display:none) */
.ruglio-storenav .rl-word,
.ruglio-storenav .rl-mark{ position:absolute; left:0; top:50%; transform-origin:left center;
	pointer-events:none; transition:opacity .28s ease, transform .28s cubic-bezier(.4,0,.2,1); }
.ruglio-storenav .rl-word{ height:38px; width:auto; transform:translateY(-50%) scale(1); opacity:1; }
.ruglio-storenav .rl-mark{ height:34px; width:auto; display:block; transform:translateY(-50%) scale(.82); opacity:0; }
body.rl-scrolled .ruglio-storenav .logo a{ width:34px; }
body.rl-scrolled .ruglio-storenav .rl-word{ opacity:0; transform:translateY(-50%) scale(.9); }
body.rl-scrolled .ruglio-storenav .rl-mark{ opacity:1; transform:translateY(-50%) scale(1); }

.ruglio-nav{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; }
.ruglio-nav a{ font-size:14px; font-weight:600; white-space:nowrap;
	color:var(--wp--preset--color--muted); text-decoration:none; padding:6px 2px; }
.ruglio-nav a:hover, .ruglio-nav a.on{ color:var(--wp--preset--color--primary); }

.ruglio-actions{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.ruglio-actions a, .ruglio-actions .rl-search-btn{ color:var(--wp--preset--color--muted); display:inline-flex; }
.ruglio-actions a:hover, .ruglio-actions .rl-search-btn:hover{ color:var(--wp--preset--color--primary); }
.ruglio-actions svg{ width:22px; height:22px; fill:currentColor; }

/* Tira de confianza (mono, sobria) */
.ruglio-trust{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px;
	letter-spacing:.02em; color:var(--wp--preset--color--muted); }
.ruglio-trust b{ color:var(--wp--preset--color--graphite); font-weight:600; }

/* Patrón de lentes sobre el banner de oferta (tono sobre tono) */
.ruglio-offer{ position:relative; isolation:isolate; overflow:hidden; }
.ruglio-offer::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:url(assets/brand/ruglio-glasses-pattern-offer.svg) repeat; background-size:280px; opacity:.6; }

/* Hamburguesa (mobile) */
.rl-menu-toggle{ position:absolute; opacity:0; pointer-events:none; }
.rl-burger{ display:none; align-items:center; color:var(--wp--preset--color--graphite); cursor:pointer; }
.rl-burger svg{ width:26px; height:26px; fill:currentColor; }
.rl-burger .i-close{ display:none; }
.rl-menu-toggle:checked ~ .rl-burger .i-open{ display:none; }
.rl-menu-toggle:checked ~ .rl-burger .i-close{ display:inline; }

@media (max-width:860px){
	.ruglio-storenav{ flex-wrap:nowrap; }
	.rl-burger{ display:inline-flex; }
	.ruglio-actions a.rl-hide-mobile{ display:none; }
	.ruglio-nav{
		position:absolute; top:calc(100% + 10px); left:0; right:0;
		flex-direction:column; align-items:stretch; gap:2px;
		background:#fff; border:1px solid var(--wp--preset--color--outline);
		border-radius:14px; padding:10px 14px; box-shadow:0 10px 28px rgba(42,43,42,.16);
		display:none; z-index:120;
	}
	.ruglio-nav a{ font-size:16px; padding:10px 6px; border-bottom:1px solid var(--wp--preset--color--surface); }
	.ruglio-nav a:last-child{ border-bottom:none; }
	.rl-menu-toggle:checked ~ .ruglio-nav{ display:flex; }
}

/* Hero: un solo H1 con kicker (chico, mono) + título (grande) */
.ruglio-hero-h1{ margin:0; }
.ruglio-hero-h1 .hero-kicker{
	display:block; font-family:"JetBrains Mono",ui-monospace,monospace;
	font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
	color:var(--wp--preset--color--primary-ink); margin-bottom:14px; line-height:1.4;
}
.ruglio-hero-h1 .hero-title{ display:block; line-height:1; }

/* ============ Galería de píldoras (lifestyle) ============ */
.ruglio-gallery{ display:flex; gap:14px; justify-content:center; align-items:center; padding:24px 0 8px; flex-wrap:nowrap; }
.ruglio-gallery .pill{ flex:0 0 auto; width:118px; height:300px; border-radius:999px; overflow:hidden; box-shadow:0 12px 28px rgba(42,43,42,.18); }
.ruglio-gallery .pill.up{ transform:translateY(-26px); }
.ruglio-gallery .pill.dn{ transform:translateY(26px); }
.ruglio-gallery .pill img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){ .ruglio-gallery{ gap:10px; } .ruglio-gallery .pill{ width:92px; height:230px; } .ruglio-gallery .pill.up,.ruglio-gallery .pill.dn{ transform:none; } }
@media (max-width:480px){ .ruglio-gallery .pill{ width:96px; } .ruglio-gallery .pill:nth-child(n+4){ display:none; } }

/* ============ Grid "por estilo" ============ */
.ruglio-styles{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ruglio-styles .tile{ position:relative; display:block; aspect-ratio:4/5; border-radius:20px; overflow:hidden; box-shadow:0 8px 20px rgba(42,43,42,.10); }
.ruglio-styles .tile img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ruglio-styles .tile:hover img{ transform:scale(1.06); }
.ruglio-styles .tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(42,43,42,.62), transparent 55%); }
.ruglio-styles .tile span{ position:absolute; z-index:1; left:16px; bottom:14px; color:#fff; font-family:"Arvo",Georgia,serif; font-weight:700; font-size:18px; }
@media (max-width:640px){ .ruglio-styles{ grid-template-columns:repeat(2,1fr); } }

/* ============ Patrón de lentes en el fondo del hero ============ */
.ruglio-hero{ position:relative; isolation:isolate; overflow:hidden; }
.ruglio-hero::before{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:url(assets/brand/ruglio-glasses-pattern-hero.svg) repeat; background-size:300px; opacity:.4;
}

/* ============ Cards de producto (WooCommerce) estilo DS ============ */
.wc-block-product-template{ gap:22px; }
.wc-block-product{
	list-style:none; background:#fff;
	border:1px solid var(--wp--preset--color--outline); border-radius:16px;
	overflow:hidden; padding:0 0 16px;
	transition:transform .2s ease, box-shadow .2s ease;
}
.wc-block-product:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(42,43,42,.12); }
.wc-block-product .wc-block-components-product-image{ margin:0 0 12px; background:var(--wp--preset--color--surface); position:relative; }
.wc-block-product .wc-block-components-product-image img{ border-radius:0 !important; }
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title{ margin:0 !important; padding:0 16px; font-size:15px; font-weight:600; line-height:1.3; }
.wc-block-product .wp-block-post-title a,
.wc-block-product .wc-block-components-product-title a{ color:var(--wp--preset--color--graphite); text-decoration:none; }
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .price{ display:block; padding:6px 16px 0; font-family:var(--wp--preset--font-family--lato); font-weight:800; font-size:19px; color:var(--wp--preset--color--graphite); }
.wc-block-product .wp-block-woocommerce-product-price del,
.wc-block-product .price del{ font-weight:400; font-size:13px; color:var(--wp--preset--color--muted); margin-right:4px; }
.wc-block-product .wp-block-woocommerce-product-price ins,
.wc-block-product .price ins{ text-decoration:none; }
.wc-block-product .wp-block-woocommerce-product-button{ padding:12px 16px 0; margin:0; }
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-product .button{ width:100%; text-align:center; }

/* Badge de oferta como píldora (DS) */
.wc-block-components-product-sale-badge,
.woocommerce span.onsale{
	background:var(--wp--preset--color--primary) !important; color:#fff !important;
	border-radius:999px !important; border:none !important;
	font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; font-weight:700;
	min-height:0; min-width:0; padding:4px 11px; line-height:1.4;
}

/* Cards clásicas de WooCommerce (productos relacionados, etc.) */
.woocommerce ul.products li.product{
	background:#fff; border:1px solid var(--wp--preset--color--outline);
	border-radius:16px; overflow:hidden; padding:0 0 16px;
	transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(42,43,42,.12); }
.woocommerce ul.products li.product > a img{ margin:0 0 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ padding:0 16px; font-size:15px; font-weight:600; }
.woocommerce ul.products li.product .price{ padding:6px 16px 0; }
.woocommerce ul.products li.product .button{ margin:12px 16px 0; }

/* Ajuste fino de cards de producto: imagen 4/3 y texto alineado a la izquierda */
.wc-block-product .wc-block-components-product-image a{ display:block; }
.wc-block-product .wc-block-components-product-image img{ aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; }
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-woocommerce-product-price{ text-align:left !important; }
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button{ width:100%; }

/* Forzar el contenedor de imagen a 4/3 (WooCommerce lo fija en 1:1) */
.wc-block-product .wc-block-components-product-image{ aspect-ratio:auto !important; }
.wc-block-product .wc-block-components-product-image a{ display:block; aspect-ratio:4/3; overflow:hidden; }
.wc-block-product .wc-block-components-product-image a img{ width:100% !important; height:100% !important; object-fit:cover; aspect-ratio:auto; }

/* ============ Hero slider ============ */
.ruglio-hero-slider{ position:relative; overflow:hidden; border-radius:32px; margin-top:var(--wp--preset--spacing--40); background:var(--wp--preset--color--surface); }
.ruglio-hero-slider .rhs-track{ display:flex; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.ruglio-hero-slider .rhs-slide{ flex:0 0 100%; width:100%; max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; }

/* Slide SEO (editorial) */
.rhs-seo{ position:relative; isolation:isolate; display:flex; align-items:center;
	padding:var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background:radial-gradient(120% 120% at 100% 0%, rgba(223,41,53,.08), transparent 55%), var(--wp--preset--color--surface); }
.rhs-seo::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:url(assets/brand/ruglio-glasses-pattern-hero.svg) repeat; background-size:300px; opacity:.4; }
.rhs-seo .rhs-cols{ display:flex; gap:var(--wp--preset--spacing--50); align-items:center; width:100%; }
.rhs-seo .rhs-text{ flex:1 1 55%; min-width:0; }
.rhs-seo .rhs-media{ flex:0 1 42%; min-width:0; }
.rhs-sub{ font-size:17px; margin-top:1rem; max-width:46ch; }
.rhs-cta{ margin-top:1.6rem; display:flex; gap:12px; flex-wrap:wrap; }

/* Slides de foto (marketing) */
.rhs-photo{ position:relative; background-size:cover; background-position:center; display:flex; align-items:flex-end; min-height:480px; }
.rhs-photo.rhs-has-text::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,17,13,.62), transparent 55%); }
.rhs-fulllink{ position:absolute; inset:0; z-index:2; }
.rhs-photo .rhs-caption{ position:relative; z-index:1; padding:var(--wp--preset--spacing--50); color:#fff; max-width:620px; }
.rhs-photo .rhs-caption h2{ color:#fff; margin:0 0 .4rem; }
.rhs-photo .rhs-caption p{ font-size:17px; margin:0; }

/* Dots + flechas */
.rhs-dots{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:3; }
.rhs-dot{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid rgba(42,43,42,.25); padding:0; cursor:pointer; transition:width .2s, background .2s; }
.rhs-dot.active{ background:var(--wp--preset--color--primary); border-color:var(--wp--preset--color--primary); width:24px; }
.rhs-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border:none; border-radius:999px; background:rgba(255,255,255,.9); color:var(--wp--preset--color--graphite); cursor:pointer; display:grid; place-items:center; box-shadow:0 2px 8px rgba(42,43,42,.15); }
.rhs-arrow svg{ width:20px; height:20px; }
.rhs-prev{ left:12px; } .rhs-next{ right:12px; }
.ruglio-hero-slider.rhs-single .rhs-dots, .ruglio-hero-slider.rhs-single .rhs-arrow{ display:none; }

@media (max-width:820px){
	.ruglio-hero-slider{ border-radius:24px; }
	.rhs-seo{ padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
	.rhs-seo .rhs-cols{ flex-direction:column; align-items:stretch; }
	.rhs-seo .rhs-media{ width:100%; }
	.rhs-arrow{ display:none; }
}

/* ------- Filtro por marca (barra de logos en categorías) ------- */
.ruglio-brandbar{
	display:flex; align-items:center; gap:16px; flex-wrap:wrap;
	margin:0 0 28px; padding:16px 18px;
	background:var(--wp--preset--color--white);
	border:1px solid var(--wp--preset--color--outline);
	border-radius:20px;
}
.ruglio-brandbar .rb-label{
	font-family:var(--wp--preset--font-family--jetbrains-mono);
	font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--wp--preset--color--muted); flex:0 0 auto;
}
.ruglio-brandbar .rb-track{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-chip{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:82px; height:54px; padding:8px 16px;
	background:var(--wp--preset--color--white);
	border:1.5px solid var(--wp--preset--color--outline);
	border-radius:999px; box-sizing:border-box;
	transition:border-color .15s, box-shadow .15s, transform .15s;
}
.rb-chip img{
	max-height:32px; max-width:120px; width:auto; height:auto; display:block;
	filter:grayscale(1); opacity:.65; transition:filter .15s, opacity .15s;
}
.rb-chip:hover{ border-color:rgba(223,41,53,.5); transform:translateY(-1px); }
.rb-chip:hover img,
.rb-chip.is-active img{ filter:none; opacity:1; }
.rb-chip.is-active{ border-color:var(--wp--preset--color--primary); box-shadow:0 0 0 2px rgba(223,41,53,.15); }
.rb-chip .rb-name{ font-family:var(--wp--preset--font-family--lato); font-weight:700; font-size:.9rem; color:var(--wp--preset--color--graphite); }
.rb-chip.rb-all{ min-width:0; padding:8px 20px; font-family:var(--wp--preset--font-family--lato); font-weight:800; font-size:.9rem; color:var(--wp--preset--color--graphite); }
.rb-chip.rb-all.is-active{ background:var(--wp--preset--color--primary); color:#fff; border-color:var(--wp--preset--color--primary); box-shadow:none; }

@media (max-width:820px){
	.ruglio-brandbar{ padding:14px; border-radius:16px; gap:12px; }
	.ruglio-brandbar .rb-track{ gap:8px; }
	.rb-chip{ height:46px; min-width:66px; padding:6px 12px; }
	.rb-chip img{ max-height:26px; max-width:96px; }
}


/* ------- Márgenes laterales consistentes en la home ------- */
/* Gutter único: en desktop no se nota (el ancho ya está centrado),
   en mobile da el mismo respiro a TODAS las secciones. */
.home main.wp-block-group{
	padding-left:clamp(16px, 4vw, 24px);
	padding-right:clamp(16px, 4vw, 24px);
}
/* Grids en HTML crudo: que llenen el ancho wide de su sección */
.ruglio-styles,
.ruglio-gallery{ max-width:none; margin-left:auto; margin-right:auto; }
/* Bandas de color a nivel sección: sin el padding horizontal por defecto de
   WordPress para .has-background, así su contenido alinea igual que el resto
   (las tarjetas internas con fondo propio conservan su padding). */
.home main > .wp-block-group.has-background{ padding-left:0; padding-right:0; }

/* ------- Testimonios ------- */
.ruglio-testi{ padding-top:var(--wp--preset--spacing--70); padding-bottom:var(--wp--preset--spacing--70); }
.ruglio-testi .ruglio-eyebrow{ margin:0 0 .4rem; }
.ruglio-testi .rt-title{ margin:0 0 var(--wp--preset--spacing--50); }
.ruglio-testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ruglio-testi-card{
	margin:0; display:flex; flex-direction:column; gap:14px;
	background:var(--wp--preset--color--white);
	border:1px solid var(--wp--preset--color--outline);
	border-radius:20px; padding:26px 24px;
}
.rt-stars{ display:flex; gap:3px; color:var(--wp--preset--color--primary); }
.rt-stars svg{ width:18px; height:18px; }
.rt-quote{ margin:0; border:0; padding:0; font-size:1.02rem; line-height:1.55; color:var(--wp--preset--color--graphite); }
.rt-person{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.rt-avatar{ width:48px; height:48px; border-radius:999px; object-fit:cover; flex:0 0 48px; }
.rt-avatar-ph{ display:grid; place-items:center; background:var(--wp--preset--color--surface); color:var(--wp--preset--color--graphite); font-family:var(--wp--preset--font-family--arvo); font-weight:700; font-size:1.15rem; }
.rt-meta{ display:flex; flex-direction:column; line-height:1.25; }
.rt-name{ font-weight:800; color:var(--wp--preset--color--graphite); }
.rt-rol{ font-size:.85rem; color:var(--wp--preset--color--muted); }
@media (max-width:900px){
	.ruglio-testi-grid{ grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; }
}

/* ------- Slide Promo verano (hero) ------- */
.rhs-promo{ background:var(--wp--preset--color--accent); display:flex; align-items:center; justify-content:center; text-align:center; padding:32px var(--wp--preset--spacing--50); }
.rhs-promo-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:920px; }
.rhs-promo .ruglio-eyebrow{ margin:0; }
.rhs-promo-title{ margin:0; font-size:2rem; line-height:1.12; color:var(--wp--preset--color--graphite); }
.rhs-promo-sub{ margin:0; max-width:54ch; color:var(--wp--preset--color--graphite); }
.rhs-promo-gallery{ display:flex; gap:12px; justify-content:center; align-items:center; margin:8px 0 4px; }
.rhs-promo-gallery .pill{ width:92px; height:196px; border-radius:999px; overflow:hidden; display:block; flex:0 0 auto; box-shadow:0 8px 20px rgba(42,43,42,.15); }
.rhs-promo-gallery .pill img{ width:100%; height:100%; object-fit:cover; display:block; }
.rhs-promo-gallery .pill.up{ transform:translateY(-14px); }
.rhs-promo-gallery .pill.dn{ transform:translateY(14px); }
.rhs-promo .rhs-cta{ margin-top:6px; justify-content:center; }
@media (max-width:820px){
	.rhs-promo{ padding:24px var(--wp--preset--spacing--40); }
	.rhs-promo-title{ font-size:1.5rem; }
	.rhs-promo-gallery{ gap:8px; }
	.rhs-promo-gallery .pill{ width:56px; height:120px; }
	.rhs-promo-gallery .pill:nth-child(n+4){ display:none; }
}

/* ------- Testimonios: carrusel (más de 3) ------- */
.ruglio-testi.rt-carousel{ position:relative; }
.ruglio-testi .rt-viewport{ }
.ruglio-testi.rt-carousel .rt-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.ruglio-testi.rt-carousel .rt-viewport::-webkit-scrollbar{ display:none; }
.ruglio-testi.rt-carousel .ruglio-testi-grid{ display:flex; grid-template-columns:none; }
.ruglio-testi.rt-carousel .ruglio-testi-card{ flex:0 0 calc((100% - 40px) / 3); scroll-snap-align:start; }
.rt-nav{ display:flex; justify-content:center; gap:12px; margin-top:22px; }
.rt-arrow{ width:44px; height:44px; border-radius:999px; border:1.5px solid var(--wp--preset--color--outline); background:var(--wp--preset--color--white); color:var(--wp--preset--color--graphite); cursor:pointer; display:grid; place-items:center; transition:border-color .15s, transform .15s; }
.rt-arrow:hover{ border-color:var(--wp--preset--color--primary); transform:translateY(-1px); }
.rt-arrow svg{ width:20px; height:20px; }
@media (max-width:900px){
	.ruglio-testi.rt-carousel .ruglio-testi-card{ flex-basis:calc(100% - 8px); }
}

/* ============ Página de categoría / tienda — chrome estilo DS ============ */
/* Badge de oferta arriba a la IZQUIERDA (DS) */
.wp-block-woocommerce-product-sale-badge{ left:12px !important; right:auto !important; top:12px !important; margin:0 !important; }
.wc-block-components-product-sale-badge.ruglio-sale{ letter-spacing:.02em; }

/* Brandline sobre el nombre del producto (DS .pcard .brandline) */
.wc-block-product .ruglio-brandline{
	padding:0 16px; margin:0 0 -2px;
	font-family:var(--wp--preset--font-family--lato);
	font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color:var(--wp--preset--color--muted);
}

/* Barra de orden + conteo de resultados */
.wc-block-product-results-count,
.woocommerce-result-count{
	font-family:var(--wp--preset--font-family--jetbrains-mono);
	font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--wp--preset--color--muted); margin:0;
}
.wp-block-woocommerce-catalog-sorting select.orderby,
.woocommerce-ordering select.orderby{
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	background-color:var(--wp--preset--color--white);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%232A2B2A'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
	border:1.5px solid var(--wp--preset--color--outline); border-radius:999px;
	padding:9px 38px 9px 16px; font-family:var(--wp--preset--font-family--lato);
	font-size:.9rem; font-weight:600; color:var(--wp--preset--color--graphite);
	cursor:pointer; transition:border-color .15s;
}
.wp-block-woocommerce-catalog-sorting select.orderby:hover,
.woocommerce-ordering select.orderby:hover{ border-color:var(--wp--preset--color--primary); }
.wp-block-woocommerce-catalog-sorting select.orderby:focus,
.woocommerce-ordering select.orderby:focus{ outline:none; border-color:var(--wp--preset--color--primary); box-shadow:0 0 0 2px rgba(223,41,53,.15); }

/* Breadcrumb */
.wc-block-breadcrumbs,
.woocommerce-breadcrumb{
	font-size:.85rem; color:var(--wp--preset--color--muted); margin-bottom:8px;
}
.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a{ color:var(--wp--preset--color--muted); text-decoration:none; }
.wc-block-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover{ color:var(--wp--preset--color--primary-ink); }

/* ============ Card de producto: tamaño y estructura estilo DS ============ */
/* Grid compacto: cards ~230–270px, alineadas a la izquierda si hay pocas */
.tax-product_cat .wc-block-product-template,
.tax-product_brand .wc-block-product-template,
.post-type-archive-product .wc-block-product-template{
	display:grid !important;
	grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap:20px !important;
}
.wc-block-product{ padding:0 0 14px; }
/* Thumb 4/3 sobre superficie crema (el placeholder ya trae el ícono) */
.wc-block-product .wc-block-components-product-image{ background:var(--wp--preset--color--surface); margin:0 0 14px; }
.wc-block-product .wc-block-components-product-image a{ aspect-ratio:4/3; }
/* Cuerpo compacto: brandline · nombre · precio */
.wc-block-product .ruglio-brandline{ padding:0 16px; margin:0 0 1px; }
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title{ font-size:15px; font-weight:600; line-height:1.3; margin:0 !important; padding:0 16px; }
.wc-block-product .wp-block-woocommerce-product-price{ padding:5px 16px 0; font-size:18px; }
/* Botón: pill prolijo, no gigante */
.wc-block-product .wp-block-woocommerce-product-button{ padding:14px 16px 0; }
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link{
	width:100%; padding:10px 16px; font-size:.9rem; border-radius:999px;
}
/* Badge un toque más chico y prolijo */
.wc-block-components-product-sale-badge{ font-size:11px; padding:4px 10px; }
@media (max-width:600px){
	.tax-product_cat .wc-block-product-template,
	.tax-product_brand .wc-block-product-template,
	.post-type-archive-product .wc-block-product-template{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important; gap:14px !important; }
}

/* ============ Cards: botón alineado abajo + más vendidos 4 columnas ============ */
/* Card como columna flex → botón siempre abajo, alineado entre cards */
.wc-block-product{ display:flex; flex-direction:column; }
.wc-block-product .wp-block-woocommerce-product-button{ margin-top:auto; }

/* Home "Los más vendidos": 4 productos por fila a full width (sin hueco a la derecha) */
.home .wc-block-product-template{ display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:20px !important; }
.home .wc-block-product-template > .wc-block-product{ width:auto !important; max-width:none !important; min-width:0 !important; }
@media (max-width:900px){ .home .wc-block-product-template{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:560px){ .home .wc-block-product-template{ grid-template-columns:1fr !important; } }

/* ============ Botón flotante de WhatsApp ============ */
.ruglio-wa{
	position:fixed; right:20px; bottom:20px; z-index:1000;
	display:inline-flex; align-items:center; gap:9px; line-height:1;
	background:#25D366; color:#fff; text-decoration:none;
	padding:12px 18px; border-radius:999px; font-family:var(--wp--preset--font-family--lato);
	font-weight:800; box-shadow:0 8px 22px rgba(18,140,70,.35);
	transition:transform .15s, box-shadow .15s;
}
.ruglio-wa:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(18,140,70,.45); color:#fff; }
.ruglio-wa svg{ width:26px; height:26px; flex:0 0 26px; display:block; }
.ruglio-wa .wa-label{ font-size:.95rem; line-height:1; display:inline-block; }
@media (max-width:600px){ .ruglio-wa{ padding:14px; } .ruglio-wa .wa-label{ display:none; } }

/* ============ Sección de marcas (home) ============ */
.ruglio-brands-sec{ padding-top:var(--wp--preset--spacing--60); padding-bottom:var(--wp--preset--spacing--60); }
.ruglio-brands-sec .ruglio-eyebrow{ margin:0 0 .4rem; }
.ruglio-brands-sec .rt-title{ margin:0 0 var(--wp--preset--spacing--50); }
.ruglio-brands{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; max-width:none; }
.rbw-item{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:120px; height:78px; padding:14px 22px;
	background:var(--wp--preset--color--white); border:1px solid var(--wp--preset--color--outline);
	border-radius:16px; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.rbw-item:hover{ border-color:rgba(223,41,53,.5); transform:translateY(-2px); box-shadow:var(--e-2, 0 2px 8px rgba(42,43,42,.08)); }
.rbw-item img{ max-height:40px; max-width:150px; width:auto; height:auto; display:block; filter:grayscale(1); opacity:.7; transition:filter .15s, opacity .15s; }
.rbw-item:hover img{ filter:none; opacity:1; }
.rbw-name{ font-family:var(--wp--preset--font-family--lato); font-weight:800; font-size:1rem; color:var(--wp--preset--color--graphite); }

/* ============ Locales: lista + mapa Leaflet ============ */
.ruglio-locales{ display:grid; grid-template-columns:minmax(280px, 360px) 1fr; gap:24px; max-width:none; align-items:stretch; }
.rl-list{ display:flex; flex-direction:column; gap:12px; }
.rl-item{
	text-align:left; background:var(--wp--preset--color--white);
	border:1px solid var(--wp--preset--color--outline); border-radius:16px;
	padding:16px 18px; cursor:pointer; font-family:inherit; color:inherit;
	transition:border-color .15s, box-shadow .15s;
}
.rl-item:hover{ border-color:rgba(223,41,53,.5); }
.rl-item.is-active{ border-color:var(--wp--preset--color--primary); box-shadow:0 0 0 2px rgba(223,41,53,.15); }
.rl-item h3{ margin:0 0 4px; font-size:1.05rem; color:var(--wp--preset--color--graphite); }
.rl-item .rl-addr{ margin:0 0 4px; font-size:.9rem; color:var(--wp--preset--color--muted); }
.rl-item .rl-hours{ margin:0; font-size:.8rem; color:var(--wp--preset--color--muted); }
.rl-item .rl-wa{ display:inline-block; margin-top:8px; font-size:.85rem; font-weight:700; color:var(--wp--preset--color--primary-ink); text-decoration:none; }
.rl-item .rl-wa:hover{ text-decoration:underline; }
.rl-map{ min-height:480px; border-radius:20px; overflow:hidden; border:1px solid var(--wp--preset--color--outline); z-index:0; }
.rl-map .leaflet-container{ font-family:var(--wp--preset--font-family--lato); background:var(--wp--preset--color--surface); }
/* Pin rojo Ruglio */
.rl-pin span{ display:block; width:20px; height:20px; background:var(--wp--preset--color--primary); border:2px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 2px 6px rgba(42,43,42,.35); }
@media (max-width:820px){
	.ruglio-locales{ grid-template-columns:1fr; }
	.rl-map{ min-height:320px; }
}

/* ============ Footer ampliado ============ */
.ruglio-footer .ruglio-footer-cols{ gap:32px; }
.ruglio-footer .ruglio-logo{ margin:0 0 14px; }
.ruglio-footer .ruglio-foot-h{ margin:0 0 14px; color:#fff; font-weight:800; }
.ruglio-footer .ruglio-foot-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ruglio-footer .ruglio-foot-links a{ color:var(--wp--preset--color--cream); text-decoration:none; font-size:.92rem; opacity:.85; transition:opacity .15s, color .15s; }
.ruglio-footer .ruglio-foot-links a:hover{ opacity:1; color:#fff; }
.ruglio-footer .ruglio-foot-contact a{ color:var(--wp--preset--color--cream); text-decoration:none; }
.ruglio-footer .ruglio-foot-contact a:hover{ color:#fff; text-decoration:underline; }
.ruglio-footer .ruglio-social{ display:flex; gap:10px; margin-top:14px; }
.ruglio-footer .ruglio-social a{ font-size:.82rem; font-weight:700; color:var(--wp--preset--color--cream); text-decoration:none; border:1px solid rgba(241,238,227,.3); border-radius:999px; padding:6px 14px; transition:border-color .15s, background .15s; }
.ruglio-footer .ruglio-social a:hover{ border-color:var(--wp--preset--color--primary); background:rgba(223,41,53,.15); }
.ruglio-foot-bottom{ max-width:1200px; margin:28px auto 0; padding-top:20px; border-top:1px solid rgba(241,238,227,.15); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.8rem; opacity:.8; }
@media (max-width:820px){ .ruglio-footer .ruglio-footer-cols{ gap:24px; } .ruglio-foot-bottom{ flex-direction:column; text-align:center; } }

/* Mapa: tiles OSM atenuados hacia crema (estética Ruglio) */
.rl-map .leaflet-tile{ filter:grayscale(1) sepia(.28) brightness(1.04) contrast(.9); }
.rl-map .leaflet-container{ background:var(--wp--preset--color--surface); }

/* ============ Wishlist / favoritos ============ */
/* Corazón sobre la card */
.wp-block-woocommerce-product-image{ position:relative; }
.ruglio-like{
	position:absolute; top:10px; right:10px; z-index:3;
	width:38px; height:38px; display:grid; place-items:center;
	background:rgba(255,255,255,.92); border:1px solid var(--wp--preset--color--outline);
	border-radius:999px; cursor:pointer; padding:0; color:var(--wp--preset--color--graphite);
	transition:transform .15s, border-color .15s, color .15s, background .15s;
}
.ruglio-like:hover{ transform:scale(1.08); border-color:var(--wp--preset--color--primary); color:var(--wp--preset--color--primary); }
.ruglio-like svg{ width:20px; height:20px; fill:currentColor; }
.ruglio-like.is-active{ color:var(--wp--preset--color--primary); border-color:var(--wp--preset--color--primary); background:#fff; }

/* Badge del corazón en el header */
.ruglio-actions .rl-wish{ position:relative; }
.rl-wish-count{
	position:absolute; top:-6px; right:-8px; min-width:17px; height:17px; padding:0 4px;
	background:var(--wp--preset--color--primary); color:#fff; border-radius:999px;
	font-size:10px; font-weight:800; line-height:17px; text-align:center;
	font-family:var(--wp--preset--font-family--lato);
}

/* Página de favoritos */
.ruglio-wishlist-page{ margin-top:8px; }
.ruglio-wishlist-page .rw-empty{ color:var(--wp--preset--color--muted); font-size:1.05rem; line-height:1.6; padding:24px 0; }
.rw-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }
.rw-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--wp--preset--color--outline); border-radius:16px; overflow:hidden; }
.rw-thumb{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--wp--preset--color--surface); }
.rw-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rw-body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; }
.rw-title{ font-weight:600; color:var(--wp--preset--color--graphite); text-decoration:none; font-size:15px; }
.rw-title:hover{ color:var(--wp--preset--color--primary-ink); }
.rw-price{ font-family:var(--wp--preset--font-family--lato); font-weight:800; font-size:18px; color:var(--wp--preset--color--graphite); }
.rw-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.rw-view{ font-size:.85rem; font-weight:700; color:#fff; background:var(--wp--preset--color--primary); border-radius:999px; padding:8px 14px; text-decoration:none; }
.rw-view:hover{ background:var(--wp--preset--color--primary-ink); color:#fff; }
.rw-remove{ background:none; border:none; cursor:pointer; color:var(--wp--preset--color--muted); font-size:.85rem; font-family:inherit; text-decoration:underline; padding:0; }
.rw-remove:hover{ color:var(--wp--preset--color--primary); }

/* ============ Carrito vacío (estilo DS, sin carita) ============ */
.wp-block-woocommerce-empty-cart-block{ text-align:center; padding:48px 24px 24px; }
.wp-block-woocommerce-empty-cart-block::before{
	content:""; display:block; width:60px; height:60px; margin:0 auto 18px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23C3BAA0'%3E%3Cpath d='M104 216a16 16 0 1 1-16-16 16 16 0 0 1 16 16Zm88-16a16 16 0 1 0 16 16 16 16 0 0 0-16-16ZM239.71 74.14l-25.64 92.28A24.06 24.06 0 0 1 191 184H92.16A24.06 24.06 0 0 1 69 166.42L33.92 40H16a8 8 0 0 1 0-16h24a8 8 0 0 1 7.71 5.86L57.19 64H232a8 8 0 0 1 7.71 10.14ZM221.47 80H61.64l22.81 82.14a8 8 0 0 0 7.71 5.86H191a8 8 0 0 0 7.71-5.86Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-woocommerce-empty-cart-block .ruglio-ec-title{ font-weight:600 !important; color:var(--wp--preset--color--graphite); margin:0 0 8px !important; }
.wp-block-woocommerce-empty-cart-block .ruglio-ec-sub{ color:var(--wp--preset--color--muted); max-width:48ch; margin:0 auto 18px !important; }
/* por si el tema base intenta meter la imagen por defecto */
.wc-block-cart__empty-cart__image, .with-empty-cart-icon::before{ display:none !important; }

/* Hero SEO: dejar espacio a la izquierda para que la flecha no tape el texto (desktop) */
@media (min-width:821px){
	.rhs-seo{ padding-left:84px; padding-right:64px; }
}

/* ============ Buscador del header ============ */
.rl-search-btn{ background:none; border:none; padding:0; cursor:pointer; color:inherit; display:inline-flex; align-items:center; }
.rl-search-btn svg{ width:22px; height:22px; }
.rl-search-panel[hidden]{ display:none; }
.rl-search-panel{ position:absolute; inset:0; z-index:70; display:flex; align-items:center;
	background:var(--wp--preset--color--white); border:1px solid var(--wp--preset--color--outline);
	border-radius:16px; box-shadow:0 6px 20px rgba(42,43,42,.12); }
.rl-search-form{ display:flex; gap:8px; align-items:center; width:100%; padding:0 10px 0 22px; }
.rl-search-input{
	flex:1 1 auto; height:44px; padding:0 4px; border:none; background:transparent;
	font-family:var(--wp--preset--font-family--lato); font-size:1.05rem; color:var(--wp--preset--color--graphite);
}
.rl-search-input::placeholder{ color:var(--wp--preset--color--muted); }
.rl-search-input:focus{ outline:none; }
.rl-search-submit{
	flex:0 0 auto; height:40px; width:40px; border:none; border-radius:999px; cursor:pointer;
	background:var(--wp--preset--color--primary); color:#fff; display:grid; place-items:center; transition:background .15s;
}
.rl-search-submit:hover{ background:var(--wp--preset--color--primary-ink); }
.rl-search-submit svg{ width:20px; height:20px; }
.rl-search-close{ flex:0 0 auto; width:40px; height:40px; border:none; background:none; cursor:pointer; color:var(--wp--preset--color--muted); display:grid; place-items:center; }
.rl-search-close:hover{ color:var(--wp--preset--color--graphite); }
.rl-search-close svg{ width:22px; height:22px; }

/* Destacado en títulos (parte en rojo + Arvo, como el hero) */
mark.ruglio-hl{ color:var(--wp--preset--color--primary); background-color:transparent; font-family:var(--wp--preset--font-family--arvo); font-weight:700; }

/* ============ Reseñas de producto: campos estilo DS ============ */
.woocommerce #reviews #reply-title,
.woocommerce #reviews #comments h2{ color:var(--wp--preset--color--graphite); }
.woocommerce #review_form .comment-form label,
.woocommerce #review_form .comment-notes{ display:block; color:var(--wp--preset--color--graphite); font-weight:700; margin-bottom:6px; }
.woocommerce #review_form .comment-notes{ font-weight:400; color:var(--wp--preset--color--muted); }
.woocommerce #review_form input[type="text"],
.woocommerce #review_form input[type="email"],
.woocommerce #review_form input[type="url"],
.woocommerce #review_form textarea,
.woocommerce #reviews textarea#comment{
	width:100%; box-sizing:border-box;
	border:1.5px solid var(--wp--preset--color--outline); border-radius:12px;
	padding:12px 14px; background:var(--wp--preset--color--white);
	font-family:var(--wp--preset--font-family--lato); font-size:1rem; color:var(--wp--preset--color--graphite);
	transition:border-color .15s, box-shadow .15s;
}
.woocommerce #review_form input[type="text"]:focus,
.woocommerce #review_form input[type="email"]:focus,
.woocommerce #review_form textarea:focus,
.woocommerce #reviews textarea#comment:focus{
	outline:none; border-color:var(--wp--preset--color--primary); box-shadow:0 0 0 2px rgba(223,41,53,.15);
}
.woocommerce #review_form .comment-form-rating label{ margin-bottom:2px; }
/* Estrellas de valoración */
.woocommerce p.stars a{ color:var(--wp--preset--color--outline); }
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover ~ a::before{ color:var(--wp--preset--color--outline); }
.woocommerce p.stars:hover a::before,
.woocommerce p.stars a:hover::before,
.woocommerce p.stars.selected a::before{ color:var(--wp--preset--color--primary); }
.woocommerce .star-rating span::before,
.woocommerce .comment .star-rating::before{ color:var(--wp--preset--color--primary); }
/* Botón enviar reseña como pill rojo del DS */
.woocommerce #review_form #submit,
.woocommerce #reviews #respond input#submit{
	background:var(--wp--preset--color--primary); color:#fff; border:none; border-radius:999px;
	padding:12px 26px; font-family:var(--wp--preset--font-family--lato); font-weight:800; font-size:.95rem;
	cursor:pointer; transition:background .15s, transform .15s;
}
.woocommerce #review_form #submit:hover,
.woocommerce #reviews #respond input#submit:hover{ background:var(--wp--preset--color--primary-ink); transform:translateY(-1px); }

/* ============ Footer siempre abajo (sticky footer) ============ */
.wp-site-blocks{ display:flex; flex-direction:column; min-height:100vh; }
.wp-site-blocks > main{ flex:1 0 auto; }

/* ============ Estados vacíos (sin resultados / categoría vacía) ============ */
.wp-block-woocommerce-product-collection-no-results,
.wp-block-query-no-results{
	text-align:center; padding:56px 24px; color:var(--wp--preset--color--muted);
	max-width:600px; margin-left:auto; margin-right:auto;
}
.wp-block-woocommerce-product-collection-no-results::before,
.wp-block-query-no-results::before{
	content:""; display:block; width:64px; height:64px; margin:0 auto 20px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23C3BAA0' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32,96C72,150,184,150,224,96'/%3E%3Cline x1='58' y1='138' x2='46' y2='168'/%3E%3Cline x1='103' y1='151' x2='97' y2='183'/%3E%3Cline x1='153' y1='151' x2='159' y2='183'/%3E%3Cline x1='198' y1='138' x2='210' y2='168'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-woocommerce-product-collection-no-results strong,
.wp-block-query-no-results strong{ display:block; color:var(--wp--preset--color--graphite); font-size:1.25rem; font-weight:800; margin-bottom:6px; }

/* ============================================================
   Seguimiento de pedido (tracking): stepper + timeline
   ============================================================ */
.ruglio-track{ max-width:720px; margin:22px auto 0; }

/* --- Formulario --- */
.rt-form{
	background:#fff; border:1px solid var(--wp--preset--color--outline);
	border-radius:20px; padding:24px 24px 20px; box-shadow:0 8px 20px rgba(42,43,42,.06);
}
.rt-label{ display:block; font-weight:700; color:var(--wp--preset--color--primary-ink);
	font-size:1.05rem; margin-bottom:10px; }
.rt-inputrow{ display:flex; gap:10px; flex-wrap:wrap; }
.rt-input{
	flex:1 1 220px; min-width:0; background:var(--wp--preset--color--cream);
	border:1px solid var(--wp--preset--color--outline); border-radius:999px;
	padding:13px 20px; font-family:var(--wp--preset--font-family--lato); font-size:1rem;
	color:var(--wp--preset--color--graphite); transition:border-color .2s ease, box-shadow .2s ease;
}
.rt-input:focus{ outline:none; border-color:var(--wp--preset--color--primary);
	box-shadow:0 0 0 3px rgba(223,41,53,.14); background:#fff; }
.rt-btn{
	flex:0 0 auto; background:var(--wp--preset--color--primary); color:#fff; border:0;
	border-radius:999px; padding:13px 28px; font-weight:700; font-size:1rem; cursor:pointer;
	transition:filter .2s ease, transform .1s ease;
}
.rt-btn:hover{ filter:brightness(.94); }
.rt-btn:active{ transform:translateY(1px); }
.rt-hint{ margin:12px 0 0; font-size:.86rem; color:var(--wp--preset--color--muted); }

/* --- No encontrado --- */
.rt-empty{
	margin-top:22px; background:#fff; border:1px solid var(--wp--preset--color--outline);
	border-radius:20px; padding:34px 26px; text-align:center; color:var(--wp--preset--color--muted);
}
.rt-empty-ico{ display:inline-block; width:52px; height:52px; color:var(--wp--preset--color--outline);
	margin-bottom:10px; }
.rt-empty-ico svg{ width:100%; height:100%; }
.rt-empty-t{ color:var(--wp--preset--color--graphite); font-weight:700; margin:0 0 6px; font-size:1.05rem; }
.rt-empty p{ margin:0 auto; max-width:420px; }

/* --- Tarjeta de resultado --- */
.rt-card{
	margin-top:22px; background:#fff; border:1px solid var(--wp--preset--color--outline);
	border-radius:20px; padding:26px 28px 22px; box-shadow:0 10px 26px rgba(42,43,42,.08);
}
.rt-head{ display:flex; align-items:center; justify-content:space-between; gap:14px;
	flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--wp--preset--color--surface); }
.rt-eyebrow{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
	color:var(--wp--preset--color--muted); font-weight:700; }
.rt-num{ display:block; font-family:var(--wp--preset--font-family--arvo); font-weight:700;
	font-size:1.6rem; color:var(--wp--preset--color--graphite); line-height:1.1; }
.rt-status{ font-weight:700; font-size:.9rem; padding:8px 16px; border-radius:999px;
	background:#FDEAEB; color:var(--wp--preset--color--primary); border:1px solid rgba(223,41,53,.25); }
.rt-status--listo{ background:var(--wp--preset--color--primary); color:#fff; border-color:transparent; }

/* --- Stepper horizontal --- */
.rt-stepper{ position:relative; display:flex; margin:34px 0 6px; }
.rt-step{ position:relative; z-index:1; flex:1 1 0; display:flex; flex-direction:column;
	align-items:center; text-align:center; gap:10px; }
.rt-line{ position:absolute; top:28px; left:12.5%; right:12.5%; height:3px;
	background:var(--wp--preset--color--outline); border-radius:2px; z-index:0; }
.rt-line--fill{ right:auto; width:calc(75% * var(--rt-progress) / 100);
	background:var(--wp--preset--color--primary); transition:width .4s ease; }
.rt-ico{ width:56px; height:56px; display:grid; place-items:center; border-radius:999px;
	background:#fff; border:2px solid var(--wp--preset--color--outline);
	color:var(--wp--preset--color--muted); transition:all .25s ease; }
.rt-ico svg{ width:30px; height:30px; }
.rt-step-lbl{ font-size:.82rem; font-weight:600; color:var(--wp--preset--color--muted);
	max-width:11ch; line-height:1.2; }
.rt-step.is-done .rt-ico{ background:var(--wp--preset--color--primary);
	border-color:var(--wp--preset--color--primary); color:#fff; }
.rt-step.is-done .rt-step-lbl{ color:var(--wp--preset--color--graphite); }
.rt-step.is-current .rt-ico{ border-color:var(--wp--preset--color--primary);
	color:var(--wp--preset--color--primary); box-shadow:0 0 0 4px rgba(223,41,53,.14); }
.rt-step.is-current .rt-step-lbl{ color:var(--wp--preset--color--primary); font-weight:700; }

/* --- Timeline vertical --- */
.rt-timeline{ list-style:none; margin:30px 0 0; padding:0; }
.rt-tl{ position:relative; display:flex; gap:16px; padding:0 0 22px 4px; }
.rt-tl:last-child{ padding-bottom:0; }
.rt-dot{ position:relative; z-index:1; flex:0 0 auto; width:16px; height:16px; margin-top:3px;
	border-radius:999px; background:#fff; border:2px solid var(--wp--preset--color--outline); }
.rt-tl::before{ content:""; position:absolute; left:11px; top:20px; bottom:-2px; width:2px;
	background:var(--wp--preset--color--outline); }
.rt-tl:last-child::before{ display:none; }
.rt-tl.is-done .rt-dot{ background:var(--wp--preset--color--primary); border-color:var(--wp--preset--color--primary); }
.rt-tl.is-done::before{ background:var(--wp--preset--color--primary); }
.rt-tl.is-current .rt-dot{ background:var(--wp--preset--color--primary);
	border-color:var(--wp--preset--color--primary); box-shadow:0 0 0 4px rgba(223,41,53,.16); }
.rt-tl-body{ flex:1 1 auto; }
.rt-tl-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rt-tl-lbl{ font-weight:700; color:var(--wp--preset--color--muted); font-size:1rem; }
.rt-tl.is-done .rt-tl-lbl,
.rt-tl.is-current .rt-tl-lbl{ color:var(--wp--preset--color--graphite); }
.rt-tl-date{ font-family:var(--wp--preset--font-family--jetbrains-mono,"JetBrains Mono",monospace);
	font-size:.78rem; color:var(--wp--preset--color--muted); white-space:nowrap; }
.rt-tl-date--now{ color:var(--wp--preset--color--primary); font-weight:700; }
.rt-tl-desc{ margin:4px 0 0; font-size:.9rem; color:var(--wp--preset--color--muted); line-height:1.5; }
.rt-tl.is-todo .rt-tl-desc{ opacity:.75; }
.rt-foot{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--wp--preset--color--surface);
	font-size:.86rem; color:var(--wp--preset--color--muted); }

@media (max-width:640px){
	.rt-card{ padding:22px 18px 18px; }
	.rt-form{ padding:20px 18px 18px; }
	.rt-num{ font-size:1.35rem; }
	.rt-ico{ width:48px; height:48px; }
	.rt-ico svg{ width:26px; height:26px; }
	.rt-line, .rt-line--fill{ top:24px; }
	.rt-step-lbl{ font-size:.7rem; max-width:9ch; }
	/* La fecha va siempre debajo del título (evita que se peguen) */
	.rt-tl-top{ flex-direction:column; align-items:flex-start; gap:2px; }
	.rt-tl-date{ white-space:normal; }
}
@media (max-width:470px){
	/* Los nombres ya se ven en la línea de tiempo de abajo: el stepper queda solo con íconos */
	.rt-step-lbl{ display:none; }
	.rt-ico{ width:46px; height:46px; }
	.rt-ico svg{ width:24px; height:24px; }
	.rt-line, .rt-line--fill{ top:23px; }
}

/* ---- Gutter lateral en mobile para páginas de contenido (no la home) ---- */
@media (max-width:640px){
	.page:not(.home) main.wp-block-group{ padding-left:16px; padding-right:16px; }
}

/* ============================================================
   Probador de lentes online (Virtual Try-On)
   ============================================================ */
.ruglio-vto{ max-width:760px; margin:22px auto 0; }

/* Escenario (cámara + lentes) */
.rv-stage{
	position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
	background:var(--wp--preset--color--surface);
	border:1px solid var(--wp--preset--color--outline); border-radius:22px;
	box-shadow:0 10px 26px rgba(42,43,42,.08);
}
.rv-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Gate: pantalla previa antes de encender la cámara */
.rv-gate{
	position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center; gap:8px; padding:28px;
	background:var(--wp--preset--color--cream);
}
.ruglio-vto.is-live .rv-gate{ display:none; }
.rv-gate-ico{ width:56px; height:56px; color:var(--wp--preset--color--primary); margin-bottom:6px; }
.rv-gate-ico svg{ width:100%; height:100%; }
.rv-gate-t{ margin:0; font-family:var(--wp--preset--font-family--arvo); font-weight:700;
	font-size:1.2rem; color:var(--wp--preset--color--graphite); }
.rv-gate-d{ margin:0 auto; max-width:360px; font-size:.9rem; color:var(--wp--preset--color--muted); }
.rv-btn{
	margin-top:12px; background:var(--wp--preset--color--primary); color:#fff; border:0;
	border-radius:999px; padding:13px 30px; font-weight:700; font-size:1rem; cursor:pointer;
	transition:filter .2s ease, transform .1s ease;
}
.rv-btn:hover{ filter:brightness(.94); }
.rv-btn:active{ transform:translateY(1px); }

/* Botón detener (arriba a la derecha, solo en vivo) */
.rv-stop{
	position:absolute; top:12px; right:12px; z-index:4; display:none;
	width:38px; height:38px; align-items:center; justify-content:center;
	background:rgba(42,43,42,.55); color:#fff; border:0; border-radius:999px; cursor:pointer;
	backdrop-filter:blur(4px); transition:background .15s ease;
}
.rv-stop svg{ width:18px; height:18px; }
.rv-stop:hover{ background:rgba(42,43,42,.78); }
.ruglio-vto.is-live .rv-stop{ display:inline-flex; }

/* Chip de estado */
.rv-status{
	position:absolute; left:12px; bottom:12px; z-index:4; max-width:calc(100% - 24px);
	font-family:var(--wp--preset--font-family--jetbrains-mono,"JetBrains Mono",monospace);
	font-size:.78rem; color:#fff; background:rgba(42,43,42,.62); backdrop-filter:blur(4px);
	padding:7px 12px; border-radius:999px; opacity:0; visibility:hidden;
	transition:opacity .2s ease, visibility .2s ease;
}
.rv-status.is-show{ opacity:1; visibility:visible; }
.rv-status.is-err{ background:var(--wp--preset--color--primary); }

/* Ajuste fino (colapsable) */
/* Probador — selector de estilos */
.rv-styles{ display:flex; gap:8px; overflow-x:auto; padding:14px 2px 6px; margin:2px -2px 0; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.rv-styles::-webkit-scrollbar{ height:6px; }
.rv-styles::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:6px; }
.rv-style{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:8px 14px; border:1.5px solid rgba(30,30,30,.14); border-radius:12px; background:#fff; cursor:pointer; font:inherit; line-height:1.15; transition:border-color .15s, box-shadow .15s, transform .05s; }
.rv-style:hover{ border-color:rgba(223,41,53,.5); }
.rv-style:active{ transform:translateY(1px); }
.rv-style.is-on{ border-color:var(--wp--preset--color--primary,#DF2935); box-shadow:0 0 0 1px var(--wp--preset--color--primary,#DF2935) inset; }
.rv-style-tipo{ font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--wp--preset--color--primary,#DF2935); font-weight:700; }
.rv-style-name{ font-size:.9rem; color:#26241f; font-weight:600; white-space:nowrap; }

.rv-tune{
	margin-top:14px; background:#fff; border:1px solid var(--wp--preset--color--outline);
	border-radius:16px; padding:4px 18px;
}
.rv-tune summary{
	cursor:pointer; list-style:none; padding:12px 0; font-weight:700; font-size:.92rem;
	color:var(--wp--preset--color--graphite); display:flex; align-items:center; gap:8px;
}
.rv-tune summary::-webkit-details-marker{ display:none; }
.rv-tune summary::before{ content:"+"; color:var(--wp--preset--color--primary); font-weight:700; font-size:1.1rem; }
.rv-tune[open] summary::before{ content:"–"; }
.rv-tune-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; padding:6px 0 14px; }
.rv-slider{ display:flex; flex-direction:column; gap:6px; font-size:.82rem;
	color:var(--wp--preset--color--muted); font-weight:600; }
.rv-slider b{ color:var(--wp--preset--color--graphite);
	font-family:var(--wp--preset--font-family--jetbrains-mono,monospace); font-weight:500; }
.rv-slider input[type=range]{ width:100%; accent-color:var(--wp--preset--color--primary); }
.rv-tune-actions{ padding:0 0 14px; }
.rv-reset{
	background:transparent; color:var(--wp--preset--color--primary);
	border:1px solid var(--wp--preset--color--outline); border-radius:999px;
	padding:8px 18px; font-weight:600; font-size:.88rem; cursor:pointer; transition:background .15s, border-color .15s;
}
.rv-reset:hover{ background:#FDEAEB; border-color:var(--wp--preset--color--primary); }

.rv-tip{ margin:14px 2px 0; font-size:.84rem; color:var(--wp--preset--color--muted); }

@media (max-width:560px){
	.rv-stage{ aspect-ratio:3/4; }
	.rv-tune-grid{ grid-template-columns:1fr; }
	.rv-gate-t{ font-size:1.08rem; }
}

/* Enlace destacado del probador en la nav */
.ruglio-nav a.rl-nav-try{
	color:var(--wp--preset--color--primary); border:1px solid var(--wp--preset--color--outline);
	border-radius:999px; padding:6px 14px; transition:background .15s, border-color .15s;
}
.ruglio-nav a.rl-nav-try:hover{ background:#FDEAEB; border-color:var(--wp--preset--color--primary); }

/* --- Probador: tomar foto (obturador + preview + compartir) --- */
.rv-shot{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:4;
	width:62px; height:62px; border-radius:999px; border:0; cursor:pointer; display:none;
	background:rgba(255,255,255,.9); box-shadow:0 4px 16px rgba(42,43,42,.25);
	align-items:center; justify-content:center; transition:transform .1s ease, background .15s ease; }
.rv-shot-dot{ width:46px; height:46px; border-radius:999px; background:#fff;
	border:3px solid var(--wp--preset--color--primary); display:block; }
.rv-shot:hover{ background:#fff; }
.rv-shot:active{ transform:translateX(-50%) scale(.94); }
.ruglio-vto.is-live:not(.is-photo) .rv-shot{ display:inline-flex; }
.ruglio-vto.is-photo .rv-stop{ display:none; }

.rv-photo{ position:absolute; inset:0; z-index:6; background:var(--wp--preset--color--graphite);
	display:none; flex-direction:column; }
.ruglio-vto.is-photo .rv-photo{ display:flex; }
.rv-photo-img{ flex:1 1 auto; width:100%; height:100%; object-fit:contain; background:#000; min-height:0; }
.rv-photo-actions{ flex:0 0 auto; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
	padding:12px; background:var(--wp--preset--color--graphite); }
.rv-photo-actions .rv-dl,
.rv-photo-actions .rv-share{ background:var(--wp--preset--color--primary); color:#fff; border:0;
	border-radius:999px; padding:11px 22px; font-weight:700; font-size:.95rem; cursor:pointer;
	text-decoration:none; display:inline-flex; align-items:center; }
.rv-photo-actions .rv-dl:hover,
.rv-photo-actions .rv-share:hover{ filter:brightness(.94); }
.rv-photo-actions .rv-retake{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
	border-radius:999px; padding:11px 20px; font-weight:600; font-size:.95rem; cursor:pointer; }
.rv-photo-actions .rv-retake:hover{ background:rgba(255,255,255,.1); }

/* Probador: control de reflejo */
.rv-refl{ padding:6px 0 4px; border-top:1px solid var(--wp--preset--color--surface); margin-top:4px; }
.rv-check{ display:flex; align-items:center; gap:9px; font-size:.86rem; font-weight:600;
	color:var(--wp--preset--color--graphite); cursor:pointer; padding:8px 0; }
.rv-check input{ width:17px; height:17px; accent-color:var(--wp--preset--color--primary); }