/* Carrito deslizante y las dos piezas que comparte con la pagina de carrito
   (el progreso del descuento y la proteccion de envio).

   Esta hoja se carga en toda la tienda: el panel se abre desde cualquier
   pagina, y antes sus piezas se quedaban sin estilo porque la hoja del carrito
   solo se cargaba en /carrito/. */

/* --------------------------------------------------- el panel deslizante */
#v2cd .v2cd__p{
	width:min(440px,96vw);border-radius:22px 0 0 22px;
	box-shadow:-18px 0 60px rgba(10,10,11,.18)
}
#v2cd .v2cd__head{
	display:flex;align-items:center;gap:10px;
	padding:18px 20px 14px;border-bottom:1px solid #ececef
}
#v2cd .v2cd__head b{
	font:800 13px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.1em;text-transform:uppercase
}
#v2cd .v2cd__head .gcm__uds-tot{
	font:600 12px/1 'Bricolage Grotesque',sans-serif;color:#8a8a90;margin-right:auto
}
#v2cd .v2cd__close{
	flex:0 0 auto;width:34px;height:34px;border-radius:50%;
	background:none;border:1.5px solid #e2e2e7;color:#0a0a0b;
	font-size:15px;line-height:1;cursor:pointer;
	transition:border-color .16s ease,background .16s ease
}
#v2cd .v2cd__close:hover{border-color:#0a0a0b;background:#0a0a0b;color:#fff}

/* El cuerpo no rueda entero: rueda la lista, y el total y los botones se
   quedan siempre abajo, al alcance del pulgar. */
#v2cd .v2cd__body{
	padding:0;display:flex;flex-direction:column;overflow:hidden;min-height:0
}
#v2cd .gcc-prog{flex:0 0 auto;margin:14px 18px 0}
#v2cd .gcm__lista{
	flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
	list-style:none;margin:0;padding:4px 18px 6px
}

/* ------------------------------------------------------- cada prenda */
#v2cd .gcm__linea{
	position:relative;display:grid;grid-template-columns:66px minmax(0,1fr) auto;
	gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #f0f0f2;
	font-family:'Bricolage Grotesque',sans-serif
}
#v2cd .gcm__linea:last-child{border-bottom:0}
/* Cada hueco en su sitio: sin colocarlos a mano, el reparto automatico se
   descolocaba y la foto acababa en la columna del precio. */
#v2cd .gcm__foto{grid-column:1;grid-row:1}
#v2cd .gcm__info{grid-column:2;grid-row:1}
#v2cd .gcm__precio{grid-column:3;grid-row:1}
#v2cd .gcm__foto{
	display:block;width:66px;height:76px;border-radius:10px;overflow:hidden;
	background:#f6f7f9;border:1px solid #e7e8eb
}
#v2cd .gcm__foto a{display:block;width:100%;height:100%}
/* WooCommerce pone las fotos del mini carrito en absoluto y flotando a la
   derecha; asi se salian del hueco y se comian la fila entera. */
/* La foto entera, sin recortes: son PNG con fondo transparente, asi que
   'contain' sobre el gris las ensena completas. Con 'cover' y multiply se
   perdian los hombros y el blanco se fundia con la caja. */
#v2cd .gcm__foto img{
	position:static !important;float:none !important;
	/* WooCommerce las sube medio alto con translateY(-50%) y la caja recortaba
	   todo menos el bajo de la prenda. */
	transform:none !important;top:auto !important;left:auto !important;
	width:100% !important;height:100% !important;max-width:none;
	object-fit:contain !important;object-position:center;
	display:block;margin:0;padding:3px;
	mix-blend-mode:normal;border-radius:0
}
#v2cd .gcm__info{display:flex;flex-direction:column;gap:3px;min-width:0}
#v2cd .gcm__nombre{
	font:700 12px/1.3 'Bricolage Grotesque',sans-serif !important;
	color:#0a0a0b !important;text-decoration:none !important;text-transform:uppercase;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
#v2cd .gcm__meta{font-size:11px;line-height:1.45;color:#8a8a90}
#v2cd .gcm__meta p,#v2cd .gcm__meta dl,#v2cd .gcm__meta dt,#v2cd .gcm__meta dd{
	margin:0;padding:0;display:inline;font-size:11px;color:#8a8a90
}
#v2cd .gcm__meta dt{font-weight:700}
#v2cd .gcm__meta dd::after{content:' · '}
#v2cd .gcm__meta dd:last-child::after{content:''}
#v2cd .gcm__uds{font-size:11px;color:#8a8a90;font-weight:600}
#v2cd .gcm__precio{
	display:flex;flex-direction:column;align-items:flex-end;gap:1px;
	padding-top:14px;text-align:right;white-space:nowrap
}
#v2cd .gcm__precio b{font:800 13.5px/1 'Bricolage Grotesque',sans-serif;color:#0a0a0b}
#v2cd .gcm__precio del{font-size:11px;color:#a8a8b0}
#v2cd a.gcm__quitar{
	position:absolute;top:8px;right:-4px;width:24px;height:24px;
	display:flex;align-items:center;justify-content:center;
	background:none !important;color:#b6b8bd !important;
	font-size:16px;line-height:1;border-radius:50%;text-decoration:none !important;
	transition:color .16s ease
}
#v2cd a.gcm__quitar:hover{color:#0a0a0b !important}

/* ------------------------------------------------------- totales y pie */
#v2cd .gcm__tot{
	flex:0 0 auto;padding:12px 18px 2px;border-top:1px solid #ececef;
	font-family:'Bricolage Grotesque',sans-serif
}
#v2cd .gcm__fila{
	display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	padding:4px 0;font-size:13px;font-weight:600;color:#6a6a72
}
#v2cd .gcm__fila b{font:800 15px/1 'Bricolage Grotesque',sans-serif;color:#0a0a0b}
#v2cd .gcm__fila--ok,
#v2cd .gcm__fila--ok b,
#v2cd .gcm__fila--ok b .woocommerce-Price-amount{color:#0f7a43}
/* El total remata el bloque, separado del resto. */
#v2cd .gcm__fila--total{margin-top:6px;padding-top:10px;border-top:1px solid #ececef}
#v2cd .gcm__fila--total span{font-weight:800;font-size:14px;color:#0a0a0b}
#v2cd .gcm__fila--total b,
#v2cd .gcm__fila--total b .woocommerce-Price-amount{font-size:19px;color:#0a0a0b}

#v2cd .gcc-sp{margin:10px 18px 0}

#v2cd .gcm__botones{
	flex:0 0 auto;display:flex;flex-direction:column;gap:8px;margin:0;
	padding:12px 18px calc(16px + env(safe-area-inset-bottom))
}
html body #v2cd .gcm__botones a{
	display:flex;align-items:center;justify-content:center;gap:8px;
	min-height:52px;padding:0 20px;border-radius:999px;
	font:800 13px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.05em;
	text-transform:uppercase;text-decoration:none !important
}
html body #v2cd .gcm__botones a.gcm__pagar{
	background:#0a0a0b !important;color:#fff !important;border:0 !important;order:1
}
html body #v2cd .gcm__botones a.gcm__ver{
	background:#fff !important;color:#0a0a0b !important;
	border:1.5px solid #d8d8dc !important;min-height:46px;order:2
}
#v2cd .gcm__aviso{
	flex:0 0 auto;margin:0;padding:0 18px 12px;
	font:500 11px/1.45 'Bricolage Grotesque',sans-serif;color:#8a8a90;text-align:center
}
#v2cd .gcm__vacio{
	margin:auto;padding:40px 24px;text-align:center;color:#8a8a90;font-size:14px
}


/* --- progreso del descuento por llevar dos prendas -------------------- */
/* Arriba del todo: dice cuanto falta para el descuento y lleva a las filas
   de sugerencias sin obligar a bajar buscandolas. */
.icf-v2 .gcc-prog{
	margin:0 0 18px;padding:13px 16px 14px;border-radius:14px;
	background:#f5f5f6;border:1.5px dashed #c9ccd2;
	font-family:'Bricolage Grotesque',sans-serif
}
.icf-v2 .gcc-prog__txt{
	display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
	margin:0 0 10px;font-size:13.5px;font-weight:600;line-height:1.4;color:#3f3f46
}
.icf-v2 .gcc-prog__txt > span{min-width:0}
.icf-v2 .gcc-prog__txt b{color:#0a0a0b;font-weight:800;white-space:nowrap}
.icf-v2 .gcc-prog__txt b .woocommerce-Price-amount{font-weight:800}
.icf-v2 .gcc-prog__ir{
	flex:0 0 auto;border:1.5px solid #0a0a0b;background:#fff;color:#0a0a0b;
	border-radius:999px;padding:8px 14px;cursor:pointer;
	font:800 11px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.06em;text-transform:uppercase;
	transition:background .18s ease,color .18s ease
}
.icf-v2 .gcc-prog__ir:hover{background:#0a0a0b;color:#fff}

.icf-v2 .gcc-prog__barra{
	display:block;height:6px;border-radius:99px;background:#e2e4e8;overflow:hidden
}
.icf-v2 .gcc-prog__barra i{
	display:block;height:100%;border-radius:99px;background:#0f7a43;
	transition:width .45s cubic-bezier(.4,0,.2,1)
}

/* Conseguido: se viste de cromado, igual que el resto de los avisos buenos. */
.icf-v2 .gcc-prog.is-on{
	position:relative;background:#0f7a43;border-style:solid;border-color:transparent;color:#fff
}
.icf-v2 .gcc-prog.is-on .gcc-prog__txt{color:#fff;margin-bottom:0}
.icf-v2 .gcc-prog.is-on .gcc-prog__txt b,
.icf-v2 .gcc-prog.is-on .gcc-prog__txt b .woocommerce-Price-amount{color:#fff}
.icf-v2 .gcc-prog.is-on .gcc-prog__barra{display:none}
.icf-v2 .gcc-prog.is-on::before{
	content:'';position:absolute;inset:0;border-radius:14px;padding:1.8px;pointer-events:none;
	background:var(--gcc-crom-h);background-size:230% 100%;
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
	animation:gccCorre 7s linear infinite
}

/* --- proteccion de envio ---------------------------------------------- */
.icf-v2 .gcc-sp{
	display:flex;align-items:flex-start;gap:11px;
	margin:0 0 14px;padding:13px 14px;border-radius:14px;
	background:#fff;border:1.5px solid #e2e2e7;
	text-decoration:none !important;transition:border-color .18s ease,background .18s ease
}
.icf-v2 .gcc-sp:hover{border-color:#9aa6b6}
.icf-v2 .gcc-sp__box{
	flex:0 0 auto;width:21px;height:21px;margin-top:1px;border-radius:6px;
	border:2px solid #c9ccd2;background:#fff;position:relative;transition:all .18s ease
}
.icf-v2 .gcc-sp.is-on{border-color:transparent;background:#f7f8f9;position:relative}
.icf-v2 .gcc-sp.is-on::before{
	content:'';position:absolute;inset:0;border-radius:14px;padding:1.8px;pointer-events:none;
	background:var(--gcc-crom-h);background-size:230% 100%;
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
	animation:gccCorre 7s linear infinite
}
.icf-v2 .gcc-sp.is-on .gcc-sp__box{background:#0a0a0b;border-color:#0a0a0b}
.icf-v2 .gcc-sp.is-on .gcc-sp__box::after{
	content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
	border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)
}
.icf-v2 .gcc-sp__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.icf-v2 .gcc-sp__txt b{
	font:800 13.5px/1.25 'Bricolage Grotesque',sans-serif;color:#0a0a0b;
	display:flex;align-items:baseline;gap:7px;flex-wrap:wrap
}
.icf-v2 .gcc-sp__txt b i{font-style:normal;font-weight:700;color:#6a6a72;font-size:13px}
.icf-v2 .gcc-sp__txt em{font-style:normal;font-size:12.5px;line-height:1.45;color:#6a6a72}

@media (prefers-reduced-motion:reduce){
	.icf-v2 .gcc-sug__gancho.is-on::before,.icf-v2 .gcc-sp.is-on::before{animation:none}
}

/* Mientras el servidor confirma, la casilla se atenua un poco: se ve que va,
   pero no se puede pulsar dos veces. */
.icf-v2 .gcc-sp.is-esperando{opacity:.6;pointer-events:none}