/* ── XPikeGear · Widgets de pieza (single) ─────────────────────────────────
 * Estilos compartidos por los widgets:
 *   .xpk-w-gallery  — imágenes + thumbnails
 *   .xpk-w-colors   — selector de color
 *   .xpk-w-cta      — botón de cotización
 *   .xpk-w-line     — nombre de la línea
 * Todos se coordinan por data-xpk-piece (ver piece.js).
 * ------------------------------------------------------------------------- */

.xpk-w { --xpk-accent:#FF6B00; --xpk-accent-dark:#cc5500; }

/* ── Galería ─────────────────────────────────────────────────────────────── */
.xpk-w-gallery__color { display:none; }
.xpk-w-gallery__color.is-active { display:block; }

.xpk-w-gallery__stage { position:relative; }
.xpk-w-gallery__main {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:.75rem;
  display:block;
  background:#f5f5f5;
}

.xpk-w-gallery__thumbs {
  display:flex;
  gap:.5rem;
  list-style:none;
  margin:.75rem 0 0;
  padding:0;
  flex-wrap:wrap;
}
.xpk-w-gallery__thumb {
  cursor:pointer;
  border-radius:.375rem;
  overflow:hidden;
  border:0.125rem solid transparent;
  transition:border-color .2s;
  background:none;
  padding:0;
}
.xpk-w-gallery__thumb.is-active,
.xpk-w-gallery__thumb:hover { border-color:var(--xpk-accent); }
.xpk-w-gallery__thumb img { width:4rem; height:4rem; object-fit:cover; display:block; }
.xpk-w-gallery__thumb span {
  font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; display:block; background:#f5f5f5; padding:.15rem .3rem .25rem; color:#666;
}

/* ── Selector de color ───────────────────────────────────────────────────── */
.xpk-w-colors__label {
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#666; margin:0 0 .5rem;
}
.xpk-w-colors__value { color:#1a1a1a; }
.xpk-w-colors__dots { display:flex; gap:.5rem; flex-wrap:wrap; }
.xpk-w-colors__dot {
  width:2.125rem; height:2.125rem; border-radius:50%;
  border:0.125rem solid rgba(0,0,0,.12); cursor:pointer; padding:0; position:relative;
  transition:transform .15s ease, border-color .15s ease;
}
.xpk-w-colors__dot:hover { transform:scale(1.08); }
.xpk-w-colors__dot.is-active { border-color:var(--xpk-accent); transform:scale(1.05); }

/* ── Botón cotizar ───────────────────────────────────────────────────────── */
.xpk-w-cta { display:flex; flex-direction:column; gap:.4rem; }
.xpk-w-cta__btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%;
  padding:0.9375rem 2rem;
  background:var(--xpk-accent) !important; color:#fff !important;
  border:0.125rem solid var(--xpk-accent) !important;
  border-radius:0.125rem;
  font-size:0.875rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background .25s ease, border-color .25s ease, transform .2s ease;
}
.xpk-w-cta__btn:hover { background:var(--xpk-accent-dark) !important; border-color:var(--xpk-accent-dark) !important; transform:translateY(-0.0625rem); }
.xpk-w-cta__sub { font-size:.72rem; color:#999; margin:0; }

/* ── Línea ───────────────────────────────────────────────────────────────── */
.xpk-w-line {
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--xpk-accent); margin:0;
}
.xpk-w-line a { color:inherit; text-decoration:none; }
.xpk-w-line a:hover { text-decoration:underline; }

/* ── Placeholder en el editor de Elementor ───────────────────────────────── */
.xpk-w-empty {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.25rem 1.5rem; background:#f0f0f1; border:0.125rem dashed #ccc;
  border-radius:0.5rem; color:#888; font-size:.8rem; text-align:center;
}

/* ── Compartir ──────────────────────────────────────────────────────────── */
.xpk-w-share { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.xpk-w-share__label {
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#666; margin-right:.25rem;
}
.xpk-w-share__btn {
  display:inline-flex; align-items:center; justify-content:center;
  border:none !important; background:none !important; color:#1a1a1a;
  cursor:pointer; padding:0; position:relative; text-decoration:none;
  -webkit-appearance:none; appearance:none;
  transition:color .2s ease, transform .15s ease;
}
.xpk-w-share__btn:hover { color:var(--xpk-accent); transform:translateY(-0.125rem); }
.xpk-w-share__copy.is-copied::after {
  content:"Link copied";
  position:absolute; bottom:calc(100% + 0.375rem); left:50%; transform:translateX(-50%);
  white-space:nowrap; background:#1a1a1a; color:#fff;
  font-size:0.625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:0.25rem 0.5rem; border-radius:0.1875rem; pointer-events:none;
}