/* ============================================================
   gocamis · Selector de unidades de la ficha
   ============================================================ */

/* Fuera la caja de borde grueso del skin antiguo. */
html body .icf-product-qty{
	display:flex !important;
	border:0 !important;
	background:transparent !important;
	height:auto !important;
	align-self:stretch;
	overflow:visible !important;
	padding:0 !important;
}

html body .gcq{
	display:inline-flex !important;
	align-items:center;
	gap:2px;
	padding:4px;
	border:1.5px solid var(--v2-line,#e4e4e7);
	border-radius:999px;
	background:var(--v2-bg,#fff);
	height:100%;
	min-height:52px;
	box-sizing:border-box;
}

html body .gcq .quantity{
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	background:transparent !important;
	display:flex !important;
	align-items:center !important;
	height:auto !important;
	width:auto !important;
	max-width:none !important;
	border-radius:0 !important;
	overflow:visible !important;
	box-shadow:none !important;
}

html body .gcq input.qty,
html body .gcq input[type="number"]{
	width:38px !important;
	min-width:0 !important;
	height:auto !important;
	padding:0 !important;
	margin:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	text-align:center !important;
	font:800 15px/1 var(--v2-font,'Bricolage Grotesque',system-ui,sans-serif) !important;
	font-variant-numeric:tabular-nums;
	color:var(--v2-ink,#0a0a0b) !important;
	-moz-appearance:textfield;
	appearance:textfield;
}
html body .gcq input.qty:focus{outline:none !important;box-shadow:none !important}
html body .gcq input.qty::-webkit-outer-spin-button,
html body .gcq input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

html body .gcq .gcq__btn{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:40px !important;
	min-width:40px !important;
	height:40px !important;
	min-height:0 !important;
	padding:0 !important;
	margin:0 !important;
	border:0 !important;
	border-radius:50% !important;
	background:var(--v2-card,#f4f4f5) !important;
	color:var(--v2-ink,#0a0a0b) !important;
	box-shadow:none !important;
	cursor:pointer !important;
	transition:background .15s ease,transform .15s ease,opacity .15s ease !important;
}
html body .gcq .gcq__btn svg{width:16px;height:16px}
html body .gcq .gcq__btn:hover:not([disabled]){background:var(--v2-ink,#0a0a0b) !important;color:#fff !important}
html body .gcq .gcq__btn:active:not([disabled]){transform:scale(.94)}
html body .gcq .gcq__btn[disabled]{opacity:.3 !important;cursor:default !important}
html body .gcq .gcq__btn:focus-visible{outline:2px solid var(--v2-ink,#0a0a0b) !important;outline-offset:2px !important}

/* Productos de una sola unidad: se queda el número, sin botones. */
html body .gcq.gcq--fijo .gcq__btn{display:none !important}
html body .gcq.gcq--fijo{padding:0 16px}

/* La fila del botón de añadir: selector a la izquierda y botón ocupando el
   resto. Lo demás (garantías, pago rápido) va debajo a todo el ancho: si no,
   esos bloques ensanchan la columna del selector y dejan un hueco. */
html body .icf-product-cta-row{
	align-items:stretch;
	grid-template-columns:auto minmax(0,1fr) !important;
	max-width:100%;
}
/* Sin esto, lo que va debajo a todo el ancho ensancha las columnas de arriba
   y la fila se sale de la pantalla en el móvil. */
html body .icf-product-cta-row > *{min-width:0}
html body .icf-product-cta-row > .icf-product-qty{grid-column:1;grid-row:1}
html body .icf-product-cta-row > .icf-product-cta{grid-column:2;grid-row:1;min-height:52px}
html body .icf-product-cta-row > *:not(.icf-product-qty):not(.icf-product-cta){grid-column:1 / -1}

@media (max-width:420px){
	html body .gcq{padding:3px;min-height:48px}
	html body .gcq .gcq__btn{width:36px !important;min-width:36px !important;height:36px !important}
	html body .gcq input.qty{width:32px !important}
}