/* ===== Shopee Style Variações ===== */
form.cart.svs-form{
	--svs-main:#ee4d2d;
	--svs-main-soft:#fff5f1;
	--svs-border:rgba(0,0,0,.09);
	--svs-text:#222;
	--svs-muted:#757575;
	/*font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;*/
         font-family:'Poppins'
}

/* ---- Tabela de variações -> linhas ---- */
form.cart.svs-form table.variations,
form.cart.svs-form table.variations tbody{
	display:block;
	width:100%;
	background:transparent !important;
	border:0 !important;
	padding:0 !important;
	margin:0 0 4px !important;
}
form.cart.svs-form table.variations tr{
	display:flex;
	align-items:flex-start;
	gap:16px;
	margin:0 0 18px;
	background:transparent !important;
}
form.cart.svs-form table.variations th,
form.cart.svs-form table.variations td{
	display:block;
	border:0 !important;
	padding:0 !important;
	background:transparent !important;
}
form.cart.svs-form table.variations th.label{
	flex:0 0 90px;
	width:90px;
	padding-top:9px !important;
	text-align:left;
}
form.cart.svs-form table.variations th.label label{
	color:var(--svs-muted);
	font-size:14px;
	font-weight:400;
	text-transform:uppercase;
}
form.cart.svs-form table.variations td.value{ flex:1; }
form.cart.svs-form .svs-hide,
form.cart.svs-form a.reset_variations{ display:none !important; }

/* ---- Botões de variação (pills) ---- */
.svs-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.svs-pill{
	position:relative;
	min-height:38px;
	padding:6px 14px;
	background:#fff !important;
	border:1px solid var(--svs-border) !important;
	border-radius:2px !important;
	color:var(--svs-text) !important;
	font-size:14px;
	font-weight:400;
	line-height:1.3;
	text-transform:uppercase;
	text-align:center;
	cursor:pointer;
	box-shadow:none !important;
	transition:border-color .15s,color .15s;
}
.svs-pill:hover:not(:disabled){
	border-color:var(--svs-main) !important;
	color:var(--svs-main) !important;
}
.svs-pill.is-active{
	border-color:var(--svs-main) !important;
	color:var(--svs-main) !important;
	overflow:hidden;
}
/* selo de "selecionado" no canto */
.svs-pill.is-active::after{
	content:"";
	position:absolute;
	right:0; bottom:0;
	width:15px; height:15px;
	background:var(--svs-main)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.5 8.2 1.8 6.5 1 7.3l2.5 2.5L10 3.3 9.2 2.5z' fill='white' transform='translate(1 0)'/></svg>")
		no-repeat right bottom / 12px 12px;
	clip-path:polygon(100% 0,100% 100%,0 100%);
}
.svs-pill:disabled{
	opacity:.4;
	cursor:not-allowed;
	background:#fafafa !important;
}

/* ---- Linha de quantidade ---- */
.svs-qty-row{
	display:flex;
	align-items:center;
	gap:16px;
	margin:0 0 22px;
	flex-wrap:wrap;
}
.svs-qty-row .svs-label{
	flex:0 0 90px;
	width:90px;
	color:var(--svs-muted);
	font-size:14px;
}
form.cart.svs-form .svs-qty-row .quantity{
	display:inline-flex;
	align-items:stretch;
	margin:0 !important;
	border:1px solid var(--svs-border);
	border-radius:2px;
	background:#fff;
	width:auto;
}
form.cart.svs-form .svs-qty-row .quantity input.qty{
	width:50px;
	height:32px;
	padding:0 !important;
	margin:0 !important;
	border:0 !important;
	border-left:1px solid var(--svs-border) !important;
	border-right:1px solid var(--svs-border) !important;
	border-radius:0 !important;
	background:#fff !important;
	color:var(--svs-text);
	font-size:16px;
	text-align:center;
	box-shadow:none !important;
	-moz-appearance:textfield;
	appearance:textfield;
}
form.cart.svs-form .svs-qty-row .quantity input.qty::-webkit-outer-spin-button,
form.cart.svs-form .svs-qty-row .quantity input.qty::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}
.svs-qty-btn{
	width:32px;
	height:32px;
	padding:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:#fff !important;
	color:#555 !important;
	font-size:18px;
	line-height:1;
	cursor:pointer;
	box-shadow:none !important;
}
.svs-qty-btn:hover{ background:#fafafa !important; }
.svs-qty-btn:disabled{ color:#ccc !important; cursor:not-allowed; }
.svs-stock{ color:var(--svs-muted); font-size:14px; }
.svs-stock.is-out{ color:#d0011b; }

/* ---- Botões de ação ---- */
.svs-actions{
	display:flex;
	flex-wrap:wrap;
	gap:15px;
	margin:0 0 6px;
}
form.cart.svs-form .svs-actions .single_add_to_cart_button,
form.cart.svs-form .svs-actions .svs-buy{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-width:180px;
	height:48px;
	padding:0 20px !important;
	margin:0 !important;
	border-radius:2px !important;
	font-size:14px;
	font-weight:400;
	letter-spacing:0;
	text-transform:capitalize;
	line-height:1;
	cursor:pointer;
	box-shadow:0 1px 1px rgba(0,0,0,.09) !important;
	transition:opacity .15s,background .15s;
}
form.cart.svs-form .svs-actions .single_add_to_cart_button{
	background:var(--svs-main-soft) !important;
	border:1px solid var(--svs-main) !important;
	color:var(--svs-main) !important;
}
form.cart.svs-form .svs-actions .single_add_to_cart_button:hover{ background:#fdeee9 !important; }
form.cart.svs-form .svs-actions .single_add_to_cart_button svg{
	width:20px; height:20px; flex:none; fill:none; stroke:currentColor;
}
form.cart.svs-form .svs-actions .svs-buy{
	background:var(--svs-main) !important;
	border:1px solid var(--svs-main) !important;
	color:#fff !important;
	min-width:150px;
}
form.cart.svs-form .svs-actions .svs-buy:hover{ opacity:.92; }
form.cart.svs-form .svs-actions .single_add_to_cart_button.disabled,
form.cart.svs-form .svs-actions .single_add_to_cart_button.wc-variation-selection-needed,
form.cart.svs-form .svs-actions .svs-buy.is-disabled{
	opacity:.6;
	cursor:not-allowed;
}
form.cart.svs-form .svs-actions .single_add_to_cart_button.loading{ opacity:.6; }

/* Wrapper do Woo não deve quebrar o layout */
form.cart.svs-form .woocommerce-variation-add-to-cart,
form.cart.svs-form .woocommerce-variation-add-to-cart-disabled{
	display:block !important;
}
form.cart.svs-form .single_variation_wrap .woocommerce-variation{ margin-bottom:12px; }

@media (max-width:480px){
	form.cart.svs-form table.variations tr{ flex-direction:column; gap:8px; }
	form.cart.svs-form table.variations th.label{ flex:none; width:auto; padding-top:0 !important; }
	.svs-qty-row .svs-label{ flex:0 0 100%; width:100%; }
	.svs-actions{ gap:10px; }
	form.cart.svs-form .svs-actions .single_add_to_cart_button,
	form.cart.svs-form .svs-actions .svs-buy{ flex:1 1 140px; min-width:0; }
}
