.yag-root,
.yag-root *{
	box-sizing:border-box!important;
}
.yag-root{
	display:block!important;
	width:100%!important;
	max-width:none!important;
	margin:28px 0!important;
	padding:22px!important;
	border:1px solid #e3e7ec!important;
	border-radius:16px!important;
	background:#fff!important;
	clear:both!important;
	float:none!important;
}
.yag-heading{
	display:flex!important;
	align-items:flex-start!important;
	justify-content:space-between!important;
	gap:18px!important;
	margin-bottom:20px!important;
}
.yag-heading h3{
	margin:0 0 6px!important;
	padding:0!important;
	font-size:clamp(22px,2vw,30px)!important;
	line-height:1.2!important;
}
.yag-heading p{
	margin:0!important;
	color:#667085!important;
}
.yag-clear{
	display:inline-flex!important;
	align-items:center!important;
	justify-content:center!important;
	min-height:42px!important;
	padding:10px 16px!important;
	margin:0!important;
	border:0!important;
	border-radius:999px!important;
	background:#e8eef7!important;
	color:#24324a!important;
	font-weight:700!important;
	cursor:pointer!important;
	box-shadow:none!important;
}
.yag-gallery{
	display:grid!important;
	grid-template-columns:repeat(5,minmax(0,1fr))!important;
	gap:18px!important;
	width:100%!important;
	margin:0!important;
	padding:0!important;
}
.yag-item{
	display:flex!important;
	flex-direction:column!important;
	width:100%!important;
	min-width:0!important;
	margin:0!important;
	padding:0!important;
	border:2px solid #e4e7ec!important;
	border-radius:14px!important;
	background:#fff!important;
	overflow:hidden!important;
	box-shadow:none!important;
}
.yag-item.is-selected{
	border-color:#2271b1!important;
	box-shadow:0 0 0 3px rgba(34,113,177,.12)!important;
}
.yag-image-wrap{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:100%!important;
	height:220px!important;
	min-height:220px!important;
	padding:16px!important;
	background:#f7f9fc!important;
	overflow:hidden!important;
}
.yag-image{
	display:block!important;
	width:100%!important;
	height:100%!important;
	max-width:100%!important;
	margin:0!important;
	object-fit:contain!important;
}
.yag-no-image{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:100%!important;
	height:100%!important;
	color:#98a2b3!important;
}
.yag-content{
	display:flex!important;
	flex-direction:column!important;
	gap:10px!important;
	flex:1 1 auto!important;
	width:100%!important;
	padding:14px!important;
}
.yag-topline{
	display:flex!important;
	align-items:center!important;
	justify-content:space-between!important;
	gap:10px!important;
}
.yag-selector{
	display:inline-flex!important;
	align-items:center!important;
	gap:8px!important;
	margin:0!important;
	padding:0!important;
	cursor:pointer!important;
}
.yag-checkbox{
	position:absolute!important;
	opacity:0!important;
	pointer-events:none!important;
}
.yag-box{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:24px!important;
	height:24px!important;
	border:2px solid #cfd4dc!important;
	border-radius:6px!important;
	background:#fff!important;
	color:transparent!important;
	font-size:14px!important;
	line-height:1!important;
}
.yag-item.is-selected .yag-box{
	background:#2271b1!important;
	border-color:#2271b1!important;
	color:#fff!important;
}
.yag-selector-text{
	font-weight:700!important;
	color:#344054!important;
}
.yag-price{
	font-weight:800!important;
	color:#24324a!important;
}
.yag-name{
	margin:0!important;
	padding:0!important;
	font-size:17px!important;
	line-height:1.3!important;
	color:#24324a!important;
}
.yag-code{
	font-size:13px!important;
	color:#667085!important;
}
.yag-quantity-block{
	display:flex!important;
	align-items:center!important;
	justify-content:space-between!important;
	gap:12px!important;
	margin-top:auto!important;
	padding-top:8px!important;
}
.yag-quantity-label{
	font-size:13px!important;
	font-weight:700!important;
	color:#344054!important;
}
.yag-stepper{
	display:grid!important;
	grid-template-columns:40px 60px 40px!important;
	width:140px!important;
	height:40px!important;
	border:1px solid #d0d5dd!important;
	border-radius:10px!important;
	overflow:hidden!important;
	background:#fff!important;
}
.yag-step{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:40px!important;
	height:40px!important;
	min-width:40px!important;
	min-height:40px!important;
	margin:0!important;
	padding:0!important;
	border:0!important;
	border-radius:0!important;
	background:#f8fafc!important;
	color:#24324a!important;
	font-size:20px!important;
	line-height:1!important;
	cursor:pointer!important;
	box-shadow:none!important;
}
.yag-step:disabled{
	opacity:.45!important;
	cursor:not-allowed!important;
}
.yag-qty{
	display:block!important;
	width:60px!important;
	height:40px!important;
	min-width:60px!important;
	max-width:60px!important;
	margin:0!important;
	padding:0 4px!important;
	border:0!important;
	border-left:1px solid #eaecf0!important;
	border-right:1px solid #eaecf0!important;
	border-radius:0!important;
	background:#fff!important;
	color:#24324a!important;
	text-align:center!important;
	box-shadow:none!important;
	appearance:textfield!important;
	-moz-appearance:textfield!important;
}
.yag-qty:disabled{
	background:#f2f4f7!important;
	color:#98a2b3!important;
}
.yag-qty::-webkit-outer-spin-button,
.yag-qty::-webkit-inner-spin-button{
	-webkit-appearance:none!important;
	margin:0!important;
}
.yag-line-total{
	display:flex!important;
	align-items:center!important;
	justify-content:space-between!important;
	gap:10px!important;
	padding-top:10px!important;
	border-top:1px solid #eef1f4!important;
}
.yag-line-total span{
	font-size:13px!important;
	color:#667085!important;
}
.yag-line-total strong{
	font-size:15px!important;
	color:#24324a!important;
}
.yag-summary{
	display:grid!important;
	grid-template-columns:repeat(3,minmax(0,1fr))!important;
	gap:16px!important;
	width:100%!important;
	margin-top:20px!important;
	padding:16px!important;
	border-radius:12px!important;
	background:#f7f9fc!important;
}
.yag-summary>div{
	display:flex!important;
	flex-direction:column!important;
	gap:4px!important;
}
.yag-summary span{
	font-size:13px!important;
	color:#667085!important;
}
.yag-summary strong{
	font-size:18px!important;
	color:#24324a!important;
}
.yag-error{
	margin-top:12px!important;
	color:#b42318!important;
	font-weight:700!important;
}
body.single-product form.cart.yag-cart-form{
	display:block!important;
	width:100%!important;
	max-width:none!important;
	float:none!important;
	clear:both!important;
}
body.single-product form.cart.yag-cart-form>.quantity{
	display:none!important;
}
@media(max-width:900px){
	.yag-gallery{
		grid-template-columns:repeat(2,minmax(0,1fr))!important;
	}
}
@media(max-width:620px){
	.yag-root{
		padding:16px!important;
	}
	.yag-heading{
		flex-direction:column!important;
	}
	.yag-summary{
		grid-template-columns:1fr!important;
	}
}
@media(max-width:520px){
	.yag-gallery{
		grid-template-columns:1fr!important;
	}
}


/* Corrección 1.3.1: los botones de cantidad siempre deben ser utilizables. */
.yag-root .yag-step,
.yag-root .yag-step:disabled{
	opacity:1!important;
	pointer-events:auto!important;
	cursor:pointer!important;
}
.yag-root .yag-item:not(.is-selected) .yag-stepper{
	opacity:.78!important;
}
.yag-root .yag-item:not(.is-selected) .yag-step:hover{
	background:#edf3fa!important;
}


/* 1.3.2: contador independiente y protegido del tema */
.yag-root .yag-stepper{
	display:flex!important;
	flex-direction:row!important;
	align-items:center!important;
	justify-content:center!important;
	flex-wrap:nowrap!important;
	width:142px!important;
	height:42px!important;
	min-width:142px!important;
	max-width:142px!important;
	padding:0!important;
	margin:0!important;
	overflow:hidden!important;
}
.yag-root .yag-stepper .yag-step{
	position:static!important;
	display:flex!important;
	flex:0 0 40px!important;
	align-items:center!important;
	justify-content:center!important;
	width:40px!important;
	height:40px!important;
	min-width:40px!important;
	max-width:40px!important;
	padding:0!important;
	margin:0!important;
	border-radius:0!important;
	opacity:1!important;
	visibility:visible!important;
	pointer-events:auto!important;
}
.yag-root .yag-stepper .yag-qty{
	position:static!important;
	display:block!important;
	flex:0 0 60px!important;
	width:60px!important;
	height:40px!important;
	min-width:60px!important;
	max-width:60px!important;
	padding:0!important;
	margin:0!important;
	border-radius:0!important;
	opacity:1!important;
	visibility:visible!important;
}


/* 1.3.6: galería de cinco referencias por fila */
@media (min-width:1201px){
	.yag-gallery{
		grid-template-columns:repeat(5,minmax(0,1fr))!important;
	}
}
@media (min-width:901px) and (max-width:1200px){
	.yag-gallery{
		grid-template-columns:repeat(4,minmax(0,1fr))!important;
	}
}
@media (min-width:621px) and (max-width:900px){
	.yag-gallery{
		grid-template-columns:repeat(3,minmax(0,1fr))!important;
	}
}
@media (min-width:521px) and (max-width:620px){
	.yag-gallery{
		grid-template-columns:repeat(2,minmax(0,1fr))!important;
	}
}
@media (max-width:520px){
	.yag-gallery{
		grid-template-columns:1fr!important;
	}
}


/* 1.3.7: responsive real según el ancho disponible del contenedor */
.yag-root{
	container-type:inline-size;
	overflow:hidden!important;
}

.yag-gallery{
	grid-template-columns:repeat(5,minmax(0,1fr))!important;
}

.yag-item{
	min-width:0!important;
	overflow:hidden!important;
}

.yag-content{
	min-width:0!important;
}

.yag-topline{
	flex-wrap:wrap!important;
	align-items:center!important;
}

.yag-selector{
	min-width:0!important;
	flex:1 1 auto!important;
}

.yag-selector-text{
	white-space:nowrap!important;
}

.yag-price{
	flex:0 0 auto!important;
	white-space:nowrap!important;
}

.yag-name,
.yag-code{
	overflow-wrap:anywhere!important;
	word-break:break-word!important;
}

.yag-quantity-block{
	flex-wrap:nowrap!important;
	min-width:0!important;
}

.yag-stepper{
	grid-template-columns:34px 48px 34px!important;
	width:116px!important;
	min-width:116px!important;
	max-width:116px!important;
	height:36px!important;
}

.yag-step{
	width:34px!important;
	min-width:34px!important;
	max-width:34px!important;
	height:36px!important;
	min-height:36px!important;
	font-size:18px!important;
}

.yag-qty{
	width:48px!important;
	min-width:48px!important;
	max-width:48px!important;
	height:36px!important;
}

.yag-line-total{
	min-width:0!important;
}

.yag-line-total strong{
	white-space:nowrap!important;
}

@container (max-width: 1320px){
	.yag-gallery{
		grid-template-columns:repeat(4,minmax(0,1fr))!important;
	}
}

@container (max-width: 1040px){
	.yag-gallery{
		grid-template-columns:repeat(3,minmax(0,1fr))!important;
	}
}

@container (max-width: 760px){
	.yag-gallery{
		grid-template-columns:repeat(2,minmax(0,1fr))!important;
	}
}

@container (max-width: 520px){
	.yag-gallery{
		grid-template-columns:1fr!important;
	}
	.yag-heading{
		flex-direction:column!important;
	}
	.yag-clear{
		width:100%!important;
	}
	.yag-quantity-block{
		align-items:flex-start!important;
		flex-direction:column!important;
	}
	.yag-stepper{
		width:100%!important;
		max-width:none!important;
		grid-template-columns:40px 1fr 40px!important;
	}
	.yag-step{
		width:40px!important;
		min-width:40px!important;
		max-width:40px!important;
	}
	.yag-qty{
		width:100%!important;
		min-width:0!important;
		max-width:none!important;
	}
}

/* Respaldo para navegadores sin container queries */
@media (min-width:1500px){
	.yag-gallery{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}
@media (min-width:1200px) and (max-width:1499px){
	.yag-gallery{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (min-width:900px) and (max-width:1199px){
	.yag-gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (min-width:600px) and (max-width:899px){
	.yag-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:599px){
	.yag-gallery{grid-template-columns:1fr!important;}
}


/* 1.3.8: orden visual de la tarjeta */
.yag-content{
	gap:8px!important;
}

.yag-name{
	order:1!important;
	margin:0!important;
	font-size:17px!important;
	font-weight:800!important;
	line-height:1.3!important;
}

.yag-selection-row{
	order:2!important;
	display:flex!important;
	align-items:center!important;
	width:100%!important;
}

.yag-selector{
	display:inline-flex!important;
	align-items:center!important;
	gap:8px!important;
	width:auto!important;
}

.yag-price-row{
	order:3!important;
	display:flex!important;
	align-items:center!important;
	justify-content:space-between!important;
	gap:10px!important;
	width:100%!important;
	padding:8px 0!important;
	border-top:1px solid #eef1f4!important;
	border-bottom:1px solid #eef1f4!important;
}

.yag-price-label{
	font-size:13px!important;
	color:#667085!important;
}

.yag-price{
	font-size:16px!important;
	font-weight:800!important;
	white-space:nowrap!important;
}

.yag-code{
	order:4!important;
	display:block!important;
	font-size:13px!important;
	color:#667085!important;
}

.yag-quantity-block{
	order:5!important;
}

.yag-line-total{
	order:6!important;
}

.yag-topline{
	display:none!important;
}


/* 1.3.9: cantidad encima del contador y sin identificador público */
.yag-quantity-block{
	display:flex!important;
	flex-direction:column!important;
	align-items:flex-start!important;
	justify-content:flex-start!important;
	gap:7px!important;
	width:100%!important;
	padding-top:8px!important;
}

.yag-quantity-label{
	display:block!important;
	width:100%!important;
	margin:0!important;
	font-size:13px!important;
	font-weight:700!important;
	line-height:1.2!important;
}

.yag-stepper{
	align-self:flex-start!important;
}

.yag-code{
	display:none!important;
}


/* 1.4.0: imágenes más grandes y con menos espacio vacío */
.yag-image-wrap{
	width:100%!important;
	height:auto!important;
	min-height:0!important;
	aspect-ratio:4 / 3!important;
	padding:6px!important;
	background:#f7f9fc!important;
}

.yag-image{
	width:100%!important;
	height:100%!important;
	max-width:100%!important;
	max-height:100%!important;
	object-fit:contain!important;
	object-position:center!important;
	margin:0!important;
	padding:0!important;
}

@container (max-width:760px){
	.yag-image-wrap{
		aspect-ratio:16 / 10!important;
	}
}

@media (max-width:599px){
	.yag-image-wrap{
		aspect-ratio:16 / 10!important;
	}
}


/* 1.4.1: vista compacta sin nombre ni etiqueta Cantidad */
.yag-name,
.yag-quantity-label{
	display:none!important;
}

.yag-content{
	gap:10px!important;
}

.yag-selection-row{
	margin-top:2px!important;
}

.yag-quantity-block{
	padding-top:4px!important;
	gap:0!important;
}

.yag-stepper{
	margin-top:0!important;
}


/* 1.4.2: área de imagen mucho más compacta */
.yag-image-wrap{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:100%!important;
	height:118px!important;
	min-height:118px!important;
	max-height:118px!important;
	aspect-ratio:auto!important;
	padding:2px 4px!important;
	margin:0!important;
	background:#f7f9fc!important;
	overflow:hidden!important;
}

.yag-image{
	display:block!important;
	width:100%!important;
	height:100%!important;
	max-width:100%!important;
	max-height:114px!important;
	margin:0!important;
	padding:0!important;
	object-fit:contain!important;
	object-position:center!important;
}

@container (max-width:760px){
	.yag-image-wrap{
		height:110px!important;
		min-height:110px!important;
		max-height:110px!important;
	}
	.yag-image{
		max-height:106px!important;
	}
}

@media (max-width:599px){
	.yag-image-wrap{
		height:105px!important;
		min-height:105px!important;
		max-height:105px!important;
	}
	.yag-image{
		max-height:101px!important;
	}
}