/* Sweet Product Grouper - Frontend swatches */

.spg-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px auto 12px;
	align-items: center;
	justify-content: center;
}

.spg-swatch {
	position: relative;
	cursor: pointer;
	border: 2px solid #e0e0e0;
	background: #fff;
	padding: 0;
	margin: 0;
	transition: all .15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
	box-sizing: border-box;
}

.spg-swatch:hover {
	border-color: #888;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.spg-swatch.selected {
	border-color: #ff3d8a;
	box-shadow: 0 0 0 2px rgba(255, 61, 138, 0.2);
}

/* Image swatch */
.spg-swatch-image {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
}
.spg-swatch-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

/* Color swatch */
.spg-swatch-color {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

/* Tooltip-style label (shown on hover) */
.spg-swatch-label {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,0.85);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
	z-index: 100;
}
.spg-swatch-label::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: rgba(0,0,0,0.85);
}
.spg-swatch:hover .spg-swatch-label {
	opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {
	.spg-swatch-image { width: 50px; height: 50px; }
	.spg-swatch-color { width: 28px; height: 28px; }
}

/* ===========================
   Mobile reorder: swatches above all other product info
   =========================== */
.spg-mobile-swatches-wrap {
	margin: 0 0 18px 0;
	padding: 14px 14px 12px;
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.spg-mobile-swatch-section {
	margin-bottom: 6px;
}
.spg-mobile-swatch-section:last-child { margin-bottom: 0; }
.spg-mobile-swatch-label {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
	text-align: center;
	letter-spacing: 0.3px;
}
.spg-mobile-swatch-section .spg-swatches {
	margin: 0 auto;
}

/* When body is in mobile-reordered state with SPG swatches, hide the original variations table row
   (the select is still in DOM for form submission, just visually hidden).
   NOTE: only applies when type=spg-swatches — in global mode we MOVED the table, so we must NOT hide it. */
body.spg-mobile-reordered[data-spg-reorder-type="spg-swatches"] .variations,
body.spg-mobile-reordered[data-spg-reorder-type="spg-swatches"] .variations_form .variations {
	display: none !important;
}
/* And don't hide the table when it's inside the moved wrap */
.spg-mobile-swatches-wrap .variations { display: table !important; }

/* But keep the "Clear" / reset link visible */
body.spg-mobile-reordered .reset_variations {
	display: inline-block !important;
}

/* When the moved content is the full variations form, give it nicer styling */
.spg-mobile-swatches-wrap[data-type="wc-variations-form"] {
	padding: 12px;
}
.spg-mobile-swatches-wrap[data-type="wc-variations-form"] form.variations_form {
	margin: 0;
}
.spg-mobile-swatches-wrap[data-type="wc-variations-form"] table.variations {
	width: 100%;
	margin: 0 0 10px 0;
}

/* Stick the swatch row to the top of view so user sees image+swatches together on tap */
@media (max-width: 600px) {
	.spg-mobile-swatches-wrap {
		padding: 10px 10px 8px;
		margin-bottom: 14px;
		border-radius: 8px;
	}
	.spg-mobile-swatch-label {
		font-size: 12px;
		margin-bottom: 6px;
	}
}

/* ============================================================
   ARCHIVE SWATCHES (v1.10.0)
   Shows term swatches under each variable product card on shop/categories.
   ============================================================ */
.spg-archive-swatches {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0 10px;
	padding: 0 8px;
}
.spg-archive-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
	align-items: center;
}
.spg-archive-swatch {
	display: inline-flex;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #eef0f4;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
	cursor: pointer;
	text-decoration: none !important;
}
.spg-archive-swatch:hover {
	transform: scale(1.12);
	border-color: #ff3d8a;
	box-shadow: 0 2px 8px rgba(255, 61, 138, 0.35);
	z-index: 2;
}
.spg-archive-swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
.spg-archive-swatch-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: 14px;
	background: #f4f5f7;
	color: #1a1f2c;
	font-size: 11px;
	font-weight: 700;
	border: 2px solid #eef0f4;
	text-decoration: none !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	cursor: pointer;
}
.spg-archive-swatch-more:hover {
	background: #ff3d8a;
	color: #ffffff;
	border-color: #ff3d8a;
}

/* Mobile tweaks */
@media (max-width: 600px) {
	.spg-archive-swatch,
	.spg-archive-swatch-more {
		width: 24px;
		height: 24px;
	}
	.spg-archive-swatch-more {
		min-width: 24px;
		font-size: 10px;
	}
}

/* v1.10.2 — Stilizează poziționarea SPG-swatch-urilor între imagine și titlu
   NOTĂ: NU mai ascundem .ux-swatches native — lăsăm tema/userul să decidă.
   Plugin-ul randează un container separat (.spg-archive-swatches) care nu se conflictă.
   Dacă vezi DUBLĂ afișare (atât .ux-swatches cât și .spg-archive-swatches), adaugă în
   "Customize → Additional CSS" regula:
     .products .product .ux-swatches { display: none !important; }
*/
.spg-archive-swatches {
	margin: 8px auto !important;
	padding: 0 8px;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* ============================================================
   EXTRA GALLERY (v1.11.0) — afișează imagini suplimentare per produs
   ============================================================ */
.spg-extra-gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 28px auto 24px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #eef0f4;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	max-width: 100%;
}
.spg-extra-gallery-item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 8px;
	background: #fafafa;
}
.spg-extra-gallery-item img {
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	display: block !important;
	margin: 0 auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	object-fit: contain !important;
	border-radius: 6px;
}

@media (max-width: 768px) {
	.spg-extra-gallery {
		padding: 10px;
		margin: 18px auto;
		gap: 10px;
	}
}

/* ============================================================
   v1.11.1 — Ascunde swatch-urile native Flatsome DOAR pe arhive
   (shop, categorii, tag, căutare) ca să nu se dubleze cu SPG.
   Pe single-product le lăsăm intacte (sunt formularul de variație).
   ============================================================ */
body.woocommerce.archive .products .product .ux-swatches,
body.woocommerce.archive .products .product .variations,
body.tax-product_cat .products .product .ux-swatches,
body.tax-product_cat .products .product .variations,
body.post-type-archive-product .products .product .ux-swatches,
body.post-type-archive-product .products .product .variations,
body.search-results.woocommerce .products .product .ux-swatches,
body.search-results.woocommerce .products .product .variations,
body.tax-product_tag .products .product .ux-swatches,
body.tax-product_tag .products .product .variations {
    display: none !important;
}

/* ============================================================
   v1.12.0 — STOC EPUIZAT styling pe shop/categorii
   Aplicat de plugin pe produsele variabile marcate out_of_stock.
   ============================================================ */

body:not(.single-product) .products .product.outofstock,
body:not(.single-product) .product-small.outofstock,
body:not(.single-product) ul.products li.product.outofstock {
	opacity: 0.92 !important;
}

/* Imaginea — grayscale + ușor întunecată */
body:not(.single-product) .product.outofstock .box-image img,
body:not(.single-product) .product-small.outofstock .box-image img {
	filter: grayscale(75%) brightness(0.92) !important;
	transition: filter 0.3s ease;
}

body:not(.single-product) .product.outofstock:hover .box-image img,
body:not(.single-product) .product-small.outofstock:hover .box-image img {
	filter: grayscale(45%) brightness(0.95) !important;
}

/* Box-image relative pentru badge */
body:not(.single-product) .product.outofstock .box-image,
body:not(.single-product) .product-small.outofstock .box-image {
	position: relative !important;
}

/* Linie diagonală peste imagine */
body:not(.single-product) .product.outofstock .box-image::after,
body:not(.single-product) .product-small.outofstock .box-image::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 8% !important;
	right: 8% !important;
	height: 3px !important;
	background: rgba(201, 48, 48, 0.85) !important;
	transform: rotate(-12deg) !important;
	z-index: 5 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
	pointer-events: none !important;
}

/* Badge "STOC EPUIZAT" peste imagine */
body:not(.single-product) .product.outofstock .box-image::before,
body:not(.single-product) .product-small.outofstock .box-image::before {
	content: "STOC EPUIZAT" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) rotate(-8deg) !important;
	background: rgba(201, 48, 48, 0.95) !important;
	color: #ffffff !important;
	padding: 6px 18px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 1px !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
	z-index: 6 !important;
	pointer-events: none !important;
	white-space: nowrap !important;
	text-transform: uppercase !important;
}

/* Titlul tăiat */
body:not(.single-product) .product.outofstock .product-title,
body:not(.single-product) .product.outofstock .woocommerce-loop-product__title,
body:not(.single-product) .product-small.outofstock .product-title {
	color: #888 !important;
	text-decoration: line-through !important;
	text-decoration-color: rgba(201, 48, 48, 0.5) !important;
	text-decoration-thickness: 1.5px !important;
}

/* Prețul tăiat */
body:not(.single-product) .product.outofstock .price,
body:not(.single-product) .product.outofstock .price ins,
body:not(.single-product) .product.outofstock .price > .amount,
body:not(.single-product) .product.outofstock .price del,
body:not(.single-product) .product-small.outofstock .price,
body:not(.single-product) .product-small.outofstock .price ins {
	color: #888 !important;
	text-decoration: line-through !important;
	opacity: 0.6 !important;
}

/* Badge-ul de discount (-X%) — ascuns pe produsele epuizate */
body:not(.single-product) .product.outofstock .onsale,
body:not(.single-product) .product.outofstock .badge-container,
body:not(.single-product) .product-small.outofstock .onsale,
body:not(.single-product) .product-small.outofstock .badge-container {
	display: none !important;
}

/* Butonul "Adaugă în coș" — gri, dezactivat */
body:not(.single-product) .product.outofstock .add_to_cart_button,
body:not(.single-product) .product.outofstock .button.product_type_variable,
body:not(.single-product) .product-small.outofstock .add_to_cart_button {
	background: #aaa !important;
	color: #fff !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Swatch-urile pe produs epuizat — desaturate */
body:not(.single-product) .product.outofstock .spg-archive-swatches,
body:not(.single-product) .product-small.outofstock .spg-archive-swatches {
	filter: grayscale(60%) !important;
	opacity: 0.7 !important;
}

@media (max-width: 600px) {
	body:not(.single-product) .product.outofstock .box-image::before,
	body:not(.single-product) .product-small.outofstock .box-image::before {
		font-size: 11px !important;
		padding: 4px 12px !important;
	}
}

/* ============================================================
   v1.12.1 — SWATCH variație OUT OF STOCK pe pagina single product
   Marchează cu linie diagonală + opacitate + badge clientul vede
   ============================================================ */

.spg-swatch.spg-swatch-oos {
	position: relative !important;
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	filter: grayscale(60%) !important;
}

.spg-swatch.spg-swatch-oos:hover {
	opacity: 0.7 !important;
	transform: none !important; /* dezactivează hover scale */
}

/* Linie diagonală peste swatch */
.spg-swatch.spg-swatch-oos::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 4% !important;
	right: 4% !important;
	height: 2px !important;
	background: rgba(201, 48, 48, 0.9) !important;
	transform: rotate(-25deg) !important;
	z-index: 10 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
	pointer-events: none !important;
}

/* Badge mic "STOC EPUIZAT" sub swatch */
.spg-swatch-oos-badge {
	display: inline-block !important;
	position: absolute !important;
	bottom: -18px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: #c93030 !important;
	color: #fff !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	padding: 2px 6px !important;
	border-radius: 3px !important;
	white-space: nowrap !important;
	letter-spacing: 0.5px !important;
	z-index: 11 !important;
	pointer-events: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* Asigură că containerul de swatch-uri are spațiu pentru badge sub */
.spg-swatches {
	margin-bottom: 24px !important;
}

/* Swatch selectat out-of-stock — păstrează totuși border-ul de selecție */
.spg-swatch.spg-swatch-oos.selected,
.spg-swatch.spg-swatch-oos[aria-checked="true"] {
	opacity: 0.75 !important;
}

/* Pe label-uri text (dacă există) */
.spg-swatch.spg-swatch-oos .spg-swatch-label {
	color: #888 !important;
	text-decoration: line-through !important;
}