/*
Theme Name: Ragaglia
Theme URI: https://ragaglia.com.ar/
Author: Olpa Group — Santiago Villalba
Author URI: https://olpagroup.com/
Description: Ecommerce theme for Ragaglia — Ferretería y Bulonería Industrial (Córdoba). Classic PHP theme with WooCommerce support. Ported faithfully from the design mockups; tokens (colors, fonts) configurable via Customizer.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ragaglia
Tags: e-commerce, woocommerce, two-columns, custom-colors, custom-menu, featured-images, threaded-comments
*/

:root {
  --primary: #001730;
  --primary-dark: #000c1c;
  --primary-light: #2a4e7a;
  --primary-soft: #eef2f8;
  --accent: #ffdb0e;
  --accent-dark: #d4b60a;
  --ink: #001730;
  --ink-2: #2a4060;
  --muted: #5c6b80;
  --bg: #fff;
  --bg-soft: #f5f7fa;
  --bg-gray: #eef1f6;
  --line: #d8dfe8;
  --success: #16a34a;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Montserrat', 'Inter', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 400
}

img { display: block; max-width: 100% }
a { text-decoration: none; color: inherit }
button { font-family: inherit; cursor: pointer; border: 0; background: none }

/* Accesibilidad: oculta visualmente pero mantiene legible para lectores de pantalla */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

.container { max-width: 1440px; margin: 0 auto; padding: 0 24px }

/* ================= TOPBAR ================= */
.topbar { background: #001730; color: #c5cfdc; font-size: 12.5px; padding: 8px 0 }
.topbar .row { display: flex; justify-content: space-between; align-items: center; gap: 20px }
.topbar .left { display: flex; gap: 20px; align-items: center }
.topbar .left b { color: #fff }
.topbar .right { display: flex; gap: 20px; align-items: center }
.topbar a:hover { color: #fff }
.topbar .sep { opacity: .3 }

/* ================= HEADER STICKY ================= */
/* Wrapper que mantiene el site-header + nav fijos al scrollear.
   La .topbar (arriba del wrapper) queda libre y se va con el scroll. */
.header-sticky { position: sticky; top: 0; z-index: 30; background: #fff; box-shadow: 0 2px 0 transparent; transition: box-shadow .2s }
.header-sticky.is-stuck { box-shadow: 0 6px 16px rgba(0, 23, 48, .08) }

/* ================= HEADER ================= */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 30 }
.head { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 10px 0; justify-content: space-between }
.head form.search { flex: 1 1 0; min-width: 0; max-width: 900px }
.logo { display: flex; align-items: center; gap: 4px }
.logo img { height: 46px; width: auto; display: block }
.foot-brand .logo img { height: 58px }

form.search { display: flex; align-items: stretch; background: var(--bg-soft); border: 2px solid var(--line); border-radius: 12px; overflow: hidden; transition: border .2s }
form.search:focus-within { border-color: var(--primary) }
form.search .cat { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap }
form.search input { flex: 1; border: 0; background: transparent; padding: 14px 16px; font-size: 14.5px; outline: none }
form.search input::placeholder { color: var(--muted) }
form.search .btn-search { background: var(--primary); color: #fff; padding: 0 22px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px }
form.search .btn-search:hover { background: var(--primary-dark) }

.head-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end }
.ha { padding: 8px 10px; border-radius: 10px; display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); cursor: pointer; position: relative; border: 0; background: transparent }
.ha:hover { background: var(--bg-soft) }
.ha-icon { width: 44px; height: 44px; padding: 0; justify-content: center; color: var(--ink-2) }
.ha-icon:hover { background: var(--bg-soft); color: var(--ink) }
.ha-icon .count {
	position: absolute; top: 4px; right: 4px;
	background: var(--primary); color: #fff;
	font-size: 10px; font-weight: 800;
	border-radius: 100px; padding: 1px 6px; min-width: 18px;
	text-align: center; line-height: 1.4;
	box-shadow: 0 0 0 2px #fff; /* recorte sobre el icono */
}
.ha-icon.cart { color: var(--ink) }
.ha-icon.cart:hover { color: var(--primary) }
.ha-icon.cart .count { background: var(--accent); color: var(--ink) }

/* ================= NAV ================= */
.nav { background: #fff; border-bottom: 1px solid var(--line); position: relative }
.nav-row { display: flex; align-items: center; gap: 0 }
.nav-all-wrap { position: static; margin-right: 8px }
.nav-all { display: flex; align-items: center; gap: 10px; background: var(--primary); color: #fff; padding: 13px 22px; font-size: 14px; font-weight: 700; border-radius: 0; cursor: pointer }
.nav-all .ic-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px }
.nav-all .ic-menu span { width: 4px; height: 4px; background: #fff; border-radius: 1px }
.nav ul { display: flex; gap: 2px; list-style: none; flex: 1 }
.nav ul li { position: relative }
/* Color del item: si el editor seteó --rg-item-color en el <li>, lo
   usamos. Si no, cae al --ink-2 default del tema. */
.nav ul li a { display: flex; align-items: center; gap: 6px; padding: 13px 16px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--rg-item-color, var(--ink-2)) }
.nav ul li a:hover { color: var(--rg-item-color, var(--primary)); filter: brightness(.85) }
.nav ul li.hot a { background: var(--primary); color: var(--accent); padding: 8px 18px; margin: 5px 4px; border-radius: 8px; font-weight: 800; letter-spacing: .3px; transition: background .15s }
.nav ul li.hot a:hover { background: var(--primary-dark); color: var(--accent) }
/* `husq` legacy: si no hay color custom seteado en el editor, usa el
   naranja histórico. Con color custom (var --rg-item-color), gana ese. */
.nav ul li.husq a { color: var(--rg-item-color, #ff7a00); font-weight: 800 }
.nav ul li.husq a:hover { color: var(--rg-item-color, #e56d00); filter: brightness(.85) }
.nav ul li .chev { font-size: 10px; opacity: .5 }
.nav-right { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted) }
.nav-right strong { color: var(--ink); font-weight: 700 }

/* Mega menu */
.megamenu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0, 23, 48, .12); z-index: 20; padding: 28px 0 }
.nav-all-wrap:hover .megamenu, .megamenu:hover { display: block }
.nav ul li.has-mega { position: static }
.nav ul li.has-mega:hover .megamenu, .nav ul li.has-mega .megamenu:hover { display: block }

/* ── Nav CTA buttons (nav_cta menu location) ── */
.nav-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; text-decoration: none; line-height: 1 }
.nav-cta-btn svg { flex-shrink: 0 }
.nav-cta-btn .arr { margin-left: 2px; transition: transform .15s }
.nav-cta-btn:hover .arr { transform: translateX(3px) }

/* style-accent (default) — fondo amarillo */
.nav-cta-btn.style-accent { background: var(--accent); color: var(--ink); border: 1px solid var(--accent-dark) }
.nav-cta-btn.style-accent:hover { background: var(--accent-dark) }

/* style-primary — fondo azul oscuro */
.nav-cta-btn.style-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary-dark) }
.nav-cta-btn.style-primary:hover { background: var(--primary-dark) }

/* style-outline — borde oscuro, fondo transparente */
.nav-cta-btn.style-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary) }
.nav-cta-btn.style-outline:hover { background: var(--primary); color: #fff }

/* style-ghost — solo texto + flecha, sin fondo */
.nav-cta-btn.style-ghost { background: transparent; color: var(--primary); border: none; padding-left: 4px; padding-right: 4px; font-weight: 600 }
.nav-cta-btn.style-ghost:hover { color: var(--primary-dark) }

/* ── Clases de menú personalizables desde Apariencia → Menús ── */
/* Agregar la clase al ítem desde Opciones de pantalla → Clases CSS */

/* .highlight — enlace con fondo accent (ej. "Ofertas") */
.nav ul li.highlight > a { background: var(--accent); color: var(--ink) !important; padding: 5px 12px; border-radius: 6px; font-weight: 800; font-size: 12.5px; letter-spacing: .2px }
.nav ul li.highlight > a:hover { background: var(--accent-dark) }

/* .is-brand — texto en accent sin fondo (ej. marca Husqvarna) */
.nav ul li.is-brand > a { color: var(--accent) !important; font-weight: 800 }
.nav ul li.is-brand > a:hover { color: var(--accent-dark) !important }

/* .is-new — badge "NUEVO" junto al texto */
.nav ul li.is-new > a::after { content: "NUEVO"; font-size: 9px; font-weight: 800; background: var(--primary); color: #fff; padding: 2px 5px; border-radius: 4px; margin-left: 6px; letter-spacing: .4px; vertical-align: middle }

/* .is-cta — botón outline en el menú */
.nav ul li.is-cta > a { border: 1.5px solid var(--primary); border-radius: 6px; padding: 4px 12px; font-weight: 700; color: var(--primary) !important }
.nav ul li.is-cta > a:hover { background: var(--primary); color: #fff !important }

.mm-grid { display: grid; grid-template-columns: 240px 1fr; gap: 30px }
.mm-side { display: flex; flex-direction: column; gap: 2px; background: var(--bg-soft); border-radius: 12px; padding: 10px 8px; align-self: start }
.mm-side h5 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; padding: 10px 12px 8px }
.mm-side a { padding: 10px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); position: relative; cursor: pointer }
.mm-side a:hover, .mm-side a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600 }
.mm-side a .ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.mm-side .mm-side-arrow { margin-left: auto; opacity: 0; transition: opacity .15s, transform .15s; flex-shrink: 0 }
.mm-side a:hover .mm-side-arrow, .mm-side a.active .mm-side-arrow { opacity: 1; transform: translateX(2px) }

/* Center: panels apilados, solo el .active visible */
.mm-center { position: relative; min-height: 240px }
.mm-panel { display: none; animation: mm-fade .18s ease }
.mm-panel.active { display: block }
@keyframes mm-fade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.mm-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); gap: 12px; flex-wrap: wrap }
.mm-panel-head h6 { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.2px }
.mm-panel-all { font-size: 12px; font-weight: 700; color: var(--primary); white-space: nowrap }
.mm-panel-all:hover { text-decoration: underline }
/* Lista de sub-cats en columnas auto-fluidas */
.mm-panel-list { list-style: none; padding: 0; margin: 0; column-count: 3; column-gap: 24px }
.mm-panel-list li { break-inside: avoid; margin-bottom: 8px }
.mm-panel-list li a { font-size: 13px; color: var(--ink-2); display: block; padding: 4px 0 }
.mm-panel-list li a:hover { color: var(--primary) }

/* Grupos jerárquicos (3 niveles): cada L2 es un grupo con header +
   lista de L3 debajo. Grilla auto-fit con minmax bajo para apretar
   más columnas en el ancho liberado por el banner removido. */
/* Selectores prefijados con `.megamenu` para ganarle a `.nav ul li a`
   (specificidad 0,1,3) que se aplica a todo `<a>` descendiente del nav. */
.megamenu .mm-panel-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 24px; row-gap: 16px }
.megamenu .mm-group { break-inside: avoid }
.megamenu .mm-group__head { display: block; font-size: 14px; font-weight: 900; color: var(--ink); letter-spacing: -.1px; padding: 0 0 4px; margin-bottom: 4px; border-bottom: 1px solid var(--line); transition: color .15s, border-color .15s }
.megamenu .mm-group__head:hover { color: var(--primary); border-bottom-color: var(--primary) }
.megamenu .mm-group__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0 }
.megamenu .mm-group__list li a { display: flex; align-items: center; gap: 6px; padding: 5px 5px; font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.25 }
.megamenu .mm-group__list li a:hover { color: var(--primary) }
.mm-panel-empty { font-size: 13px; color: var(--muted); padding: 20px 0; font-style: italic }
.mm-promo { border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--ink); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; position: relative }
.mm-promo .chip { display: inline-flex; align-self: flex-start; background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .3px; margin-bottom: 12px }
.mm-promo h3 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; margin-bottom: 6px }
.mm-promo p { font-size: 13px; opacity: .9; line-height: 1.5 }
.mm-promo .btn-go { margin-top: 18px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px }

/* Promo modo imagen (cuando el item tiene su propia imagen subida) */
.mm-promo--image { padding: 0; min-height: 0; background: transparent; overflow: hidden; display: block }
.mm-promo--image img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; transition: transform .3s }
.mm-promo--image:hover img { transform: scale(1.03) }

/* Dropdown sub-menu regular (items NO mega con children) */
.nav ul li.has-sub { position: relative }
.nav ul li .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px rgba(0, 23, 48, .12); padding: 8px; z-index: 25; list-style: none; margin: 0 }
.nav ul li.has-sub:hover > .sub-menu, .nav ul li .sub-menu:hover { display: block }
.nav ul li .sub-menu li { width: 100%; position: relative }
.nav ul li .sub-menu li a { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); border-radius: 8px; display: flex; align-items: center; gap: 8px }
.nav ul li .sub-menu li a:hover { background: var(--bg-soft); color: var(--ink) }
/* Sub-sub-menus (depth 2+) — dropdown cascada hacia la derecha */
.nav ul li .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 4px }

/* ================= HERO ================= */
.hero { padding: 22px 0 }
.hero-grid { display: grid; grid-template-columns: 1fr 320px; gap: 14px }
.hero-slider { position: relative; background: var(--bg-soft); border-radius: 18px; overflow: hidden; min-height: 400px }
.hero-slides { position: relative; width: 100%; height: 400px }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none }
.hero-slide.active { opacity: 1; pointer-events: auto }
.hero-slide a { display: block; width: 100%; height: 100% }
.hero-slide picture { display: block; width: 100%; height: 100% }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block }
.hero-dots { position: absolute; bottom: 22px; left: 56px; display: flex; gap: 8px; z-index: 3 }
.hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); cursor: pointer }
.hero-dots span.active { background: var(--accent); width: 28px; border-radius: 4px }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 3; border: 1px solid rgba(255, 255, 255, .2) }
.hero-arrow.prev { left: 20px }
.hero-arrow.next { right: 20px }

.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px }
.hero-sb { border-radius: 16px; overflow: hidden; padding: 24px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; position: relative; min-height: 190px; background-size: cover; background-position: center; background-color: #001730 }
.hero-sb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 23, 48, .25) 0%, rgba(0, 23, 48, .8) 100%); z-index: 1 }
.hero-sb > * { position: relative; z-index: 2 }
.hero-sb .tag { display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: var(--accent); color: var(--ink) }
.hero-sb h3 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; margin-top: 10px }
.hero-sb h3 em { font-style: normal; color: var(--accent) }
.hero-sb .btn { align-self: flex-start; background: var(--accent); color: var(--ink); padding: 9px 18px; border-radius: 100px; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; transition: background .2s }
.hero-sb .btn:hover { background: var(--accent-dark) }

/* ================= BENEFITS ================= */
.benefits { background: var(--bg-soft); padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.benefits .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px }
.benefit { display: flex; gap: 12px; align-items: center; padding: 6px 10px; border-right: 1px solid var(--line) }
.benefit:last-child { border-right: none }
.benefit .ic { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--line) }
.benefit b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2 }
.benefit span { font-size: 11.5px; color: var(--muted) }

/* ================= SECTION COMMON ================= */
.section { padding: 40px 0 }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 20px }
.sec-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); line-height: 1.15 }
.sec-head h2 em { font-style: normal; color: var(--primary) }
.sec-head .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; font-weight: 500 }
.sec-head .actions { display: flex; gap: 10px; align-items: center }
.sec-head .all { font-size: 13px; color: var(--primary); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.sec-head .arrs { display: flex; gap: 6px }
.sec-head .arrs button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: all .2s }
.sec-head .arrs button:hover { background: var(--primary); color: #fff; border-color: var(--primary) }

/* ================= CATEGORIES GRID ================= */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.cats .cat { background-color: #001730; background-size: cover; background-position: center; border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; text-align: center; transition: all .25s; position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #fff }
.cats .cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 23, 48, .25) 0%, rgba(0, 23, 48, .45) 45%, rgba(0, 23, 48, .90) 100%); z-index: 1; pointer-events: none }
.cats .cat > * { position: relative; z-index: 2 }
.cats .cat:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(0, 23, 48, .35) }
.cats .cat:hover::after { background: linear-gradient(180deg, rgba(0, 23, 48, .15) 0%, rgba(0, 23, 48, .35) 45%, rgba(0, 23, 48, .85) 100%) }
.cats .cat b { display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); letter-spacing: .2px }
.cats .cat span { font-size: 12px; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .3) }
.cats .cat.hot::before { content: "HOT"; position: absolute; top: 10px; right: 10px; background: var(--accent); color: var(--ink); font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 4px; letter-spacing: .5px; z-index: 3 }

/* ================= DUAL PROMO BANNER ================= */
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.dual .panel { border-radius: 16px; overflow: hidden; padding: 32px; color: #fff; position: relative; min-height: 240px; display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; background-color: #001730 }
.dual .panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 23, 48, .9) 0%, rgba(0, 23, 48, .55) 60%, rgba(0, 23, 48, .25) 100%); z-index: 1 }
.dual .panel > * { position: relative; z-index: 2; max-width: 70% }
.dual .panel .tag { display: inline-flex; align-self: flex-start; background: var(--accent); color: var(--ink); padding: 5px 12px; border-radius: 100px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px }
.dual .panel h3 { font-size: 28px; font-weight: 900; line-height: 1.08; letter-spacing: -.5px; margin-bottom: 10px }
.dual .panel h3 em { font-style: normal; color: var(--accent) }
.dual .panel p { font-size: 13.5px; opacity: .9; margin-bottom: 16px; line-height: 1.5 }
.dual .panel .cta { align-self: flex-start; background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 100px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 8px }
.dual .panel.b .cta { background: var(--accent); color: var(--ink) }

.timer { display: flex; gap: 6px; margin-bottom: 14px }
.timer .u { background: rgba(255, 255, 255, .15); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 46px }
.timer .u b { display: block; font-size: 17px; font-weight: 900; color: #fff; line-height: 1 }
.timer .u span { font-size: 9px; color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: .8px }

/* ================= PRODUCT CAROUSEL ================= */
.prods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px }
.prods-carousel { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; scroll-padding-left: 0 }
.prods-carousel::-webkit-scrollbar { display: none }
.prods-carousel > .prod { flex: 0 0 calc((100% - 14px * 4) / 5); scroll-snap-align: start; min-width: 0 }
.prod { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: all .2s; position: relative; display: flex; flex-direction: column }
.prod:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0, 23, 48, .10); border-color: transparent }
.prod .img { height: 200px; background: #fff; position: relative; overflow: hidden; padding-top: 14px; box-sizing: border-box }
.prod .img > a { display: block; width: 100%; height: 100% }
.prod .img img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff }

/* Galería en hover: las imágenes se apilan absolutas dentro del <a>;
   solo la `.is-active` se muestra. JS calcula el índice según la
   posición horizontal del mouse sobre la card y togglea is-active. */
.prod-gallery { position: relative; display: block; width: 100%; height: 100% }
.prod-gallery .prod-gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .12s ease-out; padding-top: 14px; box-sizing: border-box }
.prod-gallery .prod-gallery__img.is-active { opacity: 1 }
.prod-gallery__dots { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 4px; z-index: 2; opacity: 0; transition: opacity .15s; pointer-events: none }
.prod:hover .prod-gallery__dots { opacity: 1 }
.prod-gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 23, 48, .25); transition: background .15s }
.prod-gallery__dot.is-active { background: var(--ink) }
.prod .badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2 }
.prod .badge { background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 5px; letter-spacing: .3px; display: inline-flex; align-items: center; gap: 4px }
.prod .badge.yellow { background: var(--accent); color: var(--ink) }
.prod .badge.dark { background: var(--ink) }
.prod .fav { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); color: var(--muted); z-index: 2 }
.prod .fav:hover { color: var(--primary) }
.prod .info { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1 }
.prod .cat { font-size: 9.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px }
.prod h4 { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 10px; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
/* Badge de stock en la card. No se muestra si el producto está en stock
   (la ausencia de badge es la "señal positiva"). */
.prod .prod-stock { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 100px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; align-self: flex-start; line-height: 1.4 }
.prod .prod-stock::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0 }
/* Diferenciamos out vs low porque transmiten cosas distintas:
   - out  → "Consultar stock" amarillo suave (sin compra, invita a contactar)
   - low  → "Últimas X" naranja urgencia (sí se puede comprar, apurate)
   Mantenemos ambos en tonos cálidos para evitar el rojo (sesgo negativo). */
.prod .prod-stock--out { background: #fff3cd; color: #856404 }
.prod .prod-stock--out::before { background: #ffc107 }
.prod .prod-stock--low { background: #ffe0b2; color: #c43d00 }
.prod .prod-stock--low::before { background: #ff6f00; animation: rg-pulse-stock 1.8s ease-in-out infinite }
@keyframes rg-pulse-stock {
	0%, 100% { transform: scale(1); opacity: 1 }
	50% { transform: scale(1.4); opacity: .6 }
}
/* Bloque de precio:
   - Sin oferta: solo el precio actual.
   - Con oferta (.has-sale): tachado arriba (full width) + precio grande
     y badge -X% en la misma fila debajo. Grid con áreas para que el
     badge se alinee aunque el precio rompa en 2 líneas. */
.prod .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap }
.prod .price.has-sale { display: grid; grid-template-areas: "old old" "now off"; row-gap: 2px; column-gap: 10px; align-items: center; justify-content: start }
.prod .price s,
.prod .price .price-old { grid-area: old; font-size: 12.5px; color: var(--muted); font-weight: 500; text-decoration: line-through }
.prod .price b,
.prod .price .price-now { grid-area: now; font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -.2px; line-height: 1.2 }
.prod .price .off { grid-area: off; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 100px; letter-spacing: .3px; justify-self: start; align-self: center; white-space: nowrap }
/* WC envuelve cantidades en .woocommerce-Price-amount; aseguramos que
   el `<s>` y el `<b>` propaguen estilos a esos children. */
.prod .price s .woocommerce-Price-amount { color: inherit; font-size: inherit; text-decoration: line-through }
.prod .price b .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit }
.prod .cuotas { font-size: 11px; color: var(--success); font-weight: 600; margin-bottom: 10px }
.prod .envio { font-size: 10.5px; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 4px }
.prod .envio b { color: var(--success); font-weight: 700 }
.prod .add-btn { margin-top: auto; background: var(--ink); color: #fff; border-radius: 10px; padding: 10px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .2s; text-decoration: none }
.prod .add-btn:hover { background: var(--primary) }
/* Variante "Ver producto" cuando el stock está en backorder. */
.prod .add-btn--view { background: transparent; color: var(--ink); border: 1.5px solid var(--ink) }
.prod .add-btn--view:hover { background: var(--ink); color: #fff }

/* Botón de WhatsApp en la vista de producto cuando el stock está en
   "consultar disponibilidad". Se inyecta en el form del add-to-cart. */
.rg-wa-consult { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #fff; padding: 12px 22px; border-radius: 100px; font-weight: 800; font-size: 14px; text-decoration: none; transition: background .15s, transform .15s; margin-top: 12px; line-height: 1; box-shadow: 0 4px 14px rgba(37, 211, 102, .25) }
.rg-wa-consult:hover { background: #1ebe5a; color: #fff; transform: translateY(-1px) }
.rg-wa-consult svg { flex-shrink: 0 }
/* Estado: producto ya está en el carrito */
.prod .add-btn.is-in-cart { background: var(--success); cursor: default }
.prod .add-btn.is-in-cart:hover { background: var(--success); opacity: .9 }
.prod.is-in-cart { box-shadow: inset 0 0 0 2px var(--success) }
/* Loading state durante el add ajax */
.prod .add-btn.loading { background: var(--muted); pointer-events: none }
.prod .add-btn.loading::after { content: ""; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: ragaglia-spin .8s linear infinite }
.prod .add-btn.added { background: var(--success) }

/* ================= FULL-WIDTH BANNER ================= */
.fullbanner { border-radius: 18px; overflow: hidden; position: relative; min-height: 260px; display: flex; align-items: center; background-size: cover; background-position: center; background-color: #001730 }
.fullbanner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 23, 48, .94) 0%, rgba(0, 23, 48, .55) 50%, transparent 100%) }
.fullbanner-in { position: relative; z-index: 2; padding: 40px 56px; color: #fff; max-width: 640px }
.fullbanner .chip { display: inline-flex; background: var(--primary); color: #fff; padding: 6px 14px; border-radius: 100px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 16px }
.fullbanner h2 { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.05; margin-bottom: 10px }
.fullbanner h2 em { font-style: normal; color: var(--accent) }
.fullbanner p { font-size: 15px; opacity: .9; margin-bottom: 22px; max-width: 460px; line-height: 1.5 }
.fullbanner .cta { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--ink); padding: 13px 24px; border-radius: 100px; font-weight: 800; font-size: 14px }

/* ================= TRIPLE BANNERS ================= */
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.triple .t { border-radius: 16px; overflow: hidden; padding: 26px; color: #fff; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; position: relative; background-size: cover; background-position: center; background-color: #001730 }
.triple .t::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 23, 48, .25), rgba(0, 23, 48, .88)) }
.triple .t > * { position: relative; z-index: 2 }
.triple .t .num { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; opacity: .8 }
.triple .t h3 { font-size: 26px; font-weight: 900; letter-spacing: -.5px; line-height: 1.1; margin-top: auto; margin-bottom: 4px }
.triple .t p { font-size: 13px; opacity: .9; margin-bottom: 16px }
.triple .t .link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; align-self: flex-start; background: rgba(255, 255, 255, .15); backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .2) }

/* ================= BRANDS STRIP ================= */
.brands { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0 }
.brands .row { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap }
.brand-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; min-width: 140px }
.brand-logos { display: flex; gap: 44px; align-items: center; flex: 1; justify-content: center; flex-wrap: wrap }
.brand-logos .bl { color: var(--ink-2); opacity: .55; transition: opacity .2s; font-size: 22px; line-height: 1 }
.brand-logos .bl:hover { opacity: 1 }
.bl.serif { font-family: Georgia, serif; font-weight: 700; font-style: italic }
.bl.bold { font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: -.5px }
.bl.wide { font-family: Impact, sans-serif; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 17px }
.bl.mono { font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: -.5px }
.bl.mini { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 3px; border: 1.5px solid currentColor; padding: 6px 12px; border-radius: 4px }
.bl.geo { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -.3px }
.bl.geo::before { content: "◆"; color: var(--primary); margin-right: 6px; font-size: 14px }

/* ================= NEWSLETTER ================= */
.news-wrap { background: linear-gradient(135deg, #001730, #0a2240); color: #fff; border-radius: 20px; padding: 56px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden }
.news-wrap::before { content: ""; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .08) }
.news-wrap::after { content: ""; position: absolute; bottom: -120px; left: -60px; width: 260px; height: 260px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .06) }
.news-copy { position: relative; z-index: 2 }
.news-copy .chip { display: inline-flex; background: var(--accent); color: var(--ink); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 14px }
.news-copy h2 { font-size: 34px; font-weight: 900; letter-spacing: -.8px; line-height: 1.1; margin-bottom: 10px }
.news-copy h2 em { font-style: normal; color: var(--accent) }
.news-copy p { font-size: 14.5px; opacity: .9; max-width: 420px }
.news-form { position: relative; z-index: 2; display: flex; gap: 8px; background: #fff; border-radius: 100px; padding: 6px; box-shadow: 0 16px 32px rgba(0, 0, 0, .15) }
.news-form input { flex: 1; border: 0; padding: 14px 22px; font-size: 14px; background: transparent; outline: none; color: var(--ink); font-family: inherit }
.news-form button { background: var(--ink); color: #fff; padding: 0 28px; border-radius: 100px; font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 8px }

/* ================= PAYMENT / SHIPPING STRIP ================= */
.pay { background: var(--bg-gray); padding: 26px 0; border-top: 1px solid var(--line) }
.pay .row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center }
.pay-block h5 { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 10px }
.pay-block .chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.pay-chip { background: #fff; border: 1px solid var(--line); padding: 6px 14px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .2px }
.pay-chip.visa { background: #1a1f71; color: #fff; border-color: #1a1f71; font-family: Georgia, serif; font-style: italic }
.pay-chip.master { background: linear-gradient(90deg, #eb001b 0%, #eb001b 50%, #f79e1b 50%, #f79e1b 100%); color: #fff; border: 0 }
.pay-chip.amex { background: #006fcf; color: #fff; border-color: #006fcf }
.pay-chip.cash { background: #001730; color: #fff; border-color: #001730 }
.pay-chip.mp { background: #00a3ff; color: #fff; border-color: #00a3ff }

/* Payment logos (SVG inline) */
.pay-logos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.pay-logo { display: inline-flex; align-items: center; justify-content: center; line-height: 0 }
.pay-logo svg { display: block; transition: transform .15s }
.pay-logo:hover svg { transform: translateY(-1px) }

/* Modo compacto: en contexto WC el strip es solo medios de pago, full width */
.pay--compact .row { grid-template-columns: 1fr }
.pay--compact .pay-block--methods { display: flex; flex-direction: column; gap: 12px; align-items: flex-start }
.pay--compact h5 { margin-bottom: 0 }

/* ================= FOOTER ================= */
.site-footer { background: #001730; color: #8fa0b8; padding: 56px 0 0 }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 44px }
.foot-brand .logo { color: #fff }
.foot-brand .logo .m { color: var(--accent) }
.foot-brand p { font-size: 13.5px; line-height: 1.65; margin: 16px 0 0; max-width: 300px }
.foot h5 { color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .8px }
/* Menús de navegación del footer (cols 2 y 3) */
.foot-menu__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px }
.foot-menu__list li { font-size: 13px }
.foot-menu__list a { color: inherit; opacity: .85; transition: opacity .15s, color .15s }
.foot-menu__list a:hover { opacity: 1; color: var(--accent) }
.foot-menu__empty { font-size: 12px; opacity: .55; line-height: 1.5 }
/* Columna de contacto (col 4) */
.foot-contact__list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px }
.foot-contact__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5 }
.foot-contact__list li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent) }
.foot-contact__list li a { color: inherit; opacity: .9; transition: opacity .15s, color .15s }
.foot-contact__list li a:hover { opacity: 1; color: var(--accent) }
.foot-contact .socials { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap }
.foot-contact .socials a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s }
.foot-contact .socials a:hover { background: var(--accent); color: var(--ink) }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; opacity: .75 }
.foot-bottom .dev-by a { color: var(--accent); font-weight: 700; margin-left: 4px; transition: color .15s }
.foot-bottom .dev-by a:hover { color: #fff }

/* ============================================================
   PAGE: NOSOTROS
   ============================================================ */

/* Hero */
.nos-hero { position: relative; min-height: 520px; background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; overflow: hidden; display: flex; align-items: center }
.nos-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255, 219, 14, .18), transparent 55%) }
.nos-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(0, 23, 48, .94) 0%, rgba(0, 23, 48, .75) 40%, rgba(0, 23, 48, .5) 100%) }
.nos-hero .inner { position: relative; z-index: 2; max-width: 820px; padding: 90px 0 }
.nos-hero .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--ink); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 26px }
.nos-hero h1 { font-size: 68px; font-weight: 900; letter-spacing: -2.5px; line-height: 1.02; margin-bottom: 22px }
.nos-hero h1 em { color: var(--accent); font-style: normal }
.nos-hero .lead { font-size: 18px; line-height: 1.55; opacity: .92; max-width: 620px }
.nos-hero .mini-stats { display: flex; gap: 44px; margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .15) }
.nos-hero .mini-stats .ms b { display: block; font-size: 32px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -1px }
.nos-hero .mini-stats .ms span { font-size: 12px; opacity: .75; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; display: block; margin-top: 6px }
.nos-hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat }
.nos-hero--has-bg::before { display: none }
.nos-hero--has-bg::after { background: linear-gradient(110deg, rgba(0, 23, 48, .55) 0%, rgba(10, 34, 64, .40) 60%, rgba(0, 0, 0, .30) 100%) }

/* Historia (chapter) */
.historia-wrap { padding: 40px 0 60px }
.chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 60px 0 }
.chapter.reverse .cap-text { order: 2 }
.chapter.reverse .cap-img { order: 1 }
.cap-text .num { font-size: 13px; font-weight: 900; color: var(--primary); letter-spacing: 2px; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 12px; text-transform: uppercase }
.cap-text .num::before { content: ""; width: 36px; height: 2px; background: var(--primary) }
.cap-text h3 { font-size: 40px; font-weight: 900; letter-spacing: -1.2px; line-height: 1.1; margin-bottom: 22px; color: var(--ink) }
.cap-text h3 em { font-style: normal; color: var(--primary) }
.cap-text p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin-bottom: 16px }
.cap-text .kp { background: var(--bg-soft); border-left: 3px solid var(--accent); padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: 13.5px; color: var(--ink); font-style: italic; line-height: 1.55; margin-top: 18px }
.cap-img { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--bg-soft); position: relative; box-shadow: 0 30px 60px rgba(0, 23, 48, .12) }
.cap-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 23, 48, .2)) }
.cap-img .year { position: absolute; top: 22px; left: 22px; background: var(--accent); color: var(--ink); padding: 7px 16px; border-radius: 100px; font-weight: 900; font-size: 13px; letter-spacing: 1px; z-index: 2 }

/* Timeline */
.timeline { background: var(--primary); color: #fff; padding: 90px 0; position: relative; overflow: hidden }
.timeline::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255, 219, 14, .18), transparent 55%) }
.timeline .container { position: relative; z-index: 2 }
.tl-head { text-align: center; margin-bottom: 60px }
.tl-head h2 { font-size: 42px; font-weight: 900; letter-spacing: -1px; margin-bottom: 12px }
.tl-head h2 em { color: var(--accent); font-style: normal }
.tl-head p { opacity: .8; font-size: 15px; max-width: 540px; margin: 0 auto; line-height: 1.55 }
.tl-rail { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px }
.tl-rail::before { content: ""; position: absolute; top: 30px; left: 2%; right: 2%; height: 2px; background: rgba(255, 255, 255, .15) }
.tl-node { position: relative; padding-top: 68px; text-align: center }
.tl-node::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--primary); box-shadow: 0 0 0 4px rgba(255, 219, 14, .25) }
.tl-node.active::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3) }
.tl-node .yr { font-size: 22px; font-weight: 900; color: var(--accent); margin-bottom: 6px; letter-spacing: -.5px }
.tl-node.active .yr { color: #fff }
.tl-node p { font-size: 12px; color: #fff; opacity: .85; line-height: 1.45 }

/* Sucursales */
.sucursales { padding: 90px 0; background: var(--bg-soft); border-top: 1px solid var(--line) }
.sucursales .head { text-align: center; margin-bottom: 48px }
.sucursales h2 { font-size: 42px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px }
.sucursales h2 em { color: var(--primary); font-style: normal }
.sucursales .sub { color: var(--muted); font-size: 15px; max-width: 520px; margin: 0 auto }
.suc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.suc-grid--single { grid-template-columns: 1fr; max-width: 100%; margin: 0 }
.suc { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; transition: all .2s; min-height: 420px }
.suc:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 23, 48, .08); border-color: transparent }
.suc .pic { aspect-ratio: unset; background-size: cover; background-position: center; background-color: var(--bg-soft); position: relative; min-height: 420px }
.suc .pic.suc-pic--wide { aspect-ratio: 21/9 }
.suc .pic .b { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--primary); padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase }
.suc .info { padding: 40px 48px; display: flex; flex-direction: column; justify-content: center }
.suc h4 { font-size: 22px; font-weight: 800; margin-bottom: 20px; color: var(--ink); letter-spacing: -.4px }
.suc .row { display: flex; gap: 12px; font-size: 14px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.5; align-items: flex-start }
.suc .row svg { color: var(--primary); flex-shrink: 0; margin-top: 2px }
.suc .hours { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); line-height: 1.65 }
.suc .hours b { color: var(--ink); font-weight: 700 }
.suc .btn-suc { margin-top: 28px; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 13px 24px; border-radius: 100px; font-weight: 700; font-size: 13.5px }
.suc .btn-suc:hover { background: var(--primary) }

/* CTA visit */
.cta-visit { padding: 90px 0; text-align: center; background: linear-gradient(110deg, var(--accent) 0%, var(--accent-dark) 100%); color: var(--ink); position: relative; overflow: hidden }
.cta-visit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 30%, rgba(0, 23, 48, .08), transparent 50%) }
.cta-visit .container { position: relative; z-index: 2 }
.cta-visit .chip { display: inline-flex; background: rgba(0, 23, 48, .12); color: var(--ink); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 22px }
.cta-visit h2 { font-size: 48px; font-weight: 900; letter-spacing: -1.5px; max-width: 820px; margin: 0 auto 16px; line-height: 1.08 }
.cta-visit p { max-width: 600px; margin: 0 auto 34px; font-size: 16px; line-height: 1.55; opacity: .88 }
.cta-visit .btns { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center }
.cta-visit .btn-primary { background: var(--ink); color: #fff; padding: 15px 28px; border-radius: 100px; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 16px 32px rgba(0, 23, 48, .25); transition: all .15s }
.cta-visit .btn-primary:hover { background: var(--primary) }
.cta-visit .btn-secondary { background: #fff; color: var(--ink); padding: 15px 28px; border-radius: 100px; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 8px }

/* ============================================================
   PAGE: TIENDA (WC archive-product)
   ============================================================ */

.shop-section { padding: 28px 0 60px; background: #f5f7fa }

/* Hero band — solo título */
.shop-hero { background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; padding: 36px 0; position: relative; overflow: hidden }
.shop-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 30%, rgba(255, 219, 14, .18), transparent 55%) }
.shop-hero .container { position: relative; z-index: 2 }
.shop-hero h1 { font-size: 36px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: #fff }
.shop-hero .lead { color: #fff; opacity: .92; font-size: 15px; line-height: 1.5; margin-top: 8px; max-width: 720px }
.shop-hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 60px 0 }
.shop-hero--has-bg::before { background: linear-gradient(110deg, rgba(0, 23, 48, .55) 0%, rgba(10, 34, 64, .40) 60%, rgba(0, 0, 0, .30) 100%) }

/* Toolbar */
.shop-tools { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; gap: 14px }
.shop-tools .left { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px }
.shop-tools .left b { color: var(--ink); font-weight: 700 }
.shop-tools .right { display: flex; align-items: center; gap: 10px }
.shop-tools .ord { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink) }
.shop-tools .ord label { font-weight: 600 }
.shop-tools .ord select { border: 0; background: transparent; font-family: inherit; font-weight: 700; color: var(--ink); outline: none; cursor: pointer; font-size: 13px }
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff }
.view-toggle button { padding: 8px 11px; color: var(--muted); display: flex; align-items: center; justify-content: center }
.view-toggle button.active { background: var(--primary); color: #fff }

/* Filters trigger (mobile only — hidden on desktop) */
.filters-toggle { display: none; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700 }
.filters-toggle:hover { background: var(--primary) }
.filters-close { display: none; position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2 }

/* Active filter chips */
.active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px }
.active-filters .lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); color: var(--primary); padding: 5px 8px 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 700 }
.filter-chip .x { width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 23, 48, .12); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; line-height: 1 }
.clear-all { font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; margin-left: 4px }
.clear-all:hover { color: var(--primary) }

/* Shop layout */
.shop-grid { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: flex-start }

/* Sidebar */
/* Sidebar de tienda en desktop: estática (acompaña el scroll de la
   página). En mobile pasa a fixed/drawer en el media query de 900px. */
/* Sidebar sticky en desktop: queda fija al hacer scroll y acompaña la
   navegación. En mobile (≤900px) el media query la convierte en drawer
   fijo. La altura se limita a la del viewport para que su contenido
   pueda scrollearse internamente cuando los filtros son largos. */
.shop-side-wrap { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent }
.shop-side-wrap::-webkit-scrollbar { width: 6px }
.shop-side-wrap::-webkit-scrollbar-track { background: transparent }
.shop-side-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px }
.shop-side-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted) }

.shop-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
.shop-side .side-head { padding: 16px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between }
.shop-side .side-head b { font-size: 13px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .5px }
.shop-side .side-head small { font-size: 11px; color: var(--muted); cursor: pointer }
.shop-side .side-head small:hover { color: var(--primary) }

.filter-block { padding: 18px 20px; border-bottom: 1px solid var(--line) }
.filter-block:last-child { border-bottom: 0 }
/* Reset bullets en cualquier ul anidado dentro de un filter-block */
.filter-block ul, .filter-block ul ul { list-style: none; padding: 0; margin: 0 }
.filter-block.collapsed ul, .filter-block.collapsed .see-more, .filter-block.collapsed .price-range-slider, .filter-block.collapsed .price-inputs, .filter-block.collapsed .apply-price { display: none }
.filter-block.collapsed h6 { margin-bottom: 0 }
.filter-block.collapsed h6 .chev { transform: rotate(-90deg); transition: transform .2s }
.filter-block h6 .chev { transition: transform .2s }
.filter-block h6 { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; justify-content: space-between; cursor: pointer }
.filter-block h6 .chev { color: var(--muted); font-size: 10px }
.filter-block ul { list-style: none; display: flex; flex-direction: column; gap: 8px }
.filter-block label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; line-height: 1.2 }
.filter-block label:hover { color: var(--ink) }
.filter-block label input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; position: relative; cursor: pointer; flex-shrink: 0; transition: all .15s }
.filter-block label input:checked { background: var(--primary); border-color: var(--primary) }
.filter-block label input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.filter-block label .count { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 600 }
.filter-block label input[type="radio"] { border-radius: 50% }
.filter-block label input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; border: 0; transform: none }
.filter-block .see-more { font-size: 11.5px; color: var(--primary); font-weight: 700; margin-top: 10px; cursor: pointer }

/* ========== Ragaglia custom filter widgets ==========
   Selectores `.rg-filter*` (Brand, Attribute, Category Tree). Comparten
   estructura: opcional .rg-filter__search → .rg-filter__list (los items
   son <li> con un <a> que toggle un slug en filter_<key>). El JS marca
   .is-clamped cuando la lista supera el max-height; el botón Ver más
   alterna esa clase. */
.rg-filter { position: relative }
.rg-filter__search { margin: 0 0 10px }
.rg-filter__search input { width: 100%; height: 32px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--ink); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8395' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 8px center; outline: none; transition: border-color .15s }
.rg-filter__search input:focus { border-color: var(--primary) }
.rg-filter__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: hidden; position: relative }
/* Expandido: el listado se vuelve scrollable dentro del widget en lugar
   de empujar todo el sidebar. Altura cómoda para ver muchos ítems. */
.rg-filter.is-expanded .rg-filter__list { max-height: 480px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent }
.rg-filter.is-expanded .rg-filter__list::-webkit-scrollbar { width: 6px }
.rg-filter.is-expanded .rg-filter__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px }
.rg-filter__item { font-size: 12.5px; line-height: 1.25 }
.rg-filter__item.is-hidden { display: none }
.rg-filter__link { display: flex; align-items: center; gap: 9px; color: var(--ink-2); text-decoration: none; padding: 2px 0; transition: color .15s }
.rg-filter__link:hover { color: var(--ink) }
.rg-filter__check { width: 15px; height: 15px; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; flex-shrink: 0; position: relative; transition: all .15s }
.rg-filter__link:hover .rg-filter__check { border-color: var(--primary) }
.rg-filter__item.is-active .rg-filter__check { background: var(--primary); border-color: var(--primary) }
.rg-filter__item.is-active .rg-filter__check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.rg-filter__item.is-active .rg-filter__link { color: var(--primary); font-weight: 700 }
.rg-filter__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rg-filter__count { color: var(--muted); font-size: 11px; font-weight: 600 }
.rg-filter__toggle { display: block; margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; text-align: left }
.rg-filter__toggle:hover { text-decoration: underline }

/* Tree (Category) — sin checkbox, con chevron colapsable y indent.
   Selectores con `.filter-block` para ganarle a la regla legacy
   `.filter-block ul ul { padding: 0 }` (specificidad 0,1,2). */
.rg-filter__list--tree .rg-filter__check { display: none }
.rg-cat-tree__row { display: flex; align-items: center; gap: 6px; min-height: 28px }
.rg-cat-tree__row .rg-filter__link { flex: 1; min-width: 0; padding-right: 4px }
.rg-cat-tree__row .rg-filter__label { flex: 1; min-width: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; font-size: 12.5px }
.rg-cat-tree__row .rg-filter__count { flex-shrink: 0; min-width: 28px; padding: 1px 8px; border-radius: 100px; background: var(--bg-soft); color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.4 }
.rg-cat-tree__chev { flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; transition: background .15s, color .15s, transform .2s }
.rg-cat-tree__chev:hover { background: var(--bg-soft); color: var(--ink) }
.rg-cat-tree__node.is-open > .rg-cat-tree__row > .rg-cat-tree__chev { transform: rotate(180deg); color: var(--primary) }
/* Hijos: indentados, con barra dashed a la izquierda, fuente normal
   (no uppercase) para diferenciarlos del padre. */
.filter-block .rg-cat-tree__children { list-style: none; padding: 6px 0 0 14px; margin: 8px 0 4px 6px; display: flex; flex-direction: column; gap: 4px; border-left: 1px dashed var(--line) }
.rg-cat-tree__children .rg-cat-tree__row { min-height: 26px }
.rg-cat-tree__children .rg-filter__label { text-transform: none; font-weight: 500; color: var(--ink-2); letter-spacing: 0; font-size: 12.5px }
.rg-cat-tree__children .rg-filter__count { background: transparent; padding: 0; min-width: 0; color: var(--muted) }
/* Subcategorías ocultas por default — solo se ven si la rama está abierta. */
.rg-cat-tree__node:not(.is-open) > .rg-cat-tree__children { display: none }
.rg-cat-tree__node.is-active > .rg-cat-tree__row > .rg-filter__link { color: var(--primary); font-weight: 700 }
.rg-cat-tree__node.is-active > .rg-cat-tree__row > .rg-filter__link .rg-filter__label { color: var(--primary) }

/* ========== WC widget output normalization ==========
   Cuando register_sidebar('shop-sidebar') envuelve cada widget en .filter-block,
   las reglas anteriores (.filter-block ul/label/.count) ya cubren la estructura
   básica. Estas reglas mapean el markup específico de cada widget WC a nuestro
   look. */

/* Layered Nav (atributos: Marca, etc.) — links estilizados como checkboxes */
.filter-block .woocommerce-widget-layered-nav-list { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 8px }
.filter-block .woocommerce-widget-layered-nav-list__item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.2; position: relative }
.filter-block .woocommerce-widget-layered-nav-list__item a { color: var(--ink-2); flex: 1; display: inline-flex; align-items: center; gap: 9px; padding: 2px 0; position: relative }
.filter-block .woocommerce-widget-layered-nav-list__item a::before { content: ""; width: 15px; height: 15px; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; flex-shrink: 0; transition: all .15s; position: relative }
.filter-block .woocommerce-widget-layered-nav-list__item a:hover { color: var(--ink) }
.filter-block .woocommerce-widget-layered-nav-list__item a:hover::before { border-color: var(--primary) }
.filter-block .woocommerce-widget-layered-nav-list__item.chosen a,
.filter-block .woocommerce-widget-layered-nav-list__item--chosen a { color: var(--primary); font-weight: 700 }
.filter-block .woocommerce-widget-layered-nav-list__item.chosen a::before,
.filter-block .woocommerce-widget-layered-nav-list__item--chosen a::before { background: var(--primary); border-color: var(--primary) }
.filter-block .woocommerce-widget-layered-nav-list__item.chosen a::after,
.filter-block .woocommerce-widget-layered-nav-list__item--chosen a::after { content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg) }
.filter-block .woocommerce-widget-layered-nav-list__item .count { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 600 }

/* Active Filters (chips) */
.filter-block.widget_layered_nav_filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px }
.filter-block.widget_layered_nav_filters ul li { display: inline-flex; align-items: center; background: var(--primary-soft); color: var(--primary); padding: 5px 8px 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 700 }
.filter-block.widget_layered_nav_filters ul li a { color: var(--primary); display: inline-flex; align-items: center; gap: 6px }
.filter-block.widget_layered_nav_filters ul li a::after { content: "×"; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 23, 48, .12); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; margin-left: 2px }
.filter-block.widget_layered_nav_filters ul li a:hover::after { background: var(--primary); color: #fff }

/* Product Categories — checkbox-style + colapsable jerárquico */
.filter-block .product-categories { display: flex; flex-direction: column; gap: 8px }
.filter-block .product-categories li { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; position: relative }
.filter-block .product-categories li a { color: var(--ink-2); display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 0; position: relative }
.filter-block .product-categories li a::before { content: ""; width: 15px; height: 15px; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; flex-shrink: 0; transition: all .15s }
.filter-block .product-categories li a:hover { color: var(--ink) }
.filter-block .product-categories li a:hover::before { border-color: var(--primary) }
.filter-block .product-categories li.current-cat > a { color: var(--primary); font-weight: 700 }
.filter-block .product-categories li.current-cat > a::before { background: var(--primary); border-color: var(--primary) }
.filter-block .product-categories li.current-cat > a::after { content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg) }
.filter-block .product-categories .count { color: var(--muted); margin-left: auto; font-weight: 600; font-size: 11px; padding-left: 4px }

/* Botón chevron para expandir hijas (lo inyecta el JS) */
.filter-block .product-categories .cat-toggle { width: 22px; height: 22px; border-radius: 6px; background: transparent; border: 0; padding: 0; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s, background .15s }
.filter-block .product-categories .cat-toggle:hover { background: var(--bg-soft); color: var(--ink) }
.filter-block .product-categories .cat-parent.expanded > .cat-toggle { transform: rotate(180deg) }

/* Children colapsadas por defecto. Solo se ven si el padre tiene .expanded */
.filter-block .product-categories .cat-parent .children { display: none }
.filter-block .product-categories .cat-parent.expanded > .children { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; padding: 8px 0 4px 24px; margin-top: 4px; border-left: 1px solid var(--line); margin-left: 6px }

/* Price Filter (slider WC) */
.filter-block.widget_price_filter .price_slider_wrapper { padding: 4px 6px 0 }
.filter-block.widget_price_filter .price_slider { position: relative; height: 4px; background: var(--line); border-radius: 4px; margin: 14px 4px 6px }
.filter-block.widget_price_filter .ui-slider-range { position: absolute; height: 100%; background: var(--primary); border-radius: 4px; top: 0 }
.filter-block.widget_price_filter .ui-slider-handle { position: absolute; top: 50%; width: 14px; height: 14px; background: #fff; border: 2px solid var(--primary); border-radius: 50%; margin-left: -7px; margin-top: -7px; cursor: grab; outline: none }
.filter-block.widget_price_filter .price_slider_amount { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px }
.filter-block.widget_price_filter .price_slider_amount .button { order: 99; flex: 1 0 100%; background: var(--primary); color: #fff; padding: 9px; border-radius: 8px; font-weight: 700; font-size: 12px; border: 0; cursor: pointer }
.filter-block.widget_price_filter .price_slider_amount .button:hover { background: var(--primary-dark) }
.filter-block.widget_price_filter .price_slider_amount input[type="text"] { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-family: inherit; outline: none; color: var(--ink); min-width: 0 }
.filter-block.widget_price_filter .price_slider_amount input[type="text"]:focus { border-color: var(--primary) }
.filter-block.widget_price_filter .price_label { flex: 1 0 100%; font-size: 11.5px; color: var(--muted); order: 50 }

/* Rating Filter */
.filter-block.widget_rating_filter ul { list-style: none; display: flex; flex-direction: column; gap: 8px }
.filter-block.widget_rating_filter ul li a { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12.5px }
.filter-block.widget_rating_filter ul li.chosen a { color: var(--primary); font-weight: 700 }
.filter-block.widget_rating_filter .star-rating { color: var(--accent-dark); font-size: 12px; letter-spacing: 1px; position: relative; height: 1em; line-height: 1; width: 5.4em; font-family: star }
.filter-block.widget_rating_filter .star-rating::before { content: "\53\53\53\53\53"; opacity: .25; position: absolute; left: 0; top: 0 }
.filter-block.widget_rating_filter .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em }
.filter-block.widget_rating_filter .star-rating span::before { content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0 }
.filter-block.widget_rating_filter .count { color: var(--muted); margin-left: auto; font-size: 11px; font-weight: 600 }

/* Empty widget message — when there are no terms / categories / etc. */
.filter-block .woocommerce-widget-layered-nav-list:empty,
.filter-block .product-categories:empty { display: none }

/* Price range */
.price-inputs { display: flex; align-items: center; gap: 8px; margin-top: 10px }
.price-inputs input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-family: inherit; outline: none; color: var(--ink); min-width: 0 }
.price-inputs input:focus { border-color: var(--primary) }
.price-inputs span { color: var(--muted); font-size: 11px }
.price-range-slider { position: relative; height: 4px; background: var(--line); border-radius: 4px; margin: 14px 4px 6px }
.price-range-slider .track { position: absolute; height: 100%; background: var(--primary); border-radius: 4px; left: 15%; right: 25% }
.price-range-slider .knob { position: absolute; top: 50%; width: 14px; height: 14px; background: #fff; border: 2px solid var(--primary); border-radius: 50%; transform: translate(-50%, -50%); cursor: grab }
.price-range-slider .knob.a { left: 15% }
.price-range-slider .knob.b { left: 75% }
.apply-price { margin-top: 12px; width: 100%; background: var(--primary); color: #fff; padding: 9px; border-radius: 8px; font-weight: 700; font-size: 12px }
.apply-price:hover { background: var(--primary-dark) }

/* Side promo */
.side-promo { margin-top: 16px; border-radius: 14px; overflow: hidden; position: relative; min-height: 280px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff }
.side-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 23, 48, .1) 0%, rgba(0, 23, 48, .88) 90%); z-index: 1 }
.side-promo > * { position: relative; z-index: 2 }
.side-promo .tag { align-self: flex-start; background: var(--accent); color: var(--ink); padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px }
.side-promo h4 { font-size: 17px; font-weight: 800; line-height: 1.15; margin-bottom: 4px }
.side-promo p { font-size: 12px; opacity: .88; margin-bottom: 12px }
.side-promo .btn { align-self: flex-start; background: var(--accent); color: var(--ink); padding: 8px 14px; border-radius: 100px; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; gap: 6px }

/* Main column */
.shop-main .prods { grid-template-columns: repeat(4, 1fr) }
.shop-main .prods .prod h4 a { color: inherit }

/* Banner above grid */
.shop-banner { border-radius: 14px; overflow: hidden; position: relative; min-height: 180px; background-size: cover; background-position: center; display: flex; align-items: center; padding: 28px 36px; color: #fff; background-color: #001730; margin-bottom: 20px }
.shop-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 23, 48, .9) 0%, rgba(0, 23, 48, .4) 100%); z-index: 1 }
.shop-banner > * { position: relative; z-index: 2 }
.shop-banner .chip { display: inline-flex; background: var(--accent); color: var(--ink); padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px }
.shop-banner h3 { font-size: 26px; font-weight: 900; letter-spacing: -.5px; line-height: 1.05; margin-bottom: 6px; max-width: 480px }
.shop-banner h3 em { font-style: normal; color: var(--accent) }
.shop-banner p { font-size: 13px; opacity: .9; max-width: 480px; margin-bottom: 14px }
.shop-banner .cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--ink); padding: 10px 20px; border-radius: 100px; font-weight: 800; font-size: 13px }
/* Variante "solo imagen" del banner — sin overlay, sin padding, ocupa
   todo el ancho como una banda. Configurable desde Customizer. */
.shop-banner--image { padding: 0; background: transparent; min-height: 0; display: block }
.shop-banner--image::before { display: none }
.shop-banner--image img { width: 100%; height: auto; display: block; border-radius: 14px; transition: transform .3s }
a.shop-banner--image:hover img { transform: scale(1.01) }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; padding: 24px 0; border-top: 1px solid var(--line); flex-wrap: wrap }
.pager a, .pager span { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all .15s; text-decoration: none }
.pager a:hover { border-color: var(--primary); color: var(--primary) }
.pager .active, .pager span.active { background: var(--primary); color: #fff; border-color: var(--primary) }
.pager .dots { border: 0; background: transparent; pointer-events: none }
.pager .nav-btn { gap: 6px; padding: 0 16px }

.empty-shop { text-align: center; padding: 80px 20px; color: var(--muted); font-size: 15px }

/* ============================================================
   PAGE: SINGLE PRODUCT (PDP)
   ============================================================ */
.pdp-section { padding: 0 0 40px; background: transparent }
/* Aplicamos el bg a la página entera para que breadcrumbs y todo el
   PDP queden consistentes (los breadcrumbs viven fuera de
   .pdp-section). */
body.single-product { background: #f5f7fa }

/* Breadcrumbs */
.pdp-crumbs { padding: 14px 0; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 24px }
.pdp-crumbs a { color: var(--muted); transition: color .2s }
.pdp-crumbs a:hover { color: var(--primary) }
.pdp-crumbs .sep { margin: 0 8px; opacity: .6 }
.pdp-crumbs b { color: var(--ink); font-weight: 600 }
.woocommerce-breadcrumb { display: inline }

/* Grid */
.pdp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: flex-start; padding: 18px 0 40px }

/* Gallery — single column si no hay thumbs (1 sola imagen); 86px + main si hay galería */
.pdp-gallery { display: grid; grid-template-columns: 1fr; gap: 12px; position: sticky; top: 100px }
.pdp-gallery:has(.pg-thumbs) { grid-template-columns: 70px 1fr }
.pg-thumbs { display: flex; flex-direction: column; gap: 8px }
.pg-thumbs button { width: 70px; height: 70px; border-radius: 10px; border: 2px solid var(--line); background: #fff; padding: 8px; display: flex; align-items: center; justify-content: center; transition: border-color .15s; overflow: hidden; cursor: pointer }
.pg-thumbs button:hover { border-color: var(--primary-light) }
.pg-thumbs button.active { border-color: var(--primary) }
.pg-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain }
.pg-main { position: relative; aspect-ratio: 1/1; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden }
.pg-main img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 24px }
.pg-badges { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 2 }
.pg-badges .badge { background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 5px }
.pg-badges .badge.yellow { background: var(--accent); color: var(--ink) }
.pg-badges .badge.dark { background: var(--ink) }
.pg-fav, .pg-zoom { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink-2); z-index: 2; transition: all .15s; cursor: pointer }
.pg-fav:hover, .pg-zoom:hover { border-color: var(--primary); color: var(--primary) }
.pg-fav { top: 16px; right: 16px }
.pg-fav.is-active { color: var(--accent-dark); border-color: var(--accent-dark) }
.pg-fav.is-active svg { fill: var(--accent); stroke: var(--accent-dark) }
.pg-zoom { bottom: 16px; right: 16px }

/* Info column */
.pdp-info { display: flex; flex-direction: column; gap: 16px }
.brand-row { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap }
.brand-row .brand-pill { background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 4px; font-weight: 800; letter-spacing: .5px; font-size: 11px }
.brand-row .sku { font-weight: 600 }
.pdp-info h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; color: var(--ink) }

.rev-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap }
.rev-row .stars { color: var(--accent-dark); letter-spacing: 1.5px; font-size: 13px }
.rev-row .stars b { color: var(--ink); font-weight: 800; margin-left: 6px; letter-spacing: 0 }
.rev-row .sep-dot { opacity: .5 }
.rev-row a { color: var(--primary); font-weight: 700; cursor: pointer }

.stock-row { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 700; flex-wrap: wrap }
.stock-row .in-stock { color: var(--success); display: inline-flex; align-items: center; gap: 8px }
.stock-row .in-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(22, 163, 74, .15) }
.stock-row .ship-24 { color: var(--primary); display: inline-flex; gap: 6px; align-items: center }

/* "Consultar disponibilidad" — para productos sin stock (qty=0).
   Amarillo suave: invita a consultar sin cortar la venta con un "agotado". */
.stock-row--out, .stock-row--low { font-weight: 700 }
.stock-row .consultar-stock { color: #92400e; display: inline-flex; align-items: center; gap: 8px; background: #fff3cd; padding: 4px 12px; border-radius: 100px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px }
.stock-row .consultar-stock svg { color: #b45309 }

/* "Últimas X unidades" — para productos con stock bajo.
   Naranja con flash sutil para crear urgencia visual. Sigue mostrando el
   "Llega mañana" al lado porque la compra ES viable. */
.stock-row .low-stock { color: #c43d00; display: inline-flex; align-items: center; gap: 8px; background: #ffe0b2; padding: 4px 12px; border-radius: 100px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; font-weight: 800 }
.stock-row .low-stock svg { color: #ff6f00; animation: rg-flicker 1.8s ease-in-out infinite }
@keyframes rg-flicker {
	0%, 100% { opacity: 1 }
	50% { opacity: .55 }
}

/* Price — flat, sin card, peso liviano. */
/* Price box — diseño que destaca el ahorro real:
   - List price (regular tachado) MÁS visible: tamaño 18px (no 14), color ink-2
     en vez de muted, tachado más grueso/visible.
   - Sale price (current) más grande aún: 34px, weight 800, bien protagónico.
   - Off-pill amarillo brillante con sombra para destacar el % de descuento.
   - Layout con micro-label "Antes:" arriba del tachado para que quede claro
     que ESE era el precio anterior, no el actual. */
.price-box { background: transparent; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
.price-box .old-price { font-size: 18px; color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(220, 38, 38, .55); font-weight: 600; opacity: .85; display: inline-flex; align-items: center; gap: 8px; line-height: 1 }
.price-box .old-price::before { content: "Antes:"; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; opacity: 1 }
.price-box .current-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 2px }
.price-box .current { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; line-height: 1.05 }
.price-box .current .woocommerce-Price-amount { font-size: 34px; font-weight: 800 }
.price-box .current del { display: none }
.price-box .off-pill { background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 900; padding: 6px 14px; border-radius: 100px; letter-spacing: -.2px; box-shadow: 0 2px 8px rgba(255, 219, 14, .35); border: 1px solid var(--accent-dark); white-space: nowrap }

/* CIM Inventory countdown — el plugin lo declara `inline-flex`, pero
   nuestro `.pdp-info` es flex column con stretch por default, así que
   se estira al ancho completo. Forzamos `align-self: flex-start` para
   que solo ocupe el ancho de su contenido. */
.pdp-info .cim-sale-countdown,
.pdp-info .cim-sale-countdown--single { align-self: flex-start; width: auto; max-width: 100% }

/* Aviso cuando el producto está en "consultar disponibilidad" y no se
   muestra el form de compra. */
.pdp-consultar { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #fff3cd; border: 1px solid #ffe08a; color: #856404; font-size: 13.5px; line-height: 1.45; margin-bottom: 6px }
.pdp-consultar svg { flex-shrink: 0; margin-top: 1px }

/* Barra de progreso para envío gratis. Aparece arriba del form de
   add-to-cart. WC fragments la re-renderiza al cambiar el cart vía
   AJAX. Estado normal: amarillo brand. Estado is-reached: verde. */
.rg-shipping-bar { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px }
.rg-shipping-bar[hidden] { display: none }
.rg-shipping-bar__msg { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; color: var(--ink-2) }
.rg-shipping-bar__msg strong { color: var(--ink); font-weight: 800 }
.rg-shipping-bar__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); color: var(--ink); flex-shrink: 0 }
.rg-shipping-bar__track { background: var(--bg-soft); border-radius: 100px; height: 8px; overflow: hidden }
.rg-shipping-bar__fill { background: var(--accent); height: 100%; transition: width .35s ease-out; border-radius: 100px; min-width: 8px }
.rg-shipping-bar.is-reached { border-color: rgba(40, 167, 69, .4); background: rgba(212, 237, 218, .35) }
.rg-shipping-bar.is-reached .rg-shipping-bar__icon { background: #28a745; color: #fff }
.rg-shipping-bar.is-reached .rg-shipping-bar__fill { background: #28a745 }

/* WC native add-to-cart wrapper en single product. La grid permite que
   los 2 botones (Agregar al carrito + Comprar ahora) ocupen el mismo
   ancho debajo del stepper, y el WhatsApp se va a la última fila full-
   width abajo de todo. */
.pdp-cart .cart { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch }
.pdp-cart .cart .quantity { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; flex: 0 0 auto }
.pdp-cart .cart .quantity input { width: 56px; height: 48px; border: 0; text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); outline: none; font-family: inherit; -moz-appearance: textfield }
.pdp-cart .cart .quantity input::-webkit-outer-spin-button,
.pdp-cart .cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.pdp-cart .cart .single_add_to_cart_button { height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 700; font-size: 14px; background: var(--ink); color: #fff; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s; flex: 1 1 0; min-width: 180px }
.pdp-cart .cart .single_add_to_cart_button:hover { background: var(--primary) }

/* Botón "Comprar ahora" — amarillo, mismo height que el primario. */
.pdp-cart .cart .buy-now-btn { height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 800; font-size: 14px; background: var(--accent); color: var(--ink); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s; flex: 1 1 0; min-width: 180px }
.pdp-cart .cart .buy-now-btn:hover { background: var(--accent-dark) }

/* WhatsApp en single — full width debajo del .pdp-cart. Se renderiza
   como sibling del cart (no dentro del form) para que aparezca también
   cuando el producto está sin stock y WC no muestra el form. */
.rg-wa-consult--pdp { display: flex; width: 100%; height: 48px; padding: 0 22px; border-radius: 10px; background: #25D366; color: #fff; font-size: 14px; font-weight: 700; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background .15s; box-shadow: none; margin-top: 12px; box-sizing: border-box }
.rg-wa-consult--pdp:hover { background: #1ebe5a; color: #fff }

/* Stepper buttons − / + (inyectados via woocommerce_before/after_quantity_input_field hooks). */
.qty-stepper { width: 40px; min-height: 100%; background: #fff; border: 0; color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; padding: 0; line-height: 1 }
.qty-stepper:hover { background: var(--bg-soft); color: var(--primary) }
.qty-stepper:active { background: var(--line) }
.qty-stepper.qty-minus { border-right: 1px solid var(--line) }
.qty-stepper.qty-plus { border-left: 1px solid var(--line) }
/* En el mini-cart y quick-view qty también pinta — pero el input ahí es más chico */
.qv-form .quantity, .mini-cart-qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden }
.qv-form .quantity .qty-stepper, .mini-cart-qty .qty-stepper { width: 36px }
.pdp-cart .variations { width: 100%; margin-bottom: 14px }
.pdp-cart .variations td { padding: 6px 8px 6px 0 }
.pdp-cart .variations select { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px }

.fav-share { display: flex; gap: 20px; padding: 8px 0 2px; flex-wrap: wrap }
.fav-share button, .fav-share a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: 12.5px; transition: color .15s; background: transparent; border: 0; cursor: pointer }
.fav-share button:hover, .fav-share a:hover { color: var(--primary) }
.fav-share .js-fav-toggle.is-active { color: var(--accent-dark) }
.fav-share .js-fav-toggle.is-active svg { fill: var(--accent); stroke: var(--accent-dark) }

/* Delivery box */
.delivery-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px }
.d-opt { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line) }
.d-opt:last-child { border: 0 }
.d-opt .ic-b { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.d-opt .txt b { display: block; font-size: 13px; font-weight: 700; color: var(--ink) }
.d-opt .txt span { font-size: 12px; color: var(--muted) }
.d-opt .free { color: var(--success); font-weight: 700 }
/* Llega mañana — pill amarilla destacada para crear urgencia visible al
   primer scan del bloque de envíos. */
.d-opt .d-fast { display: inline-block; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 11.5px; padding: 2px 9px; border-radius: 100px; letter-spacing: -.1px; border: 1px solid var(--accent-dark); vertical-align: middle; line-height: 1.3 }

/* Trust badges */
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px }
.trust { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft) }
.trust .ic-b { color: var(--primary); flex-shrink: 0; margin-top: 2px }
.trust b { display: block; font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 2px }
.trust span { font-size: 10.5px; color: var(--muted); line-height: 1.3 }

/* Spec strip */
.spec-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 24px 14px; margin: 10px 0 40px }
.spec-strip .sp { text-align: center; border-right: 1px solid var(--line); padding: 4px 8px }
.spec-strip .sp:last-child { border-right: 0 }
.spec-strip .sp b { display: block; font-size: 24px; font-weight: 900; color: var(--primary); letter-spacing: -.5px; line-height: 1.1 }
.spec-strip .sp span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 700 }

/* Tabs */
.pdp-tabs { margin-top: 40px }
.tabs-head { display: flex; gap: 0; border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none }
.tabs-head::-webkit-scrollbar { display: none }
.tabs-head button { padding: 16px 22px; font-size: 13.5px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color .15s; background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer }
.tabs-head button:hover { color: var(--ink) }
.tabs-head button.active { color: var(--primary); border-bottom-color: var(--primary) }
.tab-body { padding: 34px 0 20px }
.tab-pane { display: none }
.tab-pane.active { display: block }

/* Descripción / Envíos pane */
.desc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: flex-start }
.desc-grid--single { grid-template-columns: 1fr; max-width: 880px }
.desc-main h2 { font-size: 28px; font-weight: 900; letter-spacing: -.5px; margin-bottom: 14px; color: var(--ink); line-height: 1.2 }
.desc-main h2 em { font-style: normal; color: var(--primary) }
.desc-main p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 14px }
.desc-main img { max-width: 100%; height: auto; border-radius: 10px; margin: 14px 0 }
.feat-list { list-style: none; display: flex; flex-direction: column; gap: 12px }
.feat-list li { padding-left: 32px; position: relative; font-size: 13.5px; color: var(--ink-2); line-height: 1.55 }
.feat-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background-color: var(--primary-soft); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001730' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-size: 12px; background-position: center; background-repeat: no-repeat }
.feat-list li b { color: var(--ink); font-weight: 800 }
.desc-hl { border-radius: 14px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); padding: 24px; display: flex; align-items: center; justify-content: center; max-width: 360px; aspect-ratio: 1/1; margin-left: auto }
.desc-hl img { max-width: 100%; max-height: 100%; object-fit: contain }

/* Specs table */
.specs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px }
.specs-block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; font-weight: 800; color: var(--ink); margin-bottom: 14px; border-bottom: 2px solid var(--primary); padding-bottom: 10px }
.specs-block .srow { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 13px; gap: 12px }
.specs-block .srow:last-child { border-bottom: 0 }
.specs-block .srow .k { color: var(--muted); font-weight: 600 }
.specs-block .srow .v { color: var(--ink); font-weight: 700; text-align: right }

/* WC reviews — embebidas en el tab de Opiniones */
#tab-reviews .commentlist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px }
#tab-reviews .commentlist .comment_container { display: flex; gap: 12px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff }
#tab-reviews .commentlist .avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0 }
#tab-reviews .commentlist .comment-text { flex: 1 }
#tab-reviews .commentlist .meta { font-size: 12px; color: var(--muted); margin-bottom: 6px }
#tab-reviews .commentlist .meta strong { color: var(--ink); font-weight: 700 }
#tab-reviews .star-rating { color: var(--accent-dark); font-size: 13px; letter-spacing: 1.5px; margin-bottom: 8px }
#tab-reviews .description p { font-size: 13px; color: var(--ink-2); line-height: 1.55 }
#tab-reviews #review_form { margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft) }
#tab-reviews #review_form .comment-form-rating label { display: block; font-weight: 700; margin-bottom: 8px }
#tab-reviews #review_form textarea, #tab-reviews #review_form input[type="text"], #tab-reviews #review_form input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px }
#tab-reviews #review_form .submit { background: var(--ink); color: #fff; padding: 12px 24px; border-radius: 10px; font-weight: 700; cursor: pointer; border: 0 }

/* ============================================================
   PAGE: 404 + SEARCH
   ============================================================ */
.err-page { padding: 80px 0; min-height: 60vh }
.err-card { max-width: 720px; margin: 0 auto; text-align: center; padding: 48px 32px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px }
.err-code { font-size: 120px; font-weight: 900; color: var(--primary); letter-spacing: -6px; line-height: 1; margin-bottom: 14px }
.err-code span { color: var(--accent) }
.err-page h1 { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: -.6px; margin-bottom: 12px }
.err-lead { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; max-width: 520px; margin: 0 auto 26px }

.err-search { display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 0 auto 26px; background: #fff; border: 1.5px solid var(--line); border-radius: 100px; padding: 6px 6px 6px 18px; transition: border-color .15s }
.err-search:focus-within { border-color: var(--primary) }
.err-search svg { color: var(--muted); flex-shrink: 0 }
.err-search input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: 14px; color: var(--ink); padding: 10px 0; background: transparent }
.err-search button { background: var(--primary); color: #fff; padding: 11px 22px; border-radius: 100px; font-weight: 700; font-size: 13px; border: 0; cursor: pointer; flex-shrink: 0 }
.err-search button:hover { background: var(--primary-dark) }

.err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.err-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border: 1.5px solid var(--line); padding: 12px 20px; border-radius: 100px; font-weight: 700; font-size: 13px; text-decoration: none; transition: all .15s }
.err-btn:hover { border-color: var(--primary); color: var(--primary) }
.err-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink) }
.err-btn.primary:hover { background: var(--primary); border-color: var(--primary); color: #fff }

.err-popular { margin-top: 60px }
.err-popular h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 18px; text-align: center }
.err-popular .prods { grid-template-columns: repeat(4, 1fr) }

/* Search results */
.search-hero { background: var(--bg-soft); padding: 60px 0 50px; border-bottom: 1px solid var(--line) }
.search-hero .container { max-width: 720px; text-align: center }
.search-hero .chip { display: inline-flex; background: var(--accent); color: var(--ink); padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 16px }
.search-hero h1 { font-size: 32px; font-weight: 900; color: var(--ink); letter-spacing: -.8px; line-height: 1.2; margin-bottom: 8px }
.search-hero h1 em { color: var(--primary); font-style: normal }
.search-hero .lead { font-size: 14px; color: var(--muted); margin-bottom: 22px }
.search-hero .err-search { margin: 0 auto }

.search-results { padding: 0 }
.search-list { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin: 0 auto }
.search-item { padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: all .15s }
.search-item:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(0, 23, 48, .06) }
.search-item h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 6px; letter-spacing: -.2px }
.search-item h3 a { color: inherit; text-decoration: none }
.search-item h3 a:hover { color: var(--primary) }
.search-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; align-items: center }
.search-meta .sep-dot { opacity: .5 }
.search-item p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 10px }
.search-link { color: var(--primary); font-weight: 700; font-size: 12.5px; text-decoration: none }
.search-link:hover { text-decoration: underline }

.search-empty { max-width: 520px; margin: 40px auto; text-align: center; padding: 50px 24px }
.search-empty svg { color: var(--muted); opacity: .35; margin-bottom: 20px }
.search-empty h2 { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 10px }
.search-empty p { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 24px }

/* ============================================================
   WOOCOMMERCE: cart, checkout, mi-cuenta
   Estiliza el output default de WC con tokens del tema.
   ============================================================ */

/* Hero common para WC pages — wrappea el title del post con identidad */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-account .entry-title { font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; margin-bottom: 24px }

/* Container WC: matchear nuestro container global */
body.woocommerce-cart .page-content,
body.woocommerce-checkout .page-content,
body.woocommerce-account .page-content { max-width: 1440px; padding: 40px 24px 80px }

/* Notices (success / error / info) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
}
.woocommerce-message { background: rgba(22, 163, 74, .08); color: var(--success); border: 1px solid rgba(22, 163, 74, .25) }
.woocommerce-info { background: var(--primary-soft); color: var(--primary); border: 1px solid rgba(0, 23, 48, .15) }
.woocommerce-error { background: rgba(220, 38, 38, .06); color: #dc2626; border: 1px solid rgba(220, 38, 38, .25) }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: inherit; font-weight: 700; text-decoration: underline }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { margin-left: auto; background: currentColor; color: #fff; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none }

/* ============= CART (.rg-cart custom template override) ============= */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: flex-start }

/* Form wrapper */
.rg-cart { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0 }

/* Header row: alineado con la grid de los items */
.rg-cart__head { display: grid; grid-template-columns: 96px minmax(0, 1fr) 160px 140px; gap: 18px; padding: 14px 22px; background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted) }
.rg-cart__head-product { grid-column: 1 / 3 }
.rg-cart__head-qty { grid-column: 3; text-align: center }
.rg-cart__head-subtotal { grid-column: 4; text-align: right }

/* Items list */
.rg-cart__items { display: flex; flex-direction: column }

/* Each item row */
.rg-cart__item { display: grid; grid-template-columns: 96px minmax(0, 1fr) 160px 140px; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); align-items: center }
.rg-cart__item:last-child { border-bottom: 0 }

/* Thumbnail box */
.rg-cart__thumb { width: 96px; height: 96px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rg-cart__thumb a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box }
.rg-cart__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block }

/* Info column: name, unit price, remove */
.rg-cart__info { min-width: 0; display: flex; flex-direction: column; gap: 4px }
.rg-cart__name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; word-wrap: break-word }
.rg-cart__name a { color: var(--ink); text-decoration: none }
.rg-cart__name a:hover { color: var(--primary) }
.rg-cart__name .variation { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-weight: 500 }
.rg-cart__price { font-size: 12.5px; color: var(--muted); font-weight: 600 }
.rg-cart__remove { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-decoration: none; margin-top: 6px; padding: 0; background: none; border: 0; cursor: pointer; align-self: flex-start; transition: color .15s; font-weight: 600 }
.rg-cart__remove:hover { color: #dc2626 }
.rg-cart__remove svg { stroke: currentColor; flex-shrink: 0 }

/* Quantity stepper */
.rg-cart__qty { display: flex; justify-content: center }
.rg-cart__qty .quantity { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff }
.rg-cart__qty input.qty { width: 50px; height: 38px; border: 0; text-align: center; font-weight: 700; font-size: 13px; outline: none; color: var(--ink); -moz-appearance: textfield; appearance: textfield }
.rg-cart__qty input.qty::-webkit-outer-spin-button,
.rg-cart__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* Subtotal */
.rg-cart__subtotal { text-align: right; font-size: 16px; font-weight: 800; color: var(--ink) }

/* Actions row (coupon + update) */
.rg-cart__actions { padding: 16px 22px; background: var(--bg-soft); border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.rg-cart__coupon { display: inline-flex; gap: 8px; flex: 1; min-width: 0; max-width: 380px }
.rg-cart__coupon input.input-text { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; outline: none; background: #fff }
.rg-cart__coupon input.input-text:focus { border-color: var(--primary) }
.rg-cart__coupon button { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 12.5px; border: 0; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .15s }
.rg-cart__coupon button:hover { background: var(--primary) }
.rg-cart__update { background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 12.5px; border: 1.5px solid var(--line); cursor: pointer; white-space: nowrap; margin-left: auto; transition: all .15s }
.rg-cart__update:hover { border-color: var(--ink); background: var(--ink); color: #fff }

/* Cart totals (sidebar) */
.cart-collaterals { width: 100%; min-width: 0 }
.cart_totals { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 24px; position: sticky; top: 100px; min-width: 0; box-sizing: border-box }
.cart_totals h2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--primary) }
.cart_totals table { width: 100%; border-collapse: collapse }
.cart_totals table th { font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: left; padding: 10px 0 }
.cart_totals table td { padding: 10px 0; text-align: right; font-weight: 700; color: var(--ink); font-size: 13.5px }
.cart_totals tr.order-total th, .cart_totals tr.order-total td { font-size: 17px; font-weight: 800; color: var(--ink); padding-top: 14px; border-top: 1px dashed var(--line) }
.cart_totals .shipping-calculator-button { color: var(--primary); font-weight: 700; font-size: 12px; text-decoration: none }
.cart_totals .wc-proceed-to-checkout { margin-top: 18px }
.cart_totals .checkout-button { display: block; background: var(--accent); color: var(--ink); padding: 14px 20px; border-radius: 10px; text-align: center; font-weight: 800; font-size: 14px; text-decoration: none; transition: background .15s; border: 1px solid var(--accent-dark) }
.cart_totals .checkout-button:hover { background: var(--accent-dark) }

/* Empty cart */
.rg-cart-empty { text-align: center; padding: 80px 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; grid-column: 1 / -1 }
.rg-cart-empty__icon { color: var(--muted); margin-bottom: 16px; opacity: .4; display: flex; justify-content: center }
.rg-cart-empty h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 8px; letter-spacing: -.3px }
.rg-cart-empty p { font-size: 14px; color: var(--muted); margin-bottom: 22px; max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.5 }
.rg-cart-empty__btn { display: inline-block; background: var(--accent); color: var(--ink); padding: 14px 32px; border-radius: 100px; font-weight: 800; font-size: 14px; text-decoration: none; border: 1px solid var(--accent-dark); transition: background .15s }
.rg-cart-empty__btn:hover { background: var(--accent-dark) }

/* Notices wrapper: siempre ocupa el ancho completo del grid cart/checkout */
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper { grid-column: 1 / -1 }

/* WC page wrapper + hero — base (responsive overrides en @media <=600px más abajo) */
/* padding-block solo: el horizontal lo maneja .container para no romper el centrado */
.wc-page-wrap { padding-top: 40px; padding-bottom: 72px; min-height: 55vh }
.wc-page-hero { position: relative; background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; overflow: hidden; padding: 44px 0 40px }
.wc-page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 219, 14, .14), transparent 55%) }
.wc-page-hero .container { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.wc-page-hero__crumbs { font-size: 12.5px; color: rgba(255,255,255,.55); margin-bottom: 10px }
.wc-page-hero__crumbs a { color: rgba(255,255,255,.55) }
.wc-page-hero__crumbs a:hover { color: var(--accent) }
.wc-page-hero__crumbs .sep { margin: 0 6px; opacity: .4 }
.wc-page-hero h1 { font-size: 34px; font-weight: 900; color: #fff; letter-spacing: -.6px; margin: 0; line-height: 1.1 }
.wc-page-hero__meta { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 600; background: rgba(255,255,255,.08); padding: 6px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,.12) }
.wc-page-hero__meta strong { color: var(--accent) }

/* Productos relacionados — base (responsive overrides en @media más abajo) */
/* Cart-related: spans full grid (col 1 / -1), sin .container anidado */
.cart-related { padding: 48px 0 0; grid-column: 1 / -1; min-width: 0 }
.cart-related__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px }
.cart-related__head h2 { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; margin: 0 }
.cart-related__head a { font-size: 13px; font-weight: 700; color: var(--primary) }
.cart-related .prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-width: 0 }
/* En mobile/tablet se transforma en carrusel horizontal con snap (override en @media abajo) */

/* ============= CHECKOUT (multi-step) ============= */
.woocommerce-checkout .woocommerce { max-width: 1200px; margin: 0 auto }

/* Coupon/login toggles arriba del form */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info { background: var(--primary-soft); color: var(--primary); border: 1px solid rgba(0, 23, 48, .12); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px }
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a { color: var(--primary); font-weight: 700 }
.woocommerce-form-coupon, .woocommerce-form-login { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 16px }
.woocommerce-form-coupon .form-row { display: flex; gap: 8px; margin: 0 }
.woocommerce-form-coupon .form-row input.input-text { flex: 1; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; outline: none }
.woocommerce-form-coupon button[name="apply_coupon"],
.woocommerce-form-login button[type="submit"] { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 12.5px; border: 0; cursor: pointer; white-space: nowrap }

/* ===== Layout: form + sidebar ===== */
.rg-checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start }
.rg-checkout__main { min-width: 0 }
.rg-checkout__sidebar { min-width: 0 }
.rg-checkout__summary { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 22px; position: sticky; top: 100px; box-sizing: border-box }
.rg-checkout__summary h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--primary) }

/* Sidebar items list */
.rg-checkout-summary__items { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px }
.rg-checkout-summary__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center }
.rg-checkout-summary__thumb { position: relative; width: 48px; height: 48px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center }
.rg-checkout-summary__thumb img { max-width: 90%; max-height: 90%; object-fit: contain; display: block }
.rg-checkout-summary__qty { position: absolute; top: -6px; right: -6px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px }
.rg-checkout-summary__name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3 }
.rg-checkout-summary__sub { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap }

/* Sidebar totals */
.rg-checkout-summary__totals { padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px }
.rg-checkout-summary__line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2) }
.rg-checkout-summary__line.is-discount { color: #16a34a }
.rg-checkout-summary__shipping-placeholder { color: var(--muted); font-size: 12px }
.rg-checkout-summary__line.is-total { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line) }

/* ===== Stepper indicator ===== */
.rg-checkout__stepper { list-style: none; padding: 0; margin: 0 0 24px; display: flex; align-items: center; gap: 0; counter-reset: step }
.rg-checkout__step-indicator { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--muted); font-size: 13px; font-weight: 700; position: relative; cursor: default }
.rg-checkout__step-indicator + .rg-checkout__step-indicator::before { content: ""; position: absolute; left: -50%; right: 50%; top: 50%; height: 2px; background: var(--line); z-index: 0; transform: translateY(-50%) }
.rg-checkout__step-num { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--muted); transition: all .2s; flex-shrink: 0 }
.rg-checkout__step-label { white-space: nowrap }
.rg-checkout__step-indicator.is-active .rg-checkout__step-num { background: var(--ink); border-color: var(--ink); color: var(--accent) }
.rg-checkout__step-indicator.is-active { color: var(--ink) }
.rg-checkout__step-indicator.is-done .rg-checkout__step-num { background: var(--accent); border-color: var(--accent-dark); color: var(--ink) }
.rg-checkout__step-indicator.is-done { color: var(--ink-2); cursor: pointer }
.rg-checkout__step-indicator.is-done + .rg-checkout__step-indicator::before,
.rg-checkout__step-indicator.is-active + .rg-checkout__step-indicator.is-done::before { background: var(--accent) }

/* ===== Step panels ===== */
.rg-checkout__step { display: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; margin-bottom: 20px }
.rg-checkout__step.is-active { display: block; animation: rgFadeIn .25s ease }
@keyframes rgFadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }

.rg-checkout__step-head { margin-bottom: 22px }
.rg-checkout__step-head h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 6px; letter-spacing: -.3px }
.rg-checkout__step-head p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5 }

/* Form fields dentro de los pasos */
.rg-checkout__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px }
.rg-checkout__fields .form-row { margin: 0; position: relative; display: flex; flex-direction: column; align-items: stretch }
.rg-checkout__fields .form-row-wide,
.rg-checkout__fields #billing_email_field,
.rg-checkout__fields #billing_phone_field,
.rg-checkout__fields #billing_country_field,
.rg-checkout__fields #billing_address_1_field,
.rg-checkout__fields #billing_address_2_field,
.rg-checkout__fields #billing_company_field { grid-column: 1 / -1 }

.rg-checkout__fields .form-row label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px }
.rg-checkout__fields .form-row .required { color: #dc2626; text-decoration: none }
.rg-checkout__fields .form-row .optional { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px }
.rg-checkout__fields .form-row input.input-text,
.rg-checkout__fields .form-row select,
.rg-checkout__fields .form-row textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color .15s, background .15s }
.rg-checkout__fields .form-row input.input-text:focus,
.rg-checkout__fields .form-row select:focus,
.rg-checkout__fields .form-row textarea:focus { border-color: var(--primary); background: #fff }
.rg-checkout__fields .form-row.has-error input,
.rg-checkout__fields .form-row.has-error select,
.rg-checkout__fields .form-row.has-error textarea,
.rg-checkout__fields .form-row.woocommerce-invalid input,
.rg-checkout__fields .form-row.woocommerce-invalid select { border-color: #dc2626; background: rgba(220, 38, 38, .04) }
.rg-checkout__fields .form-row.has-error::after { content: attr(data-error, "Este campo es obligatorio"); display: block; margin-top: 4px; font-size: 11.5px; color: #dc2626; font-weight: 600 }

/* Select2 (WC usa esto para el dropdown de país/provincia) */
.rg-checkout__fields .select2-container .select2-selection { border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); height: 46px; padding: 8px 8px 8px 14px; box-sizing: border-box }
.rg-checkout__fields .select2-container .select2-selection__rendered { line-height: 28px; color: var(--ink); font-size: 14px; padding-left: 0 }
.rg-checkout__fields .select2-container .select2-selection__arrow { height: 44px }

/* Nav buttons (Volver / Continuar) */
.rg-checkout__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line) }
.rg-checkout__back-link,
.rg-checkout__prev { background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 10px 4px; text-decoration: none; transition: color .15s }
.rg-checkout__back-link:hover,
.rg-checkout__prev:hover { color: var(--ink) }
.rg-checkout__next { background: var(--ink); color: #fff; padding: 13px 28px; border-radius: 100px; font-weight: 800; font-size: 14px; border: 1px solid var(--ink); cursor: pointer; transition: background .15s; margin-left: auto }
.rg-checkout__next:hover { background: var(--primary) }

/* ===== Step 3: Review (tabla de items + totales) ===== */
.rg-review { display: flex; flex-direction: column; gap: 0 }
.rg-review__title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); margin: 0 0 14px }
.rg-review__items { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line) }
.rg-review__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center }
.rg-review__thumb { position: relative; width: 56px; height: 56px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center }
.rg-review__thumb img { max-width: 90%; max-height: 90%; object-fit: contain }
.rg-review__qty { position: absolute; top: -6px; right: -6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px }
.rg-review__info { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35 }
.rg-review__sub { font-size: 14.5px; font-weight: 800; color: var(--ink); white-space: nowrap }
.rg-review__totals { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 0; margin: 0 }
.rg-review__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--ink-2); margin: 0 }
.rg-review__row dt { font-weight: 600 }
.rg-review__row dd { font-weight: 700; color: var(--ink); margin: 0 }
.rg-review__row.is-discount { color: #16a34a }
.rg-review__row.is-discount dd { color: #16a34a }
.rg-review__row.is-total { font-size: 18px; font-weight: 800; color: var(--ink); margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--line) }
.rg-review__row.is-total dd { font-weight: 800 }

/* ===== Payment ===== */
/* Opciones de envío en el checkout — estilo card con radio visible.
   El template `wc_cart_totals_shipping_html()` renderea un `<ul
   id="shipping_method">` con `<li>` que contienen radio + label.
   Antes se veían como bullets de texto plano; ahora son cards
   seleccionables, mismo patrón que los métodos de pago. */
.woocommerce-shipping-totals,
.shipping { display: block; padding: 6px 0 4px }
.woocommerce-shipping-totals .rg-review__row-label,
.woocommerce-shipping-totals dt,
.woocommerce-shipping-totals th { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); margin-bottom: 10px; display: block }
#shipping_method,
.woocommerce-shipping-methods { list-style: none; padding: 0; margin: 8px 0 4px; display: flex; flex-direction: column; gap: 8px }
#shipping_method li,
.woocommerce-shipping-methods li { padding: 12px 14px; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 10px; transition: all .15s; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
#shipping_method li:hover,
.woocommerce-shipping-methods li:hover { border-color: var(--primary-light) }
#shipping_method li:has(input:checked),
.woocommerce-shipping-methods li:has(input:checked) { border-color: var(--primary); background: var(--primary-soft) }
#shipping_method li input[type="radio"],
.woocommerce-shipping-methods li input[type="radio"] { accent-color: var(--primary); margin: 0; flex-shrink: 0 }
#shipping_method li label,
.woocommerce-shipping-methods li label { font-weight: 600; color: var(--ink); cursor: pointer; font-size: 14px; flex: 1; min-width: 0; line-height: 1.3; margin: 0 }
#shipping_method li label .woocommerce-Price-amount { font-weight: 800; color: var(--primary); margin-left: 6px }

.rg-payment { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line) }
.rg-payment__title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); margin: 0 0 14px }
.rg-payment__methods { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px }
.rg-payment__methods li { padding: 14px 16px; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 10px; transition: all .15s; cursor: pointer }
.rg-payment__methods li:has(input:checked) { border-color: var(--primary); background: var(--primary-soft) }
.rg-payment__methods li label { font-weight: 700; color: var(--ink); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 10px }
.rg-payment__methods li input[type="radio"] { accent-color: var(--primary); margin: 0 }
.rg-payment__methods .payment_box { background: #fff; border: 1px solid var(--line); padding: 12px 14px; border-radius: 8px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5 }
.rg-payment__methods .payment_box p:last-child { margin-bottom: 0 }
.rg-payment__none { background: var(--primary-soft); color: var(--primary); padding: 14px; border-radius: 10px; font-size: 13px }

.rg-payment__place-order { display: flex; flex-direction: column; gap: 12px; padding-top: 4px }
.rg-payment__submit,
#place_order { background: var(--accent); color: var(--ink); padding: 16px 28px; border-radius: 100px; font-weight: 800; font-size: 15px; border: 1px solid var(--accent-dark); cursor: pointer; width: 100%; transition: background .15s; box-sizing: border-box; text-align: center }
.rg-payment__submit:hover,
#place_order:hover { background: var(--accent-dark) }

/* Notices del checkout (errores de validación server-side) */
.woocommerce-notices-wrapper .woocommerce-error { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .25); color: #dc2626; list-style: none; padding: 14px 18px; border-radius: 10px; border: 1px solid; margin-bottom: 16px }
.woocommerce-notices-wrapper .woocommerce-error li { margin: 4px 0; font-size: 13.5px }

/* ============= MI CUENTA ============= */
.woocommerce-account .woocommerce { max-width: 1100px; margin: 0 auto }

/* ===== AUTH (login + register) ===== */
.rg-account-auth { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px 32px; box-shadow: 0 4px 24px rgba(0, 23, 48, .04) }
.rg-account-auth__head { text-align: center; margin-bottom: 28px }
.rg-account-auth__head h2 { font-size: 24px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; margin: 0 0 6px }
.rg-account-auth__head p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5 }

/* Bloque Google: arriba, prominente */
.rg-account-auth__google { margin-bottom: 22px }
.rg-account-auth__google .wp_google_login__button-container { width: 100% }
.rg-account-auth__google .wp_google_login__button {
	width: 100%; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	background: #fff; color: var(--ink) !important;
	border: 1.5px solid var(--line); border-radius: 100px;
	padding: 14px 24px;
	font-weight: 700; font-size: 14.5px; text-decoration: none;
	transition: all .15s;
	box-shadow: 0 1px 2px rgba(0, 23, 48, .04);
}
.rg-account-auth__google .wp_google_login__button:hover { background: var(--bg-soft); border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 23, 48, .08) }
.rg-account-auth__google .wp_google_login__google-icon {
	width: 20px; height: 20px; flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23FF3D00' d='M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rg-account-auth__google-perks { list-style: none; padding: 12px 0 0; margin: 0; display: flex; flex-direction: column; gap: 5px }
.rg-account-auth__google-perks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted) }
.rg-account-auth__google-perks svg { color: #16a34a; flex-shrink: 0 }

/* Divider entre Google y email */
.rg-account-auth__divider { position: relative; text-align: center; margin: 24px 0 22px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700 }
.rg-account-auth__divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); z-index: 0 }
.rg-account-auth__divider span { position: relative; z-index: 1; background: #fff; padding: 0 14px }

/* Tabs */
.rg-account-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 100px; padding: 4px; margin-bottom: 22px }
.rg-account-auth__tab { background: none; border: 0; padding: 10px 16px; border-radius: 100px; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .15s; font-family: inherit }
.rg-account-auth__tab:hover { color: var(--ink) }
.rg-account-auth__tab.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 23, 48, .08) }

/* Panels */
.rg-account-auth__panel { display: none }
.rg-account-auth__panel.is-active { display: block; animation: rgFadeIn .25s ease }

/* Hide auto-injected Google button INSIDE forms (we render our own at top) */
.rg-auth-form .wp_google_login { display: none !important }

/* Auth form fields */
.rg-auth-form { display: flex; flex-direction: column; gap: 14px }
.rg-auth-form .form-row { margin: 0; display: flex; flex-direction: column; align-items: stretch }
.rg-auth-form label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px }
.rg-auth-form .required { color: #dc2626 }
.rg-auth-form input.input-text,
.rg-auth-form input[type="text"],
.rg-auth-form input[type="email"],
.rg-auth-form input[type="password"] { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color .15s, background .15s }
.rg-auth-form input:focus { border-color: var(--primary); background: #fff }

.rg-auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: -2px }
.rg-auth-form__remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; font-weight: 500 }
.rg-auth-form__remember input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px }
.rg-auth-form__lost { font-size: 13px; color: var(--primary); font-weight: 700; text-decoration: none }
.rg-auth-form__lost:hover { text-decoration: underline }
.rg-auth-form__hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; line-height: 1.5 }
.rg-auth-form__terms { font-size: 11.5px; color: var(--muted); text-align: center; margin: 0; line-height: 1.5 }
.rg-auth-form__terms a { color: var(--primary); font-weight: 700; text-decoration: none }

.rg-auth-form__submit { width: 100%; box-sizing: border-box; background: var(--accent); color: var(--ink); padding: 14px 24px; border-radius: 100px; font-weight: 800; font-size: 14.5px; border: 1px solid var(--accent-dark); cursor: pointer; transition: background .15s; margin-top: 4px }
.rg-auth-form__submit:hover { background: var(--accent-dark) }

/* ===== LOGGED-IN LAYOUT (sidebar + main) ===== */
.rg-account { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start }
.rg-account__sidebar { position: sticky; top: 100px; min-width: 0 }
.rg-account__main { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 32px; min-width: 0 }

/* User card en sidebar */
.rg-account__user { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px }
.rg-account__avatar img { width: 48px; height: 48px; border-radius: 50%; display: block }
.rg-account__user-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 }
.rg-account__user-greeting { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700 }
.rg-account__user-name { font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rg-account__user-edit { font-size: 11.5px; color: var(--primary); font-weight: 700; text-decoration: none; margin-top: 3px }
.rg-account__user-edit:hover { text-decoration: underline }

/* Sidebar nav */
.rg-account__nav { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px }
.rg-account__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px }
.rg-account__nav ul li a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; transition: all .15s }
.rg-account__nav ul li a:hover { background: var(--bg-soft); color: var(--ink) }
.rg-account__nav ul li.is-active a { background: var(--primary-soft); color: var(--primary) }
.rg-account__nav ul li.is-active a .rg-account__nav-icon { color: var(--primary) }
.rg-account__nav-icon { color: var(--muted); display: inline-flex; flex-shrink: 0; transition: color .15s }
.rg-account__nav ul li a:hover .rg-account__nav-icon { color: var(--ink) }
.rg-account__nav-label { flex: 1 }
/* Logout link visualmente diferenciado */
.rg-account__nav ul li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line) }
.rg-account__nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted) }
.rg-account__nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #dc2626; background: rgba(220, 38, 38, .04) }

/* ===== DASHBOARD ===== */
.rg-dashboard { display: flex; flex-direction: column; gap: 28px }
.rg-dashboard__welcome h2 { font-size: 24px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; margin: 0 0 6px }
.rg-dashboard__welcome p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5 }

.rg-dashboard__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.rg-dashboard__card { display: flex; align-items: center; gap: 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px; text-decoration: none; transition: all .15s; cursor: pointer }
.rg-dashboard__card:hover { background: #fff; border-color: var(--ink); box-shadow: 0 4px 12px rgba(0, 23, 48, .06); transform: translateY(-1px) }
.rg-dashboard__card-icon { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0 }
.rg-dashboard__card:hover .rg-dashboard__card-icon { background: var(--primary-soft); border-color: var(--primary); color: var(--primary) }
.rg-dashboard__card-body { flex: 1; min-width: 0 }
.rg-dashboard__card-body h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 2px }
.rg-dashboard__card-body p { font-size: 12.5px; color: var(--muted); margin: 0 }
.rg-dashboard__card-arrow { font-size: 16px; color: var(--muted); transition: transform .15s }
.rg-dashboard__card:hover .rg-dashboard__card-arrow { color: var(--primary); transform: translateX(3px) }
.rg-dashboard__card--logout:hover { border-color: #dc2626 }
.rg-dashboard__card--logout:hover .rg-dashboard__card-icon { background: rgba(220, 38, 38, .08); border-color: #dc2626; color: #dc2626 }

.rg-dashboard__section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px }
.rg-dashboard__section-head h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -.2px }
.rg-dashboard__section-head a { font-size: 13px; color: var(--primary); font-weight: 700; text-decoration: none }

/* ===== ORDER CARD (compartido entre dashboard + orders list) ===== */
.rg-order-card { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto; gap: 16px; align-items: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; transition: all .15s }
.rg-order-card:hover { background: #fff; border-color: var(--ink); box-shadow: 0 2px 8px rgba(0, 23, 48, .04) }
.rg-order-card__info { display: flex; flex-direction: column; gap: 2px }
.rg-order-card__num { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.2px }
.rg-order-card__date { font-size: 12px; color: var(--muted); font-weight: 600 }
.rg-order-card__items { font-size: 12.5px; color: var(--muted); font-weight: 600 }
.rg-order-card__status { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 5px 10px; border-radius: 100px; white-space: nowrap }
.rg-order-card__status--processing,
.rg-order-card__status--on-hold { background: rgba(255, 219, 14, .15); color: #b45309 }
.rg-order-card__status--completed { background: rgba(22, 163, 74, .12); color: #16a34a }
.rg-order-card__status--pending { background: rgba(0, 23, 48, .08); color: var(--ink-2) }
.rg-order-card__status--cancelled,
.rg-order-card__status--failed,
.rg-order-card__status--refunded { background: rgba(220, 38, 38, .08); color: #dc2626 }
.rg-order-card__total { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap }
.rg-order-card__view { font-size: 13px; color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap }
.rg-order-card__actions { display: flex; gap: 6px; flex-wrap: wrap }
.rg-order-card__btn { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 6px; text-decoration: none; background: var(--ink); color: #fff; transition: background .15s }
.rg-order-card__btn:hover { background: var(--primary) }
.rg-order-card__btn--pay { background: var(--accent); color: var(--ink); border: 1px solid var(--accent-dark) }
.rg-order-card__btn--pay:hover { background: var(--accent-dark) }

/* ===== ORDERS LIST ===== */
.rg-orders__head h2 { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.3px; margin: 0 0 4px }
.rg-orders__head p { font-size: 13.5px; color: var(--muted); margin: 0 0 22px }
.rg-orders__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px }
.rg-orders__pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line) }
.rg-orders__pag-btn { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 8px; transition: background .15s }
.rg-orders__pag-btn:hover { background: var(--bg-soft) }
.rg-orders__pag-info { font-size: 12.5px; color: var(--muted); font-weight: 600 }
.rg-orders__empty { text-align: center; padding: 60px 24px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 14px }
.rg-orders__empty svg { color: var(--muted); margin-bottom: 14px; opacity: .5 }
.rg-orders__empty h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 6px }
.rg-orders__empty p { font-size: 13.5px; color: var(--muted); margin: 0 0 18px }
.rg-orders__shop-btn { display: inline-block; background: var(--accent); color: var(--ink); padding: 12px 26px; border-radius: 100px; font-weight: 800; font-size: 13.5px; text-decoration: none; border: 1px solid var(--accent-dark) }
.rg-orders__shop-btn:hover { background: var(--accent-dark) }

/* ===== Form fields genéricos del .rg-account__main (edit-account, edit-address, etc) ===== */
.rg-account__main h2, .rg-account__main h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 16px; letter-spacing: -.2px }
.rg-account__main form { display: flex; flex-direction: column; gap: 14px }
.rg-account__main .form-row, .rg-account__main .woocommerce-form-row { margin: 0 }
.rg-account__main .form-row label, .rg-account__main .woocommerce-form-row label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px }
.rg-account__main .woocommerce-Input,
.rg-account__main input[type="text"],
.rg-account__main input[type="email"],
.rg-account__main input[type="password"],
.rg-account__main input[type="tel"],
.rg-account__main select,
.rg-account__main textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color .15s, background .15s }
.rg-account__main input:focus, .rg-account__main select:focus, .rg-account__main textarea:focus { border-color: var(--primary); background: #fff }
.rg-account__main button[type="submit"], .rg-account__main .woocommerce-Button { background: var(--ink); color: #fff; padding: 12px 24px; border-radius: 100px; font-weight: 800; font-size: 13.5px; border: 0; cursor: pointer; transition: background .15s; align-self: flex-start; font-family: inherit }
.rg-account__main button[type="submit"]:hover, .rg-account__main .woocommerce-Button:hover { background: var(--primary) }
.rg-account__main .woocommerce-Address { background: var(--bg-soft); padding: 22px; border-radius: 12px; border: 1px solid var(--line) }
.rg-account__main .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px }
.rg-account__main .woocommerce-Address-title h3 { margin: 0 }
.rg-account__main .edit { font-size: 12.5px; font-weight: 700; color: var(--primary); text-decoration: none }
.rg-account__main .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.rg-account__main .u-columns > .u-column1, .rg-account__main .u-columns > .u-column2 { background: transparent; padding: 0; border: 0 }
.rg-account__main address { font-style: normal; font-size: 13.5px; color: var(--ink-2); line-height: 1.6 }
/* Inline notices (success/info dentro del main) */
.rg-account__main .woocommerce-message,
.rg-account__main .woocommerce-info { font-size: 13.5px }

/* ===== ADDRESSES (my-address.php override) ===== */
.rg-addresses__head { margin-bottom: 22px }
.rg-addresses__head h2 { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.3px; margin: 0 0 4px }
.rg-addresses__head p { font-size: 13.5px; color: var(--muted); margin: 0 }
.rg-addresses__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }

.rg-address-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 22px; transition: border-color .15s }
.rg-address-card:hover { border-color: var(--ink) }
.rg-address-card.is-empty { background: #fff; border-style: dashed }
.rg-address-card.is-empty:hover { border-color: var(--primary); background: var(--primary-soft) }

.rg-address-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.rg-address-card.is-empty .rg-address-card__head { border-bottom: 0; margin-bottom: 0; padding-bottom: 0 }
.rg-address-card__head h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0; text-transform: uppercase; letter-spacing: .4px }
.rg-address-card__edit { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--primary); font-weight: 700; text-decoration: none; padding: 5px 10px; border-radius: 6px; transition: background .15s }
.rg-address-card__edit:hover { background: var(--primary-soft) }
.rg-address-card__edit svg { stroke: currentColor }

.rg-address-card__body address { font-style: normal; font-size: 13.5px; color: var(--ink-2); line-height: 1.6 }
.rg-address-card__empty { text-align: center; padding: 14px 0 0 }
.rg-address-card__empty svg { color: var(--muted); opacity: .5; margin-bottom: 10px }
.rg-address-card__empty p { font-size: 13px; color: var(--muted); margin: 0 0 14px }
.rg-address-card__add { display: inline-block; background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 100px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s }
.rg-address-card__add:hover { background: var(--primary) }

/* ===== EDIT ACCOUNT (form-edit-account.php override) ===== */
.rg-edit-account { display: flex; flex-direction: column; gap: 28px }
.rg-edit-account__head h2 { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.3px; margin: 0 0 4px }
.rg-edit-account__head p { font-size: 13.5px; color: var(--muted); margin: 0 }

.rg-edit-account__section { display: flex; flex-direction: column; gap: 14px }
.rg-edit-account__section-title { font-size: 13px; font-weight: 800; color: var(--ink); margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--primary); text-transform: uppercase; letter-spacing: .5px }
.rg-edit-account__section-help { font-size: 13px; color: var(--muted); margin: -6px 0 0; line-height: 1.5 }

.rg-edit-account__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px }
/* Forzar flex-column en cada form-row para que label se ubique arriba del input
   (CSS de WC core puede inyectar reglas que rompen el flujo block normal) */
.rg-edit-account__grid .form-row { margin: 0; display: flex; flex-direction: column; align-items: stretch }
.rg-edit-account__grid .form-row--wide { grid-column: 1 / -1 }
.rg-edit-account__grid label { display: block; width: 100%; font-size: 11.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; line-height: 1.3 }
.rg-edit-account__grid .required { color: #dc2626 }
.rg-edit-account__grid input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color .15s, background .15s }
.rg-edit-account__grid input:focus { border-color: var(--primary); background: #fff }
.rg-edit-account__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.5; font-style: normal }

.rg-edit-account__submit { padding-top: 8px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 4px }
.rg-edit-account__btn { background: var(--accent); color: var(--ink); padding: 13px 32px; border-radius: 100px; font-weight: 800; font-size: 14px; border: 1px solid var(--accent-dark); cursor: pointer; font-family: inherit; transition: background .15s }
.rg-edit-account__btn:hover { background: var(--accent-dark) }

/* ===== EDIT ADDRESS (form-edit-address.php override) ===== */
.rg-edit-address__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px }
.rg-edit-address__head h2 { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.3px; margin: 0 }
.rg-edit-address__back { font-size: 13px; color: var(--muted); font-weight: 700; text-decoration: none; transition: color .15s }
.rg-edit-address__back:hover { color: var(--ink) }

.rg-edit-address__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px }
.rg-edit-address__grid .form-row { margin: 0; display: flex; flex-direction: column; align-items: stretch }
.rg-edit-address__grid .form-row-wide,
.rg-edit-address__grid #billing_address_1_field,
.rg-edit-address__grid #billing_address_2_field,
.rg-edit-address__grid #billing_country_field,
.rg-edit-address__grid #billing_company_field,
.rg-edit-address__grid #shipping_address_1_field,
.rg-edit-address__grid #shipping_address_2_field,
.rg-edit-address__grid #shipping_country_field,
.rg-edit-address__grid #shipping_company_field { grid-column: 1 / -1 }
.rg-edit-address__grid label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px }
.rg-edit-address__grid .required { color: #dc2626 }
.rg-edit-address__grid input,
.rg-edit-address__grid select { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-family: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color .15s, background .15s }
.rg-edit-address__grid input:focus, .rg-edit-address__grid select:focus { border-color: var(--primary); background: #fff }
.rg-edit-address__grid .select2-container .select2-selection { border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); height: 46px; padding: 8px 8px 8px 14px; box-sizing: border-box }
.rg-edit-address__grid .select2-container .select2-selection__rendered { line-height: 28px; color: var(--ink); font-size: 14px; padding-left: 0 }
.rg-edit-address__grid .select2-container .select2-selection__arrow { height: 44px }

.rg-edit-address__submit { padding-top: 22px; margin-top: 18px; border-top: 1px solid var(--line) }
.rg-edit-address__btn { background: var(--accent); color: var(--ink); padding: 13px 32px; border-radius: 100px; font-weight: 800; font-size: 14px; border: 1px solid var(--accent-dark); cursor: pointer; font-family: inherit; transition: background .15s }
.rg-edit-address__btn:hover { background: var(--accent-dark) }

/* ============================================================
   PAGE TEMPLATE: LEGAL (Términos / Privacidad / etc)
   ============================================================ */
.legal-hero { background: var(--bg-soft); padding: 50px 0 32px; border-bottom: 1px solid var(--line) }
.legal-hero .container { max-width: 820px }
.legal-crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 14px }
.legal-crumbs a { color: var(--muted) }
.legal-crumbs a:hover { color: var(--primary) }
.legal-crumbs .sep { margin: 0 8px; opacity: .6 }
.legal-crumbs b { color: var(--ink); font-weight: 600 }
.legal-hero h1 { font-size: 36px; font-weight: 900; letter-spacing: -.8px; line-height: 1.1; color: var(--ink); margin-bottom: 10px }
.legal-hero .lead { font-size: 15px; color: var(--ink-2); line-height: 1.55; max-width: 640px; margin-bottom: 14px }
.legal-meta { font-size: 12px; color: var(--muted); font-weight: 600 }

.legal-section { padding: 50px 0 80px }
.legal-content { max-width: 820px; margin: 0 auto; font-size: 15px; line-height: 1.7; color: var(--ink-2) }
.legal-content h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 36px 0 12px; letter-spacing: -.3px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); display: inline-block }
.legal-content h2:first-child { margin-top: 0 }
.legal-content h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 26px 0 10px }
.legal-content h4 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 20px 0 8px }
.legal-content p { margin-bottom: 14px }
.legal-content ul, .legal-content ol { margin: 0 0 14px 22px; padding: 0 }
.legal-content ul li, .legal-content ol li { margin-bottom: 8px }
.legal-content a { color: var(--primary); font-weight: 700 }
.legal-content a:hover { text-decoration: underline }
.legal-content blockquote { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 18px 0; font-style: italic; color: var(--ink) }
.legal-content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px }
.legal-content th, .legal-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left }
.legal-content th { background: var(--bg-soft); font-weight: 800; color: var(--ink) }
.legal-content code { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px }

/* ============================================================
   PAGE: EMPRESAS (B2B / cotizaciones / licitaciones)
   ============================================================ */

/* Hero — gradient + 2 columns (texto + stats panel) */
.biz-hero { position: relative; background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; overflow: hidden; padding: 80px 0 90px }
.biz-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 219, 14, .18), transparent 55%) }
.biz-hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center }
.biz-hero .chip { display: inline-flex; background: var(--accent); color: var(--ink); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 22px }
.biz-hero h1 { font-size: 48px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 18px; color: #fff }
.biz-hero h1 em { color: var(--accent); font-style: normal }
.biz-hero .lead { font-size: 16px; line-height: 1.55; opacity: .92; max-width: 540px; margin-bottom: 28px }
.biz-hero .actions { display: flex; gap: 12px; flex-wrap: wrap }
.biz-hero .btn-y { background: var(--accent); color: var(--ink); padding: 14px 26px; border-radius: 100px; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .15s; border: 1px solid var(--accent-dark) }
.biz-hero .btn-y:hover { background: var(--accent-dark) }
.biz-hero .btn-o { background: rgba(255, 255, 255, .08); color: #fff; padding: 14px 26px; border-radius: 100px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .15s; border: 1px solid rgba(255, 255, 255, .2) }
.biz-hero .btn-o:hover { background: rgba(255, 255, 255, .15) }
.biz-hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat }
.biz-hero--has-bg::before { background: linear-gradient(110deg, rgba(0, 23, 48, .60) 0%, rgba(10, 34, 64, .45) 60%, rgba(0, 0, 0, .35) 100%) }

/* Stats panel del hero */
.biz-stats-panel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; padding: 26px; backdrop-filter: blur(8px) }
.biz-stats-panel .ph { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 18px }
.biz-stats-panel .row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08) }
.biz-stats-panel .row:first-of-type { border-top: 0; padding-top: 0 }
.biz-stats-panel .row .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.biz-stats-panel .row b { display: block; color: #fff; font-weight: 800; font-size: 13.5px; margin-bottom: 2px }
.biz-stats-panel .row span { color: rgba(255, 255, 255, .75); font-size: 12px }

/* Form section */
.biz-form-sec { padding: 70px 0 90px; background: var(--bg-soft) }
.biz-form-sec .head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}
.biz-form-sec .head .lbl { display: inline-block; background: var(--primary-soft); color: var(--primary); padding: 5px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px }
.biz-form-sec .head h2 { font-size: 36px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: var(--ink); margin-bottom: 12px }
.biz-form-sec .head h2 em { font-style: normal; color: var(--primary) }
.biz-form-sec .head .sub { font-size: 15px; color: var(--muted); line-height: 1.55 }

.biz-form-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: flex-start }

/* Form groups con label numerado */
.form-group { background: var(--bg-soft); margin: 0 -28px 24px; padding: 0 28px 16px !important; border-bottom: 1px solid var(--line) }
.ct-form .form-group:last-of-type { border-bottom: 0; margin-bottom: 12px }
.grp-lbl { display: inline-block; background: var(--primary); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 16px; margin-top: 4px }

/* File upload custom */
.file-upload { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: all .15s }
.file-upload:hover { border-color: var(--primary); background: var(--primary-soft) }
.file-upload .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.file-upload .txt b { display: block; font-size: 13px; color: var(--ink); font-weight: 700; margin-bottom: 2px }
.file-upload .txt span { font-size: 11.5px; color: var(--muted) }
.file-upload input[type="file"] { display: none }
.file-upload.has-file { border-style: solid; border-color: var(--success) }
.file-upload.has-file .ic { background: rgba(22, 163, 74, .1); color: var(--success) }

/* ============================================================
   PAGE: CONTACTO (/contacto/)
   ============================================================ */
.ct-hero { position: relative; background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; overflow: hidden; padding: 80px 0 100px }
.ct-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 219, 14, .18), transparent 55%) }
.ct-hero::after { content: ""; position: absolute; top: -40px; right: -40px; width: 300px; height: 300px; background: var(--accent); opacity: .08; border-radius: 50%; filter: blur(20px) }
.ct-hero .container { position: relative; z-index: 2; max-width: 900px; text-align: center }
.ct-hero .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--ink); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 24px }
.ct-hero h1 { font-size: 56px; font-weight: 900; letter-spacing: -1.8px; line-height: 1.05; margin-bottom: 20px; color: #fff }
.ct-hero h1 em { color: var(--accent); font-style: normal }
.ct-hero .lead { font-size: 17px; line-height: 1.55; opacity: .92; max-width: 640px; margin: 0 auto 8px }
.ct-hero .reply { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; font-weight: 700; color: var(--accent) }
.ct-hero .reply::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 219, 14, .25); animation: ragaglia-pulse 2s infinite }
.ct-hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat }
.ct-hero--has-bg::before { background: linear-gradient(110deg, rgba(0,23,48,.45) 0%, rgba(10,34,64,.30) 60%, rgba(0,0,0,.20) 100%) }
.ct-hero--has-bg::after { display: none }
.ct-hero--has-bg .container { max-width: 1440px; text-align: left }
.ct-hero--has-bg .lead { max-width: 640px; margin-left: 0; margin-right: 0 }
@keyframes ragaglia-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 219, 14, .25) } 50% { box-shadow: 0 0 0 8px rgba(255, 219, 14, .1) } }

/* Quick contact cards — overlap sobre el hero */
.ct-quick { padding: 40px 0; margin-top: -50px; position: relative; z-index: 5 }
.ct-quick .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.ct-qcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; transition: all .2s; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit }
.ct-qcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 23, 48, .1); border-color: transparent }
.ct-qcard .ic-big { width: 56px; height: 56px; border-radius: 16px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px }
.ct-qcard.wa .ic-big { background: #25D366 }
.ct-qcard .lbl { font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px }
.ct-qcard h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 6px; letter-spacing: -.3px }
.ct-qcard p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; flex: 1 }
.ct-qcard .go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--primary); padding-top: 10px; border-top: 1px dashed var(--line); width: 100%; justify-content: center }
.ct-qcard:hover .go { color: var(--primary-dark) }

/* Form + Side */
.ct-main { padding: 40px 0 80px }
.ct-main .wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: flex-start }
.ct-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 40px }
.ct-form .head { margin-bottom: 28px }
.ct-form .head .lbl { display: inline-block; background: var(--primary-soft); color: var(--primary); padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 12px }
.ct-form h2 { font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: var(--ink); margin-bottom: 8px }
.ct-form h2 em { font-style: normal; color: var(--primary) }
.ct-form .sub { font-size: 14px; color: var(--muted); line-height: 1.55 }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form-field { margin-bottom: 16px }
.form-field.full { grid-column: 1 / -1 }
.form-field label { display: block; font-size: 12px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px }
.form-field label .req { color: var(--primary); margin-left: 2px }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-family: inherit; font-size: 13.5px; color: var(--ink); outline: none; transition: all .15s }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--primary); background: #fff }
.form-field textarea { resize: vertical; min-height: 130px }
.form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232a4060' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px }

.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; cursor: pointer; margin-bottom: 20px }
.form-check input { margin-top: 2px; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; flex-shrink: 0; position: relative; transition: all .15s }
.form-check input:checked { background: var(--primary); border-color: var(--primary) }
.form-check input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.form-check a { color: var(--primary); font-weight: 700 }

.btn-submit { background: var(--ink); color: #fff; padding: 15px 32px; border-radius: 100px; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: all .15s; border: 0; cursor: pointer; font-family: inherit }
.btn-submit:hover { background: var(--primary) }
.btn-submit:hover .arrow { transform: translateX(2px) }
.btn-submit .arrow { transition: transform .15s }

/* Notice de éxito/error post-submit */
.ct-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; margin-bottom: 24px; font-size: 13.5px; line-height: 1.5 }
.ct-notice b { display: block; margin-bottom: 2px }
.ct-notice--ok { background: rgba(22, 163, 74, .08); color: var(--success); border: 1px solid rgba(22, 163, 74, .25) }
.ct-notice--ok b { color: var(--success) }
.ct-notice--ok span { color: var(--ink-2) }
.ct-notice--err { background: rgba(220, 38, 38, .06); color: #dc2626; border: 1px solid rgba(220, 38, 38, .25) }
.ct-notice--err b { color: #dc2626 }
.ct-notice--err span { color: var(--ink-2) }
.ct-notice svg { flex-shrink: 0; margin-top: 2px }

/* Side info */
.ct-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px }
.ct-side-box { background: linear-gradient(135deg, #001730, #0a2240); color: #fff; padding: 30px 28px; border-radius: 18px; position: relative; overflow: hidden }
.ct-side-box::before { content: ""; position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255, 219, 14, .2), transparent 60%) }
.ct-side-box > * { position: relative; z-index: 2 }
.ct-side-box .lbl { display: inline-block; background: var(--accent); color: var(--ink); padding: 4px 10px; border-radius: 100px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 14px }
.ct-side-box h3 { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 10px; letter-spacing: -.5px; color: #fff }
.ct-side-box h3 em { font-style: normal; color: var(--accent) }
.ct-side-box p { font-size: 13px; opacity: .85; line-height: 1.55; margin-bottom: 20px }
.ct-side-box .info-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px }
.ct-side-box .info-row:first-of-type { border-top: 0; padding-top: 0 }
.ct-side-box .info-row .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0 }
.ct-side-box .info-row b { display: block; color: #fff; font-weight: 700; margin-bottom: 2px }
.ct-side-box .info-row span { opacity: .75; font-size: 11.5px }

.ct-side-wa { background: #25D366; color: #fff; padding: 22px 26px; border-radius: 18px; display: flex; align-items: center; gap: 16px; text-decoration: none; transition: all .15s }
.ct-side-wa:hover { background: #1ebe57 }
.ct-side-wa .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .15); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.ct-side-wa b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 2px; color: #fff }
.ct-side-wa span { display: block; font-size: 12px; opacity: .95 }
.ct-side-wa .arrow { margin-left: auto }

/* Sucursal con embed de mapa */
.suc-pic--map { aspect-ratio: 16/9; padding: 0; background: #f5f7fa }
.suc-pic--map iframe { display: block; width: 100%; height: 100%; border: 0 }

/* ============================================================
   PAGE: FAQ (/faq/)
   ============================================================ */
.fq-hero { background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; padding: 70px 0 60px; text-align: center; position: relative; overflow: hidden }
.fq-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 219, 14, .16), transparent 55%) }
.fq-hero .container { position: relative; z-index: 2; max-width: 780px }
.fq-hero .chip { display: inline-flex; background: var(--accent); color: var(--ink); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 22px }
.fq-hero h1 { font-size: 48px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 14px; color: #fff }
.fq-hero h1 em { color: var(--accent); font-style: normal }
.fq-hero .lead { font-size: 15.5px; line-height: 1.55; opacity: .88; max-width: 560px; margin: 0 auto }
.fq-hero .search-box { background: #fff; max-width: 520px; margin: 30px auto 0; border-radius: 100px; padding: 6px 6px 6px 22px; display: flex; align-items: center; gap: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, .22) }
.fq-hero .search-box svg { color: var(--muted); flex-shrink: 0 }
.fq-hero .search-box input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: 14px; color: var(--ink); padding: 8px 0; background: transparent }
.fq-hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat }
.fq-hero--has-bg::before { background: linear-gradient(110deg, rgba(0, 23, 48, .60) 0%, rgba(10, 34, 64, .45) 60%, rgba(0, 0, 0, .35) 100%) }

.fq-page { padding: 60px 0 90px }
.fq-page .wrap { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: flex-start }

/* Sidebar nav */
.fq-nav { position: sticky; top: 100px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 2px }
.fq-nav a { padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); transition: all .15s; display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none }
.fq-nav a:hover { background: var(--bg-soft); color: var(--ink) }
.fq-nav a.active { background: var(--primary-soft); color: var(--primary) }
.fq-nav a .ic { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit }

/* Content */
.fq-content { display: flex; flex-direction: column; gap: 48px }
.fq-group { scroll-margin-top: 110px } /* offset por header sticky cuando scrollea por anchor */
.fq-group h2 { font-size: 24px; font-weight: 900; letter-spacing: -.6px; margin-bottom: 18px; color: var(--ink); display: flex; align-items: center; gap: 12px }
.fq-group h2 em { color: var(--primary); font-style: normal }
.fq-group h2 .n { background: var(--primary); color: #fff; width: 28px; height: 28px; border-radius: 8px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; flex-shrink: 0 }

/* Acordeón */
.faq-list { display: flex; flex-direction: column; gap: 10px }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: all .15s }
.faq-item:hover { border-color: var(--primary-light) }
.faq-item.open { border-color: var(--primary); box-shadow: 0 12px 32px rgba(0, 23, 48, .06) }
.faq-q { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; width: 100%; text-align: left; background: transparent; font-family: inherit; border: 0 }
.faq-q span:first-child { font-size: 14.5px; font-weight: 700; color: var(--ink); flex: 1 }
.faq-q .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; font-weight: 700; transition: all .2s; line-height: 1 }
.faq-item.open .plus { background: var(--primary); color: #fff; transform: rotate(45deg) }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease }
.faq-item.open .faq-a { max-height: 1000px } /* alto generoso para respuestas largas */
.faq-a-in { padding: 16px 24px 22px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; border-top: 1px dashed var(--line); margin: 0 24px; padding-left: 0; padding-right: 0 }
.faq-a-in p:not(:last-child) { margin-bottom: 10px }

/* Help box */
.fq-help { margin-top: 10px; background: linear-gradient(135deg, #001730, #0a2240); color: #fff; padding: 28px 32px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; overflow: hidden }
.fq-help::before { content: ""; position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255, 219, 14, .2), transparent 60%) }
.fq-help > * { position: relative; z-index: 2 }
.fq-help h3 { font-size: 19px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.3px }
.fq-help h3 em { color: var(--accent); font-style: normal }
.fq-help p { font-size: 13px; opacity: .85 }
.fq-help .btns { display: flex; gap: 10px; flex-wrap: wrap }
.fq-help .btn-h { background: var(--accent); color: var(--ink); padding: 11px 20px; border-radius: 100px; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; transition: background .15s; text-decoration: none }
.fq-help .btn-h:hover { background: #fff }
.fq-help .btn-h.wa { background: #25D366; color: #fff }
.fq-help .btn-h.wa:hover { background: #1ebe57 }

/* Filtro: ocultar items que no matchean */
.faq-item.is-hidden { display: none }
.fq-group.is-hidden { display: none }

/* Estado vacío */
.fq-empty { text-align: center; max-width: 560px; margin: 60px auto; padding: 40px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px }
.fq-empty h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 8px }
.fq-empty p { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 20px }
.fq-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.fq-empty .btn-h { background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 100px; font-weight: 700; font-size: 13px; text-decoration: none }
.fq-empty .btn-h.wa { background: var(--accent); color: var(--ink) }

/* ============================================================
   PAGE: WISHLIST (/favoritos/)
   ============================================================ */
.wishlist-page { min-height: 280px }
.wishlist-loading { padding: 60px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px }
.wishlist-loading svg { color: var(--accent) }
.wishlist-empty { padding: 80px 20px; text-align: center; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; margin: 0 auto }
.wishlist-empty svg { color: var(--muted); opacity: .4 }
.wishlist-empty h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 4px }
.wishlist-empty p { color: var(--muted); font-size: 14px; line-height: 1.5 }
.wishlist-empty .mini-cart-btn { margin-top: 8px; padding: 12px 22px }

.wishlist-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; font-size: 13.5px; color: var(--muted) }
.wishlist-toolbar b { color: var(--ink); font-weight: 800 }
.js-wishlist-clear { background: transparent; border: 1px solid var(--line); color: var(--ink-2); padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s }
.js-wishlist-clear:hover { background: var(--ink); color: #fff; border-color: var(--ink) }

.wishlist-grid { grid-template-columns: repeat(4, 1fr) !important }
.wishlist-grid .prod { transition: opacity .2s, transform .2s }

@media (max-width: 1200px) { .wishlist-grid { grid-template-columns: repeat(3, 1fr) !important } }
@media (max-width: 900px)  { .wishlist-grid { grid-template-columns: repeat(2, 1fr) !important } }
@media (max-width: 480px)  { .wishlist-grid { grid-template-columns: 1fr !important } }

/* Infinite scroll */
.infinite-status { padding: 28px 20px 12px; text-align: center }
.infinite-loader { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px }
/* Atributo `hidden` debe ganarle a las reglas de display:flex/inline-flex
   anteriores. Sin esto, los mensajes "Cargando…" y "Llegaste al final"
   aparecen ambos visibles a la vez. */
.infinite-loader[hidden], .infinite-end[hidden] { display: none }
.infinite-loader::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: ragaglia-spin .8s linear infinite }
.infinite-end { color: var(--muted); font-size: 13px; padding: 8px 0; opacity: .7 }
.infinite-sentinel { height: 1px; width: 100% }
@keyframes ragaglia-spin { to { transform: rotate(360deg) } }

/* Filters drawer backdrop (mobile only) */
.filters-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 23, 48, .5); z-index: 40; opacity: 0; transition: opacity .25s }
body.filters-open .filters-backdrop { display: block; opacity: 1 }
body.filters-open { overflow: hidden }

/* ============================================================
   RESPONSIVE
   Breakpoints:
   - <=1200px: laptop tweaks
   - <=900px : tablet — hamburger appears, grids collapse
   - <=600px : mobile — full single-column, simplified header
   ============================================================ */

/* Hamburger button — hidden on desktop, shown on tablet/mobile */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); background: transparent; cursor: pointer; flex-shrink: 0 }
.nav-toggle:hover { background: var(--bg-soft) }
.nav-toggle .bars { display: flex; flex-direction: column; gap: 4px; width: 22px }
.nav-toggle .bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s }
body.nav-open .nav-toggle .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
body.nav-open .nav-toggle .bars span:nth-child(2) { opacity: 0 }
body.nav-open .nav-toggle .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* Mobile search trigger (icon-only button when search is collapsed) */
.search-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); background: transparent; cursor: pointer }
.search-toggle:hover { background: var(--bg-soft) }

/* Backdrop for open mobile nav — root-level sibling de header-sticky para escapar stacking context */
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 23, 48, .55); z-index: 90; opacity: 0; transition: opacity .25s; cursor: pointer }
body.nav-open .nav-backdrop { display: block; opacity: 1 }

/* ============================================================
   MOBILE DRAWER (.md-drawer) — sibling root de .header-sticky
   Se ve solo en mobile, position: fixed con z-index 100 (encima del backdrop).
   ============================================================ */
.md-drawer { display: none }
.md-search-btn { display: none }

/* ============= <=1200px : laptop ============= */
@media (max-width: 1200px) {
	.container { padding: 0 20px }
	.head { gap: 20px }
	.benefits .row { grid-template-columns: repeat(3, 1fr) }
	.benefit:nth-child(3n) { border-right: none }
	.cats { grid-template-columns: repeat(3, 1fr) }
	.prods { grid-template-columns: repeat(4, 1fr); gap: 12px }
	/* Home carruseles muestran 4 max en este breakpoint; la tienda (js-infinite-prods) muestra todos. */
	.prods:not(.js-infinite-prods):not(.prods-carousel) .prod:nth-child(5) { display: none }
	.prods-carousel { gap: 12px }
	.prods-carousel > .prod { flex: 0 0 calc((100% - 12px * 3) / 4) }
	.foot { grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 32px }

	/* Tienda */
	.shop-grid { grid-template-columns: 220px 1fr; gap: 22px }
	.shop-main .prods { grid-template-columns: repeat(3, 1fr); gap: 12px }

	/* Empresas */
	.biz-hero .container { grid-template-columns: 1fr; gap: 32px }
	.biz-form-wrap { grid-template-columns: 1fr; gap: 24px }

	/* Contacto */
	.ct-quick .grid { grid-template-columns: repeat(2, 1fr) }
	.ct-main .wrap { grid-template-columns: 1fr; gap: 28px }
	.ct-side { position: static }

	/* WC: cart en single col en tablet */
	.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 24px }
	.cart_totals { position: static }
	/* Productos relacionados: carrusel horizontal con snap (no más grid) */
	.cart-related .prods { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; min-width: 0; max-width: 100% }
	.cart-related .prods::-webkit-scrollbar { display: none }
	.cart-related .prods .prod { flex: 0 0 calc((100% - 14px * 2) / 3); scroll-snap-align: start; min-width: 0 }
	/* Checkout multi-paso: tablet/mobile single column, sidebar al final */
	.rg-checkout__layout { grid-template-columns: minmax(0, 1fr); gap: 24px }
	.rg-checkout__summary { position: static }
	/* En mobile el sidebar lo escondemos en pasos 1-2 (el step 3 ya tiene el resumen completo en .rg-review) */
	.rg-checkout__sidebar { order: 2 }
	.rg-checkout__main { order: 1 }
	.rg-checkout__step { padding: 22px 18px }
	/* Stepper: ocultar labels en pantallas chicas, sólo números */
	.rg-checkout__step-label { display: none }
	.rg-checkout__step-indicator { gap: 0; justify-content: center }
	.rg-checkout__step-indicator + .rg-checkout__step-indicator::before { left: -50%; right: 50% }
	/* Fields: una sola columna */
	.rg-checkout__fields { grid-template-columns: 1fr }
	/* Mi cuenta tablet/mobile: sidebar arriba (horizontal scroll), main abajo */
	.rg-account { grid-template-columns: 1fr; gap: 16px }
	.rg-account__sidebar { position: static }
	.rg-account__user { padding: 14px }
	.rg-account__nav ul { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px }
	.rg-account__nav ul::-webkit-scrollbar { display: none }
	.rg-account__nav ul li a { white-space: nowrap; padding: 10px 12px }
	.rg-account__nav ul li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--line); padding-left: 4px; margin-left: 4px }
	.rg-account__main { padding: 22px 18px }
	/* Dashboard cards: 1 col en tablet/mobile */
	.rg-dashboard__cards { grid-template-columns: 1fr }
	/* Order card: stack en tablet (info + status arriba, total + view abajo) */
	.rg-order-card { grid-template-columns: 1fr auto; gap: 10px 14px }
	.rg-order-card__info { grid-column: 1 }
	.rg-order-card__status { grid-column: 2; justify-self: end }
	.rg-order-card__items { grid-column: 1; font-size: 12px }
	.rg-order-card__total { grid-column: 1 }
	.rg-order-card__view, .rg-order-card__actions { grid-column: 2; justify-self: end }
	.rg-account__main .u-columns { grid-template-columns: 1fr }

	/* 404 + search */
	.err-popular .prods { grid-template-columns: repeat(3, 1fr) }
	.search-hero h1 { font-size: 26px }

	/* FAQ */
	.fq-page .wrap { grid-template-columns: 200px 1fr; gap: 28px }

	/* PDP — gallery un poco más chica */
	.pdp-grid { grid-template-columns: 1fr 1fr; gap: 32px }
	.spec-strip { grid-template-columns: repeat(6, 1fr); padding: 18px 10px }
	.spec-strip .sp b { font-size: 20px }
	.desc-grid { gap: 28px }
}

/* ============= <=900px : tablet ============= */
@media (max-width: 900px) {
	/* Topbar — keep but condense */
	.topbar { font-size: 11.5px; padding: 6px 0 }
	.topbar .row { gap: 12px }
	.topbar .left span:nth-child(5),
	.topbar .left .sep:nth-child(4) { display: none }

	/* Header layout: logo + search wraps, actions become icons-only on right */
	.head { gap: 14px; padding: 14px 0; align-items: center }
	.logo img { height: 38px }
	form.search { order: 3; grid-column: 1 / -1; width: 100% }
	form.search input { padding: 11px 14px; font-size: 14px }
	form.search .cat { display: none } /* simplify on tablet */
	form.search .btn-search { padding: 0 16px }

	/* Sucursales: stack en tablet/mobile */
	.suc { grid-template-columns: 1fr; min-height: 0 }
	.suc .pic { min-height: 260px }
	.suc .info { padding: 28px 32px }

	.head-actions { gap: 2px }
	.ha-icon { width: 40px; height: 40px }

	/* El dropdown es portalizado al body por JS en mobile; .is-portaled lo estiliza. */

	/* Nav-toggle visible, ocultamos el menu desktop y el .nav-right (van al drawer) */
	.nav-toggle { display: flex }
	.nav-row { gap: 10px; padding: 4px 0 }
	.nav .container.nav-row > #primary-menu { display: none }
	.nav .container.nav-row > .nav-right { display: none }
	.search-toggle { display: none } /* el drawer trae su propia búsqueda */

	/* En mobile el drawer maneja account y favs — ocultamos los iconos del header desktop */
	.head-actions .ha-account, .head-actions .ha-fav { display: none }

	/* === MOBILE DRAWER === */
	.md-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0; left: 0; bottom: 0;
		width: 88%; max-width: 360px;
		background: #fff;
		z-index: 100;
		transform: translateX(-100%);
		transition: transform .25s ease;
		overflow-y: auto;
		box-shadow: 0 0 30px rgba(0, 23, 48, .25);
	}
	body.nav-open .md-drawer { transform: translateX(0) }

	/* Drawer head */
	.md-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0 }
	.md-logo img { height: 36px; width: auto; display: block }
	.md-close { background: var(--bg-soft); border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
	.md-close:hover { background: var(--ink); color: #fff }

	/* Drawer search */
	.md-search { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-soft); flex-shrink: 0 }
	.md-search svg { color: var(--muted); flex-shrink: 0 }
	.md-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 14px; outline: none; color: var(--ink); padding: 6px 0 }
	.md-search input::placeholder { color: var(--muted) }
	.md-search-btn { display: inline-flex; background: var(--primary); color: #fff; padding: 8px 14px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0 }

	/* Drawer menu list */
	.md-menu { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; overflow-y: auto; min-height: 0 }
	.md-menu li { width: 100%; border-bottom: 1px solid var(--line); position: relative }
	.md-menu li:last-child { border-bottom: 0 }
	.md-menu li a { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; justify-content: space-between }
	.md-menu li a .ic { font-size: 18px; flex-shrink: 0 }
	/* Chevron clickeable: hit area de 44x44 con padding interno + cursor
	   pointer. Solo el chevron togglea el submenu — el resto del link
	   navega al destino del item padre. */
	.md-menu li a .chev { font-size: 14px; color: var(--muted); transition: transform .2s; margin-left: auto; padding: 12px 16px; margin: -12px -20px -12px 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; border-radius: 8px }
	.md-menu li a .chev:hover { background: rgba(0, 23, 48, .06); color: var(--ink) }
	.md-menu li.hot a { background: var(--primary); color: var(--accent); margin: 8px 16px; padding: 12px 18px; border-radius: 8px }
	.md-menu li.hot { border-bottom: 0 }
	.md-menu li.husq a { color: #ff7a00; font-weight: 800 }
	.md-menu li.has-mega.open > a .chev,
	.md-menu li.has-sub.open > a .chev { transform: rotate(180deg) }

	/* Megamenu en drawer: vertical accordion. mm-side y mm-promo NO van. */
	.md-menu .megamenu { display: none; position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0; background: var(--bg-soft) }
	.md-menu li.has-mega.open > .megamenu { display: block }
	.md-menu .mm-grid { display: block; padding: 0 }
	.md-menu .mm-side, .md-menu .mm-promo { display: none }
	.md-menu .mm-center { display: block; min-height: 0; position: static }
	/* Cada panel del megamenu en mobile es un acordeón:
	   - Solo `.mm-panel-head` visible por default (categoría padre).
	   - Al tocar la cabecera se togglea `.is-open` y aparecen los grupos.
	   - El link "Ver todo →" del head queda intocado (sigue navegando).
	   - Background alternado entre paneles para separar visualmente. */
	.md-menu .mm-panel { display: block; padding: 0; border-top: 1px solid var(--line); animation: none }
	.md-menu .mm-panel:first-child { border-top: 0 }
	.md-menu .mm-panel:nth-child(odd)  { background: #fff }
	.md-menu .mm-panel:nth-child(even) { background: #f5f7fa }
	/* Layout en grid: nombre arriba, "Ver todo X →" abajo, chevron a la
	   derecha ocupando ambas filas. Así no se superpone el link con el
	   nombre cuando éste rompe en 2 líneas. */
	.md-menu .mm-panel-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title chev" "all chev"; align-items: center; gap: 2px 14px; padding: 14px 20px; margin: 0; border: 0; cursor: pointer; background: transparent; transition: background .15s }
	.md-menu .mm-panel-head:hover { background: var(--bg-soft) }
	.md-menu .mm-panel-head::after { content: ""; grid-area: chev; align-self: center; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s }
	.md-menu .mm-panel.is-open > .mm-panel-head::after { transform: rotate(-135deg) translateY(2px) }
	.md-menu .mm-panel-head h6 { grid-area: title; font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.1px; line-height: 1.25 }
	.md-menu .mm-panel-all { grid-area: all; justify-self: start; font-size: 11.5px; font-weight: 700; color: var(--primary); white-space: nowrap }
	/* Contenido oculto hasta que se expande. */
	.md-menu .mm-panel:not(.is-open) > .mm-panel-groups,
	.md-menu .mm-panel:not(.is-open) > .mm-panel-list,
	.md-menu .mm-panel:not(.is-open) > .mm-panel-empty { display: none }
	/* Grupos en una sola columna, indentados, separados con borde. */
	.md-menu .mm-panel-groups { display: flex; flex-direction: column; gap: 10px; padding: 4px 20px 16px 24px; background: #eef2f7; border-left: 3px solid var(--primary); margin: 0 0 0 8px }
	.md-menu .mm-group { padding: 0 }
	.md-menu .mm-group__head { display: block; padding: 6px 0; font-size: 13px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 4px }
	.md-menu .mm-group__list { padding: 0 0 0 8px; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 0 }
	.md-menu .mm-group__list li { padding: 0; border: 0 }
	.md-menu .mm-group__list li a { padding: 6px 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); border: 0 }
	/* Compat: legacy 2-niveles flat list (por si algún panel viene con `subs` legacy) */
	.md-menu .mm-panel-list { column-count: 1; padding: 0 20px 14px 24px; margin: 0; list-style: none; background: #eef2f7; border-left: 3px solid var(--primary); margin-left: 8px }
	.md-menu .mm-panel-list li { padding: 0; border: 0 }
	.md-menu .mm-panel-list li a { padding: 6px 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); border: 0 }
	.md-menu .mm-panel-empty { font-size: 12px; padding: 8px 20px 14px; color: var(--muted); font-style: italic; background: var(--bg-soft) }

	/* Sub-menus regulares en drawer (acordeón inline) */
	.md-menu li.has-sub > .sub-menu { display: none; position: static; box-shadow: none; border: 0; border-radius: 0; padding: 4px 0 8px 22px; min-width: 0; background: var(--bg-soft); list-style: none; margin: 0 }
	.md-menu li.has-sub.open > .sub-menu { display: block }
	.md-menu li.has-sub > .sub-menu li { border: 0 }
	.md-menu li.has-sub > .sub-menu li a { padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--ink-2) }

	/* Drawer actions footer (mi cuenta, favoritos, carrito, empresas) */
	.md-actions { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--line); flex-shrink: 0; background: #fff }
	.md-action { display: flex; align-items: center; gap: 12px; padding: 13px 20px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-decoration: none; transition: background .15s }
	.md-action:hover { background: var(--bg-soft); color: var(--ink) }
	.md-action svg { flex-shrink: 0; color: var(--muted) }
	.md-action:hover svg { color: var(--ink) }
	.md-action .count { margin-left: auto; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 100px; min-width: 22px; text-align: center }
	.md-action .count.is-empty { display: none }
	.md-action.md-cta { margin: 8px 16px; border-radius: 10px; padding: 12px 18px; font-weight: 800; justify-content: center }
	.md-action.md-cta svg { flex-shrink: 0 }
	/* style-accent (default) */
	.md-action.md-cta,
	.md-action.md-cta.style-accent { background: var(--accent); color: var(--ink); border: 1px solid var(--accent-dark) }
	.md-action.md-cta:hover,
	.md-action.md-cta.style-accent:hover { background: var(--accent-dark); color: var(--ink) }
	/* style-primary */
	.md-action.md-cta.style-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary-dark) }
	.md-action.md-cta.style-primary:hover { background: var(--primary-dark); color: #fff }
	/* style-outline */
	.md-action.md-cta.style-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary) }
	.md-action.md-cta.style-outline:hover { background: var(--primary); color: #fff }
	/* style-ghost */
	.md-action.md-cta.style-ghost { background: transparent; color: var(--primary); border: none; font-weight: 600 }
	.md-action.md-cta.style-ghost:hover { background: var(--bg-soft) }

	/* Hero stacks — slider principal alto para destacar (480px),
	   banners secundarios (.hero-sb) compactos a 200px. Si subiste una
	   imagen mobile para cada slide, el <picture> usa esa con un crop
	   pensado para vertical/mobile en lugar de recortar la de desktop. */
	.hero-grid { grid-template-columns: 1fr; gap: 12px }
	.hero-slider, .hero-slides { min-height: 480px; height: 480px }
	.hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px }
	.hero-sb { min-height: 200px; height: 200px; padding: 18px }
	.hero-sb h3 { font-size: 18px }

	/* Benefits — horizontal scroll for tablet */
	.benefits { padding: 12px 0 }
	.benefits .row { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin }
	.benefit { border-right: none }

	/* Section spacing */
	.section { padding: 28px 0 }
	.sec-head { flex-wrap: wrap; gap: 10px; margin-bottom: 16px }
	.sec-head h2 { font-size: 22px }

	/* Categories: 3 cols */
	.cats { grid-template-columns: repeat(3, 1fr); gap: 10px }
	.cats .cat { min-height: 180px; padding: 16px 12px }
	.cats .cat b { font-size: 13.5px }

	/* Dual stacks — banner promo Husqvarna/Empresas en mobile a 250px. */
	.dual { grid-template-columns: 1fr; gap: 12px }
	.dual .panel { padding: 22px; min-height: 180px; height: 250px }
	.dual .panel h3 { font-size: 20px; margin-bottom: 8px }
	.dual .panel p { font-size: 12.5px; margin-bottom: 12px }
	.dual .panel > * { max-width: 100% }

	/* Products: 3 cols. Home carruseles ocultan a partir de la 4ª; la tienda muestra todas. */
	.prods { grid-template-columns: repeat(3, 1fr); gap: 10px }
	.prods:not(.js-infinite-prods):not(.prods-carousel) .prod:nth-child(n+4) { display: none }
	.prods-carousel { gap: 10px }
	.prods-carousel > .prod { flex: 0 0 calc((100% - 10px * 2) / 3) }

	/* Full banner — también a 180px en mobile. */
	.fullbanner { min-height: 180px; height: 180px }
	.fullbanner-in { padding: 20px; max-width: 100% }
	.fullbanner h2 { font-size: 22px; margin-bottom: 6px }
	.fullbanner p { font-size: 12.5px; margin-bottom: 12px }
	.fullbanner::before { background: linear-gradient(180deg, rgba(0, 23, 48, .55) 0%, rgba(0, 23, 48, .92) 100%) }

	/* Triple */
	.triple { grid-template-columns: 1fr; gap: 12px }
	.triple .t { min-height: 180px }

	/* Brands */
	.brands .row { flex-direction: column; gap: 16px; align-items: flex-start }
	.brand-logos { gap: 24px; justify-content: flex-start }

	/* Newsletter */
	.news-wrap { padding: 26px 22px; border-radius: 16px }
	.news-copy h2 { font-size: 22px }
	.news-form { flex-direction: column; border-radius: 16px; padding: 10px }
	.news-form input { padding: 12px 14px; text-align: center }
	.news-form button { padding: 12px; justify-content: center; border-radius: 100px }

	/* Pay strip */
	.pay .row { grid-template-columns: 1fr; gap: 22px }
	.pay-block[style*="text-align:right"] { text-align: left !important }
	.pay-block[style*="text-align:right"] .chips { justify-content: flex-start !important }

	/* Footer */
	.site-footer { padding: 36px 0 0 }
	.foot { grid-template-columns: 1fr 1fr; gap: 28px }
	.foot-brand { grid-column: 1 / -1 }
	.foot h5 { margin-bottom: 10px }
	.foot ul { gap: 6px }

	/* Quick view en mobile (≤900): formato CARD vertical con imagen
	   arriba y datos abajo. Selectores prefijados con `.qv-modal` para
	   ganarle al base `.qv { display: grid }` que está más abajo en el
	   archivo (sin prefijo perdería por orden de cascada).
	   El dialog ahora se ajusta al contenido (height: auto) con un
	   margen alrededor y un cap de 90vh por si el contenido es muy
	   largo — en ese caso `.qv-body` se vuelve scrollable. */
	.qv-modal { padding: 16px; align-items: center }
	.qv-modal .qv-dialog { max-width: 100%; max-height: 90vh; height: auto; width: 100%; border-radius: 16px }
	.qv-modal .qv-body { overflow-y: auto; -webkit-overflow-scrolling: touch }
	.qv-modal .qv { display: block; grid-template-columns: none }
	.qv-modal .qv-gallery { padding: 32px 18px 18px; min-height: 0; gap: 12px; display: flex; flex-direction: column; align-items: stretch }
	.qv-modal .qv-image { min-height: 0; padding: 0 }
	.qv-modal .qv-image img { width: 100%; max-width: 100%; max-height: 280px; object-fit: contain; display: block; margin: 0 auto }
	.qv-modal .qv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; padding: 0 }
	.qv-modal .qv-thumbs img { width: 48px; height: 48px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; object-fit: contain; background: #fff }
	.qv-modal .qv-thumbs img:hover, .qv-modal .qv-thumbs img.is-active { border-color: var(--primary) }
	.qv-modal .qv-info { padding: 20px 18px 28px; gap: 10px; overflow: visible }
	.qv-modal .qv-title { font-size: 18px; line-height: 1.25 }
	.qv-modal .qv-price { font-size: 22px }
	.qv-modal .qv-form { flex-wrap: wrap; gap: 10px }
	.qv-modal .qv-add-btn { padding: 14px 20px; min-width: 0; flex: 1 1 100%; order: 2 }
	.qv-modal .qv-form .quantity { order: 1; flex: 0 0 auto }

	/* El dropdown es portalizado al body por JS en mobile; .is-portaled lo estiliza. */

	/* Quick view button always visible on touch (hover doesn't fire on tap) */
	.prod .quick-view { opacity: 1; transform: translate(-50%, 0); padding: 6px 12px; font-size: 11px; bottom: 6px }
	.prod .quick-view span { display: none }

	/* WC mobile: cart como cards (no tabla) */
	/* Cart mobile: 3 cols (thumb / content / subtotal). Thumb spans 2 rows, info spans top, qty+subtotal abajo */
	.rg-cart__head { display: none }
	.rg-cart__item { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 12px; padding: 14px 14px; align-items: start }
	.rg-cart__thumb { width: 64px; height: 64px; grid-column: 1; grid-row: 1 / span 2; align-self: start }
	.rg-cart__info { grid-column: 2 / span 2; grid-row: 1; min-width: 0 }
	.rg-cart__name { font-size: 13.5px }
	.rg-cart__remove { margin-top: 4px }
	.rg-cart__qty { grid-column: 2; grid-row: 2; justify-content: flex-start; align-self: center; min-width: 0 }
	.rg-cart__subtotal { grid-column: 3; grid-row: 2; align-self: center; font-size: 15px; white-space: nowrap }
	/* Stepper compacto en mobile para que entre en columnas estrechas */
	.rg-cart__qty .qty-stepper { width: 32px }
	.rg-cart__qty input.qty { width: 40px; height: 34px }

	/* Acciones: cupón y update full-width stackeados */
	.rg-cart__actions { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 10px }
	.rg-cart__coupon { max-width: none; width: 100% }
	.rg-cart__update { margin-left: 0; width: 100% }
	/* Checkout mobile: stepper más compacto, padding del paso reducido */
	.rg-checkout__step { padding: 20px 16px }
	.rg-checkout__step-head h3 { font-size: 16px }
	.rg-checkout__step-head p { font-size: 13px }
	.rg-checkout__nav { flex-wrap: wrap; gap: 10px }
	.rg-checkout__next { width: 100%; padding: 14px 24px }
	.rg-checkout__back-link, .rg-checkout__prev { padding: 6px 0 }

	/* 404 mobile */
	.err-card { padding: 32px 22px }
	.err-code { font-size: 80px; letter-spacing: -4px }
	.err-page h1 { font-size: 24px }
	.err-popular .prods { grid-template-columns: repeat(2, 1fr) }
	.err-search { flex-direction: column; padding: 12px; border-radius: 14px }
	.err-search input { width: 100%; text-align: center }
	.err-search button { width: 100%; padding: 12px }
	.err-actions { flex-direction: column }
	.err-actions .err-btn { width: 100%; justify-content: center }

	/* Empresas */
	.biz-hero h1 { font-size: 26px }
	.biz-hero .actions { flex-direction: column }
	.biz-hero .btn-y, .biz-hero .btn-o { width: 100%; justify-content: center }
	.biz-stats-panel { padding: 18px }
	.biz-form-sec .head h2 { font-size: 22px }
	.file-upload { flex-direction: column; text-align: center }

	/* Contacto */
	.ct-hero { padding: 60px 0 80px }
	.ct-hero h1 { font-size: 36px; letter-spacing: -1.2px }
	.ct-hero .lead { font-size: 15px }
	.ct-form { padding: 22px 18px }
	.ct-form h2 { font-size: 20px }
	.form-row { grid-template-columns: 1fr; gap: 0 }

	/* FAQ */

	/* PDP */
	.pdp-grid { grid-template-columns: 1fr; gap: 28px; min-width: 0 }
	/* Specificidad doblada con `:has()` para ganarle a la regla
	   desktop `.pdp-gallery:has(.pg-thumbs) { 70px 1fr }`. Sin esto en
	   mobile el main image queda comprimido a la derecha de los thumbs. */
	.pdp-gallery,
	.pdp-gallery:has(.pg-thumbs) { position: static; grid-template-columns: 1fr; max-width: 100%; min-width: 0 }
	.pg-thumbs { flex-direction: row; overflow-x: auto; order: 2; padding-bottom: 4px; max-width: 100% }
	.pg-thumbs button { flex-shrink: 0; width: 70px; height: 70px }
	.pg-main { width: 100%; min-width: 0 }
	.pg-main img { padding: 24px }
	.pdp-info { min-width: 0 }
	.pdp-info h1 { font-size: 24px; word-wrap: break-word; overflow-wrap: anywhere }
	.price-box { padding: 18px }
	.price-box .current, .price-box .current .woocommerce-Price-amount { font-size: 28px }
	.spec-strip { grid-template-columns: repeat(2, 1fr) }
	.pdp-cart .cart .quantity input { width: 50px; height: 44px }
	.pdp-cart .cart button[type="submit"], .pdp-cart .cart .single_add_to_cart_button { height: 44px; padding: 0 18px; font-size: 13px }
	.tabs-head button { padding: 12px 14px; font-size: 12.5px }

	/* Tienda */
	.shop-hero h1 { font-size: 24px }
	.shop-hero .h-stats { gap: 18px; flex-wrap: wrap }
	.shop-tools .right { width: 100%; justify-content: space-between; flex-wrap: wrap }
	.shop-tools .ord { padding: 6px 10px; font-size: 12px }
	.shop-main .prods { grid-template-columns: repeat(2, 1fr); gap: 10px }
	.shop-banner { padding: 18px 18px; min-height: 140px }
	.shop-banner h3 { font-size: 18px }
	.shop-banner p { font-size: 12.5px }
	.pager a, .pager span { min-width: 34px; height: 34px; font-size: 12px; padding: 0 10px }

	/* Tienda mobile: grid 1 col + sidebar como drawer deslizante.
	   El JS togglea body.filters-open y .filters-backdrop / .filters-close ya
	   están enlazados; acá solo definimos el layout y la animación. */
	.shop-grid { grid-template-columns: 1fr; gap: 0 }
	.shop-side-wrap {
		position: fixed; inset: 0 auto 0 0;
		width: 320px; max-width: 85vw;
		max-height: 100vh; height: 100%;
		background: #fff; z-index: 50;
		padding: 56px 16px 24px;
		box-shadow: 4px 0 24px rgba(0, 23, 48, .18);
		transform: translateX(-100%);
		transition: transform .25s ease;
		overflow-y: auto;
		top: 0;
	}
	body.filters-open .shop-side-wrap { transform: translateX(0) }
	.filters-toggle { display: inline-flex }
	.filters-close { display: flex; align-items: center; justify-content: center }
	/* La promo lateral no entra bien en un drawer angosto — la ocultamos en mobile. */
	.shop-side-wrap .side-promo { display: none }

	/* Nosotros */
	.nos-hero { min-height: 380px }
	.nos-hero h1 { font-size: 32px; letter-spacing: -1px }
	.nos-hero .lead { font-size: 15px }
	.nos-hero .mini-stats { gap: 18px }
	.nos-hero .mini-stats .ms b { font-size: 22px }
	.chapter { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 }
	.chapter.reverse .cap-text, .chapter.reverse .cap-img { order: 0 }
	.cap-text h3 { font-size: 24px }
	.timeline { padding: 60px 0 }
	.tl-head { margin-bottom: 36px }
	.tl-head h2, .sucursales h2, .cta-visit h2 { font-size: 30px }
	.tl-rail { grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 10px }
	.sucursales { padding: 60px 0 }
	.suc-grid { grid-template-columns: 1fr }
	.cta-visit h2 { font-size: 24px }
	.cta-visit p { font-size: 14.5px }
}

/* ============= <=600px : mobile ============= */
@media (max-width: 600px) {
	.container { padding: 0 14px }

	.ct-quick .grid { grid-template-columns: 1fr }
	/* Productos relacionados mobile: carrusel mostrando exactamente 2 items por viewport */
	.cart-related .prods .prod { flex: 0 0 calc((100% - 14px) / 2) }
	.prods-carousel > .prod { flex: 0 0 calc((100% - 10px) / 2) }
	.cart-related { padding: 36px 0 0 }
	.cart-related__head h2 { font-size: 18px }
	.wc-page-hero { padding: 30px 0 26px }
	.wc-page-hero h1 { font-size: 24px }
	/* Padding interno extra en mobile para que las cards no toquen los bordes */
	.wc-page-wrap { padding: 24px 18px 48px }

	/* Mi cuenta — direcciones, edit account, edit address en 1 col en mobile */
	.rg-addresses__grid { grid-template-columns: 1fr }
	.rg-edit-account__grid { grid-template-columns: 1fr }
	.rg-edit-address__grid { grid-template-columns: 1fr }
	.rg-edit-address__head { flex-direction: column; align-items: flex-start; gap: 4px }

	/* Mi cuenta auth mobile */
	.rg-account-auth { padding: 24px 20px; border-radius: 14px }
	.rg-account-auth__head h2 { font-size: 20px }
	.rg-account-auth__head p { font-size: 13px }
	.rg-account-auth__google .wp_google_login__button { padding: 13px 20px; font-size: 14px }
	.rg-account-auth__google-perks { display: none } /* en mobile el botón ya es claro de por sí */
	.rg-account-auth__divider { margin: 18px 0 16px }
	.rg-account-auth__tabs { margin-bottom: 18px }
	/* Order card en mobile: layout más compacto */
	.rg-order-card { padding: 14px }
	.rg-order-card__num { font-size: 13.5px }
	.rg-order-card__total { font-size: 14px }

	/* Topbar shrinks to just country + phone */
	.topbar .left .sep, .topbar .right .sep { display: none }
	.topbar .left span:not(:first-child) { display: none }
	.topbar .right a:not(:first-child) { display: none }

	/* Header */
	.head { padding: 10px 10px; gap: 10px }
	.logo img { height: 32px }

	/* Hide search by default — toggle button shows it */
	.search-toggle { display: flex }
	form.search { display: none; order: 4; grid-column: 1 / -1 }
	body.search-open form.search { display: flex }

	.ha-icon { width: 36px; height: 36px }
	.ha-icon .count { top: 0; right: 0; min-width: 16px; padding: 0 4px; font-size: 9px }

	/* Categories: 2 cols */
	.cats { grid-template-columns: repeat(2, 1fr); gap: 10px }
	.cats .cat { min-height: 160px }

	/* Benefits — single col stacking, no horizontal scroll */
	.benefits .row { grid-template-columns: 1fr; overflow: visible; gap: 6px }
	.benefit { padding: 8px 4px }

	/* Products: 2 cols. Home carruseles ocultan más de 4; la tienda muestra todas. */
	.prods { grid-template-columns: repeat(2, 1fr); gap: 8px }
	.prods:not(.js-infinite-prods) .prod:nth-child(n+5) { display: none }
	.prod .info { padding: 10px 12px 14px }
	.prod h4 { font-size: 12.5px; min-height: 32px }
	.prod .price b { font-size: 16px }
	.prod .add-btn { padding: 8px; font-size: 11.5px }
	.prod .badges { top: 6px; left: 6px }
	.prod .fav { top: 6px; right: 6px; width: 26px; height: 26px }

	/* Hero side: stack as 1 col on mobile */
	.hero-side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr }
	.hero-slider, .hero-slides { min-height: 480px; height: 480px }
	.hero-sb { min-height: 200px; height: 200px }
	.hero-dots { left: 20px; bottom: 14px }

	/* Section heads */
	.sec-head h2 { font-size: 20px }
	.sec-head .actions .arrs { display: none }

	/* Full banner */
	.fullbanner { min-height: 200px }
	.fullbanner-in { padding: 22px 20px }
	.fullbanner h2 { font-size: 24px }

	/* Newsletter */
	.news-wrap { padding: 26px 22px; border-radius: 16px }
	.news-copy h2 { font-size: 22px }
	.news-form { flex-direction: column; border-radius: 16px; padding: 10px }
	.news-form input { padding: 12px 14px; text-align: center }
	.news-form button { padding: 12px; justify-content: center; border-radius: 100px }

	/* Footer: single column */
	.foot { grid-template-columns: 1fr; gap: 22px }
	.foot-brand { grid-column: auto }
	.foot h5 { margin-bottom: 10px }
	.foot ul { gap: 6px }

	/* Quick view: ajustes finos para pantallas ≤600px (las reglas
	   principales del card vertical ya están en el bloque ≤900). */
	.qv-modal .qv-image img { max-height: 220px }
	.qv-modal .qv-thumbs img { width: 44px; height: 44px }
	.qv-modal .qv-title { font-size: 17px }
	.qv-modal .qv-price { font-size: 20px }

	/* El dropdown es portalizado al body por JS en mobile; .is-portaled lo estiliza. */

	/* Quick view button always visible on touch (hover doesn't fire on tap) */
	.prod .quick-view { opacity: 1; transform: translate(-50%, 0); padding: 6px 12px; font-size: 11px; bottom: 6px }
	.prod .quick-view span { display: none }

	/* 404 mobile */
	.err-card { padding: 32px 22px }
	.err-code { font-size: 80px; letter-spacing: -4px }
	.err-page h1 { font-size: 24px }
	.err-popular .prods { grid-template-columns: repeat(2, 1fr) }
	.err-search { flex-direction: column; padding: 12px; border-radius: 14px }
	.err-search input { width: 100%; text-align: center }
	.err-search button { width: 100%; padding: 12px }
	.err-actions { flex-direction: column }
	.err-actions .err-btn { width: 100%; justify-content: center }

	/* Empresas */
	.biz-hero h1 { font-size: 26px }
	.biz-hero .actions { flex-direction: column }
	.biz-hero .btn-y, .biz-hero .btn-o { width: 100%; justify-content: center }
	.biz-stats-panel { padding: 18px }
	.biz-form-sec .head h2 { font-size: 22px }
	.file-upload { flex-direction: column; text-align: center }

	/* Contacto */
	.ct-hero { padding: 60px 0 80px }
	.ct-hero h1 { font-size: 36px; letter-spacing: -1.2px }
	.ct-hero .lead { font-size: 15px }
	.ct-form { padding: 22px 18px }
	.ct-form h2 { font-size: 20px }
	.form-row { grid-template-columns: 1fr; gap: 0 }

	/* FAQ */

	/* PDP */
	.pdp-grid { grid-template-columns: 1fr; gap: 28px; min-width: 0 }
	/* Specificidad doblada con `:has()` para ganarle a la regla
	   desktop `.pdp-gallery:has(.pg-thumbs) { 70px 1fr }`. Sin esto en
	   mobile el main image queda comprimido a la derecha de los thumbs. */
	.pdp-gallery,
	.pdp-gallery:has(.pg-thumbs) { position: static; grid-template-columns: 1fr; max-width: 100%; min-width: 0 }
	.pg-thumbs { flex-direction: row; overflow-x: auto; order: 2; padding-bottom: 4px; max-width: 100% }
	.pg-thumbs button { flex-shrink: 0; width: 70px; height: 70px }
	.pg-main { width: 100%; min-width: 0 }
	.pg-main img { padding: 24px }
	.pdp-info { min-width: 0 }
	.pdp-info h1 { font-size: 24px; word-wrap: break-word; overflow-wrap: anywhere }
	.price-box { padding: 18px }
	.price-box .current, .price-box .current .woocommerce-Price-amount { font-size: 28px }
	.spec-strip { grid-template-columns: repeat(2, 1fr) }
	.pdp-cart .cart .quantity input { width: 50px; height: 44px }
	.pdp-cart .cart button[type="submit"], .pdp-cart .cart .single_add_to_cart_button { height: 44px; padding: 0 18px; font-size: 13px }
	.tabs-head button { padding: 12px 14px; font-size: 12.5px }

	/* Tienda */
	.shop-hero h1 { font-size: 24px }
	.shop-hero .h-stats { gap: 14px; flex-wrap: wrap }
	.shop-tools .right { width: 100%; justify-content: space-between; flex-wrap: wrap }
	.shop-tools .ord { padding: 6px 10px; font-size: 12px }
	.shop-main .prods { grid-template-columns: repeat(2, 1fr); gap: 10px }
	.shop-banner { padding: 18px 18px; min-height: 140px }
	.shop-banner h3 { font-size: 18px }
	.shop-banner p { font-size: 12.5px }
	.pager a, .pager span { min-width: 34px; height: 34px; font-size: 12px; padding: 0 10px }

	/* Nosotros */
	.nos-hero { min-height: 380px }
	.nos-hero h1 { font-size: 32px; letter-spacing: -1px }
	.nos-hero .lead { font-size: 15px }
	.nos-hero .mini-stats { gap: 18px }
	.nos-hero .mini-stats .ms b { font-size: 22px }
	.chapter { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 }
	.chapter.reverse .cap-text, .chapter.reverse .cap-img { order: 0 }
	.cap-text h3 { font-size: 24px }
	.timeline { padding: 60px 0 }
	.tl-head { margin-bottom: 36px }
	.tl-head h2, .sucursales h2, .cta-visit h2 { font-size: 30px }
	.tl-rail { grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 10px }
	.sucursales { padding: 60px 0 }
	.suc-grid { grid-template-columns: 1fr }
	.cta-visit h2 { font-size: 24px }
	.cta-visit p { font-size: 14.5px }
}

/* Body lock when nav drawer open */
body.nav-open { overflow: hidden }

/* ============================================================
   HEADER DROPDOWNS — wishlist + mini-cart
   ============================================================ */
.ha-wrap { position: relative }
.ha-wrap .ha { background: transparent; border: 0 } /* button reset */
.ha-wrap.is-open .ha { background: var(--bg-soft) }
.ha-wrap .dropdown {
	position: absolute;
	/* top: calc(100% + 8px); */
	right: -50px;
	min-width: 360px;
	max-width: 92vw;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 24px 48px rgba(0, 23, 48, .15);
	z-index: 200;
	overflow: hidden;
	max-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
}
/* `display: flex` arriba pisa el default de `[hidden]`. Restaurar explícito. */
.ha-wrap .dropdown[hidden] { display: none }
.ha-wrap .dropdown::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 30px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
	transform: rotate(45deg);
}

/* Mini-cart / mini-wishlist content */
.mini-cart, .js-fav-content > div { display: flex; flex-direction: column; min-height: 0 }
.mini-cart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); background: var(--bg-soft); flex-shrink: 0 }
.mini-cart-head b { font-size: 13px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .5px; flex: 1 }
.mini-cart-head small { font-size: 11.5px; color: var(--muted); font-weight: 600 }
.dropdown-close { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ink); border: 1px solid var(--line); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s }
.dropdown-close:hover { background: var(--ink); color: #fff; border-color: var(--ink) }
.mini-cart-items { list-style: none; padding: 8px 0; margin: 0; overflow-y: auto; flex: 1 }
.mini-cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 10px 18px; align-items: center; border-bottom: 1px solid var(--line) }
.mini-cart-item:last-child { border-bottom: 0 }
.mini-cart-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); display: flex; align-items: center; justify-content: center }
.mini-cart-thumb img { max-width: 100%; max-height: 100%; object-fit: contain }
.mini-cart-info { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.mini-cart-name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.mini-cart-name:hover { color: var(--primary) }
.mini-cart-meta { font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px }
.mini-cart-meta b { color: var(--ink); font-weight: 700 }
.mini-cart-remove { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0 }
.mini-cart-remove:hover { background: var(--primary); color: #fff }
.mini-cart-totals { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--bg-soft); border-top: 1px solid var(--line); font-size: 13px; flex-shrink: 0 }
.mini-cart-totals span { color: var(--muted); font-weight: 600 }
.mini-cart-totals b { font-size: 17px; color: var(--ink); font-weight: 800 }
.mini-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 16px; flex-shrink: 0 }
.mini-cart-btn { display: flex; align-items: center; justify-content: center; padding: 11px 14px; border-radius: 10px; font-weight: 700; font-size: 12.5px; transition: all .15s; text-align: center }
.mini-cart-btn.primary { background: var(--accent); color: var(--ink); border: 1px solid var(--accent-dark) }
.mini-cart-btn.primary:hover { background: var(--accent-dark) }
.mini-cart-btn.secondary { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line) }
.mini-cart-btn.secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink) }
.mini-cart-empty { padding: 36px 24px; text-align: center; color: var(--muted) }
.mini-cart-empty svg { color: var(--muted); margin: 0 auto 14px; opacity: .5 }
.mini-cart-empty p { font-size: 13.5px; margin-bottom: 16px }

/* Hide cart count badge when 0 */
.js-cart-count.is-empty, .js-fav-count.is-empty { display: none }

/* Dropdown portalizado al body en mobile (escapa el sticky container de Safari/iOS) */
.dropdown.is-portaled {
	position: fixed;
	top: 120px; /* fallback; JS sobreescribe con el bottom real del .header-sticky */
	left: 8px;
	right: 8px;
	width: auto;
	min-width: 0;
	max-width: none;
	transform: none;
	z-index: 200;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 24px 48px rgba(0, 23, 48, .15);
	max-height: calc(100vh - 130px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.dropdown.is-portaled[hidden] { display: none }

/* ============================================================
   PRODUCT CARD: filled heart + quick view button
   ============================================================ */
.prod .fav.is-active { color: var(--accent-dark); background: #fff }
.prod .fav.is-active svg { fill: var(--accent); stroke: var(--accent-dark) }

.prod .quick-view {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%, 8px);
	background: var(--ink);
	color: #fff;
	border-radius: 100px;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .2s, transform .2s;
	z-index: 3;
	box-shadow: 0 6px 16px rgba(0, 23, 48, .25);
}
.prod:hover .quick-view { opacity: 1; transform: translate(-50%, 0) }
.prod .quick-view:hover { background: var(--primary) }

/* ============================================================
   QUICK VIEW MODAL
   ============================================================ */
.qv-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px }
.qv-modal[hidden] { display: none }
.qv-backdrop { position: absolute; inset: 0; background: rgba(0, 23, 48, .65); backdrop-filter: blur(4px) }
.qv-dialog { position: relative; background: #fff; border-radius: 18px; max-width: 920px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px rgba(0, 0, 0, .35) }
.qv-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer }
.qv-close:hover { background: var(--ink); color: #fff }
.qv-body { overflow-y: auto; flex: 1 }
.qv-loading { padding: 80px 20px; text-align: center; color: var(--muted); font-size: 14px }

.qv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
.qv-gallery { background: var(--bg-soft); padding: 36px; display: flex; flex-direction: column; gap: 16px }
.qv-image { display: flex; align-items: center; justify-content: center; min-height: 280px }
.qv-image img { max-width: 100%; max-height: 380px; object-fit: contain }
.qv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.qv-thumbs img { width: 56px; height: 56px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; object-fit: contain; background: #fff }
.qv-thumbs img:hover { border-color: var(--primary) }

.qv-info { padding: 36px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto }
.qv-cat { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px }
.qv-cat a { color: inherit }
.qv-title { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; letter-spacing: -.3px }
.qv-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted) }
.qv-price { font-size: 24px; font-weight: 800; color: var(--ink); margin-top: 4px }
.qv-price del { color: var(--muted); font-size: 16px; font-weight: 500; margin-right: 6px }
.qv-price ins { text-decoration: none }
.qv-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.qv-form { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; flex-wrap: wrap }
.qv-form .quantity { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden }
.qv-form .quantity input { width: 60px; padding: 12px 8px; border: 0; text-align: center; font-family: inherit; font-size: 14px; font-weight: 700; outline: none; color: var(--ink); -moz-appearance: textfield }
.qv-form .quantity input::-webkit-outer-spin-button,
.qv-form .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.qv-add-btn { flex: 1; min-width: 200px; background: var(--ink); color: #fff; border-radius: 10px; padding: 14px 22px; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 0; text-decoration: none; transition: background .15s }
.qv-add-btn:hover { background: var(--primary) }
.qv-add-btn.added { background: var(--success) }
.qv-stock { color: var(--muted); font-size: 13px; padding: 12px 0 }
.qv-link { font-size: 12.5px; color: var(--primary); font-weight: 700; margin-top: 4px }
.qv-fav { background: transparent; border: 1px solid var(--line); padding: 10px 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; align-self: flex-start; margin-top: 4px }
.qv-fav:hover { border-color: var(--primary); color: var(--primary) }
.qv-fav.is-active { color: var(--accent-dark); border-color: var(--accent-dark); background: rgba(255, 219, 14, .08) }
.qv-fav.is-active svg { fill: var(--accent); stroke: var(--accent-dark) }

body.qv-open { overflow: hidden }

/* =====================================================================
   Buscador inteligente — dropdown bajo cualquier <input name="s">.
   El JS lo monta como hijo del padre del input (ese padre se vuelve
   position: relative automáticamente si no lo era).
   ===================================================================== */
/* JS lo monta en <body> con position:fixed + top/left/width calculados
   desde el rect del input — escapa cualquier overflow ancestor. */
.rg-search-dropdown { position: fixed; z-index: 9999; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 23, 48, .18); max-height: 480px; overflow-y: auto; padding: 6px 0 }
.rg-search-list { list-style: none; margin: 0; padding: 0 }
.rg-search-item { padding: 0; margin: 0 }
.rg-search-link { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 14px; align-items: center; color: inherit; text-decoration: none; transition: background .12s }
.rg-search-link:hover, .rg-search-item.is-active .rg-search-link { background: var(--bg-soft) }
.rg-search-thumb { width: 56px; height: 56px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rg-search-thumb img { width: 100%; height: 100%; object-fit: contain; display: block }
.rg-search-body { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.rg-search-cat { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .6px }
.rg-search-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rg-search-name mark { background: var(--accent); color: var(--ink); padding: 0 2px; border-radius: 3px }
.rg-search-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12px }
.rg-search-price { color: var(--primary); font-weight: 800 }
.rg-search-price .woocommerce-Price-amount { font-weight: 800 }
.rg-search-price del { color: var(--muted); font-weight: 400; font-size: 11px; margin-right: 4px }
.rg-search-sku { color: var(--muted); font-size: 11px; font-weight: 600 }
/* Badge de stock: pill chico al lado del precio. */
.rg-search-stock { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; line-height: 1.4 }
.rg-search-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50% }
.rg-search-stock--in { background: #d4edda; color: #155724 }
.rg-search-stock--in::before { background: #28a745 }
.rg-search-stock--low { background: #fff3cd; color: #856404 }
.rg-search-stock--low::before { background: #ffc107 }
.rg-search-stock--out { background: #f8d7da; color: #721c24 }
.rg-search-stock--out::before { background: #dc3545 }
.rg-search-empty { padding: 24px 18px; text-align: center; color: var(--muted); font-size: 13px }
.rg-search-all { display: block; padding: 12px 14px; border-top: 1px solid var(--line); text-align: center; font-size: 12.5px; font-weight: 700; color: var(--primary); text-decoration: none; transition: background .12s }
.rg-search-all:hover { background: var(--bg-soft) }

/* Empty state cuando una búsqueda en /tienda/ no devuelve resultados */
.rg-search-empty-state { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 60px 32px; text-align: center; max-width: 560px; margin: 0 auto }
.rg-search-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--bg-soft); color: var(--muted); border-radius: 50%; margin-bottom: 20px }
.rg-search-empty-state h3 { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 10px; letter-spacing: -.5px }
.rg-search-empty-state p { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 24px }
.rg-search-empty-state .btn-y { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--ink); padding: 12px 24px; border-radius: 100px; font-weight: 800; font-size: 13px; text-decoration: none; transition: background .15s }
.rg-search-empty-state .btn-y:hover { background: var(--accent-dark) }

/* En mobile el dropdown inline se reemplaza por el modal — lo escondemos
   por las dudas si quedó abierto al rotar/redimensionar. */
@media (max-width: 900px) {
	.rg-search-dropdown { display: none }
}

/* =====================================================================
   Modal de buscador en mobile (≤900px). Se abre al tocar cualquier
   <input name="s">. JS lo monta en <body> y le setea `top` igual al
   bottom del header sticky para que el header siga visible y el
   usuario no pierda referencia visual de la página.
   ===================================================================== */
.rg-search-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; display: flex; flex-direction: column; animation: rg-search-fade-in .15s ease-out; border-top: 1px solid var(--line) }
.rg-search-modal[hidden] { display: none }
body.rg-search-modal-open { overflow: hidden }
/* El header sticky tiene z-index alto (~100); el modal queda debajo y
   sobre el contenido del body. Así se ve "anclado" a la barra. */

@keyframes rg-search-fade-in {
	from { opacity: 0 }
	to   { opacity: 1 }
}

.rg-search-modal__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .04) }
.rg-search-modal__close { width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .15s }
.rg-search-modal__close:hover { background: var(--bg-soft) }
.rg-search-modal__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 100px; padding: 0 14px; height: 42px; transition: border-color .15s }
.rg-search-modal__field:focus-within { border-color: var(--primary); background: #fff }
.rg-search-modal__field > svg { color: var(--muted); flex-shrink: 0 }
.rg-search-modal__field input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 15px; outline: none; color: var(--ink); padding: 0; line-height: 1 }
.rg-search-modal__field input::placeholder { color: var(--muted) }
.rg-search-modal__clear { width: 28px; height: 28px; padding: 0; border: 0; background: rgba(0, 23, 48, .08); color: var(--ink); cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.rg-search-modal__clear:hover { background: rgba(0, 23, 48, .15) }

.rg-search-modal__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch }
.rg-search-modal__hint { padding: 60px 24px; text-align: center; color: var(--muted); font-size: 14px }
.rg-search-modal__empty { padding: 60px 24px; text-align: center; color: var(--ink-2); font-size: 14px; line-height: 1.5 }

/* Reusamos .rg-search-list / .rg-search-item / etc. del dropdown
   desktop, pero con paddings más generosos para tap en mobile. */
.rg-search-modal__body .rg-search-list { padding: 6px 0 }
.rg-search-modal__body .rg-search-link { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line) }
.rg-search-modal__body .rg-search-link:hover { background: var(--bg-soft) }
.rg-search-modal__body .rg-search-thumb { width: 64px; height: 64px }
.rg-search-modal__body .rg-search-item:last-child .rg-search-link { border-bottom: 0 }
.rg-search-modal__body .rg-search-name { white-space: normal; line-height: 1.35 }
.rg-search-modal__body .rg-search-all { padding: 16px; font-size: 14px }




/* ============================================================
   HUSQVARNA — PREMIUM STORE  (template-husqvarna.php)
   Mismo look claro que Ragaglia, pero rebrandeado:
   - Azul institucional Husqvarna  #1f2742  (primario / institucional)
   - Naranja Husqvarna             #ff862a  (acento)
   Scope: .husq (contenido) + body.husqvarna-page (header/footer).
   El theme usa CSS vars, así que el swap de tokens recolorea casi todo;
   abajo sólo pisamos el navy institucional hardcodeado (#001730).
   ============================================================ */

.husq,
body.husqvarna-page {
  --primary:       #1f2742;
  --primary-dark:  #161c30;
  --primary-light: #36406a;
  --accent:        #ff862a;
  --accent-dark:   #e6701a;
  --ink:           #1f2742;
}

/* Naranja Husqvarna es claro → texto oscuro sobre acento sigue legible,
   pero el botón "agregar" usa fondo --ink (azul) con texto blanco: ok. */

/* Superficies institucionales navy hardcodeadas → azul Husqvarna */
body.husqvarna-page .topbar,
body.husqvarna-page .site-footer { background: #1f2742 }
.husq .cats .cat,
.husq .dual .panel,
.husq .fullbanner,
.husq .triple .t { background-color: #1f2742 }

/* ---- HERO: sólo imagen de fondo, sin textos ----
   Altura configurable vía vars inline (--husq-hero-h / --husq-hero-h-m).
   Soporta <picture> (bloque, con imagen mobile aparte) o background-image
   (fallback estático). */
.husq-hero {
  position: relative;
  display: block;
  height: var(--husq-hero-h, 420px);
  background-size: cover;
  background-position: center;
  background-color: #1f2742;
  border-radius: 18px;
  overflow: hidden;
  margin: 22px 0 0;
}
.husq-hero picture,
.husq-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.husq-hero img { width: 100%; height: 100%; object-fit: cover; display: block }

/* ---- Banners sólo imagen (dual + full-banner): sin overlay ni texto ---- */
.husq .dual .panel::before,
.husq .fullbanner::before { display: none }
.husq .dual .panel > *,
.husq .fullbanner .fullbanner-in { display: none }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .husq-hero { height: var(--husq-hero-h-m, 220px); border-radius: 12px }
}

/* ============================================================
   Altura configurable de banners (bloques dual-promo / full-banner)
   Sólo se activa cuando el bloque define altura (clase modificadora),
   así los banners sin configurar mantienen la altura por defecto.
   ============================================================ */
.dual--custom-h .panel { height: var(--rg-dual-h, 240px); min-height: 0 }
.fullbanner--custom-h { height: var(--rg-fb-h, 260px); min-height: 0 }
@media (max-width: 600px) {
  .dual--custom-h .panel { height: var(--rg-dual-h-m, 250px); min-height: 0 }
  .fullbanner--custom-h { height: var(--rg-fb-h-m, 200px); min-height: 0 }
}

/* ============================================================
   BLOG — listado (home/archive), card y single
   Mismo lenguaje visual que la tienda (hero navy + grilla de cards).
   ============================================================ */

/* ---- Hero (blog index / archivos) ---- */
.blog-hero { background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; padding: 48px 0; position: relative; overflow: hidden }
.blog-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 30%, rgba(255, 219, 14, .18), transparent 55%) }
.blog-hero .container { position: relative; z-index: 2 }
.blog-hero__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px }
.blog-hero h1 { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.08; color: #fff }
.blog-hero .lead { color: #fff; opacity: .9; font-size: 15.5px; line-height: 1.55; margin-top: 10px; max-width: 720px }

/* ---- Grilla ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }

/* ---- Card de artículo ---- */
.post-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 23, 48, .10); border-color: transparent }
.post-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden }
.post-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s }
.post-card:hover .post-card__img { transform: scale(1.04) }
.post-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: linear-gradient(135deg, var(--bg-soft), var(--bg-gray)) }
.post-card__cat { position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 4px 10px; border-radius: 100px; z-index: 2 }
.post-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1 }
.post-card__meta { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px }
.post-card__title { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.2px; margin-bottom: 8px }
.post-card__title a { color: var(--ink) }
.post-card__title a:hover { color: var(--primary) }
.post-card__excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; flex: 1 }
.post-card__more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--primary); transition: gap .15s }
.post-card__more:hover { gap: 9px }

/* ---- Paginación ---- */
.blog-list .pagination { margin-top: 36px }
.blog-list .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center }
.blog-list .pagination .page-numbers { display: inline-flex; align-items: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; justify-content: center; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: #fff; transition: all .15s }
.blog-list .pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary) }
.blog-list .pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff }
.blog-list .pagination .page-numbers.dots { border: 0; background: transparent }
.blog-list .pagination .page-numbers svg { display: block }

/* ---- Single: hero ---- */
.post-single__hero { background: linear-gradient(110deg, #001730 0%, #0a2240 100%); color: #fff; padding: 48px 0 44px; position: relative; overflow: hidden }
.post-single__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 25%, rgba(255, 219, 14, .16), transparent 55%) }
.post-single__hero.has-bg { background-size: cover; background-position: center; padding: 80px 0 56px }
.post-single__hero.has-bg::before { background: linear-gradient(180deg, rgba(0, 23, 48, .55) 0%, rgba(0, 23, 48, .80) 100%) }
.post-single__hero .container { position: relative; z-index: 2 }
.post-single__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; opacity: .85; margin-bottom: 18px }
.post-single__back:hover { opacity: 1; color: var(--accent) }
.post-single__cat { display: inline-block; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px }
.post-single__title { font-size: 38px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: #fff; margin-bottom: 14px }
.post-single__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: #fff; opacity: .85 }
.post-single__meta .sep { opacity: .5 }

/* ---- Single: columna de lectura ---- */
.post-single__wrap { max-width: 760px }
.post-content { padding: 0 0 8px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2) }
.post-content > * { margin-bottom: 1.2em }
.post-content h2 { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.4px; margin: 1.6em 0 .6em; line-height: 1.2 }
.post-content h3 { font-size: 21px; font-weight: 800; color: var(--ink); margin: 1.4em 0 .5em }
.post-content h4 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 1.2em 0 .4em }
.post-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px }
.post-content a:hover { color: var(--primary-dark) }
.post-content ul, .post-content ol { padding-left: 1.4em }
.post-content li { margin-bottom: .5em }
.post-content img { max-width: 100%; height: auto; border-radius: 14px; display: block }
.post-content figure { margin: 1.6em 0 }
.post-content figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px }
.post-content blockquote { border-left: 4px solid var(--accent); background: var(--bg-soft); padding: 16px 22px; border-radius: 0 12px 12px 0; font-size: 17px; font-style: italic; color: var(--ink) }
.post-content blockquote p:last-child { margin-bottom: 0 }
.post-content pre { background: var(--ink); color: #fff; padding: 18px; border-radius: 12px; overflow-x: auto; font-size: 13.5px }
.post-content code { background: var(--bg-soft); padding: 2px 6px; border-radius: 6px; font-size: .9em }
.post-content pre code { background: transparent; padding: 0 }
.post-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0 }

/* ---- Single: tags / relacionados / comentarios ---- */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0; border-top: 1px solid var(--line); margin-top: 16px }
.post-tags a { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); padding: 6px 12px; border-radius: 100px; transition: all .15s }
.post-tags a:hover { border-color: var(--primary); color: var(--primary) }
.post-related { border-top: 1px solid var(--line); margin-top: 8px }
.post-comments { padding: 8px 0 40px }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .blog-hero h1 { font-size: 34px }
  .post-single__title { font-size: 32px }
}
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 18px }
  .blog-hero { padding: 36px 0 }
  .blog-hero h1 { font-size: 29px }
  .post-single__hero { padding: 36px 0 32px }
  .post-single__hero.has-bg { padding: 56px 0 40px }
  .post-single__title { font-size: 27px }
  .post-content { font-size: 16px }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; gap: 16px }
  .blog-hero h1 { font-size: 25px }
  .post-single__title { font-size: 23px }
  .post-content { font-size: 15.5px; padding-top: 28px }
  .post-content h2 { font-size: 22px }
}

/* ============================================================
   BLOG — layout con sidebar (categorías, buscador, últimas notas, CTA)
   El sidebar es drawer deslizante en mobile (reusa body.filters-open).
   ============================================================ */
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px }
.blog-toolbar__count { font-size: 13.5px; color: var(--muted); font-weight: 600 }
.blog-toolbar__count b { color: var(--ink); font-weight: 800 }

.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: flex-start }
.blog-layout .blog-grid { grid-template-columns: repeat(2, 1fr) }
.blog-side-wrap { position: sticky; top: 16px }
.blog-side { display: flex; flex-direction: column; gap: 18px }

/* Widget base */
.blog-widget { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px }
.blog-widget__title { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--ink); margin-bottom: 14px }

/* Buscador */
.blog-search { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color .15s }
.blog-search:focus-within { border-color: var(--primary) }
.blog-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 12px; font-size: 14px; outline: none; color: var(--ink) }
.blog-search input::placeholder { color: var(--muted) }
.blog-search button { background: var(--primary); color: #fff; border: 0; padding: 0 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s }
.blog-search button:hover { background: var(--primary-dark) }

/* Categorías */
.blog-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px }
.blog-cats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: background .15s, color .15s }
.blog-cats a:hover { background: var(--bg-soft); color: var(--primary) }
.blog-cats a.is-active { background: var(--primary); color: #fff }
.blog-cats .count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg-soft); border-radius: 100px; padding: 1px 8px; min-width: 22px; text-align: center }
.blog-cats a:hover .count { color: var(--primary) }
.blog-cats a.is-active .count { background: rgba(255, 255, 255, .2); color: #fff }

/* Últimas notas */
.blog-recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px }
.blog-recent a { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; transition: background .15s }
.blog-recent a:hover { background: var(--bg-soft) }
.blog-recent__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: var(--bg-soft); display: flex; align-items: center; justify-content: center }
.blog-recent__thumb img { width: 100%; height: 100%; object-fit: cover }
.blog-recent__info { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.blog-recent__title { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.blog-recent a:hover .blog-recent__title { color: var(--primary) }
.blog-recent__info time { font-size: 11.5px; color: var(--muted); font-weight: 600 }

/* CTA tienda */
.blog-cta { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(135deg, #001730, #0a2240); border-radius: 14px; padding: 22px; color: #fff; position: relative; overflow: hidden }
.blog-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 219, 14, .2), transparent 60%) }
.blog-cta > * { position: relative; z-index: 2 }
.blog-cta__eyebrow { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--accent) }
.blog-cta__title { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.2px }
.blog-cta__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 800; padding: 9px 16px; border-radius: 10px; align-self: flex-start; transition: gap .15s }
.blog-cta:hover .blog-cta__btn { gap: 9px }

/* Responsive */
@media (max-width: 1200px) {
  .blog-layout { grid-template-columns: 1fr 260px; gap: 24px }
}
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 0 }
  .blog-layout .blog-grid { grid-template-columns: repeat(2, 1fr) }
  /* Sidebar como drawer deslizante desde la derecha. El JS togglea
     body.filters-open; .filters-toggle / .filters-close ya se muestran en la
     media query de la tienda (clases compartidas). */
  .blog-side-wrap {
    position: fixed; inset: 0 0 0 auto;
    width: 320px; max-width: 85vw; height: 100%;
    background: #fff; z-index: 50;
    padding: 56px 16px 24px;
    box-shadow: -4px 0 24px rgba(0, 23, 48, .18);
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  body.filters-open .blog-side-wrap { transform: translateX(0) }
}
@media (max-width: 600px) {
  .blog-layout .blog-grid { grid-template-columns: 1fr }
  .blog-toolbar { margin-bottom: 16px }
}

/* ============================================================
   BLOG — single: toolbar mobile + comentarios estilados
   ============================================================ */

/* Toolbar del single: solo visible en mobile (para abrir la sidebar) */
.blog-toolbar--single { display: none; margin-top: 20px }
@media (max-width: 900px) {
  .blog-toolbar--single { display: flex }
}

/* ---- Comentarios ---- */
.post-comments { padding: 8px 0 8px }
.comments-area { margin-top: 16px }
.comments-title,
.comment-reply-title { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; margin: 0 0 20px }
.comment-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 16px }
.comment-list .children { list-style: none; margin: 16px 0 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 16px; border-left: 2px solid var(--line) }
.comment-body { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px }
.comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap }
.comment-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--ink) }
.comment-author .avatar { width: 38px; height: 38px; border-radius: 50%; display: block }
.comment-author .says { display: none }
.comment-metadata { font-size: 12px; color: var(--muted); font-weight: 600 }
.comment-metadata a { color: var(--muted) }
.comment-metadata a:hover { color: var(--primary) }
.comment-metadata .edit-link { margin-left: 8px }
.comment-content { font-size: 14.5px; line-height: 1.65; color: var(--ink-2) }
.comment-content p { margin-bottom: .6em }
.comment-content p:last-child { margin-bottom: 0 }
.comment-awaiting-moderation { font-size: 12.5px; color: var(--muted); font-style: italic }
.reply { margin-top: 10px }
.comment-reply-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--primary); border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; transition: all .15s }
.comment-reply-link:hover { border-color: var(--primary); background: var(--bg-soft) }

/* Form de comentario */
.comment-respond { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 24px }
.comment-form { display: flex; flex-direction: column; gap: 14px }
.comment-form .comment-notes,
.comment-form .logged-in-as { font-size: 13px; color: var(--muted); margin: 0 }
.comment-form .logged-in-as a,
.comment-form .comment-notes a { color: var(--primary); font-weight: 600 }
.comment-form label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
  outline: none; transition: border-color .15s;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus { border-color: var(--primary) }
.comment-form textarea { min-height: 120px; resize: vertical }
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted) }
.comment-form .comment-form-cookies-consent label { font-weight: 600; color: var(--muted); margin: 0 }
.comment-form .comment-form-cookies-consent input { width: auto }
.comment-form .form-submit { margin: 0 }
.comment-form .submit { background: var(--ink); color: #fff; border: 0; border-radius: 10px; padding: 12px 26px; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s }
.comment-form .submit:hover { background: var(--primary) }
.no-comments { font-size: 14px; color: var(--muted) }

/* ---- Single: separación del hero + imagen destacada dentro del contenido ---- */
.post-single .blog-layout { padding: 40px 0 56px }
.post-featured { margin: 0 0 28px }
.post-featured__img { width: 100%; height: auto; border-radius: 16px; display: block }
@media (max-width: 900px) {
  .post-single .blog-layout { padding: 24px 0 48px }
}

/* =========================================================
   WOOCOMMERCE - PEDIDO RECIBIDO (order-received / thankyou)
   Mismo lenguaje visual que el checkout (rg-checkout / rg-review).
   ========================================================= */
.woocommerce-order-received .wc-page-wrap .woocommerce{max-width:900px;margin:0 auto}
.woocommerce-order{display:flex;flex-direction:column;gap:26px}

/* Aviso de exito */
.woocommerce-order .woocommerce-thankyou-order-received{display:flex;align-items:flex-start;gap:14px;margin:0;padding:20px 22px;border-radius:14px;background:#f0fdf4;border:1px solid #bbf7d0;border-left:4px solid var(--success);color:#14532d;font-size:16px;font-weight:700;line-height:1.45}
.woocommerce-order .woocommerce-thankyou-order-received::before{content:"\2713";flex:0 0 24px;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:var(--success);color:#fff;font-size:14px;font-weight:800}

/* Instrucciones del medio de pago (ej. transferencia) */
.woocommerce-order > p:not(.woocommerce-notice){margin:0;padding:15px 18px;border-radius:12px;background:#fffdf0;border:1px solid var(--accent-dark);color:var(--ink);font-size:14px;font-weight:600;line-height:1.5}

/* Datos del pedido (overview) */
.woocommerce-order .woocommerce-order-overview{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.woocommerce-order .woocommerce-order-overview li{display:flex;flex-direction:column;gap:6px;margin:0;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.woocommerce-order .woocommerce-order-overview li strong{font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--ink);text-transform:none}
.woocommerce-order .woocommerce-order-overview li.total{background:var(--primary-soft);border-color:var(--primary-light)}
.woocommerce-order .woocommerce-order-overview li.total strong{font-size:18px}
/* Tarjetas: datos bancarios / detalle / direcciones */
.woocommerce-bacs-bank-details,.woocommerce-order-details,.woocommerce-customer-details{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:22px}
.woocommerce-bacs-bank-details{background:var(--bg-soft)}
.wc-bacs-bank-details-heading,.woocommerce-order-details__title,.woocommerce-customer-details .woocommerce-column__title,.woocommerce-customer-details > h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--primary)}

/* Datos bancarios */
.wc-bacs-bank-details-account-name{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 14px}
ul.wc-bacs-bank-details{list-style:none;margin:0;padding:0}
ul.wc-bacs-bank-details li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0;padding:11px 0;border-bottom:1px dashed var(--line);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
ul.wc-bacs-bank-details li:last-child{border-bottom:0;padding-bottom:0}
ul.wc-bacs-bank-details li strong{font-size:15px;font-weight:800;color:var(--ink);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;text-align:right;word-break:break-all;-webkit-user-select:all;user-select:all}

/* Tabla de detalle del pedido */
.woocommerce-table--order-details{width:100%;border-collapse:collapse;font-size:14px;color:var(--ink)}
.woocommerce-table--order-details thead th{padding:0 0 10px;text-align:left;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.woocommerce-table--order-details thead th.product-total{text-align:right}
.woocommerce-table--order-details tbody td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
.woocommerce-table--order-details tbody td.product-name{font-weight:600;padding-right:20px}
.woocommerce-table--order-details tbody td.product-name a{color:var(--ink);text-decoration:none}
.woocommerce-table--order-details tbody td.product-name a:hover{color:var(--primary-light)}
.woocommerce-table--order-details .product-quantity{color:var(--muted);font-weight:800}
.woocommerce-table--order-details tbody td.product-total{text-align:right;white-space:nowrap;font-weight:700}
.woocommerce-table--order-details tbody td .wc-item-meta,.woocommerce-table--order-details tbody td dl.variation{margin:6px 0 0;padding:0;list-style:none;font-size:12.5px;font-weight:500;color:var(--muted)}
.woocommerce-table--order-details tfoot th{padding:9px 0;text-align:left;border:0;font-size:13.5px;font-weight:600;color:var(--muted)}
.woocommerce-table--order-details tfoot td{padding:9px 0;text-align:right;border:0;white-space:nowrap;font-weight:700;color:var(--ink)}
.woocommerce-table--order-details tfoot tr:first-child th,.woocommerce-table--order-details tfoot tr:first-child td{padding-top:16px}
.woocommerce-table--order-details tfoot tr:has(.rg-order-total) th,.woocommerce-table--order-details tfoot tr:has(.rg-order-total) td{padding-top:14px;border-top:2px solid var(--line);color:var(--ink);font-weight:800}
.woocommerce-table--order-details tfoot tr:has(.rg-order-total) th{font-size:15px}
.woocommerce-table--order-details tfoot tr:has(.rg-order-total) td{font-size:19px}
/* Direcciones */
.woocommerce-customer-details address{font-style:normal;margin:0;padding:0;border:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.woocommerce-customer-details .woocommerce-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.woocommerce-customer-details .woocommerce-columns .col-1,.woocommerce-customer-details .woocommerce-columns .col-2{width:auto;float:none;padding:0}

/* Acciones */
.rg-thankyou-actions{display:flex;flex-wrap:wrap;gap:12px}
.rg-thankyou-actions a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:10px;font-size:14px;font-weight:800;text-decoration:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:all .18s ease}
.rg-thankyou-actions a:hover{border-color:var(--primary);color:var(--primary)}
.rg-thankyou-actions a.is-primary{background:var(--accent);border-color:var(--accent);color:var(--primary)}
.rg-thankyou-actions a.is-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--primary)}

/* Mobile */
@media (max-width:720px){
  .woocommerce-order{gap:18px}
  .woocommerce-order .woocommerce-thankyou-order-received{font-size:15px;padding:16px 18px}
  .woocommerce-order .woocommerce-order-overview{grid-template-columns:1fr 1fr;gap:10px}
  .woocommerce-order .woocommerce-order-overview li{padding:13px 14px}
  .woocommerce-order .woocommerce-order-overview li strong{font-size:14.5px}
  .woocommerce-bacs-bank-details,.woocommerce-order-details,.woocommerce-customer-details{padding:18px}
  ul.wc-bacs-bank-details li{flex-direction:column;align-items:flex-start;gap:3px}
  ul.wc-bacs-bank-details li strong{text-align:left}
  .woocommerce-table--order-details{font-size:13.5px}
  .rg-thankyou-actions a{flex:1 1 100%}
}
@media (max-width:420px){
  .woocommerce-order .woocommerce-order-overview{grid-template-columns:1fr}
}
/* fin pedido recibido */

/* Pedido recibido - tabla en pantallas chicas */
@media (max-width:720px){
  .woocommerce-table--order-details tbody td.product-total,
  .woocommerce-table--order-details tfoot td{white-space:normal}
}
@media (max-width:560px){
  .woocommerce-table--order-details,
  .woocommerce-table--order-details tbody,
  .woocommerce-table--order-details tfoot{display:block;width:100%}
  .woocommerce-table--order-details thead{display:none}
  .woocommerce-table--order-details tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .woocommerce-table--order-details tbody tr:last-child{border-bottom:0}
  .woocommerce-table--order-details tbody td{display:block;padding:0;border:0}
  .woocommerce-table--order-details tbody td.product-name{padding:0 0 6px}
  .woocommerce-table--order-details tbody td.product-total{text-align:left;font-size:15px;font-weight:800}
  .woocommerce-table--order-details tfoot tr{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px}
  .woocommerce-table--order-details tfoot th,
  .woocommerce-table--order-details tfoot td{display:block;padding:7px 0;border:0}
  .woocommerce-table--order-details tfoot th{flex:0 0 auto}
  .woocommerce-table--order-details tfoot td{flex:1 1 90px;min-width:0;text-align:right}
  .woocommerce-table--order-details tfoot tr:first-child{margin-top:10px;border-top:1px solid var(--line)}
  .woocommerce-table--order-details tfoot tr:first-child th,
  .woocommerce-table--order-details tfoot tr:first-child td{padding-top:10px}
  .woocommerce-table--order-details tfoot tr:has(.rg-order-total){margin-top:4px;padding-top:6px;border-top:2px solid var(--line)}
  .woocommerce-table--order-details tfoot tr:has(.rg-order-total) th,
  .woocommerce-table--order-details tfoot tr:has(.rg-order-total) td{border-top:0;padding-top:4px}
  .woocommerce-table--order-details tfoot tr:has(.rg-order-total) td{font-size:17px}
}