/* ============================================================
   LaceUp Store — estilos del tema
   Los colores usan variables CSS; el Personalizador inyecta
   overrides de :root vía wp_add_inline_style (ver inc/enqueue.php).
   ============================================================ */

:root {
  /* Fallback values; laceup_dynamic_css() overrides the first six from Customizer. */
  --primary:      #1F5FD1;
  --primary-dark: #0B2545;
  --accent:       #FF7A59;
  --surface-alt:  #EEF5FB;
  --secondary:    #BFDDF2;
  --text:         #0F172A;
  --text-muted:   #64748B;
  --border:       #E2E8F0;
  --surface:      #FFFFFF;
  --red:          #e11d2a;
  /* Legacy aliases */
  --blue:         var(--primary);
  --blue-600:     color-mix(in srgb, var(--primary) 85%, #000);
  --blue-dark:    var(--primary-dark);
  --ink:          var(--text);
  --bg-soft:      var(--surface-alt);
  --navy-900:     #141a4a;
  --muted:        #6b7280;
  --line:         #e5e7eb;
  --bg:           #ffffff;
  --white:        #ffffff;

  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: var(--font);
  --font-subheading: var(--font);

  --btn-height:   38px;
  --btn-radius:   8px;
  --btn-pad-x:    22px;
  --btn-border:   1.5px;
  --btn-font:     12.5px;
  --btn-weight:   700;
  --btn-tracking: .08em;
  --container: 1400px;
  /* Contenedor ancho para páginas WooCommerce (.woo-wrapper: shop/categoría,
     single-product, carrito, checkout, mi cuenta) — separado de --container
     (1200px) para no afectar home/about/contact. 1600px = 240px sidebar +
     30px gap + 4×300px de .pcard + 3×16px de gap entre cards + 40px de
     padding-inline (20px c/lado), que es la cuenta que permite 4 columnas de
     ~300px sin comprimir la sidebar. Al ser un max-width (no un ancho fijo),
     por debajo de 1600px de viewport se comporta igual que --container
     (llena el 100% disponible con el mismo padding-inline de 20px) y recién
     por encima de 1600px empieza a centrarse dejando aire a los costados —
     fluido, sin salto brusco. */
  --container-woo: 1600px;
  --header-height: 64px;
  --radius: 6px;
  --radius-card: 10px;
  --shadow: 0 1px 6px rgba(15, 23, 42, .05);
  --shadow-lg: 0 6px 20px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 15px;
}
h1, h2, h3, h4 { font-family: var(--font-heading); }
/* The theme's only real "subtitle" concept: the Hero's eyebrow + subtitle paragraph. */
.hero__slide p { font-family: var(--font-subheading); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
ul { list-style: none; }

/* Los campos de contraseña traen su propio botón "mostrar/ocultar" (icono de
   ojo, ver .eye / .laceup-eye) — se oculta el control nativo de Edge/IE para
   que no se dupliquen los dos íconos superpuestos. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
/* Páginas WooCommerce (shop, single-product, carrito, checkout, mi cuenta)
   usan el mismo .container pero con un max-width propio, más ancho, para que
   4 columnas de producto + sidebar quepan sin comprimirse (ver --container-woo
   arriba). Selector de 2 clases > especificidad de ".container" solo. */
.container.woo-wrapper {
  max-width: var(--container-woo);
}
/* single-product no tiene sidebar+grid de 4 columnas (solo imagen+summary a
   46%/50%) — no necesita el ancho de --container-woo (pensado para el grid
   del shop) y a ese ancho se leía con demasiado aire muerto a los costados.
   Vuelve al --container estándar (1200px), sigue centrado por margin-inline:
   auto del .container base, solo más angosto. */
body.single-product .container.woo-wrapper {
  max-width: var(--container);
}

.ph {
  background: repeating-linear-gradient(45deg, #eef1f7 0 12px, #e7ebf4 12px 24px);
  color: #9aa3b2;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius);
}
.ph--img { aspect-ratio: 1 / 1; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.4rem; border-radius: var(--radius);
  font-weight: 600; font-size: 13px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .08em;
  border: 2px solid transparent; transition: .18s ease;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-600); }
.btn--light { background: #fff; color: var(--ink); }
.btn--outline { border-color: #fff; color: #fff; }
.btn--secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--secondary:hover { border-color: var(--muted); }
.btn--sm { padding: .45rem .9rem; font-size: 13px; }

.section { padding: 56px 0; }
.section__title {
  text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text); margin-bottom: 6px;
}
.section__title::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--primary); margin: 10px auto 0;
}

/* HEADER */
/* Una sola barra sticky: título, menú, buscador, íconos y auth. <=980px la .nav es el drawer. */
.topbar { background: var(--primary); color: #fff; position: sticky; top: 0; z-index: 101; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.topbar__inner { display: flex; align-items: center; gap: 24px; height: var(--header-height); }
.topbar__brand { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.topbar__title { display: inline-flex; align-items: flex-start; gap: 3px; line-height: 1.15; max-width: 100%; min-width: 0; color: #fff; font-family: var(--font-heading); font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.topbar__title:hover { color: #fff; opacity: .9; }
.topbar__title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Mismo trato que .site-logo__leaf de superfood: pegado arriba a la derecha del nombre. */
.topbar__title-icon { flex: none; height: .95em; width: auto; max-width: 2em; margin-top: -4px; object-fit: contain; }
.topbar__actions { display: flex; align-items: center; }
.topbar__auth { display: flex; align-self: stretch; margin-left: 16px; }
.topbar__auth li { display: inline-flex; }
.topbar__auth li + li::before { content: ""; width: 1px; height: 16px; background: rgba(255,255,255,.4); align-self: center; }
.topbar__auth a { display: flex; align-items: center; padding: 0 12px; color: #fff; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; opacity: .92; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.topbar__auth a:hover { border-bottom-color: rgba(255,255,255,.6); opacity: 1; }
.topbar__auth .current-menu-item > a, .topbar__auth .current_page_item > a { border-bottom-color: #fff; font-weight: 600; opacity: 1; }
@media (max-width: 980px) {
  .topbar__title { font-size: 18px; }
  .topbar__actions { margin-left: auto; }
  .topbar__auth { display: none; }
}

/* Hamburger — oculto por default, aparece en el mismo breakpoint (~980px)
   donde el resto del layout ya colapsa a una columna (ver media queries de
   .hero__inner/.shop-layout/.search más abajo). */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  position: relative; width: 44px; height: 44px; margin-right: -6px;
  border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0; flex-shrink: 0;
}
.nav-toggle__icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, transform .15s ease;
}
.nav-toggle__icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.nav-toggle.is-open .nav-toggle__icon--open { opacity: 0; transform: rotate(90deg) scale(.6); }
.nav-toggle.is-open .nav-toggle__icon--close { opacity: 1; transform: rotate(0) scale(1); }
.header-search {
  /* position:relative anchors .search-suggest (live results dropdown) below
     the input. overflow was "hidden" before purely to clip the input/button
     square corners to the pill shape — moved to explicit border-radius on
     those two children instead, since overflow:hidden would also clip the
     dropdown that now lives inside this box. */
  flex: 1; display: flex; gap: 8px; border: 0;
  max-width: 620px; margin: 0 auto; height: var(--btn-height); position: relative;
}
.header-search input { order: 2; height: var(--btn-height); flex: 1; min-width: 0; border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); padding: 0 16px; font-size: 14px; outline: none; }
/* Botón "X" que cierra el overlay de pantalla completa (mobile) — no
   existe en el buscador siempre-visible de desktop. Especificidad de 2
   clases a propósito: ".header-search button" (más abajo) es más
   específico que un simple ".header-search__close" (una clase + un
   elemento le gana a una sola clase) y volvía a mostrar el botón en
   desktop pese al display:none. */
.header-search .header-search__close { display: none; }
.header-search select { order: 1; height: var(--btn-height); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 0 12px; font-size: 13px; color: var(--muted); }
.header-search button { order: 3; height: var(--btn-height); border: 0; background: var(--primary); color: #fff; padding: 0 18px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 0 var(--radius) var(--radius) 0; }
/* Desktop: solo la lupa; el input se despliega hacia la izquierda (.is-expanded, main.js §10). */
@media (min-width: 981px) {
  .header-search { flex: 0 0 auto; max-width: none; margin: 0 4px 0 auto; gap: 6px; align-items: center; }
  .header-search select {
    height: 34px; max-width: 170px; cursor: pointer;
    background-color: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  }
  .header-search select option { color: var(--ink); background: #fff; }
  .header-search input {
    flex: 0 0 auto; width: 0; height: 34px; padding: 0; border: 0; border-radius: var(--radius);
    background: #fff; color: var(--ink); opacity: 0; visibility: hidden;
    transition: width .3s ease, padding .3s ease, opacity .2s ease, visibility 0s linear .3s;
  }
  .header-search.is-expanded input { width: 240px; padding: 0 14px; opacity: 1; visibility: visible; transition: width .3s ease, padding .3s ease, opacity .2s ease; }
  .header-search button[type="submit"] { width: 38px; height: 38px; padding: 0; background: transparent; border-radius: 50% !important; }
  .header-search button[type="submit"]:hover { background: rgba(255, 255, 255, .14); }
  .header-search .search-suggest { min-width: 340px; color: var(--ink); }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .header-search.is-expanded input { width: 170px; }
  .header-search select { max-width: 130px; }
}
@media (min-width: 981px) and (prefers-reduced-motion: reduce) {
  .header-search input, .header-search.is-expanded input { transition: none; }
}

/* Live "as you type" product search suggestions (see main.js debounce +
   inc/search-suggest.php AJAX). Sits inside .header-search (which is now
   position:relative) so it works identically in the desktop pill bar and
   the mobile full-width panel (.header-search.is-open below). */
.search-suggest {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 40; max-height: 360px; overflow-y: auto; padding: 6px;
}
.search-suggest.is-open { display: block; }
.search-suggest__item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius); text-decoration: none; color: inherit; }
.search-suggest__item:hover, .search-suggest__item:focus { background: var(--bg-soft); }
.search-suggest__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; background: var(--bg-soft); flex-shrink: 0; }
.search-suggest__body { flex: 1; min-width: 0; }
.search-suggest__name { font-size: 13px; color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest__price { font-size: 12px; margin-top: 2px; }
.search-suggest__price .login-price { font-size: 12px; color: var(--blue); font-weight: 600; }
.search-suggest__state { padding: 14px 8px; font-size: 13px; color: var(--muted); text-align: center; }
.search-suggest__viewall { display: block; text-align: center; padding: 10px 8px; font-size: 13px; font-weight: 600; color: var(--blue); border-top: 1px solid var(--line); margin-top: 4px; text-decoration: none; }
.search-suggest__viewall:hover { background: var(--bg-soft); }
.header__icons { display: flex; align-items: center; gap: 18px; color: #fff; font-size: 20px; }
.header__icons a, .header__icons .icon-btn { display: flex; align-items: center; justify-content: center; color: #fff; transition: opacity .15s; position: relative; z-index: 0; }
/* Touch target ~44px sin agrandar el SVG (20x20) ni mover el badge del
   carrito (que ya depende de "a" en position:relative con offsets fijos):
   se expande el área clickeable con un ::before invisible en vez de padding,
   así el box del <a> (y por lo tanto el badge) no cambia de tamaño.
   z-index:0 arriba en el <a>/<button> abre un stacking context propio — sin
   eso este ::before (position:absolute) pintaba ARRIBA del svg del ícono
   (no posicionado) aunque vaya "antes" en el DOM, tapándolo por completo. */
.header__icons a::before, .header__icons .icon-btn::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; z-index: -1; }
.header__icons a:hover, .header__icons .icon-btn:hover { opacity: .8; }
/* "Parado acá": cuenta/favoritos/carrito marcan la página actual con el mismo
   círculo que ya existía como hit-area invisible (::before, arriba) — solo
   le suma el fondo gris cuando corresponde, sin markup nuevo. */
.header__icons a.is-active::before { background: rgba(255, 255, 255, .18); }
.header__icons a.header__icon--account.is-active::before { inset: -8px -10px; border-radius: 999px; }
.header__icons .icon-btn { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
/* El botón de búsqueda solo tiene sentido cuando ".search" se oculta (ver
   breakpoint ~980px más abajo); en desktop el buscador ya está siempre
   visible en el topbar. Selector con el mismo peso que ".header__icons
   .icon-btn" (arriba) para poder ganarle en cascada sin !important. */
.header__icons .search-toggle { display: none; }
.header__icon--cart .header__icon-badge { right: auto; left: 12px; }
.header__label { font-size: 12px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.header__icon--account .header__label { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.header__icon--cart, .header__icon--wishlist { position: relative; }
.header__icon-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

.nav__inner { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
.nav__inner li { display: inline-flex; }
/* Desktop: barra a todo el ancho; marca y acciones con flex 1 1 0 para que el menú quede centrado.
   Los <li> del menú son items directos (nav/ul sin caja); el auth del drawer se oculta (va en .topbar__auth). */
@media (min-width: 981px) {
  .topbar__inner { max-width: none; padding-inline: 24px; gap: 0; }
  .topbar__brand, .topbar__actions { flex: 1 1 0; }
  .topbar__brand { padding-right: 24px; }
  .topbar__actions { justify-content: flex-end; align-self: stretch; padding-left: 24px; }
  .nav, .nav > .container, .nav__inner { display: contents; }
  .nav__inner li { align-self: stretch; }
  .nav__inner .menu-item--auth { display: none; }
  .header__icons { margin-left: 8px; }
  .nav a { display: flex; align-items: center; border-top: 2px solid transparent; }
}
.nav__inner .menu-item--auth + .menu-item--auth::before { content: ""; width: 1px; height: 16px; background: rgba(255,255,255,.4); align-self: center; }
.nav__inner .menu-item--auth a { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.nav a { color: #fff; padding: 0 12px; font-size: 13px; font-weight: 500; opacity: .92; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { border-bottom-color: rgba(255,255,255,.6); opacity: 1; }
.nav .current-menu-item > a, .nav .current_page_item > a, .nav a.is-active { border-bottom-color: #fff; font-weight: 600; opacity: 1; }
@media (min-width: 981px) and (max-width: 1200px) {
  .topbar__title { font-size: 18px; }
  .topbar__brand { padding-right: 12px; }
  .topbar__actions { padding-left: 12px; }
  .nav a, .topbar__auth a { padding: 0 9px; }
}

/* HERO */
.hero { background: linear-gradient(120deg, var(--gradient-from, var(--primary-dark)) 0%, var(--gradient-to, var(--primary)) 100%); color: var(--hero-text-color, #fff); position: relative; }
.hero__slide { display: none; }
.hero__slide.is-active { display: block; }
.hero__slide.has-bg-image { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero__slide.has-bg-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,0,0,.6), rgba(0,0,0,.25)); z-index: 0; }
.hero__slide.has-bg-image .hero__inner { position: relative; z-index: 1; }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; min-height: 480px; padding: 60px 20px; }
.hero__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); opacity: 1; max-width: none; margin-bottom: 0; }
.hero h1 { font-size: 44px; line-height: 1.1; font-weight: 700; margin: 16px 0 16px; max-width: 560px; }
.hero p { opacity: .9; max-width: 560px; margin-bottom: 22px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__ctas .btn--light { color: var(--primary-dark); }
.hero__media { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.hero__media-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; background: rgba(11, 37, 69, .72); color: #fff; font-size: 11px; font-weight: 600; }
.hero__media-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge { position: absolute; top: 30px; right: 40px; width: 64px; height: 64px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; font-weight: 700; z-index: 2; }
/* Always rendered (even with no badge text) so the content editor always has a click
   target to add one — invisible-but-still-hit-testable when empty so it never shows as
   a stray green circle to real visitors on slides that don't use a badge. */
.hero__badge:empty, .hero__badge.is-off { opacity: 0; }
/* Small always-visible "edit background" corner control (content-editor affordance —
   see inc/content-schema.php hero_slide{n}_bg_type/bg_color/bg_image_url). Sits top-left
   so it never collides with the badge (top-right), the arrows (vertically centered on the
   left/right edges), or the dots (bottom-center). */
.hero__slide-bg-edit { display: none; position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.5); color: #fff; place-items: center; font-size: 14px; line-height: 1; cursor: pointer; z-index: 4; transition: background .15s; }
/* Only shown inside the WinForms content-editor preview: ClickToEditBridge adds
   .laceup-editable to matched elements, which is what reveals this button. Real
   site visitors never get that class, so it stays hidden in production. */
.hero__slide-bg-edit.laceup-editable { display: grid; }
.hero__slide-bg-edit:hover { background: rgba(0,0,0,.55); }
.hero__arrows { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; pointer-events: none; z-index: 3; }
.hero__arrow { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; border: 0; color: #fff; font-size: 16px; cursor: pointer; pointer-events: auto; transition: background .15s; }
.hero__arrow:hover { background: rgba(255,255,255,.32); }

/* Portada: la barra sticky flota transparente sobre el hero; el margen negativo mete el hero debajo. */
.topbar--overlay {
  margin-bottom: calc(-1 * var(--header-height));
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
  box-shadow: none;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.topbar--overlay.is-scrolled,
.topbar--overlay:has(.header-search.is-open) { background-color: var(--primary); background-image: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
body.home .hero .hero__slide-bg-edit { top: calc(10px + var(--header-height)); }
@media (min-width: 981px) {
  /* Simétrico: centra el bloque en el hero completo (header incluido), a la altura de las flechas. */
  body.home .hero .hero__inner { padding-block: calc(60px + var(--header-height)); }
  body.home .hero .hero__badge { top: calc(30px + var(--header-height)); }
}
@media (max-width: 980px) {
  body.home .hero .hero__inner { padding-top: calc(28px + var(--header-height)); }
  body.home .hero .hero__badge { top: calc(16px + var(--header-height)); }
}
/* <=560px la barra pasa a altura automática; superpuesta debe medir exactamente --header-height. */
@media (max-width: 560px) {
  .topbar--overlay .topbar__inner { height: var(--header-height); padding: 0; flex-wrap: nowrap; }
}
.dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.dots .dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.dots .dot.is-active { background: #fff; }

.brands { padding: 36px 0; border-bottom: 1px solid var(--line); }
.brands__carousel { position: relative; margin-top: 22px; }
.brands__slide { display: none; }
.brands__slide.is-active { display: block; }
.brands__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.brands__logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 22px 16px; text-align: center; background: var(--surface-alt); border: 1px solid var(--secondary); border-radius: var(--radius-card); color: var(--primary); transition: box-shadow .18s, transform .18s; }
.brands__logo:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.brands__logo > a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; color: inherit; }
.brands__img { max-width: 100%; max-height: 40px; object-fit: contain; }
.brands__name { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.brands__sub { font-size: 11px; color: var(--text-muted); }
/* Only the Content tab preview (ClickToEditBridge sets html.laceup-editor) shows the add slot. */
.brands__logo--add { display: none; background: transparent; border-style: dashed; }
html.laceup-editor .brands__logo--add { display: flex; }
.brands__add-icon { font-size: 26px; line-height: 1; color: var(--primary); }
/* Flechas "notables" (pedido explícito: nada de sutil) — círculo lleno del
   azul de marca en vez del tratamiento translúcido del hero (ese asume un
   fondo oscuro; esta sección es blanca). padding-inline arriba les reserva
   su propio carril a los costados, no se superponen a ningún logo. */
.brands__arrows { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.brands__arrow {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; pointer-events: auto;
  background: #fff; color: var(--muted); display: grid; place-items: center; font-size: 13px;
  transition: color .15s, border-color .15s;
}
.brands__arrow:hover { color: var(--blue); border-color: var(--blue); }
.brands__dots {
  position: static; transform: none; justify-content: center; margin-top: 20px;
}
.brands__dots .dot { background: var(--line); }
.brands__dots .dot.is-active { background: var(--blue); }

.cta-banner { background: var(--blue-dark); color: #fff; padding: 34px 0; }
.cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-banner h3 { font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.cta-banner p { margin-top: 4px; font-size: 13px; opacity: .8; }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.cat-card { display: flex; flex-direction: column; gap: 14px; text-align: center; padding: 10px 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); transition: .18s; }
.cat-card:hover { box-shadow: var(--shadow-lg); }
.cat-card__img { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius); background: var(--surface-alt); object-fit: cover; }
.cat-card__name { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cat-card__count { font-size: 11px; color: var(--text-muted); margin-top: -10px; }

.stats { background: var(--surface-alt); color: var(--text); }
.stats__inner { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; }
.stats__inner > div { padding: 38px 10px; }
.stats__inner > div + div { border-left: 1px solid var(--secondary); }
.stats b { display: block; font-size: 40px; font-weight: 800; line-height: 1.2; color: var(--primary-dark); }
.stats__plus { color: var(--accent); }
.stats small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 30px; }
.products--5 { grid-template-columns: repeat(5, 1fr); }
.products--4 { grid-template-columns: repeat(4, 1fr); }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; background: var(--surface); transition: .18s; position: relative; }
.pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pcard__tags { position: absolute; top: 24px; left: 24px; z-index: 3; display: flex; gap: 4px; }
.pcard__tag { background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; }
.pcard__tag--popular { background: var(--primary); }
.pcard__tag--new { background: var(--accent); }
.pcard__link { display: block; flex: 1; }
.pcard__link .ph--img { display: block; width: 100%; background: var(--surface-alt); border-radius: var(--radius); object-fit: cover; }
.pcard__cat { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.pcard__btn { display: block; margin-top: 12px; padding: 9px 12px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius); transition: background .15s, color .15s; }
.pcard__btn:hover { background: var(--primary); color: #fff; }
.pcard .ph--img { margin-bottom: 12px; }
.pcard h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .stock { font-size: 12px; color: #16a34a; margin-bottom: 10px; }
.pcard .login-price { font-size: 12px; color: var(--primary); font-weight: 600; }
.pcard .login-price .woocommerce-Price-amount { color: var(--primary); font-weight: 700; }

.page-head { background: linear-gradient(120deg, var(--gradient-from, var(--primary-dark)) 0%, var(--gradient-to, var(--primary)) 100%); color: #fff; text-align: center; padding: 7px 0; }
.page-head h1 { font-size: 28px; }
.breadcrumb { font-size: 13px; opacity: .85; margin-top: 6px; }

.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 30px; padding: 40px 0; }
/* Sin min-width:0 el track "1fr" no se achica por debajo del min-content del
   contenido logueado (stepper + botón Add to cart en .pcard__actions) y el
   grid se desborda del --container (ver medición: shop-main terminaba en
   977px en vez de 930px, empujando cada .pcard a ~315px en vez de ~300px). */
.shop-main { min-width: 0; }
.sidebar h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 10px; border-bottom: 2px solid var(--blue); margin-bottom: 12px; }
/* Cap the category list to ~6 visible rows with an internal scrollbar instead
   of dumping every product_cat term flat (client had 34+ categories, which
   dwarfed the product grid). Applies on both the 240px desktop column and
   the <980px stacked layout — full-width doesn't need a taller box, height
   is independent of the column width. */
.sidebar ul {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) var(--bg-soft);
  /* Scroll shadows: background-attachment:local scrolls WITH the content, so
     the shadow layers only peek out where there's actually more list to see
     (nothing shows if every category already fits — no JS needed). */
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) 0 0,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) 0 100%,
    linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) 0 0,
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) 0 100%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
  background-attachment: local, local, scroll, scroll;
}
.sidebar ul::-webkit-scrollbar { width: 6px; }
.sidebar ul::-webkit-scrollbar-track { background: var(--bg-soft); border-radius: 3px; }
.sidebar ul::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sidebar ul::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.sidebar ul li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); cursor: pointer; }
.sidebar ul li:hover { color: var(--blue); }
.sidebar ul li a { color: inherit; }
.sidebar ul li.is-active { color: var(--blue); font-weight: 600; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.shop-toolbar select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 34px; }
.pagination a, .pagination span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.pagination a.is-active, .pagination span.current { background: var(--blue); color: #fff; border-color: var(--blue); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split .ph { aspect-ratio: 4/3; }
.split h2 { font-size: 26px; margin-bottom: 14px; }
.split p { color: var(--muted); margin-bottom: 12px; }
/* Always rendered (see template-about.php $fundado), muted placeholder copy when empty —
   same "stable click target regardless of empty/filled state" contract as
   .contact-info__value--empty on the Contact page. */
.about__founded { font-size: 13px; color: var(--muted); margin: -4px 0 16px; }
.about__founded--empty { font-style: italic; }

.stats-dark { background: var(--navy-900); color: #fff; position: relative; }
.stats-dark__inner { display: grid; grid-template-columns: repeat(2, 1fr) 1.2fr; gap: 30px; align-items: center; padding: 50px 0; }
.stats-dark h2 { font-size: 30px; max-width: 320px; }
.stats-dark .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; grid-column: span 2; }
.stats-dark .grid2 b { font-size: 30px; display: block; }
.stats-dark .grid2 small { opacity: .8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: center; }
.vm__icon { width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 8px; background: var(--bg-soft); display: grid; place-items: center; font-size: 30px; }

.map { position: relative; height: 320px; margin-bottom: 8px; overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__link {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  padding: 8px 14px; border-radius: var(--radius);
  background: rgba(255,255,255,.94); color: var(--blue-dark);
  font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: background .15s ease, color .15s ease;
}
.map__link:hover, .map__link:focus { background: #fff; color: var(--blue); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* Contact Info card — icon + label + value rows, always rendered (see
   template-contact.php). Colors/spacing reuse this theme's own tokens
   (--blue/--blue-dark/--line/--muted/--radius), not the reference project's
   green — same visual language as the rest of the site. */
.contact-info-card { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 6px 20px; }
.contact-info-card__row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.contact-info-card__row + .contact-info-card__row { border-top: 1px solid var(--line); }
.contact-info-card__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(27, 79, 212, .1); color: var(--blue-dark);
  display: grid; place-items: center; font-size: 16px;
}
.contact-info-card__text { min-width: 0; }
.contact-info-card__label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.contact-info__value { display: block; font-size: 14px; color: var(--ink); line-height: 1.5; }
.contact-info__value a { color: var(--ink); text-decoration: none; }
.contact-info__value a:hover, .contact-info__value a:focus { color: var(--blue); }
.contact-info__value--empty { color: var(--muted); font-style: italic; }
.accordion__item { border-bottom: 1px solid var(--line); padding: 14px 0; cursor: pointer; }
.accordion__item h4 { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.accordion__item h4 span { color: var(--blue); font-size: 18px; line-height: 1; transition: transform .18s; }
.accordion__item.is-open h4 span { transform: rotate(45deg); }
.accordion__item__answer {
  max-height: 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.6;
  transition: max-height .25s ease, margin-top .25s ease;
}
.accordion__item.is-open .accordion__item__answer { max-height: 200px; margin-top: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-family: inherit; font-size: 14px; outline: none; background: #fff; color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
.field input[type="file"] { padding: 8px 12px; }
.field input[type="checkbox"] { width: auto; }

.auth { max-width: 460px; margin: 0 auto; padding: 50px 0; }
.auth--wide { max-width: 820px; }
.auth h2 { font-size: 22px; margin-bottom: 22px; }
.auth .field label { font-weight: 600; color: var(--ink); }
.input-icon { position: relative; }
.input-icon input { padding-left: 38px; }
/* Icono de usuario: SVG inline vía data-URI (evita depender de la fuente de
   emoji del sistema, que renderiza de forma inconsistente entre navegadores). */
.input-icon::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.input-icon .eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: transparent; font-size: 0; cursor: pointer;
  width: 18px; height: 18px; display: inline-block;
}
.input-icon .eye::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.input-icon .eye.is-on::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b4fd4' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
}
.captcha { border: 1px solid var(--line); border-radius: var(--radius); width: 300px; max-width: 100%; height: 74px; margin: 22px 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 14px; color: var(--muted); background: #f9f9f9; }
.captcha .box { width: 24px; height: 24px; border: 2px solid #c4c4c4; border-radius: 3px; }
.captcha .rc { font-size: 10px; text-align: center; color: #9aa3b2; }
.auth__check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.auth__actions { text-align: center; }
.auth__actions .btn { width: 100%; justify-content: center; padding: .85rem; }
.auth__link { display: block; text-align: center; color: var(--blue); margin-top: 16px; font-size: 14px; }
.auth__row { display: flex; justify-content: space-between; align-items: center; }
.auth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 680px) { .auth-cols { grid-template-columns: 1fr; } }

.empty-state { text-align: center; padding: 40px 0; }
.empty-state__icon { font-size: 110px; color: #e3e6ee; line-height: 1; margin-bottom: 10px; }
.empty-state h2 { font-size: 30px; margin-bottom: 12px; }
.empty-state p { color: var(--muted); max-width: 520px; margin: 0 auto 24px; }

/* Generic WP page content (page.php: legal/policy pages, any client-authored page
   with no custom template). 760px matches the reading-width already used by
   template-request-account.php's form container. */
.entry-content { max-width: 760px; margin: 0 auto; font-size: 15px; line-height: 1.75; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  color: var(--blue-dark); font-weight: 700; line-height: 1.3; margin: 32px 0 12px;
}
.entry-content h1 { font-size: 26px; }
.entry-content h2 { font-size: 22px; }
.entry-content h3 { font-size: 18px; }
.entry-content h4 { font-size: 16px; }
.entry-content p { margin: 0 0 16px; }
.entry-content ul, .entry-content ol { margin: 0 0 16px 22px; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 6px; }
.entry-content a:not(.btn):not(.button) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:not(.btn):not(.button):hover { color: var(--blue-600); }
.entry-content strong, .entry-content b { color: var(--ink); font-weight: 700; }
.entry-content blockquote {
  margin: 20px 0; padding: 4px 20px; border-left: 3px solid var(--line); color: var(--muted); font-style: italic;
}
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.entry-content table th, .entry-content table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.entry-content table th { background: var(--bg-soft); }

.footer { position: relative; background: var(--footer-bg, var(--blue-dark)); color: rgba(255,255,255,.85); padding: 50px 0 24px; margin-top: 60px; }
/* Editable en el editor de Contenido de la app (content-schema.php footer_bg_color)
   con el mismo patrón que .hero__slide-bg-edit: control de esquina siempre oculto
   a visitantes reales, ClickToEditBridge le agrega .laceup-editable para mostrarlo. */
.footer__bg-edit { display: none; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); color: #fff; place-items: center; font-size: 14px; line-height: 1; cursor: pointer; z-index: 4; }
.footer__bg-edit.laceup-editable { display: grid; }
.footer__bg-edit:hover { background: rgba(255,255,255,.22); }
.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer__logo { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); display: inline-grid; place-items: center; padding: 12px 20px; border-radius: var(--radius-card); margin-bottom: 16px; font-weight: 800; color: #fff; font-size: 20px; }
.footer__logo a { color: #fff; }
.footer__logo span { color: var(--secondary); }
.footer__logo img { display: block; max-height: 40px; width: auto; }
.footer__logo img[src$="logo-default.svg"] { filter: brightness(0) invert(1); }
.footer h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.footer ul li { padding: 6px 0; font-size: 14px; }
.footer ul li a:hover { color: #fff; }
.footer__social li a { display: flex; align-items: center; gap: 10px; }
.footer__social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
}
.footer__social-icon--facebook  { background: #1877f2; }
.footer__social-icon--instagram { background: #d6249f; }
.footer__social-icon--youtube   { background: #ff0000; }
.footer__contact p { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 8px; opacity: .85; }
.footer__ico { flex-shrink: 0; margin-top: 3px; }
.footer__bottom { text-align: center; border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 18px; font-size: 13px; opacity: .8; }
.social { display: flex; gap: 10px; margin-top: 8px; }
.social i { width: 30px; height: 30px; border-radius: 4px; background: rgba(255,255,255,.12); display: grid; place-items: center; }

/* ============================================================
   WOOCOMMERCE — restyle completo (Fase 2)
   Tokens compartidos con la maqueta: var(--blue/--red/--line/...)
   ============================================================ */
/* padding-top/bottom explícitos (no shorthand "padding: 40px 0 56px") a
   propósito: el shorthand pone left/right en 0 y pisa el padding-inline:20px
   de .container (mismo selector, misma especificidad, esta regla cae después
   en cascada) — eso hacía que TODAS las páginas WooCommerce (shop, carrito,
   checkout, mi cuenta) quedaran pegadas al borde del navegador en cualquier
   viewport <= max-width del contenedor. Confirmado en vivo con
   getBoundingClientRect: paddingLeft/Right computados daban 0px pese al
   padding-inline de .container. */
.woo-wrapper { padding-top: 40px; padding-bottom: 56px; }

.btn--ghost {
  border-color: var(--blue); color: var(--blue); background: #fff;
}
.btn--ghost:hover { background: var(--blue); color: #fff; }

/* ---------- Botones nativos de WooCommerce → .btn ---------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
button.woocommerce-button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.4rem; border-radius: var(--radius);
  font-family: var(--font); font-weight: 600; font-size: 14px; line-height: 1.2;
  cursor: pointer; border: 2px solid transparent; transition: .18s ease;
  background: var(--blue); color: #fff; text-decoration: none;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
button.woocommerce-button:hover,
.woocommerce #respond input#submit:hover { background: var(--blue-600); color: #fff; }
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: .55; cursor: not-allowed; }
.woocommerce .button.btn--ghost { background: #fff; color: var(--blue); border-color: var(--blue); }
.woocommerce .button.btn--ghost:hover { background: var(--blue); color: #fff; }

/* WooCommerce trae su propio morado de marca en ".button.alt" (single
   add-to-cart, place order, etc.) con selectores más específicos que los de
   arriba — se iguala la especificidad para que gane el azul del tema. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--blue); color: #fff; border-color: transparent;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background: var(--blue-600); color: #fff;
}

/* ---------- Avisos ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-noreviews, p.no-comments {
  list-style: none; margin: 0 0 22px; padding: 14px 18px 14px 46px;
  background: var(--bg-soft); border-left: 4px solid var(--blue);
  border-radius: var(--radius); font-size: 14px; color: var(--ink);
  display: flow-root; position: relative; min-height: 44px;
}
/* .woocommerce-message/.woocommerce-info son siempre texto + a lo sumo UN
   botón (nunca una lista) — flex + align-items:center los centra de verdad.
   .woocommerce-error queda afuera a propósito: ese trae varios <li> apilados
   (uno por error) y convertirlo en flex los pondría en fila en vez de
   apilados. */
.woocommerce-message, .woocommerce-info {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
}
/* order:2 fuerza cualquier botón/link de acción a mostrarse SIEMPRE al final
   (con margin-left:auto empujándolo a la derecha), sin importar si el markup
   que lo genera (WooCommerce core u otro) lo escribe antes o después del
   texto — evita el desorden de notices como "Confirm email address" donde el
   botón venía primero en el HTML. */
.woocommerce-message .button, .woocommerce-info .button,
.woocommerce-message button, .woocommerce-info button {
  float: none; margin-left: auto; padding: .4rem .9rem; font-size: 13px; order: 2;
}
.woocommerce-error .button { float: right; padding: .4rem .9rem; font-size: 13px; margin-left: 12px; }
/* El ícono nativo de WooCommerce depende de la fuente "WooCommerce": si esa
   fuente no carga (bloqueada, CDN caído, hosting distinto) el glyph cae a un
   tofu/cuadro vacío — se reemplaza por un SVG propio (mismo criterio ya usado
   en header/social icons) que no depende de ningún font file. */
.woocommerce-message::before, .woocommerce-info::before {
  font-family: inherit !important; content: "" !important;
  top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.woocommerce-message::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2316a34a'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
}
.woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%231b4fd4'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z'/%3E%3C/svg%3E");
}
.woocommerce-error::before { top: 50% !important; transform: translateY(-50%); }
.woocommerce-message { border-left-color: #16a34a; }
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-error li { margin: 4px 0; }
.woocommerce-notices-wrapper:empty { display: none; }

/* ---------- Inputs nativos (checkout / cuenta / reviews) ---------- */
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; display: block; }
.woocommerce form .form-row label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink);
}
.woocommerce form .form-row .required { color: var(--red); text-decoration: none; }
.woocommerce form .form-row .woocommerce-input-wrapper { display: block; }
.woocommerce .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; font-family: var(--font); font-size: 14px; outline: none;
  background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.woocommerce .input-text:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27, 79, 212, .12);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--red); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
@media (min-width: 681px) {
  .woocommerce form .form-row-first { width: calc(50% - 7px); float: left; }
  .woocommerce form .form-row-last { width: calc(50% - 7px); float: right; }
}
.select2-container--default .select2-selection--single {
  border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
  height: 42px !important; display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important; font-size: 14px; padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; }
.select2-dropdown { border-color: var(--line) !important; font-size: 14px; }

/* ---------- Tarjeta genérica ---------- */
.laceup-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 24px;
}

/* ---------- Breadcrumb (dentro de .page-head, mismo banner en todo el sitio) ---------- */
.page-head .breadcrumb a { color: #fff; opacity: .95; }
.page-head .breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   LOOP DE PRODUCTOS (shop / categoría / relacionados)
   ============================================================ */
.woocommerce ul.products,
ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }

/* Grid principal del shop (sidebar de categorías + main): con el --container
   de 1200px, 4 columnas daban tarjetas de ~215px — el cliente pidió 300x458
   medido con devtools, y en un segundo pase pidió además recuperar el
   espacio muerto a los costados en vez de bajar a 3 columnas. Ahora que
   .woo-wrapper usa --container-woo (1600px, ver :root), el grid de 4
   columnas por defecto (línea ~429) ya deja ~299px reales por tarjeta sin
   necesidad de un override a 3 columnas aquí. */
.woocommerce ul.products li.product,
ul.products li.product {
  /* !important necesario: woocommerce-smallscreen.css trae, solo <=768px, un
     selector con [class*="columns-"] (especificidad más alta que la nuestra)
     que fuerza width:48%/float:left — sin esto la tarjeta queda angosta
     (~23% del ancho real) y el stepper de cantidad se ve cortado en mobile. */
  float: none !important; width: auto !important; margin: 0; padding: 12px; display: flex; flex-direction: column;
  min-width: 0; /* mismo fix de blowout que .shop-main, aplicado también al item del grid interno */
}
li.product.pcard { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; position: relative; transition: .18s; }
li.product.pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.pcard__media { display: block; margin-bottom: 8px; }
.pcard__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  border-radius: var(--radius); background: var(--bg-soft);
}

.pcard__media-wrap { position: relative; margin-bottom: 8px; }
.pcard__media-wrap .pcard__media { margin-bottom: 0; }
.pcard__fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink); cursor: pointer; padding: 0; transition: color .15s, border-color .15s;
}
.pcard__fav svg { fill: none; }
.pcard__fav:hover { color: var(--blue); border-color: var(--blue); }
.pcard__fav.is-active { color: var(--ink); border-color: var(--line); }
.pcard__fav.is-active svg { fill: currentColor; }
.pcard__fav.is-loading { opacity: .5; pointer-events: none; }
.pcard__title { font-size: 13px; font-weight: 500; line-height: 1.4; min-height: 32px; margin-bottom: 4px; }
.pcard__title a { color: var(--ink); }
.pcard__title a:hover { color: var(--blue); }
li.product.pcard .stock { margin-bottom: 6px; }
.pcard .stock--in { color: #16a34a; }
.pcard .stock--out { color: var(--red); }
li.product.pcard .login-price { font-size: 13px; margin-top: auto; }
li.product.pcard .login-price .woocommerce-Price-amount { color: var(--blue-dark); font-weight: 700; font-size: 15px; }
li.product.pcard .login-price del { color: var(--muted); font-weight: 400; margin-right: 6px; }
li.product.pcard .login-price del .woocommerce-Price-amount { color: var(--muted); font-weight: 400; font-size: 13px; }
li.product.pcard .login-price ins { text-decoration: none; }

.pcard__qty { margin-bottom: 6px; }
.pcard__qty .quantity.laceup-stepper { width: 100%; }
.pcard__qty .quantity.laceup-stepper input.qty { flex: 1; width: auto; min-width: 0; }
.pcard__actions { margin-top: 8px; }
.pcard__actions .button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .55rem 1rem; font-size: 13px; font-weight: 700;
  background: var(--blue); color: #fff; border: 2px solid transparent;
  border-radius: var(--radius); text-decoration: none; text-align: center;
  cursor: pointer; transition: .18s ease;
}
.pcard__actions .button:hover,
.pcard__actions .button:focus {
  background: var(--blue-600); color: #fff;
}
.pcard__actions .button.loading { opacity: .6; pointer-events: none; }
.pcard__actions .added_to_cart {
  display: block; text-align: center; margin-top: 8px; font-size: 12px;
  color: var(--blue); font-weight: 600;
}

/* El título "Shop"/"Category Name" ya lo muestra .page-head (banner azul);
   el de woocommerce_shop_loop_header duplicaría el <h1>. */
.woocommerce-products-header { display: none; }

/* ---------- Toolbar (result count + ordering) ---------- */
.shop-main .shop-toolbar { flex-wrap: wrap; gap: 12px; }
.shop-toolbar .woocommerce-notices-wrapper { flex-basis: 100%; }
.shop-toolbar .woocommerce-result-count { margin: 0; font-size: 13px; color: var(--muted); }
.shop-toolbar .woocommerce-ordering { margin: 0; }
.shop-toolbar .woocommerce-ordering select {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: 13px; color: var(--muted); background: #fff; outline: none;
}

/* ---------- Paginación nativa ---------- */
.woocommerce nav.woocommerce-pagination { text-align: center; margin-top: 34px; }
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex; gap: 8px; border: 0; margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; float: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px;
  color: var(--ink); line-height: 1; background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--bg-soft); color: var(--blue); }
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.woocommerce nav.woocommerce-pagination ul li span.dots {
  border: 0; background: transparent; color: var(--muted); width: 20px;
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product { display: block; position: relative; }
.woocommerce div.product .laceup-product-top,
.woocommerce div.product { margin-top: 8px; }
.woocommerce #content div.product div.images,
.woocommerce div.product div.images {
  float: left; width: 46%; margin-bottom: 34px;
}
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary {
  float: right; width: 50%; margin-bottom: 34px;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder {
  /* Borde default de WooCommerce core (#f2f2f2) sobre el DIV que envuelve la
     imagen — vive fuera de nuestro control de .images img de abajo, así que
     sobrevivía a cualquier ajuste ahí. Es el "panel" que se seguía viendo
     alrededor de la imagen ya centrada/acotada. */
  border: 0;
}
.woocommerce div.product div.images img {
  /* El <img> de WooCommerce trae width/height nativos (single_image_width:900
     en inc/setup.php) que sin esto ganan sobre el 46% del contenedor: el
     navegador respeta el atributo HTML por encima de cualquier ancho de
     layout y la imagen se pinta a tamaño real, no al del grid. max-width:500px
     además le pone un techo elegante en pantallas anchas (46% de un container
     grande se sentía igual de gigante que sin la regla) sin tocar el
     responsive: por debajo de 500px sigue encogiendo al 100% de su columna.
  */
  display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  /* Sin borde: mismo tratamiento que .pcard__media img (grid de la tienda) —
     un borde visible acá se veía como un panel/recuadro duplicado ahora que
     la imagen quedó chica y centrada en vez de ocupar todo el ancho. */
  border-radius: 10px; background: var(--bg-soft);
}
.woocommerce div.product div.images .flex-control-thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 72px; float: none; }
.woocommerce div.product div.images .flex-control-thumbs img {
  width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; opacity: .7;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { border-color: var(--blue); opacity: 1; }

.woocommerce div.product .product_title {
  font-size: 26px; line-height: 1.25; color: var(--ink); margin-bottom: 10px;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 10px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--blue-dark); font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.woocommerce div.product p.price del { color: var(--muted); font-weight: 400; font-size: 17px; opacity: 1; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product p.price .login-price { font-size: 15px; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--muted); font-size: 14px; margin-bottom: 18px;
}
.woocommerce div.product p.stock { font-size: 13px; }
.woocommerce div.product p.stock.in-stock { color: #16a34a; }
.woocommerce div.product p.stock.out-of-stock { color: var(--red); }

.woocommerce div.product form.cart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 18px 0; margin-bottom: 18px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; }
.woocommerce div.product form.cart .button { padding: .8rem 1.8rem; font-size: 14px; }
.woocommerce div.product form.cart .variations { margin-bottom: 8px; width: 100%; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
  padding: 6px 0; border: 0; font-size: 14px;
}
.woocommerce div.product form.cart .reset_variations { font-size: 12px; color: var(--muted); }
.woocommerce div.product .product_meta {
  font-size: 13px; color: var(--muted); display: grid; gap: 4px;
}
.woocommerce div.product .product_meta a { color: var(--blue); }
.woocommerce div.product .onsale,
.woocommerce ul.products li.product .onsale {
  position: absolute; top: 12px; left: 12px; right: auto; min-height: 0; min-width: 0;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 3px; line-height: 1.5; margin: 0; z-index: 2;
}

/* Tabs de descripción / reviews */
.woocommerce div.product .woocommerce-tabs { clear: both; margin-bottom: 40px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: 4px; margin: 0 0 0; padding: 0; border-bottom: 2px solid var(--line);
  overflow-x: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 0; background: transparent; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 12px 18px; font-size: 14px; font-weight: 600;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px;
  text-transform: none; white-space: nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--blue); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--blue); border-bottom-color: var(--blue);
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 24px 0 0; font-size: 14px; color: var(--ink);
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-of-type { font-size: 18px; margin-bottom: 12px; }

/* Relacionados / upsells
   El <section class="related products"> de Woo también carga la clase
   genérica "products" (línea ~152, grid de 4 columnas para el bloque de
   productos destacados del home) — sin el "display: block" de acá, ese
   <section> se vuelve grid y aplasta a su propio <ul class="products"> hijo
   dentro de una sola columna angosta (cards diminutas, mal alineadas). Se
   fuerza flujo normal en el section y se le da al <ul> interno su propio
   columnaje: 3 columnas, más ancho que el 4 heredado del shop y acorde a que
   Woo normalmente muestra menos relacionados/upsells que el listado completo. */
.woocommerce .related.products, .woocommerce .up-sells { display: block; clear: both; padding-top: 10px; }
.woocommerce .related.products > h2, .woocommerce .up-sells > h2 {
  text-align: center; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.woocommerce .related.products > h2::after, .woocommerce .up-sells > h2::after {
  content: ""; display: block; width: 60px; height: 3px; background: var(--blue); margin: 10px auto 0;
}
.woocommerce .up-sells ul.products {
  grid-template-columns: repeat(3, 1fr);
}

/* Carrusel de "Related products" (woocommerce/single-product/related.php):
   siempre 3 tarjetas visibles por vez, scroll horizontal + flechas en vez de
   dejar un 4to/5to item huérfano en una fila aparte cuando el pool trae más
   de 3 (ver woocommerce_output_related_products_args en inc/woocommerce.php). */
/* padding-inline le reserva a las flechas un carril propio a los costados en
   vez de superponerse a la primera/última tarjeta (ver left/right: 0 abajo). */
.related-carousel { position: relative; padding-inline: 60px; }
.related-carousel ul.products {
  display: flex; gap: 16px; overflow-x: hidden; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; margin-top: 24px;
}
.related-carousel ul.products li.product {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * 16px) / 3);
  max-width: calc((100% - 2 * 16px) / 3);
}
.related-carousel__arrow {
  position: absolute; top: 35%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
}
.related-carousel__arrow:hover { color: var(--blue); border-color: var(--blue); }
.related-carousel__arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
.related-carousel__arrow--prev { left: 8px; }
.related-carousel__arrow--next { right: 8px; }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist { padding: 0; }
.woocommerce #reviews #comments ol.commentlist li {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  position: static; float: left; width: 44px; border: 0; border-radius: 50%; padding: 0; margin-right: 12px;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0 0 0 56px; border: 0; padding: 0;
}
.woocommerce p.stars a { color: var(--blue); }
.woocommerce #review_form #respond textarea { border: 1px solid var(--line); border-radius: var(--radius); }

/* ============================================================
   STEPPER DE CANTIDAD (main.js envuelve input.qty)
   ============================================================ */
/* Sin ancestro ".woocommerce": template-wishlist.php es una página custom
   (Template Name simple) cuyo <body> nunca recibe la clase "woocommerce" que
   agrega el body_class() de WooCommerce, así que el stepper también debe
   funcionar sin ese ancestro (confirmado: ningún otro ".quantity" del tema
   usa la clase "laceup-stepper" salvo el que arma main.js). */
.quantity.laceup-stepper {
  display: inline-flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: #fff;
}
.laceup-stepper__btn {
  width: 34px; border: 0; background: var(--bg-soft); color: var(--ink);
  font-size: 17px; line-height: 1; cursor: pointer; transition: .15s;
  display: grid; place-items: center; user-select: none;
}
.laceup-stepper__btn:hover { background: var(--blue); color: #fff; }
.quantity.laceup-stepper input.qty {
  width: 52px; border: 0; text-align: center; font-family: var(--font);
  font-size: 14px; font-weight: 600; color: var(--ink); outline: none;
  -moz-appearance: textfield; appearance: textfield;
  /* Mismo padding vertical que ".woocommerce .input-text" (que este input
     también recibe vía su clase nativa "input-text qty text") — se repite
     acá sin depender de ".woocommerce" porque template-wishlist.php no trae
     esa clase en el body y el input quedaría a la mitad de la altura
     (~21px en vez de 41px) igual que le pasaba al wrapper. */
  padding: 10px 12px;
}
.quantity.laceup-stepper input.qty::-webkit-outer-spin-button,
.quantity.laceup-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   CARRITO
   ============================================================ */
.laceup-cart__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.laceup-cart__title { font-size: 26px; color: var(--ink); }
.laceup-cart__count { font-size: 14px; color: var(--muted); }

.laceup-cart__columns { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
.laceup-cart__main { min-width: 0; }
.laceup-cart__aside { position: sticky; top: 20px; }

.laceup-cart-items { padding: 6px 24px; }
.laceup-cart-item {
  display: grid; grid-template-columns: 88px 1fr auto auto 34px;
  gap: 16px; align-items: center; padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.laceup-cart-items__list > .laceup-cart-item:last-of-type { border-bottom: 0; }
.laceup-cart-item__thumb img {
  width: 88px; height: 88px; object-fit: contain; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-soft);
}
.laceup-cart-item__name { font-size: 14px; font-weight: 600; line-height: 1.4; }
.laceup-cart-item__name a { color: var(--ink); }
.laceup-cart-item__name a:hover { color: var(--blue); }
.laceup-cart-item__name .variation { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.laceup-cart-item__price { font-size: 13px; color: var(--muted); margin-top: 4px; }
.laceup-cart-item__subtotal { font-size: 15px; font-weight: 700; color: var(--blue-dark); white-space: nowrap; }
.laceup-cart-item__remove-link {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--muted); transition: .15s;
}
.woocommerce .laceup-cart-item__remove-link:hover { background: #fdecee; color: var(--red); }

.laceup-cart-items__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 0; border-top: 1px solid var(--line);
}
.laceup-cart-coupon { display: flex; gap: 10px; flex: 1; max-width: 420px; }
.laceup-cart-coupon .input-text { flex: 1; min-width: 0; }
.laceup-cart-coupon .button { white-space: nowrap; }
/* El botón Update cart queda oculto: main.js lo dispara con debounce */
.laceup-cart-update {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0;
}

/* Resumen (cart-totals) */
/* WooCommerce's own woocommerce-layout.css ships `.cart-collaterals .cart_totals
   { float: right; width: 48% }` for its default 2-column cart layout. Our
   `.laceup-cart__aside` already sizes the sidebar via CSS grid, so that legacy
   rule squeezes the card to ~48% of an already-narrow column. Override it back
   to a normal full-width block inside our custom aside. */
.woocommerce .cart-collaterals .cart_totals.laceup-totals,
.woocommerce-page .cart-collaterals .cart_totals.laceup-totals {
  float: none;
  width: 100%;
}
.laceup-totals__title { font-size: 17px; margin-bottom: 14px; color: var(--ink); }
.woocommerce .laceup-totals__table { width: 100%; border: 0 !important; border-radius: 0 !important; margin: 0 0 16px; border-collapse: collapse; }
.woocommerce .laceup-totals__table th,
.woocommerce .laceup-totals__table td {
  border: 0; border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 14px;
  background: transparent; vertical-align: top;
}
.woocommerce .laceup-totals__table th { text-align: left; font-weight: 500; color: var(--muted); width: 40%; }
.woocommerce .laceup-totals__table td { text-align: right; color: var(--ink); }
.woocommerce .laceup-totals__table tr.order-total th,
.woocommerce .laceup-totals__table tr.order-total td { border-bottom: 0; padding-top: 14px; font-size: 16px; font-weight: 700; color: var(--blue-dark); }
.woocommerce .laceup-totals__table .woocommerce-shipping-methods { margin: 0; padding: 0; text-align: right; }
.woocommerce .laceup-totals__table .woocommerce-shipping-methods li { margin-bottom: 6px; }
.woocommerce .laceup-totals__table .woocommerce-shipping-destination { font-size: 12px; color: var(--muted); }
.woocommerce .laceup-totals__table .shipping-calculator-button { font-size: 12px; color: var(--blue); }
.woocommerce-shipping-calculator .button { margin-top: 8px; }
.wc-proceed-to-checkout { padding: 0; margin: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex; width: 100%; justify-content: center; padding: .9rem;
  font-size: 15px; margin: 0; background: var(--primary);
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--blue-600); }
.laceup-totals__continue {
  display: block; text-align: center; margin-top: 14px; font-size: 13px;
  color: var(--blue); font-weight: 600;
}
.laceup-totals__continue:hover { text-decoration: underline; }

/* Carrito vacío (cart-empty.php default) */
.cart-empty.woocommerce-info {
  /* display:block explícito: sin esto hereda el display:flex de la regla
     genérica ".woocommerce-info" (avisos con botón inline) más arriba, que
     ponía el emoji del carrito y el texto en fila en vez de apilados y
     centrados como diseña el resto de esta regla (text-align:center). */
  display: block;
  border: 0; background: transparent; text-align: center; padding: 60px 0 6px;
  font-size: 24px; font-weight: 700; color: var(--ink);
}
.cart-empty.woocommerce-info::before {
  /* position:static: WooCommerce trae position:absolute por default en
     ".woocommerce-info::before" — sin pisarlo, el emoji queda flotando fuera
     del flujo normal (a la izquierda del texto) en vez de apilarse arriba
     centrado como pide display:block + margin-bottom de esta misma regla. */
  content: "\1F6D2" !important; display: block; position: static; font-size: 90px; line-height: 1;
  width: auto !important; height: auto !important; background: none !important;
  margin-bottom: 16px; filter: grayscale(1); opacity: .35;
}
.return-to-shop { text-align: center; padding-bottom: 50px; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.laceup-checkout__head { margin-bottom: 22px; }
.laceup-checkout__title { font-size: 26px; color: var(--ink); }
.laceup-checkout__columns { display: grid; grid-template-columns: 1fr 420px; gap: 26px; align-items: start; }
.laceup-checkout__aside { position: sticky; top: 20px; }
.laceup-checkout__details { min-width: 0; }

.woocommerce-checkout .col2-set { width: 100%; display: grid; gap: 22px; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
.laceup-checkout-card > div > h3,
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields h3 {
  font-size: 16px; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
#ship-to-different-address { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#ship-to-different-address label { font-weight: 600; margin: 0; }
#ship-to-different-address .woocommerce-form__input-checkbox { accent-color: var(--blue); }
.woocommerce-additional-fields h3 { font-size: 16px; margin: 6px 0 12px; }

/* Login / coupon toggles arriba del checkout */
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 14px; }
.woocommerce-form-coupon-toggle .showcoupon,
.woocommerce-info a { color: var(--blue); font-weight: 600; }
.woocommerce form.checkout_coupon, .woocommerce form.woocommerce-form-login.login {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 22px; background: #fff;
}
.woocommerce form.checkout_coupon .form-row { display: inline-block; margin-right: 10px; }

/* Resumen de orden */
.laceup-order-review > h3 {
  font-size: 17px; margin-bottom: 14px; color: var(--ink);
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%; border: 0; margin: 0; border-collapse: collapse; font-size: 14px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border: 0; border-bottom: 1px solid var(--line); padding: 11px 0; background: transparent; text-align: left;
}
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table .product-name { color: var(--ink); font-weight: 500; }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 400; }
.woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: var(--muted); }
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
  border-bottom: 0; padding-top: 14px; font-size: 16px; font-weight: 700; color: var(--blue-dark);
}

/* Métodos de pago */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; margin-top: 16px; }
.woocommerce-checkout #payment ul.payment_methods {
  border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  font-size: 14px; list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li label { display: inline; font-weight: 600; margin: 0 0 0 4px; }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--blue); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--bg-soft); border-radius: var(--radius); font-size: 13px; color: var(--muted);
  margin-top: 10px; padding: 12px 14px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 0; margin: 0; }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.woocommerce #payment #place_order {
  width: 100%; padding: .95rem; font-size: 15px; background: var(--primary); float: none;
}
.woocommerce #payment #place_order:hover { background: var(--blue-600); }

/* ============================================================
   THANK YOU (orden recibida)
   ============================================================ */
.laceup-thankyou { max-width: 860px; margin: 0 auto; padding-inline: 16px; }
.laceup-thankyou__hero { text-align: center; padding: 26px 0 8px; }
.laceup-thankyou__badge {
  width: 76px; height: 76px; border-radius: 50%; background: #e8f7ee; color: #16a34a;
  display: inline-grid; place-items: center; margin-bottom: 16px;
}
.laceup-thankyou__badge--failed { background: #fdecee; color: var(--red); }
.laceup-thankyou__title { font-size: 28px; color: var(--ink); margin-bottom: 8px; }
.laceup-thankyou__sub, .laceup-thankyou__sub .woocommerce-thankyou-order-received {
  color: var(--muted); font-size: 15px; margin: 0 auto; max-width: 560px;
}
.laceup-thankyou__overview {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;
  margin: 26px 0; padding: 0; list-style: none;
}
.woocommerce ul.order_details.laceup-thankyou__overview { padding-left: 0; }
.woocommerce ul.order_details.laceup-thankyou__overview::before,
.woocommerce ul.order_details.laceup-thankyou__overview::after { content: none; display: none; }
.woocommerce ul.order_details.laceup-thankyou__overview li {
  float: none; border: 1px solid var(--line); border-right-width: 1px; border-radius: var(--radius);
  background: #fff; padding: 14px; margin: 0; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  /* Sin esto, un grid item nunca se achica por debajo del min-content de su
     contenido (mismo gotcha que .shop-main más arriba en este archivo) — un
     email largo empujaba el ancho de la celda y se salía de la caja en vez
     de partirse en dos líneas. */
  min-width: 0;
}
.woocommerce ul.order_details.laceup-thankyou__overview li strong {
  display: block; font-size: 15px; margin-top: 6px; color: var(--ink); text-transform: none; letter-spacing: 0;
  overflow-wrap: anywhere;
}
.laceup-thankyou__actions { display: flex; gap: 12px; justify-content: center; margin: 26px 0 10px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .woocommerce ul.order_details.laceup-thankyou__overview li.email,
  .woocommerce ul.order_details.laceup-thankyou__overview li.total { grid-column: 1 / -1; }
}

/* Detalle de orden (thankyou + view-order) */
.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: 26px; }
.woocommerce-order-details__title, .woocommerce-customer-details > h2,
.woocommerce-column__title { font-size: 18px; margin-bottom: 14px; color: var(--ink); }
.woocommerce table.shop_table.order_details,
.woocommerce table.woocommerce-table--order-details {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff;
}
.woocommerce table.order_details th, .woocommerce table.order_details td {
  border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; text-align: left; background: transparent;
}
.woocommerce table.order_details thead th {
  background: var(--bg-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.woocommerce table.order_details tfoot th { font-weight: 500; color: var(--muted); }
.woocommerce table.order_details tfoot tr:last-child th,
.woocommerce table.order_details tfoot tr:last-child td {
  border-bottom: 0; font-weight: 700; color: var(--blue-dark);
}
.woocommerce table.order_details th:last-child,
.woocommerce table.order_details td:last-child { text-align: right; }
.woocommerce .woocommerce-customer-details address {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  font-style: normal; font-size: 14px; color: var(--muted); line-height: 1.7; background: #fff;
}
.woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.woocommerce-columns--addresses .woocommerce-column { float: none; width: 100%; }

/* ============================================================
   MI CUENTA — layout + navegación
   ============================================================ */
/* Se apunta directo a ".woocommerce-account .woocommerce" (sin asumir si el
   shortcode cae bajo .entry-content, .woo-wrapper u otro wrapper de página) —
   confirmado en vivo que [woocommerce_my_account] siempre imprime su propio
   <div class="woocommerce"> (WC_Shortcodes::shortcode_wrapper), así que basta
   con el body class de la página de cuenta para escopar esto sin depender de
   la cadena de ancestros exacta. */
.woocommerce-account.logged-in .woocommerce {
  display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; min-width: 0; }
/* WooCommerce le agrega a ".woocommerce" (y a ".col2-set") un clearfix legacy
   (::before/::after con content:" "; display:table) pensado para su layout con
   floats. Al convertirlo en grid container esos pseudo-elementos pasan a ser
   items reales de la grilla (primeros en el DOM) y desplazan nav/content a
   celdas equivocadas — root cause confirmado en vivo del layout roto. Se
   neutralizan porque el layout ya no depende de floats/clearfix. */
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after,
.woocommerce-Addresses.col2-set::before,
.woocommerce-Addresses.col2-set::after,
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after {
  content: none; display: none;
}

.laceup-account-nav {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 20px;
}
.laceup-account-nav__greeting {
  display: flex; align-items: center; gap: 12px; padding: 20px 18px;
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-dark) 100%); color: #fff;
}
.laceup-account-nav__avatar {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: grid; place-items: center; font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.laceup-account-nav__hello { font-weight: 700; font-size: 15px; }
.laceup-account-nav__sub { font-size: 12px; opacity: .8; }
.laceup-account-nav ul { padding: 8px 0; }
.laceup-account-nav__item a {
  display: flex; align-items: center; gap: 12px; padding: 11px 18px;
  font-size: 14px; color: var(--muted); border-left: 3px solid transparent; transition: .15s;
}
.woocommerce-account .laceup-account-nav a,
.woocommerce-account .laceup-account-nav a:hover { text-decoration: none; }
.laceup-account-nav__icon { flex-shrink: 0; }
.laceup-account-nav__item a:hover { color: var(--blue); background: var(--bg-soft); }
.laceup-account-nav__item.is-active a {
  color: var(--blue); font-weight: 600; border-left-color: var(--blue); background: var(--bg-soft);
}
.laceup-account-nav__item--customer-logout { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.laceup-account-nav__item--customer-logout a:hover { color: var(--red); }

/* La cuenta cuelga de .entry-content (page.php): se anulan su ancho de lectura, bullets, subrayado y color de links. */
.woocommerce-account .container.section { padding: 28px 20px 56px; }
.woocommerce-account .entry-content { max-width: none; margin: 0; }
.woocommerce-account .entry-content a { text-decoration: none; }
.woocommerce-account .entry-content a.btn--primary,
.woocommerce-account .entry-content a.btn--primary:hover { color: #fff; }
.woocommerce-account .entry-content .laceup-account-nav ul { list-style: none; margin: 0; }
.woocommerce-account .entry-content .laceup-account-nav li { margin: 0; }
.woocommerce-account .laceup-account-nav li::marker { content: none; }
.woocommerce-account .laceup-account-dashboard__empty { padding: 44px 20px; }
.woocommerce-account .laceup-account-dashboard__empty .btn { display: inline-flex; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; width: 100%; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button { margin: 0 0 0 auto; flex-shrink: 0; white-space: nowrap; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type { max-width: none; }
.woocommerce-account .woocommerce-Address-title { align-items: center; }
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; white-space: nowrap; }
.woocommerce-account .woocommerce-Address { padding: 22px 24px; }
.woocommerce .laceup-account-edit .laceup-input-icon--pw input.input-text { padding-right: 48px; }

/* ---------- Dashboard ---------- */
/* Título propio del dashboard ("My Account" + saludo), oculto por default:
   en desktop/tablet el título de la página lo sigue dando .page-head (page.php,
   the_title()) — esto solo se muestra <=980px, ver bloque de rediseño mobile
   más abajo, que en simultáneo apaga .page-head con :has(). */
.laceup-account-dashboard__page-head { display: none; }

/* Mismo patrón para Favorites: título propio con contador, oculto en
   desktop/tablet (el banner .page-head sigue siendo el título ahí). Ver
   rediseño mobile de Wishlist al final del archivo. */
.laceup-wishlist__page-head { display: none; }
.laceup-account-dashboard__heading { font-size: 18px; color: var(--ink); margin-bottom: 14px; }
.laceup-account-dashboard__heading--table { margin-top: 30px; }
.laceup-account-dashboard__view-all { text-align: right; margin-top: 12px; font-size: 13px; }
.laceup-account-dashboard__view-all a { color: var(--blue); font-weight: 600; }
.laceup-account-dashboard__last {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden;
}
.laceup-account-dashboard__last-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 22px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.laceup-account-dashboard__order-no { font-weight: 700; font-size: 15px; color: var(--blue-dark); }
.laceup-account-dashboard__date { font-size: 13px; color: var(--muted); }
.laceup-account-dashboard__items { padding: 6px 22px; }
.laceup-account-dashboard__item {
  display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.laceup-account-dashboard__item:last-child { border-bottom: 0; }
.laceup-account-dashboard__item-thumb img {
  width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-soft);
}
.laceup-account-dashboard__item-meta { flex: 1; display: grid; gap: 2px; min-width: 0; }
.laceup-account-dashboard__item-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.laceup-account-dashboard__item-qty { font-size: 12px; color: var(--muted); }
.laceup-account-dashboard__item-price { font-size: 14px; font-weight: 600; color: var(--blue-dark); white-space: nowrap; }
.laceup-account-dashboard__last-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg-soft);
}
.laceup-account-dashboard__total-label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.laceup-account-dashboard__total-value { font-size: 20px; font-weight: 800; color: var(--blue-dark); }

.laceup-account-dashboard__table-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow-x: auto;
}
.laceup-account-dashboard__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.laceup-account-dashboard__table th {
  text-align: left; padding: 13px 18px; background: var(--bg-soft); font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.laceup-account-dashboard__table td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.laceup-account-dashboard__table tbody tr:last-child td { border-bottom: 0; }
.laceup-account-dashboard__table tbody tr:hover td { background: var(--bg-soft); }
.laceup-account-dashboard__table td a { color: var(--blue); font-weight: 600; }
.laceup-account-dashboard__address { font-size: 13px; color: var(--muted); }
.laceup-account-dashboard__address br { content: ""; }
.laceup-account-dashboard__address br::after { content: ", "; }
.laceup-account-dashboard__table-action { text-align: right; white-space: nowrap; }
.laceup-account-dashboard__empty {
  text-align: center; padding: 50px 20px; background: #fff; border: 1px dashed var(--line); border-radius: 10px;
}
.laceup-account-dashboard__empty p { color: var(--muted); margin-bottom: 18px; }

/* ---------- Orders (endpoint) ---------- */
.woocommerce table.shop_table.my_account_orders {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; border-collapse: separate; border-spacing: 0;
  font-size: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden;
}
.woocommerce table.my_account_orders th {
  background: var(--bg-soft); padding: 13px 18px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border: 0; border-bottom: 1px solid var(--line); text-align: left;
}
.woocommerce table.my_account_orders td,
.woocommerce table.my_account_orders tbody th {
  padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left;
  background: transparent;
}
.woocommerce table.my_account_orders tbody tr:last-child td,
.woocommerce table.my_account_orders tbody tr:last-child th { border-bottom: 0; }
.woocommerce table.my_account_orders tbody tr:hover td,
.woocommerce table.my_account_orders tbody tr:hover th { background: var(--bg-soft); }
.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-number a { color: var(--blue); font-weight: 600; }
.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-status {
  font-weight: 600; font-size: 13px;
}
.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-status::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); margin-right: 7px; vertical-align: 1px;
}
/* Sin color por status a propósito: el cliente ve siempre "Order placed"
   (orders.php ignora $order->get_status()) — un punto verde/rojo/naranja
   variando por debajo de un texto que ya no varía se leería contradictorio. */
.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-actions .button {
  padding: .4rem .9rem; font-size: 12px; margin-right: 6px;
}
.woocommerce-pagination--without-numbers { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }

/* ---------- View order ---------- */
.woocommerce-MyAccount-content mark.order-number,
.woocommerce-MyAccount-content mark.order-date {
  background: var(--bg-soft); color: var(--blue-dark); font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
}
.woocommerce-MyAccount-content > p:first-of-type { font-size: 14px; color: var(--muted); margin-bottom: 20px; }

/* ---------- Addresses / edit account ---------- */
.laceup-account-edit__intro { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.woocommerce-Addresses.col2-set, .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.woocommerce-Addresses .woocommerce-Address { float: none; width: 100%; }
.woocommerce-Address, .woocommerce-address-fields { font-size: 14px; }
.woocommerce-Address {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 20px;
}
.woocommerce-Address-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.woocommerce-Address-title h3 { font-size: 16px; color: var(--ink); }
.woocommerce-Address-title .edit { font-size: 13px; color: var(--blue); font-weight: 600; white-space: nowrap; }
.woocommerce-Address-title .edit:hover { text-decoration: underline; }
.woocommerce-Address address { font-style: normal; color: var(--muted); line-height: 1.8; }
.laceup-account-address__empty { color: var(--muted); font-style: italic; }

.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 22px 0;
}
.woocommerce-EditAccountForm legend { font-size: 14px; font-weight: 700; padding: 0 8px; }
.woocommerce-MyAccount-content .woocommerce-Button { margin-top: 6px; }

/* Account details (woocommerce/myaccount/form-edit-account.php) */
.laceup-account-edit__section {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 22px;
}
.laceup-account-edit__section-head {
  padding: 15px 22px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.laceup-account-edit__section-body { padding: 20px 22px; }
.laceup-account-edit__section-body .form-row:last-child { margin-bottom: 0; }
.laceup-account-edit__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.laceup-account-edit__actions { margin: 0; }
.woocommerce-EditAccountForm .laceup-account-edit__actions .button { padding: .85rem 28px; font-size: 15px; }

/* ============================================================
   AUTH (my-account sin sesión: tabs Log In / Register)
   ============================================================ */
.laceup-auth { max-width: 480px; margin: 30px auto 20px; }
.laceup-auth__card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.laceup-auth__title { font-size: 22px; text-align: center; padding: 26px 26px 0; }
.laceup-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.laceup-auth__tab {
  border: 0; background: transparent; padding: 16px 10px; font-family: var(--font);
  font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; transition: .15s;
}
.laceup-auth__tab:hover { color: var(--blue); }
.laceup-auth__tab.is-active { color: var(--blue); background: #fff; border-bottom-color: var(--blue); }
.laceup-auth__panel { display: none; padding: 26px; }
.laceup-auth__panel.is-active { display: block; }

.laceup-input-icon { position: relative; display: block; }
.laceup-input-icon > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
/* WooCommerce core (woocommerce.js) envuelve TODO input[type=password] en un
   <span class="password-input"> + le agrega su propio botón
   ".show-password-input" ni bien carga la página — nada que ver con nuestro
   .laceup-eye (ver main.js), pero pisa el layout de acá: el wrapper de WC
   quedaba entre .laceup-input-icon y el <input>, tapando el candado y
   duplicando el toggle de mostrar/ocultar. display:contents saca el wrapper
   de WC de la caja sin tocar el <input>; su botón nativo se oculta porque ya
   tenemos el propio (.laceup-eye). */
/* !important necesario: ".woocommerce form .password-input" (CSS nativo de
   WooCommerce) trae display:flex con más especificidad que esto — sin
   ganarle ahí, el candado queda tapado por ese wrapper. */
.laceup-input-icon .password-input { display: contents !important; }
.laceup-input-icon .show-password-input { display: none; }
.woocommerce .laceup-input-icon input.input-text,
.woocommerce form .form-row .laceup-input-icon input.input-text { padding-left: 38px; }
.laceup-input-icon--pw .input-text { padding-right: 42px; }
.laceup-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
}
.laceup-eye:hover { color: var(--blue); background: var(--bg-soft); }
.laceup-eye.is-on { color: var(--blue); }

.laceup-auth__row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.laceup-auth__check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.laceup-auth__check input { accent-color: var(--blue); }
.laceup-auth__check span { font-weight: 400; }
.laceup-auth__forgot { display: block; margin-top: 4px; font-size: 13px; color: var(--blue); font-weight: 600; }
.laceup-auth__forgot:hover { text-decoration: underline; }
.laceup-auth__actions { margin-bottom: 0 !important; }
.woocommerce .laceup-auth__actions .button { width: 100%; padding: .85rem; font-size: 15px; }
.laceup-auth__note { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.laceup-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0 !important; }

/* Lost password (endpoint nativo) */
.woocommerce-ResetPassword {
  max-width: 480px; margin: 30px auto; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 26px;
}
.woocommerce-ResetPassword p:first-of-type { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.woocommerce .woocommerce-ResetPassword .woocommerce-Button { width: 100%; }

/* ============================================================
   TOAST "Added to cart" (assets/js/main.js escucha added_to_cart)
   ============================================================ */
.laceup-toast {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 320px; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid #16a34a; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 14px 18px;
  transform: translateX(calc(100% + 30px)); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.laceup-toast.is-visible { transform: translateX(0); opacity: 1; }
.laceup-toast__icon { color: #16a34a; flex-shrink: 0; display: flex; margin-top: 1px; }
.laceup-toast__body { font-size: 13px; color: var(--ink); line-height: 1.4; }
.laceup-toast__body strong { display: block; color: var(--blue-dark); font-weight: 700; margin-bottom: 2px; }
.laceup-toast__name { display: block; color: var(--muted); }
@media (max-width: 560px) {
  .laceup-toast { left: 16px; right: 16px; top: 14px; max-width: none; }
}

/* ============================================================
   WOOCOMMERCE — responsive
   ============================================================ */
@media (max-width: 1100px) {
  .laceup-cart__columns { grid-template-columns: 1fr 340px; }
  .laceup-checkout__columns { grid-template-columns: 1fr 360px; }
}
@media (max-width: 980px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce .up-sells ul.products { grid-template-columns: repeat(2, 1fr); }
  .related-carousel ul.products li.product { flex-basis: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); }
  .laceup-cart__columns, .laceup-checkout__columns { grid-template-columns: 1fr; }
  .laceup-cart__aside, .laceup-checkout__aside { position: static; }
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
  .laceup-account-nav { position: static; }
  .woocommerce #content div.product div.images,
  .woocommerce div.product div.images,
  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.summary { float: none; width: 100%; }
}
@media (max-width: 680px) {
  .laceup-cart-item { grid-template-columns: 72px 1fr 34px; row-gap: 10px; }
  .laceup-cart-item__thumb img { width: 72px; height: 72px; }
  .laceup-cart-item__qty { grid-column: 2; justify-self: start; }
  .laceup-cart-item__subtotal { grid-column: 2; }
  .laceup-cart-item__remove { grid-row: 1; grid-column: 3; }
  .laceup-cart-items { padding: 6px 16px; }
  .laceup-cart-items__actions { flex-direction: column; align-items: stretch; }
  .laceup-cart-coupon { max-width: none; }
  .woocommerce-columns--addresses, .woocommerce-Addresses.col2-set, .woocommerce-Addresses { grid-template-columns: 1fr; }
  .laceup-account-edit__row { grid-template-columns: 1fr; }
  .laceup-account-dashboard__last-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .laceup-account-dashboard__reorder { justify-content: center; }
  .woocommerce table.my_account_orders thead { display: none; }
  .woocommerce table.my_account_orders tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .woocommerce table.my_account_orders td,
  .woocommerce table.my_account_orders tbody th {
    display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 8px 16px; text-align: right;
  }
  .woocommerce table.my_account_orders td::before,
  .woocommerce table.my_account_orders tbody th::before {
    content: attr(data-title); font-weight: 600; color: var(--muted); text-align: left;
  }
  .laceup-auth__panel { padding: 20px 16px; }
}
@media (max-width: 560px) {
  .woocommerce ul.products, ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }
  .woocommerce ul.products li.product, ul.products li.product { padding: 10px; }
  .woocommerce .up-sells ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }
  .related-carousel { padding-inline: 40px; }
  .related-carousel ul.products { gap: 12px; }
  .related-carousel ul.products li.product { flex-basis: 100%; max-width: 100%; padding: 10px; }
  .related-carousel__arrow { width: 32px; height: 32px; }
  .related-carousel__arrow--prev { left: 0; }
  .related-carousel__arrow--next { right: 0; }
  .pcard__title { min-height: 0; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .laceup-thankyou__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 980px) {
  .hero__inner, .split, .contact-grid, .vm { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .products, .products--5, .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .stats__inner { grid-template-columns: 1fr; grid-auto-flow: row; }
  .stats-dark__inner { grid-template-columns: 1fr; }
  .stats-dark .grid2 { grid-column: auto; }
  .footer__grid { grid-template-columns: 1fr; }

  /* Buscador mobile — overlay de pantalla completa al tocar la lupa.
     Se probaron 2 versiones anteriores (panel flotante position:absolute,
     y una fila que se desplegaba dentro del propio header con flex-wrap) y
     ninguna se sostenía en un iPhone real: el layout del header
     reflowaba de forma rara al aparecer el teclado. El patrón real que
     usan Amazon/Google/YouTube/la mayoría de apps de e-commerce para
     "ícono de lupa que expande" es justamente este: un overlay fijo que
     tapa el contenido y deja SOLO el input enfocado — evita pelear con el
     reflow del header porque no vive adentro de él. Fuente: patrones de
     UX de búsqueda mobile documentados (full-screen search overlay),
     ver notas de la sesión.
     El botón ".search-toggle" queda visible arriba (el .topbar sigue con
     z-index mayor) y cierra el overlay tocándolo de nuevo — mismo toggle
     de siempre, sin JS nuevo. Sin selector de categoría en mobile
     (simplifica a un solo input + botón). */
  .header-search { display: none; }
  .header-search.is-open {
    display: flex; flex-wrap: wrap; align-content: flex-start;
    position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0;
    margin: 0; max-width: none; height: auto; border-radius: 0; border: 0;
    background: #fff; z-index: 100; padding: 16px;
  }
  .header-search.is-open input,
  .header-search.is-open button:not(.header-search__close) { height: var(--btn-height); }
  /* Botón "X": SIEMPRE visible dentro del overlay, con su propio espacio
     antes del input+botón (nunca pegado formando una sola píldora con
     ellos — debe leerse como una acción distinta, "cerrar", no como parte
     del control de búsqueda). Es la única forma garantizada de cerrar el
     buscador: el ".search-toggle" del header (arriba, fuera del overlay)
     puede no estar alcanzable según cómo Safari mobile esté mostrando/
     ocultando su propia barra de navegación en ese momento del scroll. */
  .header-search.is-open .header-search__close {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 40px; height: var(--btn-height); margin-right: 8px;
    border: 0; border-radius: 10px; background: var(--bg-soft); color: var(--muted);
  }
  .header-search.is-open input {
    flex: 1; background: var(--bg-soft); border: 0; border-radius: 10px 0 0 10px;
  }
  .header-search.is-open select { display: none; }
  .header-search.is-open button:not(.header-search__close) {
    flex: 0 0 52px; border-radius: 0 10px 10px 0; background: var(--blue);
  }
  /* Sugerencias: flex-basis:100% las manda a su propia fila DEBAJO del
     input+botón, dentro del mismo contenedor flex-wrap — nunca
     position:absolute acá. El overlay ocupa toda la pantalla (bottom:0),
     así que "top:100%" (la regla de base, pensada para la píldora chica de
     desktop) mediría el 100% de ESE alto completo y el dropdown aparecería
     fuera de la vista en vez de pegado al input. */
  .header-search.is-open .search-suggest {
    position: static; flex: 1 0 100%; margin-top: 12px; order: 10;
    border-radius: 10px; box-shadow: 0 2px 8px rgba(20, 26, 74, .08);
  }
  .header-search.is-open .header-search__close { order: 0; }
  .header-search.is-open input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }

  /* El ícono de búsqueda queda solo en ".header__icons" una vez que cuenta/
     wishlist/carrito se ocultan (viven en la tab bar, ver más abajo) — sin
     ".header-search" (flex:1 en desktop) empujando desde la izquierda, se
     quedaba flotando pegado al logo en vez de ir a la esquina derecha. */
  .header__icons { margin-left: auto; }
  /* Misma caja 44px que .nav-toggle: margen simétrico al de la hamburguesa. */
  .header__icons .search-toggle { display: flex; width: 44px; height: 44px; flex-shrink: 0; }
  .header__icons .search-toggle::before { inset: 0; }

  /* Cuenta/favoritos/carrito quedan duplicados en cuanto aparece la mobile
     tab bar (mismo breakpoint, ver más abajo) — se ocultan del header y
     viven solo ahí. El buscador y el hamburger se quedan (la tab bar no los
     reemplaza). */
  .header__icons .header__icon--account,
  .header__icons .header__icon--wishlist,
  .header__icons .header__icon--cart { display: none; }

  /* Hamburger: la nav es un drawer off-canvas desde la izquierda. */
  .nav-toggle { display: flex; }
  .topbar { overflow-x: clip; }
  .nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001;
    width: min(80vw, 320px); display: flex; flex-direction: column; overflow-y: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 86%, transparent) 0%, color-mix(in srgb, var(--primary-dark) 72%, transparent) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border-right: 0; box-shadow: 10px 0 40px -6px color-mix(in srgb, var(--primary) 55%, transparent);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); }
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
  .nav__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(255,255,255,.14); flex-shrink: 0; }
  .nav__title { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
  .nav__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; border-radius: var(--radius); }
  .nav__close:hover, .nav__close:focus-visible { background: rgba(255,255,255,.14); outline: none; }
  .nav > .container { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: none; padding: 8px 0 20px; }
  .nav__inner { flex: 1; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .nav__inner li { width: 100%; }
  .nav__inner .menu-item--auth-first { margin-left: 0; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
  .nav__inner .menu-item--auth + .menu-item--auth::before { display: none; }
  .nav__inner .menu-item--auth a { text-transform: none; letter-spacing: 0; font-size: 15px; }
  .nav__inner .menu-item--auth + .menu-item--auth { padding-top: 4px; }
  .nav__inner .menu-item--auth + .menu-item--auth a { min-height: var(--btn-height); border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius); margin: 4px 16px; padding: 0 16px; display: flex; align-items: center; border-bottom-width: 1px; }
  .nav a { display: flex; align-items: center; min-height: 48px; padding: 0 20px; font-size: 16px; border-bottom: 0; border-left: 3px solid transparent; transition: background .15s, border-color .15s; }
  .nav a:hover, .nav a:focus-visible { background: rgba(255,255,255,.1); border-bottom: 0; outline: none; }
  .nav .current-menu-item > a, .nav .current_page_item > a, .nav a.is-active { background: rgba(255,255,255,.16); border-bottom: 0; border-left-color: var(--accent); }
  .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(5, 15, 30, .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
  html.nav-locked, html.nav-locked body { overflow: hidden; }
}
@media (min-width: 981px) {
  .nav__head, .nav-overlay { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav.is-open, .nav-overlay, .nav-overlay.is-open { transition: none; }
}
@media (max-width: 560px) {
  .products, .products--5, .form-row { grid-template-columns: 1fr; }
  .topbar__inner { height: auto; padding: 14px 0; flex-wrap: wrap; }
}

/* ============================================================
   HOME MOBILE REDESIGN (<=980px) — mockup: designs-pictures/
   laceup-demoStore-Pages/generated/redesign-2026-08/home-390.png.
   Alcance: SOLO body.home (front-page.php), solo mobile. Las tarjetas de
   Shop/categoría usan markup distinto (li.product.pcard, content-product.php)
   y no se tocan acá.
   ============================================================ */
.stats__icon { display: none; }
/* .pcard__tag ya existe para el grid de shop (content-product.php, siempre
   visible); en Home es contenido nuevo del rediseño mobile — se esconde por
   default y solo se muestra dentro del breakpoint de abajo. */
/* .pcard__quickadd (botón circular "add to cart" del rediseño mobile) es
   contenido nuevo de Home — mismo criterio que .pcard__tag arriba. */
body.home .pcard__quickadd { display: none; }
@media (max-width: 980px) {
  /* --- Hero --- */
  body.home .hero { background: linear-gradient(135deg, var(--gradient-to, var(--primary)) 0%, var(--gradient-from, var(--primary-dark)) 100%); }
  body.home .hero__badge { width: 46px; height: 46px; top: 16px; right: 16px; font-size: 13px; }
  body.home .hero__eyebrow { text-transform: uppercase; font-weight: 700; letter-spacing: .06em; font-size: 11px; }
  body.home .hero h1 { font-size: 26px; }
  body.home .hero__inner { padding: 28px 20px 44px; min-height: 0; }
  body.home .hero .btn--light { color: var(--blue-dark); }
  body.home .hero__media { border-radius: 14px; }

  /* --- Brands: 2 columnas en mobile --- */
  body.home .brands__carousel { padding-inline: 28px; }
  body.home .brands__grid { gap: 12px; grid-template-columns: repeat(2, 1fr); }
  body.home .brands__logo { min-height: 96px; padding: 14px 8px; }


  /* --- CTA banner: tarjeta redondeada con margen, no full-bleed --- */
  body.home .cta-banner { background: transparent; padding: 8px 0 28px; }
  body.home .cta-banner__inner {
    background: var(--blue-dark); border-radius: 14px;
    flex-direction: column; text-align: center; padding: 26px 20px;
  }

  /* --- Popular Categories: sin borde, sombra suave, thumb grande --- */
  body.home .cat-card { border: 0; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05); }
  body.home .cat-card:hover { box-shadow: 0 2px 8px rgba(20, 26, 74, .05); }

  /* --- Stats: tarjeta redondeada con gradiente, ícono arriba del número --- */
  body.home .stats { background: transparent; padding: 0 0 8px; }
  body.home .stats__inner {
    grid-template-columns: repeat(3, 1fr);
    background: var(--surface-alt);
    border-radius: 14px;
  }
  body.home .stats__inner > div { padding: 22px 6px; }
  body.home .stats__icon { color: var(--primary); }
  body.home .stats b { font-size: 26px; }
  body.home .stats small { font-size: 10px; letter-spacing: .04em; }
  body.home .stats__icon { display: flex; justify-content: center; margin: 0 auto 8px; opacity: .9; }

  /* --- Best Selling: tarjeta vertical (imagen cuadrada, cat, nombre, precio, VIEW PRODUCT) --- */
  body.home .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  body.home .pcard { border: 0; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05); padding: 10px; container-type: inline-size; min-width: 0; }
  body.home .pcard:hover { box-shadow: 0 2px 8px rgba(20, 26, 74, .05); transform: none; }
  body.home .pcard__tags { top: 18px; left: 18px; }
  body.home .products .pcard__link { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  body.home .products .pcard__link .ph--img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 10px; border-radius: 10px; }
  body.home .products .pcard__info { min-width: 0; display: flex; flex-direction: column; flex: 1; }
  body.home .products .pcard__cat { font-size: 10px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.home .products .pcard h4 { font-size: 13px; font-weight: 700; min-height: calc(2 * 1.4em); margin-bottom: 6px; }
  body.home .products .pcard .login-price { font-size: 12px; line-height: 1.3; margin-top: auto; }
  body.home .products .pcard .login-price .woocommerce-Price-amount { font-size: 15px; font-weight: 700; color: var(--primary); }
  body.home .products .pcard__btn { margin-top: 10px; white-space: nowrap; }
  body.home .pcard .login-price ins { color: var(--accent); font-weight: 700; text-decoration: none; }
  body.home .pcard .login-price del { color: var(--muted); font-weight: 400; font-size: 12px; margin-right: 6px; }
  body.home .pcard .login-price del .woocommerce-Price-amount { font-size: 12px; color: var(--muted); font-weight: 400; }

  /* Botón "quick add" circular icon-only: reusa el ícono/AJAX de
     woocommerce_template_loop_add_to_cart() (mismo que content-product.php),
     solo se le esconde el texto y se le pinta el carrito de fondo (mismo
     trazo que .mobile-tabbar__icon svg, color var(--blue) = #1b4fd4). */
  body.home .pcard__quickadd { display: block; position: absolute; z-index: 3; top: calc(100cqw - 36px); right: 18px; }
  body.home .pcard__quickadd .button {
    display: block; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 2px 6px rgba(20, 26, 74, .18);
    background-color: var(--surface); border: 0; padding: 0; font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b4fd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l3.6-8H5.4M7 13 5.4 5M7 13l-1.6 4.6A1 1 0 0 0 6.35 19H18M10 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
  }
  body.home .pcard__quickadd .button:hover,
  body.home .pcard__quickadd .button:focus { background-color: var(--surface-alt); }
  body.home .pcard__quickadd .button.loading { opacity: .6; pointer-events: none; }
  /* Tarjeta compacta: sin texto "View cart" tras agregar, solo el ícono. */
  body.home .pcard__quickadd .added_to_cart { display: none; }
}

/* Shop / related / wishlist (li.product.pcard) en mobile: imagen cuadrada, título 2 líneas, precio --primary. */
@media (max-width: 980px) {
  li.product.pcard .pcard__media img { aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-alt); }
  li.product.pcard .pcard__title { font-weight: 700; min-height: calc(2 * 1.4em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  li.product.pcard .login-price .woocommerce-Price-amount { color: var(--primary); }
  .related-carousel li.product.pcard .pcard__title { min-height: 0; }
}

/* ============================================================
   MOBILE TAB BAR — barra inferior fija (<=980px, mismo breakpoint que
   .nav-toggle). Se renderiza siempre (template-parts/mobile-tabbar.php);
   el gate mobile-only es puramente CSS, igual que .nav-toggle.
   ============================================================ */
.mobile-tabbar { display: none; }
@media (max-width: 980px) {
  /* Deja lugar para la tab bar fija al final del documento: alto real
     (58px) + home-indicator de iOS, para que nada del contenido (incluido
     el panel desplegable del buscador, ver .header-search.is-open arriba)
     quede tapado debajo. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  .mobile-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-tabbar__item {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 4px 2px;
    color: var(--muted);
    text-align: center;
    transition: color .15s;
  }
  .mobile-tabbar__item:hover,
  .mobile-tabbar__item:active { color: var(--blue); }
  .mobile-tabbar__item.is-active { color: var(--blue); }
  .mobile-tabbar__icon { position: relative; display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
  .mobile-tabbar__icon svg { width: 22px; height: 22px; }
  .mobile-tabbar__label { font-size: 10px; font-weight: 600; line-height: 1; }
  .mobile-tabbar__badge { top: -4px; right: -8px; }

  /* Cart tab gets a small blue chip instead of a bare icon — the one item
     of the 4 meant to stand out as the primary action. Targets the same
     "js-tabbar-cart" hook the AJAX fragment already uses, no new markup. */
  .mobile-tabbar__item.js-tabbar-cart .mobile-tabbar__icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
    color: #fff;
  }
  .mobile-tabbar__item.js-tabbar-cart .mobile-tabbar__icon svg { width: 16px; height: 16px; }
  .mobile-tabbar__item.js-tabbar-cart .mobile-tabbar__badge { top: -4px; right: -6px; box-shadow: 0 0 0 2px #fff; }
  .mobile-tabbar__item.js-tabbar-cart.is-active { color: var(--blue); }
}

/* ============================================================
   SINGLE PRODUCT MOBILE REDESIGN (<=980px) — mockup: designs-pictures/
   laceup-demoStore-Pages/generated/redesign-2026-08/single-product-390.png.
   Alcance: SOLO mobile, desktop/tablet quedan con el layout de la sección
   "SINGLE PRODUCT" de arriba. El markup nuevo (.single-crumb, .single-eyebrow,
   .pcard__fav dentro de .laceup-gallery-wrap) vive siempre en el DOM —ver
   woocommerce/content-single-product.php e inc/woocommerce.php— pero es
   inerte fuera de este breakpoint (display:none / sin position:absolute).

   Nota: el tab "Reviews" está deshabilitado en todo el sitio por regla de
   negocio B2B explícita (inc/woocommerce.php, woocommerce_product_tabs) —
   el mockup lo muestra pero NO se reactiva acá, solo se le da el mismo
   tratamiento de tarjeta al tab "Description" que sí existe.
   ============================================================ */
.single-crumb { display: none; }
.single-eyebrow { display: none; }
/* Wrap siempre con position:relative (inerte en desktop: el botón hijo está
   display:none ahí) para que, apenas se muestra en mobile, quede anclado a la
   galería y no "suba" a posicionarse contra .woocommerce div.product (el
   ancestro position:relative más cercano, ver sección SINGLE PRODUCT). */
.laceup-gallery-wrap { position: relative; }
.laceup-gallery-wrap .pcard__fav { display: none; }
@media (max-width: 980px) {
  body.single-product .page-head { display: none; }

  .single-crumb {
    display: block; font-size: 12px; color: var(--muted); margin: 0 0 12px;
  }
  .single-crumb a { color: var(--muted); }
  .single-crumb a:hover { color: var(--blue); }

  /* --- Galería: imagen cuadrada redondeada + wishlist flotante --- */
  .laceup-gallery-wrap { margin-bottom: 16px; }
  .woocommerce div.product div.images { margin-bottom: 0; }
  .woocommerce div.product div.images img {
    border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
  }
  .laceup-gallery-wrap .pcard__fav {
    display: flex;
    top: 16px; right: 16px; width: 40px; height: 40px; border: 0;
    box-shadow: 0 2px 8px rgba(20, 26, 74, .15);
  }
  .woocommerce div.product div.images .flex-control-thumbs li { width: 60px; }

  /* --- Tarjeta de info: eyebrow + título + rating + precio + stepper/cta --- */
  .woocommerce div.product .summary {
    background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
    padding: 18px; margin-bottom: 16px;
  }
  .single-eyebrow {
    display: block; color: var(--blue); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
  }
  .single-eyebrow:hover { text-decoration: underline; }
  .woocommerce div.product .product_title { font-size: 19px; margin-bottom: 6px; }
  .woocommerce div.product .woocommerce-product-rating { margin-bottom: 10px; }
  .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 22px; margin-bottom: 14px; }
  .woocommerce div.product form.cart {
    border-top: 0; border-bottom: 0; padding: 0; margin-bottom: 0; flex-wrap: nowrap;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button::before {
    content: ""; width: 16px; height: 16px; flex-shrink: 0;
    background-repeat: no-repeat; background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l3.6-8H5.4M7 13 5.4 5M7 13l-1.6 4.6A1 1 0 0 0 6.35 19H18M10 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
  }

  /* --- Tabs (Description [/ Reviews cuando exista]): mismo tratamiento de tarjeta --- */
  .woocommerce div.product .woocommerce-tabs {
    background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
    padding: 4px 18px 18px; margin-bottom: 16px;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs { margin: 0 -18px; padding: 0 18px; }
  .woocommerce div.product .woocommerce-tabs .panel { padding-top: 14px; }

  /* --- Relacionados: mismo carrusel horizontal, sombra en vez de borde --- */
  .related-carousel li.product.pcard {
    border: 0; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
  }
  .related-carousel li.product.pcard:hover { box-shadow: 0 2px 8px rgba(20, 26, 74, .05); transform: none; }
  .woocommerce .related.products > h2 {
    text-align: left; text-transform: none; letter-spacing: normal; font-size: 16px; margin-bottom: 4px;
  }
  .woocommerce .related.products > h2::after { display: none; }
}

/* ============================================================
   CART MOBILE REDESIGN (<=980px) — mockup: designs-pictures/
   laceup-demoStore-Pages/generated/redesign-2026-08/cart-390.png.
   Alcance: SOLO body.woocommerce-cart, solo mobile. Desktop mantiene el
   layout de fila con divisores de la sección "CARRITO" de arriba (misma
   convención que HOME/SINGLE PRODUCT: el breakpoint de "mobile" en este
   tema es 980px, el mismo de .nav-toggle).
   ============================================================ */
@media (max-width: 980px) {
  body.woocommerce-cart .page-head { display: none; }
  body.woocommerce-cart .laceup-cart__head { justify-content: space-between; }

  /* --- Líneas de carrito: cada una es su propia tarjeta, sin tabla --- */
  body.woocommerce-cart .laceup-cart-items.laceup-card {
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  body.woocommerce-cart .laceup-cart-items__list { display: flex; flex-direction: column; gap: 12px; }
  body.woocommerce-cart .laceup-cart-item {
    position: relative;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas: "thumb body remove" "thumb footer footer";
    column-gap: 12px; row-gap: 10px;
    background: #fff; border: 0; border-radius: 14px;
    box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
    padding: 14px; margin: 0;
  }
  body.woocommerce-cart .laceup-cart-item__thumb { grid-area: thumb; }
  body.woocommerce-cart .laceup-cart-item__thumb img { width: 64px; height: 64px; }
  body.woocommerce-cart .laceup-cart-item__body { grid-area: body; }
  body.woocommerce-cart .laceup-cart-item__remove { grid-area: remove; justify-self: end; align-self: start; }
  body.woocommerce-cart .laceup-cart-item__remove-link { width: 28px; height: 28px; margin: -4px -4px 0 0; }
  body.woocommerce-cart .laceup-cart-item__qty { grid-area: footer; justify-self: start; align-self: center; }
  body.woocommerce-cart .laceup-cart-item__subtotal { grid-area: footer; justify-self: end; align-self: center; }

  /* Stepper en píldora completa (mismo token que los CTA del rediseño), sin
     el fondo diferenciado de los botones +/- que usa en el resto del sitio. */
  body.woocommerce-cart .laceup-cart-item .quantity.laceup-stepper { border-radius: 999px; }
  body.woocommerce-cart .laceup-cart-item .laceup-stepper__btn { background: transparent; width: 30px; }
  body.woocommerce-cart .laceup-cart-item .laceup-stepper__btn:hover { background: var(--bg-soft); color: var(--ink); }
  body.woocommerce-cart .laceup-cart-item .quantity.laceup-stepper input.qty { width: 30px; padding: 6px 0; }

  /* Fila de acciones (cupón/"Update cart"): wc_coupons_enabled() es false en
     este sitio (ver inc/woocommerce.php), así que sólo queda el botón
     "Update cart" oculto — sin borde/padding no deja una barra vacía. */
  body.woocommerce-cart .laceup-cart-items__actions { border-top: 0; padding: 0; margin: 0; }

  /* --- Resumen: misma tarjeta, radio 14px y sombra suave sin borde ---
     !important en el padding: este wrapper también lleva la clase nativa
     ".cart_totals" de WooCommerce, y "woocommerce.css"/"woocommerce-
     smallscreen.css" traen su propia regla ".woocommerce .cart_totals" con
     la MISMA especificidad (0,2,0) que ".laceup-totals.laceup-card" — sin
     !important, quien cargue después gana el empate y el padding se
     colapsaba a 0, pegando "Estimated total"/el botón de checkout contra
     el borde de la pantalla (mismo tipo de bug ya documentado abajo para
     ".laceup-totals__table"). */
  body.woocommerce-cart .laceup-totals.laceup-card {
    border: 0 !important; border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(20, 26, 74, .05) !important;
    padding: 18px !important;
  }

  /* WooCommerce's own woocommerce-smallscreen.css (enqueued <=768px,
     independent of this theme's breakpoints) turns any .shop_table_responsive
     table — our .laceup-totals__table carries that class for the scripts
     that depend on it — into a stacked "Label: value" block with a floated
     ::before(data-title), a hidden <th> and a striped nth-child background.
     That's what produced the extra colon and the gray banding instead of the
     plain Subtotal/Shipping/Total rows the mockup shows: overridden back to
     a flex row (pseudo-label left, real value right) with !important since
     WC's own rules there outscore a plain class selector on specificity. */
  /* WooCommerce's core woocommerce.css also puts a 1px border + border-radius
     on every ".shop_table" element itself (not just at mobile widths) — our
     desktop override for it (`.laceup-totals__table { border: 0 }`, see
     "Resumen (cart-totals)" above) has one less type-selector than WC's own
     rule and loses on specificity, so it needs !important here too. */
  body.woocommerce-cart .laceup-totals__table { border: 0 !important; border-radius: 0 !important; }
  body.woocommerce-cart .laceup-totals__table th { display: none !important; }
  body.woocommerce-cart .laceup-totals__table tr { display: block; }
  body.woocommerce-cart .laceup-totals__table tr:nth-child(2n) td { background-color: transparent !important; }
  body.woocommerce-cart .laceup-totals__table td {
    display: flex !important; justify-content: space-between; align-items: baseline;
    border: 0 !important; padding: 8px 0;
  }
  body.woocommerce-cart .laceup-totals__table td::before {
    content: attr(data-title) !important; font-weight: 500; color: var(--muted); float: none !important;
  }
  body.woocommerce-cart .laceup-totals__table tr.order-total td {
    border-top: 1px solid var(--line) !important;
    padding-top: 14px; margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--blue-dark);
  }
  body.woocommerce-cart .laceup-totals__table tr.order-total td::before { color: var(--blue-dark); font-weight: 700; }
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: var(--blue);
  }
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--blue-600); }
}

/* ============================================================
   CHECKOUT MOBILE REDESIGN (<=980px) — mockup: designs-pictures/
   laceup-demoStore-Pages/generated/redesign-2026-08/checkout-390.png.
   Alcance: SOLO body.woocommerce-checkout, solo mobile. Desktop mantiene el
   layout de dos columnas de la sección "CHECKOUT" de arriba (el apilado ya
   lo hace el grid responsive de ".laceup-checkout__columns" en 980px, ver
   más arriba — acá solo el tratamiento visual de tarjeta/inputs/CTA).
   ============================================================ */
@media (max-width: 980px) {
  body.woocommerce-checkout .page-head { display: none; }

  /* --- Billing / shipping / resumen: misma tarjeta blanca sin borde --- */
  body.woocommerce-checkout .laceup-card {
    border: 0; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
  }
  body.woocommerce-checkout .laceup-checkout-card > div > h3,
  body.woocommerce-checkout .woocommerce-billing-fields > h3,
  body.woocommerce-checkout .woocommerce-shipping-fields h3 {
    border-bottom: 0; padding-bottom: 0; margin-bottom: 14px;
  }

  /* --- Inputs: fondo gris clarito, sin borde marcado, radio 10px --- */
  body.woocommerce-checkout .woocommerce .input-text,
  body.woocommerce-checkout .woocommerce form .form-row input.input-text,
  body.woocommerce-checkout .woocommerce form .form-row textarea,
  body.woocommerce-checkout .woocommerce form .form-row select {
    background: var(--bg-soft); border: 0; border-radius: 10px;
  }
  body.woocommerce-checkout .woocommerce .input-text:focus,
  body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
  body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
  body.woocommerce-checkout .woocommerce form .form-row select:focus {
    box-shadow: 0 0 0 3px rgba(27, 79, 212, .15);
  }
  body.woocommerce-checkout .select2-container--default .select2-selection--single {
    background: var(--bg-soft) !important; border: 0 !important; border-radius: 10px !important;
  }

  /* --- Resumen de orden: sin encabezado "Product/Subtotal" (el mockup no lo
     lleva), sin línea entre ítems, una sola línea antes de Subtotal,
     Subtotal/Shipping pegados, Total grande al final --- */
  body.woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none; }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr th {
    border-bottom: 0; padding: 5px 0;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child th {
    border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 6px;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:not(.order-total) th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:not(.order-total) td {
    border-bottom: 0; padding: 5px 0;
  }
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
    padding-top: 16px; font-size: 18px;
  }

  /* --- CTA: píldora azul ancha (en vez del morado/rojo por default) ---
     !important: en un sitio real (con gateways de pago reales instalados,
     que este XAMPP local no tiene) el propio WooCommerce/el plugin de
     pago pinta ".button.alt"/"#place_order" de su morado de marca
     (#7f54b9) con una regla que empata o gana en especificidad — mismo
     patrón ya documentado arriba para ".laceup-totals"/".cart_totals". */
  body.woocommerce-checkout .woocommerce #payment #place_order {
    background: var(--blue) !important;
  }
  body.woocommerce-checkout .woocommerce #payment #place_order:hover { background: var(--blue-600) !important; }
}

/* ============================================================
   MY ACCOUNT MOBILE REDESIGN (<=980px) — mockup: designs-pictures/
   laceup-demoStore-Pages/generated/redesign-2026-08/my-account-390.png.
   Alcance: TODA la cuenta — Dashboard, Orders, Addresses, Account details
   y el formulario de login (myaccount/navigation.php y el "page-head" son
   compartidos por los 5, ver body.woocommerce-account sin ":has()" abajo).
   Antes esto solo cubría Dashboard, dejando Orders/Addresses/Account
   details/login con el banner azul + tarjeta de avatar/sidebar de siempre
   — una sola sesión mostraba 2 diseños distintos según a qué pestaña
   entrabas. El único bloque que sigue escopado a ":has(.laceup-account-
   dashboard)" es el que reordena el título propio del Dashboard (los
   demás endpoints no tienen ese título custom, usan el genérico de abajo).
   Desktop/tablet (>980px) no cambian.
   ============================================================ */
@media (max-width: 980px) {
  /* --- Banner azul → título plano, en TODA la cuenta (login incluido).
     Dashboard es la excepción: ya trae su propio título+saludo (ver más
     abajo), así que ahí se oculta del todo en vez de mostrar los dos. --- */
  body.woocommerce-account .page-head {
    background: none; color: var(--ink); text-align: left; padding: 20px 20px 0;
  }
  body.woocommerce-account .page-head h1 { font-size: 26px; font-weight: 800; }
  body.woocommerce-account .page-head .breadcrumb { margin-top: 4px; }
  body.woocommerce-account .page-head .breadcrumb a,
  body.woocommerce-account .page-head .breadcrumb { color: var(--muted); opacity: 1; }
  body.woocommerce-account:has(.laceup-account-dashboard) .page-head { display: none; }
  /* .section trae 56px de padding-top pensados para debajo del banner azul
     que se acaba de ocultar/aplanar — el mockup pega el título casi directo
     contra el header del sitio. */
  body.woocommerce-account .container.section { padding-top: 20px; padding-bottom: 40px; }

  /* --- Título propio del Dashboard: "My Account" + "Welcome back, {nombre}" --- */
  .laceup-account-dashboard__page-head { display: block; margin-bottom: 18px; }
  .laceup-account-dashboard__page-title { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
  .laceup-account-dashboard__page-welcome { font-size: 14px; color: var(--muted); margin: 0; }

  /* El mockup pone el título/saludo ANTES de las píldoras de navegación,
     pero WooCommerce siempre imprime myaccount/navigation.php antes que el
     contenido del endpoint (myaccount/dashboard.php) — reordenar el DOM
     tocaría el wrapper compartido por todos los tabs de la cuenta. Se
     resuelve solo con orden visual: los dos wrappers intermedios pasan a
     "display:contents" (dejan de generar caja, sus hijos participan directo
     del grid de ".woocommerce") y cada pieza recibe un "order" explícito.
     Esto es específico del Dashboard (los demás endpoints no tienen un
     título propio que reordenar, solo usan el .page-head plano de arriba
     en su posición normal). */
  body.woocommerce-account:has(.laceup-account-dashboard) .woocommerce-MyAccount-content { display: contents; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard { display: contents; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-nav { order: 2; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard__page-head { order: 1; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard__heading { order: 3; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard__last,
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard__empty { order: 4; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard__heading--table { order: 5; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard__table-wrap { order: 6; }
  body.woocommerce-account:has(.laceup-account-dashboard) .laceup-account-dashboard__view-all { order: 7; }

  /* --- Navegación: de sidebar vertical (avatar + "Hello, X" + lista) a fila
     de píldoras con scroll — en TODA la cuenta, navigation.php es el mismo
     partial en los 5 endpoints, no solo Dashboard.
     min-width:0 en el item de grid y en el propio <ul>: sin esto, el ancho
     mínimo por default de un item de grid/flex es "auto" (el ancho de su
     contenido), así que la fila de píldoras (5 items en una sola línea sin
     wrap) empuja a ".woocommerce" -y a la página entera- a ensancharse en
     vez de quedarse en el viewport y dejar que overflow-x:auto haga scroll
     interno (mismo gotcha de "grid/flex blowout" ya documentado en el
     tema). */
  body.woocommerce-account .laceup-account-nav {
    background: transparent; border: 0; box-shadow: none; position: static; overflow: visible;
    min-width: 0;
  }
  body.woocommerce-account .laceup-account-nav__greeting { display: none; }
  /* flex-wrap:wrap, no overflow-x:auto: un scroll horizontal que arranca
     desplazado (confirmado en un iPhone real — Safari puede restaurar/
     anclar el scroll del contenedor a una posición que no es 0 al cargar,
     dejando "Dashboard"/"Orders" fuera de pantalla sin ningún indicio de
     que hay más pestañas a la izquierda) es peor que una segunda fila
     visible: acá SIEMPRE se ve el total de pestañas, sin nada oculto. */
  body.woocommerce-account .laceup-account-nav ul {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 18px; margin: 0; min-width: 0;
  }
  body.woocommerce-account .laceup-account-nav__item { flex: 0 0 auto; }
  body.woocommerce-account .laceup-account-nav__item--customer-logout {
    border-top: 0; margin-top: 0; padding-top: 0;
  }
  body.woocommerce-account .laceup-account-nav__item a {
    padding: 10px 20px; border-radius: 999px; border-left: 0; white-space: nowrap;
    background: #fff; color: var(--ink); font-weight: 600;
    box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
  }
  body.woocommerce-account .laceup-account-nav__item a:hover {
    background: #fff; color: var(--blue);
  }
  body.woocommerce-account .laceup-account-nav__item.is-active a {
    background: var(--blue); color: #fff; border-left-color: transparent;
  }
  body.woocommerce-account .laceup-account-nav__icon { display: none; }

  /* --- "Your last order": mismos tokens del rediseño (radio 14px, sombra
     suave sin borde) --- */
  .laceup-account-dashboard__last {
    border: 0; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
  }

  /* --- "Previous orders": la tabla pasa de fila ancha a tarjetas apiladas.
     Las columnas siguen ahí (data-label ya viene del PHP para lectores de
     pantalla), solo se reordenan visualmente: número arriba en su propia
     línea, fecha+total abajo a la izquierda (con un separador "·" agregado
     por CSS), acción de reorder a la derecha. Dirección de envío no entra
     en la tarjeta mobile del mockup, se oculta. Selección por nth-child (no
     por el texto del data-label) para no depender del idioma activo. --- */
  .laceup-account-dashboard__table-wrap {
    background: transparent; border: 0; box-shadow: none; overflow: visible;
  }
  .laceup-account-dashboard__table { display: block; }
  .laceup-account-dashboard__table thead { display: none; }
  .laceup-account-dashboard__table tbody { display: block; }
  .laceup-account-dashboard__table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px;
    background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
    padding: 14px 16px; margin-bottom: 12px;
  }
  .laceup-account-dashboard__table tbody tr:last-child { margin-bottom: 0; }
  .laceup-account-dashboard__table td { display: block; padding: 0; border: 0; }
  .laceup-account-dashboard__table tbody tr td:nth-child(1) {
    flex: 0 0 100%; font-size: 15px; font-weight: 700;
  }
  .laceup-account-dashboard__table tbody tr td:nth-child(1) a { color: var(--ink); }
  .laceup-account-dashboard__table tbody tr td:nth-child(2),
  .laceup-account-dashboard__table tbody tr td:nth-child(4) {
    font-size: 13px; color: var(--muted);
  }
  .laceup-account-dashboard__table tbody tr td:nth-child(4)::before { content: "\00b7\0020"; }
  .laceup-account-dashboard__table tbody tr td:nth-child(3) { display: none; }
  .laceup-account-dashboard__table tbody tr td.laceup-account-dashboard__table-action {
    margin-left: auto; text-align: right;
  }
  .laceup-account-dashboard__view-all { text-align: center; }
}

/* ============================================================
   WISHLIST MOBILE REDESIGN (<=980px) — mockup: designs-pictures/
   laceup-demoStore-Pages/generated/redesign-2026-08/wishlist-390.png.
   Alcance: template-wishlist.php, solo mobile. El grid ya usa
   content-product.php (mismo partial del Shop) y ya es de 2 columnas en
   este breakpoint (ver ".woocommerce ul.products, ul.products" arriba) —
   acá solo cambia el look de cada tarjeta dentro de ".wishlist-grid" y el
   título propio de la página, sin tocar el Shop.
   ============================================================ */
@media (max-width: 980px) {
  body.page-template-template-wishlist-php .page-head { display: none; }
  body.page-template-template-wishlist-php .container.section { padding-top: 20px; }

  .laceup-wishlist__page-head { display: block; margin-bottom: 18px; }
  .laceup-wishlist__page-title { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
  .laceup-wishlist__page-count { font-size: 14px; color: var(--muted); margin: 0; }

  .wishlist-grid li.product.pcard {
    border: 0; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 26, 74, .05);
  }
  .wishlist-grid li.product.pcard:hover {
    box-shadow: 0 2px 8px rgba(20, 26, 74, .05); transform: none;
  }
  .wishlist-grid .pcard__media img { aspect-ratio: 1 / 1; border-radius: 10px; }

  /* El mockup de Favorites no lleva stock ni stepper/Add to cart en la
     tarjeta (solo imagen, nombre y precio) — a diferencia del Shop, que sí
     los muestra para el usuario logueado. */
  .wishlist-grid .stock,
  .wishlist-grid .pcard__actions { display: none; }

  /* Badge "Sale": mismo dato real ($product->is_on_sale(), ya resuelto en
     content-product.php) — acá solo pasa del azul del Shop a rojo/píldora,
     como pide el mockup de Favorites. */
  .wishlist-grid .pcard__tag {
    background: var(--accent); border-radius: 999px; padding: 3px 10px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  }

  /* Corazón: en esta página siempre está "is-active" (todo producto acá ya
     es favorito) — el mockup lo pinta relleno en rojo en vez del ink por
     defecto del Shop, y sin borde (círculo flotante con sombra suave). El
     botón sigue siendo el mismo <button data-wishlist-toggle> real de
     laceup_wishlist_button_html(), así que sigue sacando el producto de
     favoritos de verdad. */
  .wishlist-grid .pcard__fav { border: 0; box-shadow: 0 2px 6px rgba(20, 26, 74, .12); }
  .wishlist-grid .pcard__fav.is-active { color: var(--accent); }

  /* Precio: ink en vez del blue-dark del Shop; el precio de oferta (<ins>,
     ya viene de $product->get_price_html()) pasa a rojo. */
  .wishlist-grid li.product.pcard .login-price .woocommerce-Price-amount { color: var(--ink); }
  .wishlist-grid li.product.pcard .login-price ins .woocommerce-Price-amount { color: var(--accent); }
}

/* ============================================================
   SISTEMA ÚNICO DE BOTONES (--btn-*). Al final y con !important para ganarle
   a overrides por página; las variantes solo cambian color.
   Excluidos: quick-add circular, flechas, corazón, qty ±, dots, tabs, hamburguesa.
   ============================================================ */
.btn, .button:not(.pcard__quickadd .button), .pcard__btn, #place_order, .checkout-button,
.add_to_cart_button:not(.pcard__quickadd .add_to_cart_button), .single_add_to_cart_button,
.woocommerce #respond input#submit, button.woocommerce-button {
  box-sizing: border-box !important;
  height: var(--btn-height) !important; min-height: var(--btn-height) !important;
  padding: 0 var(--btn-pad-x) !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--btn-radius) !important; border-width: var(--btn-border) !important; border-style: solid !important;
  font-family: var(--font) !important; font-size: var(--btn-font) !important; font-weight: var(--btn-weight) !important;
  letter-spacing: var(--btn-tracking) !important; text-transform: uppercase !important; text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary, .woocommerce .button:not(.btn--ghost), #place_order, .checkout-button { border-color: var(--blue); }
.btn--light { border-color: #fff; }
.btn--outline { border-color: #fff; background: transparent; }
.btn--outline:hover { background: #fff; color: var(--blue-dark); }
.header-search button { border-radius: 0 var(--btn-radius) var(--btn-radius) 0 !important; }
.btn:focus-visible, .button:focus-visible, .pcard__btn:focus-visible, #place_order:focus-visible,
.header-search button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.hero .btn:focus-visible, .cta-banner .btn:focus-visible { outline-color: #fff; }
.pcard__btn { display: flex !important; }
.quantity.laceup-stepper { box-sizing: border-box; height: var(--btn-height); }
.quantity.laceup-stepper input.qty { padding-block: 0 !important; height: 100%; }

/* ---- Form validation (main.js §15 / inc/validation.php) ---- */
.laceup-field-error { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--red); }
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--red) !important; }
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(225, 29, 42, .16); }
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 1px; }
select[aria-invalid="true"] + .select2 .select2-selection { border-color: var(--red) !important; }
.laceup-field-error + .laceup-field-error { display: none; }

/* ============================================================
   LOGIN — tarjeta partida (woocommerce/myaccount/form-login.php)
   Solo my-account sin sesión; las páginas de cuenta con sesión no cambian.
   ============================================================ */
body.woocommerce-account:not(.logged-in) { background: color-mix(in srgb, var(--surface-alt) 55%, #fff); }
body.woocommerce-account:not(.logged-in) .page-head { display: none; }
body.woocommerce-account:not(.logged-in) .container.section { padding: 48px 20px 64px; }
body.woocommerce-account:not(.logged-in) .entry-content { max-width: none; }

.laceup-login {
  display: grid; grid-template-columns: 45fr 55fr; max-width: 1100px; margin: 0 auto; min-height: 600px;
  background: var(--surface); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .05);
}
.laceup-login .laceup-login__panel { position: relative; display: flex; color: #fff; min-width: 0; }
.laceup-login .laceup-login__media { position: absolute; inset: 0; background: var(--primary-dark); overflow: hidden; }
.laceup-login .laceup-login__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.laceup-login .laceup-login__overlay { position: absolute; inset: 0; }
.laceup-login .laceup-login__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .28) 100%);
}
.laceup-login .laceup-login__media--fallback {
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, 0) 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9M9.5 4.5 12 7l2.5-2.5M9.5 19.5 12 17l2.5 2.5'/%3E%3C/svg%3E") 0 0 / 72px 72px,
    linear-gradient(150deg, var(--gradient-from, var(--primary-dark)) 0%, var(--gradient-to, var(--primary)) 100%);
}
.laceup-login .laceup-login__content {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  gap: 28px; padding: 32px 34px 26px; pointer-events: none;
}
.laceup-login .laceup-login__content > *, .laceup-login .laceup-login__top > * { pointer-events: auto; }
.laceup-login .laceup-login__top { pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; }
.laceup-login .laceup-login__badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px;
}
.laceup-login .laceup-login__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.laceup-login .laceup-login__title { font-size: 34px; line-height: 1.12; font-weight: 800; color: #fff; margin: 0 0 12px; }
.laceup-login .laceup-login__subtitle { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .86); max-width: 380px; margin: 0; }
.laceup-login .laceup-login__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.laceup-login .laceup-login__feature { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.laceup-login .laceup-login__ficon {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2);
}
.laceup-login .laceup-login__ftext { display: flex; flex-direction: column; min-width: 0; }
.laceup-login .laceup-login__ftext strong { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.laceup-login .laceup-login__ftext small { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.laceup-login .laceup-login__location { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, .85); margin: 0; }
.laceup-login .laceup-login__location svg { flex: none; }

.laceup-login .laceup-login__form { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 44px 52px; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.laceup-login .laceup-login__formhead { margin-bottom: 22px; }
.laceup-login .laceup-login__form-title { font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--primary-dark); margin: 0 0 6px; }
.laceup-login .laceup-login__form-subtitle { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.laceup-login .laceup-login__form .laceup-auth__tabs { margin: 0 0 18px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.laceup-login .laceup-login__form .laceup-auth__panel { padding: 0; }
.laceup-login .laceup-login__form .laceup-field { display: block; margin: 0 0 16px; }
.laceup-login .laceup-login__form .laceup-field label {
  display: block; margin-bottom: 7px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.laceup-login .laceup-login__form .laceup-field .required { color: var(--red); text-decoration: none; }
.woocommerce .laceup-login__form .laceup-input-icon input.input-text,
.woocommerce form .laceup-login__form .form-row .laceup-input-icon input.input-text {
  height: 46px; padding-top: 0; padding-bottom: 0; padding-left: 40px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff; width: 100%;
}
.laceup-login .laceup-login__form .laceup-input-icon > svg { left: 14px; color: var(--text-muted); }
.laceup-login .laceup-login__form input::placeholder { color: color-mix(in srgb, var(--text-muted) 70%, #fff); }
.laceup-login .laceup-login__form input.input-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.laceup-login .laceup-login__form .laceup-auth__row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 4px 0 18px; }
.laceup-login .laceup-login__form .laceup-auth__check { font-size: 13px; color: var(--text); min-height: 24px; cursor: pointer; }
.laceup-login .laceup-login__form .laceup-auth__check input { width: 15px; height: 15px; margin: 0; }
.laceup-login .laceup-login__form .laceup-auth__forgot { margin: 0; font-size: 12.5px; }
.laceup-login .laceup-login__form .laceup-auth__actions { display: block; margin: 0 !important; }
.laceup-login .laceup-login__submit { width: 100%; gap: 8px; }
.laceup-login .laceup-login__alt { margin-top: 20px; text-align: center; }
.laceup-login .laceup-login__or { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 11px; letter-spacing: .1em; color: var(--text-muted); }
.laceup-login .laceup-login__or::before, .laceup-login .laceup-login__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.laceup-login .laceup-login__new { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.laceup-login .laceup-login__request { width: 100%; }
.laceup-login .laceup-login__note { margin: 12px auto 0; max-width: 330px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.laceup-login .laceup-login__notices:empty { display: none; }
.laceup-login .laceup-login__notices .woocommerce-error,
.laceup-login .laceup-login__notices .woocommerce-message,
.laceup-login .laceup-login__notices .woocommerce-info { margin: 0 0 18px; padding: 12px 14px 12px 40px; font-size: 13px; line-height: 1.45; list-style: none; border-radius: 8px; width: auto; }
.laceup-login .laceup-login__notices .woocommerce-error { background: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid var(--red); color: #7f1d1d; }
.laceup-login .laceup-login__notices .woocommerce-error li { margin: 0; }
.laceup-login .laceup-login__notices .woocommerce-error a { color: inherit; font-weight: 700; text-decoration: underline; }
.laceup-login .laceup-login__notices .woocommerce-error::before { left: 14px !important; }

@media (max-width: 980px) {
  body.woocommerce-account:not(.logged-in) .container.section { padding: 24px 20px 48px; }
  .laceup-login { grid-template-columns: 1fr; min-height: 0; max-width: 560px; }
  .laceup-login .laceup-login__panel { min-height: 200px; }
  .laceup-login .laceup-login__content { padding: 24px 26px; gap: 0; }
  .laceup-login .laceup-login__features, .laceup-login .laceup-login__location { display: none; }
  .laceup-login .laceup-login__badge { margin-bottom: 12px; }
  .laceup-login .laceup-login__title { font-size: 26px; margin-bottom: 8px; }
  .laceup-login .laceup-login__subtitle { font-size: 13px; }
  .laceup-login .laceup-login__form { padding: 30px 32px 34px; }
}
@media (max-width: 600px) {
  body.woocommerce-account:not(.logged-in) .container.section { padding: 16px 16px 40px; }
  .laceup-login { border-radius: 14px; }
  .laceup-login .laceup-login__content { padding: 20px 20px; }
  .laceup-login .laceup-login__form { padding: 24px 20px 28px; }
  .laceup-login .laceup-login__form-title { font-size: 24px; }
  .laceup-login .laceup-login__form .laceup-auth__check, .laceup-login .laceup-login__form .laceup-auth__forgot { min-height: 40px; display: inline-flex; align-items: center; }
  .laceup-login .laceup-login__submit, .laceup-login .laceup-login__request { min-height: 44px !important; height: 44px !important; }
}
.woocommerce .laceup-login form.woocommerce-form-login.login { border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; }
.laceup-login .laceup-auth__row::before, .laceup-login .laceup-auth__row::after { display: none !important; }
.laceup-login .laceup-auth__forgot { text-decoration: none !important; }
.laceup-login .laceup-login__form .laceup-auth__check { display: inline-flex !important; align-items: center; gap: 8px; }
.laceup-login .laceup-auth__forgot:hover { text-decoration: underline !important; }
.laceup-login .laceup-login__notices .woocommerce-error:focus { outline: none; }

/* Carousel arrows are desktop-only; touch devices swipe. */
@media (max-width: 980px) {
  .hero__arrows, .brands__arrows, .related-carousel__arrow { display: none !important; }
  .brands__carousel { padding-inline: 0; }
  .related-carousel { padding-inline: 0; }
  .related-carousel ul.products { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .related-carousel ul.products::-webkit-scrollbar { display: none; }
}