.ewsp-product {
	display: flex;
	flex-direction: column;
}

.ewsp-title {
	margin: 0;
}

.ewsp-rating .star-rating {
	font-size: 15px;
}

.ewsp-price {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ewsp-price del {
	font-weight: 400;
}

.ewsp-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 3px;
}

.ewsp-short-desc p:last-child {
	margin-bottom: 0;
}

.ewsp-meta > div {
	margin-bottom: 4px;
}

.ewsp-meta .stock {
	font-weight: 600;
}

/* ---------- Cart row: quantity + variations + button ---------- */

.ewsp-cart-row {
	margin-top: 8px;
	width: 100%;
	clear: both;
}

.ewsp-cart-row .variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.ewsp-cart-row .variations tr {
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
}

.ewsp-cart-row .variations td.label {
	padding: 0 0 6px;
	font-weight: 600;
}

.ewsp-cart-row .variations td.value {
	padding: 0;
}

.ewsp-cart-row .variations select {
	width: 100%;
	max-width: 260px;
	padding: 10px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	background: #fff;
}

.ewsp-cart-row .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
}

.ewsp-cart-row table.variations,
.ewsp-cart-row table.variations tbody,
.ewsp-cart-row table.variations tr,
.ewsp-cart-row table.variations td {
	display: block;
	width: 100%;
}

/* ---------- Circle color swatches (built by frontend.js) ---------- */

.ewsp-swatch-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ewsp-swatch {
	position: relative;
	border-radius: 50%;
	border: 2px solid #e0e0e0;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0;
	background-clip: content-box;
	transition: border-color 0.2s ease, transform 0.15s ease;
}

.ewsp-swatch:hover {
	transform: scale(1.08);
}

.ewsp-swatch.is-selected {
	border-color: #9c8158;
}

.ewsp-swatch.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Hide the native <select> once we've built swatches from it, but
   keep it in the DOM (off-screen) so WooCommerce's own variation
   JS still reads/writes its value normally. */
.ewsp-color-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Quantity: classic stepper (–, input, +) ---------- */

.quantity {
	display: inline-flex;
	margin-right: 0;
}

.ewsp-qty-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 52px;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.ewsp-qty-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	border: none;
	background: #f7f6f4;
	color: #4a4a4a;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.ewsp-qty-stepper__btn:hover {
	background: #ececea;
	color: #1a1a1a;
}

.ewsp-qty-stepper__btn:active {
	background: #e2e0dc;
}

.ewsp-qty-stepper__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #f7f6f4;
}

.quantity .qty {
	width: 56px;
	height: 52px;
	padding: 0 6px;
	border: none;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	border-radius: 0;
	text-align: center;
	font-size: 15px;
	-moz-appearance: textfield;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Order Now button: permanently removed ---------- */
/* Safety net in case a cached page still has old markup from before
   this feature was removed from the plugin. */
.ewsp-order-now-button {
	display: none !important;
}



.ewsp-hide-qty .quantity,
.ewsp-hide-qty .ewsp-qty-stepper {
	display: none !important;
}

.ewsp-hide-button .single_add_to_cart_button {
	display: none !important;
}

.ewsp-hide-variations table.variations,
.ewsp-hide-variations .reset_variations,
.ewsp-hide-variations .woocommerce-variation,
.ewsp-hide-variations .single_variation_wrap {
	display: none !important;
}

/* "Color/Size Options" also hides ANY other content a different
   plugin (frame colour / design selectors, etc.) has injected as a
   direct child of the same <form class="cart"> — since that kind of
   content is usually custom HTML rather than a real WooCommerce
   table.variations, the rule above alone can't reach it. This one
   catches it regardless of what markup/classes that other plugin
   uses, as long as it isn't one of THIS plugin's own recognised
   pieces (quantity, add to cart, favourites, the grouped action row). */
.ewsp-hide-variations form.cart > *:not(.ewsp-action-row):not(.quantity):not(.single_add_to_cart_button):not(.ewsp-wishlist-button):not(input) {
	display: none !important;
}

/* ---------- Button ---------- */

.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: none;
	letter-spacing: 0.2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.single_add_to_cart_button:hover {
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.single_add_to_cart_button:active {
	transform: translateY(1px);
}

/* ---------- Light Golden Animated style (default look) ---------- */
/* !important is used here on purpose: Elementor's own Background
   Color control in the Style tab generates an inline override with
   the same selector, which would otherwise cancel the animated
   gradient. If you want a plain flat color instead, delete this
   whole block rather than fighting it via the color picker. */

@keyframes ewspGoldShimmer {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

.single_add_to_cart_button {
	background: linear-gradient( 100deg, #f7ecd2 0%, #e7c873 25%, #d8ab48 50%, #e7c873 75%, #f7ecd2 100% ) !important;
	background-size: 250% 100% !important;
	animation: ewspGoldShimmer 3.5s linear infinite !important;
	color: #4a3311 !important;
	border: 1px solid #cba140 !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.single_add_to_cart_button:hover {
	animation-duration: 1.6s !important;
	box-shadow: 0 3px 10px rgba(199, 161, 64, 0.35);
}

.ewsp-order-now-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: #ffffff;
	letter-spacing: 0.2px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.1s ease;
}

.ewsp-order-now-button:active {
	transform: translateY(1px);
}

/* IMPORTANT: form.cart itself is NOT made a flex container.
   Third-party plugins (like a frame-colour/design selector) often
   inject their own markup directly inside the same <form class="cart">
   via WooCommerce hooks. If form.cart were display:flex, that
   third-party content would become a flex sibling of Quantity/Add to
   Cart and get pulled into the same row/line — which is exactly what
   was pushing Add to Cart up beside the colour/design selector
   instead of below it. Instead, frontend.js wraps ONLY the elements
   this plugin controls (Quantity, Add to Cart, Favourites) into a
   dedicated .ewsp-action-row div, and only THAT gets flex styling
   below. Anything else in the form (from other plugins) is left
   completely alone in normal block flow. */

.ewsp-action-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #ececec;
	box-sizing: border-box;
}

/* Kept for genuine WooCommerce variable products, where
   .single_variation_wrap / .woocommerce-variation-add-to-cart are
   WooCommerce's own markup (safe to treat as a flex row directly —
   no third-party content ends up inside these). */
.single_variation_wrap,
.woocommerce-variation-add-to-cart {
	width: 100%;
}

.single_variation_wrap {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #ececec;
}

.woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.ewsp-action-row .quantity,
.woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
	margin-right: 0;
}

/* Comfortable, non-stretching size by default — matches a classic
   layout where Add to Cart sits as a normal-sized button next to
   Quantity rather than stretching to fill the whole row. Turn on
   the button's own "Full Width" style toggle in Elementor if you
   want it to stretch instead. */
.ewsp-action-row .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 0 0 auto !important;
	min-width: 200px !important;
	width: auto !important;
}

.ewsp-action-row .ewsp-order-now-button,
.woocommerce-variation-add-to-cart .ewsp-order-now-button {
	flex: 0 0 auto !important;
	min-width: 200px !important;
	width: auto !important;
	margin: 0;
}

.woocommerce-variation-availability .stock {
	font-size: 13px;
	margin: 6px 0;
}

.single_variation_wrap .woocommerce-variation-price {
	margin-bottom: 10px;
}

.ewsp-empty {
	padding: 20px;
	text-align: center;
	opacity: 0.7;
}

/* ---------- Favourites (wishlist) button ---------- */

.ewsp-wishlist-button {
	flex: 0 0 auto !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #d5d5d5;
	color: #8a8a8a;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ewsp-wishlist-button svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	transition: fill 0.2s ease, stroke 0.2s ease;
}

.ewsp-wishlist-button:hover {
	transform: scale(1.06);
}

.ewsp-wishlist-button.is-active {
	color: #e74c3c;
	border-color: #e74c3c;
}

.ewsp-wishlist-button.is-active svg {
	fill: currentColor;
	stroke: currentColor;
}

.ewsp-wishlist-button.ewsp-pulse {
	animation: ewspWishlistPulse 0.28s ease;
}

@keyframes ewspWishlistPulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* ---------- Responsive: stack the action bar cleanly on mobile ---------- */

@media (max-width: 480px) {
	.woocommerce-variation-add-to-cart,
	.ewsp-action-row {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-variation-add-to-cart .quantity,
	.ewsp-action-row .quantity {
		width: 100%;
	}

	.ewsp-qty-stepper {
		width: 100%;
	}

	.quantity .qty {
		width: 100% !important;
	}

	.woocommerce-variation-add-to-cart .single_add_to_cart_button,
	.woocommerce-variation-add-to-cart .ewsp-order-now-button,
	.ewsp-action-row .single_add_to_cart_button,
	.ewsp-action-row .ewsp-order-now-button {
		width: 100% !important;
		flex: 1 1 auto !important;
	}

	.ewsp-wishlist-button {
		align-self: center;
		margin-top: 4px;
	}
}

/* ---------- Related products (deliberately distinct look from the
   main product area above — its own card style, its own accent
   color, so it reads as a clearly separate "you might also like"
   section rather than a continuation of the product details) ---------- */

.ewsp-related {
	padding-top: 28px;
	border-top: 2px solid #f0eee9;
}

.ewsp-related__heading {
	margin: 0 0 20px;
	font-size: 20px;
	letter-spacing: 0.3px;
}

.ewsp-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.ewsp-related__item {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ewsp-related__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	border-color: #e2ddd2;
}

.ewsp-related__image-wrap {
	position: relative;
	display: block;
	background: #f7f6f4;
}

.ewsp-related__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	background: #c0392b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 3px 9px;
	border-radius: 20px;
}

.ewsp-related__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.ewsp-related__body {
	display: flex;
	flex-direction: column;
	padding: 14px 16px 18px;
	flex: 1 1 auto;
}

.ewsp-related__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ewsp-related__price {
	font-size: 14px;
	font-weight: 700;
	color: #a9895e;
	margin-bottom: 12px;
}

.ewsp-related__price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 6px;
	color: #888;
}

.ewsp-related__price ins {
	text-decoration: none;
}

.ewsp-related__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #a9895e;
	border: 1px solid #d9c9a8;
	border-radius: 20px;
	padding: 7px 12px;
	transition: background 0.2s ease, color 0.2s ease;
}

.ewsp-related__item:hover .ewsp-related__cta {
	background: #a9895e;
	color: #ffffff;
	border-color: #a9895e;
}

@media (max-width: 640px) {
	.ewsp-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}