/* ==========================================================================
   Ficha de producto — parte superior (rediseño 10/2026, maqueta
   temp/maqueta-ficha-producto-pack.html)

   - Izquierda: galería (slick con miniaturas en vertical) + «Completa tu compra»
     (lo pinta addon-cross-selling con su propio CSS).
   - Derecha: título, descripción corta y caja de compra. Es STICKY: acompaña al
     scroll hasta que termina #fich y empiezan las pestañas. Ningún padre de
     .pd-right puede tener overflow hidden/auto o el sticky deja de funcionar.
   - Móvil/tablet (< 992px): una columna, en orden galería → compra → pack.

   Va en hoja aparte (la enlaza la plantilla) para no tocar style.css ni la
   lista del Minify. Las reglas viejas de #fich en style.css siguen cargadas:
   aquí se anulan las que estorban.
   ========================================================================== */
#fich.pd-top{
	--pd-text:#1d2430;
	--pd-muted:#5b6573;
	--pd-line:#e3e7ec;
	--pd-line-2:#d3d9e0;
	--pd-bg-soft:#fafbfc;
	--pd-bg-img:#f3f5f8;
	--pd-blue:#0b6cbf;
	--pd-blue-dark:#08508f;
	/* El verde de «Comprar» en los listados del tema */
	--pd-green:#00c160;
	--pd-green-dark:#00a653;
	--pd-green-text:#0d7a3a;
	--pd-red:#e0245e;
	--pd-star:#e3a008;
	--pd-radius:14px;
	--pd-font-title:Montserrat,"Roboto",sans-serif;
	--pd-font-text:"Nunito Sans","Open Sans",sans-serif;
	/* Distancia al borde superior cuando la columna derecha se queda fija:
	   la cabecera fija del tema (#head) + aire. La ajusta el script de la plantilla */
	--pd-sticky-top:20px;

	display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:56px;align-items:start;
	margin-top:24px;margin-bottom:56px;
	font-family:var(--pd-font-text);font-size:14px;color:var(--pd-text);
}
#fich.pd-top *,#fich.pd-top *::before,#fich.pd-top *::after{box-sizing:border-box}

/* ---------- Columna izquierda ---------- */
#fich.pd-top .pd-left{display:flex;flex-direction:column;gap:28px;min-width:0;padding:0}
#fich.pd-top .pd-gallery{position:relative;min-width:0}

/* Galería: slick con las miniaturas (slick-dots) a la izquierda */
#fich.pd-top #slick-fich.slick-initialized{display:flex;gap:16px;align-items:flex-start}
#fich.pd-top #slick-fich .slick-dots{order:1;flex:0 0 auto;display:flex;flex-direction:column;gap:12px;width:auto;min-width:0;position:static;max-height:520px;margin:0;padding:2px;list-style:none;overflow-y:auto;direction:ltr}
#fich.pd-top #slick-fich .slick-dots li{display:block;margin:0}
#fich.pd-top #slick-fich .slick-dots li a{display:flex;align-items:center;justify-content:center;width:84px;height:84px;line-height:normal;padding:4px;border:1px solid var(--pd-line-2);border-radius:10px;background:var(--pd-bg-img);overflow:hidden}
#fich.pd-top #slick-fich .slick-dots li a img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
#fich.pd-top #slick-fich .slick-dots li.slick-active a{border:2px solid var(--pd-blue);padding:3px}
#fich.pd-top #slick-fich .slick-list,
#fich.pd-top #slick-fich.fshw{order:2;flex:1 1 auto;min-width:0;border-radius:16px;background:var(--pd-bg-img)}
/* slick mueve la pista con transform (capa propia): el fondo va en la pista para que el multiply de la foto lo vea */
#fich.pd-top #slick-fich .slick-track{background:var(--pd-bg-img)}
#fich.pd-top #slick-fich .item{display:flex!important;align-items:center;justify-content:center;aspect-ratio:1/1;max-height:520px}
#fich.pd-top #slick-fich .item img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}

/* Grado y descuento sobre la imagen */
#fich.pd-top .pd-grade{position:absolute;z-index:2;top:16px;left:116px;padding:6px 10px;border-radius:6px;background:var(--pd-text);color:#fff;font-family:var(--pd-font-title);font-weight:700;font-size:12px;line-height:1.2;text-transform:uppercase;pointer-events:none}
#fich.pd-top .pd-gallery:has(#slick-fich.fshw) .pd-grade{left:16px}
#fich.pd-top .left .offr{top:16px;right:16px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;background:var(--pd-red);font-family:var(--pd-font-title);font-weight:800;font-size:15px;line-height:1.2}
#fich.pd-top .left .offr span{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}

/* ---------- Columna derecha (sticky) ---------- */
#fich.pd-top .pd-right{display:flex;flex-direction:column;gap:22px;min-width:0;padding:0;border:0;position:sticky;top:var(--pd-sticky-top)}
#fich.pd-top .pd-title{margin:0;font-family:var(--pd-font-title);font-weight:800;font-size:26px;line-height:1.25;color:var(--pd-text);text-transform:none;letter-spacing:0}
#fich.pd-top .pd-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px;font-size:13px;color:var(--pd-muted)}
#fich.pd-top .pd-stars{display:inline-flex;gap:2px;color:var(--pd-star);font-size:13px}
#fich.pd-top .pd-stars .is-off{color:#d3d9e0}
#fich.pd-top .pd-reviews{color:var(--pd-blue);text-decoration:none}
#fich.pd-top .pd-reviews:hover{color:var(--pd-blue-dark);text-decoration:underline}
#fich.pd-top .pd-shortdesc{padding-bottom:16px;border-bottom:1px solid var(--pd-line);font-size:13px;line-height:1.5;color:var(--pd-text)}
#fich.pd-top .pd-shortdesc > :last-child{margin-bottom:0}

/* Caja de compra */
#fich.pd-top .pd-buy{display:flex;flex-direction:column;gap:14px;margin:0;padding:20px;border:1px solid var(--pd-line);border-radius:var(--pd-radius);background:var(--pd-bg-soft)}
#fich.pd-top .pd-buy__top{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between}
#fich.pd-top .pd-buy__price{display:flex;flex-direction:column;gap:4px}
#fich.pd-top .pd-was{display:flex;align-items:center;gap:8px}
#fich.pd-top .pd-oldprice{font-family:var(--pd-font-title);font-weight:600;font-size:15px;line-height:1.2;color:var(--pd-muted)}
#fich.pd-top .pd-save{padding:2px 7px;border-radius:5px;background:var(--pd-red);color:#fff;font-family:var(--pd-font-title);font-weight:700;font-size:12px;line-height:1.4}
#fich.pd-top .pd-now{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
#fich.pd-top .pd-price{font-family:var(--pd-font-title);font-weight:800;font-size:36px;line-height:1.1;color:var(--pd-text)}
#fich.prdt-ofrt.pd-top .pd-price{color:var(--pd-red)}
#fich.pd-top .pd-tax{font-size:12px;color:var(--pd-muted)}
#fich.pd-top .pd-stock{display:flex;align-items:center;gap:6px;padding-bottom:6px;font-size:13px;font-weight:700;color:var(--pd-green-text)}
#fich.pd-top .pd-stock::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#16a34a}
#fich.pd-top .pd-stock.is-out{color:#b42318}
#fich.pd-top .pd-stock.is-out::before{background:#d92d20}

#fich.pd-top .pd-buy__row{display:flex;gap:10px;align-items:stretch}
#fich.pd-top .pd-qty{display:flex;align-items:center;flex:0 0 auto;border:1px solid var(--pd-line-2);border-radius:10px;background:#fff}
#fich.pd-top .pd-qty button{width:44px;height:50px;padding:0;border:0;background:transparent;font-size:20px;line-height:1;color:var(--pd-text);cursor:pointer}
#fich.pd-top .pd-qty input{width:34px;height:50px;padding:0;border:0;background:transparent;text-align:center;font-family:var(--pd-font-text);font-weight:700;font-size:15px;line-height:normal;color:var(--pd-text);-moz-appearance:textfield;appearance:textfield}
#fich.pd-top .pd-qty input::-webkit-outer-spin-button,#fich.pd-top .pd-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#fich.pd-top .pd-btn-cart{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:10px;height:52px;margin:0;padding:0 14px;border:0;border-radius:10px;background:var(--pd-green);color:#fff;font-family:var(--pd-font-title);font-weight:800;font-size:16px;line-height:1.2;letter-spacing:.6px;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;user-select:none}
#fich.pd-top .pd-btn-cart:hover{background:var(--pd-green-dark);color:#fff}
#fich.pd-top .pd-btn-cart svg{flex:0 0 auto}
#fich.pd-top .pd-btn-notify{background:var(--pd-blue)}
#fich.pd-top .pd-btn-notify:hover{background:var(--pd-blue-dark)}
#fich.prdt-agtd.pd-top .pd-btn-cart:not(.pd-btn-notify){background:#9e9e9e}
#fich.pd-top .pd-btn-fav{display:flex;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border:1px solid var(--pd-line-2);border-radius:10px;background:#fff}
#fich.pd-top .pd-btn-fav:hover{border-color:var(--pd-blue)}
#fich.pd-top .pd-btn-fav .fvrt{position:static;margin:0;font-size:24px;line-height:1;color:#9aa3ae}
#fich.pd-top .pd-btn-fav .fvrt.actv{color:#ff4077}
#fich.pd-top .pd-paypal{font-size:12px;color:var(--pd-muted)}
#fich.pd-top #widget-scalapay-info:empty{display:none}
#fich.pd-top .pd-btn-cart:focus-visible,#fich.pd-top .pd-qty button:focus-visible,#fich.pd-top .pd-btn-fav a:focus-visible,#fich.pd-top .pd-reviews:focus-visible{outline:3px solid rgba(11,108,191,.45);outline-offset:2px}

/* Agotado: el tema atenúa título, precio y galería */
#fich.prdt-agtd.pd-top .pd-head,#fich.prdt-agtd.pd-top .pd-buy__price,#fich.prdt-agtd.pd-top .pd-gallery{opacity:.5}

/* El botón del pack (addon venta cruzada) con el mismo verde */
#fich.pd-top .kdv-xs{--kdv-xs-green:var(--pd-green);--kdv-xs-green-dark:var(--pd-green-dark)}

/* ---------- Tablet: columnas más justas ---------- */
@media (max-width:1199.98px){
	#fich.pd-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px}
	#fich.pd-top #slick-fich .slick-dots li a{width:72px;height:72px}
	#fich.pd-top .pd-grade{left:104px}
}

/* ---------- Móvil/tablet: una columna, galería → compra → pack ---------- */
@media (max-width:991.98px){
	#fich.pd-top{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:12px;margin-bottom:36px}
	#fich.pd-top .pd-right{position:static}
	#fich.pd-top .pd-title{font-size:22px}
}
@media (max-width:689.98px){
	#fich.pd-top #slick-fich.slick-initialized{flex-direction:column;gap:12px}
	#fich.pd-top #slick-fich .slick-dots{display:flex!important;order:3;flex-direction:row;max-height:none;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}
	#fich.pd-top #slick-fich .slick-dots li a{width:64px;height:64px}
	#fich.pd-top #slick-fich .slick-list{width:100%}
	#fich.pd-top .pd-grade{left:16px}
	#fich.pd-top .pd-title{font-size:21px}
	#fich.pd-top .pd-price{font-size:30px}
	#fich.pd-top .pd-buy{padding:16px}
	#fich.pd-top .pd-qty button{width:38px}
	#fich.pd-top .pd-btn-cart{font-size:14px;gap:8px;padding:0 10px}
}
@media (max-width:479.98px){
	/* «Añadir a mi compra» en una sola línea entre la cantidad y favoritos */
	#fich.pd-top .pd-btn-cart svg{display:none}
	#fich.pd-top .pd-btn-cart{letter-spacing:0;padding:0 8px;white-space:nowrap}
	#fich.pd-top .pd-qty button{width:34px}
	#fich.pd-top .pd-qty input{width:28px}
	#fich.pd-top .pd-buy__row{gap:8px}
	#fich.pd-top .pd-btn-cart{min-width:0}
	#fich.pd-top .pd-btn-fav{flex-basis:46px;width:46px}
}
@media (max-width:399.98px){
	#fich.pd-top .pd-btn-cart{font-size:13px}
	#fich.pd-top .pd-buy{padding:14px 12px}
}