/*! Isavel · ficha de producto interactiva (T-031) · isv-ficha.css v0.2.0 · 2026-11-06 · EspejoStudio
   Va a woodmart-child/isv-ficha/. Todo bajo el prefijo .isv-fp (la seccion viva ya usa .isv-pdp: no se pisa).
   Tokens = website-design-base.md §2-§5 (direccion B · Terciopelo). Movil primero: una columna a 390,
   nada en horizontal; dos columnas desde 1024 px. Texto nunca por debajo de 16 px (detail-gate). */

.isv-fp,.isv-fp-bar,body.single-product{
  --fp-bg:#0D1B17; --fp-surf:#1D392C; --fp-line:#2A4036; --fp-tx:#F1EBDD; --fp-mute:#B9B3A2; --fp-brass:#D8B26A;
  --fp-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --fp-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* tonos de DIBUJO del metal: los mismos que el dibujo de real-size.js (metalDefs). No son de interfaz ni de texto */
  --fp-gold:linear-gradient(135deg,#F1E2B8 0%,#D8B26A 40%,#EBD39A 65%,#B4904E 100%);
  --fp-silver:linear-gradient(135deg,#FBF7EE 0%,#C9C3B3 40%,#F1EBDD 65%,#A9A393 100%);
}
.isv-fp *,.isv-fp *::before,.isv-fp *::after,.isv-fp-bar *{box-sizing:border-box}
.isv-fp [hidden],.isv-fp-bar[hidden]{display:none!important}
.isv-fp :focus-visible,.isv-fp-bar :focus-visible{outline:2px solid var(--fp-brass);outline-offset:3px}
.isv-fp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================ 1 · galeria + visor «Photos / 360°» */
.isv-fp-gallery{display:flex;flex-direction:column;gap:16px;min-width:0}
.isv-fp-stage{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;background:var(--fp-bg);border:1px solid var(--fp-line)}
.isv-fp-stage__view{position:absolute;inset:0}
.isv-fp-stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.isv-fp-stage__img[data-fit="contain"]{object-fit:contain}
/* 360: el unico foco de luz permitido, bajo el anillo (§1; design-gate lo marca slop.radial-halo, declarado en §11) */
.isv-fp-ring{position:absolute;inset:0;touch-action:pan-y;cursor:grab;
  background:radial-gradient(circle at 50% 46%,#1F3A2E 0,#0D1B17 64%)}
.isv-fp-ring::before{content:'';position:absolute;left:24%;right:24%;bottom:11%;height:12%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,178,106,.24),rgba(216,178,106,0))}
.isv-fp-ring:active{cursor:grabbing}
.isv-fp-ring canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.isv-fp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.isv-fp-ring[data-ready="1"] .isv-fp-poster{visibility:hidden}

.isv-fp-viewbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.isv-fp-toggle{display:inline-flex;border:1px solid var(--fp-mute);border-radius:2px}
html body.single-product .isv-fp-toggle button{appearance:none;min-width:96px;min-height:44px;padding:0 20px;border:0;border-radius:0;background:transparent;color:var(--fp-tx);
  font:600 16px/1 var(--fp-sans);letter-spacing:.02em;cursor:pointer;transition:background-color .15s,color .15s}
html body.single-product .isv-fp-toggle button+button{border-left:1px solid var(--fp-mute)}
html body.single-product .isv-fp-toggle button[aria-pressed="true"]{background:var(--fp-brass);color:var(--fp-bg)}
html body.single-product .isv-fp-toggle button:hover{background:var(--fp-tx);color:var(--fp-bg)}
.isv-fp-hint{margin:0;font:400 16px/1.5 var(--fp-sans);color:var(--fp-mute)}
/* miniaturas: rejilla de 4, se apilan en filas si hay mas; nunca una tira con scroll lateral */
.isv-fp-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
html body.single-product .isv-fp-thumb{appearance:none;display:block;width:100%;aspect-ratio:1/1;min-height:44px;padding:0;border:1px solid var(--fp-line);border-radius:0;
  background:var(--fp-bg) center/cover no-repeat;cursor:pointer;transition:border-color .15s,box-shadow .15s}
html body.single-product .isv-fp-thumb:hover{border-color:var(--fp-tx)}
html body.single-product .isv-fp-thumb[aria-current="true"]{border-color:var(--fp-brass);box-shadow:inset 0 0 0 1px var(--fp-brass)}

/* ============================================================ 2 · chips de metal y de talla (sobre el <select> de Woo) */
.isv-fp-native{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.isv-fp-opts{display:flex;flex-direction:column;gap:24px;margin:0 0 24px}
.isv-fp-group{margin:0;padding:0;border:0;min-width:0}
.isv-fp-group legend{padding:0;margin:0 0 12px;font:600 16px/1.3 var(--fp-sans);letter-spacing:.01em;color:var(--fp-tx)}
.isv-fp-group legend .isv-fp-picked{font-weight:400;color:var(--fp-mute)}
.isv-fp-chips{display:grid;gap:8px}
.isv-fp-chips--metal{grid-template-columns:minmax(0,1fr)}
.isv-fp-chips--size{grid-template-columns:repeat(5,minmax(0,1fr));max-width:460px}
.isv-fp-chip{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border:1px solid var(--fp-mute);border-radius:2px;
  color:var(--fp-tx);font:400 17px/1.25 var(--fp-sans);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.isv-fp-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.isv-fp-chip:hover{border-color:var(--fp-tx)}
.isv-fp-chip:has(input:checked){border-color:var(--fp-brass);box-shadow:inset 0 0 0 1px var(--fp-brass)}
.isv-fp-chip:has(input:focus-visible){outline:2px solid var(--fp-brass);outline-offset:3px}
.isv-fp-chip--off{color:var(--fp-mute);border-style:dashed;cursor:not-allowed}
.isv-fp-chip--off:hover{border-color:var(--fp-mute)}
.isv-fp-chips--size .isv-fp-chip{justify-content:center;padding:0 4px;font-weight:600;font-variant-numeric:tabular-nums}
.isv-fp-chips--size .isv-fp-chip--open{grid-column:1/-1;justify-content:flex-start;padding:10px 16px;font-weight:400}
.isv-fp-swatch{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--fp-line)}
.isv-fp-swatch[data-metal="gold"]{background:var(--fp-gold)}
.isv-fp-swatch[data-metal="silver"]{background:var(--fp-silver)}
.isv-fp-chip__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.isv-fp-chip__price{font-size:16px;color:var(--fp-mute);font-variant-numeric:tabular-nums}
.isv-fp-openline{margin:12px 0 0;font:400 17px/1.5 var(--fp-sans);color:var(--fp-tx);max-width:46ch}
.isv-fp-msg{margin:12px 0 0;padding:10px 12px;border:2px solid var(--fp-brass);border-radius:2px;font:400 16px/1.5 var(--fp-sans);color:var(--fp-tx)}
.isv-fp-sizehelp{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:var(--fp-brass);text-decoration:underline;text-underline-offset:3px;font:400 17px/1.4 var(--fp-sans)}
.isv-fp-sizehelp:hover{color:var(--fp-tx)}

/* ============================================================ 3 · «bajo el baño»: el canto del aro, se retira el oro */
.isv-fp-peel{display:flex;flex-direction:column;gap:16px;min-width:0}
.isv-fp-peel__stage{position:relative;aspect-ratio:16/10;width:100%;overflow:hidden;touch-action:pan-y;cursor:ew-resize;
  background:var(--fp-surf);border:1px solid var(--fp-line);user-select:none;-webkit-user-select:none}
.isv-fp-peel__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.isv-fp-peel__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.isv-fp-peel__poster[data-metal="silver"]{clip-path:inset(0 calc(100% - var(--peel, 40%)) 0 0)}
.isv-fp-peel__stage[data-ready="1"] .isv-fp-peel__poster{visibility:hidden}
.isv-fp-peel__handle{position:absolute;top:0;bottom:0;left:var(--peel,40%);width:0;pointer-events:none}
.isv-fp-peel__handle::before{content:'';position:absolute;top:8%;bottom:8%;left:-1px;width:2px;background:var(--fp-tx);opacity:.9}
.isv-fp-peel__grip{position:absolute;top:50%;left:-22px;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--fp-brass);
  display:flex;align-items:center;justify-content:center}
.isv-fp-peel__grip svg{width:22px;height:22px}
.isv-fp-range{display:block;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.isv-fp-range::-webkit-slider-runnable-track{height:4px;background:var(--fp-mute);border-radius:2px}
.isv-fp-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--fp-brass);border:2px solid var(--fp-bg)}
.isv-fp-range::-moz-range-track{height:4px;background:var(--fp-mute);border-radius:2px}
.isv-fp-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--fp-brass);border:2px solid var(--fp-bg)}
.isv-fp-peel__label{display:block;font:600 16px/1.3 var(--fp-sans);color:var(--fp-tx);margin:0}
.isv-fp-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none;font:400 16px/1.5 var(--fp-sans);color:var(--fp-tx)}
.isv-fp-legend li{display:flex;align-items:center;gap:8px}
.isv-fp-legend .isv-fp-swatch{width:18px;height:18px}
.isv-fp-note{margin:0;font:400 16px/1.5 var(--fp-sans);color:var(--fp-mute);max-width:56ch}

/* ============================================================ 4 · barra fija en movil (precio + «Add to bag») */
.isv-fp-bar{position:fixed;left:0;right:0;bottom:0;z-index:400;display:flex;align-items:center;gap:16px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--fp-bg);border-top:1px solid var(--fp-line);
  color:var(--fp-tx);font:400 16px/1.3 var(--fp-sans);transform:translateY(110%);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.isv-fp-bar.is-on{transform:none}
.isv-fp-bar__info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.isv-fp-bar__price{font:italic 400 22px/1.1 var(--fp-serif);color:var(--fp-brass);white-space:nowrap}
.isv-fp-bar__price del{color:var(--fp-mute);font-size:16px}
.isv-fp-bar__sum{font-size:16px;color:var(--fp-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isv-fp-bar__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:1px solid var(--fp-brass);border-radius:2px;
  background:var(--fp-brass);color:var(--fp-bg);font:600 16px/1 var(--fp-sans);letter-spacing:.02em;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.isv-fp-bar__btn:hover{background:var(--fp-tx);color:var(--fp-bg);border-color:var(--fp-tx)}
body.isv-fp-bar-pad{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){.isv-fp-bar{display:none!important} body.isv-fp-bar-pad{padding-bottom:0}}

/* ============================================================ escritorio */
@media (min-width:1024px){
  .isv-fp-gallery--sticky{position:sticky;top:96px}
  .isv-fp-stage{aspect-ratio:1/1}
  .isv-fp-chips--metal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .isv-fp-peel__stage{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .isv-fp *,.isv-fp-bar{transition:none!important}
}
@media print{.isv-fp-bar{display:none!important}}

/* B6: la tarjeta «The metal» lleva el modulo a la derecha (5/12 + 7/12) solo si el producto lo pinta; sin el, el texto va a lo ancho */
.isv-trust .isv-metal-card:not(:has(.isv-fp-peel)){grid-template-columns:minmax(0,1fr)}

/* el atributo hidden tiene que ganar a los display propios (en el prototipo lo hacia el kit) */
body.single-product .isv-fp-gallery [hidden],body.single-product .isv-fp-peel [hidden],body.single-product .isv-fp-chips [hidden],body.single-product .isv-fp-bar[hidden],body.single-product [class*="isv-fp-"][hidden]{display:none!important}

/* la columna de la galeria: como flex en columna encoge al widget y las miniaturas pisan el titulo; como bloque, no */
body.single-product .isv-pdp .e-con:has(> .elementor-widget-shortcode .isv-fp-gallery){display:block}

/* el tema pone img{height:auto}: las fotos del visor y los posters llenan su escenario */
body.single-product .isv-fp-stage__img,body.single-product .isv-fp-poster,body.single-product .isv-fp-peel__poster{height:100%;max-width:none}
body.single-product .isv-fp-stage__img{width:100%;object-fit:cover}