/* ==========================================================================
   WS Theme — woocommerce.css
   Loaded by functions.php ONLY when WooCommerce is active. Every value
   references the design tokens declared in main.css :root, so WooCommerce
   automatically inherits each project's theme — no hardcoded values here.

   Contents:
     1. General (buttons, prices)
     2. Single product page (title, review stars, trust-badge area)
     3. Cart page (clean table)
     4. Order received / thank-you page (order summary)
     5. Product card + badges (shared component)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. General
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	padding: var(--spacing-sm) var(--spacing-lg);
	color: #fff;
	font-weight: 600;
	background-color: var(--color-accent);
	border-radius: var(--radius);
	transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	color: #fff;
	background-color: var(--color-accent-hover);
}

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

.woocommerce del {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   2. Single product page
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	margin-bottom: var(--spacing-sm);
}

/* Review stars — coloured with the accent and spaced from the title block. */
.woocommerce .star-rating {
	color: var(--color-accent);
	margin-bottom: var(--spacing-sm);
}

.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   3. Cart page
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

.woocommerce table.shop_table th {
	text-align: left;
	background-color: var(--color-bg-surface);
}

.woocommerce .cart-collaterals .cart_totals {
	padding: var(--spacing-lg);
	background-color: var(--color-bg-surface);
	border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   4. Order received / thank-you page
   -------------------------------------------------------------------------- */
.woocommerce-order {
	max-width: 720px;
	margin-inline: auto;
}

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-lg);
	list-style: none;
	background-color: var(--color-bg-surface);
	border-radius: var(--radius);
}

.woocommerce ul.order_details li {
	border: none;
	color: var(--color-text-muted);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--spacing-xs);
	color: var(--color-text);
	font-size: 1rem;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   5. Product card + badges  (SHARED COMPONENT)
   The single source of truth for the .product-card rendered by
   template-parts/components/product-card.php. Loaded site-wide whenever
   WooCommerce is active, so the homepage Bestsellers grid and the /parduotuve
   catalog share identical card styling. Context-specific grid/layout wrappers
   (e.g. .product-grid on the homepage, .shop-grid in the catalog) live in
   their own stylesheets.

   The only literals are translucent blacks (shadow / badge background) and the
   single vegan green, for which no design token exists.
   -------------------------------------------------------------------------- */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: border-color 0.2s ease;
}

.product-card:hover {
	border-color: var(--color-accent);
}

/* Media: a branded backdrop (radial accent glow + faint hex texture) the
   product photo sits on, with a bottom fade so the photo blends into the body
   instead of ending in a hard edge. The hex texture echoes the homepage hero /
   category grid motif (rendered here in pure CSS so AJAX-inserted cards get it
   too, without re-running the homepage SVG script). */
.product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(204, 0, 0, 0.1), transparent 60%),
		linear-gradient(180deg, var(--color-bg-card), var(--color-bg-surface));
}

.product-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.06;
	background-image:
		repeating-linear-gradient(60deg, transparent, transparent 9px, var(--color-accent) 9px, var(--color-accent) 10px),
		repeating-linear-gradient(-60deg, transparent, transparent 9px, var(--color-accent) 9px, var(--color-accent) 10px);
	background-size: 18px 32px;
	pointer-events: none;
}

.product-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 40%;
	background: linear-gradient(180deg, transparent, var(--color-bg-surface));
	pointer-events: none;
}

.product-card__image {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__image--secondary {
	z-index: 2;
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.product-card__image--secondary {
		transition: opacity 0.2s ease;
	}

	.product-card:hover .product-card__image--secondary {
		opacity: 1;
	}
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-md);
}

.product-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* Small accent square preceding the category label. */
.product-card__cat-mark {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 1px;
	background-color: var(--color-accent-hover);
}

.product-card__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.product-card__title a {
	color: var(--color-text);
}

.product-card__title a:hover,
.product-card__title a:focus-visible {
	color: var(--color-accent-text);
}

/* Foot: price block (left) + icon cart button (right), pinned to the bottom so
   cards of differing title length stay aligned. */
.product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	margin-top: auto;
	padding-top: var(--spacing-sm);
}

.product-card__price-block {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.product-card__price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
}

.product-card__price-sub {
	margin-top: 2px;
	font-size: 0.625rem;
	color: var(--color-text-muted);
}

.product-card__price del {
	margin-right: var(--spacing-xs);
	font-weight: 400;
	color: var(--color-text-muted);
}

.product-card__price ins {
	text-decoration: none;
}

.product-card__stock {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.product-card__stock--out {
	color: var(--color-text-muted);
}

/* Icon-only add-to-cart button. The selector is intentionally high-specificity
   (and the box props use !important) so it beats WooCommerce core's
   `.woocommerce a.button` rule (0,2,1) on the catalog, where body.woocommerce
   is present — otherwise WC's padding/display would stretch the icon button. */
.product-card .product-card__cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 48px !important;
	min-height: 48px !important;
	margin-top: 0;
	padding: 0 !important;
	color: #fff;
	background-color: var(--color-accent);
	border: 1px solid var(--color-accent);
	/* !important: WC core's a.button border-radius (0,2,1) outranks this rule. */
	border-radius: var(--radius-md) !important;
	transition:
		background-color 0.2s ease,
		transform 0.12s ease,
		box-shadow 0.18s ease;
}

.product-card .product-card__cart:hover,
.product-card .product-card__cart:focus-visible {
	color: #fff;
	background-color: var(--color-accent-hover);
	box-shadow: 0 0 16px rgba(255, 26, 26, 0.45);
}

.product-card .product-card__cart:active {
	transform: scale(0.9);
}

.product-card__cart-icon {
	flex-shrink: 0;
}

.product-card .product-card__cart--select {
	gap: var(--spacing-xs);
	min-width: 0 !important;
	padding: 0 var(--spacing-sm) !important;
	font-size: 0.75rem;
	line-height: 1.15;
	text-align: left;
}

@media (max-width: 767px) {
	.product-card__foot--variable-action {
		flex-wrap: wrap;
	}

	.product-card .product-card__cart--select {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	.product-card .product-card__cart--select .product-card__cart-icon {
		display: none;
	}
}

/* WooCommerce appends a "View cart" link after a successful AJAX add — keep it
   from inheriting the icon-button box. */
.product-card .added_to_cart {
	display: none;
}

/* ---- Badges -------------------------------------------------------------
   Reusable variants for the single priority badge rendered by each card:
     .pl-badge--sale, .pl-badge--stock, .pl-badge--featured, .pl-badge--vegan
   ------------------------------------------------------------------------- */
.pl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0.62em;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 6px;
}

/* Populiaru: bright white chip with dark text. */
.pl-badge--featured {
	color: #161616;
	background-color: rgba(255, 255, 255, 0.94);
}

/* Sale: solid accent chip. */
.pl-badge--sale {
	color: #fff;
	background-color: var(--color-accent);
}

/* Corner overlay ignores pointer events so the media link remains clickable. */
.product-card__badges {
	position: absolute;
	top: var(--spacing-sm);
	left: var(--spacing-sm);
	right: var(--spacing-sm);
	z-index: 3;
	display: flex;
	pointer-events: none;
}

.pl-badge--sale {
	margin-left: auto;
}

/* Low-stock: red translucent pill (no matching translucent design token). */
.pl-badge--stock {
	align-self: flex-start;
	color: #ff8a8a;
	background-color: rgba(204, 0, 0, 0.14);
	border: 1px solid rgba(204, 0, 0, 0.35);
	border-radius: 20px;
}

/* Vegan: green translucent pill + leaf icon, above the category. */
.pl-badge--vegan {
	align-self: flex-start;
	color: #6fcf86;
	background-color: rgba(63, 174, 92, 0.15);
	border: 1px solid rgba(63, 174, 92, 0.35);
	border-radius: 20px;
}

.pl-badge--vegan svg {
	width: 0.85em;
	height: 0.85em;
	fill: currentColor;
}

/* Reduced motion: keep the alternate image static. */
@media (prefers-reduced-motion: reduce) {
	.product-card__image--secondary {
		transition: none;
	}

	.product-card .product-card__cart:active {
		transform: none;
	}
}