/* ScentMoire — Front-End Overrides */

/*
 * Use this file for global CSS that can't be expressed in theme.json.
 * Prefer theme.json custom properties wherever possible.
 */

/* Smooth scrolling; clip horizontal bleed (e.g. product-collections carousel) without page scrollbar */
html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

/* Selection color */
::selection {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--text-light);
}

/* Focus styles for accessibility */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Transition utility */
a,
button,
input,
.wp-block-button__link {
	transition: all var(--wp--custom--transition--normal);
}

/* WooCommerce: Add-to-Cart button */
.scentmoire-add-to-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--text-light);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--wp--custom--border-radius--md);
	cursor: pointer;
	border: none;
	transition: background var(--wp--custom--transition--normal),
	            transform var(--wp--custom--transition--fast);
}

.scentmoire-add-to-cart:hover {
	background: var(--wp--preset--color--primary);
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* WooCommerce: Breadcrumbs */
.scentmoire-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
	padding: var(--wp--preset--spacing--40) 0;
}

.scentmoire-breadcrumb-sep {
	margin: 0 0.5em;
	opacity: 0.5;
}

/* ==========================================================================
   Page numbers (query pagination): bordered boxes, same as the Shop filters
   block, instead of faint gold text links.
   ========================================================================== */
.wp-block-query-pagination {
	gap: 8px;
	margin-top: 40px;
}

.wp-block-query-pagination-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--border-subtle, #e0dcd5);
	border-radius: 4px;
	color: var(--wp--preset--color--text-primary, #1a1a2e);
	font-size: 0.875rem;
	line-height: 1;
	text-decoration: none;
	box-sizing: border-box;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination a.page-numbers:focus-visible,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-next:focus-visible {
	border-color: var(--wp--preset--color--text-primary, #1a1a2e);
	color: var(--wp--preset--color--text-primary, #1a1a2e);
}

.wp-block-query-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--text-primary, #1a1a2e);
	background: var(--wp--preset--color--text-primary, #1a1a2e);
	color: #fff;
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 20px;
	padding: 0;
}

/* Home hero: on phones it was 930px tall, more than one screen. Keep it to about one screen. */
@media (max-width: 600px) {
	.wp-block-cover.scentmoire-home-hero {
		min-height: 620px !important;
		padding: 190px 20px 40px !important;
	}
}

/* Home hero: the short gold rule under the ScentMoire wordmark, as on the Coming Soon page. */
.wp-block-cover.scentmoire-home-hero .wp-block-separator.scentmoire-hero-rule {
	width: 56px;
	max-width: 56px;
	height: 1px;
	border: 0;
	margin-left: auto;
	margin-right: auto;
}