/* -----------------------------------------------------------------------------
 * gooek-product-card — base layer
 *
 * What a product card *is*, independent of which template is active. Every
 * template then sets tokens (and only occasionally structure) on top.
 *
 * SCOPE AND SPECIFICITY
 * Everything hangs off `[data-products][data-gooek-card]` — the attribute pair on
 * the <ul class="products"> that Frontend\Container adds. That is two
 * class-level units before the descendant, which beats Blocksy's own card rules:
 * its dynamic CSS assigns custom properties at `[data-products] .product …` and
 * its bundle uses `[data-products=type-2] …`, both of which are lower. So no
 * rule here needs `!important`, and the plugin does not depend on stylesheet
 * order — which matters, because this site's load order is not
 * child-theme-last.
 *
 * WHAT THIS TAKES OVER FROM THE CUSTOMIZER
 * Card spacing, alignment, radius, border, shadow and the type scale of every
 * card region. Blocksy's per-layer "spacing" controls under Shop Cards no
 * longer move anything, because the gaps here are set directly rather than
 * through --product-element-spacing. Layer *order* and layer *enabled* are
 * still the Customizer's: this file only re-sequences visually, with `order`.
 *
 * DOM IT IS WRITTEN AGAINST (Blocksy 2.1.50, shop_cards_type = type-2)
 *   ul.products[data-products][data-gooek-card]
 *     li.product
 *       figure
 *         span.onsale                          (only when on sale)
 *         div.ct-woo-card-extra                (wishlist / compare / quick view)
 *         a.ct-media-container > img
 *       h2.woocommerce-loop-product__title > a
 *       ul.entry-meta > li.meta-categories > a
 *       div.ct-woo-card-rating.gooek-pc-rating  (injected by Frontend\CardParts)
 *       div.ct-woo-card-actions
 *         span.price                           (type-2 only; standalone in type-1)
 *         a.button.add_to_cart_button
 *         span.screen-reader-text
 *
 * Any class here that a future Blocksy renames degrades to unstyled-but-complete
 * markup: no rule is load-bearing for content.
 * -------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
 * 1. Tokens
 *
 * Neutral defaults that suit this site's rectilinear baseline. Templates
 * override what they need; the accent trio and the title clamp arrive from PHP
 * (Support\Css) in an inline block that lands after the template stylesheet.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] {
	/* Accent — overwritten by the inline block on every request. Declared here
	 * so a template stylesheet that fails to load still resolves. */
	--gooek-pc-accent: var(--theme-palette-color-1, #005ea8);
	--gooek-pc-accent-hover: var(--theme-palette-color-2, #004a85);
	--gooek-pc-on-accent: #ffffff;

	/* Card shell */
	--gooek-pc-surface: var(--theme-palette-color-8, #ffffff);
	--gooek-pc-border: 1px solid var(--theme-palette-color-5, #d8dfe5);
	--gooek-pc-radius: 0px;
	--gooek-pc-shadow: none;
	--gooek-pc-shadow-hover: var(--gooek-pc-shadow);
	--gooek-pc-pad: 16px;
	--gooek-pc-pad-bottom: 16px;
	/* Vertical rhythm on the theme's 4px scale, grouped by proximity rather than
	 * spread evenly:
	 *
	 *   image ──16── [ category ─6─ title ─10─ rating ─10─ price ] ──16── CTA
	 *
	 * The four details belong together and the CTA does not, so the gaps inside
	 * that block are tighter than the ones bracketing it. An even ~18px between
	 * everything — which is what the mockup measures — flattens that hierarchy and
	 * makes the card read as five unrelated lines. */
	--gooek-pc-gap: 10px;
	--gooek-pc-gap-media: 16px;
	--gooek-pc-gap-eyebrow: 6px;
	--gooek-pc-gap-price: 16px;

	/* Ink */
	--gooek-pc-ink: var(--theme-palette-color-4, #101a22);
	--gooek-pc-muted: #6e7c88;
	--gooek-pc-review: #8a94a3;
	--gooek-pc-line: rgba(26, 29, 32, 0.1);

	/* Media */
	--gooek-pc-media-bg: #ffffff;
	--gooek-pc-media-radius: 0px;
	--gooek-pc-fit: cover;

	/* Category eyebrow */
	--gooek-pc-eyebrow-size: 12px;
	--gooek-pc-eyebrow-lh: 1.3;
	--gooek-pc-eyebrow-weight: 600;
	--gooek-pc-eyebrow-transform: uppercase;
	--gooek-pc-eyebrow-spacing: 0.08em;
	--gooek-pc-eyebrow-color: var(--gooek-pc-muted);

	/* Title */
	--gooek-pc-title-size: 17px;
	--gooek-pc-title-lh: 24px;
	--gooek-pc-title-weight: 600;
	--gooek-pc-title-spacing: 0;
	--gooek-pc-title-lines: 2;
	/* 1 reserves space for the full clamp so the rows below line up across the
	 * grid; 0 lets each card be as tall as its own title. */
	--gooek-pc-title-reserve: 1;

	/* Rating */
	--gooek-pc-star-size: 18px;
	--gooek-pc-star-gap: 2px;
	--gooek-pc-star: var(--gooek-pc-accent);
	--gooek-pc-star-empty: rgba(26, 29, 32, 0.16);
	--gooek-pc-review-size: 15px;
	--gooek-pc-rating-gap: 6px;

	/* Price */
	--gooek-pc-price-size: 17px;
	--gooek-pc-price-lh: 24px;
	--gooek-pc-price-weight: 700;
	--gooek-pc-price-color: var(--gooek-pc-ink);
	--gooek-pc-price-was-color: var(--gooek-pc-review);
	--gooek-pc-was-size: 0.8em;

	/* The "From" prefix defaults to matching the price exactly. */
	--gooek-pc-from-size: 1em;
	--gooek-pc-from-weight: inherit;
	--gooek-pc-from-color: inherit;
	/* Gap between the prefix and the amount. The price row's own 8px gap exists
	 * to separate a current price from a struck original, and at 17px type that is
	 * nearly two word spaces — too wide for "From US$999.00", which should read as
	 * one phrase. 4px is about one space. */
	--gooek-pc-price-gap: 8px;
	--gooek-pc-from-gap: 4px;

	/* Call to action.
	 *
	 * These are layer-1 fallbacks only. Support\ThemeDefaults reads the theme's
	 * own buttonColor / buttonTextColor / buttonMinHeight / buttonRadius and
	 * `buttons` typography and emits them over the top on every request, so the
	 * card's CTA looks like every other button on the site and follows a
	 * Customizer edit. The values here are what a card falls back to if Blocksy
	 * is not present to be read.
	 *
	 * Note what the CTA does NOT use: --gooek-pc-accent. Since v0.2.0 the accent
	 * means the star row and the sale badge. The button has its own colours. */
	--gooek-pc-btn-height: 48px;
	--gooek-pc-btn-radius: 0px;
	--gooek-pc-btn-size: 15px;
	--gooek-pc-btn-weight: 600;
	--gooek-pc-btn-lh: 1.2;
	--gooek-pc-btn-transform: none;
	--gooek-pc-btn-spacing: 0.01em;
	--gooek-pc-btn-gap: 9px;
	--gooek-pc-btn-justify: center;
	--gooek-pc-btn-pad: 0 14px;
	--gooek-pc-btn-bg: var(--theme-palette-color-1, #005ea8);
	--gooek-pc-btn-bg-hover: var(--theme-palette-color-2, #004a85);
	--gooek-pc-btn-color: #ffffff;
	--gooek-pc-btn-color-hover: #ffffff;
	--gooek-pc-btn-border: 0;
	--gooek-pc-btn-border-hover: 0;
	--gooek-pc-btn-shadow: none;
	--gooek-pc-btn-shadow-hover: none;
	--gooek-pc-icon-size: 16px;

	/* Sale / stock badge */
	--gooek-pc-badge-top: 15px;
	--gooek-pc-badge-left: 15px;
	--gooek-pc-badge-height: 28px;
	--gooek-pc-badge-min-width: 55px;
	--gooek-pc-badge-radius: 0px;
	--gooek-pc-badge-pad: 5px 10px;
	--gooek-pc-badge-bg: var(--gooek-pc-accent);
	--gooek-pc-badge-color: var(--gooek-pc-on-accent);
	--gooek-pc-badge-size: 12px;
	--gooek-pc-badge-weight: 700;
	--gooek-pc-badge-spacing: 0.06em;
	--gooek-pc-badge-transform: uppercase;
	--gooek-pc-badge-border: 0;
	--gooek-pc-badge-shadow: none;

	/* Motion and focus */
	--gooek-pc-dur: 200ms;
	--gooek-pc-ease: cubic-bezier(0.2, 0, 0.2, 1);
	--gooek-pc-focus: var(--gooek-pc-ink);
	--gooek-pc-focus-width: 2px;
}


/* -----------------------------------------------------------------------------
 * 2. Card shell
 *
 * Blocksy already makes .product a flex column. This normalises the parts that
 * differ between shop_cards_type type-1 (no card chrome, no padding) and type-2
 * (chrome, 20px inline padding, bled figure) so both end up in the same state
 * and a template only has to describe one card.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product {
	/* Blocksy reads these two into align-items / text-align. Setting the vars as
	 * well as the concrete properties keeps any other rule of theirs that reads
	 * them in agreement with what is actually rendered — type-2 sets both to
	 * `center`, and the card designs here are start-aligned. */
	--horizontal-alignment: stretch;
	--text-horizontal-alignment: start;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	overflow: hidden;
	padding: 0 var(--gooek-pc-pad) var(--gooek-pc-pad-bottom);
	border: var(--gooek-pc-border);
	border-radius: var(--gooek-pc-radius);
	background: var(--gooek-pc-surface);
	box-shadow: var(--gooek-pc-shadow);
	color: var(--gooek-pc-ink);
	text-align: start;
	transition:
		box-shadow var(--gooek-pc-dur) var(--gooek-pc-ease),
		transform var(--gooek-pc-dur) var(--gooek-pc-ease),
		border-color var(--gooek-pc-dur) var(--gooek-pc-ease);
}

[data-products][data-gooek-card] .product:hover {
	box-shadow: var(--gooek-pc-shadow-hover);
}

/* Category cards (woocommerce_before_subcategory_title) come through the same
 * container and only ever have a figure and a title. They inherit the shell and
 * skip everything below by simply not having those elements — noted so the
 * absence of a rule is not read as an oversight. */


/* -----------------------------------------------------------------------------
 * 3. Visual order
 *
 * The mockup's sequence is image → category → title → rating → price → CTA. The
 * Customizer's layer list on this site emits title *before* category, and there
 * is no intention to rewrite woo_card_layout (that is the user's setting), so
 * the sequence is imposed here instead. Steps of 10 leave room for a layer that
 * needs to slot between two of these later.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product > * {
	order: 60;
	margin-bottom: var(--gooek-pc-gap);
}

[data-products][data-gooek-card] .product > figure {
	order: 10;
	margin-bottom: var(--gooek-pc-gap-media);
}

[data-products][data-gooek-card] .product > .entry-meta {
	order: 20;
	margin-bottom: var(--gooek-pc-gap-eyebrow);
}

[data-products][data-gooek-card] .product > :is(.woocommerce-loop-product__title, .woocommerce-loop-category__title) {
	order: 30;
}

[data-products][data-gooek-card] .product > :is(.ct-woo-card-rating, .gooek-pc-rating) {
	order: 40;
}

[data-products][data-gooek-card] .product > .ct-product-brands {
	order: 45;
}

[data-products][data-gooek-card] .product > .entry-excerpt {
	order: 50;
}

[data-products][data-gooek-card] .product > .ct-card-variation-swatches {
	order: 65;
}

[data-products][data-gooek-card] .product > .ct-product-sku {
	order: 70;
}

[data-products][data-gooek-card] .product > .ct-woo-card-stock {
	order: 75;
}

/* Standalone price — shop_cards_type type-1 and type-3 only. In type-2 the
 * price lives inside .ct-woo-card-actions instead. */
[data-products][data-gooek-card] .product > .price {
	order: 80;
	margin-bottom: var(--gooek-pc-gap-price);
}

/* margin-top:auto pins the action row to the bottom edge, so the CTAs line up
 * across a row of cards whose titles wrap to different heights. */
[data-products][data-gooek-card] .product > .ct-woo-card-actions {
	order: 90;
	margin-top: auto;
	margin-bottom: 0;
}

[data-products][data-gooek-card] .product > *:last-child {
	margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
 * 4. Media
 *
 * The figure bleeds past the card's inline padding so the image meets the card
 * edge, which is what the mockup does. The bleed is derived from the padding
 * token, so a template that sets --gooek-pc-pad: 0 needs no further work.
 *
 * The aspect ratio is NOT set here: blocksy_media() writes `aspect-ratio` as an
 * inline style on the <img>, which a stylesheet cannot beat without
 * !important. Frontend\Container sets it through Blocksy's own ratio filter
 * instead. What is set here is --theme-object-fit, the custom property Blocksy's
 * own `object-fit: var(--theme-object-fit, cover)` reads.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product > figure {
	--theme-object-fit: var(--gooek-pc-fit);

	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(100% + (var(--gooek-pc-pad) * 2));
	margin-inline: calc(var(--gooek-pc-pad) * -1);
	overflow: hidden;
	border-radius: var(--gooek-pc-media-radius);
	background: var(--gooek-pc-media-bg);
}

[data-products][data-gooek-card] .product > figure .ct-media-container {
	display: block;
	width: 100%;
	border-radius: inherit;
	background: var(--gooek-pc-media-bg);
}

[data-products][data-gooek-card] .product > figure img {
	display: block;
	width: 100%;
	border-radius: inherit;
	background: var(--gooek-pc-media-bg);
}


/* -----------------------------------------------------------------------------
 * 5. Sale / stock badge
 *
 * Geometry goes through Blocksy's own --badge-* properties rather than
 * re-declaring position on .onsale, so its `data-shape` variants and the
 * out-of-stock and custom badges all follow the same tokens. Appearance beyond
 * what those properties cover (border, shadow, backdrop filter, type) is set
 * directly.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product > figure {
	--badge-top: var(--gooek-pc-badge-top);
	--badge-left: var(--gooek-pc-badge-left);
	--badge-height: var(--gooek-pc-badge-height);
	--badge-min-width: var(--gooek-pc-badge-min-width);
	--badge-radius: var(--gooek-pc-badge-radius);
	--badge-padding: var(--gooek-pc-badge-pad);
	--badge-text-color: var(--gooek-pc-badge-color);
	--badge-background-color: var(--gooek-pc-badge-bg);
}

[data-products][data-gooek-card] .product > figure :is(.onsale, .out-of-stock-badge, [class*="ct-woo-badge-"]) {
	z-index: 3;
	border: var(--gooek-pc-badge-border);
	box-shadow: var(--gooek-pc-badge-shadow);
	font-size: var(--gooek-pc-badge-size);
	font-weight: var(--gooek-pc-badge-weight);
	line-height: 1;
	letter-spacing: var(--gooek-pc-badge-spacing);
	text-transform: var(--gooek-pc-badge-transform);
}


/* -----------------------------------------------------------------------------
 * 6. Wishlist / compare / quick view toolbar
 *
 * Left where Blocksy puts it (top-right of the figure, 15px in) so it never
 * collides with the badge at top-left. Only the reveal behaviour is normalised:
 * fade in with the card on pointer devices, always visible where there is no
 * hover.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product .ct-woo-card-extra {
	z-index: 4;
}

@media (hover: hover) and (pointer: fine) {
	[data-products][data-gooek-card] .product .ct-woo-card-extra[data-type="type-1"] {
		opacity: 0;
		transition: opacity var(--gooek-pc-dur) var(--gooek-pc-ease);
	}

	[data-products][data-gooek-card] .product:hover .ct-woo-card-extra[data-type="type-1"],
	[data-products][data-gooek-card] .product:focus-within .ct-woo-card-extra[data-type="type-1"] {
		opacity: 1;
	}
}


/* -----------------------------------------------------------------------------
 * 7. Category eyebrow
 *
 * Blocksy renders this as ul.entry-meta > li.meta-categories, with 9px inline
 * margins and an :after separator between items. The list is flattened to an
 * inline row here; the separator is kept, because a product in two categories
 * needs one.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product > .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	/* margin-top only. A `margin-block: 0` here would silently cancel the
	 * margin-bottom §3 sets on this same element at the same specificity, because
	 * this rule comes later in the file. Same reason for the title, the excerpt
	 * and the price below. */
	margin-top: 0;
	padding: 0;
	list-style: none;
	color: var(--gooek-pc-eyebrow-color);
	font-size: var(--gooek-pc-eyebrow-size);
	font-weight: var(--gooek-pc-eyebrow-weight);
	line-height: var(--gooek-pc-eyebrow-lh);
	letter-spacing: var(--gooek-pc-eyebrow-spacing);
	text-transform: var(--gooek-pc-eyebrow-transform);
}

[data-products][data-gooek-card] .product > .entry-meta li {
	display: inline-block;
	margin: 0;
}

[data-products][data-gooek-card] .product > .entry-meta a {
	color: inherit;
	text-decoration: none;
	transition: color var(--gooek-pc-dur) var(--gooek-pc-ease);
}

[data-products][data-gooek-card] .product > .entry-meta a:hover {
	color: var(--gooek-pc-accent-hover);
}

/* The eyebrow is a single line by design; a product filed in six categories
 * must not push the title down a row. */
[data-products][data-gooek-card] .product > .entry-meta .meta-categories {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


/* -----------------------------------------------------------------------------
 * 8. Title
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product > :is(.woocommerce-loop-product__title, .woocommerce-loop-category__title) {
	margin-top: 0;
	margin-inline: 0;
	color: var(--gooek-pc-ink);
	font-size: var(--gooek-pc-title-size);
	font-weight: var(--gooek-pc-title-weight);
	line-height: var(--gooek-pc-title-lh);
	letter-spacing: var(--gooek-pc-title-spacing);
	/* Reserving the full clamp height keeps the rating, price and CTA of every
	 * card in a row on the same line, which is what makes a grid read as a grid.
	 * A template can opt out with --gooek-pc-title-reserve: 0. */
	min-height: calc(var(--gooek-pc-title-lines) * var(--gooek-pc-title-lh) * var(--gooek-pc-title-reserve));
}

[data-products][data-gooek-card] .product > :is(.woocommerce-loop-product__title, .woocommerce-loop-category__title) a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--gooek-pc-title-lines);
	line-clamp: var(--gooek-pc-title-lines);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

/* The subcategory card appends a <mark class="count">(6)</mark> to its title. */
[data-products][data-gooek-card] .product > .woocommerce-loop-category__title mark.count {
	background: none;
	color: var(--gooek-pc-muted);
	font-weight: 400;
}


/* -----------------------------------------------------------------------------
 * 9. Rating
 *
 * Two markups land here. Ours (Frontend\CardParts) is .gooek-pc-rating with two
 * stacked five-star rows, the filled one clipped to a percentage so a 4.5
 * average renders as 4.5 rather than rounding. Blocksy's own — only present if
 * the Customizer's product_rating layer is enabled, in which case ours is
 * suppressed — is WooCommerce's font-based .star-rating, which gets colour and
 * size here and nothing more.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product > :is(.ct-woo-card-rating, .gooek-pc-rating) {
	display: flex;
	align-items: center;
	gap: var(--gooek-pc-rating-gap);
	min-height: var(--gooek-pc-star-size);
}

[data-products][data-gooek-card] .gooek-pc-stars {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	height: var(--gooek-pc-star-size);
}

[data-products][data-gooek-card] :is(.gooek-pc-stars-track, .gooek-pc-stars-fill) {
	display: inline-flex;
	gap: var(--gooek-pc-star-gap);
	height: var(--gooek-pc-star-size);
}

[data-products][data-gooek-card] .gooek-pc-stars-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	overflow: hidden;
}

[data-products][data-gooek-card] .gooek-pc-star {
	display: block;
	flex: 0 0 auto;
	width: var(--gooek-pc-star-size);
	height: var(--gooek-pc-star-size);
	fill: var(--gooek-pc-star);
}

[data-products][data-gooek-card] .gooek-pc-star--empty {
	fill: var(--gooek-pc-star-empty);
}

[data-products][data-gooek-card] :is(.gooek-pc-rating-count, .ct-rating-count, .ct-rating-average) {
	color: var(--gooek-pc-review);
	font-size: var(--gooek-pc-review-size);
	font-weight: 400;
	line-height: 1.2;
}

[data-products][data-gooek-card] .product .star-rating {
	color: var(--gooek-pc-star);
	font-size: calc(var(--gooek-pc-star-size) * 0.62);
}


/* -----------------------------------------------------------------------------
 * 10. Excerpt, stock, SKU
 *
 * Not part of the mockup and disabled in the Customizer, but a layer someone
 * enables later should not land unstyled.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product > .entry-excerpt {
	margin-top: 0;
	color: var(--gooek-pc-muted);
	font-size: 14px;
	line-height: 1.55;
}

[data-products][data-gooek-card] .product > :is(.ct-woo-card-stock, .ct-product-sku) {
	color: var(--gooek-pc-muted);
	font-size: 13px;
	line-height: 1.3;
}


/* -----------------------------------------------------------------------------
 * 11. Price
 *
 * The markup varies more than any other region: a plain amount, an ins/del pair
 * on sale, a `From:` prefix on a variable product, and on this site a
 * span.wcpbc-price wrapper with a loading placeholder from
 * woocommerce-product-price-based-on-countries. All four have to sit on one
 * baseline without the placeholder opening a gap.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	column-gap: var(--gooek-pc-price-gap);
	row-gap: 2px;
	/* Not `margin: 0` — in type-1 the price is a direct child of .product and
	 * takes its margin-bottom from §3. When it sits inside .ct-woo-card-actions
	 * (type-2) §12 zeroes it and the row's `gap` spaces it instead. */
	margin-top: 0;
	margin-inline: 0;
	color: var(--gooek-pc-price-color);
	font-size: var(--gooek-pc-price-size);
	font-weight: var(--gooek-pc-price-weight);
	line-height: var(--gooek-pc-price-lh);
	font-variant-numeric: tabular-nums;
}

[data-products][data-gooek-card] .product .price .wcpbc-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
}

/* The strike goes on `del` and ONLY on `del`.
 *
 * v0.1.0 also put `text-decoration: line-through` on the inner
 * .woocommerce-Price-amount, which drew a *second* line: decoration from an
 * ancestor keeps painting across its descendants, and a descendant that declares
 * its own adds to it rather than replacing it. Two boxes decorating, two lines.
 * `none` on the descendants is belt and braces — a descendant cannot remove the
 * ancestor's line, but it does stop a third party adding a third. */
[data-products][data-gooek-card] .product .price del {
	color: var(--gooek-pc-price-was-color);
	font-size: var(--gooek-pc-was-size);
	font-weight: 400;
	text-decoration: line-through;
	text-decoration-thickness: from-font;
}

[data-products][data-gooek-card] .product .price del * {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

[data-products][data-gooek-card] .product .price ins,
[data-products][data-gooek-card] .product .price ins .woocommerce-Price-amount {
	background: none;
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

/* The "From" prefix. The reference design sets it at the same size and weight as
 * the price it introduces — "From US$999.00" reads as one phrase, not as a label
 * plus a number — so the tokens default to `inherit`. A denser template can shrink
 * it, and the settings screen exposes both. */
[data-products][data-gooek-card] .product .price .from {
	/* Pulled back to a word space. The row's column-gap still applies between
	 * every other pair of items, so the current price and the struck original keep
	 * their wider separation. */
	margin-inline-end: calc(var(--gooek-pc-from-gap) - var(--gooek-pc-price-gap));
	color: var(--gooek-pc-from-color);
	font-size: var(--gooek-pc-from-size);
	font-weight: var(--gooek-pc-from-weight);
}

/* Blocksy's type-2 draws a vertical hairline after the price to divide it from
 * the button. These cards stack the two instead, so the divider has nothing to
 * divide. */
[data-products][data-gooek-card] .ct-woo-card-actions .price::after {
	content: none;
	display: none;
}


/* -----------------------------------------------------------------------------
 * 12. Action row
 *
 * In type-2 Blocksy makes this a centred horizontal strip that bleeds 20px past
 * the card on both sides, with rules above and below and a 55px min-height on
 * each child. All of that is undone here: the row becomes a plain stack, and
 * templates decide whether the price and button sit on one line or two.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product .ct-woo-card-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* In type-2 this row holds the price and the button, so the gap between them
	 * is the price gap, not the generic one. */
	gap: var(--gooek-pc-gap-price);
	width: 100%;
	margin-inline: 0;
	padding: 0;
	border: 0;
	min-height: 0;
}

/* The row's own `gap` does the spacing here, so every child starts from zero
 * margin. Blocksy's type-2 also puts a 55px min-height and 5px padding on each
 * child; both go. */
[data-products][data-gooek-card] .product .ct-woo-card-actions > * {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* An empty flex child would still consume one `gap`. Woo's aria-describedby
 * target is exactly that, so it is taken out of flow rather than hidden — it has
 * to stay in the accessibility tree for the button's description to resolve. */
[data-products][data-gooek-card] .product .ct-woo-card-actions > .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* -----------------------------------------------------------------------------
 * 13. The button
 *
 * Blocksy's global button styling reaches this element through a long selector
 * list plus a ::before overlay for its hover sweep. The overlay is switched off
 * and the colours are set directly, so a template's hover is the only hover.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product .ct-woo-card-actions :is(.button, .added_to_cart) {
	display: inline-flex;
	align-items: center;
	justify-content: var(--gooek-pc-btn-justify);
	gap: var(--gooek-pc-btn-gap);
	width: 100%;
	min-height: var(--gooek-pc-btn-height);
	padding: var(--gooek-pc-btn-pad);
	border: var(--gooek-pc-btn-border);
	border-radius: var(--gooek-pc-btn-radius);
	background: var(--gooek-pc-btn-bg);
	box-shadow: var(--gooek-pc-btn-shadow);
	color: var(--gooek-pc-btn-color);
	font-size: var(--gooek-pc-btn-size);
	font-weight: var(--gooek-pc-btn-weight);
	line-height: var(--gooek-pc-btn-lh);
	letter-spacing: var(--gooek-pc-btn-spacing);
	text-transform: var(--gooek-pc-btn-transform);
	text-decoration: none;
	text-align: center;
	transition:
		background-color var(--gooek-pc-dur) var(--gooek-pc-ease),
		border-color var(--gooek-pc-dur) var(--gooek-pc-ease),
		box-shadow var(--gooek-pc-dur) var(--gooek-pc-ease),
		color var(--gooek-pc-dur) var(--gooek-pc-ease);
}

[data-products][data-gooek-card] .product .ct-woo-card-actions :is(.button, .added_to_cart):hover,
[data-products][data-gooek-card] .product .ct-woo-card-actions :is(.button, .added_to_cart):focus-visible {
	border: var(--gooek-pc-btn-border-hover);
	background: var(--gooek-pc-btn-bg-hover);
	box-shadow: var(--gooek-pc-btn-shadow-hover);
	color: var(--gooek-pc-btn-color-hover);
}

/* Blocksy animates a skewed ::before across its buttons. Two hover treatments
 * on one element read as a glitch, so the card's CTA keeps only its own. */
[data-products][data-gooek-card] .product .ct-woo-card-actions :is(.button, .added_to_cart)::before {
	content: none;
	display: none;
}

[data-products][data-gooek-card] .product .gooek-pc-icon {
	flex: 0 0 auto;
	width: var(--gooek-pc-icon-size);
	height: var(--gooek-pc-icon-size);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The "View cart" link WooCommerce inserts after a successful AJAX add. Blocksy
 * hides the .added button on auto-hide rows; this keeps the link but drops it to
 * a quiet secondary weight so it does not read as a second CTA. */
[data-products][data-gooek-card] .product .ct-woo-card-actions .added_to_cart {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gooek-pc-muted);
	font-size: 13px;
	font-weight: 500;
	text-decoration: underline;
	text-transform: none;
}

[data-products][data-gooek-card] .product .ct-woo-card-actions .added_to_cart:hover {
	background: none;
	color: var(--gooek-pc-accent-hover);
}

/* Woo's in-flight state on an AJAX button. */
[data-products][data-gooek-card] .product .ct-woo-card-actions .button.loading {
	opacity: 0.75;
	pointer-events: none;
}


/* -----------------------------------------------------------------------------
 * 14. Focus
 *
 * One visible ring on both interactive targets in a card. The offset turns
 * negative on the CTA and the media link because the card clips its own
 * overflow, and a positive offset there would be cut off.
 * -------------------------------------------------------------------------- */

[data-products][data-gooek-card] .product a:focus-visible,
[data-products][data-gooek-card] .product button:focus-visible {
	outline: var(--gooek-pc-focus-width) solid var(--gooek-pc-focus);
	outline-offset: 2px;
}

[data-products][data-gooek-card] .product .ct-woo-card-actions :is(.button, .added_to_cart):focus-visible {
	outline-offset: calc(var(--gooek-pc-focus-width) * -1.5);
}

[data-products][data-gooek-card] .product > figure a:focus-visible {
	outline-offset: calc(var(--gooek-pc-focus-width) * -1);
}


/* -----------------------------------------------------------------------------
 * 15. Reduced motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[data-products][data-gooek-card] .product,
	[data-products][data-gooek-card] .product *,
	[data-products][data-gooek-card] .product *::before,
	[data-products][data-gooek-card] .product *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}

	[data-products][data-gooek-card] .product:hover {
		transform: none !important;
	}

	/* Blocksy's zoom-on-hover is a transform on the image; at reduced motion the
	 * image should simply not move. */
	[data-products][data-gooek-card] .product:hover .has-hover-effect img {
		transform: none !important;
	}
}


/* -----------------------------------------------------------------------------
 * 16. Narrower viewports
 *
 * Steps at Blocksy's own breakpoints, so the card changes gear at the same width
 * the grid does (999.98px = tablet, 689.98px = phone).
 * -------------------------------------------------------------------------- */

@media (max-width: 999.98px) {
	[data-products][data-gooek-card] {
		--gooek-pc-title-size: 16px;
		--gooek-pc-title-lh: 22px;
		--gooek-pc-price-size: 18px;
		--gooek-pc-btn-height: 44px;
		--gooek-pc-gap: 16px;
	}
}

@media (max-width: 689.98px) {
	[data-products][data-gooek-card] {
		--gooek-pc-pad: 14px;
		--gooek-pc-pad-bottom: 14px;
		--gooek-pc-gap: 14px;
		--gooek-pc-star-size: 16px;
		--gooek-pc-review-size: 14px;
		--gooek-pc-btn-size: 13px;
	}
}