/* Ventana de personalizacion del pack.
   Se apoya en las variables ya definidas en gocamis-pack.css. */

/* --- la fila, ahora con boton --- */
.icf-v2 .gcpk__item{position:relative}
.icf-v2 .gcpk__resumen{font-size:12px;color:#8a8a90;line-height:1.35}
.icf-v2 .gcpk__item.is-on .gcpk__resumen{color:#0f7a43;font-weight:600}
.icf-v2 .gcpk__precio{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.icf-v2 .gcpk__precio del{font-size:11.5px;color:#a8a8b0;font-weight:500}
.icf-v2 .gcpk__precio b{font:800 14px/1 'Bricolage Grotesque',sans-serif;color:#0a0a0b}

.icf-v2 .gcpk__pers{
	flex:0 0 auto;border:1.5px solid #0a0a0b;background:#fff;color:#0a0a0b;
	border-radius:999px;padding:9px 15px;cursor:pointer;
	font:700 12px/1 'Bricolage Grotesque',sans-serif;
	transition:background .18s ease,color .18s ease
}
.icf-v2 .gcpk__pers:hover{background:#0a0a0b;color:#fff}
.icf-v2 .gcpk__quitar{
	flex:0 0 auto;border:0;background:none;color:#8a8a90;cursor:pointer;
	font:600 11.5px/1 'Bricolage Grotesque',sans-serif;text-decoration:underline;padding:4px
}
.icf-v2 .gcpk__quitar:hover{color:#c9736a}

@media (max-width:600px){
	.icf-v2 .gcpk__item{flex-wrap:wrap}
	.icf-v2 .gcpk__pers{width:100%;order:5;margin-top:4px}
	.icf-v2 .gcpk__quitar{order:6}
}

/* --- la ventana --- */
/* El formulario de captacion de Omnisend se pinta a z-index 200000 y tapaba
   la ventana entera. */
.gcpkm{position:fixed;inset:0;z-index:2000000;display:flex;align-items:center;justify-content:center}
.gcpkm[hidden]{display:none}
.gcpkm__velo{position:absolute;inset:0;background:rgba(10,10,11,.62);backdrop-filter:blur(3px)}
.gcpkm__caja{
	position:relative;display:flex;flex-direction:column;
	width:min(560px,calc(100vw - 24px));max-height:min(88vh,780px);
	background:#fff;border-radius:20px;overflow:hidden;
	box-shadow:0 24px 70px rgba(10,10,11,.45);
	font-family:'Bricolage Grotesque',sans-serif;
	animation:gcpkmEntra .22s ease
}
@keyframes gcpkmEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gcpkm__caja{animation:none}}

.gcpkm__x{
	position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
	border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#0a0a0b;
	font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(10,10,11,.16)
}
.gcpkm__x:hover{background:#0a0a0b;color:#fff}

.gcpkm__scroll{overflow-y:auto;padding:0 0 8px}

.gcpkm__foto{margin:0;background:#f5f5f6;display:flex;align-items:center;justify-content:center;padding:12px}
.gcpkm__foto img{width:auto;max-width:100%;max-height:190px;height:auto;display:block;object-fit:contain}

.gcpkm__titulo{
	margin:16px 20px 4px;font:800 clamp(16px,3.6vw,19px)/1.2 'Bricolage Grotesque',sans-serif;
	color:#0a0a0b;letter-spacing:-.01em
}

.gcpkm__campos{padding:8px 20px 0}
.gcpkm__grupo{border:0;padding:0;margin:0 0 18px}
.gcpkm__grupo legend{
	padding:0;margin:0 0 8px;
	font:700 10.5px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.09em;
	text-transform:uppercase;color:#8a8a90
}

.gcpkm__ops{display:flex;flex-wrap:wrap;gap:8px}
.gcpkm__ops.is-mal{outline:2px solid #c9736a;outline-offset:5px;border-radius:8px}
.gcpkm__op{position:relative;cursor:pointer;display:flex}
.gcpkm__op input{position:absolute;opacity:0;width:0;height:0}

/* tallas y opciones de texto */
.gcpkm__ops--talla .gcpkm__op span,
.gcpkm__ops:not(.gcpkm__ops--img) .gcpkm__op span{
	display:flex;align-items:center;justify-content:center;
	min-width:52px;padding:10px 13px;border:1.5px solid #e2e2e7;border-radius:10px;
	background:#fff;font:700 13px/1 'Bricolage Grotesque',sans-serif;color:#0a0a0b
}
.gcpkm__op input:checked ~ span{border-color:#0a0a0b;background:#0a0a0b;color:#fff}
.gcpkm__op input:focus-visible ~ span,
.gcpkm__op input:focus-visible ~ img{outline:2px solid #0a0a0b;outline-offset:2px}

/* parches */
.gcpkm__ops--img{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.gcpkm__ops--img .gcpkm__op{
	flex-direction:column;align-items:center;gap:3px;padding:8px 5px;
	border:1.5px solid #e6e6ea;border-radius:12px;background:#fff;text-align:center
}
.gcpkm__ops--img .gcpkm__op:hover{border-color:#c9ccd2}
.gcpkm__ops--img .gcpkm__op input:checked ~ *{opacity:1}
.gcpkm__ops--img .gcpkm__op:has(input:checked){border-color:#0a0a0b;box-shadow:0 3px 12px rgba(20,30,45,.12)}
.gcpkm__ops--img img{width:52px;height:52px;object-fit:contain;display:block}
.gcpkm__ops--img span{font:600 10px/1.2 'Bricolage Grotesque',sans-serif;color:#3f3f46;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcpkm__ops--img em{font:700 9.5px/1 'Bricolage Grotesque',sans-serif;color:#1f7a4d;font-style:normal}
.gcpkm__ops--img .gcpkm__op--nada{justify-content:center}
.gcpkm__ops--img .gcpkm__op--nada span{min-height:52px;display:flex;align-items:center}

.gcpkm__texto{
	width:100%;border:1.5px solid #e2e2e7;border-radius:10px;padding:12px 13px;
	font:600 14px 'Bricolage Grotesque',sans-serif;color:#0a0a0b;background:#fff
}
.gcpkm__texto:focus{border-color:#0a0a0b;outline:none}
.gcpkm__coste{display:inline-block;margin-top:6px;font:700 11.5px 'Bricolage Grotesque',sans-serif;color:#1f7a4d}

/* --- pie --- */
.gcpkm__pie{
	display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
	padding:14px 20px;border-top:1.5px solid #e6e6ea;background:#fff
}
.gcpkm__tot{display:flex;flex-direction:column;gap:1px}
.gcpkm__tot-lab{
	font:700 10px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.09em;
	text-transform:uppercase;color:#8a8a90
}
.gcpkm__tot b{font:800 20px/1 'Bricolage Grotesque',sans-serif;color:#0a0a0b}
.gcpkm__add{
	/* Mismo boton que "Finalizar compra" (.icf-checkout). */
	flex:1 1 auto;min-width:200px;border:0;cursor:pointer;
	background:#0a0a0b;color:#fff;border-radius:999px;
	min-height:54px;padding:0 26px;
	font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15.5px;
	letter-spacing:.05em;text-transform:uppercase;line-height:1;
	transition:opacity .18s ease
}
.gcpkm__add:hover{opacity:.88}
.gcpkm__add:focus-visible{outline:2px solid #0a0a0b;outline-offset:3px}

@media (max-width:600px){
	.gcpkm{align-items:flex-end}
	.gcpkm__caja{width:100vw;max-height:92vh;border-radius:20px 20px 0 0}
	.gcpkm__add{width:100%}
}

/* Precio dentro de la pastilla de las opciones de texto. */
.gcpkm__op span i{font-style:normal;font-weight:700;font-size:11px;opacity:.7;margin-left:5px}

/* La regla base de las opciones (0,3,1) ganaba a la de marcado (0,2,2), asi
   que al elegir no cambiaba nada. Aqui se le da mas peso. */
.gcpkm__ops .gcpkm__op input:checked ~ span{
	border-color:#0a0a0b !important;background:#0a0a0b !important;color:#fff !important}
.gcpkm__ops--img .gcpkm__op input:checked ~ span{background:none !important;color:#0a0a0b !important}