/**
 * Theme Components Styles
 * 
 * Complete styling for all theme components:
 * - Header & Navigation
 * - Breadcrumbs
 * - Buttons & Forms
 * - Utilities & Helpers
 * 
 * @package TaatiStudio
 * @since 1.0.0
 */

/* ========================================
   BREADCRUMBS - Unified Component
   ======================================== */

/**
 * Single breadcrumb implementation for all page types
 * Supports Customizer toggles for visibility control
 */
.ts-breadcrumb {
	padding: 1rem 0;
	margin-bottom: 1.5rem;
}

.ts-breadcrumb-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: rgba(var(--color-text-rgb, 20, 20, 51), 0.7);
}

.ts-breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

.ts-breadcrumb-item a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ts-breadcrumb-item a:hover {
	color: var(--color-primary, #C3A46A);
}

.ts-breadcrumb-separator {
	margin: 0 0.25rem;
	opacity: 0.4;
}

/* Customizer Toggle Support */
body:not(.show-breadcrumbs) .ts-breadcrumb {
	display: none;
}

body.hide-breadcrumbs-shop .woocommerce-shop .ts-breadcrumb,
body.hide-breadcrumbs-product .single-product .ts-breadcrumb,
body.hide-breadcrumbs-page .page .ts-breadcrumb {
	display: none;
}

/* Tablet - Slightly larger */
@media (min-width: 768px) {
	.ts-breadcrumb {
		padding: 1.25rem 0;
		margin-bottom: 1.75rem;
	}

	.ts-breadcrumb-list {
		font-size: 0.9375rem;
	}
}

/* Desktop - More breathing space */
@media (min-width: 1024px) {
	.ts-breadcrumb {
		padding: 1.5rem 0;
		margin-bottom: 2rem;
	}

	.ts-breadcrumb-list {
		font-size: 1rem;
	}
}

/* ========================================
   HEADER & SITE STRUCTURE
   ======================================== */

.ts-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.ts-site-content {
	flex: 1;
}

/* Header Base */
.ts-site-header {
	position: relative;
	background: var(--header-bg-color, var(--color-white, #FFFFFF));
	border-bottom: 1px solid var(--color-border, rgba(195, 164, 106, 0.3));
	z-index: var(--z-sticky, 1020);
}

/* Sticky Header */
.ts-header-sticky {
	position: sticky;
	top: 0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ts-header-sticky.scrolled {
	box-shadow: 0 2px 12px rgba(var(--color-text-rgb), 0.08);
}

.ts-header-sticky.hidden {
	transform: translateY(-100%);
}

/* Transparent Header */
.ts-header-transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent !important;
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

.ts-header-transparent .ts-header-inner {
	color: var(--transparent-header-text-color, var(--color-white));
}

/* Transparent header - navigation links */
.ts-header-transparent .ts-primary-navigation a {
	color: var(--transparent-header-text-color, var(--color-white));
}

/* Transparent header - mobile menu toggle */
.ts-header-transparent .ts-menu-icon span {
	background: var(--transparent-header-text-color, var(--color-white));
}

/* Transparent header - icons (search, cart, etc.) */
.ts-header-transparent .ts-icon,
.ts-header-transparent .ts-header-utilities button,
.ts-header-transparent .ts-header-utilities a {
	color: var(--transparent-header-text-color, var(--color-white));
}

/* Transparent header - logo text (if text-based) */
.ts-header-transparent .ts-site-branding a {
	color: var(--transparent-header-text-color, var(--color-white));
}

/* Announcement Bar - Enhanced for E-commerce Promos */
.ts-announcement-bar {
	background: var(--color-primary);
	color: var(--color-white);
	padding: var(--spacing-3) 0;
	font-size: 0.875rem;
	text-align: center;
	position: relative;
	z-index: var(--z-sticky); /* Above header */
}

.ts-announcement-bar.ts-promo-bar {
	background: var(--color-secondary);
	color: var(--color-primary);
	font-weight: 600;
}

.ts-announcement-bar.ts-urgent-bar {
	background: var(--color-accent);
	color: var(--color-white);
	animation: ts-pulse-subtle 2s ease-in-out infinite;
}

@keyframes ts-pulse-subtle {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.95; }
}

.ts-announcement-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-4);
	position: relative;
	padding: 0 var(--spacing-12); /* Space for close button and button */
	flex-wrap: wrap;
}

/* Announcement text */
.ts-announcement-text {
	flex-shrink: 1;
}

/* Announcement with icon */
.ts-announcement-content .ts-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* CTA link in announcement text */
.ts-announcement-content .ts-announcement-text a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
	transition: opacity 0.2s ease;
}

.ts-announcement-content .ts-announcement-text a:hover {
	opacity: 0.8;
}

/* Announcement Button (CTA) */
.ts-announcement-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 1rem;
	font-size: 0.813rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: inherit;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid currentColor;
	border-radius: 4px;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.ts-announcement-button:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-1px);
}

/* Button on dark backgrounds */
.ts-announcement-bar[style*="color: #FFFFFF"] .ts-announcement-button,
.ts-announcement-bar[style*="color: #fff"] .ts-announcement-button {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.5);
}

.ts-announcement-bar[style*="color: #FFFFFF"] .ts-announcement-button:hover,
.ts-announcement-bar[style*="color: #fff"] .ts-announcement-button:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Button on light backgrounds */
.ts-announcement-bar[style*="color: #141433"] .ts-announcement-button,
.ts-announcement-bar[style*="color: #000"] .ts-announcement-button {
	background: rgba(20, 20, 51, 0.1);
	border-color: rgba(20, 20, 51, 0.3);
}

.ts-announcement-bar[style*="color: #141433"] .ts-announcement-button:hover,
.ts-announcement-bar[style*="color: #000"] .ts-announcement-button:hover {
	background: rgba(20, 20, 51, 0.15);
	border-color: rgba(20, 20, 51, 0.5);
}

.ts-announcement-close {
	position: absolute;
	right: 0;
	padding: 0.25rem;
	opacity: 0.8;
	transition: opacity 0.2s ease;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.ts-announcement-close:hover {
	opacity: 1;
}

/* Ensure close button icon inherits color */
.ts-announcement-close svg,
.ts-announcement-close .ts-icon {
	fill: currentColor;
	stroke: currentColor;
}

/* Header Main */
.ts-header-main {
	padding: var(--spacing-4) 0;
	position: relative;
}

/* Header Height Variants */
.ts-header-height-compact .ts-header-main {
	padding: var(--spacing-2) 0;
}

.ts-header-height-default .ts-header-main {
	padding: var(--spacing-4) 0;
}

.ts-header-height-spacious .ts-header-main {
	padding: var(--spacing-6) 0;
}

/* Custom header padding from range control */
.ts-site-header[style*="--header-padding"] .ts-header-main {
	padding: var(--header-padding, 1rem) 0;
}

/* Secondary Header/Top Bar (E-commerce Features) */
.ts-header-secondary {
	background: var(--color-bg, #F6F3EE);
	border-bottom: 1px solid var(--color-border, rgba(195, 164, 106, 0.3));
	padding: 0.5rem 0;
	font-size: 0.813rem;
}

.ts-secondary-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.ts-nav-menu-secondary {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ts-nav-menu-secondary li {
	margin: 0;
}

.ts-nav-menu-secondary a {
	color: var(--color-slate-600, #6B7280);
	text-decoration: none;
	transition: color 0.2s ease;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.ts-nav-menu-secondary a:hover {
	color: var(--color-primary);
}

.ts-nav-menu-secondary .ts-icon {
	width: 16px;
	height: 16px;
}

/* Top bar utilities (language, currency, etc.) */
.ts-topbar-utilities {
	display: flex;
	align-items: center;
	gap: 1rem;
}

@media (max-width: 767px) {
	.ts-header-secondary {
		font-size: 0.75rem;
	}
	
	.ts-nav-menu-secondary {
		gap: 1rem;
		font-size: 0.75rem;
	}
	
	.ts-topbar-utilities {
		gap: 0.5rem;
	}
}

/* Header Main */
.ts-header-main {
	padding: 1rem 0;
}

/* ========================================
   UTILITIES
   ======================================== */

/* Visually hidden utility (for screen readers) */
.ts-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.ts-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

/* Mobile Menu Toggle */
.ts-mobile-menu-toggle {
	display: none;
	padding: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 100;
}

.ts-menu-icon {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 24px;
}

.ts-menu-icon span {
	display: block;
	height: 2px;
	background: var(--color-primary, #141433);
	transition: all 0.3s ease;
}

.ts-mobile-menu-toggle[aria-expanded="true"] .ts-menu-icon span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.ts-mobile-menu-toggle[aria-expanded="true"] .ts-menu-icon span:nth-child(2) {
	opacity: 0;
}

.ts-mobile-menu-toggle[aria-expanded="true"] .ts-menu-icon span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Show mobile menu toggle on mobile/tablet only */
@media (max-width: 1023px) {
	.ts-mobile-menu-toggle {
		display: block;
	}
}

/* Ensure mobile menu toggle is hidden on desktop */
@media (min-width: 1024px) {
	.ts-mobile-menu-toggle {
		display: none !important;
	}
}

/* Site Branding */
.ts-site-branding {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.ts-custom-logo-link {
	display: block;
	line-height: 0;
}

.ts-custom-logo {
	max-height: 60px;
	width: auto;
	height: auto;
}

.ts-site-title {
	font-family: var(--font-heading, 'Playfair Display', serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: var(--color-primary);
	transition: color 0.2s ease;
}

.ts-site-title:hover {
	color: var(--color-secondary);
}

.ts-site-description {
	font-size: 0.875rem;
	color: var(--color-slate-400, #8D8D8D);
	margin: 0.25rem 0 0;
}

/* ========================================
   HEADER LAYOUTS
   Professional e-commerce header styles
   ======================================== */

/* Default Layout - Logo Left (Most Common for E-commerce) */
.ts-header-layout-default .ts-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.ts-header-layout-default .ts-site-branding {
	order: 1;
}

.ts-header-layout-default .ts-primary-navigation {
	order: 2;
	flex: 1;
}

.ts-header-layout-default .ts-header-utilities {
	order: 3;
}

/* Centered Layout - Logo Center (Luxury/Fashion Stores) */
.ts-header-layout-centered .ts-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto;
	gap: 1rem;
	padding: 1.5rem 0;
	align-items: center;
}

.ts-header-layout-centered .ts-site-branding {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	justify-self: center;
}

.ts-header-layout-centered .ts-primary-navigation {
	grid-column: 1 / 4;
	grid-row: 2 / 3;
	justify-self: center;
}

.ts-header-layout-centered .ts-header-utilities {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	justify-self: end;
	margin-right: 0;
	display: flex;
	gap: 1rem;
	align-items: center;
}

/* Hide utilities wrapper if empty */
.ts-header-utilities:empty {
	display: none;
}

/* Centered - Larger screens - add more space */
@media (min-width: 1200px) {
	.ts-header-layout-centered .ts-header-inner {
		gap: 1.5rem;
	}
	
	.ts-header-layout-centered .ts-header-utilities {
		gap: 1.5rem;
	}
}

/* Centered - Mobile responsive */
@media (max-width: 1023px) {
	.ts-header-layout-centered .ts-header-inner {
		grid-template-columns: auto 1fr auto;
		gap: 0.75rem;
		padding: 1rem 0;
	}
	
	.ts-header-layout-centered .ts-site-branding {
		grid-column: 2 / 3;
		justify-self: start;
	}
	
	.ts-header-layout-centered .ts-header-utilities {
		gap: 0.75rem;
	}
	
	.ts-header-layout-centered .ts-primary-navigation {
		display: none; /* Hidden on mobile, use mobile menu */
	}
}

/* Alternative: Split nav on centered layout for larger menus */
.ts-header-layout-centered.ts-split-nav .ts-header-inner {
	flex-direction: row;
	flex-wrap: wrap;
}

.ts-header-layout-centered.ts-split-nav .ts-site-branding {
	order: 1;
	flex: 1 0 100%;
	justify-content: center;
	margin-bottom: 1rem;
}

.ts-header-layout-centered.ts-split-nav .ts-primary-navigation {
	order: 2;
	flex: 1;
}

.ts-header-layout-centered.ts-split-nav .ts-header-utilities {
	order: 3;
	position: static;
	transform: none;
}

/* Minimal Layout - Clean & Modern (Boutiques/Startups) */
.ts-header-layout-minimal .ts-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.ts-header-layout-minimal .ts-site-branding {
	order: 1;
	flex-shrink: 0;
}

.ts-header-layout-minimal .ts-primary-navigation {
	order: 2;
	flex: none;
	justify-content: flex-start;
}

.ts-header-layout-minimal .ts-header-utilities {
	order: 3;
	margin-left: auto;
}

/* Minimal - Compact navigation */
.ts-header-layout-minimal .ts-nav-menu {
	gap: 0.25rem;
}

.ts-header-layout-minimal .ts-nav-menu > li > a {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

/* NEW: Logo Right Layout - Reversed (Unique/Modern Stores) */
.ts-header-layout-logo-right .ts-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.ts-header-layout-logo-right .ts-header-utilities {
	order: 1;
}

.ts-header-layout-logo-right .ts-primary-navigation {
	order: 2;
	flex: 1;
	justify-content: flex-start;
}

.ts-header-layout-logo-right .ts-site-branding {
	order: 3;
}

/* NEW: Nav Left Layout - Categories First (Marketplace Style) */
.ts-header-layout-nav-left .ts-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.ts-header-layout-nav-left .ts-primary-navigation {
	order: 1;
	flex: none;
	justify-content: flex-start;
}

.ts-header-layout-nav-left .ts-site-branding {
	order: 2;
	margin-left: auto;
	margin-right: auto;
}

.ts-header-layout-nav-left .ts-header-utilities {
	order: 3;
}

/* NEW: Stacked Layout - Two Rows (Maximum Space for All Elements) */
.ts-header-layout-stacked .ts-header-inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem 0;
}

.ts-header-layout-stacked .ts-header-row-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.ts-header-layout-stacked .ts-header-row-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Stacked - reorganize elements */
.ts-header-layout-stacked .ts-site-branding {
	order: 1;
}

.ts-header-layout-stacked .ts-header-utilities {
	order: 2;
}

.ts-header-layout-stacked .ts-primary-navigation {
	order: 3;
	width: 100%;
	justify-content: center;
}

/* Mobile - All layouts stack the same */
@media (max-width: 1023px) {
	.ts-header-layout-centered .ts-header-inner,
	.ts-header-layout-minimal .ts-header-inner,
	.ts-header-layout-logo-right .ts-header-inner,
	.ts-header-layout-nav-left .ts-header-inner,
	.ts-header-layout-stacked .ts-header-inner {
		flex-direction: row;
		justify-content: space-between;
		padding: 1rem 0;
	}

	.ts-header-layout-centered .ts-header-utilities,
	.ts-header-layout-minimal .ts-header-utilities,
	.ts-header-layout-logo-right .ts-header-utilities,
	.ts-header-layout-nav-left .ts-header-utilities {
		position: static;
		transform: none;
		margin-left: 0;
		order: 3;
	}

	.ts-header-layout-centered .ts-site-branding,
	.ts-header-layout-logo-right .ts-site-branding,
	.ts-header-layout-nav-left .ts-site-branding {
		margin-bottom: 0;
		flex: 1 0 auto;
		order: 2;
	}
	
	/* Mobile menu toggle always first on mobile */
	.ts-mobile-menu-toggle {
		order: 1;
	}
}

.ts-header-layout-centered.ts-split-nav .ts-header-utilities {
	order: 3;
	position: static;
	transform: none;
}

/* Minimal Layout - Clean & Modern (Boutiques/Startups) */
.ts-header-layout-minimal .ts-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.ts-header-layout-minimal .ts-site-branding {
	order: 1;
	flex-shrink: 0;
}

.ts-header-layout-minimal .ts-primary-navigation {
	order: 2;
	flex: none;
	justify-content: flex-start;
}

.ts-header-layout-minimal .ts-header-utilities {
	order: 3;
	margin-left: auto;
}

/* Minimal - Compact navigation */
.ts-header-layout-minimal .ts-nav-menu {
	gap: 0.25rem;
}

.ts-header-layout-minimal .ts-nav-menu > li > a {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

/* Mobile - All layouts stack the same */
@media (max-width: 1023px) {
	.ts-header-layout-centered .ts-header-inner,
	.ts-header-layout-minimal .ts-header-inner {
		flex-direction: row;
		justify-content: space-between;
		padding: 1rem 0;
	}

	.ts-header-layout-centered .ts-header-utilities,
	.ts-header-layout-minimal .ts-header-utilities {
		position: static;
		transform: none;
		margin-left: 0;
	}

	.ts-header-layout-centered .ts-site-branding {
		margin-bottom: 0;
		flex: 1 0 auto;
	}
}

/* ========================================
   PRIMARY NAVIGATION
   ======================================== */

.ts-primary-navigation {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ts-nav-menu {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ts-nav-menu > li {
	position: relative;
}

/* Override position for mega menu items - they need static positioning */
.ts-nav-menu > li.ts-has-mega-menu {
	position: static;
}

.ts-nav-menu > li > a {
	display: block;
	padding: 0.75rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
	letter-spacing: 0.02em;
}

.ts-nav-menu > li > a:hover,
.ts-nav-menu > li.current-menu-item > a,
.ts-nav-menu > li.current_page_item > a {
	color: var(--color-secondary);
}

/* Dropdown Menus */
.ts-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	z-index: 1000;
}

.ts-nav-menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ts-nav-menu .sub-menu li {
	margin: 0;
}

.ts-nav-menu .sub-menu a {
	display: block;
	padding: 0.75rem 1.25rem;
	font-size: 0.9rem;
	color: var(--color-primary);
	text-decoration: none;
	transition: all 0.2s ease;
}

.ts-nav-menu .sub-menu a:hover {
	background: var(--surface-hover);
	color: var(--color-secondary);
}

/* Desktop Navigation - Ensure visibility on large screens */
@media (min-width: 1024px) {
	.ts-primary-navigation {
		display: flex !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		height: auto !important;
		width: auto !important;
		padding: 0 !important;
		background: transparent !important;
		overflow: visible !important;
	}

	.ts-nav-menu {
		display: flex !important;
		flex-direction: row !important;
	}
}

/* Mobile Navigation */
@media (max-width: 1023px) {
	.ts-primary-navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: var(--color-white);
		opacity: 0;
		visibility: hidden;
		transform: translateX(-100%);
		transition: all 0.3s ease;
		z-index: 50;
		overflow-y: auto;
		padding: 5rem 2rem 2rem;
	}

	.ts-primary-navigation.active {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	.ts-nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.ts-nav-menu > li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.ts-nav-menu > li > a {
		padding: 1rem 0;
		font-size: 1.125rem;
	}

	.ts-nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
		box-shadow: none;
		padding-left: 1rem;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.ts-nav-menu li.menu-item-has-children.open > .sub-menu {
		max-height: 1000px;
	}
}

/* ========================================
   SVG ICONS & UTILITIES
   Base styles for SVG icons used throughout the theme
   ======================================== */

/* SVG Icon Base Styles */
.ts-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Icon sizes */
.ts-icon-sm {
	width: 16px;
	height: 16px;
}

.ts-icon-lg {
	width: 32px;
	height: 32px;
}

/* Icon colors inherit from parent */
button .ts-icon,
a .ts-icon {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

button:hover .ts-icon,
a:hover .ts-icon {
	opacity: 0.8;
}

/* ========================================
   MOBILE DRAWER SYSTEM
   Mobile-first, app-like navigation drawer
   ======================================== */

.ts-mobile-drawer {
	position: fixed;
	top: 0;
	right: -100%;
	width: 85%;
	max-width: 400px;
	height: 100vh;
	height: 100dvh; /* Dynamic viewport height */
	background: var(--color-white);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	z-index: 999999; /* Above WordPress admin bar (99999) */
	overflow: hidden;
	
	/* Performance optimizations */
	transform: translate3d(100%, 0, 0);
	will-change: transform;
	transition: transform var(--motion-duration-3) var(--motion-ease-standard);
	contain: layout style paint;
	
	/* Prevent text selection during swipe */
	user-select: none;
	-webkit-user-select: none;
}

/* Active state - drawer open */
.ts-mobile-drawer.ts-active {
	right: 0;
	transform: translate3d(0, 0, 0);
}

/* Overlay backdrop */
.ts-mobile-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--overlay-scrim);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--motion-duration-2) var(--motion-ease-standard), visibility var(--motion-duration-2) var(--motion-ease-standard);
	z-index: 999998; /* Just below drawer */
	cursor: pointer;
}

.ts-mobile-drawer.ts-active .ts-mobile-drawer-overlay {
	opacity: 1;
	visibility: visible;
}

/* Drawer content wrapper */
.ts-mobile-drawer-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--color-white);
	z-index: 999999; /* Match drawer z-index */
	
	/* Smooth scrolling for iOS */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Drawer header */
.ts-mobile-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-6) var(--spacing-5);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
	min-height: 72px; /* Safe area for mobile notches */
	
	/* Sticky for long menus */
	position: sticky;
	top: 0;
	background: var(--color-white);
	z-index: 10;
}

.ts-site-branding-mobile {
	flex: 1;
}

.ts-site-branding-mobile .ts-custom-logo {
	max-height: 40px;
	width: auto;
}

.ts-site-branding-mobile .ts-site-title {
	font-size: 1.25rem;
	margin: 0;
}

/* Close button */
.ts-mobile-drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* WCAG minimum touch target */
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-primary);
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 50%;
	
	/* Increase touch target */
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

.ts-mobile-drawer-close::before {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
}

.ts-mobile-drawer-close:hover,
.ts-mobile-drawer-close:focus {
	background: var(--surface-hover);
	color: var(--color-secondary);
	outline: none;
}

.ts-mobile-drawer-close:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

.ts-mobile-drawer-close:active {
	transform: scale(0.95);
}

/* Drawer body - scrollable menu area */
.ts-mobile-drawer-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--spacing-3) 0; /* Reduced from 1.5rem to save space */
	
	/* Custom scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--color-secondary) transparent;
}

.ts-mobile-drawer-body::-webkit-scrollbar {
	width: 6px;
}

.ts-mobile-drawer-body::-webkit-scrollbar-track {
	background: transparent;
}

.ts-mobile-drawer-body::-webkit-scrollbar-thumb {
	background: var(--color-secondary);
	border-radius: 3px;
}

/* Mobile menu inside drawer */
.ts-mobile-navigation {
	margin: 0;
	padding: 0;
}

.ts-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ts-mobile-menu > li {
	border-bottom: 1px solid var(--color-border);
}

.ts-mobile-menu > li:last-child {
	border-bottom: none;
}

.ts-mobile-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.5rem; /* Reduced from 1rem to save space */
	font-size: 1rem; /* Reduced from 1.0625rem */
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: all 0.2s ease;
	
	/* Minimum touch target */
	min-height: 44px; /* WCAG compliant but not excessive */
	
	/* Prevent tap highlight on mobile */
	-webkit-tap-highlight-color: transparent;
}

.ts-mobile-menu a:active {
	background: var(--surface-active);
}

.ts-mobile-menu li.current-menu-item > a,
.ts-mobile-menu li.current_page_item > a {
	color: var(--color-secondary);
	background: var(--surface-hover);
	border-left: 3px solid var(--color-secondary);
}

/* Submenu toggle button */
.ts-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-primary);
	cursor: pointer;
	transition: transform 0.3s ease;
	position: relative;
	margin-left: auto;
	-webkit-tap-highlight-color: transparent;
}

.ts-submenu-toggle[aria-expanded="true"] .ts-toggle-icon {
	transform: rotate(45deg);
}

.ts-toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	transition: transform 0.3s ease;
}

/* Submenu styles */
.ts-mobile-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--surface-subtle);
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--motion-duration-2) var(--motion-ease-standard);
}

.ts-mobile-menu .sub-menu[style*="block"] {
	max-height: 1000px; /* Large enough for most menus */
}

.ts-mobile-menu .sub-menu a {
	padding-left: 2.5rem;
	font-size: 0.9375rem;
	font-weight: 400;
}

.ts-mobile-menu .sub-menu .sub-menu a {
	padding-left: 3.5rem;
	font-size: 0.875rem;
}

/* Body state when drawer is open */
body.ts-drawer-open {
	overflow: hidden; /* Prevent background scroll */
	position: fixed; /* iOS Safari fix */
	width: 100%;
}

/* Cart drawer open state mirrors mobile drawer behavior */
body.ts-cart-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

/* Prevent text selection during animation */
body.ts-drawer-open .ts-mobile-drawer-content {
	user-select: none;
}

/* Restore selection after animation */
.ts-mobile-drawer.ts-active .ts-mobile-drawer-content {
	user-select: text;
}

/* ========================================
   SAFE AREAS FOR MOBILE NOTCHES
   ======================================== */

/* iPhone X+ notch support */
@supports (padding: max(0px)) {
	.ts-mobile-drawer-header {
		padding-top: max(1.5rem, env(safe-area-inset-top));
	}
	
	.ts-mobile-drawer-body {
		padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
	}
}

/* ========================================
   RESPONSIVE TOUCH OPTIMIZATIONS
   ======================================== */

/* Larger touch targets on small screens */
@media (max-width: 375px) {
	.ts-mobile-menu a {
		padding: 1.125rem 1.25rem;
		min-height: 52px;
	}
	
	.ts-mobile-drawer-header {
		padding: 1.25rem 1rem;
	}
}

/* Tablet landscape - wider drawer */
@media (min-width: 768px) and (max-width: 1023px) {
	.ts-mobile-drawer {
		max-width: 450px;
	}
}

/* Hide drawer system on desktop */
@media (min-width: 1024px) {
	.ts-mobile-drawer,
	.ts-mobile-drawer-overlay {
		display: none !important;
	}
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	.ts-mobile-drawer,
	.ts-mobile-drawer-overlay,
	.ts-submenu-toggle,
	.ts-mobile-menu .sub-menu {
		transition-duration: 0.01ms !important;
	}
}

/* ========================================
   MOBILE DRAWER - LEFT SIDE VARIANT
   ======================================== */

/* Left side drawer variant (controlled by customizer) */
body.ts-drawer-position-left .ts-mobile-drawer {
	left: -100%;
	right: auto;
	transform: translate3d(-100%, 0, 0);
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); /* Flip shadow */
}

body.ts-drawer-position-left .ts-mobile-drawer.ts-active {
	left: 0;
	transform: translate3d(0, 0, 0);
}

/* ========================================
   SEARCH MODAL
   Mobile-first search overlay
   ======================================== */

.ts-search-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 10vh;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--motion-duration-2) var(--motion-ease-standard), visibility var(--motion-duration-2) var(--motion-ease-standard);
	z-index: 999997; /* Below mobile drawer, above content */
}

.ts-search-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

/* Search overlay */
.ts-search-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--overlay-scrim-strong);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 1;
	cursor: pointer;
}

/* Search content */
.ts-search-modal-content {
	position: relative;
	width: 100%;
	max-width: 720px;
	padding: var(--spacing-8) var(--spacing-4);
	z-index: 2;
	transform: translateY(-20px);
	transition: transform var(--motion-duration-2) var(--motion-ease-standard);
}

.ts-search-modal[aria-hidden="false"] .ts-search-modal-content {
	transform: translateY(0);
}

/* Search close button */
.ts-search-close {
	position: absolute;
	top: var(--spacing-4);
	right: var(--spacing-4);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: var(--color-white);
	cursor: pointer;
	border-radius: 50%;
	transition: all var(--motion-duration-1) var(--motion-ease-standard);
	-webkit-tap-highlight-color: transparent;
}

.ts-search-close:hover,
.ts-search-close:focus {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

/* Search form */
.ts-search-form {
	width: 100%;
}

.ts-search-form-inner {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--color-white);
	border-radius: 50px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ts-search-field {
	flex: 1;
	padding: var(--spacing-5) var(--spacing-6);
	font-size: 1.125rem;
	border: none;
	background: transparent;
	color: var(--color-primary);
	outline: none;
}

.ts-search-field::placeholder {
	color: var(--color-slate-400);
	opacity: 0.7;
}

.ts-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2);
	padding: var(--spacing-5) var(--spacing-8);
	background: var(--color-secondary);
	color: var(--color-white);
	border: none;
	cursor: pointer;
	transition: all var(--motion-duration-1) var(--motion-ease-standard);
	font-weight: 600;
	font-size: 1rem;
}

.ts-search-submit:hover {
	background: var(--color-primary);
}

.ts-search-submit-text {
	display: none;
}

@media (min-width: 768px) {
	.ts-search-submit-text {
		display: inline;
	}
	
	.ts-search-field {
		font-size: 1.25rem;
		padding: var(--spacing-6) var(--spacing-8);
	}
	
	.ts-search-submit {
		padding: var(--spacing-6) var(--spacing-10);
	}
}

/* Hide search when disabled via customizer */
body.ts-search-disabled .ts-search-toggle,
body.ts-search-disabled .ts-search-modal {
	display: none !important;
}

/* ========================================
   HEADER UTILITIES
   E-commerce optimized utility icons
   ======================================== */

.ts-header-utilities {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* Hide utilities on mobile to prevent overflow - shown in mobile drawer instead */
@media (max-width: 1023px) {
	.ts-header-utilities {
		display: none;
	}
}

.ts-header-utilities button,
.ts-header-utilities a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* WCAG touch target */
	height: 44px;
	color: var(--color-primary);
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

.ts-header-utilities button:hover,
.ts-header-utilities a:hover {
	background: var(--surface-hover);
	color: var(--color-secondary);
	transform: scale(1.05);
}

.ts-header-utilities button:active,
.ts-header-utilities a:active {
	transform: scale(0.95);
}

/* Icon spacing in utilities */
.ts-header-utilities .ts-icon {
	width: 22px;
	height: 22px;
}

/* Utility Badges (Cart/Wishlist Count) - Enhanced */
.ts-cart-count,
.ts-wishlist-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	background: var(--color-accent, #A3583B);
	color: var(--color-white);
	border-radius: 10px;
	border: 2px solid var(--header-bg-color, #FFFFFF);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	animation: ts-badge-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes ts-badge-pop {
	0% { transform: scale(0); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* Cart count with pulse on update */
.ts-cart-count.ts-updated {
	animation: ts-badge-pulse 0.5s ease;
}

@keyframes ts-badge-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.3); }
}

/* Wishlist active state */
.ts-wishlist-link.ts-active .ts-icon,
.ts-wishlist-link.ts-has-items .ts-icon {
	fill: var(--color-accent);
	color: var(--color-accent);
}

/* Quick view for utilities on larger screens */
@media (min-width: 1024px) {
	.ts-header-utilities {
		gap: 0.75rem;
	}
	
	/* Add labels on hover for better UX */
	.ts-header-utilities button::after,
	.ts-header-utilities a::after {
		content: attr(aria-label);
		position: absolute;
		bottom: -32px;
		left: 50%;
		transform: translateX(-50%) translateY(10px);
		padding: 0.375rem 0.75rem;
		font-size: 0.75rem;
		white-space: nowrap;
		background: var(--color-primary);
		color: var(--color-white);
		border-radius: 4px;
		opacity: 0;
		pointer-events: none;
		transition: all 0.2s ease;
		z-index: 100;
	}
	
	.ts-header-utilities button:hover::after,
	.ts-header-utilities a:hover::after {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Utility Icon Size Variants */
.ts-utility-size-small .ts-icon {
	width: 18px;
	height: 18px;
}

.ts-utility-size-medium .ts-icon {
	width: 20px;
	height: 20px;
}

.ts-utility-size-large .ts-icon {
	width: 24px;
	height: 24px;
}

/* Adjust touch target size for different icon sizes */
.ts-utility-size-small button,
.ts-utility-size-small a {
	width: 40px;
	height: 40px;
}

.ts-utility-size-large button,
.ts-utility-size-large a {
	width: 48px;
	height: 48px;
}

/* Phone Contact Utility */
.ts-phone-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ts-phone-link .ts-phone-number {
	display: none;
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
}

/* Show phone number on larger screens when display style is 'both' */
@media (min-width: 1024px) {
	.ts-phone-link.ts-display-both .ts-phone-number {
		display: block;
	}
	
	.ts-phone-link.ts-display-both {
		width: auto;
		padding: 0 0.75rem;
		border-radius: 22px;
	}
}

/* Compare Utility */
.ts-compare-link {
	position: relative;
}

.ts-compare-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	background: var(--color-secondary, #C3A46A);
	color: var(--color-white);
	border-radius: 10px;
	border: 2px solid var(--header-bg-color, #FFFFFF);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	animation: ts-badge-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Compare active state when items in list */
.ts-compare-link.ts-has-items .ts-icon {
	fill: var(--color-secondary);
	color: var(--color-secondary);
}

/* Utility animations for new items */
.ts-header-utilities .ts-updated {
	animation: ts-utility-shake 0.4s ease;
}

@keyframes ts-utility-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* ========================================
   BUTTONS
   ======================================== */

.ts-btn,
.button,
button.button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2);
	padding: 0.875rem 1.75rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: var(--ts-btn-text, var(--color-white));
	background: var(--ts-btn-bg, var(--color-primary));
	border: var(--ts-btn-border-width, 2px) solid var(--ts-btn-border, var(--color-primary));
	border-radius: var(--ts-btn-radius, var(--radius-md, 8px));
	cursor: pointer;
	transition: all 0.2s ease;
	letter-spacing: 0.02em;
	box-shadow: var(--ts-btn-shadow, var(--shadow-sm));
}


.ts-btn:hover,
.button:hover,
button.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background: var(--ts-btn-bg-hover, var(--color-secondary));
	border-color: var(--ts-btn-border-hover, var(--color-secondary));
	color: var(--ts-btn-text-hover, var(--color-white));
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(var(--color-text-rgb), 0.05);
}

.ts-btn:focus-visible,
.button:focus-visible,
button.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
	background: var(--ts-btn-bg-focus, var(--ts-btn-bg-hover, var(--color-secondary)));
	border-color: var(--ts-btn-border-focus, var(--ts-btn-border-hover, var(--color-secondary)));
	color: var(--ts-btn-text-focus, var(--ts-btn-text-hover, var(--color-white)));
	box-shadow: 0 0 0 2px rgba(0,0,0,0), 0 0 0 3px var(--ts-focus-ring, rgba(195,164,106,0.35));
}

.ts-btn:active,
.button:active,
button.button:active,
input[type="submit"]:active,
input[type="button"]:active {
	background: var(--ts-btn-bg-active, var(--ts-btn-bg));
	border-color: var(--ts-btn-border-active, var(--ts-btn-border));
	color: var(--ts-btn-text-active, var(--ts-btn-text));
	transform: translateY(0);
}

/* Button Variants */
.ts-btn-secondary {
	background: transparent;
	color: var(--color-primary);
}

.ts-btn-secondary:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* Explicit primary alias for clarity */
.ts-btn-primary {
	background: var(--ts-btn-bg, var(--color-primary));
	border-color: var(--ts-btn-border, var(--color-primary));
}

.ts-btn-outline {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-border);
}

.ts-btn-outline:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.ts-btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.ts-btn-lg {
	padding: 1.125rem 2.25rem;
	font-size: 1.125rem;
}

.ts-btn-block {
	display: flex;
	width: 100%;
}

.ts-btn-icon {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
}

/* Disabled State */
.ts-btn:disabled,
.ts-btn.disabled,
.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

/* ========================================
   FORMS
   ======================================== */

.ts-form-group {
	margin-bottom: var(--spacing-6);
}

.ts-form-label {
	display: block;
	margin-bottom: var(--spacing-2);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
}

.ts-form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
	width: 100%;
	padding: 0.875rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-primary);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 8px);
	transition: all 0.2s ease;
}

.ts-form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 3px var(--color-border-weak);
}

textarea {
	min-height: 120px;
	resize: vertical;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
	width: auto;
	margin-right: 0.5rem;
}

/* ========================================
   FOOTER
   ======================================== */

.ts-site-footer {
	background: var(--color-primary);
	color: var(--color-white);
	padding: var(--spacing-8) 0 var(--spacing-6);
	margin-top: auto;
}

.ts-footer-widgets {
	display: grid;
	gap: 2rem;
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	.ts-footer-widgets {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ts-footer-widgets {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ts-footer-widget h3 {
	font-size: 1.125rem;
	margin-bottom: var(--spacing-4);
	color: var(--color-secondary);
}

.ts-footer-widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ts-footer-widget li {
	margin-bottom: 0.5rem;
}

.ts-footer-widget a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ts-footer-widget a:hover {
	color: var(--color-secondary);
}

.ts-footer-bottom {
	padding-top: var(--spacing-8);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Spacing */
.ts-mt-0 { margin-top: 0 !important; }
.ts-mt-1 { margin-top: var(--spacing-1) !important; }
.ts-mt-2 { margin-top: var(--spacing-2) !important; }
.ts-mt-3 { margin-top: var(--spacing-3) !important; }
.ts-mt-4 { margin-top: var(--spacing-4) !important; }
.ts-mt-5 { margin-top: var(--spacing-5) !important; }

.ts-mb-0 { margin-bottom: 0 !important; }
.ts-mb-1 { margin-bottom: var(--spacing-1) !important; }
.ts-mb-2 { margin-bottom: var(--spacing-2) !important; }
.ts-mb-3 { margin-bottom: var(--spacing-3) !important; }
.ts-mb-4 { margin-bottom: var(--spacing-4) !important; }
.ts-mb-5 { margin-bottom: var(--spacing-5) !important; }

.ts-pt-0 { padding-top: 0 !important; }
.ts-pt-1 { padding-top: var(--spacing-1) !important; }
.ts-pt-2 { padding-top: var(--spacing-2) !important; }
.ts-pt-3 { padding-top: var(--spacing-3) !important; }
.ts-pt-4 { padding-top: var(--spacing-4) !important; }
.ts-pt-5 { padding-top: var(--spacing-5) !important; }

.ts-pb-0 { padding-bottom: 0 !important; }
.ts-pb-1 { padding-bottom: var(--spacing-1) !important; }
.ts-pb-2 { padding-bottom: var(--spacing-2) !important; }
.ts-pb-3 { padding-bottom: var(--spacing-3) !important; }
.ts-pb-4 { padding-bottom: var(--spacing-4) !important; }
.ts-pb-5 { padding-bottom: var(--spacing-5) !important; }

/* Text Alignment */
.ts-text-left { text-align: left !important; }
.ts-text-center { text-align: center !important; }
.ts-text-right { text-align: right !important; }

/* Text Colors */
.ts-text-primary { color: var(--color-primary) !important; }
.ts-text-secondary { color: var(--color-secondary) !important; }
.ts-text-muted { color: var(--color-slate-400) !important; }
.ts-text-white { color: var(--color-white) !important; }

/* Background Colors */
.ts-bg-primary { background-color: var(--color-primary) !important; }
.ts-bg-secondary { background-color: var(--color-secondary) !important; }
.ts-bg-light { background-color: var(--color-ivory) !important; }
.ts-bg-white { background-color: var(--color-white) !important; }

/* Display */
.ts-hidden { display: none !important; }
.ts-block { display: block !important; }
.ts-inline-block { display: inline-block !important; }

/* Responsive Display */
@media (max-width: 767px) {
	.ts-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.ts-hidden-tablet { display: none !important; }
}

@media (min-width: 1024px) {
	.ts-hidden-desktop { display: none !important; }
}