/**
 * Ecocartify Main Theme Stylesheet
 * 
 * Design inspired by Ghorer Bazar & premium organic grocery stores.
 * Colors: Vibrant Amber Orange (#f27922) + Deep Pine Green (#044234)
 */

/* ==========================================================================
   1. CSS Custom Properties / Design Tokens
   ========================================================================== */
:root {
	--ec-primary: #f27922;
	--ec-primary-hover: #d66513;
	--ec-primary-light: #fff7ed;
	--ec-secondary: #044234;
	--ec-category-bar-bg: #044234;
	--ec-category-bar-hover: #032f25;
	--ec-category-bar-text: #ffffff;
	--ec-dark: #1f2937;
	--ec-body: #374151;
	--ec-muted: #6b7280;
	--ec-border: #e5e7eb;
	--ec-card-bg: #ffffff;
	--ec-body-bg: #fdfdfd;
	--ec-success: #16a34a;
	--ec-success-bg: #dcfce7;
	--ec-danger: #dc2626;
	--ec-container-width: 1320px;
	--ec-card-radius: 8px;
	--ec-button-radius: 6px;
	--ec-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ec-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--ec-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--ec-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
	--ec-transition: all 0.25s ease-in-out;
}

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

body {
	margin: 0;
	padding: 0;
	font-family: var(--ec-font-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ec-body);
	background-color: var(--ec-body-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
	transition: var(--ec-transition);
}

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

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

h1, h2, h3, h4, h5, h6 {
	color: var(--ec-dark);
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 1rem;
	padding-left: 1.25rem;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

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

.skip-link:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Layout Container */
.ecocartify-container {
	width: 100%;
	max-width: var(--ec-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* Icon System */
.ecocartify-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ecocartify-icon svg {
	width: 1.25em;
	height: 1.25em;
	display: block;
}

/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */
.ecocartify-topbar {
	background-color: #111827;
	color: #f3f4f6;
	font-size: 13px;
	padding: 8px 0;
	text-align: center;
}

.ecocartify-main-header {
	background-color: var(--ec-header-bg, #ffffff);
	border-bottom: 1px solid var(--ec-border);
	padding: 14px 0;
	position: relative;
	z-index: 100;
}

.ecocartify-header-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 20px !important;
}

/* Logo */
.ecocartify-logo-area {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
}

.ecocartify-text-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.logo-leaf {
	color: var(--ec-primary);
	font-size: 26px;
}

.logo-main {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--ec-dark);
	display: block;
	line-height: 1;
}

.logo-tagline {
	font-size: 11px;
	color: var(--ec-muted);
	font-weight: 500;
	display: block;
	margin-top: 3px;
}

/* Search Area */
.ecocartify-search-area {
	flex: 1;
	max-width: 600px;
	position: relative;
}

.ecocartify-header-search-wrap {
	position: relative;
	width: 100%;
}

.search-input-group {
	display: flex;
	align-items: center;
	position: relative;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #f8f9fa;
	transition: var(--ec-transition);
	overflow: hidden;
	height: 38px;
}

.search-input-group:focus-within {
	border-color: var(--ec-primary);
	background: #ffffff;
	box-shadow: 0 0 0 2px rgba(242, 121, 34, 0.12);
}

.search-input-group .search-field {
	flex: 1;
	border: none;
	background: transparent;
	padding: 8px 14px;
	font-size: 13.5px;
	outline: none;
	color: var(--ec-dark);
}

.search-input-group .search-field::placeholder {
	color: #9ca3af;
	font-size: 13px;
}

.search-input-group .search-submit {
	border: none;
	background: transparent;
	color: #6b7280;
	padding: 8px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--ec-transition);
}

.search-input-group .search-submit svg {
	width: 17px;
	height: 17px;
}

.search-input-group .search-submit:hover {
	color: var(--ec-primary);
}

/* AJAX Search Results Dropdown */
.ecocartify-ajax-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: var(--ec-shadow-lg);
	border: 1px solid var(--ec-border);
	margin-top: 8px;
	z-index: 1000;
	max-height: 420px;
	overflow-y: auto;
}

.ajax-search-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ajax-search-item {
	border-bottom: 1px solid #f3f4f6;
}

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

.ajax-search-item-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	transition: var(--ec-transition);
}

.ajax-search-item-link:hover {
	background-color: var(--ec-primary-light);
}

.ajax-search-item-link .item-thumb {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #eee;
}

.ajax-search-item-link .item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ajax-search-item-link .item-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--ec-dark);
	display: block;
}

.ajax-search-item-link .item-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--ec-primary);
}

.ajax-search-footer {
	padding: 10px 14px;
	text-align: center;
	background-color: #f9fafb;
	border-top: 1px solid var(--ec-border);
}

.ajax-search-footer a {
	font-size: 13px;
	font-weight: 600;
	color: var(--ec-primary);
}

/* Header Actions */
.ecocartify-header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ecocartify-header-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px 6px;
	color: var(--ec-dark);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: var(--ec-transition);
	position: relative;
}

.ecocartify-header-action-btn .action-icon {
	font-size: 20px;
	color: #374151;
	margin-bottom: 2px;
	transition: var(--ec-transition);
}

.ecocartify-header-action-btn:hover .action-icon,
.ecocartify-header-action-btn:hover .action-label {
	color: var(--ec-primary);
}

.icon-with-badge {
	position: relative;
	display: inline-block;
}

.ecocartify-cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	background-color: var(--ec-primary);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	min-width: 17px;
	height: 17px;
	line-height: 17px;
	border-radius: 50%;
	text-align: center;
	padding: 0 3px;
}

/* More Dropdown */
.ecocartify-more-dropdown-container {
	position: relative;
}

.ecocartify-more-dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	width: 175px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	border: 1px solid #eef0f2;
	padding: 6px 0;
	margin-top: 8px;
	display: none;
	z-index: 1000;
}

.ecocartify-more-dropdown-container:hover .ecocartify-more-dropdown-menu,
.ecocartify-more-dropdown-container:focus-within .ecocartify-more-dropdown-menu,
.ecocartify-more-dropdown-container.is-open .ecocartify-more-dropdown-menu {
	display: block;
}

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

.more-menu-list li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	transition: var(--ec-transition);
}

.more-menu-list li a svg {
	width: 16px;
	height: 16px;
	color: #6b7280;
	flex-shrink: 0;
}

.more-menu-list li a:hover {
	background-color: #f9fafb;
	color: var(--ec-primary);
}

.more-menu-list li a:hover svg {
	color: var(--ec-primary);
}

/* Mobile Bottom Navigation Bar (Hidden by Default on Desktop) */
.ecocartify-mobile-bottom-nav {
	display: none;
}

/* Dark Green Category Navigation Bar */
.ecocartify-category-nav-bar {
	background-color: var(--ec-category-bar-bg);
	color: var(--ec-category-bar-text);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-nav-inner {
	display: flex;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
}

.category-nav-inner::-webkit-scrollbar {
	display: none;
}

.category-nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.category-nav-menu > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: #ffffff;
	border-bottom: 3px solid transparent;
	transition: var(--ec-transition);
}

.category-nav-menu > li:hover > a,
.category-nav-menu > li.current-menu-item > a {
	background-color: rgba(255, 255, 255, 0.08);
	border-bottom-color: var(--ec-primary);
	color: #ffffff;
}

.category-nav-menu .offer-item > a {
	color: #fde047;
	font-weight: 700;
}

/* Submenu dropdowns */
.category-nav-menu li {
	position: relative;
}

.category-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	min-width: 200px;
	box-shadow: var(--ec-shadow-lg);
	border-radius: 6px;
	list-style: none;
	padding: 6px 0;
	margin: 0;
	display: none;
	z-index: 1000;
}

.category-nav-menu li:hover > .sub-menu {
	display: block;
}

.category-nav-menu .sub-menu li a {
	display: block;
	padding: 8px 16px;
	color: var(--ec-dark);
	font-size: 13px;
	font-weight: 500;
}

.category-nav-menu .sub-menu li a:hover {
	background: var(--ec-primary-light);
	color: var(--ec-primary);
}

/* Mobile Nav Toggle */
.ecocartify-mobile-toggle-wrap {
	display: none;
}

.ecocartify-mobile-nav-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 24px;
	color: var(--ec-dark);
	padding: 4px;
}

/* ==========================================================================
   4. Homepage Sections (Reference Inspired)
   ========================================================================== */

/* Hero Banner Section */
.ecocartify-hero-section {
	padding: 24px 0 16px;
}

.ecocartify-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

.hero-main-banner {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 380px !important;
	overflow: hidden !important;
	border-radius: 12px;
	position: relative;
}

.hero-banner-card {
	background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 50%, #fed7aa 100%);
	border-radius: 12px;
	padding: 40px;
	position: relative;
	overflow: hidden;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #fde68a;
}

/* Multi-Slide Carousel Container - Strictly Horizontal, Never Stacks */
.hero-slider-container {
	position: relative !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
}

.hero-slider-track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
	will-change: transform !important;
}

.hero-slide {
	min-width: 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	flex-shrink: 0 !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 40px;
	position: relative !important;
	overflow: hidden !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 12px;
	box-sizing: border-box !important;
}

.hero-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.75) 60%, rgba(255,255,255,0.2) 100%);
	border-radius: 12px;
	z-index: 1;
}

.hero-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--ec-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: var(--ec-transition);
}

.hero-slider-arrow:hover {
	background: var(--ec-primary);
	color: #ffffff;
}

.hero-arrow-prev { left: 14px; }
.hero-arrow-next { right: 14px; }

.hero-slider-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 10;
}

.hero-slider-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: var(--ec-transition);
}

.hero-slider-dot.is-active {
	background: var(--ec-primary);
	width: 22px;
	border-radius: 5px;
}

.hero-banner-content {
	max-width: 480px;
	z-index: 2;
}

.hero-badge {
	display: inline-block;
	background-color: var(--ec-primary);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.hero-title {
	font-size: 32px;
	font-weight: 800;
	color: #78350f;
	margin-bottom: 12px;
	line-height: 1.25;
}

.hero-subtitle {
	font-size: 15px;
	color: #92400e;
	margin-bottom: 24px;
}

.hero-cta-group {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero-primary-btn {
	background-color: var(--ec-primary);
	color: #ffffff !important;
	padding: 12px 24px;
	border-radius: var(--ec-button-radius);
	font-weight: 700;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(242, 121, 34, 0.3);
}

.hero-primary-btn:hover {
	background-color: var(--ec-primary-hover);
}

.hero-outline-btn {
	background: #ffffff;
	color: var(--ec-dark) !important;
	padding: 12px 20px;
	border-radius: var(--ec-button-radius);
	font-weight: 600;
	font-size: 14px;
	border: 1px solid #d1d5db;
}

.hero-outline-btn:hover {
	border-color: var(--ec-primary);
	color: var(--ec-primary) !important;
}

.hero-deal-pill {
	background: #ffffff;
	border-radius: 50%;
	width: 110px;
	height: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ec-shadow-md);
	border: 3px solid var(--ec-primary);
	text-align: center;
	flex-shrink: 0;
}

.hero-deal-pill .deal-save {
	font-size: 11px;
	font-weight: 700;
	color: var(--ec-muted);
}

.hero-deal-pill .deal-pct {
	font-size: 28px;
	font-weight: 900;
	color: var(--ec-primary);
	line-height: 1;
}

.hero-deal-pill .deal-off {
	font-size: 11px;
	font-weight: 700;
	color: var(--ec-dark);
}

/* Side Banner Card & Container */
.hero-side-banner {
	height: 380px !important;
	max-height: 380px !important;
	min-width: 0 !important;
	width: 100% !important;
	overflow: hidden !important;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
}

.side-banner-card {
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border: 1px solid #a7f3d0;
	border-radius: 12px;
	padding: 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: var(--ec-transition);
}

.side-banner-card.side-banner-clickable {
	text-decoration: none;
	cursor: pointer;
}

.side-banner-card.side-banner-clickable:hover {
	transform: translateY(-2px);
	box-shadow: var(--ec-shadow-md);
}

/* Side Banner Full Image Mode */
.side-banner-image-wrap {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--ec-shadow-sm);
	transition: var(--ec-transition);
	position: relative;
}

.side-banner-image-wrap:hover {
	transform: translateY(-3px);
	box-shadow: var(--ec-shadow-md);
}

.side-banner-img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	transition: transform 0.4s ease;
}

.side-banner-image-wrap:hover .side-banner-img {
	transform: scale(1.02);
}

.side-banner-badge {
	font-size: 12px;
	font-weight: 700;
	color: #065f46;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.side-banner-title {
	font-size: 22px;
	font-weight: 800;
	color: #064e3b;
	margin-bottom: 14px;
}

.side-banner-perks {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.side-banner-perks li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #047857;
	font-weight: 500;
	margin-bottom: 8px;
}

.side-banner-btn {
	font-weight: 700;
	font-size: 13.5px;
	color: #065f46;
	text-decoration: underline;
}

/* Featured Categories Carousel / Grid */
.ecocartify-categories-section {
	padding: 30px 0;
}

.section-header-center {
	text-align: center;
	margin-bottom: 24px;
}

.section-header-center .section-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--ec-dark);
}

.categories-carousel-wrap {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	position: relative !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	gap: 12px !important;
	padding: 0 4px !important;
	box-sizing: border-box !important;
}

.category-nav-arrow {
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	border: 1.5px solid #e5e7eb !important;
	color: var(--ec-primary) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 22px !important;
	line-height: 1 !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
	transition: all 0.2s ease !important;
	z-index: 10 !important;
	outline: none !important;
	box-sizing: border-box !important;
}

.category-arrow-prev {
	order: 1 !important;
}

.categories-carousel-track {
	order: 2 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 16px !important;
	padding: 10px 4px 14px !important;
	margin: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
}

.categories-carousel-track::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.category-arrow-next {
	order: 3 !important;
}

.category-nav-arrow:hover {
	background: var(--ec-primary) !important;
	color: #ffffff !important;
	border-color: var(--ec-primary) !important;
	box-shadow: 0 4px 12px rgba(242, 121, 34, 0.35) !important;
	transform: scale(1.06) !important;
}

.category-nav-arrow:active {
	transform: scale(0.95) !important;
}

.category-card-item {
	flex: 0 0 calc((100% - 6 * 14px) / 7) !important;
	max-width: calc((100% - 6 * 14px) / 7) !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	text-decoration: none !important;
	color: inherit !important;
	flex-shrink: 0 !important;
	transition: transform 0.2s ease !important;
}

@media (max-width: 1024px) {
	.category-card-item {
		flex: 0 0 calc((100% - 4 * 12px) / 5) !important;
		max-width: calc((100% - 4 * 12px) / 5) !important;
	}
}

@media (max-width: 768px) {
	.category-card-item {
		flex: 0 0 calc((100% - 2 * 10px) / 3) !important;
		max-width: calc((100% - 2 * 10px) / 3) !important;
	}
	.category-card-box {
		width: 76px !important;
		height: 76px !important;
		border-radius: 12px !important;
		padding: 8px !important;
	}
	.category-card-title {
		font-size: 11.5px !important;
	}
}

.category-card-box {
	width: 100px;
	height: 100px;
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid var(--ec-border);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ec-shadow-sm);
	transition: var(--ec-transition);
	overflow: hidden;
	padding: 12px;
	margin-bottom: 10px;
}

.category-card-item:hover .category-card-box {
	transform: translateY(-4px);
	box-shadow: var(--ec-shadow-md);
	border-color: var(--ec-primary);
}

.category-card-box img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.category-icon-fallback {
	font-size: 32px;
	color: var(--ec-primary);
}

.category-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--ec-dark);
	margin: 0;
}

/* Category Product Section Carousel Dots */
.ecocartify-carousel-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	margin-bottom: 8px;
}

.ecocartify-carousel-dots .carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d1d5db;
	cursor: pointer;
	transition: var(--ec-transition);
}

.ecocartify-carousel-dots .carousel-dot.is-active {
	width: 24px;
	border-radius: 4px;
	background: var(--ec-primary);
}

/* Section Header Rows */
.section-header-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-bottom: 20px;
	border-bottom: 1px solid #f3f4f6;
	padding-bottom: 12px;
}

.header-left {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.header-right {
	margin-left: auto !important;
	flex-shrink: 0 !important;
}

.section-header-row .section-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	position: relative;
}

.section-title.border-accent::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -13px;
	width: 60px;
	height: 3px;
	background-color: var(--ec-primary);
	border-radius: 2px;
}

.heading-badge.best-seller-badge {
	background-color: #ef4444;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.view-all-link {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ec-primary);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.5px;
}

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

/* Trust Section */
.ecocartify-trust-section {
	padding: 40px 0;
	background-color: #f9fafb;
	border-top: 1px solid var(--ec-border);
	border-bottom: 1px solid var(--ec-border);
	margin: 40px 0;
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.trust-box {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid var(--ec-border);
}

.trust-icon {
	color: var(--ec-primary);
	font-size: 28px;
	flex-shrink: 0;
}

.trust-info h4 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 4px;
}

.trust-info p {
	font-size: 13px;
	color: var(--ec-muted);
	margin: 0;
}

/* Brands Section */
.ecocartify-brands-section {
	padding: 20px 0 40px;
}

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

.brand-item-card {
	background: #ffffff;
	border: 1px solid var(--ec-border);
	border-radius: 8px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 1px;
	color: #4b5563;
	box-shadow: var(--ec-shadow-sm);
	transition: var(--ec-transition);
}

.brand-item-card:hover {
	border-color: var(--ec-primary);
	color: var(--ec-primary);
	transform: translateY(-2px);
}

/* ==========================================================================
   5. Footer
   ========================================================================== */
.ecocartify-footer {
	background-color: #ffffff;
	border-top: 1px solid var(--ec-border);
	padding-top: 48px;
}

.ecocartify-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	gap: 32px;
	padding-bottom: 40px;
}

.footer-widget-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ec-dark);
	margin-bottom: 16px;
}

.footer-about-text {
	font-size: 13.5px;
	color: var(--ec-muted);
	margin-bottom: 16px;
	max-width: 320px;
}

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

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--ec-dark);
	margin-bottom: 8px;
}

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

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

.footer-links-list li a {
	font-size: 13.5px;
	color: #4b5563;
}

.footer-links-list li a:hover {
	color: var(--ec-primary);
	padding-left: 4px;
}

.footer-payment-desc {
	font-size: 13px;
	color: var(--ec-muted);
	margin-bottom: 12px;
}

.footer-payment-methods {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.payment-badge {
	display: inline-block;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: #374151;
}

.ecocartify-footer-bottom {
	border-top: 1px solid #f3f4f6;
	padding: 16px 0;
	background-color: #fafafa;
}

.footer-bottom-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--ec-muted);
}

/* ==========================================================================
   6. Floating Widgets
   ========================================================================== */

/* Floating Cart on Screen (Draggable System) */
.ecocartify-floating-cart-widget {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 998;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.ecocartify-floating-cart-widget.is-dragging {
	z-index: 99999 !important;
	opacity: 0.95;
	filter: drop-shadow(0 12px 25px rgba(242, 121, 34, 0.45));
	transform: scale(1.05) !important;
	transition: none !important;
}

.floating-cart-btn {
	background-color: var(--ec-primary);
	color: #ffffff;
	border: none;
	border-radius: 10px 0 0 10px;
	padding: 10px 13px;
	cursor: grab;
	box-shadow: -4px 0 18px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
	transition: background-color 0.2s, box-shadow 0.2s;
	touch-action: none;
}

.floating-cart-btn:active,
.ecocartify-floating-cart-widget.is-dragging .floating-cart-btn {
	cursor: grabbing;
	border-radius: 10px;
}

.floating-cart-btn:hover {
	background-color: var(--ec-primary-hover);
}

.floating-cart-icon {
	font-size: 22px;
}

.floating-cart-info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.floating-cart-count {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.floating-cart-total {
	font-size: 12.5px;
	font-weight: 800;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	padding: 2px 6px;
	margin-top: 2px;
}

/* Floating WhatsApp Button */
.ecocartify-floating-chat-widget {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
}

.floating-whatsapp-btn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #25d366;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
	transition: var(--ec-transition);
}

.floating-whatsapp-btn:hover {
	transform: scale(1.08);
	color: #ffffff;
}

/* Floating Back to Top Button */
.ecocartify-back-to-top {
	position: fixed;
	right: 22px;
	bottom: 82px;
	z-index: 997;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--ec-primary);
	color: #ffffff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition: var(--ec-transition);
}

.ecocartify-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.ecocartify-back-to-top:hover {
	background-color: var(--ec-primary-hover);
	transform: translateY(-3px);
}

/* ==========================================================================
   7. Slide-In Mini-Cart Drawer
   ========================================================================== */
.ecocartify-side-cart-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	visibility: hidden;
	transition: visibility 0.3s ease;
}

.ecocartify-side-cart-drawer.is-open {
	visibility: visible;
}

.cart-drawer-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ecocartify-side-cart-drawer.is-open .cart-drawer-overlay {
	opacity: 1;
}

.cart-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 380px;
	height: 100%;
	background: #ffffff;
	box-shadow: -4px 0 25px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 2;
}

.ecocartify-side-cart-drawer.is-open .cart-drawer-panel {
	transform: translateX(0);
}

.cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ec-border);
	background: #fafafa;
}

.drawer-title-group {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ec-dark);
}

.drawer-title-group h3 {
	font-size: 17px;
	margin: 0;
}

.cart-drawer-close {
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 20px;
	color: var(--ec-muted);
	padding: 4px;
}

.cart-drawer-close:hover {
	color: var(--ec-danger);
}

.cart-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

/* ==========================================================================
   Responsive Product Grid Columns (Desktop vs Mobile)
   ========================================================================== */
.ecocartify-product-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--ec-cols-desktop, 4), minmax(0, 1fr)) !important;
	gap: 16px !important;
}

@media (max-width: 768px) {
	.ecocartify-product-grid {
		grid-template-columns: repeat(var(--ec-cols-mobile, 2), minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}

/* ==========================================================================
   Mobile Offcanvas Navigation Drawer (Clean, Modern, No Bullets, Rich Colors)
   ========================================================================== */
.ecocartify-mobile-drawer {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 100001 !important;
	visibility: hidden !important;
	transition: visibility 0.3s ease !important;
}

.ecocartify-mobile-drawer.is-open {
	visibility: visible !important;
}

.mobile-drawer-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}

.ecocartify-mobile-drawer.is-open .mobile-drawer-overlay {
	opacity: 1 !important;
}

.mobile-drawer-inner {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 86% !important;
	max-width: 330px !important;
	height: 100% !important;
	background: #f8fafc !important;
	box-shadow: 4px 0 25px rgba(0, 0, 0, 0.22) !important;
	display: flex !important;
	flex-direction: column !important;
	transform: translateX(-100%) !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	z-index: 2 !important;
	overflow-y: auto !important;
	padding-bottom: 30px !important;
	box-sizing: border-box !important;
}

.ecocartify-mobile-drawer.is-open .mobile-drawer-inner {
	transform: translateX(0) !important;
}

.mobile-drawer-top-action {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 16px 10px !important;
}

.drawer-header-brand {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #044234 !important;
}

.drawer-brand-leaf {
	font-size: 18px !important;
}

.mobile-drawer-close {
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
	outline: none !important;
	padding: 0 !important;
}

.mobile-drawer-close:hover {
	background: #fee2e2 !important;
	color: #ef4444 !important;
	border-color: #fca5a5 !important;
	transform: rotate(90deg) !important;
}

.close-icon-symbol {
	font-size: 16px !important;
	line-height: 1 !important;
}

/* User Greeting Banner */
.drawer-user-banner {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: linear-gradient(135deg, #f27922 0%, #d96b17 100%) !important;
	border-radius: 12px !important;
	margin: 0 14px 14px !important;
	padding: 12px 16px !important;
	text-decoration: none !important;
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(242, 121, 34, 0.28) !important;
}

.drawer-user-avatar {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #f27922 !important;
	flex-shrink: 0 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.drawer-user-avatar svg {
	width: 22px !important;
	height: 22px !important;
	color: #f27922 !important;
}

.drawer-user-info {
	display: flex !important;
	flex-direction: column !important;
}

.drawer-user-greeting {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	line-height: 1.25 !important;
}

.drawer-user-action {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	line-height: 1.25 !important;
}

/* Category & Quick Link Boxes */
.drawer-section-heading {
	padding: 0 16px !important;
	margin: 8px 0 6px !important;
}

.drawer-heading-title {
	font-size: 12.5px !important;
	font-weight: 800 !important;
	color: #64748b !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	margin: 0 0 3px !important;
}

.drawer-heading-underline {
	width: 24px !important;
	height: 3px !important;
	background: var(--ec-primary, #f27922) !important;
	border-radius: 2px !important;
}

.drawer-card-box {
	background: #ffffff !important;
	border-radius: 12px !important;
	margin: 0 14px 14px !important;
	border: 1px solid #edf2f7 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden !important;
}

.drawer-cat-list,
.drawer-cat-list li,
.drawer-quick-list,
.drawer-quick-list li {
	list-style: none !important;
	list-style-type: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.drawer-cat-item,
.drawer-quick-item {
	border-bottom: 1px solid #f1f5f9 !important;
	list-style: none !important;
}

.drawer-cat-item:last-child,
.drawer-quick-item:last-child {
	border-bottom: none !important;
}

.drawer-cat-link {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 14px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #334155 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}

.drawer-cat-link:hover,
.drawer-cat-link:active {
	background: #fff7ed !important;
	color: #d96b17 !important;
	padding-left: 17px !important;
}

.drawer-cat-icon {
	font-size: 17px !important;
	margin-right: 10px !important;
	line-height: 1 !important;
	display: inline-block !important;
}

.drawer-cat-text {
	flex: 1 1 auto !important;
}

.drawer-cat-badge {
	background: #ef4444 !important;
	color: #ffffff !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	margin-right: 8px !important;
	letter-spacing: 0.5px !important;
}

.drawer-arrow {
	font-size: 17px !important;
	color: #94a3b8 !important;
	font-weight: 400 !important;
	margin-left: auto !important;
}

.drawer-quick-link {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 11px 14px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #475569 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}

.drawer-quick-link:hover {
	background: #f8fafc !important;
	color: #044234 !important;
}

.drawer-quick-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #044234 !important;
}

.drawer-quick-icon svg {
	width: 17px !important;
	height: 17px !important;
	color: #044234 !important;
}

.drawer-quick-text {
	flex: 1 1 auto !important;
}

/* ==========================================================================
   Sticky Mobile Bottom Navigation Bar (5 Items, Animated, Rich Gradient)
   ========================================================================== */
.ecocartify-mobile-bottom-nav {
	display: none;
}

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

	.ecocartify-mobile-bottom-nav {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr) !important;
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 58px !important;
		background: linear-gradient(135deg, #d96b17 0%, #f27922 100%) !important;
		z-index: 999999 !important;
		box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.16) !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		box-sizing: border-box !important;
	}

	.mobile-nav-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 3px !important;
		color: rgba(255, 255, 255, 0.9) !important;
		text-decoration: none !important;
		background: transparent !important;
		border: none !important;
		outline: none !important;
		cursor: pointer !important;
		padding: 6px 0 !important;
		transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent !important;
		font-family: inherit !important;
		margin: 0 !important;
	}

	.mobile-nav-item:hover,
	.mobile-nav-item.is-active,
	.mobile-nav-item:active {
		color: #ffffff !important;
		background: rgba(255, 255, 255, 0.14) !important;
		transform: translateY(-2px) !important;
	}

	.mobile-nav-icon {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
	}

	.mobile-nav-icon svg {
		width: 21px !important;
		height: 21px !important;
		stroke-width: 2.2 !important;
		color: inherit !important;
		display: block !important;
	}

	.mobile-nav-label {
		font-size: 9.5px !important;
		font-weight: 700 !important;
		letter-spacing: 0.6px !important;
		color: inherit !important;
		text-transform: uppercase !important;
		line-height: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.mobile-nav-item .ecocartify-cart-count {
		position: absolute !important;
		top: -6px !important;
		right: -9px !important;
		background: #ffffff !important;
		color: #d96b17 !important;
		font-size: 9px !important;
		font-weight: 800 !important;
		min-width: 16px !important;
		height: 16px !important;
		line-height: 16px !important;
		border-radius: 8px !important;
		text-align: center !important;
		padding: 0 3px !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
	}
}

/* ==========================================================================
   Preview Parity & Layout Guarantee (Pixel-Perfect Alignment with preview/index.html)
   ========================================================================== */
.ecocartify-container,
.container {
	width: 100% !important;
	max-width: 1320px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	box-sizing: border-box !important;
}

/* Site Logo / Branding */
.ecocartify-logo-area .custom-logo,
.ecocartify-logo-area img,
.site-branding .custom-logo,
.site-branding img {
	max-height: 48px !important;
	max-width: 220px !important;
	width: auto !important;
	object-fit: contain !important;
	display: block !important;
}
.custom-logo-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
}

/* Header Search Form */
.ecocartify-header-search-wrap,
.search-wrap {
	width: 100% !important;
	max-width: 580px !important;
	position: relative !important;
}
.search-input-group,
.search-box {
	display: flex !important;
	align-items: center !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 6px !important;
	background: #f8f9fa !important;
	height: 38px !important;
	padding: 0 4px 0 2px !important;
	transition: var(--ec-transition);
	box-sizing: border-box !important;
}
.search-input-group:focus-within,
.search-box:focus-within {
	border-color: #d96b17 !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(217, 107, 23, 0.12) !important;
}
.search-input-group .search-field,
.search-input {
	flex: 1 !important;
	border: none !important;
	background: transparent !important;
	padding: 8px 14px !important;
	font-size: 13.5px !important;
	outline: none !important;
	color: #1f2937 !important;
}
.search-input-group .search-submit,
.search-btn {
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	padding: 6px 10px !important;
	color: #6b7280 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: var(--ec-transition);
}
.search-input-group .search-submit:hover,
.search-btn:hover {
	color: #d96b17 !important;
}

/* Header Action Buttons */
.ecocartify-header-actions,
.header-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	margin-left: auto !important;
	flex: 0 0 auto !important;
	gap: 16px !important;
}

/* Individual Elementor Header Widgets Layout Guarantee */
.elementor-widget-ecocartify-header-actions,
.elementor-widget-ecocartify-header-actions .ecocartify-header-actions-wrap,
.elementor-widget-ecocartify-header-actions .ecocartify-header-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	margin-left: auto !important;
	width: 100% !important;
}
.elementor-widget-ecocartify-header-search,
.elementor-widget-ecocartify-header-search .ecocartify-search-area,
.elementor-widget-ecocartify-header-search .ecocartify-header-search-wrap,
.elementor-widget-ecocartify-header-search form {
	width: 100% !important;
	max-width: 100% !important;
}
.elementor-widget-ecocartify-header-logo,
.elementor-widget-ecocartify-header-logo .ecocartify-header-logo-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

/* Auto-balance 3-column header sections in Elementor */
.elementor-section:has(.elementor-widget-ecocartify-header-logo):has(.elementor-widget-ecocartify-header-actions) > .elementor-container,
.elementor-section:has(.elementor-widget-ecocartify-header-logo):has(.elementor-widget-ecocartify-header-actions) > .elementor-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
}
.elementor-section:has(.elementor-widget-ecocartify-header-logo):has(.elementor-widget-ecocartify-header-actions) .elementor-column:has(.elementor-widget-ecocartify-header-logo) {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 250px !important;
}
.elementor-section:has(.elementor-widget-ecocartify-header-logo):has(.elementor-widget-ecocartify-header-actions) .elementor-column:has(.elementor-widget-ecocartify-header-search) {
	flex: 1 1 auto !important;
	width: auto !important;
	padding: 0 16px !important;
}
.elementor-section:has(.elementor-widget-ecocartify-header-logo):has(.elementor-widget-ecocartify-header-actions) .elementor-column:has(.elementor-widget-ecocartify-header-actions) {
	flex: 0 0 auto !important;
	width: auto !important;
	margin-left: auto !important;
}

/* Canvas template cleaner - completely eliminates page title & footer when editing header/footer */
.page-template-elementor_canvas h1.entry-title,
.ecocartify-builder-canvas h1.entry-title,
.page-template-elementor_canvas #colophon,
.ecocartify-builder-canvas #colophon,
.page-template-elementor_canvas .site-footer,
.ecocartify-builder-canvas .site-footer,
.page-template-elementor_canvas .entry-header,
.ecocartify-builder-canvas .entry-header {
	display: none !important;
}
.ecocartify-header-action-btn,
.action-btn {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	padding: 4px 6px !important;
	color: #1f2937 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	position: relative !important;
	transition: var(--ec-transition);
}
.ecocartify-header-action-btn:hover,
.action-btn:hover {
	color: #d96b17 !important;
}
.ecocartify-header-action-btn .action-icon,
.action-btn .action-icon {
	font-size: 20px !important;
	color: #374151 !important;
	margin-bottom: 2px !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
.ecocartify-header-action-btn:hover .action-icon,
.action-btn:hover .action-icon {
	color: #d96b17 !important;
}
.ecocartify-header-action-btn .action-label,
.action-btn span:not(.action-icon) {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #1f2937 !important;
}
.ecocartify-cart-count,
.cart-badge {
	position: absolute !important;
	top: -6px !important;
	right: -10px !important;
	background-color: #d96b17 !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	min-width: 17px !important;
	height: 17px !important;
	line-height: 17px !important;
	border-radius: 50% !important;
	text-align: center !important;
	padding: 0 3px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Category Navigation Bar */
.ecocartify-category-nav-bar,
.ecocartify-category-bar,
.category-nav-bar {
	background: #044234 !important;
	color: #ffffff !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	height: 46px !important;
	display: flex !important;
	align-items: center !important;
}
.category-nav-inner {
	width: 100% !important;
}
.category-nav-menu,
.category-nav-list {
	display: flex !important;
	align-items: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
}
.category-nav-menu::-webkit-scrollbar,
.category-nav-list::-webkit-scrollbar {
	display: none !important;
}
.category-nav-menu li a,
.category-nav-list li a {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 12px 14px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	color: #ffffff !important;
	text-decoration: none !important;
	border-bottom: 3px solid transparent !important;
	transition: var(--ec-transition);
}
.category-nav-menu li:hover a,
.category-nav-list li:hover a {
	background: rgba(255, 255, 255, 0.08) !important;
	border-bottom-color: #d96b17 !important;
}
.category-nav-menu .offer-item a,
.category-nav-list .offer-link {
	color: #fde047 !important;
	font-weight: 700 !important;
}

/* Section Clearing (Eliminates horizontal wrapping/floating of products next to categories) */
.ecocartify-categories-section,
.categories-section,
.ecocartify-products-section,
.top-selling-section,
.category-products-section {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	clear: both !important;
	position: relative !important;
	box-sizing: border-box !important;
}

/* Categories Carousel Track (7 items on desktop, 3 on mobile) */
.categories-carousel-wrap,
.cat-nav-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	gap: 12px !important;
	padding: 0 4px !important;
	box-sizing: border-box !important;
}
.category-nav-arrow,
.cat-arrow-btn {
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	border: 1.5px solid #e5e7eb !important;
	color: #d96b17 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 22px !important;
	line-height: 1 !important;
	padding: 0 !important;
	z-index: 10 !important;
	transition: all 0.2s ease !important;
}
.category-nav-arrow:hover,
.cat-arrow-btn:hover {
	background: #d96b17 !important;
	color: #ffffff !important;
	border-color: #d96b17 !important;
	box-shadow: 0 4px 12px rgba(217, 107, 23, 0.35) !important;
	transform: scale(1.06) !important;
}
.categories-carousel-track,
.cat-track {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	padding: 10px 4px 14px !important;
	margin: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	width: 100% !important;
}
.categories-carousel-track::-webkit-scrollbar,
.cat-track::-webkit-scrollbar {
	display: none !important;
}
.category-card-item,
.cat-item {
	flex: 0 0 calc((100% - 6 * 14px) / 7) !important;
	max-width: calc((100% - 6 * 14px) / 7) !important;
	min-width: 85px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	text-decoration: none !important;
	color: inherit !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	transition: transform 0.2s ease !important;
	box-sizing: border-box !important;
}
.category-card-box,
.cat-box {
	width: 84px !important;
	height: 84px !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	border: 1.5px solid #e5e7eb !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
	transition: all 0.2s ease !important;
	overflow: hidden !important;
	padding: 10px !important;
	margin-bottom: 8px !important;
	box-sizing: border-box !important;
}
.category-card-item:hover .category-card-box,
.cat-item:hover .cat-box {
	transform: translateY(-4px) !important;
	border-color: #d96b17 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.category-card-title,
.cat-name {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #1f2937 !important;
	margin: 0 !important;
	line-height: 1.25 !important;
}
@media (max-width: 768px) {
	.category-card-item,
	.cat-item {
		flex: 0 0 calc((100% - 2 * 10px) / 3) !important;
		max-width: calc((100% - 2 * 10px) / 3) !important;
		min-width: 75px !important;
	}
	.category-card-box,
	.cat-box {
		width: 72px !important;
		height: 72px !important;
		border-radius: 12px !important;
		padding: 6px !important;
	}
	.category-card-title,
	.cat-name {
		font-size: 11.5px !important;
	}
}

/* Product Grid & Cards (4 on desktop, 2 on mobile) */
.ecocartify-product-grid,
.product-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 16px !important;
	width: 100% !important;
	clear: both !important;
	box-sizing: border-box !important;
	margin-bottom: 24px !important;
}
.ecocartify-product-grid.columns-4,
.product-grid.cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.ecocartify-product-grid.columns-3,
.product-grid.cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ecocartify-product-grid.columns-2,
.product-grid.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 768px) {
	.ecocartify-product-grid,
	.product-grid,
	.ecocartify-product-grid.columns-4,
	.product-grid.cols-4,
	.ecocartify-product-grid.columns-3,
	.product-grid.cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}
.ecocartify-product-card,
.product-card,
.ecocartify-product-grid .product,
.woocommerce .ecocartify-product-grid .product {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	padding: 14px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	position: relative !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
}
.ecocartify-product-card:hover,
.product-card:hover {
	border-color: #cbd5e1 !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
	transform: translateY(-2px) !important;
}
.product-card-thumb-wrap,
.card-thumb {
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	background: #ffffff !important;
	border-radius: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	margin-bottom: 12px !important;
	overflow: hidden !important;
}
.product-card-thumb-wrap img,
.card-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}
.product-card-title,
.card-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin: 0 0 6px !important;
	min-height: 38px !important;
	color: #1f2937 !important;
}
.product-card-title a,
.card-title a {
	color: inherit !important;
	text-decoration: none !important;
}
.product-card-title a:hover,
.card-title a:hover {
	color: #d96b17 !important;
}
.product-card-price,
.card-price {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #044234 !important;
	margin-bottom: 12px !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 6px !important;
}
.product-card-actions,
.card-actions {
	display: flex !important;
	gap: 6px !important;
	width: 100% !important;
}
.ecocartify-add-to-cart-btn,
.btn-cart {
	flex: 1 !important;
	background: #044234 !important;
	color: #ffffff !important;
	border: 1px solid #044234 !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}
.ecocartify-add-to-cart-btn:hover,
.btn-cart:hover {
	background: #065f46 !important;
}
.ecocartify-buy-now-btn,
.btn-buy {
	flex: 1 !important;
	background: #d96b17 !important;
	color: #ffffff !important;
	border: 1px solid #d96b17 !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}
.ecocartify-buy-now-btn:hover,
.btn-buy:hover {
	background: #c25e10 !important;
}

/* ==========================================================================
   Page Content & Policy/Information Pages Styling
   ========================================================================== */
.ecocartify-page-main {
	padding: 36px 0 60px;
	min-height: 55vh;
}
.ecocartify-page-article:not(.elementor-page) {
	max-width: 920px;
	margin: 0 auto;
}
body.woocommerce-checkout .ecocartify-page-article:not(.elementor-page),
body.woocommerce-checkout .ecocartify-page-article {
	max-width: 100% !important;
	width: 100% !important;
}
body.woocommerce-checkout .ecocartify-container {
	max-width: 1320px !important;
	width: 100% !important;
}
.ecocartify-page-article:not(.elementor-page) .entry-header {
	margin-bottom: 24px;
	text-align: center;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 18px;
}
.ecocartify-page-article:not(.elementor-page) .entry-title {
	font-size: 28px;
	font-weight: 800;
	color: #044234;
	margin: 0;
	line-height: 1.35;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.ecocartify-page-article:not(.elementor-page) .entry-title::before {
	content: "🌿";
	font-size: 24px;
}
body.woocommerce-checkout .ecocartify-page-article .entry-title::before,
body.woocommerce-cart .ecocartify-page-article .entry-title::before {
	display: none;
}
.ecocartify-page-article:not(.elementor-page) .entry-content:not(.woocommerce) {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 36px 36px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
	font-size: 15px;
	line-height: 1.8;
	color: #334155;
}
.ecocartify-page-article:not(.elementor-page) .entry-content h2 {
	font-size: 20px;
	font-weight: 800;
	color: #044234;
	margin: 24px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1.5px solid #f1f5f9;
}
.ecocartify-page-article:not(.elementor-page) .entry-content h2:first-child {
	margin-top: 0;
}
.ecocartify-page-article:not(.elementor-page) .entry-content h3 {
	font-size: 17px;
	font-weight: 700;
	color: #065f46;
	margin: 20px 0 10px;
}
.ecocartify-page-article:not(.elementor-page) .entry-content h4 {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	margin: 16px 0 8px;
}
.ecocartify-page-article:not(.elementor-page) .entry-content p {
	margin: 0 0 14px;
}
.ecocartify-page-article:not(.elementor-page) .entry-content ul,
.ecocartify-page-article:not(.elementor-page) .entry-content ol {
	margin: 0 0 18px 22px;
	padding: 0;
}
.ecocartify-page-article:not(.elementor-page) .entry-content li {
	margin-bottom: 8px;
}
.ecocartify-page-article:not(.elementor-page) .entry-content strong {
	color: #0f172a;
}

@media (max-width: 768px) {
	.ecocartify-page-main {
		padding: 16px 0 40px;
	}
	.ecocartify-page-article:not(.elementor-page) .entry-title {
		font-size: 21px;
	}
	.ecocartify-page-article:not(.elementor-page) .entry-title::before {
		font-size: 18px;
	}
	.ecocartify-page-article:not(.elementor-page) .entry-content:not(.woocommerce) {
		padding: 20px 16px;
		border-radius: 8px;
		font-size: 14px;
		line-height: 1.7;
	}
}