/* Carrito: el ahorro a la vista y las filas de sugerencias. */

.icf-v2{
	--gcc-crom-v:linear-gradient(180deg,#dfe6ee 0%,#93a0b2 6%,#5c6878 14%,#9aa6b6 26%,#c6ccd4 34%,#f4f6f8 43%,#ffffff 50%,#faf0fa 56%,#f0dce6 62%,#e6b0a8 68%,#e67864 74%,#a85f58 80%,#6b4a4a 86%,#c98f80 92%,#5a4442 100%);
	--gcc-crom-h:linear-gradient(90deg,#6a6b6e 0%,#4b5666 8%,#7d8da3 18%,#909cac 27%,#b7c0ca 35%,#eef1f4 43%,#ffffff 49%,#faf0fa 54%,#f0dce6 59%,#e6b0a8 64%,#e67864 70%,#a05a52 77%,#5f5257 84%,#d29a8e 91%,#f0c8bc 96%,#5a4a41 100%)
}

/* --- el ahorro, en la cabecera del carrito ---------------------------- */
.icf-v2 .gcc-badge{
	display:inline-flex;align-items:baseline;gap:9px;position:relative;
	margin:12px 0 0;padding:11px 20px 11px 18px;border-radius:999px;
	background:#0f7a43;color:#fff;
	font:800 13px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.06em;text-transform:uppercase;
	box-shadow:0 5px 18px rgba(15,122,67,.30)
}
.icf-v2 .gcc-badge::before{
	content:'';position:absolute;inset:0;border-radius:999px;padding:2px;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 6s linear infinite
}
.icf-v2 .gcc-badge b{font-size:19px;letter-spacing:-.01em}
@keyframes gccCorre{from{background-position:0 50%}to{background-position:230% 50%}}

/* En movil el badge no cabe al lado del titulo: parte el H1 en dos lineas.
   Se manda a su propia fila. gcc-badge--movil */
@media (max-width:640px){
	.icf-v2 .icf-cart__head{flex-wrap:wrap}
	.icf-v2 .gcc-badge{flex:0 0 100%;justify-content:center;margin-top:14px}
}

/* --- el ahorro, dentro del resumen ------------------------------------ */
/* El ahorro va con las demas lineas del resumen, en verde y sin caja negra: el
   ladrillo negro repetia el distintivo de la cabecera y en movil se veian dos
   seguidos. */
.icf-v2 .gcc-linea{
	display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	margin:8px 0 0;padding:11px 0 0;border-top:1px solid #e7e8eb;
	background:none;color:#0f7a43
}
.icf-v2 .gcc-linea span{
	font:700 12.5px/1.3 'Bricolage Grotesque',sans-serif;color:#0f7a43;
	letter-spacing:0;text-transform:none
}
.icf-v2 .gcc-linea b,
.icf-v2 .gcc-linea b .woocommerce-Price-amount{
	font:800 15px/1 'Bricolage Grotesque',sans-serif;color:#0f7a43;white-space:nowrap
}

/* --- filas de sugerencias --------------------------------------------- */
.icf-v2 .gcc-sug{max-width:1240px;margin:44px auto 0;padding:0 16px}
@media (min-width:922px){.icf-v2 .gcc-sug{padding:0 24px}}
.icf-v2 .gcc-sug__bloque{margin:0 0 38px}
.icf-v2 .gcc-sug__head{
	display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 14px}
.icf-v2 .gcc-sug__head-txt{min-width:0}
/* En movil se pasa el dedo; las flechas solo hacen falta con raton. */
.icf-v2 .gcc-sug__navs{display:none;gap:8px;flex:0 0 auto}
@media (min-width:768px){.icf-v2 .gcc-sug__navs{display:flex}}
.icf-v2 .gcc-sug__nav{
	position:relative;width:38px;height:38px;border-radius:50%;
	border:1.5px solid #e0e3e7;background:#fff;cursor:pointer;
	transition:border-color .18s ease,background .18s ease,opacity .18s ease}
.icf-v2 .gcc-sug__nav:hover{border-color:#0a0a0b;background:#0a0a0b}
.icf-v2 .gcc-sug__nav::before{
	content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;
	border-right:2px solid #0a0a0b;border-bottom:2px solid #0a0a0b}
.icf-v2 .gcc-sug__nav:hover::before{border-color:#fff}
.icf-v2 .gcc-sug__nav--prev::before{transform:translate(-35%,-50%) rotate(135deg)}
.icf-v2 .gcc-sug__nav--next::before{transform:translate(-65%,-50%) rotate(-45deg)}
.icf-v2 .gcc-sug__nav[disabled]{opacity:.28;pointer-events:none}
.icf-v2 .gcc-sug__title{
	font:800 clamp(19px,3.4vw,26px)/1.1 'Bricolage Grotesque',sans-serif !important;
	text-transform:uppercase;letter-spacing:-.01em;margin:0;color:#0a0a0b
}
.icf-v2 .gcc-sug__sub{margin:5px 0 0;font-size:14px;color:#6a6a72}

/* Carrusel de verdad: las tarjetas se desplazan por dentro de la fila y la
   siguiente asoma, para que se vea que hay mas.
   Con grid y columnas en 1fr el ancho se calculaba contra el contenedor, la
   fila acababa siendo mas ancha que la pantalla y el que se desplazaba era el
   documento entero en vez de la fila. */
.icf-v2 .gcc-sug__fila{
	display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scroll-padding:0 2px;
	padding:2px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none
}
.icf-v2 .gcc-sug__fila::-webkit-scrollbar{height:0;display:none}
.icf-v2 .gcc-card{flex:0 0 46%}
@media (min-width:560px){.icf-v2 .gcc-card{flex-basis:30%}}
@media (min-width:768px){.icf-v2 .gcc-card{flex-basis:200px}}

/* La misma tarjeta que en el resto de la tienda: la foto sobre gris, el nombre
   y el precio. Antes cada una era una caja gris con un boton negro dentro, y en
   una fila de ocho eso eran ocho ladrillos, no un carrusel de producto. */
.icf-v2 .gcc-card{
	scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;
	background:none;text-decoration:none !important;color:#0a0a0b !important
}
.icf-v2 .gcc-card__media{
	position:relative;background:#f4f4f5;border-radius:16px;overflow:hidden;
	aspect-ratio:1/1;display:flex;align-items:center;justify-content:center
}
.icf-v2 .gcc-card__media img{
	width:100%;height:100%;object-fit:cover;display:block;
	mix-blend-mode:multiply;transition:transform .25s ease
}
.icf-v2 .gcc-card:hover .gcc-card__media img{transform:scale(1.04)}
.icf-v2 .gcc-card__ahorro{
	position:absolute;top:8px;left:8px;padding:5px 10px;border-radius:999px;
	background:#0f7a43;color:#fff;
	font:800 11.5px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.02em;
	box-shadow:0 2px 8px rgba(15,122,67,.30)
}
.icf-v2 .gcc-card__ahorro .woocommerce-Price-amount{color:#fff}
.icf-v2 .gcc-card__info{display:flex;flex-direction:column;gap:3px;padding:8px 2px 0}
.icf-v2 .gcc-card__name{
	font:700 11.5px/1.35 'Bricolage Grotesque',sans-serif;color:#0a0a0b;
	text-transform:uppercase;letter-spacing:-.01em;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.icf-v2 .gcc-card__price{font:500 12.5px/1.2 'Bricolage Grotesque',sans-serif;color:#0a0a0b}
.icf-v2 .gcc-card__price del{color:#a8a8b0;font-weight:400;margin-right:5px}
.icf-v2 .gcc-card__price ins{text-decoration:none;font-weight:700}
/* La tarjeta entera ya es el enlace, el boton solo repetia. */
.icf-v2 .gcc-card__cta{display:none}
@media (prefers-reduced-motion:reduce){
	.icf-v2 .gcc-badge::before{animation:none}
	.icf-v2 .gcc-card:hover{transform:none}
}

/* --- barra fija de movil ---------------------------------------------- */
/* El total y el boton siempre al alcance del pulgar: es lo que mas mueve la
   aguja en movil, donde se abandona mucho mas que en escritorio. */
.icf-v2 .gcc-barra{display:none}
@media (max-width:920px){
	.icf-v2 .gcc-barra{
		position:fixed;left:0;right:0;bottom:0;z-index:900;
		display:flex;align-items:center;gap:12px;
		padding:11px 14px calc(11px + env(safe-area-inset-bottom));
		background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
		border-top:1px solid #e7e8eb;box-shadow:0 -6px 22px rgba(20,30,45,.10);
		font-family:'Bricolage Grotesque',sans-serif
	}
	.icf-v2 .gcc-barra__tot{display:flex;flex-direction:column;gap:2px;min-width:0}
	.icf-v2 .gcc-barra__tot i{
		font:700 9.5px/1 'Bricolage Grotesque',sans-serif;font-style:normal;
		letter-spacing:.12em;text-transform:uppercase;color:#7c818b
	}
	.icf-v2 .gcc-barra__tot b,
	.icf-v2 .gcc-barra__tot b .woocommerce-Price-amount{
		font:800 20px/1 'Bricolage Grotesque',sans-serif;color:#0a0a0b;white-space:nowrap
	}
	.icf-v2 .gcc-barra__btn{
		flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;
		min-height:52px;padding:0 18px;border-radius:999px;
		background:#0a0a0b;color:#fff !important;text-decoration:none !important;
		font:800 13px/1 'Bricolage Grotesque',sans-serif;letter-spacing:.06em;text-transform:uppercase
	}
	.icf-v2 .gcc-barra__btn svg{width:17px;height:17px;flex:0 0 auto}
	/* Mientras se ve el boton del resumen, la barra se aparta. */
	.icf-v2 .gcc-barra{transition:transform .25s cubic-bezier(.4,0,.2,1)}
	.icf-v2 .gcc-barra.is-fuera{transform:translateY(115%)}
}

@media (prefers-reduced-motion:reduce){
	.icf-v2 .gcc-prog.is-on::before{animation:none}
	.icf-v2 .gcc-prog__barra i{transition:none}
}

/* --- las sugerencias ahora van dentro de la columna del carrito ------- */
.icf-v2 .icf-cart__main .gcc-sug{max-width:none;margin:28px 0 0;padding:0}
.icf-v2 .icf-cart__main .gcc-sug__bloque{margin:0 0 30px}
.icf-v2 .icf-cart__main .gcc-sug__fila{grid-auto-columns:minmax(158px,1fr)}
@media (min-width:922px){
	.icf-v2 .icf-cart__main .gcc-sug__fila{grid-auto-columns:minmax(178px,1fr)}
}