/* Reusable components: buttons, badges, product card, product slider.
   Minimal borders/shadows per brand book — not every block should look
   like a SaaS card. */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	min-height: 48px;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
@media (min-width: 1024px) {
	.btn { min-height: 52px; }
}
.btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}
.btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.btn--primary {
	background: var(--color-accent);
	color: var(--color-accent-contrast);
}
.btn--primary:hover {
	background: var(--color-accent-dark);
}

.btn--secondary {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}
.btn--secondary:hover {
	border-color: var(--color-accent);
}

.btn--link {
	padding: 0;
	min-height: 0;
	background: none;
	color: var(--color-accent);
	font-weight: 600;
}
.btn--link:hover {
	text-decoration: underline;
}

/* Badges — pill chips, priority Sale > До 2 годин > Новинка reflected in
   visual weight (filled → filled → outline), max 2 shown per product. */
.badges {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	display: flex;
	gap: var(--space-1);
}
.badge {
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1;
}
.badge--sale {
	background: var(--color-accent-dark);
	color: var(--color-accent-contrast);
}
.badge--quick {
	background: var(--color-sand);
	color: var(--color-text);
}
.badge--new {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-text);
}

/* Product card — white surface, square image, reused by Bestsellers,
   2-hour, New products, and the catalog/category grid. */
.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}
.product-card__media {
	position: relative;
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	aspect-ratio: 6 / 5;
	background: var(--color-cream);
}
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 200ms ease;
}
.product-card:hover .product-card__media img {
	transform: scale(1.02);
}
.product-card__body {
	padding-top: var(--space-2);
}
.product-card__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-weight: 500;
	font-size: var(--text-base);
	line-height: 1.3;
}
.product-card__meta {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: var(--space-1) 0;
}
.product-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
.product-card__price {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--color-text);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: break-word;
}
.product-card__price ins { text-decoration: none; color: var(--color-accent-dark); }
.product-card__price del { opacity: 0.55; font-size: 0.8em; font-weight: 400; }

@media (max-width: 639px) {
	/* Mobile type refinement pass. A previous pass bumped these up (title to
	   18px, price to 22px) to avoid a "miniature" feel — that overshot the
	   target scale, so this corrects both back down: title stays at the
	   16px base (already within the 15–16px target, just tightened
	   line-height), price drops to 18px (top of the 17–18px target). Meta
	   was tuned to 12px in an earlier pass targeting "11–13px small meta";
	   this pass's target for card meta is 13–15px, so it moves to 14px. */
	.product-card__name { line-height: 1.25; }
	.product-card__meta { font-size: var(--text-sm); }
	.product-card__price { font-size: var(--text-lg); }
}

/* Quick-add control — our own markup only, never WooCommerce's default
   button text/classes are relied on for appearance. font-size:0 + a fixed
   box guarantees no text of any kind (ours or a plugin's) can ever show,
   wrap, or overlap the price. */
.product-card__add-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: background-color 150ms ease, border-color 150ms ease;
}
.product-card__add-btn:hover {
	border-color: var(--color-accent);
}
.product-card__add-btn::before {
	content: "+";
	font-size: 20px;
	line-height: 1;
	color: var(--color-text);
}
.product-card__add-btn--select::before {
	content: "\2192"; /* → : this control navigates to choose a variation */
	font-size: 16px;
}
.product-card__add-btn.loading { opacity: 0.5; }
.product-card__add-btn.added::before { content: "\2713"; font-size: 16px; }

/* Product slider */
.product-slider__viewport {
	position: relative;
}
.product-slider__track {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--space-2);
}
.product-slider__track::-webkit-scrollbar { display: none; }
.product-slider__item {
	flex: 0 0 auto;
	width: 78%; /* mobile only: card feels full-size with a partial peek of the next one */
	scroll-snap-align: start;
}
@media (min-width: 640px) {
	/* Tablet: exactly 3 full cards, no clipped next card. */
	.product-slider__item { width: calc((100% - 2 * var(--space-4)) / 3); }
}
@media (min-width: 1024px) {
	/* Desktop: exactly 4 full cards, no clipped 5th. */
	.product-slider__item { width: calc((100% - 3 * var(--space-4)) / 4); }
}
.product-slider__arrow {
	display: none;
}
@media (min-width: 1024px) {
	.product-slider__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		font-size: 20px;
		z-index: 2;
	}
	.product-slider__arrow--prev { left: var(--space-2); }
	.product-slider__arrow--next { right: var(--space-2); }
}