/*
Theme Name: El Clavijero
Theme URI: https://elclavijero.es
Description: Tema custom — El Clavijero
Version: 9.1.0
Author: thisweb.es
Text Domain: clavijero
*/

/* ═══════════════════════════════════════════════════════════
   Referencia: Thomann · PCComponentes · MediaMarkt
   Base blanca limpia, rojo solo en precios y CTAs
══════════════════════════════════════════════════════════════ */
:root {
  --red:      #FF5500;
  --red-h:    #DB4900;
  --red-pale: #FFF2EB;
  --red-glow: rgba(255,85,0,.18);

  --ink:   #0A0A0A;
  --ink2:  #2A2A2A;
  --mid:   #6E6E6E;
  --faint: #ADADAD;

  --bg:    #FFFFFF;
  --bg2:   #F5F5F3;
  --bg3:   #EBEBEA;
  --bd:    #DEDEDC;
  --bd2:   #C8C8C6;

  --ok:   #059669;
  --warn: #D97706;
  --star: #FBBF24;

  --hdr:  #0F0F0F;
  --nav:  #1A1A1A;

  --r:    4px;
  --r2:   6px;
  --t:    .13s ease;

  --font: 'Inter', system-ui, sans-serif;
  --fh:   'Oswald', 'Arial Narrow', sans-serif;
  --wrap: 1300px;
}

/* ─── BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: 14.5px;
  line-height: 1.55; color: var(--ink); background: var(--bg2);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }
.container { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; }

/* ─── HEADER ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--hdr);
  box-shadow: 0 2px 12px rgba(0,0,0,.40);
}
.header-main {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 20px; padding: 10px 20px;
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 50px; width: auto; filter: invert(1) brightness(.92); transition: opacity var(--t); }
.site-logo:hover .logo-img { opacity: .78; }

/* Buscador */
.header-search form {
  display: flex; align-items: stretch; height: 40px;
  border-radius: var(--r); overflow: hidden;
  border: 2px solid rgba(255,255,255,.12);
  transition: border-color var(--t);
}
.header-search form:focus-within { border-color: var(--red); }
.header-search input {
  flex: 1; padding: 0 14px;
  background: rgba(255,255,255,.08); border: none; outline: none;
  color: #fff; font-size: 14px;
}
.header-search input::placeholder { color: rgba(255,255,255,.30); }
.header-search button {
  padding: 0 18px; background: var(--red); color: #fff;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  transition: background var(--t);
}
.header-search button:hover { background: var(--red-h); }

/* Acciones */
.header-actions { display: flex; align-items: center; gap: 2px; }
.hdr-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 11px; border-radius: var(--r);
  color: rgba(255,255,255,.68); font-size: 10.5px; text-decoration: none;
  transition: background var(--t), color var(--t); position: relative;
  border: none; background: none; cursor: pointer;
}
.hdr-btn:hover { background: rgba(255,255,255,.09); color: #fff; }

/* Selector de idioma */
.hdr-lang { position: relative; display: flex; align-items: center; }
.hdr-lang-corner {
  border-left: 1px solid rgba(255,255,255,.10);
  padding-left: 16px;
}
.hdr-lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); cursor: pointer;
  color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 20px;
  transition: color var(--t), background var(--t), border-color var(--t);
  font-family: var(--font); white-space: nowrap;
}
.hdr-lang-btn:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.lang-flag { font-size: 16px; line-height: 1; }
.lang-label { letter-spacing: .3px; }
.lang-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--bd); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 160px;
  z-index: 9999; overflow: hidden;
}
.lang-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 13px; color: var(--ink);
  text-decoration: none; transition: background .15s;
}
.lang-opt:hover { background: var(--bg2); }
.lang-opt--active { font-weight: 700; color: var(--red); }

/* Contacto + WhatsApp en nav bar */
.nav-contact {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; padding: 0 4px 0 16px;
  border-left: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}
.nav-contact-hours {
  font-size: 11.5px; color: rgba(255,255,255,.42);
}
.nav-wa-btn {
  display: flex; align-items: center; gap: 5px;
  background: #25D366; color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 20px;
  text-decoration: none;
  transition: background var(--t), transform var(--t);
}
.nav-wa-btn:hover { background: #1ebe5d; color: #fff; transform: translateY(-1px); }
@media (max-width: 900px) { .nav-contact { display: none; } }
.hdr-btn .badge {
  position: absolute; top: 2px; right: 4px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ─── NAVEGACIÓN ─────────────────────────────────────────── */
.site-nav { background: var(--nav); }
.nav-inner {
  display: flex; align-items: stretch;
  max-width: var(--wrap); margin: 0 auto; padding: 0 12px;
}
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 15px; color: rgba(255,255,255,.78);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: color var(--t), background var(--t);
}
.nav-link:hover, .nav-item:hover > .nav-link { color: #fff; background: rgba(255,255,255,.09); }
.nav-link.active { color: var(--red); }
.nav-link .chevron { font-size: 8px; opacity: .45; transition: transform var(--t); }
.nav-item:hover .chevron { transform: rotate(180deg); }
.nav-taller-btn {
  display: flex; align-items: center; gap: 6px;
  align-self: center; margin-left: 6px;
  padding: 7px 16px;
  background: var(--red);
  border: none;
  color: #fff;
  font-size: 12.5px; font-weight: 800; border-radius: 4px;
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 2px 8px rgba(255,85,0,.35);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.nav-taller-btn:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,85,0,.45); }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--bg); border: 1px solid var(--bd); border-top: 2px solid var(--red);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border-radius: 0 0 var(--r) var(--r);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  z-index: 500;
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block; padding: 9px 16px;
  color: var(--ink2); font-size: 13.5px; border-bottom: 1px solid #F0F0F0;
  transition: background var(--t), color var(--t), padding-left var(--t);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: var(--red-pale); color: var(--red); padding-left: 22px; }

/* ═══ HERO — AMAZON STYLE ════════════════════════════════════ */
.hero-shop {
  background: #fff;
  position: relative; overflow: hidden;
}
.hero-notes {
  position: absolute; inset: 0;
  pointer-events: none; user-select: none; z-index: 0;
}
.hero-notes span {
  position: absolute;
  font-family: serif;
  color: #000;
  opacity: .07;
  line-height: 1;
  display: block;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hero-notes span:nth-child(3n+1) { animation-name: note-float; animation-duration: 4s; }
.hero-notes span:nth-child(3n+2) { animation-name: note-drift; animation-duration: 5.5s; }
.hero-notes span:nth-child(3n)   { animation-name: note-sway;  animation-duration: 3.8s; }
.hero-notes span:nth-child(2n)   { animation-delay: -2s; }
.hero-notes span:nth-child(4n)   { animation-delay: -1.2s; }
.hero-notes span:nth-child(5n)   { animation-delay: -3s; }
@keyframes note-float {
  from { transform: translateY(0)    rotate(var(--r, -10deg)); }
  to   { transform: translateY(-18px) rotate(var(--r, -10deg)); }
}
@keyframes note-drift {
  from { transform: translateY(0)   translateX(0)   rotate(var(--r, 8deg)); }
  to   { transform: translateY(-12px) translateX(8px) rotate(calc(var(--r, 8deg) + 6deg)); }
}
@keyframes note-sway {
  from { transform: translateY(0)   rotate(var(--r, 15deg)); opacity: .07; }
  to   { transform: translateY(-14px) rotate(calc(var(--r, 15deg) - 8deg)); opacity: .10; }
}
.hero-shop-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0 36px;
  position: relative; z-index: 1;
}

/* Columna izquierda */
.hs-left { display: flex; flex-direction: column; }
.hs-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 22px;
}
.hs-eyebrow::before {
  content: ''; width: 28px; height: 2px; background: var(--red); flex-shrink: 0;
}
.hs-title {
  font-family: var(--fh);
  font-size: clamp(2.8rem, 4vw, 4.4rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.03em;
  color: var(--ink); margin-bottom: 20px;
}
.hs-title em { color: var(--red); font-style: normal; }
.hs-sub {
  font-size: 15px; color: var(--ink2); line-height: 1.72; margin-bottom: 32px;
}
.hs-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 17px 38px; background: var(--red); color: #fff;
  font-size: 16px; font-weight: 700; border-radius: 4px;
  width: fit-content; transition: background .2s, transform .2s;
  box-shadow: 0 4px 16px rgba(232,80,26,.30);
}
.hs-cta:hover { background: var(--red-h); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(232,80,26,.40); }
.hs-taller-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; font-size: 13px; font-weight: 600;
  color: var(--mid); text-decoration: none;
  transition: color var(--t);
}
.hs-taller-link:hover { color: var(--red); }
.hs-taller-link svg { flex-shrink: 0; }
.hs-trust {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bd);
}
.hs-trust-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--ink2);
}
.hs-trust-item svg { color: var(--ok); flex-shrink: 0; width: 15px; height: 15px; }

/* Columna derecha */
.hs-right { display: flex; flex-direction: column; }
.hs-right-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mid); margin-bottom: 14px;
}
.hs-slider-wrap { position: relative; }
.hs-slider-viewport { overflow: hidden; }
.hs-slider-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hs-slide { flex: 0 0 100%; min-width: 100%; }
.hs-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.hs-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bd2); border: none; padding: 0; cursor: pointer;
  transition: background .25s, transform .25s;
}
.hs-dot--active { background: var(--red); transform: scale(1.4); }
.hs-prod-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.hs-pcard {
  background: #fff; border-radius: 10px; overflow: hidden;
  text-decoration: none; border: 1px solid #e8e8e8;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, border-color .2s;
}
.hs-pcard:hover { box-shadow: 0 6px 28px rgba(0,0,0,.11); border-color: #ccc; }
.hs-pcard-img {
  position: relative; height: 130px;
  background: #fff; overflow: hidden;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hs-pcard-img img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .3s ease;
}
.hs-pcard:hover .hs-pcard-img img { transform: scale(1.05); }
.hs-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 3px;
}
.hs-pcard-body {
  padding: 12px 14px 14px;
  border-top: 1px solid #efefef; flex: 1;
  display: flex; flex-direction: column; gap: 5px;
}
.hs-pcard-name {
  font-size: 13px; font-weight: 500; color: var(--ink2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-pcard-price {
  font-family: var(--fh); font-size: 20px; font-weight: 700; color: var(--ink);
  line-height: 1;
}
.hs-pcard-price .woocommerce-Price-amount,
.hs-pcard-price bdi { font-size: inherit; font-weight: inherit; color: inherit; }

/* Quick cats in hero right */
.hs-quick-cats {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bd);
}
.hs-quick-label {
  font-size: 10px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.hs-quick-row { display: flex; flex-wrap: wrap; gap: 7px; }
.hs-qc {
  padding: 5px 12px;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 100px; font-size: 12px; color: var(--ink2);
  font-weight: 500; transition: all .15s;
}
.hs-qc:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* Stats bar */
.hs-stats-bar { background: #0A0A0A; }
.hs-stats { display: grid; grid-template-columns: repeat(4,1fr); }
.hs-stat {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  border-right: 1px solid rgba(255,255,255,.07);
}
.hs-stat:last-child { border-right: none; }
.hs-stat > svg { color: var(--red); flex-shrink: 0; }
.hs-stat strong {
  display: block; font-size: 13.5px; font-weight: 700;
  color: #fff; line-height: 1.2; margin-bottom: 3px;
}
.hs-stat span {
  display: block; font-size: 11.5px; font-weight: 400;
  color: rgba(255,255,255,.42); line-height: 1.3;
}

/* ─── TRUST STRIP ─────────────────────────────────────────── */
.hero-trust { background: var(--bg2); border-bottom: 1px solid var(--bd); }
.hero-trust-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.ht-item {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 16px;
  border-right: 1px solid var(--bd);
}
.ht-item:last-child { border-right: none; }
.ht-item svg { color: var(--red); flex-shrink: 0; }
.ht-item strong { font-weight: 700; color: var(--ink); display: block; font-size: 13px; }
.ht-item span { font-size: 12px; color: var(--mid); display: block; margin-top: 1px; }

/* ─── SECCIÓN HEADER ─────────────────────────────────────── */
.sec-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px;
}
.sec-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); margin-bottom: 6px;
}
.sec-hd h2 {
  font-family: var(--fh);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.sec-hd a {
  font-size: 13px; color: var(--red); font-weight: 600;
  transition: color var(--t); white-space: nowrap; padding-bottom: 4px;
}
.sec-hd a:hover { color: var(--red-h); }

/* ─── CATEGORÍAS ─────────────────────────────────────────── */
.qcats { background: var(--bg2); padding: 56px 0 64px; }
.qcats-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
/* Fila 1: 2 grandes | Fila 2: 3 medianas | Fila 3: 4 pequeñas */
.qcat:nth-child(-n+2)                { grid-column: span 6; }
.qcat:nth-child(n+3):nth-child(-n+5) { grid-column: span 4; }
.qcat:nth-child(n+6)                 { grid-column: span 3; }

/* Tarjeta */
.qcat {
  border-radius: 16px;
  border: 1.5px solid var(--bd);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  transition: box-shadow .28s, border-color .28s, transform .28s;
}
.qcat:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.11);
  border-color: var(--red);
  transform: translateY(-3px);
}

/* Área de imagen de categoría — collage sin fondos */
.qcat-fan {
  width: 100%;
  aspect-ratio: 5/4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50% 50%;
  gap: 0;
  padding: 12px;
  background: #f0ebe3;
  overflow: hidden;
  flex-shrink: 0;
  transition: background .3s;
}
.qcat:nth-child(-n+2) .qcat-fan { aspect-ratio: 16/9; padding: 16px; }
.qcat:hover .qcat-fan { background: #e8e1d7; }

.qcat-fi {
  width: 100%; height: 100%;
  min-height: 0;
  object-fit: contain;
  padding: 6px;
  mix-blend-mode: multiply;
  transition: transform .35s ease;
  display: block;
}
.qcat:hover .qcat-fi { transform: scale(1.06); }

/* 1 imagen → centrada con más aire */
.qcat-fan .qcat-fi:only-child { grid-column: 1 / -1; grid-row: 1 / -1; padding: 16px; }

/* 2 imágenes → columnas completas */
.qcat-fan--2 .qcat-fi { grid-row: span 2; }

/* 3 imágenes → grande izquierda + 2 apiladas derecha */
.qcat-fan--3 .qcat-fi:nth-child(1) { grid-row: span 2; }

/* Sin imagen: placeholder */
.qcat-noimg {
  grid-column: 1 / -1; grid-row: 1 / -1;
  display: flex; align-items: center; justify-content: center;
}
.qcat-noimg svg { color: #c4bdb3; }

/* Etiqueta de texto — debajo del fan, fondo blanco */
.qcat-label {
  padding: 20px 20px 22px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.qcat-name {
  font-family: var(--fh);
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  transition: color .2s;
}
.qcat:hover .qcat-name { color: var(--red); }
.qcat-count {
  font-size: 11px;
  color: var(--mid);
  margin-left: auto;
  white-space: nowrap;
}

/* ─── SECCIÓN PRODUCTOS ──────────────────────────────────── */
.prods-section { background: var(--bg); padding: 64px 0; }
.prods-section--alt { background: #f5f5f5; }

/* ─── GRID ───────────────────────────────────────────────── */
.pgrid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 16px;
}

/* ─── TARJETA PRODUCTO ───────────────────────────────────── */
.pcard {
  background: #fff;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
  transition: box-shadow .22s ease, transform .22s ease;
}
.pcard:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.13), 0 0 0 1px rgba(0,0,0,.06);
  transform: translateY(-4px);
}

/* Imagen */
.pcard-img-wrap {
  position: relative; display: block;
  aspect-ratio: 1; background: #fff; overflow: hidden;
}
.pcard-img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 14px; mix-blend-mode: multiply;
  transition: transform .32s ease;
}
.pcard:hover .pcard-img-wrap img { transform: scale(1.04); }

/* Badges */
.pbadge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.pbadge.new  { background: var(--ok);   color: #fff; }
.pbadge.sale { background: var(--red);  color: #fff; }
.pbadge.hot  { background: var(--warn); color: #fff; }

/* Wishlist hover */
.pcard-actions {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--t), transform var(--t);
}
.pcard:hover .pcard-actions { opacity: 1; transform: translateX(0); }
.pcard-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--mid); text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: background var(--t), color var(--t);
}
.pcard-btn:hover { background: var(--red); color: #fff; }

/* Info */
.pcard-info { padding: 14px 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pcard-brand { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .10em; }
.pcard-name {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  line-height: 1.4; text-decoration: none; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-name:hover { color: var(--red); }

/* Estrellas */
.pcard-stars { display: flex; align-items: center; gap: 2px; }
.pcard-stars .s-on  { color: var(--star); font-size: 12px; }
.pcard-stars .s-off { color: var(--bg3);  font-size: 12px; }
.pcard-rn { font-size: 11px; color: var(--faint); margin-left: 3px; }

/* Precio */
.pcard-price { display: flex; align-items: baseline; gap: 7px; margin-top: auto; padding-top: 10px; }
.pnow {
  font-family: var(--fh); font-size: 24px; font-weight: 700;
  color: var(--red); line-height: 1;
}
.pnow .woocommerce-Price-amount,
.pnow bdi { font-size: inherit; font-weight: inherit; color: inherit; }
/* Precio tachado (precio original dentro de get_price_html) */
.pnow del {
  font-size: 13px; font-weight: 400;
  color: var(--faint); text-decoration: line-through;
}
.pnow del .woocommerce-Price-amount,
.pnow del bdi { font-size: inherit; font-weight: inherit; color: inherit; }
/* Precio rebajado (precio real) */
.pnow ins {
  font-size: 24px; font-weight: 700;
  color: var(--red); text-decoration: none;
}
.pnow ins .woocommerce-Price-amount,
.pnow ins bdi { font-size: inherit; font-weight: inherit; color: inherit; }
.pwas { font-size: 12px; color: var(--faint); text-decoration: line-through; }
.pcard-ship { font-size: 11px; color: var(--ok); }

/* Botón */
.padd {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 12px; margin-top: 10px;
  background: var(--ink); color: #fff;
  border-radius: 6px; font-size: 13px; font-weight: 700;
  transition: background .18s;
  cursor: pointer;
}
.padd:hover { background: var(--red); }

/* ─── PROMO EDITORIAL ────────────────────────────────────── */
.promo-editorial {
  background: #0A0A0A;
  padding: 72px 0;
  overflow: hidden;
  position: relative;
}
.promo-editorial::before {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 50%;
  background: var(--red); opacity: .06;
  clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}
.pe-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 40px;
  position: relative; z-index: 1;
}
.pe-body { max-width: 580px; }
.pe-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red); margin-bottom: 22px;
}
.pe-kicker::before { content: ''; width: 24px; height: 2px; background: var(--red); flex-shrink: 0; }
.pe-title {
  font-family: var(--fh);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.02em;
  color: #fff; margin-bottom: 18px;
}
.pe-title em { color: var(--red); font-style: normal; }
.pe-sub {
  font-size: 15px; color: rgba(255,255,255,.52);
  line-height: 1.70; margin-bottom: 34px;
}
.pe-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 38px; background: var(--red); color: #fff;
  font-size: 15px; font-weight: 700; border-radius: 4px;
  letter-spacing: .01em; transition: background .2s, transform .2s;
}
.pe-btn:hover { background: var(--red-h); color: #fff; transform: translateY(-2px); }
.pe-deco {
  flex-shrink: 0;
  font-family: var(--fh); font-size: clamp(6rem, 13vw, 11rem);
  font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: rgba(255,255,255,.05); user-select: none; pointer-events: none;
  white-space: nowrap;
}

/* ─── MARCAS — MARQUEE ───────────────────────────────────── */
.brands-section {
  background: #111;
  padding: 48px 0 44px;
  overflow: hidden;
}
.brands-kicker {
  text-align: center; margin-bottom: 28px;
  color: rgba(255,255,255,.4);
}
.brands-rail-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
}
.brands-rail {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: brands-scroll 60s linear infinite;
}
.brand-logo-slot {
  display: flex; align-items: center; flex-shrink: 0;
  text-decoration: none;
}
.brands-rail:hover { animation-play-state: paused; }
@keyframes brands-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}
.brand-rail-logo {
  height: 44px; width: auto;
  filter: grayscale(.3);
  opacity: .75;
  transition: opacity .3s, filter .3s;
}
.brand-logo-slot:hover .brand-rail-logo { opacity: 1; filter: grayscale(0); }
.brand-rail-name {
  font-family: var(--fh); font-size: 1.15rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.55); white-space: nowrap; flex-shrink: 0;
  transition: color .2s;
  text-decoration: none;
}
.brand-logo-slot:hover .brand-rail-name { color: #fff; }

/* ─── TRUST BAR FOOTER ───────────────────────────────────── */
.trust-bar { background: var(--bg2); border-top: 1px solid var(--bd); padding: 22px 0; }
.trust-items { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 14px; }
.trust-item { display: flex; align-items: center; gap: 13px; }
.trust-icon { width: 42px; height: 42px; border-radius: var(--r); background: var(--red-pale); border: 1px solid rgba(217,0,18,.15); display: flex; align-items: center; justify-content: center; color: var(--red); flex-shrink: 0; }
.trust-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.trust-text span { font-size: 12px; color: var(--mid); }

/* ─── TIENDA ─────────────────────────────────────────────── */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; padding: 48px 0 56px; }
/* ─── SIDEBAR TIENDA (Amazon-style) ─────────────────────── */
.shop-sidebar {
  position: sticky; top: 120px; font-size: 14px;
  max-height: calc(100vh - 160px);
  overflow-y: scroll;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #b8b8b8 #f0f0f0;
}
.shop-sidebar::-webkit-scrollbar { width: 6px; }
.shop-sidebar::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
.shop-sidebar::-webkit-scrollbar-thumb { background: #b8b8b8; border-radius: 3px; }
.shop-sidebar::-webkit-scrollbar-thumb:hover { background: #888; }

.filter-section { padding: 20px 0; border-bottom: 1px solid #e7e7e7; }
.filter-section:first-child { padding-top: 0; }
.filter-section:last-child { border-bottom: none; }

.filter-heading {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 10px; padding: 0;
}

/* Categorías */
.fcat-list { list-style: none; padding: 0; margin: 0; }
.fcat-item { margin: 0; }
.fcat-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; color: #007185; text-decoration: none; font-size: 14px;
  transition: color .15s;
}
.fcat-link:hover { color: var(--red); text-decoration: underline; }
.fcat-item.fcat-active > .fcat-link { font-weight: 700; color: var(--ink); pointer-events: none; }
.fcat-count { color: #888; font-size: 12px; flex-shrink: 0; margin-left: 6px; }

/* Subcategorías (visibles solo en la categoría activa) */
.fsubcat-list {
  list-style: none; padding: 0 0 6px 12px; margin: 2px 0 4px;
  border-left: 3px solid var(--red);
}
.fsubcat-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; color: #007185; text-decoration: none; font-size: 13px;
}
.fsubcat-link:hover { color: var(--red); text-decoration: underline; }
.fsubcat-link.is-active { font-weight: 700; color: var(--ink); pointer-events: none; }

/* Precio */
.fprice-list { list-style: none; padding: 0; margin: 0; }
.fprice-link {
  display: block; padding: 6px 0;
  color: #007185; text-decoration: none; font-size: 14px;
}
.fprice-link:hover { color: var(--red); text-decoration: underline; }
.fprice-link.is-active { font-weight: 700; color: var(--ink); }

/* Marcas */
.fbrand-list { list-style: none; padding: 0; margin: 0; }
.fbrand-link {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 0; color: #007185; text-decoration: none; font-size: 14px;
}
.fbrand-link:hover { color: var(--red); }
.fbrand-check {
  width: 15px; height: 15px; flex-shrink: 0;
  border: 1px solid #aaa; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; background: #fff;
}
.fbrand-link.is-active { font-weight: 700; color: var(--ink); }
.fbrand-link.is-active .fbrand-check { background: var(--red); border-color: var(--red); color: #fff; }
.fbrand-name { flex: 1; }

/* ═══ BANNER REVISIÓN (página de categoría) ═════════════════ */
.cat-revision-banner { background: var(--ink); padding: 14px 0; }
.cat-revision-banner .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.crb-icon { color: var(--red); flex-shrink: 0; display: flex; }
.crb-text { flex: 1; min-width: 200px; }
.crb-text strong { display: block; font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.crb-text span { font-size: 12px; color: rgba(255,255,255,.5); }
.crb-badges { display: flex; gap: 8px; flex-shrink: 0; }
.crb-badge { font-size: 12px; font-weight: 700; color: var(--red); background: rgba(255,85,0,.15); border: 1px solid rgba(255,85,0,.3); padding: 4px 12px; border-radius: 100px; }

/* ═══ PILLS DE SUBCATEGORÍAS (página de categoría) ══════════ */
.cat-subcat-pills { padding: 16px 0; border-bottom: 1px solid var(--bd); background: var(--bg); }
.cat-subcat-pills .container { display: flex; flex-wrap: wrap; gap: 8px; }
.subcat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--bd); background: var(--bg);
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none; transition: border-color .18s, color .18s, background .18s;
}
.subcat-pill:hover { border-color: var(--red); color: var(--red); background: var(--red-pale); }
.subcat-pill span { font-size: 11px; font-weight: 400; color: var(--mid); }

/* ═══ SUBCATEGORÍAS EN PORTADA DE CATEGORÍA ══════════════════ */
/* Reset span rules del qcat de home — en la página de categoría todas iguales */
.subcat-qcat.qcat,
.subcat-qcat.qcat:nth-child(-n+2),
.subcat-qcat.qcat:nth-child(n+3):nth-child(-n+5),
.subcat-qcat.qcat:nth-child(n+6) { grid-column: span 1; }
.subcat-qcat.qcat .qcat-fan,
.subcat-qcat.qcat:nth-child(-n+2) .qcat-fan { aspect-ratio: 4/3; }
.cat-subcats { background: var(--bg2); border-bottom: 1px solid var(--bd); padding: 28px 0 32px; }
.cat-subcats-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.cat-subcats-hd h2 { font-family: var(--fh); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin: 0; }
.cat-subcats-hd a { font-size: 13px; color: var(--mid); text-decoration: none; }
.cat-subcats-hd a:hover { color: var(--red); }
.subcats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.subcat-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r2); overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s; }
.subcat-card:hover { border-color: var(--red); box-shadow: 0 4px 16px rgba(255,85,0,.12); transform: translateY(-2px); }
.subcat-img { width: 100%; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.subcat-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; transition: transform .22s ease; }
.subcat-card:hover .subcat-img img { transform: scale(1.06); }
.subcat-noimg { width: 100%; aspect-ratio: 1; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
.subcat-noimg svg { color: var(--faint); }
.subcat-info { padding: 8px 10px 10px; text-align: center; width: 100%; }
.subcat-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 2px; }
.subcat-card:hover .subcat-name { color: var(--red); }
.subcat-count { display: block; font-size: 11px; color: var(--mid); }

/* compat — variables antiguas usadas en archive-product.php */
.filter-box { padding: 0; margin: 0; background: none; border: none; border-radius: 0; }
.filter-title { display: none; }
.price-range-inputs { display: flex; gap: 8px; margin-top: 10px; }
.price-range-inputs input { flex: 1; padding: 7px 10px; border: 1px solid var(--bd); border-radius: var(--r); font-size: 13px; }
.price-range-inputs input:focus { outline: none; border-color: var(--red); }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.shop-results { font-size: 13.5px; color: var(--mid); }
.shop-results strong { color: var(--ink); }
.shop-sort select { padding: 8px 12px; border: 1px solid var(--bd); border-radius: var(--r); font-size: 13px; background: var(--bg); }
.shop-sort select:focus { outline: none; border-color: var(--red); }

/* Compat antiguas clases */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 20px; }
.product-card { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r2); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease; }
.product-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.10); transform: translateY(-3px); }
.product-card-img { position: relative; aspect-ratio: 1; background: #fff; overflow: hidden; border-bottom: 1px solid var(--bd); }
.product-card-img a { display: block; width: 100%; height: 100%; }
.product-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; transition: transform .28s ease; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; }
.badge-new { background: var(--ok); color: #fff; padding: 2px 7px; border-radius: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.badge-sale { background: var(--red); color: #fff; padding: 2px 7px; border-radius: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.badge-hot { background: var(--warn); color: #fff; padding: 2px 7px; border-radius: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.product-card-actions { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 5px; opacity: 0; transform: translateX(5px); transition: opacity var(--t), transform var(--t); }
.product-card:hover .product-card-actions { opacity: 1; transform: translateX(0); }
.card-action-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; color: var(--mid); text-decoration: none; transition: background var(--t), color var(--t); }
.card-action-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.product-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.product-brand { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.product-name { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.product-name a { color: inherit; }
.product-name a:hover { color: var(--red); }
.product-rating { display: flex; align-items: center; gap: 4px; }
.stars { display: flex; gap: 1px; font-size: 12.5px; }
.stars .s-on  { color: var(--star); }
.stars .s-off { color: #ddd; }
.rating-count { font-size: 11.5px; color: var(--faint); }
.product-price { display: flex; align-items: baseline; gap: 7px; margin-top: auto; padding-top: 6px; }
.price-current { font-family: var(--fh); font-size: 26px; font-weight: 700; color: var(--red); }
.price-current .woocommerce-Price-amount, .price-current bdi { font-size: inherit; font-weight: inherit; color: inherit; }
.price-old { font-size: 12px; color: var(--faint); text-decoration: line-through; }
.price-save { font-size: 11px; color: var(--ok); font-weight: 700; }
.btn-add-cart { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: var(--red); color: #fff; border-radius: var(--r); font-size: 13px; font-weight: 700; transition: background var(--t); cursor: pointer; margin-top: 9px; }
.btn-add-cart:hover { background: var(--red-h); }

/* ─── PRODUCTO DETALLE ───────────────────────────────────── */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.product-gallery { position: sticky; top: 80px; }
.gallery-main { aspect-ratio: 1; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r2); overflow: hidden; margin-bottom: 10px; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 28px; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumb { width: 64px; height: 64px; border-radius: var(--r); overflow: hidden; border: 2px solid var(--bd); cursor: pointer; background: var(--bg2); transition: border-color var(--t); }
.gallery-thumb:hover, .gallery-thumb.active { border-color: var(--red); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.product-breadcrumb { font-size: 12px; color: var(--faint); margin-bottom: 12px; }
.product-breadcrumb a { color: var(--faint); }
.product-breadcrumb a:hover { color: var(--red); }
.product-detail-brand { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .10em; margin-bottom: 5px; }
.product-detail-title { font-size: 1.75rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; line-height: 1.25; }
.product-detail-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--bd); }
.product-detail-price { padding: 16px 0; border-bottom: 1px solid var(--bd); margin-bottom: 22px; }
.price-big { font-family: var(--fh); font-size: 2.8rem; font-weight: 700; color: var(--red); }
.price-old-big { font-size: 15px; color: var(--faint); text-decoration: line-through; }
.price-iva { font-size: 12px; color: var(--faint); margin-top: 4px; }
.product-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.qty-selector { display: flex; align-items: center; border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; width: fit-content; }
.qty-btn { width: 38px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--bg2); color: var(--mid); font-size: 18px; transition: background var(--t), color var(--t); }
.qty-btn:hover { background: var(--red); color: #fff; }
.qty-input { width: 52px; text-align: center; border: none; border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); height: 42px; font-size: 16px; font-weight: 600; }
.qty-input:focus { outline: none; }
.btn-add-cart-lg { padding: 14px 32px; font-size: 15px; font-weight: 700; background: var(--red); color: #fff; border-radius: var(--r); display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 3px 14px var(--red-glow); transition: background var(--t), box-shadow var(--t), transform var(--t); }
.btn-add-cart-lg:hover { background: var(--red-h); box-shadow: 0 6px 20px var(--red-glow); transform: translateY(-1px); }
.btn-wishlist { padding: 12px; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r); color: var(--mid); font-size: 20px; transition: border-color var(--t), color var(--t); }
.btn-wishlist:hover { border-color: var(--red); color: var(--red); }
.product-meta { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--mid); }
.product-meta-item { display: flex; gap: 8px; }
.product-meta-item strong { color: var(--ink); min-width: 90px; }
.stock-ok { color: var(--ok); font-weight: 600; }
.stock-out { color: var(--red); font-weight: 600; }
.product-tabs { margin-top: 36px; }
.tab-nav { display: flex; border-bottom: 2px solid var(--bd); margin-bottom: 18px; }
.tab-btn { padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--mid); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--t), border-color var(--t); }
.tab-btn.active, .tab-btn:hover { color: var(--red); border-bottom-color: var(--red); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.product-desc { font-size: 14px; color: var(--mid); line-height: 1.80; }
.product-desc p { margin-bottom: 12px; }

/* ─── CARRITO ────────────────────────────────────────────── */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.cart-table { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r2); overflow: hidden; }
.cart-table table { width: 100%; border-collapse: collapse; }
.cart-table th { background: var(--bg2); padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mid); text-align: left; border-bottom: 1px solid var(--bd); }
.cart-table td { padding: 14px 16px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.cart-table tr:last-child td { border-bottom: none; }
.cart-item-img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--bd); padding: 4px; }
.cart-item-name { font-size: 14px; font-weight: 500; }
.cart-item-variant { font-size: 12px; color: var(--faint); }
.cart-remove { color: var(--faint); font-size: 18px; transition: color var(--t); }
.cart-remove:hover { color: var(--red); }
.cart-summary { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r2); padding: 22px; position: sticky; top: 80px; }
.cart-summary h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--bd); font-size: 14px; color: var(--mid); }
.summary-row:last-of-type { border-bottom: none; }
.summary-row.total { font-size: 18px; font-weight: 700; color: var(--ink); padding-top: 13px; }
.btn-checkout { width: 100%; padding: 14px; margin-top: 14px; background: var(--red); color: #fff; border-radius: var(--r); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 3px 12px var(--red-glow); transition: background var(--t); cursor: pointer; }
.btn-checkout:hover { background: var(--red-h); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer { background: #0F0F0F; padding: 48px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand .logo-text strong { color: #fff; font-size: 17px; font-weight: 700; }
.footer-brand .logo-text span { color: var(--red); font-size: 11.5px; }
.footer-desc { color: rgba(255,255,255,.32); font-size: 13px; line-height: 1.68; margin-top: 12px; margin-bottom: 18px; }
.footer-social { display: flex; gap: 8px; }
.social-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.40); transition: background var(--t), color var(--t); }
.social-btn:hover { background: var(--red); color: #fff; }
.footer-heading { color: #ddd; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { color: rgba(255,255,255,.38); font-size: 13px; transition: color var(--t); }
.footer-links a:hover { color: rgba(255,255,255,.80); }
.footer-bottom { padding: 14px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom p { color: rgba(255,255,255,.22); font-size: 12px; }
.footer-payments { display: flex; gap: 6px; }
.payment-icon { height: 24px; width: auto; opacity: .75; transition: opacity var(--t); }
.payment-icon:hover { opacity: 1; }

/* ─── PAGINACIÓN ─────────────────────────────────────────── */
ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 5px; list-style: none; padding: 36px 0 0; margin: 0;
}
ul.page-numbers li { display: block; }
a.page-numbers, span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--bd); border-radius: var(--r);
  font-size: 13px; font-weight: 500; color: var(--ink); background: var(--bg);
  transition: border-color var(--t), color var(--t), background var(--t);
  text-decoration: none; white-space: nowrap;
}
a.page-numbers:hover { border-color: var(--red); color: var(--red); background: var(--red-pale); }
span.page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }
span.page-numbers.dots { border: none; background: none; color: var(--faint); pointer-events: none; }

/* ─── SINGLE PRODUCT — ESTILO AMAZON ─────────────────────── */
.sprod-wrap { padding: 20px 20px 80px; background: var(--bg); }
.sprod-layout {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

/* Galería */
.sprod-gallery {
  position: sticky; top: 90px;
  display: flex; gap: 10px;
}
.sprod-thumbs {
  display: flex; flex-direction: column; gap: 7px; flex-shrink: 0;
}
.sprod-thumb {
  width: 58px; height: 58px;
  border: 2px solid var(--bd); border-radius: var(--r);
  overflow: hidden; cursor: pointer; background: var(--bg2);
  transition: border-color var(--t);
  flex-shrink: 0;
}
.sprod-thumb.active, .sprod-thumb:hover { border-color: var(--red); }
.sprod-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.sprod-main {
  flex: 1; aspect-ratio: 1;
  background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r2);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sprod-main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; display: block; }

/* Info */
.sprod-info { display: flex; flex-direction: column; gap: 0; }
.sprod-brand {
  font-size: 11px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--mid); margin-bottom: 8px;
}
.sprod-brand a { color: var(--red); }
.sprod-brand a:hover { text-decoration: underline; }
.sprod-title {
  font-size: 1.55rem; font-weight: 600; color: var(--ink);
  line-height: 1.30; margin-bottom: 10px;
}
.sprod-rating {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.sprod-stars { color: var(--star); font-size: 15px; letter-spacing: 1px; }
.sprod-rcount { font-size: 13px; color: var(--red); text-decoration: none; }
.sprod-rcount:hover { text-decoration: underline; }
.sprod-divider { border: none; border-top: 1px solid var(--bd); margin: 14px 0; }

/* Precio */
.sprod-price-area { margin-bottom: 4px; }
.sprod-sale-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sprod-price-current {
  font-family: var(--fh); font-size: 2.2rem; font-weight: 700; color: var(--red);
  line-height: 1;
}
.sprod-price-current .woocommerce-Price-amount,
.sprod-price-current bdi { font-size: inherit; font-weight: inherit; color: inherit; }
.sprod-price-was { font-size: 15px; color: var(--faint); text-decoration: line-through; }
.sprod-save-pct {
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 2px;
}
.sprod-iva { font-size: 12px; color: var(--faint); margin-top: 4px; }

/* Stock + envío */
.sprod-stock-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.sprod-in-stock { font-size: 14px; font-weight: 600; color: var(--ok); }
.sprod-out-stock { font-size: 14px; font-weight: 600; color: var(--red); }
.sprod-ship-info, .sprod-return-info {
  font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 7px;
}
.sprod-ship-info svg, .sprod-return-info svg { color: var(--ok); flex-shrink: 0; }

/* Buy box */
.sprod-buy-box {
  background: var(--bg); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  margin: 16px 0;
}
.sprod-qty-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mid); }
.sprod-btn-cart {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px;
  background: var(--red); color: #fff; border-radius: var(--r);
  font-size: 15px; font-weight: 700;
  box-shadow: 0 3px 10px var(--red-glow);
  transition: background var(--t), transform var(--t);
  cursor: pointer;
}
.sprod-btn-cart:hover { background: var(--red-h); transform: translateY(-1px); }
.sprod-btn-buy {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px;
  background: var(--bg); color: var(--ink); border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--bd2);
  transition: border-color var(--t), background var(--t);
  text-decoration: none;
}
.sprod-btn-buy:hover { border-color: var(--ink); background: var(--bg2); color: var(--ink); }

/* Trust en ficha */
.sprod-trust { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sprod-trust-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--mid);
}
.sprod-trust-item svg { color: var(--ok); flex-shrink: 0; }

/* Meta del producto */
.sprod-meta {
  font-size: 13px; color: var(--mid);
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd);
}
.sprod-meta-row { display: flex; gap: 8px; }
.sprod-meta-row strong { color: var(--ink); min-width: 90px; }
.sprod-meta-row a { color: var(--red); }
.sprod-meta-row a:hover { text-decoration: underline; }

/* Tabs */
.sprod-tabs-section { border-top: 1px solid var(--bd); padding-top: 32px; }

/* ─── CONTACTO ──────────────────────────────────────────── */
.contact-page { background: var(--bg); padding: 48px 0 80px; }
.contact-layout { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.contact-info h2 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.contact-info > p { font-size: 14px; color: var(--mid); line-height: 1.7; margin-bottom: 28px; }
.cinfo-item { display: flex; gap: 14px; margin-bottom: 22px; }
.cinfo-icon { width: 40px; height: 40px; background: var(--red-pale); border-radius: var(--r); display: flex; align-items: center; justify-content: center; color: var(--red); flex-shrink: 0; }
.cinfo-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.cinfo-item a { display: block; font-size: 14px; color: var(--red); font-weight: 600; }
.cinfo-item span { display: block; font-size: 12px; color: var(--mid); }
.contact-form-wrap h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.contact-error { background: #fff0f0; border: 1px solid #fcc; color: #c00; padding: 10px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 16px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.cform-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform-field { display: flex; flex-direction: column; gap: 5px; }
.cform-field label { font-size: 13px; font-weight: 600; color: var(--ink2); }
.cform-field input, .cform-field textarea { padding: 10px 14px; border: 1px solid var(--bd2); border-radius: var(--r); font-size: 14px; color: var(--ink); background: var(--bg); transition: border-color var(--t), box-shadow var(--t); font-family: inherit; }
.cform-field input:focus, .cform-field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-pale); }
.cform-field textarea { resize: vertical; min-height: 140px; }
.cform-submit { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: var(--red); color: #fff; font-size: 15px; font-weight: 700; border-radius: var(--r); border: none; cursor: pointer; transition: background var(--t), transform var(--t); align-self: flex-start; }
.cform-submit:hover { background: var(--red-h); transform: translateY(-1px); }
.contact-success { text-align: center; padding: 48px 24px; }
.contact-success svg { color: var(--ok); margin-bottom: 16px; }
.contact-success h3 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.contact-success p { color: var(--mid); margin-bottom: 24px; }
.btn-contact-back { display: inline-block; padding: 12px 24px; background: var(--red); color: #fff; border-radius: var(--r); font-weight: 700; font-size: 14px; }
@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .cform-2col { grid-template-columns: 1fr; }
}

/* ─── KLARNA BADGE ──────────────────────────────────────── */
.klarna-badge {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 8px 12px;
  background: #FFF0F5; border-radius: 6px;
  border: 1px solid #FFB3C7;
  font-size: 13px; color: var(--ink2);
}
.klarna-logo { height: 18px; width: auto; flex-shrink: 0; }
.klarna-badge strong { font-weight: 700; color: var(--ink); }
.klarna-badge a { color: #17120F; font-size: 11.5px; text-decoration: underline; white-space: nowrap; }

/* ─── WC GLOBAL ──────────────────────────────────────────── */
.woocommerce-Price-amount { font-weight: inherit; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--red); }
.woocommerce-message::before { color: var(--red); }
.woocommerce-notices-wrapper { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.woocommerce-error { list-style: none; background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--r); padding: 14px 18px; color: #991b1b; margin: 0 0 20px; }

/* ─── CARRITO + CHECKOUT ─────────────────────────────────── */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { max-width: var(--wrap); margin: 0 auto; padding: 36px 20px 80px; }

/* Tabla carrito (shop_table) */
.shop_table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; margin-bottom: 24px; }
.shop_table th { background: var(--bg2); padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mid); text-align: left; border-bottom: 1px solid var(--bd); }
.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--bd); vertical-align: middle; font-size: 14px; }
.shop_table tr:last-child td { border-bottom: none; }
.shop_table .product-thumbnail { width: 80px; }
.shop_table .product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); }
.shop_table .product-name a { font-weight: 600; color: var(--ink); }
.shop_table .product-name a:hover { color: var(--red); }
.shop_table .product-price, .shop_table .product-subtotal { font-weight: 700; color: var(--ink); }
.shop_table .qty { width: 64px; padding: 7px 10px; border: 1.5px solid var(--bd); border-radius: var(--r); font-size: 14px; text-align: center; }
.shop_table .remove { color: var(--faint); font-size: 18px; text-decoration: none; }
.shop_table .remove:hover { color: var(--red); }
.shop_table .actions { padding: 16px; }
.coupon { display: flex; gap: 8px; }
.coupon input[type=text] { flex: 1; max-width: 240px; border: 1.5px solid var(--bd); border-radius: var(--r); padding: 10px 14px; font-size: 14px; }
.coupon .button, .cart_totals .button, #payment .button { background: var(--red); color: #fff; border: none; border-radius: var(--r); padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; }
.coupon .button:hover, .cart_totals .button:hover, #payment .button:hover { background: var(--red-h); }
.button[name=update_cart] { background: var(--bg3); color: var(--ink); margin-left: auto; }
.button[name=update_cart]:hover { background: var(--bd2); }

/* Totales del carrito */
.cart_totals, .checkout_coupon { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r); padding: 24px; }
.cart_totals h2 { font-size: 1rem; font-weight: 700; margin: 0 0 16px; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th { padding: 10px 0; font-weight: 600; font-size: 14px; color: var(--mid); width: 40%; }
.cart_totals td { padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--bd); }
.cart_totals .order-total td { font-size: 18px; font-weight: 700; color: var(--ink); border-bottom: none; }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .checkout-button { display: block; text-align: center; background: var(--red); color: #fff; border-radius: var(--r); padding: 15px; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s; }
.wc-proceed-to-checkout .checkout-button:hover { background: var(--red-h); }

/* Layout carrito 2 columnas */
.woocommerce-cart-form { width: 100%; }
.cart-collaterals { margin-top: 0; }
@media (min-width: 768px) {
  .woocommerce-cart .woocommerce > form + .cart-collaterals { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
}

/* Checkout */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 768px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr; } }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, #order_review_heading, .woocommerce-checkout #payment h3 { font-size: 1rem; font-weight: 700; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--bd); }
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.woocommerce-checkout input[type=text],
.woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel],
.woocommerce-checkout input[type=password],
.woocommerce-checkout select,
.woocommerce-checkout textarea { width: 100%; border: 1.5px solid var(--bd); border-radius: var(--r); padding: 11px 14px; font-size: 14px; box-sizing: border-box; transition: border-color .15s; }
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus { outline: none; border-color: var(--red); }
.woocommerce-checkout .required { color: var(--red); }
#order_review { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r); padding: 24px; }
#order_review .shop_table td, #order_review .shop_table th { border-bottom: 1px solid var(--bd); }
#payment { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r); padding: 24px; margin-top: 24px; }
#payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
#payment ul.payment_methods li { padding: 12px 0; border-bottom: 1px solid var(--bd); }
#payment ul.payment_methods li:last-child { border-bottom: none; }
#payment ul.payment_methods label { font-weight: 600; cursor: pointer; }
#payment .payment_box { background: var(--bg2); border-radius: var(--r); padding: 14px; margin-top: 8px; font-size: 13px; color: var(--mid); }
#place_order { width: 100%; padding: 16px; font-size: 16px; font-weight: 700; background: var(--red); color: #fff; border: none; border-radius: var(--r); cursor: pointer; transition: background .15s; margin-top: 8px; }
#place_order:hover { background: var(--red-h); }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; font-size: 13px; color: var(--mid); }
.woocommerce-checkout-review-order { position: sticky; top: 120px; }

/* ─── TALLER HOOK ────────────────────────────────────────── */
.taller-hook { background: var(--red); padding: 18px 0; }
.taller-hook-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.th-left { display: flex; align-items: center; gap: 16px; }
.th-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: rgba(255,255,255,.15); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.th-left strong { display: block; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.th-left span { font-size: 12.5px; color: rgba(255,255,255,.75); }
.th-btn {
  flex-shrink: 0; padding: 13px 28px;
  background: #fff; color: var(--red);
  font-size: 14px; font-weight: 800; border-radius: var(--r);
  white-space: nowrap; text-decoration: none;
  transition: background .18s, transform .18s;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.th-btn:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
@media (max-width: 768px) {
  .taller-hook-inner { flex-direction: column; text-align: center; }
  .th-left { flex-direction: column; }
}

/* ─── TALLER ─────────────────────────────────────────────── */
.taller-section {
  background: #0D0D0D;
  padding: 48px 0;
  position: relative; overflow: hidden;
  scroll-margin-top: 120px;
}
.taller-bg-text {
  position: absolute; top: 50%; left: -10px;
  transform: translateY(-50%);
  font-family: var(--fh); font-size: 22vw; font-weight: 900;
  color: rgba(255,255,255,.025); line-height: 1;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.taller-inner {
  display: grid; grid-template-columns: 1fr 520px;
  gap: 56px; align-items: start;
  position: relative; z-index: 1;
}
.taller-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red); margin-bottom: 12px;
}
.taller-kicker::before { content: ''; width: 24px; height: 2px; background: var(--red); flex-shrink: 0; }
.taller-title {
  font-family: var(--fh);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.03em;
  color: #fff; margin-bottom: 12px;
}
.taller-title em { color: var(--red); font-style: normal; }
.taller-sub {
  font-size: 14px; color: rgba(255,255,255,.48);
  line-height: 1.6; margin-bottom: 20px; max-width: 480px;
}
.taller-services { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ts-item { display: flex; align-items: flex-start; gap: 12px; }
.ts-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  background: rgba(255,85,0,.10);
  border: 1px solid rgba(255,85,0,.22);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
}
.ts-text strong { display: block; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 1px; }
.ts-text span { font-size: 12px; color: rgba(255,255,255,.40); }
.taller-trust { display: flex; flex-direction: column; gap: 7px; }
.tt-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.60); }
.tt-item svg { color: var(--ok); flex-shrink: 0; }

/* Formulario */
.taller-form-card {
  background: #fff; border-radius: 16px;
  padding: 34px 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,.50);
}
.tfc-title {
  font-family: var(--fh); font-size: 1.7rem; font-weight: 700;
  color: var(--ink); margin-bottom: 5px;
}
.tfc-sub { font-size: 13.5px; color: var(--mid); margin-bottom: 22px; line-height: 1.55; }
.tfc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tfc-row .tfc-field { min-width: 0; }
.tfc-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.tfc-field label { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.tfc-field input,
.tfc-field select,
.tfc-field textarea {
  padding: 10px 13px; border: 1.5px solid var(--bd2);
  border-radius: var(--r); font-size: 14px; color: var(--ink);
  background: #fff; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.tfc-field input:focus,
.tfc-field select:focus,
.tfc-field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-pale); }
.tfc-field textarea { resize: vertical; min-height: 80px; }
.tfc-field select { cursor: pointer; }
.tfc-upload {
  border: 1.5px dashed var(--bd2); border-radius: var(--r);
  background: var(--bg2); transition: border-color .18s, background .18s;
}
.tfc-upload:hover, .tfc-upload.drag-over { border-color: var(--red); background: var(--red-pale); }
.tfc-upload-placeholder {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; color: var(--mid); font-size: 13px; cursor: pointer;
}
.tfc-upload-placeholder svg { flex-shrink: 0; color: var(--faint); }
.tfc-upload-placeholder button { background: none; border: none; color: var(--red); font-weight: 600; cursor: pointer; padding: 0; font-size: 13px; text-decoration: underline; }
.tfc-file-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.tfc-file-item { display: flex; align-items: center; gap: 6px; font-size: 12px; background: #fff; border: 1px solid var(--bd); border-radius: 6px; padding: 5px 10px; }
.tfc-file-item .tfc-remove { background: none; border: none; cursor: pointer; color: var(--faint); font-size: 14px; line-height: 1; padding: 0; }
.tfc-file-item .tfc-remove:hover { color: var(--red); }
.tfc-submit {
  width: 100%; padding: 14px; margin-top: 4px;
  background: var(--red); color: #fff;
  font-size: 15px; font-weight: 700; border-radius: var(--r);
  border: none; cursor: pointer;
  transition: background .18s, transform .18s;
  box-shadow: 0 4px 14px var(--red-glow);
}
.tfc-submit:hover { background: var(--red-h); transform: translateY(-1px); }
.tfc-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.tfc-feedback {
  font-size: 13px; padding: 10px 14px;
  border-radius: var(--r); margin-bottom: 12px;
}
.tfc-feedback.tfc-ok { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.tfc-feedback.tfc-err { background: #FFF0F0; color: #CC0000; border: 1px solid #FFCCCC; }

@media (max-width: 1100px) {
  .taller-inner { grid-template-columns: 1fr; gap: 52px; }
  .taller-form-card { max-width: 580px; }
}
@media (max-width: 520px) {
  .tfc-row { grid-template-columns: 1fr; }
}

/* ─── ASESORAMIENTO ──────────────────────────────────────── */
.advisory-section {
  background: #fff; padding: 88px 0;
  border-top: 1px solid var(--bd);
}
.adv-header {
  text-align: center; margin-bottom: 52px;
}
.adv-header h2 {
  font-family: var(--fh);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink); margin: 10px 0 14px;
}
.adv-header h2 em { color: var(--red); font-style: normal; }
.adv-sub-header {
  font-size: 15px; color: var(--mid); max-width: 480px; margin: 0 auto; line-height: 1.65;
}
.adv-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 18px;
}
.adv-card {
  background: #fff; border-radius: 12px; padding: 36px 24px 28px;
  border: 1.5px solid var(--bd);
  text-decoration: none; display: flex; flex-direction: column;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.adv-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.10);
  transform: translateY(-5px); border-color: var(--red);
}
.adv-icon {
  width: 54px; height: 54px;
  background: var(--red-pale); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red); margin-bottom: 22px; flex-shrink: 0;
}
.adv-icon svg { width: 26px; height: 26px; }
.adv-title {
  font-family: var(--fh); font-size: 1.2rem; font-weight: 700;
  color: var(--ink); margin-bottom: 10px; line-height: 1.2;
}
.adv-sub-text {
  font-size: 13px; color: var(--mid); line-height: 1.65;
  flex: 1; margin-bottom: 22px;
}
.adv-cta {
  font-size: 13px; font-weight: 700; color: var(--red);
  display: inline-flex; align-items: center; gap: 4px;
}
.adv-card:hover .adv-cta { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   POPUP — MANTENIMIENTO GRATUITO
══════════════════════════════════════════════════════════════ */
.mpop {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.mpop[hidden] { display: none; }
.mpop-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,10,.62);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .32s ease;
}
.mpop-box {
  position: relative; z-index: 1;
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.10);
  overflow: hidden;
  transform: translateY(28px) scale(.97);
  opacity: 0;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
}
.mpop--visible .mpop-backdrop { opacity: 1; }
.mpop--visible .mpop-box      { transform: translateY(0) scale(1); opacity: 1; }

.mpop-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.06); color: var(--mid);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.mpop-close:hover { background: rgba(0,0,0,.13); color: var(--ink); }

.mpop-accent {
  background: var(--ink); padding: 18px 28px 16px;
}
.mpop-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red);
}

.mpop-body { padding: 24px 28px 28px; }

.mpop-nums {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.mpop-num {
  background: var(--ink); border-radius: 10px;
  padding: 14px 18px; text-align: center; min-width: 90px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.mpop-n {
  font-family: var(--fh); font-size: 2.6rem; font-weight: 700;
  color: var(--red); line-height: 1; letter-spacing: -.03em;
}
.mpop-u {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.38);
}
.mpop-sep {
  font-family: var(--fh); font-size: 1.6rem; font-weight: 700;
  color: var(--bd2); flex-shrink: 0;
}

.mpop-title {
  font-family: var(--fh);
  font-size: 1.65rem; font-weight: 700;
  color: var(--ink); line-height: 1.1;
  letter-spacing: -.02em; margin-bottom: 10px;
}
.mpop-sub {
  font-size: 13.5px; color: var(--mid); line-height: 1.65; margin-bottom: 22px;
}
.mpop-cta {
  display: block; text-align: center;
  background: var(--red); color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 14px 24px; border-radius: 8px;
  text-decoration: none; margin-bottom: 10px;
  transition: background .15s, transform .15s;
}
.mpop-cta:hover { background: var(--red-h); color: #fff; transform: translateY(-1px); }
.mpop-skip {
  display: block; width: 100%; text-align: center;
  font-size: 12.5px; color: var(--faint);
  padding: 6px; transition: color .15s;
}
.mpop-skip:hover { color: var(--mid); }

/* Marcas en posición top — fondo oscuro, logos en blanco */
.brands-section--top {
  background: #0D0D0D;
  padding: 22px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brands-section--top .brands-kicker {
  color: rgba(255,255,255,.28); font-size: 10px; letter-spacing: .15em; margin-bottom: 18px;
}
.brands-section--top .brand-logo-slot {
  background: #fff;
  border-radius: 8px;
  padding: 7px 16px;
  opacity: .82;
  transition: opacity .25s, transform .25s;
}
.brands-section--top .brand-logo-slot:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.brands-section--top .brand-rail-logo {
  height: 30px; width: auto; max-width: 110px;
  filter: none; mix-blend-mode: normal; opacity: 1;
  display: block;
}
.brands-section--top .brand-rail-name {
  color: #222; font-size: 1rem;
}
.brands-section--top .brand-logo-slot[data-slug="galli"] {
  background: #111;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .pgrid { grid-template-columns: repeat(4,1fr); }
  .qcat:nth-child(-n+4) { grid-column: span 3; }
  .qcat:nth-child(n+5)  { grid-column: span 4; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-shop-inner { gap: 36px; }
  .hs-title { font-size: clamp(2.4rem, 3.5vw, 3.6rem); }
}
@media (max-width: 1024px) {
  .hero-banner-inner { grid-template-columns: 1fr; }
  .hb-left { padding: 48px 20px 40px; }
  .hb-right { min-height: 200px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 32px 20px; }
  .hb-promo-pct { font-size: 3.8rem; }
  .hero-trust-inner { grid-template-columns: repeat(2,1fr); }
  .ht-item:nth-child(2) { border-right: none; }
  .shop-layout { grid-template-columns: 1fr; padding: 24px 0 36px; }
  .shop-sidebar { position: static; max-height: none; overflow-y: visible; scrollbar-width: none; }
  .shop-sidebar::-webkit-scrollbar { display: none; }
  .product-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: repeat(2,1fr); }
  .pe-deco { display: none; }
  .hero-shop-inner { grid-template-columns: 1fr; gap: 28px; }
  .hs-prod-grid { grid-template-columns: repeat(2,1fr); }
  .hs-stats { grid-template-columns: repeat(2,1fr); }
  .hs-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .hs-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07); }
  .hs-stat:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 900px) {
  .pgrid { grid-template-columns: repeat(3,1fr); }
  .qcats-row { grid-template-columns: repeat(3,1fr); gap: 10px; }
  .qcat:nth-child(-n+4),
  .qcat:nth-child(n+5) { grid-column: span 1; }
  .subcats-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
}
@media (max-width: 768px) {
  .hdr-lang-corner { display: none; }
  .header-main {
    grid-template-columns: auto auto;
    grid-template-areas: "logo actions" "search search";
    justify-content: space-between;
  }
  .site-logo     { grid-area: logo; }
  .header-actions { grid-area: actions; }
  .hdr-btn > span:not(.badge):not(.hdr-pts-badge) { display: none; }
  .nav-hamburger > span { display: block !important; }
  .hdr-btn { padding: 8px 9px; gap: 0; }
  .header-search { display: none; grid-area: search; padding-bottom: 10px; }
  .header-search.open { display: flex; }
  .header-search.open form { width: 100%; }
  .site-nav { overflow: hidden; }
  .nav-inner { min-width: 0; }
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .qcats-row { grid-template-columns: repeat(3,1fr); gap: 10px; }
  .qcat:nth-child(-n+4),
  .qcat:nth-child(n+5) { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-trust-inner { grid-template-columns: repeat(2,1fr); }
  .adv-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .pe-inner { flex-direction: column; text-align: center; }
  .pe-body { max-width: 100%; }
}
@media (max-width: 520px) {
  .pgrid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .qcats-row { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .qcat:nth-child(-n+4),
  .qcat:nth-child(n+5) { grid-column: span 1; }
  .subcats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .subcat-info { padding: 6px 6px 8px; }
  .subcat-name { font-size: 11px; }
  .container { padding: 0 12px; }
  .hero-trust-inner { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   PUNTOS — BOTÓN HEADER
══════════════════════════════════════════════════════════════ */
.hdr-pts {
  padding: 4px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
/* Badge coral con icono + número cuando el usuario tiene puntos */
.hdr-pts-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
  border-radius: 20px; padding: 4px 9px 4px 7px;
  line-height: 1; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255,85,0,.32);
  transition: background .15s, box-shadow .15s;
}
.hdr-pts:hover .hdr-pts-badge { background: var(--red-h); box-shadow: 0 4px 14px rgba(255,85,0,.44); }
.hdr-pts:hover { background: rgba(255,255,255,.05); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   MANTENIMIENTO GRATUITO — STRIP HOMEPAGE
══════════════════════════════════════════════════════════════ */
.mant-strip {
  background: #fff;
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
}
.mant-inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 56px; align-items: center; padding: 52px 0;
}
.mant-tag {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); background: var(--red-pale);
  padding: 3px 11px; border-radius: 100px; margin-bottom: 16px;
}
.mant-title {
  font-family: var(--fh);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700; color: var(--ink); line-height: 1.05;
  letter-spacing: -.02em; margin-bottom: 14px;
}
.mant-sub {
  font-size: 14.5px; color: var(--mid); line-height: 1.7;
  max-width: 460px; margin-bottom: 22px;
}
.mant-instruments {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mant-instruments span {
  font-size: 12px; font-weight: 600; color: var(--mid);
  padding: 4px 12px; border: 1px solid var(--bd);
  border-radius: 100px; background: var(--bg2);
}

/* Las dos tarjetas numéricas */
.mant-right { flex-shrink: 0; }
.mant-nums {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.mant-num-card {
  background: var(--ink); border-radius: 10px;
  padding: 18px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 108px;
}
.mant-n {
  font-family: var(--fh); font-size: 3.2rem; font-weight: 700;
  color: var(--red); line-height: 1; letter-spacing: -.04em;
}
.mant-u {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  margin-bottom: 8px;
}
.mant-l {
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--red); padding: 3px 8px; border-radius: 4px;
  white-space: nowrap;
}
.mant-plus {
  font-family: var(--fh); font-size: 1.8rem; font-weight: 700;
  color: var(--bd2); flex-shrink: 0;
}
.mant-note {
  font-size: 11.5px; color: var(--faint); text-align: center;
}

@media (max-width: 900px) {
  .mant-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .mant-nums { justify-content: center; }
  .mant-note { text-align: left; }
}
@media (max-width: 480px) {
  .mant-num-card { min-width: 90px; padding: 14px 14px; }
  .mant-n { font-size: 2.6rem; }
}

/* ─── CONTENIDO DE PÁGINAS (legales, contacto, etc.) ──────── */
.page-content { max-width: 780px; }
.page-content h1,.page-content h2,.page-content h3,.page-content h4 {
  font-family: var(--fh); color: var(--ink); margin: 28px 0 10px; line-height: 1.2;
}
.page-content h1 { font-size: 1.9rem; }
.page-content h2 { font-size: 1.35rem; }
.page-content h3 { font-size: 1.1rem; }
.page-content p  { color: var(--ink2); line-height: 1.78; margin-bottom: 14px; font-size: 15px; }
.page-content ul,.page-content ol { padding-left: 22px; margin-bottom: 14px; }
.page-content li { color: var(--ink2); font-size: 15px; line-height: 1.65; margin-bottom: 6px; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content a { color: var(--red); text-decoration: underline; }
.page-content a:hover { color: var(--red-h); }
.page-content strong { color: var(--ink); }
.page-content em { color: var(--ink2); }
.page-content table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
.page-content td,.page-content th { padding: 10px 14px; border: 1px solid var(--bd); text-align: left; }
.page-content th { background: var(--bg2); font-weight: 700; color: var(--ink); }

/* ─── RESPONSIVE HOJA CONTACTO/LEGALES ───────────────────── */
@media (max-width: 600px) {
  .page-content h1 { font-size: 1.5rem; }
  .page-content h2 { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════
   MI CUENTA
══════════════════════════════════════════════════════════════ */

/* ── Banner saludo (logueado) ────────────────────────────── */
.mc-banner { background: var(--ink); }
.mc-banner__inner { max-width: var(--wrap); margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; }
.mc-banner__greeting { font-size: 1.4rem; color: #fff; }
.mc-banner__greeting strong { font-weight: 700; }
.mc-banner__logout { font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none !important; transition: color .15s; }
.mc-banner__logout:hover { color: #fff !important; }

/* ── Contenedor principal ────────────────────────────────── */
.mc-wrap { max-width: var(--wrap); margin: 0 auto; padding: 44px 28px 80px; min-height: calc(100vh - 180px); }
.mc-wrap--sub { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }

/* ── Sidebar nav (sub-páginas) ───────────────────────────── */
.mc-nav { background: transparent; border: none; border-radius: 0; overflow: visible; }
.mc-nav__item { display: block !important; padding: 9px 0 9px 14px; font-size: 13.5px; color: var(--ink2) !important; text-decoration: none !important; border-bottom: none !important; border-left: 2px solid transparent; transition: color .15s, border-left-color .15s; font-weight: 400; }
.mc-nav__item:last-child { border-bottom: none; }
.mc-nav__item:hover { background: transparent !important; color: var(--ink) !important; border-left-color: var(--bd2); }
.mc-nav__item--active { background: transparent !important; color: var(--red) !important; font-weight: 600; border-left: 2px solid var(--red) !important; padding-left: 14px !important; }

/* ── Área de contenido ───────────────────────────────────── */
.mc-content { min-width: 0; }
.mc-content h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 20px; color: var(--ink); }
.mc-content .woocommerce-Message,
.mc-content .woocommerce-info { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 13px 18px; font-size: 14px; color: #166534; margin-bottom: 20px; list-style: none; }
.mc-content .woocommerce-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 13px 18px; font-size: 14px; color: #991b1b; margin-bottom: 20px; list-style: none; }
.mc-content .woocommerce-form-row { margin-bottom: 16px; }
.mc-content .woocommerce-form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.mc-content .woocommerce-form-row input,
.mc-content .woocommerce-form-row select { width: 100%; border: 1.5px solid #d0d5dd; border-radius: 8px; padding: 11px 14px; font-size: 14px; box-sizing: border-box; }
.mc-content .woocommerce-form-row input:focus { outline: none; border-color: var(--red); }
.mc-content .woocommerce-Button,
.mc-content .woocommerce-button,
.mc-content .button { display: inline-block; background: var(--red); color: #fff !important; border: none; border-radius: 8px; padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none !important; }
.mc-content .woocommerce-Button:hover,
.mc-content .woocommerce-button:hover,
.mc-content .button:hover { background: var(--red-h); }
.mc-content fieldset { border: 1px solid var(--bd); border-radius: 10px; padding: 18px 22px; margin: 22px 0; }
.mc-content fieldset legend { font-weight: 700; font-size: 14px; padding: 0 6px; color: var(--ink); }
.mc-content table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 10px; overflow: hidden; }
.mc-content table th { background: var(--ink); color: #fff; padding: 11px 16px; text-align: left; font-weight: 600; }
.mc-content table td { padding: 12px 16px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.mc-content table tr:last-child td { border-bottom: none; }
.mc-content table tr:hover td { background: var(--bg2); }

/* ── Dashboard: tiles ────────────────────────────────────── */
.mc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.mc-tile { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 28px 24px 24px; text-decoration: none !important; color: var(--ink) !important; box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.07); transition: box-shadow .2s, transform .18s; overflow: hidden; }
.mc-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red), #ff8040); }
.mc-tile:hover { box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.11); transform: translateY(-3px); color: var(--ink) !important; }
.mc-tile__icon { width: 50px; height: 50px; background: var(--red); border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; }
.mc-tile__icon svg { width: 26px; height: 26px; color: #fff; stroke: #fff; }
.mc-tile h3 { font-size: 16px; font-weight: 700; margin: 0 0 5px; color: var(--ink); }
.mc-tile p { font-size: 13px; color: #999; margin: 0; line-height: 1.4; }

/* ── Último pedido ───────────────────────────────────────── */
.mc-lastorder { display: flex; align-items: center; gap: 24px; background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 20px 28px; font-size: 15px; flex-wrap: wrap; }
.mc-lastorder__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #999; }
.mc-lastorder a { color: var(--red) !important; font-weight: 700; text-decoration: none !important; margin-left: auto; }
.mc-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.mc-badge--processing { background: #dbeafe; color: #1d4ed8; }
.mc-badge--completed  { background: #d1fae5; color: #065f46; }
.mc-badge--on-hold    { background: #fef3c7; color: #92400e; }
.mc-badge--pending,.mc-badge--checkout-draft,.mc-badge--draft { background: #f3f4f6; color: #6b7280; }
.mc-badge--cancelled  { background: #fee2e2; color: #991b1b; }
.mc-badge--refunded   { background: #f5f3ff; color: #6d28d9; }
.mc-badge--failed     { background: #fee2e2; color: #7f1d1d; }

/* ── Auth: login / registro ──────────────────────────────── */
.mc-auth { display: grid; grid-template-columns: 1fr 52px 1fr; max-width: 860px; margin: 40px auto 0; align-items: start; }
.mc-auth__panel { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 40px 44px; }
.mc-auth__panel h2 { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0 0 26px; }
.mc-auth__sub { color: #666; font-size: 14px; line-height: 1.6; margin: 0 0 24px; }
.mc-auth__divider { display: flex; align-items: center; justify-content: center; padding-top: 100px; }
.mc-auth__divider span { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; flex-shrink: 0; }
.mc-form { display: flex; flex-direction: column; gap: 18px; }
.mc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.mc-form label input { font-weight: 400; border: 1.5px solid #d0d5dd; border-radius: 9px; padding: 12px 14px; font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.mc-form label input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,85,0,.1); }
.mc-form__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.mc-form__check { flex-direction: row !important; align-items: center !important; gap: 7px !important; font-weight: 400 !important; color: #555 !important; cursor: pointer; }
.mc-form__link { color: var(--red) !important; text-decoration: none !important; }
.mc-form__privacy { font-size: 12px; color: #aaa; line-height: 1.5; margin: 0; }
.mc-form__privacy a { color: var(--red) !important; }
.mc-btn { display: block; width: 100%; text-align: center; border: none; border-radius: 9px; padding: 14px 20px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none !important; box-sizing: border-box; transition: background .15s; }
.mc-btn--primary { background: var(--red); color: #fff !important; }
.mc-btn--primary:hover { background: var(--red-h); color: #fff !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) { .mc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .mc-wrap--sub { grid-template-columns: 1fr; }
  .mc-nav { display: flex; flex-wrap: wrap; }
  .mc-nav__item { flex: 1 0 auto; border-right: 1px solid var(--bd); border-bottom: none !important; padding: 10px 12px; text-align: center; }
  .mc-auth { grid-template-columns: 1fr; max-width: 440px; }
  .mc-auth__panel { padding: 28px 24px; }
  .mc-auth__divider { padding: 8px 0; }
  .mc-tiles { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER MENU — MOBILE
══════════════════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  padding: 8px 10px; margin-left: 2px;
  color: rgba(255,255,255,.80);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r);
  transition: background var(--t);
}
.nav-hamburger:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .site-nav { overflow: hidden; }
  .nav-inner {
    flex-direction: column; min-width: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .32s ease;
    padding: 0;
  }
  .site-nav.open .nav-inner { max-height: 800px; }
  .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav-link { padding: 13px 20px; font-size: 14px; }
  .nav-dropdown { position: static !important; opacity: 1 !important; visibility: visible !important;
    transform: none !important; box-shadow: none !important; border: none !important;
    background: rgba(255,255,255,.04) !important; border-radius: 0 !important;
    display: none; }
  .nav-item.open .nav-dropdown { display: block; }
  .nav-dropdown a { padding: 10px 20px 10px 36px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; color: rgba(255,255,255,.65) !important; }
  .nav-taller-btn { margin: 10px 16px 14px; align-self: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PRODUCT — RESPONSIVE (crítico: sin esto mobile roto)
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sprod-layout { grid-template-columns: 1fr; gap: 24px; }
  .sprod-gallery { position: static; flex-direction: column; gap: 10px; }
  .sprod-thumbs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .sprod-thumb  { width: 54px; height: 54px; flex-shrink: 0; }
  .sprod-main   { max-height: 400px; }
}
@media (max-width: 600px) {
  .sprod-wrap { padding: 10px 12px 80px; }
  .sprod-title { font-size: 1.15rem; line-height: 1.35; }
  .sprod-price-current { font-size: 1.75rem; }
  .sprod-btn-cart, .sprod-btn-buy { padding: 14px 12px; font-size: 14px; }
  .tab-btn { padding: 9px 12px; font-size: 13px; }
}

/* Sticky buy bar en móvil */
.sprod-sticky-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: #fff; border-top: 1px solid var(--bd);
  padding: 10px 16px 12px;
  box-shadow: 0 -6px 20px rgba(0,0,0,.14);
  align-items: center; gap: 10px;
}
.sprod-sticky-bar__price {
  font-family: var(--fh); font-size: 1.4rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
}
.sprod-sticky-bar__btn {
  flex: 1; padding: 13px 16px; background: var(--red); color: #fff;
  border: none; border-radius: var(--r); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sprod-sticky-bar__btn:hover { background: var(--red-h); }
@media (max-width: 900px) {
  .sprod-sticky-bar { display: none; } /* JS la muestra cuando buy box sale de viewport */
}

/* ═══════════════════════════════════════════════════════════
   SHOP SIDEBAR — TOGGLE MOBILE
══════════════════════════════════════════════════════════════ */
.shop-filter-toggle {
  display: none;
  align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 16px; background: var(--bg);
  border: 1px solid var(--bd); border-radius: var(--r);
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  width: 100%; transition: background var(--t);
}
.shop-filter-toggle:hover { background: var(--bg2); }
.shop-filter-toggle svg { color: var(--mid); flex-shrink: 0; }
.shop-filter-toggle .filter-count {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px;
}
@media (max-width: 1024px) {
  .shop-filter-toggle { display: flex; }
  .shop-sidebar {
    display: none; border: 1px solid var(--bd); border-radius: var(--r);
    padding: 16px; margin-bottom: 16px; background: var(--bg);
    position: static !important; max-height: none !important; overflow: visible !important;
  }
  .shop-sidebar.open { display: block; }
  .shop-layout { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   DESCRIPCIÓN CORTA — SINGLE PRODUCT
══════════════════════════════════════════════════════════════ */
.sprod-short-desc {
  font-size: 14.5px; color: var(--mid); line-height: 1.7;
  margin-bottom: 2px;
}
.sprod-short-desc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sprod-short-desc li { display: flex; gap: 7px; align-items: baseline; }
.sprod-short-desc li::before {
  content: '›'; color: var(--red); font-weight: 700; flex-shrink: 0;
}
.sprod-short-desc p { margin: 0; }
.sprod-short-desc a { color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   @keyframes spin — spinner para AJAX (antes en JS inline)
══════════════════════════════════════════════════════════════ */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   TRUST BAR — MOBILE 2×2
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .trust-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 6px; }
  .trust-item { gap: 8px; }
  .trust-item .trust-icon svg { width: 18px; height: 18px; }
  .trust-text strong { font-size: 12px; }
  .trust-text span { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   PGRID — TOUCH TARGETS MÓVIL
══════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .pcard-info { padding: 10px 10px 12px; }
  .pnow { font-size: 20px; }
  .padd { padding: 10px 8px; font-size: 12px; }
  .pcard-name { font-size: 12.5px; }
}
/* ═══════════════════════════════════════════════════════════
   CSS ADDITIONS - El Clavijero Theme - July 17-26 2026
   All CSS that was added/modified after the initial deployment
══════════════════════════════════════════════════════════════ */

/* ─── TP — PRODUCTOS TOP (added ~July 19, line 3115) ────────── */
/* ═══════════════════════════════════════════════════════════
   TP — PRODUCTOS TOP
══════════════════════════════════════════════════════════════ */
.tp-section {
  background: #fff;
  padding: 56px 0 60px;
}
.tp-title {
  text-align: center;
  font-family: var(--fh);
  font-size: 1.75rem;
  font-weight: 600;
  color: #111;
  margin: 0 0 30px;
  letter-spacing: -.01em;
}
.tp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  overflow: hidden;
}
.tp-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  text-decoration: none;
  color: #111;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  transition: background .18s;
  gap: 12px;
}
.tp-card:hover { background: #fafafa; }
.tp-card--lc { border-right: 0; }
.tp-card--lr { border-bottom: 0; }
.tp-info { flex: 1; min-width: 0; }
.tp-label {
  font-size: .78rem;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
  margin-bottom: 9px;
}
.tp-label strong {
  color: #111;
  font-weight: 800;
  font-size: .88rem;
}
.tp-pill {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: .7rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.tp-thumb {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}
.tp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .tp-grid { grid-template-columns: 1fr; border-radius: 8px; }
  .tp-card { border-right: 0; border-bottom: 1px solid #e4e4e4; }
  .tp-card--lr { border-bottom: 1px solid #e4e4e4; }
  .tp-card:last-child { border-bottom: 0; }
}

/* ─── BRANDS-SECTION TOP: White background (added ~July 19, line 3379) ── */
.brands-section--top {
  background: #fff;
  padding: 36px 0 40px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.brands-section--top .brands-kicker {
  color: #bbb; font-size: 10px; letter-spacing: .18em; margin-bottom: 24px;
}
.brands-section--top .brand-logo-slot {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 12px 22px;
  min-width: 120px;
  min-height: 58px;
  justify-content: center;
  opacity: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .22s, transform .22s;
}
.brands-section--top .brand-logo-slot:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
  opacity: 1;
}
.brands-section--top .brand-rail-logo {
  height: 32px; width: auto; max-width: 120px;
  filter: none; mix-blend-mode: normal; opacity: 1;
  display: block;
}
.brands-section--top .brand-rail-name {
  color: #1a1a1a; font-size: .95rem; font-weight: 700;
}
/* Logos con elementos blancos — card oscuro */
.brands-section--top .brand-logo-slot[data-slug="galli"],
.brands-section--top .brand-logo-slot[data-slug="rotosound"] {
  background: #1a1a1a;
  border-color: #1a1a1a;
}
.brands-section--top .brand-logo-slot[data-slug="galli"] .brand-rail-name,
.brands-section--top .brand-logo-slot[data-slug="rotosound"] .brand-rail-name {
  color: #fff;
}

/* ─── BRANDS RAIL: drag-scroll (updated ~July 24, line 6487→6847) ─── */
.brands-rail-wrap {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.brands-dragging { cursor: grabbing !important; user-select: none; }

/* ─── LIVE SEARCH DROPDOWN (added ~July 19, line 3582/3589) ────── */
.header-search { position: relative; }

.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  z-index: 9999;
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}

.search-dropdown--open { display: block; }

.sd-correction {
  padding: 8px 16px;
  font-size: 12px;
  color: #888;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}
.sd-correction strong { color: #E8501A; }

.sd-chips {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  background: #fafafa;
}
.sd-chip {
  font-size: 11px;
  padding: 3px 10px;
  background: #eee;
  border-radius: 20px;
  color: #555;
  cursor: default;
}

.sd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f5f5f5;
  transition: background .12s;
}
.sd-item:hover,
.sd-item--active { background: #fff8f6; }

.sd-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-thumb-ph { width: 28px; height: 28px; background: #ddd; border-radius: 4px; }

.sd-info { flex: 1; min-width: 0; }
.sd-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #23262D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.sd-cat {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.sd-price {
  font-size: 14px;
  font-weight: 600;
  color: #E8501A;
  flex-shrink: 0;
  white-space: nowrap;
}

.sd-empty {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #bbb;
}

.sd-footer {
  display: block;
  padding: 11px 16px;
  text-align: center;
  font-size: 13px;
  color: #E8501A;
  text-decoration: none;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  font-weight: 500;
}
.sd-footer:hover { background: #fff3ef; text-decoration: none; }
.sd-footer strong { font-weight: 700; }

.sd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
}
.sd-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E8501A;
  animation: sd-bounce .8s ease-in-out infinite;
}
.sd-loading span:nth-child(2) { animation-delay: .15s; }
.sd-loading span:nth-child(3) { animation-delay: .30s; }
@keyframes sd-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1;   }
}

/* ─── QCAT LABEL: count + Explorar CTA (updated July 24, line 6599) ── */
.qcat-label {
  padding: 14px 20px 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
}
.qcat-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.qcat-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
  transition: transform .2s;
}
.qcat:hover .qcat-cta { transform: translateX(3px); }

/* ─── QCAT COVER IMAGE support ─────────────────────────────── */
.qcat-fi--cover {
  object-fit: cover !important;
  mix-blend-mode: normal !important;
  padding: 0 !important;
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.qcat-fan--has-cover {
  padding: 0 !important;
  background: transparent !important;
}

/* ─── BADGE SALE: pill-shaped with % (updated ~July 24, line 6380) ── */
.badge-sale { background: var(--red); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; letter-spacing: -.3px; }

/* ─── PROMO BANNER MOSAIC (added July 26, lines 6841/6858/6879) ── */
/* ─── PROMO BANNER MOSAIC ────────────────────────────────── */
.pe-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px 28px;
  align-items: center;
  justify-items: center;
  flex-shrink: 0;
  width: 340px;
  padding: 20px 24px;
}
.pe-mosaic-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pe-mosaic-cell img {
  max-width: 100px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity .3s;
}
.promo-editorial:hover .pe-mosaic-cell img { opacity: 1; }
.pe-mosaic-pct { display: none; }
@media (max-width: 640px) {
  .pe-mosaic { display: none; }
}/* ============================================================
   MISSING CSS — Recovered from JSONL session
   5eea2360-efa3-42dc-96ba-1a329cd28c42.jsonl
   Extracted: July 27, 2026

   STATUS of each block:
   - DEFINITELY MISSING: not found in css_additions_july26.css
     and confirmed missing at line 8583 of JSONL
   - CHECK: may already be in style.css, verify before adding
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   BLOCK 1 — HERO BANNER SLIDER (hs-bnr-*)
   STATUS: DEFINITELY MISSING from css_additions_july26.css
   Source: JSONL line 2807, Python SSH patch script
   Added to server on July 19 via: if 'hs-bnr-wrap' not in css → append
   Confirmed missing at JSONL line 8583: "Falta el CSS del banner slider"
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   HERO RIGHT BANNER (hs-bnr)
══════════════════════════════════════════════════════════════ */
.hs-bnr-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  min-height: 300px;
}
.hs-bnr-viewport { overflow: hidden; height: 100%; }
.hs-bnr-track {
  display: flex; height: 100%;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hs-bnr-slide {
  min-width: 100%; height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #1a1c21;
  display: flex; align-items: flex-end;
}
.hs-bnr-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,.95) 0%,
    rgba(10,10,10,.60) 35%,
    rgba(10,10,10,.15) 65%,
    rgba(10,10,10,.02) 100%
  );
}
.hs-bnr-body {
  position: relative; z-index: 1;
  padding: 20px 22px 22px;
  width: 100%;
}
.hs-bnr-brand {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); margin-right: 8px;
}
.hs-bnr-oferta {
  display: inline-block;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  vertical-align: middle;
}
.hs-bnr-name {
  font-family: var(--fh);
  font-size: 1.45rem; font-weight: 900;
  color: #fff; line-height: 1.12;
  margin: 6px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-bnr-price {
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,.88);
  margin-bottom: 14px;
}
.hs-bnr-price .woocommerce-Price-amount,
.hs-bnr-price bdi { color: inherit; font-size: inherit; font-weight: inherit; }
.hs-bnr-price ins { text-decoration: none; }
.hs-bnr-price del { color: rgba(255,255,255,.38); font-size: 13px; font-weight: 400; display: block; }
.hs-bnr-cta {
  display: inline-block;
  background: var(--red); color: #fff;
  font-weight: 800; font-size: 13px;
  padding: 10px 24px; border-radius: var(--r);
  text-decoration: none; letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .15s, transform .15s;
}
.hs-bnr-cta:hover { background: var(--red-h); transform: translateY(-2px); color: #fff; }

/* Navigation arrows — prev/next */
.hs-bnr-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: none;
  color: #fff; font-size: 22px; cursor: pointer;
  z-index: 10; display: flex; align-items: center; justify-content: center;
  transition: background .15s; backdrop-filter: blur(4px); line-height: 1;
}
.hs-bnr-prev { left: 10px; }
.hs-bnr-next { right: 10px; }
.hs-bnr-arr:hover { background: rgba(255,255,255,.30); }

/* Pagination dots container */
.hs-bnr-dots {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%); gap: 5px;
  background: none; padding: 0;
  display: flex;
}
/* NOTE: .hs-dot and .hs-dot--active already exist in style.css (original slider):
   .hs-dot { width:7px; height:7px; border-radius:50%; background:var(--bd2); border:none; padding:0; cursor:pointer; transition:.25s; }
   .hs-dot--active { background:var(--red); transform:scale(1.4); } */

@media (max-width: 900px) {
  .hs-bnr-wrap { min-height: 220px; }
  .hs-bnr-name { font-size: 1.2rem; }
}

/* Static supplier banner slides (no dark overlay, raw image) */
.hs-bnr-slide--static {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hs-bnr-static-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 16px; box-sizing: border-box;
  line-height: 0;
}
.hs-bnr-static-link img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}


/* ════════════════════════════════════════════════════════════
   BLOCK 2 — HEADER SEARCH BAR FORM CSS
   STATUS: CHECK — may already be in style.css (lines ~78-97)
   Source: JSONL line 2896, confirmed in server grep at line 3601
   The .header-main grid controls width: "auto 1fr auto auto"
   .header-search = column 2 (1fr) — fills available space
   If search is too wide, the problem is that .header-main grid
   is missing or has wrong column definitions.
   ════════════════════════════════════════════════════════════ */

/* header CSS already defined above */


/* ════════════════════════════════════════════════════════════
   BLOCK 3 — HERO SECTION GRID LAYOUT
   STATUS: CHECK — style.css line 254 has .hero-shop-inner
   Source: JSONL line 3098 (server snapshot), confirmed 2fr 3fr
   Key: align-items should be "stretch" (not "center") so
   .hs-right/.hs-bnr-wrap fills full height for banner slider
   ════════════════════════════════════════════════════════════ */

.hero-shop-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: stretch;
  padding: 40px 0 36px;
  position: relative; z-index: 1;
}

/* .hs-right needs height:100% so banner fills it */
.hs-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width: 1100px) {
  .hero-shop-inner { gap: 36px; }
}
@media (max-width: 900px) {
  .hero-shop-inner { grid-template-columns: 1fr; gap: 28px; }
}


/* ════════════════════════════════════════════════════════════
   BLOCK 4 — SEARCH DROPDOWN (autocomplete)
   STATUS: PARTIALLY in css_additions_july26.css (lines 143-281)
   Included here for completeness. Check before adding.
   Source: JSONL line 3582
   ════════════════════════════════════════════════════════════ */

/* .header-search { position: relative; } — already in css_additions_july26.css line 143 */

.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  z-index: 9999;
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}
.search-dropdown--open { display: block; }

.sd-correction {
  padding: 8px 16px;
  font-size: 12px;
  color: #888;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}
.sd-correction strong { color: #E8501A; }

.sd-chips {
  display: flex; gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  background: #fafafa;
}
.sd-chip {
  font-size: 11px; padding: 3px 10px;
  background: #eee; border-radius: 20px;
  color: #555; cursor: default;
}

.sd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid #f5f5f5;
  transition: background .12s;
}
.sd-item:hover,
.sd-item--active { background: #fff8f6; }

.sd-thumb {
  width: 48px; height: 48px;
  border-radius: 8px; overflow: hidden;
  flex-shrink: 0; background: #f4f4f4;
  display: flex; align-items: center; justify-content: center;
}
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-thumb-ph { width: 28px; height: 28px; background: #ddd; border-radius: 4px; }

.sd-info { flex: 1; min-width: 0; }
.sd-name {
  display: block; font-size: 14px; font-weight: 500;
  color: #23262D; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.sd-cat {
  display: block; font-size: 11px; color: #aaa;
  margin-top: 2px; text-transform: uppercase; letter-spacing: .3px;
}

.sd-price {
  font-size: 14px; font-weight: 600;
  color: #E8501A; flex-shrink: 0; white-space: nowrap;
}

.sd-empty {
  padding: 20px; text-align: center;
  font-size: 14px; color: #bbb;
}

.sd-footer {
  display: block; padding: 11px 16px;
  text-align: center; font-size: 13px;
  color: #E8501A; text-decoration: none;
  background: #fafafa;
  border-top: 1px solid #f0f0f0; font-weight: 500;
}
.sd-footer:hover { background: #fff3ef; text-decoration: none; }
.sd-footer strong { font-weight: 700; }

.sd-loading {
  display: flex; align-items: center;
  justify-content: center; gap: 6px; padding: 24px 16px;
}
.sd-loading span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E8501A;
  animation: sd-bounce .8s ease-in-out infinite;
}
.sd-loading span:nth-child(2) { animation-delay: .15s; }
.sd-loading span:nth-child(3) { animation-delay: .30s; }
@keyframes sd-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1;   }
}


/* ─── FIX: search-input-wrap necesita flex:1 para que el botón quede al final ─── */
.search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.sd-ghost {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: rgba(255,255,255,.25);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.sd-ghost-space { opacity: 0; }
.sd-ghost-tail  { color: rgba(255,255,255,.30); }

/* ─── BRANDS RAIL: fixes Jul 2026 ─────────────────────────────────── */
/* CSS animation desactivada — el JS maneja el scroll vía transform   */
.brands-section--top .brands-rail { animation: none; }

/* Cards oscuras para logos blancos (Admira y Pirastro) */
.brands-section--top .brand-logo-slot[data-slug="admira"],
.brands-section--top .brand-logo-slot[data-slug="pirastro"] {
  background: #1a1a1a;
  border-color: #1a1a1a;
}
.brands-section--top .brand-logo-slot[data-slug="admira"] .brand-rail-name,
.brands-section--top .brand-logo-slot[data-slug="pirastro"] .brand-rail-name {
  color: #fff;
}

/* Pirastro logo más grande */
.brands-section--top .brand-logo-slot[data-slug="pirastro"] .brand-rail-logo {
  height: 46px;
  max-width: 160px;
}

/* Touch horizontal fluido en móvil */
.brands-rail-wrap {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Pirastro: quitar card negra */
.brands-section--top .brand-logo-slot[data-slug="pirastro"] {
  background: #fff;
  border-color: #e8e8e8;
}
.brands-section--top .brand-logo-slot[data-slug="pirastro"] .brand-rail-name {
  color: #1a1a1a;
}

/* Pirastro: logo más grande */
.brands-section--top .brand-logo-slot[data-slug="pirastro"] .brand-rail-logo {
  height: 62px;
  max-width: 180px;
}

/* ─── PROMO-EDITORIAL: imagen completa ─── */
.promo-editorial { padding: 0; background: none; border: none; }
.pe-img-link { display: block; line-height: 0; }
.pe-full-img { width: 100%; height: auto; display: block; }

/* ─── PROMO-EDITORIAL: difuminado bordes top/bottom ─── */
.promo-editorial {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 7%,
    black 93%,
    transparent 100%
  );
}

/* Quitar difuminado promo-editorial */
.promo-editorial {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Promo-editorial estilo Amazon: contenido, border-radius, sombra */
.promo-editorial {
  padding: 20px 0 24px;
  background: var(--bg2);
}
.pe-img-link {
  display: block;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  line-height: 0;
}
.pe-full-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ─── Botón overlay animado sobre imagen Alhambra ─── */
.pe-img-link {
  position: relative;
  display: block;
}
.pe-overlay-btn {
  position: absolute;
  left: 13.5%;
  top: 79%;
  transform: translateY(0);
  background: #FF5500;
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(255,85,0,.40);
  white-space: nowrap;
  letter-spacing: .01em;
  animation: pe-btn-float 2.4s ease-in-out infinite;
}
@keyframes pe-btn-float {
  0%, 100% { transform: translateY(0px);  box-shadow: 0 4px 18px rgba(255,85,0,.40); }
  50%       { transform: translateY(-7px); box-shadow: 0 10px 28px rgba(255,85,0,.30); }
}
.pe-img-link:hover .pe-overlay-btn {
  animation-play-state: paused;
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(255,85,0,.55);
  transition: box-shadow .2s, transform .2s;
}

/* Ajuste posición botón overlay — tapar botón de la imagen */
.pe-overlay-btn {
  top: 73%;
  left: 13%;
}

/* ─── Desactivar botón overlay (eliminado del HTML) ────────────── */
.pe-overlay-btn { display: none; }

/* ─── Banner editorial — hover zoom ────────────────────────────── */
.pe-img-link { overflow: hidden; border-radius: 10px; }
.pe-full-img {
  transition: transform .5s cubic-bezier(.25,.46,.45,.94),
              filter .5s ease;
}
.pe-img-link:hover .pe-full-img {
  transform: scale(1.025);
  filter: brightness(1.06);
}

/* ─── Cat trust strip ───────────────────────────────────────────── */
.cat-trust-strip {
  background: #161616;
  border-bottom: 1px solid #2a2a2a;
  padding: 18px 0;
}
.cat-trust-strip .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.cts-pillar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 36px;
  flex: 1;
  max-width: 300px;
}
.cts-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: rgba(255,85,0,.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5500;
}
.cts-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cts-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.cts-text span {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}
.cts-divider {
  width: 1px;
  height: 36px;
  background: #2a2a2a;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cat-trust-strip .container { flex-direction: column; gap: 16px; }
  .cts-pillar { padding: 0; max-width: none; }
  .cts-divider { width: 100%; height: 1px; }
}

/* Banner editorial — ancho completo sin márgenes laterales */
.promo-editorial { padding-left: 0; padding-right: 0; }
.pe-img-link { max-width: 100%; padding: 0; margin: 0; border-radius: 0; }
.pe-full-img { border-radius: 0; box-shadow: none; }

.promo-editorial { padding-top: 0 !important; padding-bottom: 0 !important; }

.tp-section { padding-top: 56px !important; }

/* ─── My Account — notices WooCommerce ─────────────────────────── */
.woocommerce-notices-wrapper { margin-bottom: 0; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  font-size: 14px;
  list-style: none !important;
  border-top: none !important;
  margin: 0 0 20px !important;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-message,
.woocommerce-message li { background: #ecfdf5 !important; color: #065f46 !important; border-left: 4px solid #10b981 !important; }
.woocommerce-info,
.woocommerce-info li    { background: #fffbeb !important; color: #92400e !important; border-left: 4px solid #f59e0b !important; }
.woocommerce-error,
.woocommerce-error li   { background: #fef2f2 !important; color: #991b1b !important; border-left: 4px solid #ef4444 !important; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li { list-style: none !important; padding: 0; margin: 0; }
.mc-wrap .woocommerce-notices-wrapper { padding: 24px 0 0; }


/* ─── Sidebar redesign ──────────────────────────────────────── */

/* Secciones: más aire, sin borde tan marcado */
.filter-section {
  padding: 20px 0 !important;
  border-bottom: 1px solid #EBEBEB !important;
}
.filter-section:last-child { border-bottom: none !important; }

/* Encabezados de filtro: etiqueta discreta tipo label */
.filter-heading {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: #aaa !important;
  margin: 0 0 10px !important;
}

/* "Todos los instrumentos" — primer ítem como nav-header */
.fcat-item:first-child .fcat-link {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #aaa !important;
  padding-bottom: 10px !important;
}
.fcat-item:first-child .fcat-link:hover { color: var(--red) !important; }

/* Links de categoría — oscuros, sin el teal de Amazon */
.fcat-link {
  color: var(--ink2) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 5px 0 !important;
  text-decoration: none !important;
}
.fcat-link:hover { color: var(--red) !important; text-decoration: none !important; }
.fcat-item.fcat-active > .fcat-link {
  color: var(--ink) !important;
  font-weight: 600 !important;
  pointer-events: none !important;
}

/* Subcategorías */
.fsubcat-link {
  color: var(--ink2) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
.fsubcat-link:hover { color: var(--red) !important; text-decoration: none !important; }
.fsubcat-link.is-active { color: var(--ink) !important; font-weight: 600 !important; }

/* Contadores: muy sutiles */
.fcat-count {
  color: #ccc !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

/* Precio: mismo estilo que categorías */
.fprice-link {
  color: var(--ink2) !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  padding: 5px 0 !important;
}
.fprice-link:hover { color: var(--red) !important; text-decoration: none !important; }
.fprice-link.is-active {
  color: var(--red) !important;
  font-weight: 600 !important;
}

/* Marcas */
.fbrand-link {
  color: var(--ink2) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  gap: 8px !important;
}
.fbrand-link:hover { color: var(--red) !important; }
.fbrand-link.is-active { color: var(--ink) !important; font-weight: 600 !important; }
.fbrand-check {
  width: 14px !important; height: 14px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 3px !important;
  background: #fff !important;
}
.fbrand-link.is-active .fbrand-check {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

/* === TOP GUITARRAS PAGES (.tg-*) === */
.tg-page { background: #f5f5f5; min-height: 60vh; }
.tg-hero { background: #23262D; color: #fff; padding: 48px 0 40px; margin-bottom: 32px; }
.tg-kicker { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #E8501A; margin-bottom: 10px; }
.tg-titulo { font-size: clamp(24px,4vw,42px); font-weight: 700; margin: 0 0 10px; }
.tg-sub { font-size: 15px; color: rgba(255,255,255,0.7); margin: 0; }
.tg-body { padding-bottom: 60px; }
.tg-count { font-size: 13px; color: #666; margin-bottom: 20px; }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.tg-card { background: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: box-shadow .2s, transform .2s; }
.tg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.14); transform: translateY(-2px); }
.tg-rank { position: absolute; top: 10px; left: 10px; background: #23262D; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px; z-index: 2; }
.tg-rank:first-child ~ .tg-img { } 
/* Gold/Silver/Bronze for top 3 */
.tg-card:has(.tg-rank) .tg-rank { background: #23262D; }
.tg-badge { position: absolute; top: 10px; right: 10px; background: #E8501A; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px; z-index: 2; }
.tg-img { aspect-ratio: 1/1; overflow: hidden; background: #fafafa; }
.tg-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.tg-info { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tg-name { font-size: 13px; line-height: 1.4; margin: 0; color: #23262D; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-price { margin: auto 0 0; }
.tg-now { font-size: 16px; font-weight: 700; color: #E8501A; display: block; }
.tg-was { font-size: 12px; color: #999; display: block; }
@media (max-width: 600px) { .tg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .tg-titulo { font-size: 22px; } }

/* ── Top section WIP placeholder ── */
.tp-section--wip { padding: 40px 0; }
.tp-wip { background: #f8f8f8; border-radius: 16px; padding: 48px 32px; text-align: center; border: 2px dashed #e0e0e0; }
.tp-wip-icon { width: 56px; height: 56px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 1px solid #e0e0e0; color: #aaa; animation: tp-spin 3s linear infinite; }
@keyframes tp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tp-wip-title { font-size: 1.25rem; font-weight: 700; color: #23262D; margin: 0 0 10px; }
.tp-wip-sub { font-size: 14px; color: #888; margin: 0; max-width: 380px; margin: 0 auto; }

/* ── Top cards WIP badge ── */
.tp-card--wip { position: relative; cursor: pointer; }
.tp-wip-badge { position: absolute; top: 10px; right: 10px; background: rgba(35,38,45,.75); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.tp-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#f0f0f0 0%,#e4e4e4 100%); }

/* === EMERGENCY HERO FIX === */
.hero-shop-inner { display:grid!important; grid-template-columns:2fr 3fr!important; gap:48px!important; align-items:stretch!important; padding:40px 0 36px!important; }
.hs-right { display:flex!important; flex-direction:column!important; height:100%!important; min-height:320px; }
.hs-bnr-wrap { height:100%!important; min-height:300px!important; position:relative!important; border-radius:12px!important; overflow:hidden!important; }
.hs-bnr-viewport { height:100%!important; overflow:hidden!important; }
.hs-bnr-track { display:flex!important; height:100%!important; transition:transform .55s cubic-bezier(.4,0,.2,1)!important; }
.hs-bnr-slide { min-width:100%!important; height:100%!important; position:relative!important; }