/* Shared layout primitives: page container, accessibility helpers, icon sizes. */
[hidden] { display: none !important; }

.sl-container {
	width: 100%;
	max-width: var(--sl-container);
	margin-inline: auto;
	padding-inline: var(--sl-gutter);
}

/* Visually hidden but still read by screen readers (Tailwind's sr-only). */
.sl-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* The skip link: hidden until focused. */
.sl-skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
.sl-skip-link:focus {
	position: fixed;
	top: .5rem;
	left: .5rem;
	z-index: 100;
	padding: .5rem 1rem;
	background: var(--sl-white);
}

/* Icons (starlight_icon() always adds .sl-icon): 1.25rem by default, modifiers below.
   The default is written at specificity 0,2,0 (the :not() never matches) so it beats generic
   `.sl-btn svg`-style rules, and the modifiers tie it and win by source order. */
.sl-icon:not(.sl-icon--none) { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.sl-icon.sl-icon--xs { width: .875rem; height: .875rem; }
.sl-icon.sl-icon--sm { width: 1rem; height: 1rem; }
.sl-icon.sl-icon--lg { width: 1.5rem; height: 1.5rem; }

body.sl-body {
	background: var(--sl-white);
	color: var(--sl-black);
	font-family: var(--sl-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html.sl-html { scroll-behavior: smooth; }

/* In-page anchor targets: clear the sticky header when jumped to. */
.sl-anchor { scroll-margin-top: 6rem; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Section titles: the mockup sets them in uppercase ("POPULAR CATEGORIES"). */
.sl-section-title { text-transform: uppercase; }

/* Pill tab base (home bestsellers filters; product tabs restyle it in product.css). */
.sl-tab {
	flex-shrink: 0;
	padding: .5rem 1rem;
	border: 1px solid;
	border-radius: var(--sl-r-small);
	font-size: .75rem;
	line-height: 1rem;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: var(--sl-duration);
	transition-timing-function: var(--sl-ease-std);
}

/* Numbered principles: Quality / Reliability / Value (template-parts/shared/pillars.php). */
.sl-principles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
@media (min-width: 768px) {
	.sl-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sl-principle {
	position: relative;
	padding: 2rem;
	overflow: hidden;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-block);
	background: var(--sl-off-white);
	transition: all var(--sl-duration) var(--sl-ease-std);
}
.sl-principle:hover { border-color: var(--sl-gray-300); }
.sl-principle__num {
	margin-bottom: 1rem;
	color: var(--sl-gray-200);
	font-family: var(--sl-font-display);
	font-size: 3rem;
	line-height: 1;
	font-weight: 800;
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-principle:hover .sl-principle__num { color: rgb(245 158 11 / .2); }
.sl-principle__title {
	margin-bottom: .5rem;
	color: var(--sl-black);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
}
.sl-principle__text {
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1.625;
}
@media (min-width: 640px) {
	.sl-principle__text { font-size: .875rem; line-height: 1.25rem; }
}

/* Showroom card: address, hours, map link (template-parts/shared/showroom-card.php). */
.sl-showroom-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-block);
	background: var(--sl-white);
}
.sl-showroom-card__title {
	color: var(--sl-black);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
}
.sl-showroom-card__text {
	margin-top: .5rem;
	color: var(--sl-gray-500);
	font-size: .875rem;
	line-height: 1.625;
}
.sl-showroom-card__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
	color: var(--sl-gray-600);
	font-size: .875rem;
	line-height: 1.25rem;
}
.sl-showroom-card__item {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}
.sl-showroom-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--sl-amber-200);
	border-radius: var(--sl-radius-full);
	background: var(--sl-amber-50);
	color: var(--sl-amber-600);
}
.sl-showroom-card__value { padding-top: .5rem; }
.sl-showroom-card .sl-showroom-card__directions {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 1.5rem;
}

/* Small amber mono label above a heading ("ABOUT STARLIGHT", "PRODUCTS"). */
.sl-eyebrow {
	color: var(--sl-amber-600);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Logo image (starlight_logo()): natural width at the height set by header.css / footer.css. */
/* Repainted logo (Customizer → Header → Logo → Color; inc/template-tags.php starlight_logo_tint()):
   the image stays invisible in the flow, a mask of the same file filled with the color sits on it. */
.sl-logo-tint {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}
.sl-logo-tint > img { opacity: 0; }
.sl-logo-tint::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--sl-logo-color);
	-webkit-mask: var(--sl-logo-src) center / contain no-repeat;
	mask: var(--sl-logo-src) center / contain no-repeat;
	pointer-events: none;
}
/* Logo animation (Customizer → Header → Logo → Animation; classes from starlight_logo_tint()).
   --sl-logo-speed multiplies every duration (slow 1.6 · normal 1 · fast .6). */
.sl-logo-anim--shimmer::after {
	background-image: linear-gradient(105deg, transparent 0 40%, color-mix(in srgb, #fff 65%, transparent) 50%, transparent 60% 100%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	background-position: 100% 0;
	animation: sl-logo-shimmer calc(5s * var(--sl-logo-speed, 1)) ease-in-out infinite;
}
@keyframes sl-logo-shimmer {
	0%, 55% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}
.sl-logo-anim--flow::after {
	background-image: linear-gradient(90deg, var(--sl-logo-color), var(--sl-accent), var(--sl-amber-300), var(--sl-accent), var(--sl-logo-color));
	background-size: 400px 100%;
	background-repeat: repeat-x;
	animation: sl-logo-flow calc(8s * var(--sl-logo-speed, 1)) linear infinite;
}
@keyframes sl-logo-flow {
	from { background-position: 0 0; }
	to { background-position: 400px 0; }
}
/* Accent sweep: like shimmer, but a narrow band of the accent color. */
.sl-logo-anim--sweep::after {
	background-image: linear-gradient(100deg, transparent 0 45%, var(--sl-accent) 50%, transparent 55% 100%);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	background-position: 100% 0;
	animation: sl-logo-shimmer calc(4s * var(--sl-logo-speed, 1)) ease-in-out infinite;
}
/* Breathe: the whole logo eases to the accent color and back. */
.sl-logo-anim--breathe::after { animation: sl-logo-breathe calc(3.5s * var(--sl-logo-speed, 1)) ease-in-out infinite alternate; }
@keyframes sl-logo-breathe {
	from { background-color: var(--sl-logo-color); }
	to { background-color: var(--sl-accent); }
}
/* Color wipe: the accent fills the logo left to right; loops, or on hover with "On hover". */
.sl-logo-anim--wipe::after {
	background-image: linear-gradient(var(--sl-accent), var(--sl-accent));
	background-size: 0% 100%;
	background-repeat: no-repeat;
	animation: sl-logo-wipe calc(4s * var(--sl-logo-speed, 1)) var(--sl-ease-apple) infinite;
}
@keyframes sl-logo-wipe {
	0%, 15% { background-size: 0% 100%; }
	45%, 65% { background-size: 100% 100%; }
	95%, 100% { background-size: 0% 100%; }
}
/* Draw-in: revealed left to right once when the page loads. */
.sl-logo-anim--draw::after { animation: sl-logo-draw calc(1.2s * var(--sl-logo-speed, 1)) var(--sl-ease-apple) both; }
@keyframes sl-logo-draw {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0); }
}
/* "On hover": the looping effects stay off (plain logo) until the pointer is over it. */
.sl-logo-anim--hover.sl-logo-anim--shimmer::after,
.sl-logo-anim--hover.sl-logo-anim--sweep::after,
.sl-logo-anim--hover.sl-logo-anim--flow::after,
.sl-logo-anim--hover.sl-logo-anim--breathe::after,
.sl-logo-anim--hover.sl-logo-anim--wipe::after,
.sl-logo-anim--hover.sl-logo-anim--twinkle::before { animation: none; }
.sl-logo-anim--hover.sl-logo-anim--flow::after { background-image: none; }
.sl-logo-anim--hover.sl-logo-anim--shimmer:hover::after { animation: sl-logo-shimmer calc(1.6s * var(--sl-logo-speed, 1)) ease-in-out infinite; }
.sl-logo-anim--hover.sl-logo-anim--sweep:hover::after { animation: sl-logo-shimmer calc(1.4s * var(--sl-logo-speed, 1)) ease-in-out infinite; }
.sl-logo-anim--hover.sl-logo-anim--flow:hover::after {
	background-image: linear-gradient(90deg, var(--sl-logo-color), var(--sl-accent), var(--sl-amber-300), var(--sl-accent), var(--sl-logo-color));
	animation: sl-logo-flow calc(4s * var(--sl-logo-speed, 1)) linear infinite;
}
.sl-logo-anim--hover.sl-logo-anim--breathe:hover::after { animation: sl-logo-breathe calc(1.6s * var(--sl-logo-speed, 1)) ease-in-out infinite alternate; }
.sl-logo-anim--hover.sl-logo-anim--wipe:hover::after { animation: sl-logo-wipe-in calc(.7s * var(--sl-logo-speed, 1)) var(--sl-ease-apple) forwards; }
@keyframes sl-logo-wipe-in {
	from { background-size: 0% 100%; }
	to { background-size: 100% 100%; }
}
.sl-logo-anim--hover.sl-logo-anim--twinkle:hover::before { animation: sl-logo-twinkle calc(1.6s * var(--sl-logo-speed, 1)) ease-in-out infinite; }
/* Twinkle: a glow over the icon only (the icon is the first 14.6% of the artwork). */
.sl-logo-anim--twinkle::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse 7.4% 52% at 7.3% 50%, var(--sl-amber-300), var(--sl-accent) 55%, transparent 100%);
	-webkit-mask: var(--sl-logo-src) center / contain no-repeat;
	mask: var(--sl-logo-src) center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
	animation: sl-logo-twinkle calc(3.2s * var(--sl-logo-speed, 1)) ease-in-out infinite;
}
@keyframes sl-logo-twinkle {
	0%, 100% { opacity: 0; }
	45%, 55% { opacity: 1; }
}
.sl-logo-anim--scroll::after { transition: background-color calc(.4s * var(--sl-logo-speed, 1)) ease; }
.sl-masthead.is-scrolled .sl-logo-anim--scroll::after,
.sl-header.is-scrolled .sl-logo-anim--scroll::after { background-color: var(--sl-accent); }
@media (prefers-reduced-motion: reduce) {
	.sl-logo-anim::before,
	.sl-logo-anim::after { animation: none !important; transition: none !important; }
}
.sl-logo-img {
	width: auto;
	max-width: none;
	object-fit: contain;
}

/* ---------- Site background (inc/background.php, assets/js/background.js) ----------
   A fixed layer painted under all page content (body's white fill propagates to the canvas,
   so z-index -1 still sits above it). "First screen only" = absolute, one viewport tall, at
   the top of the document. Phones: hidden unless "Also on phones" is on. */
.sl-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.sl-bg--top {
	position: absolute;
	bottom: auto;
	height: 100vh;
	height: 100svh;
}
.sl-bg:not([data-effect]),
.sl-bg[data-effect=""] { display: none; }
@media (max-width: 767px) {
	.sl-bg--no-mobile { display: none; }
}
.sl-bg__canvas {
	display: block;
	width: 100%;
	height: 100%;
}
.sl-bg[data-effect="aurora"] .sl-bg__canvas { display: none; }

/* Aurora: three blurred blobs of the chosen colour drifting on long, offset loops. */
.sl-bg__aurora { display: none; }
.sl-bg[data-effect="aurora"] .sl-bg__aurora {
	position: absolute;
	inset: -20%;
	display: block;
	opacity: var(--sl-bg-alpha, .35);
	filter: blur(70px);
}
.sl-bg__aurora > span {
	position: absolute;
	width: 55vmax;
	height: 55vmax;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--sl-bg-color, var(--sl-accent)), transparent 65%);
	animation: sl-aurora 26s ease-in-out infinite alternate;
	animation-duration: calc(26s / var(--sl-bg-speed, .7) * .7);
}
.sl-bg__aurora > span:nth-child(1) { top: 5%; left: 0; }
.sl-bg__aurora > span:nth-child(2) { top: 35%; right: -5%; opacity: .7; animation-delay: -9s; animation-direction: alternate-reverse; }
.sl-bg__aurora > span:nth-child(3) { bottom: -10%; left: 30%; opacity: .55; animation-delay: -17s; }
@keyframes sl-aurora {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(12vw, 8vh, 0) scale(1.15); }
	100% { transform: translate3d(-8vw, -6vh, 0) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-bg__aurora > span { animation: none; }
}