/**
 * Cryptid Custom Designs Core Stylesheet
 *
 * Implements the dark cryptid branding system, custom page layout, responsive sections,
 * CSS-based product mockup shapes, and WooCommerce dark-theme overrides.
 *
 * @package Cryptid_Custom_Designs
 */

/* ==========================================================================
   1. Brand Design System & Variables
   ========================================================================== */
:root {
	/* Backgrounds */
	--main-bg: #020a0c;
	--deep-bg: #010506;
	--panel-bg: #0c1517;
	--sec-forest: #0a1b1d;

	/* Overlay opacity default fallback */
	--bg-overlay-opacity: 0.94;

	/* Accents & Brand Colors */
	--muted-teal: #2FB7A4;
	--deep-teal: #147C73;
	--deep-red: #B8322A;
	--red-hover: #D14438;

	/* Typography Colors */
	--bone-white: #E8DDC8;
	--warm-body: #D7D2C5;
	--muted-text: #A8A095;

	/* Borders */
	--border-dark-teal: #1F3B38;
	--border-red: #5C1D1A;

	/* Glowing Shadows */
	--subtle-teal-glow: rgba(47, 183, 164, 0.25);
	--subtle-red-glow: rgba(184, 50, 42, 0.25);

	/* Typography Fonts */
	--font-display: 'Rye', Georgia, serif;
	--font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
	
	/* Layout Transitions */
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Reset & Core Base Styles
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: auto; /* Handled dynamically by JS for offset positioning */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	position: relative;
	background-color: var(--main-bg);
	color: var(--warm-body);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}

a {
	color: var(--muted-teal);
	text-decoration: none;
	transition: var(--transition-smooth);
}

a:hover {
	color: var(--bone-white);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--bone-white);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
}

h1, h2, .font-display {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

.section-padding {
	padding: 80px 0;
}

.text-center {
	text-align: center;
}

/* Screen Reader Accessibility helper */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   3. Custom Components: Buttons & Dividers
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 14px 28px;
	border-radius: 4px;
	border: 2px solid transparent;
	transition: var(--transition-smooth);
	cursor: pointer;
}

.btn-arrow {
	margin-left: 8px;
	font-size: 16px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
	transform: translateX(4px);
}

/* Primary Red Button */
.btn-red {
	background-color: var(--deep-red) !important;
	color: var(--bone-white) !important;
	border-color: var(--deep-red) !important;
}

.btn-red:hover {
	background-color: var(--red-hover) !important;
	border-color: var(--red-hover) !important;
	box-shadow: 0 0 15px var(--subtle-red-glow) !important;
	color: var(--bone-white) !important;
}

/* Secondary Teal Outline Button */
.btn-teal-outline {
	background-color: transparent !important;
	color: var(--muted-teal) !important;
	border-color: var(--border-dark-teal) !important;
}

.btn-teal-outline:hover {
	background-color: var(--muted-teal) !important;
	border-color: var(--muted-teal) !important;
	color: var(--deep-bg) !important;
	box-shadow: 0 0 15px var(--subtle-teal-glow) !important;
}

/* Red Outline Button */
.btn-red-outline {
	background-color: transparent !important;
	color: var(--deep-red) !important;
	border-color: var(--border-red) !important;
}

.btn-red-outline:hover {
	background-color: var(--deep-red) !important;
	border-color: var(--deep-red) !important;
	color: var(--bone-white) !important;
	box-shadow: 0 0 15px var(--subtle-red-glow) !important;
}

/* Button Sizing */
.btn-sm {
	padding: 8px 16px;
	font-size: 11px;
}

.btn-lg {
	padding: 16px 36px;
	font-size: 14px;
}

/* Decorative Section Dividers */
.cryptid-section-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px 0 40px;
}

.divider-line {
	height: 1px;
	width: 80px;
	background: linear-gradient(90deg, transparent, var(--border-dark-teal), transparent);
}

.divider-icon {
	color: var(--muted-teal);
	margin: 0 15px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.divider-icon svg {
	width: 100%;
	height: 100%;
}

.divider-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Hero Section Divider Override */
.hero-section-divider {
	margin: 15px 0 25px;
	justify-content: flex-start;
}

.hero-section-divider .divider-line {
	background: linear-gradient(90deg, var(--border-red), transparent);
	width: 60px;
}

.hero-section-divider .divider-icon {
	color: var(--deep-red);
	margin: 0 10px 0 0;
}

@media (max-width: 991px) {
	.hero-section-divider {
		justify-content: center;
	}
	.hero-section-divider .divider-line {
		background: linear-gradient(90deg, transparent, var(--border-red), transparent);
		width: 80px;
	}
	.hero-section-divider .divider-icon {
		margin: 0 15px;
	}
}

/* Split Column Headers */
.split-section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 5px;
}

.split-section-title {
	font-size: 22px;
	margin-bottom: 0;
}

.view-all-link {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--muted-teal);
}

.view-all-link:hover {
	color: var(--bone-white);
}

.split-section-divider-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
}

.split-divider-line {
	height: 1px;
	flex-grow: 1;
	background: linear-gradient(90deg, var(--border-dark-teal), transparent);
}

.split-divider-claw {
	margin-left: 12px;
	font-size: 14px;
}

/* ==========================================================================
   4. Header & Navigation Styles
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: transparent; /* Transparent by default */
	border-bottom: 1px solid rgba(47, 183, 164, 0.12); /* Subtle glow bottom border */
	transition: var(--transition-smooth);
}

.site-header.is-sticky {
	background-color: rgba(3, 6, 7, 0.98); /* Solid dark on scroll */
	border-bottom: 1px solid var(--border-dark-teal);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.menu-open .site-header {
	background-color: var(--deep-bg); /* Solid on mobile when drawer is open */
}

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	padding: 0 24px;
	max-width: 1280px;
	margin: 0 auto;
}

/* Custom logo styling (standard WP logo) */
.custom-logo-link {
	display: block;
	line-height: 1;
}

.custom-logo {
	max-height: 52px;
	width: auto;
	object-fit: contain;
	display: block;
}

.footer-col-brand .custom-logo {
	max-height: 58px;
	margin-bottom: 20px;
}

/* Fallback dynamic logo */
.cryptid-logo-container {
	display: flex;
	align-items: center;
}

.cryptid-logo-svg {
	width: 44px;
	height: 44px;
	margin-right: 12px;
}

.cryptid-logo-text {
	display: flex;
	flex-direction: column;
}

.cryptid-text-main {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: 0.05em;
	color: var(--bone-white);
	line-height: 1;
}

.cryptid-text-sub {
	font-family: var(--font-sans);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.35em;
	color: var(--muted-teal);
	margin-top: 2px;
	line-height: 1;
}

.header-navigation-wrapper {
	display: flex;
	align-items: center;
	flex-grow: 1;
	justify-content: flex-end;
}

.site-navigation {
	margin-right: 32px;
}

.primary-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.primary-menu-list li {
	margin: 0 16px;
}

.primary-menu-list a {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--warm-body);
	padding: 8px 0;
	border-bottom: 2px solid transparent;
}

.primary-menu-list a:hover,
.primary-menu-list .current-menu-item > a {
	color: var(--muted-teal);
	border-bottom-color: var(--muted-teal);
}

/* Mobile Menu Toggle button styling */
.menu-toggle {
	display: none;
	background: transparent;
	border: none;
	padding: 10px;
	cursor: pointer;
}

.hamburger-box {
	width: 24px;
	height: 18px;
	display: inline-block;
	position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	width: 24px;
	height: 2px;
	background-color: var(--bone-white);
	position: absolute;
	transition: var(--transition-smooth);
}

.hamburger-inner {
	top: 50%;
	transform: translateY(-50%);
}

.hamburger-inner::before {
	content: '';
	top: -7px;
}

.hamburger-inner::after {
	content: '';
	top: 7px;
}

.menu-toggle.is-active .hamburger-inner {
	background-color: transparent;
}

.menu-toggle.is-active .hamburger-inner::before {
	transform: rotate(45deg);
	top: 0;
}

.menu-toggle.is-active .hamburger-inner::after {
	transform: rotate(-45deg);
	top: 0;
}

/* ==========================================================================
   5. Hero Section Styles
   ========================================================================== */
.hero-section {
	position: relative;
	padding: 160px 0 100px;
	background-color: var(--main-bg);
	background-image: linear-gradient(180deg, rgba(2, 10, 12, var(--bg-overlay-opacity)) 0%, rgba(2, 10, 12, var(--bg-overlay-opacity)) 100%), url('../../hero.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	min-height: 640px;
	display: flex;
	align-items: center;
}

.hero-glow {
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	filter: blur(100px);
	z-index: 1;
	pointer-events: none;
}

.hero-glow-left {
	background-color: var(--subtle-red-glow);
	top: 10%;
	left: -10%;
}

.hero-glow-right {
	background-color: var(--subtle-teal-glow);
	bottom: 10%;
	right: -10%;
}

.hero-container {
	position: relative;
	z-index: 2;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 48px;
	align-items: center;
}

.hero-grid-spacer {
	width: 100%;
	height: 100%;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	background-color: var(--panel-bg);
	border: 1px solid var(--border-dark-teal);
	padding: 6px 14px;
	border-radius: 30px;
	margin-bottom: 24px;
}

.badge-icon {
	margin-right: 8px;
	color: var(--muted-teal);
	display: flex;
}

.badge-text {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--bone-white);
}

.hero-title {
	font-size: 54px;
	line-height: 1.1;
	margin-bottom: 20px;
	max-width: 600px;
}

.hero-divider {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}

.divider-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--deep-red);
	margin-right: 10px;
	box-shadow: 0 0 8px var(--deep-red);
}

.divider-line-short {
	height: 1px;
	width: 60px;
	background-color: var(--border-red);
}

.hero-description {
	font-size: 16px;
	color: var(--warm-body);
	margin-bottom: 36px;
	max-width: 540px;
}

.hero-buttons {
	display: flex;
	gap: 16px;
}

/* Animated glowing red eyes positioning */
.hero-glowing-eyes {
	position: absolute;
	z-index: 2;
	display: flex;
	gap: 6px;
	opacity: 0.8;
	pointer-events: none;
}

.eyes-pair-1 {
	top: 25%;
	left: 8%;
}

.eyes-pair-2 {
	top: 15%;
	left: 28%;
}

.eyes-pair-3 {
	top: 58%;
	left: 14%;
}

.eyes-pair-4 {
	top: 42%;
	left: 36%;
}

.eyes-pair-5 {
	top: 72%;
	left: 5%;
}

.eye {
	width: 4px;
	height: 4px;
	background-color: #ff0000;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(255, 0, 0, var(--eyes-brightness, 0.7)), 0 0 15px rgba(255, 0, 0, var(--eyes-brightness, 0.7));
	animation: blink 4s infinite;
	opacity: var(--eyes-brightness, 0.7);
}

.eye-right {
	animation-delay: 0.2s;
}

.eyes-pair-1 .eye { animation-duration: 4.5s; animation-delay: 0s; }
.eyes-pair-2 .eye { animation-duration: 6s; animation-delay: 1.5s; }
.eyes-pair-3 .eye { animation-duration: 5s; animation-delay: 0.8s; }
.eyes-pair-4 .eye { animation-duration: 7s; animation-delay: 2.3s; }
.eyes-pair-5 .eye { animation-duration: 5.5s; animation-delay: 3.1s; }

@keyframes blink {
	0%, 90%, 100% { transform: scaleY(1); opacity: var(--eyes-brightness, 0.7); }
	95% { transform: scaleY(0); opacity: 0; }
}

/* Global scattered Glowing Eyes Positioning & Sizes */
.cryptid-global-eyes-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

.global-eyes-pair {
	position: absolute;
	z-index: 1;
	display: flex;
	gap: 5px;
	pointer-events: none;
}

/* Coordinate distribution for 20 global eye pairs down the body height */
.global-eyes-pair-1 { top: 5%; left: 8%; }
.global-eyes-pair-1 .eye { animation-duration: 4.2s; animation-delay: 0s; width: 2px; height: 2px; }
.global-eyes-pair-2 { top: 10%; right: 10%; }
.global-eyes-pair-2 .eye { animation-duration: 5.6s; animation-delay: 1.5s; width: 3px; height: 3px; }
.global-eyes-pair-3 { top: 16%; left: 15%; }
.global-eyes-pair-3 .eye { animation-duration: 4.8s; animation-delay: 0.8s; width: 2px; height: 2px; }
.global-eyes-pair-4 { top: 22%; right: 5%; }
.global-eyes-pair-4 .eye { animation-duration: 6.2s; animation-delay: 2.3s; width: 4px; height: 4px; }
.global-eyes-pair-5 { top: 28%; left: 12%; }
.global-eyes-pair-5 .eye { animation-duration: 5.1s; animation-delay: 3.1s; width: 3px; height: 3px; }
.global-eyes-pair-6 { top: 34%; right: 15%; }
.global-eyes-pair-6 .eye { animation-duration: 7.0s; animation-delay: 1.2s; width: 2px; height: 2px; }
.global-eyes-pair-7 { top: 40%; left: 5%; }
.global-eyes-pair-7 .eye { animation-duration: 4.5s; animation-delay: 2.7s; width: 3px; height: 3px; }
.global-eyes-pair-8 { top: 46%; right: 8%; }
.global-eyes-pair-8 .eye { animation-duration: 5.8s; animation-delay: 0.4s; width: 4px; height: 4px; }
.global-eyes-pair-9 { top: 52%; left: 20%; }
.global-eyes-pair-9 .eye { animation-duration: 6.5s; animation-delay: 1.9s; width: 2px; height: 2px; }
.global-eyes-pair-10 { top: 58%; right: 12%; }
.global-eyes-pair-10 .eye { animation-duration: 4.9s; animation-delay: 3.5s; width: 3px; height: 3px; }
.global-eyes-pair-11 { top: 64%; left: 8%; }
.global-eyes-pair-11 .eye { animation-duration: 5.4s; animation-delay: 0.9s; width: 2px; height: 2px; }
.global-eyes-pair-12 { top: 70%; right: 18%; }
.global-eyes-pair-12 .eye { animation-duration: 6.8s; animation-delay: 2.1s; width: 4px; height: 4px; }
.global-eyes-pair-13 { top: 76%; left: 12%; }
.global-eyes-pair-13 .eye { animation-duration: 5.0s; animation-delay: 1.4s; width: 3px; height: 3px; }
.global-eyes-pair-14 { top: 81%; right: 6%; }
.global-eyes-pair-14 .eye { animation-duration: 6.0s; animation-delay: 2.8s; width: 2px; height: 2px; }
.global-eyes-pair-15 { top: 86%; left: 18%; }
.global-eyes-pair-15 .eye { animation-duration: 4.7s; animation-delay: 0.3s; width: 3px; height: 3px; }
.global-eyes-pair-16 { top: 89%; right: 12%; }
.global-eyes-pair-16 .eye { animation-duration: 7.2s; animation-delay: 1.7s; width: 4px; height: 4px; }
.global-eyes-pair-17 { top: 92%; left: 6%; }
.global-eyes-pair-17 .eye { animation-duration: 5.3s; animation-delay: 3.0s; width: 2px; height: 2px; }
.global-eyes-pair-18 { top: 95%; right: 10%; }
.global-eyes-pair-18 .eye { animation-duration: 6.4s; animation-delay: 0.7s; width: 3px; height: 3px; }
.global-eyes-pair-19 { top: 97%; left: 14%; }
.global-eyes-pair-19 .eye { animation-duration: 4.6s; animation-delay: 2.4s; width: 2px; height: 2px; }
.global-eyes-pair-20 { top: 99%; right: 5%; }
.global-eyes-pair-20 .eye { animation-duration: 5.9s; animation-delay: 1.1s; width: 4px; height: 4px; }

/* Size & Opacity Fallback Helpers (for compatibility) */
.eyes-size-sm .eye { width: 2px; height: 2px; }
.eyes-size-md .eye { width: 3px; height: 3px; }
.eyes-size-lg .eye { width: 4px; height: 4px; }
.eyes-dim-sm { opacity: calc(var(--eyes-brightness, 0.7) * 0.65); }
.eyes-dim-md { opacity: calc(var(--eyes-brightness, 0.7) * 0.85); }
.eyes-dim-lg { opacity: var(--eyes-brightness, 0.7); }

/* Grouped Background Integration for Middle Sections */
.two-path-section,
.what-we-make-section,
.mid-split-section,
.gallery-section {
	position: relative;
	background-image: linear-gradient(180deg, rgba(2, 10, 12, var(--bg-overlay-opacity)) 0%, rgba(2, 10, 12, var(--bg-overlay-opacity)) 100%), url('../../extended%20image.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed; /* Parallax scrolling effect */
	border-bottom: 1px solid rgba(31, 59, 56, 0.15);
}

@media (max-width: 991px) {
	.two-path-section,
	.what-we-make-section,
	.mid-split-section,
	.gallery-section,
	.who-we-help-section,
	.site-footer {
		background-attachment: scroll;
	}
}

/* ==========================================================================
   6. Two Path Cards Section
   ========================================================================== */
.two-path-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.path-card {
	position: relative;
	background-color: var(--panel-bg);
	border: 1px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	padding: 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: var(--transition-slow);
	min-height: 380px;
}

.path-card-teal {
	border-color: var(--border-dark-teal);
}

.path-card-teal:hover {
	border-color: var(--muted-teal);
	box-shadow: 0 10px 40px var(--subtle-teal-glow);
	transform: translateY(-8px);
}

.path-card-red {
	border-color: var(--border-red);
}

.path-card-red:hover {
	border-color: var(--deep-red);
	box-shadow: 0 10px 40px var(--subtle-red-glow);
	transform: translateY(-8px);
}

.path-card-content {
	width: 55%;
	z-index: 5;
}

.path-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
}

.path-icon {
	margin-right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.path-icon-img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	display: block;
}

.path-card-teal .path-icon {
	color: var(--muted-teal);
}

.path-card-red .path-icon {
	color: var(--deep-red);
}

.path-titles {
	display: flex;
	flex-direction: column;
}

.path-title {
	font-size: 24px;
	margin-bottom: 4px;
}

.path-accent-text {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
}

.path-card-teal .path-accent-text {
	color: var(--muted-teal);
}

.path-card-red .path-accent-text {
	color: var(--deep-red);
}

.path-description {
	font-size: 14px;
	color: var(--warm-body);
	margin-bottom: 28px;
}

.path-btn {
	padding: 10px 20px;
	font-size: 12px;
}

/* Dynamic CSS Mockups inside the cards */
.path-card-collage {
	width: 40%;
	position: relative;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.path-card-uploaded-img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	transition: var(--transition-slow);
	z-index: 4;
}

.path-card:hover .path-card-uploaded-img {
	transform: scale(1.05);
}

.css-mockup-collage {
	position: relative;
	width: 100%;
	height: 100%;
}

.mockup-item {
	position: absolute;
	background-color: var(--sec-forest);
	border: 1px solid var(--border-dark-teal);
	border-radius: 6px;
	transition: var(--transition-smooth);
}

/* Hat Mockup */
.mockup-hat {
	width: 70px;
	height: 50px;
	top: 25px;
	left: 10px;
	z-index: 3;
	transform: rotate(-10deg);
}

.hat-cap {
	width: 50px;
	height: 35px;
	border-radius: 35px 35px 0 0;
	background-color: #0c1514;
	margin: 5px auto 0;
	position: relative;
}

.hat-brim {
	width: 60px;
	height: 8px;
	background-color: var(--deep-teal);
	border-radius: 4px;
	position: absolute;
	bottom: 8px;
	left: 5px;
}

/* Polo Mockup */
.mockup-polo {
	width: 90px;
	height: 110px;
	top: 60px;
	right: 10px;
	z-index: 2;
	background-color: #072b26;
	border-color: #103d36;
}

.polo-collar {
	width: 40px;
	height: 15px;
	background-color: #061f1b;
	margin: 0 auto;
	border-radius: 0 0 10px 10px;
}

/* Folded shirt Mockup */
.mockup-folded {
	width: 80px;
	height: 80px;
	bottom: 20px;
	left: 20px;
	z-index: 1;
	background-color: #091715;
}

.mockup-label {
	display: block;
	font-size: 7px;
	font-weight: 700;
	color: var(--muted-text);
	text-align: center;
	margin-top: 15px;
	letter-spacing: 0.05em;
	pointer-events: none;
	text-transform: uppercase;
}

.mockup-polo .mockup-label {
	margin-top: 30px;
	font-size: 8px;
}

/* Graphic Shirt Items */
.shirt-item {
	width: 75px;
	height: 95px;
	background-color: var(--deep-bg);
	border: 1px solid var(--border-red);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.shirt-left {
	bottom: 40px;
	left: 0;
	transform: rotate(-15deg);
	z-index: 1;
}

.shirt-center {
	z-index: 3;
	top: 40px;
	left: 45px;
	background-color: #0f0b0b;
	border-color: #7a221b;
}

.shirt-right {
	bottom: 30px;
	right: 0;
	transform: rotate(15deg);
	z-index: 2;
}

.shirt-graphic {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.graphic-icon {
	font-size: 14px;
	margin-bottom: 6px;
}

.graphic-title {
	font-size: 6px;
	font-weight: 700;
	color: var(--bone-white);
	line-height: 1.1;
	letter-spacing: 0.05em;
}

.path-card:hover .shirt-center {
	transform: translateY(-8px) scale(1.05);
}

/* ==========================================================================
   7. What We Make Grid Section
   ========================================================================== */
.what-we-make-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 16px;
}

.make-card {
	background-color: var(--panel-bg);
	border: 1px solid var(--border-dark-teal);
	border-radius: 6px;
	padding: 24px 16px;
	text-align: center;
	transition: var(--transition-smooth);
}

.make-card:hover {
	border-color: var(--muted-teal);
	box-shadow: 0 8px 25px var(--subtle-teal-glow);
	transform: translateY(-4px);
}

.make-icon-wrapper {
	color: var(--muted-teal);
	width: 36px;
	height: 36px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.make-icon-wrapper svg {
	width: 100%;
	height: 100%;
}

.make-icon-img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	display: block;
}

.make-title {
	font-size: 14px;
	margin-bottom: 8px;
	font-weight: 700;
}

.make-description {
	font-size: 11px;
	color: var(--muted-text);
	margin: 0;
	line-height: 1.4;
}

/* ==========================================================================
   8. Split Column Section (How it works + Shop Latest Drop)
   ========================================================================== */
.split-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.split-left {
	border-right: 1px solid rgba(31, 59, 56, 0.2);
	padding-right: 48px;
}

/* Steps list */
.steps-grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

@media (min-width: 768px) {
	.steps-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px 48px;
	}
	
	.step-item {
		position: relative;
	}
	
	/* Dashed arrow connecting step 1 to 2, and step 3 to 4 */
	.step-item:nth-child(odd)::after {
		content: '→';
		position: absolute;
		right: -32px;
		top: 26px;
		transform: translateY(-50%);
		color: var(--border-dark-teal);
		font-size: 20px;
		font-weight: bold;
		pointer-events: none;
	}
}

.step-item {
	display: flex;
	align-items: flex-start;
}

.step-icon-wrapper {
	position: relative;
	width: 52px;
	height: 52px;
	border: 1.5px dashed var(--border-dark-teal);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted-teal);
	flex-shrink: 0;
	margin-right: 20px;
}

.step-icon-wrapper svg {
	width: 24px;
	height: 24px;
}

.step-number {
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 20px;
	height: 20px;
	background-color: var(--bone-white);
	color: var(--deep-bg);
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-details {
	display: flex;
	flex-direction: column;
}

.step-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
	color: var(--bone-white);
}

.step-description {
	font-size: 13px;
	color: var(--muted-text);
	margin: 0;
	line-height: 1.4;
}

/* Products grid & cards in Split column */
.products-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.product-card {
	background-color: var(--panel-bg);
	border: 1px solid var(--border-dark-teal);
	border-radius: 6px;
	overflow: hidden;
	transition: var(--transition-smooth);
}

.product-card:hover {
	border-color: var(--muted-teal);
	transform: translateY(-4px);
	box-shadow: 0 8px 25px var(--subtle-teal-glow);
}

.product-card-image {
	background-color: var(--deep-bg);
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.product-card-image img {
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 100% !important;
	object-fit: contain !important;
}

.sale-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: var(--deep-red);
	color: var(--bone-white);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 4px 8px;
	border-radius: 3px;
}

/* T-Shirt CSS mockups for products */
.placeholder-shirt-bg {
	background-color: rgba(13, 25, 23, 0.5);
}

.css-shirt {
	width: 110px;
	height: 120px;
	background-color: var(--deep-bg);
	border: 1.5px solid var(--border-dark-teal);
	border-radius: 8px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.css-shirt::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 12px;
	background-color: var(--panel-bg);
	border-radius: 0 0 16px 16px;
	border-bottom: 1px solid var(--border-dark-teal);
}

.shirt-print {
	font-size: 28px;
}

.product-card-details {
	padding: 20px;
	text-align: center;
}

.product-category {
	display: block;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted-teal);
	margin-bottom: 6px;
}

.product-title {
	font-size: 13px;
	line-height: 1.3;
	margin-bottom: 10px;
	height: 34px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-title a {
	color: var(--bone-white);
}

.product-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--muted-teal);
	margin-bottom: 16px;
}

.product-card-btn {
	width: 100%;
}

.drop-intro {
	font-size: 14px;
	margin-top: -10px;
	margin-bottom: 30px;
}

/* ==========================================================================
   9. Who We Help & Trust Section
   ========================================================================== */
.who-we-help-section {
	position: relative;
	background-image: linear-gradient(180deg, rgba(2, 10, 12, var(--bg-overlay-opacity)) 0%, rgba(2, 10, 12, var(--bg-overlay-opacity)) 100%), url('../../extend%202.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed; /* Parallax scrolling effect */
	border-top: 1px solid rgba(31, 59, 56, 0.2);
}

.help-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.help-card {
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 16px 8px;
	text-align: center;
	transition: var(--transition-smooth);
}

.help-card:hover {
	transform: translateY(-4px);
}

.help-icon-wrapper {
	color: #E8A23C;
	width: 32px;
	height: 32px;
	margin: 0 auto 12px;
}

.help-icon-wrapper svg {
	width: 100%;
	height: 100%;
	stroke: #E8A23C;
}

.help-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
	color: var(--bone-white);
}

/* Trust list details */
.trust-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.trust-card {
	display: flex;
	align-items: flex-start;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 16px 8px;
	transition: var(--transition-smooth);
}

.trust-card:hover {
	transform: translateY(-2px);
}

.trust-icon-wrapper {
	color: var(--muted-teal);
	width: 28px;
	height: 28px;
	margin-right: 16px;
	flex-shrink: 0;
}

.trust-icon-wrapper svg {
	width: 100%;
	height: 100%;
}

.trust-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--bone-white);
}

.trust-description {
	font-size: 12px;
	color: var(--muted-text);
	margin: 0;
	line-height: 1.4;
}

/* ==========================================================================
   Showcase Gallery Section
   ========================================================================== */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 40px;
}

.gallery-card {
	background-color: var(--panel-bg);
	border: 1px solid var(--border-dark-teal);
	border-radius: 6px;
	overflow: hidden;
	transition: var(--transition-smooth);
	display: flex;
	flex-direction: column;
}

.gallery-card:hover {
	border-color: var(--muted-teal);
	transform: translateY(-6px);
	box-shadow: 0 10px 30px var(--subtle-teal-glow);
}

.gallery-image-wrapper {
	position: relative;
	height: 200px;
	background-color: var(--deep-bg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.css-gallery-illustration {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: var(--transition-smooth);
}

.gallery-card:hover .css-gallery-illustration {
	transform: scale(1.08);
}

.gallery-featured-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-smooth);
}

.gallery-card:hover .gallery-featured-img {
	transform: scale(1.08);
}

/* Illustration Styles */
.illust-shirt {
	width: 90px;
	height: 100px;
	background-color: #0c1514;
	border: 1.5px solid var(--border-dark-teal);
	border-radius: 6px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.illust-shirt::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 10px;
	background-color: var(--panel-bg);
	border-radius: 0 0 12px 12px;
	border-bottom: 1.5px solid var(--border-dark-teal);
}

.illust-polo {
	width: 80px;
	height: 100px;
	background-color: #072b26;
	border: 1.5px solid #103d36;
	border-radius: 6px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.illust-polo::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 12px;
	background-color: #051d1a;
	border-radius: 0 0 8px 8px;
}

.illust-hoodie {
	width: 90px;
	height: 100px;
	background-color: #120e0e;
	border: 1.5px solid #5c1d1a;
	border-radius: 6px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.illust-hoodie::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 15px;
	background-color: #2b0c0a;
	border-radius: 10px 10px 0 0;
}

.illust-stickers {
	width: 100px;
	height: 100px;
	border: 1px dashed var(--border-dark-teal);
	border-radius: 6px;
	position: relative;
	background-color: rgba(13, 25, 23, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.illust-print {
	font-size: 24px;
	z-index: 2;
}

/* Hover Overlay */
.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(7, 11, 12, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: var(--transition-smooth);
	padding: 20px;
	text-align: center;
	z-index: 3;
}

.gallery-card:hover .gallery-overlay {
	opacity: 1;
}

.gallery-category {
	font-size: 10px;
	font-weight: 700;
	color: var(--muted-teal);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
}

.gallery-item-title {
	font-size: 16px;
	font-family: var(--font-sans);
	font-weight: 700;
	color: var(--bone-white);
	margin: 0;
}

.gallery-details {
	padding: 20px;
	flex-grow: 1;
}

.gallery-label {
	font-size: 9px;
	font-weight: 700;
	color: var(--muted-teal);
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 6px;
}

.gallery-title-text {
	font-size: 15px;
	margin-bottom: 10px;
	font-weight: 700;
}

.gallery-description {
	font-size: 12px;
	color: var(--muted-text);
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   10. Final CTA Banner
   ========================================================================== */
.final-cta-section {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	overflow: hidden;
	padding: 100px 0;
}

.cta-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	background-color: var(--subtle-teal-glow);
	border-radius: 50%;
	filter: blur(80px);
	z-index: 1;
	pointer-events: none;
}

.cta-container {
	position: relative;
	z-index: 2;
}

.cta-content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cta-logo-badge {
	margin-bottom: 24px;
	display: inline-flex;
	color: var(--muted-teal);
	animation: float 6s ease-in-out infinite;
}

.cta-badge-img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
	animation: float 6s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.cta-title {
	font-size: 44px;
	margin-bottom: 16px;
	letter-spacing: 0.05em;
	line-height: 1.1;
}

.cta-description {
	font-size: 16px;
	max-width: 600px;
	margin: 0 auto 36px;
	color: var(--warm-body);
}

.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
}

@media (min-width: 992px) {
	.cta-content-wrapper {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
	
	.cta-text-side {
		display: flex;
		align-items: center;
		text-align: left;
		gap: 32px;
		width: 70%;
	}
	
	.cta-logo-badge {
		margin-bottom: 0;
		flex-shrink: 0;
	}
	
	.cta-text-details {
		display: flex;
		flex-direction: column;
	}
	
	.cta-title {
		font-size: 38px;
		margin-bottom: 8px;
	}
	
	.cta-description {
		margin: 0;
		max-width: 550px;
	}
	
	.cta-buttons {
		width: 30%;
		justify-content: flex-end;
	}
}

/* ==========================================================================
   11. Footer Styles
   ========================================================================== */
.site-footer {
	position: relative;
	background-image: linear-gradient(180deg, rgba(2, 10, 12, var(--bg-overlay-opacity)) 0%, rgba(2, 10, 12, var(--bg-overlay-opacity)) 100%), url('../../extend%203.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed; /* Parallax scrolling effect */
	border-top: 1px solid var(--border-dark-teal);
	padding: 80px 0 40px;
}

.footer-row {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 60px;
}

.footer-col-brand .cryptid-logo-container {
	margin-bottom: 20px;
}

.footer-description {
	font-size: 13px;
	color: var(--muted-text);
	line-height: 1.5;
}

.footer-col-title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bone-white);
	margin-bottom: 24px;
	position: relative;
	padding-bottom: 8px;
}

.footer-col-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 24px;
	height: 1px;
	background-color: var(--muted-teal);
}

.serving-location {
	font-size: 13px;
	color: var(--muted-text);
	line-height: 1.5;
}

.footer-links-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links-list li {
	margin-bottom: 12px;
}

.footer-links-list a {
	font-size: 13px;
	color: var(--muted-text);
}

.footer-links-list a:hover {
	color: var(--muted-teal);
	padding-left: 4px;
}

.footer-contact-info {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.footer-contact-info li {
	margin-bottom: 14px;
}

.contact-link {
	font-size: 13px;
	color: var(--muted-text);
	display: flex;
	align-items: center;
}

.contact-link:hover {
	color: var(--muted-teal);
}

.contact-icon {
	color: var(--muted-teal);
	margin-right: 8px;
	font-size: 14px;
}

.footer-social-icons {
	display: flex;
	gap: 12px;
}

.social-icon {
	color: var(--muted-text);
	background-color: var(--panel-bg);
	border: 1px solid var(--border-dark-teal);
	width: 36px;
	height: 36px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-smooth);
}

.social-icon:hover {
	color: var(--muted-teal);
	border-color: var(--muted-teal);
	box-shadow: 0 0 10px var(--subtle-teal-glow);
	transform: translateY(-2px);
}

/* Footer Bottom styles */
.footer-bottom {
	border-top: 1px solid rgba(31, 59, 56, 0.2);
	padding-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-copyright p {
	font-size: 12px;
	color: var(--muted-text);
	margin: 0;
}

.footer-accent-box {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-dark-teal);
	border-radius: 4px;
	padding: 8px 16px;
}

.footer-accent-box .accent-text {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--muted-text);
	margin-right: 12px;
}

.footer-accent-box .accent-claw {
	display: flex;
	color: var(--muted-teal);
}

/* ==========================================================================
   12. Standard Inner Pages & Post Templates
   ========================================================================== */
.standard-page-main {
	padding-top: 140px;
	background-color: var(--main-bg);
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.page-content-container {
	max-width: 800px;
}

.entry-header {
	margin-bottom: 40px;
	text-align: center;
}

.entry-title {
	font-size: 40px;
	margin-bottom: 12px;
}

.entry-meta {
	font-size: 13px;
	letter-spacing: 0.05em;
}

.post-thumbnail-wrapper {
	margin-bottom: 30px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--border-dark-teal);
}

.post-thumbnail {
	width: 100%;
	height: auto;
}

.entry-content {
	line-height: 1.8;
}

.entry-content p {
	margin-bottom: 24px;
}

/* Archive Blog Grid styling */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
	margin-top: 40px;
}

.archive-card {
	background-color: var(--panel-bg);
	border: 1px solid var(--border-dark-teal);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: var(--transition-smooth);
}

.archive-card:hover {
	border-color: var(--muted-teal);
	transform: translateY(-4px);
}

.archive-card-image {
	height: 200px;
	overflow: hidden;
	background-color: var(--deep-bg);
}

.archive-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-smooth);
}

.archive-card:hover .archive-card-image img {
	transform: scale(1.05);
}

.archive-card-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.archive-card-title {
	font-size: 18px;
	margin-bottom: 8px;
}

.archive-card-date {
	font-size: 12px;
	margin-bottom: 16px;
}

.archive-card-excerpt {
	font-size: 14px;
	margin-bottom: 20px;
	flex-grow: 1;
}

.posts-navigation {
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
	font-weight: 700;
}

/* ==========================================================================
   13. WooCommerce Overrides
   ========================================================================== */
.woocommerce-main {
	padding-top: 140px;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Global Woocommerce messages and notifications */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
	background-color: var(--panel-bg) !important;
	border-top: 3px solid var(--muted-teal) !important;
	color: var(--warm-body) !important;
	border-radius: 4px;
	padding: 18px 24px !important;
	font-size: 14px;
}

.woocommerce-error {
	border-top-color: var(--deep-red) !important;
}

.woocommerce-message::before, 
.woocommerce-info::before {
	color: var(--muted-teal) !important;
}

.woocommerce-message .button {
	background-color: var(--border-dark-teal) !important;
	color: var(--bone-white) !important;
	border-radius: 4px;
	font-weight: 700;
	font-size: 12px;
}

.woocommerce-message .button:hover {
	background-color: var(--muted-teal) !important;
	color: var(--deep-bg) !important;
}

/* Products grid overrides */
ul.products li.product {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	border-radius: 6px !important;
	padding: 16px !important;
	transition: var(--transition-smooth) !important;
	text-align: center;
}

ul.products li.product:hover {
	border-color: var(--muted-teal) !important;
	transform: translateY(-4px);
	box-shadow: 0 8px 25px var(--subtle-teal-glow);
}

ul.products li.product .woocommerce-loop-product__title {
	color: var(--bone-white) !important;
	font-size: 14px !important;
	padding: 8px 0 !important;
	margin: 0 !important;
}

ul.products li.product .price {
	color: var(--muted-teal) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	margin-bottom: 12px !important;
}

ul.products li.product .button {
	background-color: transparent !important;
	color: var(--muted-teal) !important;
	border: 2px solid var(--border-dark-teal) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	padding: 10px 16px !important;
	border-radius: 4px !important;
	display: block !important;
	margin: 0 auto !important;
	transition: var(--transition-smooth) !important;
}

ul.products li.product .button:hover {
	background-color: var(--muted-teal) !important;
	border-color: var(--muted-teal) !important;
	color: var(--deep-bg) !important;
	box-shadow: 0 0 15px var(--subtle-teal-glow);
}

ul.products li.product .onsale {
	background-color: var(--deep-red) !important;
	color: var(--bone-white) !important;
	font-weight: 700 !important;
	font-size: 10px !important;
}

/* Single Product styling */
.product_title {
	font-family: var(--font-display) !important;
	color: var(--bone-white) !important;
	font-size: 36px !important;
	margin-bottom: 16px !important;
}

.woocommerce-product-details__short-description {
	color: var(--warm-body) !important;
	margin-bottom: 24px !important;
}

.summary .price {
	color: var(--muted-teal) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	margin-bottom: 24px !important;
}

.woocommerce div.product p.price ins, 
.woocommerce div.product span.price ins {
	text-decoration: none !important;
	color: var(--muted-teal) !important;
}

.woocommerce div.product p.price del, 
.woocommerce div.product span.price del {
	color: var(--muted-text) !important;
	opacity: 0.7;
}

.quantity input.qty {
	background-color: var(--deep-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	color: var(--bone-white) !important;
	border-radius: 4px !important;
	padding: 8px !important;
}

.woocommerce div.product .single_add_to_cart_button {
	background-color: var(--deep-red) !important;
	color: var(--bone-white) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	border-radius: 4px !important;
	padding: 12px 24px !important;
	transition: var(--transition-smooth) !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
	background-color: var(--red-hover) !important;
	box-shadow: 0 0 15px var(--subtle-red-glow);
}

.woocommerce-tabs ul.tabs {
	background: transparent !important;
	border-bottom: 1px solid var(--border-dark-teal) !important;
}

.woocommerce-tabs ul.tabs li {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	border-bottom: none !important;
	border-radius: 4px 4px 0 0 !important;
}

.woocommerce-tabs ul.tabs li.active {
	background-color: var(--sec-forest) !important;
	border-color: var(--muted-teal) !important;
	border-bottom-color: var(--sec-forest) !important;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--warm-body) !important;
	font-weight: 700 !important;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--muted-teal) !important;
}

.woocommerce-Tabs-panel {
	border: 1px solid var(--border-dark-teal) !important;
	background-color: var(--panel-bg) !important;
	padding: 24px !important;
	border-radius: 0 0 6px 6px !important;
}

/* Cart & Checkout pages styling */
.woocommerce-cart-form table.cart {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	border-radius: 6px;
}

.woocommerce-cart-form table.cart th {
	background-color: var(--sec-forest) !important;
	color: var(--bone-white) !important;
	border-bottom: 1px solid var(--border-dark-teal) !important;
}

.woocommerce-cart-form table.cart td {
	border-bottom: 1px solid var(--border-dark-teal) !important;
}

.cart_totals {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	border-radius: 6px;
	padding: 24px !important;
}

.cart_totals table {
	width: 100% !important;
}

.checkout_coupon, 
.woocommerce-checkout {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	border-radius: 6px;
	padding: 32px !important;
}

/* Form inputs styling */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row select, 
.woocommerce form .form-row textarea {
	background-color: var(--deep-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	color: var(--bone-white) !important;
	border-radius: 4px !important;
	padding: 12px !important;
	width: 100%;
}

.woocommerce form .form-row input.input-text:focus, 
.woocommerce form .form-row select:focus, 
.woocommerce form .form-row textarea:focus {
	border-color: var(--muted-teal) !important;
	outline: none !important;
	box-shadow: 0 0 8px var(--subtle-teal-glow) !important;
}

#order_review_heading, 
#order_review {
	background-color: var(--panel-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	border-radius: 6px;
	padding: 24px !important;
	margin-top: 24px !important;
}

#payment {
	background-color: var(--deep-bg) !important;
	border: 1px solid var(--border-dark-teal) !important;
	border-radius: 6px !important;
}

#payment ul.payment_methods {
	border-bottom: 1px solid var(--border-dark-teal) !important;
}

#place_order {
	background-color: var(--deep-red) !important;
	color: var(--bone-white) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
}

#place_order:hover {
	background-color: var(--red-hover) !important;
}

/* ==========================================================================
   14. Animations: Scroll Reveals (Fade-Up)
   ========================================================================== */
.fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

.fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   15. Responsive Layouts & Media Queries
   ========================================================================== */

/* Desktop Specific Layout Overrides */
@media (min-width: 992px) {
	.hero-section {
		min-height: 680px;
	}
}

/* Large screens and Desktops (up to 1200px) */
@media (max-width: 1200px) {
	.hero-title {
		font-size: 44px;
	}
	.what-we-make-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.help-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablet Layout (up to 991px) */
@media (max-width: 991px) {
	.section-padding {
		padding: 60px 0;
	}
	
	/* Mobile Menu Navigation Triggered States */
	.menu-toggle {
		display: block;
		z-index: 1001;
	}
	
	.header-navigation-wrapper {
		position: fixed;
		top: 0;
		right: 0;
		width: 300px;
		height: 100vh;
		background-color: var(--deep-bg);
		border-left: 1px solid var(--border-dark-teal);
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 100px 30px 40px;
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1000;
		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
	}
	
	.header-navigation-wrapper.is-open {
		transform: translateX(0);
	}
	
	.site-navigation {
		width: 100%;
		margin-right: 0;
		margin-bottom: 40px;
	}
	
	.primary-menu-list {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.primary-menu-list li {
		margin: 12px 0;
		width: 100%;
	}
	
	.primary-menu-list a {
		font-size: 14px;
		display: block;
		padding: 6px 0;
	}
	
	.header-cta-wrapper {
		width: 100%;
	}
	
	.header-cta-btn {
		width: 100%;
	}
	
	body.menu-open {
		overflow: hidden;
	}
	
	/* Hero Stack */
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	
	.hero-content {
		text-align: center;
	}
	
	.hero-divider, 
	.hero-badge {
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}
	
	.hero-description {
		margin-left: auto;
		margin-right: auto;
	}
	
	.hero-buttons {
		justify-content: center;
	}
	
	.hero-grid-spacer {
		display: none;
	}
	

	
	/* Two Paths Stack */
	.two-path-grid {
		grid-template-columns: 1fr;
	}
	
	.path-card {
		padding: 32px;
	}
	
	/* Split Page sections */
	.split-container {
		grid-template-columns: 1fr;
		gap: 60px;
	}
	
	.split-left {
		border-right: none;
		border-bottom: 1px solid rgba(31, 59, 56, 0.2);
		padding-right: 0;
		padding-bottom: 40px;
	}
	
	/* Footer Row */
	.footer-row {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	/* Gallery Grid Override */
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* Mobile Portrait Layout (up to 767px) */
@media (max-width: 767px) {
	.hero-section {
		padding: 120px 0 60px;
	}
	
	.hero-title {
		font-size: 32px;
	}
	

	
	.hero-buttons {
		flex-direction: column;
		gap: 12px;
	}
	
	.hero-buttons .btn {
		width: 100%;
	}
	
	.path-card {
		flex-direction: column-reverse;
		align-items: stretch;
		min-height: auto;
		padding: 32px 24px;
	}
	
	.path-card-content {
		width: 100%;
		margin-top: 32px;
	}
	
	.path-card-collage {
		width: 100%;
		height: 180px;
	}
	
	.what-we-make-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.products-grid {
		grid-template-columns: 1fr;
	}
	
	.help-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.cta-title {
		font-size: 28px;
	}
	
	.cta-buttons {
		flex-direction: column;
		gap: 12px;
		align-items: center;
	}
	
	.cta-buttons .btn {
		width: 100%;
		max-width: 320px;
	}
	
	.footer-row {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	
	.footer-bottom {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}

	/* Gallery Grid Override */
	.gallery-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Accessibility: prefers-reduced-motion override */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-delay: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* Announcement Bar Styling */
.site-announcement-bar {
	background-color: var(--deep-red, #9e1b1b) !important;
	color: var(--bone-white, #fff) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	padding: 8px 0;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 9999;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-dark-teal, #1c2b2b);
}

.announcement-bar-content {
	display: flex;
	white-space: nowrap;
	animation: marquee 25s linear infinite;
	width: max-content;
}

.announcement-bar-content span {
	padding: 0 40px;
	display: inline-block;
}

@keyframes marquee {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Header WooCommerce Cart Link Styling */
.header-cart-link {
	color: var(--bone-white, #eaeaea) !important;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.2s ease;
	margin-right: 20px;
	vertical-align: middle;
}

.header-cart-link:hover {
	color: var(--deep-red, #c62828) !important;
	transform: scale(1.05);
}

.header-cart-icon-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.header-cart-svg {
	stroke: currentColor;
	transition: stroke 0.3s ease;
}

.header-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	background-color: var(--deep-red, #c62828) !important;
	color: var(--bone-white, #fff) !important;
	border: 1px solid var(--deep-bg, #0b1111);
	border-radius: 50% !important;
	width: 18px !important;
	height: 18px !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Hide cart count bubble if cart is empty */
.header-cart-count.cart-empty {
	display: none !important;
}

@media (max-width: 768px) {
	.header-cart-link {
		margin-right: 15px;
	}
}