/* =========================================================================
   FICHA DE PRODUCTO · Disfraces Tú y Yo (ticket SSY-790-70163)
   A partir de la maqueta de temp/ficha-producto. Las piezas que ya tenían
   datos y JS reales (galería Fancybox, selector de talla/atributos, precio,
   comprar, pack, opiniones, envíos, guía de tallas, "duda al experto") se
   RESTYLAN sobre sus mismas clases/ids — nada de eso se reconstruye.
   Solo son markup nuevo: la tarjeta de compra, las barras fijas, el botón
   flotante del experto y el aviso de stock.
   Mobile-first. Punto de corte escritorio: 900px.
   ========================================================================= */

:root {
  --fp-pink: #B0176A;
  --fp-pink-dark: #7E0F4B;
  --fp-pink-soft: #FBF2F7;
  --fp-ink: #2B1F4F;
  --fp-muted: #6B6280;
  --fp-line: #E4E0EA;
  --fp-line-soft: #EEEBF2;
  --fp-bg: #F4F2F6;
  --fp-card: #FFFFFF;
  --fp-green: #1FCB5F;
  --fp-green-ink: #0E8A3E;
  --fp-green-soft: #E6F9EE;
  --fp-red-ink: #8A1538;
  --fp-red-soft: #FDECEF;
  --fp-warn-bg: #FFF8DB;
  --fp-warn-ink: #5C4A00;
  --fp-font: 'Nunito', system-ui, sans-serif;
  --fp-font-display: 'Archivo', 'Arial Black', sans-serif;
  --fp-radius: 20px;
  --fp-radius-sm: 12px;
}

.fp, .fp *, .fp-layer, .fp-layer *, .fp-sticky, .fp-sticky *, .fp-expert-fab, .fp-expert-fab * { box-sizing: border-box; }
.fp, .fp-sticky, .fp-expert-fab { font-family: var(--fp-font); color: var(--fp-ink); }
/* Sin "color: inherit" aquí: le ganaba por especificidad a botones de una sola clase como
   .fp-btn-pink (texto blanco sobre fondo rosa saliendo en negro) */
.fp button, .fp input, .fp select, .fp textarea, .fp-sticky button, .fp-sticky select, .fp-sticky input { font-family: inherit; }
.fp button, .fp-expert-fab, .fp-sticky button { cursor: pointer; }
.fp a { color: var(--fp-pink); }
.fp a:hover { color: var(--fp-pink-dark); }
.fp-display { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; }
.fp-price { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; }
[hidden] { display: none !important; }

/* NOTA DE ESPECIFICIDAD: #fich (el id real del contenedor, con el motor de atributos y el CSS
   de base ya enganchados a #fich .prco/.buy/.qty/.fvrt/.attr-wrpr...) sigue existiendo. Un
   selector .fp con solo clases NUNCA le gana a #fich por especificidad aunque cargue después,
   así que todo lo que reviste una pieza real usa #fich delante, a propósito. */

/* ---------- Layout (Main: main 1200px, padding 28px 0 48px, gap 32; Movil: padding 16, gap 16) ---------- */
/* style.css pinta #fich en blanco con padding 40/50 (y en móvil con !important): el diseño es
   fondo #F4F2F6 con tarjetas blancas, así que aquí también id + !important */
#fich.fp { background: var(--fp-bg); padding: 0 0 48px !important; margin: 0 !important; width: auto !important; max-width: none; box-sizing: border-box; border-radius: 0; }
.fp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 0; display: flex; flex-direction: column; gap: 16px; }
.fp-card { background: var(--fp-card); border-radius: 18px; }
.fp-h2 { margin: 0; font-size: 18px; text-transform: uppercase; }
.fp-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-pink); text-decoration: none; }
.fp-hero { position: relative; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  #fich.fp { padding: 28px 0 48px !important; }
  .fp-wrap { padding: 0 24px; gap: 32px; }
  .fp-card { border-radius: var(--fp-radius); }
  .fp-eyebrow { font-size: 12px; }
  .fp-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: stretch; }
  .fp-hero > * { min-width: 0; }
  .fp-h2 { font-size: 22px; }
}

/* ---------- Galería (Fancybox hace carrusel/zoom; aquí la tarjeta, la zona de la foto y las miniaturas) ----------
   Móvil (Movil.dc.html): a sangre, sin tarjeta; zona de foto de 460px sobre #FAF9FB, puntos debajo.
   Escritorio (Main.dc.html): tarjeta padding 24, miniaturas 72×92 en columna a la izquierda, foto en
   caja #FAF9FB radio 14 min-height 660, botón de ampliar abajo a la derecha. */
.fp-gallery { position: relative; margin: 0 -16px; padding: 0; border-radius: 0; display: flex; flex-direction: column; }
#fich-glle #fich-carr, #fich-glle .f-carousel__viewport, #fich-glle .f-carousel__slide { background: #FAF9FB; }
#fich-glle .f-carousel__viewport { height: 460px; }
#fich-glle .f-carousel__slide { display: flex; align-items: center; justify-content: center; height: 460px; }
#fich-glle .f-carousel__slide img { max-height: 440px; width: auto; max-width: 100%; height: auto; object-fit: contain; }
.fp-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--fp-ink); color: #fff; font-size: 12px; font-weight: 800; line-height: normal; padding: 6px 12px; border-radius: 999px; }
.fp-badge-sale { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: var(--fp-pink); color: #fff; font-weight: 800; font-size: 12px; line-height: normal; padding: 5px 10px; border-radius: 999px; }
.fp-badge-sale svg { width: 13px; height: 13px; }
.fp-badge-sale__word { display: none; }
/* miniaturas de Fancybox como puntos (8px, el activo 22px rosa) debajo de la foto */
/* (Fancybox pinta borde/sombra/opacidad de cada miniatura con sus variables --f-thumb-*; se
   anulan aquí y en escritorio se ponen las del diseño) */
#fich-glle .f-thumbs { --f-thumb-width: 28px; --f-thumb-height: 28px; --f-thumb-gap: 2px; --f-thumb-border: 0; --f-thumb-selected-border: 0; --f-thumb-hover-border: 0; --f-thumb-focus-border: 0; --f-thumb-shadow: none; --f-thumb-selected-shadow: none; --f-thumb-hover-shadow: none; --f-thumb-opacity: 1; --f-thumb-hover-opacity: 1; --f-thumb-selected-opacity: 1; --f-thumb-border-radius: 0; --f-thumb-transform: none; --f-thumb-selected-transform: none; --f-thumb-hover-transform: none; padding: 6px 0 12px; background: #fff; }
#fich-glle .f-thumbs__slide { width: 28px; height: 28px; }
#fich-glle .f-thumbs__slide button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; }
#fich-glle .f-thumbs__slide button::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: #D9D3E2; transition: width .15s, background .15s; }
#fich-glle .f-thumbs__slide.is-selected button::before { width: 22px; background: var(--fp-pink); }
#fich-glle .f-thumbs__slide img { display: none; }
.fp-gallery__zoom { display: none; }
/* vídeo: pastilla «▶ Vídeo» junto a los puntos en móvil; miniatura con play bajo las fotos en escritorio */
.fp-video-thumb { position: absolute; right: 14px; bottom: 11px; z-index: 3; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--fp-bg); color: var(--fp-ink); display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.fp-video-thumb img { display: none; }
.fp-video-thumb__play { display: inline-flex; align-items: center; gap: 4px; }
.fp-video-thumb__play svg { width: 10px; height: 10px; }
@media (min-width: 900px) {
  .fp-video-thumb { top: calc(24px + var(--fp-thumbs, 0) * 104px); left: 24px; right: auto; bottom: auto; width: 72px; height: 92px; padding: 0; border-radius: 10px; overflow: hidden; background: #FAF9FB; border: 2px solid var(--fp-line); box-sizing: border-box; display: block; }
  .fp-video-thumb:hover { border-color: var(--fp-pink); }
  .fp-video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
  .fp-video-thumb__play { position: absolute; inset: 0; background: rgba(43,31,79,.45); color: #fff; display: flex; align-items: center; justify-content: center; }
  .fp-video-thumb__play svg { width: 26px; height: 26px; }
  .fp-video-thumb__word { display: none; }
  /* con una sola foto no hay columna de miniaturas: se reserva para el vídeo */
  #fich-glle.sin-thumbs.has-video #fich-carr { margin-left: 92px; }
}
/* vídeo reproduciéndose en el sitio de la foto (estilo Zalando): capa negra sobre #fich-carr con el
   iframe de YouTube dentro; mientras está, la pastilla/miniatura de vídeo se marca como activa y la
   miniatura de la foto deja de marcarse. En móvil ocupa la zona de foto (460px); en escritorio, la
   caja de la foto (padding 24 + columna de miniaturas 72 + hueco 20 = 116 a la izquierda). */
.fp-video-inline { position: absolute; top: 0; left: 0; right: 0; height: 460px; z-index: 3; background: #000; overflow: hidden; }
.fp-video-inline[hidden] { display: none; }
/* el iframe es más alto que la caja (ficha-producto.js lo mide): la interfaz de YouTube cae en las franjas que se recortan */
.fp-video-inline__frame { position: absolute; inset: 0; overflow: hidden; }
.fp-video-inline__frame iframe { position: absolute; border: 0; pointer-events: none; }
.fp-video-inline__sound { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: var(--fp-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fp-video-inline__sound .fp-video-inline__ico-on, .fp-video-inline.is-sound .fp-video-inline__ico-off { display: none; }
.fp-video-inline.is-sound .fp-video-inline__ico-on { display: block; }
.fp-video-inline__close { position: absolute; top: 10px; left: 10px; z-index: 1; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--fp-ink); display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.fp-video-inline__close:hover { background: #fff; }
#fich-glle.is-video .fp-video-thumb { background: var(--fp-pink); color: #fff; }
#fich-glle.is-video .fp-gallery__zoom { display: none; }
#fich-glle.is-video .f-thumbs__slide.is-selected button::before { width: 8px; background: #D9D3E2; }
@media (min-width: 900px) {
  .fp-video-inline { top: 24px; bottom: 24px; right: 24px; left: 116px; height: auto; border-radius: 14px; overflow: hidden; }
  .fp-video-inline__close { top: 16px; left: 16px; height: 36px; font-size: 13px; }
  .fp-video-inline__sound { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  #fich-glle.is-video .fp-video-thumb { background: #FAF9FB; border-color: var(--fp-pink); }
  #fich-glle.is-video .fp-video-thumb__play { background: rgba(176,23,106,.55); }
  #fich-glle.is-video:not(.sin-thumbs) .f-thumbs { --f-thumb-selected-border: 2px solid #E4E0EA; }
}
/* el corazón del wishlist (real, en la tarjeta de compra) se coloca sobre la foto en móvil */
.fp-fav-wrap { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--fp-line); background: #fff; display: flex; align-items: center; justify-content: center; }
#fich .fp-fav-wrap .fvrt { position: static; font-size: 20px; line-height: 20px; margin: 0; color: var(--fp-pink); }
@media (min-width: 900px) {
  .fp-gallery { margin: 0; padding: 24px; border-radius: var(--fp-radius); }
  #fich-glle:not(.sin-thumbs) { flex-direction: row; gap: 20px; align-items: stretch; }
  #fich-glle #fich-carr { flex: 1; min-width: 0; order: 2; border-radius: 14px; overflow: hidden; }
  #fich-glle .f-carousel__viewport, #fich-glle .f-carousel__slide { height: auto; min-height: 660px; }
  #fich-glle .f-carousel__slide { padding: 24px; }
  #fich-glle .f-carousel__slide img { max-height: none; max-width: 100%; }
  /* En escritorio, Fancybox arma las miniaturas en VERTICAL (Thumbs.Carousel.vertical en app.js):
     necesitan una columna estrecha al lado de la foto; si no, el plugin las mide con alto 0 y no
     pinta ninguna. Las miniaturas arriba (align-content en la rejilla del plugin, nunca align-self
     en .f-thumbs: eso le quita la altura y deja de pintar). */
  #fich-glle:not(.sin-thumbs) .f-thumbs { --f-thumb-width: 72px; --f-thumb-height: 92px; --f-thumb-gap: 12px; --f-thumb-border: 2px solid #E4E0EA; --f-thumb-selected-border: 2px solid #B0176A; --f-thumb-hover-border: 2px solid #B0176A; --f-thumb-focus-border: 2px solid #B0176A; --f-thumb-border-radius: 10px; flex: 0 0 72px; order: 1; padding: 0; background: transparent; }
  #fich-glle:not(.sin-thumbs) .f-thumbs__viewport { align-content: start; }
  #fich-glle .f-thumbs__slide { width: 72px; height: 92px; }
  #fich-glle .f-thumbs__slide button { width: 72px; height: 92px; border-radius: 10px; overflow: hidden; background: #FAF9FB; display: block; }
  #fich-glle .f-thumbs__slide button::before { display: none; }
  #fich-glle .f-thumbs__slide img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
  .fp-badge { top: 40px; left: 40px; }
  /* la etiqueta va sobre la foto, pasada la columna de miniaturas (24 + 72 + 20 + 16) */
  #fich-glle:not(.sin-thumbs) .fp-badge, #fich-glle.sin-thumbs.has-video .fp-badge, #fich-glle:not(.sin-thumbs) .fp-badge-sale, #fich-glle.sin-thumbs.has-video .fp-badge-sale { left: 132px; }
  .fp-badge-sale { top: 40px; left: 40px; right: auto; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 14px; gap: 6px; padding: 8px 12px; box-shadow: 0 4px 12px rgba(176,23,106,.35); }
  .fp-badge-sale svg { width: 16px; height: 16px; }
  .fp-badge-sale__word { display: inline; }
  .fp-gallery__zoom { display: flex; position: absolute; bottom: 40px; right: 40px; z-index: 3; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-ink); align-items: center; justify-content: center; padding: 0; cursor: pointer; }
  .fp-fav-wrap { position: static; border-width: 1.5px; }
}
/* la línea de iconos del carrusel/flechas de Fancybox no debe tapar la etiqueta */
#fich-glle .f-carousel__nav { z-index: 1; }
/* Antes de que arranque Fancybox (va con defer) las fotos están apiladas y no existe la tira de
   miniaturas: para que no haya salto, hasta entonces solo se ve la primera foto en su zona (460px)
   y se reserva el sitio de las miniaturas (fila de puntos de 46px en móvil, columna de 72+20 en
   escritorio). Fancybox pone is-enabled/has-thumbs en #fich-carr al iniciarse. */
#fich-glle #fich-carr:not(.is-enabled) { height: 460px; overflow: hidden; }
#fich-glle #fich-carr:not(.is-enabled) .f-carousel__slide:not(:first-child) { display: none; }
#fich-glle:not(.sin-thumbs) #fich-carr:not(.has-thumbs) { margin-bottom: 56px; }
@media (min-width: 900px) {
  #fich-glle #fich-carr:not(.is-enabled) { height: auto; }
  #fich-glle:not(.sin-thumbs) #fich-carr:not(.has-thumbs) { margin-bottom: 0; margin-left: 92px; }
}

/* ---------- Tarjeta de compra (Main: padding 32 gap 24; Movil: padding 20 gap 18) ---------- */
.fp-buy { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.fp-buy__head { display: flex; flex-direction: column; gap: 8px; }
.fp-buy__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 0; }
.fp-title { margin: 0; font-family: var(--fp-font); font-weight: 800; font-size: 25px; line-height: 1.2; color: var(--fp-ink); }
.fp-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fp-muted); flex-wrap: wrap; text-decoration: none; }
.fp-rating a { color: var(--fp-pink); font-weight: 700; }
.fp-rating strong { color: var(--fp-ink); }
.fp-rating--has { color: var(--fp-ink); gap: 6px; }
.fp-rating__count { color: var(--fp-muted); text-decoration: underline; }
.fp-stars { letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.fp-stars__on { color: #E2A400; }
.fp-stars__off { color: #CFC9D8; }
.fp-rating--none .fp-rating__none, .fp-rating--none .fp-rating__dot, .fp-rating__first { display: none; }
@media (min-width: 900px) {
  .fp-buy { padding: 32px; gap: 24px; }
  .fp-buy__head { gap: 10px; }
  .fp-title { font-size: 34px; }
  .fp-rating { font-size: 14px; gap: 10px; }
  .fp-rating--has { gap: 8px; }
  .fp-rating--has .fp-stars { font-size: 17px; }
  .fp-rating--none .fp-stars { font-size: 16px; }
  .fp-rating--none .fp-rating__none, .fp-rating--none .fp-rating__dot, .fp-rating__first { display: inline; }
  .fp-rating__first-mob { display: none; }
}

/* Precio (.prco real: <em.dcto> + <s> arriba en oferta, <label> precio + .tax debajo; el motor
   escribe .prco label y .prco s). Movil: 36px; Main: 44px; rosa en oferta. */
.fp-pricebox { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#fich .prco { display: grid; grid-template-columns: max-content max-content; column-gap: 8px; row-gap: 6px; align-items: center; margin: 0; width: auto; font-size: 36px; line-height: 1; color: var(--fp-ink); font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; }
#fich .prco label { grid-row: 2; grid-column: 1; align-self: flex-end; letter-spacing: 0; }
/* style.css agranda #fich .prco span (la parte entera): solo el precio, no el IVA ni la etiqueta */
#fich .prco label span { font-size: inherit; line-height: inherit; }
#fich .prco .tax span, #fich .prco .dcto span { font-size: inherit; line-height: inherit; }
#fich .prco .tax { grid-row: 2; grid-column: 2; align-self: flex-end; padding-bottom: 4px; margin: 0; letter-spacing: 0; font-family: var(--fp-font); font-weight: 400; font-size: 12px; line-height: normal; color: var(--fp-muted); }
#fich .prco .dcto { grid-row: 1; grid-column: 1; display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-family: var(--fp-font); font-size: 12px; line-height: normal; font-weight: 800; color: #fff; background: var(--fp-pink); border-radius: 999px; padding: 4px 10px; letter-spacing: 0; }
#fich .prco s { grid-row: 1; grid-column: 2; font-family: var(--fp-font); font-weight: 400; font-size: 15px; line-height: normal; color: var(--fp-muted); text-decoration: line-through; letter-spacing: 0; }
#fich .prco.prco--sale label { color: var(--fp-pink); }
/* agotado: style.css atenúa #fich.prdt-agtd .prco; el diseño deja el precio normal y marca el estado con la pastilla */
#fich.prdt-agtd .prco { opacity: 1; }
#fich .prco .fp-tax-long { display: none; }
.fp-stockpill { display: none; align-items: center; gap: 6px; flex-shrink: 0; font-family: var(--fp-font); font-size: 13px; line-height: normal; font-weight: 800; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.fp-stockpill::before { content: ""; width: 8px; height: 8px; border-radius: 999px; }
.fp-stockpill--in { color: var(--fp-green-ink); background: var(--fp-green-soft); }
.fp-stockpill--in::before { background: var(--fp-green); }
.fp-stockpill--out { color: var(--fp-red-ink); background: var(--fp-red-soft); }
.fp-stockpill--out::before { background: #D0314F; }
#fich:not(.prdt-agtd) .fp-stockpill--in, #fich.prdt-agtd .fp-stockpill--out { display: inline-flex; }
.fp-divider { display: none; height: 1px; background: var(--fp-line-soft); }
@media (min-width: 900px) {
  #fich .prco { font-size: 44px; column-gap: 10px; }
  #fich .prco .tax { font-size: 13px; padding-bottom: 6px; }
  #fich .prco .dcto { font-size: 13px; }
  #fich .prco .fp-tax-long { display: inline; }
  #fich .prco .fp-tax-short { display: none; }
  .fp-stockpill { font-size: 14px; gap: 8px; padding: 8px 12px; }
  .fp-divider { display: block; }
}

/* Talla: etiqueta + guía a la derecha; el <select> real lo monta el sitio (.xfselect vía .form()):
   aquí se viste su div visible como el desplegable del diseño (52px, borde 1.5 #2B1F4F, chevron) */
.fp-sizes__wrap { display: flex; flex-direction: column; gap: 10px; }
.fp-sizes__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; }
.fp-sizes__label { font-weight: 800; font-size: 14px; }
#fich .fp-sizes__head .fp-guide-btn { width: auto; height: auto; margin: 0; padding: 0; background: transparent; text-align: left; letter-spacing: normal; display: inline-flex; align-items: center; gap: 6px; border: 0; min-height: 44px; color: var(--fp-pink); font-family: var(--fp-font); font-size: 13px; font-weight: 800; line-height: 1; text-decoration: underline; cursor: pointer; }
#fich .fp-sizes__head .fp-guide-btn:hover { color: var(--fp-pink-dark); }
#fich .fp-sizes { display: flex; flex-direction: column; gap: 10px; width: auto; margin: 0; padding: 0; }
#fich .fp-sizes .xfselect { width: 100%; height: 52px; max-width: none; margin: 0; }
#fich .fp-sizes .xfselect > div { height: 52px; border-radius: 12px; border: 1.5px solid var(--fp-ink); background: #fff; color: var(--fp-ink); font-family: var(--fp-font); font-weight: 800; font-size: 16px; line-height: 49px !important; padding: 0 44px 0 16px; box-sizing: border-box; }
#fich .fp-sizes .xfselect > div::before { display: none; }
#fich .fp-sizes .xfselect > div::after { content: ""; position: absolute; right: 16px; top: 15px; margin: 0; width: 20px; height: 20px; border: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232B1F4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / 20px 20px; }
#fich .fp-sizes .xfselect select { height: 52px; top: 0; }
/* cajitas de talla (≤5 opciones): espejo del select real, que se esconde */
#fich .fp-sizes.has-pills .xfselect { display: none; }
.fp-size-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-size-pill { flex: 1 1 0; min-width: 60px; height: 50px; border-radius: 12px; font-family: inherit; font-weight: 800; font-size: 15px; background: #fff; color: var(--fp-ink); border: 1.5px solid var(--fp-line); cursor: pointer; padding: 0 10px; }
.fp-size-pill.is-on { background: var(--fp-ink); color: #fff; border: 2px solid var(--fp-ink); }
.fp-size-pill.is-out { background: linear-gradient(to bottom right, transparent calc(50% - 1px), #B9B2C6 calc(50% - 1px), #B9B2C6 calc(50% + 1px), transparent calc(50% + 1px)), var(--fp-bg); color: #9A92AC; border: 1.5px solid var(--fp-line); }
.fp-size-pill.is-out.is-on { background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--fp-ink) calc(50% - 1px), var(--fp-ink) calc(50% + 1px), transparent calc(50% + 1px)), #fff; color: var(--fp-ink); border: 2px solid var(--fp-ink); }
@media (min-width: 900px) { .fp-size-pill { flex: 0 0 auto; } }
@media (min-width: 900px) {
  .fp-sizes__wrap { gap: 12px; }
  .fp-sizes__label { font-size: 15px; }
  #fich .fp-sizes .xfselect > div { font-size: 15px; }
}

/* Cantidad + comprar (.qty-wrpr/.buy reales: el motor de atributos escribe texto/clases ahí).
   Movil: solo COMPRAR de 58px; Main: «Cantidad» + caja −/+ de 60px y COMPRAR de 62px. */
.fp-buyblock { display: flex; flex-direction: column; gap: 10px; }
.fp-qty-label { display: none; font-weight: 800; font-size: 15px; }
.fp-buyrow { display: flex; gap: 14px; align-items: stretch; }
#fich .fp-buyrow .qty-wrpr { display: none; align-items: center; border: 1.5px solid var(--fp-line); border-radius: 14px; padding: 0 4px; background: #fff; flex-shrink: 0; }
#fich .fp-buyrow .qty-btn { width: 44px; height: 60px; border: 0; background: transparent; font-size: 22px; color: var(--fp-ink); font-family: Arial, sans-serif; }
#fich .fp-buyrow .qty-btn:hover { color: var(--fp-pink); }
#fich .fp-buyrow .qty { width: 28px; min-width: 28px; height: auto; border: 0; border-radius: 0; margin: 0; padding: 0; text-align: center; font-weight: 800; font-size: 17px; line-height: normal; letter-spacing: 0; background: transparent; color: var(--fp-ink); }
#fich .fp-buyrow .buy { flex-grow: 1; align-self: stretch; max-width: none; margin: 0; position: relative; height: 58px; padding-top: 0; border: 0; border-radius: 14px; background: var(--fp-green); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 16px rgba(31,203,95,.35); overflow: hidden; }
#fich .fp-buyrow .buy:hover { filter: brightness(.96); }
#fich .fp-buyrow .buy .hv9 { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 18px; line-height: normal; letter-spacing: .03em; text-transform: uppercase; }
#fich .fp-buyrow .buy .fp-buy-icon { width: 20px; height: 20px; flex-shrink: 0; }
#fich.prdt-agtd .fp-buyrow .buy .fp-buy-icon { display: none; }
#fich .fp-buyrow .buy input[type="submit"] { position: absolute; inset: 0; border: 0; opacity: 0; cursor: pointer; display: block; }
#fich .fp-buyrow .buy .stock, #fich .fp-buyrow .buy .delv { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fp-green-ink); white-space: nowrap; }
#fich .fp-buyrow .buy .delv { bottom: -34px; color: var(--fp-pink); }
/* feedback del botón COMPRAR: spinner mientras se añade, ✓ al terminar (clases de ficha-producto.js) */
#fich .fp-buyrow .buy.is-adding, #fich .fp-buyrow .buy.is-added, .fp-sticky .fp-btn-buy.is-adding, .fp-sticky .fp-btn-buy.is-added { pointer-events: none; }
#fich .fp-buyrow .buy.is-adding .hv9, #fich .fp-buyrow .buy.is-added .hv9, .fp-sticky .fp-btn-buy.is-adding, .fp-sticky .fp-btn-buy.is-added { color: transparent; }
#fich .fp-buyrow .buy.is-adding .fp-buy-icon, #fich .fp-buyrow .buy.is-added .fp-buy-icon, .fp-sticky .fp-btn-buy.is-adding > svg, .fp-sticky .fp-btn-buy.is-added > svg { visibility: hidden; }
#fich .fp-buyrow .buy.is-adding::after, .fp-sticky .fp-btn-buy.is-adding::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 999px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: fp-spin .7s linear infinite; }
#fich .fp-buyrow .buy.is-added, .fp-sticky .fp-btn-buy.is-added { background: var(--fp-green-ink); }
#fich .fp-buyrow .buy.is-added::after, .fp-sticky .fp-btn-buy.is-added::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; background: no-repeat center / 28px 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>"); animation: fp-pop .3s ease-out; }
.fp-sticky .fp-btn-buy { position: relative; }
@keyframes fp-spin { to { transform: rotate(360deg); } }
@keyframes fp-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Agotado: el diseño sustituye cantidad+COMPRAR por «Avísame» */
#fich.prdt-agtd .fp-buyblock { display: none; }
/* aviso de cantidad recortada al stock */
.fp-qty-note { margin: 0; font-size: 13px; color: var(--fp-warn-ink); background: var(--fp-warn-bg); border-radius: 10px; padding: 8px 12px; line-height: 1.4; }
.fp-qty-note[hidden] { display: none; }
.fp-qty-note button { border: 0; padding: 0; background: transparent; font-family: inherit; font-size: inherit; font-weight: 800; color: var(--fp-pink); text-decoration: underline; cursor: pointer; }
/* «Avísame cuando haya más» con stock: la caja de aviso se abre a mano */
#fich.fp-notify-open .fp-notify { display: block; }
.show-stock { font-size: 12px; font-weight: 700; color: var(--fp-muted); text-decoration: none; }
@media (min-width: 900px) {
  .fp-qty-label { display: block; }
  #fich .fp-buyrow .qty-wrpr { display: flex; }
  #fich .fp-buyrow .buy { height: 62px; gap: 12px; }
  #fich .fp-buyrow .buy .hv9 { font-size: 19px; }
  #fich .fp-buyrow .buy .fp-buy-icon { width: 22px; height: 22px; }
}

/* Envíos + pago. Main: fila blanca (sin caja de color) con camión verde, «Recíbelo en 24/48 h» +
   «Envío gratis a partir de X» y «Ver condiciones ›» en rosa a la derecha; Movil: una sola línea y
   «Ver condiciones» debajo. Siempre visible, también agotado. */
.fp-shipblock { display: flex; flex-direction: column; gap: 10px; }
.fp-shipline { width: 100%; display: flex; align-items: center; gap: 14px; padding: 8px 4px; border-radius: 14px; background: #fff; text-decoration: none; text-align: left; color: var(--fp-ink); }
.fp-shipline:hover { color: var(--fp-ink); }
.fp-shipline .dty-mc-truck { color: var(--fp-green-ink); flex-shrink: 0; }
.fp-shipline .dty-mc-truck svg { width: 26px; height: 26px; color: var(--fp-green-ink); }
.fp-shipline .text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; line-height: normal; }
.fp-shipline__line { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fp-ink); }
.fp-shipline__line b { font-size: 14px; font-weight: 800; }
.fp-shipline__sub-desk { display: none; }
.fp-shipline__more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; color: var(--fp-pink); white-space: nowrap; }
.fp-shipline__more--desk { display: none; }
.fp-pay { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13px; }
.fp-pay > svg { flex-shrink: 0; }
.fp-pay strong { white-space: nowrap; font-weight: 800; }
.fp-pay__cards { height: 24px; width: auto; margin-left: auto; }
@media (min-width: 900px) {
  .fp-shipline__line { white-space: normal; overflow: visible; display: flex; flex-direction: column; gap: 2px; }
  .fp-shipline__line b { font-size: 15px; }
  .fp-shipline__sep, .fp-shipline__sub-mob { display: none; }
  .fp-shipline__sub-desk { display: block; font-size: 13px; color: #4D4562; }
  .fp-shipline__more--mob { display: none; }
  .fp-shipline__more--desk { display: inline-flex; }
  .fp-pay__cards { height: 28px; }
}

/* Avísame (sin stock): caja #FBF2F7 radio 16, padding 20 (18 en móvil). Visual, sin backend
   todavía (ver fp-notify-form en ficha-producto.js). */
.fp-notify { display: none; background: var(--fp-pink-soft); border-radius: 16px; padding: 18px; }
#fich.prdt-agtd .fp-notify { display: block; }
.fp-notify__form, .fp-notify__done { display: flex; flex-direction: column; gap: 12px; }
.fp-notify__head { display: flex; gap: 10px; align-items: flex-start; }
.fp-notify__head > svg { color: var(--fp-pink); flex-shrink: 0; }
.fp-notify__head > div { display: flex; flex-direction: column; gap: 2px; }
.fp-notify__title { font-size: 16px; font-weight: 800; }
.fp-notify__text { font-size: 13px; color: var(--fp-muted); line-height: 1.4; }
.fp-notify__label { font-size: 13px; font-weight: 800; }
.fp-notify__input { height: 52px; border-radius: 12px; border: 1.5px solid #CFC9D8; background: #fff; padding: 0 14px; font-size: 16px; color: var(--fp-ink); margin-top: -6px; font-family: inherit; width: 100%; box-sizing: border-box; }
.fp-notify__privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--fp-muted); font-weight: 400; margin: 0; cursor: pointer; }
.fp-notify__privacy input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--fp-pink); }
.fp-notify__privacy a { color: var(--fp-pink); font-weight: 700; }
.fp-btn-pink { height: 56px; border: 0; border-radius: 12px; background: var(--fp-pink); color: #fff; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 16px; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.fp-notify__done-row { display: flex; gap: 12px; align-items: center; }
.fp-notify__done-ico { width: 40px; height: 40px; border-radius: 999px; background: var(--fp-green-soft); color: var(--fp-green-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-notify__done-row > div { display: flex; flex-direction: column; gap: 2px; }
.fp-notify__done-row strong { font-size: 16px; font-weight: 800; }
.fp-notify__again { align-self: flex-start; height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--fp-pink); font-family: inherit; font-weight: 800; font-size: 14px; text-decoration: underline; cursor: pointer; }
@media (min-width: 900px) { .fp-notify { padding: 20px; } }

/* ---------- Fotos sin «cuadro» blanco ----------
   Las fotos del proveedor vienen con fondo blanco: sobre las cajas #FAF9FB se notaba el borde.
   Como en preciosadictos, mix-blend-mode: multiply funde el blanco con el fondo de la caja (el
   fondo tiene que estar en el propio contenedor de la imagen: las capas con transform —pista de
   Fancybox— crean su contexto y el multiply solo ve lo que hay dentro). */
#fich-glle .f-carousel__slide img, #fich-glle .f-thumbs__slide img, #fich-pack .fp-pack__img img, .fp-zoom__stage img, .fp-sticky__img, .fp-chat__product img, .fp-chat__pcard img, .fp-guide__product img { mix-blend-mode: multiply; }

/* Corazón del wishlist: contorno rosa y, al añadir (.actv, lo pone wishlist.js), relleno */
#fich .fp-fav-wrap .fvrt, .fp-sticky__fav { color: var(--fp-pink); }
/* feedback de favoritos como el de COMPRAR: spinner mientras responde y ✓ con latido al guardar (ficha-producto.js) */
.fp-fav-wrap, .fp-sticky__fav { position: relative; }
.fp-fav-wrap.is-adding, .fp-fav-wrap.is-added, .fp-sticky__fav.is-adding, .fp-sticky__fav.is-added { pointer-events: none; }
.fp-fav-wrap.is-adding .fvrt, .fp-fav-wrap.is-added .fvrt, .fp-sticky__fav.is-adding > svg, .fp-sticky__fav.is-added > svg { visibility: hidden; }
.fp-fav-wrap.is-adding::after, .fp-sticky__fav.is-adding::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 999px; border: 2.5px solid var(--fp-line); border-top-color: var(--fp-pink); animation: fp-spin .7s linear infinite; }
.fp-fav-wrap.is-added, .fp-sticky__fav.is-added { background: var(--fp-pink); border-color: var(--fp-pink); }
.fp-fav-wrap.is-added::after, .fp-sticky__fav.is-added::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: no-repeat center / 22px 22px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round'><path d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.4 4.5 7 4.5c2 0 3.5 1.1 5 3 1.5-1.9 3-3 5-3 3.6 0 6 3.5 4.5 7.2C19.5 16.4 12 21 12 21z'/></svg>"); animation: fp-pop .3s ease-out; }
/* toast de favoritos: el de la cesta (.dty-cart-toast, style.css) en rosa */
.dty-cart-toast.fp-fav-toast.is-added { border-color: var(--fp-pink); }
.dty-cart-toast.fp-fav-toast .dty-cart-toast-check, .dty-cart-toast.fp-fav-toast .dty-cart-toast-link { background: var(--fp-pink); }
.dty-cart-toast.fp-fav-toast.is-added .dty-cart-toast-status { color: var(--fp-pink); }
#fich .fp-fav-wrap .fvrt::before { content: ""; display: block; width: 20px; height: 20px; font-family: inherit; background: no-repeat center / 20px 20px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0176A' stroke-width='2' stroke-linejoin='round'><path d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.4 4.5 7 4.5c2 0 3.5 1.1 5 3 1.5-1.9 3-3 5-3 3.6 0 6 3.5 4.5 7.2C19.5 16.4 12 21 12 21z'/></svg>"); }
#fich .fp-fav-wrap .fvrt.actv::before, .fp-sticky__fav.actv svg { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B0176A' stroke='%23B0176A' stroke-width='2' stroke-linejoin='round'><path d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.4 4.5 7 4.5c2 0 3.5 1.1 5 3 1.5-1.9 3-3 5-3 3.6 0 6 3.5 4.5 7.2C19.5 16.4 12 21 12 21z'/></svg>"); }
.fp-sticky__fav.actv svg { fill: var(--fp-pink); }

/* ---------- Pack "Completa el look" (products_together.php) ----------
   Artboards PackFoto / PackFotoMovil del canvas. El motor de app.js sigue
   leyendo .pack/.hvr/#pcktl/#buypack (ver el comentario de la plantilla).
   style.css trae reglas con #fich-pack y #pcktl.total para el pack viejo
   (foto absoluta en móvil, Boris Black Bloxx, .hvr verde al pasar…): todo
   lo de aquí va con #fich-pack.fp-pack / #fich-pack #pcktl para ganarles. */
#fich-pack.fp-pack { padding: 20px; margin: 0; width: auto; border-radius: 18px; background: var(--fp-card); display: flex; flex-direction: column; gap: 12px; }
#fich-pack .fp-pack__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#fich-pack .fp-pack__title { margin: 0; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 16px; line-height: normal; text-transform: uppercase; white-space: nowrap; color: var(--fp-ink); }
#fich-pack .fp-pack__pill { flex-shrink: 0; white-space: nowrap; background: var(--fp-pink); color: #fff; font-weight: 800; font-size: 13px; line-height: normal; padding: 5px 10px; border-radius: 999px; }
#fich-pack .fp-pack__pill-word { display: none; }
#fich-pack .fp-pack__count { display: none; font-size: 14px; color: var(--fp-muted); }
#fich-pack .fp-pack__body { display: flex; flex-direction: column; gap: 12px; padding: 0; }
#fich-pack .fp-pack__items { display: flex; flex-direction: column; gap: 12px; width: auto; }
/* separador "+": en móvil un círculo rosa entre tarjetas */
#fich-pack.fp-pack .fp-pack__plus { display: flex; justify-content: center; align-items: center; margin: -6px auto; padding: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--fp-pink); color: #fff; font-family: var(--fp-font); font-weight: 800; font-size: 18px; line-height: 1; }

/* tarjeta (.pack real): fila en móvil, columna en escritorio */
#fich-pack.fp-pack .fp-pack__item { position: relative; display: flex; align-items: center; gap: 10px; width: auto; max-width: none; min-height: 0; margin: 0; padding: 8px 12px 8px 10px; border: 2px dashed #CFC9D8; border-radius: 14px; background: #FAF9FB; cursor: pointer; }
#fich-pack.fp-pack .fp-pack__item.actv { border: 2px solid var(--fp-pink); background: #fff; }
#fich-pack.fp-pack .fp-pack__item.pprc { cursor: default; }
/* .hvr: el área que toggle-a app.js; cubre toda la tarjeta, sin el verde al pasar del CSS viejo */
#fich-pack.fp-pack .fp-pack__item .hvr { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; opacity: 1; cursor: pointer; }
#fich-pack.fp-pack .fp-pack__item .hvr:focus-visible { outline: 2px solid var(--fp-pink); outline-offset: 2px; }
/* casilla (visual: el estado es la clase actv) */
#fich-pack .fp-pack__check { position: relative; z-index: 3; flex-shrink: 0; width: 22px; height: 22px; border-radius: 4px; border: 2px solid #9A92AC; background: #fff; box-sizing: border-box; cursor: pointer; }
#fich-pack .fp-pack__item.actv .fp-pack__check { border-color: var(--fp-pink); background: var(--fp-pink); }
#fich-pack .fp-pack__item.actv .fp-pack__check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
#fich-pack .fp-pack__item.pprc .fp-pack__check { opacity: .55; }
/* foto */
#fich-pack.fp-pack .fp-pack__img { position: relative; flex-shrink: 0; width: 48px; height: 60px; border-radius: 8px; background: #FAF9FB; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#fich-pack.fp-pack .fp-pack__item:not(.actv) .fp-pack__img { opacity: .4; filter: grayscale(1); }
#fich-pack.fp-pack .fp-pack__img img { position: static; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; display: block; }
#fich-pack.fp-pack .fp-pack__zoom { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; margin: 0; background: transparent; display: flex; align-items: flex-end; justify-content: flex-end; cursor: pointer; }
#fich-pack.fp-pack .fp-pack__zoom > span { width: 20px; height: 20px; margin: 2px; border-radius: 999px; background: #fff; color: var(--fp-pink); box-shadow: 0 1px 4px rgba(27,20,51,.2); display: flex; align-items: center; justify-content: center; }
#fich-pack.fp-pack .fp-pack__zoom svg { width: 12px; height: 12px; }
/* textos */
#fich-pack .fp-pack__text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
#fich-pack .fp-pack__tag { font-size: 11px; line-height: normal; color: var(--fp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fich-pack.fp-pack .fp-pack__item .titu { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: auto; min-height: 0; margin: 0; font-family: var(--fp-font); font-size: 14px; line-height: 1.25; font-weight: 800; text-align: left; color: var(--fp-ink); }
#fich-pack.fp-pack .fp-pack__item .price { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 15px; line-height: normal; white-space: nowrap; text-align: right; color: var(--fp-ink); }
#fich-pack.fp-pack .fp-pack__item:not(.actv) .price { color: #9A92AC; }
#fich-pack.fp-pack .fp-pack__item.pprc .price { color: var(--fp-ink); }

/* resumen (#pcktl real: .prco / .fnsh span / .fnsh small b los escribe app.js y los repinta
   ficha-producto.js) */
#fich-pack #pcktl.total { width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; border: 0; align-self: auto; text-align: left; font-family: var(--fp-font); display: flex; flex-direction: column; gap: 12px; }
#fich-pack #pcktl .fp-pack__box { background: #fff; border: 1.5px solid var(--fp-line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
#fich-pack #pcktl .fp-pack__sel { order: 1; font-size: 12px; font-weight: 700; color: var(--fp-muted); }
#fich-pack #pcktl .fp-pack__hint { order: 2; font-size: 13px; line-height: 1.4; color: var(--fp-pink-dark); }
#fich-pack #pcktl .fp-pack__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#fich-pack #pcktl .fp-pack__row--sep { order: 3; font-size: 13px; color: var(--fp-muted); }
#fich-pack #pcktl .fp-pack__row--sep .prco { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; text-decoration: line-through; }
#fich-pack #pcktl .fp-pack__row--pack { order: 4; align-items: center; }
#fich-pack #pcktl .fp-pack__row--pack .text { display: none; margin: 0; white-space: nowrap; font-size: 14px; line-height: normal; font-weight: 800; text-transform: none; color: var(--fp-ink); }
#fich-pack #pcktl .fp-pack__save { background: var(--fp-green-soft); color: var(--fp-green-ink); font-weight: 800; font-size: 12px; line-height: normal; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
#fich-pack #pcktl .fp-pack__save b { font-weight: inherit; }
#fich-pack #pcktl .fnsh { margin: 0; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 26px; line-height: 1; text-transform: none; color: var(--fp-pink); }
#fich-pack #pcktl .fnsh span { font-size: inherit; line-height: inherit; }
#fich-pack #pcktl .fnsh small { display: none; }
#fich-pack #pcktl .fp-pack__row--total { order: 4; font-size: 14px; font-weight: 800; color: var(--fp-ink); }
#fich-pack #pcktl .fp-pack__row--total [data-fp-pack-total] { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 26px; line-height: 1; }
#fich-pack #pcktl .fp-pack__row[hidden], #fich-pack #pcktl .fp-pack__hint[hidden], #fich-pack #pcktl .fp-pack__save[hidden] { display: none; }
/* botón (#buypack real) */
#fich-pack #pcktl .buton.fp-pack__btn { position: static; align-self: stretch; width: auto; max-width: none; height: 54px; margin: 0; padding: 0 6px; border: 0; border-radius: 12px; background: var(--fp-green); color: #fff; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 16px; line-height: normal; letter-spacing: .02em; text-transform: none; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 16px rgba(31,203,95,.35); }
#fich-pack #pcktl .buton.fp-pack__btn:hover { filter: brightness(.96); color: #fff; }
#fich-pack #pcktl .buton.fp-pack__btn span { white-space: nowrap; }
#fich-pack #pcktl .buton.fp-pack__btn svg { flex-shrink: 0; }
#fich-pack #pcktl.is-single .buton.fp-pack__btn { opacity: .5; pointer-events: none; }
/* «Añadir selección» no cabe a 16px en los 210px del resumen de escritorio */
#fich-pack #pcktl.is-partial .buton.fp-pack__btn span { font-size: 15px; }

@media (min-width: 900px) {
  #fich-pack.fp-pack { padding: 28px 32px; border-radius: var(--fp-radius); gap: 20px; }
  #fich-pack .fp-pack__head { justify-content: flex-start; }
  #fich-pack .fp-pack__title { font-size: 24px; }
  #fich-pack .fp-pack__pill { font-size: 14px; padding: 6px 12px; }
  #fich-pack .fp-pack__pill-word { display: inline; }
  #fich-pack .fp-pack__count { display: inline; }
  #fich-pack .fp-pack__body { flex-direction: row; align-items: stretch; gap: 28px; }
  #fich-pack .fp-pack__items { flex-grow: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  #fich-pack.fp-pack .fp-pack__plus { width: auto; height: auto; margin: 0; background: transparent; color: var(--fp-pink); font-size: 24px; line-height: normal; }
  #fich-pack.fp-pack .fp-pack__item { flex: 1 1 0; min-width: 120px; max-width: 220px; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  #fich-pack.fp-pack .fp-pack__item .hvr { border-radius: 12px; }
  #fich-pack .fp-pack__check { position: absolute; top: 10px; right: 10px; z-index: 3; }
  #fich-pack.fp-pack .fp-pack__img { width: auto; height: 120px; border-radius: 10px; }
  #fich-pack.fp-pack .fp-pack__zoom { align-items: center; justify-content: center; background: rgba(176,23,106,.18); opacity: 0; transition: opacity .15s; }
  #fich-pack.fp-pack .fp-pack__item:hover .fp-pack__zoom, #fich-pack.fp-pack .fp-pack__zoom:focus-visible { opacity: 1; }
  #fich-pack.fp-pack .fp-pack__zoom > span { width: 48px; height: 48px; margin: 0; box-shadow: 0 4px 12px rgba(27,20,51,.2); }
  #fich-pack.fp-pack .fp-pack__zoom svg { width: 24px; height: 24px; }
  #fich-pack .fp-pack__text { gap: 8px; }
  #fich-pack .fp-pack__tag { font-size: 12px; }
  #fich-pack.fp-pack .fp-pack__item .titu { font-size: 13px; line-height: 1.3; min-height: 34px; }
  #fich-pack.fp-pack .fp-pack__item .price { font-size: 16px; text-align: left; }
  /* Packs grandes (6+ artículos, p. ej. Gangster/Joker): la fila se parte. Para que todas las
     tarjetas midan lo mismo en las dos filas se pasa a rejilla de columnas iguales (sin los «+»,
     que no caben en una rejilla) y el resumen se queda arriba en vez de estirarse a dos filas. */
  #fich-pack .fp-pack__items:has(.fp-pack__item:nth-of-type(6)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; align-items: stretch; }
  #fich-pack .fp-pack__items:has(.fp-pack__item:nth-of-type(6)) .fp-pack__plus { display: none; }
  #fich-pack.fp-pack .fp-pack__items:has(.fp-pack__item:nth-of-type(6)) .fp-pack__item { max-width: none; min-width: 0; }
  #fich-pack .fp-pack__body:has(.fp-pack__item:nth-of-type(6)) { align-items: flex-start; }
  /* resumen lateral de 250px */
  #fich-pack #pcktl.total { width: 250px; flex-shrink: 0; gap: 0; background: #fff; border: 1.5px solid var(--fp-line); border-radius: 16px; padding: 20px; justify-content: center; }
  #fich-pack #pcktl .fp-pack__box { border: 0; border-radius: 0; padding: 0; gap: 8px; }
  #fich-pack #pcktl .fp-pack__sel { font-size: 13px; }
  #fich-pack #pcktl .fp-pack__hint { order: 5; background: #fff; border: 1.5px dashed var(--fp-pink); border-radius: 10px; padding: 8px 10px; }
  #fich-pack #pcktl .fp-pack__row--sep { font-size: 14px; }
  #fich-pack #pcktl .fp-pack__row--pack { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text price" "save save"; row-gap: 8px; align-items: baseline; }
  #fich-pack #pcktl .fp-pack__row--pack .text { display: block; grid-area: text; }
  #fich-pack #pcktl .fnsh { grid-area: price; font-size: 30px; }
  #fich-pack #pcktl .fp-pack__save { grid-area: save; justify-self: end; font-size: 13px; padding: 4px 10px; }
  #fich-pack #pcktl .fp-pack__row--total [data-fp-pack-total] { font-size: 30px; }
  #fich-pack #pcktl .buton.fp-pack__btn { margin-top: 16px; }
}

/* ---------- Panel lateral «Envíos y devoluciones» (shipping_panel.php, nuevo) ---------- */
.fp-ship { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end; font-family: var(--fp-font); color: var(--fp-ink); }
.fp-ship[hidden] { display: none; }
.fp-ship__backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgba(27,20,51,.55); cursor: default; }
.fp-ship__dialog { position: relative; width: 88%; max-width: 460px; height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(27,20,51,.25); transform: translateX(100%); transition: transform .3s ease-out; }
.fp-ship.is-open .fp-ship__dialog { transform: none; }
.fp-ship__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--fp-line); flex-shrink: 0; }
.fp-ship__title { margin: 0; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 20px; line-height: normal; text-transform: uppercase; color: var(--fp-ink); }
.fp-ship__close { flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 0; background: var(--fp-bg); color: var(--fp-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fp-ship__body { flex-grow: 1; overflow-y: auto; padding: 4px 20px 20px; font-size: 14px; line-height: 1.5; }
.fp-ship__body p { margin: 0; text-align: left; }
.fp-ship__sec { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--fp-line-soft); }
.fp-ship__sec:last-child { border-bottom: 0; }
.fp-ship__h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 18px; line-height: normal; color: var(--fp-pink); }
.fp-ship__h3 svg { flex-shrink: 0; }
.fp-ship__free { display: flex; gap: 12px; align-items: center; background: var(--fp-pink-soft); border-radius: 12px; padding: 14px; color: var(--fp-pink-dark); font-weight: 800; }
.fp-ship__free svg { flex-shrink: 0; }
.fp-ship__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--fp-line-soft); }
.fp-ship__row svg { flex-shrink: 0; }
.fp-ship__row-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-ship__row-text strong { font-size: 14px; font-weight: 800; }
.fp-ship__row-text span { font-size: 12px; color: var(--fp-muted); }
.fp-ship__price { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 15px; white-space: nowrap; }
.fp-ship__note { font-size: 13px; color: var(--fp-muted); }
.fp-ship__link { font-weight: 800; color: var(--fp-pink); align-self: flex-start; }
.fp-ship__link:hover { color: var(--fp-pink-dark); }
/* Contenido editable desde el admin (página de información SHIP_PANEL_INFO_ID): el HTML del
   editor se viste como las secciones del diseño. h3 = sección con icono por orden (camión, casa,
   punto, caja; el resto, un check), blockquote = caja rosa, table = filas nombre/plazo | precio. */
.fp-ship__cms { font-size: 14px; line-height: 1.5; }
.fp-ship__cms > * { margin: 0 0 10px; }
.fp-ship__cms h3 { margin: 0 0 10px; padding: 20px 0 0; display: flex; align-items: center; gap: 10px; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 18px; line-height: normal; color: var(--fp-pink); text-transform: none; border-top: 1px solid var(--fp-line-soft); }
.fp-ship__cms h3:first-child { border-top: 0; }
.fp-ship__cms h3::before { content: ""; flex-shrink: 0; width: 24px; height: 24px; background: no-repeat center / 24px 24px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0176A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); }
.fp-ship__cms h3:nth-of-type(1)::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0176A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h13v10H1zM14 10h4l3 3v3h-7'/><circle cx='5' cy='18' r='2'/><circle cx='17' cy='18' r='2'/></svg>"); }
.fp-ship__cms h3:nth-of-type(2)::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0176A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-7 9 7'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>"); }
.fp-ship__cms h3:nth-of-type(3)::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0176A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/><circle cx='12' cy='9.5' r='2.5'/></svg>"); }
.fp-ship__cms h3:nth-of-type(4)::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0176A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l9-4 9 4v10l-9 4-9-4z'/><path d='M3 7l9 4 9-4M12 11v10'/></svg>"); }
.fp-ship__cms p { margin: 0 0 10px; text-align: left; color: var(--fp-ink); line-height: 1.5; }
.fp-ship__cms p small, .fp-ship__cms > small { display: block; font-size: 13px; color: var(--fp-muted); }
.fp-ship__cms blockquote { margin: 0 0 10px; padding: 14px 14px 14px 54px; border: 0; background: var(--fp-pink-soft) no-repeat 14px center / 28px 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E0F4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h13v10H1zM14 10h4l3 3v3h-7'/><circle cx='5' cy='18' r='2'/><circle cx='17' cy='18' r='2'/></svg>"); border-radius: 12px; color: var(--fp-pink-dark); font-weight: 800; font-size: 14px; font-style: normal; }
.fp-ship__cms table { width: 100%; border-collapse: collapse; margin: 0 0 10px; border: 0; background: transparent; }
.fp-ship__cms thead { display: none; }
.fp-ship__cms tr { background: transparent; }
.fp-ship__cms td { padding: 10px 0 10px 28px; border: 0; border-bottom: 1px solid var(--fp-line-soft); vertical-align: middle; text-align: left; font-size: 14px; font-weight: 800; color: var(--fp-ink); background: no-repeat 0 center / 18px 18px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23B0176A'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.fp-ship__cms td:last-child { padding-left: 10px; width: 1%; white-space: nowrap; text-align: right; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 15px; background: none; }
.fp-ship__cms td small { display: block; font-size: 12px; font-weight: 400; color: var(--fp-muted); }
.fp-ship__cms ul, .fp-ship__cms ol { margin: 0 0 10px; padding-left: 20px; }
.fp-ship__cms a { color: var(--fp-pink); font-weight: 800; }
.fp-ship__cms-foot { padding: 10px 0 20px; }

@media (min-width: 900px) {
  .fp-ship__dialog { width: 460px; }
  .fp-ship__head { padding: 14px 28px; }
  .fp-ship__body { padding: 4px 28px 20px; }
}

/* ---------- Guía de tallas (fp-guide, nuevo; foto real del proveedor) ---------- */
.fp-guide { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; font-family: var(--fp-font); color: var(--fp-ink); }
.fp-guide[hidden] { display: none; }
.fp-guide__backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgba(27,20,51,.55); cursor: default; }
.fp-guide__dialog { position: relative; width: 100%; max-height: 88%; background: #fff; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: 0 -12px 40px rgba(27,20,51,.25); transform: translateY(100%); transition: transform .3s ease-out; }
.fp-guide.is-open .fp-guide__dialog { transform: none; }
.fp-guide__handle { display: flex; justify-content: center; padding-top: 8px; }
.fp-guide__handle span { width: 40px; height: 4px; border-radius: 999px; background: #D9D3E2; }
.fp-guide__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--fp-line); flex-shrink: 0; }
.fp-guide__title { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 19px; line-height: normal; text-transform: uppercase; color: var(--fp-ink); }
.fp-guide__title-ico { color: var(--fp-pink); display: flex; }
.fp-guide__close { flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 0; background: var(--fp-bg); color: var(--fp-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fp-guide__body { overflow-y: auto; padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.fp-guide__product { display: flex; gap: 12px; align-items: center; }
.fp-guide__product img { width: 44px; height: 56px; object-fit: contain; background: #FAF9FB; border-radius: 8px; flex-shrink: 0; }
.fp-guide__product div { display: flex; flex-direction: column; min-width: 0; }
.fp-guide__product strong { font-size: 14px; font-weight: 800; }
.fp-guide__product span { font-size: 13px; color: var(--fp-muted); }
.fp-guide__tabs { display: flex; gap: 6px; background: var(--fp-bg); border-radius: 12px; padding: 4px; }
.fp-guide__tabs button { flex: 1 1 0; height: 44px; border: 0; border-radius: 9px; font-family: inherit; font-weight: 800; font-size: 14px; background: transparent; color: var(--fp-muted); cursor: pointer; }
.fp-guide__tabs button[aria-selected="true"] { background: #fff; color: var(--fp-ink); box-shadow: 0 1px 4px rgba(27,20,51,.12); }
.fp-guide__panel { display: flex; flex-direction: column; gap: 18px; }
.fp-guide__panel[hidden] { display: none; }
.fp-guide__photos { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--fp-line); border-radius: 14px; overflow: hidden; background: #FAF9FB; }
.fp-guide__photos img { display: block; width: 100%; height: auto; }
.fp-guide__tip { display: flex; gap: 10px; align-items: flex-start; background: var(--fp-warn-bg); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.45; color: var(--fp-warn-ink); }
.fp-guide__tip svg { flex-shrink: 0; }
.fp-guide__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fp-guide__steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.fp-guide__steps li > span:first-child { width: 28px; height: 28px; border-radius: 999px; background: var(--fp-pink); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-guide__cta { height: 54px; border: 0; border-radius: 12px; background: var(--fp-ink); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
@media (min-width: 900px) {
  .fp-guide { align-items: center; }
  .fp-guide__dialog { width: 720px; max-height: 86%; border-radius: 20px; box-shadow: 0 24px 60px rgba(27,20,51,.3); transform: none; opacity: 0; transition: opacity .2s ease-out; }
  .fp-guide.is-open .fp-guide__dialog { opacity: 1; }
  .fp-guide__handle { display: none; }
  .fp-guide__head { padding: 12px 28px; }
  .fp-guide__body { padding: 18px 28px 22px; }
}

/* ---------- Chat del experto (fp-chat, nuevo) ---------- */
.fp-chat { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; font-family: var(--fp-font); color: var(--fp-ink); }
.fp-chat[hidden] { display: none; }
.fp-chat__backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgba(27,20,51,.55); cursor: default; }
.fp-chat__dialog { position: relative; width: 100%; max-height: 90%; border-radius: 22px 22px 0 0; background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(27,20,51,.3); transform: translateY(100%); transition: transform .3s ease-out; }
.fp-chat.is-open .fp-chat__dialog { transform: none; }
.fp-chat__head { background: var(--fp-pink); color: #fff; padding: 16px 16px 18px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.fp-chat__hbtn { width: 40px; height: 40px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.fp-chat__hbtn[hidden] { display: none; }
.fp-chat__avatar { position: relative; display: block; width: 52px; height: 52px; flex-shrink: 0; }
.fp-chat__avatar img { width: 52px; height: 52px; border-radius: 999px; background: #EFE6F7; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(27,20,51,.18); display: block; object-fit: cover; box-sizing: border-box; }
.fp-chat__online { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--fp-green); border: 2px solid var(--fp-pink); box-sizing: content-box; }
.fp-chat__who { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-chat__who h2 { margin: 0; font-family: var(--fp-font); font-size: 17px; font-weight: 900; line-height: normal; color: #fff; text-transform: none; }
.fp-chat__who span { font-size: 12px; opacity: .9; }
.fp-chat__body { overflow-y: auto; padding: 16px; background: #FAF8FC; }
.fp-chat__view { display: flex; flex-direction: column; gap: 14px; }
.fp-chat__view[hidden] { display: none; }
.fp-chat__msg { display: flex; gap: 10px; align-items: flex-end; }
.fp-chat__mini { width: 30px; height: 30px; border-radius: 999px; background: #EFE6F7; overflow: hidden; display: block; flex-shrink: 0; box-shadow: 0 2px 10px rgba(27,20,51,.18); }
.fp-chat__mini img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fp-chat__bubble { background: #fff; border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 4px rgba(27,20,51,.08); }
.fp-chat__product { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--fp-line-soft); border-radius: 12px; padding: 8px 10px; }
.fp-chat__product img { width: 34px; height: 44px; object-fit: contain; background: #FAF9FB; border-radius: 6px; flex-shrink: 0; }
.fp-chat__product > span { font-size: 12px; line-height: 1.35; color: var(--fp-muted); min-width: 0; }
.fp-chat__product strong { color: var(--fp-ink); font-size: 13px; font-weight: 800; }
.fp-chat__q { font-size: 13px; font-weight: 800; }
.fp-chat__wa, .fp-chat__write { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; text-decoration: none; text-align: left; font-family: inherit; cursor: pointer; width: 100%; }
.fp-chat__wa { background: var(--fp-green); color: #fff; border: 0; }
.fp-chat__wa:hover { color: #fff; filter: brightness(.96); }
.fp-chat__write { background: #fff; color: var(--fp-ink); border: 1.5px solid var(--fp-line); }
.fp-chat__ico { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-chat__wa .fp-chat__ico { background: rgba(255,255,255,.22); }
.fp-chat__write .fp-chat__ico { background: #F6F1FA; color: var(--fp-pink); }
.fp-chat__opt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-chat__opt strong { font-size: 16px; font-weight: 800; }
.fp-chat__opt span { font-size: 12px; }
.fp-chat__wa .fp-chat__opt span { opacity: .95; }
.fp-chat__write .fp-chat__opt span { color: var(--fp-muted); }
.fp-chat__chev { color: var(--fp-pink); display: flex; }
.fp-chat__wa > svg { flex-shrink: 0; }
/* formulario */
.fp-chat__section { display: flex; flex-direction: column; gap: 8px; }
.fp-chat__section--fields { gap: 12px; }
.fp-chat__section h3 { margin: 0; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 13px; line-height: normal; text-transform: uppercase; letter-spacing: .02em; color: var(--fp-ink); }
.fp-chat__pcard { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--fp-line-soft); border-radius: 12px; padding: 10px; }
.fp-chat__pcard img { width: 44px; height: 58px; object-fit: contain; background: #FAF9FB; border-radius: 8px; flex-shrink: 0; }
.fp-chat__pcard div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-chat__pcard strong { font-size: 14px; line-height: 1.3; font-weight: 800; }
.fp-chat__pcard div > span { font-size: 12px; color: var(--fp-muted); }
.fp-chat__form .fp-field label span { color: var(--fp-pink); }
.fp-chat__form .fp-field input, .fp-chat__form .fp-field textarea { height: 48px; border-radius: 12px; border: 1.5px solid #CFC9D8; background: #fff; padding: 0 14px; font-size: 16px; color: var(--fp-ink); font-family: inherit; width: 100%; box-sizing: border-box; }
.fp-chat__form .fp-field textarea { height: auto; padding: 12px 14px; resize: none; line-height: 1.4; }
.fp-chat__form .fp-field input:focus, .fp-chat__form .fp-field textarea:focus { outline: 2px solid var(--fp-pink); outline-offset: 0; border-color: var(--fp-pink); }
/* casilla RGPD real del sitio (rgpd->formCheckTermsGeneral): pharaoniss.css esconde el input y
   pinta un span como casilla con «.xform input + label span» (0,2,3); aquí se usa el input nativo
   con accent-color, como en el diseño, así que los selectores llevan .xform para ganarle */
.fp-notify .rgpd-check.xform, .fp-chat__form .rgpd-check.xform { width: auto; margin: 0; padding: 0; float: none; display: flex; gap: 10px; align-items: flex-start; }
.fp-notify .rgpd-check.xform input[type="checkbox"], .fp-chat__form .rgpd-check.xform input[type="checkbox"] { display: inline-block; position: static; width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--fp-pink); opacity: 1; appearance: auto; -webkit-appearance: checkbox; cursor: pointer; }
.fp-notify .rgpd-check.xform input[type="checkbox"] + label, .fp-chat__form .rgpd-check.xform input[type="checkbox"] + label { display: block; margin: 0; padding: 0; font-size: 12px; line-height: 1.45; color: #4D4562; font-weight: 400; text-transform: none; cursor: pointer; }
.fp-notify .rgpd-check.xform input[type="checkbox"] + label span, .fp-chat__form .rgpd-check.xform input[type="checkbox"] + label span { display: none; }
.fp-notify .rgpd-check.xform label a, .fp-chat__form .rgpd-check.xform label a { color: var(--fp-pink); }
/* el icono (i) de la casilla lleva en title el texto informativo del término: se deja ver */
.fp-notify .rgpd-check.xform label i, .fp-chat__form .rgpd-check.xform label i { display: inline-block; margin-left: 4px; color: var(--fp-pink); font-style: normal; cursor: help; }
.fp-chat__error { background: var(--fp-red-soft); color: var(--fp-red-ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.fp-chat__error[hidden] { display: none; }
.fp-chat__send { height: 52px; border: 0; border-radius: 12px; background: var(--fp-pink); color: #fff; font-family: inherit; font-weight: 900; font-size: 16px; cursor: pointer; }
.fp-chat__send[disabled] { opacity: .6; cursor: wait; }
/* enviado */
.fp-chat__sent { align-items: center; gap: 10px; text-align: center; padding: 18px 6px; }
.fp-chat__sent-ico { width: 56px; height: 56px; border-radius: 999px; background: var(--fp-green-soft); color: var(--fp-green-ink); display: flex; align-items: center; justify-content: center; }
.fp-chat__sent strong { font-size: 18px; font-weight: 800; }
.fp-chat__sent > span:not(.fp-chat__sent-ico) { font-size: 14px; line-height: 1.5; color: var(--fp-muted); }
.fp-chat__backto { margin-top: 6px; height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--fp-ink); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
@media (min-width: 900px) {
  /* en escritorio es una ventana flotante abajo a la derecha, sin oscurecer la página */
  .fp-chat { inset: auto 24px 24px auto; width: 390px; max-height: calc(100% - 48px); display: flex; align-items: stretch; }
  .fp-chat__backdrop { display: none; }
  .fp-chat__dialog { width: 100%; max-height: 100%; border-radius: 22px; transform: none; opacity: 0; transition: opacity .2s ease-out; }
  .fp-chat.is-open .fp-chat__dialog { opacity: 1; }
}
/* el botón flotante se esconde mientras el chat está abierto */
.fp-expert-fab.is-hidden { display: none; }

/* Foto ampliada del pack (fp-zoom, nuevo; ver ficha-producto.js) */
.fp-zoom { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; font-family: var(--fp-font); color: var(--fp-ink); }
.fp-zoom[hidden] { display: none; }
.fp-zoom__backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgba(27,20,51,.7); cursor: default; }
.fp-zoom__dialog { position: relative; width: calc(100% - 24px); max-width: 560px; background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(27,20,51,.35); }
.fp-zoom__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 0; background: #fff; color: var(--fp-ink); box-shadow: 0 2px 8px rgba(27,20,51,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fp-zoom__stage { position: relative; height: 420px; background: #FAF9FB; display: flex; align-items: center; justify-content: center; }
.fp-zoom__stage img { width: 92%; height: 92%; object-fit: contain; display: block; }
.fp-zoom__nav { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--fp-line); padding: 0; background: #fff; color: var(--fp-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fp-zoom__nav--prev { left: 12px; }
.fp-zoom__nav--next { right: 12px; }
.fp-zoom__pos { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(43,31,79,.8); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.fp-zoom__foot { padding: 16px 20px 20px; display: flex; align-items: center; gap: 12px; }
.fp-zoom__info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-zoom__tag { font-size: 12px; color: var(--fp-muted); }
.fp-zoom__info strong { font-size: 16px; font-weight: 800; }
.fp-zoom__price { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 18px; }
.fp-zoom__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; min-height: 32px; font-size: 13px; font-weight: 800; color: var(--fp-pink); text-decoration: none; align-self: flex-start; }
.fp-zoom__link:hover { color: var(--fp-pink-dark); }
.fp-zoom__locked { font-size: 13px; font-weight: 800; color: var(--fp-muted); white-space: nowrap; }
.fp-zoom__toggle { height: 48px; padding: 0 18px; border-radius: 12px; font-family: inherit; font-weight: 800; font-size: 14px; white-space: nowrap; cursor: pointer; background: var(--fp-green); color: #fff; border: 0; }
.fp-zoom__toggle.is-on { background: var(--fp-pink-soft); color: var(--fp-pink); border: 2px solid var(--fp-pink); }
.fp-zoom__locked[hidden], .fp-zoom__toggle[hidden] { display: none; }
@media (min-width: 900px) {
  .fp-zoom__dialog { width: 560px; }
  .fp-zoom__stage { height: 480px; }
}

/* ---------- Características / Composición ---------- */
#fich-info.fp-info { padding: 0; overflow: hidden; }
#fich-info .fp-tabs { display: none; }
#fich-info .fp-acc-btn { width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--fp-line-soft); background: transparent; display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; text-align: left; color: var(--fp-ink); }
#fich-info .fp-acc-btn::after { content: "+"; font-size: 22px; color: var(--fp-pink); }
#fich-info .fp-acc-btn[aria-expanded="true"]::after { content: "−"; }
#fich-info .fp-panel { padding: 0 20px 18px; }
#fich-info .fp-panel[hidden] { display: none; }
#fich-info .text { font-size: 14px; line-height: 1.65; color: var(--fp-ink); }
#fich-info .text p { margin: 0 0 10px; }
#fich-info .text ul { margin: 0; padding-left: 20px; }
@media (min-width: 900px) {
  #fich-info .fp-tabs { display: flex; border-bottom: 1px solid var(--fp-line); padding: 0 20px; }
  #fich-info .fp-tab { height: 58px; padding: 0 18px; border: 0; background: transparent; font-weight: 800; font-size: 15px; margin-bottom: -1px; color: var(--fp-muted); border-bottom: 3px solid transparent; }
  #fich-info .fp-tab[aria-selected="true"] { color: var(--fp-pink); border-bottom-color: var(--fp-pink); }
  #fich-info .fp-acc-btn { display: none; }
  #fich-info .fp-panel { padding: 28px 36px 32px; }
  #fich-info .text { font-size: 15px; line-height: 1.7; }
}

/* Advertencia (getWarningProducts, real): una caja al pie de la tarjeta, como en el diseño.
   style.css la pinta centrada al 75% con borde amarillo (#fich-info .warning-bbs): se repisa. */
#fich-info .fp-warning { padding: 0 16px 16px; }
#fich-info .fp-warning .warning-bbs { width: auto; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--fp-radius-sm); background: var(--fp-warn-bg); color: var(--fp-warn-ink); font-size: 12px; line-height: 1.6; text-align: left; display: block; }
/* los avisos van seguidos en un mismo párrafo, como en el diseño */
#fich-info .fp-warning .warning-bbs p { margin: 0 10px 0 0; text-align: left; display: inline; }
#fich-info .fp-warning .warning-bbs strong { color: inherit; font-size: inherit; margin: 0; font-weight: 800; }
#fich-info .fp-warning .warning-bbs strong i { color: #8A6D00; margin-right: 4px; }
#fich-info .fp-warning .warning-bbs img { width: 24px; height: 24px; vertical-align: middle; margin: 0; border-radius: 0; }
/* La descripción viene del editor con tamaños sueltos (span style="font-size:12px"): en la ficha
   nueva manda el cuerpo de 14/15px del diseño */
#fich-info .text [style*="font-size"] { font-size: inherit !important; }
#fich-info .text > div:empty, #fich-info .text > p:empty { display: none; }
@media (min-width: 900px) {
  #fich-info .fp-warning { padding: 0 36px 32px; }
  #fich-info .fp-warning .warning-bbs { padding: 12px 16px; font-size: 13px; }
}

/* ---------- «Ficha» (Producto / Incluye / No incluye, de products_included) ----------
   Main.dc.html: rejilla 3fr/2fr gap 48 con la descripción a la izquierda y la tarjeta gris
   (#F4F2F6, radio 14, padding 20 22) a la derecha; dl de 100px + 1fr. Móvil: debajo del texto. */
.fp-desc { display: flex; flex-direction: column; gap: 20px; }
.fp-ficha { background: var(--fp-bg); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.fp-ficha h3 { margin: 0; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 17px; line-height: normal; color: var(--fp-ink); text-transform: none; }
.fp-ficha dl { margin: 0; display: grid; grid-template-columns: 100px minmax(0, 1fr); row-gap: 6px; column-gap: 12px; font-size: 14px; line-height: 1.5; }
.fp-ficha dt { color: var(--fp-muted); margin: 0; }
.fp-ficha dd { margin: 0; color: var(--fp-ink); }
.fp-ficha dd.fp-ficha__strong { font-weight: 700; }
@media (min-width: 900px) {
  .fp-desc--with-card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; }
}

/* ---------- Opiniones (comentarios.php; Main_Opiniones/Movil_Opiniones del canvas) ----------
   Escritorio: tarjeta padding 32, rejilla 320px | 1fr gap 48; izquierda nota 52px + estrellas +
   barras + «¿Qué tal de talla?» (caja #F4F2F6 radio 14) + botón outline; derecha filtros (chips 40px)
   + ordenar, tarjetas (borde #EEEBF2 radio 16 padding 20 22) y «Ver las N opiniones».
   Móvil: todo en columna, padding 24 20, chips con scroll horizontal. */
#fich-cmmt.fp-reviews { width: auto; margin: 0; padding: 24px 20px; border-radius: 18px; background: #fff; display: block; text-align: left; scroll-margin-top: 90px; }
#fich-cmmt.fp-reviews .titu2 { margin: 0; padding: 0; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 20px; line-height: normal; text-transform: uppercase; text-align: left; color: var(--fp-ink); }
#fich-cmmt .fp-reviews__t-desk { display: none; }
#fich-cmmt #cmnt { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 0; }
#fich-cmmt .opin-left, #fich-cmmt .opin-righ { width: 100%; float: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; }
#fich-cmmt #cmtr-wrte-bg { display: none; }
/* nota media */
#fich-cmmt .fp-reviews__score { display: flex; align-items: center; gap: 14px; }
#fich-cmmt .fp-reviews__num { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 44px; line-height: 1; color: var(--fp-ink); }
#fich-cmmt.fp-reviews--none .fp-reviews__num { color: #CFC9D8; font-size: 40px; }
#fich-cmmt.fp-reviews--none .fp-stars { font-size: 20px; letter-spacing: 2px; }
#fich-cmmt .fp-reviews__scoretxt { display: flex; flex-direction: column; gap: 2px; }
#fich-cmmt .fp-reviews__scoretxt .fp-stars { font-size: 20px; letter-spacing: 2px; }
#fich-cmmt .fp-reviews__scoretxt > span:last-child { font-size: 13px; color: var(--fp-muted); }
#fich-cmmt .fp-reviews__scoretxt b { color: var(--fp-green-ink); font-weight: 800; }
#fich-cmmt .fp-reviews__hint { font-size: 14px; color: var(--fp-muted); }
/* barras (son botones: filtran por nota) */
#fich-cmmt .fp-reviews__bars { display: flex; flex-direction: column; gap: 8px; }
#fich-cmmt.fp-reviews--none .fp-reviews__bars { display: none; }
#fich-cmmt .fp-reviews__bars .infr { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 0; padding: 0; width: auto; border: 0; background: transparent; font-family: inherit; color: var(--fp-ink); cursor: pointer; text-align: left; border-radius: 6px; }
#fich-cmmt .fp-reviews__bars .infr:disabled { cursor: default; }
#fich-cmmt .fp-reviews__bars .infr:not(:disabled):hover .bar span, #fich-cmmt .fp-reviews__bars .infr[aria-pressed="true"] .bar span { background: var(--fp-pink-dark); }
#fich-cmmt .fp-reviews__bars .infr[aria-pressed="true"] .stars { font-weight: 800; }
#fich-cmmt .fp-reviews__bars .stars { width: 22px; font-size: 13px; color: var(--fp-ink); text-align: left; }
#fich-cmmt .fp-reviews__bars .bar { flex-grow: 1; height: 8px; background: var(--fp-line-soft); border-radius: 999px; overflow: hidden; margin: 0; width: auto; display: block; }
#fich-cmmt .fp-reviews__bars .bar span { display: block; height: 100%; border-radius: 999px; background: var(--fp-pink); transition: background .15s; }
#fich-cmmt .fp-reviews__bars .prcj { width: 34px; text-align: right; color: var(--fp-muted); font-size: 13px; }
/* ¿qué tal de talla? */
#fich-cmmt .fp-reviews__fit { background: var(--fp-bg); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#fich-cmmt .fp-reviews__fit > strong { font-size: 14px; font-weight: 800; }
#fich-cmmt .fp-reviews__fit-track { position: relative; height: 8px; border-radius: 999px; background: var(--fp-line); }
#fich-cmmt .fp-reviews__fit-track span { position: absolute; top: -4px; width: 16px; height: 16px; margin-left: -8px; border-radius: 999px; background: var(--fp-pink); border: 3px solid #fff; box-sizing: border-box; }
#fich-cmmt .fp-reviews__fit-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--fp-muted); }
#fich-cmmt .fp-reviews__fit-labels strong { color: var(--fp-ink); font-weight: 800; }
#fich-cmmt .fp-reviews__fit-sum { font-size: 13px; }
/* botones */
#fich-cmmt .butt.fp-reviews__btn { width: auto; height: 48px; margin: 0; padding: 0 22px; border: 0; border-radius: 12px; background: var(--fp-pink); color: #fff; font-family: var(--fp-font); font-weight: 800; font-size: 15px; line-height: 48px; text-transform: none; letter-spacing: 0; display: inline-block; text-align: center; cursor: pointer; }
#fich-cmmt .butt.fp-reviews__btn:hover { background: var(--fp-pink-dark); }
#fich-cmmt .butt.fp-reviews__btn--outline { background: #fff; color: var(--fp-pink); border: 1.5px solid var(--fp-pink); line-height: 45px; width: 100%; }
#fich-cmmt .butt.fp-reviews__btn--outline:hover { background: var(--fp-pink-soft); }
/* sin opiniones */
#fich-cmmt .fp-reviews__empty { border: 2px dashed var(--fp-line); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
#fich-cmmt .fp-reviews__empty strong { font-size: 18px; font-weight: 800; }
#fich-cmmt .fp-reviews__empty > span { font-size: 14px; color: var(--fp-muted); max-width: 380px; }
/* filtros y orden */
#fich-cmmt .fp-reviews__tools { display: flex; flex-direction: column; gap: 10px; }
#fich-cmmt .fp-reviews__filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
#fich-cmmt .fp-reviews__filters::-webkit-scrollbar { display: none; }
#fich-cmmt .fp-reviews__filters button { flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 13px; background: #fff; color: var(--fp-ink); border: 1.5px solid var(--fp-line); cursor: pointer; }
#fich-cmmt .fp-reviews__filters button[aria-pressed="true"] { background: var(--fp-ink); color: #fff; border-color: var(--fp-ink); }
#fich-cmmt .fp-reviews__sort { font-size: 13px; color: var(--fp-muted); display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; width: auto; float: none; text-transform: none; font-weight: 400; }
.fp-rform__select { position: relative; display: block; }
.fp-rform__select select { height: 40px; width: 100%; border-radius: 10px; border: 1.5px solid var(--fp-line); background: #fff; color: var(--fp-ink); font-family: inherit; font-weight: 700; font-size: 13px; padding: 0 34px 0 10px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.fp-rform__select svg { position: absolute; right: 10px; top: 50%; margin-top: -8px; color: var(--fp-ink); pointer-events: none; }
/* tarjetas */
#fich-cmmt .fp-reviews__list { display: flex; flex-direction: column; gap: 12px; }
#fich-cmmt .fp-review { border: 1.5px solid var(--fp-line-soft); border-radius: 16px; padding: 18px 18px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
#fich-cmmt .fp-review[hidden] { display: none; }
#fich-cmmt .fp-review__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#fich-cmmt .fp-review__top .fp-stars { font-size: 16px; letter-spacing: 2px; }
#fich-cmmt .fp-review__date { font-size: 13px; color: var(--fp-muted); }
#fich-cmmt .fp-review__title { font-size: 16px; font-weight: 800; }
#fich-cmmt .fp-review__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fp-ink); text-align: left; }
#fich-cmmt .fp-review__pc { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
#fich-cmmt .fp-review__pc span { display: flex; gap: 8px; align-items: baseline; }
#fich-cmmt .fp-review__pc i { font-style: normal; font-weight: 900; width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; position: relative; top: 2px; }
#fich-cmmt .fp-review__pro i { background: var(--fp-green-soft); color: var(--fp-green-ink); }
#fich-cmmt .fp-review__con i { background: var(--fp-red-soft); color: var(--fp-red-ink); }
#fich-cmmt .fp-review__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; margin-top: 4px; }
#fich-cmmt .fp-review__name { font-size: 13px; font-weight: 800; }
#fich-cmmt .fp-review__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--fp-green-ink); font-weight: 800; }
#fich-cmmt .fp-review__tag { background: var(--fp-bg); padding: 4px 10px; border-radius: 999px; }
#fich-cmmt .fp-review__tag--no { background: var(--fp-red-soft); color: var(--fp-red-ink); }
#fich-cmmt .fp-reviews__more { align-self: center; border: 0; background: transparent; font-family: inherit; font-weight: 800; font-size: 15px; color: var(--fp-pink); padding: 12px 20px; cursor: pointer; }
#fich-cmmt .fp-reviews__more:hover { text-decoration: underline; }
#fich-cmmt .fp-reviews__nonefilter { margin: 0; font-size: 14px; color: var(--fp-muted); text-align: center; padding: 20px 0; }
/* formulario «Tu opinión» (ids #cmtr-form y #cmtr-crrt-ajax los usa oscdenox.js) */
#fich-cmmt #cmtr-form.fp-rform { width: auto; text-align: left; border: 1.5px solid var(--fp-pink); border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--fp-pink-soft); box-sizing: border-box; }
#fich-cmmt .fp-rform__head { display: flex; justify-content: space-between; align-items: center; }
#fich-cmmt .fp-rform__head h3 { margin: 0; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 18px; line-height: normal; text-transform: uppercase; color: var(--fp-ink); }
#fich-cmmt .fp-rform__close { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#fich-cmmt .fp-rform__rating { display: flex; flex-direction: column; gap: 6px; }
#fich-cmmt .fp-rform__label, #fich-cmmt .fp-rform .fp-field label, #fich-cmmt .fp-rform__pills legend { display: block; font-size: 13px; font-weight: 800; color: var(--fp-ink); margin: 0 0 6px; padding: 0; text-transform: none; float: none; width: auto; line-height: 1.3; }
#fich-cmmt .fp-rform .fp-field label span { color: var(--fp-pink); }
#fich-cmmt .fp-rform .fp-field label em, #fich-cmmt .fp-rform__pills legend em { font-style: normal; font-weight: 400; color: var(--fp-muted); }
#fich-cmmt .fp-rform__stars { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* el widget de form.js pinta las estrellas de 5 a 1 (float right + ~ para el hover): se invierte
   con flex row-reverse y las de la izquierda se encienden con el hermano siguiente */
#fich-cmmt .fp-rform .xform-star { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin: 0; }
#fich-cmmt .fp-rform .xform-star span { font-size: 30px; line-height: 1; color: #CFC9D8; cursor: pointer; margin: 0; transition: color .1s, transform .1s; }
#fich-cmmt .fp-rform .xform-star span.actv, #fich-cmmt .fp-rform .xform-star span.actv ~ span { color: #E2A400; }
#fich-cmmt .fp-rform .xform-star:hover span { color: #CFC9D8; }
#fich-cmmt .fp-rform .xform-star span:hover, #fich-cmmt .fp-rform .xform-star span:hover ~ span { color: #E2A400; }
#fich-cmmt .fp-rform .xform-star span:hover { transform: scale(1.15); }
#fich-cmmt .fp-rform__rating-txt { font-size: 13px; font-weight: 800; color: var(--fp-muted); }
#fich-cmmt .fp-rform__rating-txt.is-set { color: var(--fp-ink); }
#fich-cmmt .fp-rform .fp-field { margin: 0; padding: 0; width: auto; float: none; }
#fich-cmmt .fp-rform .fp-field input, #fich-cmmt .fp-rform .fp-field textarea, #fich-cmmt .fp-rform .fp-rform__select select { height: 48px; border-radius: 12px; border: 1.5px solid #CFC9D8; background: #fff; padding: 0 14px; font-size: 16px; font-weight: 400; color: var(--fp-ink); font-family: inherit; width: 100%; box-sizing: border-box; margin: 0; }
#fich-cmmt .fp-rform .fp-rform__select select { padding-right: 36px; font-weight: 700; }
#fich-cmmt .fp-rform .fp-field textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.4; min-height: 110px; }
#fich-cmmt .fp-rform .fp-field input:focus, #fich-cmmt .fp-rform .fp-field textarea:focus, #fich-cmmt .fp-rform select:focus { outline: 2px solid var(--fp-pink); outline-offset: 0; border-color: var(--fp-pink); }
#fich-cmmt .fp-rform .fp-field input::placeholder, #fich-cmmt .fp-rform .fp-field textarea::placeholder { color: #9A92AC; }
#fich-cmmt .fp-rform__cols { display: flex; flex-direction: column; gap: 14px; }
#fich-cmmt .fp-rform__pills { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#fich-cmmt .fp-rform__pills legend { width: 100%; float: left; margin-bottom: 8px; }
#fich-cmmt .fp-rform__pills label { margin: 0; padding: 0; width: auto; float: none; cursor: pointer; }
#fich-cmmt .fp-rform__pills input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#fich-cmmt .fp-rform__pills span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--fp-line); background: #fff; color: var(--fp-ink); font-size: 13px; font-weight: 800; }
#fich-cmmt .fp-rform__pills input:checked + span { background: var(--fp-ink); color: #fff; border-color: var(--fp-ink); }
#fich-cmmt .fp-rform__pills input:focus-visible + span { outline: 2px solid var(--fp-pink); outline-offset: 2px; }
#fich-cmmt .fp-rform .rgpd-check.xform { width: auto; margin: 0; padding: 0; float: none; display: flex; gap: 10px; align-items: flex-start; }
#fich-cmmt .fp-rform .rgpd-check.xform input[type="checkbox"] { display: inline-block; position: static; width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--fp-pink); opacity: 1; appearance: auto; -webkit-appearance: checkbox; cursor: pointer; }
#fich-cmmt .fp-rform .rgpd-check.xform input[type="checkbox"] + label { display: block; margin: 0; padding: 0; font-size: 12px; line-height: 1.45; color: #4D4562; font-weight: 400; text-transform: none; cursor: pointer; }
#fich-cmmt .fp-rform .rgpd-check.xform input[type="checkbox"] + label span { display: none; }
#fich-cmmt .fp-rform .rgpd-check.xform label a { color: var(--fp-pink); }
#fich-cmmt .fp-rform .rgpd-check.xform label i { display: inline-block; margin-left: 4px; color: var(--fp-pink); font-style: normal; cursor: help; }
#fich-cmmt .fp-rform__foot { display: flex; flex-direction: column; gap: 12px; }
#fich-cmmt .fp-rform__note { font-size: 12px; color: var(--fp-muted); }
#fich-cmmt .fp-rform__actions { display: flex; gap: 10px; }
#fich-cmmt .fp-rform__cancel { height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--fp-line); background: #fff; color: var(--fp-ink); font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
#fich-cmmt .fp-rform__send { flex-grow: 1; height: 48px; font-size: 15px; }
#fich-cmmt .fp-rform__send:disabled { opacity: .6; cursor: default; }
/* mensaje de respuesta del envío (lo pinta messageStack: .msje / alertMessageForm) */
#fich-cmmt .fp-rform__msg:empty { display: none; }
#fich-cmmt .fp-rform__msg > * { margin: 0; border-radius: 12px; }
@media (min-width: 900px) {
  #fich-cmmt.fp-reviews { padding: 32px; border-radius: var(--fp-radius); }
  #fich-cmmt.fp-reviews .titu2 { font-size: 22px; }
  #fich-cmmt .fp-reviews__t-desk { display: inline; }
  #fich-cmmt .fp-reviews__t-mob { display: none; }
  #fich-cmmt #cmnt { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
  #fich-cmmt.fp-reviews--none #cmnt { gap: 40px; } /* align-items: start también sin opiniones: al abrir el formulario la cabecera no se mueve */
  #fich-cmmt .opin-left { gap: 16px; }
  #fich-cmmt .opin-righ { gap: 16px; }
  #fich-cmmt .fp-reviews__num { font-size: 52px; }
  #fich-cmmt .fp-reviews__empty { padding: 32px; gap: 12px; }
  #fich-cmmt .fp-reviews__tools { flex-direction: row; justify-content: space-between; align-items: center; }
  #fich-cmmt .fp-reviews__filters { margin: 0; padding: 0; overflow: visible; flex-wrap: wrap; }
  #fich-cmmt .fp-review { padding: 20px 22px; }
  #fich-cmmt #cmtr-form.fp-rform { padding: 24px; gap: 16px; }
  #fich-cmmt .fp-rform__cols { flex-direction: row; }
  #fich-cmmt .fp-rform__cols > * { flex: 1 1 0; min-width: 0; }
  #fich-cmmt .fp-rform__foot { flex-direction: row; align-items: center; justify-content: space-between; }
  #fich-cmmt .fp-rform__send { flex-grow: 0; padding: 0 28px; }
  #fich-cmmt .fp-field--size .fp-rform__select { max-width: 260px; }
}

/* ---------- Barras fijas (BarraFija.dc.html: 88px, talla + cantidad + COMPRAR 220×54 + corazón;
   Movil: foto 44×52, talla 84×52, COMPRAR de dos líneas con precio) ---------- */
.fp-sticky { position: fixed; left: 0; right: 0; z-index: 900; background: #fff; transition: transform .2s ease; font-family: var(--fp-font); color: var(--fp-ink); }
/* 71px = alto de #head-wrpr fijo (z-index 998, más que estos 900) una vez engancha al hacer
   scroll (bHaveFixed en eventScroll, app.js): si no, la barra fija de la ficha queda tapada */
/* -200%: con -140% y top 71px asomaban 35px de barra por arriba al cargar (antes de que el header engancha) */
.fp-sticky--desk { top: 71px; border-bottom: 1px solid var(--fp-line); box-shadow: 0 8px 24px rgba(43,31,79,.10); transform: translateY(-200%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; display: none; }
.fp-sticky--mob { bottom: 0; border-top: 1px solid var(--fp-line); box-shadow: 0 -6px 20px rgba(43,31,79,.10); padding: 10px 12px; display: flex; align-items: center; gap: 10px; transform: translateY(120%); }
.fp-sticky.is-visible { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
.fp-sticky__inner { max-width: 1200px; margin: 0 auto; height: 88px; padding: 0 24px; display: flex; align-items: center; gap: 20px; }
.fp-sticky__img { width: 56px; height: 64px; object-fit: contain; background: #FAF9FB; border-radius: 10px; flex-shrink: 0; }
.fp-sticky__title { flex-grow: 1; min-width: 0; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-sticky__pricecol { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.fp-sticky__price { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 26px; line-height: 1; color: var(--fp-ink); }
.fp-sticky__stock { display: none; font-size: 12px; font-weight: 800; color: var(--fp-green-ink); }
.fp-sticky__stock--out { color: var(--fp-red-ink); }
#fich:not(.prdt-agtd) ~ .fp-sticky .fp-sticky__stock--in, #fich.prdt-agtd ~ .fp-sticky .fp-sticky__stock--out { display: block; }
.fp-sticky__size { position: relative; flex-shrink: 0; display: block; }
.fp-sticky__size[hidden] { display: none; }
.fp-sticky__size label { position: absolute; left: 14px; top: 6px; font-size: 11px; color: var(--fp-muted); font-weight: 700; line-height: normal; margin: 0; pointer-events: none; }
.fp-sticky__size select { width: 120px; height: 52px; border-radius: 12px; border: 1.5px solid var(--fp-ink); background: #fff; color: var(--fp-ink); font-family: inherit; font-weight: 800; font-size: 15px; padding: 14px 36px 0 14px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.fp-sticky__size svg { position: absolute; right: 12px; top: 17px; pointer-events: none; }
.fp-sticky__qty { display: flex; align-items: center; border: 1.5px solid var(--fp-line); border-radius: 12px; flex-shrink: 0; }
.fp-sticky__qty button { width: 40px; height: 50px; border: 0; background: transparent; font-size: 20px; color: var(--fp-ink); font-family: Arial, sans-serif; cursor: pointer; }
.fp-sticky__qty span { min-width: 22px; text-align: center; font-weight: 800; }
.fp-sticky .fp-btn-buy { width: 220px; height: 54px; border: 0; border-radius: 12px; background: var(--fp-green); color: #fff; padding: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 16px rgba(31,203,95,.35); flex-shrink: 0; cursor: pointer; }
.fp-sticky__fav { width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid var(--fp-line); background: #fff; color: var(--fp-pink); display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; cursor: pointer; }
/* móvil */
.fp-sticky--mob .fp-sticky__img { width: 44px; height: 52px; border-radius: 8px; }
.fp-sticky--mob .fp-sticky__size label { left: 10px; top: 5px; font-size: 10px; }
.fp-sticky--mob .fp-sticky__size select { width: 84px; font-size: 16px; padding: 14px 26px 0 10px; }
.fp-sticky--mob .fp-sticky__size svg { right: 9px; top: 20px; }
.fp-sticky--mob .fp-btn-buy--mob, .fp-sticky--mob .fp-btn-notify { flex-grow: 1; width: auto; height: 52px; flex-direction: column; gap: 0; box-shadow: 0 4px 12px rgba(31,203,95,.35); }
.fp-sticky--mob .fp-btn-notify { display: none; border: 0; border-radius: 12px; background: var(--fp-pink); color: #fff; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: none; }
.fp-btn-buy__label { font-family: var(--fp-font-display); font-stretch: 125%; font-weight: 900; font-size: 16px; letter-spacing: .03em; line-height: normal; text-transform: uppercase; }
.fp-btn-buy__price { font-family: var(--fp-font); font-size: 12px; font-weight: 800; letter-spacing: 0; line-height: normal; text-transform: none; }
.fp-btn-buy__price s { opacity: .8; margin-right: 6px; }
#fich.prdt-agtd ~ .fp-sticky--mob .fp-btn-buy--mob { display: none; }
#fich.prdt-agtd ~ .fp-sticky--mob .fp-btn-notify { display: flex; }
/* agotado en escritorio: sin COMPRAR (el motor bloquea el submit), queda precio + «Sin stock» */
#fich.prdt-agtd ~ .fp-sticky--desk .fp-btn-buy, #fich.prdt-agtd ~ .fp-sticky--desk .fp-sticky__qty { display: none; }
@media (min-width: 900px) { .fp-sticky--desk { display: block; } .fp-sticky--mob { display: none; } }

/* ---------- Botón flotante del experto (Main: personaje de 240px abajo a la derecha con bocadillo;
   Movil: cara de 56px a 12/86 del borde) ---------- */
.fp-expert-fab { position: fixed; z-index: 800; border: 0; padding: 0; background: transparent; right: 12px; bottom: 86px; text-decoration: none; display: block; cursor: pointer; line-height: 0; }
.fp-expert-fab__full { display: none; }
.fp-avatar { position: relative; display: block; width: 56px; height: 56px; border-radius: 999px; background: #EFE6F7; }
.fp-avatar img { display: block; width: 100%; height: 100%; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(27,20,51,.18); object-fit: cover; box-sizing: border-box; }
.fp-avatar__online { position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; border-radius: 999px; background: var(--fp-green); border: 2px solid #fff; box-sizing: content-box; }
.fp-bubble { position: absolute; right: 246px; bottom: 82px; line-height: 1.25; text-align: left; background: #fff; color: var(--fp-ink); border-radius: 16px 16px 4px 16px; padding: 9px 13px; font-size: 15px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 20px rgba(27,20,51,.2); }
.fp-bubble em { font-style: normal; color: var(--fp-pink); }
@media (max-width: 899px) { .fp-bubble { display: none; } }
@media (min-width: 900px) {
  .fp-expert-fab { right: 0; bottom: 0; width: 240px; }
  .fp-avatar { display: none; }
  .fp-expert-fab__full { display: block; width: 100%; height: auto; filter: drop-shadow(0 -2px 10px rgba(27,20,51,.18)); }
}