/**
 * WC Variation Cards — stylesheet
 *
 * Based on Figma export: ProductCard.tsx (shadcn/tailwind tokens).
 * All selectors use high specificity to override WooCommerce & Elementor.
 */

/* ================================================================
   Design tokens (from default_shadcn_theme.css)
   ================================================================ */

:root {
	--wcvc-primary:      #030213;
	--wcvc-primary-fg:   #ffffff;
	--wcvc-muted:        #ececf0;
	--wcvc-muted-fg:     #717182;
	--wcvc-accent:       #e9ebef;
	--wcvc-border:       rgba(0, 0, 0, 0.1);
	--wcvc-radius:       0.625rem;
}

/* ================================================================
   Product card wrapper (li.product)
   Figma: bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl
   ================================================================ */

.woocommerce ul.products li.product {
	background: #fff !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
	transition: box-shadow 0.3s ease !important;
	padding: 0 !important;
	border: 1px solid #eceef0 !important;
	margin-bottom: 2rem !important;
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover {
		box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
	}
}

/* ================================================================
   Product image
   Figma: aspect-video overflow-hidden bg-muted
          img: w-full h-full object-cover hover:scale-105
   ================================================================ */

.woocommerce ul.products li.product > a:first-child {
	display: block !important;
	overflow: hidden !important;
}

/* aspect-ratio lives on the image (not the link) — the link also wraps the
   product title in this theme, so constraining the link would clip the title. */
.woocommerce ul.products li.product > a:first-child img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important; /* Figma: aspect-video — keeps the card compact */
	height: auto !important;
	object-fit: cover !important;
	transition: transform 0.3s ease !important;
	transform: none !important;
	border-radius: 0 !important;
}

.woocommerce ul.products li.product > a:first-child:hover img {
	transform: scale(1.05) !important;
}

/* ================================================================
   Content area
   Figma: p-6 (24px padding)
   ================================================================ */

/* Title — Figma: h3 mb-2 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: #1b2026 !important;
	text-align: center !important;
	margin: 2px 0 6px !important;
	padding: 20px 20px 0 !important;
	text-transform: none !important; /* theme forces uppercase; Figma uses normal case */
}

/* ================================================================
   Plugin card shell (.wcvc-card / .wcvc-single)
   ================================================================ */

.wcvc-card,
.wcvc-single {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 20px 20px;
	width: 100%;
	box-sizing: border-box;
}

/* Single keeps its own (no-padding) layout — see .wcvc-single section. */

/* ================================================================
   Tagline — Figma: text-sm text-muted-foreground mb-4
   ================================================================ */

.wcvc-tagline {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wcvc-muted-fg);
	margin: -4px 0 0;
}

/* ================================================================
   Axis rows — Figma: mb-4, label text-sm mb-2 block
   ================================================================ */

.wcvc-axis {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wcvc-axis-label {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wcvc-primary);
	display: block;
}

.wcvc-axis-label::after {
	content: ':';
}

/* ================================================================
   Button group — Figma: flex flex-wrap gap-2
   ================================================================ */

.wcvc-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ================================================================
   Attribute buttons
   Figma: px-3 py-1 rounded text-sm transition-colors
   inactive: bg-muted hover:bg-muted/80
   active:   bg-primary text-primary-foreground
   ================================================================ */

.wcvc-attr-btn,
.wcvc-btn-group button.wcvc-attr-btn,
.wcvc-btn-group .wcvc-attr-btn {
	all: unset !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 12px !important;
	border-radius: calc(var(--wcvc-radius) - 2px) !important;
	background: var(--wcvc-muted) !important;
	color: var(--wcvc-primary) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: background 0.15s ease, color 0.15s ease !important;
	line-height: 1.4 !important;
	box-sizing: border-box !important;
}

.wcvc-btn-group button.wcvc-attr-btn:hover,
.wcvc-btn-group .wcvc-attr-btn:hover {
	background: #dddde2 !important; /* muted/80 */
}

.wcvc-btn-group button.wcvc-attr-btn.is-active,
.wcvc-btn-group .wcvc-attr-btn.is-active {
	background: var(--wcvc-primary) !important;
	color: var(--wcvc-primary-fg) !important;
}

.wcvc-btn-group button.wcvc-attr-btn.is-active:hover,
.wcvc-btn-group .wcvc-attr-btn.is-active:hover {
	background: #1a1930 !important;
}

.wcvc-attr-btn.is-unavailable,
.wcvc-attr-btn:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Package group buttons — Figma: flex gap-2, each flex-1 */
.wcvc-axis--packages .wcvc-btn-group {
	flex-wrap: nowrap;
}

.wcvc-axis--packages .wcvc-attr-btn {
	flex: 1 !important;
	justify-content: center !important;
}

/* ================================================================
   Cena sub-axis buttons (price inside pill)
   ================================================================ */

.wcvc-cena-btn {
	flex-direction: column !important;
	gap: 2px !important;
	padding: 6px 14px !important;
}

.wcvc-cena-label {
	font-size: 0.8rem;
	line-height: 1.2;
}

.wcvc-cena-price {
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ================================================================
   Hide default WooCommerce prices inside plugin cards
   ================================================================ */

.wcvc-card > .price,
.wcvc-card .summary > .price,
.wcvc-card span.price:not(.wcvc-price),
.wcvc-single .price {
	display: none !important;
}

.wcvc-price .woocommerce-Price-amount,
.wcvc-unit-price .woocommerce-Price-amount,
.wcvc-total-price .woocommerce-Price-amount,
.wcvc-cena-price .woocommerce-Price-amount {
	display: inline !important;
}

/* ================================================================
   Price display — loop card
   Figma: border-t pt-4 mb-4, text-2xl text-primary
   ================================================================ */

.wcvc-price-row {
	min-height: 1.6em;
	border-top: 1px solid var(--wcvc-border);
	padding-top: 16px;
}

.wcvc-price {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wcvc-primary);
}

.wcvc-price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.wcvc-price-suffix {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wcvc-muted-fg);
}

/* VAT note under the price — Figma: text-sm text-muted-foreground */
.wcvc-price-tax {
	display: block;
	font-size: 0.875rem;
	color: var(--wcvc-muted-fg);
	margin-top: 4px;
}

.wcvc-price-tax:empty {
	display: none;
}

/* ================================================================
   Price summary — single page
   ================================================================ */

.wcvc-price-summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 0;
}

.wcvc-unit-price-row,
.wcvc-total-price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.9rem;
}

.wcvc-unit-price-label,
.wcvc-total-label {
	color: #666;
	white-space: nowrap;
}

.wcvc-unit-price {
	font-weight: 600;
	color: #222;
}

.wcvc-total-price {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111;
}

.wcvc-total-price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* ================================================================
   Quantity selector
   Figma: flex items-center justify-between bg-muted rounded-lg p-3
   buttons: w-8 h-8 rounded bg-white hover:bg-accent
   number:  w-12 text-center (48px)
   ================================================================ */

.wcvc-qty-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	background: var(--wcvc-muted) !important;
	border-radius: calc(var(--wcvc-radius)) !important;
	padding: 12px !important;
}

.wcvc-qty-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wcvc-primary);
}

.wcvc-qty {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex-shrink: 0 !important;
}

.wcvc-qty-minus,
.wcvc-qty-plus {
	all: unset !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;  /* w-8 */
	height: 32px !important; /* h-8 */
	border-radius: calc(var(--wcvc-radius) - 2px) !important;
	background: #fff !important;
	color: var(--wcvc-primary) !important;
	font-size: 1.1rem !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.wcvc-qty-minus:hover,
.wcvc-qty-plus:hover {
	background: var(--wcvc-accent) !important;
}

.wcvc-qty-input {
	all: unset !important;
	width: 48px !important;  /* w-12 */
	text-align: center !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	color: #111 !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

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

/* ================================================================
   Unit label & helper text
   ================================================================ */

.wcvc-unit-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--wcvc-primary);
	margin-left: 4px;
	white-space: nowrap;
}

.wcvc-unit-helper {
	font-size: 0.75rem;
	color: var(--wcvc-muted-fg);
	margin-top: 4px;
}

/* ================================================================
   Kopā (running total) — loop card
   Figma: mt-2 text-right, text-sm text-muted-foreground + text-primary
   ================================================================ */

.wcvc-kopa-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}

.wcvc-kopa-amount {
	font-size: 0.875rem;
	color: var(--wcvc-muted-fg);
}

.wcvc-kopa-value {
	color: var(--wcvc-primary);
	font-weight: 700;
}

.wcvc-kopa-value .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

.wcvc-kopa-tax {
	font-size: 0.8rem;
	color: var(--wcvc-muted-fg);
}

.wcvc-kopa-tax:empty {
	display: none;
}

/* ================================================================
   Action buttons
   Figma: flex gap-2
   Pasūtīt: flex-1 bg-primary text-primary-foreground py-2 px-4 rounded-lg
   Info:    border border-border py-2 px-4 rounded-lg
   ================================================================ */

.wcvc-actions {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
}

/* Cart icon inside the Pasūtīt button */
.wcvc-add-to-cart .wcvc-cart-icon {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 auto !important;
	stroke: currentColor !important;
	fill: none !important;
}

/* ================================================================
   WooCommerce misc overrides
   ================================================================ */

.wcvc-card .quantity {
	margin: 0 !important;
	width: auto !important;
}

/* ================================================================
   Single product page (.wcvc-single)
   Rendered inside an Elementor Shortcode widget — no li.product card
   wrapper, so drop card padding and the price divider; enlarge price.
   ================================================================ */

.wcvc-single {
	padding: 0 !important;          /* card side padding belongs to the loop card only */
	gap: 20px;
}

/* Price is the first element on single — no top divider, bigger size (Figma). */
.wcvc-single .wcvc-price-row {
	border-top: none;
	padding-top: 0;
}

.wcvc-single .wcvc-price {
	font-size: 2rem;
}

/* Short description — grey info box between price and pills (Figma). */
.wcvc-single .wcvc-short-desc {
	background: #f3f3f5;
	border-radius: var(--wcvc-radius);
	padding: 16px 20px;
	color: var(--wcvc-primary);
	font-size: 0.95rem;
	line-height: 1.55;
}

.wcvc-single .wcvc-short-desc p {
	margin: 0 0 8px;
}

.wcvc-single .wcvc-short-desc p:last-child {
	margin-bottom: 0;
}

/* Pills — fully rounded capsules, a touch taller (Figma).
   Specificity must beat the base `.wcvc-btn-group button.wcvc-attr-btn !important`. */
.wcvc-single .wcvc-btn-group .wcvc-attr-btn,
.wcvc-single .wcvc-btn-group button.wcvc-attr-btn {
	border-radius: 9999px !important;
	padding: 8px 18px !important;
}

/* Desktop buy-row (mockup): [grey stepper] [black button] on one line,
   Kopā wraps onto its own line below, right-aligned. */
.wcvc-single .wcvc-buy-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Stepper = grey rounded box with white +/- buttons (no "Daudzums" label
   on desktop — the mockup shows only the controls). */
.wcvc-single .wcvc-qty-row {
	order: 1;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	width: fit-content !important;
	align-items: center !important;
	justify-content: flex-start !important;
	background: #f6f7f8 !important;
	border: 1px solid #eceef0 !important;
	border-radius: 12px !important;
	padding: 6px !important;
}

.wcvc-single .wcvc-qty-label {
	display: none;
}

.wcvc-single .wcvc-qty {
	border: none;
	border-radius: 0;
	padding: 0;
	gap: 6px;
	height: auto;
	box-sizing: border-box;
}

.wcvc-single .wcvc-qty-minus,
.wcvc-single .wcvc-qty-plus {
	width: 40px !important;
	height: 40px !important;
	border-radius: 9px !important;
	border: 1px solid #e2e4e6 !important;
	background: #fff !important;
}

.wcvc-single .wcvc-qty-input {
	width: 36px !important;
	min-width: 36px !important;
}

/* Add-to-cart fills the rest of the row. */
.wcvc-single .wcvc-actions {
	order: 2;
	flex: 1 1 auto;
	flex-wrap: nowrap;
}

/* The button itself fills its column to the parent's right edge. */
.wcvc-single .wcvc-add-to-cart {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
}

/* Kopā — own line under the stepper/button, right-aligned (mockup). */
.wcvc-single .wcvc-kopa-price {
	order: 3;
	flex: 0 0 100%;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: flex-end;
	gap: 6px;
}

.wcvc-single .wcvc-kopa-amount {
	font-size: 14px;
	color: #8a929c;
}

.wcvc-single .wcvc-kopa-value {
	font-size: 16px;
	font-weight: 800;
	color: #1b2026;
}

.wcvc-single .wcvc-kopa-tax {
	font-size: 12.5px;
	color: #9aa1ac;
}

/* ================================================================
   Single product image (WooCommerce Product Images widget)
   Source photos are portrait → constrain to a square crop so the
   image column matches the summary height (Figma). Switch
   object-fit to `contain` (and drop aspect-ratio) if cropping ever
   hides important parts of a product photo.
   ================================================================ */

.woocommerce-product-gallery__image img.wp-post-image,
.woocommerce div.product .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	height: auto !important;
	border-radius: var(--wcvc-radius);
}

/* ================================================================
   Single product — mobile (≤480px)
   Stack the quantity stepper and add-to-cart button so the button
   no longer wraps and both span the full width.
   ================================================================ */

@media (max-width: 480px) {
	.wcvc-single .wcvc-buy-row {
		flex-direction: column;
		align-items: stretch;
	}

	.wcvc-single .wcvc-qty-row {
		width: 100%;
	}

	.wcvc-single .wcvc-qty {
		width: 100%;
		justify-content: space-between;
	}
}

/* ================================================================
   Catalog grid responsiveness
   The [products columns="3"] shortcode is fixed at 3 columns and the
   theme does not collapse it on small screens → horizontal overflow
   and a clipped quantity row. Force a responsive grid: 2 columns on
   tablets, 1 column on phones (matches Figma card layout).
   ================================================================ */

@media (max-width: 1024px) {
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px !important;
		margin: 0 !important;
	}

	.woocommerce ul.products li.product {
		width: 100% !important;
		float: none !important;
		clear: none !important;
		margin: 0 !important;
	}

	.woocommerce ul.products li.product::before,
	.woocommerce ul.products li.product::after {
		content: none !important;
	}
}

@media (max-width: 600px) {
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* ================================================================
   Cart page — Elementor WooCommerce Cart widget (two-column)
   Figma: items card on the left, sticky summary card on the right,
   black checkout CTA. Scoped to the cart widget so nothing else is
   affected. Uses the standard WooCommerce cart markup inside.
   ================================================================ */

/* Both columns look like clean cards. */
.elementor-widget-woocommerce-cart .woocommerce-cart-form,
.elementor-widget-woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid var(--wcvc-border);
	border-radius: calc(var(--wcvc-radius) + 4px);
	padding: 24px;
	box-sizing: border-box;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* Tailwind shadow-sm */
}

/* Items table — drop default grid borders, give rows room. */
.elementor-widget-woocommerce-cart table.cart,
.elementor-widget-woocommerce-cart table.cart td,
.elementor-widget-woocommerce-cart table.cart th {
	border: none !important;
	background: transparent !important;
}

/* Hide the column-header row — design shows items as cards, no headers. */
.elementor-widget-woocommerce-cart table.cart thead {
	display: none !important;
}

.elementor-widget-woocommerce-cart table.cart td {
	padding: 16px 12px !important;
	vertical-align: middle !important;
}

/* Rounded product thumbnail. */
.elementor-widget-woocommerce-cart td.product-thumbnail img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover !important;
	border-radius: var(--wcvc-radius) !important;
}

/* Remove (×) → red, larger, no theme hover box. */
.elementor-widget-woocommerce-cart td.product-remove a.remove {
	color: #e5484d !important;
	font-size: 1.4rem !important;
	line-height: 1 !important;
	font-weight: 400 !important;
}

.elementor-widget-woocommerce-cart td.product-remove a.remove:hover {
	background: transparent !important;
	color: #c2363a !important;
}

/* Quantity input. */
.elementor-widget-woocommerce-cart .quantity input.qty {
	width: 64px !important;
	height: 40px !important;
	text-align: center !important;
	border: 1px solid var(--wcvc-border) !important;
	border-radius: var(--wcvc-radius) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

/* Summary heading. */
.elementor-widget-woocommerce-cart .cart_totals > h2 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--wcvc-primary) !important;
	margin: 0 0 16px !important;
}

/* Totals rows — strip borders, mute labels, emphasise the grand total. */
.elementor-widget-woocommerce-cart .cart_totals table.shop_table,
.elementor-widget-woocommerce-cart .cart_totals table.shop_table td,
.elementor-widget-woocommerce-cart .cart_totals table.shop_table th {
	border: none !important;
	background: transparent !important;
}

.elementor-widget-woocommerce-cart .cart_totals th {
	color: var(--wcvc-muted-fg) !important;
	font-weight: 500 !important;
	padding: 10px 0 !important;
}

.elementor-widget-woocommerce-cart .cart_totals td {
	padding: 10px 0 !important;
	text-align: right !important;
}

.elementor-widget-woocommerce-cart .cart_totals .order-total th,
.elementor-widget-woocommerce-cart .cart_totals .order-total td {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--wcvc-primary) !important;
	border-top: 1px solid var(--wcvc-border) !important;
	padding-top: 16px !important;
}

/* Checkout CTA → black, full width, rounded (override theme green). */
.elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.elementor-widget-woocommerce-cart a.checkout-button.button {
	background: var(--wcvc-primary) !important;
	color: var(--wcvc-primary-fg) !important;
	border: none !important;
	border-radius: var(--wcvc-radius) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	text-align: center !important;
	padding: 16px !important;
	width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
}

.elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	opacity: 0.92 !important;
}

/* ================================================================
   Exact loop-card spec (Figma hand-off) + Manrope + tooltips
   Scoped to .wcvc-card so the single-product selector keeps its own
   layout. Overrides the base rules above via higher specificity.
   ================================================================ */

/* Manrope everywhere inside the cards (and the floating tooltip). */
.wcvc-card,
.wcvc-card button,
.wcvc-card input,
.wcvc-card a,
.wcvc-tooltip {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Description / tagline. */
.wcvc-card .wcvc-tagline {
	margin: 0 0 4px;
	text-align: center;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.45;
	color: #7b838d;
}

/* Axis label row (label + "?" help icon). Inline model so the icon sits
   right after the colon and aligns to the middle of the label text. */
.wcvc-axis-head {
	display: block;
}

.wcvc-card .wcvc-axis-label {
	display: inline;
	margin: 0;
	font-weight: 700;
	font-size: 12.5px;
	color: #1b2026;
}

/* "?" help icon. */
.wcvc-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #eef0f2;
	color: #7b838d;
	font: 800 11px/1 'Manrope', sans-serif;
	cursor: help;
	user-select: none;
	flex: 0 0 auto;
	margin-left: 6px;
	vertical-align: middle;
}

.wcvc-tip:hover,
.wcvc-tip:focus {
	background: #e3e6e9;
	outline: none;
}

/* Attribute (frakcija) buttons. */
.wcvc-card .wcvc-btn-group button.wcvc-attr-btn,
.wcvc-card .wcvc-btn-group .wcvc-attr-btn {
	padding: 8px 14px !important;
	border-radius: 9px !important;
	border: 1.5px solid #e6e8ea !important;
	background: #f5f6f7 !important;
	color: #3b4250 !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}

.wcvc-card .wcvc-btn-group button.wcvc-attr-btn:hover,
.wcvc-card .wcvc-btn-group .wcvc-attr-btn:hover {
	background: #eceef0 !important;
}

.wcvc-card .wcvc-btn-group button.wcvc-attr-btn.is-active,
.wcvc-card .wcvc-btn-group .wcvc-attr-btn.is-active {
	background: #161b22 !important;
	color: #fff !important;
	border-color: #161b22 !important;
}

.wcvc-card .wcvc-btn-group button.wcvc-attr-btn.is-active:hover {
	background: #20262f !important;
}

/* Price + suffix. */
.wcvc-card .wcvc-price {
	font-weight: 800;
	font-size: 27px;
	letter-spacing: -.5px;
	color: #1b2026;
}

.wcvc-card .wcvc-price-suffix {
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0;
	color: #8a929c;
}

/* "ar PVN" under the price. */
.wcvc-card .wcvc-price-tax {
	font-size: 12px;
	color: #9aa1ac;
}

/* Quantity row. */
.wcvc-card .wcvc-qty-row {
	background: #f6f7f8 !important;
	border: 1px solid #eceef0 !important;
	border-radius: 12px !important;
	padding: 9px 10px 9px 14px !important;
}

.wcvc-card .wcvc-qty-label {
	font-weight: 700;
	font-size: 13.5px;
	color: #1b2026;
}

.wcvc-card .wcvc-qty {
	gap: 6px !important;
}

.wcvc-card .wcvc-qty-minus,
.wcvc-card .wcvc-qty-plus {
	width: 34px !important;
	height: 32px !important;
	border-radius: 9px !important;
	border: 1px solid #e2e4e6 !important;
	background: #fff !important;
	color: #1b2026 !important;
	font-weight: 700 !important;
	font-size: 18px !important;
}

.wcvc-card .wcvc-qty-minus:hover,
.wcvc-card .wcvc-qty-plus:hover {
	background: #f3f4f5 !important;
}

.wcvc-card .wcvc-qty-input {
	min-width: 34px !important;
	width: 34px !important;
	text-align: center !important;
	font-weight: 800 !important;
	font-size: 15px !important;
	color: #1b2026 !important;
}

/* Kopā row. */
.wcvc-card .wcvc-kopa-amount {
	font-size: 13px;
	color: #8a929c;
}

.wcvc-card .wcvc-kopa-value {
	font-weight: 800;
	font-size: 15px;
	color: #1b2026;
}

.wcvc-card .wcvc-kopa-tax {
	font-size: 11px;
	color: #9aa1ac;
}

/* Action buttons. */
.wcvc-card .wcvc-actions {
	align-items: stretch !important;
}

.wcvc-card .wcvc-add-to-cart {
	flex: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: #161b22 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 11px !important;
	padding: 13px !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	width: auto !important;
	height: auto !important;
}

.wcvc-card .wcvc-add-to-cart:hover:not(:disabled) {
	background: #20262f !important;
}

.wcvc-card .wcvc-add-to-cart:disabled {
	opacity: .5 !important;
	cursor: not-allowed !important;
}

.wcvc-card .la-btn--ghost {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fff !important;
	border: 1.5px solid #e2e4e6 !important;
	border-radius: 11px !important;
	padding: 0 16px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #1b2026 !important;
	text-decoration: none !important;
	width: auto !important;
	height: auto !important;
}

.wcvc-card .la-btn--ghost:hover {
	background: #f6f7f8 !important;
	border-color: #d7dadd !important;
}

/* ----------------------------------------------------------------
   Tooltips — dotted-underline text triggers + shared floating plaque
   ---------------------------------------------------------------- */

.wcvc-tip-text {
	border-bottom: 1px dotted #b6bcc4;
	cursor: help;
}

.wcvc-tip-text--vat {
	border-bottom-color: #ccd1d7;
}

.wcvc-tooltip {
	position: absolute;
	top: -9999px;
	left: 0;
	z-index: 9999;
	max-width: 260px;
	padding: 10px 13px;
	border-radius: 10px;
	background: #161b22;
	color: #fff;
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.45;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	pointer-events: none;
}

.wcvc-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ================================================================
   Loop card — mobile (≤767px)
   Touch-target & layout pass over the desktop loop-card spec above.
   Additive only: nothing here changes the desktop card. Colours reuse
   the existing card palette (no new tokens): CTA #161b22, ink #1b2026,
   line #eceef0 / #e2e4e6, bg-3 #f6f7f8, ink-mute #9aa1ac.
   ================================================================ */

@media (max-width: 767px) {

	/* One full-width column on phones (601–767px were 2 cols before). */
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	/* Image: a touch taller crop than desktop's 16/9. */
	.woocommerce ul.products li.product > a:first-child img {
		aspect-ratio: 16 / 10 !important;
	}

	/* Frakcija chips — bigger tap area. */
	.wcvc-card .wcvc-btn-group button.wcvc-attr-btn,
	.wcvc-card .wcvc-btn-group .wcvc-attr-btn {
		min-height: 40px !important;
		padding: 10px 14px !important;
	}

	/* Quantity stepper — 40×40 finger target. */
	.wcvc-card .wcvc-qty-minus,
	.wcvc-card .wcvc-qty-plus {
		width: 40px !important;
		height: 40px !important;
		border-radius: 9px !important;
	}

	/* Lighter divider above the price (matches --la-line, not the darker base). */
	.wcvc-card .wcvc-price-row {
		border-top-color: #eceef0 !important;
		padding-top: 16px !important;
	}

	/* Actions — 48px CTA, wrap to full-width Pasūtīt if Info won't fit. */
	.wcvc-card .wcvc-actions {
		flex-wrap: wrap !important;
	}

	.wcvc-card .wcvc-add-to-cart {
		flex: 1 1 auto !important;
		min-height: 48px !important;
	}

	.wcvc-card .la-btn--ghost {
		min-height: 48px !important;
	}
}

/* ================================================================
   Single product — mobile (≤767px)
   Plugin owns only the .wcvc-single selector (price, short-desc, chips,
   stepper, add-to-cart). Breadcrumbs, gallery, H1, category badge,
   benefits, tech table and related are Elementor/theme widgets — styled
   in Elementor, not here. Stepper + full-width add-to-cart are coupled
   in .wcvc-buy-row and handled in a later pass. Colours reuse the
   existing palette (no new tokens).
   ================================================================ */

@media (max-width: 767px) {

	/* Price — bigger, heavier, tight tracking (mockup). */
	.wcvc-single .wcvc-price {
		font-size: 30px !important;
		font-weight: 800 !important;
		letter-spacing: -1px !important;
	}

	.wcvc-single .wcvc-price-suffix {
		font-size: 12.5px;
		font-weight: 400;
		letter-spacing: 0;
		color: #9aa1ac;
	}

	.wcvc-single .wcvc-price-tax {
		font-size: 12.5px;
		color: #9aa1ac;
	}

	/* Frakcija chips — rectangular 9px (mockup), not the desktop capsule.
	   Overrides .wcvc-single capsule rule via later source order. */
	.wcvc-single .wcvc-btn-group {
		gap: 9px !important;
	}

	.wcvc-single .wcvc-btn-group .wcvc-attr-btn,
	.wcvc-single .wcvc-btn-group button.wcvc-attr-btn {
		min-height: 40px !important;
		padding: 9px 16px !important;
		border-radius: 10px !important;
		border: 1.5px solid #e6e8ea !important;
		background: #f5f6f7 !important;
		color: #3b4250 !important;
		font-weight: 700 !important;
		font-size: 13.5px !important;
	}

	.wcvc-single .wcvc-btn-group .wcvc-attr-btn.is-active,
	.wcvc-single .wcvc-btn-group button.wcvc-attr-btn.is-active {
		background: #161b22 !important;
		color: #fff !important;
		border-color: #161b22 !important;
	}

	/* Vertical stack: stepper → Kopā → full-width button (mockup). */
	.wcvc-single .wcvc-buy-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	/* Stepper as a grey row with the "Daudzums" label (like the loop card). */
	.wcvc-single .wcvc-qty-row {
		display: flex !important;
		width: 100% !important;
		flex: 1 1 auto !important;
		align-items: center !important;
		justify-content: space-between !important;
		background: #f6f7f8 !important;
		border: 1px solid #eceef0 !important;
		border-radius: 12px !important;
		padding: 9px 12px 9px 16px !important;
	}

	.wcvc-single .wcvc-qty-label {
		display: block !important;
		font-weight: 700 !important;
		font-size: 14px !important;
		color: #1b2026 !important;
	}

	/* Inner stepper: drop the desktop border (the row carries it now). */
	.wcvc-single .wcvc-qty {
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		gap: 6px !important;
		width: auto !important;
		justify-content: flex-end !important;
	}

	.wcvc-single .wcvc-qty-minus,
	.wcvc-single .wcvc-qty-plus {
		width: 40px !important;
		height: 40px !important;
		border-radius: 9px !important;
		border: 1px solid #e2e4e6 !important;
		background: #fff !important;
		color: #1b2026 !important;
		font-weight: 700 !important;
		font-size: 18px !important;
	}

	/* Kopā line under the stepper, right-aligned (mockup). */
	.wcvc-single .wcvc-kopa-price {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-end;
		gap: 6px;
	}

	.wcvc-single .wcvc-kopa-amount {
		font-size: 13.5px;
		color: #5b6470;
	}

	.wcvc-single .wcvc-kopa-value {
		font-size: 16px;
		font-weight: 800;
		color: #1b2026;
	}

	.wcvc-single .wcvc-kopa-tax {
		font-size: 13px;
		color: #9aa1ac;
	}

	/* Full-width add-to-cart, 50px tall (mockup). */
	.wcvc-single .wcvc-actions {
		width: 100% !important;
		flex: 1 1 auto !important;
	}

	.wcvc-single .wcvc-add-to-cart {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 9px !important;
		width: 100% !important;
		min-height: 50px !important;
		border-radius: 12px !important;
	}

	/* ---- Product gallery (WooCommerce / Elementor Product Images) ----
	   Main photo 4/3 (mockup). NOTE: source photos are portrait bags — if
	   4/3 clips the bag, change aspect-ratio to 1/1 or object-fit: contain. */
	.woocommerce div.product .woocommerce-product-gallery__image img,
	.woocommerce-product-gallery__image img {
		aspect-ratio: 4 / 3 !important;
		border-radius: 16px !important;
		border: 1px solid #eceef0 !important;
		object-fit: cover !important;
		margin-bottom: 12px !important;
	}

	/* Thumbnails — 3 in a row. */
	.woocommerce-product-gallery .flex-control-thumbs {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 10px !important;
		margin: 0 0 20px !important;
		padding: 0 !important;
	}

	.woocommerce-product-gallery .flex-control-thumbs li {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
	}

	.woocommerce-product-gallery .flex-control-thumbs li img {
		aspect-ratio: 1 / 1 !important;
		object-fit: cover !important;
		border-radius: 11px !important;
		border: 1px solid #eceef0 !important;
		opacity: 1 !important;
	}

	.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
		border-color: #3a7d44 !important;
	}

}

/* ================================================================
   Single product — bottom content blocks (Elementor widgets)
   Scoped to body.single-product so accordions/descriptions elsewhere
   on the site are untouched. Styles the product description widget
   and the FAQ (Elementor Nested Accordion) to match the card system.
   Applies at all widths. Colours reuse the existing palette.
   ================================================================ */

/* ---- Product description (woocommerce-product-content widget) ---- */
.single-product .elementor-widget-woocommerce-product-content {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #3b4250;
	line-height: 1.6;
}

.single-product .elementor-widget-woocommerce-product-content p {
	margin: 0 0 12px;
	font-size: 15px;
}

.single-product .elementor-widget-woocommerce-product-content strong {
	color: #1b2026;
	font-weight: 800;
}

.single-product .elementor-widget-woocommerce-product-content ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

.single-product .elementor-widget-woocommerce-product-content li {
	margin: 0 0 6px;
}

/* ---- FAQ accordion (Elementor Nested Accordion) ---- */
.single-product .e-n-accordion {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.single-product .e-n-accordion .e-n-accordion-item {
	border: 1px solid #eceef0 !important;
	border-radius: 12px !important;
	background: #fff !important;
	overflow: hidden !important;
}

.single-product .e-n-accordion .e-n-accordion-item-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 14px 16px !important;
	cursor: pointer !important;
	list-style: none !important;
}

.single-product .e-n-accordion .e-n-accordion-item-title::-webkit-details-marker {
	display: none;
}

.single-product .e-n-accordion .e-n-accordion-item-title::marker {
	content: "";
}

.single-product .e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
	background: #f6f7f8 !important;
}

.single-product .e-n-accordion .e-n-accordion-item-title-text {
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #1b2026 !important;
}

.single-product .e-n-accordion .e-n-accordion-item-title-icon {
	flex: 0 0 auto !important;
	color: #9aa1ac !important;
}

/* Answer text (a heading widget inside the open region). */
.single-product .e-n-accordion [role="region"] .elementor-heading-title {
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: #5b6470 !important;
	margin: 0 !important;
	padding: 0 16px 14px !important;
}

/* ================================================================
   Tech-info table ([wcvc_tech_info]) — auto-built specs table.
   Plugin markup, so plain class scope. Frakcija + Cena cells are
   updated live by the selector JS.
   ================================================================ */
.wcvc-tech-info {
	border: 1px solid #eceef0;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wcvc-tech-info .wcvc-ti-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid #f1f2f3;
}

.wcvc-tech-info .wcvc-ti-row:first-child {
	border-top: none;
}

.wcvc-tech-info .wcvc-ti-key {
	color: #9aa1ac;
	font-size: 14px;
}

.wcvc-tech-info .wcvc-ti-val {
	color: #1b2026;
	font-weight: 700;
	font-size: 14px;
	text-align: right;
}

.wcvc-tech-info .wcvc-ti-val .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* ================================================================
   Related products ("Saistītie Produkti") — compact rows (mockup).
   Default WooCommerce related block (section.related.products). Applies
   at all widths. Overrides the catalog-card styling for this block only.
   ================================================================ */

/* Section title. */
.woocommerce .related.products > h2,
.related.products > h2 {
	font-family: 'Manrope', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #1b2026;
	margin: 0 0 18px;
}

/* List → responsive grid of card tiles, same visual language as the
   catalog .wcvc-card (border, radius, Manrope, dark CTA). Auto-fill keeps
   it responsive without media queries: ~2 cols on phones, up to 4 on wide. */
.woocommerce .related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
	gap: 16px !important;
	margin: 0 !important;
}

/* The theme's clearfix ::before/::after on ul.products would become stray
   grid cells and offset the tiles — neutralise them. */
.woocommerce .related.products ul.products::before,
.woocommerce .related.products ul.products::after {
	display: none !important;
	content: none !important;
}

/* Each product = a vertical, fully-clickable card tile. */
.woocommerce .related.products ul.products li.product {
	position: relative !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 0 16px !important;
	border: 1px solid #eceef0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	background: #fff !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}

.woocommerce .related.products ul.products li.product:hover {
	border-color: #d7dadf !important;
	box-shadow: 0 6px 18px rgba(16, 24, 40, .06) !important;
}

/* The link stacks image → title → price. Force static position so its
   stretched ::after resolves against the card (li), not the link box —
   the theme sets position:relative on anchors, which would otherwise clip
   the click area to the link and leave the faux CTA dead. */
.woocommerce .related.products li.product > a:first-child {
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	position: static !important;
}

/* Stretched link: cover the whole card so the faux CTA below is clickable
   too and the entire tile navigates to the product. */
.woocommerce .related.products li.product > a:first-child::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 2 !important;
}

.woocommerce .related.products ul.products li.product > a:first-child img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	margin: 0 0 12px !important;
	display: block !important;
}

.woocommerce .related.products li.product .woocommerce-loop-product__title {
	padding: 0 14px !important;
	margin: 0 !important;
	text-align: left !important;
	font-family: 'Manrope', sans-serif !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: #1b2026 !important;
}

.woocommerce .related.products li.product .price {
	display: block !important;
	padding: 0 14px !important;
	margin: 4px 0 14px !important;
	font-family: 'Manrope', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1b2026 !important;
}

/* Hide everything that isn't the link — image + title + price live inside
   the first <a>; the qty box, WC button, stock note and sr-text are noise. */
.woocommerce .related.products li.product > *:not(a:first-child) {
	display: none !important;
}

.woocommerce .related.products li.product .button,
.woocommerce .related.products li.product .added_to_cart,
.woocommerce .related.products li.product form,
.woocommerce .related.products li.product .quantity,
.woocommerce .related.products li.product input.qty,
.woocommerce .related.products li.product .stock {
	display: none !important;
}

/* Faux CTA button at the card foot (visual only; the stretched link above
   captures the click and navigates to the product page). */
.woocommerce .related.products li.product::after {
	content: "Skatīt produktu" !important;
	display: block !important;
	margin: 0 14px !important;
	padding: 11px 14px !important;
	border-radius: 10px !important;
	background: #161b22 !important;
	color: #fff !important;
	font-family: 'Manrope', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-align: center !important;
	line-height: 1.2 !important;
	position: relative !important;
	z-index: 1 !important;
}

/* ================================================================
   Out-of-stock notice (.wcvc-oos-note) + the theme's OOS badge.
   ================================================================ */
.wcvc-oos-note {
	background: #f5f6f7;
	border-radius: var(--wcvc-radius);
	padding: 14px 18px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: #7b838d;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wcvc-oos-note a {
	color: #2c6135;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}

.wcvc-oos-note a:hover {
	text-decoration: underline;
}

/* Out-of-stock badge (theme class) → red pill in the image's top-left,
   matching the mockup (the theme renders it in-flow after the image). */
.woocommerce ul.products li.product > a:first-child {
	position: relative !important;
}

.out-of-stock-label {
	position: absolute !important;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: inline-block;
	background: #e5484d !important;
	color: #fff !important;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 12px;
	white-space: nowrap;
}

/* In the compact related rows the badge would sit on the 64px thumb — hide it. */
.woocommerce .related.products li.product .out-of-stock-label {
	display: none !important;
}