/* ==========================================================================
   XJ SCRIPTS - ficha de producto

   Estructura: fondo desenfocado con la propia imagen del script, enlace de
   volver, dos columnas (galeria + tarjeta de compra) y debajo la descripcion.

   Las etiquetas de compatibilidad, la lista de caracteristicas y los botones
   (YouTube, documentacion) se escriben EN LA DESCRIPCION del producto en
   Tebex con unas clases concretas, y xj-ui.js los sube a la tarjeta. Si un
   producto no las lleva, la ficha sigue saliendo bien.
   ========================================================================== */

/* --- fondo --------------------------------------------------------------- */

.xj-pdp-bg{
  position:absolute; top:0; left:0; right:0;
  height:620px;
  background-position:center 28%;
  background-size:cover;
  filter:blur(46px) saturate(1.25);
  opacity:.32;
  transform:scale(1.15);
  pointer-events:none;
  z-index:0;
}
.xj-pdp-veil{
  position:absolute; top:0; left:0; right:0;
  height:620px;
  background:linear-gradient(180deg, rgba(3,9,20,.58) 0%, rgba(3,9,20,.82) 48%, var(--xj-bg) 100%);
  pointer-events:none;
  z-index:0;
}

/* --- contenedor ---------------------------------------------------------- */

.xj-pdp{
  position:relative;
  z-index:1;
  max-width:var(--xj-max) !important;
  margin:0 auto !important;
  padding:22px var(--xj-gutter) 0 !important;
  display:block !important;
  float:none !important;
  width:auto !important;
  background:transparent !important;
  border:0 !important;
}

.xj-pdp__back{
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:20px;
  font-family:var(--xj-head);
  font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--xj-dim);
  transition:color .18s var(--xj-ease), gap .18s var(--xj-ease);
}
.xj-pdp__back:hover{ color:var(--xj-cyan); gap:13px; }

.xj-pdp__top{
  display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:24px;
  align-items:start;
}

/* --- galeria ------------------------------------------------------------- */

.xj-pdp__shot{
  border-radius:18px;
  border:1px solid var(--xj-line);
  background:#040d1a;
  overflow:hidden;
  box-shadow:var(--xj-shadow);
}
.xj-pdp__shot img,
.xj-pdp__shot .image{
  display:block;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
}
.xj-pdp__shot .image-default{
  aspect-ratio:16/9;
  background:radial-gradient(circle at 50% 50%, rgba(7,140,255,.18), transparent 70%), #040d1a;
}

.xj-pdp__actions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
  margin-top:12px;
}
.xj-pdp__actions:empty{ display:none; }

.xj-pdp__actions > a{
  position:relative;
  display:flex; align-items:center; gap:11px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid var(--xj-line);
  background:linear-gradient(140deg, rgba(10,24,44,.95), rgba(5,14,26,.95));
  color:var(--xj-text) !important;
  font-family:var(--xj-head);
  font-size:15px; font-weight:600;
  letter-spacing:.04em;
  overflow:hidden;
  transition:border-color .22s var(--xj-ease), transform .22s var(--xj-ease), box-shadow .22s var(--xj-ease);
}
.xj-pdp__actions > a:hover{
  transform:translateY(-2px);
  border-color:rgba(7,140,255,.6);
  box-shadow:var(--xj-glow-soft);
}
.xj-pdp__actions > a::after{
  content:"↗";
  margin-left:auto;
  color:var(--xj-dim);
  font-size:15px;
}

/* --- tarjeta de compra --------------------------------------------------- */

.xj-pdp__card{
  position:sticky; top:96px;
  padding:28px 26px 26px !important;
  border-radius:18px !important;
  border:1px solid var(--xj-line) !important;
  background:linear-gradient(165deg, rgba(12,29,51,.96) 0%, rgba(5,16,31,.97) 60%, rgba(4,13,26,.98) 100%) !important;
  box-shadow:var(--xj-shadow);
  overflow:hidden;
}
.xj-pdp__card::before,
.xj-pdp__card::after{
  content:"";
  position:absolute; left:26px; right:26px;
  height:1px;
}
.xj-pdp__card::before{ top:0; background:linear-gradient(90deg, transparent, var(--xj-cyan), transparent); }
.xj-pdp__card::after{ bottom:0; background:linear-gradient(90deg, transparent, rgba(7,140,255,.55), transparent); }

.xj-pdp__title{
  margin:0 0 14px !important;
  font-family:var(--xj-head);
  font-size:clamp(24px, 2.6vw, 32px) !important;
  font-weight:700;
  line-height:1.12;
  color:var(--xj-text);
  text-transform:none;
}

.xj-pdp__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.xj-pdp__chips > *{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px;
  border-radius:9px;
  border:1px solid var(--xj-line);
  background:rgba(7,140,255,.08);
  font-family:var(--xj-head);
  font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--xj-text);
}

.xj-pdp__specs{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.xj-pdp__specs:empty{ display:none; }
.xj-pdp__specs li{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:baseline;
  gap:10px;
  font-size:14px;
  line-height:1.45;
  color:var(--xj-dim);
  padding:0;
}
.xj-pdp__specs li::before{
  content:"";
  width:6px; height:6px;
  border-radius:2px;
  background:var(--xj-cyan);
  box-shadow:0 0 8px var(--xj-cyan);
  transform:rotate(45deg) translateY(-1px);
}
.xj-pdp__specs li strong{
  font-family:var(--xj-head);
  font-size:15px; font-weight:700;
  color:var(--xj-text);
  white-space:nowrap;
}

/* precio y boton: markup de Tebex (package-actions.twig) */
.xj-pdp__card .product-actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:13px;
  margin:0;
  padding:18px 0 0;
  border-top:1px solid var(--xj-line-soft);
  background:transparent;
}
.xj-pdp__card .product-actions::before{
  content:"Precio";
  font-family:var(--xj-head);
  font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--xj-dim-2);
}
.xj-pdp__card .product-actions .price,
.xj-pdp__card .product-actions .price strong{
  margin:0 !important;
  font-family:var(--xj-head);
  font-size:38px !important;
  line-height:1 !important;
  font-weight:700;
  color:var(--xj-cyan) !important;
}
.xj-pdp__card .product-actions .price del,
.xj-pdp__card .product-actions .price del strong{
  font-size:17px !important;
  color:var(--xj-dim-2) !important;
  font-weight:500 !important;
}
.xj-pdp__card .product-actions a,
.xj-pdp__card .product-actions button{
  flex:0 0 54px !important;
  height:54px !important;
  min-height:0 !important;
  width:100% !important;
  padding:0 20px !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  border-radius:13px !important;
  font-family:var(--xj-head);
  font-size:15px !important; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  line-height:1 !important;
}

/* --- descripcion --------------------------------------------------------- */

.xj-pdp__desc{
  position:relative;
  z-index:1;
  max-width:var(--xj-max);
  margin:46px auto 0;
  padding:0 var(--xj-gutter);
  font-size:15.5px;
  line-height:1.75;
  color:var(--xj-dim);
}
.xj-pdp__desc h1,
.xj-pdp__desc h2,
.xj-pdp__desc h3{
  font-family:var(--xj-head);
  color:var(--xj-text);
  line-height:1.15;
  margin:34px 0 14px;
}
.xj-pdp__desc h2{ font-size:28px; }
.xj-pdp__desc h3{ font-size:21px; }
.xj-pdp__desc strong{ color:var(--xj-text); }
.xj-pdp__desc a{ color:var(--xj-cyan); }
.xj-pdp__desc img{
  max-width:100%; height:auto;
  border-radius:14px;
  border:1px solid var(--xj-line);
}
.xj-pdp__desc ul{ padding-left:0; list-style:none; }
.xj-pdp__desc ul li{ position:relative; padding-left:20px; margin-bottom:8px; }
.xj-pdp__desc ul li::before{
  content:"";
  position:absolute; left:2px; top:10px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--xj-blue);
}

/* Bloques alternos imagen / texto, para escribir en la descripcion:
   <div class="xj-row"><div class="xj-row__img"><img ...></div>
   <div class="xj-row__text"><h2>...</h2><p>...</p></div></div>
   Con xj-row--flip la imagen pasa a la derecha. */
.xj-pdp__desc .xj-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:36px;
  align-items:center;
  padding:40px 0;
  border-top:1px solid var(--xj-line-soft);
}
.xj-pdp__desc .xj-row:first-child{ border-top:0; }
.xj-pdp__desc .xj-row__img img{ width:100%; }
.xj-pdp__desc .xj-row--flip .xj-row__img{ order:2; }
.xj-pdp__desc .xj-row__text h2{
  margin-top:0;
  padding-left:14px;
  border-left:3px solid var(--xj-blue);
}

/* --- ficha rapida (popup) ------------------------------------------------ */

.popup .xj-pdp{ padding:0 !important; }
.popup .xj-pdp__top{ grid-template-columns:1fr !important; }
.popup .xj-pdp__card{ position:static; }
.popup .xj-pdp__back{ display:none; }
.popup .xj-pdp__desc{ padding:0; margin-top:26px; }
.popup .xj-pdp__desc .xj-row{ grid-template-columns:1fr; }

/* --- adaptacion ---------------------------------------------------------- */

@media (max-width:960px){
  .xj-pdp__top{ grid-template-columns:1fr; }
  .xj-pdp__card{ position:static; }
  .xj-pdp-bg,.xj-pdp-veil{ height:420px; }
  .xj-pdp__desc .xj-row{ grid-template-columns:1fr; gap:22px; padding:30px 0; }
  .xj-pdp__desc .xj-row--flip .xj-row__img{ order:0; }
}

@media (max-width:560px){
  .xj-pdp__card{ padding:22px 18px !important; }
  .xj-pdp__card .product-actions .price,
  .xj-pdp__card .product-actions .price strong{ font-size:32px !important; }
  .xj-pdp__specs li{ grid-template-columns:auto 1fr; }
  .xj-pdp__specs li strong{ white-space:normal; }
}


/* ==========================================================================
   Descripcion por secciones y pestanas de idioma
   Lo monta xj-ui.js a partir de los titulos de la descripcion de Tebex.
   ========================================================================== */

.xj-langs{
  display:flex; gap:7px;
  margin:0 0 10px;
  padding-bottom:18px;
  border-bottom:1px solid var(--xj-line-soft);
}
.xj-lang{
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--xj-line);
  background:rgba(8,20,38,.7);
  color:var(--xj-dim);
  font-family:var(--xj-head);
  font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:all .2s var(--xj-ease);
}
.xj-lang:hover{ color:var(--xj-text); border-color:var(--xj-blue); }
.xj-lang.is-active{
  color:#021022;
  border-color:transparent;
  background:linear-gradient(135deg, var(--xj-blue), var(--xj-cyan));
  box-shadow:var(--xj-glow-soft);
}

.xj-lang-pane[hidden]{ display:none; }

/* parrafo de entrada, antes del primer titulo */
.xj-doc__intro{
  max-width:78ch;
  padding:26px 0 6px;
  font-size:18px;
  line-height:1.65;
  color:var(--xj-text);
}
.xj-doc__intro p{ margin:0 0 12px; }

/* cada titulo con su contenido */
.xj-doc{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:34px;
  padding:28px 0;
  border-top:1px solid var(--xj-line-soft);
}

.xj-doc__head h2,
.xj-doc__head h3,
.xj-doc__head h4{
  position:sticky; top:112px;
  margin:0 !important;
  padding-left:13px;
  border-left:3px solid var(--xj-blue);
  font-size:19px !important;
  line-height:1.25;
  letter-spacing:.02em;
}

.xj-doc__body{ max-width:74ch; }
.xj-doc__body > *:first-child{ margin-top:0; }
.xj-doc__body > *:last-child{ margin-bottom:0; }
.xj-doc__body p{ margin:0 0 14px; }

@media (max-width:860px){
  .xj-doc{ grid-template-columns:1fr; gap:12px; padding:22px 0; }
  .xj-doc__head h2,
  .xj-doc__head h3,
  .xj-doc__head h4{ position:static; }
  .xj-doc__intro{ font-size:16.5px; }
}


/* La etiqueta del precio, en ingles cuando la tienda esta en ingles */
html[lang^="en"] .xj-pdp__card .product-actions::before{ content:"Price"; }


/* ==========================================================================
   La vista rapida a dos columnas, igual que la ficha entera

   Antes la forzaba a una sola columna y quedaba como otra pagina distinta.
   Ahora la ventana es mas ancha y reparte imagen / tarjeta de compra igual
   que la ficha. Solo se apila en pantallas estrechas.
   ========================================================================== */

/* shared.css del tema limita la ventana de producto a 800px con
   max-width, que gana sobre width. Hay que levantarlo tambien. */
.popup[data-url*="/package/"] .popup-content,
.popup-content.store-product-popup-content{
  width:min(100%, 1180px) !important;
  max-width:1180px !important;
  padding:26px !important;
}

.popup .xj-pdp__top{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) !important;
  gap:24px;
}

/* la descripcion, con el mismo ancho de lectura que en la ficha */
.popup .xj-pdp__desc{ max-width:none; }
.popup .xj-pdp__desc .xj-row{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

@media (max-width:980px){
  .popup .xj-pdp__top{ grid-template-columns:1fr !important; }
  .popup .xj-pdp__desc .xj-row{ grid-template-columns:1fr !important; }
  .popup[data-url*="/package/"] .popup-content{ padding:20px !important; }
}