/* 
 * Premium Tea Theme Stylesheet
 * Brand colors: Deep Forest Green (#1B3B2B), Sage Green (#5C8A6B), Gold Accent (#C5A059)
 * Typography: Playfair Display (headings), Plus Jakarta Sans (body)
 */

:root {
	--primary-rgb: 33, 166, 86;
	--secondary-rgb: 46, 204, 113;
	--package-green-solid: #E6F3EA;
	--package-green-light: #f3fbf6;
	--package-green-lighter: #f8fcf9;
	--package-green-soft-rgb: rgb(226, 245, 234);
	--primary-color: #21a656;
	--primary-hover: #1a8a48;
	--secondary-color: #4c8b61;
	--accent-color: #c45c2e;
	--accent-hover: #a34b24;
	--package-green: #21a656;
	--package-green-dark: #1a8a48;
	--package-green-soft: linear-gradient(160deg, #f8fffb 0%, #eef9f2 52%, #e2f5ea 100%);
	--package-orange: #c45c2e;
	--package-orange-dark: #a34b24;
	--package-orange-soft: linear-gradient(160deg, #fffcf8 0%, #fff4eb 52%, #fde8d6 100%);
	--brand-gradient: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	--brand-gradient-hover: linear-gradient(135deg, var(--package-green-dark) 0%, #157a3f 100%);
	--bg-primary: #FCFBF8;
	--bg-secondary: #F5F3ED;
	--bg-white: #FFFFFF;
	--text-primary: #2C312E;
	--text-secondary: #636B65;
	--border-color: #E8E4DC;
	--border-light: #F0EDE6;
	--font-serif: 'Playfair Display', Georgia, serif;
	--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--font-footer: 'Open Sans', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--shadow-sm: 0 4px 14px rgba(33, 166, 86, 0.06);
	--shadow-md: 0 10px 28px rgba(44, 62, 47, 0.08);
	--shadow-lg: 0 18px 40px rgba(44, 62, 47, 0.1);
	--radius-sm: 8px;
	--radius-md: 18px;
	--radius-lg: 22px;
	--transition-speed: 0.3s;
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--secondary-color) #edf5ef;
}

body::-webkit-scrollbar,
*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
	background: #edf5ef;
	border-radius: 999px;
}

body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
	border: 2px solid #edf5ef;
	border-radius: 999px;
}

body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--primary-hover), var(--accent-color));
}

.lazy-image-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	background: transparent;
	border-radius: inherit;
	vertical-align: middle;
}

.lazy-image-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(245, 245, 245, 0.72) 48%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-100%);
	animation: lazyShimmer 1.15s infinite;
	z-index: 1;
	pointer-events: none;
}

.lazy-image-wrap img {
	display: block;
	opacity: 0;
	filter: blur(8px);
	transform: scale(1.015);
	transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

.lazy-image-wrap img.is-loaded {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}

.lazy-image-wrap:has(img.is-loaded)::before {
	display: none;
}

@keyframes lazyShimmer {
	100% {
		transform: translateX(100%);
	}
}

/* Reset and base styles */
body {
	font-family: var(--font-sans);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-size: 14px;
	line-height: 1.6;
	width: 100%;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	color: var(--primary-color);
	font-weight: 700;
	margin-top: 0;
}

h1 { font-size: 38px; line-height: 1.2; }
h2 { font-size: 30px; line-height: 1.3; }
h3 { font-size: 24px; line-height: 1.4; }
h4 { font-size: 20px; line-height: 1.4; }
h5 { font-size: 16px; line-height: 1.5; }
h6 { font-size: 14px; }

a {
	color: var(--secondary-color);
	transition: color var(--transition-speed) ease;
}

a:hover, a:focus {
	color: var(--primary-color);
	text-decoration: none;
}

legend {
	font-family: var(--font-serif);
	font-size: 24px;
	color: var(--primary-color);
	border-bottom: 2px solid var(--bg-secondary);
	padding-bottom: 10px;
	margin-bottom: 25px;
}

/* Typography elements */
.lead {
	font-size: 16px;
	color: var(--text-secondary);
}

/* Layout modifications */
.container {
	max-width: 1200px;
	padding-left: 20px;
	padding-right: 20px;
}

/* Header & Navigation Top Bar */
#top {
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-light);
	padding: 10px 0;
	min-height: auto;
	margin-bottom: 0;
}

#top .container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#top-links {
	padding-top: 0;
}

#top-links ul {
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 20px;
}

#top-links li {
	padding: 0;
	display: inline-flex;
	align-items: center;
}

#top .btn-link, #top-links li, #top-links a {
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: none;
	transition: all var(--transition-speed);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

#top .btn-link:hover, #top-links a:hover {
	color: var(--accent-color);
}

#top-links a i {
	font-size: 13px;
	color: var(--secondary-color);
}

#top .dropdown-menu {
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
	padding: 8px 0;
	margin-top: 5px;
}

#top .dropdown-menu a {
	padding: 8px 20px;
	color: var(--text-primary);
}

#top .dropdown-menu a:hover {
	background-color: var(--bg-secondary);
	color: var(--primary-color);
}

/* Header (Logo, Search, Cart & Utilities) */
header {
	background-color: var(--bg-primary);
	padding: 25px 0;
	border-bottom: 1px solid var(--border-light);
	position: relative;
	z-index: 1;
}

@media (min-width: 992px) {
	header {
		z-index: 1035;
		overflow: visible;
	}

	header > .container {
		overflow: visible;
	}
}

.header-main-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	overflow: visible;
}

.header-logo-col {
	flex: 0 0 220px;
	align-self: center;
}

.header-search-col {
	flex: 1 1 auto;
	max-width: 640px;
	min-width: 280px;
	align-self: center;
}

/* Desktop arama — orta.png (846×200) search ile hizalı, satır yüksekliğini bozmaz */
.header-search-col--decor {
	position: relative;
	padding: 0;
	overflow: visible;
	align-self: center;
}

.search-livesearch-wrap--header-decor {
	position: relative;
	overflow: visible;
	padding: 0;
	min-height: 48px;
	display: flex;
	align-items: center;
}

.search-livesearch-wrap--header-decor .header-search-decor {
	position: absolute;
	left: auto;
	right: 36px;
	top: 50%;
	width: min(340px, 62%);
	aspect-ratio: 846 / 200;
	height: auto;
	max-height: 88px;
	transform: translateY(calc(-52% + 28px));
	pointer-events: none;
	z-index: 5;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	opacity: 1;
}

.search-livesearch-wrap--header-decor .header-search-input-layer {
	position: relative;
	z-index: 2;
	width: 100%;
	flex: 1 1 auto;
}

@media (min-width: 992px) and (max-width: 1199px) {
	.search-livesearch-wrap--header-decor .header-search-decor {
		width: min(280px, 58%);
		max-height: 72px;
		right: 32px;
		transform: translateY(calc(-52% + 28px));
	}
}

.search-livesearch-wrap--header-decor .livesearch-dropdown {
	z-index: 10050;
}

.header-search-col--decor #search .input-lg,
.header-search-col--decor .header-search-input-layer .input-lg {
	background-color: rgba(252, 251, 248, 0.22);
	border-color: rgba(var(--primary-rgb), 0.35);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow: none;
}

.header-search-col--decor #search .input-lg::placeholder {
	color: rgba(27, 59, 43, 0.65);
}

.header-search-col--decor #search .input-lg:focus {
	background-color: rgba(255, 255, 255, 0.45);
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.header-search-col--decor #search .btn-lg {
	background-color: transparent;
	position: absolute;
	z-index: 10;
}

.header-utilities-col {
	display: flex;
	align-items: center;
	align-self: center;
	gap: 24px;
	flex: 0 0 auto;
}

#logo {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#logo h1 {
	margin: 0;
}

#logo h1 a {
	font-family: var(--font-serif);
	font-weight: 800;
	color: var(--primary-color);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 28px;
	text-shadow: none;
	line-height: 1;
}

.logo-subtitle {
	font-family: var(--font-sans);
	font-size: 9px;
	font-weight: 700;
	color: var(--accent-color);
	letter-spacing: 3.5px;
	text-transform: uppercase;
	margin-top: 6px;
	line-height: 1;
}

#logo img {
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Search Bar Customization (Listensi Style) */
#search {
	margin-bottom: 0;
	position: relative;
	width: 100%;
}

#search .input-lg {
	height: 48px;
	line-height: 20px;
	padding: 10px 24px;
	border-radius: var(--radius-lg);
	border: 1.5px solid var(--border-color);
	background-color: var(--bg-white);
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text-primary);
	box-shadow: none;
	transition: all var(--transition-speed);
	padding-right: 50px;
}

#search .input-lg:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(27, 59, 43, 0.08);
	outline: none;
}

#search .btn-lg {
	position: absolute;
	right: 0;
	top: 0;
	height: 48px;
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	background-color: transparent;
	border: none;
	color: var(--primary-color);
	padding: 0 20px;
	font-size: 16px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
	transition: all var(--transition-speed);
	display: flex;
	align-items: center;
	justify-content: center;
}

#search .btn-lg:hover {
	color: var(--accent-color);
}

/* Header Utilities */
.header-utility-item {
	display: flex !important;
	align-items: center !important;
	flex-direction: row !important;
	gap: 10px !important;
	color: var(--text-primary);
	text-decoration: none;
	transition: all var(--transition-speed);
	cursor: pointer;
	white-space: nowrap;
}

.header-utility-item:hover, .header-utility-item:focus {
	color: var(--primary-color);
	text-decoration: none;
}

.utility-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-light);
	color: var(--primary-color);
	transition: all var(--transition-speed);
}

.header-utility-item:hover .utility-icon-wrap {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--bg-white);
}

.utility-text-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	text-align: left;
	line-height: 1.15;
	gap: 1px;
}

.utility-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.2;
	margin: 0;
}

.utility-sub {
	font-size: 10px;
	color: var(--text-secondary);
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
}

/* Shopping Cart Customization (Listensi Style) */
#cart {
	margin-bottom: 0;
}

#cart > .btn {
	background-color: transparent;
	color: var(--text-primary);
	border: none;
	height: auto;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	text-transform: none;
	letter-spacing: 0;
	transition: all var(--transition-speed);
}

#cart > .btn:hover {
	background-color: transparent;
}

.cart-icon-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-light);
	color: var(--primary-color);
	transition: all var(--transition-speed);
}

#cart > .btn:hover .cart-icon-wrapper {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--bg-white);
}

.cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background-color: #e04b4b; /* Vibrant Red badge */
	color: var(--bg-white);
	font-size: 10px;
	font-weight: 700;
	border-radius: 50%;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	box-shadow: 0 2px 4px rgba(224, 75, 75, 0.2);
}

.cart-text-wrapper {
	display: flex;
	flex-direction: column;
	text-align: left;
	line-height: 1.2;
}

.cart-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-primary);
}

.cart-amount {
	font-size: 10px;
	color: var(--text-secondary);
	font-weight: 500;
}

#cart.open > .btn {
	background-color: transparent;
	color: var(--primary-color);
	box-shadow: none;
}

/* Shopping Cart Side Drawer */
#cart .dropdown-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 400px;
	max-width: 100%;
	height: 100vh;
	margin: 0;
	padding: 25px;
	background: var(--bg-white);
	border: none;
	border-radius: 0;
	box-shadow: none;
	z-index: 99999;
	display: flex !important;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
	box-sizing: border-box;
}

#cart.open .dropdown-menu {
	transform: translateX(0);
	box-shadow: -8px 0 35px rgba(0, 0, 0, 0.15);
}

/* Blur backdrop overlay */
#cart.open::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(18, 38, 28, 0.45);
	backdrop-filter: blur(4px);
	z-index: 99998;
	animation: fadeInOverlay 0.3s ease-out forwards;
}

@keyframes fadeInOverlay {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Drawer Header */
.cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border-light);
	margin-bottom: 15px;
	flex-shrink: 0;
}

.cart-drawer-title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.cart-drawer-close {
	background: transparent;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s;
}

.cart-drawer-close:hover {
	color: #e04b4b;
}

/* Cart Items Container */
.cart-drawer-items {
	flex: 1 1 auto;
	overflow-y: auto;
	margin-right: -10px;
	padding-right: 10px;
}

/* Custom scrollbar for drawer items */
.cart-drawer-items::-webkit-scrollbar {
	width: 5px;
}
.cart-drawer-items::-webkit-scrollbar-track {
	background: transparent;
}
.cart-drawer-items::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 10px;
}

/* Custom Table Layout as Cards */
#cart .dropdown-menu table.table-striped {
	width: 100%;
	background: transparent;
	border: none;
	margin-bottom: 0;
}

#cart .dropdown-menu table.table-striped tr {
	display: flex;
	padding: 14px 0;
	border-bottom: 1px solid var(--border-light);
	align-items: center;
	gap: 12px;
	background: transparent !important;
}

#cart .dropdown-menu table.table-striped td {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Product image */
#cart .dropdown-menu table.table-striped td:first-child {
	flex: 0 0 54px;
}

#cart .dropdown-menu table.table-striped td:first-child a img {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
}

/* Product title and options */
#cart .dropdown-menu table.table-striped td:nth-child(2) {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

#cart .dropdown-menu table.table-striped td:nth-child(2) a {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s;
	display: block;
	white-space: normal;
}

#cart .dropdown-menu table.table-striped td:nth-child(2) a:hover {
	color: var(--primary-color);
}

#cart .dropdown-menu table.table-striped td:nth-child(2) small {
	font-size: 11px;
	color: var(--text-secondary);
}

/* Quantity */
#cart .dropdown-menu table.table-striped td:nth-child(3) {
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 600;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Total Price */
#cart .dropdown-menu table.table-striped td:nth-child(4) {
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-color);
	flex: 0 0 auto;
	text-align: right;
	margin-left: auto;
}

/* Delete Button */
#cart .dropdown-menu table.table-striped td:last-child {
	flex: 0 0 auto;
}

#cart .dropdown-menu table.table-striped td .btn-danger {
	background: transparent;
	color: #e04b4b;
	border: none;
	font-size: 14px;
	padding: 4px 6px;
	opacity: 0.6;
	transition: all 0.2s;
	box-shadow: none;
}

#cart .dropdown-menu table.table-striped td .btn-danger:hover {
	opacity: 1;
	transform: scale(1.15);
	background: transparent;
}

/* Drawer Summary & Actions */
.cart-drawer-summary {
	flex-shrink: 0;
	padding-top: 15px;
	border-top: 1px solid var(--border-light);
	margin-top: 10px;
}

.cart-drawer-totals table {
	width: 100%;
	border: none;
	margin-bottom: 15px;
}

.cart-drawer-totals td {
	border: none !important;
	padding: 6px 0 !important;
	font-size: 13px;
	color: var(--text-secondary);
}

.cart-drawer-totals tr:last-child td {
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-color);
	border-top: 1px dashed var(--border-light) !important;
	padding-top: 12px !important;
}

.cart-drawer-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.cart-drawer-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	text-align: center;
}

.btn-view-cart {
	background-color: var(--bg-secondary);
	color: var(--primary-color) !important;
	border: 1px solid var(--border-light);
}

.btn-view-cart:hover {
	background-color: var(--border-light);
}

.btn-checkout {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.24);
}

.btn-checkout:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

/* Empty State */
.cart-drawer-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 15px;
	color: var(--text-secondary);
	flex: 1 1 auto;
}

.cart-drawer-empty .empty-cart-icon {
	font-size: 54px;
	color: var(--border-color);
	margin-bottom: 18px;
}

.cart-drawer-empty p {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
}

/* Category Navigation Menu & Special Links */
.main-nav-sticky {
	position: relative;
	z-index: 1020;
}

@media (min-width: 992px) {
	.main-nav-sticky {
		position: sticky;
		top: 0;
		background-color: var(--bg-primary);
		border-bottom: 1px solid var(--border-light);
		box-shadow: 0 4px 18px rgba(27, 59, 43, 0.06);
		margin-bottom: 30px;
	}

	.main-nav-sticky #menu {
		margin-bottom: 0;
		border-bottom: none;
	}
}

#menu {
	background-color: var(--bg-primary);
	border-top: none;
	border-bottom: 1px solid var(--border-light);
	min-height: auto;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 30px;
	padding: 0;
}

#menu .container {
	padding-left: 10px;
	padding-right: 10px;
}

#menu .menu-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 48px;
}

#menu .menu-categories,
#menu .menu-special-links {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
	flex-shrink: 0;
}

#menu .menu-categories {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#menu .menu-categories::-webkit-scrollbar {
	display: none;
}

#menu .menu-special-links {
	flex: 0 0 auto;
	margin-left: 8px;
}

#menu .nav > li {
	float: none;
	display: block;
	flex-shrink: 0;
}

#menu .nav > li > a {
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	padding: 14px 11px;
	text-shadow: none;
	background-color: transparent;
	text-transform: none;
	letter-spacing: 0;
	transition: all var(--transition-speed);
	position: relative;
	white-space: nowrap;
	line-height: 1.2;
	display: block;
}

#menu .navbar-collapse {
	padding: 0;
	border: none;
	box-shadow: none;
	position: relative;
	overflow: visible !important;
}

#menu .navbar {
	overflow: visible;
	margin-bottom: 0;
}

#menu .mega-menu-item {
	position: static;
}

#menu .mega-menu-anchor {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1001;
}

#menu.mega-open .mega-menu-anchor {
	display: block;
}

#menu .mega-menu-anchor::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
	background: transparent;
}

#menu .mega-menu-panel {
	display: none;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-top: 1px solid var(--border-light);
	border-radius: 0;
	box-shadow: 0 12px 24px rgba(27, 59, 43, 0.08);
	background: var(--bg-white);
	float: none;
	left: auto !important;
	right: auto !important;
}

#menu .mega-menu-panel.active {
	display: block;
}

#menu .mega-menu-item.open .mega-menu-panel {
	display: none;
}

#menu .mega-menu-inner {
	display: flex;
	align-items: stretch;
	gap: 20px;
	max-width: 1170px;
	margin: 0 auto;
	padding: 18px 15px;
}

/* Left section wrapper */
#menu .mega-left {
	flex: 1 1 auto;
	min-width: 0;
}

#menu .mega-brands {
	display: grid;
	grid-template-columns: repeat(4, minmax(80px, 1fr));
	gap: 10px;
}

#menu .mega-brand-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 10px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-white);
	transition: all var(--transition-speed);
}

#menu .mega-brand-item:hover {
	border-color: var(--secondary-color);
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}

#menu .mega-brand-item img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

#menu .mega-subcategories {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	align-content: start;
}

#menu .mega-subcategory-item {
	display: block;
	padding: 11px 14px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	transition: all var(--transition-speed);
}

#menu .mega-subcategory-item:hover {
	color: var(--primary-color);
	border-color: var(--secondary-color);
	background: var(--bg-secondary);
}

/* Right: tabbed product sidebar */
#menu .mega-product-sidebar {
	flex: 0 0 280px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--bg-white);
	overflow: hidden;
}

#menu .mega-prod-tabs {
	display: flex;
	border-bottom: 1px solid var(--border-light);
}

#menu .mega-prod-tab {
	flex: 1;
	padding: 9px 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	border-bottom: 2px solid transparent;
}

#menu .mega-prod-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
	background: #f8fdf5;
}

#menu .mega-prod-tab:hover:not(.active) {
	color: var(--text-primary);
	background: var(--bg-secondary);
}

#menu .mega-prod-panel {
	display: none;
	flex-direction: column;
	gap: 0;
}

#menu .mega-prod-panel.active {
	display: flex;
}

#menu .mega-prod-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--border-light);
	transition: background 0.15s;
}

#menu .mega-prod-card:last-child {
	border-bottom: none;
}

#menu .mega-prod-card:hover {
	background: #f8fdf5;
}

#menu .mega-prod-img-wrap {
	flex-shrink: 0;
}

#menu .mega-prod-img-wrap img {
	width: 54px;
	height: 54px;
	object-fit: contain;
	border-radius: 6px;
	border: 1px solid var(--border-light);
}

#menu .mega-prod-info {
	flex: 1;
	min-width: 0;
}

#menu .mega-prod-name {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}

#menu .mega-prod-name:hover {
	color: var(--primary-color);
}

#menu .mega-prod-price-row {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

#menu .mega-prod-price,
#menu .mega-prod-special {
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color);
}

#menu .mega-prod-special {
	color: var(--secondary-color, #e07b39);
}

#menu .mega-prod-old {
	font-size: 11px;
	color: #94a3b8;
	text-decoration: line-through;
}

#menu .mega-prod-cart-btn {
	flex-shrink: 0;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.2);
}

#menu .mega-prod-cart-btn:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(var(--primary-rgb), 0.26);
}

#menu .mega-prod-cart-btn.added {
	background: var(--package-green-dark);
	opacity: 1;
}

#menu .mega-prod-cart-btn.loading {
	opacity: 0.55;
	pointer-events: none;
}

#menu .nav > li > a::after,
.menu-special-links li a.special-link::after {
	content: '';
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 8px;
	height: 2px;
	background-color: var(--primary-color);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--transition-speed);
}

#menu .nav > li > a:hover,
#menu .nav > li > a:focus,
#menu .mega-menu-item.open > a {
	background-color: transparent;
	color: var(--primary-color);
}

#menu .nav > li > a:hover::after,
#menu .nav > li > a:focus::after,
#menu .mega-menu-item.open > a::after {
	transform: scaleX(1);
}

@media (min-width: 992px) {
	#menu .menu-categories {
		overflow: visible;
	}

	#menu .navbar-collapse {
		overflow: visible;
	}

	#menu .menu-row {
		position: relative;
	}
}

@media (max-width: 991px) {
	#menu .mega-menu-item {
		position: relative;
	}

	#menu .mega-menu-anchor {
		position: static;
	}

	#menu .mega-menu-panel {
		box-shadow: none;
		border-top: none;
	}

	#menu .mega-menu-inner {
		flex-direction: column;
		padding: 10px 0;
		gap: 12px;
	}

	#menu .mega-brands {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#menu .mega-subcategories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#menu .mega-product-sidebar {
		flex: 1 1 auto;
		width: 100%;
	}

	#menu .mega-product-sidebar {
		max-height: none;
	}
}

#menu .dropdown-menu {
	background-color: var(--bg-white);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
	padding: 20px;
	margin-top: 5px;
	text-align: left;
}

#menu .dropdown-inner {
	display: flex;
	gap: 30px;
}

#menu .dropdown-inner a {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	transition: all var(--transition-speed);
}

#menu .dropdown-inner a:hover {
	color: var(--primary-color);
	background-color: var(--bg-secondary);
}

#menu .see-all {
	border-top: 1px solid var(--border-light);
	font-weight: 700;
	color: var(--primary-color);
	padding: 10px 16px;
	margin-top: 12px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px;
	transition: all var(--transition-speed);
}

#menu .see-all:hover {
	background-color: var(--primary-color);
	color: var(--bg-white);
}

/* Special Links on the Right */
.menu-special-links {
	gap: 2px;
}

#menu .menu-special-links > li > a.special-link {
	color: var(--text-primary) !important;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start;
	gap: 8px;
	padding: 13px 11px;
	border-radius: 0;
	transition: color var(--transition-speed);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2 !important;
	position: relative;
	background-color: transparent !important;
}

#menu .menu-special-links > li > a.special-link:hover,
#menu .menu-special-links > li > a.special-link:focus {
	color: var(--primary-color) !important;
	background-color: transparent !important;
}

#menu .menu-special-links > li > a.special-link:hover::after,
#menu .menu-special-links > li > a.special-link:focus::after {
	background-color: var(--primary-color);
	transform: scaleX(1);
}

#menu .menu-special-links > li {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
}

.menu-special-label {
	display: inline-block;
	line-height: 1.2;
	white-space: nowrap !important;
}

/* Fast Buy Hover Dropdown Menu styling */
.fast-buy-dropdown-container {
	position: relative;
}

.fast-buy-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 360px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(27, 59, 43, 0.1);
	padding: 12px;
	z-index: 10002;
	margin-top: 5px;
	border: 1px solid rgba(27, 59, 43, 0.05);
}

.fast-buy-dropdown::before {
	content: '';
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
	height: 15px;
	background: transparent;
}

@media (min-width: 992px) {
	.fast-buy-dropdown-container:hover .fast-buy-dropdown {
		display: block;
		animation: fastBuyFadeIn 0.2s ease-in-out;
	}
}

@keyframes fastBuyFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fast-buy-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.fast-buy-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-radius: 8px;
	text-decoration: none !important;
	transition: all 0.2s ease-in-out;
	border: 1px solid transparent;
}

.fast-buy-card .card-title {
	font-size: 13px;
	font-weight: 700;
	font-family: var(--font-sans);
}

.fast-buy-card .card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.fast-buy-card .card-icon svg {
	width: 22px;
	height: 22px;
	transition: transform 0.2s ease;
}

.fast-buy-card:hover .card-icon svg {
	transform: scale(1.1);
}

/* Card 1: Kargo Takip (Forest Green) */
.card-cargo {
	background-color: #f3f6f4;
	color: var(--primary-color) !important;
}
.card-cargo .card-icon svg {
	stroke: var(--primary-color);
}
.card-cargo:hover {
	background-color: #e7ece9;
	border-color: rgba(27, 59, 43, 0.15);
}

/* Card 2: Favorilerim (Sage Green) */
.card-favorites {
	background-color: #f5f8f6;
	color: var(--secondary-color) !important;
}
.card-favorites .card-icon svg {
	stroke: var(--secondary-color);
}
.card-favorites:hover {
	background-color: #e9eff0;
	border-color: rgba(92, 138, 107, 0.15);
}

/* Card 3: Tekliflerim (Gold Accent) */
.card-offers {
	background-color: #fbf8f0;
	color: var(--accent-color) !important;
}
.card-offers .card-icon svg {
	stroke: var(--accent-color);
}
.card-offers:hover {
	background-color: #f5eedc;
	border-color: rgba(197, 160, 89, 0.15);
}

/* Card 4: Toptan Alım (Warm Brewed Tea Color) */
.card-wholesale {
	background-color: #faf2eb;
	color: #c05a2e !important;
}
.card-wholesale .card-icon svg {
	stroke: #c05a2e;
}
.card-wholesale:hover {
	background-color: #f4e4d7;
	border-color: rgba(192, 90, 46, 0.15);
}

/* Mobile responsive styles */
@media (max-width: 991px) {
	.fast-buy-dropdown {
		display: block;
		position: static;
		width: 100%;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 8px 10px;
		margin-top: 0;
	}
	
	.fast-buy-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.fast-buy-card {
		padding: 12px 14px;
	}
}

@media (min-width: 992px) {
	#menu .navbar-collapse {
		display: block !important;
		height: auto !important;
		overflow: visible !important;
	}

	#menu .menu-row {
		flex-wrap: nowrap;
	}
}

@media (max-width: 991px) {
	#menu {
		margin-bottom: 20px;
	}

	#menu .menu-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	#menu .menu-categories,
	#menu .menu-special-links {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		overflow: visible;
		margin-left: 0;
	}

	#menu .menu-special-links {
		border-top: 1px solid var(--border-light);
		padding-top: 4px;
		margin-top: 4px;
	}

	#menu .nav > li > a,
	#menu .menu-special-links > li > a.special-link {
		padding: 12px 15px;
		font-size: 14px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	#menu .nav > li > a {
		padding: 13px 6px !important;
		font-size: 12px !important;
	}

	#menu .menu-special-links > li > a.special-link {
		padding: 13px 6px !important;
		font-size: 12px !important;
	}
}

@media (min-width: 1200px) {
	#menu .nav > li > a {
		padding: 14px 14px;
	}

	#menu .menu-special-links > li > a.special-link {
		padding: 14px 12px;
	}
}

/* Category Page layout */
#content {
	min-height: 600px;
	padding-bottom: 40px;
}

/* Breadcrumb Styling */
.breadcrumb {
	background-color: transparent;
	border: none;
	padding: 15px 0;
	margin-bottom: 25px;
}

.breadcrumb > li {
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
	text-shadow: none;
}

.breadcrumb > li a {
	color: var(--text-secondary);
}

.breadcrumb > li a:hover {
	color: var(--primary-color);
}

.breadcrumb > li + li:before {
	content: "/";
	color: var(--text-secondary);
	padding: 0 8px;
}

.breadcrumb > li::after {
	display: none !important;
}

/* Product Cards (Thumbnails) */
.row {
	display: flex;
	flex-wrap: wrap;
}
.row::before,
.row::after {
	display: none !important;
}
.product-layout {
	display: flex;
	flex-direction: column;
}
.product-layout > .product-thumb {
	flex-grow: 1;
}

.product-thumb {
	background-color: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
	display: flex;
	flex-direction: column;
}

.product-thumb:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-color: rgba(243, 156, 18, 0.45);
}

.product-thumb .image {
	position: relative;
	padding: 0;
	overflow: hidden;
	background-color: #FFF;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-thumb .image a {
	width: 100%;
	height: 100%;
}

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

.product-thumb:hover .image img {
	transform: scale(1.03);
}

.product-thumb .caption {
	padding: 12px;
	min-height: auto;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background-color: var(--bg-white);
}

.product-thumb h4 {
	font-size: 13px;
	margin-bottom: 6px;
	font-family: var(--font-sans);
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 36px;
	line-height: 1.35;
	margin-top: 0;
}

.product-thumb h4 a {
	color: var(--text-primary) !important;
	text-decoration: none !important;
	transition: color 0.2s;
}

.product-thumb h4 a:hover {
	color: var(--primary-color) !important;
}

.product-thumb p:not(.price) {
	display: none !important;
}

.product-thumb .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 800;
	color: var(--primary-color);
	font-family: var(--font-sans);
}

.product-thumb .price-new {
	color: var(--primary-color);
	font-weight: 800;
}

.product-thumb .price-old {
	color: var(--text-secondary);
	font-size: 11px;
	text-decoration: line-through;
	margin-left: 0;
	font-weight: 500;
}

.product-thumb .price-tax {
	display: none !important;
}

.product-thumb .rating {
	margin-bottom: 6px;
	display: inline-block;
}

.rating-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: opacity var(--transition-speed);
}

.rating-link:hover {
	opacity: 0.8;
	text-decoration: none;
}

.rating-link i {
	font-size: 12px;
}

.rating-link i.fa-star {
	color: #f5a623;
}

.rating-link i.fa-star-o {
	color: #D1D5DB;
}

.rating-link .reviews-count {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-secondary);
	font-family: var(--font-sans);
}

/* Button Group on Card Hover */
.product-thumb .button-group {
	border-top: none;
	background-color: transparent;
	padding: 0 12px 12px;
	display: flex;
	width: 100%;
	gap: 6px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	margin-top: auto;
}

.product-thumb:hover .button-group,
.product-thumb:focus-within .button-group {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.product-thumb .button-group button {
	border: none;
	background-color: transparent;
	color: var(--primary-color);
	height: 36px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.product-thumb .button-group button i {
	font-size: 13px;
}

.product-thumb .button-group button:first-child {
	flex: 1 1 auto;
	width: auto !important;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff !important;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 38px;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.product-thumb .button-group button:first-child:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.28);
}

.product-thumb .button-group button + button {
	display: inline-flex;
	width: 38px !important;
	min-width: 38px;
	flex: 0 0 38px;
	border: 1.5px solid rgba(var(--primary-rgb), 0.22);
	border-radius: 50%;
	background: var(--package-green-light);
	color: var(--package-green-dark);
}

.product-thumb .button-group button + button:hover {
	background: var(--package-green);
	color: #fff;
	border-color: var(--package-green);
}

/* Gelince Haber Ver — kart hover: first-child sepet stiliyle cakismasin */
.product-thumb .button-group .btn-notify-me-trigger,
.product-thumb .button-group button.btn-notify-me-trigger:first-child {
	flex: 1 1 auto;
	width: auto !important;
	background: var(--package-green-light) !important;
	color: var(--package-green-dark) !important;
	border: 1.5px solid rgba(var(--primary-rgb), 0.38) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.08) !important;
	font-weight: 700;
}

.product-thumb .button-group .btn-notify-me-trigger i,
.product-thumb .button-group button.btn-notify-me-trigger:first-child i {
	color: inherit;
}

.product-thumb .button-group .btn-notify-me-trigger:hover,
.product-thumb .button-group .btn-notify-me-trigger:focus,
.product-thumb .button-group button.btn-notify-me-trigger:first-child:hover,
.product-thumb .button-group button.btn-notify-me-trigger:first-child:focus {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.24) !important;
}

/* Form Controls & Inputs */
.form-control {
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background-color: var(--bg-white);
	height: 40px;
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 14px;
	box-shadow: none;
	transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-control:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px rgba(92, 138, 107, 0.15);
	outline: none;
}

/* Custom Buttons — Paket Kampanya tonlari */
.btn {
	border-radius: 999px;
	font-weight: 700;
	font-family: var(--font-sans);
	text-transform: none;
	letter-spacing: 0.02em;
	padding: 11px 22px;
	font-size: 13px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	box-shadow: none;
	line-height: 1.25;
}

.btn-xs { padding: 5px 12px; font-size: 11px; }
.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-lg { padding: 13px 30px; font-size: 15px; border-radius: 999px; }

.btn-default {
	background-color: #fff;
	color: var(--package-green-dark);
	border: 1.5px solid rgba(var(--primary-rgb), 0.28);
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.06);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background-color: var(--package-green-light);
	color: var(--package-green-dark);
	border-color: rgba(var(--primary-rgb), 0.42);
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
}

.btn-primary {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff !important;
	border: none;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.24);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
	border: none;
}

.btn-info {
	background: #fff;
	color: var(--package-green-dark) !important;
	border: 1.5px solid rgba(var(--primary-rgb), 0.22);
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.06);
}

.btn-info:hover,
.btn-info:focus {
	background: var(--package-green-light);
	color: var(--package-green-dark) !important;
	border-color: rgba(var(--primary-rgb), 0.38);
}

.btn-danger {
	background-color: #B23B3B;
	color: var(--bg-white);
	border: none;
}

.btn-danger:hover {
	background-color: #8C2E2E;
}

/* List Group Customization */
.list-group {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-light);
}

.list-group a.list-group-item {
	font-weight: 500;
	color: var(--text-primary);
	border: none;
	border-bottom: 1px solid var(--border-light);
	background-color: var(--bg-white);
	padding: 12px 18px;
	transition: all var(--transition-speed);
}

.list-group a.list-group-item:last-child {
	border-bottom: none;
}

.list-group a.list-group-item:hover, .list-group a.list-group-item.active {
	background-color: var(--bg-secondary);
	color: var(--primary-color);
	padding-left: 24px;
	text-shadow: none;
}

/* Detail view carousel thumbnail styling */
.thumbnails {
	list-style: none;
	padding: 0;
	margin: 0 -10px;
}

.thumbnails > li {
	margin-left: 0;
	padding: 0 10px;
}

.image-additional a {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: border-color var(--transition-speed);
}

.image-additional a:hover {
	border-color: var(--secondary-color);
}

/* Panel styling */
.panel {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

.panel-default > .panel-heading {
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border-light);
	color: var(--primary-color);
	font-family: var(--font-serif);
	font-weight: 700;
}

/* Site Footer – Çaylarburada tarzı */
.site-footer {
	margin-top: 60px;
	font-family: var(--font-footer);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #4a4f4c;
	background: var(--bg-primary);
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-footer a {
	color: #4a4f4c;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer a:hover {
	color: var(--package-green-dark);
}

.footer-rainbow-line {
	height: 4px;
	background: linear-gradient(90deg, var(--package-green-dark), var(--package-green), #4cb87a, var(--package-green-dark));
}

.footer-main {
	padding: 36px 0 28px;
	background: linear-gradient(180deg, var(--bg-primary) 0%, #f5faf7 100%);
}

.footer-columns {
	margin-bottom: 10px;
}

.footer-col {
	margin-bottom: 24px;
}

.footer-contact-label {
	font-family: var(--font-footer);
	font-size: 11px;
	font-weight: 700;
	color: var(--package-green-dark);
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.footer-contact-label i {
	margin-right: 6px;
	font-size: 12px;
}

.footer-contact-item {
	margin-bottom: 16px;
}

.footer-contact-item p,
.footer-address-text {
	margin: 0;
	font-family: var(--font-footer);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.65;
	color: #5c6360;
	white-space: pre-line;
}

.footer-contact-item a {
	font-weight: 600;
	color: #4a4f4c;
	transition: color 0.2s ease;
}

.footer-contact-item a:hover {
	color: var(--package-green) !important;
}

.footer-col-title {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	color: var(--package-green-dark);
	margin: 0 0 14px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--package-green);
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.35px;
}

.footer-col-title-plain {
	border-bottom: none;
	padding-bottom: 0;
	font-size: 13px;
	letter-spacing: 0.35px;
}

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

.footer-links a {
	font-family: var(--font-footer);
	font-size: 12px;
	font-weight: 400;
	color: #5c6360;
	line-height: 1.45;
	display: inline-block;
	transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
	color: var(--package-green-dark) !important;
	transform: translateX(4px);
}

.footer-newsletter-desc {
	font-family: var(--font-footer);
	font-size: 11px;
	font-weight: 400;
	color: #5c6360;
	margin-bottom: 8px;
	line-height: 1.55;
}

.footer-newsletter-form {
	display: flex;
	gap: 0;
	margin-bottom: 18px;
	max-width: 100%;
}

.footer-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	border: 1px solid rgba(var(--primary-rgb), 0.22);
	border-right: none;
	border-radius: 999px 0 0 999px;
	padding: 0 14px;
	font-family: var(--font-footer);
	font-size: 11px;
	font-weight: 400;
	color: var(--text-primary);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-newsletter-input:focus {
	border-color: var(--package-green) !important;
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
	outline: none;
}

.footer-newsletter-input::placeholder {
	color: #9aa39e;
	font-weight: 400;
}

.footer-newsletter-btn {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 18px;
	border: none;
	border-radius: 0 999px 999px 0;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
	transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.footer-newsletter-btn:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.28);
}

.footer-newsletter-btn:active {
	transform: scale(0.97);
}

.footer-newsletter-message {
	margin: -8px 0 14px;
	padding: 8px 10px;
	border-radius: 6px;
	font-family: var(--font-footer);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
}

.footer-newsletter-message.is-success {
	background: #eef9f2;
	color: var(--primary-color);
	border: 1px solid rgba(var(--primary-rgb), 0.18);
}

.footer-newsletter-message.is-error {
	background: #fff6ed;
	color: #b45309;
	border: 1px solid rgba(243, 156, 18, 0.25);
}

.footer-logo-wrap {
	margin-top: 8px;
}

.footer-logo-img {
	max-width: 200px;
	height: auto;
}

.footer-logo-text {
	font-size: 20px;
	font-weight: 800;
	color: var(--primary-color);
}

.footer-marketplaces {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
	padding: 22px 0 8px;
	border-top: 1px solid var(--border-light);
}

.footer-marketplace-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	flex-shrink: 1;
}

.footer-marketplace-item img {
	max-height: 18px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.65;
	transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform, filter, opacity;
}

/* Hover: Fade in color and zoom slightly */
.footer-marketplace-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
	transform: scale(1.08);
}

/* Click/Active state: shrink slightly to give tactile feedback */
a.footer-marketplace-item:active img {
	transform: scale(0.95);
	opacity: 0.85;
}

.footer-social-bar {
	background: linear-gradient(135deg, var(--package-orange-dark) 0%, var(--package-orange) 55%, #b25127 100%);
	color: #fff;
	padding: 16px 0;
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.footer-social-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	position: relative;
	z-index: 1;
}

.footer-social-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.footer-social-label {
	font-family: var(--font-footer);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.footer-social-icons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-social-link {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.footer-social-link:hover {
	background: rgba(255, 255, 255, 0.28);
	border-color: rgba(255, 255, 255, 0.45);
	transform: translateY(-2px);
	color: #fff !important;
}

.footer-social-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-sans);
	font-size: 38px;
	font-weight: 800;
	color: rgba(196, 92, 46, 0.08) !important;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	text-transform: lowercase;
	letter-spacing: -0.5px;
	transition: font-size 0.2s ease;
	z-index: 1;
}

@media (max-width: 1200px) {
	.footer-social-center {
		font-size: 28px;
	}
}

@media (max-width: 1080px) {
	.footer-social-center {
		font-size: 22px;
	}
}

.footer-social-right {
	font-family: var(--font-footer);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	letter-spacing: 0.05px;
	color: rgba(255, 255, 255, 0.92);
	position: relative;
	z-index: 2;
}

.footer-social-right strong {
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.2px;
}

.footer-bottom {
	background: var(--bg-secondary);
	border-top: 1px solid rgba(var(--primary-rgb), 0.1);
	padding: 18px 0 20px;
}

.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.pay-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 28px;
	padding: 0 9px;
	border: 1px solid rgba(var(--primary-rgb), 0.14);
	border-radius: 8px;
	background: #fff;
	font-family: var(--font-footer);
	font-size: 9px;
	font-weight: 600;
	color: var(--package-green-dark);
	letter-spacing: 0.15px;
	box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.06);
}

.pay-badge i {
	font-size: 16px;
}

.pay-badge-wide {
	min-width: 48px;
}

.footer-copyright {
	margin: 0;
	font-family: var(--font-footer);
	font-size: 11px;
	font-weight: 500;
	color: var(--text-secondary);
	text-align: right;
	letter-spacing: 0.05px;
}

.footer-copyright strong,
.footer-copyright a {
	color: var(--package-green-dark);
	font-weight: 600;
}

.footer-back-top {
	position: fixed;
	right: 16px;
	bottom: 80px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	font-size: 16px;
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.28);
	z-index: 9990;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.footer-back-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.footer-back-top:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.35);
}

body.product-detail-page .footer-back-top {
	bottom: 100px;
}

@media (max-width: 991px) {
	.footer-social-inner {
		flex-direction: column;
		text-align: center;
	}

	.footer-social-left {
		justify-content: center;
	}

	.footer-social-center {
		display: none;
	}

	.footer-social-right {
		white-space: normal;
	}

	.footer-bottom-inner {
		flex-direction: column;
		align-items: center;
	}

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

	.footer-payments {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.footer-main {
		padding: 28px 0 20px;
	}

	.footer-newsletter-form {
		flex-direction: column;
	}

	.footer-newsletter-input {
		border-right: 1px solid var(--border-color);
		border-radius: 4px;
	}

	.footer-newsletter-btn {
		width: 100%;
		border-radius: 4px;
	}

	.footer-marketplaces {
		flex-wrap: wrap;
		gap: 12px 16px;
	}

	.footer-back-top {
		bottom: 72px;
		width: 38px;
		height: 38px;
	}

	body.product-detail-page .footer-back-top {
		bottom: 104px;
	}
}

@media (min-width: 992px) {
	#product-product .product-top-row {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 34px;
		max-width: 1120px;
		margin-left: auto;
		margin-right: auto;
	}

	#product-product .product-gallery-col,
	#product-product .product-details-pane {
		float: none;
	}

	#product-product .product-gallery-col {
		width: 50% !important;
		padding-left: 0;
		padding-right: 0;
	}

	#product-product .product-details-pane {
		width: 42% !important;
		padding-left: 0;
		padding-right: 0;
	}
}

/* Custom badge styling */
.badge-premium {
	background-color: var(--accent-color);
	color: var(--bg-white);
	padding: 4px 8px;
	font-size: 10px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 10;
}

/* Alert styles custom */
.alert-success {
	background-color: var(--package-green-solid);
	color: var(--package-green-dark);
	border: 1px solid var(--package-green-soft);
	border-radius: var(--radius-sm);
}

.alert-danger {
	background-color: #FDF0F0;
	color: #9C2E2E;
	border: 1px solid #F6D3D3;
	border-radius: var(--radius-sm);
}

/* ==========================================
   Product Detail Page Visual Modernization
   ========================================== */

#product-product {
	padding-top: 20px;
	padding-bottom: 50px;
}

/* Product breadcrumbs */
#product-product .breadcrumb {
	background: transparent;
	padding: 0 0 20px 0;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--border-light);
}

/* Product gallery thumbnail list */
.thumbnails {
	margin-bottom: 30px;
}

.thumbnails > li {
	margin-bottom: 15px;
}

.thumbnails .thumbnail {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 8px;
	background-color: var(--bg-white);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-speed);
	overflow: hidden;
}

.thumbnails .thumbnail:hover {
	border-color: var(--secondary-color);
	box-shadow: var(--shadow-md);
}

.thumbnails .image-additional .thumbnail {
	padding: 4px;
	border-radius: var(--radius-sm);
}

/* Right column layout container */
.product-details-pane {
	padding-left: 30px;
	display: flex;
	flex-direction: column;
}

@media (max-width: 767px) {
	.product-details-pane {
		padding-left: 15px;
		margin-top: 30px;
	}
}

/* Title */
.product-title {
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--primary-color);
	margin-bottom: 12px;
}

/* Rating Row */
.product-rating-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.product-rating-row .stars i {
	color: #f5a623;
	font-size: 14px;
}

.product-rating-row .stars i.fa-star-o {
	color: #D1D5DB;
}

.product-rating-row a {
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--transition-speed);
}

.product-rating-row a:hover {
	color: var(--secondary-color);
}

.product-rating-row .divider {
	color: var(--border-color);
	font-size: 12px;
}

/* Metadata Badges */
.product-meta-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
}

.meta-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	color: var(--text-primary);
}

.product-view-stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.product-view-stats span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--package-green-lighter);
	border: 1px solid rgba(var(--primary-rgb), 0.14);
	color: var(--text-secondary);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
}

.product-view-stats i,
.product-view-stats strong {
	color: var(--primary-color);
}

.meta-badge a {
	color: var(--secondary-color);
	font-weight: 600;
	text-decoration: none;
}

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

.meta-badge.stock-badge {
	font-weight: 600;
}

.meta-badge.stock-badge.in-stock {
	background-color: var(--package-green-solid);
	color: var(--package-green-dark);
	border-color: var(--package-green-soft);
}

.meta-badge.stock-badge.out-of-stock {
	background-color: #FDF0F0;
	color: #9C2E2E;
	border-color: #F6D3D3;
}

/* Price Box */
.product-price-box {
	background-color: var(--bg-white);
	border: 1px solid rgba(var(--primary-rgb), 0.14);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.05);
	margin-bottom: 8px;
}

.price-amount {
	font-size: 28px;
	font-weight: 900;
	color: var(--primary-color);
	line-height: 1.1;
}

.price-amount-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
}

.price-amount.special-price {
	color: var(--primary-color);
}

.price-old {
	font-size: 14px;
	color: var(--text-secondary);
	text-decoration: line-through;
	font-weight: 600;
}

.discount-percentage-badge {
	background-color: var(--accent-color);
	color: var(--bg-white);
	padding: 4px 8px;
	font-size: 10px;
	font-weight: 700;
	border-radius: 999px;
	text-transform: uppercase;
	align-self: center;
}

.price-sub-info {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--text-secondary);
}

.price-tax {
	font-style: italic;
}

.price-points i {
	color: var(--accent-color);
}

/* Bulk Discount list */
.product-discounts-box {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid var(--border-light);
}

.discount-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

.discount-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.discount-list li {
	font-size: 13px;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
}

.discount-list li i {
	color: var(--secondary-color);
}

/* Product Options Forms */
.product-options-form {
	margin-bottom: 10px;
}

.options-header {
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.product-options-form .form-group {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px dashed var(--border-light);
}

.product-options-form .control-label {
	font-weight: 600;
	font-size: 13px;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.premium-select {
	height: 46px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	box-shadow: none;
	font-size: 14px;
	color: var(--text-primary);
	padding: 10px 15px;
	background-color: var(--bg-white);
	transition: border-color var(--transition-speed);
	width: 100%;
}

.premium-select:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px rgba(92, 138, 107, 0.1);
}

/* Radios and Checkboxes */
.premium-radio-list,
.premium-checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.premium-radio,
.premium-checkbox {
	margin: 0 !important;
	position: relative;
}

.premium-radio label,
.premium-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 8px 12px;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: var(--text-primary);
	width: 100%;
	transition: all var(--transition-speed);
}

.premium-radio label:hover,
.premium-checkbox label:hover {
	border-color: var(--secondary-color);
	background-color: var(--bg-white);
}

.premium-radio input[type="radio"]:checked + .option-label-text,
.premium-checkbox input[type="checkbox"]:checked + .option-label-text {
	font-weight: 600;
}

.premium-radio input[type="radio"]:checked ~ label,
.premium-radio input[type="radio"]:checked + label {
	border-color: var(--secondary-color);
	background-color: var(--bg-white);
	box-shadow: 0 0 0 1px var(--secondary-color);
}

.option-price-text {
	font-size: 12px;
	color: var(--text-secondary);
	margin-left: auto;
}

/* Premium Inputs */
.premium-text-input {
	height: 46px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 10px 15px;
	font-size: 14px;
	transition: border-color var(--transition-speed);
	width: 100%;
}

.premium-text-input:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px rgba(92, 138, 107, 0.1);
}

.premium-textarea {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 12px 15px;
	font-size: 14px;
	transition: border-color var(--transition-speed);
	width: 100%;
}

.premium-textarea:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px rgba(92, 138, 107, 0.1);
}

.premium-file-btn {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	color: var(--primary-color);
	padding: 10px 20px;
	font-weight: 600;
	font-size: 13px;
	border-radius: var(--radius-sm);
	transition: all var(--transition-speed);
}

.premium-file-btn:hover {
	background-color: var(--primary-color);
	color: var(--bg-white);
	border-color: var(--primary-color);
}

.premium-datetime-group input {
	height: 46px;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

.premium-datetime-group .btn-default {
	height: 46px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
	border-color: var(--border-color);
	background-color: var(--bg-secondary);
	color: var(--primary-color);
}

/* Quantity Control & Cart panel */
.cart-action-panel {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.quantity-control-wrapper {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.quantity-selector {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
	height: 42px;
	background-color: var(--bg-white);
}

.qty-btn {
	width: 38px;
	height: 100%;
	background: var(--bg-secondary);
	border: none;
	color: var(--primary-color);
	font-size: 12px;
	cursor: pointer;
	transition: background-color var(--transition-speed);
}

.qty-btn:hover {
	background-color: var(--border-color);
}

.qty-input {
	width: 40px;
	height: 100%;
	border: none;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	background: transparent;
}

/* Premium Buy Button */
.btn-premium-cart {
	flex-grow: 1;
	height: 46px;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	border: none;
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	transition: all var(--transition-speed);
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.24);
}

.btn-premium-cart:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.3);
	transform: translateY(-2px);
}

.btn-premium-cart:active {
	transform: translateY(0);
}

/* Wishlist Round Button */
.btn-premium-wishlist {
	width: 48px;
	height: 48px;
	border: 1.5px solid rgba(var(--primary-rgb), 0.22);
	border-radius: 50%;
	background-color: var(--package-green-light);
	color: var(--package-green-dark);
	font-size: 18px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-speed);
	box-shadow: var(--shadow-sm);
}

.btn-premium-wishlist:hover {
	background-color: var(--bg-secondary);
	color: #9C2E2E;
	border-color: #F6D3D3;
}

.premium-alert {
	margin-top: 15px;
	border-radius: var(--radius-sm);
	padding: 10px 15px;
	font-size: 13px;
	width: 100%;
}

/* Tabs Redesign */
.nav-tabs {
	border-bottom: 2px solid var(--border-light);
	margin-top: 40px;
	margin-bottom: 25px;
	display: flex;
	gap: 20px;
}

.nav-tabs > li {
	margin-bottom: -2px;
}

.nav-tabs > li > a {
	border: none !important;
	background: transparent !important;
	color: var(--text-secondary) !important;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 10px;
	position: relative;
	transition: color var(--transition-speed);
}

.nav-tabs > li > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--accent-color);
	transition: width var(--transition-speed);
}

.nav-tabs > li.active > a {
	color: var(--primary-color) !important;
}

.nav-tabs > li.active > a::after {
	width: 100%;
}

.nav-tabs > li > a:hover {
	color: var(--primary-color) !important;
}

.nav-tabs > li > a:hover::after {
	width: 100%;
}

/* Tab panes styling */
.tab-content {
	background-color: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 30px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 40px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-primary);
}

/* Reviews and write review form custom styles */
#form-review h2 {
	font-size: 20px;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 15px;
	color: var(--primary-color);
}

#form-review .control-label {
	font-weight: 600;
	color: var(--text-primary);
}

#button-review {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	border: none;
	padding: 11px 24px;
	font-weight: 700;
	border-radius: 999px;
	transition: all var(--transition-speed);
	color: #fff;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
}

#button-review:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	border: none;
	color: #fff;
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

/* Eye views count badge styling */
.meta-badge.views-badge {
	background-color: #F0F5FE;
	color: #1E3A8A;
	border-color: #DBEAFE;
}

/* Trust features section grid */
.trust-features-block {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-light);
}

.trust-features-block--compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 6px;
	padding-top: 6px;
}

@media (max-width: 575px) {
	.trust-features-block {
		grid-template-columns: 1fr;
	}
}

.trust-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--package-green-lighter);
	border: 1px solid rgba(var(--primary-rgb), 0.14);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	transition: all var(--transition-speed);
}

.trust-feature-item:hover {
	background-color: var(--bg-white);
	border-color: var(--secondary-color);
	box-shadow: var(--shadow-sm);
}

.trust-feature-item .feature-icon {
	font-size: 18px;
	color: var(--primary-color);
	flex-shrink: 0;
	margin-top: 2px;
}

.trust-feature-item .feature-details {
	display: flex;
	flex-direction: column;
}

.trust-feature-item .feature-title {
	font-weight: 700;
	font-size: 12px;
	color: var(--primary-color);
	line-height: 1.2;
}

.trust-feature-item .feature-desc {
	font-size: 10px;
	color: var(--text-secondary);
	margin-top: 3px;
	line-height: 1.3;
}

/* Product Carousels & Sliders Styles */
.product-slider-container {
	margin-top: 15px;
	margin-bottom: 10px;
	position: relative;
}

.product-slider-container .slider-title,
.product-grid-container .slider-title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 800;
	color: var(--primary-color);
	margin-bottom: 10px;
	padding: 0 86px 8px 0;
	border-bottom: 1px solid var(--border-light);
	position: relative;
}

.product-slider-container .slider-title::after,
.product-grid-container .slider-title::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 60px;
	height: 2px;
	background-color: var(--accent-color);
}

/* Styling the Swiper container specifically for product listing look */
.product-swiper {
	padding: 4px 4px 16px 4px;
	margin: 0 -5px;
	overflow: hidden;
}

.product-slider-container .swiper-viewport {
	overflow: visible !important;
}

.product-swiper .product-thumb:hover {
	transform: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	border-color: rgba(243, 156, 18, 0.45);
}

.product-swiper .swiper-slide {
	height: auto;
}

.product-swiper .product-thumb {
	margin-bottom: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Swiper navigation buttons customization */
.product-slider-container .swiper-pager {
	display: flex;
	gap: 6px;
	z-index: 20;
}

.product-slider-container .swiper-button-next,
.product-slider-container .swiper-button-prev {
	position: relative !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px;
	background: #fff;
	border: 1px solid rgba(var(--primary-rgb), 0.18);
	border-radius: 50%;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin: 0 !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	background-image: none !important;
	background-size: 0 !important;
	transform: none !important;
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-speed);
	opacity: 1;
}

.product-slider-container .swiper-button-next:hover,
.product-slider-container .swiper-button-prev:hover {
	background-color: var(--primary-color);
	color: var(--bg-white);
	border-color: var(--primary-color);
}

/* Swiper FontAwesome Icon overlays for OpenCart's default next/prev buttons */
.product-slider-container .swiper-button-next::after,
.product-slider-container .swiper-button-prev::after {
	font-family: 'FontAwesome';
	font-size: 11px;
	font-weight: normal;
	line-height: 1;
}

.product-slider-container .swiper-button-next::after {
	content: "\f054";
}

.product-slider-container .swiper-button-prev::after {
	content: "\f053";
}

.product-slider-container .swiper-button-next::before,
.product-slider-container .swiper-button-prev::before {
	display: none !important;
	content: none !important;
}

/* Premium Vertical Product Gallery Layout */
.product-gallery-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.additional-images-vertical {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	order: 2;
	gap: 8px;
	width: 100%;
	flex-shrink: 0;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: thin;
}

.additional-images-vertical .image-additional {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 4px;
	background-color: var(--bg-white);
	cursor: pointer;
	transition: all var(--transition-speed);
	overflow: hidden;
	width: 74px;
	min-width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.additional-images-vertical .image-additional img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}

.additional-images-vertical .image-additional:hover,
.additional-images-vertical .image-additional.active-thumb {
	border-color: var(--accent-color);
	box-shadow: var(--shadow-sm);
}

.main-image-container {
	order: 1;
	width: 100%;
	max-width: 440px;
	margin: 0;
	border: none;
	border-radius: 0;
	background-color: #fff;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: none;
	min-height: 340px;
}

.main-image-container img {
	max-width: 100%;
	max-height: 340px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.main-image-container .thumbnail,
.main-image-container .lazy-image-wrap {
	border: none !important;
	background: #fff !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

.main-image-container .lazy-image-wrap::before {
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(245,245,245,0.75) 48%, rgba(255,255,255,0) 100%);
}

.main-image-container img:hover {
	transform: scale(1.02);
}

.product-tabs-section {
	margin-top: 14px;
	clear: both;
}

.product-tabs-section .nav-tabs {
	margin-top: 0;
	margin-bottom: 12px !important;
}

@media (max-width: 767px) {
	.product-gallery-wrapper {
		flex-direction: column;
		gap: 12px;
		margin-bottom: 16px;
	}

	.main-image-container {
		order: 1;
		min-height: 260px;
		padding: 0;
		border-radius: 0;
		max-width: 100%;
	}

	.main-image-container img {
		max-height: 240px;
	}

	.additional-images-vertical {
		order: 2;
		flex-direction: row;
		width: 100%;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.additional-images-vertical::-webkit-scrollbar {
		display: none;
	}

	.additional-images-vertical .image-additional {
		width: 64px;
		min-width: 64px;
		height: 64px;
		flex-shrink: 0;
	}
}

/* Modernized Font, Read-More Toggle, Review Wrap, Star-Rating Selector & Review Card Styles */
.product-title {
	font-family: var(--font-sans);
	font-weight: 800;
}

/* Description Read-More Toggle */
.description-content {
	position: relative;
	transition: max-height 0.4s ease;
	overflow: hidden;
}

.description-content.collapsed-desc {
	max-height: 135px;
}

.description-content.collapsed-desc::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 440px;
	height: 42px;
	background: linear-gradient(to bottom, rgba(252, 251, 248, 0), rgba(252, 251, 248, 1));
	pointer-events: none;
}

.btn-read-more-desc {
	display: block;
	margin: 10px auto 0 auto;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	color: var(--primary-color);
	font-weight: 700;
	font-size: 13px;
	padding: 8px 24px;
	border-radius: var(--radius-sm);
	transition: all var(--transition-speed);
	cursor: pointer;
}

.btn-read-more-desc:hover {
	background-color: var(--primary-color);
	color: var(--bg-white);
	border-color: var(--primary-color);
}

/* Reviews List Styles */
.reviews-list-wrapper {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 25px;
}

.review-card {
	background-color: var(--bg-white);
	border: 1px solid var(--border-light) !important;
	border-radius: var(--radius-md, 8px) !important;
	padding: 20px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.review-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(243, 156, 18, 0.45) !important;
}

.review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px dashed var(--border-light) !important;
	padding-bottom: 12px !important;
	margin-bottom: 12px !important;
	flex-wrap: wrap;
	gap: 10px;
}

.review-author-info {
	display: flex;
	gap: 15px;
	align-items: center;
	font-family: var(--font-sans);
}

.review-author {
	font-weight: 700;
	color: var(--primary-color);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.review-date {
	font-size: 12px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 5px;
}

.review-rating {
	display: flex;
	gap: 2px;
}

.review-rating i.filled-star {
	color: var(--accent-color) !important;
	font-size: 14px;
}

.review-rating i.empty-star {
	color: #D1D5DB !important;
	font-size: 14px;
}

.review-body {
	color: var(--text-primary);
	line-height: 1.6;
	font-family: var(--font-sans);
}

.review-text {
	margin: 0;
	word-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

.reviews-pagination-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	flex-wrap: wrap;
	gap: 15px;
	font-family: var(--font-sans);
}

.pagination-links .pagination {
	margin: 0;
}

.pagination-results {
	font-size: 13px;
	color: var(--text-secondary);
}

.no-reviews-msg {
	text-align: center;
	padding: 30px;
	background-color: var(--bg-secondary);
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Star rating input selection form */
.rating-input-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 5px;
	margin-top: 5px;
}

.rating-input-stars input {
	display: none;
}

.rating-input-stars label {
	cursor: pointer;
	font-size: 24px;
	color: #D1D5DB;
	transition: color var(--transition-speed), transform 0.1s ease;
	margin-bottom: 0;
	padding: 0 2px;
}

.rating-input-stars label i::before {
	content: "\f006" !important; /* Hollow star code */
}

.rating-input-stars label:hover i::before,
.rating-input-stars label:hover ~ label i::before,
.rating-input-stars input:checked ~ label i::before {
	content: "\f005" !important; /* Filled star code */
	color: #f5a623 !important;
}

.rating-input-stars label:hover,
.rating-input-stars label:hover ~ label,
.rating-input-stars input:checked ~ label {
	color: #f5a623;
}

.rating-input-stars label:active {
	transform: scale(0.9);
}

/* General form review spacing fixes */
#form-review h2 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 20px;
	color: var(--primary-color);
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 10px;
}

#form-review .control-label {
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
}

/* Rating Input Wrapper with side helper labels */
.rating-input-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: var(--bg-secondary);
	padding: 6px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	margin-top: 5px;
}

.rating-label-helper {
	font-size: 11px;
	color: var(--text-secondary);
	font-weight: 700;
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	user-select: none;
}

.rating-label-helper.bad-label {
	color: #c94b4b; /* Soft muted red/coral for bad rating option */
}

.rating-label-helper.good-label {
	color: #5c8a6b; /* Soft theme green for good rating option */
}

#form-review .form-control {
	border-radius: var(--radius-md, 8px) !important;
	border: 1px solid var(--border-light) !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
	padding: 10px 15px !important;
	height: auto !important;
}

#form-review .form-control:focus {
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

#form-review #button-review {
	background: var(--brand-gradient, linear-gradient(135deg, var(--primary-color), var(--secondary-color))) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 10px 24px !important;
	border-radius: var(--radius-md, 8px) !important;
	transition: all 0.2s ease !important;
	font-family: var(--font-sans) !important;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2) !important;
}

#form-review #button-review:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3) !important;
}

/* Global empty/filled star overrides to match the theme card */
.rating-link i.fa-star,
.fsp-rating i.fa-star,
.review-rating i.filled-star,
.stars i.fa-star {
	color: #f5a623 !important;
}

.rating-link i.fa-star-o,
.fsp-rating i.fa-star-o,
.review-rating i.empty-star,
.stars i.fa-star-o {
	color: #D1D5DB !important;
}

/* Notify Me When in Stock (Gelince Haber Ver) Styles */
.btn-premium-notify {
	background: var(--package-green-light);
	color: var(--package-green-dark);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 28px;
	border: 1.5px solid rgba(var(--primary-rgb), 0.38);
	border-radius: 999px;
	transition: all var(--transition-speed);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-grow: 1;
	box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.08);
}

.btn-premium-notify:hover {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.24);
}

.btn-premium-notify i {
	font-size: 16px;
	animation: notifyBellShake 2.5s infinite;
}

@keyframes notifyBellShake {
	0%, 100% { transform: rotate(0); }
	10%, 30%, 50%, 70%, 90% { transform: rotate(10deg); }
	20%, 40%, 60%, 80% { transform: rotate(-10deg); }
}

/* Modal Overlay */
.notify-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(27, 59, 43, 0.6); /* Transparent Deep Forest Green */
	backdrop-filter: blur(4px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Modal Box */
.notify-modal-box {
	background-color: var(--bg-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	max-width: 440px;
	width: 100%;
	padding: 35px 30px;
	position: relative;
	border: 1px solid var(--border-color);
	animation: notifyModalSlide 0.3s ease-out;
}

@keyframes notifyModalSlide {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* Close Button */
.notify-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	background: none;
	border: none;
	font-size: 28px;
	color: var(--text-secondary);
	cursor: pointer;
	line-height: 1;
	transition: color var(--transition-speed);
}

.notify-modal-close:hover {
	color: var(--primary-color);
}

/* Modal Header */
.notify-modal-header {
	text-align: center;
	margin-bottom: 25px;
}

.notify-bell-icon {
	width: 60px;
	height: 60px;
	background-color: var(--bg-secondary);
	color: var(--accent-color);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin-bottom: 15px;
	border: 1px solid var(--border-light);
}

.notify-modal-header h3 {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 22px;
	color: var(--primary-color);
	margin: 0 0 8px 0;
}

.notify-modal-header p {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.5;
}

/* Form Styles */
#form-notify .form-group {
	margin-bottom: 18px;
}

#form-notify .control-label {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	display: block;
}

#form-notify .form-control {
	height: 46px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--border-color);
	font-family: var(--font-sans);
	font-size: 14px;
	box-shadow: none;
	transition: border-color var(--transition-speed);
}

#form-notify .form-control:focus {
	border-color: var(--primary-color);
}

/* Submit Button */
.btn-notify-submit {
	width: 100%;
	height: 48px;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: all var(--transition-speed);
	margin-top: 10px;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
}

.btn-notify-submit:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

/* Alerts inside modal */
#notify-alert {
	margin-bottom: 20px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.5;
}

/* Hide excl. tax globally on product listings */
.price-tax {
	display: none !important;
}

/* Out of Stock Card Overlay and Button Styles */
.product-thumb .image {
	position: relative;
}

.out-of-stock-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: #d9534f;
	color: #fff;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--radius-sm, 4px);
	z-index: 10;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	font-family: var(--font-sans, inherit);
}

.btn-out-of-stock, .btn-out-of-stock:hover, .btn-out-of-stock:focus {
	background-color: #e6e6e6 !important;
	color: #adadad !important;
	cursor: not-allowed !important;
	border: none !important;
	box-shadow: none !important;
}

.btn-notify-me-trigger {
	background: var(--package-green-light) !important;
	color: var(--package-green-dark) !important;
	border: 1.5px solid rgba(var(--primary-rgb), 0.38) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.08) !important;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-notify-me-trigger:hover,
.btn-notify-me-trigger:focus {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%) !important;
	color: #fff !important;
	border-color: transparent !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.24) !important;
}

/* Mobile Responsiveness Improvements */

/* Default: hide mobile-only elements on desktop */
.mobile-bottom-nav { display: none; }
.mobile-sticky-product-bar { display: none; }

@media (max-width: 767px) {
	/* Header Layout */
	.header-main-row {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 10px !important;
		padding: 5px 10px !important;
	}
	
	.header-logo-col {
		flex: 0 0 auto !important;
		width: auto !important;
		display: flex !important;
		justify-content: flex-start !important;
	}

	#logo img {
		max-height: 42px !important;
		width: auto !important;
	}
	
	.header-search-col {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: calc(100% - 140px) !important;
		padding: 0 !important;
	}

	#search .form-control {
		height: 38px !important;
		font-size: 13px !important;
	}

	#search .btn-lg {
		height: 38px !important;
		width: 38px !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	.header-utilities-col {
		display: none !important;
	}

	/* Menu Header (Categories toggle bar on mobile) */
	#menu {
		margin: 5px 10px 10px 10px !important;
	}

	#menu .navbar-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		background-color: var(--primary-color);
		color: var(--bg-white);
		border-radius: var(--radius-sm);
	}

	#menu #category {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--bg-white);
	}

	#menu .btn-navbar {
		background: transparent !important;
		border: none !important;
		color: var(--bg-white) !important;
		font-size: 18px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	#menu .navbar-collapse {
		background-color: var(--bg-white);
		border: 1px solid var(--border-light);
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);
		padding: 5px 0 !important;
	}

	#menu .navbar-collapse ul.nav > li {
		border-bottom: 1px solid var(--border-light);
	}

	#menu .navbar-collapse ul.nav > li > a {
		padding: 10px 15px !important;
		font-family: var(--font-sans) !important;
		font-weight: 600 !important;
		color: var(--text-primary) !important;
		display: block !important;
	}

	#menu .navbar-collapse ul.nav > li > a:hover {
		background-color: var(--bg-secondary) !important;
		color: var(--primary-color) !important;
	}

	/* Product Listing 2-Column Grid on Mobile (List, Grid & Module layout normalizer) */
	#content > .row:not(.product-top-row),
	.panel .row,
	.product-slider-container .row {
		margin-left: -6px !important;
		margin-right: -6px !important;
		display: flex !important;
		flex-wrap: wrap !important;
	}

	.product-layout,
	.product-layout.col-xs-12,
	.product-layout.col-sm-6,
	.product-layout.col-md-3,
	.product-layout.col-lg-3 {
		width: 50% !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
		float: left !important;
		margin-bottom: 15px !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.product-layout .product-thumb {
		display: flex !important;
		flex-direction: column !important;
		height: 100% !important;
		margin-bottom: 0 !important;
		flex-grow: 1 !important;
	}

	.product-layout .product-thumb .image {
		width: 100% !important;
		float: none !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}

	/* Normalizing list view nested divs to layout vertically like grid cards */
	.product-layout.product-list .product-thumb > div:last-child {
		width: 100% !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		flex-grow: 1 !important;
		float: none !important;
	}

	.product-layout .product-thumb .caption {
		padding: 12px !important;
		flex-grow: 1 !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.product-thumb h4 {
		font-size: 12px !important;
		margin-bottom: 4px !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		height: 32px !important;
		line-height: 1.3 !important;
	}

	.product-thumb .price {
		display: flex !important;
		align-items: baseline !important;
		flex-wrap: wrap !important;
		gap: 4px !important;
		font-size: 12px !important;
		margin-top: auto !important;
		margin-bottom: 4px !important;
	}

	.product-thumb .price-old {
		font-size: 9px !important;
	}

	.product-thumb .button-group {
		margin-top: auto !important;
		padding: 0 8px 8px !important;
		width: 100% !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}

	.product-thumb:hover .button-group,
	.product-thumb:focus-within .button-group,
	.product-thumb.is-actions-visible .button-group {
		opacity: 1 !important;
		transform: translateY(0) !important;
		pointer-events: auto !important;
	}

	.product-thumb .button-group button:first-child {
		height: 32px !important;
		line-height: 32px !important;
		font-size: 11px !important;
		border-radius: var(--radius-sm, 6px) !important;
	}

	/* Product Detail Page – Mobile */
	#product-product {
		padding-top: 12px;
		padding-bottom: 24px;
	}

	#product-product.container {
		padding-left: 12px;
		padding-right: 12px;
		max-width: 100%;
		overflow-x: hidden;
	}

	#product-product .breadcrumb {
		font-size: 11px;
		padding-bottom: 12px;
		margin-bottom: 12px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	#product-product .breadcrumb > li + li:before {
		padding: 0 4px;
	}

	body.product-detail-page {
		padding-bottom: 96px !important;
	}

	.cart-wrapper {
		display: none !important;
	}

	#product-product .product-top-row {
		display: block !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#product-product .product-top-row::before,
	#product-product .product-top-row::after {
		display: none !important;
	}

	#product-product .product-top-row > [class*="col-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		flex: none !important;
		display: block !important;
	}

	.product-gallery-col {
		margin-bottom: 0;
	}

	.product-details-pane {
		margin-top: 0;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.product-title {
		font-size: 20px !important;
		line-height: 1.35 !important;
		margin-bottom: 8px !important;
	}

	.product-rating-row {
		flex-wrap: wrap;
		gap: 6px 10px;
		margin-bottom: 12px !important;
		font-size: 12px;
	}

	.product-rating-row .divider {
		display: none;
	}

	.product-meta-badges {
		gap: 6px;
		margin-bottom: 16px;
		padding-bottom: 14px;
	}

	.meta-badge {
		font-size: 11px;
		padding: 5px 10px;
	}

	/* Mobilde satın alma sadece alt sabit çubukta */
	#product-product .product-price-box,
	#product-product .cart-action-panel,
	#product-product .product-options-form > .premium-alert {
		display: none !important;
	}

	.product-options-form {
		margin-bottom: 8px !important;
	}

	.trust-features-block {
		margin-top: 20px;
		padding-top: 16px;
		gap: 10px;
	}

	.product-tabs-section {
		margin-top: 20px;
	}

	.product-tabs-section .tab-content {
		padding: 16px;
		margin-bottom: 24px;
		font-size: 14px;
	}

	.product-tabs-section #tab-specification .table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 13px;
	}

	#product-product .product-slider-container {
		margin-top: 12px;
		margin-bottom: 8px;
		padding: 0;
	}

	/* Scrollable Nav Tabs on Mobile */
	.nav-tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		border-bottom: 2px solid var(--border-light) !important;
		margin-bottom: 20px !important;
		scrollbar-width: none !important;
	}
	.nav-tabs::-webkit-scrollbar {
		display: none !important;
	}
	.nav-tabs > li {
		float: none !important;
		flex: 0 0 auto !important;
	}
	.nav-tabs > li > a {
		margin-right: 0 !important;
		border: none !important;
		border-bottom: 2px solid transparent !important;
		padding: 10px 16px !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		color: var(--text-secondary) !important;
		background: transparent !important;
	}
	.nav-tabs > li.active > a,
	.nav-tabs > li.active > a:hover,
	.nav-tabs > li.active > a:focus {
		border: none !important;
		border-bottom: 2px solid var(--accent-color) !important;
		color: var(--primary-color) !important;
		background: transparent !important;
	}

	/* Rating Input wrapper handling for narrow viewports */
	.rating-input-wrapper {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 10px 15px !important;
		width: 100% !important;
		gap: 8px !important;
	}
	.rating-input-stars {
		margin-top: 0 !important;
	}
}

@media (max-width: 480px) {
	.notify-modal-box {
		padding: 25px 20px !important;
		margin: 10px !important;
	}
	
	.notify-modal-header h3 {
		font-size: 18px !important;
	}
}

/* Mobile Bottom Navigation Bar Styles */
.mobile-bottom-nav {
	display: none;
}

@media (max-width: 767px) {
	body {
		padding-bottom: 72px !important;
	}

	body.product-detail-page {
		padding-bottom: 130px !important;
	}

	.mobile-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 62px;
		background-color: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		z-index: 9999;
		justify-content: space-around;
		align-items: center;
		padding: 0 5px;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
	}

	.mobile-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-decoration: none !important;
		color: #6B7280;
		font-family: var(--font-sans, inherit);
		font-size: 10px;
		font-weight: 700;
		transition: color 0.2s ease;
		width: 20%;
		height: 100%;
		gap: 3px;
		padding-top: 4px;
	}

	.mobile-nav-item:hover, 
	.mobile-nav-item:focus, 
	.mobile-nav-item:active {
		color: var(--primary-color);
		text-decoration: none !important;
	}

	.mobile-nav-item i {
		font-size: 18px;
	}

	/* Floating Cart Button (FAB) */
	.mobile-cart-fab {
		overflow: visible;
		position: relative;
	}

	.mobile-cart-icon-wrap {
		width: 56px;
		height: 56px;
		background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
		border: 4px solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff !important;
		margin-top: -30px;
		box-shadow: 0 4px 12px rgba(27, 59, 43, 0.25);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		position: relative;
	}

	.mobile-cart-icon-wrap i {
		font-size: 20px;
		color: #fff !important;
	}

	.mobile-cart-fab:hover .mobile-cart-icon-wrap,
	.mobile-cart-fab:focus .mobile-cart-icon-wrap {
		transform: translateY(-2px) scale(1.05);
		box-shadow: 0 6px 16px rgba(27, 59, 43, 0.35);
	}

	.mobile-cart-badge {
		position: absolute;
		top: -4px;
		right: -4px;
		background-color: #d9534f;
		color: #fff !important;
		border: 2px solid #fff;
		border-radius: 50%;
		min-width: 20px;
		height: 20px;
		font-size: 9px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}

	/* Cart Pulse & Badge Pop Animations on Add to Cart */
	.cart-added-pulse {
		animation: cartPulse 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
	}

	.badge-pop {
		animation: badgePop 0.5s ease-out !important;
	}

	@keyframes cartPulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.25); box-shadow: 0 8px 24px rgba(27, 59, 43, 0.45); }
		100% { transform: scale(1); }
	}

	@keyframes badgePop {
		0% { transform: scale(1); }
		50% { transform: scale(1.5); }
		100% { transform: scale(1); }
	}

	/* Sticky Product Bar for Product Detail Pages */

	.mobile-sticky-product-bar {
		display: flex !important;
		position: fixed;
		bottom: 62px;
		left: 0;
		right: 0;
		min-height: 60px;
		height: auto;
		background-color: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		z-index: 9999;
		justify-content: space-between;
		align-items: center;
		gap: 6px;
		padding: 8px 10px;
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
		box-sizing: border-box;
	}

	.sticky-product-qty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		flex-shrink: 0;
	}

	.sticky-qty-label {
		display: none !important;
	}

	.sticky-quantity-selector {
		height: 38px;
		min-width: 86px;
	}

	.sticky-quantity-selector .qty-btn {
		width: 26px;
		min-width: 26px;
	}

	.sticky-quantity-selector .qty-input {
		width: 34px;
		min-width: 34px;
		font-size: 14px;
	}
	
	.sticky-product-price {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		flex: 0 0 auto;
		min-width: 0;
		max-width: none;
	}
	
	.sticky-product-price .price-now {
		font-family: var(--font-sans);
		font-size: 15px;
		font-weight: 800;
		color: var(--primary-color);
		line-height: 1.1;
		white-space: nowrap;
	}
	
	.sticky-product-price .price-then {
		font-family: var(--font-sans);
		font-size: 12px;
		color: var(--text-secondary);
		text-decoration: line-through;
		font-weight: 500;
	}
	
	.sticky-product-price .price-split {
		display: flex;
		flex-direction: column;
	}
	
	.sticky-product-action {
		flex: 0 0 auto;
		min-width: 0;
		max-width: none;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
	}

	.btn-sticky-wishlist {
		width: 38px;
		height: 38px;
		min-width: 38px;
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		background: var(--bg-white);
		color: var(--primary-color);
		font-size: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		flex-shrink: 0;
	}

	.btn-sticky-wishlist:active {
		background: var(--bg-secondary);
	}
	
	.btn-sticky-cart {
		background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
		color: #fff !important;
		border: none;
		border-radius: 999px;
		height: 38px;
		flex: 1 0 auto;
		min-width: 90px;
		max-width: 100%;
		padding: 0 10px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		white-space: nowrap;
		box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
	}
	
	.btn-sticky-notify {
		background: var(--package-green-light);
		color: var(--package-green-dark) !important;
		border: 1.5px solid rgba(var(--primary-rgb), 0.38);
		border-radius: 999px;
		height: 44px;
		width: 100%;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.08);
	}
}

/* Premium Alert Modal Styles (Global: Desktop & Mobile) */
.premium-alert-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(27, 59, 43, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.premium-alert-box {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	width: 100%;
	max-width: 420px;
	padding: 30px;
	position: relative;
	text-align: center;
	transform: scale(0.9);
	animation: alertBoxPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
	border: 1px solid rgba(255, 255, 255, 0.8);
}

@keyframes alertBoxPop {
	to {
		transform: scale(1);
	}
}

.premium-alert-close {
	position: absolute;
	top: 15px;
	right: 15px;
	border: none;
	background: transparent;
	font-size: 24px;
	color: var(--text-secondary);
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s ease;
}
.premium-alert-close:hover {
	color: var(--primary-color);
}

.premium-alert-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px auto;
	font-size: 28px;
}

.premium-alert-icon.icon-success {
	background-color: rgba(92, 138, 107, 0.1);
	color: var(--primary-color);
}

.premium-alert-icon.icon-danger {
	background-color: rgba(217, 83, 79, 0.1);
	color: #d9534f;
}

.premium-alert-icon.icon-warning {
	background-color: rgba(240, 173, 78, 0.1);
	color: #f0ad4e;
}

.premium-alert-icon.icon-info {
	background-color: rgba(91, 192, 222, 0.1);
	color: #5bc0de;
}

.premium-alert-title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 20px;
	color: var(--primary-color);
	margin-top: 0;
	margin-bottom: 10px;
}

.premium-alert-message {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 25px;
	line-height: 1.5;
}

.premium-alert-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.btn-premium-alert-primary {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 12px 20px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none !important;
	display: block;
	transition: all 0.2s ease;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
	text-align: center;
}
.btn-premium-alert-primary:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
	transform: translateY(-1px);
}

.btn-premium-alert-secondary {
	background-color: var(--bg-secondary);
	color: var(--primary-color) !important;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: 12px 20px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	width: 100%;
}
.btn-premium-alert-secondary:hover {
	background-color: var(--border-light);
}

.premium-alert-compact .premium-alert-actions {
	flex-direction: row;
	justify-content: center;
}
.premium-alert-compact .btn-premium-alert-primary {
	min-width: 120px;
}

/* Modern Cart Page Styles */
.cart-page-container {
	padding-top: 20px;
	padding-bottom: 40px;
}

.cart-page-title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 28px;
	color: var(--primary-color);
	margin-bottom: 25px;
}

.cart-weight {
	font-size: 16px;
	color: var(--text-secondary);
	font-weight: 500;
}

.cart-items-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 30px;
}

.cart-item-card {
	background-color: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-speed) ease;
}

.cart-item-card:hover {
	box-shadow: var(--shadow-md);
}

.cart-item-image {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	flex-shrink: 0;
}

.cart-item-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cart-item-details {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cart-item-name {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 16px;
	margin: 0;
}

.cart-item-name a {
	color: var(--text-primary);
	text-decoration: none !important;
	transition: color var(--transition-speed) ease;
}

.cart-item-name a:hover {
	color: var(--primary-color);
}

.cart-item-model {
	font-size: 12px;
	color: var(--text-secondary);
}

.cart-item-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.cart-item-option-badge {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-light);
	color: var(--text-secondary);
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 600;
}

.cart-item-reward {
	font-size: 12px;
	margin-top: 4px;
}

.cart-item-recurring {
	font-size: 11px;
	color: #31708f;
	background-color: #d9edf7;
	padding: 2px 6px;
	border-radius: var(--radius-xs);
	display: inline-block;
	margin-top: 4px;
}

.cart-item-price-info {
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-secondary);
}

.cart-item-actions {
	display: flex;
	align-items: center;
	gap: 25px;
	flex-shrink: 0;
}

.cart-qty-selector {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	overflow: hidden;
	height: 38px;
	background-color: var(--bg-white);
}

.cart-qty-selector .qty-btn {
	background: transparent;
	border: none;
	width: 32px;
	height: 100%;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	color: var(--text-secondary);
	transition: background-color var(--transition-speed) ease;
}

.cart-qty-selector .qty-btn:hover {
	background-color: var(--bg-secondary);
	color: var(--primary-color);
}

.cart-qty-selector .qty-input {
	border: none !important;
	border-left: 1px solid var(--border-light) !important;
	border-right: 1px solid var(--border-light) !important;
	border-radius: 0 !important;
	width: 44px !important;
	height: 100% !important;
	text-align: center !important;
	font-weight: 700 !important;
	color: var(--text-primary) !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.cart-item-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.btn-update-cart {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-light);
	color: var(--primary-color);
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-speed) ease;
}

.btn-update-cart:hover {
	background-color: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

.btn-remove-cart {
	background-color: rgba(217, 83, 79, 0.05);
	border: 1px solid rgba(217, 83, 79, 0.15);
	color: #d9534f;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-speed) ease;
}

.btn-remove-cart:hover {
	background-color: #d9534f;
	color: #fff;
	border-color: #d9534f;
}

.cart-item-total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 90px;
}

.cart-item-total .total-label {
	font-size: 10px;
	text-transform: uppercase;
	color: var(--text-secondary);
	font-weight: 600;
}

.cart-item-total .total-amount {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 18px;
	color: var(--primary-color);
}

/* Voucher Card */
.voucher-card {
	border-style: dashed;
	background-color: rgba(197, 160, 89, 0.02);
}

.voucher-icon-wrap {
	width: 80px;
	height: 80px;
	background-color: rgba(197, 160, 89, 0.08);
	color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	border-radius: var(--radius-sm);
}

/* Accordion Promo Section */
.cart-promo-section {
	background-color: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-top: 30px;
	box-shadow: var(--shadow-sm);
}

.promo-section-title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 18px;
	color: var(--primary-color);
	margin-top: 0;
	margin-bottom: 15px;
}

/* Free shipping progress bar */
.shipping-progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.shipping-progress {
	padding: 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-light);
	background: linear-gradient(180deg, #fffdf9 0%, #fff 100%);
}

.shipping-progress--general {
	border-color: rgba(var(--primary-rgb), 0.18);
}

.shipping-progress--campaign {
	border-color: rgba(243, 156, 18, 0.22);
	background: linear-gradient(180deg, #fffaf3 0%, #fff 100%);
}

.shipping-progress.is-complete {
	border-color: rgba(var(--primary-rgb), 0.35);
	background: linear-gradient(180deg, var(--package-green-light) 0%, #fff 100%);
}

.shipping-progress-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.shipping-progress-title {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.3;
}

.shipping-progress-title i {
	color: var(--accent-color);
	margin-right: 4px;
}

.shipping-progress-count {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 800;
	color: var(--text-secondary);
	white-space: nowrap;
}

.shipping-progress-track {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--bg-secondary);
	overflow: hidden;
	margin-bottom: 10px;
}

.shipping-progress-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--brand-gradient);
	transition: width 0.35s ease;
}

.shipping-progress--campaign .shipping-progress-fill {
	background: linear-gradient(90deg, #f39c12, #d35400);
}

.shipping-progress.is-complete .shipping-progress-fill {
	background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
}

.shipping-progress-message {
	margin: 0 0 4px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.4;
}

.shipping-progress-hint {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--text-secondary);
	line-height: 1.45;
}

.shipping-progress-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	color: var(--accent-color) !important;
	text-decoration: none !important;
}

.shipping-progress-cta:hover {
	color: var(--primary-color) !important;
}

.cart-drawer-shipping-progress {
	padding: 12px 14px 0;
	border-top: 1px solid var(--border-light);
}

.cart-drawer-shipping-progress .shipping-progress-wrap {
	margin-bottom: 12px;
}

.cart-drawer-shipping-progress .shipping-progress {
	padding: 12px;
}

.cart-drawer-shipping-progress .shipping-progress-title {
	font-size: 12px;
}

.cart-drawer-shipping-progress .shipping-progress-message {
	font-size: 12px;
}

.cart-drawer-shipping-progress .shipping-progress-hint {
	display: none;
}

.cart-drawer-shipping-progress .shipping-progress-cta {
	font-size: 11px;
}

/* Summary Card */
.cart-summary-card {
	background-color: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 25px;
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 90px;
}

.summary-title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 20px;
	color: var(--primary-color);
	margin-top: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 12px;
}

.summary-totals-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 25px;
}

.summary-total-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--text-secondary);
}

.summary-total-row.grand-total-row {
	border-top: 1px solid var(--border-light);
	padding-top: 15px;
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 800;
}

.summary-total-row.grand-total-row .total-value {
	font-size: 22px;
	color: var(--primary-color);
}

.summary-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.btn-checkout-primary {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 15px 22px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
	transition: all 0.2s ease;
}

.btn-checkout-primary:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

.btn-continue-shopping {
	background-color: #fff;
	color: var(--package-green-dark) !important;
	border: 1.5px solid rgba(var(--primary-rgb), 0.28);
	border-radius: 999px;
	padding: 12px 20px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all var(--transition-speed) ease;
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.06);
}

.btn-continue-shopping:hover {
	background-color: var(--package-green-light);
	border-color: rgba(var(--primary-rgb), 0.42);
}

/* Checkout Page */
.checkout-page-container {
	padding-top: 20px;
	padding-bottom: 48px;
}

.checkout-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.checkout-page-title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 28px;
	color: var(--primary-color);
	margin: 0;
}

.checkout-back-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	color: var(--primary-color) !important;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background var(--transition-speed) ease;
}

.checkout-back-cart:hover {
	background: var(--border-light);
	color: var(--primary-hover) !important;
}

.checkout-shipping-progress {
	max-width: 760px;
	margin: 0 auto 24px;
}

.checkout-main-col {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	float: none;
}

#checkout-checkout .checkout-layout-row {
	display: block;
}

#checkout-checkout #column-left,
#checkout-checkout #column-right {
	display: none;
}

.checkout-steps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.checkout-two-column {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 22px;
	align-items: start;
}

.checkout-form-column {
	min-width: 0;
}

.checkout-summary-column {
	min-width: 0;
	align-self: start;
}

.checkout-summary-card {
	padding: 18px;
	border-radius: var(--radius-md);
	background: #fff;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-md);
}

.checkout-flow-card {
	margin-bottom: 14px;
	padding: 20px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--package-green-lighter) 0%, #fff 100%);
	border: 1px solid rgba(var(--primary-rgb), 0.16);
	box-shadow: var(--shadow-sm);
}

.checkout-flow-head h2 {
	margin: 8px 0 6px;
	font-family: var(--font-sans);
	font-size: 22px;
	font-weight: 800;
	color: var(--primary-color);
}

.checkout-flow-head p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-secondary);
}

.checkout-flow-badge {
	display: inline-flex;
	padding: 6px 11px;
	border-radius: 999px;
	background: #eef9f2;
	color: var(--primary-color);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.checkout-mini-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 16px;
}

.checkout-mini-steps span {
	padding: 8px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--border-light);
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.checkout-summary-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border-light);
	margin-bottom: 14px;
}

.checkout-summary-head span {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--primary-color);
}

.checkout-summary-head strong {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 600;
}

.checkout-summary-head a {
	color: var(--primary-color);
	font-size: 12px;
	font-weight: 800;
	text-decoration: underline;
}

.checkout-summary-products {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: none;
	overflow-y: visible;
	padding-right: 2px;
}

.checkout-summary-product {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
}

.checkout-summary-thumb {
	width: 58px;
	height: 58px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid var(--border-light);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
}

.checkout-summary-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.checkout-summary-info a,
.checkout-summary-info span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.checkout-summary-info small {
	display: block;
	margin-top: 4px;
	color: var(--text-secondary);
	font-size: 12px;
}

.checkout-summary-price {
	color: var(--primary-color);
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.checkout-summary-progress {
	margin-top: 16px;
}

.checkout-summary-progress .shipping-progress-wrap {
	margin-bottom: 0;
}

.checkout-summary-totals {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--border-light);
}

.checkout-summary-total-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
	color: var(--text-secondary);
	font-size: 13px;
}

.checkout-summary-total-row strong {
	color: var(--text-primary);
}

.checkout-summary-total-row.is-grand {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--border-light);
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 800;
}

.checkout-summary-total-row.is-grand strong {
	color: var(--primary-color);
	font-size: 17px;
}

.checkout-summary-note {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 14px;
	padding: 11px 12px;
	border-radius: var(--radius-sm);
	background: var(--package-green-lighter);
	color: var(--text-secondary);
	font-size: 12px;
	line-height: 1.4;
}

.checkout-summary-note i {
	color: var(--primary-color);
}

@media (min-width: 992px) {
	.checkout-summary-column {
		position: sticky;
		top: 86px;
		z-index: 2;
	}

	.checkout-summary-card {
		max-height: calc(100vh - 110px);
		overflow-y: auto;
	}
}

.checkout-payment-panel .panel-title a.accordion-toggle {
	background: linear-gradient(180deg, #fffaf2 0%, #fff 100%) !important;
	border-color: rgba(245, 158, 11, 0.28) !important;
}

.checkout-payment-intro {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
}

.checkout-payment-intro strong {
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 800;
}

.checkout-payment-intro span {
	color: var(--text-secondary);
	font-size: 13px;
}

.checkout-payment-options {
	display: grid;
	gap: 9px;
	margin-bottom: 16px;
}

#checkout-checkout .checkout-payment-options .radio {
	margin-bottom: 0;
}

#checkout-checkout .checkout-payment-options .radio label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid rgba(var(--primary-rgb), 0.18);
	border-radius: var(--radius-sm);
	background: #fff;
	font-family: var(--font-sans);
	font-weight: 500;
	cursor: pointer;
}
#checkout-checkout .checkout-payment-options .radio input[type="radio"] {
	position: relative !important;
	margin-left: 0 !important;
	margin-top: 0;
	accent-color: var(--primary-color);
}

.checkout-comment-box {
	margin-top: 4px;
}

.checkout-comment-box label {
	display: block;
	margin-bottom: 7px;
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 700;
}

#checkout-checkout .checkout-comment-box textarea.form-control {
	min-height: 82px;
	resize: vertical;
}

#checkout-checkout .checkout-steps .panel {
	border: none;
	background: transparent;
	box-shadow: none;
	margin: 0;
	border-radius: 0;
}

#checkout-checkout .checkout-steps .panel-default {
	border: none;
}

#checkout-checkout .checkout-steps .panel-heading {
	padding: 0;
	border: none;
	background: transparent;
	border-radius: var(--radius-md);
}

#checkout-checkout .checkout-steps .panel-title {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--text-secondary);
	margin: 0;
}

#checkout-checkout .checkout-steps .panel-title a.accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	color: var(--primary-color) !important;
	text-decoration: none !important;
	transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

#checkout-checkout .checkout-steps .panel-title a.accordion-toggle:hover {
	border-color: rgba(var(--primary-rgb), 0.25);
}

#checkout-checkout .checkout-steps .panel.is-active .panel-title,
#checkout-checkout .checkout-steps .panel.is-active .panel-title a.accordion-toggle {
	color: var(--primary-color) !important;
}

#checkout-checkout .checkout-steps .panel.is-active .panel-title a.accordion-toggle {
	border-color: rgba(var(--primary-rgb), 0.35);
	box-shadow: var(--shadow-md);
	background: linear-gradient(180deg, #fff 0%, var(--package-green-lighter) 100%);
}

#checkout-checkout .checkout-steps .panel-title a.accordion-toggle i {
	color: var(--accent-color);
	font-size: 14px;
	transition: transform 0.2s ease;
}

#checkout-checkout .checkout-steps .panel.is-active .panel-title a.accordion-toggle i {
	transform: rotate(180deg);
}

#checkout-checkout .checkout-steps .panel-collapse .panel-body {
	padding: 20px 18px 22px;
	margin-top: 8px;
	border-radius: var(--radius-md);
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

#checkout-checkout .checkout-steps .panel-body h2,
#checkout-checkout .checkout-steps .checkout-box-title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 800;
	color: var(--primary-color);
	margin: 0 0 12px;
}

#checkout-checkout .checkout-steps legend {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-color);
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 10px;
	margin-bottom: 18px;
}

#checkout-checkout .checkout-steps .form-group {
	margin-bottom: 16px;
}

#checkout-checkout .checkout-steps .control-label {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 6px;
}

#checkout-checkout .checkout-steps .form-control {
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	box-shadow: none;
	height: 42px;
	font-family: var(--font-sans);
}

#checkout-checkout .checkout-steps .form-control:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px rgba(92, 138, 107, 0.12);
}

#checkout-checkout .checkout-steps textarea.form-control {
	height: auto;
	min-height: 110px;
}

#checkout-checkout .checkout-steps .radio,
#checkout-checkout .checkout-steps .checkbox {
	margin-top: 0;
	margin-bottom: 10px;
}

#checkout-checkout .checkout-steps .radio label,
#checkout-checkout .checkout-steps .checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-primary);
	font-family: var(--font-sans);
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

#checkout-checkout .checkout-steps .radio label:hover,
#checkout-checkout .checkout-steps .checkbox label:hover {
	border-color: rgba(var(--primary-rgb), 0.25);
}

#checkout-checkout .checkout-steps .radio input[type="radio"],
#checkout-checkout .checkout-steps .checkbox input[type="checkbox"] {
	position: relative !important;
	margin-left: 0 !important;
	margin-top: 3px;
	accent-color: var(--primary-color);
}

.checkout-fast-start {
	max-width: 560px;
	margin: 0 auto;
}

.checkout-fast-lead {
	text-align: center;
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 0 20px;
	line-height: 1.5;
}

.checkout-fast-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 4px;
}

.checkout-choice-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 148px;
	padding: 22px 16px;
	border: 2px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--bg-white);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	text-align: center;
}

.checkout-choice-card.is-only {
	grid-column: 1 / -1;
	max-width: 320px;
	margin: 0 auto;
	width: 100%;
}

.checkout-choice-card:hover,
.checkout-choice-card:focus {
	border-color: rgba(var(--primary-rgb), 0.45);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	outline: none;
}

.checkout-choice-guest {
	background: linear-gradient(180deg, #fff 0%, var(--package-green-lighter) 100%);
}

.checkout-choice-guest .checkout-choice-icon {
	color: var(--accent-color);
}

.checkout-choice-member .checkout-choice-icon {
	color: var(--primary-color);
}

.checkout-choice-icon {
	font-size: 28px;
	line-height: 1;
}

.checkout-choice-title {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 800;
	color: var(--primary-color);
}

.checkout-choice-desc {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.4;
	max-width: 180px;
}

.checkout-account-radio,
.checkout-account-trigger {
	display: none !important;
}

.checkout-member-panel {
	padding-top: 4px;
}

.checkout-member-title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 800;
	color: var(--primary-color);
	margin: 0 0 8px;
}

.checkout-member-lead {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 0 18px;
}

.checkout-forgot-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
}

.checkout-member-actions {
	justify-content: space-between;
}

.checkout-register-link {
	text-align: center;
	margin: 16px 0 0;
	font-size: 13px;
}

.checkout-register-link a {
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: underline;
}

.checkout-step-actions {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--border-light);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

#checkout-checkout .checkout-step-actions .btn-primary,
#checkout-checkout .checkout-steps .panel-body .btn-primary,
#checkout-checkout .checkout-steps .buttons .btn-primary,
#checkout-checkout .checkout-confirm-payment .btn-primary,
#checkout-checkout .checkout-confirm-payment button[type="submit"],
#checkout-checkout .checkout-confirm-payment input[type="submit"] {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	border: none;
	border-radius: 999px;
	padding: 12px 26px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.24);
	transition: all 0.2s ease;
	text-transform: none;
}

#checkout-checkout .checkout-step-actions .btn-primary:hover,
#checkout-checkout .checkout-steps .panel-body .btn-primary:hover,
#checkout-checkout .checkout-steps .buttons .btn-primary:hover,
#checkout-checkout .checkout-confirm-payment .btn-primary:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

.checkout-confirm-wrap {
	margin-top: 4px;
}

#checkout-checkout .checkout-confirm-table {
	margin-bottom: 18px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--border-light);
}

#checkout-checkout .checkout-confirm-table thead td {
	background: var(--bg-secondary);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	color: var(--primary-color);
	border-color: var(--border-light);
}

#checkout-checkout .checkout-confirm-table tbody td,
#checkout-checkout .checkout-confirm-table tfoot td {
	font-family: var(--font-sans);
	font-size: 13px;
	border-color: var(--border-light);
}

#checkout-checkout .checkout-confirm-table tfoot tr:last-child td {
	background: var(--package-green-light);
	font-size: 15px;
	font-weight: 800;
	color: var(--primary-color);
}

.checkout-confirm-payment {
	padding-top: 8px;
	width: 100%;
}

/* Tek sayfa checkout — tüm adımlar açık */
#checkout-checkout.checkout--one-page .checkout-steps .panel-collapse {
	display: block !important;
	height: auto !important;
	overflow: visible;
}

#checkout-checkout.checkout--one-page .checkout-steps .panel-collapse.in,
#checkout-checkout.checkout--one-page .checkout-steps .panel-collapse.collapsing {
	height: auto !important;
}

#checkout-checkout.checkout--one-page .checkout-steps .panel {
	margin-bottom: 14px;
}

#checkout-checkout.checkout--one-page .checkout-steps .panel-title a.accordion-toggle {
	cursor: default;
	pointer-events: none;
}

#checkout-checkout.checkout--one-page .checkout-steps .panel-title a.accordion-toggle i.fa-caret-down {
	display: none;
}

#checkout-checkout.checkout--one-page .checkout-mini-steps--one-page span.is-active {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
	border-color: transparent;
	color: #fff;
}

#checkout-checkout.checkout--one-page.checkout--paytr .checkout-two-column {
	grid-template-columns: 1fr;
}

#checkout-checkout.checkout--paytr .checkout-confirm-wrap {
	width: 100%;
	max-width: none;
}

#checkout-checkout.checkout--paytr .checkout-summary-column {
	order: 0;
}

#checkout-checkout .alert {
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
}

@media (max-width: 767px) {
	#checkout-checkout [class*="col-"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	.checkout-page-container {
		padding-top: 10px;
		padding-bottom: 28px;
	}

	.checkout-page-head {
		margin-bottom: 14px;
	}

	.checkout-page-title {
		font-size: 21px;
	}

	.checkout-back-cart {
		padding: 8px 12px;
		font-size: 12px;
	}

	.checkout-shipping-progress {
		margin-bottom: 14px;
	}

	.checkout-steps {
		gap: 10px;
	}

	.checkout-fast-start {
		max-width: none;
	}

	.checkout-fast-lead {
		margin-bottom: 12px;
		font-size: 13px;
		text-align: left;
	}

	.checkout-fast-choices {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.checkout-choice-card {
		min-height: 0;
		padding: 14px;
		align-items: flex-start;
		text-align: left;
		display: grid;
		grid-template-columns: 42px 1fr;
		grid-template-areas:
			"icon title"
			"icon desc";
		column-gap: 12px;
		row-gap: 2px;
		border-width: 1px;
		border-radius: var(--radius-sm);
	}

	.checkout-choice-card:hover,
	.checkout-choice-card:focus {
		transform: none;
	}

	.checkout-choice-icon {
		grid-area: icon;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: var(--package-green-light);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
	}

	.checkout-choice-title {
		grid-area: title;
		font-size: 15px;
		line-height: 1.2;
	}

	.checkout-choice-desc {
		grid-area: desc;
		max-width: none;
		font-size: 12px;
	}

	.checkout-member-title {
		font-size: 17px;
	}

	.checkout-member-lead {
		margin-bottom: 12px;
		font-size: 13px;
	}

	.checkout-member-actions {
		gap: 8px;
	}

	#checkout-checkout .checkout-steps .panel-title a.accordion-toggle {
		padding: 14px 14px;
		font-size: 14px;
	}

	#checkout-checkout .checkout-steps .panel-collapse .panel-body {
		padding: 16px 14px 18px;
	}

	.checkout-step-actions,
	#checkout-checkout .checkout-steps .buttons .pull-right {
		width: 100%;
		justify-content: stretch;
	}

	.checkout-step-actions .btn-default,
	.checkout-step-actions .btn-primary,
	#checkout-checkout .checkout-steps .panel-body .btn-primary,
	#checkout-checkout .checkout-steps .buttons .btn-primary {
		width: 100%;
	}
}

@media (max-width: 991px) {
	.checkout-two-column {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.checkout-summary-column {
		order: -1;
		position: static;
	}

	.checkout-summary-card {
		position: static;
		padding: 16px;
		max-height: none;
		overflow: visible;
	}

	.checkout-summary-products {
		max-height: none;
	}
}

@media (max-width: 767px) {
	.checkout-flow-card {
		padding: 16px;
		margin-bottom: 10px;
	}

	.checkout-flow-head h2 {
		font-size: 18px;
	}

	.checkout-flow-head p {
		font-size: 12px;
	}

	.checkout-mini-steps {
		gap: 6px;
		margin-top: 12px;
	}

	.checkout-mini-steps span {
		padding: 7px 6px;
		font-size: 11px;
	}

	.checkout-summary-head span {
		font-size: 16px;
	}

	.checkout-summary-product {
		grid-template-columns: 50px minmax(0, 1fr) auto;
		gap: 8px;
	}

	.checkout-summary-thumb {
		width: 50px;
		height: 50px;
	}

	.checkout-summary-info a,
	.checkout-summary-info span {
		font-size: 12px;
	}

	.checkout-summary-price {
		font-size: 12px;
	}

	.checkout-summary-products {
		max-height: none;
	}
}

/* Responsive Overrides */
@media (max-width: 991px) {
	.cart-page-container .row {
		display: flex !important;
		flex-direction: column !important;
	}
	
	.cart-left-col {
		order: 2 !important;
	}
	
	.cart-right-col {
		order: 1 !important;
		margin-bottom: 25px;
	}

	.cart-summary-card {
		position: static;
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.cart-page-title {
		font-size: 22px;
		margin-bottom: 15px;
	}
	
	.cart-item-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		position: relative;
		padding: 15px;
	}
	
	.cart-item-image {
		width: 60px;
		height: 60px;
	}
	
	.cart-item-name {
		font-size: 14px;
		padding-right: 30px;
	}
	
	.cart-item-actions {
		width: 100%;
		justify-content: space-between;
		border-top: 1px solid var(--border-light);
		padding-top: 12px;
		gap: 10px;
	}
	
	.cart-qty-selector {
		height: 34px;
	}
	
	.cart-item-buttons {
		flex-direction: row;
		gap: 8px;
	}
	
	.btn-update-cart,
	.btn-remove-cart {
		padding: 6px 10px;
		font-size: 10px;
	}
	
	.cart-item-total {
		align-items: flex-end;
		min-width: auto;
	}
	
	.cart-item-total .total-amount {
		font-size: 16px;
	}
}

/* Empty Cart Page Styling */
#error-not-found {
	text-align: center;
	padding: 80px 20px !important;
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-top: 30px;
	margin-bottom: 50px;
}

#error-not-found #content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

#error-not-found h1 {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 28px;
	color: var(--primary-color);
	margin-top: 0;
	margin-bottom: 5px;
}

#error-not-found p {
	font-size: 16px;
	color: var(--text-secondary);
	max-width: 400px;
	margin: 0 auto 20px auto;
	line-height: 1.6;
}

#error-not-found .buttons {
	float: none !important;
	display: flex;
	justify-content: center;
	width: 100%;
	border: none !important;
	background: transparent !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

#error-not-found .buttons .pull-right {
	float: none !important;
}

#error-not-found .btn-primary {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 14px 35px !important;
	font-family: var(--font-sans) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	display: inline-block;
}

#error-not-found .btn-primary:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28) !important;
}

/* Empty Cart Premium Icon */
#error-not-found #content::before {
	content: "\f291"; /* shopping basket icon */
	font-family: FontAwesome;
	font-size: 64px;
	color: var(--accent-color);
	background-color: rgba(197, 160, 89, 0.08);
	width: 110px;
	height: 110px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	animation: emptyCartPulse 2s infinite ease-in-out;
}

@keyframes emptyCartPulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.2);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 15px rgba(197, 160, 89, 0);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(197, 160, 89, 0);
	}
}

/* Empty Cart / 404 Mobile Responsive Fixes */
@media (max-width: 767px) {
	#error-not-found {
		padding: 40px 16px !important;
		margin-top: 20px !important;
		margin-bottom: 30px !important;
		border-radius: var(--radius-md) !important;
		margin-left: 12px !important;
		margin-right: 12px !important;
	}
	#error-not-found h1 {
		font-size: 22px !important;
	}
	#error-not-found p {
		font-size: 14px !important;
		margin-bottom: 15px !important;
	}
	#error-not-found #content::before {
		width: 90px !important;
		height: 90px !important;
		font-size: 48px !important;
		margin-bottom: 5px !important;
	}
	#error-not-found .btn-primary {
		padding: 12px 28px !important;
		font-size: 14px !important;
		width: 100% !important;
		max-width: 280px !important;
		text-align: center !important;
	}
}

/* ==========================================================================
   Premium Mobile Header, Slide Drawer & Responsiveness Overrides
   ========================================================================== */

/* 1. Mobile Header Styles */
@media (max-width: 991px) {
	/* Hide legacy category bar/toggle completely on mobile */
	#menu {
		display: none !important;
	}
}

.mobile-header-row {
	display: flex;
	flex-direction: column;
	background-color: var(--bg-primary);
	gap: 12px;
	padding: 10px 0;
	border-bottom: none;
}

.mobile-header-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 10px;
	min-height: 48px;
}

.mobile-header-left {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
}

.mobile-caypuan-header-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3px 6px;
	background: #eef7ee;
	border: 1.5px solid var(--primary-color);
	border-radius: 8px;
	text-decoration: none !important;
	font-family: 'Plus Jakarta Sans', var(--font-sans), sans-serif;
	min-width: 48px;
	box-shadow: 0 1px 3px rgba(var(--secondary-rgb), 0.08);
	transition: all 0.2s ease-in-out;
	line-height: 1;
}

.mobile-caypuan-header-badge:hover,
.mobile-caypuan-header-badge:focus {
	background: var(--primary-color);
	box-shadow: 0 3px 6px rgba(var(--secondary-rgb), 0.15);
}

.mobile-caypuan-header-badge:hover .cp-val,
.mobile-caypuan-header-badge:focus .cp-val,
.mobile-caypuan-header-badge:hover .cp-lbl,
.mobile-caypuan-header-badge:focus .cp-lbl {
	color: #fff !important;
}

.mobile-caypuan-header-badge.mobile-caypuan-guest-badge {
	background: #fffdf5;
	border: 1.5px dashed #f1c40f;
	box-shadow: 0 1px 3px rgba(241, 196, 15, 0.08);
}

.mobile-caypuan-header-badge.mobile-caypuan-guest-badge:hover,
.mobile-caypuan-header-badge.mobile-caypuan-guest-badge:focus {
	background: #f1c40f;
	border-style: solid;
	border-color: #f1c40f;
	box-shadow: 0 3px 6px rgba(241, 196, 15, 0.2);
}

.mobile-caypuan-header-badge .cp-val {
	font-size: 11px;
	font-weight: 800;
	color: var(--primary-color) !important;
	line-height: 1;
}

.mobile-caypuan-header-badge .cp-lbl {
	font-size: 8px;
	font-weight: 600;
	color: var(--primary-color) !important;
	opacity: 0.95;
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	line-height: 1;
}

.mobile-caypuan-header-badge.mobile-caypuan-guest-badge .cp-val {
	color: #d35400 !important;
}

.mobile-caypuan-header-badge.mobile-caypuan-guest-badge .cp-lbl {
	color: #d35400 !important;
}

.mobile-header-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.mobile-header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
}

.mobile-utility-btn {
	color: var(--primary-color) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	transition: color var(--transition-speed);
}

.mobile-utility-btn:hover {
	color: var(--accent-color) !important;
}

#logo-mobile {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

#logo-mobile img {
	max-height: 44px;
	width: auto;
	object-fit: contain;
}

#logo-mobile h1 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 1px;
}

#logo-mobile h1 a {
	color: var(--primary-color) !important;
}

.mobile-menu-toggle {
	background: transparent;
	border: none;
	color: var(--primary-color);
	cursor: pointer;
	padding: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition-speed);
}

.mobile-menu-toggle:hover {
	color: var(--accent-color);
}

.mobile-header-search {
	width: 100%;
	padding: 0 10px;
}

.mobile-header-search #search .input-lg {
	height: 42px !important;
	border-radius: var(--radius-sm) !important;
	font-size: 13px !important;
	padding-left: 15px !important;
}

.mobile-header-search #search .btn-lg {
	height: 42px !important;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
	position: absolute !important;
	z-index: 10 !important;
}

/* 2. Premium Slide Drawer Navigation */
.mobile-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(27, 59, 43, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 320px;
	max-width: 85%;
	background-color: #ffffff;
	z-index: 100001;
	box-shadow: none;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
	display: flex;
	flex-direction: column;
}

.mobile-drawer.active {
	transform: translateX(0);
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
}

body.drawer-open {
	overflow: hidden !important;
}

.drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid var(--border-light);
}

.drawer-title {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 800;
	color: var(--primary-color);
	letter-spacing: 1px;
}

.drawer-close {
	background: transparent;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition-speed);
}

.drawer-close:hover {
	color: var(--accent-color);
}

.drawer-body {
	flex-grow: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.drawer-section-title {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 800;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 0;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 6px;
}

.drawer-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.drawer-menu-item {
	display: flex;
	flex-direction: column;
}

.menu-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.drawer-menu-item a,
.drawer-menu-list li a {
	color: var(--text-primary) !important;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	padding: 8px 0;
	display: block;
	transition: color 0.2s;
}

.drawer-menu-item a:hover,
.drawer-menu-list li a:hover,
.drawer-menu-item a.special-link:hover {
	color: var(--accent-color) !important;
}

.submenu-toggle-btn {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.drawer-menu-item.open > .menu-item-row .submenu-toggle-btn {
	transform: rotate(180deg);
	color: var(--primary-color);
}

.drawer-submenu {
	list-style: none;
	padding: 0 0 0 15px;
	margin: 0;
	display: none;
	flex-direction: column;
	gap: 4px;
	border-left: 1px dashed var(--border-color);
	margin-bottom: 8px;
}

.drawer-menu-item.open .drawer-submenu {
	display: flex;
}

.drawer-submenu li a {
	font-size: 13px !important;
	font-weight: 500;
	color: var(--text-secondary) !important;
	padding: 6px 0;
}

.drawer-submenu li a:hover {
	color: var(--primary-color) !important;
}

.menu-special-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	line-height: 0;
	vertical-align: middle;
}

.menu-special-icon--flaticon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
	pointer-events: none;
}

#menu .menu-special-links > li > a.special-link:hover .menu-special-icon--flaticon img,
#menu .menu-special-links > li > a.special-link:focus .menu-special-icon--flaticon img {
	transform: scale(1.06);
}

.menu-special-icon--flaticon img {
	transition: transform 0.2s ease;
}

#menu .menu-special-links > li > a.special-link .menu-special-icon {
	margin: 0;
	position: relative;
	top: 0;
}

.drawer-menu-list .special-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
}

.drawer-menu-list .special-link {
	color: var(--text-primary) !important;
	font-weight: 600;
}

.drawer-menu-list .special-link:hover,
.drawer-menu-list .special-link:focus {
	color: var(--primary-color) !important;
}

/* 3. Integrated Coupon Form inside Summary Card */
.cart-summary-coupon {
	margin-top: 15px;
	margin-bottom: 20px;
	border-top: 1px solid var(--border-light);
	padding-top: 15px;
}

.cart-summary-coupon .panel-default {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	margin-bottom: 0 !important;
}

.cart-summary-coupon .panel-heading {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.cart-summary-coupon .panel-title a {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	color: var(--accent-color) !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none !important;
}

.cart-summary-coupon .panel-title a:hover {
	color: var(--primary-color) !important;
}

.cart-summary-coupon .panel-body {
	padding: 12px 0 0 0 !important;
}

.cart-summary-coupon .control-label {
	display: none !important; /* Hide generic bootstrap label since placeholder is sufficient */
}

.cart-summary-coupon .input-group {
	width: 100%;
	display: flex !important;
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: #fff;
	transition: border-color var(--transition-speed);
}

.cart-summary-coupon .input-group:focus-within {
	border-color: var(--primary-color);
}

.cart-summary-coupon .input-group .form-control {
	border: none !important;
	box-shadow: none !important;
	height: 40px !important;
	padding: 10px 12px !important;
	font-size: 13px !important;
	font-family: var(--font-sans) !important;
	flex-grow: 1 !important;
}

.cart-summary-coupon .input-group-btn {
	width: auto !important;
	display: block !important;
}

.cart-summary-coupon .input-group-btn .btn-primary {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%) !important;
	color: #fff !important;
	border: none !important;
	height: 40px !important;
	padding: 0 18px !important;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 13px !important;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	border-radius: 0 999px 999px 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.cart-summary-coupon .input-group-btn .btn-primary:hover {
	background-color: var(--accent-color) !important;
}

/* 4. Cart Page CSS Grid Mobile Optimizations */
@media (max-width: 767px) {
	.cart-items-list {
		gap: 12px !important;
	}

	.cart-item-card {
		display: grid !important;
		grid-template-columns: 75px 1fr !important;
		gap: 12px 15px !important;
		padding: 15px !important;
		flex-direction: row !important; /* overrides legacy flex-direction */
		align-items: stretch !important;
	}
	
	.cart-item-image {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 75px !important;
		height: 75px !important;
		margin-bottom: 0 !important;
	}
	
	.cart-item-details {
		grid-column: 2 !important;
		grid-row: 1 !important;
		gap: 2px !important;
		padding: 0 !important;
	}
	
	.cart-item-name {
		font-size: 13px !important;
		padding-right: 0 !important;
		line-height: 1.3 !important;
	}
	
	.cart-item-model {
		font-size: 11px !important;
	}
	
	.cart-item-options {
		gap: 4px !important;
		margin-top: 2px !important;
	}
	
	.cart-item-option-badge {
		font-size: 9px !important;
		padding: 1px 6px !important;
	}

	.cart-item-price-info {
		margin-top: 2px !important;
		font-size: 11px !important;
	}
	
	.cart-item-actions {
		grid-column: 1 / span 2 !important;
		grid-row: 2 !important;
		width: 100% !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		border-top: 1px solid var(--border-light) !important;
		padding-top: 10px !important;
		margin-top: 5px !important;
		gap: 10px !important;
	}
	
	.cart-qty-selector {
		height: 32px !important;
	}

	.cart-qty-selector .qty-btn {
		width: 28px !important;
		font-size: 14px !important;
	}

	.cart-qty-selector .qty-input {
		width: 36px !important;
		font-size: 12px !important;
	}
	
	.btn-update-cart span,
	.btn-remove-cart span {
		display: none !important;
	}

	.cart-item-buttons {
		flex-direction: row !important;
		gap: 8px !important;
	}
	
	.btn-update-cart,
	.btn-remove-cart {
		width: 32px !important;
		height: 32px !important;
		padding: 0 !important;
		font-size: 13px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 50% !important;
	}
	
	.cart-item-total {
		min-width: auto !important;
		align-items: flex-end !important;
	}
	
	.cart-item-total .total-label {
		font-size: 8px !important;
		margin-bottom: 1px !important;
	}
	
	.cart-item-total .total-amount {
		font-size: 15px !important;
	}
}

/* Home Page Slideshow Hiding & Banner Grid Override */
#common-home .slideshow {
	display: none !important;
}

/* Ana sayfa — tüm bloklar arası eşit boşluk */
#common-home {
	--home-section-gap: 32px;
	--home-section-head-gap: 16px;
}

#common-home #content > .promo-cards-grid,
#common-home #content > .freeshipping-section,
#common-home #content > .home-brand-strip,
#common-home #content > .home-wide-promo-row,
#common-home #content > .home-product-tabs,
#common-home #content > div:not(.row):not([class*="col-"]) {
	margin-top: 0 !important;
	margin-bottom: var(--home-section-gap) !important;
}

#common-home #content > *:last-child {
	margin-bottom: 0 !important;
}

#common-home .fsp-section-head,
#common-home .home-product-tab-head {
	margin-bottom: var(--home-section-head-gap) !important;
}

#common-home .home-product-tabs::before {
	display: none;
}

#common-home .home-product-tabs {
	margin-top: 0 !important;
	margin-bottom: var(--home-section-gap) !important;
}

#common-home .freeshipping-section .fsp-section-head + .freeshipping-products-wrap {
	margin-top: 0;
}

/* Slider alt boslugu kaldir — bolumler arasi 32px esit kalsin */
#common-home .freeshipping-products-scroll {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Baslik / marka / sekme kutulari — ayni dolgu ve gölge */
#common-home .fsp-section-head {
	padding: 14px 18px !important;
	box-shadow: 0 6px 18px rgba(44, 62, 47, 0.05) !important;
}

#common-home .home-brand-strip {
	padding: 14px 18px;
	box-shadow: 0 6px 18px rgba(44, 62, 47, 0.05);
}

#common-home .home-product-tab-head {
	max-width: 100%;
	box-shadow: 0 6px 18px rgba(44, 62, 47, 0.05);
}

.home-banner-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.banner-grid-item {
	position: relative;
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
	display: block;
	aspect-ratio: 280 / 160;
	background-color: #f7f7f7;
}

.banner-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.banner-grid-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.banner-grid-item:hover img {
	transform: scale(1.04);
}

.home-brand-strip {
	margin: 0 0 var(--home-section-gap, 32px);
	padding: 16px;
	border: 1px solid var(--border-light);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.home-brand-strip-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.home-brand-strip-head h3 {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 800;
	color: var(--primary-color);
}

.home-brand-strip-head a {
	color: var(--primary-color);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.home-brand-strip-grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 10px;
}

.home-brand-logo {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border: 1px solid #edf2f7;
	border-radius: 10px;
	background: #fbfefc;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-brand-logo:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--primary-rgb), 0.25);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.home-brand-logo img {
	max-width: 100%;
	max-height: 54px;
	object-fit: contain;
}

.home-wide-promo-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 auto var(--home-section-gap, 32px);
	max-width: 1180px;
}

.home-wide-promo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
	background: transparent;
	border: none;
	box-shadow: none;
}

.home-wide-promo-item--glass {
	background: linear-gradient(145deg, rgba(240,252,246,0.62) 0%, rgba(195,235,213,0.52) 60%, rgba(160,220,190,0.42) 100%);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	border-radius: 14px;
	padding: 8px 12px;
}

.home-wide-promo-item img {
	display: block;
	width: 100%;
	height: 92px;
	object-fit: contain;
	object-position: center;
	border-radius: 10px;
}

.home-product-tabs {
	margin: 0 0 var(--home-section-gap, 32px);
}

.home-product-tab-head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0 auto var(--home-section-head-gap, 16px);
	max-width: 820px;
	border: 1px solid rgba(var(--primary-rgb), 0.16);
	border-radius: 999px;
	background: var(--package-green-soft);
	padding: 5px;
	position: relative;
	overflow: visible;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.06);
}

.home-product-tab-btn {
	position: relative;
	height: 46px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--package-green-dark);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.25;
	padding: 0 14px;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.home-product-tab-btn:hover {
	background: rgba(255, 255, 255, 0.72);
	color: var(--package-green-dark);
	border-color: rgba(var(--primary-rgb), 0.12);
}

.home-product-tab-btn.active {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
	font-weight: 700;
}

.home-product-tab-btn.active:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	color: #fff;
}

.home-product-tab-btn.active::after {
	display: none;
}

.home-product-tab-panel {
	display: none;
}

.home-product-tab-panel.active {
	display: block;
}

.home-tab-product-grid {
	display: flex;
	flex-wrap: wrap;
	margin-left: -8px;
	margin-right: -8px;
}

.home-tab-product-grid .product-layout {
	width: 16.666666%;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 16px;
	display: flex;
}

.home-tab-product-grid .product-layout:nth-child(n+25) {
	display: none;
}

.home-tab-product-grid .product-thumb {
	width: 100%;
}

.home-tab-fsp-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.home-tab-fsp-grid .freeshipping-product-card:nth-child(n+25) {
	display: none;
}

@media (max-width: 767px) {
	#common-home {
		--home-section-gap: 24px;
		--home-section-head-gap: 14px;
	}

	.home-wide-promo-row {
		grid-template-columns: 1fr;
		gap: 10px;
		margin: 0 auto var(--home-section-gap, 24px);
	}

	.home-wide-promo-item img {
		height: 82px;
	}

	.home-product-tabs {
		margin: 0 0 var(--home-section-gap, 24px);
	}

	.home-product-tab-head {
		max-width: 100%;
		padding: 4px;
		gap: 6px;
	}

	.home-product-tab-btn {
		height: 40px;
		font-size: 11px;
		font-weight: 600;
		padding: 0 8px;
		line-height: 1.2;
	}

	.home-product-tab-btn.active {
		font-weight: 700;
	}

	.freeshipping-products-title {
		width: auto;
		min-width: 0;
		padding: 9px 14px 9px 38px;
		font-size: 15px;
	}

	.fsp-section-head-shipping {
		font-size: 7px;
		padding: 2px 6px;
	}

	.home-tab-product-grid {
		margin-left: -6px;
		margin-right: -6px;
	}

	.home-tab-product-grid .product-layout {
		width: 50%;
		padding-left: 6px;
		padding-right: 6px;
		margin-bottom: 12px;
	}

	.home-tab-product-grid .product-layout:nth-child(n+9) {
		display: none;
	}

	.home-tab-fsp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.home-tab-fsp-grid .freeshipping-product-card:nth-child(n+9) {
		display: none;
	}
}

@media (max-width: 991px) {
	.home-banner-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-bottom: 20px;
	}

	.home-brand-strip-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.home-banner-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin-bottom: 15px;
	}

	.home-brand-strip {
		padding: 12px;
	}

	.home-brand-strip-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.home-brand-logo {
		height: 60px;
		padding: 8px;
	}
}

/* ==========================================================================
   5. 4 Adetli Ücretsiz Kargo - Homepage Product Section
   ========================================================================== */
.freeshipping-section {
	margin-bottom: var(--home-section-gap, 32px);
	position: relative;
}

.freeshipping-section .fsp-section-head + .freeshipping-products-wrap {
	margin-top: 0;
}

.freeshipping-products-wrap {
	position: relative;
}

.freeshipping-promo-banner {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 22px;
	padding: 18px 22px;
	border-radius: var(--radius-md);
	background: linear-gradient(160deg, #f8fffb 0%, #eef9f2 52%, #fff 100%);
	border: 1px solid rgba(var(--primary-rgb), 0.16);
	box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.08);
	text-decoration: none !important;
	color: inherit;
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.freeshipping-promo-banner::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 42%;
	height: 100%;
	background: radial-gradient(circle at 80% 50%, rgba(var(--primary-rgb), 0.1) 0%, transparent 68%);
	pointer-events: none;
}

.freeshipping-promo-banner:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.12);
	border-color: rgba(var(--primary-rgb), 0.28);
	text-decoration: none !important;
	color: inherit;
}

.freeshipping-promo-gif-wrap {
	flex: 0 0 auto;
	width: 200px;
	max-width: 38%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.freeshipping-promo-gif {
	width: 100%;
	max-width: 200px;
	height: auto;
	display: block;
	border-radius: 10px;
	object-fit: contain;
}

.freeshipping-promo-content {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.freeshipping-promo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-transform: none;
	margin-bottom: 10px;
}

.freeshipping-promo-title {
	font-family: var(--font-sans);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--package-green-dark);
	margin: 0 0 8px;
	letter-spacing: -0.2px;
}

.freeshipping-promo-desc {
	font-family: var(--font-sans);
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 500;
	color: var(--text-secondary);
	margin: 0 0 14px;
	line-height: 1.55;
}

.freeshipping-promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff !important;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.freeshipping-promo-banner:hover .freeshipping-promo-cta {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.28);
}

.freeshipping-promo-banner:hover .freeshipping-promo-cta i {
	transform: translateX(3px);
}

.freeshipping-promo-cta i {
	transition: transform 0.2s ease;
}

.freeshipping-products-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
	position: relative;
}

/* Paket bölüm başlıkları — promo kartlarla uyumlu */
.fsp-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 12px 16px;
	margin-bottom: var(--home-section-head-gap, 16px);
	border-radius: 14px;
	position: relative;
	overflow: hidden;
}

.fsp-section-head::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(145deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.35) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.fsp-section-head--green {
	background: linear-gradient(145deg, rgba(240,252,246,0.62) 0%, rgba(195,235,213,0.52) 60%, rgba(160,220,190,0.42) 100%);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
}

.fsp-section-head--orange {
	background: linear-gradient(145deg, rgba(255,247,240,0.62) 0%, rgba(253,225,195,0.52) 60%, rgba(245,200,160,0.42) 100%);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
}

.fsp-section-head--earth {
	background: linear-gradient(145deg, rgba(240,246,238,0.62) 0%, rgba(210,230,200,0.52) 60%, rgba(185,215,170,0.42) 100%);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
}

.fsp-section-head-content {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 2;
}

.fsp-section-head-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.fsp-section-head-label {
	font-family: var(--font-sans);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	line-height: 1.2;
}

.fsp-section-head--green .fsp-section-head-label { color: var(--primary-color); }
.fsp-section-head--orange .fsp-section-head-label { color: #c96828; }
.fsp-section-head--earth .fsp-section-head-label { color: #4a6a3a; }

.fsp-section-head-title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
	color: var(--text-primary);
	letter-spacing: -0.2px;
}

.fsp-section-head-highlight {
	color: var(--text-primary);
}

.fsp-section-head--green .fsp-section-head-highlight { color: var(--primary-color); }
.fsp-section-head--orange .fsp-section-head-highlight { color: #c96828; }
.fsp-section-head--earth .fsp-section-head-highlight { color: #4a6a3a; }

.fsp-section-head-shipping {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 7.5px;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #fff;
	line-height: 1;
}

.fsp-section-head--green .fsp-section-head-shipping {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
	box-shadow: 0 1px 4px rgba(26, 138, 72, 0.3);
}

.fsp-section-head--orange .fsp-section-head-shipping {
	background: linear-gradient(135deg, #c96828 0%, #e07b39 100%);
	box-shadow: 0 1px 4px rgba(201, 104, 40, 0.3);
}

.fsp-section-head--earth .fsp-section-head-shipping {
	background: linear-gradient(135deg, #4a6a3a 0%, #5d8248 100%);
	box-shadow: 0 1px 4px rgba(74, 106, 58, 0.3);
}

.fsp-section-head-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 6px 12px 6px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	position: relative;
	z-index: 2;
	transition: transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease;
}

.fsp-section-head--green .fsp-section-head-cta { color: var(--primary-color) !important; }
.fsp-section-head--orange .fsp-section-head-cta { color: #c96828 !important; }
.fsp-section-head--earth .fsp-section-head-cta { color: #4a6a3a !important; }

.fsp-section-head-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	gap: 10px;
	text-decoration: none !important;
}

.fsp-section-head-cta-qty {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
}

.fsp-section-head--green .fsp-section-head-cta-qty {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-color));
}

.fsp-section-head--orange .fsp-section-head-cta-qty {
	background: linear-gradient(135deg, #e07b39, #c96828);
}

.fsp-section-head--earth .fsp-section-head-cta-qty {
	background: linear-gradient(135deg, #5d8248, #4a6a3a);
}

.fsp-section-head-cta-text {
	line-height: 1;
}

.fsp-section-head.freeshipping-products-header {
	margin-bottom: 28px;
	flex-wrap: nowrap;
}

.freeshipping-products-title {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 18px;
	color: var(--primary-color);
	margin: 0;
	padding: 10px 16px 10px 44px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--package-green-lighter) 0%, #fff7ed 100%);
	border: 1px solid rgba(var(--primary-rgb), 0.16);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.06);
	position: relative;
	letter-spacing: -0.2px;
}

.freeshipping-products-title::before {
	content: '\f06c';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'FontAwesome';
	font-size: 16px;
	color: var(--accent-color);
}

.home-product-tabs::before {
	content: '';
	display: block;
	width: 100%;
	max-width: 560px;
	height: 1px;
	margin: 0 auto 8px;
	background: var(--border-light);
}

.freeshipping-view-all {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 13px;
	color: var(--accent-color) !important;
	text-decoration: none !important;
	transition: color 0.2s;
	white-space: nowrap;
}

.freeshipping-view-all:hover {
	color: var(--primary-color) !important;
}

.freeshipping-view-all i {
	margin-left: 4px;
	transition: transform 0.2s;
}

.freeshipping-view-all:hover i {
	transform: translateX(3px);
}

/* Horizontal Scrollable Track */
.freeshipping-products-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 12px;
	margin-bottom: 0;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	position: relative;
	scrollbar-width: none;
}

.freeshipping-products-scroll::-webkit-scrollbar {
	display: none;
}

.freeshipping-products-scroll::-webkit-scrollbar {
	display: none;
}

.freeshipping-products-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 80px) / 6);
	gap: 16px;
	width: auto;
	will-change: scroll-position;
}

/* Product Cards */
.freeshipping-product-card {
	width: auto;
	max-width: 100%;
	min-width: 0;
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex;
	flex-direction: column;
}

.freeshipping-slider-nav {
	display: flex;
	justify-content: space-between;
	gap: 7px;
	margin: 0;
	position: absolute;
	left: 6px;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 8;
	pointer-events: none;
}

.freeshipping-nav-btn {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(var(--primary-rgb), 0.2);
	border-radius: 50%;
	background: #fff;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
	pointer-events: auto;
}

.freeshipping-nav-btn:hover {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

.freeshipping-product-card:hover {
	transform: none;
	box-shadow: none;
	border-color: rgba(243, 156, 18, 0.45);
}

.fsp-image {
	position: relative;
	background-color: #fff;
	overflow: hidden;
}

.fsp-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.freeshipping-product-card:hover .fsp-image img {
	transform: scale(1.05);
}

.fsp-sale-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: #e74c3c;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 8px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.5px;
}

.fsp-stock-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #95a5a6;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 9px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
}

/* Promo ticker: Ücretsiz Kargo ↔ Adet (bölüm rengine göre) */
.fsp-promo-ticker {
	--fsp-ticker-h: 22px;
	position: relative;
	width: 100%;
	height: var(--fsp-ticker-h);
	overflow: hidden;
	z-index: 1;
	border-radius: 0;
	margin: -10px -12px 8px;
	width: calc(100% + 24px);
}

.fsp-promo-ticker-roll {
	display: block;
	width: 100%;
	height: calc(var(--fsp-ticker-h) * 2);
	-webkit-animation: fspPromoRoll 4s ease-in-out infinite;
	animation: fspPromoRoll 4s ease-in-out infinite;
	will-change: transform;
}

.fsp-promo-ticker-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	box-sizing: border-box;
	width: 100%;
	height: var(--fsp-ticker-h);
	min-height: var(--fsp-ticker-h);
	max-height: var(--fsp-ticker-h);
	padding: 0 10px;
	margin: 0;
	overflow: hidden;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--text-primary);
	white-space: nowrap;
	text-align: center;
	letter-spacing: 0.2px;
}

.fsp-promo-ticker-item i {
	flex-shrink: 0;
	font-size: 11px;
	line-height: 1;
}

.fsp-promo-ticker-item--cargo {
	background: linear-gradient(145deg, rgba(250,255,252,0.98) 0%, rgba(225,245,235,0.92) 60%, rgba(205,235,220,0.86) 100%);
	color: var(--primary-color);
}

.fsp-promo-ticker-item--qty {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
	color: #fff;
}

.freeshipping-section--four .fsp-promo-ticker-item--cargo,
.fsp-card--four .fsp-promo-ticker-item--cargo {
	background: linear-gradient(145deg, rgba(250,255,252,0.98) 0%, rgba(225,245,235,0.92) 60%, rgba(205,235,220,0.86) 100%);
	color: var(--primary-color);
}

.freeshipping-section--four .fsp-promo-ticker-item--qty,
.fsp-card--four .fsp-promo-ticker-item--qty {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 55%, #2a9d5c 100%);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.freeshipping-section--six .fsp-promo-ticker-item--cargo,
.fsp-card--six .fsp-promo-ticker-item--cargo {
	background: linear-gradient(145deg, rgba(255,247,240,0.98) 0%, rgba(253,225,195,0.92) 60%, rgba(245,200,160,0.86) 100%);
	color: #c96828;
}

.freeshipping-section--six .fsp-promo-ticker-item--qty,
.fsp-card--six .fsp-promo-ticker-item--qty {
	background: linear-gradient(135deg, #c96828 0%, #e07b39 55%, #e8923a 100%);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.freeshipping-section--earth .fsp-promo-ticker-item--cargo,
.fsp-card--earth .fsp-promo-ticker-item--cargo {
	background: linear-gradient(145deg, rgba(240,246,238,0.98) 0%, rgba(210,230,200,0.92) 60%, rgba(185,215,170,0.86) 100%);
	color: #4a6a3a;
}

.freeshipping-section--earth .fsp-promo-ticker-item--qty,
.fsp-card--earth .fsp-promo-ticker-item--qty {
	background: linear-gradient(135deg, #4a6a3a 0%, #5d8248 55%, #6b9460 100%);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@-webkit-keyframes fspPromoRoll {
	0%, 44% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	50%, 94% {
		-webkit-transform: translate3d(0, calc(-1 * var(--fsp-ticker-h)), 0);
		transform: translate3d(0, calc(-1 * var(--fsp-ticker-h)), 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fspPromoRoll {
	0%, 44% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	50%, 94% {
		-webkit-transform: translate3d(0, calc(-1 * var(--fsp-ticker-h)), 0);
		transform: translate3d(0, calc(-1 * var(--fsp-ticker-h)), 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.fsp-info {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
}

.fsp-name {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	color: var(--text-primary) !important;
	text-decoration: none !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 36px;
	transition: color 0.2s;
}

.fsp-name:hover {
	color: var(--primary-color) !important;
}

.fsp-rating {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 11px;
	color: #f5a623;
}

.fsp-rating span {
	color: var(--text-secondary);
	font-size: 10px;
	margin-left: 3px;
}

.fsp-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
}

.fsp-price-current {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 14px;
	color: var(--primary-color);
}

.fsp-price-old {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	color: var(--text-secondary);
	text-decoration: line-through;
}

.fsp-actions {
	padding: 0 12px 12px;
	display: flex;
	gap: 6px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.freeshipping-product-card:hover .fsp-actions,
.freeshipping-product-card:focus-within .fsp-actions {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.fsp-add-cart {
	flex: 1 1 auto;
	width: auto;
	height: 38px;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff !important;
	border: none;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.fsp-add-cart:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.28);
}

.freeshipping-section--six .fsp-add-cart,
.fsp-card--six .fsp-add-cart {
	background: linear-gradient(135deg, var(--package-orange) 0%, var(--package-orange-dark) 100%);
	box-shadow: 0 4px 12px rgba(196, 92, 46, 0.22);
}

.freeshipping-section--six .fsp-add-cart:hover,
.fsp-card--six .fsp-add-cart:hover {
	background: linear-gradient(135deg, var(--package-orange-dark) 0%, #8f3f1f 100%);
	box-shadow: 0 6px 16px rgba(196, 92, 46, 0.28);
}

.fsp-wishlist {
	width: 38px;
	min-width: 38px;
	height: 38px;
	border: 1.5px solid rgba(var(--primary-rgb), 0.22);
	border-radius: 50%;
	background: var(--package-green-light);
	color: var(--package-green-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.fsp-wishlist:hover {
	background: var(--package-green);
	color: #fff;
	border-color: var(--package-green);
}

.freeshipping-section--six .fsp-wishlist:hover,
.fsp-card--six .fsp-wishlist:hover {
	background: var(--package-orange);
	border-color: var(--package-orange);
}

.fsp-add-cart.fsp-out-of-stock {
	background: #e0e0e0 !important;
	color: #999 !important;
	cursor: not-allowed;
	box-shadow: none !important;
}

/* Mobile adjustments for freeshipping section */
@media (max-width: 767px) {
	.freeshipping-promo-banner {
		flex-direction: column;
		text-align: center;
		padding: 16px 14px;
		gap: 14px;
	}

	.freeshipping-promo-gif-wrap {
		width: 100%;
		max-width: 100%;
	}

	.freeshipping-promo-gif {
		max-width: 180px;
		margin: 0 auto;
	}

	.freeshipping-promo-eyebrow {
		font-size: 10px;
	}

	.freeshipping-promo-title {
		font-size: 22px;
	}

	.freeshipping-promo-desc {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.freeshipping-products-header:not(.fsp-section-head) {
		flex-direction: column;
		align-items: flex-start;
	}

	.fsp-section-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		align-items: center;
		column-gap: 8px;
		row-gap: 4px;
		padding: 10px 10px;
		margin-bottom: 14px;
		flex-wrap: nowrap;
	}

	.fsp-section-head-content {
		display: contents;
	}

	.fsp-section-head-label {
		grid-column: 1 / -1;
		font-size: 8px;
		letter-spacing: 0.9px;
	}

	.fsp-section-head-row {
		display: contents;
	}

	.fsp-section-head-title {
		grid-column: 1;
		grid-row: 2;
		font-size: 13px;
		line-height: 1.2;
	}

	.fsp-section-head-shipping {
		grid-column: 1;
		grid-row: 3;
		font-size: 6.5px;
		padding: 2px 6px;
	}

	.fsp-section-head-cta {
		grid-column: 2;
		grid-row: 2 / 4;
		align-self: center;
		width: auto;
		padding: 4px 8px 4px 4px;
		font-size: 10px;
		gap: 6px;
	}

	.fsp-section-head-cta-qty {
		width: 24px;
		height: 24px;
		font-size: 9px;
	}

	.fsp-section-head-cta svg {
		width: 10px;
		height: 10px;
	}

	.freeshipping-section {
		margin-bottom: var(--home-section-gap, 24px);
	}

	.freeshipping-section .fsp-section-head + .freeshipping-products-wrap {
		margin-top: 2px;
	}

	#common-home .freeshipping-products-scroll {
		overflow-x: auto;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.freeshipping-products-track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 10px) / 2);
		gap: 10px;
		width: auto;
		min-width: auto;
	}

	.freeshipping-slider-nav {
		display: flex;
		left: 2px;
		right: 2px;
		top: 50%;
	}

	.freeshipping-nav-btn {
		width: 30px;
		height: 30px;
	}

	.freeshipping-product-card {
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.fsp-image img {
		width: 100%;
		height: auto;
	}

	.fsp-info {
		padding: 8px;
	}

	.fsp-name {
		font-size: 12px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 32px;
	}

	.fsp-price-current {
		font-size: 12px;
	}

	.fsp-price-old {
		font-size: 9px;
	}

	.fsp-actions {
		padding: 0 8px 8px;
		opacity: 0;
		transform: translateY(8px);
		pointer-events: none;
	}

	.freeshipping-product-card:hover .fsp-actions,
	.freeshipping-product-card:focus-within .fsp-actions,
	.freeshipping-product-card.is-actions-visible .fsp-actions {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.fsp-add-cart {
		height: 32px;
		font-size: 11px;
	}

	.fsp-promo-ticker {
		--fsp-ticker-h: 20px;
		margin: -8px -8px 7px;
		width: calc(100% + 16px);
	}

	.fsp-promo-ticker-item {
		font-size: 9px;
		padding: 0 8px;
		gap: 4px;
	}

	.fsp-promo-ticker-item i {
		font-size: 10px;
	}
}

/* 5. Animated Desktop Announcement Banner styling */
.desktop-top-announcement {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(160deg, #fffcf8 0%, #fdf5ed 48%, #fde8d6 100%);
	box-shadow: 0 4px 14px rgba(196, 92, 46, 0.08);
	cursor: default;
	border-bottom: 1px solid rgba(212, 124, 64, 0.2);
}

.desktop-top-announcement--ten {
	background: linear-gradient(160deg, #fffcf8 0%, #fdf5ed 52%, #fde8d6 100%);
}

.desktop-top-announcement .announcement-inner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.desktop-top-announcement img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
	user-select: none;
}

/* Diagonal sweeping light shimmer effect */
.desktop-top-announcement::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.3) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-25deg);
	animation: topBannerShine 6s infinite ease-in-out;
}

@keyframes topBannerShine {
	0% {
		left: -150%;
	}
	20% {
		left: 150%;
	}
	100% {
		left: 150%;
	}
}

/* ============================================================
   CUSTOM 5-COLUMN GRID (Bootstrap 3 doesn't have col-*-5)
   ============================================================ */
.col-grid-5 {
	width: 20%;
	float: left;
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}

@media (max-width: 991px) {
	.col-grid-5 {
		width: 33.33333333%;
	}
}

@media (max-width: 767px) {
	.col-grid-5 {
		width: 50%;
		padding-right: 8px;
		padding-left: 8px;
	}
}

/* ============================================================
   PREMIUM CATEGORY PAGE STYLES
   ============================================================ */

/* --- Category Page Container --- */
#product-category {
	padding-top: 10px;
}

#product-category h2 {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 24px;
	color: var(--primary-color);
	margin-bottom: 8px;
	margin-top: 0;
	letter-spacing: -0.3px;
}

#product-category hr {
	margin: 10px 0;
	border-color: var(--border-light);
}

#product-category .breadcrumb {
	background: transparent;
	padding: 8px 0;
	margin-bottom: 10px;
	font-family: var(--font-sans);
	font-size: 12px;
}

#product-category .breadcrumb li a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.2s;
}

#product-category .breadcrumb li a:hover {
	color: var(--primary-color);
}

/* --- Premium Sidebar Category Navigation --- */
#column-left .list-group {
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	border: 1px solid var(--border-light);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	margin-bottom: 20px;
	background: var(--bg-white);
}

#column-left .list-group-item {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	padding: 11px 16px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	background: transparent;
	transition: all 0.2s ease;
	position: relative;
}

#column-left .list-group-item:last-child {
	border-bottom: none;
}

#column-left .list-group-item:hover {
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.04), rgba(245, 166, 35, 0.04));
	color: var(--primary-color);
	padding-left: 20px;
}

#column-left .list-group-item.active {
	background: var(--brand-gradient) !important;
	color: #fff !important;
	font-weight: 700;
	border-color: transparent !important;
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
}

#column-left .list-group-item.active:hover {
	padding-left: 16px;
}

/* --- Premium Sidebar Filter Panel --- */
#column-left .panel {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	background: var(--bg-white);
	margin-bottom: 20px;
}

#column-left .panel-heading {
	background: var(--bg-white);
	border-bottom: 1px solid var(--border-light);
	padding: 14px 16px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	color: var(--primary-color);
	letter-spacing: -0.2px;
}

#column-left .panel .list-group {
	border: none;
	box-shadow: none;
	margin-bottom: 0;
	border-radius: 0;
}

#column-left .panel .list-group-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	font-weight: 600;
	color: var(--text-primary);
	font-size: 13px;
}

#column-left .panel .list-group-item .checkbox {
	margin: 4px 0;
}

#column-left .panel .list-group-item .checkbox label {
	font-weight: 400;
	font-size: 13px;
	color: var(--text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color 0.2s;
}

#column-left .panel .list-group-item .checkbox label:hover {
	color: var(--primary-color);
}

/* Custom Checkbox Styling */
#column-left .panel .checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--border-color);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

#column-left .panel .checkbox input[type="checkbox"]:checked {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

#column-left .panel .checkbox input[type="checkbox"]:checked::after {
	content: '\2713';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

#column-left .panel .checkbox input[type="checkbox"]:hover {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Filter Button */
#column-left .panel-footer {
	background: var(--bg-white);
	border-top: 1px solid var(--border-light);
	padding: 12px 16px;
}

#column-left .panel-footer .btn-primary {
	width: 100%;
	background: var(--brand-gradient);
	border: none;
	border-radius: var(--radius-sm, 6px);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 13px;
	height: 38px;
	color: #fff;
	transition: all 0.2s ease;
	text-transform: none;
	letter-spacing: normal;
}

#column-left .panel-footer .btn-primary:hover {
	background: var(--brand-gradient-hover);
	box-shadow: 0 4px 12px rgba(211, 84, 0, 0.25);
}

/* --- Sidebar Banner Module --- */
#column-left .swiper-viewport {
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	border: 1px solid var(--border-light);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* --- Category Control Bar (Sort / Limit / View) --- */
.category-control-bar {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md, 8px);
	padding: 8px 16px;
	margin-top: 6px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.category-control-bar > div:nth-child(2) {
	display: none !important;
}

.category-control-bar > div:nth-child(1) {
	width: 300px !important;
	max-width: 100%;
}

@media (max-width: 767px) {
	.category-control-bar > div:nth-child(1) {
		width: 100% !important;
	}
}

.category-control-bar .btn-group-sm .btn {
	border-radius: var(--radius-sm, 6px) !important;
	border: 1px solid var(--border-light);
	background: var(--bg-white);
	color: var(--text-secondary);
	transition: all 0.2s ease;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.category-control-bar .btn-group-sm .btn:hover,
.category-control-bar .btn-group-sm .btn.active {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.category-control-bar .btn-group-sm .btn + .btn {
	margin-left: 4px;
}

.category-control-bar .form-group {
	margin-bottom: 0 !important;
}

.category-control-bar .input-group {
	display: flex !important;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm, 6px);
	background: var(--bg-secondary);
	overflow: hidden;
	transition: all 0.2s ease;
	width: 100%;
}

.category-control-bar .input-group:focus-within,
.category-control-bar .input-group:hover {
	border-color: var(--primary-color);
	background: var(--bg-white);
}

.category-control-bar .input-group-addon {
	background: transparent !important;
	border: none !important;
	padding: 0 8px 0 12px !important;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.category-control-bar .input-group .form-control {
	background: transparent !important;
	border: none !important;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
	height: 34px;
	box-shadow: none !important;
	cursor: pointer;
	padding: 0 8px !important;
	display: block;
	width: 100%;
}

/* --- Category Page Subcategory Chips --- */
.subcategory-chips {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md, 8px);
	padding: 14px 16px;
	margin-bottom: 18px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.subcategory-chips-title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	color: var(--primary-color);
	display: block;
	margin-bottom: 10px;
}

.subcategory-chips-title i {
	margin-right: 6px;
	font-size: 13px;
}

.subcategory-chips-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.subcategory-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), rgba(245, 166, 35, 0.06));
	border: 1px solid var(--border-light);
	border-radius: 20px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	text-decoration: none !important;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.subcategory-chip:hover {
	background: var(--brand-gradient);
	color: #fff !important;
	border-color: transparent;
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
	transform: translateY(-1px);
}

/* --- Category Page Subcategory Refinement --- */
#product-category h3 {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 16px;
	color: var(--text-primary);
	margin-bottom: 12px;
}

/* --- Category Page Pagination --- */
#product-category .pagination > li > a,
#product-category .pagination > li > span {
	border: 1px solid var(--border-light);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--radius-sm, 6px) !important;
	margin: 0 2px;
	transition: all 0.2s ease;
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#product-category .pagination > li > a:hover {
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(245, 166, 35, 0.08));
	border-color: var(--primary-color);
	color: var(--primary-color);
}

#product-category .pagination > .active > a,
#product-category .pagination > .active > span {
	background: var(--brand-gradient) !important;
	border-color: transparent !important;
	color: #fff !important;
}

/* --- Out of Stock Badge on Category Page --- */
.out-of-stock-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(231, 76, 60, 0.9);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	z-index: 2;
}

/* --- Category Description Section --- */
#product-category hr {
	border-color: var(--border-light);
	margin: 16px 0;
}

/* --- Brand Page Themed Banner & Category Pills --- */
.brand-store-banner {
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 0%, rgba(76, 139, 97, 0.08) 100%);
	border: 1px solid var(--border-light);
	border-radius: 12px;
	padding: 24px 32px;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0 4px 15px rgba(27, 59, 43, 0.02);
}

.brand-store-banner::after {
	content: '';
	position: absolute;
	right: -30px;
	bottom: -30px;
	width: 150px;
	height: 150px;
	background: rgba(var(--primary-rgb), 0.02);
	border-radius: 50%;
	pointer-events: none;
}

.brand-store-banner::before {
	content: '';
	position: absolute;
	right: 60px;
	top: -40px;
	width: 120px;
	height: 120px;
	background: rgba(var(--primary-rgb), 0.015);
	border-radius: 50%;
	pointer-events: none;
}

.brand-store-banner-content {
	display: flex;
	align-items: center;
	gap: 24px;
}

.brand-store-logo {
	background: #ffffff;
	border: 1px solid var(--border-light);
	border-radius: 10px;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	max-width: 150px;
	height: 80px;
	box-shadow: 0 4px 12px rgba(27, 59, 43, 0.02);
}

.brand-store-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.brand-store-info {
	flex: 1;
	min-width: 0;
}

.brand-store-badge {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	color: var(--primary-hover);
	letter-spacing: 0.5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(var(--primary-rgb), 0.08);
	padding: 4px 10px;
	border-radius: 6px;
	margin-bottom: 8px;
}

.brand-store-title {
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--primary-hover);
	margin: 0 0 8px 0;
}

.brand-store-subtitle {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.5;
	max-width: 650px;
}

.brand-categories-filter {
	font-family: var(--font-sans);
	margin-bottom: 20px;
	width: 100%;
}

.brand-categories-pills-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.brand-category-pill {
	font-family: var(--font-sans);
	padding: 8px 16px;
	background: #ffffff;
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 600;
	border-radius: 20px;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	text-decoration: none !important;
	white-space: nowrap;
}

.brand-category-pill:hover {
	background: var(--bg-primary);
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.brand-category-pill.active {
	background: var(--primary-color);
	color: #ffffff;
	border-color: var(--primary-color);
	box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.15);
}

.brand-cat-count {
	font-size: 11px;
	opacity: 0.8;
	margin-left: 5px;
}

.seo_brand_desc {
	margin-bottom: 20px;
	padding: 12px 16px;
	background: var(--bg-secondary);
	border-left: 3px solid var(--primary-color);
	border-radius: 4px;
	font-size: 13px;
	color: var(--text-secondary);
}

/* --- Mobile Adjustments for Brand Page --- */
@media (max-width: 991px) {
	.brand-store-banner {
		padding: 20px;
		margin-bottom: 16px;
	}

	.brand-store-banner-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 16px;
	}

	.brand-store-logo {
		margin: 0 auto;
		width: 150px;
		max-width: 150px;
		height: 80px;
		flex-shrink: 0;
	}

	.brand-store-info {
		width: 100%;
	}

	.brand-store-title {
		font-size: 22px;
	}

	.brand-store-subtitle {
		font-size: 12px;
	}

	.brand-categories-filter {
		width: 100%;
	}

	.brand-categories-pills-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.brand-category-pill {
		padding: 6px 12px;
		font-size: 12px;
	}
}

/* --- Premium Category Control Bar (Sort Dropdown) --- */
.category-control-bar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 12px 16px;
	background: #fafdfb;
	border: 1px solid rgba(27, 59, 43, 0.08);
	border-radius: 12px;
	margin-bottom: 24px;
	box-shadow: 0 4px 12px rgba(27, 59, 43, 0.02);
}

.sort-selector-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid rgba(27, 59, 43, 0.12);
	border-radius: 8px;
	padding: 6px 14px;
	transition: all 0.25s ease;
}

.sort-selector-wrapper:hover,
.sort-selector-wrapper:focus-within {
	border-color: var(--primary-color, var(--secondary-color));
	box-shadow: 0 0 0 3px rgba(27, 59, 43, 0.08);
}

.sort-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color, var(--secondary-color));
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	cursor: pointer;
}

.sort-select {
	border: none;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	outline: none;
	cursor: pointer;
	padding-right: 6px;
}

.sort-select option {
	background: #ffffff;
	color: #374151;
	font-weight: 500;
}

/* --- Mobile Adjustments for Category Page --- */
@media (max-width: 991px) {
	#column-left {
		margin-bottom: 20px;
	}

	#column-left .list-group {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		border: none;
		box-shadow: none;
		background: transparent;
	}

	#column-left .list-group-item {
		border: 1px solid var(--border-light) !important;
		border-radius: var(--radius-sm, 6px);
		padding: 8px 14px;
		font-size: 12px;
		display: inline-block;
		white-space: nowrap;
		background: var(--bg-white);
	}

	#column-left .list-group-item.active {
		border-radius: var(--radius-sm, 6px) !important;
	}
}

@media (max-width: 767px) {
	#product-category h2 {
		font-size: 20px;
		margin-bottom: 8px;
	}

	.category-control-bar {
		padding: 10px;
		justify-content: center;
		margin-bottom: 16px;
	}

	.sort-selector-wrapper {
		width: 100%;
		justify-content: space-between;
		padding: 8px 12px;
	}

	#product-category .pagination > li > a,
	#product-category .pagination > li > span {
		min-width: 32px;
		height: 32px;
		font-size: 12px;
	}

	#product-category #content > .row:not(.category-control-bar):not(.product-top-row) {
		margin-left: -10px !important;
		margin-right: -10px !important;
	}

	#product-category .product-layout.col-grid-5 {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	#product-category .product-thumb h4 {
		font-size: 13px !important;
		height: auto !important;
		max-height: 2.8em !important;
		-webkit-line-clamp: 2 !important;
		line-height: 1.35 !important;
		margin-bottom: 6px !important;
	}

	#product-category .product-layout .product-thumb .caption {
		padding: 14px 12px !important;
	}

	#product-category .product-thumb .price {
		font-size: 14px !important;
	}

	#product-category .product-thumb .button-group {
		padding: 0 10px 10px !important;
		opacity: 0 !important;
		transform: translateY(8px) !important;
		pointer-events: none !important;
	}

	#product-category .product-thumb:hover .button-group,
	#product-category .product-thumb:focus-within .button-group,
	#product-category .product-thumb.is-actions-visible .button-group {
		opacity: 1 !important;
		transform: translateY(0) !important;
		pointer-events: auto !important;
	}

	#product-category .product-thumb .button-group button:first-child {
		height: 36px !important;
		font-size: 12px !important;
	}

}

/* Kategori – 5 sütun, geniş alan, ferah kartlar */
@media (min-width: 992px) {

	#product-category #content.col-sm-9 {
		width: 80%;
	}

	#product-category #column-left.col-sm-3 {
		width: 20%;
	}

	#product-category #content > .row:not(.category-control-bar) {
		margin-left: -10px;
		margin-right: -10px;
	}

	#product-category #content.col-sm-9 .product-layout.col-grid-5 {
		width: 25% !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		float: left !important;
	}

	#product-category #content.col-sm-12 .product-layout.col-grid-5 {
		width: 20% !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		float: left !important;
	}

	#product-category .product-layout .product-thumb {
		margin-bottom: 20px;
	}

	#product-category .product-thumb .image {
		aspect-ratio: 1 / 1;
	}

	#product-category .product-thumb .caption {
		padding: 14px 12px 10px;
	}

	#product-category .product-thumb h4 {
		font-size: 13px;
		line-height: 1.35;
		min-height: 2.7em;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 8px;
	}

	#product-category .product-thumb .price {
		font-size: 15px;
		font-weight: 700;
	}

	#product-category .product-thumb .button-group {
		padding: 0 10px 12px;
		opacity: 0;
		transform: translateY(8px);
		pointer-events: none;
	}

	#product-category .product-thumb:hover .button-group,
	#product-category .product-thumb:focus-within .button-group {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* ==========================================
   Product Detail – Mobile (scoped override)
   ========================================== */
@media (max-width: 767px) {
	#product-product,
	#product-product #content {
		max-width: 100%;
		overflow-x: hidden;
	}

	#product-product .product-top-row {
		display: block !important;
		margin: 0 !important;
	}

	#product-product .product-gallery-col,
	#product-product .product-details-pane {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		clear: both !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#product-product .product-gallery-wrapper {
		max-width: 100%;
	}

	#product-product .main-image-container {
		width: 100%;
		box-sizing: border-box;
	}

	#product-product .main-image-container img {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	#product-product .product-details-pane {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-top: 16px !important;
	}

	#product-product .product-title {
		font-size: 19px !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	#product-product .product-price-box,
	#product-product .product-options-form,
	#product-product .cart-action-panel,
	#product-product .trust-features-block,
	#product-product .product-tabs-section {
		max-width: 100%;
		box-sizing: border-box;
	}

	#product-product .cart-action-panel .btn-premium-cart,
	#product-product .cart-action-panel .btn-premium-notify,
	#product-product .cart-action-panel .btn-premium-wishlist {
		max-width: 100%;
		box-sizing: border-box;
	}

	#product-product .mobile-sticky-product-bar {
		box-sizing: border-box;
	}

	#product-product .sticky-product-qty {
		display: flex !important;
	}

	#product-product .product-slider-container {
		overflow: hidden;
		max-width: 100%;
	}

	#product-product .product-slider-container .swiper-viewport {
		overflow: visible !important;
	}
}

/* ==========================================
   Modern Account Login & Register Card Styles
   ========================================== */
body.account-login,
body.account-register,
body.account-forgotten {
	background: var(--bg-primary) !important;
}

body.account-login #content,
body.account-register #content,
body.account-forgotten #content,
body.account-login .container,
body.account-register .container,
body.account-forgotten .container {
	background: transparent !important;
}

.login-card-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 0 60px 0;
	width: 100%;
}

.login-card {
	width: 480px;
	max-width: 100%;
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	border: 1.5px solid var(--border-color);
	padding: 40px;
	box-sizing: border-box;
}

/* Register page needs slightly more width to accommodate standard form elements */
.login-card.register-card {
	width: 580px;
}

/* Tab Links (Pill Style) */
.login-form-tabs {
	display: flex;
	background: var(--bg-secondary);
	padding: 6px;
	border-radius: 30px;
	margin-bottom: 30px;
	gap: 4px;
	width: 100%;
	border: 1px solid var(--border-color);
}

.login-form-tabs .tab-btn {
	flex: 1;
	text-align: center;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-secondary);
	border-radius: 30px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	background: transparent;
	display: inline-block;
}

.login-form-tabs .tab-btn.active {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.24);
}

.login-form-tabs .tab-btn.active::after {
	display: none; /* Disable old underline indicator */
}

.login-form-tabs .tab-btn:hover:not(.active) {
	color: var(--primary-color);
}

/* Modern Form Elements (Login) */
.form-group-modern {
	margin-bottom: 20px;
	text-align: left;
}

.control-label-modern {
	display: block;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 8px;
	text-align: left;
}

.input-wrapper-modern {
	position: relative;
	display: flex;
	align-items: center;
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-white);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
}

.input-wrapper-modern:focus-within {
	border-color: var(--package-green);
	box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
}

.input-wrapper-modern:focus-within .input-icon-modern {
	color: var(--package-green);
}

.input-icon-modern {
	position: absolute;
	left: 16px;
	color: var(--text-secondary);
	font-size: 16px;
	pointer-events: none;
	display: flex;
	align-items: center;
	transition: color 0.2s;
}

.input-field-modern {
	width: 100%;
	padding: 14px 16px 14px 44px;
	border: none;
	background: transparent;
	font-size: 13px;
	color: var(--text-primary);
	font-weight: 600;
	outline: none;
	font-family: var(--font-sans);
	box-sizing: border-box;
}

/* Autofill color override to match the theme */
.input-field-modern:-webkit-autofill,
.input-field-modern:-webkit-autofill:hover,
.input-field-modern:-webkit-autofill:focus,
.input-field-modern:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--bg-white) inset !important;
	-webkit-text-fill-color: var(--text-primary) !important;
	transition: background-color 5000s ease-in-out 0s;
}

.forgotten-link-wrap {
	text-align: right;
	margin-top: 8px;
}

.forgotten-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	transition: color 0.2s;
	text-decoration: none;
	font-family: var(--font-sans);
}

.forgotten-link:hover {
	color: var(--package-green-dark);
	text-decoration: underline;
}

.btn-login-modern {
	width: 100%;
	padding: 14px;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.2);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	margin-top: 10px;
	font-family: var(--font-sans);
}

.btn-login-modern:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.28);
}

.btn-login-modern:active {
	transform: translateY(0);
}

/* Register Form Specific Styling overrides */
.register-card .form-group {
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
}

.register-card .control-label {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
	text-align: left !important;
	padding: 0;
	margin-bottom: 8px;
}

.register-card .col-sm-10,
.register-card .col-sm-2 {
	width: 100% !important;
	padding: 0 !important;
}

.register-card .form-control {
	height: 48px;
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-white);
	box-shadow: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	padding: 12px 16px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100% !important;
	box-sizing: border-box;
	font-family: var(--font-sans);
}

.register-card .form-control:focus {
	border-color: var(--package-green);
	box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12);
	outline: none;
}

.register-card .form-control:-webkit-autofill,
.register-card .form-control:-webkit-autofill:hover,
.register-card .form-control:-webkit-autofill:focus,
.register-card .form-control:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--bg-white) inset !important;
	-webkit-text-fill-color: var(--text-primary) !important;
	transition: background-color 5000s ease-in-out 0s;
}

.register-card legend {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--package-green-dark);
	border-bottom: 1.5px solid var(--border-color);
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 15px;
}

.register-card .buttons {
	border-top: 1.5px solid var(--border-color);
	padding-top: 20px;
	margin-top: 15px;
}

.register-card .btn-primary {
	padding: 14px 30px;
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	border: none;
	color: #fff;
	border-radius: var(--radius-md);
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: var(--font-sans);
}

.register-card .btn-primary:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	border: none;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

.register-card .radio-inline, 
.register-card .checkbox {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
}

/* Responsive Media Queries */
@media (max-width: 767px) {
	html,
	body {
		overflow-x: hidden;
	}

	#account-login,
	#account-register,
	#account-forgotten {
		padding: 4px 0 28px !important;
		min-height: auto;
	}

	#account-login.container,
	#account-register.container,
	#account-forgotten.container {
		width: 100%;
		max-width: 100%;
		padding-left: 12px;
		padding-right: 12px;
	}

	#account-login .row,
	#account-register .row,
	#account-forgotten .row {
		margin-left: 0;
		margin-right: 0;
	}

	#account-login #content,
	#account-register #content,
	#account-forgotten #content {
		padding-left: 0;
		padding-right: 0;
	}

	.login-card {
		width: 100% !important;
		max-width: 420px !important;
		margin: 0 auto !important;
		padding: 24px 20px !important;
		border-radius: var(--radius-md) !important;
		box-shadow: var(--shadow-md) !important;
		border: 1.5px solid var(--border-color) !important;
		box-sizing: border-box !important;
		background: var(--bg-white);
	}

	.login-card.register-card {
		max-width: 540px !important;
	}

	.login-card-container {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		transform: none !important;
		padding: 10px 0 25px 0 !important;
		box-sizing: border-box !important;
	}

	/* Reset negative margins inside login/register cards to prevent overflow */
	.login-card .form-group,
	.login-card .form-horizontal .form-group,
	.register-card .form-group,
	.register-card .form-horizontal .form-group {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.login-form-tabs {
		margin-bottom: 18px;
		border-radius: 18px;
	}

	.login-form-tabs .tab-btn {
		padding: 8px 0;
		font-size: 13px;
		border-radius: 16px;
	}

	.form-group-modern {
		margin-bottom: 14px;
	}

	.input-field-modern {
		min-width: 0;
		padding: 12px 14px 12px 38px;
		font-size: 12px;
	}

	.input-icon-modern {
		left: 12px;
		font-size: 14px;
	}

	.btn-login-modern {
		padding: 12px;
		font-size: 13px;
	}

	#account-login,
	#account-register {
		padding-bottom: 100px !important;
	}

	#account-login .breadcrumb,
	#account-register .breadcrumb {
		margin: 12px 0 14px !important;
		padding-left: 0;
		white-space: nowrap;
		overflow-x: auto;
		background: transparent;
	}

	.modern-form,
	.form-horizontal {
		width: 100% !important;
		max-width: none !important;
	}

	.input-wrapper-modern {
		width: 100% !important;
	}

	.forgotten-link-wrap {
		text-align: right;
		margin-top: 8px;
	}
}

/* Premium Login & Register Modal */
.login-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(18, 38, 28, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 20px;
	box-sizing: border-box;
	overflow-y: auto; /* Enables scrolling of the overlay itself */
}

.login-modal-box {
	background: var(--bg-white, #fff);
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--border-light, #e2e8f0);
	width: 480px;
	max-width: 100%;
	padding: 40px 30px;
	position: relative;
	box-sizing: border-box;
	animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	margin: auto; /* Centers the box inside scrollable container */
}

@keyframes modalSlideIn {
	from {
		transform: translateY(30px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.login-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	background: transparent;
	border: none;
	font-size: 28px;
	font-weight: 300;
	color: var(--text-secondary, #64748b);
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s;
}

.login-modal-close:hover {
	color: var(--primary-color, var(--secondary-color));
}

body.modal-open {
	overflow: hidden !important;
}

/* Also style the standalone login page to look beautiful and not empty */
#account-login, #account-register, #account-forgotten {
	padding: 30px 0 60px 0;
	min-height: 60vh;
}

#account-register .control-label,
.register-card .control-label {
	text-align: left !important;
}

#account-register .col-sm-10,
#account-register .col-sm-2,
#account-register .col-sm-offset-2,
.register-card .col-sm-10,
.register-card .col-sm-2,
.register-card .col-sm-offset-2 {
	width: 100% !important;
	padding: 0 !important;
	float: none !important;
	margin-left: 0 !important;
}

#account-login .login-card,
#account-register .login-card,
#account-forgotten .login-card {
	border-color: rgba(var(--primary-rgb), 0.14);
	box-shadow: 0 14px 34px rgba(var(--primary-rgb), 0.08);
}

#account-login .login-form-tabs,
#account-register .login-form-tabs {
	background: #eef9f2;
	border: 1px solid rgba(var(--primary-rgb), 0.12);
}

#account-login .login-form-tabs .tab-btn,
#account-register .login-form-tabs .tab-btn {
	color: var(--primary-color);
}

#account-login .login-form-tabs .tab-btn.active,
#account-register .login-form-tabs .tab-btn.active {
	background: var(--brand-gradient);
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.18);
}

#account-login .input-wrapper-modern,
#account-register .input-wrapper-modern,
#account-forgotten .input-wrapper-modern,
#account-register .form-control,
#account-forgotten .form-control {
	border-color: rgba(var(--primary-rgb), 0.18);
	background: #fbfefc;
}

#account-login .input-wrapper-modern:focus-within,
#account-register .input-wrapper-modern:focus-within,
#account-forgotten .input-wrapper-modern:focus-within,
#account-register .form-control:focus,
#account-forgotten .form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

#account-login .input-icon-modern,
#account-register .input-icon-modern,
#account-forgotten .input-icon-modern {
	color: var(--primary-color);
}

#account-login .btn-login-modern,
#account-register .btn-login-modern,
#account-forgotten .btn-login-modern,
#account-register .btn-primary,
#account-forgotten .btn-primary {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
	border: none;
	border-radius: var(--radius-md);
	box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.22);
}

#account-login .btn-login-modern:hover,
#account-register .btn-login-modern:hover,
#account-forgotten .btn-login-modern:hover,
#account-register .btn-primary:hover,
#account-forgotten .btn-primary:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
	box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.28);
}

/* Account Dashboard Styling */
#account-account {
	padding-top: 5px;
	padding-bottom: 60px;
}

#account-account .breadcrumb {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 20px;
	padding-left: 0;
	background: transparent;
}

.account-welcome-card {
	background: linear-gradient(135deg, var(--primary-color, var(--secondary-color)) 0%, var(--secondary-color) 100%);
	border-radius: 12px;
	padding: 24px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 8px 24px rgba(27, 59, 43, 0.08);
	margin-bottom: 25px;
	border: 1px solid rgba(var(--secondary-rgb), 0.15);
}

.account-welcome-left {
	display: flex;
	align-items: center;
	gap: 20px;
}

.account-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
	border: 2px solid rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

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

.account-greeting {
	font-size: 11px;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
}

.account-name {
	font-size: 20px;
	font-weight: 800;
	margin: 4px 0;
	color: #fff;
}

.account-meta {
	display: flex;
	gap: 15px;
	font-size: 13px;
	opacity: 0.9;
	margin-top: 5px;
}

.account-meta span i {
	margin-right: 5px;
}

.account-welcome-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.account-caypuan-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #eef7ee !important;
	border: 1.5px solid var(--primary-color) !important;
	color: var(--primary-color) !important;
	padding: 8px 16px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.12);
}

.account-caypuan-btn:hover {
	background: var(--primary-color) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(var(--secondary-rgb), 0.25);
}

.account-caypuan-btn img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

.account-badge {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 5px 12px;
	border-radius: 30px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
}

.account-logout-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(239, 68, 68, 0.15);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #fca5a5 !important;
	padding: 6px 14px;
	border-radius: 30px;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.2s ease-in-out;
}

.account-logout-btn:hover {
	background: #ef4444 !important;
	border-color: #ef4444 !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

/* Dashboard Grid */
.account-dashboard-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	margin-bottom: 30px;
}

.dashboard-card {
	background: #fff;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: 12px;
	padding: 20px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
	display: flex;
	flex-direction: column;
	width: calc(33.333% - 14px);
	min-width: 280px;
}

.dashboard-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	border-color: rgba(27, 59, 43, 0.15);
}

.card-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #eef7ee;
	color: var(--primary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	margin-bottom: 15px;
	transition: all 0.3s;
}

.dashboard-card:hover .card-icon-wrap {
	background: var(--primary-color);
	color: #fff;
	box-shadow: 0 4px 10px rgba(var(--secondary-rgb), 0.2);
}

.card-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary, #1e293b);
	margin: 0 0 6px 0;
}

.card-desc {
	font-size: 12px;
	color: var(--text-secondary, #64748b);
	line-height: 1.5;
	margin: 0 0 15px 0;
	flex-grow: 1;
}

.card-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid #f1f5f9;
	padding-top: 15px;
	margin-top: auto;
}

.card-link-item {
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	transition: all 0.2s ease-in-out;
}

.card-link-item i {
	font-size: 11px;
	margin-left: auto;
	margin-right: 0;
	color: #94a3b8;
	transition: transform 0.2s;
}

.card-link-item:hover {
	background: #eef7ee;
	border-color: #c2eec2;
	color: var(--primary-color) !important;
}

.card-link-item:hover i {
	color: var(--primary-color);
	transform: translateX(3px);
}

/* Ensure global sans-serif font is used for the account dashboard text and inputs */
#account-account,
#account-account h1,
#account-account h2,
#account-account h3,
#account-account h4,
#account-account h5,
#account-account h6,
.account-welcome-card,
.dashboard-card,
.card-title,
.card-link-item,
.account-greeting,
.account-email,
.account-telephone {
	font-family: var(--font-sans) !important;
}

/* Responsive queries for dashboard */
@media (max-width: 991px) {
	.dashboard-card {
		width: calc(50% - 10px);
	}
}

@media (max-width: 767px) {
	.account-welcome-card {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 20px;
		text-align: center;
	}
	
	.account-welcome-left {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}
	
	.account-avatar {
		width: 65px;
		height: 65px;
		font-size: 22px;
	}

	.account-name {
		font-size: 18px;
	}
	
	.account-meta {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
	
	.account-welcome-right {
		align-items: center;
		justify-content: center;
		width: 100%;
		flex-direction: column;
		gap: 12px;
		margin-top: 10px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding-top: 15px;
	}

	.account-caypuan-btn {
		width: 100%;
		justify-content: center;
	}

	.account-badge {
		width: 100%;
		justify-content: center;
	}

	.account-logout-btn {
		width: 100%;
		justify-content: center;
	}
	
	.dashboard-card {
		width: 100%;
		padding: 15px;
	}
}

/* Styling for all Inner Account Pages (Edit, Password, Address, Orders, Returns, Wishlist, Newsletter) */
#account-order,
#account-return,
#account-wishlist {
	max-width: 1200px;
	margin: 0 auto 40px auto;
	padding: 0 15px;
}

#account-edit,
#account-password,
#account-address,
#account-reward,
#account-newsletter {
	max-width: 800px;
	margin: 0 auto 40px auto;
	padding: 0 15px;
}
#account-edit .breadcrumb,
#account-password .breadcrumb,
#account-address .breadcrumb,
#account-order .breadcrumb,
#account-return .breadcrumb,
#account-wishlist .breadcrumb,
#account-reward .breadcrumb,
#account-newsletter .breadcrumb {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 15px;
	padding-left: 0;
	background: transparent;
}

/* Hide sidebars on these pages to focus on the centered form card */
#account-edit #column-left, #account-edit #column-right,
#account-password #column-left, #account-password #column-right,
#account-address #column-left, #account-address #column-right,
#account-order #column-left, #account-order #column-right,
#account-return #column-left, #account-return #column-right,
#account-wishlist #column-left, #account-wishlist #column-right,
#account-reward #column-left, #account-reward #column-right,
#account-newsletter #column-left, #account-newsletter #column-right {
	display: none !important;
}

/* Style the content container as a beautiful card */
#account-edit #content,
#account-password #content,
#account-address #content,
#account-order #content,
#account-return #content,
#account-wishlist #content,
#account-reward #content,
#account-newsletter #content {
	width: 100% !important;
	float: none !important;
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
	font-family: var(--font-sans) !important;
}

@media (max-width: 767px) {
	#account-edit #content,
	#account-password #content,
	#account-address #content,
	#account-order #content,
	#account-return #content,
	#account-wishlist #content,
	#account-reward #content,
	#account-newsletter #content {
		padding: 15px;
		border-radius: 10px;
	}
}

#account-edit #content h1, #account-edit #content h2,
#account-password #content h1, #account-password #content h2,
#account-address #content h1, #account-address #content h2,
#account-order #content h1, #account-order #content h2,
#account-return #content h1, #account-return #content h2,
#account-wishlist #content h1, #account-wishlist #content h2,
#account-reward #content h1, #account-reward #content h2,
#account-newsletter #content h1, #account-newsletter #content h2 {
	font-size: 20px;
	font-weight: 800;
	color: var(--primary-color, var(--secondary-color));
	margin-top: 5px;
	margin-bottom: 24px;
	border-bottom: 2px solid #eef7ee;
	padding-bottom: 12px;
	font-family: var(--font-sans) !important;
}

#account-edit legend,
#account-password legend,
#account-address legend,
#account-order legend,
#account-return legend,
#account-wishlist legend,
#account-newsletter legend {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary, #1e293b);
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 8px;
	margin-bottom: 15px;
	font-family: var(--font-sans) !important;
}

/* Style form inputs, labels, and groups */
#account-edit .form-group,
#account-password .form-group,
#account-address .form-group,
#account-order .form-group,
#account-return .form-group,
#account-wishlist .form-group,
#account-newsletter .form-group {
	margin-bottom: 15px;
}

#account-edit .control-label,
#account-password .control-label,
#account-address .control-label,
#account-order .control-label,
#account-return .control-label,
#account-wishlist .control-label,
#account-newsletter .control-label {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	float: none !important;
	font-size: 13px;
	font-weight: 700;
	color: #334155;
	padding-top: 0;
	margin-bottom: 6px;
	font-family: var(--font-sans) !important;
}

#account-edit .col-sm-10,
#account-password .col-sm-10,
#account-address .col-sm-10,
#account-order .col-sm-10,
#account-return .col-sm-10,
#account-wishlist .col-sm-10,
#account-newsletter .col-sm-10 {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

#account-edit .form-control,
#account-password .form-control,
#account-address .form-control,
#account-order .form-control,
#account-return .form-control,
#account-wishlist .form-control,
#account-newsletter .form-control {
	height: 42px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: none;
	padding: 10px 14px;
	font-size: 14px;
	color: #1e293b;
	font-family: var(--font-sans) !important;
	transition: all 0.2s ease-in-out;
	width: 100%;
}

#account-edit .form-control:focus,
#account-password .form-control:focus,
#account-address .form-control:focus,
#account-order .form-control:focus,
#account-return .form-control:focus,
#account-wishlist .form-control:focus,
#account-newsletter .form-control:focus {
	background: #fff;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.15);
	outline: none;
}

#account-edit .text-danger,
#account-password .text-danger,
#account-address .text-danger,
#account-order .text-danger,
#account-return .text-danger,
#account-wishlist .text-danger,
#account-newsletter .text-danger {
	font-size: 12px;
	font-weight: 600;
	color: #ef4444;
	margin-top: 6px;
	display: block;
}

/* Style primary and default buttons */
#account-edit .btn-primary,
#account-password .btn-primary,
#account-address .btn-primary,
#account-order .btn-primary,
#account-return .btn-primary,
#account-wishlist .btn-primary,
#account-newsletter .btn-primary,
#account-register .btn-primary,
#account-forgotten .btn-primary {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	padding: 11px 22px;
	border-radius: 999px !important;
	transition: all 0.2s;
	text-shadow: none;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22) !important;
	height: auto;
}

#account-edit .btn-primary:hover,
#account-password .btn-primary:hover,
#account-address .btn-primary:hover,
#account-order .btn-primary:hover,
#account-return .btn-primary:hover,
#account-wishlist .btn-primary:hover,
#account-newsletter .btn-primary:hover,
#account-register .btn-primary:hover,
#account-forgotten .btn-primary:hover {
	background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28) !important;
}

#account-edit .btn-default,
#account-password .btn-default,
#account-address .btn-default,
#account-order .btn-default,
#account-return .btn-default,
#account-wishlist .btn-default,
#account-newsletter .btn-default {
	background: #fff !important;
	border: 1.5px solid rgba(var(--primary-rgb), 0.28) !important;
	color: var(--package-green-dark) !important;
	font-weight: 700;
	font-size: 13px;
	padding: 11px 22px;
	border-radius: 999px !important;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.06) !important;
	text-shadow: none;
	height: auto;
}

#account-edit .btn-default:hover,
#account-password .btn-default:hover,
#account-address .btn-default:hover,
#account-order .btn-default:hover,
#account-return .btn-default:hover,
#account-wishlist .btn-default:hover,
#account-newsletter .btn-default:hover {
	background: var(--package-green-light) !important;
	color: var(--package-green-dark) !important;
	border-color: rgba(var(--primary-rgb), 0.42) !important;
}

#account-edit .buttons,
#account-password .buttons,
#account-address .buttons,
#account-order .buttons,
#account-return .buttons,
#account-wishlist .buttons,
#account-reward .buttons,
#account-newsletter .buttons {
	border-top: 1px solid #f1f5f9;
	padding-top: 20px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#account-edit .buttons .pull-left,
#account-password .buttons .pull-left,
#account-address .buttons .pull-left,
#account-order .buttons .pull-left,
#account-return .buttons .pull-left,
#account-wishlist .buttons .pull-left,
#account-reward .buttons .pull-left,
#account-newsletter .buttons .pull-left,
#account-edit .buttons .pull-right,
#account-password .buttons .pull-right,
#account-address .buttons .pull-right,
#account-order .buttons .pull-right,
#account-return .buttons .pull-right,
#account-wishlist .buttons .pull-right,
#account-reward .buttons .pull-right,
#account-newsletter .buttons .pull-right {
	float: none !important;
}

@media (max-width: 767px) {
	#account-edit .buttons,
	#account-password .buttons,
	#account-address .buttons,
	#account-order .buttons,
	#account-return .buttons,
	#account-wishlist .buttons,
	#account-reward .buttons,
	#account-newsletter .buttons {
		flex-direction: column-reverse;
		gap: 12px;
		align-items: stretch;
	}
	
	#account-edit .buttons a,
	#account-password .buttons a,
	#account-address .buttons a,
	#account-order .buttons a,
	#account-return .buttons a,
	#account-wishlist .buttons a,
	#account-reward .buttons a,
	#account-newsletter .buttons a,
	#account-edit .buttons input,
	#account-password .buttons input,
	#account-address .buttons input,
	#account-order .buttons input,
	#account-return .buttons input,
	#account-wishlist .buttons input,
	#account-reward .buttons input,
	#account-newsletter .buttons input {
		width: 100% !important;
		text-align: center;
		justify-content: center;
		display: block !important;
	}
}

/* Style data tables cleanly */
#account-address .table,
#account-reward .table,
#account-order .table,
#account-return .table,
#account-wishlist .table {
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px;
	overflow: hidden;
	border-collapse: separate;
}

#account-address .table th,
#account-reward .table th,
#account-order .table th,
#account-return .table th,
#account-wishlist .table th {
	background: #f8fafc !important;
	color: var(--text-primary, #1e293b) !important;
	font-weight: 700 !important;
	border-bottom: 2px solid #e2e8f0 !important;
	padding: 10px 12px !important;
	font-size: 12px;
	text-transform: uppercase;
}

#account-address .table td,
#account-reward .table td,
#account-order .table td,
#account-return .table td,
#account-wishlist .table td {
	padding: 10px 12px !important;
	color: var(--text-secondary, #64748b) !important;
	border-bottom: 1px solid #e2e8f0 !important;
	font-size: 13px;
	vertical-align: middle;
}

#account-address .table tr:last-child td,
#account-reward .table tr:last-child td,
#account-order .table tr:last-child td,
#account-return .table tr:last-child td,
#account-wishlist .table tr:last-child td {
	border-bottom: none !important;
}

/* Edit and Delete Buttons for Account Dashboard Pages */
#account-address .btn-info,
#account-order .btn-info,
#account-return .btn-info,
#account-wishlist .btn-info {
	background: #3498db !important;
	border: 1px solid #3498db !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 12px;
	padding: 8px 16px;
	border-radius: 6px !important;
	transition: all 0.2s;
	text-shadow: none;
	height: auto;
	display: inline-flex;
	align-items: center;
}

#account-address .btn-info:hover,
#account-order .btn-info:hover,
#account-return .btn-info:hover,
#account-wishlist .btn-info:hover {
	background: #2980b9 !important;
	border-color: #2980b9 !important;
	transform: translateY(-1px);
}

#account-address .btn-danger,
#account-order .btn-danger,
#account-return .btn-danger,
#account-wishlist .btn-danger {
	background: #ef4444 !important;
	border: 1px solid #ef4444 !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 12px;
	padding: 8px 16px;
	border-radius: 6px !important;
	transition: all 0.2s;
	text-shadow: none;
	height: auto;
	display: inline-flex;
	align-items: center;
}

#account-address .btn-danger:hover,
#account-order .btn-danger:hover,
#account-return .btn-danger:hover,
#account-wishlist .btn-danger:hover {
	background: #dc2626 !important;
	border-color: #dc2626 !important;
	transform: translateY(-1px);
}

/* Reward Points Summary Box */
.reward-points-summary {
	background: linear-gradient(135deg, var(--secondary-color) 0%, #0f241a 100%);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	color: #fff;
	box-shadow: 0 4px 15px rgba(27, 59, 43, 0.15);
}

.reward-points-summary .summary-icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: rgba(var(--secondary-rgb), 0.2);
	border: 1px solid rgba(var(--secondary-rgb), 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	font-size: 20px;
}

.reward-points-summary .summary-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.reward-points-summary .summary-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.reward-points-summary .summary-value {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

/* Address List Mobile Card Layout */
@media (max-width: 767px) {
	#account-address table,
	#account-address tbody,
	#account-address tr,
	#account-address td {
		display: block !important;
		width: 100% !important;
		border: none !important;
	}
	
	#account-address tr {
		background: #f8fafc;
		border: 1px solid #e2e8f0 !important;
		border-radius: 10px;
		margin-bottom: 15px;
		padding: 15px;
	}
	
	#account-address td.text-left {
		font-size: 14px;
		color: #1e293b;
		padding: 0 0 12px 0 !important;
		line-height: 1.5;
	}
	
	#account-address td.text-right {
		padding: 12px 0 0 0 !important;
		border-top: 1px dashed #cbd5e1 !important;
		display: flex !important;
		gap: 8px;
	}
	
	#account-address td.text-right a {
		flex: 1;
		text-align: center;
		padding: 10px !important;
		justify-content: center;
	}
}

/* Reward Points Mobile Card Layout */
@media (max-width: 767px) {
	#account-reward thead {
		display: none !important;
	}

	#account-reward table,
	#account-reward tbody,
	#account-reward tr,
	#account-reward td {
		display: block !important;
		width: 100% !important;
		border: none !important;
	}
	
	#account-reward tr {
		background: #f8fafc;
		border: 1px solid #e2e8f0 !important;
		border-radius: 10px;
		margin-bottom: 15px;
		padding: 15px;
		position: relative;
	}
	
	#account-reward td.text-left:first-child {
		font-size: 12px;
		color: #94a3b8;
		padding: 0 0 6px 0 !important;
		font-weight: 600;
	}
	
	#account-reward td.text-left:nth-child(2) {
		font-size: 14px;
		color: #1e293b;
		padding: 0 0 10px 0 !important;
		line-height: 1.5;
		font-weight: 500;
	}
	
	#account-reward td.text-right {
		padding: 10px 0 0 0 !important;
		border-top: 1px dashed #cbd5e1 !important;
		font-size: 16px;
		font-weight: 800;
		color: var(--primary-color);
		text-align: left !important;
	}
}

/* Styling for success page (Logout, Register Success, etc.) */
#common-success {
	padding-top: 5px;
	padding-bottom: 40px;
}

#common-success .breadcrumb {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 15px;
	padding-left: 0;
	background: transparent;
}

#common-success #column-left, #common-success #column-right {
	display: none !important;
}

#common-success #content {
	width: 100% !important;
	float: none !important;
	max-width: 550px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--border-light, #e2e8f0);
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
	font-family: var(--font-sans) !important;
	text-align: center;
}

#common-success #content h1 {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color, var(--secondary-color));
	margin-top: 15px;
	margin-bottom: 15px;
	font-family: var(--font-sans) !important;
}

#common-success #content h1::before {
	content: "\f058"; /* fa-check-circle */
	font-family: FontAwesome;
	display: block;
	font-size: 48px;
	color: var(--primary-color, var(--secondary-color));
	margin-bottom: 15px;
}

#common-success #content p {
	font-size: 13px;
	color: var(--text-secondary, #64748b);
	line-height: 1.6;
	margin-bottom: 25px;
	font-family: var(--font-sans) !important;
}

#common-success .btn-primary {
	background: var(--primary-color, var(--secondary-color)) !important;
	border-color: var(--primary-color, var(--secondary-color)) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	padding: 10px 24px;
	border-radius: 6px;
	transition: all 0.2s;
	display: inline-block;
	text-shadow: none;
	box-shadow: none;
	height: auto;
	float: none !important;
}

#common-success .btn-primary:hover {
	background: var(--primary-hover, var(--primary-color)) !important;
	border-color: var(--primary-hover, var(--primary-color)) !important;
	transform: translateY(-1px);
}

#common-success .buttons {
	border-top: 1px solid #f1f5f9;
	padding-top: 20px;
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

#common-success .pull-right {
	float: none !important;
}

/* ==========================================
   Information Pages Premium Styles
   ========================================== */
.info-page-banner {
  background: linear-gradient(135deg, #f4faf6 0%, #eaf5ee 100%);
  padding: 45px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  border-bottom: 1px solid #e2e8f0;
}

.info-page-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(var(--primary-rgb), 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.info-page-title {
  color: var(--primary-color, var(--secondary-color));
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.5px;
  font-family: var(--font-sans) !important;
}

.info-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.info-breadcrumb li {
  display: flex;
  align-items: center;
  color: #64748b;
}

.info-breadcrumb li a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.info-breadcrumb li a:hover {
  color: var(--primary-color, var(--secondary-color));
}

.info-breadcrumb li:not(:last-child)::after {
  content: '\f105';
  font-family: 'FontAwesome';
  margin-left: 8px;
  color: #cbd5e1;
}

/* Page content wrapper */
.info-page-container {
  margin-bottom: 60px;
}

.info-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  padding: 40px;
  margin-bottom: 20px;
}

.info-description {
  color: #334155;
  font-size: 15px;
  line-height: 1.8;
  font-family: var(--font-sans) !important;
}

.info-description p {
  margin-bottom: 20px;
}

/* Contact page */
.contact-page-container {
  margin-bottom: 60px;
}

.contact-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}

.contact-intro-badge {
  display: inline-block;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.contact-intro p {
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.contact-page-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
  gap: 24px;
  align-items: start;
}

.contact-block-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary-color);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-block-title i {
  color: var(--primary-color);
}

.contact-info-card.info-card,
.contact-locations-card.info-card,
.contact-form-card.info-card {
  padding: 28px 32px;
}

.contact-store-block {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.contact-store-image img {
  max-width: 100px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.contact-store-details h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}

.contact-store-details address {
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.contact-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f4faf6;
  color: var(--primary-color);
  border: 1px solid #c8e6d4;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.contact-map-btn:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  text-decoration: none;
}

.contact-detail-list li {
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 14px;
  color: #334155;
}

.contact-detail-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.contact-detail-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-bottom: 4px;
}

.contact-detail-list a {
  color: var(--primary-color);
  font-weight: 600;
}

.contact-locations-card {
  margin-top: 20px;
}

.contact-locations-accordion .panel {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
  margin-bottom: 8px;
  overflow: hidden;
}

.contact-locations-accordion .panel-heading {
  background: #f8fafc;
  border: none;
  padding: 0;
}

.contact-locations-accordion .panel-title a {
  display: block;
  padding: 12px 16px;
  color: var(--secondary-color);
  font-weight: 600;
  text-decoration: none;
}

.contact-location-thumb {
  max-width: 80px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.contact-form .form-group {
  margin-bottom: 18px;
}

.contact-form label {
  font-weight: 600;
  color: #334155;
  font-size: 14px;
  margin-bottom: 8px;
}

.contact-form .form-control {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.contact-form .has-error .form-control {
  border-color: #dc3545;
}

.contact-form-actions {
  margin-top: 8px;
}

.contact-submit-btn {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  min-width: 180px;
}

.contact-submit-btn:hover,
.contact-submit-btn:focus {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
  border: none;
}

.contact-success-card {
  text-align: center;
  padding: 48px 32px;
  max-width: 560px;
  margin: 0 auto 40px;
}

.contact-success-icon {
  font-size: 56px;
  color: var(--primary-color);
  margin-bottom: 16px;
}

.contact-success-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 12px;
}

.contact-success-message {
  color: #475569;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .contact-page-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .contact-info-card.info-card,
  .contact-locations-card.info-card,
  .contact-form-card.info-card {
    padding: 22px 18px;
  }
}

.info-description h2, .info-description h3, .info-description h4 {
  color: #0f172a;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 15px;
  font-family: var(--font-sans) !important;
}

.info-description h2 { font-size: 22px; }
.info-description h3 { font-size: 18px; }

.info-description ul, .info-description ol {
  margin-bottom: 25px;
  padding-left: 20px;
}

.info-description li {
  margin-bottom: 8px;
}

.info-description table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  font-size: 14px;
}

.info-description th, .info-description td {
  border: 1px solid #e2e8f0;
  padding: 12px 16px;
  text-align: left;
}

.info-description th {
  background: #f8fafc;
  font-weight: 600;
  color: #0f172a;
}

.info-description tr:nth-child(even) {
  background: #fdfdfd;
}

/* Hide default breadcrumb and h1 inside container if class exists */
.info-page-container > .breadcrumb,
.info-page-container h1:first-of-type,
.info-page-container > ul.breadcrumb {
  display: none !important;
}

/* Sitemap Page */
.sitemap-page-container {
  margin-bottom: 60px;
}

.sitemap-intro {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sitemap-card {
  padding: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.sitemap-card--wide {
  grid-column: 1 / -1;
}

.sitemap-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #edf2f7;
}

.sitemap-card-head span {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--package-green-light);
  color: var(--primary-color);
}

.sitemap-card-head h2 {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
}

.sitemap-category-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sitemap-category-block {
  padding: 14px;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  background: #fbfefc;
}

.sitemap-main-link {
  display: block;
  color: var(--primary-color) !important;
  font-weight: 800;
  margin-bottom: 8px;
}

.sitemap-child-list,
.sitemap-grandchild-list,
.sitemap-link-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sitemap-child-block > a,
.sitemap-grandchild-list a,
.sitemap-link-list a {
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}

.sitemap-child-block > a:hover,
.sitemap-grandchild-list a:hover,
.sitemap-link-list a:hover {
  color: var(--primary-color);
}

.sitemap-grandchild-list {
  margin: 7px 0 2px 12px;
  padding-left: 10px;
  border-left: 2px solid #e5f4eb;
}

/* Manufacturer List Page */
.manufacturer-page-container {
  margin-bottom: 60px;
}

.manufacturer-intro {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}

.manufacturer-index {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.manufacturer-index strong {
  color: var(--primary-color);
  font-size: 13px;
}

.manufacturer-index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--package-green-light);
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
}

.manufacturer-index a:hover {
  background: var(--brand-gradient);
  color: #fff !important;
}

.manufacturer-section {
  margin-bottom: 28px;
}

.manufacturer-section h2 {
  margin: 0 0 14px;
  font-family: var(--font-sans) !important;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
}

.manufacturer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.manufacturer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 16px 12px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.manufacturer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.manufacturer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 82px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.manufacturer-logo img {
  max-width: 100%;
  max-height: 76px;
  object-fit: contain;
}

.manufacturer-name {
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.manufacturer-empty {
  padding: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

@media (max-width: 991px) {
  .sitemap-grid,
  .sitemap-category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manufacturer-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

@media (max-width: 767px) {
  .sitemap-intro {
    text-align: left;
    margin-bottom: 18px;
  }

  .sitemap-grid,
  .sitemap-category-list {
    grid-template-columns: 1fr;
  }

  .sitemap-card {
    padding: 16px;
    border-radius: 14px;
  }

  .manufacturer-intro {
    text-align: left;
    margin-bottom: 16px;
  }

  .manufacturer-index {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .manufacturer-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }

  .manufacturer-card {
    min-height: 132px;
    padding: 12px 10px;
    border-radius: 14px;
  }

  .manufacturer-logo {
    height: 68px;
  }

  .manufacturer-logo img {
    max-height: 68px;
  }
}

/* --- Manufacturer Page: Two-Column Layout with Sidebar --- */
.manufacturer-main-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.manufacturer-brands-col {
  flex: 1;
  min-width: 0;
}

.manufacturer-sidebar-col {
  flex: 0 0 260px;
  max-width: 260px;
}

.manufacturer-sidebar-sticky {
  position: sticky;
  top: 20px;
}

.sidebar-featured-box {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.sidebar-featured-header {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-hover);
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(76, 139, 97, 0.08) 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-featured-header i {
  color: var(--accent-color);
  font-size: 14px;
}

.sidebar-featured-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-product-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-product-card:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-product-image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.sidebar-product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sidebar-discount-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  z-index: 1;
}

.sidebar-product-info {
  flex: 1;
  min-width: 0;
}

.sidebar-product-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none !important;
  margin-bottom: 6px;
}

.sidebar-product-name:hover {
  color: var(--primary-color);
}

.sidebar-product-price {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sidebar-price-current {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-color);
}

.sidebar-price-old {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  text-decoration: line-through;
}

.sidebar-price-new {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: #ef4444;
}

.sidebar-add-cart {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  justify-content: center;
}

.sidebar-add-cart:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

.sidebar-add-cart i {
  font-size: 12px;
}

@media (max-width: 991px) {
  .manufacturer-main-layout {
    flex-direction: column;
  }

  .manufacturer-sidebar-col {
    flex: 1 1 100%;
    max-width: 100%;
    order: -1;
  }

  .manufacturer-sidebar-sticky {
    position: static;
  }

  .sidebar-featured-list {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px;
    gap: 16px;
  }

  .sidebar-featured-list::-webkit-scrollbar {
    display: none;
  }

  .sidebar-product-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 140px;
    flex-shrink: 0;
    padding-bottom: 0;
    border-bottom: none;
    border-right: 1px solid var(--border-light);
    padding-right: 16px;
  }

  .sidebar-product-card:last-child {
    border-right: none;
    padding-right: 0;
  }

  .sidebar-product-price {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .manufacturer-card {
    height: 130px;
    padding: 12px 10px;
    border-radius: 14px;
  }

  .manufacturer-logo {
    height: 64px;
  }

  .manufacturer-logo img {
    max-height: 64px;
  }
}

/* ==========================================
   Campaign Page Styles
   ========================================== */
.campaign-page-container {
  margin-bottom: 60px;
}

.campaign-intro {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
  color: #64748b;
  font-family: var(--font-sans) !important;
  font-size: 15px;
  line-height: 1.7;
}

.campaign-intro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--package-green-dark);
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.campaign-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.campaign-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 24px;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: 16px;
  background: linear-gradient(160deg, #f8fffb 0%, #eef9f2 52%, #fff 100%);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.campaign-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--package-green), var(--package-green-dark));
}

.campaign-card--green-alt {
  background: linear-gradient(145deg, rgba(240,252,246,0.85) 0%, rgba(195,235,213,0.45) 100%);
  border-color: rgba(var(--primary-rgb), 0.18);
}

.campaign-card--earth {
  background: linear-gradient(145deg, rgba(240,246,238,0.9) 0%, rgba(210,230,200,0.45) 100%);
  border-color: rgba(74, 106, 58, 0.18);
}

.campaign-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}

.campaign-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--package-green-dark);
  font-size: 22px;
}

.campaign-card--green-alt .campaign-card-icon {
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--package-green);
}

.campaign-card--earth .campaign-card-icon {
  background: rgba(74, 106, 58, 0.12);
  color: #4a6a3a;
}

.campaign-card h2 {
  margin: 0 0 10px;
  color: var(--package-green-dark);
  font-family: var(--font-sans) !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.campaign-card--earth h2 {
  color: #4a6a3a;
}

.campaign-card p {
  margin: 0 0 18px;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}

.campaign-coupon {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px dashed rgba(var(--primary-rgb), 0.45);
  border-radius: 12px;
  background: var(--package-green-lighter);
}

.campaign-coupon span,
.campaign-coupon small {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.campaign-coupon strong {
  display: block;
  margin: 3px 0;
  color: var(--package-green-dark);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
}

.campaign-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.campaign-card-button:hover {
  background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
  color: #fff !important;
}

.campaign-card--green-alt::before {
  background: linear-gradient(90deg, #4cb87a, var(--package-green-dark));
}

.campaign-card--earth::before {
  background: linear-gradient(90deg, #5d8248, #4a6a3a);
}

.campaign-card--earth .campaign-card-button {
  background: linear-gradient(135deg, #5d8248 0%, #4a6a3a 100%);
  box-shadow: 0 4px 14px rgba(74, 106, 58, 0.22);
}

.campaign-card--earth .campaign-card-button:hover {
  background: linear-gradient(135deg, #4a6a3a 0%, #3d5632 100%);
  box-shadow: 0 8px 20px rgba(74, 106, 58, 0.28);
}

.campaign-empty {
  padding: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  color: #64748b;
}

/* ==========================================
   Shipment Tracking Page
   ========================================== */
.shipment-tracking-container {
  margin-bottom: 60px;
}

.shipment-tracking-intro {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}

.shipment-tracking-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c05621;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.shipment-tracking-form-card,
.shipment-tracking-result {
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.shipment-tracking-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--primary-color, var(--secondary-color));
}

.shipment-tracking-input-row {
  display: flex;
  gap: 10px;
}

.shipment-tracking-input-row .form-control {
  min-height: 46px;
  border-radius: 10px;
}

.shipment-tracking-submit {
  min-height: 46px;
  border-radius: 999px;
  white-space: nowrap;
  padding-left: 22px;
  padding-right: 22px;
  background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.22);
}

.shipment-tracking-submit:hover {
  background: linear-gradient(135deg, var(--package-green-dark) 0%, var(--primary-color) 100%);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}

.shipment-tracking-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.shipment-tracking-result-head h2 {
  margin: 0;
  font-size: 22px;
  color: var(--primary-color, var(--secondary-color));
}

.shipment-tracking-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--package-green-light);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
}

.shipment-tracking-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.shipment-tracking-meta-item {
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
}

.shipment-tracking-meta-item .label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.shipment-tracking-meta-item strong {
  color: #0f172a;
  font-size: 15px;
}

.shipment-tracking-cargo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  margin-bottom: 20px;
}

.shipment-tracking-cargo-card--dhl {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fdba74;
}

.shipment-tracking-cargo-card--yurtici {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
}

.shipment-tracking-cargo-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--primary-color, var(--secondary-color));
  font-size: 20px;
  flex-shrink: 0;
}

.shipment-tracking-cargo-body {
  flex: 1;
  min-width: 0;
}

.shipment-tracking-cargo-label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 2px;
}

.shipment-tracking-cargo-name {
  display: block;
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 8px;
}

.shipment-tracking-cargo-no span {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.shipment-tracking-cargo-no code {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  font-size: 14px;
}

.shipment-tracking-external-btn {
  white-space: nowrap;
  border-radius: 10px;
  min-height: 42px;
}

.shipment-tracking-no-cargo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  margin-bottom: 20px;
}

.shipment-tracking-no-cargo p {
  margin: 0;
}

.shipment-tracking-timeline h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--primary-color, var(--secondary-color));
}

.shipment-tracking-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shipment-tracking-timeline-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
}

.shipment-tracking-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: #dbeafe;
}

.shipment-tracking-timeline-dot {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 3px solid #dcfce7;
  flex-shrink: 0;
}

.shipment-tracking-timeline-content time {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.shipment-tracking-timeline-content strong {
  display: block;
  color: #0f172a;
  margin-bottom: 4px;
}

.shipment-tracking-timeline-content p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 767px) {
  .shipment-tracking-input-row {
    flex-direction: column;
  }

  .shipment-tracking-cargo-card {
    flex-direction: column;
    align-items: stretch;
  }

  .shipment-tracking-external-btn {
    width: 100%;
  }

  .shipment-tracking-meta-grid {
    grid-template-columns: 1fr;
  }

  .shipment-tracking-result-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.freeshipping-campaign-page {
  margin-bottom: 60px;
}

.freeshipping-section--page {
  margin-top: 0;
}

.freeshipping-section--page .freeshipping-products-header {
  align-items: center;
}

.freeshipping-page-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.freeshipping-page-sort label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.freeshipping-page-sort .form-control {
  width: 210px;
  height: 38px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: none;
}

.freeshipping-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.freeshipping-products-grid .freeshipping-product-card {
  width: auto;
  min-width: 0;
}

#common-home .home-tab-fsp-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#common-home .home-tab-fsp-grid .freeshipping-product-card {
  display: flex !important;
}

#common-home .home-tab-fsp-grid .freeshipping-product-card:nth-child(n+25) {
  display: none !important;
}

@media (max-width: 991px) {
  .campaign-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .freeshipping-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #common-home .home-tab-fsp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .campaign-intro {
    text-align: left;
    margin-bottom: 18px;
  }

  .campaign-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .campaign-card {
    padding: 18px;
    border-radius: 14px;
  }

  .campaign-card h2 {
    font-size: 18px;
  }

  .freeshipping-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #common-home .home-tab-fsp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #common-home .home-tab-fsp-grid .freeshipping-product-card:nth-child(n+9) {
    display: none !important;
  }

  .freeshipping-section--page .freeshipping-products-header {
    align-items: flex-start;
  }

  .freeshipping-page-sort {
    width: 100%;
    justify-content: space-between;
  }

  .freeshipping-page-sort .form-control {
    width: 180px;
  }
}

/* ==========================================
   Compact Page + Login Modal Overrides
   ========================================== */
.login-modal-overlay {
	padding: 20px 12px;
}

.login-modal-box {
	width: 420px;
	padding: 28px 24px;
	border-radius: var(--radius-md);
}

.login-modal-close {
	top: 12px;
	right: 16px;
	font-size: 26px;
}

.login-modal-box .login-form-tabs {
	margin-bottom: 20px;
	border-radius: 30px;
}

.login-modal-box .login-form-tabs .tab-btn {
	padding: 9px 0;
	font-size: 13px;
}

.login-modal-box .form-group-modern {
	margin-bottom: 14px;
}

.login-modal-box .control-label-modern {
	display: block;
	font-family: var(--font-sans) !important;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 6px;
	text-align: left;
}

.login-modal-box .input-field-modern {
	width: 100%;
	padding: 11px 12px 11px 38px;
	font-size: 12px;
	height: 42px;
	border: none;
	background: transparent;
	font-weight: 600;
	outline: none;
	font-family: var(--font-sans) !important;
	box-sizing: border-box;
}

.login-modal-box .input-icon-modern {
	left: 12px;
	font-size: 14px;
}

.login-modal-box .forgotten-link-wrap {
	margin-top: 6px;
}

.login-modal-box .btn-login-modern {
	padding: 12px;
	font-size: 13px;
	margin-top: 10px;
	border-radius: var(--radius-md);
}

.customer-group-toggle {
	display: flex;
	background: var(--bg-secondary) !important;
	padding: 4px;
	border-radius: 30px;
	border: 1px solid var(--border-color);
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
}

.customer-group-toggle label {
	flex: 1;
	text-align: center;
	margin: 0;
	padding: 8px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--text-secondary) !important;
	cursor: pointer;
	border-radius: 30px;
	background: transparent !important;
	transition: all 0.25s ease;
	display: inline-block;
}

.customer-group-toggle input[type="radio"]:checked + label {
	background: linear-gradient(135deg, var(--package-green) 0%, var(--package-green-dark) 100%) !important;
	color: #fff !important;
	box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.15) !important;
}

.hidden-radio-input {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	display: block !important;
}

.info-page-banner,
.campaign-page-banner,
.freeshipping-page-banner {
	padding: 28px 0;
	margin-bottom: 24px;
}

#menu {
	margin-bottom: 12px;
}

.cart-page-container,
.checkout-page-container,
.info-page-container,
.campaign-page-container,
.contact-page-container,
.freeshipping-campaign-page,
#product-product,
#account-login,
#account-register,
#account-forgotten,
#account-account,
#account-edit,
#account-password,
#account-address,
#account-order,
#account-return,
#account-wishlist,
#account-newsletter {
	padding-top: 8px;
}

.cart-page-title,
.checkout-page-head,
.product-page-header,
.breadcrumb {
	margin-bottom: 14px;
}

@media (max-width: 991px) {
	#menu {
		margin-bottom: 10px;
	}
}

@media (max-width: 767px) {
	.login-modal-overlay {
		padding: 10px;
	}

	.login-modal-box {
		width: 100%;
		padding: 20px 16px;
	}

	.info-page-banner,
	.campaign-page-banner,
	.freeshipping-page-banner {
		padding: 22px 0;
		margin-bottom: 16px;
	}

	.info-page-title {
		font-size: 24px;
	}

	.cart-page-container,
	.checkout-page-container,
	.info-page-container,
	.campaign-page-container,
	.contact-page-container,
	.freeshipping-campaign-page,
	#product-product,
	#account-login,
	#account-register,
	#account-forgotten,
	#account-account,
	#account-edit,
	#account-password,
	#account-address,
	#account-order,
	#account-return,
	#account-wishlist,
	#account-newsletter {
		padding-top: 4px;
	}
}

/* ==========================================
   Storefront Blog Custom Premium Styles
   ========================================== */
.blog-grid {
  display: flex;
  flex-wrap: wrap;
}

.blog-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
}

.blog-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #f1f5f9;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.blog-card-date {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(27, 59, 43, 0.85);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

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

.blog-card-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.blog-card-title a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card-title a:hover {
  color: var(--primary-color);
}

.blog-card-intro {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.blog-card-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #f1f5f9;
}

.btn-blog-read {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  padding: 0;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
  text-decoration: none;
}

.btn-blog-read i {
  transition: transform 0.2s ease;
}

.btn-blog-read:hover {
  color: var(--secondary-color);
  text-decoration: none;
}

.btn-blog-read:hover i {
  transform: translateX(4px);
}

/* Single Blog Post Card */
.blog-post-card {
  padding: 40px !important;
}

.blog-post-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  color: #64748b;
  font-size: 13px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 15px;
}

.blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-meta-item i {
  color: var(--primary-color);
}

.blog-post-content,
.blog-post-content * {
  font-family: var(--font-sans) !important;
}

.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6 {
  font-family: var(--font-serif) !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  margin-top: 30px !important;
  margin-bottom: 15px !important;
}

.blog-post-content p,
.blog-post-content span,
.blog-post-content li {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--text-secondary) !important;
}

.blog-post-content p {
  margin-bottom: 20px !important;
}

.blog-post-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  margin: 20px 0;
}

@media (max-width: 767px) {
  .blog-post-card {
    padding: 24px !important;
  }
}

/* ==========================================
   Premium Sticky Sidebar & Filter Styles
   ========================================== */
@media (min-width: 768px) {
	#product-category > .row,
	#product-search > .row,
	#product-manufacturer > .row,
	#product-special > .row {
		display: flex;
		align-items: flex-start;
	}

	#column-left {
		position: -webkit-sticky;
		position: sticky;
		top: 68px;
		z-index: 10;
		padding-right: 15px;
	}
}

.sidebar-filter-card {
	background: var(--bg-white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md, 14px);
	padding: 12px 14px;
	margin-bottom: 12px;
	box-shadow: var(--shadow-sm);
}

.sidebar-filter-title {
	font-family: var(--font-serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-color);
	margin-top: 0;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1.5px solid var(--border-light);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Category Navigation Accordion */
.sidebar-category-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-category-item {
	margin-bottom: 3px;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 3px;
}

.sidebar-category-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sidebar-category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.sidebar-category-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0;
	color: var(--text-primary);
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s ease;
	text-decoration: none;
	flex-grow: 1;
}

.sidebar-category-link:hover,
.sidebar-category-link.active {
	color: var(--primary-color);
	text-decoration: none;
}

.category-toggle-btn {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	padding: 4px 6px;
	cursor: pointer;
	font-size: 9px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.category-toggle-btn:hover {
	color: var(--primary-color);
}

.category-toggle-btn.open {
	color: var(--primary-color);
}

.sidebar-subcategory-list {
	list-style: none;
	padding-left: 10px;
	margin-top: 1px;
	margin-bottom: 6px;
	border-left: 1.5px solid var(--border-light);
}

.sidebar-subcategory-link {
	display: block;
	padding: 3px 0;
	color: var(--text-secondary);
	font-size: 11px;
	font-weight: 500;
	transition: all 0.2s ease;
	text-decoration: none;
}

.sidebar-subcategory-link:hover,
.sidebar-subcategory-link.active {
	color: var(--primary-color);
	text-decoration: none;
	padding-left: 3px;
}

/* Brand Filter List */
.sidebar-brand-search-wrapper {
	position: relative;
	margin-bottom: 8px;
}

.sidebar-brand-search {
	width: 100%;
	height: 30px;
	padding: 2px 8px 2px 26px;
	font-size: 11px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm, 6px);
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	font-family: var(--font-sans);
	transition: all 0.2s ease;
}

.sidebar-brand-search:focus {
	border-color: var(--primary-color);
	background-color: var(--bg-white);
	outline: none;
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.08);
}

.sidebar-brand-search-icon {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-secondary);
	font-size: 11px;
}

.sidebar-brand-list {
	padding-right: 0;
}

/* Custom scrollbar for brand list */
.sidebar-brand-list::-webkit-scrollbar {
	width: 4px;
}

.sidebar-brand-list::-webkit-scrollbar-track {
	background: transparent;
}

.sidebar-brand-list::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 2px;
}

.sidebar-brand-list::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}

.sidebar-brand-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.sidebar-brand-checkbox-label {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
	width: 100%;
	margin-bottom: 0;
	font-weight: 500;
	transition: color 0.2s ease;
}

.sidebar-brand-checkbox-label:hover {
	color: var(--text-primary);
}

.sidebar-brand-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	border: 1.5px solid var(--border-color);
	border-radius: 4px;
	margin-right: 12px;
	display: inline-grid;
	place-content: center;
	background-color: var(--bg-white);
	transition: all 0.2s ease;
	cursor: pointer;
	flex-shrink: 0;
}

.sidebar-brand-checkbox:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.sidebar-brand-checkbox::before {
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 8px;
	color: #fff;
	transform: scale(0);
	transition: transform 0.15s ease-in-out;
}

.sidebar-brand-checkbox:checked::before {
	transform: scale(1);
}

.sidebar-brand-checkbox-label.active {
	color: var(--primary-color);
	font-weight: 600;
}

/* Load More Button Styling */
.btn-load-more {
	background: var(--brand-gradient);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	padding: 10px 24px;
	border: none;
	border-radius: var(--radius-lg, 30px);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12);
	transition: all 0.25s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.btn-load-more:hover {
	background: var(--brand-gradient-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.2);
	color: #fff;
}

.btn-load-more:active {
	transform: translateY(0);
}

.btn-load-more i {
	font-size: 13px;
	transition: transform 0.3s ease;
}

.btn-load-more:hover i {
	transform: rotate(180deg);
}

.btn-load-more.loading i {
	animation: spin 1s infinite linear;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Print Styling */
@media print {
  @page {
    margin: 1.5cm !important;
  }
  
  body {
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 14pt !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header,
  footer,
  #top,
  nav,
  .info-page-banner,
  .blog-post-footer,
  #column-left,
  #column-right,
  .column-left,
  .column-right,
  .breadcrumb,
  ul.info-breadcrumb,
  aside,
  .btn,
  button,
  .desktop-top-announcement,
  .announcement-inner,
  #menu,
  .mobile-menu-wrapper {
    display: none !important;
  }

  .print-only-title {
    display: block !important;
    font-size: 24pt !important;
    color: var(--secondary-color) !important;
    font-family: var(--font-serif) !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid var(--secondary-color) !important;
    padding-bottom: 10px !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .row,
  #content,
  .col-sm-9,
  .col-sm-12 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .blog-post-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .blog-post-meta {
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 30px !important;
    padding-bottom: 15px !important;
    font-size: 10pt !important;
    color: #64748b !important;
  }

  .blog-post-content {
    font-size: 12pt !important;
    line-height: 1.6 !important;
  }

  .blog-post-content p,
  .blog-post-content span,
  .blog-post-content li {
    font-size: 12pt !important;
    line-height: 1.6 !important;
    color: #334155 !important;
  }

  .blog-post-image img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    margin-bottom: 20px !important;
  }
}

/* ── Promo Cards Grid ── */
.promo-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: var(--home-section-gap, 32px);
}

.promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  padding: 14px 4px 14px 16px;
  text-decoration: none !important;
  overflow: hidden;
  position: relative;
  min-height: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border: 1px solid transparent;
}

/* Cam çerçeve efekti - pseudo ile gradient border */
.promo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.5px;
  background: linear-gradient(145deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Üstten gelen cam parlaklığı */
.promo-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  border-radius: 16px 16px 60% 60% / 16px 16px 30px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  text-decoration: none !important;
}

.promo-card--green  {
  background: linear-gradient(145deg, rgba(240,252,246,0.62) 0%, rgba(195,235,213,0.52) 60%, rgba(160,220,190,0.42) 100%);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.promo-card--green:hover  { background: linear-gradient(145deg, rgba(240,252,246,0.82) 0%, rgba(195,235,213,0.72) 100%); }

.promo-card--orange {
  background: linear-gradient(145deg, rgba(255,247,240,0.62) 0%, rgba(253,225,195,0.52) 60%, rgba(245,200,160,0.42) 100%);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.promo-card--orange:hover { background: linear-gradient(145deg, rgba(255,247,240,0.82) 0%, rgba(253,225,195,0.72) 100%); }

.promo-card--earth  {
  background: linear-gradient(145deg, rgba(240,246,238,0.62) 0%, rgba(210,230,200,0.52) 60%, rgba(185,215,170,0.42) 100%);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.promo-card--earth:hover  { background: linear-gradient(145deg, rgba(240,246,238,0.82) 0%, rgba(210,230,200,0.72) 100%); }

.promo-card--deep   {
  background: linear-gradient(145deg, rgba(232,242,237,0.62) 0%, rgba(185,218,202,0.52) 60%, rgba(155,200,178,0.42) 100%);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
.promo-card--deep:hover   { background: linear-gradient(145deg, rgba(232,242,237,0.82) 0%, rgba(185,218,202,0.72) 100%); }

.promo-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  flex: 1;
  min-width: 0;
  position: relative;
}

.promo-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 18px;
  margin-top: 2px;
}

.promo-card-shipping {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
  box-shadow: 0 1px 4px rgba(26, 138, 72, 0.3);
  animation: promoShippingPulse 1.8s ease-in-out infinite;
}

.promo-card--orange .promo-card-shipping {
  background: linear-gradient(135deg, #c96828 0%, #e07b39 100%);
  box-shadow: 0 2px 8px rgba(201, 104, 40, 0.35);
}

.promo-card--earth .promo-card-shipping {
  background: linear-gradient(135deg, #4a6a3a 0%, #5d8248 100%);
  box-shadow: 0 2px 8px rgba(74, 106, 58, 0.35);
}

.promo-card-shipping svg {
  flex-shrink: 0;
}

@keyframes promoShippingPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(26, 138, 72, 0.35);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(26, 138, 72, 0);
  }
}

.promo-card--orange .promo-card-shipping {
  animation-name: promoShippingPulseOrange;
}

.promo-card--earth .promo-card-shipping {
  animation-name: promoShippingPulseEarth;
}

@keyframes promoShippingPulseOrange {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(201, 104, 40, 0.35);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(201, 104, 40, 0);
  }
}

@keyframes promoShippingPulseEarth {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(74, 106, 58, 0.35);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(74, 106, 58, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-card-shipping {
    animation: none;
  }
}

.promo-card-label {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.2;
}

.promo-card--green  .promo-card-label { color: var(--primary-color); }
.promo-card--orange .promo-card-label { color: #c96828; }
.promo-card--earth  .promo-card-label { color: #4a6a3a; }
.promo-card--deep   .promo-card-label { color: var(--secondary-color); }

.promo-card-title {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  color: var(--text-primary, #1e293b);
  letter-spacing: -0.2px;
}

.promo-card-title em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.72;
  display: inline;
  font-size: 0.88em;
  margin-left: 4px;
}

.promo-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  margin-top: 0;
  flex-shrink: 0;
  transition: gap 0.2s;
}

.promo-card:hover .promo-card-btn {
  gap: 8px;
}

.promo-card:hover .promo-card-icon svg {
  transform: scale(1.1) translateY(-4px) rotate(3deg);
}

.promo-card--green  .promo-card-btn { color: var(--primary-color); }
.promo-card--orange .promo-card-btn { color: #c96828; }
.promo-card--earth  .promo-card-btn { color: #4a6a3a; }
.promo-card--deep   .promo-card-btn { color: var(--secondary-color); }

.promo-card-icon {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.promo-card-icon svg {
  width: 64px;
  height: 64px;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 991px) {
  .promo-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .promo-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-bottom: 16px;
  }
  .promo-card {
    padding: 8px 2px 8px 8px;
    border-radius: 9px;
    align-items: center;
  }
  .promo-card-body {
    gap: 1px;
  }
  .promo-card-foot {
    min-height: 15px;
    margin-top: 1px;
    gap: 4px;
  }
  .promo-card-label {
    font-size: 6.5px;
    letter-spacing: 0.5px;
    line-height: 1.1;
  }
  .promo-card-title {
    font-size: 11px;
    line-height: 1.15;
  }
  .promo-card-title em {
    display: none;
  }
  .promo-card-btn {
    font-size: 9px;
  }
  .promo-card-btn svg {
    width: 9px;
    height: 9px;
  }
  .promo-card-icon {
    width: 36px;
  }
  .promo-card-icon svg {
    width: 34px;
    height: 34px;
  }
  .promo-card-shipping {
    padding: 2px 4px;
    font-size: 6px;
    gap: 2px;
  }
  .promo-card-shipping svg {
    width: 7px;
    height: 7px;
  }
}

/* ── Search Results Page ── */
#product-search-page {
  padding-top: 20px;
  padding-bottom: 40px;
}

.search-page-header {
  margin-bottom: 24px;
}

.search-page-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.search-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.search-page-query {
  color: var(--primary-color);
}

.search-page-count {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.search-page-refine {
  max-width: 520px;
}

.search-page-box #search {
  border-radius: var(--radius-lg);
  overflow: visible;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}

.search-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  flex-wrap: wrap;
  gap: 10px;
}

.search-no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.search-no-results-icon {
  font-size: 48px;
  color: var(--border-color);
  margin-bottom: 16px;
}

.search-no-results-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.search-no-results-sub {
  font-size: 14px;
}

@media (max-width: 991px) {
  .search-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .search-page-title {
    font-size: 18px;
  }
  .search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .search-page-refine {
    max-width: 100%;
  }
}

/* ── Live Search Dropdown ── */
.search-livesearch-wrap {
  position: relative;
  width: 100%;
}

.livesearch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  z-index: 10050;
  overflow: hidden;
  max-height: 440px;
  overflow-y: auto;
}

@media (min-width: 992px) {
  .header-search-col .livesearch-dropdown {
    z-index: 10050;
  }
}

.livesearch-dropdown .ls-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}

.livesearch-dropdown .ls-item:last-child {
  border-bottom: none;
}

.livesearch-dropdown .ls-item:hover {
  background: #f8fdf5;
}

.livesearch-dropdown .ls-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #eef2f7;
}

.livesearch-dropdown .ls-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.livesearch-dropdown .ls-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.livesearch-dropdown .ls-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-color, var(--primary-color));
}

.livesearch-dropdown .ls-special {
  color: var(--secondary-color, #e07b39);
}

.livesearch-dropdown .ls-price-old {
  font-size: 12px;
  color: #94a3b8;
  text-decoration: line-through;
  margin-left: 4px;
}

@media (max-width: 767px) {
  .livesearch-dropdown {
    border-radius: 8px;
  }
  .livesearch-dropdown .ls-thumb {
    width: 42px;
    height: 42px;
  }
  .livesearch-dropdown .ls-name {
    font-size: 13px;
  }
}

/* ==========================================================================
   Account Login & Register Responsive Width & Alignment Fixes (Mobile/Tablet)
   ========================================================================== */
@media (max-width: 991px) {
	/* Ensure container is full width and has padding */
	#account-login.container,
	#account-register.container,
	#account-forgotten.container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		margin: 0 auto !important;
		float: none !important;
	}

	/* Ensure row and content are full width and block */
	#account-login .row,
	#account-register .row,
	#account-forgotten .row,
	#account-login #content,
	#account-register #content,
	#account-forgotten #content {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		float: none !important;
		display: block !important;
	}

	/* Ensure card container is display: flex and centers child */
	.login-card-container {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 20px 0 40px 0 !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
		float: none !important;
	}

	/* Ensure the card spans the full available width with a maximum width */
	.login-card,
	.login-card.register-card {
		width: 100% !important;
		max-width: 500px !important; /* Perfect width for form on mobile/tablet */
		margin: 0 auto !important;
		padding: 28px 24px !important;
		border-radius: var(--radius-md) !important;
		box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.08) !important;
		border: 1.5px solid rgba(var(--primary-rgb), 0.15) !important;
		background: var(--bg-white) !important;
		box-sizing: border-box !important;
		float: none !important;
	}

	/* Reset Bootstrap horizontal form constraints */
	#account-register .form-horizontal .form-group,
	.register-card .form-horizontal .form-group {
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: block !important;
		width: 100% !important;
	}

	#account-register .col-sm-10,
	#account-register .col-sm-2,
	#account-register .col-sm-offset-2,
	.register-card .col-sm-10,
	.register-card .col-sm-2,
	.register-card .col-sm-offset-2 {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		float: none !important;
		margin: 0 0 10px 0 !important;
	}

	/* Inputs must be full width */
	.register-card .form-control,
	.login-card .input-wrapper-modern,
	.login-card .input-field-modern {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 575px) {
	/* On small phones, give a bit more breathing room by using slightly smaller paddings */
	.login-card,
	.login-card.register-card {
		padding: 22px 18px !important;
		max-width: 100% !important;
	}

	#account-login.container,
	#account-register.container,
	#account-forgotten.container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* Hide custom fields by default on registration page and modal to prevent flashing/showing on load */
#account-register .custom-field,
.login-modal-box .custom-field,
.custom-field.force-hide {
	display: none !important;
}

/* --- Cart & Product Campaign Progress Bar Styling --- */
.product-campaign-progress-card,
.cart-item-campaign-progress {
	background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 0%, rgba(var(--secondary-rgb), 0.06) 100%);
	border: 1px solid rgba(var(--primary-rgb), 0.15);
	border-radius: 12px;
	padding: 16px;
	margin: 15px 0;
	box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.04);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.product-campaign-progress-card:hover,
.cart-item-campaign-progress:hover {
	border-color: rgba(var(--primary-rgb), 0.3);
	box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.08);
}

.campaign-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.campaign-tag {
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color);
	background: rgba(var(--primary-rgb), 0.1);
	padding: 4px 10px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.campaign-title-text {
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.campaign-hint,
.campaign-hint-text {
	font-size: 12px;
	font-weight: 500;
	color: #666;
}

.progress-bar-container-custom {
	position: relative;
	margin-top: 24px;
	margin-bottom: 10px;
}

.progress-steps-line {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
	width: 100%;
}

.progress-step-node {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.progress-step-node::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ddd;
	transition: all 0.3s ease;
}

.progress-step-node.active {
	border-color: var(--primary-color);
	transform: scale(1.15);
	box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.progress-step-node.active::before {
	background: var(--primary-color);
}

.progress-step-node.completed {
	border-color: var(--primary-color);
	background: var(--primary-color);
}

.progress-step-node.completed::before {
	content: '\f00c';
	font-family: FontAwesome;
	color: #fff;
	font-size: 10px;
	border-radius: 0;
	background: transparent;
	width: auto;
	height: auto;
}

.step-label {
	position: absolute;
	top: -24px;
	font-size: 11px;
	font-weight: 700;
	color: #777;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.progress-step-node.active .step-label,
.progress-step-node.completed .step-label {
	color: var(--primary-color);
	font-weight: 800;
}

.progress-bar-wrap {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	height: 4px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 2px;
	z-index: 1;
	overflow: hidden;
}

.progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
	width: 0%;
	border-radius: 2px;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.progress-bar-fill::after {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image: linear-gradient(
		-45deg, 
		rgba(255, 255, 255, .15) 25%, 
		transparent 25%, 
		transparent 50%, 
		rgba(255, 255, 255, .15) 50%, 
		rgba(255, 255, 255, .15) 75%, 
		transparent 75%, 
		transparent
	);
	background-size: 20px 20px;
	animation: progress-bar-stripes 1.5s linear infinite;
}

@keyframes progress-bar-stripes {
	from { background-position: 0 0; }
	to { background-position: 20px 0; }
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
	.product-campaign-progress-card,
	.cart-item-campaign-progress {
		padding: 12px;
	}
	.campaign-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.step-label {
		font-size: 10px;
		top: 26px;
	}
	.progress-bar-container-custom {
		margin-top: 12px;
		margin-bottom: 24px;
	}
}

/* --- Global Shipping Progress Visual Overrides (All Specificity Levels) --- */
.shipping-progress-wrap,
.cart-drawer-shipping-progress .shipping-progress-wrap,
.checkout-summary-progress .shipping-progress-wrap,
.checkout-shipping-progress .shipping-progress-wrap {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
}

.shipping-progress,
.shipping-progress--campaign,
.shipping-progress--general,
.cart-drawer-shipping-progress .shipping-progress,
.checkout-summary-progress .shipping-progress,
.checkout-shipping-progress .shipping-progress {
	background: #ffffff !important;
	border: 1px solid rgba(var(--primary-rgb), 0.25) !important;
	border-radius: 12px !important;
	padding: 16px !important;
	box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.04) !important;
	transition: all 0.3s ease !important;
}

.shipping-progress:hover,
.cart-drawer-shipping-progress .shipping-progress:hover,
.checkout-summary-progress .shipping-progress:hover {
	border-color: rgba(var(--primary-rgb), 0.45) !important;
	box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.08) !important;
}

.shipping-progress-head,
.cart-drawer-shipping-progress .shipping-progress-head {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 10px !important;
}

.shipping-progress-title,
.cart-drawer-shipping-progress .shipping-progress-title {
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	color: var(--secondary-color) !important; /* Deep forest green for high readability */
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.shipping-progress-title i,
.cart-drawer-shipping-progress .shipping-progress-title i {
	color: var(--primary-color) !important; /* Theme primary green */
}

.shipping-progress-count,
.cart-drawer-shipping-progress .shipping-progress-count {
	font-family: var(--font-sans) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var(--primary-color) !important;
	background: rgba(var(--primary-rgb), 0.08) !important;
	padding: 3px 10px !important;
	border-radius: 12px !important;
}

.shipping-progress-track,
.cart-drawer-shipping-progress .shipping-progress-track {
	height: 8px !important;
	background: rgba(var(--primary-rgb), 0.08) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	margin-bottom: 10px !important;
	position: relative !important;
}

.shipping-progress-fill,
.shipping-progress--campaign .shipping-progress-fill,
.cart-drawer-shipping-progress .shipping-progress-fill {
	height: 100% !important;
	background: linear-gradient(90deg, var(--primary-color), var(--primary-color)) !important; /* Theme green gradient */
	display: block !important;
	border-radius: 999px !important;
	transition: width 0.5s ease !important;
}

.shipping-progress-message,
.cart-drawer-shipping-progress .shipping-progress-message {
	font-family: var(--font-sans) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--secondary-color) !important; /* Deep forest green for text */
	margin: 0 0 6px 0 !important;
	line-height: 1.4 !important;
}

.shipping-progress-hint,
.cart-drawer-shipping-progress .shipping-progress-hint {
	font-family: var(--font-sans) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5c6660 !important; /* Darker sage gray for readability */
	margin: 0 !important;
	line-height: 1.45 !important;
}

.shipping-progress-cta,
.cart-drawer-shipping-progress .shipping-progress-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	font-family: var(--font-sans) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: #ffffff !important; /* White text on green background for max contrast */
	background: var(--primary-color) !important; /* Theme primary green */
	border: 1px solid var(--primary-color) !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	text-decoration: none !important;
	margin-top: 12px !important;
	width: 100% !important; /* Block layout for full mobile visibility */
	text-align: center !important;
	box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.15) !important;
	transition: all 0.25s ease !important;
}

.shipping-progress-cta:hover,
.cart-drawer-shipping-progress .shipping-progress-cta:hover {
	color: #ffffff !important;
	background: var(--primary-color) !important; /* Darker green on hover */
	border-color: var(--primary-color) !important;
	box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.25) !important;
	text-decoration: none !important;
}

/* Complete state overrides */
.shipping-progress.is-complete,
.cart-drawer-shipping-progress .shipping-progress.is-complete {
	background: rgba(var(--primary-rgb), 0.02) !important;
	border-color: rgba(var(--primary-rgb), 0.35) !important;
}

.shipping-progress.is-complete .shipping-progress-fill,
.cart-drawer-shipping-progress .shipping-progress.is-complete .shipping-progress-fill {
	background: var(--primary-color) !important;
}

/* Milestone Link Fixes */
.progress-step-node,
a.progress-step-node,
a.progress-step-node:hover,
a.progress-step-node:focus {
	text-decoration: none !important;
	cursor: pointer !important;
	color: inherit !important;
}

/* Cart Promo Section Accordion Styling */
.cart-promo-section .panel-default {
	border: 1px solid var(--border-light, #e5e5e5) !important;
	border-radius: var(--radius-sm, 6px) !important;
	box-shadow: none !important;
	margin-bottom: 12px !important;
	overflow: hidden;
	background: #fff !important;
}

.cart-promo-section .panel-heading {
	background: var(--bg-light, #fafafa) !important;
	border-bottom: 1px solid var(--border-light, #e5e5e5) !important;
	padding: 14px 18px !important;
}

.cart-promo-section .panel-title a {
	font-family: var(--font-sans, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: 14px;
	color: var(--primary-color, var(--secondary-color)) !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none !important;
}

.cart-promo-section .panel-title a i {
	font-size: 12px;
	color: var(--package-green-dark, var(--secondary-color));
}

.cart-promo-section .panel-body {
	padding: 18px !important;
}

.cart-promo-section .control-label {
	font-family: var(--font-sans, 'Outfit', sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
	display: block;
}

.cart-promo-section .input-group {
	width: 100%;
	display: flex !important;
	border: 1.5px solid var(--border-color, #d5d5d5);
	border-radius: var(--radius-sm, 6px);
	overflow: hidden;
	background-color: #fff;
	transition: border-color var(--transition-speed, 0.2s);
}

.cart-promo-section .input-group:focus-within {
	border-color: var(--primary-color, var(--secondary-color));
}

.cart-promo-section .input-group .form-control {
	border: none !important;
	box-shadow: none !important;
	height: 42px !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	font-family: var(--font-sans, 'Outfit', sans-serif) !important;
	flex-grow: 1 !important;
}

.cart-promo-section .input-group-btn {
	width: auto !important;
	display: block !important;
}

.cart-promo-section .input-group-btn .btn-primary,
.cart-promo-section .input-group-btn .btn,
.cart-promo-section input[type="submit"] {
	background: linear-gradient(135deg, var(--package-green, var(--primary-color)) 0%, var(--package-green-dark, var(--secondary-color)) 100%) !important;
	color: #fff !important;
	border: none !important;
	height: 42px !important;
	padding: 0 20px !important;
	font-family: var(--font-sans, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: 13px !important;
	transition: background 0.2s ease;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.cart-promo-section .input-group-btn .btn-primary:hover,
.cart-promo-section .input-group-btn .btn:hover,
.cart-promo-section input[type="submit"]:hover {
	background: var(--package-green-dark, var(--secondary-color)) !important;
}

/* ==========================================================================
   ONE-PAGE CHECKOUT OVERRIDES
   ========================================================================== */
.checkout--one-page .panel-group {
    margin-bottom: 0;
}
.checkout--one-page .panel-default {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    background: transparent;
}
.checkout--one-page .panel-heading {
    background: transparent;
    border: none;
    padding: 0 0 15px 0;
}
.checkout--one-page .panel-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}
.checkout--one-page .panel-title a,
.checkout--one-page .panel-title span,
.checkout--one-page .panel-heading .panel-title {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    cursor: default;
    pointer-events: none;
}
.checkout--one-page .panel-title .fa-caret-down {
    display: none;
}
.checkout--one-page .panel-body {
    background: #fff;
    border: 1px solid var(--border-color) !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.checkout--one-page .panel-collapse {
    transition: none !important;
}
.checkout--one-page .buttons {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 0 0 !important;
    margin: 0 !important;
}
.checkout--one-page .buttons .btn-primary {
    width: auto;
    min-width: 200px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   CHECKOUT WELCOME MODAL
   ========================================================================== */
.checkout-welcome-modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.checkout-welcome-modal .modal-dialog {
    max-width: 500px;
    width: 90%;
    margin: 0;
    padding: 0;
    transform: none !important;
}
.checkout-welcome-modal .modal-content {
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-lg);
    background: var(--bg-white);
}
.checkout-welcome-modal .modal-header {
    border-bottom: none;
    padding: 35px 30px 10px 30px;
    text-align: center;
}
.checkout-welcome-modal .modal-title {
    font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: -0.5px;
}
.checkout-welcome-modal .modal-body {
    padding: 10px 30px 40px 30px;
    text-align: center;
    font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
}
.checkout-welcome-modal .modal-desc {
    margin-bottom: 30px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}
.checkout-welcome-modal .btn-guest {
    margin-bottom: 15px;
    padding: 14px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-family: var(--font-sans);
    background: var(--primary-color);
    border: none;
    color: #fff;
    transition: var(--transition-speed);
}
.checkout-welcome-modal .btn-guest:hover {
    background: var(--primary-hover);
}
.checkout-welcome-modal .btn-member {
    padding: 14px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    background: transparent;
    font-weight: 700;
    font-family: var(--font-sans);
    transition: var(--transition-speed);
}
.checkout-welcome-modal .btn-member:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
@media (max-width: 767px) {
    .checkout-welcome-modal .modal-header {
        padding: 30px 15px 10px 15px;
    }
    .checkout-welcome-modal .modal-body {
        padding: 10px 20px 30px 20px;
    }
    .checkout-welcome-modal .modal-title {
        font-size: 18px;
        white-space: nowrap;
        letter-spacing: -0.5px;
    }
}