/* ============================================================================
 * Fossil Natura — product.css
 * Extraído de templates/catalog/product.tpl (líneas 909-1924) el 2026-05-16.
 * Cargado solo en la ficha de producto vía <link> en product.tpl.
 * ============================================================================ */

/* ════════════════════════════════════════════════════════════════
   PRODUCT PAGE — Portado de _preview/header.php (F2.12-styling)
   Tokens: usa los del DESIGN-SYSTEM declarados en custom.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ───────────────────────────────────────────── */
.fn-prod-page{
  background: var(--bg-secondary);
  /* Full-bleed SIEMPRE: en fossilnatura el layout envuelve el contenido
     en .fn-page-container (no .container Bootstrap), por lo que la regla
     condicional .container .fn-prod-page no aplicaba y el anchor bar
     se quedaba con el ancho del padre (1440px) en vez de ocupar el
     viewport completo. Aplicamos el truco 100vw + margin-left negativo
     globalmente para que .fn-prod-page (y sus hijos como .fn-anchor-bar)
     ocupen siempre el ancho total del viewport.
     2026-05-15: cambio de width:100% condicional → width:100vw global. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  padding-bottom: 32px;
}
.fn-prod-page__container{ max-width: 1440px; margin: 0 auto; padding: 32px; }

/* ── F2.12-styling-fix13 — Wrappers full-width SIN incluir .container ──
   Antes agrupábamos .container con main/#wrapper/#content y todos a 100%.
   Eso hacía que .container quedara 100% (2560px) y mi regla 1440 perdiera
   por especificidad. Ahora separamos: wrappers van a 100%, .container
   lleva su PROPIO bloque con width:1440px.
   (Actualizado 2026-05-15: 1280 → 1440 / padding 24 → 32) */
html body.page-product main,
html body.page-product section#wrapper,
html body.page-product #wrapper,
html body.page-product #content-wrapper,
html body.page-product #main,
html body.page-product section#content,
html body.page-product #content,
html body#product main,
html body#product section#wrapper,
html body#product #wrapper,
html body#product #content-wrapper,
html body#product #main,
html body#product section#content,
html body#product #content,
html body[class*="product-id-"] main,
html body[class*="product-id-"] #wrapper,
html body[class*="product-id-"] #content-wrapper,
html body[class*="product-id-"] #content{
  overflow-x: visible !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* .container a 1440px (mismo que la cabecera) — su propio bloque para
   que no compita con la regla de wrappers de arriba. Forzamos en TODOS
   los breakpoints Bootstrap (576/768/992/1200) donde el classic
   redefine width.
   (Actualizado 2026-05-15: 1280 → 1440 / padding 24 → 32) */
html body.page-product #wrapper > .container,
html body#product #wrapper > .container,
html body[class*="product-id-"] #wrapper > .container,
html body.page-product .container,
html body#product .container,
html body[class*="product-id-"] .container{
  width: 1440px !important;
  max-width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  overflow-x: visible !important;
  overflow: visible !important;
  background: transparent !important;
}
@media (min-width: 576px){
  html body.page-product #wrapper > .container,
  html body#product #wrapper > .container,
  html body[class*="product-id-"] #wrapper > .container{ width: 1440px !important; max-width: 100% !important; }
}
@media (min-width: 768px){
  html body.page-product #wrapper > .container,
  html body#product #wrapper > .container,
  html body[class*="product-id-"] #wrapper > .container{ width: 1440px !important; max-width: 100% !important; }
}
@media (min-width: 992px){
  html body.page-product #wrapper > .container,
  html body#product #wrapper > .container,
  html body[class*="product-id-"] #wrapper > .container{ width: 1440px !important; max-width: 100% !important; }
}
@media (min-width: 1200px){
  html body.page-product #wrapper > .container,
  html body#product #wrapper > .container,
  html body[class*="product-id-"] #wrapper > .container{ width: 1440px !important; max-width: 100% !important; }
}

/* html/body como contenedores raíz: recortan overflow horizontal */
html, body.page-product, body#product, body[class*="product-id-"]{
  overflow-x: hidden !important;
}

/* Esconder el breadcrumb nativo PS (mantenemos solo .fn-breadcrumb).
   Selectores múltiples porque PS y módulos pueden renderizarlo de varias formas. */
nav.breadcrumb:not(.fn-breadcrumb),
ol.breadcrumb:not(.fn-breadcrumb),
section.breadcrumb:not(.fn-breadcrumb),
div.breadcrumb:not(.fn-breadcrumb),
.breadcrumb:not(.fn-breadcrumb),
[data-depth]:not(.fn-breadcrumb),
[aria-label="breadcrumb"]:not(.fn-breadcrumb),
[aria-label="Breadcrumb"]:not(.fn-breadcrumb),
[aria-label="Migas de pan"]:not(.fn-breadcrumb),
.page-breadcrumb:not(.fn-breadcrumb),
.breadcrumb-wrapper:not(.fn-breadcrumb){ display: none !important; }
/* Por si PS lo mete en un wrapper sin clase identificable, ocultar cualquier
   <nav> u <ol> que contenga el texto "Inicio" antes de nuestro .fn-prod-page */
body#product > #wrapper > nav,
body[id^="product"] > #wrapper > nav,
body#product .breadcrumb,
body[id^="product"] .breadcrumb,
.fn-prod-page ~ .breadcrumb,
.fn-prod-page + .breadcrumb,
.breadcrumb:not(.fn-breadcrumb) + .fn-prod-page ~ .breadcrumb{ display: none !important; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.fn-breadcrumb{
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--muted); margin-bottom: 18px; letter-spacing: 0;
}
.fn-breadcrumb a{ color: var(--muted); text-decoration: none; transition: color .15s; }
.fn-breadcrumb a:hover{ color: var(--ink); }
.fn-breadcrumb .sep{ color: var(--muted-2); }
.fn-breadcrumb .is-current{ color: var(--ink); font-weight: 500; }

/* ── Anchor bar (sticky top desktop, fixed-bottom mobile) ───── */
.fn-anchor-bar{
  position: sticky; top: 0; z-index: 30;
  background: var(--bg-primary);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* 2026-05-15: full-bleed independiente del padre. Si .fn-prod-page ya es
     100vw, este margin/width no hace nada (sale 0). Si por cualquier razón
     el padre se queda recortado, el bar se extiende igual al 100% del
     viewport. Cinturón + tirantes. */
  width: 100vw;
  margin: 0 calc(50% - 50vw) 24px;
  transition: box-shadow .15s;
}
.fn-anchor-bar.is-stuck{ box-shadow: 0 4px 12px rgba(14,14,16,.06); }
.fn-anchor-bar__inner{
  /* Padding 0 64px (no 32) para alinear el TEXTO del sticky con el contenido
     VISIBLE de las cards de abajo (.fn-prod-section). Las cards llevan padding
     32 dentro del .fn-prod-page__container que también lleva padding 32 →
     contenido visible inset 64. El bar al ser full-bleed (100vw) tiene que
     compensar ese doble inset para que el breadcrumb / nav / precio caigan
     a la altura del contenido de las cards, no del borde. */
  max-width: 1440px; margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; height: 60px;
}
.fn-anchor-bar__title{
  font-size: 12px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-anchor-bar__sep{ color: var(--muted-2); margin: 0 4px; }
.fn-anchor-bar__links{ display: flex; gap: 4px; justify-content: center; }
.fn-anchor-bar__links a{
  padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--muted);
  text-decoration: none; border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.fn-anchor-bar__links a:hover,
.fn-anchor-bar__links a.is-active{ color: var(--ink); background: var(--bg-secondary); }
.fn-anchor-bar__buy{ display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.fn-anchor-bar__price{ font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fn-anchor-bar__cta{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 36px;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.fn-anchor-bar__cta:hover:not(:disabled){ background: var(--accent-hover); }
.fn-anchor-bar__cta:disabled{ background: var(--bg-secondary); color: var(--muted-2); cursor: not-allowed; }
@media (max-width: 900px){
  .fn-anchor-bar__inner{ grid-template-columns: 1fr auto; gap: 12px; height: 56px; }
  .fn-anchor-bar__title{ display: none; }
  .fn-anchor-bar__links{ justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fn-anchor-bar__links a{ padding: 6px 10px; font-size: 12px; flex-shrink: 0; }
}
@media (max-width: 720px){
  .fn-anchor-bar{
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    margin: 0; border-top: 1px solid var(--line); border-bottom: none;
    transform: translateY(100%); transition: transform .22s ease;
  }
  .fn-anchor-bar.is-mobile-show{ transform: translateY(0); }
  .fn-anchor-bar.is-stuck{ box-shadow: 0 -4px 14px rgba(14,14,16,.08); }
  .fn-anchor-bar__links{ display: none; }
  .fn-anchor-bar__inner{ grid-template-columns: 1fr auto; height: 56px; padding: 0 16px; }
  .fn-anchor-bar__buy{ gap: 8px; }
}

/* ── Layout galería + buybox ────────────────────────────────── */
.fn-prod-layout{
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px;
  align-items: start; margin-bottom: 24px;
}
@media (max-width: 900px){
  .fn-prod-layout{ grid-template-columns: 1fr; gap: 16px; }
  .fn-prod-page__container{ padding: 16px; }
}
/* En mobile pequeño la card debe ocupar casi todo el ancho — solo un margen
   lateral mínimo (12px) para que el border-radius se aprecie sin pegarse al
   borde del viewport. Total: ~12px por lado. */
@media (max-width: 720px){
  .fn-prod-page__container{ padding: 16px 12px; }
}

/* ── Galería ────────────────────────────────────────────────── */
.fn-gallery{ display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: start; }
.fn-gal-thumbs{
  display: flex; flex-direction: column; gap: 6px;
  max-height: 520px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.fn-gal-thumbs::-webkit-scrollbar{ width: 6px; }
.fn-gal-thumbs::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 3px; }
.fn-gal-thumb{
  width: 60px; aspect-ratio: 1 / 1; background: var(--bg-primary);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s; position: relative; flex-shrink: 0;
}
.fn-gal-thumb img{ width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.fn-gal-thumb:hover{ border-color: var(--ink-3); }
.fn-gal-thumb.is-active{ border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fn-gal-thumb-empty{ background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(14,14,16,.04) 8px 9px); }
.fn-gal-main{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fn-gal-stage{
  position: relative; aspect-ratio: 1 / 1; background: var(--bg-primary);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
}
.fn-gal-stage img{
  width: 100%; height: 100%; object-fit: contain; padding: 20px;
  display: block; transition: transform .25s ease;
}
.fn-gal-stage:hover img{ transform: scale(1.02); }
.fn-gal-stage--placeholder{
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(14,14,16,.04) 12px 13px);
  cursor: default;
}
.fn-gal-zoom-icon{
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-primary); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  pointer-events: none; opacity: .85; transition: opacity .15s;
}
.fn-gal-stage:hover .fn-gal-zoom-icon{ opacity: 1; }
.fn-gal-placeholder{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted-2); letter-spacing: .08em;
  padding: 12px; text-align: center;
}
.fn-gal-tools{
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: .04em;
}
@media (max-width: 540px){
  .fn-gallery{ grid-template-columns: 48px 1fr; gap: 6px; }
  .fn-gal-thumb{ width: 48px; }
  .fn-gal-thumbs{ max-height: 380px; }
}

/* ── Lightbox ───────────────────────────────────────────────── */
.fn-lightbox{
  position: fixed; inset: 0; background: rgba(14,14,16,.85);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; cursor: zoom-out; padding: 24px;
}
.fn-lightbox.is-open{ display: flex; }
.fn-lightbox[aria-hidden="false"]{ display: flex; } /* fallback al sistema antiguo */
.fn-lightbox img{
  max-width: 100%; max-height: 100%; object-fit: contain;
  display: block; background: #fff; border-radius: 4px;
}
.fn-lightbox-close{
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-primary); color: var(--ink);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── Buybox ─────────────────────────────────────────────────── */
.fn-buybox{
  display: flex; flex-direction: column; gap: 18px;
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
@media (max-width: 720px){ .fn-buybox{ padding: 20px; gap: 16px; } }
.fn-buybox-head{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fn-buybox-tag{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .12em; color: var(--muted);
  font-weight: 600; text-transform: uppercase;
}
.fn-buybox-title{
  margin: 0; font-size: 30px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.15; color: var(--ink);
}
.fn-buybox-meta{
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: .04em;
  flex-wrap: wrap;
}
.fn-buybox-sep{ color: var(--muted-2); }

/* Precio */
.fn-buybox-price{ padding: 14px 0; border-top: 1px solid var(--line); }
.fn-buybox-price-num{
  font-size: 36px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.1;
}
.fn-buybox-price-tax{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .08em; color: var(--muted);
  text-transform: uppercase; margin-top: 6px;
}
.fn-buybox-price.has-pro-discount .fn-buybox-price-num{ color: var(--ok); }
.fn-buybox-price-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fn-buybox-price-pvp{
  font-size: 14px; color: var(--muted-2);
  text-decoration: line-through;
  font-family: 'JetBrains Mono', monospace;
}
.fn-buybox-price-discount{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--ok); background: rgba(31,122,77,.14);
  padding: 2px 8px; border-radius: 4px; letter-spacing: .04em;
}

/* Stock destacado */
.fn-buybox-stock{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-secondary); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px; flex-wrap: wrap;
}
.fn-buybox-stock--ok{ border-left: 3px solid var(--ok); }
.fn-buybox-stock--low{ border-left: 3px solid var(--warn); }
.fn-buybox-stock--oos{ border-left: 3px solid var(--muted-2); }
.fn-buybox-stock-text{ color: var(--ink); flex: 1; min-width: 0; }
.fn-buybox-stock-text strong{ font-weight: 600; }
.fn-buybox-stock--ok .fn-buybox-stock-text strong{ color: var(--ok); }
.fn-buybox-stock--low .fn-buybox-stock-text strong{ color: var(--warn); }
.fn-buybox-stock--oos .fn-buybox-stock-text strong{ color: var(--muted); }
.fn-buybox-stock-dot{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.fn-buybox-stock--ok .fn-buybox-stock-dot{ background: var(--ok); }
.fn-buybox-stock--low .fn-buybox-stock-dot{ background: var(--warn); }
.fn-buybox-stock--oos .fn-buybox-stock-dot{ background: var(--muted-2); }

/* Notice descuento profesional */
.fn-buybox-notice{
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary); border-left: 2px solid var(--ink-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 12px; color: var(--ink); line-height: 1.45;
}
.fn-buybox-notice svg{ flex-shrink: 0; color: var(--muted); margin-top: 1px; }
.fn-buybox-notice strong{ font-weight: 600; }

.fn-buybox-short{ font-size: 14px; color: var(--ink); line-height: 1.55; }
.fn-buybox-short p{ margin: 0 0 8px; }
.fn-buybox-short p:last-child{ margin-bottom: 0; }

/* Variantes */
.fn-buybox-variants{ display: flex; flex-direction: column; gap: 16px; padding: 8px 0 0; }
.fn-variant{ display: flex; flex-direction: column; gap: 8px; }
.fn-variant-label{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.fn-variant-value{
  color: var(--ink); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.fn-variant-options{ display: flex; flex-wrap: wrap; gap: 6px; }
.fn-variant-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px; height: 38px; font-size: 13px;
  color: var(--ink); font-family: inherit;
  background: var(--bg-primary); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.fn-variant-btn input{
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0; padding: 0;
  border: 0 !important; outline: none !important; box-shadow: none !important;
}
.fn-variant-btn,
.fn-variant-btn:hover,
.fn-variant-btn:focus,
.fn-variant-btn:active,
.fn-variant-btn:focus-within{ outline: none !important; box-shadow: none !important; }
.fn-variant-btn input:focus,
.fn-variant-btn input:focus-visible,
.fn-variant-btn input:hover,
.fn-variant-btn input:active{
  outline: none !important; box-shadow: none !important;
}
/* RESET AGRESIVO del span interno (el classic/módulos pueden meter border al span del label) */
.fn-variant-btn span,
.fn-variant-btn > span,
.fn-variant-btn .radio-label,
.fn-buybox-variants label span,
.fn-buybox-variants label > span{
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
}
/* Y el label en sí, por si el classic le mete pseudoelementos */
.fn-variant-btn::before,
.fn-variant-btn::after,
.fn-variant-btn span::before,
.fn-variant-btn span::after{ display: none !important; }
.fn-variant-btn:hover:not(.is-active):not(.is-unavailable){
  border-color: var(--ink-3); text-decoration: none;
}
.fn-variant-btn.is-active{
  background: var(--ink); color: #fff; border-color: var(--ink);
  opacity: 1; text-decoration: none; cursor: default;
}
.fn-variant-btn.is-unavailable{
  opacity: .35; text-decoration: line-through;
  cursor: not-allowed; color: var(--muted);
}
.fn-variant-swatches{ gap: 8px; }
.fn-swatch{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); cursor: pointer;
  background: var(--bg-secondary);
  position: relative; padding: 0;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.fn-swatch input{
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0; padding: 0;
  border: 0 !important; outline: none !important; box-shadow: none !important;
}
.fn-swatch,
.fn-swatch:hover,
.fn-swatch:focus,
.fn-swatch:active,
.fn-swatch:focus-within{ outline: none !important; }
.fn-swatch input:focus,
.fn-swatch input:focus-visible,
.fn-swatch input:hover,
.fn-swatch input:active{
  outline: none !important; box-shadow: none !important;
}
.fn-swatch:hover:not(.is-active):not(.is-unavailable){
  border-color: var(--ink-3); transform: scale(1.06);
}
.fn-swatch.is-active{
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--ink);
  opacity: 1;
}
.fn-swatch.is-unavailable{ opacity: .45; cursor: not-allowed; }
.fn-swatch.is-unavailable::after{
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: linear-gradient(45deg,
    transparent calc(50% - 0.8px),
    var(--ink-3) calc(50% - 0.8px),
    var(--ink-3) calc(50% + 0.8px),
    transparent calc(50% + 0.8px));
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Actions: qty + CTA */
.fn-buybox-actions{ display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.fn-buybox-qty{
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-primary); height: 48px;
}
.fn-buybox-qty button{
  width: 40px; height: 48px; color: var(--ink); font-size: 18px; font-weight: 500;
  background: transparent; border: none; cursor: pointer;
}
.fn-buybox-qty button:hover{ background: var(--bg-secondary); }
.fn-buybox-qty input{
  width: 48px; height: 48px; border: none; outline: none; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  -moz-appearance: textfield;
}
.fn-buybox-qty input::-webkit-outer-spin-button,
.fn-buybox-qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.fn-buybox-cta{
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border: none; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.fn-buybox-cta:hover{ background: var(--accent-hover); }
.fn-buybox-cta:disabled{ background: var(--bg-secondary); color: var(--muted); cursor: not-allowed; }
.fn-buybox-reassurance{ font-size: 11px; color: var(--muted); }
.fn-buybox-reassurance:empty{ display: none; }

/* ── Secciones genéricas ────────────────────────────────────── */
.fn-prod-section{
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px; margin-bottom: 24px;
}
.fn-prod-section:last-child{ margin-bottom: 0; }
.fn-prod-section h2{
  margin: 0 0 18px; font-size: 22px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.2;
}
@media (max-width: 720px){
  .fn-prod-section{ padding: 20px; margin-bottom: 16px; }
  .fn-prod-section h2{ font-size: 18px; margin-bottom: 14px; }
}
.fn-prod-desc{ font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 760px; }
.fn-prod-desc p{ margin: 0 0 12px; }

/* Especificaciones */
.fn-specs{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 720px){ .fn-specs{ grid-template-columns: 1fr; gap: 0; } }
.fn-spec-row{
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.fn-spec-key{ color: var(--muted); font-size: 13px; font-weight: 400; flex-shrink: 0; }
.fn-spec-val{ color: var(--ink); font-weight: 500; text-align: right; }

/* Header de sección con acciones a la derecha */
.fn-section-h{
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 18px; flex-wrap: wrap;
}
.fn-section-h-info{ min-width: 0; }
.fn-section-h-info h2{
  margin: 0; font-size: 22px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.2;
}
.fn-section-h-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.fn-btn-ghost-sm{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 12px; font-weight: 500; color: var(--ink);
  background: var(--bg-primary); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.fn-btn-ghost-sm:hover{ border-color: var(--ink); background: var(--bg-primary); }
@media (max-width: 720px){
  .fn-section-h-actions{ width: 100%; }
  .fn-btn-ghost-sm{ font-size: 11px; padding: 7px 10px; }
}

.fn-prod-section-tag{
  display: inline-block; font-size: 10px; font-weight: 600;
  color: var(--muted); letter-spacing: .12em; margin-bottom: 6px;
}
.fn-prod-section-sub{
  margin: -4px 0 18px; font-size: 13px; color: var(--muted);
  line-height: 1.55; max-width: 640px;
}

/* ── Componentes sueltos (tabla multi-select) ───────────────── */
.fn-cmp-section{}
.fn-cmp-table{
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-primary); overflow: hidden;
}
.fn-cmp-thead, .fn-cmp-row{
  display: grid;
  grid-template-columns: 36px 56px 1fr 78px 110px 120px 100px 44px;
  align-items: center; gap: 14px; padding: 10px 16px;
}
.fn-cmp-thead{
  background: var(--bg-secondary); border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: .08em;
  padding: 7px 16px; min-height: 32px;
}
.fn-cmp-row{ border-bottom: 1px solid var(--line); transition: background .15s; padding: 12px 16px; }
.fn-cmp-row:last-of-type{ border-bottom: none; }
.fn-cmp-row:hover{ background: var(--bg-secondary); }
.fn-cmp-row.is-oos{ opacity: .55; }
.fn-cmp-col-check input[type="checkbox"]{
  width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--ink);
}
.fn-cmp-col-check input[type="checkbox"]:disabled{ cursor: not-allowed; opacity: .4; }
.fn-cmp-row .fn-cmp-col-thumb{
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-secondary); overflow: hidden; color: var(--muted-2);
  text-decoration: none;
}
.fn-cmp-row .fn-cmp-col-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fn-cmp-row .fn-cmp-col-thumb.is-placeholder{
  background: var(--bg-secondary);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(14,14,16,.04) 6px 7px);
  font-size: 9px; letter-spacing: .04em;
}
.fn-cmp-row .fn-cmp-col-name{
  font-size: 14px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-cmp-row .fn-cmp-col-name a{ color: var(--ink); text-decoration: none; }
.fn-cmp-row .fn-cmp-col-name a:hover{ text-decoration: underline; }
.fn-cmp-row .fn-cmp-col-ref{
  font-size: 12px; color: var(--muted); letter-spacing: .04em; white-space: nowrap;
}
.fn-cmp-row .fn-cmp-col-stock{
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap;
}
.fn-cmp-dot{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--muted-2); }
.fn-cmp-stock--ok{ color: var(--ok); }   .fn-cmp-stock--ok  .fn-cmp-dot{ background: var(--ok); }
.fn-cmp-stock--low{ color: var(--warn); } .fn-cmp-stock--low .fn-cmp-dot{ background: var(--warn); }
.fn-cmp-stock--oos{ color: var(--muted); }.fn-cmp-stock--oos .fn-cmp-dot{ background: var(--muted-2); }
.fn-cmp-row .fn-cmp-col-qty{
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-primary);
  height: 32px; width: fit-content; overflow: hidden;
}
.fn-cmp-qty-btn{
  width: 30px; height: 32px; border: none; background: none; color: var(--ink); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fn-cmp-qty-btn:hover{ background: var(--bg-secondary); }
.fn-cmp-qty-input{
  width: 38px; height: 32px; border: none; outline: none; text-align: center; font-size: 13px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--bg-primary); color: var(--ink);
  -moz-appearance: textfield;
  font-family: 'JetBrains Mono', monospace;
}
.fn-cmp-qty-input::-webkit-outer-spin-button,
.fn-cmp-qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.fn-cmp-qty-input:disabled{ color: var(--muted-2); cursor: not-allowed; }
.fn-cmp-row .fn-cmp-col-price{
  /* 2026-05-15: ahora puede contener varios elementos (PVP tachado + % + pro)
     cuando hay descuento. Layout flex columna con todo alineado a la derecha. */
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right; white-space: nowrap;
}
.fn-cmp-col-price-num{
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; color: var(--ink);
  line-height: 1.15;
}
.fn-cmp-col-price.has-pro-discount .fn-cmp-col-price-num{ color: var(--ok); }
.fn-cmp-col-price-pvp{
  display: flex; align-items: baseline; gap: 4px; line-height: 1;
}
.fn-cmp-col-price-pvp-strike{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted-2); text-decoration: line-through;
}
.fn-cmp-col-price-discount{
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  color: var(--ok); background: rgba(31,122,77,.12);
  padding: 0 4px; border-radius: 2px; letter-spacing: .04em;
}
.fn-cmp-row .fn-cmp-col-cart{
  width: 34px; height: 34px; border: none; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s;
}
.fn-cmp-row .fn-cmp-col-cart:hover:not(:disabled){ background: var(--accent-hover); }
.fn-cmp-row .fn-cmp-col-cart:disabled{ background: var(--bg-secondary); color: var(--muted-2); cursor: not-allowed; }
.fn-cmp-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; background: var(--bg-secondary); border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.fn-cmp-foot-summary{ font-size: 13px; color: var(--ink); }
.fn-cmp-foot-summary strong{ font-weight: 700; }
.fn-cmp-bulk{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.fn-cmp-bulk:hover:not(:disabled){ background: var(--accent-hover); }
.fn-cmp-bulk:disabled{ background: var(--bg-primary); border: 1px solid var(--line); color: var(--muted-2); cursor: not-allowed; }
@media (max-width: 900px){
  .fn-cmp-thead{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 0; }
  .fn-cmp-thead > .fn-cmp-col-thumb,
  .fn-cmp-thead > .fn-cmp-col-name,
  .fn-cmp-thead > .fn-cmp-col-ref,
  .fn-cmp-thead > .fn-cmp-col-stock,
  .fn-cmp-thead > .fn-cmp-col-qty,
  .fn-cmp-thead > .fn-cmp-col-cart{ display: none; }
  .fn-cmp-thead .fn-cmp-col-check::after{
    content: "Seleccionar todos"; margin-left: 10px;
    font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  }
  .fn-cmp-thead .fn-cmp-col-check{ display: inline-flex; align-items: center; }
  /* 2026-05-16 v2: layout final mobile, basado en propuesta usuaria.
     Fila 1: nombre completo (full width).
     Fila 2: check · thumb · dot stock · precio · stepper (vertical) · cart.
     - Sin texto "Disponible"/"No disponible": solo el dot de color.
     - Stepper compacto: input al centro, + arriba y − abajo apilados. */
  .fn-cmp-row{
    grid-template-columns: 22px 44px auto 1fr auto auto;
    grid-template-areas:
      "name  name  name  name  name name"
      "check thumb meta  price qty  cart";
    column-gap: 8px;
    row-gap: 8px;
    padding: 12px;
    align-items: center;
  }
  .fn-cmp-row .fn-cmp-col-name{
    grid-area: name; white-space: normal; font-weight: 600;
    line-height: 1.3; font-size: 14px;
  }
  .fn-cmp-row .fn-cmp-col-check{ grid-area: check; align-self: center; }
  .fn-cmp-row .fn-cmp-col-thumb{
    grid-area: thumb; width: 44px; height: 44px; align-self: center;
  }
  .fn-cmp-row .fn-cmp-col-ref{ display: none; }
  /* Stock: ocultar texto, mostrar solo el dot */
  .fn-cmp-row .fn-cmp-col-stock{
    grid-area: meta;
    font-size: 0;
    line-height: 0;
    padding: 0;
    align-self: center;
  }
  .fn-cmp-row .fn-cmp-col-stock .fn-cmp-dot{
    width: 8px; height: 8px;
  }
  /* Precio compacto: descuento y precio final en línea */
  .fn-cmp-row .fn-cmp-col-price{
    grid-area: price;
    justify-self: end;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .fn-cmp-row .fn-cmp-col-price .fn-cmp-col-price-pvp{
    font-size: 10px;
    flex-direction: row;
    gap: 4px;
  }
  .fn-cmp-row .fn-cmp-col-price .fn-cmp-col-price-num{ font-size: 13px; }
  /* Stepper vertical: input al centro, + arriba / − abajo.
     Refuerzo con !important porque las reglas desktop de .fn-cmp-qty-btn
     fijan width/height/display y se pueden colar por orden de carga. */
  .fn-cmp-row .fn-cmp-col-qty{
    grid-area: qty;
    display: grid !important;
    grid-template-columns: 28px 20px;
    grid-template-rows: 1fr 1fr;
    width: 48px !important;
    height: 36px !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-primary);
    align-self: center;
    justify-self: end;
  }
  .fn-cmp-row .fn-cmp-col-qty .fn-cmp-qty-input,
  .fn-cmp-row .fn-cmp-col-qty input{
    grid-column: 1 !important; grid-row: 1 / 3 !important;
    width: 100% !important; height: 100% !important;
    border: none !important; outline: none;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: transparent;
    border-right: 1px solid var(--line) !important;
  }
  .fn-cmp-row .fn-cmp-col-qty .fn-cmp-qty-btn[data-qty-inc]{
    grid-column: 2 !important; grid-row: 1 !important;
    width: 100% !important; height: 100% !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--bg-primary);
    color: var(--ink);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .fn-cmp-row .fn-cmp-col-qty .fn-cmp-qty-btn[data-qty-dec]{
    grid-column: 2 !important; grid-row: 2 !important;
    width: 100% !important; height: 100% !important;
    border: none !important;
    background: var(--bg-primary);
    color: var(--ink);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .fn-cmp-row .fn-cmp-col-qty .fn-cmp-qty-btn:hover{ background: var(--bg-secondary); }
  .fn-cmp-row .fn-cmp-col-cart{ grid-area: cart; align-self: center; justify-self: end; }
  .fn-cmp-foot{ flex-direction: column; align-items: stretch; }
  .fn-cmp-bulk{ justify-content: center; }
}

/* Compat: clase del partial existente .fn-componentes-section */
.fn-componentes-section{
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px; margin-bottom: 24px;
}
.fn-componentes-section .h5{
  margin: 0 0 18px; font-size: 22px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.2;
  text-transform: none;
}
@media (max-width: 720px){ .fn-componentes-section{ padding: 20px; margin-bottom: 16px; } }

/* ── Attachments / Descargas ────────────────────────────────── */
.fn-attachments{ display: flex; flex-direction: column; gap: 8px; }
.fn-attachment{
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--bg-primary);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.fn-attachment:hover{ border-color: var(--ink); background: var(--bg-secondary); }
.fn-attachment-icon{
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--bg-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.fn-attachment:hover .fn-attachment-icon{ color: var(--ink); }
.fn-attachment-info{ flex: 1; min-width: 0; }
.fn-attachment-name{ font-size: 14px; color: var(--ink); font-weight: 500; display: block; line-height: 1.3; }
.fn-attachment-desc{ font-size: 12px; color: var(--muted); margin-top: 2px; display: block; }
.fn-attachment-meta{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase; margin-top: 4px; display: block;
}
.fn-attachment-action{
  flex-shrink: 0; font-size: 11px; color: var(--muted);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.fn-attachment:hover .fn-attachment-action{ color: var(--ink); }

/* ── Productos relacionados ─────────────────────────────────── */
.fn-pgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
@media (max-width: 1100px){ .fn-pgrid{ grid-template-columns: repeat(3, 1fr); } }
/* En mobile: en lugar de grid 2-cols, slide horizontal con scroll-snap.
   Permite ver más productos sin scroll vertical, las cards asoman pista
   visual de "hay más al lado", y el touch swipe es natural. */
@media (max-width: 720px){
  .fn-pgrid{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    /* edge-to-edge: anula el padding interno del contenedor padre para que
       las cards puedan llegar al borde del viewport y asomar pista visual. */
    margin-left: -12px;
    margin-right: -12px;
    padding: 4px 12px 12px;
  }
  .fn-pgrid::-webkit-scrollbar{ display: none; }
  .fn-pgrid > *{
    flex: 0 0 70%;
    min-width: 0;
    scroll-snap-align: start;
  }
}
@media (max-width: 420px){
  .fn-pgrid > *{ flex: 0 0 80%; }
}

/* fn-pcard (mismo patrón que home + bestsellers + featured) */
.fn-pcard{
  background: var(--white, #fff); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 10px); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  color: var(--ink) !important; text-decoration: none !important;
  position: relative;
}
.fn-pcard:hover{
  border-color: var(--ink); transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(14,14,16,.12);
  color: var(--ink) !important;
}
.fn-pcard-media{
  position: relative; aspect-ratio: 1 / 1;
  background: var(--paper, #f8f8f6); overflow: hidden;
}
.fn-pcard-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  padding: 8px;
}
.fn-pcard-media--placeholder{
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(14,14,16,.04) 12px 13px);
}
.fn-pcard-placeholder{
  font-size: 10px; color: var(--muted-2, #b8b8b3);
  letter-spacing: .08em; text-align: center; padding: 8px;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.fn-pcard-badge{
  position: absolute; top: 10px; left: 10px;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 2px; text-transform: uppercase; z-index: 1;
}
.fn-pcard-body{
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.fn-pcard-head{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.fn-pcard-ref{
  font-size: 10px; color: var(--muted, #8a8a85);
  letter-spacing: .06em; text-transform: uppercase;
}
.fn-pcard-stock{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
}
.fn-pcard-dot{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.fn-pcard-stock--ok   { color: var(--ok); }
.fn-pcard-stock--ok .fn-pcard-dot { background: var(--ok); }
.fn-pcard-stock--low  { color: var(--warn); }
.fn-pcard-stock--low .fn-pcard-dot { background: var(--warn); }
.fn-pcard-stock--oos  { color: var(--muted, #8a8a85); }
.fn-pcard-stock--oos .fn-pcard-dot { background: var(--muted-2, #b8b8b3); }
.fn-pcard-name{
  margin: 0; font-size: 14px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.3;
  color: var(--ink); min-height: 36px;
}
.fn-pcard-foot{
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.fn-pcard-price{ display: flex; flex-direction: column; gap: 1px; }
.fn-pcard-price-num{
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.fn-pcard-price-tax{
  font-size: 9px; color: var(--muted, #8a8a85);
  letter-spacing: .08em; text-transform: uppercase;
}
/* Precio profesional con descuento — mismo patrón que .fn-buybox-price (preview L3464-3468).
   Cuando hay descuento del customer: PVP tachado + %off en pill verde + precio pro en verde. */
.fn-pcard-price.has-pro-discount .fn-pcard-price-num{ color: var(--ok); }
.fn-pcard-price-pvp{
  display: flex; align-items: baseline; gap: 6px; line-height: 1;
}
.fn-pcard-price-pvp-strike{
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--muted-2); text-decoration: line-through;
}
.fn-pcard-price-discount{
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--ok); background: rgba(31,122,77,.12);
  padding: 1px 5px; border-radius: 3px; letter-spacing: .04em;
}
/* Botón añadir al carrito de las cards (mismo patrón que home + bestsellers) */
.fn-pcard-cart{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius, 4px);
  transition: filter .15s, transform .15s, background .15s;
  flex-shrink: 0; border: none; cursor: pointer; font: inherit;
}
.fn-pcard:hover .fn-pcard-cart:not(:disabled):not(.is-loading):not(.is-success){
  background: var(--accent-hover, var(--accent));
  transform: scale(1.05);
}
.fn-pcard-cart:disabled{
  background: var(--paper-2, #eee); color: var(--muted-2, #b8b8b3);
  cursor: not-allowed;
}
.fn-pcard-cart.is-loading{
  background: var(--muted, #8a8a85);
  cursor: wait;
}
.fn-pcard-cart.is-loading svg{ animation: fn-spin .8s linear infinite; }
.fn-pcard-cart.is-success{ background: var(--ok); }
@keyframes fn-spin{ to { transform: rotate(360deg); } }

/* Mobile: tarjetas un pelín más compactas (preview L4630-4636) */
@media (max-width: 720px){
  .fn-pcard-name{ font-size: 13px; min-height: 34px; }
  .fn-pcard-price-num{ font-size: 16px; }
}

/* Subtítulo de sección (para indicar "Más productos de la misma categoría") */
.fn-prod-section-sub{
  margin: -8px 0 16px;
  font-size: 13px; color: var(--muted, #8a8a85);
}

/* ── Mobile sticky cart (legacy — coexiste con anchor bar fixed-bottom) ─ */
.fn-mobile-sticky-cart{
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--ink); color: #fff;
  padding: 12px 16px; z-index: 100;
  align-items: center; justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,.15);
}
.fn-mobile-sticky-cart__price{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 15px;
}
.fn-mobile-sticky-cart__btn{
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--ink);
  border: 0; padding: 10px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
/* En mobile la anchor bar ya cumple esta función; sticky cart oculto */
@media (max-width: 720px){
  .fn-mobile-sticky-cart{ display: none !important; }
}

/* ── Reset universal del spinner native en inputs number ─────── */
.fn-prod-page input[type="number"]{
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.fn-prod-page input[type="number"]::-webkit-outer-spin-button,
.fn-prod-page input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ── F2.12-styling-fix7: matar cualquier rastro de bootstrap-touchspin ── */
/* Si PS classic consigue colar el wrapper o sus botones antes de que */
/* nuestro JS los purgue, los escondemos a saco. */
.fn-buybox-qty .bootstrap-touchspin,
.fn-buybox-qty .bootstrap-touchspin-up,
.fn-buybox-qty .bootstrap-touchspin-down,
.fn-buybox-qty .input-group-btn-vertical,
.fn-buybox-qty .input-group-btn{
  display: none !important;
}
/* Forzar que el #quantity_wanted SIEMPRE se renderice como nuestro input */
.fn-buybox-qty input[type="number"],
.fn-buybox-qty input#quantity_wanted{
  -moz-appearance: textfield !important;
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
}
.fn-buybox-qty input#quantity_wanted::-webkit-outer-spin-button,
.fn-buybox-qty input#quantity_wanted::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
/* Si PS envolvió el input en un input-group, neutralizar el contenedor */
.fn-buybox-qty .input-group{
  display: contents !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Reset defensivo del classic ─────────────────────────────── */
.fn-prod-page .row.product-container{ display: none !important; }
.fn-prod-page .tabs,
.fn-prod-page .nav-tabs,
.fn-prod-page .tab-content,
.fn-prod-page .product-tabs{ display: none !important; }
.fn-prod-page .product-information,
.fn-prod-page .product-actions,
.fn-prod-page .product-flags,
.fn-prod-page .scroll-box-arrows{ display: none !important; }