/**
 * Sleek Woo Products — Frontend core styles.
 * Design tokens are exposed as CSS custom properties on :root (see
 * includes/class-assets.php) so every visual aspect is themeable without
 * editing this file. All selectors are scoped under the swp- namespace to
 * avoid ever conflicting with Hello Elementor or other theme styles.
 */

:root {
	--swp-primary: #111111;
	--swp-secondary: #171717;
	--swp-accent: #111111;
	--swp-text: #171717;
	--swp-muted: #737373;
	--swp-background: #ffffff;
	--swp-card-background: #ffffff;
	--swp-border: #eaeaea;
	--swp-sale: #d92d20;
	--swp-success: #0a7d32;
	--swp-error: #d92d20;
	--swp-font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--swp-font-heading: inherit;
	--swp-font-button: inherit;
	--swp-radius: 16px;
	--swp-button-radius: 8px;
	--swp-container: 1200px;

	/* Premium design-token layer. These are aliases of the settings above
	   plus a small set of fixed constants (spacing scale, shadows,
	   transition curve) that are not exposed as admin settings but can
	   still be overridden globally via the Custom CSS field. */
	--swp-color-primary: var(--swp-primary);
	--swp-color-text: var(--swp-text);
	--swp-color-text-secondary: #666666;
	--swp-color-muted: var(--swp-muted);
	--swp-color-border: var(--swp-border);
	--swp-color-surface: #f7f7f5;
	--swp-color-sale: var(--swp-sale);
	--swp-radius-sm: 6px;
	--swp-radius-md: var(--swp-radius);
	--swp-radius-lg: 24px;
	--swp-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
	--swp-shadow-md: 0 12px 32px rgba(17, 17, 17, 0.08);
	--swp-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);

	/* 4/8/12/16/24/32/48/64 spacing scale, used consistently across the
	   grid, card, and detail layouts instead of arbitrary margins. */
	--swp-space-1: 4px;
	--swp-space-2: 8px;
	--swp-space-3: 12px;
	--swp-space-4: 16px;
	--swp-space-5: 24px;
	--swp-space-6: 32px;
	--swp-space-7: 48px;
	--swp-space-8: 64px;
}

.swp-grid-wrapper,
.swp-card,
.swp-detail,
.swp-modal {
	font-family: var(--swp-font-base);
	color: var(--swp-text);
	box-sizing: border-box;
}

.swp-grid-wrapper *,
.swp-card *,
.swp-detail *,
.swp-modal * {
	box-sizing: border-box;
}

.swp-notice,
.swp-empty {
	color: var(--swp-muted);
	font-family: var(--swp-font-base);
	padding: 16px 0;
}

/* -------------------------------------------------------------------- */
/* Grid                                                                  */
/* -------------------------------------------------------------------- */

.swp-grid {
	display: grid;
	grid-template-columns: repeat(var(--swp-grid-columns, 4), minmax(0, 1fr));
	column-gap: var(--swp-grid-gap, 24px);
	row-gap: var(--swp-grid-row-gap, 40px);
}

.swp-grid--masonry {
	grid-auto-flow: dense;
	align-items: start;
}

@media (max-width: 1024px) {
	.swp-grid {
		grid-template-columns: repeat(var(--swp-grid-columns-tablet, 3), minmax(0, 1fr));
		column-gap: var(--swp-grid-gap, 20px);
		row-gap: var(--swp-grid-row-gap, 32px);
	}
}

@media (max-width: 640px) {
	.swp-grid {
		grid-template-columns: repeat(var(--swp-grid-columns-mobile, 2), minmax(0, 1fr));
		column-gap: var(--swp-space-3);
		row-gap: var(--swp-space-5);
	}
}

@media (max-width: 380px) {
	.swp-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */

.swp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--swp-font-button);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid var(--swp-color-primary);
	background-color: var(--swp-color-primary);
	color: #ffffff;
	border-radius: var(--swp-button-radius);
	padding: 12px 20px;
	min-height: 44px;
	width: 100%;
	transition: background-color var(--swp-transition), color var(--swp-transition), border-color var(--swp-transition), transform var(--swp-transition), opacity var(--swp-transition);
}

.swp-button:hover,
.swp-button:focus-visible {
	background-color: var(--swp-secondary);
	border-color: var(--swp-secondary);
	color: #ffffff;
}

.swp-button:focus-visible {
	outline: 2px solid var(--swp-accent);
	outline-offset: 2px;
}

.swp-button--view {
	background-color: transparent;
	color: var(--swp-primary);
}

.swp-button--view:hover,
.swp-button--view:focus-visible {
	background-color: var(--swp-primary);
	color: #ffffff;
}

.swp-button--disabled {
	background-color: var(--swp-border);
	border-color: var(--swp-border);
	color: var(--swp-muted);
	cursor: not-allowed;
	pointer-events: none;
}

.swp-button--loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.swp-button--loading .swp-button__spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swp-button--loading .swp-button__spinner svg {
	width: 18px;
	height: 18px;
	color: #ffffff;
}

.swp-button--success {
	background-color: var(--swp-success);
	border-color: var(--swp-success);
}

.swp-button__icon svg {
	width: 16px;
	height: 16px;
}

.swp-button--load-more {
	width: auto;
	margin: 32px auto 0;
	padding: 12px 32px;
}

.swp-load-more-wrap {
	display: flex;
	justify-content: center;
}

/* -------------------------------------------------------------------- */
/* Pagination                                                            */
/* -------------------------------------------------------------------- */

.swp-pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

.swp-pagination ul.page-numbers {
	display: flex;
	list-style: none;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.swp-pagination .page-numbers a,
.swp-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--swp-button-radius);
	border: 1px solid var(--swp-border);
	color: var(--swp-text);
	text-decoration: none;
	font-size: 14px;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.swp-pagination .page-numbers a:hover {
	background-color: var(--swp-primary);
	border-color: var(--swp-primary);
	color: #ffffff;
}

.swp-pagination .page-numbers.current {
	background-color: var(--swp-primary);
	border-color: var(--swp-primary);
	color: #ffffff;
}

/* -------------------------------------------------------------------- */
/* Quick View Modal                                                      */
/* -------------------------------------------------------------------- */

.swp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.swp-modal.is-open {
	display: block;
}

.swp-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(17, 17, 17, 0.5);
	opacity: 0;
	transition: opacity 250ms ease;
}

.swp-modal.is-open .swp-modal__backdrop {
	opacity: 1;
}

.swp-modal__panel {
	position: relative;
	z-index: 1;
	background-color: var(--swp-background);
	max-width: 900px;
	width: calc(100% - 32px);
	max-height: calc(100% - 64px);
	margin: 32px auto;
	border-radius: var(--swp-radius);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 250ms ease, transform 250ms ease;
	padding: 32px;
}

.swp-modal.is-open .swp-modal__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.swp-modal__close {
	position: sticky;
	top: 0;
	float: right;
	background: var(--swp-card-background);
	border: 1px solid var(--swp-border);
	border-radius: 999px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--swp-text);
	margin-bottom: 8px;
	z-index: 2;
}

.swp-modal__close svg {
	width: 16px;
	height: 16px;
}

.swp-modal__close:focus-visible {
	outline: 2px solid var(--swp-accent);
	outline-offset: 2px;
}

.swp-modal__body {
	clear: both;
}

.swp-modal__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	color: var(--swp-muted);
}

body.swp-modal-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* Cart count badge (mini-cart integration)                              */
/* -------------------------------------------------------------------- */

.swp-cart-count {
	display: inline-flex;
}

/* -------------------------------------------------------------------- */
/* Accessibility helpers                                                 */
/* -------------------------------------------------------------------- */

.swp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

a.swp-card__image-link:focus-visible,
button:focus-visible {
	outline: 2px solid var(--swp-accent);
	outline-offset: 2px;
}