/* ==========================================================================
   VAYUÉ — Product card, everywhere.
   Loads on EVERY page so any product grid on the site reads the same.

   Two markup shapes have to be covered, because the site renders product
   loops two different ways:

   1. Ours — woocommerce/content-product.php (shop, category archives,
      [products] shortcodes, related products):
        ul.products > li.product.vs-card
          .vs-card__media / __title / __line / __price / __cta

   2. XStore's Elementor widget "etheme_product_grid" (the three homepage
      sections). It never calls content-product.php — it emits its own
      DIV markup:
        .etheme-product-grid > .etheme-product-grid-item.product
          .etheme-product-grid-image
          .etheme-product-grid-content
            .etheme-product-grid-categories
            .etheme-product-grid-title
            .price
            .etheme-product-grid-button

   Each rule below therefore lists both selectors. Do not "tidy" one away.
   ========================================================================== */

:root {
	--vy-gold: #BB9D50;
	--vy-gold-lt: #C8B57E;
	--vy-gold-dk: #C8B57E;
	--vy-on-gold: #0F0E13;
	--vy-bg: #0B0A0E;
	--vy-deep: #060609;
	--vy-surface: #15141A;
	--vy-surface-2: #1E1C24;
	--vy-text: #F2EEE4;
	--vy-muted: #A29C92;
	--vy-line: #2C2A33;
	--vy-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--vy-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--vy-btn-r: 2px;
	--vs-cbtn-h: 46px;
}

/* ------------------------------------------------------------------ grid */
ul.products,
.etheme-product-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	float: none;
}
ul.products::before, ul.products::after,
.etheme-product-grid::before, .etheme-product-grid::after { content: none !important; }

ul.products.columns-1, .etheme-product-grid.columns-1 { grid-template-columns: 1fr; }
ul.products.columns-2, .etheme-product-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3, .etheme-product-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-5, .etheme-product-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
ul.products.columns-6, .etheme-product-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* ------------------------------------------------------------------ card */
ul.products > li.product,
.etheme-product-grid > .etheme-product-grid-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vy-line);
	background: var(--vy-bg);
	transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
	overflow: hidden;
}
ul.products > li.product:hover,
.etheme-product-grid > .etheme-product-grid-item:hover {
	border-color: var(--vy-gold);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
	transform: translateY(-3px);
}

/* ----------------------------------------------------------------- media */
.vs-card__media,
.etheme-product-grid-image {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--vy-surface);
	overflow: hidden;
	margin: 0 !important;
}
.vs-card__media img,
.etheme-product-grid-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 18px;
	box-sizing: border-box;
	display: block;
	transition: transform 500ms ease;
}
ul.products > li.product:hover .vs-card__media img,
.etheme-product-grid-item:hover .etheme-product-grid-image img { transform: scale(1.05); }

/* XStore's hover overlay + icon rail. Our card has no hover icon row, so
   they are hidden to keep every card identical. Delete this block if you
   want the wishlist / quick-view icons back on the homepage grids. */
.etheme-product-grid-image > footer,
.etheme-product-grid-item .footer-inner,
.etheme-product-hover-mask3::before,
.etheme-product-hover-mask3::after { display: none !important; }

/* ----------------------------------------------------------------- body */
.etheme-product-grid-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 4px 18px 20px !important;
	text-align: center;
	background: transparent;
}

/* collection / category line */
.vs-card__line,
.etheme-product-grid-categories {
	margin: 0 0 10px !important;
	font-family: var(--vy-sans);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vy-muted);
	-webkit-text-fill-color: var(--vy-muted);
	order: 1;
}
.etheme-product-grid-categories a {
	color: var(--vy-muted) !important;
	-webkit-text-fill-color: var(--vy-muted);
	text-decoration: none;
	font-size: inherit;
	letter-spacing: inherit;
}

/* title */
.vs-card__title,
.etheme-product-grid-title,
ul.products > li.product .woocommerce-loop-product__title {
	margin: 0 0 4px !important;
	padding: 0 !important;
	order: 0;
}
.vs-card__title a,
.etheme-product-grid-title a,
ul.products > li.product .woocommerce-loop-product__title a {
	font-family: var(--vy-serif) !important;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vy-text) !important;
	-webkit-text-fill-color: var(--vy-text);
}
.vs-card__title a:hover,
.etheme-product-grid-title a:hover {
	color: var(--vy-gold-dk) !important;
	-webkit-text-fill-color: var(--vy-gold-dk);
}

/* rating */
.etheme-product-grid-item .star-rating-wrapper { order: 2; margin: 0 auto 6px; }
.etheme-product-grid-item .star-rating-wrapper:empty { display: none; }

/* price */
.vs-card__price,
.etheme-product-grid-content > .price,
ul.products > li.product .price {
	order: 3;
	margin: auto 0 0 !important;
	padding: 6px 0 16px !important;
	font-family: var(--vy-serif) !important;
	font-size: 21px !important;
	color: var(--vy-text) !important;
	-webkit-text-fill-color: var(--vy-text);
	display: block;
}
.vs-card__price .amount, .vs-card__price .woocommerce-Price-amount,
.vs-card__price .woocommerce-Price-currencySymbol,
.etheme-product-grid-content .price .amount,
.etheme-product-grid-content .price .woocommerce-Price-amount,
.etheme-product-grid-content .price .woocommerce-Price-currencySymbol,
ul.products > li.product .price .woocommerce-Price-amount {
	color: var(--vy-text) !important;
	-webkit-text-fill-color: var(--vy-text);
	font-size: inherit;
}
.vs-card__price del, .etheme-product-grid-content .price del { opacity: 0.45; font-size: 16px; margin-right: 6px; }
.vs-card__price ins, .etheme-product-grid-content .price ins { text-decoration: none; background: transparent; }

/* ---- button: ONE spec shared by every in-card action ---- */
.vs-card__cta .button,
.vs-card__cta a.button,
.vs-card__cta .added_to_cart,
.etheme-product-grid-button,
.etheme-product-grid-content > a.button,
ul.products > li.product > a.button {
	order: 4;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: var(--vs-cbtn-h);
	min-height: var(--vs-cbtn-h);
	padding: 0 16px !important;
	margin: 0 !important;
	border: 1px solid var(--vy-gold) !important;
	border-radius: var(--vy-btn-r);
	background: transparent !important;
	color: var(--vy-gold-dk) !important;
	-webkit-text-fill-color: var(--vy-gold-dk);
	font-family: var(--vy-sans) !important;
	font-size: 11.5px !important;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	box-sizing: border-box;
	transition: background 180ms ease, color 180ms ease;
}
.vs-card__cta .button:hover,
.vs-card__cta a.button:hover,
.etheme-product-grid-button:hover,
.etheme-product-grid-content > a.button:hover {
	background: var(--vy-gold) !important;
	color: var(--vy-on-gold) !important;
	-webkit-text-fill-color: var(--vy-on-gold);
}
/* XStore puts an icon inside the button; our card is text-only. */
.etheme-product-grid-button > svg,
.etheme-product-grid-button .et-icon { display: none !important; }
.etheme-product-grid-button .button-text { font: inherit; letter-spacing: inherit; }

.vs-card__cta .added_to_cart {
	margin-top: 8px !important;
	background: var(--vy-surface-2) !important;
	border-color: var(--vy-line) !important;
	color: var(--vy-text) !important;
	-webkit-text-fill-color: var(--vy-text);
}
.vs-card__cta .button.loading { opacity: 0.6; }
.vs-card__cta .button.added { display: none; }

/* ----------------------------------------------------------------- flags */
.vs-card__flag {
	position: absolute;
	top: 12px; left: 12px; z-index: 2;
	background: var(--vy-deep);
	color: var(--vy-gold);
	-webkit-text-fill-color: var(--vy-gold);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 10px;
}
.vs-card__flag--out { background: #7E3B34; color: #fff; -webkit-text-fill-color: #fff; }

ul.products > li.product .onsale,
.etheme-product-grid-item .onsale {
	position: absolute;
	top: 12px; left: 12px; right: auto; z-index: 2;
	margin: 0;
	min-width: 0;
	min-height: 0;
	line-height: 1;
	border-radius: 0;
	background: var(--vy-deep) !important;
	color: var(--vy-gold) !important;
	-webkit-text-fill-color: var(--vy-gold);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 10px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
	ul.products, .etheme-product-grid { grid-template-columns: repeat(3, 1fr); }
	ul.products.columns-2, .etheme-product-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	ul.products, .etheme-product-grid,
	ul.products.columns-3, .etheme-product-grid.columns-3,
	ul.products.columns-4, .etheme-product-grid.columns-4,
	ul.products.columns-5, .etheme-product-grid.columns-5,
	ul.products.columns-6, .etheme-product-grid.columns-6 { grid-template-columns: repeat(2, 1fr); gap: 14px; }

	.vs-card__body, .etheme-product-grid-content { padding: 4px 12px 16px !important; }
	.vs-card__title a, .etheme-product-grid-title a { font-size: 16px; }
	.vs-card__price, .etheme-product-grid-content > .price { font-size: 18px !important; }
	.vs-card__cta .button, .etheme-product-grid-button { font-size: 10px !important; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
	ul.products > li.product, .etheme-product-grid-item,
	.vs-card__media img, .etheme-product-grid-image img { transition: none !important; }
}