/* === LAYOUT: imagen izquierda / info derecha (forzado) === */
#product-detail{
  display:grid !important;
  grid-template-columns:minmax(280px,560px) 1fr !important;
  gap:24px !important;
  align-items:start !important;
  grid-auto-flow:row dense !important;
}

/* La miga de pan ocupa el ancho completo arriba */
#product-detail .breadcrumbs{
  grid-column:1 / -1 !important;
}

/* Fuerza la galería a la columna izquierda */
#product-detail .product-image{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  max-width:560px !important;
  margin-left:auto !important;
  margin-right:auto !important;   /* centra el contenedor en su columna */
  justify-self:center !important; /* asegura centrado en el grid       */
}


/* Fuerza la info a la columna derecha */
#product-detail .product-info{
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
}

/* Asegura que el texto no se quede en una sola línea */
.product-title,
.product-description,
.product-meta p{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-height:1.35 !important;
}

/* === GALERÍA === */
.product-image .product-gallery{
  position:relative !important;  /* contenedor de flechas */
  width:100% !important;
}
.product-image .gallery-viewport{
  position:relative !important;
  width:100% !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:transparent !important;
}

/* La altura la manda la imagen (se adapta a vertical/horizontal) */
.gallery-track{
  display:flex !important;
  transition:transform .3s ease !important;
  will-change:transform !important;
}
.gallery-slide{ flex:0 0 100% !important; }
.gallery-slide img{
  display:block !important;
  width:100% !important;
  height:auto !important;        /* contenedor = alto real de la imagen */
  object-fit:contain !important; /* evita recortes si una es muy vertical */
  object-position:center !important;
}

/* Controles alineados al borde de la imagen */
.product-image .gallery-prev,
.product-image .gallery-next{
  position:absolute !important;
  top:50% !important; transform:translateY(-50%) !important;
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:rgba(0,0,0,.55) !important; color:#fff !important; border:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  z-index:5 !important;
}
.product-image .gallery-prev{ left:8px !important; }
.product-image .gallery-next{ right:8px !important; }

/* Dots justo DEBAJO de la imagen, no en la página */
.product-image .gallery-dots{
  position:static !important;
  display:flex !important; gap:8px !important; justify-content:center !important;
  margin:10px 0 0 0 !important;
}
.product-image .gallery-dots .dot{
  width:8px !important; height:8px !important; border-radius:50% !important;
  border:0 !important; background:#cfcfcf !important;
}
.product-image .gallery-dots .dot.active{ background:#111 !important; }




/* --- CENTRAR LA GALERÍA EN EL LAYOUT --- */
/* 4 columnas: [espacio] [imagen 280..560] [espacio] [info] */
#product-detail{
  display: grid !important;
  grid-template-columns: 1fr minmax(280px,560px) 1fr minmax(460px,1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Colocar cada bloque en su columna */
#product-detail .product-image{
  grid-column: 2 !important;           /* columna central para la imagen */
  justify-self: center !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;           /* por si acaso */
}

#product-detail .product-info{
  grid-column: 4 !important;           /* columna derecha para el texto */
  justify-self: start !important;
  min-width: 0 !important;
}

/* Asegurar que la galería se centra dentro de su columna */
#product-detail .gallery-viewport{
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* Mantener el wrapping del texto */
.product-title,
.product-description,
.product-meta p{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.35 !important;
}

/* Responsive: apila y centra con aire lateral */
@media (max-width:900px){
  #product-detail{ grid-template-columns:1fr !important; }
  #product-detail .product-image{ grid-column:1 !important; grid-row:auto !important; width:95% !important; margin:0 auto !important; }
  #product-detail .product-info{ grid-column:1 !important; grid-row:auto !important; }
}


/* 1) Centrar el bloque de la galería dentro de su columna */
#product-detail .product-image{
  display: flex !important;
  justify-content: center !important;
}

/* 2) El viewport se limita y se centra */
#product-detail .product-image .gallery-viewport{
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* 3) Centrar la IMAGEN dentro de cada slide (clave) */
#product-detail .product-image .gallery-slide{
  display: flex !important;
  justify-content: center !important;   /* centra horizontal */
  align-items: center !important;       /* por si hay alturas distintas */
}
#product-detail .product-image .gallery-slide img{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* ====== Tipografías columna derecha (sin tocar el título) ====== */

/* Descripción */
#product-detail .product-description{
  font-size: 1.15rem !important;
  font-weight: 600 !important;   /* semi-negrita */
  line-height: 1.45 !important;
}

/* SKU / Precio / Disponibilidad */
#product-detail .product-meta p{
  font-size: 1.15rem !important;
  font-weight: 700 !important;   /* negrita */
  margin: .35rem 0 !important;
}

/* Precio (2º <p> dentro de .product-meta) -> más grande y muy visible */
#product-detail .product-meta p:nth-of-type(2){
  font-size: 1.5rem !important;
  font-weight: 800 !important;   /* extra-negrita */
}

/* Aclara el "(IVA incluido)" para que no compita visualmente */
#product-detail .product-meta p:nth-of-type(2) small{
  font-size: .88rem !important;
  font-weight: 600 !important;
  opacity: .9 !important;
}

/* Si hay descuento, resalta aún más el precio final */
#product-detail .precio-original{
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: line-through !important;
  opacity: .85 !important;
}
#product-detail .precio-descuento{
  font-size: 1.35rem !important;
  font-weight: 900 !important;
}


/* Botón debajo del selector y más grande */
.product-info .quantity-selector{
  margin-bottom: 10px;           /* deja aire antes del botón */
}

.product-info .btn-comprar{
  display: block;                 /* fuerza salto de línea */
  width: clamp(260px, 60%, 380px);
  max-width: 100%;
  margin-top: 10px;
  padding: 12px 18px;
  font-size: 1.05rem;
  font-weight: 800;               /* negrita extra */
  text-align: center;
}

/* En móvil: botón a todo lo ancho y un pelín más grande */
/* Botón más alto y con texto grande en móvil */
@media (max-width: 900px){
  .product-info .btn-comprar{
    display: block;
    width: 100%;
    padding: 12px 18px;     /* ↑ más alto */
    min-height: 56px;       /* tap target cómodo */
    font-size: 1.3rem !important;      /* ↑ texto */
    line-height: 1.2;
    font-weight: 800;       /* bien marcado */
    text-align: center;
    touch-action: manipulation;
  }


}


/* ===== Colores base ===== */
:root{
  --gp-yellow: #FFEA00;  /* amarillo suave */
  --gp-orange: #FF8A00;  /* naranja fuerte */
}

/* ===== PUNTITOS (dots) ===== */
.product-image .gallery-dots .dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--gp-yellow) !important;     /* no seleccionado */
  border: 0 !important;
  opacity: .95 !important;
  transition: transform .15s ease, background .15s ease !important;
}
.product-image .gallery-dots .dot.active{
  background: var(--gp-orange) !important;     /* seleccionado */
}
.product-image .gallery-dots .dot:hover{
  transform: scale(1.15) !important;
}

/* ===== FLECHAS ===== */
.product-image .gallery-prev,
.product-image .gallery-next{
  /* tamaño y forma */
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;

  /* colores estado normal */
  border: 4px solid var(--gp-orange) !important;                   /* borde naranja */
  background: color-mix(in srgb, var(--gp-yellow) 50%, transparent) !important; /* interior amarillo suave y translúcido */
  color: var(--gp-orange) !important;                               /* “flechiota” naranja */

  /* tipografía de la flecha: más gorda */
  font-size: 35px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  

  /* extras */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease !important;
}

/* hover: intercambia colores (naranja ↔ amarillo) */
.product-image .gallery-prev:hover,
.product-image .gallery-next:hover{
  border-color: var(--gp-yellow) !important;                        /* borde amarillo */
  background: color-mix(in srgb, var(--gp-orange) 25%, transparent) !important; /* interior naranja translúcido */
  color: var(--gp-yellow) !important;                               /* flecha amarilla */
  
}

/* accesibilidad */
.product-image .gallery-prev:focus-visible,
.product-image .gallery-next:focus-visible{
  outline: 2px dashed var(--gp-yellow) !important;
  outline-offset: 2px !important;
}

/* + espacio para la descripción/precio (derecha) */
@media (min-width:1000px) {
#product-detail{
  display: grid !important;
  /* antes: 1fr  minmax(280px,560px)  1fr  minmax(460px,1fr) */
  grid-template-columns: .25fr minmax(280px,560px) .10fr minmax(460px, 2fr) !important;
  gap: 0px !important;
  align-items: start !important;
}
}
/* Product page: título más pequeño en móvil */
@media (max-width: 900px){
  #product-detail .product-title{
    font-size: clamp(1.7rem, 4.6vw, 2.5rem) !important;
    line-height: 1.25 !important;
    margin: .25rem 0 .5rem !important;
    word-break: break-word;
  }
}

/* Breadcrumbs en una línea con elipsis en la última miga */
.breadcrumbs{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;              /* recorta lo que no quepa */
}

.breadcrumbs a{
  flex:0 0 auto;                /* no se rompen */
  padding:.25rem .55rem;
  border:2px solid #ffa800;
  border-radius:8px;
  background:rgba(0,0,0,.35);
  color:#ffd700;
  text-decoration:none;
}

/* Página actual: sin pill y con elipsis */
.breadcrumbs > span{
  flex:1 1 auto;                /* ocupa el espacio restante */
  min-width:0;                  /* imprescindible para elipsis en flex */
  padding:.25rem 0;
  border:0;
  background:transparent;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;       /* … al final */
  white-space:nowrap;           /* una sola línea */
}


/* Extra–compact en pantallas muy pequeñas */
@media (max-width:768px){
  .breadcrumbs{ gap:.25rem; }
  .breadcrumbs a{
    padding:.12rem .3rem;
    font-size:.65rem;
    border-width:1.25px;
    border-radius:5px;
  }
  .breadcrumbs > span{
    font-size:.65rem;
  }
}


.product-gallery .gallery-slide { position: relative; }

.product-gallery .gallery-slide > img.product-photo{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

/* bandera como fondo, tamaño fijo */
.product-gallery .product-flag{
  position:absolute;
  left:auto;
  right: 10px;
  bottom:10px;
  width:97px;      /* ajusta a gusto */
  height:62px;     /* ajusta a gusto */
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
  border-radius: 10px;
}

@media (max-width:768px){
    .product-gallery .product-flag{
  position:absolute;
  left:auto;
  right: 10px;
  bottom:10px;
  width:66px;      /* ajusta a gusto */
  height:42px;     /* ajusta a gusto */
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
  border-radius: 3px;
}
    
}


/* PRODUCT.PHP (galería) */
.product-gallery .gallery-slide{ position:relative; overflow:hidden; }
.product-gallery .gallery-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/images/watermark.png") center/contain no-repeat;
  
  background-origin: content-box;
  opacity:.15;
  z-index:0;
  pointer-events:none;
}
.product-gallery .product-photo{ position:relative; z-index:1; display:block; width:100%; height:auto; object-fit:contain; }


.product-description{ white-space: pre-wrap !important; }


/* Jerarquía nueva en la columna derecha */
.product-info .product-title{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.2;
  color: #ffd35a;
  margin: 0 0 .25rem;
}

.pro-price-row{
  display:flex; align-items:baseline; gap:.6rem; margin:.1rem 0 .4rem;
}
.pro-price{ font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; color:#fff; }
.pro-price-old{ font-size: clamp(18px, 1.6vw, 22px); color:#bbb; text-decoration: line-through; }
.pro-iva{ font-size:.95rem; opacity:.8 }
.pro-badge-discount{
  background:#ffb400; color:#1a1a1a; font-weight:800;
  padding:.15rem .45rem; border-radius:.5rem; font-size:.9rem;
}

.pro-meta{ display:flex; align-items:center; gap:.5rem; color:#cfead1; font-size:.96rem; margin: .15rem 0 .6rem; }
.pro-stock.pro-in{ color:#9be99b }
.pro-stock.pro-out{ color:#ff9b9b }
.pro-dot{ opacity:.6 }

.pro-summary{ color:#f3f3f3; line-height:1.5; margin:.4rem 0 .3rem }
.pro-bullets{ margin:.2rem 0 .8rem 1.1rem; color:#f3f3f3 }
.pro-bullets li{ margin:.12rem 0 }

.pro-desc{ margin:.6rem 0 .8rem }
.pro-desc-text{ color:#f3f3f3; line-height:1.55 }
.pro-desc-text.pro-collapsed{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pro-toggle{
  margin-top:.4rem; background:transparent; color:#fff;
  border:1px solid #3d3d3d; border-radius:10px; padding:.5rem .8rem; cursor:pointer;
}

.pro-cta{ display:flex; gap:.8rem; align-items:center; margin: .8rem 0 .5rem; }
.quantity-selector{
  display:flex; align-items:center; overflow:hidden;
  border:1px solid #444; border-radius:10px;
}
.quantity-selector .qty-decrease,
.quantity-selector .qty-increase{
  background:#222; border:0; padding:.55rem .7rem; cursor:pointer; color:#fff;
}
.quantity-selector .qty-input{
  width:56px; text-align:center; background:#111; border:0; color:#fff; height:38px;
}

.btn-comprar.add-to-cart{
  flex:1; padding:.9rem 1rem; border:0; border-radius:12px;
  background:#ffb400; color:#171717; font-weight:800; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 6px 18px rgba(255,180,0,.25);
}
.btn-comprar.add-to-cart:hover{ filter:brightness(1.05) }

.pro-trust{ font-size:.95rem; opacity:.85; margin:.3rem 0 .2rem }

/* CTA fija opcional en móvil */
@media (max-width: 768px){
  .pro-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:.6rem; background:rgba(10,10,10,.88); backdrop-filter:blur(6px);
  }
  .pro-trust{ margin-bottom:3.4rem; }
}
/* Por defecto, oculta el resto de la descripción */
.pro-desc .pro-desc-text{ display:none; }

/* Al expandir, se muestra completa (sin puntos extra) */
.pro-desc.expanded .pro-desc-text{ display:block; }


/* Colores solo si hay descuento */
.pro-price-row.has-discount .pro-price-old{
  color:#ff6b6b;
  text-decoration: line-through;
  text-decoration-thickness:.09em;
  text-decoration-color: rgba(255,107,107,.85);
  opacity:1;
}
.pro-price-row.has-discount .pro-price{
  color:#9be99b;
  text-shadow:0 0 10px rgba(155,233,155,.15);
}
.pro-price-row.has-discount .pro-iva{
  color:#d6d6d6;
}
/* Precio normal (sin descuento) en naranja marca */
.pro-price-row:not(.has-discount) .pro-price{
  color:#FF9E00;                /* naranja Dracollectors */
  text-shadow:0 0 10px rgba(255,180,0,.12);
}
.pro-price-row:not(.has-discount) .pro-iva{
  color:#e6e6e6;                /* neutro suave */
  opacity:.95;
}
/* Título más amarillo fuerte */
#product-detail .product-info .product-title{
  color: #FFD100; /* amarillo intenso (marca) */
  text-shadow: 0 0 14px rgba(255, 209, 0, .28); /* leve brillo para contraste */
}

/* Descripción: color base y legibilidad */
.pro-summary,
.pro-bullets,
.pro-desc .pro-desc-text{
  color:#E8E8E8;        /* gris claro neutro */
  line-height:1.6;
}

/* Negritas dentro de la descripción más visibles */
.pro-desc-text b,
.pro-desc-text strong{
  color:#FFFFFF;
}

/* Bullets en naranja de marca (más vivo) */
.pro-bullets li::marker{
  color:#FF9E00;        /* tu naranja vivo */
}

/* Enlaces en la descripción coherentes con marca */
.pro-desc-text a{
  color:#FFB400;        /* naranja marca */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pro-desc-text a:hover{
  filter:brightness(1.1);
}
/* Botón “Más detalles”: borde naranja, texto amarillo; en hover se invierten */
.pro-toggle{
  background: transparent;
  border: 1.5px solid #FF9E00;   /* naranja vivo */
  color: #FFD100;                /* amarillo */
  font-weight: 700;
  border-radius: 10px;
  padding: .55rem .9rem;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Hover / focus: invertimos colores */
.pro-toggle:hover,
.pro-toggle:focus-visible{
  color: #FF9E00;                /* pasa a naranja */
  border-color: #FFD100;         /* borde amarillo */
  box-shadow: 0 0 0 3px rgba(255, 209, 0, .15);
  background-color: rgba(255, 209, 0, .06); /* toque sutil para feedback */
}

/* Activo (click) */
.pro-toggle:active{
  transform: translateY(1px);
}
/* Control de cantidad: borde amarillo y texto naranja */
.quantity-selector{
  border: 1.5px solid #FFD100;          /* amarillo */
  border-radius: 10px;
}

/* Texto del input en naranja */
.quantity-selector .qty-input{
  color: #FF9E00;                        /* naranja */
  caret-color: #FF9E00;
  background: #111;                      /* mantiene tu fondo oscuro */
  border: 0;
}

/* Botones ± en naranja, con separadores sutiles */
.quantity-selector .qty-decrease,
.quantity-selector .qty-increase{
  color: #FF9E00;
  background: #222;
  border: 0;
}
.quantity-selector .qty-decrease{ border-right: 1px solid rgba(255,209,0,.35); }
.quantity-selector .qty-increase{ border-left:  1px solid rgba(255,209,0,.35); }

/* Focus/hover feedback */
.quantity-selector:focus-within{
  border-color: #FFB400;
  box-shadow: 0 0 0 3px rgba(255,209,0,.12);
}
.quantity-selector .qty-decrease:hover,
.quantity-selector .qty-increase:hover{
  background: rgba(255,158,0,.08);
  color: #FFD100;                        /* amarillea al pasar el ratón */
}
.quantity-selector .qty-input:focus{ color:#FFD100; }


/* Fila de logos de pago (SVG reales) */
.pro-payments{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem .8rem;
  margin:.35rem 0 .2rem;
}

/* Tamaño consistente; los SVG se escalan solos */
.pro-payments img{
  height:32px;         /* cambia a 24–26 si lo quieres más grande */
  width:auto;
  display:block;
  opacity:.95;
  transition:opacity .2s ease, transform .2s ease;
}
.pro-payments img:hover{
  opacity:1;
  transform: translateY(-1px);
}

/* Variante MONOCROMO (si prefieres todo blanco sobre fondo oscuro):
   añade la clase "mono" al contenedor: <div class="pro-payments mono"> */
.pro-payments.mono img{
  filter: brightness(0) invert(1);   /* queda blanco en fondos oscuros */
  opacity:.9;
}
.pro-payments.mono img:hover{
  filter: brightness(0) invert(1);
  opacity:1;
}
/* Variante simple (sólido) */
.pro-trust{
  color:#FFC400;   /* naranja/amarillo marca */
  font-weight:700;
}
/* ===== Solo MÓVIL: alinear y compactar cantidad + botón ===== */
@media (max-width: 640px){

  .pro-cta{
    display:flex;              /* asegura fila flex */
    align-items:center;        /* alinea verticalmente */
    gap:10px;
    flex-wrap:nowrap;
  }

  /* Control de cantidad: altura compacta */
  .quantity-selector{
    height:40px;
    border-radius:8px;
  }
  .quantity-selector .qty-decrease,
  .quantity-selector .qty-increase{
    width:34px;
    font-size:18px;
  }
  .quantity-selector .qty-input{
    width:50px;
    font-size:15px;
  }

  /* Botón añadir: mismo alto y sin ocupar 100% */
  .product-info .btn-comprar.add-to-cart{
    height:40px;
    padding:0 14px;
    font-size:0.9rem;
    width:auto !important;     /* evita ancho completo heredado */
    flex:0 0 auto;             /* no crecer/encoger */
    line-height:1;             /* centra texto verticalmente */
    margin:0;                  /* elimina desplazamientos */
  }
}

/* ultra-compact para móviles muy estrechos (opcional) */
@media (max-width: 380px){
  .pro-cta{ gap:8px; }
  .product-info .btn-comprar.add-to-cart{ padding:0 10px; font-size:.85rem; }
}

/* Fallback XS: pantallas muy estrechas (≤ 360px) */
@media (max-width: 360px){
  .pro-cta{
    flex-wrap: wrap;          /* permite saltar de línea */
    row-gap: 8px;
    column-gap: 8px;
    justify-content: flex-start;
  }

  /* Cantidad se queda en la primera línea, compacta */
  .quantity-selector{
    height:38px;
    border-radius:8px;
  }
  .quantity-selector .qty-decrease,
  .quantity-selector .qty-increase{ width:32px; font-size:17px; }
  .quantity-selector .qty-input{ width:48px; font-size:14px; }

  /* Botón pasa a segunda línea y ocupa todo */
  .product-info .btn-comprar.add-to-cart{
    flex: 1 0 100%;
    height:38px;
    padding:0 12px;
    font-size:.86rem;         /* un pelín más pequeño */
  }
}