/* ============================================================
   FICHA DE PRODUCTO
   Según docs/referencia-visual/2-ficha-y-checkout.dc.html
   ============================================================ */

/* ---- Las dos columnas ------------------------------------------------
   El tema usa flex con la galería y el resumen pegajosos. Se pasa a rejilla
   solo en escritorio para poder poner la tarjeta de descripción en la
   columna izquierda, bajo las fotos, como en el prototipo. El "pegajoso"
   sigue funcionando: una casilla de rejilla admite position:sticky igual. */
@media (min-width:768px){
  .single-product div.product .product-gallery-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(16px,2vw,22px);
    align-items:start;
  }
  .single-product div.product .product-gallery-summary > .woocommerce-product-gallery{
    grid-column:1;grid-row:1;width:auto;
  }
  /* El tema deja la galería en position:sticky. En la fila de abajo va la
     tarjeta de descripción, así que al hacer scroll la galería se quedaba
     clavada encima y la tapaba entera. Solo se apaga donde hay tarjeta: en
     las fichas sin ella el pegajoso del tema sigue igual. */
  body.dst-ficha-con-descripcion .single-product div.product .product-gallery-summary > .woocommerce-product-gallery,
  body.dst-ficha-con-descripcion div.product .product-gallery-summary > .woocommerce-product-gallery{
    position:relative;top:auto;
  }
  .single-product div.product .product-gallery-summary > .dst-ficha-descripcion{
    grid-column:1;grid-row:2;
  }
  .single-product div.product .product-gallery-summary > .entry-summary{
    grid-column:2;grid-row:1 / span 2;width:auto;
  }
}
@media (max-width:767px){
  /* En columna, primero se compra y después se lee el detalle. */
  .single-product div.product .product-gallery-summary > .woocommerce-product-gallery{order:1}
  .single-product div.product .product-gallery-summary > .entry-summary{order:2}
  .single-product div.product .product-gallery-summary > .dst-ficha-descripcion{order:3;margin-top:26px}

  /* En una sola columna NADA puede quedarse pegajoso. El tema deja
     .entry-summary en position:sticky sin media query (ecomus/woocommerce.css:5136).
     En móvil ese bloque mide 1.633 px dentro de una pantalla de 812: no se
     "pega" nunca del todo, se queda clavado mientras la descripción pasa por
     DEBAJO, y el texto se lee encima de las tarjetas. Medido: al bajar 1.500 px
     el resumen sólo se movía 665. Es el mismo fallo que la galería pegajosa de
     escritorio, así que aquí se corta la clase entera, no un caso. */
  .single-product div.product .product-gallery-summary > .woocommerce-product-gallery,
  .single-product div.product .product-gallery-summary > .entry-summary{
    position:static;top:auto;
  }
  .single-product div.product .product-gallery-summary > .entry-summary .ecomus-product-zoom-wrapper{
    position:static;top:auto;
  }
}

/* ---- Migas ---- */
.single-product .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb a{
  font-family:var(--dst-cuerpo);font-size:12.5px;color:var(--dst-texto);
}
.single-product .woocommerce-breadcrumb a:hover{color:var(--dst-rosa-oscuro)}

/* ---- Título y escena ---- */
.single-product div.product .product-gallery-summary h1.product_title{
  font-family:var(--dst-titulo);font-weight:400;
  font-size:clamp(28px,4vw,50px);line-height:1.14;letter-spacing:0;
  color:var(--dst-oscuro);margin:0 0 10px;
}
.dst-escena{
  font-family:var(--dst-cuerpo);font-size:17px;line-height:1.55;
  color:var(--dst-texto);margin:0 0 18px;max-width:46ch;
}

/* ---- Precio ---- */
.single-product div.product .ecomus-product-price,
.single-product div.product .entry-summary > .price{
  display:flex;align-items:baseline;gap:10px;margin:0 0 20px;
}
.single-product div.product .ecomus-product-price .price,
.single-product div.product .entry-summary > .price{
  font-family:var(--dst-cuerpo);font-weight:700;font-size:34px;
  letter-spacing:-0.03em;line-height:1.1;color:var(--dst-rosa-oscuro);
}
.single-product div.product .ecomus-product-price del,
.single-product div.product .entry-summary > .price del{
  font-size:19px;font-weight:400;color:var(--dst-apagado);opacity:1;
}
.single-product div.product .ecomus-product-price ins{text-decoration:none}

/* ---- Pastillas ---- */
.dst-pastillas{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.dst-pastilla{
  background:#FFFFFF;border:1px solid var(--dst-nude);border-radius:999px;
  padding:9px 14px;font-size:12.5px;line-height:1;color:var(--dst-oscuro);
}

/* ---- Comprar ahora ---- */
.dst-comprar-ya{
  width:100%;margin-top:12px;
  background:var(--dst-oscuro);color:#FFFFFF;border:0;border-radius:999px;
  padding:16px;font-family:var(--dst-cuerpo);font-size:12.5px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
  transition:background .24s ease;
}
.dst-comprar-ya:hover,.dst-comprar-ya:focus-visible{background:var(--dst-vino);color:#FFFFFF}

/* ---- Ventajas ---- */
.dst-ventajas{
  list-style:none;margin:20px 0;padding:18px;
  background:#FFFFFF;border:1px solid var(--dst-nude);border-radius:22px;
  display:flex;flex-direction:column;gap:11px;
}
.dst-ventaja{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14px;line-height:1.5;color:var(--dst-oscuro);margin:0;
}
.dst-ventaja__tic{flex:0 0 auto;margin-top:3px;color:var(--dst-rosa);display:inline-flex}
.dst-ventaja bdi,.dst-ventaja .woocommerce-Price-amount{font-weight:600;white-space:nowrap}

/* ---- Acordeón ---- */
.dst-acordeon{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.dst-plegable{
  background:transparent;border:1px solid #EFE7DA;border-radius:18px;
  padding:16px 18px;transition:background .2s ease,border-color .2s ease;
}
.dst-plegable[open]{background:#FFFFFF;border-color:var(--dst-nude)}
.dst-plegable__titulo{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--dst-cuerpo);font-size:15.5px;font-weight:500;
  color:var(--dst-oscuro);cursor:pointer;list-style:none;
}
.dst-plegable__titulo::-webkit-details-marker{display:none}
.dst-plegable__signo{
  flex:0 0 auto;position:relative;width:26px;height:26px;border-radius:999px;
  background:var(--dst-crema-3);transition:background .2s ease;
}
.dst-plegable[open] .dst-plegable__signo{background:var(--dst-rosa)}
/* El signo se dibuja con dos barras: la vertical se va al abrir. */
.dst-plegable__signo::before,.dst-plegable__signo::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--dst-oscuro);transition:transform .2s ease,background .2s ease;
}
.dst-plegable__signo::before{width:11px;height:1.6px;transform:translate(-50%,-50%)}
.dst-plegable__signo::after{width:1.6px;height:11px;transform:translate(-50%,-50%)}
.dst-plegable[open] .dst-plegable__signo::before,
.dst-plegable[open] .dst-plegable__signo::after{background:#FFFFFF}
.dst-plegable[open] .dst-plegable__signo::after{transform:translate(-50%,-50%) scaleY(0)}
.dst-plegable__texto{
  font-size:14.5px;line-height:1.65;color:var(--dst-texto);padding-top:12px;
}

/* ---- Tarjeta de descripción ---- */
.dst-ficha-descripcion{
  background:#FFFFFF;border:1px solid var(--dst-nude);border-radius:24px;
  padding:clamp(20px,2.4vw,28px);
}
.dst-ficha-descripcion__rotulo{
  font-family:var(--dst-cuerpo);font-size:10.5px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--dst-rosa-oscuro);font-weight:600;
  margin:0 0 12px;
}
.dst-ficha-descripcion__texto{font-size:15.5px;line-height:1.7;color:#4A3B3F}
.dst-ficha-descripcion__texto > :first-child{margin-top:0}
.dst-ficha-descripcion__texto > :last-child{margin-bottom:0}
.dst-ficha-descripcion__texto p{margin:0 0 14px}
.dst-ficha-descripcion__texto h2,
.dst-ficha-descripcion__texto h3{
  font-family:var(--dst-titulo);font-weight:400;font-size:19px;
  line-height:1.3;color:var(--dst-oscuro);margin:20px 0 8px;
}
.dst-ficha-descripcion__texto strong{font-weight:600;color:var(--dst-oscuro)}

.dst-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:12px;border-top:1px solid #F2E4DF;padding-top:16px;margin:18px 0 0;
}
.dst-dato dt{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--dst-texto);margin:0;
}
.dst-dato dd{font-size:14.5px;color:var(--dst-oscuro);margin:3px 0 0}

/* ---- Cantidad y añadir, con la forma del prototipo ---- */
.single-product div.product form.cart .quantity{
  display:flex;align-items:center;gap:2px;
  background:#FFFFFF;border:1px solid var(--dst-nude);border-radius:999px;padding:5px;
}
.single-product div.product form.cart .single_add_to_cart_button{
  border-radius:999px;
}

/* ---- Agotado · avísame ---- */
.dst-agotado{
  background:#FFFFFF;border:1px solid var(--dst-nude);border-radius:20px;
  padding:16px 18px;margin-bottom:16px;
}
.dst-agotado__texto{
  font-size:14px;line-height:1.55;color:#4A3B3F;margin:0 0 11px;
}
.dst-agotado__form{display:flex;flex-wrap:wrap;gap:8px}
.dst-agotado__correo{
  flex:1 1 160px;min-width:0;box-sizing:border-box;
  border:1px solid var(--dst-nude);border-radius:999px;
  padding:12px 16px;font-family:var(--dst-cuerpo);font-size:14px;
  color:var(--dst-oscuro);background:var(--dst-crema);
}
.dst-agotado__correo:focus{outline:2px solid var(--dst-rosa);outline-offset:1px}
.dst-agotado__boton{
  flex:0 0 auto;background:var(--dst-oscuro);color:#FFFFFF;border:0;
  border-radius:999px;padding:12px 22px;
  font-family:var(--dst-cuerpo);font-size:11.5px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
  transition:background .22s ease;
}
.dst-agotado__boton:hover:not(:disabled){background:var(--dst-vino)}
.dst-agotado__boton:disabled{opacity:.6;cursor:default}
.dst-agotado__respuesta{
  font-size:13px;line-height:1.5;color:var(--dst-rosa-oscuro);
  margin:0;max-height:0;overflow:hidden;transition:max-height .2s ease;
}
.dst-agotado__respuesta.se-ve{max-height:6em;margin-top:10px}
.dst-agotado__respuesta.es-error{color:#9E4F55;font-weight:500}
.dst-agotado__letra{
  font-size:11.5px;line-height:1.5;color:var(--dst-texto);margin:10px 0 0;
}
.dst-agotado__letra a{color:var(--dst-rosa-oscuro);text-decoration:underline}

/* ---- Fichas de temporada ----
   La caja de otoño se hace una vez al año: eso cambia la decisión de compra,
   así que se dice arriba y no en el tercer párrafo. */
.dst-banda-temporada{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:9px;
  background:var(--dst-temporada-suave,#F7E9DC);
  color:var(--dst-temporada,#8A5A2B);
  border-radius:999px;padding:7px 15px;margin:0 0 14px;
  font-family:var(--dst-cuerpo);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;line-height:1;
}
.dst-banda-temporada__hoja{display:inline-flex;flex:0 0 auto}
.dst-banda-temporada__nota{
  font-weight:400;letter-spacing:.04em;text-transform:none;
  opacity:.85;padding-left:9px;border-left:1px solid currentColor;
}

/* Acento por estación. El otoño es el único que existe hoy; los demás
   quedan listos para cuando saquen la caja. */
body.dst-temporada--otono{--dst-temporada:#8A5A2B;--dst-temporada-suave:#F7E9DC}
body.dst-temporada--invierno{--dst-temporada:#3F5A6B;--dst-temporada-suave:#E4EDF2}
body.dst-temporada--primavera{--dst-temporada:#6B7A3F;--dst-temporada-suave:#EDF2E0}
body.dst-temporada--verano{--dst-temporada:#9E4F55;--dst-temporada-suave:#F9E7E3}

/* En estas fichas el rótulo de la descripción sigue el color de la estación,
   para que la ficha entera se sienta de esa temporada y no solo la banda. */
body.dst-temporada .dst-ficha-descripcion__rotulo{color:var(--dst-temporada)}
body.dst-temporada .dst-ficha-descripcion{border-color:var(--dst-temporada-suave)}