/*
 * APS Theme: the product card.
 *
 * ONE card for every list of products, in the design of the shop card (approved by the owner): white, 22px radius, a square
 * picture, a bold title that always reserves two lines, a blue price, gold stars only when the product has a rating, and a
 * full width gradient pill pinned to the bottom INSIDE the card. A row is as tall as its tallest card (grid stretch) and no
 * height is fixed anywhere.
 *
 * Three markups print the card, and this file styles all three so that no other file owns a card rule:
 *   1. WooCommerce loop    ul.products > li.product      shop, categories, product search, "Peptides Of The Week!" (shop)
 *   2. APS product grid    .aps-product-card             block aps/product-grid (home) and the "APS Related Products"
 *                                                        snippet (product pages: markup and CSS of the old Elementor widget)
 *   3. WooCommerce blocks  li.wc-block-grid__product     "New in store" on the empty cart
 *
 * Loaded by aps_theme_enqueue_product_card() (inc/assets.php) before shop.css and the page stylesheets, on every WooCommerce
 * page and on the front page. The pill of markups 1 and 3 is the shared button rule of shop.css; markup 2 has the same pill
 * here because the home page does not load shop.css. No dash character is typed in this file (the star is the escape \2605).
 */

/* ======================================================================
   1. Tokens. Spacing follows the steps of the grid: 2 columns up to 782px, 1 column up to 480px.
   ====================================================================== */

:root {
	--pc-radius: 22px;
	--pc-line: rgba(16, 47, 65, 0.08);
	--pc-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 14px 34px rgba(16, 47, 65, 0.07);
	--pc-shadow-hover: 0 1px 2px rgba(16, 47, 65, 0.05), 0 22px 46px rgba(16, 47, 65, 0.13);
	--pc-btn-shadow: 0 8px 20px rgba(8, 113, 179, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	--pc-btn-shadow-hover: 0 12px 26px rgba(8, 113, 179, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	--pc-gold: #e8a317;
	--pc-star-empty: #d3dce4;
	--pc-muted: #5b6b78;
	--pc-focus: var(--accent);
	--pc-t: 0.22s;
	--pc-gap: 24px;
	--pc-pad-x: 18px;
	--pc-pad-top: 16px;
	--pc-pad-bottom: 6px;
	--pc-btn-mt: 12px;
	--pc-btn-mb: 18px;
	--pc-btn-px: 26px;
	--pc-btn-size: 15px;
	--pc-title-size: 16px;
}
@media (max-width: 782px) {
	:root {
		--pc-gap: 16px;
		--pc-pad-x: 12px;
		--pc-pad-top: 12px;
		--pc-pad-bottom: 0px;
		--pc-btn-mt: 10px;
		--pc-btn-mb: 14px;
		--pc-btn-px: 14px;
		--pc-btn-size: 14px;
		--pc-title-size: 15px;
	}
}
@media (max-width: 480px) {
	:root {
		--pc-pad-x: 18px;
		--pc-pad-top: 16px;
		--pc-btn-mt: 12px;
		--pc-btn-mb: 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	:root { --pc-t: 0s; }
}

/* ======================================================================
   2. Grid: 4 columns, 3 up to 1100px, 2 up to 782px, 1 up to 480px, in every context (--pc-cols; the block attribute
   columns and the WooCommerce classes columns-N set the desktop value; the cart block always has 4).
   ====================================================================== */

body.woocommerce .aps-shop ul.products,
.aps-product-grid .aps-product-grid__list,
body .wc-block-grid ul.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(var(--pc-cols, 4), minmax(0, 1fr));
	gap: var(--pc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
body.woocommerce .aps-shop ul.products::before,
body.woocommerce .aps-shop ul.products::after { content: none; display: none; }
.aps-product-grid .aps-product-item { display: flex; min-width: 0; }

body.woocommerce .aps-shop ul.products.columns-3,
.aps-product-grid--c3 .aps-product-grid__list { --pc-cols: 3; }
body.woocommerce .aps-shop ul.products.columns-2,
.aps-product-grid--c2 .aps-product-grid__list { --pc-cols: 2; }
body.woocommerce .aps-shop ul.products.columns-1,
.aps-product-grid--c1 .aps-product-grid__list { --pc-cols: 1; }
.aps-product-grid--c5 .aps-product-grid__list { --pc-cols: 5; }
.aps-product-grid--c6 .aps-product-grid__list { --pc-cols: 6; }

@media (max-width: 1100px) {
	body.woocommerce .aps-shop ul.products,
	body.woocommerce .aps-shop ul.products.columns-4,
	.aps-product-grid--c4 .aps-product-grid__list,
	.aps-product-grid--c5 .aps-product-grid__list,
	.aps-product-grid--c6 .aps-product-grid__list,
	body .wc-block-grid ul.wc-block-grid__products { --pc-cols: 3; }
}
@media (max-width: 782px) {
	body.woocommerce .aps-shop ul.products,
	body.woocommerce .aps-shop ul.products.columns-4,
	body.woocommerce .aps-shop ul.products.columns-3,
	.aps-product-grid--c3 .aps-product-grid__list,
	.aps-product-grid--c4 .aps-product-grid__list,
	.aps-product-grid--c5 .aps-product-grid__list,
	.aps-product-grid--c6 .aps-product-grid__list,
	body .wc-block-grid ul.wc-block-grid__products { --pc-cols: 2; }
}
@media (max-width: 480px) {
	body.woocommerce .aps-shop ul.products,
	body.woocommerce .aps-shop ul.products.columns-4,
	body.woocommerce .aps-shop ul.products.columns-3,
	body.woocommerce .aps-shop ul.products.columns-2,
	.aps-product-grid .aps-product-grid__list,
	body .wc-block-grid ul.wc-block-grid__products { --pc-cols: 1; }
}

/* ======================================================================
   3. Box: a flex column, the button is the last item and is pushed to the bottom. Markup 1 carries body.woocommerce
   .aps-shop to win against the WooCommerce stylesheets and the Elementor kit.
   ====================================================================== */

body.woocommerce .aps-shop ul.products li.product,
.aps-product-grid .aps-product-card,
body .wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	float: none;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: #fff;
	box-shadow: var(--pc-shadow);
	text-align: center;
	opacity: 1;
	transform: none;
	animation: none;
	transition: transform var(--pc-t) var(--ease), box-shadow var(--pc-t) var(--ease);
}
body.woocommerce .aps-shop ul.products li.product:hover,
.aps-product-grid .aps-product-card:hover,
body .wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product:hover { box-shadow: var(--pc-shadow-hover); transform: translateY(-4px); }
body.woocommerce .aps-shop ul.products li.product .onsale { top: 14px; left: 14px; right: auto; margin: 0; }

/* Keyboard focus: the whole card gets the ring when a link in it has focus (picture link, title link or the single link of
   markup 1), so the ring has one shape everywhere. Without :has() the ring stays on the link itself. */
@supports selector(:has(a)) {
	body.woocommerce .aps-shop ul.products li.product a:focus-visible:not(.button),
	.aps-product-grid .aps-product-card a:focus-visible:not(.aps-product-button),
	body .wc-block-grid li.wc-block-grid__product a:focus-visible:not(.wp-block-button__link) { outline: 0; }
	body.woocommerce .aps-shop ul.products li.product:has(a:focus-visible:not(.button)),
	.aps-product-grid .aps-product-card:has(a:focus-visible:not(.aps-product-button)),
	body .wc-block-grid li.wc-block-grid__product:has(a:focus-visible:not(.wp-block-button__link)) { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
}

/* ======================================================================
   4. Picture: a square box, the same size at the same column width, the whole bottle visible.
   ====================================================================== */

/* The link around the picture (markup 1: around the title, price and stars as well, it takes the free height). */
body.woocommerce .aps-shop ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--pc-pad-top) var(--pc-pad-x) var(--pc-pad-bottom);
	color: var(--c-ink);
	text-decoration: none;
}
.aps-product-grid .aps-product-card .aps-product-image-link {
	display: block;
	flex: none;
	padding: var(--pc-pad-top) var(--pc-pad-x) 12px;
	color: inherit;
	text-decoration: none;
}
body .wc-block-grid li.wc-block-grid__product a.wc-block-grid__product-link {
	display: flex;
	flex: none;
	flex-direction: column;
	padding: var(--pc-pad-top) var(--pc-pad-x) 0;
	color: var(--c-ink);
	text-decoration: none;
}
body .wc-block-grid li.wc-block-grid__product .wc-block-grid__product-image { display: block; margin: 0 0 12px; }

body.woocommerce .aps-shop ul.products li.product a.woocommerce-LoopProduct-link img,
.aps-product-grid .aps-product-card .aps-product-image-link img,
body .wc-block-grid li.wc-block-grid__product .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	object-fit: contain;
	border-radius: 14px;
	background: #fff;
	transition: transform calc(var(--pc-t) * 2) var(--ease);
}
body.woocommerce .aps-shop ul.products li.product a.woocommerce-LoopProduct-link img { order: 1; margin: 0 0 12px; }
body.woocommerce .aps-shop ul.products li.product:hover a.woocommerce-LoopProduct-link img,
.aps-product-grid .aps-product-card:hover .aps-product-image-link img,
body .wc-block-grid li.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.04); }

/* Markup 2: the text block under the picture. */
.aps-product-grid .aps-product-card .aps-product-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: 0 var(--pc-pad-x);
}

/* ======================================================================
   5. Title: bold, two lines (more is cut with an ellipsis), the height of two lines is always reserved so the prices
   line up in a row. A long word without spaces breaks instead of leaving the card.
   ====================================================================== */

body.woocommerce .aps-shop ul.products li.product .woocommerce-loop-product__title,
.aps-product-grid .aps-product-card .aps-product-title,
body .wc-block-grid li.wc-block-grid__product .wc-block-grid__product-title {
	display: -webkit-box;
	box-sizing: border-box;
	width: 100%;
	min-height: 2.7em;
	max-height: 2.7em;
	margin: 0 0 8px;
	padding: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--pc-title-size);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	overflow-wrap: anywhere;
	text-align: center;
	text-transform: none;
	transition: color 0.18s var(--ease);
}
body.woocommerce .aps-shop ul.products li.product .woocommerce-loop-product__title { order: 2; }
.aps-product-grid .aps-product-card .aps-product-title a { color: inherit; font: inherit; text-decoration: none; }
body.woocommerce .aps-shop ul.products li.product:hover .woocommerce-loop-product__title,
.aps-product-grid .aps-product-card:hover .aps-product-title,
body .wc-block-grid li.wc-block-grid__product:hover .wc-block-grid__product-title { color: var(--deep); }

/* ======================================================================
   6. Price
   ====================================================================== */

body.woocommerce .aps-shop ul.products li.product .price,
.aps-product-grid .aps-product-card .aps-product-price,
body .wc-block-grid li.wc-block-grid__product .wc-block-grid__product-price {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	color: var(--c-primary);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
}
body.woocommerce .aps-shop ul.products li.product .price { order: 3; }
body .wc-block-grid li.wc-block-grid__product .wc-block-grid__product-price { padding: 0 var(--pc-pad-x); }
.aps-product-grid .aps-product-card .aps-product-price :is(.amount, bdi) { color: inherit; font-weight: inherit; }
.aps-product-grid .aps-product-card .aps-product-price del { margin-right: 4px; color: var(--pc-muted); font-weight: 500; opacity: 1; }
.aps-product-grid .aps-product-card .aps-product-price ins { background: none; color: inherit; text-decoration: none; }

/* ======================================================================
   7. Stars, only for a product that has a rating (WooCommerce prints none for an unrated one, the block prints none,
   the related products hide the row below). One drawing for every markup: five grey star glyphs with the same five in
   gold on top, cut at the rating (WooCommerce draws its own with an icon font). The review count stays for screen
   readers and is not shown, because the WooCommerce loop has no count and the card must be the same everywhere.
   ====================================================================== */

body.woocommerce .aps-shop ul.products li.product .star-rating,
.aps-product-grid .aps-product-card .aps-stars {
	position: relative;
	display: block;
	float: none;
	width: auto;
	height: 19px;
	margin: 0;
	padding: 0;
	overflow: visible;
	color: var(--pc-star-empty);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1.3px;
	white-space: nowrap;
}
body.woocommerce .aps-shop ul.products li.product .star-rating { order: 4; align-self: center; margin: 1px auto 6px; }
body.woocommerce .aps-shop ul.products li.product .star-rating::before,
body.woocommerce .aps-shop ul.products li.product .star-rating span::before { content: "\2605\2605\2605\2605\2605"; }
body.woocommerce .aps-shop ul.products li.product .star-rating::before { position: static; float: none; color: var(--pc-star-empty); }
body.woocommerce .aps-shop ul.products li.product .star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	padding: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}
body.woocommerce .aps-shop ul.products li.product .star-rating span::before { position: static; color: var(--pc-gold); font-size: 18px; line-height: 1; }

.aps-product-grid .aps-product-card .aps-product-rating { display: flex; align-items: center; justify-content: center; min-height: 20px; margin: 0 0 6px; }
.aps-product-grid .aps-product-card .aps-stars-background { display: block; color: var(--pc-star-empty); }
.aps-product-grid .aps-product-card .aps-stars-foreground {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: var(--aps-rating-width, 100%);
	height: 100%;
	overflow: hidden;
	color: var(--pc-gold);
}
.aps-product-grid .aps-stars--w0 { --aps-rating-width: 0%; }
.aps-product-grid .aps-stars--w10 { --aps-rating-width: 10%; }
.aps-product-grid .aps-stars--w20 { --aps-rating-width: 20%; }
.aps-product-grid .aps-stars--w30 { --aps-rating-width: 30%; }
.aps-product-grid .aps-stars--w40 { --aps-rating-width: 40%; }
.aps-product-grid .aps-stars--w50 { --aps-rating-width: 50%; }
.aps-product-grid .aps-stars--w60 { --aps-rating-width: 60%; }
.aps-product-grid .aps-stars--w70 { --aps-rating-width: 70%; }
.aps-product-grid .aps-stars--w80 { --aps-rating-width: 80%; }
.aps-product-grid .aps-stars--w90 { --aps-rating-width: 90%; }
.aps-product-grid .aps-product-card .aps-rating-count {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* A product without a rating (the snippet prints grey stars and no count for it): no row at all. */
.aps-product-grid .aps-product-card .aps-product-rating:not(:has(.aps-rating-count)) { display: none; }

/* ======================================================================
   8. Button: a full width pill inside the card, the same margins in every markup. The space above it is flexible, so it
   always sits at the bottom edge of the card, whatever the height of the neighbours.
   ====================================================================== */

/* Markup 1: the pill itself is the shared button rule of shop.css (.aps-shop a.button). */
body.woocommerce.woocommerce-page .aps-shop ul.products li.product .button {
	align-self: stretch;
	margin: var(--pc-btn-mt) var(--pc-pad-x) var(--pc-btn-mb);
	padding-inline: var(--pc-btn-px);
	font-size: var(--pc-btn-size);
}

/* Markup 2: the same pill, in a wrapper that takes the free space above it. */
.aps-product-grid .aps-product-card .aps-product-action {
	display: flex;
	margin: auto 0 var(--pc-btn-mb);
	padding: calc(var(--pc-pad-bottom) + var(--pc-btn-mt)) 0 0;
}
.aps-product-grid .aps-product-card .aps-product-button {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 46px;
	margin: 0;
	padding: 10px var(--pc-btn-px);
	border: 0;
	border-radius: 999px;
	background: var(--grad-cta);
	box-shadow: var(--pc-btn-shadow);
	color: #fff;
	font-family: inherit;
	font-size: var(--pc-btn-size);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: transform var(--pc-t) var(--ease), box-shadow var(--pc-t) var(--ease), filter var(--pc-t) var(--ease), opacity var(--pc-t) var(--ease);
}
.aps-product-grid .aps-product-card .aps-product-button:is(:hover, :focus-visible) { box-shadow: var(--pc-btn-shadow-hover); color: #fff; filter: brightness(1.03); transform: translateY(-1px); }
.aps-product-grid .aps-product-card .aps-product-button[aria-disabled="true"] { cursor: wait; opacity: 0.82; pointer-events: none; }
/* The spinner and the check mark of the add to cart script show only while needed: at rest the button is text only,
   like the button of markup 1. */
.aps-product-grid .aps-product-card .aps-button-status { position: relative; display: none; flex: 0 0 18px; align-items: center; justify-content: center; width: 18px; height: 18px; }
.aps-product-grid .aps-product-card .aps-product-button:is(.is-loading, .is-success) .aps-button-status { display: inline-flex; }
.aps-product-grid .aps-product-card .aps-button-cart-icon,
.aps-product-grid .aps-product-card .aps-button-check-icon { position: absolute; inset: 0; display: block; width: 18px; height: 18px; fill: currentColor; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
.aps-product-grid .aps-product-card .aps-button-check-icon { opacity: 0; transform: scale(0.55); }
.aps-product-grid .aps-product-card .aps-button-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	margin: -8.5px 0 0 -8.5px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.65);
}
.aps-product-grid .aps-product-card .aps-product-button:is(.is-loading, .is-success) .aps-button-cart-icon,
.aps-product-grid .aps-product-card .aps-product-button.is-loading .aps-button-check-icon,
.aps-product-grid .aps-product-card .aps-product-button.is-success .aps-button-spinner { opacity: 0; transform: scale(0.55); }
.aps-product-grid .aps-product-card .aps-product-button.is-loading .aps-button-spinner { opacity: 1; transform: scale(1); animation: aps-product-spin 0.65s linear infinite; }
.aps-product-grid .aps-product-card .aps-product-button.is-success .aps-button-check-icon { opacity: 1; transform: scale(1); }
@keyframes aps-product-spin { to { transform: rotate(360deg); } }
.aps-product-grid .aps-product-empty { margin: 0; padding: 20px; border: 1px solid var(--pc-line); border-radius: 14px; background: #fff; color: #59636e; font-size: 16px; line-height: 1.5; text-align: center; }

/* Markup 3: the pill comes from shop.css (the cart blocks are in its list); here it fills the card like the others. */
body .wc-block-grid li.wc-block-grid__product .wc-block-grid__product-add-to-cart.wp-block-button {
	display: flex;
	margin: auto 0 var(--pc-btn-mb);
	padding: calc(var(--pc-pad-bottom) + var(--pc-btn-mt)) var(--pc-pad-x) 0;
}
body .wc-block-grid li.wc-block-grid__product .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link { display: flex; flex: 1 1 auto; width: 100%; font-size: var(--pc-btn-size); }

/* Focus ring of the three buttons (the pill of markups 1 and 3 also lifts, see shop.css). */
body.woocommerce .aps-shop ul.products li.product .button:focus-visible,
.aps-product-grid .aps-product-card .aps-product-button:focus-visible,
body .wc-block-grid li.wc-block-grid__product .wp-block-button__link:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 3px; }

/* ======================================================================
   9. The "View cart" link WooCommerce adds under the button after an add to cart without a reload. The side cart plugin
   (xoo-wsc) hides it on the whole site today (.added_to_cart { display: none !important }), so this is the look it has
   if that rule goes away.
   ====================================================================== */

body.woocommerce .aps-shop ul.products li.product a.added_to_cart,
.aps-product-grid .aps-product-card a.added_to_cart,
body .wc-block-grid li.wc-block-grid__product a.added_to_cart { display: block; margin: 10px 0 0; padding: 0; color: var(--accent); font-size: 14px; font-weight: 700; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
body.woocommerce .aps-shop ul.products li.product a.added_to_cart { margin: -6px var(--pc-pad-x) 16px; }

/* ======================================================================
   10. Related products on the product page. The snippet "APS Related Products" (20) prints the markup of the old
   widget and its CSS (snippet 18) is inline, with !important on nearly every rule. Neutralised here: first the
   variables it reads, then, under an ID selector, the few values it writes as literals. The markup and the snippets
   are untouched. Delete this section when the related products are a theme block.
   ====================================================================== */

#content .aps-related-products-section .aps-elementor-product-widget {
	--aps-brand-light: #27aae3;
	--aps-brand-middle: var(--accent);
	--aps-brand-primary: var(--deep);
	--aps-text-color: var(--c-ink);
	--aps-price-color: var(--c-primary);
	--aps-border-color: var(--pc-line);
	--aps-star-color: var(--pc-gold);
	--aps-star-empty-color: var(--pc-star-empty);
	--aps-card-radius: var(--pc-radius);
	--aps-card-shadow: var(--pc-shadow);
	--aps-card-hover-shadow: var(--pc-shadow-hover);
	--aps-card-hover-border-style: solid;
	--aps-card-hover-offset: -4px;
	--aps-image-hover-scale: 1.04;
	--aps-card-height: auto;
	--aps-card-height-tablet: auto;
	--aps-card-height-mobile: auto;
	--aps-card-padding-bottom: 0px;
	--aps-image-height: auto;
	--aps-image-height-tablet: auto;
	--aps-image-height-mobile: auto;
	--aps-image-max-height: none;
	--aps-image-max-height-tablet: none;
	--aps-image-max-height-mobile: none;
	--aps-content-padding-top: 0px;
	--aps-content-padding-bottom: 0px;
	--aps-content-padding-right: var(--pc-pad-x);
	--aps-content-padding-left: var(--pc-pad-x);
	--aps-title-size: var(--pc-title-size);
	--aps-title-weight: 700;
	--aps-title-line-height: 1.35;
	--aps-title-space: 8px;
	--aps-price-size: 18px;
	--aps-price-weight: 800;
	--aps-rating-space: 6px;
	--aps-star-size: 18px;
	--aps-button-width: 100%;
	--aps-button-height: 46px;
	--aps-button-font-size: var(--pc-btn-size);
	--aps-button-font-weight: 700;
	--aps-button-shadow: var(--pc-btn-shadow);
	--aps-button-hover-shadow: var(--pc-btn-shadow-hover);
	--aps-grid-gap: var(--pc-gap);
	--aps-grid-columns: var(--pc-cols);
	--aps-grid-columns-tablet: var(--pc-cols);
	--aps-grid-columns-mobile: var(--pc-cols);
	--pc-cols: 4;
}
@media (max-width: 1100px) { #content .aps-related-products-section .aps-elementor-product-widget { --pc-cols: 3; } }
@media (max-width: 782px) { #content .aps-related-products-section .aps-elementor-product-widget { --pc-cols: 2; } }
@media (max-width: 480px) { #content .aps-related-products-section .aps-elementor-product-widget { --pc-cols: 1; } }

#content .aps-related-products-section .aps-product-grid { gap: var(--pc-gap) !important; padding: 0 !important; }
#content .aps-related-products-section article.aps-product-card { overflow: hidden !important; padding-bottom: 0 !important; transition: transform var(--pc-t) var(--ease), box-shadow var(--pc-t) var(--ease) !important; }
#content .aps-related-products-section article.aps-product-card:hover { border-color: var(--pc-line) !important; }
#content .aps-related-products-section .aps-product-image-link { padding: var(--pc-pad-top) var(--pc-pad-x) 12px !important; }
#content .aps-related-products-section .aps-product-image-link img { border-radius: 14px !important; }
#content .aps-related-products-section .aps-product-content { padding-right: var(--pc-pad-x) !important; padding-left: var(--pc-pad-x) !important; }
#content .aps-related-products-section h3.aps-product-title { min-height: 2.7em !important; max-height: 2.7em !important; margin: 0 0 8px !important; }
#content .aps-related-products-section .aps-product-price { margin: 0 0 6px !important; }
#content .aps-related-products-section .aps-product-price :is(.price, .amount, bdi, .woocommerce-Price-amount, .woocommerce-Price-currencySymbol) { font-weight: 800 !important; }
#content .aps-related-products-section .aps-product-rating { min-height: 20px !important; margin: 0 0 6px !important; }
#content .aps-related-products-section .aps-product-rating:not(:has(.aps-rating-count)) { display: none !important; }
#content .aps-related-products-section .aps-stars { height: 19px !important; font-size: 18px !important; }
#content .aps-related-products-section .aps-rating-count { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
#content .aps-related-products-section .aps-product-action { width: 100% !important; max-width: 100% !important; min-height: 0 !important; margin: auto 0 var(--pc-btn-mb) !important; padding: calc(var(--pc-pad-bottom) + var(--pc-btn-mt)) 0 0 !important; }
#content .aps-related-products-section article.aps-product-card:hover .aps-product-title a { color: var(--deep) !important; }
#content .aps-related-products-section article.aps-product-card:has(a:focus-visible:not(.aps-product-button)) { outline: 3px solid var(--pc-focus) !important; outline-offset: 2px !important; }
#content .aps-related-products-section a.aps-product-button:focus-visible { outline: 3px solid var(--pc-focus) !important; outline-offset: 3px !important; }
#content .aps-related-products-section a.aps-product-button:is(:hover, :focus-visible) { filter: brightness(1.03) !important; transform: translateY(-1px) !important; }
#content .aps-related-products-section .aps-button-status { display: none !important; }
#content .aps-related-products-section .aps-product-button:is(.is-loading, .is-success) .aps-button-status { display: inline-flex !important; }