:root{
  --product-bg: #0a0c11;
  --product-surface: rgba(15, 17, 24, 0.92);
  --product-border: rgba(255, 255, 255, 0.08);
  --product-text: #eef0f4;
  --product-muted: rgba(238, 240, 244, 0.72);
  --product-accent: #ffffff;
  --product-accent-dark: #0b0c10;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--product-text);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 22%),
    radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent 28%),
    linear-gradient(180deg, #05060a 0%, #0a0c11 100%);
  font-family:Inter, "Segoe UI", Arial, sans-serif;
}

a{color:inherit;text-decoration:none}

.product-page{
  padding-bottom:56px;
}

.product-page > .container{
  width:100%;
  max-width:1440px;
}

.product-hero{
  padding:42px 0 22px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.product-hero-inner{
  display:grid;
  gap:10px;
}
.back-link{
  color:var(--product-muted);
  font-weight:700;
}
.back-link:hover{color:var(--product-accent)}
.back-link{display:inline-block}

.header-product-back{display:inline-flex;align-items:center;justify-content:center;margin-left:12px;padding:8px 12px;border:1px solid rgba(255,255,255,0.2);border-radius:9px;color:var(--product-text);font-size:0.9rem;font-weight:700;white-space:nowrap}
.header-product-back:hover{background:#fff;color:#000}



@media (max-width:720px){
  .header-product-back{position:fixed;top:15px;right:64px;z-index:1301;margin:0;padding:7px 9px;font-size:0.8rem}
  
}
.product-status{font-size:0.95rem}

.product-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap:clamp(18px, 2.5vw, 36px);
  padding-top:26px;
  align-items: start;
}

.card-surface{
  background:linear-gradient(180deg, rgba(19,22,30,0.95), rgba(12,14,20,0.95));
  border:1px solid var(--product-border);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,0.38);
}

.product-gallery-card{
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  height: fit-content;
}

.product-gallery{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:680px;
}

.product-main-frame{
  position:relative;
  width:100%;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-main-image{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(75vh, 760px);
  display:block;
  object-fit:contain;
}

.product-thumbs{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:6px 2px;
  justify-content:center;
  width:100%;
}
.product-frame-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,0.42);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.9rem;
  line-height:1;
  cursor:pointer;
  z-index:3;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 22px rgba(0,0,0,0.35);
}
.product-frame-arrow:hover{ background:rgba(255,255,255,0.16); }
.product-frame-arrow.prev{ left:12px; }
.product-frame-arrow.next{ right:12px; }
.product-thumbs{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:2px;
}
.product-thumb{
  width:84px;
  height:66px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03);
  overflow:hidden;
  cursor:pointer;
}
.product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#fff;
}
.product-thumb.is-active{border-color:var(--product-accent); box-shadow:0 0 0 1px rgba(255,255,255,0.16) inset}

.product-info-column{display:grid; gap:18px}
.product-summary-card,
.product-specs-card,
.product-details-card{
  padding:22px;
}
.product-category-pill{
  display:inline-flex;
  width:max-content;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.86);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.76rem;
}
.product-title{
  margin:12px 0 10px;
  font-size:clamp(1.8rem, 3vw, 2.8rem);
  line-height:1.05;
}
.product-price{
  display:block;
  font-size:1.5rem;
  font-weight:900;
  color:var(--product-accent);
}
.product-price-block{
  display:grid;
  gap:4px;
  width:fit-content;
  min-width:150px;
  margin-top:14px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background:rgba(255,255,255,0.05);
}
.product-price-label{
  color:var(--product-muted);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.product-desc{
  margin:14px 0 0;
  color:var(--product-muted);
  line-height:1.7;
}

#productDesc{
  display:block;
  max-height:none;
  height:auto;
  overflow:visible;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}

#productDesc.is-collapsed{
  display:-webkit-box;
  display:box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  line-clamp:6;
  overflow:hidden;
}

.product-desc-toggle{
  width:max-content;
  margin-top:10px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  color:var(--product-text);
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.product-desc-toggle:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.28);
  transform:translateY(-1px);
}
.product-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.product-actions .btn{min-width:180px; justify-content:center}

.product-summary-card,
.product-specs-card,
.product-details-card,
.related-card{
  min-width:0;
}

.spec-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}
.spec-item{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  display:grid;
  gap:6px;
}
.spec-label{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.74rem;
  color:var(--product-muted);
}
.spec-value{font-size:1rem; color:var(--product-text); line-height:1.35}

.product-details h2,
.product-specs-card h2{
  margin:0;
  font-size:1.15rem;
}
.product-details{
  margin-top:14px;
}
.product-details ul{
  margin:14px 0 0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:var(--product-muted);
  line-height:1.55;
}
.product-details p{margin:14px 0 0; color:var(--product-muted); line-height:1.6}

.related-section{
  margin-top:28px;
  padding-top:10px;
}
.related-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.related-header h2{margin:0; font-size:1.25rem}
.related-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

/* Carousel for related products */
.related-carousel{ display:flex; align-items:center; gap:12px; }
.related-carousel .carousel-nav{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); color:var(--product-text); padding:10px 12px; border-radius:10px; cursor:pointer; }
.related-carousel .carousel-nav:hover{ background:rgba(255,255,255,0.05); }
.related-carousel .carousel-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; width:100%; }
.related-carousel .carousel-track{ display:flex; gap:12px; padding:6px 4px; }
.related-carousel .related-card{ flex:0 0 260px; width:260px; scroll-snap-align:start; }

@media (max-width:1080px){
  .related-carousel .related-card{ flex:0 0 48%; width:48%; }
}
@media (max-width:720px){
  .related-carousel{ gap:8px; }
  .related-carousel .carousel-nav{ padding:8px 10px; }
  .related-carousel .related-card{ flex:0 0 80%; width:80%; }
}
.related-card{
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.related-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 16px 34px rgba(0,0,0,0.4);
}
.related-card img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}
.related-card-body{padding:14px; display:grid; gap:8px}
.related-card-category{
  color:var(--product-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.72rem;
}
.related-card h3{margin:0; font-size:1rem; line-height:1.25}
.related-card-price{color:var(--product-accent); font-weight:800}
.related-empty{padding:12px 0}

@media (max-width: 1200px){
  .product-layout{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width: 720px){
  .product-hero{padding:34px 0 18px}
  .product-layout{padding-top:20px; gap:18px}
  .product-gallery-card,
  .product-summary-card,
  .product-specs-card,
  .product-details-card{padding:18px}
  /* Mostrar la imagen completa en celular; cover la recortaba y daba efecto de zoom. */
  .product-main-image{
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;
    object-fit:contain;
  }
  .product-frame-arrow{ width:38px; height:38px; font-size:1.6rem; }


  .product-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;}
   .product-actions > *{
    width:100%;
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:center;}
    .product-actions > :first-child{
    grid-column:1 / -1;}
   .product-actions > :nth-child(2){
    grid-column:1;}
   .product-actions > :nth-child(3){
    grid-column:2;}
  .spec-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .related-header{align-items:flex-start; flex-direction:column}
  
}

@media (max-width: 480px){
  .product-main-image{
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;
  }
  .product-thumb{width:72px; height:58px}
  .product-frame-arrow{ width:34px; height:34px; font-size:1.45rem; }
  .product-title{font-size:1.55rem}
  .product-price{font-size:1.25rem}
  .product-actions{flex-direction:column}
  .product-actions .btn{width:100%}
  
}

/* En móviles angostos los textos de acción necesitan una fila completa. */
@media (max-width:445px){
  .product-actions{
    grid-template-columns:1fr !important;
  }
  .product-actions > :first-child,
  .product-actions > :nth-child(2),
  .product-actions > :nth-child(3){
    grid-column:1 !important;
    width:100%;
    min-width:0;
    white-space:normal;
  }
}

/* Evita que el contenido interno de la ficha ensanche el documento en móviles estrechos. */
@media (max-width: 445px){
  .product-layout,
  .product-gallery-card,
  .product-info-column,
  .product-summary-card,
  .product-specs-card,
  .product-details-card,
  .related-section,
  .footer-grid,
  .footer-grid > *{
    min-width:0;
    max-width:100%;
  }

  .product-layout{width:auto;}
  .product-title,
  .product-desc,
  .spec-value,
  .footer-grid p,
  .footer-grid a{overflow-wrap:anywhere;}
}


/*jxz<jx*/
/* ===== Botones móviles ===== */
@media (max-width:720px){

.product-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

/* Todos ocupan el ancho disponible */
.product-actions > *{
    width:100%;
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Agregar ocupa toda la primera fila */
.product-actions > :first-child{
    grid-column:1 / -1;
}

/* Los otros dos quedan abajo */
.product-actions > :nth-child(2){
    grid-column:1;
}

.product-actions > :nth-child(3){
    grid-column:2;
}

}

/* Final override: avoid two narrow columns below 445px. */
@media (max-width:445px){
  .product-actions{grid-template-columns:1fr !important;}
  .product-actions > :first-child,
  .product-actions > :nth-child(2),
  .product-actions > :nth-child(3){
    grid-column:1 !important;
    width:100%;
    min-width:0;
    white-space:normal;
  }
}


/* Hace que la imagen se quede fija al hacer scroll en pantallas grandes */
@media (min-width: 1081px) {
  .product-gallery-card {
    position: sticky;
    top: 100px; /* Ajusta este valor dependiendo de la altura de tu header */
    align-self: start; /* Asegura que respete el align-items del grid */
    max-height: calc(100vh - 120px); /* Evita que se salga de la pantalla */
    overflow-y: auto; /* Por si la galería es más alta que la pantalla */
  }
}