/* ============================================================
   Vedivar — Product Card Component
   Mobile-first. Used in every WooCommerce loop context.

   Architecture:
   1.  CSS tokens (card-specific)
   2.  Card shell + contain
   3.  Figure / image area
       3a. Image & placeholder
       3b. Badges (sale %, new, sold out)
       3c. Wishlist button
       3d. Hover overlay (Quick View + Quick Add)
   4.  Card body
       4a. Eyebrow / category
       4b. Title
       4c. Gold divider rule
       4d. Price row
       4e. Star rating
       4f. Low-stock note
       4g. CTA button row
   5.  ATC button states (idle / loading / added)
   6.  Skeleton loading state
   7.  Context modifiers
       7a. Related products (compact)
       7b. Homepage featured (tall)
       7c. Search results
   8.  Responsive breakpoints
       8a. ≤1024px
       8b. ≤768px
       8c. ≤480px
       8d. ≤390px
   9.  Reduced-motion overrides
   10. Grid container (products.columns-N)
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. CARD-SPECIFIC TOKENS
   ───────────────────────────────────────────────────────────── */

:root {
	--card-radius:        4px;
	--card-img-ratio:     5 / 6;    /* portrait: 460×552 */
	--card-body-pad:      14px;
	--card-transition:    250ms ease;
	--card-hover-lift:    translateY(-3px);
	--card-overlay-bg:    rgba(42, 36, 32, 0.90);
	--card-badge-radius:  2px;
	--card-badge-pad:     4px 9px;
	--card-badge-font:    9px;
	--wishlist-size:      34px;
	--wishlist-icon:      18px;
	--overlay-btn-height: 36px;
	--spinner-size:       14px;
}

/* ─────────────────────────────────────────────────────────────
   2. CARD SHELL
   ───────────────────────────────────────────────────────────── */

.vedivar-product-card {
	/* Layout */
	display: flex;
	flex-direction: column;
	position: relative;

	/* Visuals */
	background: var(--color-ivory);
	border: 0.5px solid var(--color-parchment);
	border-radius: var(--card-radius);
	overflow: hidden;

	/* Perf: contain layout + paint so hover effects don't repaint neighbours */
	contain: layout paint;

	/* Transitions */
	transition:
		border-color var(--card-transition),
		box-shadow   var(--card-transition),
		transform    var(--card-transition);

	/* Ensure stacking context for z-index children */
	isolation: isolate;
}

.vedivar-product-card:hover {
	border-color: var(--color-gold);
	box-shadow: var(--shadow-hover);
	transform: var(--card-hover-lift);
}

/* ─────────────────────────────────────────────────────────────
   3. FIGURE / IMAGE AREA
   ───────────────────────────────────────────────────────────── */

.vedivar-product-card__figure {
	position: relative;
	aspect-ratio: var(--card-img-ratio);
	overflow: hidden;
	background: var(--color-beige);
	flex-shrink: 0;
}

/* ── 3a. Image ─────────────────────────────────────────────── */

.vedivar-product-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.vedivar-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.55s ease;

	/* Prevents layout shift while loading */
	aspect-ratio: var(--card-img-ratio);
}

.vedivar-product-card__img--placeholder {
	opacity: 0.6;
}

/* Subtle zoom on hover */
.vedivar-product-card:hover .vedivar-product-card__img {
	transform: scale(1.05);
}

/* ── 3b. Badges ────────────────────────────────────────────── */

.vedivar-product-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}

.vedivar-product-card__badge {
	display: inline-block;
	font-family: var(--font-inter);
	font-size: var(--card-badge-font);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--card-badge-pad);
	border-radius: var(--card-badge-radius);
	line-height: 1;
	white-space: nowrap;
}

.vedivar-product-card__badge--sale {
	background: var(--color-maroon);
	color: var(--color-ivory);
}

.vedivar-product-card__badge--new {
	background: var(--color-charcoal);
	color: var(--color-ivory);
}

.vedivar-product-card__badge--sold-out {
	background: rgba(42, 36, 32, 0.65);
	color: var(--color-ivory);
}

/* ── 3c. Wishlist button ───────────────────────────────────── */

.vedivar-product-card__wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;

	/* Size */
	width: var(--wishlist-size);
	height: var(--wishlist-size);

	/* Appearance */
	background: rgba(248, 244, 237, 0.92);
	border: none;
	border-radius: 50%;
	backdrop-filter: blur(4px);

	/* Layout */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;

	/* Transitions */
	transition:
		background    var(--card-transition),
		transform     var(--card-transition),
		box-shadow    var(--card-transition);

	/* Hidden on mobile until explicitly tapped (see responsive section) */
	opacity: 0;
	transform: scale(0.8);
}

.vedivar-product-card__wishlist svg {
	width: var(--wishlist-icon);
	height: var(--wishlist-icon);
	stroke: var(--color-charcoal);
	fill: none;
	transition: stroke var(--card-transition), fill var(--card-transition);
}

/* Show on card hover (desktop) */
.vedivar-product-card:hover .vedivar-product-card__wishlist,
.vedivar-product-card__wishlist:focus-visible {
	opacity: 1;
	transform: scale(1);
}

/* Active / added state */
.vedivar-product-card__wishlist.is-active svg {
	stroke: var(--color-maroon);
	fill: var(--color-maroon);
}

.vedivar-product-card__wishlist:hover {
	background: var(--color-ivory);
	box-shadow: 0 2px 8px rgba(42, 36, 32, 0.12);
}

.vedivar-product-card__wishlist:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-gold);
}

/* Touch: always visible on touch devices */
@media (hover: none) {
	.vedivar-product-card__wishlist {
		opacity: 1;
		transform: scale(1);
	}
}

/* ── 3d. Hover overlay (Quick View + Quick Add) ────────────── */

.vedivar-product-card__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;

	display: flex;
	gap: 6px;
	padding: 10px;

	background: var(--card-overlay-bg);
	backdrop-filter: blur(2px);

	/* Hidden by default — slides up on hover */
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
}

.vedivar-product-card:hover .vedivar-product-card__overlay,
.vedivar-product-card:focus-within .vedivar-product-card__overlay {
	transform: translateY(0);
}

/* Overlay buttons */
.vedivar-product-card__overlay-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;

	height: var(--overlay-btn-height);
	padding: 0 10px;

	font-family: var(--font-inter);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;

	background: transparent;
	color: var(--color-ivory);
	border: 0.5px solid rgba(248, 244, 237, 0.35);
	border-radius: var(--radius-xs);
	cursor: pointer;

	transition:
		background var(--card-transition),
		border-color var(--card-transition),
		color var(--card-transition);
}

.vedivar-product-card__overlay-btn:hover {
	background: rgba(248, 244, 237, 0.12);
	border-color: rgba(248, 244, 237, 0.6);
}

.vedivar-product-card__overlay-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-gold);
}

/* Gold variant for ATC */
.vedivar-product-card__overlay-btn--gold {
	background: var(--color-gold);
	color: var(--color-charcoal);
	border-color: var(--color-gold);
}

.vedivar-product-card__overlay-btn--gold:hover {
	background: var(--color-gold-hover);
	border-color: var(--color-gold-hover);
}

/* Hide overlay on touch devices — too small to reliably hover */
@media (hover: none) {
	.vedivar-product-card__overlay { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   4. CARD BODY
   ───────────────────────────────────────────────────────────── */

.vedivar-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--card-body-pad);
	gap: 0;
}

/* ── 4a. Eyebrow / category ────────────────────────────────── */

.vedivar-product-card__eyebrow {
	font-family: var(--font-cormorant);
	font-style: italic;
	font-size: 11px;
	color: var(--color-gold);
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	line-height: 1.2;
}

.vedivar-product-card__eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* ── 4b. Title ─────────────────────────────────────────────── */

.vedivar-product-card__title {
	font-family: var(--font-cormorant);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-charcoal);
	line-height: 1.3;
	margin: 0 0 8px;

	/* Clamp to 2 lines to keep grid even */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.vedivar-product-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--card-transition);
}

.vedivar-product-card__title a:hover { color: var(--color-maroon); }
.vedivar-product-card__title a:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: 1px;
}

/* ── 4c. Gold divider rule ─────────────────────────────────── */

.vedivar-product-card__rule {
	border: none;
	border-top: 0.5px solid var(--color-parchment);
	margin: 6px 0 8px;
	flex-shrink: 0;
}

/* ── 4d. Price row ─────────────────────────────────────────── */

.vedivar-product-card__price-row {
	margin-bottom: 7px;
}

/* WooCommerce injects .price span */
.vedivar-product-card__price-row .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--font-inter);
	font-size: 15px;
	font-weight: 500;
	color: var(--color-charcoal);
	line-height: 1;
}

.vedivar-product-card__price-row .price del {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-sandalwood);
	text-decoration: line-through;
	opacity: 0.8;
}

.vedivar-product-card__price-row .price del .woocommerce-Price-amount {
	color: var(--color-sandalwood);
}

.vedivar-product-card__price-row .price ins {
	text-decoration: none;
	color: var(--color-maroon);
	font-weight: 600;
}

.vedivar-product-card__price-row .price ins .woocommerce-Price-amount {
	color: var(--color-maroon);
}

/* ── 4e. Star rating ───────────────────────────────────────── */

.vedivar-product-card__rating {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
}

/* WC star-rating override — use CSS mask so no font-icon needed */
.vedivar-product-card__rating .star-rating {
	float: none;
	font-size: 12px;
	color: var(--color-gold);
	letter-spacing: 1px;
	overflow: hidden;
	position: relative;
	height: 1.2em;
	line-height: 1.2;
	display: inline-block;
	white-space: nowrap;
}

.vedivar-product-card__rating .star-rating::before {
	content: '\73\73\73\73\73'; /* sssss — WC star char */
	color: var(--color-parchment);
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}

.vedivar-product-card__rating .star-rating > span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.vedivar-product-card__rating .star-rating > span::before {
	content: '\73\73\73\73\73';
	top: 0;
	position: absolute;
	left: 0;
	color: var(--color-gold);
}

.vedivar-product-card__review-count {
	font-family: var(--font-inter);
	font-size: 11px;
	color: var(--color-sandalwood);
	letter-spacing: 0.02em;
}

/* ── 4f. Stock note ────────────────────────────────────────── */

.vedivar-product-card__stock-note {
	font-family: var(--font-inter);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-maroon);
	margin: 0 0 6px;
}

/* ── 4g. CTA area ──────────────────────────────────────────── */

.vedivar-product-card__cta {
	margin-top: auto;
	padding-top: 10px;
}

.vedivar-product-card__sold-out {
	display: inline-block;
	font-family: var(--font-inter);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-sandalwood);
	padding: 10px 0;
}

.vedivar-product-card__atc-btn {
	width: 100%;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   5. ATC BUTTON STATES
   ───────────────────────────────────────────────────────────── */

/* The three layers inside the button */
.vedivar-atc-btn__label,
.vedivar-atc-btn__added,
.vedivar-atc-btn__spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Default: label visible */
.vedivar-atc-btn__label  { opacity: 1;  transform: translateY(0); position: static; }
.vedivar-atc-btn__added  { opacity: 0;  transform: translateY(8px); }
.vedivar-atc-btn__spinner{ opacity: 0; }

/* Loading state */
.vedivar-atc-btn.is-loading .vedivar-atc-btn__label   { opacity: 0; transform: translateY(-8px); }
.vedivar-atc-btn.is-loading .vedivar-atc-btn__spinner  { opacity: 1; }

/* Added state */
.vedivar-atc-btn.is-added .vedivar-atc-btn__label  { opacity: 0; transform: translateY(-8px); }
.vedivar-atc-btn.is-added .vedivar-atc-btn__added  { opacity: 1; transform: translateY(0); }

/* Added: temporary green tint */
.vedivar-atc-btn.is-added {
	background: var(--color-success);
	border-color: var(--color-success);
}

/* Spinner (CSS-only, no images) */
.vedivar-atc-btn__spinner::after {
	content: '';
	display: block;
	width: var(--spinner-size);
	height: var(--spinner-size);
	border: 1.5px solid rgba(248, 244, 237, 0.3);
	border-top-color: var(--color-ivory);
	border-radius: 50%;
	animation: vedivar-spin 0.7s linear infinite;
}

@keyframes vedivar-spin {
	to { transform: rotate(360deg); }
}

/* Disabled state during request */
.vedivar-atc-btn:disabled {
	opacity: 0.75;
	pointer-events: none;
	cursor: not-allowed;
}

/* Overlay ATC button shares the same state classes */
.vedivar-product-card__overlay-btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
}
.vedivar-product-card__overlay-btn.is-added {
	background: var(--color-success);
	border-color: var(--color-success);
	color: var(--color-ivory);
}

/* ─────────────────────────────────────────────────────────────
   6. SKELETON LOADING STATE
   Used when cards are rendered via AJAX before real data arrives.
   Add class="vedivar-product-card vedivar-product-card--skeleton"
   to show the shimmer placeholder.
   ───────────────────────────────────────────────────────────── */

@keyframes vedivar-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

.vedivar-product-card--skeleton {
	pointer-events: none;
}

.vedivar-product-card--skeleton .vedivar-product-card__figure,
.vedivar-product-card--skeleton .vedivar-product-card__eyebrow,
.vedivar-product-card--skeleton .vedivar-product-card__title,
.vedivar-product-card--skeleton .vedivar-product-card__rule,
.vedivar-product-card--skeleton .vedivar-product-card__price-row,
.vedivar-product-card--skeleton .vedivar-product-card__rating,
.vedivar-product-card--skeleton .vedivar-product-card__atc-btn {
	background: linear-gradient(
		90deg,
		var(--color-beige)    25%,
		var(--color-parchment) 37%,
		var(--color-beige)    63%
	);
	background-size: 800px 100%;
	animation: vedivar-shimmer 1.6s ease infinite;
	border-radius: 2px;
	color: transparent;
}

/* Skeleton dimension hints */
.vedivar-product-card--skeleton .vedivar-product-card__eyebrow { height: 12px; width: 60%; }
.vedivar-product-card--skeleton .vedivar-product-card__title   { height: 40px; }
.vedivar-product-card--skeleton .vedivar-product-card__price-row { height: 20px; width: 40%; }
.vedivar-product-card--skeleton .vedivar-product-card__rating  { height: 14px; width: 55%; }
.vedivar-product-card--skeleton .vedivar-product-card__atc-btn { height: 44px; }

/* Suppress real content in skeleton */
.vedivar-product-card--skeleton .vedivar-product-card__img,
.vedivar-product-card--skeleton .vedivar-product-card__badges,
.vedivar-product-card--skeleton .vedivar-product-card__wishlist,
.vedivar-product-card--skeleton .vedivar-product-card__overlay {
	opacity: 0;
}

/* ─────────────────────────────────────────────────────────────
   7. CONTEXT MODIFIERS
   ───────────────────────────────────────────────────────────── */

/* ── 7a. Related / upsell / cross-sell (compact) ─────────────
   WC adds .related, .upsells, .cross-sells to the section.      */

.related .vedivar-product-card,
.upsells .vedivar-product-card,
.cross-sells .vedivar-product-card {
	--card-img-ratio: 1 / 1;    /* square image in related rows */
}

.related .vedivar-product-card__title,
.upsells .vedivar-product-card__title,
.cross-sells .vedivar-product-card__title {
	font-size: 14px;
	-webkit-line-clamp: 1;
}

/* ── 7b. Homepage featured (wider, taller) ───────────────────
   Apply .vedivar-products--featured to the <ul> wrapper.        */

.vedivar-products--featured .vedivar-product-card {
	--card-img-ratio: 4 / 5;
}

.vedivar-products--featured .vedivar-product-card__title {
	font-size: 18px;
}

/* ── 7c. Search results ──────────────────────────────────────
   Cards in search are the same shape — just reduce title size
   so it works at any grid density.                              */

.vedivar-search-page .vedivar-product-card__title {
	font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────
   8. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────── */

/* ── 8a. ≤1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.vedivar-product-card__title { font-size: 15px; }
	.vedivar-product-card__body  { padding: 12px; }
}

/* ── 8b. ≤768px — 2-column grid, card still full ──────────── */
@media (max-width: 768px) {
	:root {
		--card-body-pad: 12px;
	}

	/* Wishlist: always visible on mobile (touch can't hover) */
	.vedivar-product-card__wishlist {
		opacity: 1;
		transform: scale(1);
	}

	/* Overlay: hidden on touch — replaced by the body CTA button */
	.vedivar-product-card__overlay { display: none; }

	.vedivar-product-card__title { font-size: 14px; }

	/* Tighten body padding */
	.vedivar-product-card__eyebrow { font-size: 10px; }

	.vedivar-product-card__price-row .price { font-size: 14px; }
}

/* ── 8c. ≤480px — single-column or narrow 2-col ───────────── */
@media (max-width: 480px) {
	:root {
		--card-body-pad: 10px;
		--wishlist-size: 30px;
		--wishlist-icon: 15px;
	}

	.vedivar-product-card__title   { font-size: 14px; }
	.vedivar-product-card__eyebrow { font-size: 10px; }

	.vedivar-product-card__price-row .price    { font-size: 14px; }
	.vedivar-product-card__price-row .price del { font-size: 11px; }

	/* ATC button: slightly shorter */
	.vedivar-product-card__atc-btn { font-size: 10px; padding: 10px; }

	/* Badge: tiny */
	.vedivar-product-card__badge { font-size: 8px; padding: 3px 7px; }
}

/* ── 8d. ≤390px — smallest phones ─────────────────────────── */
@media (max-width: 390px) {
	:root {
		--card-body-pad: 9px;
	}

	.vedivar-product-card__title { font-size: 13px; }

	/* Remove rating on very small screens to reduce clutter */
	.vedivar-product-card__rating { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   9. REDUCED-MOTION OVERRIDES
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vedivar-product-card,
	.vedivar-product-card__img,
	.vedivar-product-card__overlay,
	.vedivar-product-card__wishlist,
	.vedivar-atc-btn__label,
	.vedivar-atc-btn__added,
	.vedivar-atc-btn__spinner {
		transition: none;
		animation:  none;
	}

	.vedivar-product-card:hover { transform: none; }
	.vedivar-product-card:hover .vedivar-product-card__img { transform: none; }

	/* Skeleton: static gradient without animation */
	.vedivar-product-card--skeleton .vedivar-product-card__figure,
	.vedivar-product-card--skeleton .vedivar-product-card__title {
		animation: none;
		background: var(--color-parchment);
	}

	/* Spinner: instant half-spin */
	.vedivar-atc-btn__spinner::after {
		animation: none;
		border-top-color: var(--color-ivory);
	}
}

/* ─────────────────────────────────────────────────────────────
   10. GRID CONTAINER (products.columns-N)
   WooCommerce adds this class to the <ul> wrapping all cards.
   ───────────────────────────────────────────────────────────── */

ul.products {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 20px;
}

/* WC appends columns-N class automatically based on loop_shop_columns filter */
ul.products.columns-1 { grid-template-columns: 1fr; }
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(2, 1fr); }
	ul.products { gap: 12px; }
}

@media (max-width: 480px) {
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 { grid-template-columns: repeat(2, 1fr); }
	ul.products { gap: 10px; }
}

@media (max-width: 360px) {
	ul.products { grid-template-columns: 1fr; }
}

/* Related products: always 4-across until mobile */
.related ul.products,
.upsells ul.products {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
	.related ul.products,
	.upsells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}