/* ==========================================================================
   Envision Theme - product cards (shop, categories, [products], related, upsells)
   Options live in Envision > Product Cards (inc/product-cards.php).

   <ul class="products envision-pc envision-pcd--{design} envision-pch--{image hover} envision-pcc--{card hover}
        envision-pcr--{shape} envision-pcb--{solid box | box | flat} [envision-pct--dark|light] [envision-on-dark]">
     <li class="product">
       <a class="woocommerce-loop-product__link">
         <span class="envision-pc-media"> .onsale · img · img.envision-hover-image · .envision-pc-view </span>
         <h2 class="woocommerce-loop-product__title"> · .envision-loop-cats · .star-rating · .price
       </a>
       <a class="button">                                   (Add to cart - optional)

   Colours are always read as  var(--pcu-x, var(--pc-x)):
     --pc-x   what the design uses (the light values are swapped in on dark sections)
     --pcu-x  what the site owner picked in the settings (printed inline, always wins)
   ========================================================================== */

/* ---------- 1. Tokens: these defaults are the old ("Classic") look ---------- */
ul.products.envision-pc li.product {
	--pc-bg: transparent;
	--pc-title: var(--envision-ink);
	--pc-title-hover: var(--pc-title);
	--pc-price: #958e09;
	--pc-meta: var(--envision-slate);
	--pc-border: var(--envision-line);
	--pc-btn-bg: #ebe9eb;
	--pc-btn-text: #515151;
	--pc-badge-bg: #958e09;
	--pc-badge-text: #fff;
	--pc-radius: 0px;
	--pc-media-r: 0px;
	--pc-media-gap: 1em;
	--pc-pad: 0px;
	--pc-shadow: none;
}

/* image shape (set by the "Image shape" option, or by the design itself for Minimal / Overlay) */
ul.products.envision-pcr--1-1 { --pc-ratio: 1 / 1; }
ul.products.envision-pcr--4-5 { --pc-ratio: 4 / 5; }
ul.products.envision-pcr--3-4 { --pc-ratio: 3 / 4; }
ul.products.envision-pcr--4-3 { --pc-ratio: 4 / 3; }

/* ---------- 2. The card box ---------- */
ul.products.envision-pc li.product {
	position: relative;
	color: var(--pcu-title, var(--pc-title));
	background: var(--pcu-bg, var(--pc-bg));
	border: var(--pc-border-w, 0) solid var(--pcu-border, var(--pc-border));
	border-radius: var(--pcu-radius, var(--pc-radius));
	box-shadow: var(--pc-shadow);
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

ul.products.envision-pc li.product > a.woocommerce-loop-product__link,
ul.products.envision-pc li.product > a.woocommerce-LoopProduct-link {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ---------- 3. Image box: picture, second picture, badge, "View product" label live in here, so nothing
        can ever cover the title or the price (the old hover image stretched over the whole link) ---------- */
ul.products.envision-pc li.product .envision-pc-media {
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	margin: 0 0 var(--pc-media-gap);
	border-radius: var(--pc-media-r);
	aspect-ratio: var(--pc-ratio, auto);
}
ul.products.envision-pc li.product .envision-pc-media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	box-shadow: none;
	transition: transform .5s ease, opacity .35s ease, filter .35s ease;
}
/* fixed shape: every picture is cropped to the same box */
ul.products.envision-pc[class*="envision-pcr--"]:not(.envision-pcr--auto) li.product .envision-pc-media > img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}
/* second picture (only printed for the "Second image" effects) */
ul.products.envision-pc li.product .envision-pc-media > img.envision-hover-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}

/* ---------- 4. Sale badge (kept inside the image: it used to be cut off at the corner) ---------- */
ul.products.envision-pc li.product .envision-pc-media .onsale {
	top: 8px;
	right: 8px;
	left: auto;
	margin: 0;
	z-index: 6;
	background-color: var(--pc-badge-bg);
	color: var(--pc-badge-text);
}

/* ---------- 5. Text ---------- */
ul.products.envision-pc li.product .woocommerce-loop-product__title {
	padding-left: var(--pc-pad);
	padding-right: var(--pc-pad);
	color: var(--pcu-title, var(--pc-title));
	transition: color .2s ease;
}
ul.products.envision-pc li.product:hover .woocommerce-loop-product__title,
ul.products.envision-pc li.product a:focus-visible .woocommerce-loop-product__title {
	color: var(--pcu-title-hover, var(--pc-title-hover));
}
ul.products.envision-pc li.product .envision-loop-cats {
	display: block;
	margin: 0 0 4px;
	padding: 0 var(--pc-pad);
	font-size: 12px;
	line-height: 1.4;
	color: var(--pcu-meta, var(--pc-meta));
}
ul.products.envision-pc li.product .star-rating {
	margin-left: var(--pc-pad);
	margin-right: var(--pc-pad);
}
ul.products.envision-pc li.product .price {
	padding-left: var(--pc-pad);
	padding-right: var(--pc-pad);
	color: var(--pcu-price, var(--pc-price));
}
ul.products.envision-pc li.product > .button {
	margin-left: var(--pc-pad);
	margin-right: var(--pc-pad);
	background: var(--pcu-btn-bg, var(--pc-btn-bg));
	color: var(--pcu-btn-text, var(--pc-btn-text));
	transition: filter .2s ease, opacity .25s ease, transform .25s ease;
}
ul.products.envision-pc li.product > .button:hover,
ul.products.envision-pc li.product > .button:focus-visible {
	background: var(--pcu-btn-bg, var(--pc-btn-bg));
	color: var(--pcu-btn-text, var(--pc-btn-text));
	filter: brightness(.92);
}

/* ---------- 6. Light text on dark sections ----------
   "Auto": main.js adds .envision-on-dark when the section behind the grid is dark.
   "Always light text" = .envision-pct--light.  Designs with their own card colour (shadow / dark / overlay) keep theirs. */
ul.products.envision-pc.envision-on-dark:not(.envision-pcb--solid) li.product,
ul.products.envision-pc.envision-pct--light:not(.envision-pcb--solid) li.product {
	--pc-title: #fff;
	--pc-title-hover: #fff;
	--pc-price: #fff;
	--pc-meta: rgba(255, 255, 255, .66);
	--pc-border: rgba(255, 255, 255, .24);
	--pc-btn-bg: #fff;
	--pc-btn-text: #14151a;
}
ul.products.envision-pcd--classic.envision-on-dark li.product,
ul.products.envision-pcd--classic.envision-pct--light li.product {
	--pc-price: #d9d04a;
}
/* "Always dark text" */
ul.products.envision-pc.envision-pct--dark:not(.envision-pcb--solid) li.product {
	--pc-title: #14151a;
	--pc-title-hover: #14151a;
	--pc-meta: #6b7280;
	--pc-border: #e5e3dc;
}

/* ==========================================================================
   7. Layout: Classic keeps WooCommerce's own float grid. Every other design is a CSS grid
   (columns follow WooCommerce's columns-N class, 3 on tablets, 2 on phones).
   ========================================================================== */
ul.products.envision-pc:where(:not(.envision-pcd--classic)) {
	--pc-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--pc-cols), minmax(0, 1fr));
	gap: 30px 22px;
	margin: 0 0 1em;
	padding: 0;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-1 { --pc-cols: 1; }
ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-2 { --pc-cols: 2; }
ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-3 { --pc-cols: 3; }
ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-4 { --pc-cols: 4; }
ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-5 { --pc-cols: 5; }
ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-6 { --pc-cols: 6; }
ul.products.envision-pc:where(:not(.envision-pcd--classic))::before,
ul.products.envision-pc:where(:not(.envision-pcd--classic))::after {
	content: none;
	display: none;
}
ul.products.envision-pc.envision-pc:where(:not(.envision-pcd--classic)) li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	clear: none;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product > a.woocommerce-loop-product__link,
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product .woocommerce-loop-product__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	padding-top: 2px;
	padding-bottom: 4px;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product .price {
	margin: auto 0 0;
	padding-top: 4px;
	font-size: 14px;
	font-weight: 600;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product .price del {
	color: var(--pcu-meta, var(--pc-meta));
	font-weight: 400;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product .price ins {
	color: inherit;
	text-decoration: none;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product .envision-pc-media .onsale {
	top: 10px;
	left: 10px;
	right: auto;
	min-width: 0;
	min-height: 0;
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	border-radius: 999px;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product > .button {
	display: block;
	margin-top: 10px;
	margin-bottom: 0;
	padding: 11px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	border: 0;
	border-radius: 8px;
}
ul.products.envision-pc:where(:not(.envision-pcd--classic)) li.product > .added_to_cart {
	display: block;
	margin: 8px var(--pc-pad) 0;
	font-size: 13px;
	text-align: center;
	color: var(--pcu-meta, var(--pc-meta));
}

@media (max-width: 960px) {
	ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-4,
	ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-5,
	ul.products.envision-pc:where(:not(.envision-pcd--classic)).columns-6 { --pc-cols: 3; }
}
@media (max-width: 768px) {
	ul.products.envision-pc:where(:not(.envision-pcd--classic)):not(.columns-1) { --pc-cols: 2; gap: 22px 14px; }
}

/* ==========================================================================
   8. Designs
   ========================================================================== */

/* classic: unchanged layout; only the image box + badge position are fixed */
ul.products.envision-pcd--classic li.product .envision-pc-media {
	margin-bottom: 1em;
}

/* --- shadow: rounded card with a soft shadow --- */
ul.products.envision-pcd--shadow li.product {
	--pc-bg: var(--envision-surface);
	--pc-title: var(--envision-ink);
	--pc-title-hover: var(--envision-accent);
	--pc-price: var(--envision-accent);
	--pc-meta: var(--envision-slate);
	--pc-badge-bg: var(--envision-accent);
	--pc-btn-bg: var(--envision-accent);
	--pc-btn-text: #fff;
	--pc-radius: 14px;
	--pc-pad: 16px;
	--pc-media-gap: 12px;
	--pc-shadow: 0 2px 14px rgba(20, 21, 26, .09);
	overflow: hidden;
	padding-bottom: var(--pc-pad);
}

/* --- bordered: thin outline --- */
ul.products.envision-pcd--bordered li.product {
	--pc-title-hover: var(--envision-accent);
	--pc-price: var(--envision-ink);
	--pc-radius: 10px;
	--pc-pad: 14px;
	--pc-border-w: 1px;
	--pc-media-gap: 12px;
	--pc-btn-bg: var(--envision-ink);
	--pc-btn-text: var(--envision-paper);
	--pc-badge-bg: var(--envision-accent);
	overflow: hidden;
	padding-bottom: var(--pc-pad);
}

/* --- minimal: square picture, small caps title --- */
ul.products.envision-pcd--minimal li.product {
	--pc-price: var(--pc-title);
	--pc-media-gap: 12px;
	--pc-badge-bg: var(--envision-ink);
	--pc-btn-bg: transparent;
	--pc-btn-text: var(--pc-title);
}
ul.products.envision-pcd--minimal li.product .woocommerce-loop-product__title {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
ul.products.envision-pcd--minimal li.product .envision-loop-cats { font-size: 11px; letter-spacing: .03em; }
ul.products.envision-pcd--minimal li.product .price { font-size: 13px; font-weight: 500; }
ul.products.envision-pcd--minimal li.product .envision-pc-media .onsale { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding: 4px 9px; }
ul.products.envision-pcd--minimal li.product > .button {
	border: 1px solid currentColor;
	border-radius: 0;
}

/* --- overlay: text sits on the picture --- */
ul.products.envision-pcd--overlay li.product {
	--pc-bg: #14151a;
	--pc-title: #fff;
	--pc-title-hover: #fff;
	--pc-price: #fff;
	--pc-meta: rgba(255, 255, 255, .8);
	--pc-badge-bg: var(--envision-accent);
	--pc-btn-bg: #fff;
	--pc-btn-text: #14151a;
	--pc-radius: 16px;
	--pc-media-gap: 0px;
	--pc-shadow: 0 2px 14px rgba(20, 21, 26, .12);
	overflow: hidden;
}
ul.products.envision-pcd--overlay li.product > a.woocommerce-loop-product__link,
ul.products.envision-pcd--overlay li.product > a.woocommerce-LoopProduct-link {
	justify-content: flex-end;
	aspect-ratio: var(--pc-ratio, 3 / 4);
}
ul.products.envision-pcd--overlay li.product .envision-pc-media {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
	aspect-ratio: auto;
}
ul.products.envision-pcd--overlay li.product .envision-pc-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(10, 10, 14, .86) 0%, rgba(10, 10, 14, .42) 36%, rgba(10, 10, 14, 0) 64%);
}
ul.products.envision-pcd--overlay li.product .woocommerce-loop-product__title,
ul.products.envision-pcd--overlay li.product .envision-loop-cats,
ul.products.envision-pcd--overlay li.product .star-rating,
ul.products.envision-pcd--overlay li.product .price {
	position: relative;
	z-index: 2;
}
ul.products.envision-pcd--overlay li.product .woocommerce-loop-product__title { font-size: 16px; padding-left: 16px; padding-right: 16px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
ul.products.envision-pcd--overlay li.product .envision-loop-cats { padding-left: 16px; padding-right: 16px; }
ul.products.envision-pcd--overlay li.product .star-rating { margin-left: 16px; margin-right: 16px; }
ul.products.envision-pcd--overlay li.product .price { margin-top: 0; padding: 4px 16px 16px; }
ul.products.envision-pcd--overlay li.product > .button {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 7;
	margin: 0;
	padding: 8px 14px;
	font-size: 12px;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(-6px);
}
ul.products.envision-pcd--overlay li.product:hover > .button,
ul.products.envision-pcd--overlay li.product > .button:focus-visible {
	opacity: 1;
	transform: none;
}
ul.products.envision-pcd--overlay li.product > .added_to_cart { display: none; }
ul.products.envision-pcd--overlay li.product .envision-pc-media .onsale { top: 12px; left: 12px; }
@media (hover: none) {
	ul.products.envision-pcd--overlay li.product > .button { opacity: 1; transform: none; }
}

/* --- centered --- */
ul.products.envision-pcd--centered li.product {
	text-align: center;
	--pc-title-hover: var(--envision-accent);
	--pc-price: var(--envision-accent);
	--pc-media-r: var(--pcu-radius, 10px);
	--pc-media-gap: 14px;
	--pc-btn-bg: var(--envision-ink);
	--pc-btn-text: var(--envision-paper);
	--pc-badge-bg: var(--envision-accent);
}
ul.products.envision-pcd--centered li.product .star-rating { margin-left: auto; margin-right: auto; }
ul.products.envision-pcd--centered li.product > .button { width: 100%; margin-left: 0; margin-right: 0; }

/* --- compact: smaller type, tighter spacing (5-6 columns) --- */
ul.products.envision-pc.envision-pcd--compact:not(.columns-1) { gap: 20px 14px; }
ul.products.envision-pcd--compact li.product {
	--pc-title-hover: var(--envision-accent);
	--pc-price: var(--pc-title);
	--pc-media-r: var(--pcu-radius, 6px);
	--pc-media-gap: 8px;
	--pc-btn-bg: var(--envision-ink);
	--pc-btn-text: var(--envision-paper);
	--pc-badge-bg: var(--envision-accent);
}
ul.products.envision-pcd--compact li.product .woocommerce-loop-product__title { font-size: 13px; line-height: 1.3; padding-top: 0; padding-bottom: 2px; }
ul.products.envision-pcd--compact li.product .envision-loop-cats { font-size: 11px; margin-bottom: 2px; }
ul.products.envision-pcd--compact li.product .price { font-size: 12.5px; padding-top: 2px; }
ul.products.envision-pcd--compact li.product .envision-pc-media .onsale { top: 6px; left: 6px; padding: 3px 8px; font-size: 11px; }
ul.products.envision-pcd--compact li.product > .button { margin-top: 8px; padding: 8px 10px; font-size: 12px; border-radius: 6px; }

/* --- badge: a "-30%" ribbon --- */
ul.products.envision-pcd--badge li.product {
	--pc-title-hover: var(--envision-accent);
	--pc-price: var(--pc-title);
	--pc-media-r: var(--pcu-radius, 10px);
	--pc-media-gap: 12px;
	--pc-badge-bg: #e11d48;
	--pc-btn-bg: var(--envision-ink);
	--pc-btn-text: var(--envision-paper);
}
ul.products.envision-pcd--badge li.product .price { font-weight: 700; }
ul.products.envision-pc.envision-pcd--badge li.product .envision-pc-media .onsale {
	top: 12px;
	left: 0;
	padding: 5px 12px 5px 10px;
	border-radius: 0 6px 6px 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* --- dark: dark panel, light text --- */
ul.products.envision-pcd--dark li.product {
	--pc-bg: #14151a;
	--pc-title: #fff;
	--pc-title-hover: rgba(255, 255, 255, .78);
	--pc-price: #fff;
	--pc-meta: rgba(255, 255, 255, .62);
	--pc-border: rgba(255, 255, 255, .14);
	--pc-btn-bg: #fff;
	--pc-btn-text: #14151a;
	--pc-badge-bg: var(--envision-accent);
	--pc-radius: 14px;
	--pc-pad: 16px;
	--pc-media-gap: 12px;
	--pc-shadow: 0 6px 24px rgba(20, 21, 26, .2);
	overflow: hidden;
	padding-bottom: var(--pc-pad);
}

/* ==========================================================================
   9. Image hover effects (mouse devices only; touch screens simply show the normal picture)
   ========================================================================== */
@media (hover: hover) {
	/* second image */
	ul.products.envision-pch--swap li.product:hover .envision-pc-media > img.envision-hover-image { opacity: 1; }
	ul.products.envision-pch--slide li.product .envision-pc-media > img.envision-hover-image { opacity: 1; transform: translateX(100%); }
	ul.products.envision-pch--slide li.product:hover .envision-pc-media > img.envision-hover-image { transform: none; }
	ul.products.envision-pch--slide li.product:hover .envision-pc-media > img:not(.envision-hover-image) { transform: translateX(-100%); }
	/* products without a second picture get a gentle zoom instead */
	ul.products.envision-pch--swap li.product:not(.envision-has-hover):hover .envision-pc-media > img,
	ul.products.envision-pch--slide li.product:not(.envision-has-hover):hover .envision-pc-media > img { transform: scale(1.06); }

	ul.products.envision-pch--zoom li.product:hover .envision-pc-media > img { transform: scale(1.08); }

	ul.products.envision-pch--zoom-out li.product .envision-pc-media > img { transform: scale(1.12); }
	ul.products.envision-pch--zoom-out li.product:hover .envision-pc-media > img { transform: scale(1); }

	ul.products.envision-pch--tilt li.product:hover .envision-pc-media > img { transform: scale(1.1) rotate(2deg); }

	ul.products.envision-pch--grayscale li.product .envision-pc-media > img { filter: grayscale(1); }
	ul.products.envision-pch--grayscale li.product:hover .envision-pc-media > img { filter: grayscale(0); }

	ul.products.envision-pch--darken li.product .envision-pc-media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		background: rgba(10, 10, 14, .46);
		opacity: 0;
		transition: opacity .3s ease;
		pointer-events: none;
	}
	ul.products.envision-pch--darken li.product:hover .envision-pc-media::after { opacity: 1; }
	ul.products.envision-pch--darken li.product .envision-pc-view {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 4;
		padding: 10px 20px;
		border-radius: 999px;
		background: #fff;
		color: #14151a;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: .02em;
		white-space: nowrap;
		opacity: 0;
		transform: translate(-50%, -35%);
		transition: opacity .3s ease, transform .3s ease;
		pointer-events: none;
	}
	ul.products.envision-pch--darken li.product:hover .envision-pc-view { opacity: 1; transform: translate(-50%, -50%); }
}

/* ==========================================================================
   10. Card hover effects. Designs with a visible box (solid / bordered) move or glow as a whole;
   flat designs (just picture + text) apply the effect to the picture so the text never gets a box.
   ========================================================================== */
@media (hover: hover) {
	ul.products.envision-pcc--lift li.product:hover { transform: translateY(-6px); z-index: 3; }
	ul.products.envision-pcc--lift.envision-pcb--box li.product:hover { box-shadow: 0 16px 34px rgba(20, 21, 26, .16); }

	ul.products.envision-pcc--shadow.envision-pcb--box li.product:hover { box-shadow: 0 18px 40px rgba(20, 21, 26, .2); }
	ul.products.envision-pcc--shadow.envision-pcb--flat li.product:hover .envision-pc-media { box-shadow: 0 14px 30px rgba(20, 21, 26, .22); }

	ul.products.envision-pcc--border.envision-pcb--box li.product:hover { border-color: var(--envision-accent); box-shadow: 0 0 0 1px var(--envision-accent); }
	ul.products.envision-pcc--border.envision-pcb--flat li.product:hover .envision-pc-media { box-shadow: 0 0 0 2px var(--envision-accent); }

	ul.products.envision-pcc--scale li.product:hover { transform: scale(1.03); z-index: 3; }
	ul.products.envision-pcc--scale.envision-pcb--box li.product:hover { box-shadow: 0 16px 34px rgba(20, 21, 26, .16); }
}

@media (prefers-reduced-motion: reduce) {
	ul.products.envision-pc li.product,
	ul.products.envision-pc li.product * ,
	ul.products.envision-pc li.product *::before,
	ul.products.envision-pc li.product *::after {
		transition: none !important;
	}
}