/**
 * YK WC Grid Variations — Product card styles
 *
 * Colour tokens consume the active theme.json style variant via
 * --wp--preset--color--* properties (set by WordPress for every variant).
 *
 * Class hooks consumed by yk-wcgv.js:
 *   .yk-card, .yk-swatches, .yk-swatch, .yk-sizes, .yk-size,
 *   .yk-qty-wrap, .yk-qty-minus, .yk-qty-plus, .yk-qty-input,
 *   .yk-add-to-cart, .yk-price, .yk-badge-sale
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	--yk-primary:        var(--wp--preset--color--primary,   #000000);
	--yk-primary-hover:  var(--wp--preset--color--secondary, #1a1a1a);
	--yk-neutral:        var(--wp--preset--color--neutral,  #e2e2e2);
	--yk-text:           var(--wp--preset--color--contrast,  #1a1a1a);
	--yk-bg-card:        var(--wp--preset--color--base,      #ffffff);

	--yk-btn-bg:         #000000;
	--yk-btn-bg-hover:   #1a1a1a;
	--yk-btn-fg:         #ffffff;

	--yk-danger:          var(--wp--preset--color--primary, red);
	--yk-border:         #e2e2e2;
	--yk-bg-image:       var(--wp--preset--color--neutral, #f7f3d5);
	--yk-text-muted:     #666666;
	--yk-text-subtle:    #999999;

	--yk-radius-card:    5px;
	--yk-radius-btn:     var(--wp--custom--border-radius--btn,  25px);
	--yk-radius-pill:    var(--wp--custom--border-radius--pill, 25px);

	--yk-card-pad:       1rem;
	--yk-gap-section:    0.625rem;
}

/* ============================================================
   General CSS for category pages
   ============================================================ */
.woocommerce-result-count, .woocommerce-ordering {
	display: none;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
	font-size: 0.875rem;
	color: var(--yk-text-muted);
	padding-top: var(--wp--preset--spacing--60, 1.5rem);
	margin-bottom: 0.25rem;
}

.woocommerce-breadcrumb a {
	color: var(--yk-text-muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--yk-text);
	text-decoration: underline;
}

/* Category title + description block */
.woocommerce-products-header {
	padding-bottom: var(--wp--preset--spacing--60, 1.5rem);
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(1, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Reset WC float-based width classes so our grid takes over. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* WooCommerce adds a float clearfix via ::before { content:" "; display:table; } which
   becomes a grid item and occupies col 1 row 1, shifting all products one cell right. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
}

/* ============================================================
   CARD WRAPPER
   ============================================================ */
.yk-card {
	display: flex;
	flex-direction: column;
	background: var(--yk-bg-card);
	border: 1px solid var(--yk-border);
	border-radius: var(--yk-radius-card);
	overflow: hidden;
	padding: 0;
	position: relative;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;

	/* Skip layout and paint for cards that are off screen. The grid gets long — infinite
	   scroll will make it much longer — and every card carries swatches, pills and a
	   stepper. The intrinsic size is the measured card height, so the scrollbar and any
	   anchor offsets stay put while cards are still unrendered. */
	content-visibility: auto;
	/* 520px, measured: real cards render 479–550px tall. The old 600px placeholder made
	   every unrendered card ~100px too tall, which pushed the infinite-scroll sentinel
	   down the document and ate into the configured prefetch distance (1600 → 1273px
	   effective). Keep this in step with the actual card height. */
	contain-intrinsic-size: auto 520px;
}

.yk-card:hover {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
	border-color: #cbcbcb;
}

/* ============================================================
   1. FEATURED IMAGE
   ============================================================ */
.yk-card__img-link {
	display: block;
	text-decoration: none;
	flex-shrink: 0;
}

.yk-card__img-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--yk-bg-image);
	overflow: hidden;
	box-shadow: 0px 4px 5px rgba(168, 168, 168, 0.15) !important;
	transition: box-shadow 0.3s ease !important;
	border-bottom: 1px solid var(--yk-border);
}

.yk-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.25s ease;
}

.yk-card:hover .yk-card__img {
	transform: scale(1.03);
}

/* ============================================================
   2. SALE BADGE
   ============================================================ */
.yk-badge-sale {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	background-color: var(--yk-danger);
	color: #ffffff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--yk-radius-pill);
	line-height: 1.5;
	pointer-events: none;
}

/* ============================================================
   CARD BODY
   ============================================================ */
.yk-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0.75rem var(--yk-card-pad) var(--yk-card-pad);
	gap: 0;
}

/* ============================================================
   VARIATION PRICE / SKU SWAP (yk-wcgv.js)
   ============================================================ */

/* The value swaps in place and stays inline so the "inkl. MwSt." suffix keeps sitting
   next to it. The JS pins a min-height on the surrounding .yk-price block on first run,
   so a two-line price range collapsing to a one-line price cannot shorten the card. */

/* Short, quiet highlight — enough to notice a changed number, not enough to make a grid
   of sixteen cards feel like it is blinking. */
@keyframes yk-value-updated {
	from { background-color: rgba(0, 0, 0, 0.07); }
	to   { background-color: transparent; }
}

.yk-value-updated {
	animation: yk-value-updated 0.45s ease-out;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.yk-value-updated {
		animation: none;
	}
}

/* ============================================================
   INFINITE SCROLL (yk-wcgv-infinite.js)
   ============================================================ */

/* Hidden, never removed: crawlers and JS-less visitors keep the real links, and the
   script puts them back if a request fails. */
.yk-pagination--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.yk-infinite-sentinel {
	width: 100%;
	height: 1px;
}

.yk-infinite-status {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--yk-text-muted);
	min-height: 1.4em;   /* reserve the line so appending text never shifts the grid */
}

.yk-infinite-retry {
	margin-left: 0.5rem;
}

/* ============================================================
   3. COLOR SWATCHES
   ============================================================ */
.yk-swatches {
	display: flex;
	flex-wrap: wrap;
	/* 6px, not 5px: the active swatch's check badge overhangs its box by 4px
	   (3px offset + 1px ring), so this keeps a 2px clearance to the neighbour and,
	   on wrapped rows, to the row above. */
	gap: 6px;
	margin-bottom: var(--yk-gap-section);
}

.yk-swatch {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex-shrink: 0;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Light fills (and images) need a visible edge, otherwise they dissolve into the white card.
   Driven by swatch.is_light from the payload — WCAG relative luminance, computed in PHP —
   instead of matching colour strings, which only ever caught the exact value #ffffff.
   A box-shadow ring, not a border: it adds no layout box, so swatch size and the badge
   clearance stay exactly as measured. The ring is darker than --yk-border so it still reads
   next to the selected badge's white ring. */
.yk-swatch.is-light,
.yk-swatch.has-image {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   4. PRODUCT TITLE — 2-line clamp
   ============================================================ */
.yk-card__title-link {
	display: block;
	text-decoration: none;
	color: inherit;
	margin-bottom: 0.3rem;
}

.yk-card__title-link:hover .yk-card__title {
	color: var(--yk-primary);
}

.yk-card__title,
.yk-card .woocommerce-loop-product__title {
	font-size: 0.875rem !important;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	color: var(--yk-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
   5. SKU / ART.-NR.
   ============================================================ */
.yk-card__sku {
	font-size: 0.6875rem;
	color: var(--yk-text-muted);
	margin: 0 0 var(--yk-gap-section);
	line-height: 1.5;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yk-card__sku strong {
	display: inline !important;
	color: var(--yk-text);
	font-weight: 700;
}

/* ============================================================
   6. SIZE PILLS
   ============================================================ */
.yk-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: var(--yk-gap-section);
}

.yk-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	padding: 2px 7px;
	font-size: 0.6875rem;
	font-weight: 500;
	border: 1px solid #c8c8c8;
	border-radius: var(--yk-radius-pill);
	background: transparent;
	color: var(--yk-text);
	cursor: default;
	white-space: nowrap;
	line-height: 1.6;
	font-family: inherit;
}

/* ============================================================
   7. QUANTITY STEPPER
   ============================================================ */
.yk-qty-wrap {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--yk-border);
	border-radius: 25px;
	overflow: hidden;
	width: fit-content;
	margin-bottom: var(--yk-gap-section);
	height: 36px;
}

.yk-qty-minus,
.yk-qty-plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 100%;
	flex-shrink: 0;
	background: transparent;
	border: none;
	color: var(--yk-text);
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	transition: background 0.15s;
}

.yk-qty-minus:hover,
.yk-qty-plus:hover {
	background: var(--wp--preset--color--subtle, #FBF4C8);
}

/* The wrapper is in this selector on purpose. A host theme may box every <input> as a
   text field: YK Starter's `input:not([type="checkbox"], ...)` is (0,1,1) — :not() carries
   the specificity of its heaviest argument — so it beat this single class and painted the
   number with a 1px border and 10px/20px padding. The pill came out split into three boxes
   and the stepper twice as wide. (0,2,0) wins without !important, and every property that
   rule also supplies is spelled out here rather than left to inherit, or the problem only
   moves to the next property. */
.yk-qty-wrap .yk-qty-input {
	width: 32px;
	min-width: 0;
	text-align: center;
	border: none;
	border-radius: 0;
	font-size: 0.875rem;
	font-weight: 400;
	font-family: inherit;
	line-height: normal;
	background: transparent;
	color: var(--wp--preset--color--secondary, #000000);
	padding: 0;
	margin: 0;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}

/* Same rule, focused state: it tints a focused field with the neutral preset, which reads
   as a grey block inside the white pill. The field is readonly and the stepper is driven
   by its buttons, so there is nothing to signal. */
.yk-qty-wrap .yk-qty-input:focus {
	background: transparent;
}

.yk-qty-input::-webkit-inner-spin-button,
.yk-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.yk-qty-icon {
	width: 10px;
	height: 10px;
	display: block;
	flex-shrink: 0;
}

/* ============================================================
   7b. CART ROW — qty stepper + button side by side
   ============================================================ */
.yk-cart-row {
	position: relative;   /* anchor for the absolutely placed .yk-card__error */
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin-bottom: var(--yk-gap-section);
}

.yk-cart-row .yk-qty-wrap {
	flex-shrink: 0;
	margin-bottom: 0;
}

.yk-cart-row .yk-add-to-cart,
.yk-cart-row .yk-quote {
	flex: 1;
	width: auto;
	min-width: 0;
}

/* .yk-btn sets display:flex, which beats the UA's [hidden] rule. yk-wcgv.js swaps the
   button and the quote link with the hidden attribute, so it has to win here. */
.yk-cart-row [hidden] {
	display: none !important;
}

/* ============================================================
   8. PRICE
   ============================================================ */
.yk-price {
	margin-top: auto;
	padding-top: var(--yk-gap-section);
	font-size: 0.9375rem;
	line-height: 1.3;
	margin-bottom: 0.5rem;
}

.yk-price .woocommerce-Price-amount.amount {
	font-weight: 700;
	color: var(--yk-text);
}

.yk-price del {
	color: var(--yk-text-subtle);
	text-decoration: line-through;
	font-size: 0.8125rem;
	margin-right: 4px;
}

.yk-price del .woocommerce-Price-amount.amount {
	font-weight: 400;
	color: var(--yk-text-subtle);
}

.yk-price ins {
	color: var(--yk-danger);
	text-decoration: none;
	font-weight: 700;
}

.yk-price ins .woocommerce-Price-amount.amount {
	color: var(--wp--preset--color--contrast);
}

.yk-price__tax {
	display: none !important;
}

/* "Price on request" — no amount, so no bold amount styling either. */
.yk-price-on-request {
	color: var(--yk-text-subtle);
	font-weight: 400;
}

/* ============================================================
   9. BUTTONS — Add to Cart + Zum Produkt
   ============================================================ */
.yk-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 0.55rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: 0.02em;
	border-radius: var(--yk-radius-btn);
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	box-sizing: border-box;
}

/* Primary — "In den Warenkorb" */
.yk-btn--primary,
.yk-add-to-cart {
	background-color: var(--yk-btn-bg);
	color: var(--yk-btn-fg);
	border-color: var(--yk-btn-bg);
}

.yk-btn--primary:hover,
.yk-btn--primary:focus-visible,
.yk-add-to-cart:hover {
	background-color: var(--yk-btn-bg-hover);
	border-color: var(--yk-btn-bg-hover);
	color: var(--yk-btn-fg);
}

/* Outline — "Zum Produkt" (bundle fallback) */
.yk-btn--outline {
	background-color: transparent;
	color: var(--yk-btn-bg);
	border-color: var(--yk-btn-bg);
}

.yk-btn--outline:hover {
	background-color: var(--yk-btn-bg);
	color: var(--yk-btn-fg);
}

.yk-btn__icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}

/* ============================================================
   WOOCOMMERCE RESET
   ============================================================ */

.yk-card .woocommerce-loop-product__link:not(.yk-card__img-link) {
	display: contents;
}

.yk-card .woocommerce-loop-product__title {
	margin: 0;
}

.yk-card .price {
	margin: 0;
}

/* Remove WC's onsale badge (we render our own .yk-badge-sale) */
.yk-card .onsale {
	display: none !important;
}

/* Remove WC's add-to-cart button rendered via hooks (we render our own) */
.yk-card .add_to_cart_button,
.yk-card .button.product_type_simple,
.yk-card .button.product_type_variable {
	display: none !important;
}

/* Hide the view-cart link WC injects after AJAX add-to-cart succeeds */
.yk-card a.added_to_cart,
.yk-card a.wc-forward {
	display: none !important;
}

/* ============================================================
   INTERACTIVE STATES (wired by yk-wcgv.js)
   ============================================================ */

/* Swatch — selected state: outline ring + check badge on the top-right corner.
   The badge deliberately overhangs the swatch (see .yk-swatches gap). The check is an
   inline SVG data URI, never an icon font or a ✓ character, so it renders identically
   regardless of the fonts a site loads. The 1px ring around the badge keeps it readable
   on dark swatches, where badge and swatch colour would otherwise merge. */
.yk-swatch.is-active {
	outline: 2px solid var(--yk-btn-bg);
	outline-offset: 2px;
}

.yk-swatch.is-active::after {
	content: '';
	position: absolute;
	top: -3px;
	right: -3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--yk-btn-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4 13 9 18 20 6' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 62%;
	box-shadow: 0 0 0 1px var(--yk-bg-card, #ffffff);
	pointer-events: none;
}

/* Size pill — selected state: inverted fill + leading checkmark */
.yk-size.is-active {
	background-color: var(--yk-text);
	border-color: var(--yk-text);
	color: #ffffff;
}

.yk-size.is-active::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	margin-right: 3px;
	background-color: #ffffff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='2 13 9 20 22 4' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='2 13 9 20 22 4' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.yk-size.is-disabled,
.yk-size[disabled] {
	color: var(--yk-text-subtle);
	border-color: #e2e2e2;
	background-color: transparent;
	text-decoration: line-through;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.6;
}

.yk-size.is-disabled.is-active {
	background-color: transparent;
	border-color: #e2e2e2;
	color: var(--yk-text-subtle);
}

.yk-add-to-cart.is-loading {
	opacity: 0.6;
	cursor: wait;
	pointer-events: none;
}

.yk-add-to-cart.is-added {
	background-color: #2f855a;
	border-color: #2f855a;
	color: #ffffff;
}

.yk-btn__check-icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Suppress any WooCommerce pseudo-element icon injected on add-to-cart buttons */
.yk-add-to-cart::before,
.yk-add-to-cart::after {
	display: none !important;
}

/* Validation message under the add-to-cart row.
   Absolutely positioned on purpose: inside .yk-cart-row it would be a flex item and shrink
   the button, and in normal flow it would grow the card and break the grid's row height
   (cards in a row are equal height — one taller card pushes the whole row). Out of flow it
   costs zero height and sits in the ~26px of space the row margin + card padding already
   leave below the button. */
.yk-card__error {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--yk-danger);
	pointer-events: none;
}

/* ============================================================
   PER-SITE TOKEN OVERRIDES — SHOP ATTACK (SHA)
   Palette: primary #e8cc28 (yellow), secondary #000000 (black),
            contrast #222222 (charcoal), neutral #f7f3d5 (cream).
   ============================================================ */

body.yk-variant-shop-attack {
	/* Buttons: black bg, white text */
	--yk-btn-bg:         var(--wp--preset--color--secondary, #000000);
	--yk-btn-bg-hover:   #333333;
	--yk-btn-fg:         #ffffff;

	/* Border radii: pill-shaped to match SHA button style */
	--yk-radius-btn:     25px;
	--yk-radius-pill:    25px;

	/* SHA yellow replaces the generic danger/accent red */
	--yk-danger:         var(--wp--preset--color--primary, #e8cc28);

	/* Card image background: SHA warm cream instead of plain grey */
	--yk-bg-image:       var(--wp--preset--color--neutral, #f7f3d5);
}

/* Deliberately not overridden here: the button's casing and the confirmation colour. This
   shop renders the base sentence-case label and the base green confirmation. Forcing
   uppercase wrapped the longest label in the catalogue — German's IN DEN WARENKORB — onto
   two lines, which changed the grid's row height, and pushed HINZUGEFÜGT and its check
   icon past the button's edge. */

/* Sale badge: yellow background → text must be black for legibility */
body.yk-variant-shop-attack .yk-badge-sale {
	color: #000000;
}

/* Sale price: bold charcoal instead of a coloured accent */
body.yk-variant-shop-attack .yk-price ins,
body.yk-variant-shop-attack .yk-price ins .woocommerce-Price-amount.amount {
	color: var(--yk-text);
	font-weight: 700;
}

/* Error text: dark charcoal — yellow on white has poor contrast */
body.yk-variant-shop-attack .yk-card__error {
	color: var(--yk-text);
}

/* ============================================================
   PRICE ON REQUEST — single product page (since 2.1.0)
   Lives here, not in yk-wcgv-product.css: that file only loads when the enhanced
   variation UI is on, and the quote link must work either way.
   ============================================================ */

/* Variable product: the chosen variation has no price. WooCommerce has already disabled
   its button; hide it so only the quote link that yk-wcgv-quote.js revealed remains.
   The selector must outrank yk-wcgv-product.css's
   `.single-product .single_add_to_cart_button.button { display:flex !important }` (0,3,0)
   — a plain `.yk-sp-quote-mode .single_add_to_cart_button` lost to it and both buttons
   showed side by side. */
.yk-sp-quote-mode .single_add_to_cart_button,
.single-product form.yk-sp-quote-mode .single_add_to_cart_button.button {
	display: none !important;
}

.yk-sp-quote[hidden] {
	display: none !important;
}

.yk-sp-quote {
	margin-block: 1rem;
}

/* Inside the variation form the link takes the cart button's place in the flex row. */
.variations_button .yk-sp-quote {
	flex: 1;
	min-width: 0;
	margin-block: 0;
}

/* Same look as the add-to-cart button it replaces. Deliberately NOT given the
   .single_add_to_cart_button class: WooCommerce and side-cart plugins bind add-to-cart
   handlers to that class. Keep in step with yk-wcgv-product.css "ADD TO CART BUTTON". */
.single-product .yk-sp-quote .yk-quote.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	padding: 0.65rem 1.5rem !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border-radius: var(--yk-radius-btn) !important;
	border: 1px solid var(--yk-btn-bg) !important;
	background-color: var(--yk-btn-bg) !important;
	color: var(--yk-btn-fg) !important;
	box-sizing: border-box;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.single-product .yk-sp-quote .yk-quote.button:hover,
.single-product .yk-sp-quote .yk-quote.button:focus-visible {
	background-color: var(--yk-btn-bg-hover) !important;
	border-color: var(--yk-btn-bg-hover) !important;
	color: var(--yk-btn-fg) !important;
}

body.yk-variant-shop-attack .single-product .yk-sp-quote .yk-quote.button {
	background-color: var(--wp--preset--color--secondary, #000000) !important;
	border-color:     var(--wp--preset--color--secondary, #000000) !important;
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 25px !important;
}

body.yk-variant-shop-attack .single-product .yk-sp-quote .yk-quote.button:hover,
body.yk-variant-shop-attack .single-product .yk-sp-quote .yk-quote.button:focus-visible {
	background-color: var(--wp--preset--color--contrast, #222222) !important;
	border-color:     var(--wp--preset--color--contrast, #222222) !important;
}

.yk-price-on-request {
	color: var(--yk-text-subtle);
}