@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* =========================================================================
   REPUESTOS JUANITO — Industrial Claro
   Tema hijo de estilo cargado sobre "classic" (PrestaShop 8)
   Prefijo .jn- para todo lo propio. Home bajo .juanito-home
   ========================================================================= */

:root{
  --jn-ink:#12151b;
  --jn-ink-2:#1b2029;
  --jn-body:#3c4552;
  --jn-muted:#6c7583;
  --jn-line:#e5e8ec;
  --jn-line-2:#d7dbe1;
  --jn-bg:#ffffff;
  --jn-surface:#f4f6f8;
  --jn-surface-2:#eceff3;
  --jn-red:#e01423;
  --jn-red-dk:#b30d19;
  --jn-orange:#ff6a00;
  --jn-grad:linear-gradient(100deg,#e01423 0%,#ff6a00 100%);
  --jn-radius:8px;
  --jn-radius-sm:5px;
  --jn-shadow-sm:0 1px 2px rgba(18,21,27,.06),0 2px 8px rgba(18,21,27,.05);
  --jn-shadow:0 10px 30px -12px rgba(18,21,27,.22);
  --jn-shadow-lg:0 30px 60px -22px rgba(18,21,27,.35);
  --jn-container:1240px;
  --jn-font:'Barlow',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --jn-display:'Barlow Semi Condensed',var(--jn-font);
  --jn-mono:'Space Mono','SFMono-Regular',Consolas,monospace;
}

/* ---------- Base global (ligero, seguro para el resto del sitio) ---------- */
body{ font-family:var(--jn-font); color:var(--jn-body); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--jn-display); color:var(--jn-ink); }
a{ color:var(--jn-ink); }
a:hover{ color:var(--jn-red); }

/* Alinear el acento por defecto de classic (turquesa) con la identidad roja.
   Cambio global de base; el resto de páginas se refinarán en la siguiente fase. */
.btn-primary,
.ps-emailsubscription .btn-primary{
  background-color:var(--jn-red); border-color:var(--jn-red); color:#fff; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.ps-emailsubscription .btn-primary:hover{
  background-color:var(--jn-red-dk); border-color:var(--jn-red-dk); color:#fff; }
.text-primary{ color:var(--jn-red) !important; }

/* ---------- Utilidades propias ---------- */
.jn-container{ max-width:var(--jn-container); margin-inline:auto; padding-inline:24px; }
.jn-section{ padding:72px 0; }
.jn-eyebrow{
  display:inline-block; font-family:var(--jn-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--jn-red); font-weight:700; margin-bottom:14px;
}
.jn-eyebrow--light{ color:#ff8a3c; }
.jn-title{
  font-family:var(--jn-display); font-weight:800; letter-spacing:-.01em; line-height:1.02;
  font-size:clamp(28px,4.2vw,46px); text-transform:uppercase; margin:0;
}
.jn-lead{ color:var(--jn-muted); font-size:17px; max-width:56ch; margin:14px 0 0; line-height:1.6; }
.jn-head{ margin-bottom:38px; }
.jn-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.jn-link{ font-family:var(--jn-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:15px; color:var(--jn-ink); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.jn-link:hover{ color:var(--jn-red); }

/* ---------- Botones ---------- */
.jn-btn{
  --_bg:var(--jn-ink); --_fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--jn-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:15px; line-height:1; padding:15px 26px; border-radius:var(--jn-radius-sm);
  background:var(--_bg); color:var(--_fg); border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.jn-btn:hover{ transform:translateY(-2px); color:var(--_fg); }
.jn-btn:active{ transform:translateY(0); }
.jn-btn--primary{ background:var(--jn-red); color:#fff; box-shadow:0 10px 24px -10px rgba(224,20,35,.7); }
.jn-btn--primary:hover{ background:var(--jn-red-dk); color:#fff; box-shadow:0 14px 30px -10px rgba(224,20,35,.85); }
.jn-btn--ghost{ background:transparent; color:var(--jn-ink); border-color:var(--jn-line-2); }
.jn-btn--ghost:hover{ border-color:var(--jn-ink); background:var(--jn-ink); color:#fff; }
.jn-btn--ghost-light{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(2px); }
.jn-btn--ghost-light:hover{ background:#fff; color:var(--jn-ink); border-color:#fff; }
.jn-btn--lg{ padding:17px 32px; font-size:16px; }

/* =========================================================================
   HERO  (fotos a la izquierda de la diagonal + llantas sobre fondo blanco)
   ========================================================================= */
.jn-hero{ position:relative; overflow:hidden; background:#fff; color:#fff; isolation:isolate; }
/* Región de fotos: recortada a la izquierda de la diagonal naranja (amplia) */
.jn-hero__photos{ position:absolute; inset:0; z-index:0;
  clip-path:polygon(0 0, 69% 0, 57% 100%, 0 100%); }
.jn-hero__photos::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(9,11,15,.86) 0%, rgba(9,11,15,.52) 36%, rgba(9,11,15,.2) 66%, rgba(9,11,15,.04) 100%),
    linear-gradient(0deg, rgba(9,11,15,.5) 0%, transparent 30%); }
.jn-hero__slide{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06); transition:opacity 1.1s ease, transform 6.5s ease; }
.jn-hero__slide.is-active{ opacity:1; transform:scale(1); }
/* Línea naranja diagonal sobre la costura foto/blanco */
.jn-hero__accent{ position:absolute; z-index:3; top:-10%; left:63%; width:60px; height:130%;
  background:var(--jn-grad); transform:translateX(-50%) rotate(13.5deg); pointer-events:none;
  box-shadow:0 0 70px 8px rgba(224,20,35,.4); }
.jn-hero__inner{ position:relative; z-index:4; display:grid; grid-template-columns:1.28fr .72fr;
  gap:20px; align-items:center; min-height:600px; padding-block:60px; }
.jn-hero__copy{ max-width:580px; }
.jn-hero .jn-eyebrow{ color:#ff5a48; }
.jn-hero__title{
  font-family:var(--jn-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(40px,6.4vw,80px); line-height:.94; letter-spacing:-.015em; margin:6px 0 0;
  color:#fff; text-shadow:0 2px 34px rgba(0,0,0,.5);
}
.jn-hero__title em{ font-style:normal; color:#ff3b45; }
.jn-hero__sub{ margin:22px 0 0; font-size:18px; line-height:1.6; color:rgba(255,255,255,.87); max-width:50ch;
  text-shadow:0 1px 18px rgba(0,0,0,.45); }
.jn-hero__cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.jn-hero__stats{ display:flex; gap:34px; margin:40px 0 0; padding:24px 0 0; list-style:none;
  border-top:1px solid rgba(255,255,255,.22); }
.jn-hero__stats li{ display:flex; flex-direction:column; }
.jn-hero__stats strong{ font-family:var(--jn-display); font-weight:800; font-size:30px; color:#fff;
  line-height:1; }
.jn-hero__stats span{ font-family:var(--jn-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.66); margin-top:6px; }

/* Media (carrusel de llantas) sobre el lado blanco */
.jn-hero__media{ position:relative; z-index:4; display:flex; align-items:center; justify-content:center; min-height:440px; }
.jn-hero__wheels{ position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin-inline:auto;
  transform:translateX(-12%); }
.jn-hero__wheel{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .7s ease;
  filter:drop-shadow(0 26px 34px rgba(18,21,27,.34)); }
.jn-hero__wheel.is-active{ opacity:1; animation:jn-float 7s ease-in-out infinite; }
@keyframes jn-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.jn-hero__tag{ position:absolute; z-index:5; background:#fff; color:var(--jn-ink);
  font-family:var(--jn-mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  padding:10px 14px; border-radius:6px; box-shadow:0 14px 34px rgba(18,21,27,.22);
  border:1px solid var(--jn-line); white-space:nowrap; }
.jn-hero__tag--1{ top:8%; left:-4%; }
.jn-hero__tag--1::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--jn-red); margin-right:8px; vertical-align:middle; }
.jn-hero__tag--2{ bottom:10%; right:-2%; }

/* =========================================================================
   TRUST STRIP
   ========================================================================= */
.jn-trust{ background:var(--jn-ink); color:#fff; }
.jn-trust__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.jn-trust__item{ display:flex; align-items:center; gap:16px; padding:26px 22px; min-width:0;
  border-right:1px solid rgba(255,255,255,.08); }
.jn-trust__tx{ min-width:0; }
.jn-trust__tx b, .jn-trust__tx span{ overflow-wrap:break-word; }
.jn-trust__item:last-child{ border-right:0; }
.jn-trust__ico{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  border-radius:8px; background:rgba(255,255,255,.06); color:var(--jn-red); }
.jn-trust__ico svg{ width:24px; height:24px; stroke:currentColor; }
.jn-trust__tx b{ display:block; font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
  font-size:15px; letter-spacing:.02em; color:#fff; }
.jn-trust__tx span{ display:block; font-size:13px; color:rgba(255,255,255,.6); margin-top:2px; }

/* =========================================================================
   COMPRAR POR DIÁMETRO
   ========================================================================= */
.jn-diam{ background:var(--jn-bg); }
.jn-diam__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.jn-diam__card{ position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:30px 12px; background:var(--jn-surface);
  border:1px solid var(--jn-line); border-radius:var(--jn-radius); text-decoration:none;
  overflow:hidden; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.jn-diam__card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--jn-grad); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.jn-diam__card:hover{ transform:translateY(-4px); background:#fff; border-color:var(--jn-line-2);
  box-shadow:var(--jn-shadow); }
.jn-diam__card:hover::before{ transform:scaleX(1); }
.jn-diam__num{ font-family:var(--jn-display); font-weight:800; font-size:44px; line-height:1;
  color:var(--jn-ink); }
.jn-diam__num i{ font-style:normal; color:var(--jn-red); font-size:26px; vertical-align:super; }
.jn-diam__label{ font-family:var(--jn-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--jn-muted); margin-top:8px; }
.jn-diam__go{ font-family:var(--jn-display); font-weight:700; text-transform:uppercase; font-size:12px;
  letter-spacing:.03em; color:var(--jn-red); margin-top:16px; opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease; }
.jn-diam__card:hover .jn-diam__go{ opacity:1; transform:translateY(0); }

/* =========================================================================
   PRODUCTOS DESTACADOS  (estiliza salida de ps_featuredproducts)
   ========================================================================= */
.jn-featured{ background:var(--jn-surface); }
/* Pestañas Nuevo / Populares / Lo más vendido */
.jn-tabs{ display:flex; gap:4px; margin:0 0 30px; flex-wrap:wrap; border-bottom:1px solid var(--jn-line); }
.jn-tab{ font-family:var(--jn-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:15px; color:var(--jn-muted); background:none; border:0; cursor:pointer;
  padding:12px 18px; position:relative; transition:color .2s ease; }
.jn-tab:hover{ color:var(--jn-ink); }
.jn-tab.is-active{ color:var(--jn-ink); }
.jn-tab.is-active::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px;
  background:var(--jn-grad); border-radius:3px 3px 0 0; }
.jn-tabpanel[hidden]{ display:none; }
/* ocultar título/estructura por defecto de los módulos (usamos nuestra cabecera propia) */
.jn-featured__mod section > h1,
.jn-featured__mod section > h2,
.jn-featured__mod .products-section-title{ display:none; }
/* Rejilla: neutralizamos el float/ancho fijo de la miniatura de classic */
.jn-featured__mod .products{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:0; padding:0; list-style:none; }
.jn-featured__mod .js-product{
  width:100% !important; max-width:none !important; float:none !important;
  margin:0 !important; padding:0 !important; list-style:none; }
.jn-featured__mod .product-miniature{
  display:block !important; width:100% !important; height:100% !important; margin:0 !important; }
.jn-featured__mod .thumbnail-container,
.jn-featured__mod .thumbnail-top,
.jn-featured__mod .product-description{
  width:100% !important; max-width:none !important; height:auto !important; position:relative; margin:0; }
.jn-featured__mod .product{
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius); overflow:hidden;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  height:100%; display:flex; flex-direction:column; }
.jn-featured__mod .product:hover{ transform:translateY(-4px); box-shadow:var(--jn-shadow); border-color:var(--jn-line-2); }
.jn-featured__mod .thumbnail-top{ background:#fff; }
.jn-featured__mod .product-thumbnail{ display:block; padding:16px; background:#fff; }
.jn-featured__mod .product-thumbnail img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  mix-blend-mode:multiply; }
.jn-featured__mod .product-description{ padding:6px 18px 20px; }
.jn-featured__mod .product-title,
.jn-featured__mod .product-description h3{ font-family:var(--jn-display); font-weight:700;
  text-transform:none; font-size:16px; line-height:1.25; margin:0 0 10px; min-height:2.5em; }
.jn-featured__mod .product-title a,
.jn-featured__mod .product-description h3 a{ color:var(--jn-ink); }
.jn-featured__mod .product-title a:hover{ color:var(--jn-red); }
.jn-featured__mod .product-price-and-shipping{ font-family:var(--jn-display); }
.jn-featured__mod .price{ color:var(--jn-red); font-weight:800; font-size:22px; }
.jn-featured__mod .regular-price{ color:var(--jn-muted); font-weight:500; font-size:15px; text-decoration:line-through; }
.jn-featured__mod .product-flags{ position:absolute; top:12px; left:12px; z-index:3; padding:0; margin:0; }
.jn-featured__mod .product-flag{ font-family:var(--jn-mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; background:var(--jn-ink); color:#fff;
  padding:5px 9px; border-radius:4px; margin:0 0 6px; display:inline-block; }
.jn-featured__mod .product-flag.discount,
.jn-featured__mod .product-flag.on-sale{ background:var(--jn-red); }
.jn-featured__mod .product-flag.new{ background:var(--jn-orange); }
.jn-featured__mod .highlighted-informations,
.jn-featured__mod .variant-links{ display:none; }
.jn-featured__mod section > a[href]{ /* enlace "todos los productos" del módulo */
  display:none; } /* usamos nuestro propio "Ver todo" en la cabecera */

/* =========================================================================
   MARCAS
   ========================================================================= */
.jn-brands{ background:var(--jn-bg); }
.jn-brands__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.jn-brand{ display:flex; align-items:center; justify-content:center; padding:22px 18px;
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius); min-height:96px;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.jn-brand img{ max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:filter .2s ease, opacity .2s ease; mix-blend-mode:multiply; }
.jn-brand:hover{ transform:translateY(-3px); box-shadow:var(--jn-shadow); border-color:var(--jn-line-2); }
.jn-brand:hover img{ filter:grayscale(0); opacity:1; }

/* =========================================================================
   OUTLET / OFERTAS
   ========================================================================= */
.jn-outlet{ position:relative; overflow:hidden; background:var(--jn-ink); color:#fff; }
.jn-outlet::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 400px at 88% 120%,rgba(224,20,35,.55),transparent 60%),
             radial-gradient(700px 300px at 10% -20%,rgba(255,106,0,.28),transparent 60%); }
.jn-outlet__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.2fr .8fr;
  align-items:center; gap:30px; padding:66px 24px; }
.jn-outlet__title{ font-family:var(--jn-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,4.6vw,54px); line-height:1; margin:8px 0 0; color:#fff; }
.jn-outlet__title span{ color:#ff8a3c; }
.jn-outlet__copy p{ color:rgba(255,255,255,.72); font-size:17px; margin:18px 0 28px; max-width:46ch; }
.jn-outlet__media{ display:flex; justify-content:flex-end; align-items:center; }
.jn-outlet__badge{ font-family:var(--jn-display); font-weight:800; text-transform:uppercase;
  text-align:center; width:210px; height:210px; border-radius:50%; display:grid; place-content:center;
  background:var(--jn-grad); box-shadow:0 30px 60px -20px rgba(224,20,35,.8);
  transform:rotate(-8deg); }
.jn-outlet__badge b{ font-size:64px; line-height:.9; display:block; }
.jn-outlet__badge small{ font-family:var(--jn-mono); font-size:12px; letter-spacing:.1em;
  font-weight:700; display:block; margin-top:6px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .jn-diam__grid{ grid-template-columns:repeat(3,1fr); }
  .jn-brands__grid{ grid-template-columns:repeat(4,1fr); }
  .jn-featured__mod .products{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .jn-hero__inner{ grid-template-columns:1fr; min-height:auto; padding-block:40px; }
  .jn-hero__accent{ display:none; }
  .jn-hero__photos{ clip-path:none; }
  .jn-hero__photos::after{ background:linear-gradient(180deg, rgba(9,11,15,.84) 0%, rgba(9,11,15,.52) 46%, rgba(9,11,15,.9) 100%); }
  .jn-hero__tag{ display:none; }
  .jn-hero__media{ min-height:auto; margin-top:24px; background:#fff; border-radius:14px; padding:22px 22px 10px;
    box-shadow:0 20px 45px -20px rgba(0,0,0,.5); }
  .jn-hero__wheels{ max-width:340px; transform:none; }
  .jn-trust__grid{ grid-template-columns:repeat(2,1fr); }
  .jn-trust__item:nth-child(2){ border-right:0; }
  .jn-trust__item{ border-bottom:1px solid rgba(255,255,255,.08); }
  .jn-outlet__inner{ grid-template-columns:1fr; }
  .jn-outlet__media{ justify-content:flex-start; }
}
@media (max-width:640px){
  .jn-section{ padding:52px 0; }
  .jn-diam__grid{ grid-template-columns:repeat(2,1fr); }
  .jn-brands__grid{ grid-template-columns:repeat(3,1fr); }
  .jn-featured__mod .products{ grid-template-columns:repeat(2,1fr); }
  .jn-hero__stats{ gap:22px; flex-wrap:wrap; }
  .jn-hero__cta{ flex-direction:column; align-items:stretch; }
  .jn-hero__cta .jn-btn{ width:100%; }
  .jn-hero__tag{ display:none; }
  .jn-trust__item{ padding:18px 14px; gap:12px; }
  .jn-trust__ico{ width:38px; height:38px; }
  .jn-trust__ico svg{ width:20px; height:20px; }
  .jn-trust__tx b{ font-size:14px; }
  .jn-trust__tx span{ font-size:12px; }
  .jn-diam__num{ font-size:38px; }
  .jn-outlet__badge{ width:150px; height:150px; }
  .jn-outlet__badge b{ font-size:44px; }
}

/* ---------- Accesibilidad: reduce-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .jn-hero__wheel{ animation:none; }
  *{ transition-duration:.001ms !important; }
}

/* =========================================================================
   =========================================================================
   PARTE 2 — SITIO GLOBAL (cabecera, pie, categorías, ficha, formularios,
   carrito y checkout). Mismo sistema "industrial claro" de la home.
   ========================================================================= */

/* ---------- CABECERA: barra superior oscura (solo escritorio) ---------- */
@media (min-width: 768px) {
  #header .header-nav{
    background:var(--jn-ink); border-bottom:0; color:rgba(255,255,255,.66); max-height:none; }
  #header .header-nav .container{ display:flex; align-items:center; }
  #header .header-nav .right-nav{ align-items:center; }
  #header .header-nav a{ color:#fff; }
  #header .header-nav a:hover{ color:#ff8a8a; }
  #header .header-nav #_desktop_contact_link{ color:rgba(255,255,255,.6); }
  #header .header-nav #_desktop_contact_link a{ font-weight:700; }
  /* botón "Contacte con nosotros" en la barra superior, junto al teléfono */
  #header .header-nav .jn-nav1{ display:flex; align-items:center; gap:20px; }
  #header .header-nav .jn-topcontact{ display:inline-flex; align-items:center; gap:6px;
    padding:5px 15px; border:1px solid rgba(255,255,255,.35); border-radius:999px;
    color:#fff; font-size:13px; font-weight:600; white-space:nowrap; line-height:1; }
  #header .header-nav .jn-topcontact:hover{ background:var(--jn-red); border-color:var(--jn-red); color:#fff; }
  #header .header-nav .jn-topcontact .material-icons{ font-size:16px; }
  #header .header-nav .user-info a{ font-weight:600; }
  #header .header-nav .user-info .material-icons,
  #header .header-nav .blockcart .material-icons{ color:#fff; }
  /* carrito como pastilla roja */
  #header .header-nav .blockcart{
    background:var(--jn-red); border-radius:6px; margin-left:14px; padding:.65rem 1rem; height:auto; }
  #header .header-nav .blockcart.active{ background:var(--jn-red-dk); }
  #header .header-nav .blockcart,
  #header .header-nav .blockcart span,
  #header .header-nav .blockcart a{ color:#fff; }
  #header .header-nav .blockcart:hover{ background:var(--jn-red-dk); }
}

/* cabecera principal fija en escritorio */
/* posicionada desde tablet para que su z-index mande sobre el contenido
   (la banda de categoría) a TODOS los anchos de escritorio, no solo ≥992 */
@media (min-width: 768px) {
  #header{ position:relative; z-index:1000; background:#fff; }
}
@media (min-width: 992px) {
  #header{ position:sticky; top:0;
    box-shadow:0 2px 14px rgba(18,21,27,.07); }
}

/* menú principal condensado con subrayado rojo */
#_desktop_top_menu .top-menu[data-depth="0"] > li > a{
  font-family:var(--jn-display); font-weight:700; letter-spacing:.03em;
  color:var(--jn-ink); position:relative; padding-bottom:6px; }
#_desktop_top_menu .top-menu[data-depth="0"] > li > a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  background:var(--jn-grad); border-radius:2px; transform:scaleX(0);
  transform-origin:left; transition:transform .22s ease; }
#_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover{ color:var(--jn-red); }
#_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover::after{ transform:scaleX(1); }
#_desktop_top_menu .top-menu .submenu a:hover{ color:var(--jn-red); }

/* buscador */
#search_widget input[type="text"]{
  background:var(--jn-surface); border:1px solid var(--jn-line); border-radius:6px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
#search_widget input[type="text"]:focus{
  background:#fff; border-color:var(--jn-red); outline:none;
  box-shadow:0 0 0 3px rgba(224,20,35,.12); }

/* ---------- MIGAS DE PAN ---------- */
.breadcrumb{ background:transparent; padding-left:0; }
.breadcrumb li{ font-family:var(--jn-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; }
.breadcrumb li a{ color:var(--jn-muted); }
.breadcrumb li a:hover{ color:var(--jn-red); }
.breadcrumb li:last-child span{ color:var(--jn-ink); font-weight:700; }

/* ---------- PIE OSCURO ---------- */
#footer{ background:var(--jn-ink); color:rgba(255,255,255,.62); padding-top:12px; }
#footer .footer-container{ background:transparent; box-shadow:none; margin-top:0;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.08); overflow:hidden; }
#footer h3, #footer .h3, #footer p.h4, #footer .h4,
#footer .footer-container .h3 a{
  font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:14px; color:#fff; }
#footer li a, #footer .block-contact, #footer .block-contact a,
#footer .links a{ color:rgba(255,255,255,.62); }
#footer li a:hover, #footer .block-contact a:hover{ color:#fff; }
#footer .block_newsletter p{ color:rgba(255,255,255,.5); font-size:13px; }
#footer .block_newsletter .h4,
#footer .block_newsletter p.h4{ color:#fff; }
#footer .block_newsletter input[type="email"]{
  background:#fff; border:1px solid transparent; border-radius:6px 0 0 6px; }
#footer .copyright, #footer .copyright a{ color:rgba(255,255,255,.38); }
#footer .material-icons{ color:rgba(255,255,255,.5); }

/* ---------- LISTADOS (categoría / búsqueda / marca) ---------- */
#products .product-miniature{
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius);
  overflow:hidden; width:100%;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
#products .product-miniature:hover{
  transform:translateY(-4px); box-shadow:var(--jn-shadow); border-color:var(--jn-line-2); }
#products .product-miniature .thumbnail-container{
  width:100%; height:auto; margin:0; box-shadow:none; }
#products .product-miniature .product-thumbnail img{
  width:100%; aspect-ratio:1/1; object-fit:cover; }
#products .product-miniature .product-description{
  box-shadow:none; background:#fff; padding:8px 16px 18px; height:auto; }
#products .product-title a{
  font-family:var(--jn-display); font-weight:700; font-size:15px; line-height:1.3;
  color:var(--jn-ink); text-transform:none; }
#products .product-title a:hover{ color:var(--jn-red); }
#products .price{ color:var(--jn-red); font-family:var(--jn-display);
  font-weight:800; font-size:21px; }
#products .regular-price{ color:var(--jn-muted); font-size:14px; }
#products .product-flags{ padding:0; }
#products .product-flag{
  font-family:var(--jn-mono); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; background:var(--jn-ink); color:#fff; padding:5px 9px;
  border-radius:4px; box-shadow:none; margin-top:6px; }
#products .product-flag.discount, #products .product-flag.on-sale{ background:var(--jn-red); }
#products .product-flag.new{ background:var(--jn-orange); }
#products .highlighted-informations{ box-shadow:none; border-top:1px solid var(--jn-line);
  background:#fff; }
#products .quick-view{ font-family:var(--jn-display); font-weight:700; font-size:13px;
  text-transform:uppercase; color:var(--jn-muted); }
#products .quick-view:hover{ color:var(--jn-red); }

/* relacionados en ficha de producto */
.product-accessories .product-miniature{
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius);
  overflow:hidden; transition:transform .18s ease, box-shadow .2s ease; }
.product-accessories .product-miniature:hover{ transform:translateY(-4px); box-shadow:var(--jn-shadow); }

/* ---------- BANDA DE CATEGORÍA ---------- */
#js-product-list-header .block-category{
  /* el slash naranja/rojo va como FONDO (gradiente diagonal), NO como ::after con
     z-index. Así la banda NO crea contexto de apilado propio y el menú desplegable
     (header z:1000) queda SIEMPRE por encima. Fix definitivo jul 2026. */
  background:
    linear-gradient(112deg, transparent 0 66%, var(--jn-red) 70%, var(--jn-orange) 77%, transparent 81% 100%),
    var(--jn-ink);
  border:0; border-radius:var(--jn-radius); box-shadow:none;
  color:#fff; min-height:0; padding:34px 38px; margin-bottom:24px;
  position:relative; overflow:hidden; }  /* relative SIN z-index → contiene el texto pero no crea capa */
#js-product-list-header .block-category h1{
  font-family:var(--jn-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; font-size:clamp(26px,3.2vw,42px); color:#fff; margin:0; }
#js-product-list-header .block-category .category-cover{ display:none; }
#js-product-list-header #category-description,
#js-product-list-header #category-description p{ color:rgba(255,255,255,.66); margin-bottom:0; }

/* ---------- SIDEBAR (árbol de categorías y facetas) ---------- */
.block-categories{
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius);
  box-shadow:none; padding:20px; }
.block-categories .h6, .block-categories > a{
  font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
  font-size:15px; letter-spacing:.03em; color:var(--jn-ink); }
.block-categories .category-sub-menu li a{ color:var(--jn-body); }
.block-categories .category-sub-menu li a:hover{ color:var(--jn-red); }
#search_filters{
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius);
  box-shadow:none; padding:20px; }
#search_filters .facet .facet-title, #search_filters .h6{
  font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:.03em; color:var(--jn-ink); }
#search_filters .facet-label a{ color:var(--jn-body); }
#search_filters .facet-label a:hover{ color:var(--jn-red); }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--jn-red); }

/* fila de ordenación */
.products-sort-order .select-title{
  border:1px solid var(--jn-line-2); border-radius:6px; box-shadow:none;
  font-weight:600; color:var(--jn-ink); }
.products-sort-order .dropdown-menu{
  border:1px solid var(--jn-line); border-radius:8px;
  box-shadow:0 14px 34px -14px rgba(18,21,27,.25); }
.products-sort-order .select-list:hover{ background:var(--jn-surface); color:var(--jn-red); }
#js-product-list-top{ background:#fff; border:1px solid var(--jn-line);
  border-radius:var(--jn-radius); box-shadow:none; padding:12px 18px; }
.total-products p{ font-family:var(--jn-mono); font-size:13px; color:var(--jn-muted);
  text-transform:uppercase; letter-spacing:.06em; }

/* paginación */
.pagination .page-list{
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius);
  box-shadow:none; padding:10px 16px; }
.pagination a, .pagination span{ font-family:var(--jn-display); font-weight:700;
  color:var(--jn-ink); }
.pagination a:hover{ color:var(--jn-red); }
.pagination .current a, .pagination .current span{
  background:var(--jn-red); color:#fff; border-radius:6px; padding:3px 11px; }

/* ---------- FICHA DE PRODUCTO ---------- */
.product-prices .current-price,
.product-prices .current-price-value{
  color:var(--jn-red); font-family:var(--jn-display); font-weight:800;
  font-size:clamp(28px,3vw,40px); letter-spacing:-.01em; }
.product-prices .tax-shipping-delivery-label{
  font-family:var(--jn-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--jn-muted); }
h1.h1{ font-family:var(--jn-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; color:var(--jn-ink); }
.product-cover{ border:1px solid var(--jn-line); border-radius:var(--jn-radius);
  overflow:hidden; background:#fff; }
.product-cover img{ box-shadow:none; background:#fff; }
.product-images > li.thumb-container > .thumb{
  border:1px solid var(--jn-line); border-radius:6px; box-shadow:none; }
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover{ border-color:var(--jn-red); }
#quantity_wanted{ border:1px solid var(--jn-line-2); border-radius:6px 0 0 6px;
  height:46px; box-shadow:none; font-weight:700; }
.product-add-to-cart .add-to-cart{ padding:.8rem 1.9rem; font-family:var(--jn-display);
  font-weight:700; letter-spacing:.04em; border-radius:6px; }
.product-quantity .input-group-btn-vertical .btn{ border:1px solid var(--jn-line-2); }
/* pestañas de la ficha */
.tabs{ box-shadow:none; border:1px solid var(--jn-line); border-radius:var(--jn-radius); }
.tabs .nav-tabs{ border-bottom:1px solid var(--jn-line); }
.tabs .nav-tabs .nav-link{
  font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:.03em; color:var(--jn-muted); border:0; }
.tabs .nav-tabs .nav-link.active{
  color:var(--jn-ink); border:0; border-bottom:3px solid var(--jn-red); background:none; }
/* bloque de garantías en ficha */
.blockreassurance_product{ border-top:1px solid var(--jn-line); padding-top:16px; }
.blockreassurance_product .item-product{ width:34px; height:34px; padding:0; }
.blockreassurance_product img, #block-reassurance img{ width:26px; height:26px; }
.blockreassurance_product img.svg.invisible,
#block-reassurance img.invisible{ visibility:visible !important; }
.blockreassurance_product p.block-title{
  font-family:var(--jn-display); font-weight:700; font-size:14px; color:var(--jn-ink); }

/* ---------- FORMULARIOS GLOBALES ---------- */
.form-control{
  border:1px solid var(--jn-line-2); border-radius:6px; box-shadow:none;
  min-height:44px; background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease; }
.form-control:focus{
  border-color:var(--jn-red); outline:none; box-shadow:0 0 0 3px rgba(224,20,35,.12);
  background:#fff; color:var(--jn-ink); }
.form-control-label{ font-weight:600; color:var(--jn-ink); }
.input-group .input-group-btn > .btn[data-action="show-password"]{
  background:var(--jn-ink); font-family:var(--jn-display); letter-spacing:.05em;
  border-radius:0 6px 6px 0; }
.form-control-comment{ font-size:12.5px; color:var(--jn-muted); }
.btn-secondary, .btn-tertiary{
  font-family:var(--jn-display); font-weight:700; letter-spacing:.03em;
  border-radius:6px; }

/* ---------- CARRITO Y CHECKOUT ---------- */
.card, .page-content.card, .cart-grid-body .card, .cart-summary{
  box-shadow:none; border:1px solid var(--jn-line); border-radius:var(--jn-radius); }
.cart-grid{ margin-top:8px; }
.cart-item{ border-bottom:1px solid var(--jn-line); }
.product-line-info a.label{ color:var(--jn-ink); font-weight:600; }
.product-line-info a.label:hover{ color:var(--jn-red); }
.product-price strong, .cart-summary-line .value{ font-family:var(--jn-display); font-weight:700; }
.cart-total .label, .cart-total .value{ font-family:var(--jn-display); font-weight:800;
  text-transform:uppercase; }
.checkout-step{ box-shadow:none; border:1px solid var(--jn-line);
  border-radius:var(--jn-radius); margin-bottom:14px; }
.checkout-step .step-title{
  font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; color:var(--jn-ink); }
.checkout-step .step-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--jn-surface-2);
  font-weight:800; margin-right:6px; }
.checkout-step.-current .step-number{ background:var(--jn-red); color:#fff; }
.checkout-step.-complete .step-title .done{ color:#18a35a; }
.delivery-option{ background:var(--jn-surface); border-radius:8px; }
.payment-option{ padding:6px 0; }

/* ---------- AVISOS ---------- */
.alert{ border-radius:8px; }
.alert-danger{ background:#fdecec; border:1px solid #f5b5ba; color:#9c1521; }
.alert-success{ background:#e9f9f0; border:1px solid #b3e6c9; color:#116b3d; }
.alert-warning{ background:#fff7e8; border:1px solid #f5dfae; color:#8a6116; }

/* ---------- MODAL CARRITO ---------- */
#blockcart-modal .modal-content{ border:0; border-radius:12px;
  box-shadow:0 30px 70px -20px rgba(18,21,27,.45); }
#blockcart-modal .modal-header{ border-bottom:1px solid var(--jn-line); }
#blockcart-modal .modal-title{ font-family:var(--jn-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; }
#blockcart-modal .modal-title .material-icons{ color:#18a35a; }
#blockcart-modal .product-name{ color:var(--jn-ink); }
#blockcart-modal .product-price{ color:var(--jn-red); font-family:var(--jn-display);
  font-weight:800; font-size:20px; }

/* ---------- PIE: correcciones de contraste ---------- */
#footer p#block-newsletter-label{
  color:#fff; font-family:var(--jn-display); font-weight:700; font-size:18px;
  text-transform:none; }
#footer .block_newsletter{ padding-top:26px; padding-bottom:8px; }
#footer .block_newsletter form input[type="email"]{ min-height:44px; }
#footer p.text-sm-center, #footer p.text-sm-center a{
  color:rgba(255,255,255,.38); font-size:13px; }
#footer p.text-sm-center a:hover{ color:#fff; }
#footer .block_newsletter, #blockEmailSubscription_displayFooterBefore{
  background:transparent !important; }

/* ---------- MEGA-MENÚ ORDENADO (escritorio) ---------- */
@media (min-width: 768px) {
  #_desktop_top_menu .sub-menu{
    border:1px solid var(--jn-line); border-top:3px solid var(--jn-red);
    border-radius:0 0 10px 10px; box-shadow:0 26px 54px -20px rgba(18,21,27,.3);
    padding:26px 32px 16px; }
  /* columnas CSS: cada grupo (título + hijos) se mantiene entero */
  #_desktop_top_menu .sub-menu ul.top-menu[data-depth="1"]{
    column-width:225px; column-gap:36px; margin:0; }
  #_desktop_top_menu .sub-menu ul.top-menu[data-depth="1"] > li{
    float:none !important; width:auto !important; display:block;
    break-inside:avoid; -webkit-column-break-inside:avoid;
    margin:0 0 14px; padding:0; }
  /* títulos de grupo */
  #_desktop_top_menu .sub-menu a[data-depth="1"]{
    font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
    font-size:13.5px; letter-spacing:.03em; color:var(--jn-ink);
    display:block; padding:2px 0 4px; }
  #_desktop_top_menu .sub-menu a[data-depth="1"]:hover{ color:var(--jn-red); }
  /* hijos */
  #_desktop_top_menu .sub-menu ul.top-menu[data-depth="2"]{ margin:0 0 4px; }
  #_desktop_top_menu .sub-menu ul.top-menu[data-depth="2"] li{
    float:none !important; width:auto !important; }
  #_desktop_top_menu .sub-menu a[data-depth="2"]{
    display:block; font-size:13.5px; font-weight:400; text-transform:none;
    color:var(--jn-body); padding:3px 0 3px 10px; border-left:2px solid var(--jn-line); }
  #_desktop_top_menu .sub-menu a[data-depth="2"]:hover{
    color:var(--jn-red); border-left-color:var(--jn-red); }
  /* nietos (depth 3): más discretos */
  #_desktop_top_menu .sub-menu ul.top-menu[data-depth="3"] a{
    display:block; font-size:12.5px; color:var(--jn-muted); text-transform:none;
    padding:2px 0 2px 22px; }
  #_desktop_top_menu .sub-menu ul.top-menu[data-depth="3"] a:hover{ color:var(--jn-red); }
}

/* ---------- MAPA DEL SITIO EN COLUMNAS LIMPIAS ---------- */
.row.sitemap{
  display:block; column-width:250px; column-gap:44px;
  background:#fff; border:1px solid var(--jn-line); border-radius:var(--jn-radius);
  padding:32px 36px; margin:0; }
.row.sitemap > div{
  width:100% !important; max-width:100%; float:none !important;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  padding:0; margin:0 0 28px; }
.row.sitemap h2{
  font-family:var(--jn-display); font-weight:700; text-transform:uppercase;
  font-size:15px; letter-spacing:.03em; color:var(--jn-ink);
  border-bottom:2px solid var(--jn-red); display:inline-block;
  padding-bottom:4px; margin-bottom:10px; }
.row.sitemap ul{ margin:0; }
.row.sitemap li a{ display:block; color:var(--jn-body); font-size:14px; padding:3px 0; }
.row.sitemap li a:hover{ color:var(--jn-red); }
.row.sitemap ul.nested{ margin:0 0 4px 12px; border-left:2px solid var(--jn-line);
  padding-left:10px; }
.row.sitemap ul.nested a{ font-size:13px; color:var(--jn-muted); }

/* ---------- MENÚ: sin desplegable en INICIO + scroll en menús altos ---------- */
/* El desplegable de Inicio duplica el árbol completo del catálogo (las mismas
   secciones que ya son items del menú) y era más alto que la pantalla. */
#top-menu > li#category-2 > .sub-menu{ display:none !important; }
@media (min-width: 768px) {
  #_desktop_top_menu .sub-menu{
    max-height:calc(100vh - 180px); overflow:auto; overscroll-behavior:contain; }
}

/* ---------- PIE: rejilla ordenada de 4 columnas (escritorio) ---------- */
@media (min-width: 768px) {
  #footer .footer-container .row:has(.block-contact){
    display:grid; grid-template-columns:repeat(4, 1fr); gap:10px 36px;
    align-items:start; }
  #footer .footer-container .row:has(.block-contact) > .block-contact,
  #footer .footer-container .row:has(.block-contact) > .links.wrapper{
    width:auto; max-width:none; padding:0; }
  #footer .block-social{ display:none; } /* sin redes configuradas: ul vacío */
  #footer .footer-container .col-md-6.links{ display:contents; }
  #footer .footer-container .col-md-6.links > .row{ display:contents; }
  #footer .footer-container .col-md-6.links .col-md-6.wrapper{
    width:auto; max-width:none; padding:0; }
}

/* ---------- MEGA-MENÚ: capa y ocultado instantáneo (fix jul 2026) ---------- */
/* 1) El desplegable por ENCIMA del contenido de la página (banda de categoría,
      rejilla de productos) — el z-index del tema (18) se quedaba por debajo. */
/* 2) SIN fundido: el tema usa transition opacity/visibility 0.5s → al quitar el
      ratón se desvanecía poco a poco y solapaba. Ahora aparece/desaparece al instante. */
@media (min-width: 768px) {
  /* el header ya es capa superior (position + z:1000, ver regla de cabecera).
     El desplegable, dentro del header, por encima de todo el contenido. */
  #_desktop_top_menu .sub-menu,
  #header .top-menu .sub-menu {
    z-index: 1001 !important;
    transition: opacity .15s ease, visibility .15s ease !important;
  }
}
/* 3) El desplegable ABRE POR DEBAJO de la barra del menú, sin taparla.
   El mega-menú lleva la clase .popover de Bootstrap → `top:0` lo colocaba a la
   altura de la propia fila del menú (la caja blanca tapaba INICIO/SOBRE NOSOTROS…).
   La fila del menú mide ~36px de alto → lo bajamos a top:40px (justo bajo la línea
   roja). Solo ≥992 (escritorio, barra en una sola fila). Fix definitivo jul 2026. */
@media (min-width: 992px) {
  #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu {
    top: 40px !important;
    padding-top: 14px !important;
  }
}