/* "Comprar Cipó" — preço (+ Pix + pill de desconto) / selects de variação /
   botão. O preço e o Pix reaproveitam as classes de products-card.css
   (.loja-cipo-product-price/.loja-cipo-product-pix) — mesma aparência do
   resto do site. O botão (.loja-cipo-buy-cta) é um componente PRÓPRIO, de
   propósito: aqui não tem o efeito de hover trocando texto que o botão da
   Grade/Carrossel tem — só ícone (sacola → carregando → check). */

.loja-cipo-product-buy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.loja-cipo-product-buy .loja-cipo-product-actions {
	margin-top: 0;
}

.loja-cipo-buy-discount-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 999px;
	background: var( --lc-buy-pill-bg, #c1440e );
	color: var( --lc-buy-pill-color, #ffffff );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.loja-cipo-buy-out-of-stock-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 4px;
	background: #fdecea;
	border: 1px solid #f3c1bd;
	color: #b3261e;
	font-size: 13px;
	font-weight: 700;
}

.loja-cipo-buy-out-of-stock-icon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* Cor do preço "normal" (sem promoção, ou o valor "de" riscado quando tem
   promoção) e do preço "promocional" (o valor "por", em destaque) — os
   próprios <del>/<ins> que o get_price_html() da WooCommerce já gera. */
.loja-cipo-product-buy .loja-cipo-buy-price-html,
.loja-cipo-product-buy .loja-cipo-buy-price-html del {
	color: var( --lc-buy-price-color, inherit );
}

.loja-cipo-product-buy .loja-cipo-buy-price-html ins {
	color: var( --lc-buy-sale-price-color, inherit );
}

.loja-cipo-product-buy .loja-cipo-product-pix {
	color: var( --lc-buy-pix-color, inherit );
}

/* Botão "Comprar Agora" — simples de propósito, sem transição/hover. Ícone
   de sacola por padrão; troca pra spinner (is-loading) e depois pra check
   (is-added) ao lado do MESMO texto, que nunca muda de conteúdo. */
.loja-cipo-buy-cta,
.loja-cipo-buy-cta:hover,
.loja-cipo-buy-cta:focus,
.loja-cipo-buy-cta:active,
.loja-cipo-buy-cta:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: var( --lc-buy-btn-padding-top, 12px ) var( --lc-buy-btn-padding-right, 16px ) var( --lc-buy-btn-padding-bottom, 12px ) var( --lc-buy-btn-padding-left, 16px );
	background: var( --lc-buy-btn-bg, #8bc34a ) !important;
	color: var( --lc-buy-btn-color, #ffffff ) !important;
	border-radius: var( --lc-buy-btn-radius, 0px );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: var( --lc-buy-btn-font-size, 13px );
	text-decoration: none !important;
	border: none;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
}

.loja-cipo-buy-cta-label {
	line-height: 1.4;
}

.loja-cipo-buy-cta-icon {
	display: none;
	flex: none;
	line-height: 0;
}

.loja-cipo-buy-cta-icon-bag {
	display: inline-flex;
}

.loja-cipo-buy-cta.is-loading .loja-cipo-buy-cta-icon-bag,
.loja-cipo-buy-cta.is-added .loja-cipo-buy-cta-icon-bag {
	display: none;
}

.loja-cipo-buy-cta-icon-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: loja-cipo-buy-spin 0.6s linear infinite;
}

.loja-cipo-buy-cta.is-loading .loja-cipo-buy-cta-icon-spinner {
	display: inline-block;
}

.loja-cipo-buy-cta.is-added .loja-cipo-buy-cta-icon-check {
	display: inline-flex;
	animation: loja-cipo-buy-pop 0.25s ease;
}

@keyframes loja-cipo-buy-spin {
	to { transform: rotate( 360deg ); }
}

@keyframes loja-cipo-buy-pop {
	from { transform: scale( 0.4 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.loja-cipo-buy-variations {
	display: flex;
	flex-direction: column;
	gap: var( --lc-buy-field-gap, 14px );
}

.loja-cipo-buy-variation-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.loja-cipo-buy-variation-field label {
	color: var( --lc-buy-label-color, #3c3633 );
	font-size: var( --lc-buy-label-size, 13px );
	font-weight: 600;
}

.loja-cipo-buy-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: block;
	width: 100%;
	height: var( --lc-buy-select-height, 46px );
	padding: 0 40px 0 14px;
	border: 1px solid var( --lc-buy-select-border-color, #e5e0db );
	border-radius: var( --lc-buy-select-radius, 4px );
	background-color: var( --lc-buy-select-bg, #ffffff );
	color: var( --lc-buy-select-color, #3c3633 );
	font-size: var( --lc-buy-select-font-size, 14px );
	cursor: pointer;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f857f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
	transition: border-color 0.2s ease;
}

.loja-cipo-buy-select:focus {
	outline: none;
	border-color: var( --lc-buy-select-focus-color, #8bc34a );
}

.loja-cipo-buy-select option[value=""] {
	color: #8f857f;
}

.loja-cipo-buy-variations .reset_variations {
	align-self: flex-start;
	font-size: 12px;
	color: #8f857f;
	text-decoration: underline;
	margin-top: 4px;
}

/* Estado "sem seleção completa ainda" — some com a classe ajax_add_to_cart
   (ver product-buy.js), então o clique não faz nada de verdade; o visual
   avisa isso também. */
.loja-cipo-buy-cta.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.loja-cipo-buy-cta.is-shake {
	animation: loja-cipo-buy-shake 0.4s ease;
}

@keyframes loja-cipo-buy-shake {
	10%, 90% { transform: translateX( -1px ); }
	20%, 80% { transform: translateX( 2px ); }
	30%, 50%, 70% { transform: translateX( -4px ); }
	40%, 60% { transform: translateX( 4px ); }
}

/* Formulário do simulador de frete (plugin de terceiros, HTML fora do
   nosso controle — só estilizamos por cima). Fica logo abaixo do botão
   "Comprar Agora" na página de Produto Único, então aproveitamos este
   mesmo arquivo (já carregado ali) em vez de criar um enqueue novo. */
#wc-shipping-sim-form {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	padding: 1em 0px;
}

#wc-shipping-sim-form-title {
	margin: 0 0 10px;
	font-size: 16px;
	color: #3c3633;
}

#wc-shipping-sim-form-fields {
	display: flex;
	align-items: stretch;
	width: 100% !important;
	max-width: 100% !important;
	gap: 0;
}

#wc-shipping-sim-form-fields .input-postcode {
	flex: 1 1 auto !important;
	min-width: 0;
	width: auto !important;
	max-width: none !important;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid #e5ded6;
	border-right: none;
	border-radius: 4px 0 0 4px;
	background: #f6efe8;
	color: #3c3633;
	font-size: 15px;
}

#wc-shipping-sim-form-fields .input-postcode::placeholder {
	color: #b3a89c;
}

#wc-shipping-sim-form-fields .input-postcode:focus {
	outline: none;
	border-color: #8bc34a;
}

#wc-shipping-sim-form-fields .button.submit {
	flex: none;
	height: 50px;
	margin: 0;
	padding: 0 28px;
	border: none;
	border-radius: 0 4px 4px 0;
	background: #8bc34a;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	box-shadow: none;
}

#wc-shipping-sim-form-fields .button.submit:hover {
	background: #7cad42;
}

#wc-shipping-sim-br-cep-finder {
	margin-top: 8px;
}

#wc-shipping-sim-br-cep-finder a {
	font-size: 13px;
	color: #3c3633;
	text-decoration: underline;
}