/**
 * Fabric Commerce — Frontend Styles
 *
 * Minimal, native-feeling styles for the fabric quantity stepper and
 * live-price calculator. Uses WooCommerce's design language where possible.
 *
 * @package FabricCommerce\Frontend
 */

/* ------------------------------------------------------------------ */
/*  Fabric Quantity Stepper                                            */
/* ------------------------------------------------------------------ */

.fabric-quantity {
	margin-bottom: 1.25em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 0.5em;
}

/* Remaining sellable fabric length shown directly above the add-to-cart form. */
.fc-product-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	width: auto;
	margin: 0;
	font-size: 0.9em;
	font-weight: 600;
	color: #5f5447;
	white-space: nowrap;
}

.fc-product-stock::before {
	content: '';
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: #71814a;
}

/* The stock label occupies its own row above the fabric measurement picker. */
.fabric-quantity .fc-product-stock {
	width: 100%;
	margin: 0 0 0.6em;
}

.fabric-quantity__label {
	display: block;
	width: 100%;
	margin-bottom: 0.15em;
	font-weight: 600;
	font-size: 0.95em;
}

.fabric-quantity__stepper {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	overflow: hidden;
}

.fabric-quantity__btn {
	background: #f5f5f5;
	border: none;
	padding: 0.45em 0.75em;
	cursor: pointer;
	font-size: 1.15em;
	line-height: 1;
	color: #333;
	-webkit-transition: background 0.15s;
	transition: background 0.15s;
	-webkit-user-select: none;
	        user-select: none;
}

.fabric-quantity__btn:hover {
	background: #e8e8e8;
}

.fabric-quantity__btn:active {
	background: #d0d0d0;
}

.fabric-quantity__btn:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.fabric-quantity__btn:focus-visible {
	outline: 2px solid #7c9ae0;
	outline-offset: -2px;
}

.fabric-quantity__input {
	width: 4.2em;
	text-align: center;
	border: none;
	border-left: 1px solid #d5d5d5;
	border-right: 1px solid #d5d5d5;
	padding: 0.4em 0.2em;
	font-size: 1em;
	-moz-appearance: textfield;
}

.fabric-quantity__input::-webkit-inner-spin-button,
.fabric-quantity__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fabric-quantity__unit {
	font-size: 0.92em;
	color: #666;
	margin-left: 0.2em;
}

/* ------------------------------------------------------------------ */
/*  Live Price Calculator                                              */
/* ------------------------------------------------------------------ */

.fabric-live-price {
	margin: 1em 0;
	padding: 0.9em 1em;
	background: #f8f8f8;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

.fabric-live-price__row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 0.2em 0;
	font-size: 0.95em;
}

.fabric-live-price__row--total {
	border-top: 1px solid #ddd;
	margin-top: 0.25em;
	padding-top: 0.5em;
	font-weight: 700;
	font-size: 1.05em;
}

.fabric-live-price__label {
	color: #555;
}

.fabric-live-price__value {
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/*  Product Page — Add-to-Cart Strict Column Layout                   */
/*  Force column orientation — no side-by-side that can break.        */
/* ------------------------------------------------------------------ */

/* Force the parent form to be block so it doesn't fight the column */
body.single-product form.cart,
body.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart,
body.single-product .elementor-add-to-cart form.cart {
	display: block !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

.fabric-add-to-cart {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 1.25em;
	margin: 1.5em 0;
	width: 100%;
	max-width: 100%;
}

/* Reset margins on children so spacing comes from gap only */
.fabric-add-to-cart .fabric-quantity,
.fabric-add-to-cart .fabric-live-price {
	margin: 0;
	width: 100%;
}

/* Themes may render their own whole-number quantity control even after the
 * WooCommerce quantity filter runs. It is irrelevant for fabric products,
 * where .fabric-quantity is the only active quantity control. */
.fabric-add-to-cart .quantity:not(.fabric-quantity) {
	display: none !important;
}

/* Stepper inside the column */
.fabric-add-to-cart .fabric-quantity .fabric-quantity__stepper {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

/* Add-to-cart button — full width in column */
.fabric-add-to-cart .single_add_to_cart_button,
.fabric-add-to-cart button[type="submit"][name="add-to-cart"],
.fabric-add-to-cart .woostify-wrapper-add-to-cart .single_add_to_cart_button {
	width: 100% !important;
	margin: 0 !important;
	background: #3B2E22 !important;
	color: #F3EADB !important;
	border: none !important;
	padding: 14px 28px !important;
	border-radius: 3px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	cursor: pointer !important;
	text-align: center !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	text-transform: none !important;
	-webkit-transition: background 0.2s ease !important;
	transition: background 0.2s ease !important;
	display: block !important;
	-webkit-box-sizing: border-box !important;
	        box-sizing: border-box !important;
}

.fabric-add-to-cart .single_add_to_cart_button:hover,
.fabric-add-to-cart button[type="submit"][name="add-to-cart"]:hover {
	background: #9C7A47 !important;
	color: #FBF7F1 !important;
}

/* Variation tables inside the column */
.fabric-add-to-cart .variations {
	margin: 0;
	width: 100%;
}

/* Reset any theme float/position on the button that could break layout */
.fabric-add-to-cart .single_add_to_cart_button,
.fabric-add-to-cart button[type="submit"][name="add-to-cart"] {
	float: none !important;
	position: static !important;
	clear: both !important;
}

/* ------------------------------------------------------------------ */
/*  WooCommerce Product Loop Card — Rimos Artelė Design               */
/*  High-specificity selectors to beat theme overrides.                */
/* ------------------------------------------------------------------ */

/* --- Card container --- */
ul.products li.product,
ul.products li.product,
body.woocommerce .products li.product,
body.woocommerce-page .products li.product,
ul.products li.product {
	background: #FFFFFF !important;
	border: 1px solid #EBE1D2 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	position: relative;
	-webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	text-align: left !important;
}

ul.products li.product:hover,
ul.products li.product:hover,
body.woocommerce .products li.product:hover,
body.woocommerce-page .products li.product:hover,
ul.products li.product:hover {
	border-color: #C9A876 !important;
	-webkit-box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
	        box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
}

/* --- Image area: fixed 220px, no margins/images overflow --- */
ul.products li.product a img,
ul.products li.product a img,
ul.products li.product img,
ul.products li.product img,
ul.products li.product img,
ul.products li.product a img,
.woocommerce-loop-product__link img {
	width: 100% !important;
	height: 220px !important;
	-o-object-fit: cover !important;
	   object-fit: cover !important;
	-o-object-position: center !important;
	   object-position: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	border: none !important;
	display: block !important;
}

/* Link wrapping the image only (not the whole card) */
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link {
	display: block !important;
	text-decoration: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* --- Rating hidden in loop --- */
ul.products li.product .star-rating,
ul.products li.product .star-rating {
	display: block !important;
	margin: 6px 18px 0 18px !important;
	font-size: 13px !important;
	width: 5.6em !important;
	color: #d4c9b8 !important; /* unrated / empty star color */
}

ul.products li.product .star-rating span,
ul.products li.product .star-rating span {
	color: #f5b342 !important; /* filled / rated star color */
}

/* --- Product category badges --- */
ul.products li.product .fabric-product-categories,
ul.products li.product .fabric-product-categories,
ul.products li.product .fabric-product-categories {
	display: block !important;
	padding: 12px 18px 0 18px !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

ul.products li.product .fabric-product-categories a,
ul.products li.product .fabric-product-categories a,
ul.products li.product .fabric-product-categories a {
	display: inline-block !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: #9C7A47 !important;
	background: #F3EADB !important;
	padding: 3px 8px !important;
	border-radius: 2px !important;
	text-decoration: none !important;
	margin: 0 4px 4px 0 !important;
	-webkit-transition: background 0.2s ease, color 0.2s ease !important;
	transition: background 0.2s ease, color 0.2s ease !important;
	line-height: 1.2 !important;
	border: none !important;
}

ul.products li.product .fabric-product-categories a:hover,
ul.products li.product .fabric-product-categories a:hover,
ul.products li.product .fabric-product-categories a:hover {
	background: #9C7A47 !important;
	color: #FBF7F1 !important;
}

/* --- Product title --- */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: #3B2E22 !important;
	line-height: 1.3 !important;
	padding: 14px 18px 0 18px !important;
	margin: 0 !important;
	text-align: left !important;
	background: none !important;
	border: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* --- Stock status badge --- */
ul.products li.product .fabric-stock-badge,
ul.products li.product .fabric-stock-badge,
ul.products li.product .fabric-stock-badge {
	display: inline-block !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	padding: 3px 8px !important;
	border-radius: 2px !important;
	margin: 6px 0 0 18px !important;
	line-height: 1.2 !important;
}

ul.products li.product .fabric-stock-badge--outofstock,
ul.products li.product .fabric-stock-badge--outofstock,
ul.products li.product .fabric-stock-badge--outofstock {
	background: #f5e6e6 !important;
	color: #b34040 !important;
	border: none !important;
}

/* --- Price --- */
ul.products li.product .price,
ul.products li.product .price {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	color: #9C7A47 !important;
	padding: 8px 18px 0 18px !important;
	margin: 0 !important;
	text-align: left !important;
	display: block !important;
	background: none !important;
	border: none !important;
}

ul.products li.product .price .amount,
ul.products li.product .price .amount {
	color: #9C7A47 !important;
	font-weight: 600 !important;
}

ul.products li.product .price del,
ul.products li.product .price del {
	font-size: 14px !important;
	color: #B5A694 !important;
	margin-right: 6px;
	opacity: 1 !important;
}

ul.products li.product .price ins,
ul.products li.product .price ins {
	text-decoration: none !important;
	background: none !important;
}

/* Price unit suffix (/m, /m²) */
.fabric-price-unit {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #B5A694 !important;
	display: inline !important;
}

/* --- Short description / excerpt --- */
ul.products li.product .woocommerce-loop-product__description {
	font-size: 12.5px !important;
	color: #6B5A45 !important;
	padding: 0 18px !important;
	margin: 4px 0 0 0 !important;
	line-height: 1.4 !important;
}

/* --- Add-to-cart button (redirects to product page via LoopAddToCart) --- */
ul.products li.product .button,
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product a.button,
ul.products li.product .add_to_cart_button,
ul.products li.product .add_to_cart_button {
	margin: 10px 18px 18px 18px !important;
	background: #3B2E22 !important;
	color: #F3EADB !important;
	border: none !important;
	padding: 11px 16px !important;
	border-radius: 3px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	cursor: pointer !important;
	display: block !important;
	text-align: center !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	width: auto !important;
	min-height: auto !important;
	max-width: none !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	text-transform: none !important;
	-webkit-transition: background 0.2s ease !important;
	transition: background 0.2s ease !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
}

ul.products li.product .button:hover,
ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product a.button:hover,
ul.products li.product .add_to_cart_button:hover,
ul.products li.product .add_to_cart_button:hover {
	background: #9C7A47 !important;
	color: #FBF7F1 !important;
}

/* Push the button to the bottom of the card */
ul.products li.product > .button,
ul.products li.product > .button {
	margin-top: auto !important;
}

/* --- "View cart" link after add --- */
ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart {
	display: block !important;
	text-align: center !important;
	margin: 0 18px 18px 18px !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #9C7A47 !important;
	text-decoration: none !important;
	background: none !important;
	border: none !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	line-height: 1.4 !important;
}

ul.products li.product .added_to_cart:hover,
ul.products li.product .added_to_cart:hover {
	color: #3B2E22 !important;
	text-decoration: underline !important;
}

/* --- Sale badge (style matches the design's tag badge) --- */
ul.products li.product .onsale,
ul.products li.product .onsale {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	background: #3B2E22 !important;
	color: #F3EADB !important;
	font-size: 10.5px !important;
	letter-spacing: 0.04em !important;
	padding: 4px 9px !important;
	border-radius: 2px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	border: none !important;
	z-index: 2;
	margin: 0 !important;
	min-width: auto !important;
	min-height: auto !important;
	text-shadow: none !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	-webkit-transform: none !important;
	    -ms-transform: none !important;
	        transform: none !important;
}

/* ------------------------------------------------------------------ */
/*  Elementor Loop Grid — Product Cards                               */
/*  Elementor renders the full product template inside each card,     */
/*  so we need to hide the quantity-input, fabric stepper, live price */
/*  and style the add-to-cart button cleanly.                         */
/* ------------------------------------------------------------------ */

/* Card container inside Elementor loop grid */
.elementor-loop-container .e-loop-item {
	background: #FFFFFF !important;
	border: 1px solid #EBE1D2 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	padding: 0 !important;
	-webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
}

.elementor-loop-container .e-loop-item:hover {
	border-color: #C9A876 !important;
	-webkit-box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
	        box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
}

/* Hide fabric stepper, live price, and default quantity input in loop cards */
.elementor-loop-container .e-loop-item .fabric-quantity,
.elementor-loop-container .e-loop-item .fabric-live-price,
.elementor-loop-container .e-loop-item .quantity,
.elementor-loop-container .e-loop-item .cart .quantity,
.elementor-loop-container .e-loop-item form.cart > div:not(.woostify-wrapper-add-to-cart) {
	display: none !important;
}

/* Hide "Fabric Required" label if it appears in loop */
.elementor-loop-container .e-loop-item .fabric-quantity__label {
	display: none !important;
}

/* Style the add-to-cart form container in Elementor loop */
.elementor-loop-container .e-loop-item form.cart {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* Style the add-to-cart button in Elementor loop cards */
.elementor-loop-container .e-loop-item .single_add_to_cart_button,
.elementor-loop-container .e-loop-item button[type="submit"][name="add-to-cart"],
.elementor-loop-container .e-loop-item .woostify-wrapper-add-to-cart .single_add_to_cart_button {
	margin: 10px 18px 18px 18px !important;
	background: #3B2E22 !important;
	color: #F3EADB !important;
	border: none !important;
	padding: 11px 16px !important;
	border-radius: 3px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	cursor: pointer !important;
	display: block !important;
	text-align: center !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	width: auto !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	text-transform: none !important;
	-webkit-transition: background 0.2s ease !important;
	transition: background 0.2s ease !important;
}

.elementor-loop-container .e-loop-item .single_add_to_cart_button:hover,
.elementor-loop-container .e-loop-item button[type="submit"][name="add-to-cart"]:hover {
	background: #9C7A47 !important;
	color: #FBF7F1 !important;
}

/* Push button to bottom of card */
.elementor-loop-container .e-loop-item .e-con-inner {
	-webkit-box-flex: 1 !important;
	    -ms-flex: 1 !important;
	        flex: 1 !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
}

.elementor-loop-container .e-loop-item .elementor-widget-woostify-product-add-to-cart {
	margin-top: auto !important;
}

/* Hide the "Fabric Required" default WooCommerce quantity label in loop */
.elementor-loop-container .e-loop-item .screen-reader-text {
	display: none !important;
}

/* Style product title in Elementor loop cards */
.elementor-loop-container .e-loop-item .product_title,
.elementor-loop-container .e-loop-item .woocommerce-loop-product__title {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: #3B2E22 !important;
	line-height: 1.3 !important;
	padding: 0 18px !important;
	margin: 14px 0 0 0 !important;
	text-align: left !important;
	background: none !important;
	border: none !important;
}

/* Style product price in Elementor loop cards */
.elementor-loop-container .e-loop-item .price {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	color: #9C7A47 !important;
	padding: 0 18px !important;
	margin: 8px 0 0 0 !important;
	text-align: left !important;
	display: block !important;
}

.elementor-loop-container .e-loop-item .price .amount {
	color: #9C7A47 !important;
	font-weight: 600 !important;
}

.elementor-loop-container .e-loop-item .price .fabric-price-unit {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #B5A694 !important;
	display: inline !important;
}

/* Star rating in Elementor loop */
.elementor-loop-container .e-loop-item .star-rating {
	display: block !important;
	margin: 6px 18px 0 18px !important;
	font-size: 13px !important;
	width: 5.6em !important;
	color: #d4c9b8 !important;
}

.elementor-loop-container .e-loop-item .star-rating span {
	color: #f5b342 !important;
}

/* Whole card clickable cursor */
.elementor-loop-container .e-loop-item {
	cursor: pointer !important;
}

/* Sale badge in Elementor loop */
.elementor-loop-container .e-loop-item .onsale {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	background: #3B2E22 !important;
	color: #F3EADB !important;
	font-size: 10.5px !important;
	padding: 4px 9px !important;
	border-radius: 2px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: none !important;
	z-index: 2;
	text-transform: uppercase !important;
}

/* ------------------------------------------------------------------ */
/*  WooCommerce Blocks — All Products / Products by Category          */
/* ------------------------------------------------------------------ */

body.woocommerce .wc-block-grid__product,
body.woocommerce-page .wc-block-grid__product {
	background: #FFFFFF !important;
	border: 1px solid #EBE1D2 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
	-webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
}

body.woocommerce .wc-block-grid__product:hover,
body.woocommerce-page .wc-block-grid__product:hover {
	border-color: #C9A876 !important;
	-webkit-box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
	        box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
}

body.woocommerce .wc-block-grid__product-image,
body.woocommerce-page .wc-block-grid__product-image {
	height: 220px !important;
	overflow: hidden !important;
}

body.woocommerce .wc-block-grid__product-image img,
body.woocommerce-page .wc-block-grid__product-image img {
	width: 100% !important;
	height: 100% !important;
	-o-object-fit: cover !important;
	   object-fit: cover !important;
	-o-object-position: center !important;
	   object-position: center !important;
	margin: 0 !important;
}

body.woocommerce .wc-block-grid__product-title,
body.woocommerce-page .wc-block-grid__product-title {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: #3B2E22 !important;
	line-height: 1.3 !important;
	padding: 14px 18px 0 18px !important;
	margin: 0 !important;
	text-align: left !important;
	background: none !important;
	font-style: normal !important;
}

body.woocommerce .wc-block-grid__product-price,
body.woocommerce-page .wc-block-grid__product-price {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	color: #9C7A47 !important;
	padding: 8px 18px 0 18px !important;
	text-align: left !important;
}

body.woocommerce .wc-block-grid__product-add-to-cart,
body.woocommerce-page .wc-block-grid__product-add-to-cart {
	padding: 10px 18px 18px 18px !important;
	margin-top: auto !important;
}

body.woocommerce .wc-block-grid__product-add-to-cart .wp-block-button__link,
body.woocommerce-page .wc-block-grid__product-add-to-cart .wp-block-button__link,
body.woocommerce .wc-block-grid__product-add-to-cart .add_to_cart_button,
body.woocommerce-page .wc-block-grid__product-add-to-cart .add_to_cart_button {
	margin: 0 !important;
	width: 100% !important;
	background: #3B2E22 !important;
	color: #F3EADB !important;
	border: none !important;
	padding: 11px 16px !important;
	border-radius: 3px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	display: block !important;
	text-align: center !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	text-transform: none !important;
	-webkit-transition: background 0.2s ease !important;
	transition: background 0.2s ease !important;
}

body.woocommerce .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
body.woocommerce-page .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
body.woocommerce .wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
body.woocommerce-page .wc-block-grid__product-add-to-cart .add_to_cart_button:hover {
	background: #9C7A47 !important;
	color: #FBF7F1 !important;
}

/* Block sale badge */
body.woocommerce .wc-block-grid__product .wc-block-grid__product-onsale,
body.woocommerce-page .wc-block-grid__product .wc-block-grid__product-onsale {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	background: #3B2E22 !important;
	color: #F3EADB !important;
	font-size: 10.5px !important;
	letter-spacing: 0.04em !important;
	padding: 4px 9px !important;
	border-radius: 2px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	border: none !important;
	z-index: 2;
	margin: 0 !important;
	min-width: auto !important;
	min-height: auto !important;
	text-shadow: none !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	-webkit-transform: none !important;
	    -ms-transform: none !important;
	        transform: none !important;
}


/* ------------------------------------------------------------------ */
/*  Woostify Theme Product Card — Rimos Artelė Design                 */
/*  The Woostify theme renders its own product loop structure          */
/*  (.product-loop-wrapper / -image-wrapper / -content). These rules   */
/*  override the generic WooCommerce styles above so the card matches  */
/*  the Rimos Artelė design without fighting the theme's layout.      */
/* ------------------------------------------------------------------ */

/* --- Card container: equal-height flex column, styled border --- */
ul.products li.product .product-loop-wrapper,
ul.products li.product .product-loop-wrapper {
	background: #FFFFFF !important;
	border: 1px solid #EBE1D2 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	-webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
}

ul.products li.product .product-loop-wrapper:hover,
ul.products li.product .product-loop-wrapper:hover {
	border-color: #C9A876 !important;
	-webkit-box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
	        box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
}

/* --- Natural spacing between cards ---
   Overs the generic "padding:0;margin:0" that glued the columns. */
ul.products,
ul.products {
	margin-left: -15px !important;
	margin-right: -15px !important;
}

/* Make each li a pure spacing container (the real card is the
   .product-loop-wrapper inside it, which carries the border). */
ul.products li.product,
ul.products li.product {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	height: 100% !important;
	margin-bottom: 30px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	-webkit-box-sizing: border-box !important;
	        box-sizing: border-box !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

/* --- Image wrapper: fixed 220px, no overflow --- */
ul.products li.product .product-loop-image-wrapper,
ul.products li.product .product-loop-image-wrapper {
	position: relative !important;
	height: 220px !important;
	overflow: hidden !important;
	margin: 0 !important;
	background: #F3EADB !important;
}

ul.products li.product .product-loop-image-wrapper img,
ul.products li.product .product-loop-image-wrapper img {
	width: 100% !important;
	height: 100% !important;
	-o-object-fit: cover !important;
	   object-fit: cover !important;
	-o-object-position: center !important;
	   object-position: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* --- Category badges (rendered above the image) --- */
ul.products li.product .fabric-product-categories,
ul.products li.product .fabric-product-categories {
	display: block !important;
	padding: 10px 14px 0 14px !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

ul.products li.product .fabric-product-categories a,
ul.products li.product .fabric-product-categories a {
	display: inline-block !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: #9C7A47 !important;
	background: #F3EADB !important;
	padding: 3px 8px !important;
	border-radius: 2px !important;
	text-decoration: none !important;
	margin: 0 4px 4px 0 !important;
	line-height: 1.2 !important;
	border: none !important;
}

ul.products li.product .fabric-product-categories a:hover,
ul.products li.product .fabric-product-categories a:hover {
	background: #9C7A47 !important;
	color: #FBF7F1 !important;
}

/* --- Content area: flex-grow so button/price align --- */
ul.products li.product .product-loop-content,
ul.products li.product .product-loop-content {
	-webkit-box-flex: 1 !important;
	    -ms-flex: 1 1 auto !important;
	        flex: 1 1 auto !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	padding: 12px 16px 16px 16px !important;
	margin: 0 !important;
}

/* --- Title --- */
ul.products li.product .product-loop-content .woocommerce-loop-product__title,
ul.products li.product .product-loop-content .woocommerce-loop-product__title {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: #3B2E22 !important;
	line-height: 1.3 !important;
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
	text-align: left !important;
	background: none !important;
	border: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

ul.products li.product .product-loop-content .woocommerce-loop-product__title a,
ul.products li.product .product-loop-content .woocommerce-loop-product__title a {
	color: inherit !important;
	text-decoration: none !important;
}

/* --- Meta / Price area --- */
ul.products li.product .product-loop-content .product-loop-meta,
ul.products li.product .product-loop-content .product-loop-meta {
	margin: auto 0 0 0 !important;
	padding: 0 !important;
}

ul.products li.product .product-loop-content .price,
ul.products li.product .product-loop-content .price {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	color: #9C7A47 !important;
	margin: 0 !important;
	padding: 4px 0 0 0 !important;
	text-align: left !important;
	display: block !important;
	background: none !important;
	border: none !important;
}

ul.products li.product .product-loop-content .price .amount,
ul.products li.product .product-loop-content .price .amount {
	color: #9C7A47 !important;
	font-weight: 600 !important;
}

ul.products li.product .product-loop-content .price del,
ul.products li.product .product-loop-content .price del {
	font-size: 14px !important;
	color: #B5A694 !important;
	opacity: 1 !important;
	margin-right: 6px !important;
}

ul.products li.product .product-loop-content .price ins,
ul.products li.product .product-loop-content .price ins {
	text-decoration: none !important;
	background: none !important;
}

ul.products li.product .product-loop-content .price .fabric-price-unit,
ul.products li.product .product-loop-content .price .fabric-price-unit {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #B5A694 !important;
	display: inline !important;
}

/* --- Restore Woostify's hover-overlay add-to-cart button ---
   Our generic .button rules set position:static + margins which destroy
   the theme's slide-up overlay. Re-scope to the theme's real button. */
ul.products li.product .product-loop-image-wrapper .loop-add-to-cart-on-image,
ul.products li.product .product-loop-image-wrapper .loop-add-to-cart-on-image {
	position: absolute !important;
	right: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	border-radius: 0 !important;
	background: rgba(59, 46, 34, 0.92) !important;
	color: #F3EADB !important;
	border: none !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	line-height: 1.4 !important;
	-webkit-transition: background 0.2s ease !important;
	transition: background 0.2s ease !important;
	z-index: 3 !important;
	opacity: 1 !important;
	visibility: visible !important;
	-webkit-transform: none !important;
	    -ms-transform: none !important;
	        transform: none !important;
}

ul.products li.product .product-loop-image-wrapper:hover .loop-add-to-cart-on-image,
ul.products li.product .product-loop-image-wrapper:hover .loop-add-to-cart-on-image,
ul.products li.product .product-loop-image-wrapper .loop-add-to-cart-on-image:hover,
ul.products li.product .product-loop-image-wrapper .loop-add-to-cart-on-image:hover {
	background: rgba(156, 122, 71, 0.95) !important;
	color: #FBF7F1 !important;
}

/* --- Hide the theme's empty product-loop-action spacer (cleaner) --- */
ul.products li.product .product-loop-image-wrapper .product-loop-action,
ul.products li.product .product-loop-image-wrapper .product-loop-action {
	z-index: 4 !important;
}

/* ------------------------------------------------------------------ */
/*  Responsive — Tablet & Mobile                                      */
/*  Grid follows the theme's classes: desktop=3col, tablet=2, mobile=2. */
/*  Here we tune gutters, image height and type scale so cards stay    */
/*  balanced at each breakpoint rather than the desktop values.        */
/* ------------------------------------------------------------------ */

/* --- Tablet (2 columns) --- */
@media (max-width: 992px) {
	ul.products,
	ul.products {
		margin-left: -12px !important;
		margin-right: -12px !important;
	}

	ul.products li.product,
	ul.products li.product {
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin-bottom: 24px !important;
		/* 2 columns fill the full row — no right-side gap */
		-webkit-box-flex: 0 0 50% !important;
		    -ms-flex: 0 0 50% !important;
		        flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}

	ul.products li.product .product-loop-image-wrapper,
	ul.products li.product .product-loop-image-wrapper {
		height: 200px !important;
	}

	ul.products li.product .product-loop-content,
	ul.products li.product .product-loop-content {
		padding: 10px 14px 14px 14px !important;
	}

	ul.products li.product .product-loop-content .woocommerce-loop-product__title,
	ul.products li.product .product-loop-content .woocommerce-loop-product__title {
		font-size: 15px !important;
	}

	ul.products li.product .product-loop-content .price,
	ul.products li.product .product-loop-content .price {
		font-size: 17px !important;
	}

	ul.products li.product .fabric-product-categories,
	ul.products li.product .fabric-product-categories {
		padding: 10px 14px 0 14px !important;
	}
}

/* --- Mobile (2 columns, tighter) --- */
@media (max-width: 767px) {
	ul.products,
	ul.products {
		margin-left: -8px !important;
		margin-right: -8px !important;
	}

	ul.products li.product,
	ul.products li.product {
		padding-left: 8px !important;
		padding-right: 8px !important;
		margin-bottom: 20px !important;
		/* 2 columns fill the full row */
		-webkit-box-flex: 0 0 50% !important;
		    -ms-flex: 0 0 50% !important;
		        flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}

	/* Square image on mobile so the 1:1 product photos stay proportional */
	ul.products li.product .product-loop-image-wrapper,
	ul.products li.product .product-loop-image-wrapper {
		aspect-ratio: 1 / 1 !important;
		height: auto !important;
	}

	ul.products li.product .product-loop-image-wrapper img,
	ul.products li.product .product-loop-image-wrapper img {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		-o-object-fit: cover !important;
		   object-fit: cover !important;
	}

	ul.products li.product .product-loop-content,
	ul.products li.product .product-loop-content {
		padding: 8px 10px 12px 10px !important;
	}

	ul.products li.product .product-loop-content .woocommerce-loop-product__title,
	ul.products li.product .product-loop-content .woocommerce-loop-product__title {
		font-size: 13px !important;
		line-height: 1.25 !important;
		margin-bottom: 4px !important;
	}

	ul.products li.product .product-loop-content .price,
	ul.products li.product .product-loop-content .price {
		font-size: 15px !important;
	}

	ul.products li.product .product-loop-content .price .fabric-price-unit,
	ul.products li.product .product-loop-content .price .fabric-price-unit {
		font-size: 11px !important;
	}

	ul.products li.product .fabric-product-categories,
	ul.products li.product .fabric-product-categories {
		padding: 8px 10px 0 10px !important;
	}

	ul.products li.product .fabric-product-categories a,
	ul.products li.product .fabric-product-categories a {
		font-size: 10px !important;
		padding: 2px 6px !important;
	}

	/* Slightly slimmer always-on image CTA on small cards */
	ul.products li.product .product-loop-image-wrapper .loop-add-to-cart-on-image,
	ul.products li.product .product-loop-image-wrapper .loop-add-to-cart-on-image {
		padding: 9px 12px !important;
		font-size: 11px !important;
	}
}

/* --- Very small phones — keep 2 columns but tighten further --- */
@media (max-width: 420px) {
	ul.products,
	ul.products {
		margin-left: -6px !important;
		margin-right: -6px !important;
	}

	ul.products li.product,
	ul.products li.product {
		padding-left: 6px !important;
		padding-right: 6px !important;
		margin-bottom: 16px !important;
	}

	ul.products li.product .product-loop-content .woocommerce-loop-product__title,
	ul.products li.product .product-loop-content .woocommerce-loop-product__title {
		font-size: 12px !important;
	}

	ul.products li.product .product-loop-content .price,
	ul.products li.product .product-loop-content .price {
		font-size: 14px !important;
	}
}

/* ------------------------------------------------------------------ */
/*  Equal-height cards + category badges over the image               */
/*  Final overrides (source order wins).                              */
/* ------------------------------------------------------------------ */

/* Equal-height grid: stretch every card to its row height so a long
   title on one product never shortens the cards beside it. The theme's
   grid may not stretch items, so we take the list over as a wrapping
   flex row and give each li an explicit width. */
ul.products,
ul.products {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	    flex-wrap: wrap !important;
	-webkit-box-align: stretch !important;
	    -ms-flex-align: stretch !important;
	        align-items: stretch !important;
	-webkit-box-pack: start !important;
	    -ms-flex-pack: start !important;
	        justify-content: flex-start !important;
}

ul.products li.product,
ul.products li.product {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	height: auto !important;
	/* 3 columns is the default at every width; 2 columns is forced only
	   in the media queries below at <=992px. Making 3-col the base (rather
	   than gating it behind a min-width media query) keeps a laptop /
	   desktop window at 3 columns even if the theme still applies its own
	   tablet-columns-2 in that range. */
	-webkit-box-flex: 0 0 33.3333% !important;
	    -ms-flex: 0 0 33.3333% !important;
	        flex: 0 0 33.3333% !important;
	max-width: 33.3333% !important;
	width: 33.3333% !important;
}

ul.products li.product .product-loop-wrapper,
ul.products li.product .product-loop-wrapper {
	height: 100% !important;
}

/* Force 2 columns on tablet & mobile (overrides the 3-col base above).
   These come later in the file and are not matched on desktop. */
@media (max-width: 992px) {
	ul.products li.product,
	ul.products li.product {
		-webkit-box-flex: 0 0 50% !important;
		    -ms-flex: 0 0 50% !important;
		        flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}
}

@media (max-width: 767px) {
	ul.products li.product,
	ul.products li.product {
		-webkit-box-flex: 0 0 50% !important;
		    -ms-flex: 0 0 50% !important;
		        flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}
}

/* --- Category badges: pinned to the top-left corner over the image --- */
ul.products li.product .product-loop-wrapper,
ul.products li.product .product-loop-wrapper {
	position: relative !important;
}

ul.products li.product .fabric-product-categories,
ul.products li.product .fabric-product-categories {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 5 !important;
}

/* ------------------------------------------------------------------ */
/*  Global application — Elementor Products widget & any products      */
/*  grid. The Elementor page does not carry the "body.woocommerce"     */
/*  class, so re-assert the flex equal-column layout onto the widget's */
/*  own wrappers (beats Elementor's column CSS too). All the card      */
/*  visual rules above are already universal via the bare `ul.products` */
/*  selectors, so only the axe-holder layout is repeated here.         */
/* ------------------------------------------------------------------ */
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-woocommerce-archive-products ul.products,
.elementor-widget-woocommerce-product-category ul.products,
.elementor-products-grid ul.products {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	    flex-wrap: wrap !important;
	-webkit-box-align: stretch !important;
	    -ms-flex-align: stretch !important;
	        align-items: stretch !important;
	-webkit-box-pack: start !important;
	    -ms-flex-pack: start !important;
	        justify-content: flex-start !important;
	margin-left: -15px !important;
	margin-right: -15px !important;
}

.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-woocommerce-archive-products ul.products li.product,
.elementor-widget-woocommerce-product-category ul.products li.product,
.elementor-products-grid ul.products li.product {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	-webkit-box-sizing: border-box !important;
	        box-sizing: border-box !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	-webkit-box-flex: 0 0 33.3333% !important;
	    -ms-flex: 0 0 33.3333% !important;
	        flex: 0 0 33.3333% !important;
	max-width: 33.3333% !important;
	width: 33.3333% !important;
}

@media (max-width: 992px) {
	.elementor-widget-woocommerce-products ul.products li.product,
	.elementor-widget-woocommerce-archive-products ul.products li.product,
	.elementor-widget-woocommerce-product-category ul.products li.product,
	.elementor-products-grid ul.products li.product {
		-webkit-box-flex: 0 0 50% !important;
		    -ms-flex: 0 0 50% !important;
		        flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}
}

@media (max-width: 767px) {
	.elementor-widget-woocommerce-products ul.products li.product,
	.elementor-widget-woocommerce-archive-products ul.products li.product,
	.elementor-widget-woocommerce-product-category ul.products li.product,
	.elementor-products-grid ul.products li.product {
		-webkit-box-flex: 0 0 50% !important;
		    -ms-flex: 0 0 50% !important;
		        flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}
}

/* ------------------------------------------------------------------ */
/*  Gutter guarantee (final).                                         */
/*  Globalizing the selectors lowered their specificity below the      */
/*  theme's body.woocommerce reset (which zeroes li padding), so cards  */
/*  collapsed edge-to-edge. Using ".woocommerce" as the ancestor keeps   */
/*  us equal to the theme (it matches the shop body class AND an         */
/*  Elementor div.woocommerce) so our !important wins and spacing lands. */
/* ------------------------------------------------------------------ */
.woocommerce ul.products,
.elementor-products-grid ul.products,
ul.products {
	margin-left: -15px !important;
	margin-right: -15px !important;
}

.woocommerce ul.products li.product,
.elementor-products-grid ul.products li.product,
ul.products li.product {
	-webkit-box-sizing: border-box !important;
	        box-sizing: border-box !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	margin-bottom: 30px !important;
}

@media (max-width: 992px) {
	.woocommerce ul.products,
	.elementor-products-grid ul.products,
	ul.products {
		margin-left: -12px !important;
		margin-right: -12px !important;
	}
	.woocommerce ul.products li.product,
	.elementor-products-grid ul.products li.product,
	ul.products li.product {
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin-bottom: 24px !important;
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products,
	.elementor-products-grid ul.products,
	ul.products {
		margin-left: -8px !important;
		margin-right: -8px !important;
	}
	.woocommerce ul.products li.product,
	.elementor-products-grid ul.products li.product,
	ul.products li.product {
		padding-left: 8px !important;
		padding-right: 8px !important;
		margin-bottom: 20px !important;
	}
}


/* ------------------------------------------------------------------ */
/*  Product cards — clean, uniform grid (authoritative, final)        */
/*  Replaces the earlier negative-margin + padding gutter trick, which */
/*  broke the Elementor products widget (card content sits directly in  */
/*  li.product there, with no .product-loop-wrapper, so stripping the   */
/*  li border + padding its sides rendered an empty padded "box").      */
/*                                                                     */
/*  New model: the grid is a flex row whose spacing comes from `gap`   */
/*  (row-gap guarantees vertical too — no fragile margin-bottom that    */
/*  collapses). Each li is a plain, unstyled flex column; the bordered  */
/*  card surface is wherever the browser has one parallel on the        */
/*  archive (the .product-loop-wrapper) and on Elementor grids the li   */
/*  itself. Both selectors share one card style, so spacing and look    */
/*  are identical everywhere.                                          */
/* ------------------------------------------------------------------ */

/* 1. The grid: wrapping flex row, uniform gaps. */
.woocommerce ul.products,
ul.products,
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-woocommerce-archive-products ul.products,
.elementor-widget-woocommerce-product-category ul.products,
.elementor-products-grid ul.products {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	    flex-wrap: wrap !important;
	-webkit-box-align: stretch !important;
	    -ms-flex-align: stretch !important;
	        align-items: stretch !important;
	-webkit-box-pack: start !important;
	    -ms-flex-pack: start !important;
	        justify-content: flex-start !important;
	margin: 0 !important;
	padding: 0 !important;
	/* row = vertical gap, column = horizontal gap. No negative margins. */
	gap: 30px 24px !important;
}

/* 2. Each li is a plain flex column. Widths subtract one column-gap so
   the columns fill 100% with evenly spaced gutters and no invisible box. */
.woocommerce ul.products li.product,
ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-woocommerce-archive-products ul.products li.product,
.elementor-widget-woocommerce-product-category ul.products li.product,
.elementor-products-grid ul.products li.product {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	-webkit-box-sizing: border-box !important;
	        box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	width: calc((100% - 48px) / 3) !important;   /* 3 cols, 2 gaps */
	max-width: calc((100% - 48px) / 3) !important;
	-webkit-box-flex: 0 0 calc((100% - 48px) / 3) !important;
	    -ms-flex: 0 0 calc((100% - 48px) / 3) !important;
	        flex: 0 0 calc((100% - 48px) / 3) !important;
}

/* 3. The visible bordered card. On the Woostify archive it lives in
   .product-loop-wrapper; on Elementor grids li.product has no wrapper,
   so it carries the card look itself. One shared set of card styles. */
ul.products li.product .product-loop-wrapper,
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-woocommerce-archive-products ul.products li.product,
.elementor-widget-woocommerce-product-category ul.products li.product,
.elementor-products-grid ul.products li.product {
	background: #FFFFFF !important;
	border: 1px solid #EBE1D2 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	    -ms-flex-direction: column !important;
	        flex-direction: column !important;
	height: 100% !important;      /* stretch to row height = equal heights */
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important; /* anchors the category badge overlay */
	-webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
	transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease !important;
}

/* Hover surface for both card hosts. */
.woocommerce ul.products li.product .product-loop-wrapper:hover,
ul.products li.product .product-loop-wrapper:hover,
.elementor-widget-woocommerce-products ul.products li.product:hover,
.elementor-widget-woocommerce-archive-products ul.products li.product:hover,
.elementor-widget-woocommerce-product-category ul.products li.product:hover,
.elementor-products-grid ul.products li.product:hover {
	border-color: #C9A876 !important;
	-webkit-box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
	        box-shadow: 0 14px 32px rgba(59, 46, 34, 0.1) !important;
}

/* --- Tablet: 2 columns --- */
@media (max-width: 992px) {
	.woocommerce ul.products,
	ul.products,
	.elementor-widget-woocommerce-products ul.products,
	.elementor-widget-woocommerce-archive-products ul.products,
	.elementor-widget-woocommerce-product-category ul.products,
	.elementor-products-grid ul.products {
		gap: 26px 22px !important;
	}
	.woocommerce ul.products li.product,
	ul.products li.product,
	.elementor-widget-woocommerce-products ul.products li.product,
	.elementor-widget-woocommerce-archive-products ul.products li.product,
	.elementor-widget-woocommerce-product-category ul.products li.product,
	.elementor-products-grid ul.products li.product {
		width: calc((100% - 22px) / 2) !important;
		max-width: calc((100% - 22px) / 2) !important;
		-webkit-box-flex: 0 0 calc((100% - 22px) / 2) !important;
		    -ms-flex: 0 0 calc((100% - 22px) / 2) !important;
		        flex: 0 0 calc((100% - 22px) / 2) !important;
	}
}

/* --- Mobile: 2 columns, snugger --- */
@media (max-width: 767px) {
	.woocommerce ul.products,
	ul.products,
	.elementor-widget-woocommerce-products ul.products,
	.elementor-widget-woocommerce-archive-products ul.products,
	.elementor-widget-woocommerce-product-category ul.products,
	.elementor-products-grid ul.products {
		gap: 20px 14px !important;
	}
	.woocommerce ul.products li.product,
	ul.products li.product,
	.elementor-widget-woocommerce-products ul.products li.product,
	.elementor-widget-woocommerce-archive-products ul.products li.product,
	.elementor-widget-woocommerce-product-category ul.products li.product,
	.elementor-products-grid ul.products li.product {
		width: calc((100% - 14px) / 2) !important;
		max-width: calc((100% - 14px) / 2) !important;
		-webkit-box-flex: 0 0 calc((100% - 14px) / 2) !important;
		    -ms-flex: 0 0 calc((100% - 14px) / 2) !important;
		        flex: 0 0 calc((100% - 14px) / 2) !important;
	}
}

/* --- Very small phones: keep 2 columns, tighter --- */
@media (max-width: 420px) {
	.woocommerce ul.products,
	ul.products,
	.elementor-widget-woocommerce-products ul.products,
	.elementor-widget-woocommerce-archive-products ul.products,
	.elementor-widget-woocommerce-product-category ul.products,
	.elementor-products-grid ul.products {
		gap: 16px 10px !important;
	}
	.woocommerce ul.products li.product,
	ul.products li.product,
	.elementor-widget-woocommerce-products ul.products li.product,
	.elementor-widget-woocommerce-archive-products ul.products li.product,
	.elementor-widget-woocommerce-product-category ul.products li.product,
	.elementor-products-grid ul.products li.product {
		width: calc((100% - 10px) / 2) !important;
		max-width: calc((100% - 10px) / 2) !important;
		-webkit-box-flex: 0 0 calc((100% - 10px) / 2) !important;
		    -ms-flex: 0 0 calc((100% - 10px) / 2) !important;
		        flex: 0 0 calc((100% - 10px) / 2) !important;
	}
}
