/**
 * StorefrontPlus — Main Frontend Stylesheet
 */

/* ── CSS Custom Properties ────────────────────────────── */
:root {
	--sp-color-primary: #96588a;
	--sp-color-secondary: #2c2d33;
	--sp-color-accent: #e6a157;
	--sp-color-text: #43454b;
	--sp-color-heading: #333;
	--sp-color-background: #fff;
	--sp-color-link: #96588a;
	--sp-color-link_hover: #74456d;
	--sp-font-heading: inherit;
	--sp-font-body: inherit;
}

/* ── Typography ───────────────────────────────────────── */
body {
	font-family: var(--sp-font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-font-heading), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--sp-color-heading);
}

/* ── Top Bar ──────────────────────────────────────────── */
.sp-topbar {
	padding: 6px 0;
	text-align: center;
	font-size: 0.85em;
	letter-spacing: 0.5px;
}

.sp-topbar a {
	color: inherit;
	text-decoration: underline;
}

/* ── Sticky Header ────────────────────────────────────── */
.sp-sticky-header .site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow 0.3s ease;
}

.sp-sticky-header .site-header.is-scrolled {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ── Transparent Header ───────────────────────────────── */
.sp-transparent-header .site-header {
	position: absolute;
	width: 100%;
	background: transparent !important;
	z-index: 100;
}

.sp-transparent-header .site-header a,
.sp-transparent-header .site-header .site-title a {
	color: #fff;
}

/* ── Header Layouts ───────────────────────────────────── */
.sp-header-centered .site-header .col-full {
	text-align: center;
}

.sp-header-centered .site-branding {
	float: none;
	display: inline-block;
	margin-bottom: 0.5em;
}

.sp-header-centered .storefront-primary-navigation {
	float: none;
}

.sp-header-centered .main-navigation ul.menu {
	justify-content: center;
}

.sp-header-left .site-branding {
	float: left;
}

.sp-header-left .storefront-primary-navigation {
	float: right;
}

/* ── No Bottom Border ─────────────────────────────────── */
.site-header {
	transition: border-color 0.3s ease;
}

/* ── Container Styles ─────────────────────────────────── */
.sp-container-boxed .site {
	max-width: 1200px;
	margin: 0 auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}

.sp-container-full .col-full {
	max-width: 100%;
	padding-left: 2em;
	padding-right: 2em;
}

/* ── Sidebar ──────────────────────────────────────────── */
.sp-sidebar-none #secondary {
	display: none;
}

.sp-sidebar-none #primary {
	width: 100%;
	float: none;
}

.sp-sidebar-left #secondary {
	float: left;
}

.sp-sidebar-left #primary {
	float: right;
}

/* ── Footer CTA Bar ───────────────────────────────────── */
.sp-footer-cta {
	background: var(--sp-color-accent);
	color: #fff;
	padding: 1.5em 0;
	text-align: center;
	font-size: 1.1em;
	font-weight: 600;
}

/* ── Grid Utility ─────────────────────────────────────── */
.sp-grid {
	display: grid;
	gap: 2em;
}

.sp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sp-grid--5 { grid-template-columns: repeat(5, 1fr); }
.sp-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 768px) {
	.sp-grid--2,
	.sp-grid--3,
	.sp-grid--4,
	.sp-grid--5,
	.sp-grid--6 {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.sp-grid--4,
	.sp-grid--5,
	.sp-grid--6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Section Base ─────────────────────────────────────── */
.sp-section {
	padding: 4em 0;
}

.sp-section__title {
	text-align: center;
	margin-bottom: 1.5em;
	font-size: 1.8em;
	font-weight: 700;
}