/* Custom theme styles (Tailwind-friendly) */

:root {
	/* Header Height Variables (устанавливаются динамически через header-height.js) */
	--header-height: 64px; /* Значение по умолчанию, будет обновлено JS */
	--vh-without-header: calc(100vh - var(--header-height)); /* Высота viewport без хедера */
	
	/* Theme Colors */
	--color-primary: #2563eb;
	--color-surface: #ffffff;
	--color-text: #0f172a;
	--color-muted: #475569;
	--shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.07);
	--container-max-width: 1280px;
}

/* Universal Container Class */
.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem; /* 16px */
	padding-right: 1rem; /* 16px */
}

/* Responsive container padding */
@media (min-width: 640px) {
	.container {
		padding-left: 1.5rem; /* 24px */
		padding-right: 1.5rem; /* 24px */
	}
}

@media (min-width: 768px) {
	.container {
		padding-left: 2rem; /* 32px */
		padding-right: 2rem; /* 32px */
	}
}

@media (min-width: 1024px) {
	.container {
		padding-left: 2.5rem; /* 40px */
		padding-right: 2.5rem; /* 40px */
	}
}

@media (min-width: 1280px) {
	.container {
		padding-left: 3rem; /* 48px */
		padding-right: 3rem; /* 48px */
	}
}

/* Utility Classes - Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.75rem;
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
	font-size: 1rem;
	line-height: 1.5;
}

.btn-primary {
	background-color: var(--color-primary);
	color: #ffffff;
}

.btn-primary:hover {
	background-color: #1d4ed8;
	transform: translateY(-1px);
	box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.btn-secondary {
	background-color: #ffffff;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
	background-color: var(--color-primary);
	color: #ffffff;
	transform: translateY(-1px);
}

.btn-outline {
	background-color: transparent;
	color: var(--color-text);
	border: 1px solid #e5e7eb;
}

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

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

.btn-lg {
	padding: 1rem 2rem;
	font-size: 1.125rem;
}

/* Utility Classes - Cards */
.card {
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.card:hover {
	box-shadow: var(--shadow-soft);
	transform: translateY(-2px);
}

.card-body {
	padding: 1.5rem;
}

.card-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #e5e7eb;
	font-weight: 600;
	font-size: 1.125rem;
}

.card-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid #e5e7eb;
	background-color: #f8fafc;
	border-radius: 0 0 1rem 1rem;
}

/* Utility Classes - Sections */
.section {
	padding: 4rem 0;
}

.section-sm {
	padding: 2rem 0;
}

.section-lg {
	padding: 6rem 0;
}

.section-xl {
	padding: 8rem 0;
}

@media (max-width: 768px) {
	.section {
		padding: 2.5rem 0;
	}
	.section-lg {
		padding: 4rem 0;
	}
	.section-xl {
		padding: 5rem 0;
	}
}

/* Utility Classes - Grid Layouts */
.grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}

/* Utility Classes - Badges */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0.5rem;
	background-color: #e0f2fe;
	color: #0369a1;
}

.badge-success {
	background-color: #dcfce7;
	color: #15803d;
}

.badge-warning {
	background-color: #fef3c7;
	color: #b45309;
}

.badge-danger {
	background-color: #fee2e2;
	color: #b91c1c;
}

/* Utility Classes - Typography */
.heading-1 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.heading-2 {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.heading-3 {
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
}

.text-lead {
	font-size: 1.25rem;
	line-height: 1.75;
	color: var(--color-muted);
}

@media (max-width: 768px) {
	.heading-1 {
		font-size: 2rem;
	}
	.heading-2 {
		font-size: 1.75rem;
	}
	.heading-3 {
		font-size: 1.5rem;
	}
	.text-lead {
		font-size: 1.125rem;
	}
}

body {
	background-color: #f8fafc;
	color: var(--color-text);
}

[x-cloak] {
	display: none !important;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: #111827;
	color: #ffffff;
	font-weight: 600;
	z-index: 100;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	overflow: visible;
}

/* Navigation */
#primary-menu,
#mobile-primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#primary-menu {
	display: flex;
	align-items: center;
	gap: 2rem;
}

#primary-menu > li {
	position: relative;
}

#primary-menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0;
	color: var(--color-muted);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

#primary-menu a:hover,
#primary-menu a:focus {
	color: var(--color-primary);
}

#primary-menu li.current-menu-item > a,
#primary-menu li.current_page_item > a {
	color: var(--color-primary);
}

#primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 14rem;
	margin-top: 0.35rem;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	box-shadow: var(--shadow-soft);
	border-radius: 0.75rem;
	padding: 0.5rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
	z-index: 50;
}

#primary-menu li:hover > .sub-menu,
#primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#primary-menu .sub-menu li {
	position: relative;
}

#primary-menu .sub-menu li a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--color-text);
	font-weight: 500;
	white-space: nowrap;
}

#primary-menu .sub-menu li a:hover,
#primary-menu .sub-menu li a:focus {
	background-color: #f8fafc;
	color: var(--color-primary);
}

#primary-menu .sub-menu .sub-menu {
	right: 100%;
	top: 0;
	margin-right: 0.25rem;
	margin-top: 0;
	left: auto;
}

/* Mobile navigation */
#mobile-primary-menu li {
	margin: 0;
}

#mobile-primary-menu li a {
	display: block;
	padding: 0.75rem 1rem;
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.75rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#mobile-primary-menu li a:hover,
#mobile-primary-menu li a:focus {
	background-color: #f3f4f6;
	color: var(--color-primary);
}

#mobile-primary-menu li.current-menu-item > a,
#mobile-primary-menu li.current_page_item > a {
	background-color: #eff6ff;
	color: var(--color-primary);
}

#mobile-primary-menu .sub-menu {
	list-style: none;
	margin: 0.25rem 0 0.5rem;
	padding-left: 1rem;
	border-left: 2px solid #e5e7eb;
}

#mobile-primary-menu .sub-menu li a {
	padding: 0.5rem 1rem;
	font-size: 0.95rem;
}

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

/* Typography for post content */
.entry-content {
	color: var(--color-text);
	line-height: 1.75;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: #0f172a;
	font-weight: 700;
	line-height: 1.2;
	margin: 1.5rem 0 0.75rem;
}

.entry-content p {
	margin: 1rem 0;
	color: #0f172a;
}

.entry-content a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.entry-content a:hover {
	text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
	margin: 1rem 0 1rem 1.25rem;
	padding: 0;
	color: #0f172a;
}

.entry-content li + li {
	margin-top: 0.35rem;
}

.entry-content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--color-primary);
	background: #eff6ff;
	border-radius: 0.75rem;
	color: #0f172a;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
	padding: 0.75rem;
	border: 1px solid #e5e7eb;
}

.entry-content th {
	background: #f8fafc;
	text-align: left;
}

.entry-content code {
	background: #0f172a;
	color: #e0f2fe;
	border-radius: 0.4rem;
	padding: 0.15rem 0.4rem;
	font-size: 0.9rem;
}

.entry-content pre {
	background: #0f172a;
	color: #e2e8f0;
	border-radius: 1rem;
	padding: 1rem;
	overflow: auto;
}

.entry-content img {
	border-radius: 1rem;
}

/* Forms */
input[type="text"]:not(.newsletter-input),
input[type="email"]:not(.newsletter-input),
input[type="url"]:not(.newsletter-input),
input[type="password"]:not(.newsletter-input),
input[type="search"]:not(.newsletter-input),
input[type="tel"]:not(.newsletter-input),
textarea:not(.newsletter-input),
select:not(.newsletter-input) {
	width: 100%;
	border: 1px solid #d1d5db;
	border-radius: 0.75rem;
	padding: 0.65rem 0.9rem;
	background-color: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:not(.newsletter-input):focus,
textarea:not(.newsletter-input):focus,
select:not(.newsletter-input):focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
	outline: none;
}


button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	background-color: var(--color-primary);
	color: #ffffff;
	padding: 0.65rem 1rem;
	border: none;
	border-radius: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: #1d4ed8;
	box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
	transform: translateY(-1px);
}

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Widgets */
.widget {
	padding: 1.25rem;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);
}

.widget-title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: #0f172a;
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.4rem;
}

.widget a {
	color: #0f172a;
	text-decoration: none;
	font-weight: 600;
}

.widget a:hover {
	color: var(--color-primary);
}

/* Pagination / navigation */
.navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.navigation .nav-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

.navigation .nav-previous,
.navigation .nav-next {
	flex: 1;
}

.navigation a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.navigation a:hover {
	text-decoration: underline;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	border: 1px solid #e5e7eb;
	color: #0f172a;
	font-weight: 600;
}

.navigation.pagination .page-numbers.current {
	background: #1d4ed8;
	border-color: #1d4ed8;
	color: #ffffff;
}

.cat-links,
.tags-links,
.comments-link,
.edit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.cat-links a,
.tags-links a,
.comments-link a,
.edit-link a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.cat-links a:hover,
.tags-links a:hover,
.comments-link a:hover,
.edit-link a:hover {
	text-decoration: underline;
}

/* Comments */
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.comment-list .comment {
	padding: 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	background: #ffffff;
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);
}

.comment-metadata {
	font-size: 0.9rem;
	color: #64748b;
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.5rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.comment-reply-link:hover {
	text-decoration: underline;
}

/* ================================================
   ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ CSS ПЕРЕМЕННЫХ --header-height
   ================================================ */

/* Hero секция на всю высоту экрана минус хедер */
.hero-fullscreen {
	height: var(--vh-without-header);
	min-height: var(--vh-without-header);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hero секция на 80% высоты экрана минус хедер */
.hero-large {
	height: calc(var(--vh-without-header) * 0.8);
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hero секция на 60% высоты экрана минус хедер */
.hero-medium {
	height: calc(var(--vh-without-header) * 0.6);
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Sticky элемент с учетом высоты хедера */
.sticky-below-header {
	position: sticky;
	top: var(--header-height);
	z-index: 40;
}

/* Отступ сверху равный высоте хедера */
.margin-top-header {
	margin-top: var(--header-height);
}

/* Padding сверху равный высоте хедера */
.padding-top-header {
	padding-top: var(--header-height);
}

/* Контент с учетом sticky хедера */
.content-with-fixed-header {
	padding-top: calc(var(--header-height) + 2rem);
}

/* Полноэкранный overlay с учетом хедера */
.fullscreen-overlay {
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 45;
}

/* Модальное окно с центрированием с учетом хедера */
.modal-centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + var(--header-height) / 2));
	z-index: 50;
}

/* Пример использования в медиа-запросах */
@media (max-width: 768px) {
	.hero-fullscreen {
		min-height: calc(var(--vh-without-header) - 2rem);
	}
}

/* ================================================
   HEADER ACTIONS: Account & Basket
   ================================================ */

.header-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
	padding-left: 1.5rem;
	border-left: 1px solid #e5e7eb;
}

.header-action-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	text-decoration: none;
	color: var(--color-text);
	transition: color 0.15s ease, transform 0.15s ease;
	position: relative;
}

.header-action-link:hover {
	color: var(--color-primary);
	transform: translateY(-1px);
}

.header-action-icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 1.5;
}

.header-action-text {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Cart Count Badge */
.header-cart-count {
	position: absolute;
	top: -0.375rem;
	right: -0.5rem;
	min-width: 1.125rem;
	height: 1.125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.25rem;
	font-size: 0.625rem;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--color-primary);
	border-radius: 9999px;
	line-height: 1;
}

/* Mobile Header Actions */
@media (max-width: 767px) {
	.header-actions {
		display: none;
	}
}

/* Mobile Header Actions in Mobile Menu */
.mobile-header-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}

.mobile-action-link {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background-color: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	text-decoration: none;
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.15s ease;
	position: relative;
}

.mobile-action-link:hover {
	background-color: #eff6ff;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.mobile-action-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.mobile-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--color-primary);
	border-radius: 9999px;
	margin-left: 0.25rem;
}

/* ================================================
   MEGA MENU STYLES
   ================================================ */

/* Mega Menu Container */
.menu-item-has-megamenu {
	position: relative;
}

.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 400px;
	padding-top: 0.5rem;
	z-index: 100;
}

.mega-menu-inner {
	display: flex;
	gap: 3rem;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.5rem 2rem;
	box-shadow: var(--shadow-soft);
}

.mega-menu-column {
	min-width: 150px;
}

.mega-menu-heading {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 0.75rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e5e7eb;
}

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

.mega-menu-list li {
	margin: 0;
}

.mega-menu-list a {
	display: block;
	padding: 0.35rem 0;
	color: var(--color-text);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
}

.mega-menu-list a:hover {
	color: var(--color-primary);
}

/* Muted style for speciality items */
.mega-menu-list--muted a {
	color: var(--color-muted);
}

.mega-menu-list--muted a:hover {
	color: var(--color-primary);
}

/* Mobile Menu - Parent with dropdown toggle */
.mobile-menu-parent {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-menu-parent a {
	flex: 1;
}

.mobile-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0.5rem;
	color: var(--color-muted);
	cursor: pointer;
	transition: all 0.15s ease;
}

.mobile-submenu-toggle:hover {
	background-color: #f3f4f6;
	color: var(--color-primary);
}

/* Mobile menu divider (section heading) */
.mobile-menu-divider {
	padding: 0.75rem 1rem 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-top: 1px solid #e5e7eb;
	margin-top: 0.5rem;
}

/* Rotate icon animation */
.rotate-180 {
	transform: rotate(180deg);
}

/* ================================================
   HERO SECTION STYLES
   ================================================ */

.hero-section {
	position: relative;
	/* Elegant gradient background - Italian inspired */
	background: linear-gradient(135deg, #1e3a5f 0%, #2c4a6e 25%, #3d5a7e 50%, #2c4a6e 75%, #1e3a5f 100%);
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Subtle pattern overlay */
.hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: 
		radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
	pointer-events: none;
}

.hero-container {
	position: relative;
	width: 100%;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media (min-width: 640px) {
	.hero-container {
		padding: 0 1.5rem;
	}
}

@media (min-width: 1024px) {
	.hero-container {
		padding: 0 2.5rem;
	}
}

/* Elliptical shadow effect behind text */
.hero-shadow-ellipse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 120px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 65%);
	pointer-events: none;
	z-index: 1;
	filter: blur(8px);
}

.hero-title {
	position: relative;
	z-index: 2;
	font-family: var(--font-primary);
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	font-weight: 300;
	font-style: italic;
	color: #ffffff;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.4;
}

/* Responsive adjustments */
@media (min-width: 768px) {
	.hero-section {
		min-height: 380px;
	}
	
	.hero-shadow-ellipse {
		width: 700px;
		height: 140px;
	}
}

@media (max-width: 640px) {
	.hero-section {
		min-height: 240px;
	}
	
	.hero-shadow-ellipse {
		width: 320px;
		height: 80px;
	}
	
	.hero-title {
		letter-spacing: 0.1em;
	}
}

/* ================================================
   PROMO BANNERS SECTION
   ================================================ */

.promo-banners-section {
	padding: 2rem 0;
	background-color: var(--color-surface);
}

.promo-banners-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.promo-banner-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 0.5rem;
	text-decoration: none;
	aspect-ratio: 4 / 3;
}

.promo-banner-image {
	width: 100%;
	height: 100%;
}

.promo-banner-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

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

/* Overlay with gradient */
.promo-banner-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem 1rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
	display: flex;
	align-items: flex-end;
}

.promo-banner-title {
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
	.promo-banners-grid {
		gap: 1rem;
	}
}

@media (max-width: 768px) {
	.promo-banners-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.promo-banner-card {
		aspect-ratio: 16 / 9;
	}
	
	.promo-banner-title {
		font-size: 1rem;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.promo-banners-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.promo-banner-title {
		font-size: 0.8125rem;
	}
}

/* ================================================
   PICKS OF THE MONTH SECTION
   ================================================ */

.picks-section {
	padding: 3rem 0;
	background-color: var(--color-surface);
}

.picks-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e5e7eb;
}

.picks-heading {
	font-family: var(--font-primary);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--color-text);
	margin: 0;
}

.picks-view-all {
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.picks-view-all:hover {
	color: var(--color-primary);
}

.picks-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
}

.picks-card {
	display: block;
	text-decoration: none;
}

.picks-card-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 1rem;
	background-color: #f9fafb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.picks-card-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

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

.picks-card-content {
	text-align: left;
}

.picks-card-name {
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--color-muted);
	margin: 0 0 0.5rem 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.picks-card-price {
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-primary);
}

/* Responsive */
@media (max-width: 1024px) {
	.picks-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

@media (max-width: 768px) {
	.picks-header {
		flex-direction: row;
		gap: 1rem;
	}
	
	.picks-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.picks-section {
		padding: 2rem 0;
	}
	
	.picks-heading {
		font-size: 1.125rem;
	}
	
	.picks-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
	
	.picks-card-name {
		font-size: 0.8125rem;
	}
	
	.picks-card-price {
		font-size: 0.875rem;
	}
}

/* ================================================
   SHOP CATEGORIES SECTION
   ================================================ */

.shop-categories-section {
	padding: 2rem 0 3rem;
	background-color: var(--color-surface);
}

.shop-categories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.shop-category-card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 0.5rem;
	overflow: hidden;
	text-decoration: none;
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Overlay with gradient for text readability */
.shop-category-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
	transition: background 0.3s ease;
}

.shop-category-card:hover .shop-category-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 60%);
}

.shop-category-title {
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.3;
}

/* Responsive */
@media (max-width: 1024px) {
	.shop-categories-grid {
		gap: 1rem;
	}
	
	.shop-category-title {
		font-size: 0.9375rem;
	}
}

@media (max-width: 768px) {
	.shop-categories-section {
		padding: 2rem 0;
	}
	
	.shop-categories-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.shop-category-card {
		aspect-ratio: 16 / 9;
	}
	
	.shop-category-title {
		font-size: 1.125rem;
	}
}

/* ================================================
   FAVOURITES SECTION
   ================================================ */

.favourites-section {
	padding: 3rem 0 4rem;
	background-color: var(--color-surface);
}

.favourites-heading {
	font-family: var(--font-primary);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 2.5rem 0;
	text-align: left;
}

.favourites-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2rem;
}

.favourites-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	transition: transform 0.3s ease;
}

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

.favourites-card-icon {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s ease;
}

.favourites-card:hover .favourites-card-icon {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.favourites-card-icon img {
	max-width: 70%;
	max-height: 70%;
	object-fit: contain;
}

.favourites-card-title {
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--color-text);
	text-align: center;
	line-height: 1.3;
}

/* Responsive */
@media (max-width: 1024px) {
	.favourites-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 768px) {
	.favourites-section {
		padding: 2.5rem 0 3rem;
	}
	
	.favourites-heading {
		font-size: 1.125rem;
		margin-bottom: 2rem;
	}
	
	.favourites-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}
	
	.favourites-card-title {
		font-size: 0.8125rem;
	}
}

@media (max-width: 480px) {
	.favourites-section {
		padding: 2rem 0;
	}
	
	.favourites-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

/* ================================================
   TESTIMONIALS SECTION
   ================================================ */

.testimonials-section {
	padding: 3.5rem 0;
	background-color: var(--color-surface);
}

.testimonials-heading {
	font-family: var(--font-primary);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 3rem 0;
	text-align: center;
}

.testimonials-swiper {
	/* max-width: 1200px; */
	margin: 0 auto;
	padding-bottom: 3rem !important;
	padding-top: 0.5rem !important;
	padding-inline: 1rem !important;
}

.testimonial-card {
	background-color: #fff;
	padding: 2.5rem 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	text-align: center;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

.testimonial-stars {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
}

.testimonial-stars .star {
	font-size: 1.125rem;
	color: #d1d5db;
}

.testimonial-stars .star.filled {
	color: #000;
}

.testimonial-text {
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	font-weight: 300;
	color: var(--color-text);
	line-height: 1.6;
	margin: 0;
}

.testimonial-author {
	font-family: var(--font-primary);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

/* Swiper Pagination Customization */
.testimonials-pagination {
	bottom: 0 !important;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.testimonials-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background-color: #d1d5db;
	opacity: 1;
	transition: all 0.3s ease;
}

.testimonials-pagination .swiper-pagination-bullet-active {
	background-color: var(--color-text);
	width: 24px;
	border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
	.testimonials-section {
		padding: 2.5rem 0;
	}
	
	.testimonials-heading {
		font-size: 1.125rem;
		margin-bottom: 2.5rem;
	}
	
	.testimonial-card {
		padding: 2rem 1.5rem;
		min-height: 240px;
		gap: 1.25rem;
	}
	
	.testimonial-text {
		font-size: 0.875rem;
	}
}

@media (max-width: 480px) {
	.testimonials-section {
		padding: 2rem 0;
	}
	
	.testimonials-swiper {
		padding-bottom: 2.5rem;
	}
	
	.testimonial-card {
		padding: 1.75rem 1.25rem;
		min-height: 220px;
	}
	
	.testimonial-text {
		font-size: 0.8125rem;
	}
}

/* ================================================
   FEATURE CARDS SECTION
   ================================================ */

.feature-cards-section {
	padding: 3rem 0;
	background-color: var(--color-surface);
}

.feature-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.feature-card {
	background-color: #fff;
	border: 15px solid;
	border-radius: 0.5rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.feature-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.feature-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.25rem;
}

.feature-card-content {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex-grow: 1;
}

.feature-card-title {
	font-family: var(--font-primary);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.3;
	margin: 0;
}

.feature-card-description {
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 300;
	color: var(--color-text);
	line-height: 1.6;
	margin: 0;
	flex-grow: 1;
}

.feature-card-button {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	text-align: center;
	border-radius: 0.25rem;
	transition: opacity 0.3s ease, transform 0.2s ease;
	margin-top: auto;
}

.feature-card-button:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
	.feature-cards-section {
		padding: 2.5rem 0;
	}
	
	.feature-cards-grid {
		gap: 1.25rem;
	}
	
	.feature-card {
		border-width: 12px;
	}
	
	.feature-card-content {
		padding: 1.25rem;
	}
}

@media (max-width: 768px) {
	.feature-cards-section {
		padding: 2rem 0;
	}
	
	.feature-cards-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.feature-card {
		border-width: 10px;
	}
	
	.feature-card-title {
		font-size: 1.0625rem;
	}
	
	.feature-card-description {
		font-size: 0.8125rem;
	}
}

/* ================================================
   BRANDS SECTION
   ================================================ */

.brands-section {
	padding: 3.5rem 0;
	background-color: var(--color-surface);
}

.brands-heading {
	font-family: var(--font-primary);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 3rem 0;
	text-align: center;
}

.brands-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 3rem 2.5rem;
	align-items: center;
	justify-items: center;
}

.brand-card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 160px;
	transition: all 0.3s ease;
}

.brand-card img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* filter: grayscale(100%) opacity(0.6); */
	transition: all 0.3s ease;
}

.brand-card:hover img {
	filter: grayscale(0%) opacity(1);
	transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1024px) {
	.brands-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2.5rem 2rem;
	}
	
	.brand-card {
		height: 70px;
	}
}

@media (max-width: 768px) {
	.brands-section {
		padding: 2.5rem 0;
	}
	
	.brands-heading {
		font-size: 1.125rem;
		margin-bottom: 2.5rem;
	}
	
	.brands-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem 1.5rem;
	}
	
	.brand-card {
		height: 60px;
	}
}

@media (max-width: 480px) {
	.brands-section {
		padding: 2rem 0;
	}
	
	.brands-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 1rem;
	}
	
	.brand-card {
		height: 50px;
	}
}

/* ================================================
   FEATURE CARDS SECTION
   ================================================ */

.feature-cards-section {
	padding: 4rem 0 5rem;
	background: #ffffff;
}

.feature-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	max-width: 100%;
}

.feature-card {
	--card-color: #1e40af; /* Default color, can be overridden inline */
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 12px solid var(--card-color);
	border-radius: 0;
	overflow: hidden;
	transition: all 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.feature-card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.feature-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

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

.feature-card-content {
	padding: 2rem 1.75rem 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
	background: #ffffff;
}

.feature-card-title {
	font-size: 1.375rem;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
	margin: 0;
	text-align: center;
}

.feature-card-description {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #475569;
	margin: 0;
	text-align: center;
	flex: 1;
}

.feature-card-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.75rem;
	background: var(--card-color);
	color: #ffffff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 0;
	transition: all 0.2s ease;
	margin-top: 0.5rem;
	text-align: center;
}

.feature-card-button:hover {
	background: color-mix(in srgb, var(--card-color) 85%, black);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 1024px) {
	.feature-cards-section {
		padding: 3.5rem 0 4rem;
	}
	
	.feature-cards-grid {
		gap: 1.75rem;
	}
	
	.feature-card-content {
		padding: 1.75rem 1.5rem 2rem;
	}
	
	.feature-card-title {
		font-size: 1.25rem;
	}
	
	.feature-card-description {
		font-size: 0.9rem;
	}
}

@media (max-width: 768px) {
	.feature-cards-section {
		padding: 3rem 0;
	}
	
	.feature-cards-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	
	.feature-card {
		border-width: 10px;
	}
	
	.feature-card-content {
		padding: 1.5rem 1.25rem 1.75rem;
	}
	
	.feature-card-title {
		font-size: 1.375rem;
	}
	
	.feature-card-description {
		font-size: 0.9375rem;
	}
}

@media (max-width: 480px) {
	.feature-cards-section {
		padding: 2.5rem 0;
	}
	
	.feature-cards-grid {
		gap: 2rem;
	}
	
	.feature-card {
		border-width: 8px;
	}
	
	.feature-card-content {
		padding: 1.25rem 1rem 1.5rem;
	}
	
	.feature-card-title {
		font-size: 1.25rem;
	}
	
	.feature-card-description {
		font-size: 0.875rem;
		line-height: 1.6;
	}
	
	.feature-card-button {
		padding: 0.65rem 1.5rem;
		font-size: 0.875rem;
	}
}

/* ================================================
   ALTERNATIVE FEATURE CARDS LAYOUT (Shopify-style)
   ================================================ */

/* Main Grid Container */
.new-grid {
	display: grid;
	gap: 2rem;
	width: 100%;
	max-width: 100%;
}

.new-grid--center {
	margin: 0 auto;
}

.new-grid[data-view="3-1"] {
	grid-template-columns: repeat(3, 1fr);
}

/* Grid Items */
.grid-item {
	position: relative;
}

.medium-up--one-third {
	width: 100%;
}

/* Footer Promotion Cards */
.footer-promotion {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2rem 1.75rem 2.25rem;
	background: #ffffff;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 12px solid;
}

/* Color Schemes */
.footer-promotion.color-scheme-1 {
	border-color: #1e40af;
	--scheme-color: #1e40af;
}

.footer-promotion.color-scheme-2 {
	border-color: #d4b896;
	--scheme-color: #d4b896;
}

.footer-promotion.color-scheme-3 {
	border-color: #4d7c3f;
	--scheme-color: #4d7c3f;
}

.footer-promotion:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Background Texture */
.scheme-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.08;
	z-index: 0;
	pointer-events: none;
}

.scheme-texture--paper\.jpg {
	mix-blend-mode: multiply;
}

/* Image Container */
.footer__grid-image {
	position: relative;
	display: block;
	margin-bottom: 1.5rem;
	text-decoration: none;
	z-index: 1;
}

.image-wrap {
	position: relative;
	overflow: hidden;
	background: #f8fafc;
}

.image-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.footer-promotion:hover .image-wrap img {
	transform: scale(1.05);
}

/* SVG Mask Styles */
.svg-mask {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.svg-mask--square {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Typography */
.footer-promotion .h3 {
	font-size: 1.375rem;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
	margin: 0 0 1rem 0;
}

.rte--block {
	position: relative;
	z-index: 1;
	text-align: center;
}

.rte-setting {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #475569;
	margin: 0 0 1.5rem 0;
}

.rte-setting p {
	margin: 0;
}

.text-spacing p + p {
	margin-top: 0.75rem;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.75rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 0;
	transition: all 0.2s ease;
	text-align: center;
	position: relative;
	z-index: 1;
	cursor: pointer;
	border: none;
}

.btn--secondary {
	background: transparent;
	color: #0f172a;
	border: 2px solid var(--scheme-color, #1e40af);
}

.btn--secondary:hover {
	background: var(--scheme-color, #1e40af);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn--small {
	padding: 0.65rem 1.5rem;
	font-size: 0.875rem;
}

/* Responsive - Alternative Layout */
@media (max-width: 1024px) {
	.new-grid {
		gap: 1.75rem;
	}
	
	.footer-promotion {
		padding: 1.75rem 1.5rem 2rem;
	}
	
	.footer-promotion .h3 {
		font-size: 1.25rem;
	}
	
	.rte-setting {
		font-size: 0.9rem;
	}
}

@media (max-width: 768px) {
	.new-grid[data-view="3-1"] {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	
	.footer-promotion {
		border-width: 10px;
		padding: 1.5rem 1.25rem 1.75rem;
	}
	
	.footer__grid-image {
		margin-bottom: 1.25rem;
	}
	
	.footer-promotion .h3 {
		font-size: 1.375rem;
	}
	
	.rte-setting {
		font-size: 0.9375rem;
		margin-bottom: 1.25rem;
	}
}

@media (max-width: 480px) {
	.new-grid {
		gap: 2rem;
	}
	
	.footer-promotion {
		border-width: 8px;
		padding: 1.25rem 1rem 1.5rem;
	}
	
	.footer__grid-image {
		margin-bottom: 1rem;
	}
	
	.footer-promotion .h3 {
		font-size: 1.25rem;
	}
	
	.rte-setting {
		font-size: 0.875rem;
		line-height: 1.6;
		margin-bottom: 1rem;
	}
	
	.btn--small {
		padding: 0.6rem 1.25rem;
		font-size: 0.8125rem;
	}
}


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

.site-footer {
	margin-top: auto;
}

/* Newsletter Section */
.footer-newsletter {
	background: #00539b;
	background: linear-gradient(135deg, #00539b 0%, #003d73 100%);
	padding: 3rem 0;
	color: #ffffff;
}

.newsletter-content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.newsletter-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 0.5rem 0;
	line-height: 1.2;
}

.newsletter-subtitle {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.75rem 0;
	line-height: 1.5;
}

.newsletter-form {
	display: flex;
	gap: 0;
	max-width: 500px;
	margin: 0 auto;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


.newsletter-form .newsletter-input,
.newsletter-input[type="email"] {
	flex: 1;
	width: 100%;
	padding: 0.875rem 1.25rem;
	border: none !important;
	border-radius: 0 !important;
	font-size: 0.9375rem;
	background: #ffffff !important;
	color: #0f172a;
	outline: none !important;
	box-shadow: none !important;
}

.newsletter-form .newsletter-input:focus,
.newsletter-input[type="email"]:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	background: #ffffff !important;
}

.newsletter-form .newsletter-input:read-only,
.newsletter-input[type="email"]:read-only {
	cursor: not-allowed;
	opacity: 0.9;
}

.newsletter-input::placeholder {
	color: #94a3b8;
}


.newsletter-button {
	padding: 0.875rem 2rem;
	background: #ffffff;
	color: #00539b;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.newsletter-button:hover {
	background: #f0f9ff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Footer Main */
.footer-main {
	background: #ffffff;
	padding: 3rem 0;
	border-bottom: 1px solid #e5e7eb;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	max-width: 900px;
	margin: 0 auto;
}

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

.footer-column-title {
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.footer-menu li {
	margin: 0;
}

.footer-menu a {
	color: #475569;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color 0.2s ease;
	display: inline-block;
}

.footer-menu a:hover {
	color: #00539b;
	text-decoration: underline;
}

/* Payment Icons */
.footer-payment-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	align-items: center;
}

.payment-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 32px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	font-size: 0;
	position: relative;
	overflow: hidden;
}

.payment-icon::before {
	content: '';
	position: absolute;
	inset: 0;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Visa */
.payment-visa {
	background: #1434CB;
}

.payment-visa::before {
	content: 'VISA';
	font-size: 0.75rem;
	font-weight: 700;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
}

/* American Express */
.payment-amex {
	background: #006FCF;
}

.payment-amex::before {
	content: 'AMEX';
	font-size: 0.65rem;
	font-weight: 700;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
}

/* Mastercard */
.payment-mastercard {
	background: #EB001B;
	background: linear-gradient(90deg, #EB001B 0%, #F79E1B 100%);
}

.payment-mastercard::before {
	content: 'MC';
	font-size: 0.7rem;
	font-weight: 700;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
}

/* Maestro */
.payment-maestro {
	background: #0099DF;
}

.payment-maestro::before {
	content: 'M';
	font-size: 0.85rem;
	font-weight: 700;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
}

/* Footer Bottom */
.footer-bottom {
	background: #ffffff;
	padding: 1.5rem 0;
	border-top: 1px solid #e5e7eb;
}

.footer-bottom-content {
	text-align: center;
}

.footer-copyright {
	font-size: 0.875rem;
	color: #64748b;
	margin: 0;
	line-height: 1.6;
}

.footer-copyright a {
	color: #64748b;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-copyright a:hover {
	color: #00539b;
	text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 1024px) {
	.footer-newsletter {
		padding: 2.5rem 0;
	}
	
	.newsletter-title {
		font-size: 1.5rem;
	}
	
	.footer-main {
		padding: 2.5rem 0;
	}
	
	.footer-grid {
		gap: 2.5rem;
	}
}

@media (max-width: 768px) {
	.footer-newsletter {
		padding: 2rem 0;
	}
	
	.newsletter-title {
		font-size: 1.375rem;
	}
	
	.newsletter-subtitle {
		font-size: 0.9375rem;
		margin-bottom: 1.5rem;
	}
	
	.newsletter-form {
		flex-direction: column;
		gap: 0;
	}
	
	.newsletter-input {
		padding: 0.875rem 1rem;
	}
	
	.newsletter-button {
		padding: 0.875rem 1.5rem;
	}
	
	.footer-main {
		padding: 2rem 0;
	}
	
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		max-width: 100%;
	}
	
	.footer-column {
		text-align: left;
	}
	
	.footer-payment-icons {
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	.footer-newsletter {
		padding: 1.75rem 0;
	}
	
	.newsletter-title {
		font-size: 1.25rem;
	}
	
	.newsletter-subtitle {
		font-size: 0.875rem;
	}
	
	.newsletter-input,
	.newsletter-button {
		font-size: 0.875rem;
		padding: 0.75rem 1rem;
	}
	
	.footer-main {
		padding: 1.75rem 0;
	}
	
	.footer-grid {
		gap: 1.75rem;
	}
	
	.footer-column-title {
		font-size: 0.9375rem;
	}
	
	.footer-menu a {
		font-size: 0.875rem;
	}
	
	.footer-bottom {
		padding: 1.25rem 0;
	}
	
	.footer-copyright {
		font-size: 0.8125rem;
	}
}


/* ================================================
   SECTION DIVIDERS & SPACING (Front Page)
   ================================================ */

/* Базовый отступ для всех секций */
.site-main section {
	position: relative;
}

/* Разделительные линии между секциями */
.promo-banners-section,
.picks-section,
.shop-categories-section,
.favourites-section,
.testimonials-section,
.brands-section,
.feature-cards-section {
	border-top: 1px solid #e5e7eb;
}

/* Hero секция - без верхней линии */
.hero-section {
	border-top: none;
}

/* Альтернативные фоны для секций (зебра-стиль) */
.promo-banners-section {
	background: #ffffff;
	padding: 4rem 0;
}

.picks-section {
	background: #f8fafc;
	padding: 4rem 0;
}

.shop-categories-section {
	background: #ffffff;
	padding: 4rem 0;
}

.favourites-section {
	background: #f8fafc;
	padding: 4rem 0;
}

.testimonials-section {
	background: #ffffff;
	padding: 4rem 0;
}

.brands-section {
	/* background: #f8fafc; */
	padding: 4rem 0;
}

.feature-cards-section {
	background: #ffffff;
	/* padding уже есть в оригинальных стилях */
}

/* Более выраженные разделители (опционально) */
.section-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, #e5e7eb 50%, transparent 100%);
	margin: 0;
}

/* Декоративная линия с отступами */
.section-divider-decorative {
	position: relative;
	height: 1px;
	background: #e5e7eb;
	margin: 0 auto;
	max-width: 80%;
}

.section-divider-decorative::before,
.section-divider-decorative::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	background: #e5e7eb;
	border-radius: 50%;
	transform: translateY(-50%);
}

.section-divider-decorative::before {
	left: 0;
}

.section-divider-decorative::after {
	right: 0;
}

/* Адаптивные отступы */
@media (max-width: 1024px) {
	.promo-banners-section,
	.picks-section,
	.shop-categories-section,
	.favourites-section,
	.testimonials-section,
	.brands-section {
		padding: 3.5rem 0;
	}
}

@media (max-width: 768px) {
	.promo-banners-section,
	.picks-section,
	.shop-categories-section,
	.favourites-section,
	.testimonials-section,
	.brands-section {
		padding: 3rem 0;
	}
}

@media (max-width: 480px) {
	.promo-banners-section,
	.picks-section,
	.shop-categories-section,
	.favourites-section,
	.testimonials-section,
	.brands-section {
		padding: 2.5rem 0;
	}
}


.tabcontent-cus,
.tablinks-cus {
	display: block !important;
}

button.tablinks-cus {
	background-color: #1d4ed8;
	box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
	transform: translateY(-1px);
	padding: 15px;
}