/* ==========================================================================
   Temas visuales (Diseño → Tema visual) · rediseño 2026-10-15.
   Se carga SOLO con un tema elegido: <body class="con-tema tema-<slug>">.
   Sin tema («Colores propios») la tienda no recibe esta hoja ni sus fuentes
   y queda exactamente igual.

   1. Fuentes incluidas en la tienda (se descargan solo si el tema las usa).
   2. Base común: una vidriera profesional. Lienzo neutro para que manden las
      fotos, tarjeta con la foto sobre blanco, nombre completo y legible y el
      precio como único dato fuerte. Cada tema la ajusta con variables --t-*.
   3. Un bloque por tema: sus variables y su firma propia.

   Los colores salen siempre de la paleta del comercio (--pri, --sec,
   --card...): funciona con las tres paletas de cada tema y con colores
   retocados a mano. Los encabezados de color usan los pares calculados
   (--action/--on-action, --sec/--on-sec). No cambia clases ni data-* que
   usa public/assets/js/app.js.

   Peso de los selectores: la tarjeta, el encabezado y el banner van con
   body.con-tema.catalogo-vitrina para ganarle a la presentación compacta
   (.experiencia-compacta.catalogo-vitrina ..., tienda-actual.css).
   ========================================================================== */

/* ---------- 1. Fuentes (licencia OFL: assets/fonts/OFL-*.txt) ---------- */
@font-face{
  font-family:"Tauros Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{font-family:"Tauros Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/figtree-700.ttf) format("truetype")}
@font-face{font-family:"Tauros Figtree";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/figtree-800.ttf) format("truetype")}

/* ---------- Vista previa de un administrador ---------- */
.tema-prueba{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:9px 16px;background:#fff4c2;color:#3a2f00;border-bottom:1px solid #e6d27a;font-size:13px;line-height:1.4;text-align:center}
.tema-prueba a{color:inherit;font-weight:700}

/* ==========================================================================
   2. Base común
   ========================================================================== */
body.con-tema{
  --t-ui:"Tauros Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --t-head:var(--t-ui);
  --t-head-peso:700;
  --t-head-track:-.022em;
  --t-marca-peso:750;
  --t-marca-track:-.03em;
  --t-marca-caso:none;
  /* Las reglas de siempre leen estas variables: con tema, todo el frente
     (catálogo, ficha, carrito, compra y Mi cuenta) usa la letra del tema. */
  --sans:var(--t-ui);
  --serif:var(--t-head);
  --titulos:var(--t-head);
  --titulos-peso:var(--t-head-peso);
  --titulos-tracking:var(--t-head-track);

  --t-lienzo:var(--paper);
  --t-enc-bg:var(--card);
  --t-enc-ink:var(--ink);
  --t-enc-suave:var(--ink-soft);
  --t-enc-linea:var(--line-soft);
  --t-enc-hover:rgba(16,24,40,.06);
  --t-enc-ok:var(--ok);
  --t-enc-err:var(--err);
  --t-sub-bg:var(--card);
  --t-buscar-bg:var(--paper-2);
  --t-buscar-borde:transparent;

  --t-card-bg:var(--card);
  --t-card-borde:var(--line-soft);
  --t-card-borde-hover:var(--line);
  --t-card-radio:var(--r-card);
  --t-card-sombra:none;
  --t-card-sombra-hover:0 14px 30px -20px rgba(16,24,40,.42);
  --t-media-bg:#fff;
  --t-media-ajuste:contain;
  --t-media-aire:6%;
  --t-sinfoto-bg:var(--paper-2);
  --t-foot-linea:var(--line-soft);
  --t-precio:var(--ink);
  --t-precio-peso:650;
  --t-precio-tam:19px;
  --t-add-bg:var(--paper-2);
  --t-add-ink:var(--accent-text);
  --t-btn-radio:var(--r-ctrl);
  --t-pill:999px;

  --t-pie-bg:var(--card);
  --t-pie-ink:var(--ink);
  --t-pie-suave:var(--ink-soft);
  --t-pie-linea:var(--line-soft);
  --t-pie-ok:var(--ok);
  --t-pie-err:var(--err);
  --t-dock-bg:var(--card);
  --t-dock-ink:var(--ink-soft);
  --t-dock-linea:var(--line-soft);

  --t-gutter:clamp(16px,3vw,40px);
  --t-lateral:max(var(--t-gutter),calc((100% - var(--max)) / 2 + var(--t-gutter)));
  font-family:var(--t-ui);
  text-rendering:optimizeLegibility;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.con-tema{
    --t-buscar-bg:color-mix(in srgb,var(--ink) 5%,var(--card));
    --t-sinfoto-bg:color-mix(in srgb,var(--ink) 3%,var(--card));
    --t-add-bg:color-mix(in srgb,var(--pri) 11%,var(--card));
  }
}
/* «Esquinas: rectas» también endereza los botones redondos de un tema. */
body.con-tema.bordes-rectos{--t-pill:var(--r-ctrl)}
/* «Tipo de letra» se respeta dentro de cada tema: los textos van con Inter y
   los títulos con serif (clásica), Inter (moderna) o Figtree (amable). */
body.con-tema.tipografia-clasica{--t-head:"Iowan Old Style","Palatino Linotype","URW Palladio L",Palatino,"Book Antiqua",Georgia,serif;--t-head-peso:600;--t-head-track:-.01em;--t-marca-peso:650;--t-marca-track:-.012em}
body.con-tema.tipografia-amable{--t-head:"Tauros Figtree",var(--t-ui);--t-head-peso:700;--t-head-track:-.015em;--t-marca-peso:800;--t-marca-track:-.02em}

/* ---------- Página: fondo de lado a lado y contenido centrado ---------- */
body.con-tema.catalogo-vitrina{background:var(--t-lienzo);color:var(--ink)}
body.con-tema.catalogo-vitrina #app{max-width:none;box-shadow:none}
body.con-tema.catalogo-vitrina:not(.tiene-fondo) #app{background:transparent}
body.con-tema.catalogo-vitrina .contenido{max-width:var(--max);margin-left:auto;margin-right:auto}
body.con-tema:not(.catalogo-vitrina){background:var(--paper)}
@media(min-width:1024px){
  body.con-tema.catalogo-vitrina .topbar,
  body.con-tema.catalogo-vitrina .subnav,
  body.con-tema.catalogo-vitrina .buscador-hero,
  body.con-tema.catalogo-vitrina .pie-tienda{padding-left:var(--t-lateral);padding-right:var(--t-lateral)}
  body.con-tema.catalogo-vitrina .pie-grid,
  body.con-tema.catalogo-vitrina .pie-tienda .pie-mini{max-width:none}
}

/* ---------- Encabezado ---------- */
body.con-tema.catalogo-vitrina .promo-ribbon{background:var(--sec);color:var(--on-sec);font-size:12px;font-weight:550;letter-spacing:.01em;text-transform:none}
/* También en Ingresar, Registrarme y Mi cuenta (sin catalogo-vitrina): el
   nombre usa el color del encabezado del tema, así que el fondo va igual. */
body.con-tema.catalogo-vitrina .topbar,
body.con-tema:not(.catalogo-vitrina) .topbar{background:var(--t-enc-bg);color:var(--t-enc-ink);border-bottom:1px solid var(--t-enc-linea);box-shadow:none}
body.con-tema .topbar .brand-nombre{font-family:var(--t-head);font-weight:var(--t-marca-peso);letter-spacing:var(--t-marca-track);text-transform:var(--t-marca-caso);color:var(--t-enc-ink)}
body.con-tema .topbar .brand-sub,
body.con-tema .topbar .brand-eslogan,
body.con-tema .topbar .horario{color:var(--t-enc-suave)}
body.con-tema .topbar .horario:before{background:var(--t-enc-suave)}
body.con-tema .topbar .estado.abierto{color:var(--t-enc-ok)}
body.con-tema .topbar .estado.cerrado{color:var(--t-enc-err)}
body.con-tema .topbar .brand-logo{border-color:transparent}
body.con-tema .topbar .icon-btn{color:var(--t-enc-ink);background:transparent;border-color:transparent;box-shadow:none}
body.con-tema .topbar .accion-label{font-size:13px;font-weight:550;letter-spacing:0}
body.con-tema .topbar .carrito-badge{background:var(--action);color:var(--on-action);box-shadow:0 0 0 2px var(--t-enc-bg);font-weight:700}
@media(hover:hover){
  body.con-tema .topbar .icon-btn:hover{background:var(--t-enc-hover)}
}
body.con-tema .topbar :focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- Buscador, vista y rubros ---------- */
body.con-tema.catalogo-vitrina .subnav{background:var(--t-sub-bg);border-bottom:1px solid var(--line-soft);box-shadow:0 8px 18px -18px rgba(16,24,40,.4)}
body.con-tema.catalogo-vitrina .subnav-tools .searchbar{background:transparent}
body.con-tema.catalogo-vitrina .searchbar input{
  height:44px;border:1px solid var(--t-buscar-borde);border-radius:var(--r-ctrl);
  background:var(--t-buscar-bg);color:var(--ink);font-family:var(--t-ui);font-size:15px;box-shadow:none;
}
body.con-tema.catalogo-vitrina .searchbar input::placeholder{color:var(--ink-soft);opacity:1}
body.con-tema.catalogo-vitrina .searchbar input:focus{border-color:var(--accent-text);background:var(--card);box-shadow:0 0 0 3px rgba(16,24,40,.08);outline:0}
body.con-tema.catalogo-vitrina .searchbar svg{color:var(--ink-soft)}
body.con-tema.catalogo-vitrina .subnav .vista-selector{background:var(--t-buscar-bg);border-color:transparent}
body.con-tema.catalogo-vitrina .subnav .vista-btn{color:var(--ink-soft)}
body.con-tema.catalogo-vitrina .subnav .vista-btn.activo{color:var(--ink);background:var(--card);box-shadow:0 1px 3px rgba(16,24,40,.14)}
body.con-tema.catalogo-vitrina .subnav .catnav-chip{
  font-family:var(--t-ui);font-size:13px;font-weight:550;letter-spacing:.005em;text-transform:none;color:var(--ink-soft);
}
body.con-tema.catalogo-vitrina .subnav .catnav-chip.activo{color:var(--ink)}
body.con-tema.catalogo-vitrina .subnav .catnav-chip:after{background:var(--pri)}
body.con-tema.catalogo-vitrina .subnav .catnav-chip.activo .cnt{color:inherit;opacity:.75}
@media(hover:hover){body.con-tema.catalogo-vitrina .subnav .catnav-chip:not(.activo):hover{color:var(--ink)}}
/* Flechas dibujadas en lugar de los caracteres de flecha. */
body.con-tema .rail-arrow{font-size:0;color:var(--ink);background:var(--card);border-color:var(--line)}
body.con-tema .rail-arrow:before{
  content:"";display:block;width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.con-tema .rail-arrow[data-rail-prev]:before{transform:scaleX(-1)}

/* ---------- Avisos y filtros: compactos, antes de los productos ----------
   «Filtrar productos» nunca se oculta: el botón «Rubros» del celular lo abre. */
body.con-tema .catalogo-acceso,
body.con-tema.buscando .catalogo-acceso{
  margin:0 0 14px;padding:8px 8px 8px 14px;border:0;border-radius:var(--r-ctrl);
  background:var(--paper-2);gap:12px;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.con-tema .catalogo-acceso,body.con-tema.buscando .catalogo-acceso{background:color-mix(in srgb,var(--pri) 7%,var(--card))}
}
body.con-tema .catalogo-acceso p{margin:0;color:var(--ink);font-size:13.5px}
body.con-tema .catalogo-acceso a{min-height:34px;padding:0 12px;border-radius:var(--r-ctrl);background:var(--card);color:var(--accent-text);font-size:13px;font-weight:650;text-decoration:none;box-shadow:0 0 0 1px var(--line-soft)}
body.con-tema .aviso-cuenta{background:var(--paper-2);border-bottom-color:var(--line-soft);font-size:13px}
body.con-tema .filtros-panel{margin:0 0 16px;border:0;border-radius:0;background:transparent}
body.con-tema .filtros-panel>summary{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;list-style:none;
  border:1px solid var(--line);border-radius:var(--t-btn-radio);background:var(--card);color:var(--ink);
  font-size:13.5px;font-weight:600;cursor:pointer;
}
body.con-tema .filtros-panel>summary::-webkit-details-marker{display:none}
body.con-tema .filtros-panel>summary:before{
  content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.con-tema .filtros-panel>summary:after{content:none}
body.con-tema .filtros-panel[open]>summary{margin-bottom:10px;border-color:var(--ink)}
body.con-tema .filtros-panel .catalogo-filtros{margin:0;padding:14px;border:1px solid var(--line-soft);border-radius:var(--r-card);background:var(--card)}

/* ---------- Banner de la portada ----------
   La imagen sola, con sus esquinas y sin caja blanca alrededor; «Ver
   productos» y «Ampliar imagen» quedan debajo, chicos. */
body.con-tema.catalogo-vitrina .banner.banner-solo-imagen{margin:0 0 26px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
body.con-tema.catalogo-vitrina .banner-solo-imagen .banner-portada{display:flex;justify-content:center;padding:0;background:transparent}
body.con-tema.catalogo-vitrina .banner-solo-imagen .banner-portada img{border-radius:var(--r-card)}
body.con-tema.catalogo-vitrina .banner-solo-imagen .banner-acciones{justify-content:center;gap:18px;padding:12px 0 0;border:0;background:transparent}
body.con-tema.catalogo-vitrina .banner-solo-imagen .banner-cta-imagen{background:var(--action);color:var(--on-action);font-weight:600}
body.con-tema.catalogo-vitrina .banner-ampliar{color:var(--ink-soft)}
body.con-tema.catalogo-vitrina .banner:not(.banner-solo-imagen){border-radius:var(--r-card)}
body.con-tema .banner-inner h2{font-family:var(--t-head);font-weight:var(--t-head-peso);letter-spacing:var(--t-head-track)}

/* ---------- Títulos de sección: sin adornos ---------- */
body.con-tema .seccion > .seccion-titulo,
body.con-tema .carrusel-head .seccion-titulo{
  display:block;margin:0 0 16px;font-family:var(--t-head);font-size:22px;font-weight:var(--t-head-peso);
  line-height:1.2;letter-spacing:var(--t-head-track);text-transform:none;text-align:left;color:var(--ink);background:none;
}
body.con-tema .seccion > .seccion-titulo:before,
body.con-tema .seccion > .seccion-titulo:after{content:none;display:none}
body.con-tema.catalogo-vitrina .seccion{margin-top:34px}

/* ---------- Tarjeta de producto ---------- */
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card{
  background:var(--t-card-bg);border:1px solid var(--t-card-borde);border-radius:var(--t-card-radio);box-shadow:var(--t-card-sombra);
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card:active{transform:none}
@media(hover:hover){
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card:hover{transform:none;border-color:var(--t-card-borde-hover);box-shadow:var(--t-card-sombra-hover)}
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card:hover .card-media img{transform:scale(1.03)}
}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-media{background:var(--t-media-bg);border:0}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-media img{object-fit:var(--t-media-ajuste);padding:var(--t-media-aire);background:var(--t-media-bg)}
/* La inicial de respaldo queda oculta mientras haya foto (si la foto no
   carga, se quita y la inicial se ve). */
@supports selector(:has(*)){
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-media:has(img) .card-ph{visibility:hidden}
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-media img{background:transparent}
}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-ph{font-family:var(--t-head);font-weight:var(--t-head-peso)}
/* «Sin foto»: mismo recuadro que una foto, apenas marcado. */
body.con-tema .card-sin-foto{background:var(--t-sinfoto-bg);color:var(--ink-soft);font-size:11.5px;font-weight:500;letter-spacing:.01em}
body.con-tema .card-sin-foto:before{width:30px;height:30px;opacity:.32}
/* Etiquetas del comercio: chicas y en tono suave, con fondo claro para
   leerse sobre la foto. «Solo retiro», «Sin stock» y el descuento siguen
   siendo avisos bien visibles. */
body.con-tema .card .badges{top:8px;left:8px;gap:4px}
/* La foto va con z-index:1 (estilos.css): etiquetas y avisos por encima. */
body.con-tema .card .badges,
body.con-tema .card .chip-off,
body.con-tema .card .chip-nd,
body.con-tema .card .chip-retiro{z-index:2}
body.con-tema .card .badges .badge,
body.con-tema .card .badges-inline .badge:not(.badge-retiro-inline){
  padding:3px 7px;border-radius:4px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 0 0 1px var(--line);
  font-family:var(--t-ui);font-size:10.5px;font-weight:650;letter-spacing:.01em;text-transform:none;line-height:1.3;
}
body.con-tema .card .badges .badge-mas_vendido,
body.con-tema .card .badges .badge-recomendado,
body.con-tema .card .badges-inline .badge-mas_vendido,
body.con-tema .card .badges-inline .badge-recomendado{background:var(--paper-2);color:var(--accent-text);box-shadow:none}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.con-tema .card .badges .badge-mas_vendido,
  body.con-tema .card .badges .badge-recomendado,
  body.con-tema .card .badges-inline .badge-mas_vendido,
  body.con-tema .card .badges-inline .badge-recomendado{background:color-mix(in srgb,var(--pri) 13%,var(--card))}
}
body.con-tema .card .chip-off{top:8px;right:8px;padding:3px 7px;border-radius:4px;background:#14663a;color:#fff;box-shadow:none;font-size:11px;font-weight:700;letter-spacing:0}
body.con-tema .card .chip-nd{bottom:8px;left:8px;padding:3px 8px;border-radius:4px;background:rgba(20,24,30,.82);color:#fff;font-size:10.5px;font-weight:650;letter-spacing:.01em;text-transform:none}
body.con-tema .card .chip-retiro{left:8px;padding:3px 7px;border-radius:4px;font-size:10.5px;font-weight:650;letter-spacing:0}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-body{padding:12px 14px 14px;gap:4px}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-meta{font-family:var(--t-ui);font-size:11.5px;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-soft);font-variant-numeric:tabular-nums}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-family:var(--t-ui);font-size:14px;font-weight:520;line-height:1.4;letter-spacing:-.004em;color:var(--ink)}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-title-link{color:inherit;font:inherit;letter-spacing:inherit}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-desc{font-size:12.5px;color:var(--ink-soft)}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-unidad{font-size:12px;color:var(--ink-soft)}
/* Franja comercial: separada por un filete; el precio es lo único fuerte. */
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--t-foot-linea);align-items:center}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .precio{font-family:var(--t-ui);font-size:var(--t-precio-tam);font-weight:var(--t-precio-peso);line-height:1.1;letter-spacing:-.02em;color:var(--t-precio);font-variant-numeric:tabular-nums}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .precio-viejo{font-size:12px;font-weight:450;color:var(--ink-soft);text-decoration:line-through}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .precio-oculto{font-size:12px;font-weight:500;color:var(--ink-soft)}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add{width:40px;height:40px;border:0;border-radius:var(--t-btn-radio);background:var(--t-add-bg);color:var(--t-add-ink);box-shadow:none}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add-texto{width:auto;padding:0 14px;font-size:13px;font-weight:600}
/* «Agotado» y «No disponible» como texto, sin parecer un botón. */
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add:disabled{width:auto;height:auto;min-height:32px;padding:0;border:0;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:550;box-shadow:none}
@media(hover:hover){
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add:not(:disabled):hover{background:var(--action);color:var(--on-action);filter:none;transform:none}
}
/* El texto «Agregar» que suman algunos temas: el nombre accesible sigue
   siendo el aria-label «Agregar <producto>». */
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add[data-add]{gap:6px}
body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add[data-add] svg{flex:none;width:18px;height:18px}
/* En lista la columna del botón es angosta: el botón toma el ancho de su texto. */
/* La lista conserva su armado (tienda-acabado.css): datos a la izquierda y
   precio y botón a la derecha, separados por un filete vertical. */
/* Los mismos aires que la lista de tienda-acabado.css (PC, densidad compacta y celular). */
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card-body{gap:3px 16px;padding:12px 16px}
body.con-tema.catalogo-vitrina.dens-compacta :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card-body{gap:3px 12px;padding:10px 12px}
@media(max-width:760px){
  body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card-body,
  body.con-tema.catalogo-vitrina.dens-compacta :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card-body{gap:3px 10px;padding:10px}
}
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card-foot{margin:0;border-top:0;padding-top:0;align-items:flex-end}
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .btn-add[data-add]{width:auto;min-width:40px;padding:0 12px;white-space:nowrap}
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card-media img{padding:4%}
/* En lista la foto es chica: etiquetas y avisos más chicos para que entren enteros. */
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .badges{top:5px;left:5px;gap:3px}
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .badge,
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .chip-off,
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .chip-nd,
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .chip-retiro{padding:2px 5px;font-size:9px}
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .chip-off{top:5px;right:5px}
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .chip-nd{bottom:5px;left:5px}
body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card .chip-retiro{top:26px;left:5px}

/* ---------- «Ver más», búsqueda ---------- */
body.con-tema .btn-ver-mas{min-height:42px;padding:0 24px;border:1px solid var(--line);border-radius:var(--t-btn-radio);background:var(--card);color:var(--ink);font-size:14px;font-weight:600;box-shadow:none}
@media(hover:hover){body.con-tema .btn-ver-mas:hover{border-color:var(--ink);background:var(--card);color:var(--ink);box-shadow:none}}
body.con-tema .ver-mas-cuenta{font-size:12px;color:var(--ink-soft)}
body.con-tema .search-results-head strong{font-family:var(--t-head);font-weight:var(--t-head-peso)}
body.con-tema.catalogo-vitrina .search-results-head div span{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}

/* ---------- Botones y títulos de ficha, carrito, compra y cuenta ---------- */
body.con-tema :is(.btn-primary,.btn-confirmar,.checkout-continue,#btn-confirmar-pedido,.banner-cta,.banner-cta-imagen,.cuenta-doc-btn,.btn-ver-mas,.btn-ghost){
  border-radius:var(--t-btn-radio);font-family:var(--t-ui);text-transform:none;letter-spacing:0;
}
body.con-tema .pd-nombre{font-family:var(--t-head);font-weight:var(--t-head-peso);letter-spacing:var(--t-head-track)}
body.con-tema .pd-precio{font-family:var(--t-ui);font-weight:650;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
body.con-tema .pd-meta{letter-spacing:.005em;text-transform:none}
body.con-tema .pd-hero{background:#fff}
body.con-tema .sheet-head h2,
body.con-tema .co-tit,
body.con-tema .pago-tit,
body.con-tema .grupo-titulo{font-family:var(--t-head);font-weight:var(--t-head-peso);letter-spacing:var(--t-head-track)}

/* ---------- Pie ---------- */
body.con-tema.catalogo-vitrina .pie-tienda{background:var(--t-pie-bg);color:var(--t-pie-ink);border-top:1px solid var(--t-pie-linea)}
body.con-tema .pie-tienda .pie-nombre{font-family:var(--t-head);font-weight:var(--t-head-peso);letter-spacing:var(--t-head-track);color:var(--t-pie-ink)}
body.con-tema .pie-tienda .pie-datos a,
body.con-tema .pie-tienda .pie-links a,
body.con-tema .pie-tienda .pie-link-btn{color:var(--t-pie-ink)}
body.con-tema .pie-tienda .pie-eslogan,
body.con-tema .pie-tienda .pie-estado,
body.con-tema .pie-tienda .pie-datos li span,
body.con-tema .pie-tienda .pie-mini{color:var(--t-pie-suave)}
body.con-tema .pie-tienda .pie-datos a{border-bottom-color:var(--t-pie-linea)}
body.con-tema .pie-tienda .pie-mini{border-top-color:var(--t-pie-linea)}
body.con-tema .pie-tienda .estado.abierto{color:var(--t-pie-ok)}
body.con-tema .pie-tienda .estado.cerrado{color:var(--t-pie-err)}

/* ---------- Celular ---------- */
@media(max-width:760px){
  /* Pesa más que el tamaño propio de cada tema: en dos columnas manda el lugar. */
  body.con-tema.catalogo-vitrina{--t-precio-tam:16.5px}
  body.con-tema.catalogo-vitrina .searchbar input{font-size:16px}
  body.con-tema.catalogo-vitrina .mobile-dock{background:var(--t-dock-bg);border-top:1px solid var(--t-dock-linea)}
  body.con-tema.catalogo-vitrina .mobile-dock button,
  body.con-tema.catalogo-vitrina .mobile-dock a{color:var(--t-dock-ink)}
  body.con-tema .seccion > .seccion-titulo,
  body.con-tema .carrusel-head .seccion-titulo{font-size:19px;margin-bottom:12px}
  body.con-tema.catalogo-vitrina .seccion{margin-top:26px}
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-body{padding:10px 11px 12px;gap:3px}
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-size:13px;line-height:1.38}
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-meta{font-size:11px}
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .card-foot{padding-top:8px;gap:6px}
  body.con-tema.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add{width:36px;height:36px}
  body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .btn-add[data-add]{padding:0;width:40px}
  /* En lista la columna del precio es angosta: que el importe no se parta. */
  body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .precio{font-size:14px;white-space:nowrap}
  body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .precio-viejo{font-size:11px;white-space:nowrap}
  body.con-tema.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .btn-add[data-add]:after{content:none}
  body.con-tema .catalogo-acceso p{font-size:12.5px}
  body.con-tema.catalogo-vitrina .banner-solo-imagen .banner-acciones{justify-content:space-between;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){
  body.con-tema *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   3. Temas
   ========================================================================== */

/* ---------- Mercado · ferretería, distribuidora, supermercado ----------
   El recorrido de las tiendas grandes: encabezado del color de la marca con
   el buscador bien a mano, fondo gris claro y tarjetas blancas sin marco. */
body.tema-mercado{
  --t-enc-bg:var(--action);--t-enc-ink:var(--on-action);--t-enc-suave:var(--on-action);--t-enc-linea:transparent;
  --t-enc-hover:rgba(255,255,255,.16);--t-enc-ok:var(--on-action);--t-enc-err:var(--on-action);
  --t-buscar-bg:var(--card);--t-buscar-borde:var(--line);
  --t-card-borde:transparent;--t-card-borde-hover:transparent;
  --t-card-sombra:0 1px 2px rgba(16,24,40,.08);--t-card-sombra-hover:0 10px 24px -10px rgba(16,24,40,.3);
  --t-foot-linea:transparent;
  --t-precio-peso:500;--t-precio-tam:21px;
}
body.tema-mercado .topbar .carrito-badge{background:var(--on-action);color:var(--action)}
/* Buscador en el encabezado (en computadora lo pone app.js; o el comercio lo eligió ahí). */
body.tema-mercado.catalogo-vitrina .topbar > .searchbar input{border:0;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.18)}
body.tema-mercado.catalogo-vitrina .topbar > .searchbar input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.5)}
@media(min-width:1024px){
  /* Sin el buscador, la barra fija deja solo la vista y los rubros. */
  body.buscador-arriba-pc.catalogo-vitrina .subnav-tools{flex:none;min-width:0}
}
@media(max-width:1023px){
  /* En celular y tablet la franja del buscador sigue al encabezado, del mismo color. */
  body.tema-mercado.catalogo-vitrina .subnav-tools{background:var(--action)}
  body.tema-mercado.catalogo-vitrina .subnav-tools .searchbar input{border-color:transparent;background:var(--card)}
  body.tema-mercado.catalogo-vitrina .subnav .vista-selector{background:rgba(255,255,255,.2)}
  body.tema-mercado.catalogo-vitrina .subnav .vista-btn{color:var(--on-action)}
  body.tema-mercado.catalogo-vitrina .subnav .vista-btn.activo{background:var(--card);color:var(--ink)}
}
body.tema-mercado.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-weight:450}
body.tema-mercado .seccion > .seccion-titulo{font-size:21px;font-weight:600;letter-spacing:-.015em}

/* ---------- Esencial · cualquier rubro ----------
   Blanco y negro, mucho aire, sin marcos ni sombras: la foto es la vidriera. */
body.tema-esencial{
  --t-lienzo:var(--card);
  --t-enc-linea:var(--line);
  --t-card-bg:transparent;--t-card-borde:transparent;--t-card-borde-hover:transparent;--t-card-sombra:none;--t-card-sombra-hover:none;
  --t-media-bg:var(--paper-2);--t-media-aire:9%;
  --t-foot-linea:transparent;
  --t-add-bg:var(--sec);--t-add-ink:var(--on-sec);
  --t-precio-peso:600;--t-precio-tam:17px;
}
body.tema-esencial #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-media{border-radius:var(--r-card);overflow:hidden}
body.tema-esencial.catalogo-vitrina :is(.catalog-grid,.rail) .card-media img{mix-blend-mode:multiply}
body.tema-esencial #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-body{padding:12px 2px 6px}
body.tema-esencial.catalogo-vitrina :is(.catalog-grid,.rail) .card-foot{padding-top:4px}
body.tema-esencial.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card{background:var(--card);border-width:0 0 1px;border-color:var(--line-soft);border-radius:0}
body.tema-esencial .seccion > .seccion-titulo{font-size:26px;font-weight:650;letter-spacing:-.03em}
body.tema-esencial.catalogo-vitrina .subnav{box-shadow:none}
body.tema-esencial :is(.btn-primary,.btn-confirmar,.checkout-continue,#btn-confirmar-pedido,.banner-cta-imagen,.cuenta-doc-btn):not(.btn-wa):not(.btn-mp):not(:disabled){background:var(--sec);color:var(--on-sec)}
body.tema-esencial.catalogo-vitrina .banner-solo-imagen .banner-cta-imagen{background:var(--sec);color:var(--on-sec)}
@media(max-width:760px){body.tema-esencial .seccion > .seccion-titulo{font-size:21px}}

/* ---------- Bistró cálido · gastronomía ----------
   Encabezado oscuro como una pizarra, títulos con serif, fotos de plato que
   llenan el recuadro y «Agregar» redondeado. */
body.tema-bistro-calido{
  --t-enc-bg:var(--sec);--t-enc-ink:var(--on-sec);--t-enc-suave:var(--on-sec);--t-enc-linea:transparent;
  --t-enc-hover:rgba(255,255,255,.1);--t-enc-ok:#bfe8c4;--t-enc-err:#ffc9c2;
  --t-pie-bg:var(--sec);--t-pie-ink:var(--on-sec);--t-pie-suave:var(--on-sec);--t-pie-linea:rgba(255,255,255,.16);--t-pie-ok:#bfe8c4;--t-pie-err:#ffc9c2;
  --t-dock-bg:var(--sec);--t-dock-ink:var(--on-sec);--t-dock-linea:transparent;
  --t-card-borde:transparent;--t-card-borde-hover:transparent;
  --t-card-sombra:0 1px 2px rgba(50,30,15,.06),0 10px 24px -18px rgba(50,30,15,.5);
  --t-card-sombra-hover:0 1px 2px rgba(50,30,15,.06),0 18px 32px -18px rgba(50,30,15,.55);
  --t-media-ajuste:cover;--t-media-aire:0px;
  --t-add-bg:var(--action);--t-add-ink:var(--on-action);
  --t-precio:var(--accent-text);
  --t-btn-radio:var(--t-pill);
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.tema-bistro-calido{--t-enc-suave:color-mix(in srgb,var(--on-sec) 70%,transparent);--t-pie-suave:color-mix(in srgb,var(--on-sec) 70%,transparent);--t-dock-ink:color-mix(in srgb,var(--on-sec) 80%,transparent)}
}
body.tema-bistro-calido .seccion > .seccion-titulo{font-size:25px}
body.tema-bistro-calido.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add[data-add]{width:auto;height:38px;padding:0 15px 0 11px;font-size:13px;font-weight:650}
body.tema-bistro-calido.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add[data-add]:after{content:"Agregar"}

/* ---------- Botánica · bienestar y dietética ----------
   Formas suaves, títulos amables y botones tonales; la foto apoyada sobre
   un tono de la marca. */
body.tema-botanica{
  --t-card-borde:transparent;--t-card-borde-hover:transparent;--t-card-radio:calc(var(--r-card) + 4px);
  --t-card-sombra:0 1px 2px rgba(20,40,30,.05),0 12px 28px -22px rgba(20,40,30,.55);
  --t-card-sombra-hover:0 1px 2px rgba(20,40,30,.05),0 20px 34px -22px rgba(20,40,30,.6);
  --t-media-bg:var(--paper-2);--t-media-ajuste:cover;--t-media-aire:0px;
  --t-foot-linea:transparent;
  --t-btn-radio:var(--t-pill);
}
body.tema-botanica #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-media{
  width:calc(100% - 16px);margin:8px 8px 0;border-radius:calc(var(--r-card) - 2px);overflow:hidden;
}
body.tema-botanica.catalogo-vitrina :is(.catalog-grid,.rail) .card-media img{mix-blend-mode:multiply}
body.tema-botanica.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add:not(:disabled){width:42px;height:42px}
body.tema-botanica.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add-texto{width:auto}

/* ---------- Boutique · indumentaria y belleza ----------
   Vidriera de revista: fotos verticales sin marco, títulos con serif
   centrados y botón fino de contorno. */
body.tema-boutique{
  --t-lienzo:var(--card);
  --t-enc-linea:var(--line);
  --t-marca-caso:uppercase;--t-marca-track:.08em;--t-marca-peso:500;
  --t-card-bg:transparent;--t-card-borde:transparent;--t-card-borde-hover:transparent;--t-card-sombra:none;--t-card-sombra-hover:none;
  --t-media-bg:var(--paper-2);--t-media-ajuste:cover;--t-media-aire:0px;
  --t-foot-linea:transparent;
  --t-precio-peso:550;--t-precio-tam:16px;
}
body.tema-boutique .seccion > .seccion-titulo{text-align:center;font-size:27px;font-weight:500}
body.tema-boutique #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-media{border-radius:var(--r-card);overflow:hidden}
body.tema-boutique.catalogo-vitrina :is(.catalog-grid,.rail) .card-media img{mix-blend-mode:multiply}
body.tema-boutique #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-body{padding:12px 2px 4px}
body.tema-boutique.catalogo-vitrina :is(.vista-lista .catalog-grid,.grid.forzar-lista) .card{background:var(--card);border-width:0 0 1px;border-color:var(--line);border-radius:0}
body.tema-boutique.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-weight:450}
body.tema-boutique.catalogo-vitrina :is(.catalog-grid,.rail) .card-foot{flex-wrap:wrap}
body.tema-boutique #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) :is(.btn-add[data-add],.btn-add-texto){
  width:100%;height:40px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:13px;font-weight:600;
}
body.tema-boutique.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add[data-add] svg{width:15px;height:15px}
body.tema-boutique #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .btn-add[data-add]:after{content:"Agregar"}
@media(hover:hover){
  body.tema-boutique.catalogo-vitrina :is(.catalog-grid,.rail) :is(.btn-add[data-add],.btn-add-texto):hover{background:var(--ink);border-color:var(--ink);color:var(--card)}
}
body.tema-boutique :is(.btn-primary,.btn-confirmar,.checkout-continue,#btn-confirmar-pedido,.banner-cta-imagen,.cuenta-doc-btn):not(.btn-wa):not(.btn-mp):not(:disabled){background:var(--sec);color:var(--on-sec)}
body.tema-boutique.catalogo-vitrina .banner-solo-imagen .banner-cta-imagen{background:var(--sec);color:var(--on-sec)}
body.tema-boutique.catalogo-vitrina .subnav{box-shadow:none}
@media(max-width:760px){body.tema-boutique .seccion > .seccion-titulo{font-size:22px}}

/* ---------- Urbano · tecnología, repuestos, ferretería ----------
   Encabezado grafito con filete de la marca, esquinas rectas, código como
   etiqueta técnica y una grilla densa. */
body.tema-urbano{
  --t-enc-bg:var(--sec);--t-enc-ink:var(--on-sec);--t-enc-suave:var(--on-sec);--t-enc-linea:var(--pri);
  --t-enc-hover:rgba(255,255,255,.1);--t-enc-ok:#bfe8c4;--t-enc-err:#ffc9c2;
  --t-pie-bg:var(--sec);--t-pie-ink:var(--on-sec);--t-pie-suave:var(--on-sec);--t-pie-linea:rgba(255,255,255,.16);--t-pie-ok:#bfe8c4;--t-pie-err:#ffc9c2;
  --t-dock-bg:var(--sec);--t-dock-ink:var(--on-sec);--t-dock-linea:var(--pri);
  --t-card-borde:var(--line);--t-card-borde-hover:var(--pri);--t-card-sombra-hover:none;
  --t-add-bg:var(--action);--t-add-ink:var(--on-action);
  --t-precio-peso:750;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.tema-urbano{--t-enc-suave:color-mix(in srgb,var(--on-sec) 70%,transparent);--t-pie-suave:color-mix(in srgb,var(--on-sec) 70%,transparent);--t-dock-ink:color-mix(in srgb,var(--on-sec) 80%,transparent)}
}
body.tema-urbano.con-tema .topbar{border-bottom-width:3px}
body.tema-urbano.catalogo-vitrina .pie-tienda{border-top:3px solid var(--pri)}
body.tema-urbano .seccion > .seccion-titulo{display:flex;align-items:center;gap:10px;font-size:20px}
body.tema-urbano .seccion > .seccion-titulo:before{content:"";display:block;flex:none;width:4px;height:1em;background:var(--pri)}
body.tema-urbano.catalogo-vitrina :is(.catalog-grid,.rail) .card-meta{
  display:block;width:-moz-fit-content;width:fit-content;max-width:100%;padding:2px 6px;border-radius:2px;
  background:var(--paper-2);color:var(--ink);font-size:11px;font-weight:650;letter-spacing:.02em;
}
body.tema-urbano.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-weight:600}
@media(hover:hover){body.tema-urbano.catalogo-vitrina :is(.catalog-grid,.rail) .card:hover{box-shadow:inset 0 3px 0 var(--pri)}}

/* ---------- Azul profesional · servicios, salud, turismo ----------
   Encabezado blanco con un filete de la marca, tarjetas con sombra suave y
   «Agregar» a lo ancho: claro y confiable. */
body.tema-azul-profesional{
  --t-pie-bg:var(--sec);--t-pie-ink:var(--on-sec);--t-pie-suave:var(--on-sec);--t-pie-linea:rgba(255,255,255,.16);--t-pie-ok:#bfe8c4;--t-pie-err:#ffc9c2;
  --t-card-borde:transparent;--t-card-borde-hover:transparent;
  --t-card-sombra:0 1px 2px rgba(15,30,60,.06),0 6px 18px -10px rgba(15,30,60,.22);
  --t-card-sombra-hover:0 2px 4px rgba(15,30,60,.06),0 16px 30px -14px rgba(15,30,60,.32);
  --t-add-bg:var(--action);--t-add-ink:var(--on-action);
  --t-foot-linea:transparent;--t-precio-peso:700;--t-precio-tam:20px;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.tema-azul-profesional{--t-pie-suave:color-mix(in srgb,var(--on-sec) 72%,transparent)}
}
body.tema-azul-profesional.con-tema .topbar{box-shadow:inset 0 3px 0 var(--pri)}
body.tema-azul-profesional #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-media{border-bottom:1px solid var(--line-soft)}
body.tema-azul-profesional #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-foot{flex-wrap:wrap}
body.tema-azul-profesional #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) :is(.btn-add[data-add],.btn-add-texto){width:100%;height:40px;font-size:13.5px;font-weight:650}
body.tema-azul-profesional #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .btn-add[data-add]:after{content:"Agregar"}
body.tema-azul-profesional.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add-texto{background:transparent;color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- Alegre · regalería, infantil, librería ----------
   Colores vivos, contornos marcados y botones gorditos con sombra corrida. */
body.tema-alegre{
  --t-tinta:var(--ink);
  --t-enc-linea:var(--pri);
  --t-pie-linea:var(--pri);
  --t-card-borde:var(--t-tinta);--t-card-borde-hover:var(--t-tinta);
  --t-card-sombra:3px 3px 0 var(--t-tinta);--t-card-sombra-hover:5px 5px 0 var(--t-tinta);
  --t-media-bg:var(--paper-2);--t-media-ajuste:cover;--t-media-aire:0px;
  --t-foot-linea:transparent;
  --t-add-bg:var(--action);--t-add-ink:var(--on-action);
  --t-btn-radio:var(--t-pill);
  --t-precio:var(--accent-text);--t-precio-peso:800;
}
body.tema-alegre.con-tema .topbar{border-bottom-width:4px}
body.tema-alegre.catalogo-vitrina .pie-tienda{border-top-width:4px}
body.tema-alegre.catalogo-vitrina :is(.catalog-grid,.rail) .card{border-width:1.5px}
@media(hover:hover){body.tema-alegre.catalogo-vitrina :is(.catalog-grid,.rail) .card:hover{transform:translate(-2px,-2px)}}
body.tema-alegre #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-media{border-bottom:1.5px solid var(--t-tinta)}
body.tema-alegre.catalogo-vitrina :is(.catalog-grid,.rail) .card-media img{mix-blend-mode:multiply}
body.tema-alegre.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-weight:600}
body.tema-alegre.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add:not(:disabled){border:1.5px solid var(--t-tinta);box-shadow:2px 2px 0 var(--t-tinta)}
body.tema-alegre.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add:not(:disabled):active{transform:translate(2px,2px);box-shadow:none}
body.tema-alegre .seccion > .seccion-titulo{
  display:inline-block;padding:0 4px;
  background:linear-gradient(transparent 60%,rgba(0,0,0,.08) 60%,rgba(0,0,0,.08) 90%,transparent 90%);
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.tema-alegre .seccion > .seccion-titulo{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--pri) 30%,transparent) 60%,color-mix(in srgb,var(--pri) 30%,transparent) 90%,transparent 90%)}
}
body.tema-alegre .btn-ver-mas{border:1.5px solid var(--t-tinta);box-shadow:3px 3px 0 var(--t-tinta)}
body.tema-alegre :is(.btn-primary,.btn-confirmar,.checkout-continue,#btn-confirmar-pedido,.banner-cta-imagen,.cuenta-doc-btn):not(:disabled){border:1.5px solid var(--t-tinta)}

/* ---------- Rubros en pastillas (Bistró, Botánica, Azul, Alegre) ---------- */
body.tema-bistro-calido.catalogo-vitrina .subnav .catnav,
body.tema-botanica.catalogo-vitrina .subnav .catnav,
body.tema-azul-profesional.catalogo-vitrina .subnav .catnav,
body.tema-alegre.catalogo-vitrina .subnav .catnav{gap:8px;padding-top:9px;padding-bottom:9px}
body.tema-bistro-calido.catalogo-vitrina .subnav .catnav-chip,
body.tema-botanica.catalogo-vitrina .subnav .catnav-chip,
body.tema-azul-profesional.catalogo-vitrina .subnav .catnav-chip,
body.tema-alegre.catalogo-vitrina .subnav .catnav-chip{min-height:36px;padding:0 15px;border:1px solid var(--line);border-radius:var(--t-pill);background:var(--card);color:var(--ink)}
body.tema-botanica.catalogo-vitrina .subnav .catnav-chip{border-color:transparent;background:var(--paper-2)}
body.tema-alegre.catalogo-vitrina .subnav .catnav-chip{border:1.5px solid var(--t-tinta);font-weight:650}
body.tema-bistro-calido.catalogo-vitrina .subnav .catnav-chip:after,
body.tema-botanica.catalogo-vitrina .subnav .catnav-chip:after,
body.tema-azul-profesional.catalogo-vitrina .subnav .catnav-chip:after,
body.tema-alegre.catalogo-vitrina .subnav .catnav-chip:after{display:none}
body.tema-bistro-calido.catalogo-vitrina .subnav .catnav-chip.activo,
body.tema-botanica.catalogo-vitrina .subnav .catnav-chip.activo,
body.tema-azul-profesional.catalogo-vitrina .subnav .catnav-chip.activo,
body.tema-alegre.catalogo-vitrina .subnav .catnav-chip.activo{background:var(--action);border-color:var(--action);color:var(--on-action)}
body.tema-alegre.catalogo-vitrina .subnav .catnav-chip.activo{border-color:var(--t-tinta);box-shadow:2px 2px 0 var(--t-tinta)}
/* Urbano: solapas rectas, la activa en grafito. */
body.tema-urbano.catalogo-vitrina .subnav .catnav{gap:4px;padding-top:9px;padding-bottom:9px}
body.tema-urbano.catalogo-vitrina .subnav .catnav-chip{min-height:34px;padding:0 12px;border-radius:var(--r-ctrl);color:var(--ink);font-weight:650}
body.tema-urbano.catalogo-vitrina .subnav .catnav-chip:after{display:none}
body.tema-urbano.catalogo-vitrina .subnav .catnav-chip.activo{background:var(--sec);color:var(--on-sec)}
@media(hover:hover){body.tema-urbano.catalogo-vitrina .subnav .catnav-chip:not(.activo):hover{background:var(--paper-2)}}

/* ---------- Taller · ferretería, corralón y repuestos (2026-10-27) ----------
   Encabezado grafito con una franja del color de la marca, tarjetas con borde
   firme y precio grande. El detalle propio: la barra de color en cada título. */
body.tema-taller{
  --t-enc-bg:var(--sec);--t-enc-ink:var(--on-sec);--t-enc-suave:var(--on-sec);--t-enc-linea:var(--pri);
  --t-enc-hover:rgba(255,255,255,.12);--t-enc-ok:#bfe8c4;--t-enc-err:#ffc9c2;
  --t-buscar-bg:var(--card);--t-buscar-borde:transparent;
  --t-card-borde:var(--line);--t-card-borde-hover:var(--ink-soft);
  --t-card-sombra:none;--t-card-sombra-hover:0 8px 20px -14px rgba(16,24,40,.5);
  --t-precio-peso:800;--t-precio-tam:21px;
  --t-add-bg:var(--action);--t-add-ink:var(--on-action);
  --t-pie-bg:var(--sec);--t-pie-ink:var(--on-sec);--t-pie-suave:var(--on-sec);--t-pie-linea:rgba(255,255,255,.14);--t-pie-ok:#bfe8c4;--t-pie-err:#ffc9c2;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.tema-taller{--t-enc-suave:color-mix(in srgb,var(--on-sec) 72%,transparent);--t-pie-suave:color-mix(in srgb,var(--on-sec) 70%,transparent)}
}
body.tema-taller.con-tema .topbar{border-bottom-width:4px}
body.tema-taller .topbar .carrito-badge{background:var(--pri);color:var(--on-action)}
body.tema-taller .topbar .brand-ph{background:var(--action);color:var(--on-action)}
body.tema-taller.catalogo-vitrina .topbar > .searchbar input{border:0;background:var(--card)}
body.tema-taller.catalogo-vitrina .topbar > .searchbar input:focus{box-shadow:0 0 0 3px var(--pri)}
@media(max-width:1023px){
  body.tema-taller.catalogo-vitrina .subnav-tools{background:var(--sec)}
  body.tema-taller.catalogo-vitrina .subnav-tools .searchbar input{border-color:transparent;background:var(--card)}
  body.tema-taller.catalogo-vitrina .subnav .vista-selector{background:rgba(255,255,255,.14)}
  body.tema-taller.catalogo-vitrina .subnav .vista-btn{color:var(--on-sec)}
  body.tema-taller.catalogo-vitrina .subnav .vista-btn.activo{background:var(--card);color:var(--ink)}
}
body.con-tema.tema-taller .seccion > .seccion-titulo{font-weight:800;letter-spacing:-.02em}
body.con-tema.tema-taller .seccion > .seccion-titulo:before{content:"";display:inline-block;width:6px;height:.85em;margin-right:10px;vertical-align:-.04em;background:var(--pri)}
body.tema-taller.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-weight:600}
body.tema-taller.catalogo-vitrina .subnav .catnav-chip.activo{color:var(--ink);font-weight:750}

/* ---------- Cuidado · farmacia, óptica y salud (2026-10-27) ----------
   Blanco luminoso, tarjetas redondeadas que flotan apenas y botones en
   píldora tonales: limpio, sin ruido. */
body.tema-cuidado{
  --t-lienzo:var(--paper);
  --t-enc-linea:var(--line-soft);
  --t-card-borde:transparent;--t-card-borde-hover:transparent;
  --t-card-sombra:0 1px 2px rgba(16,40,48,.06),0 8px 22px -16px rgba(16,40,48,.35);
  --t-card-sombra-hover:0 1px 2px rgba(16,40,48,.06),0 16px 30px -16px rgba(16,40,48,.42);
  --t-media-bg:#fff;--t-media-aire:8%;
  --t-foot-linea:transparent;
  --t-precio:var(--accent-text);--t-precio-peso:700;--t-precio-tam:19px;
  --t-btn-radio:var(--t-pill);
}
body.tema-cuidado.con-tema .topbar{box-shadow:0 1px 0 var(--line-soft),0 10px 30px -26px rgba(16,40,48,.6)}
body.tema-cuidado .seccion > .seccion-titulo{font-weight:650;letter-spacing:-.02em}
body.tema-cuidado.catalogo-vitrina .subnav .catnav-chip.activo{background:var(--t-add-bg);color:var(--accent-text);border-radius:var(--t-pill)}
body.tema-cuidado.catalogo-vitrina .subnav .catnav-chip:after{display:none}

/* ---------- Electro · electro, hogar, tecnología y muebles (2026-10-28) ----------
   El lenguaje de las cadenas de electro: todo blanco, títulos fuertes,
   tarjetas con borde fino, precio grande y «Agregar» a lo ancho. La ficha
   se arma como una página de compra: foto grande con sus miniaturas a la
   izquierda y, a la derecha, nombre, precio y la caja con cantidad y el
   botón grande (del segundo color de la paleta). Solo estilos: los datos,
   las clases y el JS de la ficha son los de siempre. */
body.tema-electro{
  --t-lienzo:var(--card);
  --t-head-peso:800;--t-head-track:-.02em;--t-marca-peso:800;
  --t-enc-linea:var(--line-soft);
  --t-buscar-bg:var(--card);--t-buscar-borde:var(--line);
  --t-card-borde:var(--line);--t-card-borde-hover:var(--line);--t-card-radio:12px;
  --t-card-sombra:none;--t-card-sombra-hover:0 12px 26px -18px rgba(0,0,0,.45);
  --t-media-bg:#fff;--t-media-aire:7%;
  --t-foot-linea:transparent;
  --t-precio:var(--ink);--t-precio-peso:800;--t-precio-tam:22px;
  --t-add-bg:var(--action);--t-add-ink:var(--on-action);
  --t-btn-radio:8px;
  --t-pie-bg:var(--paper-2);
}
/* Franja de avisos arriba: blanca, en mayúsculas y con un filete de la marca. */
body.tema-electro.catalogo-vitrina .promo-ribbon{background:var(--card);color:var(--accent-text);font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-bottom:2px solid var(--pri)}
body.tema-electro.con-tema .topbar{border-bottom:1px solid var(--line-soft)}
body.tema-electro .topbar .brand-ph{background:var(--action);color:var(--on-action)}
body.tema-electro.catalogo-vitrina .searchbar input{border-width:1.5px;border-radius:8px}
body.tema-electro.catalogo-vitrina .searchbar input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
body.tema-electro.catalogo-vitrina .subnav .catnav-chip{font-weight:650;color:var(--ink)}
body.tema-electro.catalogo-vitrina .subnav .catnav-chip.activo{color:var(--accent-text)}
body.tema-electro .seccion > .seccion-titulo,
body.tema-electro .carrusel-head .seccion-titulo{font-size:22px;font-weight:800;letter-spacing:-.02em}
/* Tarjeta: nombre liviano, precio grande y «Agregar» a lo ancho. */
body.tema-electro.catalogo-vitrina :is(.catalog-grid,.rail) .card{overflow:hidden}
body.tema-electro.catalogo-vitrina :is(.catalog-grid,.rail) .card-nombre{font-weight:450;font-size:13.5px}
body.tema-electro.catalogo-vitrina :is(.catalog-grid,.rail) .precio-viejo{font-size:12.5px}
body.tema-electro .card .chip-off{background:var(--action);color:var(--on-action);border-radius:6px;font-weight:800}
body.tema-electro #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .card-foot{flex-wrap:wrap;gap:10px}
body.tema-electro #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) :is(.btn-add[data-add],.btn-add-texto){width:100%;height:42px;font-size:14px;font-weight:750}
body.tema-electro #app:not(.vista-lista) :is(.catalog-grid:not(.forzar-lista),.rail) .btn-add[data-add]:after{content:"Agregar"}
body.tema-electro.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add-texto{background:transparent;color:var(--accent-text);box-shadow:inset 0 0 0 1.5px var(--pri)}
@media(hover:hover){
  body.tema-electro.catalogo-vitrina :is(.catalog-grid,.rail) .btn-add:not(:disabled):hover{filter:brightness(.93)}
}
body.tema-electro :is(.btn-primary,.btn-confirmar,.checkout-continue,#btn-confirmar-pedido){font-weight:800}
body.tema-electro.catalogo-vitrina .pie-tienda{border-top:2px solid var(--pri)}

/* Ficha del producto: en todos los tamaños, nombre fuerte, precio grande
   y el botón grande del segundo color. */
body.tema-electro .pd-nombre{font-weight:800;letter-spacing:-.02em}
body.tema-electro.catalogo-vitrina .pd-precio{font-size:30px;font-weight:800;color:var(--ink)}
body.tema-electro.catalogo-vitrina .pd-precio .viejo{font-size:15px;font-weight:500}
body.tema-electro.catalogo-vitrina .pd-eyebrow{color:var(--accent-text)}
body.tema-electro.catalogo-vitrina .pd-hero .pd-imagen-fallback{font-size:16px;font-weight:600;color:var(--ink-soft);background:var(--paper-2)}
body.tema-electro.catalogo-vitrina .pd-footer .btn-confirmar:not(:disabled){background:var(--sec);color:var(--on-sec);box-shadow:none;font-weight:800}
@supports selector(:has(*)){
  /* «Disponible» solo cuando el botón de compra está habilitado. */
  body.tema-electro.catalogo-vitrina #detalle-cuerpo:has(#pd-add:not(:disabled)) .pd-precio:after{content:"✓ Disponible";display:block;margin-top:8px;font-size:13.5px;font-weight:700;letter-spacing:0;color:var(--ok)}
}
@media(min-width:900px){
  body.tema-electro.catalogo-vitrina #ov-detalle .sheet{max-width:1180px}
  /* Dos columnas. La foto ocupa la izquierda (sus filas terminan en una de
     1fr, así su alto no separa los datos de la derecha; 30 filas alcanzan
     para muchos grupos de adicionales); a la derecha los datos se ordenan
     como una página de compra. */
  body.tema-electro.catalogo-vitrina #detalle-cuerpo{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);grid-template-rows:repeat(30,auto) 1fr;column-gap:36px;row-gap:0;align-items:start;max-height:none;overflow:visible;padding:32px 32px 36px}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo :is(.pd-body,.pd-resumen){display:contents}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-visual{display:flex;flex-direction:column;gap:12px;grid-column:1;grid-row:1 / 32;align-self:start;min-width:0}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .skeleton-detalle{grid-column:1 / -1}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-hero{position:relative;top:auto;grid-column:auto;grid-row:auto;width:100%;aspect-ratio:1;max-height:none;min-height:0;padding:28px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-hero img{width:100%;height:100%;max-height:none;object-fit:contain}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-galeria{grid-column:auto;grid-row:auto;padding:0;gap:10px}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-galeria button{width:72px;height:72px;flex-basis:72px;border:1.5px solid var(--line);border-radius:8px}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-galeria button[aria-pressed=true]{border:2px solid var(--pri)}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo :is(.pd-resumen > *,.pd-footer){grid-column:2;min-width:0}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-eyebrow{order:1;margin:0 0 8px}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-nombre{order:2;margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.15}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-meta{order:3;margin:8px 0 0;font-size:13px}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-retiro-aviso{order:4;margin:14px 0 0}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .grupo{order:5}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-aclaracion{order:6;margin:4px 0 0}
  /* Caja de compra: precio, avisos y el pie (cantidad y botón) en un solo recuadro. */
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-precio{order:7;margin:20px 0 0;padding:20px 22px 6px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--card);font-size:34px;line-height:1.1}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-ultimas{order:8;justify-self:stretch;margin:0;padding:0 22px 8px;border:1px solid var(--line);border-width:0 1px;border-radius:0;background:var(--card)}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-info{order:9;margin:0;padding:6px 22px 10px;border:1px solid var(--line);border-width:0 1px;border-radius:0;background:var(--card)}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-footer{order:10;position:static;z-index:auto;width:auto;max-width:none;margin:0;padding:14px 22px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--card);box-shadow:none}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-footer .btn-confirmar{flex:1 1 100%;order:2;min-height:52px;border-radius:8px;font-size:15.5px}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-utilidades{order:3;margin:12px 0 0}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-desc{order:12;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);color:var(--ink);font-size:14.5px;line-height:1.65;white-space:pre-line}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-desc:before{content:"Descripción";display:block;margin-bottom:6px;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:normal}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-relacionados{order:20;grid-column:1 / -1;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--line-soft)}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo .pd-relacionados h3{font-size:20px;font-weight:800}
  /* Sin foto: una sola columna centrada. */
  body.tema-electro.catalogo-vitrina #detalle-cuerpo.pd-sin-foto{grid-template-columns:minmax(0,640px);justify-content:center}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo.pd-sin-foto .pd-visual{display:none}
  body.tema-electro.catalogo-vitrina #detalle-cuerpo.pd-sin-foto :is(.pd-resumen > *,.pd-footer){grid-column:1}
}
@media(max-width:899px){
  body.tema-electro.catalogo-vitrina .pd-precio{font-size:26px}
}