/**
 * BOX DEAL design system.
 * Global tokens; content defaults scoped to main to preserve Blocksy chrome.
 * Components are opt-in and do not depend on WooCommerce markup.
 */

:root {
	--boxdeal-primary: #0b1f3a;
	--boxdeal-primary-hover: #17385e;
	--boxdeal-accent: #ff6a00;
	/* Accessible orange for white text; the brand accent remains unchanged. */
	--boxdeal-accent-strong: #b84700;
	--boxdeal-accent-hover: #963a00;
	--boxdeal-background: #f5f7fa;
	--boxdeal-surface: #ffffff;
	--boxdeal-surface-muted: #edf1f5;
	--boxdeal-text-primary: #17263b;
	--boxdeal-text-secondary: #526174;
	--boxdeal-on-primary: #ffffff;
	--boxdeal-on-accent: #ffffff;
	--boxdeal-border: #dce2e9;
	--boxdeal-border-control: #7b8795;
	--boxdeal-success: #176b45;
	--boxdeal-success-surface: #e9f5ee;
	--boxdeal-danger: #b42332;
	--boxdeal-danger-surface: #fff0f1;
	--boxdeal-accent-surface: #fff2e8;
	--boxdeal-focus: #215fba;
	--boxdeal-disabled-background: #e3e8ee;
	--boxdeal-disabled-text: #526174;

	--boxdeal-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--boxdeal-font-size-small: 0.875rem;
	--boxdeal-font-size-base: 1rem;
	--boxdeal-font-size-large: 1.125rem;
	--boxdeal-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
	--boxdeal-h2: clamp(1.75rem, 1.375rem + 1.5vw, 2.5rem);
	--boxdeal-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--boxdeal-h4: 1.375rem;
	--boxdeal-h5: 1.125rem;
	--boxdeal-h6: 1rem;
	--boxdeal-weight-medium: 500;
	--boxdeal-weight-semibold: 600;
	--boxdeal-weight-bold: 700;
	--boxdeal-line-height: 1.6;
	--boxdeal-heading-line-height: 1.2;

	--boxdeal-space-1: 0.25rem;
	--boxdeal-space-2: 0.5rem;
	--boxdeal-space-3: 0.75rem;
	--boxdeal-space-4: 1rem;
	--boxdeal-space-5: 1.5rem;
	--boxdeal-space-6: 2rem;
	--boxdeal-space-7: 3rem;
	--boxdeal-radius-small: 0.375rem;
	--boxdeal-radius: 0.625rem;
	--boxdeal-radius-large: 0.875rem;
	--boxdeal-radius-pill: 999px;
	--boxdeal-container-width: 1320px;
	--boxdeal-container-padding: 2rem;
	--boxdeal-touch-target: 2.75rem;
	--boxdeal-shadow-small: 0 2px 8px rgb(11 31 58 / 5%);
	--boxdeal-shadow-card: 0 6px 20px rgb(11 31 58 / 8%);
	--boxdeal-transition-fast: 150ms ease;
	--boxdeal-transition: 200ms ease;
}

body {
	font-family: var(--boxdeal-font-family);
	font-size: var(--boxdeal-font-size-base);
	line-height: var(--boxdeal-line-height);
	color: var(--boxdeal-text-primary);
	background-color: var(--boxdeal-background);
}

/* Keep theme header/footer settings local; no global Blocksy token overrides. */
main :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--boxdeal-font-family);
	font-weight: var(--boxdeal-weight-bold);
	line-height: var(--boxdeal-heading-line-height);
	color: var(--boxdeal-primary);
	margin-block: 0 var(--boxdeal-space-4);
	overflow-wrap: anywhere;
}

main h1 { font-size: var(--boxdeal-h1); }
main h2 { font-size: var(--boxdeal-h2); }
main h3 { font-size: var(--boxdeal-h3); }
main h4 { font-size: var(--boxdeal-h4); }
main h5 { font-size: var(--boxdeal-h5); }
main h6 { font-size: var(--boxdeal-h6); }

main :where(p) {
	margin-block: 0 var(--boxdeal-space-4);
	overflow-wrap: anywhere;
}

main :where(a:not([class])) {
	color: var(--boxdeal-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--boxdeal-transition-fast);
}

main :where(a:not([class])):hover {
	color: var(--boxdeal-accent-strong);
}

/* Two-color focus ring remains visible on light and dark surfaces. */
main :focus-visible,
.boxdeal-btn:focus-visible,
.boxdeal-product-card :focus-visible {
	outline: 3px solid var(--boxdeal-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--boxdeal-surface);
}

/* Text fields only: preserve native checkbox/radio and specialized controls. */
main :is(input:not([type]), input[type="text"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], select, textarea) {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	min-height: var(--boxdeal-touch-target);
	padding: var(--boxdeal-space-3) var(--boxdeal-space-4);
	border: 1px solid var(--boxdeal-border-control);
	border-radius: var(--boxdeal-radius-small);
	font-family: var(--boxdeal-font-family);
	font-size: var(--boxdeal-font-size-base);
	line-height: 1.5;
	color: var(--boxdeal-text-primary);
	background-color: var(--boxdeal-surface);
	transition: border-color var(--boxdeal-transition-fast);
}

main select { padding-inline-end: var(--boxdeal-space-6); }
main textarea { min-height: 8rem; resize: vertical; }
main :is(input, textarea)::placeholder { color: var(--boxdeal-text-secondary); opacity: 1; }
main :is(input, select, textarea):focus-visible { border-color: var(--boxdeal-focus); }
main :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--boxdeal-danger); }
main :is(input, select, textarea):disabled {
	color: var(--boxdeal-disabled-text);
	background-color: var(--boxdeal-disabled-background);
	cursor: not-allowed;
	opacity: 1;
}

/* Width includes gutters; flexible children and long names may shrink/wrap. */
.boxdeal-container,
.boxdeal-container *,
.boxdeal-container *::before,
.boxdeal-container *::after,
.boxdeal-card,
.boxdeal-product-card,
.boxdeal-product-card *,
.boxdeal-btn,
.boxdeal-badge { box-sizing: border-box; }

.boxdeal-container {
	width: 100%;
	max-width: var(--boxdeal-container-width);
	min-width: 0;
	margin-inline: auto;
	padding-inline: var(--boxdeal-container-padding);
}

.boxdeal-card,
.boxdeal-product-card {
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--boxdeal-border);
	border-radius: var(--boxdeal-radius-large);
	background: var(--boxdeal-surface);
	color: var(--boxdeal-text-primary);
	box-shadow: var(--boxdeal-shadow-small);
	overflow-wrap: anywhere;
}

.boxdeal-card { padding: var(--boxdeal-space-5); }

/* Apply to native buttons or links. Use native disabled on buttons.
 * aria-disabled only styles a link; callers must also prevent activation.
 */
.boxdeal-btn {
	--boxdeal-btn-background: var(--boxdeal-primary);
	--boxdeal-btn-color: var(--boxdeal-on-primary);
	--boxdeal-btn-hover: var(--boxdeal-primary-hover);
	--boxdeal-btn-border: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--boxdeal-space-2);
	min-width: var(--boxdeal-touch-target);
	min-height: var(--boxdeal-touch-target);
	max-width: 100%;
	padding: var(--boxdeal-space-3) var(--boxdeal-space-5);
	border: 1px solid var(--boxdeal-btn-border);
	border-radius: var(--boxdeal-radius);
	font-family: var(--boxdeal-font-family);
	font-size: var(--boxdeal-font-size-base);
	font-weight: var(--boxdeal-weight-semibold);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	color: var(--boxdeal-btn-color);
	background: var(--boxdeal-btn-background);
	box-shadow: none;
	transform: none;
	cursor: pointer;
	transition: background-color var(--boxdeal-transition-fast), color var(--boxdeal-transition-fast), border-color var(--boxdeal-transition-fast);
}

.boxdeal-btn--primary {
	--boxdeal-btn-background: var(--boxdeal-primary);
	--boxdeal-btn-color: var(--boxdeal-on-primary);
	--boxdeal-btn-hover: var(--boxdeal-primary-hover);
}

.boxdeal-btn--secondary {
	--boxdeal-btn-background: var(--boxdeal-accent);
	--boxdeal-btn-color: var(--boxdeal-primary);
	--boxdeal-btn-hover: #f06000;
}

.boxdeal-btn--ghost {
	--boxdeal-btn-background: transparent;
	--boxdeal-btn-color: var(--boxdeal-primary);
	--boxdeal-btn-hover: var(--boxdeal-surface-muted);
	--boxdeal-btn-border: var(--boxdeal-primary);
}

.boxdeal-btn:not(:disabled):not([aria-disabled="true"]):is(:hover, :active) {
	color: var(--boxdeal-btn-color);
	background: var(--boxdeal-btn-hover);
	border-color: var(--boxdeal-btn-border);
	text-decoration: none;
	transform: none;
}

.boxdeal-btn:is(:disabled, [aria-disabled="true"]) {
	color: var(--boxdeal-disabled-text);
	background: var(--boxdeal-disabled-background);
	border-color: var(--boxdeal-border-control);
	box-shadow: none;
	transform: none;
	opacity: 1;
	cursor: not-allowed;
}

.boxdeal-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow var(--boxdeal-transition);
}

/* Image class can be used on an img or on its linked wrapper. */
.boxdeal-product-card__image {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: var(--boxdeal-space-4);
	border-radius: var(--boxdeal-radius-large) var(--boxdeal-radius-large) 0 0;
	background: var(--boxdeal-surface);
}

.boxdeal-product-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.boxdeal-product-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--boxdeal-space-2);
	min-width: 0;
	padding: var(--boxdeal-space-4);
}

.boxdeal-product-card__brand {
	font-size: var(--boxdeal-font-size-small);
	font-weight: var(--boxdeal-weight-medium);
	color: var(--boxdeal-text-secondary);
}

.boxdeal-product-card__title {
	margin: 0;
	font-family: var(--boxdeal-font-family);
	font-size: var(--boxdeal-font-size-base);
	font-weight: var(--boxdeal-weight-semibold);
	line-height: 1.45;
	color: var(--boxdeal-primary);
}

.boxdeal-product-card__title a { color: inherit; text-decoration: none; }
.boxdeal-product-card__title a:hover { color: var(--boxdeal-accent-strong); text-decoration: underline; }

.boxdeal-product-card__price {
	font-size: var(--boxdeal-h4);
	font-weight: var(--boxdeal-weight-bold);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--boxdeal-primary);
}

.boxdeal-product-card__price ins { background: transparent; color: inherit; text-decoration: none; }
.boxdeal-product-card__old-price {
	font-size: var(--boxdeal-font-size-small);
	font-weight: var(--boxdeal-weight-medium);
	font-variant-numeric: tabular-nums;
	color: var(--boxdeal-text-secondary);
	text-decoration: line-through;
	opacity: 1;
}

.boxdeal-product-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--boxdeal-space-2);
	margin-block-start: auto;
	padding-block-start: var(--boxdeal-space-4);
}

.boxdeal-product-card__actions > * { min-width: 0; max-width: 100%; }
.boxdeal-product-card__actions .boxdeal-btn { flex: 1 1 auto; min-width: var(--boxdeal-touch-target); }

/* Badges are text labels, not interactive controls. */
.boxdeal-badge {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: var(--boxdeal-space-1) var(--boxdeal-space-3);
	border-radius: var(--boxdeal-radius-pill);
	font-family: var(--boxdeal-font-family);
	font-size: var(--boxdeal-font-size-small);
	font-weight: var(--boxdeal-weight-semibold);
	line-height: 1.5;
	overflow-wrap: anywhere;
	color: var(--boxdeal-primary);
	background: var(--boxdeal-surface-muted);
}

.boxdeal-badge--sale { color: var(--boxdeal-danger); background: var(--boxdeal-danger-surface); }
.boxdeal-badge--new { color: var(--boxdeal-success); background: var(--boxdeal-success-surface); }
.boxdeal-badge--top { color: var(--boxdeal-on-primary); background: var(--boxdeal-primary); }
.boxdeal-badge--limited { color: var(--boxdeal-accent-strong); background: var(--boxdeal-accent-surface); }

@media (hover: hover) and (pointer: fine) {
	.boxdeal-product-card:hover { box-shadow: var(--boxdeal-shadow-card); }
}

/* Tablet: 690–1024px; mobile: up to 689px. */
@media (max-width: 1024px) {
	:root { --boxdeal-container-padding: 1.5rem; }
}

@media (max-width: 689px) {
	:root {
		--boxdeal-container-padding: 1rem;
		--boxdeal-touch-target: 3rem;
	}
	.boxdeal-card { padding: var(--boxdeal-space-4); }
	.boxdeal-product-card__content { padding: var(--boxdeal-space-3); }
	.boxdeal-product-card__actions .boxdeal-btn { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--boxdeal-transition-fast: 0s;
		--boxdeal-transition: 0s;
	}
}