/* ============================================================
   OUTIS — bloco de cotação na página de produto
   (cor, tamanho, quantidade e "Add to quote")
   Cores literais com os tokens como reserva: o bloco vive dentro
   do modelo de produto do ShopEngine, fora das secções v2.
   ============================================================ */

.outis-v2.opq {
	--opq-navy: var(--o-navy-900, #0B1622);
	--opq-lar: var(--o-laranja, #2F72B0);
	--opq-lar-bg: var(--o-laranja-bg, #EEF5FC);
	--opq-txt: var(--o-texto, #0F1B2A);
	--opq-txt2: var(--o-texto-2, #5B6B7B);
	--opq-linha: rgba(15,27,42,.16);
	display: grid; gap: 18px; margin: 8px 0 4px; max-width: 560px;
	background: transparent; overflow: visible;
}
.opq p { margin: 0; }

.opq-preco {
	font: 700 22px/1.2 var(--o-f, Inter, sans-serif); letter-spacing: -.015em; color: var(--opq-txt);
}

/* grupo de opções */
/* .opq à frente: ganha ao ".outis .prod-opcao" dos cartões antigos */
.opq .opq-grupo { display: grid; gap: 10px; margin: 0; flex-wrap: nowrap; }
.opq-rotulo { font: 600 14px/1.3 var(--o-f, Inter, sans-serif); color: var(--opq-txt); }
.opq-valor { font-weight: 500; color: var(--opq-txt2); }
.opq-grupo .opq-valor { text-transform: none; }
.opq-ops { display: flex; flex-wrap: wrap; gap: 8px; }

/* amostras de cor */
.opq .opq-cor {
	width: 40px; height: 40px; padding: 0; margin: 0; cursor: pointer;
	border-radius: 8px; border: 1px solid var(--opq-linha);
	background: var(--cor); box-shadow: inset 0 0 0 3px #fff;
	transition: box-shadow .15s, border-color .15s, transform .15s;
}
.opq .opq-cor.is-claro { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--opq-linha); }
.opq .opq-cor:hover { transform: translateY(-1px); border-color: var(--opq-txt2); }
/* background repetido: o ".outis .spec-op.is-sel" antigo pintava a amostra
   escolhida de navy por cima da cor */
.opq .opq-cor.is-sel, .opq .opq-cor:hover { background: var(--cor); }
.opq .opq-cor.is-sel { border-color: var(--opq-lar); box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--opq-lar); }

/* botões de texto (tamanho, embalagem…) */
.opq .opq-op {
	min-width: 48px; height: 42px; padding: 0 14px; margin: 0; cursor: pointer;
	border-radius: 6px; border: 1px solid var(--opq-linha); background: #fff; box-shadow: none;
	font: 600 14px/1 var(--o-f, Inter, sans-serif); color: var(--opq-txt); text-transform: none; letter-spacing: 0;
	transition: border-color .15s, background .15s, color .15s;
}
.opq .opq-op:hover { border-color: var(--opq-navy); background: #fff; color: var(--opq-txt); }
.opq .opq-op.is-sel { background: var(--opq-navy); border-color: var(--opq-navy); color: #fff; }
.opq .spec-op:focus-visible { outline: 3px solid var(--opq-lar); outline-offset: 2px; }

/* falta escolher */
.opq-grupo.is-falta .opq-rotulo { color: #B3261E; }
.opq-grupo.is-falta .opq-op, .opq-grupo.is-falta .opq-cor { border-color: #E3A8A3; }
.opq-aviso {
	padding: 10px 14px; border-radius: 6px; background: #FDECEA; color: #A93226;
	font: 500 14px/1.4 var(--o-f, Inter, sans-serif);
}
.opq-aviso[hidden] { display: none; }

/* quantidade + botão */
.opq-acao { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.opq-qtd {
	display: inline-flex; align-items: center; height: 52px;
	border: 1px solid var(--opq-linha); border-radius: 6px; background: #fff; overflow: hidden;
}
.opq .opq-passo {
	width: 44px; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; cursor: pointer;
	font: 500 20px/1 var(--o-f, Inter, sans-serif); color: var(--opq-txt2);
}
.opq .opq-passo:hover { background: #F3F5F8; color: var(--opq-txt); }
.opq .opq-n {
	width: 56px; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; text-align: center;
	font: 700 16px/1 var(--o-f, Inter, sans-serif); color: var(--opq-txt); -moz-appearance: textfield;
}
.opq .opq-n:focus { outline: none; background: var(--opq-lar-bg); }
.opq .opq-n::-webkit-outer-spin-button, .opq .opq-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.opq .opq-add {
	flex: 1; min-width: 200px; min-height: 52px; margin: 0;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 0 24px; border: 0; border-radius: 6px; cursor: pointer;
	background: var(--opq-lar); color: #fff; box-shadow: 0 10px 24px -12px rgba(47,114,176,.65);
	font: 600 16px/1 var(--o-f, Inter, sans-serif); text-transform: none; letter-spacing: 0;
	transition: background .2s, transform .2s;
}
.opq .opq-add:hover { background: var(--o-laranja-h, #245C93); color: #fff; transform: translateY(-1px); }
.opq .opq-add[disabled] { opacity: .7; cursor: wait; }
.opq .opq-add.is-ok { background: #17804F; box-shadow: none; }
.opq .opq-add svg { width: 16px; height: 16px; }

/* aviso só para quem edita o produto */
.opq-admin {
	padding: 10px 14px; border-radius: 6px; border: 1px dashed #C9A227; background: #FFF8E1; color: #6B5300;
	font: 500 13px/1.5 var(--o-f, Inter, sans-serif);
}
.opq-admin a { color: #6B5300; font-weight: 700; text-decoration: underline; }

.opq-nota { font: 400 13px/1.55 var(--o-f, Inter, sans-serif); color: var(--opq-txt2); }

/* cartões do catálogo / home: "Choose options" (ligação com o aspecto do botão) */
.outis-v2 a.prod-add.outis-escolher { text-decoration: none; }

@media (max-width: 480px) {
	.opq .opq-add { min-width: 0; flex-basis: 100%; }
	.opq-qtd { flex: 1; justify-content: space-between; }
}