/* StudSource.Shop Custom Styling */

:root {
	--color-primary-blue: #2256a9;
	--color-gradient-blue: #1a3f7f;
	--color-accent-red: #E63946;
	--color-white: #FFFFFF;
	--color-light-bg: #F8F9FA;
	--color-text-dark: #1a1a2e;
	--color-text-light: #555555;
	--color-border: #e2e8f0;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
}

/* Typography - loaded via <link> in header.php for performance */

/* Global focus styles for keyboard accessibility (WCAG 2.1 AA) */
*:focus-visible {
	outline: 2px solid var(--color-primary-blue);
	outline-offset: 2px;
}

.studsource-header *:focus-visible {
	outline-color: #FFB703;
}

.deal-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.cta-social-link:focus-visible,
.studsource-social .social-link:focus-visible {
	outline-offset: 3px;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--color-text-dark);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #f0f2f5;
	background-image:
		radial-gradient(circle, rgba(34, 86, 169, 0.06) 3px, transparent 3px);
	background-size: 24px 24px;
}

/* Header and footer stay solid over stud pattern */
.studsource-header {
	position: relative;
	z-index: 10;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-text-dark);
}

h1 {
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.15;
}

h2 {
	font-size: 2rem;
	font-weight: 700;
	margin: 2rem 0 1rem;
	line-height: 1.2;
}

h3 {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 1.5rem 0 0.75rem;
	line-height: 1.3;
}

/* ========================================
   BRANDED HEADER
   ======================================== */
/* Sticky wrapper — NOT the header itself, so overflow:visible works on header */
.studsource-header-sticky {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.studsource-header {
	background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-gradient-blue) 100%);
	padding: 0;
	overflow: visible;
	box-shadow: 0 2px 20px rgba(34, 86, 169, 0.15);
	border-bottom: 3px solid var(--color-accent-red);
}

.studsource-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 84px;
}

/* Logo sticky wrapper — same sticky context as header, overlaps it via negative margin */
.studsource-logo-sticky-wrap {
	position: sticky;
	top: 0;
	height: 130px;
	margin-bottom: -130px;
	z-index: 1001;
	pointer-events: none;
}

.studsource-logo-fixed {
	display: inline-block;
	padding-left: 1.5rem;
	text-decoration: none !important;
	pointer-events: all;
}

.studsource-logo-fixed img {
	height: 130px;
	width: auto;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
	transition: opacity 0.2s ease;
}

.studsource-logo-fixed:hover img {
	opacity: 0.9;
}

/* Spacer reserves the logo's footprint in the flex header so nav doesn't overlap */
.studsource-logo-spacer {
	width: 260px;
	flex-shrink: 0;
}

.studsource-header .studsource-nav {
	display: flex !important;
	align-items: center !important;
	gap: 0.25rem;
}

.studsource-header .studsource-nav a {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	padding: 0.4rem 1rem;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.95rem;
	transition: all 0.25s ease;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
}

.studsource-header .studsource-nav a .nav-label {
	display: block;
	line-height: 1.2;
}

.studsource-header .studsource-nav a .nav-date {
	display: block;
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
	letter-spacing: 0.02em;
	transition: color 0.25s ease;
}

.studsource-header .studsource-nav a:hover,
.studsource-header .studsource-nav a.active {
	color: var(--color-white) !important;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.studsource-header .studsource-nav a:hover .nav-date,
.studsource-header .studsource-nav a.active .nav-date {
	color: rgba(255, 255, 255, 0.75);
}

/* Social links in header */
.nav-divider {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.25);
	margin: 0 0.5rem;
}

.studsource-social {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem;
}

.studsource-social .social-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1) !important;
	color: rgba(255, 255, 255, 0.8) !important;
	transition: all 0.25s ease;
	padding: 0 !important;
}

.studsource-social .social-link:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.2) !important;
}

.studsource-social .social-link.social-yt:hover {
	background: #FF0000 !important;
	color: #fff !important;
}

.studsource-social .social-link.social-x:hover {
	background: rgba(255, 255, 255, 0.9) !important;
	color: #000 !important;
}

.studsource-social .social-link.social-threads:hover {
	background: #000 !important;
	color: #fff !important;
}

.studsource-social .social-link.social-ig:hover {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
	color: #fff !important;
}

.studsource-social .social-link.social-tiktok:hover {
	background: linear-gradient(45deg, #000 0%, #25f4ee 100%) !important;
	color: #fff !important;
}

.studsource-social .social-link svg {
	display: block;
}

/* Mobile menu toggle */
.studsource-menu-toggle {
	display: none !important;
	background: none;
	border: none;
	color: var(--color-white) !important;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
}

/* ========================================
   DEALS CATEGORY ARCHIVE
   ======================================== */
.category-archive-container {
	padding: 3.5rem 0 3rem;
}

/* Fix: .container (line ~888) wins over .category-archive-container (line ~197)
   because same specificity + later position. This 2-class rule restores vertical padding. */
.container.category-archive-container {
	padding-top: 3.5rem;
	padding-bottom: 3rem;
}

/* Hide the deals filter header on lego-deals page (moved to hero) */
.deals-filter-header {
	display: none !important;
}

.deals-filter-header h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3rem;
	height: 3px;
	background: var(--color-accent-red);
	border-radius: 2px;
}

/* Toggle in hero - make it compact */
.page-hero .deals-filter-toggle {
	display: inline-flex !important;
	gap: 0.5rem;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 50px;
	border: none !important;
	width: auto;
}

/* Default toggle styling (for archive pages) */
.deals-filter-toggle {
	display: flex;
	gap: 0.5rem;
	background: var(--color-light-bg);
	padding: 0.35rem;
	border-radius: 50px;
	border: 1px solid var(--color-border);
}

.toggle-btn {
	padding: 0.55rem 1.25rem;
	background: transparent;
	border: none;
	border-radius: 50px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-text-light);
	cursor: pointer;
	transition: all 0.25s ease;
	white-space: nowrap;
}

.toggle-btn:hover {
	color: var(--color-text-dark);
}

.toggle-btn.active {
	background: var(--color-white) !important;
	color: var(--color-primary-blue) !important;
	box-shadow: 0 2px 8px rgba(34, 86, 169, 0.15) !important;
}

.toggle-btn:not(.active) {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.85) !important;
}

/* ========================================
   PAGE HERO (shared across all page heroes)
   Replaces: lego-deals-hero, most-wanted-hero,
   about-hero, affiliate-hero, weekly-archive-hero
   ======================================== */
.page-hero {
	background: linear-gradient(135deg, var(--color-primary-blue) 0%, #1a3f7f 50%, #2d6bc4 100%);
	padding: 3rem 0;
	margin-bottom: 0;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
}

.page-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.12) 2px, transparent 2px);
	background-size: 50px 50px;
	background-position: 0 0, 25px 25px;
	pointer-events: none;
	z-index: 0;
}


.page-hero-content {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5rem;
	align-items: start;
}

.page-hero h1 {
	margin: 0 0 1rem 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #FFC107;
	background: rgba(255, 255, 255, 0.1);
	padding: 0.75rem 1.25rem;
	border-radius: 12px;
	display: inline-block;
}

.page-hero-description {
	color: rgba(255, 255, 255, 0.95);
	font-size: 1.1rem;
	line-height: 1.6;
	margin: 0;
	font-weight: 500;
}

.page-hero-images {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	width: 100%;
}

.page-hero-images img {
	width: 100%;
	height: 110px;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: transform 0.3s ease;
	background-color: white;
	padding: 0.5rem;
	box-sizing: border-box;
}

.page-hero-images img:hover {
	transform: translateY(-4px);
}

@media (max-width: 768px) {
	.page-hero-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.page-hero h1 {
		font-size: 2.2rem;
	}

	.page-hero-images {
		grid-template-columns: repeat(4, 1fr);
		gap: 0.5rem;
	}

	.page-hero-images img {
		height: 85px;
	}
}

/* About page content */
.about-page-content {
	padding: 0;
	line-height: 1.8;
	color: var(--color-text-dark);
	font-size: 1.05rem;
}

.about-page-content p {
	margin-bottom: 1.5rem;
	color: var(--color-text-light);
}

.about-page-content h2,
.about-page-content h3 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--color-text-dark);
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	letter-spacing: -0.02em;
}

.about-page-content h2:first-of-type {
	margin-top: 0;
}

/* Affiliate page content */
.affiliate-page-content {
	padding: 3.5rem 0 2rem;
	line-height: 1.8;
	color: var(--color-text-dark);
	font-size: 1.05rem;
}

.affiliate-page-content p {
	margin-bottom: 1.5rem;
	color: var(--color-text-light);
}

.affiliate-page-content h2,
.affiliate-page-content h3 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--color-text-dark);
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	letter-spacing: -0.02em;
}

.affiliate-page-content h2:first-of-type {
	margin-top: 0;
}


/* Expired card styling */
.deal-card.is-expired {
	opacity: 0.65;
}

.deal-card-badge.expired {
	background: #999;
	color: #fff;
}

@media (max-width: 768px) {
	.studsource-header-inner {
		height: 68px;
	}

	.studsource-logo-sticky-wrap {
		height: 90px;
		margin-bottom: -90px;
	}

	.studsource-logo-fixed img {
		height: 90px;
	}

	.studsource-logo-spacer {
		width: 170px;
	}

	.studsource-menu-toggle {
		display: block !important;
	}

	.studsource-header .studsource-nav {
		display: none !important;
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		background: var(--color-gradient-blue);
		flex-direction: column;
		padding: 1rem;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}

	.studsource-header .studsource-nav.open {
		display: flex !important;
	}

	.studsource-nav a {
		padding: 0.75rem 1rem;
		width: 100%;
		flex-direction: row !important;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.studsource-header .studsource-nav a .nav-date {
		font-size: 0.7rem;
	}

	.nav-divider {
		width: 100%;
		height: 1px;
		margin: 0.5rem 0;
	}

	.studsource-social {
		justify-content: center;
		padding: 0.25rem 0;
	}
}

/* ========================================
   GENERAL BUTTON STYLING
   ======================================== */
.btn-primary,
.wp-block-button__link {
	background: linear-gradient(135deg, var(--color-primary-blue), var(--color-gradient-blue));
	color: var(--color-white);
	padding: 0.8rem 1.5rem;
	border-radius: var(--radius-sm);
	border: none;
	font-weight: 600;
	font-family: 'Space Grotesk', sans-serif;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	cursor: pointer;
	letter-spacing: -0.01em;
}

.btn-primary:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(34, 86, 169, 0.35);
}

/* ========================================
   LINKS
   ======================================== */
a {
	color: var(--color-primary-blue);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-gradient-blue);
}

/* ========================================
   UTILITY STYLES
   ======================================== */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 2rem 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ========================================
   DEAL CARD STYLING (used on homepage + listing)
   ======================================== */
.deal-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.deal-card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	position: relative;
	flex-direction: column;
}

.deal-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.deal-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.deal-card-image {
	width: 100%;
	height: 220px;
	background: var(--color-light-bg);
	overflow: hidden;
}

.deal-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.deal-card-body {
	padding: 1.25rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.deal-card-title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-text-dark);
	margin: 0 0 0.5rem 0;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.deal-card-posted-date {
	font-size: 0.75rem;
	color: #999;
	font-weight: 500;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.deal-card-meta {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.deal-card-badge {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: 50px;
	background: rgba(34, 86, 169, 0.08);
	color: var(--color-primary-blue);
}

.deal-card-badge.discount {
	background: rgba(230, 57, 70, 0.1);
	color: var(--color-accent-red);
}

.deal-card-badge.expired {
	background: rgba(153, 153, 153, 0.15);
	color: #777;
}

.deal-card-pricing {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
}

.deal-card-price {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--color-accent-red);
}

.deal-card-msrp {
	font-size: 0.9rem;
	color: #999;
	text-decoration: line-through;
}

/* Discount Starburst Badge — classic 8-point retail sale badge, top-left */
.deal-discount-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	width: 74px;
	height: 74px;
	background: linear-gradient(135deg, #E63946 0%, #c1121f 100%);
	clip-path: polygon(
		50% 0%,   62% 23%,  85% 15%,  77% 38%,
		100% 50%, 77% 62%,  85% 85%,  62% 77%,
		50% 100%, 38% 77%,  15% 85%,  23% 62%,
		0% 50%,   23% 38%,  15% 15%,  38% 23%
	);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10;
	filter: drop-shadow(0 3px 6px rgba(193, 18, 31, 0.45));
	animation: burst-pulse 2.5s ease-in-out infinite;
}

@keyframes burst-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.08); }
}

.deal-discount-pct {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.25rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.deal-discount-off {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 1px;
}

.deal-card a {
	text-decoration: none;
	color: inherit;
}

.deal-card-link {
	display: inline-block;
	margin-top: auto;
	padding: 0.7rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #FFB703;
	background: transparent;
	border: 2px solid #FFB703;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 0 15px rgba(255, 183, 3, 0.4), inset 0 0 15px rgba(255, 183, 3, 0.1);
}

.deal-card-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 25px rgba(255, 183, 3, 0.7), 0 0 40px rgba(255, 183, 3, 0.4), inset 0 0 20px rgba(255, 183, 3, 0.15);
	color: #FFB703;
}

/* ========================================
   MOST WANTED PAGE
   ======================================== */
/* Uses .deal-cards-grid and .deal-card classes — same as LEGO Deals */

/* Most Wanted Rank Badges — .mw-card sits alongside .deal-card */
.mw-card {
	/* position: relative already set on .deal-card */
}

/* Most Wanted MSRP price (not a deal, no strikethrough) */
.deal-card-price.mw-price {
	color: var(--color-primary-blue);
	font-size: 1.1rem;
}

.mw-rank-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: 'Space Grotesk', sans-serif;
	z-index: 10;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
	border: 3px solid #fff;
	animation: medal-pulse 2s ease-in-out infinite;
}

@keyframes medal-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
}

.mw-rank-number {
	font-size: 1.75rem;
	line-height: 1;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Medal Colors */
.mw-rank-badge.medal-gold {
	background: linear-gradient(135deg, #FFD700 0%, #FFC700 100%);
	border-color: #fff;
	box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5), 0 0 0 2px #FFB700;
}

.mw-rank-badge.medal-silver {
	background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
	border-color: #fff;
	box-shadow: 0 4px 20px rgba(192, 192, 192, 0.5), 0 0 0 2px #808080;
}

.mw-rank-badge.medal-bronze {
	background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
	border-color: #fff;
	box-shadow: 0 4px 20px rgba(205, 127, 50, 0.5), 0 0 0 2px #8B4513;
}

.mw-rank-badge.medal-default {
	background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-gradient-blue) 100%);
	border-color: #fff;
	box-shadow: 0 4px 20px rgba(34, 86, 169, 0.5), 0 0 0 2px #1a3f7f;
}

/* Collapse excess top spacing on Most Wanted banner text */
.deal-cards-grid > p:first-child {
	margin-top: -1.5rem !important;
}

/* ========================================
   HIDE NEVE DEFAULT HEADER
   ======================================== */
.hfg_header {
	display: none !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.15rem;
	}

	.deal-cards-grid {
		grid-template-columns: 1fr;
	}

	.deals-filter-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.deals-filter-header h1 {
		font-size: 1.75rem;
	}

	.deals-filter-toggle {
		width: 100%;
	}

	.toggle-btn {
		flex: 1;
		padding: 0.5rem 0.75rem;
		font-size: 0.85rem;
	}
}

/* StudSource: prevent image zoom/crop in cards */
a.deal-card-image {
	display: block;
	text-decoration: none;
	cursor: pointer;
}

.deal-card-image img {
	object-fit: contain;
	background: #f7f7f7;
}

/* StudSource: card image background + no-zoom everywhere */
.deal-card-image { background: #ffffff; }
.deal-card-image img,
.deal-card img {
	object-fit: contain !important;
	background: #ffffff;
}

/* ========================================
   FAQ / PAGE CONTENT SECTION
   SEO-friendly server-side content below deal cards
   ======================================== */
.page-faq-section {
	margin-top: 3rem;
	padding: 1.75rem 2.25rem;
	background: var(--color-light-bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary-blue);
}

.page-faq-section > h2:first-child,
.page-faq-section > .wp-block-heading:first-child h2,
.page-faq-section h2 {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-text-dark);
	margin: 0 0 1.25rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--color-border);
	letter-spacing: -0.02em;
}

.page-faq-section h3 {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-primary-blue);
	margin: 1.75rem 0 0.5rem;
	letter-spacing: -0.01em;
}

.page-faq-section h3:first-of-type {
	margin-top: 0;
}

.page-faq-section p {
	color: var(--color-text-light);
	line-height: 1.75;
	margin: 0 0 0.85rem 0;
	font-size: 0.975rem;
}

.page-faq-section ul,
.page-faq-section ol {
	color: var(--color-text-light);
	line-height: 1.75;
	margin: 0 0 1rem 0;
	padding-left: 1.5rem;
	font-size: 0.975rem;
}

.page-faq-section li {
	margin-bottom: 0.4rem;
}

.page-faq-section a {
	color: var(--color-primary-blue);
	text-decoration: none;
	font-weight: 500;
}

.page-faq-section a:hover {
	text-decoration: underline;
}

/* Accordion FAQ Items */
.faq-item {
	margin-bottom: 0;
	border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.9rem 0;
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-primary-blue);
	cursor: pointer;
	user-select: none;
	transition: color 0.2s ease;
}

.faq-question:hover {
	color: var(--color-primary-blue);
	opacity: 0.8;
}

.faq-question::after {
	content: '+';
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--color-primary-blue);
	transition: transform 0.3s ease;
}

.faq-question.open::after {
	transform: rotate(45deg);
}

.faq-answer {
	overflow: hidden;
	padding-right: 1rem;
}

.faq-answer p {
	margin: 0;
	color: var(--color-text-light);
	line-height: 1.75;
	font-size: 0.975rem;
}

/* Yoast FAQ block support */
.page-faq-section .wp-block-yoast-faq-block .schema-faq-section {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-border);
}

.page-faq-section .wp-block-yoast-faq-block .schema-faq-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.page-faq-section .wp-block-yoast-faq-block .schema-faq-question {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-primary-blue);
	margin-bottom: 0.5rem;
}

.page-faq-section .wp-block-yoast-faq-block .schema-faq-answer {
	color: var(--color-text-light);
	line-height: 1.75;
	font-size: 0.975rem;
}

@media (max-width: 768px) {
	.page-faq-section {
		padding: 1.75rem 1.5rem;
		border-left-width: 3px;
	}

	.page-faq-section h2 {
		font-size: 1.35rem;
	}
}

/* ========================================
   SINGLE DEAL POST - FLOATING CARD LAYOUT
   ======================================== */
.lego-deal-container {
	padding: 0;
	background-color: #f0f2f5;
	background-image: radial-gradient(circle, rgba(34, 86, 169, 0.06) 3px, transparent 3px);
	background-size: 24px 24px;
}

.lego-deal-header {
	background: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(34, 86, 169, 0.1);
	padding: 2.5rem 2rem;
	margin: 2.5rem auto;
	max-width: 1280px;
}

.lego-deal-header h1 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	color: var(--color-text-dark);
	font-size: 2rem;
}

.post-meta {
	display: flex;
	gap: 1rem;
	align-items: center;
	font-size: 0.9rem;
	color: var(--color-text-light);
}

.post-category-badge {
	background: rgba(230, 57, 70, 0.1);
	color: var(--color-accent-red);
	padding: 0.25rem 0.75rem;
	border-radius: 50px;
	font-weight: 600;
	font-family: 'Space Grotesk', sans-serif;
}

.deal-hero-row {
	background: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(34, 86, 169, 0.1);
	padding: 2.5rem 2rem;
	margin: 2.5rem auto;
	max-width: 1280px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5rem;
	align-items: start;
}

@media (max-width: 768px) {
	.deal-hero-row {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 1.5rem 1.5rem;
	}
}

.deal-hero-image {
	border-radius: 12px;
	overflow: hidden;
	background: white;
}

.deal-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.lego-deal-content {
	background: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(34, 86, 169, 0.1);
	padding: 2.5rem 2rem;
	margin: 2.5rem auto;
	max-width: 1280px;
	line-height: 1.8;
	color: var(--color-text-dark);
}

.lego-deal-content p {
	margin-bottom: 1.25rem;
	color: var(--color-text-light);
}

.lego-deal-content h2,
.lego-deal-content h3 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--color-text-dark);
	margin: 2rem 0 1rem;
	letter-spacing: -0.02em;
}

.lego-deal-bottom-cta {
	background: linear-gradient(135deg, #2256a9 0%, #1a3f7f 50%, #2d6bc4 100%);
	color: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	padding: 3rem 2rem;
	margin: 2.5rem auto;
	max-width: 1280px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.lego-deal-bottom-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 8px, transparent 8px);
	background-size: 32px 32px;
	pointer-events: none;
	z-index: 0;
}

.lego-deal-bottom-cta > * {
	position: relative;
	z-index: 1;
}

.lego-deal-bottom-cta h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1.75rem;
	letter-spacing: -0.02em;
}

.lego-deal-bottom-cta p {
	margin-bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.05rem;
}

.btn-view-deals {
	display: inline-block;
	padding: 1rem 2.5rem;
	background: #FFB703;
	color: #1a3f7f;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-family: 'Space Grotesk', sans-serif;
	text-decoration: none;
	box-shadow: 0 8px 25px rgba(255, 183, 3, 0.3);
	transition: all 0.3s ease;
	text-align: center;
}

.btn-view-deals:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 35px rgba(255, 183, 3, 0.4);
}

/* ========================================
   LATEST WEEKLY CALLOUT
   ======================================== */
[latest_weekly_callout] {
	display: block;
	position: relative;
	z-index: 10;
	background: linear-gradient(135deg, #fff9f0 0%, #f5f8ff 100%);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 183, 3, 0.2);
	padding: 2rem;
	max-width: 100%;
}

[latest_weekly_callout] > * {
	margin: 0;
}

[latest_weekly_callout] h2,
[latest_weekly_callout] h3 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--color-text-dark);
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

[latest_weekly_callout] a {
	color: var(--color-primary-blue);
	font-weight: 600;
}

[latest_weekly_callout] a:hover {
	text-decoration: underline;
}

/* ========================================
   WEEKLY BLOG HERO (Stacked Layout)
   ======================================== */
.weekly-blog-hero {
	background: linear-gradient(135deg, var(--color-primary-blue) 0%, #1a3f7f 50%, #2d6bc4 100%);
	padding: 0;
	margin-bottom: 2.5rem;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.weekly-blog-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 2px, transparent 2px);
	background-size: 50px 50px;
	pointer-events: none;
	z-index: 0;
}

.weekly-hero-image {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 400px;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
	background-color: white;
}

.weekly-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.weekly-hero-content {
	position: relative;
	z-index: 1;
	padding: 2.5rem 2rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
	color: var(--color-text-dark);
}

.weekly-hero-content h1 {
	margin: 0 0 0.75rem 0;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--color-text-dark);
}

.weekly-hero-description {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-text-light);
	font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
	.weekly-blog-hero {
		margin-bottom: 1.5rem;
		border-radius: 12px;
	}

	.weekly-hero-image {
		max-height: 250px;
		border-radius: 12px 12px 0 0;
	}

	.weekly-hero-content {
		padding: 1.5rem 1.25rem;
	}

	.weekly-hero-content h1 {
		font-size: 1.75rem;
	}

	.weekly-post-content {
		max-width: 100%;
	}

	.weekly-post-bottom-cta {
		max-width: 100%;
	}
}

/* ========================================
   WEEKLY POST CONTENT (Narrower layout)
   ======================================== */
.weekly-post-container {
	background-color: #f0f2f5;
	background-image: radial-gradient(circle, rgba(34, 86, 169, 0.06) 3px, transparent 3px);
	background-size: 24px 24px;
}

.weekly-post {
	display: flex;
	flex-direction: column;
}

.weekly-post-title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--color-text-dark);
	margin: 0 0 0.75rem 0;
}

.weekly-post-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.weekly-post-date {
	font-size: 0.95rem;
	color: var(--color-text-light);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
}

/* Narrower content area for better blog readability */
.weekly-post-content {
	max-width: 900px;
	margin: 0 auto 2.5rem auto;
	padding: 2.5rem 2rem;
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--color-text-dark);
	background: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(34, 86, 169, 0.1);
}

.weekly-post-content p {
	margin-bottom: 1.5rem;
}

.weekly-post-content h2 {
	font-size: 1.75rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.weekly-post-content h3 {
	font-size: 1.35rem;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.weekly-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 2rem 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.weekly-post-content a {
	color: var(--color-primary-blue);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid rgba(34, 86, 169, 0.3);
	transition: border-color 0.3s ease;
}

.weekly-post-content a:hover {
	border-color: var(--color-primary-blue);
}

/* Weekly post bottom CTA */
.weekly-post-bottom-cta {
	max-width: 900px;
	margin: 3rem auto;
	padding: 2rem;
	background: linear-gradient(135deg, #f0f4ff 0%, #fff5f5 50%, #fffbf0 100%);
	border-radius: 16px;
	border: 1px solid rgba(230, 57, 70, 0.15);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	text-align: center;
}

.weekly-post-bottom-cta h3 {
	margin-top: 0;
	font-size: 1.5rem;
	color: var(--color-text-dark);
}

.weekly-post-bottom-cta p {
	font-size: 1rem;
	color: var(--color-text-light);
	margin-bottom: 1.5rem;
}

.btn-view-weekly {
	display: inline-block;
	padding: 0.75rem 2rem;
	background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-gradient-blue) 100%);
	color: white;
	border: none;
	border-radius: 50px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	box-shadow: 0 4px 15px rgba(34, 86, 169, 0.3);
	transition: all 0.3s ease;
}

.btn-view-weekly:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(34, 86, 169, 0.4);
}

@media (max-width: 768px) {
	.weekly-post-content {
		padding: 0 1.5rem;
		max-width: 100%;
		font-size: 1rem;
	}

	.weekly-post-title {
		font-size: 1.75rem;
	}

	.weekly-post-bottom-cta {
		padding: 1.5rem;
		margin: 2rem 1.5rem;
	}

	.btn-view-weekly {
		width: 100%;
	}
}

/* ========================================
   CTA SOCIAL LINKS (Homepage Bottom Section)
   ======================================== */
.cta-social-link {
	transition: all 0.3s ease !important;
}

.cta-social-link:hover {
	transform: translateY(-4px) !important;
}

.cta-social-link.cta-social-yt:hover {
	background: #FF0000 !important;
	color: #fff !important;
}

.cta-social-link.cta-social-ig:hover {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
	color: #fff !important;
}

.cta-social-link.cta-social-x:hover {
	background: rgba(255, 255, 255, 0.9) !important;
	color: #000 !important;
}

.cta-social-link.cta-social-threads:hover {
	background: #000 !important;
	color: #fff !important;
}

.cta-social-link.cta-social-tiktok:hover {
	background: linear-gradient(45deg, #000 0%, #25f4ee 100%) !important;
	color: #fff !important;
}

/* ========================================
   HOMEPAGE MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
	/* Hero: single column, auto height */
	.ss-hero {
		min-height: auto !important;
		padding: 2rem 1.25rem !important;
	}

	/* Force ALL grids inside hero to stack */
	.ss-hero div[style] {
		grid-template-columns: 1fr !important;
	}

	.ss-hero h1 {
		font-size: 2rem !important;
	}

	.ss-hero p {
		font-size: 1rem !important;
		max-width: 100% !important;
	}

	/* Hero buttons: full width */
	.ss-hero a[style*="padding"] {
		display: block !important;
		text-align: center !important;
		width: 100% !important;
	}

	/* Weekly callout card in hero */
	[latest_weekly_callout] {
		padding: 1.5rem !important;
	}

	/* All card sections: breathing room */
	section[style*="max-width: 1280px"] {
		margin-left: 1rem !important;
		margin-right: 1rem !important;
		padding: 1.5rem 1.25rem !important;
	}

	/* Family section + any 2-col grids: stack */
	.neve-main section div[style*="grid-template-columns: 1fr 1fr"],
	.neve-main section div[style*="1.2fr 0.8fr"] {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}

	/* All section headings: scale down */
	.neve-main section h2[style*="2.5rem"] {
		font-size: 1.75rem !important;
	}

	.neve-main section h1[style*="3.5rem"] {
		font-size: 2rem !important;
	}

	/* Content category cards: single column */
	.neve-main section div[style*="repeat(auto-fit"] {
		grid-template-columns: 1fr !important;
	}

	/* Social icons: tap-friendly */
	.cta-social-link {
		width: 44px !important;
		height: 44px !important;
	}
}