/* ==========================================================================
   Contas de Ijexá — página de produto
   Carregado por último na cascata para vencer o product.css do plugin.
   ========================================================================== */

/* ---------- Quantidade ---------- */
.qty-block { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 4px; }

.qty-label {
	font-family: "Manrope", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #9c742b;
}

.qty-control {
	display: inline-flex;
	align-items: stretch;
	width: -moz-fit-content;
	width: fit-content;
	border: 1px solid #ddcba8;
	border-radius: 8px;
	overflow: hidden;
	background: #fffefa;
}

.qty-btn {
	width: 46px;
	min-height: 46px;
	padding: 0;
	border: 0;
	background: #faf6ee;
	color: #4b2d12;
	font-family: "Manrope", sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .18s ease;
}
.qty-btn:hover { background: #f2e7cf; }
.qty-btn:active { background: #e9dabb; }
.qty-btn:disabled { opacity: .4; cursor: not-allowed; }

.qty-control input[type="number"],
#cdi-qty {
	width: 62px;
	height: auto;
	padding: 0;
	border: 0;
	border-left: 1px solid #ddcba8;
	border-right: 1px solid #ddcba8;
	border-radius: 0;
	text-align: center;
	background: #fffefa;
	color: #4b2d12;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	font-weight: 600;
	-moz-appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Botões ---------- */
.buy-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 8px;
}

.details .btn,
.buy-box .btn,
.btn.btn-solid,
.btn.btn-outline,
.btn.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	width: auto;
	padding: 0 24px;
	border-radius: 8px;
	font-family: "Manrope", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.details .btn svg,
.buy-box .btn svg { width: 17px; height: 17px; flex: 0 0 17px; }

.btn.btn-solid,
.details .btn-solid {
	background: #4b2d12;
	border: 1px solid #4b2d12;
	color: #fffdf8;
}
.btn.btn-solid:hover,
.details .btn-solid:hover { background: #35200c; border-color: #35200c; }

.btn.btn-outline,
.details .btn-outline {
	background: #fffdf9;
	border: 1px solid #b9841b;
	color: #4b2d12;
}
.btn.btn-outline:hover,
.details .btn-outline:hover { background: #f9edcf; }

.btn.btn-ghost,
.details .btn-ghost {
	background: transparent;
	border: 1px solid #ddcba8;
	color: #6b5334;
}
.btn.btn-ghost:hover,
.details .btn-ghost:hover { background: #faf6ee; border-color: #b9841b; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Mensagem ---------- */
.buy-msg {
	display: block;
	margin-top: 12px;
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	color: #5f7a3d;
}
.buy-msg a { color: #4b2d12; font-weight: 700; }

/* ---------- Galeria / imagem ----------
 * Aqui só vencemos o tema pai. O grid em si (thumb strip à esquerda no
 * desktop, linha acima no mobile) é do site.css/cdi-store.css — por isso
 * não fixamos grid-template-columns nem grid-column/grid-row aqui: isso
 * jogava os dois filhos para a coluna 1 e espremia a imagem em 78px. */
.detail .product .gallery,
.detail .product .gallery.gallery--single {
	display: grid !important;
	gap: 14px !important;
	align-items: start !important;
	min-width: 0 !important;
}
.detail .product .gallery .gallery-thumbs { display: grid !important; gap: 10px !important; max-width: 100% !important; max-height: none !important; overflow: visible !important; }
.detail .product .gallery .gallery-thumb { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 9/16 !important; }
.detail .product .gallery .gallery-main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: clamp(500px, 56vw, 660px) !important; max-height: 660px !important; }
.detail .product .gallery .gallery-main #main-image { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; border-radius: 8px !important; }
.detail .product .gallery .gallery-main button { display:block !important; width:100% !important; height:100% !important; padding:0 !important; border:0 !important; background:transparent !important; cursor:zoom-in !important; }

/* ---------- Título / preço ---------- */
.details h1 {
	font-family: "Cormorant Garamond", serif;
	font-size: 46px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.6px;
	color: #4b2d12;
	margin: 0 0 14px;
}

.details .price {
	font-family: "Cormorant Garamond", serif;
	font-size: 30px;
	font-weight: 600;
	color: #4b2d12;
	margin: 12px 0 18px;
}
.details .price s { font-size: 18px; opacity: .5; margin-left: 8px; }

.details .lead {
	color: #5f5348;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	line-height: 1.75;
}
.details .lead p { margin: 0 0 12px; }

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
	.product { grid-template-columns: 1fr; gap: 26px; }
	.detail .product .gallery, .detail .product .gallery.gallery--single { grid-template-columns: 1fr !important; }
	.detail .product .gallery .gallery-thumbs { display:flex !important; flex-direction:row !important; width:100% !important; max-height:none !important; overflow-x:auto !important; overflow-y:hidden !important; gap:8px !important; }
	.detail .product .gallery .gallery-thumb { flex:0 0 68px !important; width:68px !important; min-width:68px !important; height:auto !important; min-height:0 !important; aspect-ratio:9/16 !important; }
	.detail .product .gallery .gallery-main { height:min(74vh,640px) !important; }
	.details h1 { font-size: 34px; }
}

@media (max-width: 560px) {
	.buy-box { width:100% !important; }
	.buy-actions { display:flex !important; flex-direction:column !important; width:100% !important; }
	.details .btn, .buy-box .btn { width:100% !important; max-width:none !important; }
	.qty-control { width: 100%; }
	.qty-control input[type="number"], #cdi-qty { flex: 1; width: auto; }
}