/* =========================================================================
   ARDAN Design System & Global Styles
   ========================================================================= */

/* Inter Font Family handled via Google Fonts in index.html */

:root {
  /* Brand Colors Setup */
  --clr-brand-slate: #1e293b;
  --clr-brand-primary: #ea1b36; /* Ardan Brand Red */
  --clr-gold: #94a3b8;
  
  /* Light Theme (Default) */
  --clr-ink: #0F172A;
  --clr-slate: #475569;
  --clr-muted: #94A3B8;
  --clr-cream: #FFF7F0;
  --clr-bg: #F7F6F9;
  --surface: #FFFFFF;
  --surface-hover: #F8FAFC;
  --border-color: #E2E8F0;
  
  /* Typography Scale */
  --fs-h1: clamp(2.5rem, 5vw, 4rem);
  --fs-h2: clamp(2rem, 4vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 3vw, 2rem);
  --fs-body-lg: 1.25rem;
  --fs-body: 15px;
  --fs-small: 15px;

  /* Spacing & Radii & Shadows */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-float: 0 30px 40px -10px rgba(0, 0, 0, 0.15);
  
  --transition-fast: 150ms ease;
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

/* Global Brand Font */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--clr-ink);
  background-color: var(--clr-bg);
  scroll-behavior: smooth;
  line-height: 1.5; font-size: var(--fs-body);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Responsive Text Utility Classes */
.mobile-text { display: none; }
.desktop-text { display: inline; }
@media (max-width: 600px) {
  .mobile-text { display: inline; }
  .desktop-text { display: none; }
}

/* Base Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

html, body {
  margin: 0; padding: 0; min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.mobile-drawer {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { 
  font: inherit; background: transparent; border: none; color: inherit; 
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
p { margin-top: 0; margin-bottom: 1rem; color: var(--clr-slate); }

.container {
  width: 100%; max-width: 1600px;
  margin-inline: auto; padding-inline: 1.5rem;
}

.container-bogo {
  max-width: 1240px !important;
}

.hidden { display: none !important; }

/* Focus outlines */
:focus-visible { outline: 3px solid var(--clr-brand-primary); outline-offset: 2px; }

/* Header & Nav */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background-image: url('../assets/images/Header Background1.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--clr-ink);
  box-shadow: none;
  transition: background var(--transition-normal), color var(--transition-normal);
}
.header-inner {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; height: auto;
  max-width: 1320px;
  padding-inline: 0 !important;
  margin-inline: auto;
}
.nav-list { display: flex; gap: var(--space-md); font-weight: 400; align-items: center; }
.nav-list a { padding: var(--space-sm) 0; position: relative; transition: color var(--transition-fast); color: #ffffff; font-weight: 400; font-size: 15px; }
.nav-list a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #ffffff; transition: width 0.3s ease; }
.nav-list a:hover::after, .nav-list a:focus::after { width: 100%; }
.nav-list a:hover { color: #ffffff !important; opacity: 1; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.25); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  color: var(--clr-ink); cursor: pointer;
  transition: opacity var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.icon-btn:hover { 
  opacity: 0.85; 
}
.header-actions {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.header-mail-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000000;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header-mail-btn:hover {
  color: var(--clr-brand-primary);
}

.mail-icon {
  width: 16px;
  height: 16px;
  background-color: #000000; /* Default black */
  -webkit-mask-image: url('../assets/icons/Mail.svg');
  mask-image: url('../assets/icons/Mail.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.header-mail-btn:hover .mail-icon {
  background-color: var(--clr-brand-primary);
}

@media (max-width: 1024px) {
  .mail-text {
    display: none;
  }
}
.carousel-arrow {
  display: block;
}

/* Header Search Group */
.header-search-group {
  flex: 1;
  max-width: 850px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-inline: 20px;
}

.header-search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1f5f9; /* Light slate bg as in image */
  border: 1px solid #E2E8F0;
  border-radius: 12px; /* Set to 12px as requested */
  padding: 0 16px;
  position: relative;
  height: 48px;
  transition: all var(--transition-fast);
}

.header-search-bar:focus-within {
  border-color: var(--clr-brand-primary);
}

#header-search-input {
  flex: 1;
  border: none;
  padding: 8px 0;
  font-size: 15px;
  color: var(--clr-ink);
  background: transparent;
  outline: none;
}

#header-search-input::placeholder {
  color: #94a3b8; /* slate-400 */
}

.search-icon {
  width: 20px;
  height: 20px;
  background-color: #000000; /* Default black */
  -webkit-mask-image: url('../assets/icons/search.svg');
  mask-image: url('../assets/icons/search.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.header-search-bar:focus-within .search-icon {
  background-color: var(--clr-brand-primary);
}

/* Search Results Dropdown */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  display: none; /* hidden by default */
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f8fafc;
}

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

.search-result-item:hover {
  background: #f8fafc;
}

.search-result-item .result-img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: contain;
  background: #f1f5f9;
}

.search-result-item .result-info {
  flex: 1;
}

.search-result-item .result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-ink);
  margin: 0;
}

.search-result-item .result-category {
  font-size: 12px;
  color: var(--clr-slate);
  margin: 0;
}

.search-result-no-match {
  padding: 16px;
  text-align: center;
  color: var(--clr-slate);
  font-size: 14px;
}



/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 100px; font-weight: 500; cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover { transform: translateY(-2px); }
.text-btn { font-weight: 500; cursor: pointer; text-decoration: underline; opacity: 0.8; }
.text-btn:hover { opacity: 1; }

/* Sections */
.section { padding-block: var(--space-xl); }
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-lg); }
.section-header h2 { font-size: 26px; }

/* Content removed and inlined as critical CSS in index.html */

/* Global Products Layout (Sticky Sidebar) */
.global-products-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-top: 60px;
  padding-bottom: 0px;
}

.spotlight-sidebar {
  flex: 0 0 240px;
  position: sticky;
  top: 120px;
  z-index: 50;
  transition: transform var(--transition-normal);
}

.global-products-main {
  flex: 1;
  min-width: 0; /* track overflow fix */
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.sidebar-card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 24px 24px 16px 24px; /* Increased bottom padding from 8px back to 16px for a balanced look */
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.sidebar-title {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ea1b3622;
  position: relative;
}

.sidebar-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 50px;
  height: 2px;
  background: #ea1b36;
}

/* Filter Groups */
.sidebar-group {
  margin-bottom: 25px;
}

.sidebar-group:last-child {
  margin-bottom: 0; /* Remove gap at the very bottom of the card */
}

.group-title {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 15px;
}

.filter-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--clr-slate);
  transition: color 0.2s;
}

.filter-item:hover {
  color: #ea1b36;
}

.filter-item label {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  color: #000000; transition: opacity 0.2s;
}

.filter-item input {
  width: 18px;
  height: 18px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.filter-item input:checked {
  background: #ea1b36;
  border-color: #ea1b36;
}

.filter-item input:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
}

.filter-count {
  margin-left: auto;
  font-size: 15px;
  color: var(--clr-slate);
  font-weight: 500;
}

/* Responsive Spotlight Sidebar & Drawer */
@media (max-width: 1100px) {
  .mobile-filter-bar {
    display: block;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
  }
  
  .btn-mobile-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #2b348e;
    color: #2b348e;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .btn-mobile-filter:hover {
    background: #2b348e;
    color: #ffffff;
  }

  .spotlight-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    z-index: 1000;
    margin-bottom: 0;
    transform: translateX(-100%);
    background: #ffffff;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }
  
  body.filter-drawer-open {
    overflow: hidden;
  }
  
  body.filter-drawer-open .spotlight-sidebar {
    transform: translateX(0);
  }
  
  body.filter-drawer-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }

  .sidebar-card {
     height: 100%;
     border-radius: 0;
     border: none;
     max-height: 100vh !important;
     display: flex;
     flex-direction: column;
  }
  
  .btn-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    cursor: pointer;
    z-index: 10;
  }
  
  .sidebar-title {
    margin-top: 20px;
  }
}

/* Utilities for new components */
.mobile-filter-bar { display: none; }
.sidebar-overlay { display: none; }
.btn-sidebar-close { display: none; }
@media (max-width: 1100px) {
  .sidebar-overlay { display: block; }
}

/* Spotlight Carousel */
.carousel-container { position: relative; overflow: hidden; padding-bottom: 24px; }
.carousel-track {
  display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 0 20px 0; scrollbar-width: none;
  /* hide scrollbar */
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { flex: 0 0 calc(25% - 12px); scroll-snap-align: start; min-width: 150px; }

.carousel-nav-inline {
  display: flex; gap: var(--space-sm);
}
.carousel-nav-inline button {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  width: 40px;
  height: 40px;
  color: var(--clr-ink);
  opacity: 0.9;
  transition: opacity var(--transition-fast);
  border-radius: 50%;
}

.carousel-nav-inline button:hover {
  opacity: 1;
}

/* Product Card */
.product-card {
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--radius-md); border: 1px solid var(--border-color);
  overflow: hidden; 
  transition: transform var(--transition-bounce), box-shadow var(--transition-bounce), border-color var(--transition-bounce);
  will-change: transform;
  position: relative;
  text-align: left; /* reset button inherit */
}
.product-card:hover, .product-card:focus-within {
  transform: translateY(-8px); z-index: 2;
}
.card-img-wrapper { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--surface-hover); }
.card-img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.5s ease; 
  opacity: 1;
}
.product-card:hover .card-img { transform: scale(1.05); }




.card-content { padding: 10px 12px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.card-title { font-size: 15px !important; }
.card-weight { font-size: 14px !important; }
.about-text p { font-size: 15px !important; }


/* Grid Section */
.grid-section { padding-block: 24px; } /* Reduced from space-xl (64px) to 24px */
.product-grid { 
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* Reduced from space-lg (32px) to space-md (16px) */
}

.category-row {
  width: 100%;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px; /* Further reduced from 32px to 12px */
  margin-bottom: var(--space-sm);
}

.category-header h3 {
  font-size: 26px;
  margin: 0;
}

.category-nav {
  display: flex;
  gap: 4px;
}

.category-nav .icon-btn {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  width: 40px;
  height: 40px;
  color: var(--clr-ink);
  opacity: 1;
  border-radius: 50%;
  transition: opacity var(--transition-fast);
}

.category-nav .icon-btn:hover {
  opacity: 0.9;
}

}

.honey-hero .honey-subtitle {
  color: #995C25 !important;
}

.rice-hero h2 {
  color: #8C4E1E !important;
  font-size: 48px !important;
}

.rice-hero .rice-subtitle {
  color: #8C4E1E !important;
}


.fruit-powders-hero h2 {
  color: #6C802C !important;
  font-size: 48px !important;
}

.fruit-powders-hero .fruit-powders-subtitle {
  color: #6C802C !important;
}

.snacks-hero h2 {
  color: #ffffff !important;
  font-size: 48px !important;
}

.snacks-hero .snacks-subtitle {
  color: #ffffff !important;
}

.masala-hero h2 {
  color: #6c802c !important;
  font-size: 48px !important;
}

.masala-hero .masala-subtitle {
  color: #6c802c !important;
}

.category-track-container.honey-overlay,
.category-track-container.rice-overlay,
.category-track-container.fruit-powders-overlay,
.category-track-container.snacks-overlay,
.category-track-container.masala-overlay {
  z-index: 5;
  position: relative;
  padding-inline: 40px;
.about-text p { font-size: 15px !important; }


/* Grid Section */
.grid-section { padding-block: 24px; } /* Reduced from space-xl (64px) to 24px */
.product-grid { 
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* Reduced from space-lg (32px) to space-md (16px) */
}

.category-row {
  width: 100%;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px; /* Further reduced from 32px to 12px */
  margin-bottom: var(--space-sm);
}

.category-header h3 {
  font-size: 26px;
  margin: 0;
}

.category-nav {
  display: flex;
  gap: 4px;
}

.category-nav .icon-btn {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  width: 40px;
  height: 40px;
  color: var(--clr-ink);
  opacity: 1;
  border-radius: 50%;
  transition: opacity var(--transition-fast);
}

.category-nav .icon-btn:hover {
  opacity: 0.9;
}

}

.category-track-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 6px;
}

/* Special Category Layouts (Honey, Rice, Fruit Powders) */
.honey-row, .rice-row, .fruit-powders-row, .snacks-row {
  margin-top: 12px;
}

.honey-hero, .rice-hero, .fruit-powders-hero, .snacks-hero, .masala-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 80px 0 160px 0;
  text-align: left;
  border-radius: var(--radius-lg);
  margin-bottom: -140px;
  overflow: hidden;
  will-change: transform;
}

.honey-hero .container, .rice-hero .container, .fruit-powders-hero .container, .snacks-hero .container, .masala-hero .container {
  padding-left: calc(1.5rem + 15px);
}

.honey-hero { background-image: url('../assets/images/Honey%20Background.webp'); }
.rice-hero { background-image: url('../assets/images/Rice%20Background.webp'); }
.fruit-powders-hero { background-image: url('../assets/images/Fruits%20Background.webp'); }
.snacks-hero { background-image: url('../assets/images/Snacks%20Background.webp'); }
.masala-hero { background-image: url('../assets/images/Masala%20Background.webp'); }

@media (max-width: 600px) {
  .honey-hero { background-image: url('../assets/images/Honey%20Background%20Mobile.webp'); }
  .rice-hero { background-image: url('../assets/images/Rice%20Background%20Mobile.webp'); }
  .fruit-powders-hero { background-image: url('../assets/images/Fruits%20Background%20Mobile.webp'); }
  .snacks-hero { background-image: url('../assets/images/Snacks%20Background%20Mobile.webp'); }
  .masala-hero { background-image: url('../assets/images/Masala%20Background%20Mobile.webp'); }
}

.honey-hero h2, .rice-hero h2, .fruit-powders-hero h2, .snacks-hero h2, .masala-hero h2 {
  font-size: var(--fs-h1);
  margin-bottom: 12px;
  color: var(--clr-ink);
  line-height: 1.0 !important;
}

/* Additional refined heading spacing */
.hamper-title {
  line-height: 1.0 !important;
}

.honey-hero .honey-subtitle, .rice-hero .rice-subtitle, .fruit-powders-hero .fruit-powders-subtitle, .snacks-hero .snacks-subtitle, .snack-bars-hero .snack-bars-subtitle, .masala-hero .masala-subtitle {
  font-size: var(--fs-body-lg);
  color: var(--clr-ink);
  max-width: 600px;
  margin: 0;
  font-weight: 500;
}

/* Specific Overrides */
.honey-hero h2 {
  color: #995C25 !important;
  font-size: 48px !important;
}

.honey-hero .honey-subtitle {
  color: #995C25 !important;
}

.rice-hero h2 {
  color: #8C4E1E !important;
  font-size: 48px !important;
}

.rice-hero .rice-subtitle {
  color: #8C4E1E !important;
}

.fruit-powders-hero h2 {
  color: #6C802C !important;
  font-size: 48px !important;
}

.fruit-powders-hero .fruit-powders-subtitle {
  color: #6C802C !important;
}

.snacks-hero h2 {
  color: #ffffff !important;
  font-size: 48px !important;
}

.snacks-hero .snacks-subtitle {
  color: #ffffff !important;
}

.masala-hero h2 {
  color: #6c802c !important;
  font-size: 48px !important;
}

.masala-hero .masala-subtitle {
  color: #6c802c !important;
}

.category-track-container.honey-overlay,
.category-track-container.rice-overlay,
.category-track-container.fruit-powders-overlay,
.category-track-container.snacks-overlay,
.category-track-container.masala-overlay {
  z-index: 5;
  position: relative;
  padding-inline: 40px;
}

@media (max-width: 600px) {
  .category-track-container.honey-overlay,
  .category-track-container.rice-overlay,
  .category-track-container.fruit-powders-overlay,
  .category-track-container.snacks-overlay,
  .category-track-container.masala-overlay {
    padding-inline: 16px;
  }
}

.category-track-container.masala-overlay {
  padding-bottom: 0;
}

.category-track-container.honey-overlay .category-track,
.category-track-container.rice-overlay .category-track,
.category-track-container.fruit-powders-overlay .category-track,
.category-track-container.snacks-overlay .category-track {
  padding-top: 52px;
  padding-bottom: 6px;
}

.category-track-container.masala-overlay .category-track {
  padding-top: 52px;
  padding-bottom: 0;
}

/* Special Card Overrides */
.honey-card, .rice-card, .fruit-powders-card, .snacks-card, .snack-bars-card, .spice-card, .combo-card {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  background: #ffffff;
  color: var(--clr-ink);
}

/* Specific fit for Rice Cards */
.rice-card .card-img-wrapper {
  aspect-ratio: 1 / 1;
  padding: 0;
}

.rice-card .card-img {
  object-fit: contain;
}

/* Specific fit for Snacks & Snack Bar Cards */
.snacks-card .card-img-wrapper {
  aspect-ratio: 1.15 / 1;
  padding: 0;
}

.snack-bars-card .card-img-wrapper {
  aspect-ratio: 4 / 3;
  padding: 0;
}

.snacks-card .card-img {
  object-fit: contain;
  padding: 15px; 
}

.snack-bars-card .card-img {
  object-fit: contain;
  padding: 0; 
  transform: scale(1.15);
  transition: transform 0.5s ease;
}

.snack-bars-card:hover .card-img {
  transform: scale(1.18);
}

/* Specific fit for Spice Cards */
.spice-card .card-img-wrapper {
  aspect-ratio: 1.15 / 1;
  padding: 0;
}

.spice-card .card-img {
  object-fit: contain;
  padding: 0; /* Ensures true top-to-bottom fit */
}

/* Specific fit for Masala Cards — Slightly shorter and top-to-bottom fit */
.masala-card .card-img-wrapper {
  aspect-ratio: 1.15 / 1;
  padding: 0;
}

.masala-card .card-img {
  object-fit: contain;
  padding: 0; /* Ensures true top-to-bottom fit */
}

/* Specific fit for Fruit Powder Cards */
.fruit-powders-card .card-img-wrapper {
  aspect-ratio: 1.1 / 1;
  padding: 0;
}

.fruit-powders-card .card-img {
  object-fit: contain;
  padding: 0; 
  transform: scale(1.2);
  transition: transform 0.5s ease;
}

.fruit-powders-card:hover .card-img {
  transform: scale(1.3);
}

/* Pickle Card — Zoomed Image */
.pickle-card .card-img-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pickle-card .card-img {
  object-fit: cover;
  transform: scale(1.6);
  transition: transform 0.5s ease;
}

.pickle-card:hover .card-img {
  transform: scale(1.75);
}

/* Spotlight Card Specific Fit (Ardan1-8) */
.spotlight-card .card-img-wrapper {
  aspect-ratio: 4 / 3;
  padding: 0;
}

.spotlight-card .card-img {
  object-fit: contain;
  padding: 0; /* Ensures true top-to-bottom fit */
}

.category-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 0 20px 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.category-track::-webkit-scrollbar {
  display: none; /* WebKit */
}

.category-track > * {
  flex: 0 0 calc(25% - 12px);
  scroll-snap-align: start;
  min-width: 250px;
}

@media (max-width: 1024px) {
  .category-track > * {
    flex: 0 0 calc(33.333% - 11px);
  }
}

@media (max-width: 600px) {
  .category-track > * {
    flex: 0 0 calc(50% - 9px);
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .category-track > * {
    flex: 0 0 calc(50% - 9px);
    min-width: 0;
  }
}

.no-results { text-align: center; padding: var(--space-xl); color: var(--clr-slate); }

/* Brands */
.brands-section { text-align: center; }
.brands-section h2 { margin-bottom: var(--space-lg); }
.brands-list { 
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 80px; 
  max-width: 1150px; margin: 0 auto;
}

.container-about {
  max-width: 1150px !important;
}

/* About Section Refinement */
.about-section {
  padding-block: 80px;
  background-color: var(--clr-bg);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-text {
  text-align: left;
}

.about-text h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--clr-ink);
  line-height: 1.2;
}

.about-text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--clr-slate);
}

.about-image-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* More about us Button */
.about-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2b348e;
  font-weight: 500;
  font-size: 16px;
  margin-top: 24px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-more-btn:hover {
  gap: 12px;
  opacity: 0.8;
}

.chevron-icon {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: url('../assets/icons/chevron-right.svg');
  mask-image: url('../assets/icons/chevron-right.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  display: inline-block;
}

.bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.bento-card { background: var(--surface); padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-color); }

/* Contact Page Styles */
.contact-hero {
  padding-block: 80px 40px;
  text-align: center;
  background: #f8fafc;
}

.contact-hero h1 {
  font-size: 48px;
  font-weight: 800;
  color: var(--clr-ink);
  margin-bottom: 16px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding-block: 80px;
}

.contact-card {
  background: white;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card-icon {
  width: 48px;
  height: 48px;
  background: var(--clr-brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 24px;
}

.card-icon img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.contact-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--clr-ink);
}

.contact-card p, .contact-card a {
  font-size: 16px;
  color: var(--clr-slate);
  line-height: 1.6;
  word-break: break-all;
}

.map-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin: 0;
  margin-bottom: -80px; /* Pull footer weave up to overlap the map */
  border: none;
  position: relative;
  z-index: 1;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .contact-hero h1 { font-size: 36px; }
  .map-container { height: 350px; }
}

/* Footer */
.site-footer { 
  background: var(--clr-brand-primary); 
  border-top: none; 
  padding-top: var(--space-xl); 
  color: #ffffff;
  position: relative;
  margin-top: -15px; /* Pull footer securely under the wave */
  z-index: 10;
}

.footer-overlap-section {
  margin-bottom: -80px;
  position: relative;
  z-index: 1;
}

.footer-wave {
  width: 100%;
  height: auto;
  min-height: 40px;
  max-height: 120px;
  object-fit: cover;
  object-position: bottom center;
  display: block;
  background-color: transparent;
  margin-bottom: 0;
  position: relative;
  z-index: 11;
}
.site-footer p { color: #ffffff !important; font-size: 15px !important; }
.site-footer h4 { color: rgba(255, 255, 255, 0.6) !important; font-weight: 500 !important; }
.footer-inner { 
  display: grid; 
  grid-template-columns: 2.8fr 1fr 1.5fr 1fr; 
  gap: var(--space-xl); 
  margin-bottom: var(--space-xl); 
  max-width: 1150px; 
  margin-inline: auto;
  align-items: start;
}
.footer-logo { 
  margin-bottom: var(--space-sm); 
  }
.link-col img {
  opacity: 1;
  transition: opacity 0.2s;
}
.link-col a:hover img {
  opacity: 1;
}
.link-col h4 { margin-bottom: var(--space-sm); color: rgba(255, 255, 255, 0.6) !important; font-weight: 500 !important; }
.link-col ul { display: flex; flex-direction: column; gap: 4px; color: #ffffff; font-size: 15px; }
.link-col ul li a { color: #ffffff; text-decoration: none; transition: color 0.1s; font-size: 15px; }
.link-col ul li a:hover { color: #ffffff; }
.footer-bottom { 
  border-top: 1px solid rgba(255, 255, 255, 0.1); 
  padding: var(--space-md) 0; 
  font-size: 15px; 
  color: rgba(255, 255, 255, 0.8); 
  text-align: center; 
}
.footer-bottom p {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Premium Parallax Section */
.parallax-promo {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-block: var(--space-xl);
}
.parallax-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.parallax-bg::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
}
.parallax-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.promo-heading {
  font-size: 44px;
  margin-bottom: 8px;
  text-transform: none;
}
.promo-subheading {
  font-size: 15px;
  margin-bottom: 24px;
  color: #ddd;
}
.parallax-promo .icon-btn {
  color: #000000;
  border: none;
}

/* Specific styling for Combo Cards in the promo section */
.combo-card .card-img-wrapper {
  aspect-ratio: 1.1 / 1;
  padding: 8px;
}

.combo-card .card-img {
  object-fit: contain;
  padding: 0; 
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.combo-card:hover .card-img {
  transform: scale(1.04);
}

/* Zoom in first 4 images */
.combo-card:nth-child(-n+4) .card-img {
  transform: scale(1.35);
}
.combo-card:nth-child(-n+4):hover .card-img {
  transform: scale(1.4);
}

/* Promotional Wide Banner */
.promo-banner-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 48px;
  margin-bottom: 40px;
  height: 200px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  border: 1px solid #E2E8F0;
  position: relative;
}

.promo-left {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-sub {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  opacity: 0.9;
}

.promo-title {
  font-size: 32px;
  font-weight: 800;
  color: #000;
  line-height: 1.2;
}

.promo-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.promo-price-label {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.promo-price-tag {
  background: #0056D2;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0, 86, 210, 0.2);
  position: relative;
}

.promo-price-tag::after {
  content: '?';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 18px;
}

.promo-right {
  flex: 1.2;
  display: flex;
  justify-content: flex-end;
}

.promo-img-wrap {
  height: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  transform: scale(1.1);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.promo-img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .promo-banner-wide { padding: 24px; }
  .promo-title { font-size: 26px; }

  /* Product cards scaling for tablet - Match other sections */
  .carousel-track > * {
    flex: 0 0 calc(33.33% - 11px) !important;
    min-width: 180px !important;
  }
}


/* Footer Connect Alignment */

.footer-right-col {
  text-align: right;
}

@media (max-width: 600px) {
  .footer-right-col {
    text-align: left;
  }
}
@keyframes pageFadeIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } body { animation: pageFadeIn 0.5s ease-out; }

/* =========================================================================
   RESPONSIVE SYSTEM — Covers all laptop & desktop screen sizes
   Breakpoints: 1400 · 1280 · 1024 · 768 · 480
   ========================================================================= */

/* --- 1400px: Wide laptop / large displays --- */
@media (max-width: 1400px) {
  .global-products-layout {
    padding-inline: 1.5rem;
    gap: 32px;
  }
  .footer-inner {
    padding-inline: 1.5rem;
    gap: 32px;
  }
  .promo-heading {
    font-size: 36px;
  }
  .section { padding-block: 56px; }
}

/* --- 1280px: Standard laptop (MacBook 13"/14", common 1280 × 800) --- */
@media (max-width: 1280px) {
  .header-inner {
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  .footer-inner {
    max-width: 100%;
    padding-inline: 1.5rem;
    gap: 28px;
    grid-template-columns: 1.8fr 1fr 1.2fr 1fr;
  }
  .footer-inner p,
  .footer-inner a { font-size: 14px !important; }

  .promo-heading { font-size: 32px; }
  .promo-banner-wide { padding: 20px 24px; height: 160px; }
  .promo-title { font-size: 24px; }

  .about-grid { gap: 32px; }
  .section-header h2 { font-size: 22px; }
  .contact-grid { gap: 20px; }
  
  /* Product cards scaling for laptop */

}

/* --- 769px - 1024px: Tablet / iPad landscape --- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Footer: 2x2 centered block with perfectly aligned columns and balanced spacing */
  .footer-inner {
    display: grid !important;
    grid-template-areas: "brand explore" "address connect" !important;
    grid-template-columns: auto auto !important;
    justify-content: center !important;
    gap: 60px 180px !important;
    text-align: left !important;
    padding-inline: 1.5rem;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 1150px !important;
  }
  .footer-inner > *:nth-child(1) { grid-area: brand !important; }
  .footer-inner > *:nth-child(2) { grid-area: explore !important; }
  .footer-inner > *:nth-child(3) { grid-area: address !important; }
  .footer-inner > *:nth-child(4) { grid-area: connect !important; }

  .footer-brand, .link-col, .footer-mid-col, .footer-right-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .footer-logo {
    margin: 0 0 16px 0 !important;
  }
  .link-col ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .footer-right-col > div {
    display: block !important;
    text-align: left !important;
    margin-inline: 0 !important;
  }

  /* About grid: stack vertically */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-image-card {
    height: 260px;
  }

  /* Bento grid: stack */
  .bento-grid {
    grid-template-columns: 1fr;
  }

  /* About Grid Tablet */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-image-card {
    height: 400px;
  }

  /* Products layout: narrower */
  .global-products-layout {
    gap: 24px;
    padding-top: 40px;
  }

  /* Section header */
  .section-header h2 { font-size: 22px; }
  .section { padding-block: 48px; }

  /* Promo */
  .promo-heading { font-size: 30px; }
  .promo-banner-wide {
    flex-direction: column;
    height: auto;
    padding: 24px;
    gap: 16px;
  }
  .promo-right { display: none; }

  /* Contact */
  .contact-grid { padding-block: 48px; }
  .map-container { height: 380px; }
  .contact-details-section { padding-block: 0; }

  /* CF layout: stack and reorder at 1024 */
  .cf-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: "form" "aside" !important;
    gap: 40px !important;
  }
  .cf-card { grid-area: form !important; }
  .cf-aside {
    grid-area: aside !important;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .cf-aside .cf-info-item {
    margin-bottom: 0;
  }
  .cf-aside .cf-info-item:last-child {
    grid-column: 1 / -1;
  }
  .cf-addr-default { display: none !important; }
  .cf-addr-tablet { display: inline !important; }
}

/* Global Hamper Product Image Styles */
.hamper-product-img {
  position: absolute;
  right: 10%;
  bottom: 0;
  height: 95%;
  max-width: 30%;
  object-fit: contain;
  z-index: 1;
}

/* --- 768px: Tablet / small laptop --- */
@media (max-width: 600px) {
  /* Footer: left-aligned single column */
  .footer-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 40px;
    text-align: left !important;
    max-width: 100% !important;
  }
  .footer-inner > * {
    grid-area: auto !important;
  }
  .footer-brand { 
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }
  .footer-brand p {
    margin-top: 16px !important;
    margin-inline: 0;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.8) !important;
    display: block !important;
  }
  .footer-logo {
    display: block !important;
    margin-inline: 0 !important;
    width: 170px !important;
    height: auto !important;
  }
  .link-col ul {
    align-items: flex-start !important;
  }
  .footer-right-col {
    text-align: left !important;
  }
  .footer-right-col > div {
    display: block !important;
    text-align: left !important;
  }
  .site-footer { padding-top: 48px; }

  /* About */
  .about-section { padding-block: 48px; }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-text {
    text-align: left;
  }
  .about-image-card { height: 280px; }
  #hamper-image-card { height: 520px !important; }
  .banner-overlay-content { 
    padding: 39px !important; 
    text-align: center !important;
    align-items: center !important;
  }
  .banner-overlay-content h1,
  .banner-overlay-content p {
    text-align: center !important;
  }

  /* Hamper Product Image Stacking */
  .hamper-product-img {
    position: relative;
    right: auto;
    bottom: auto;
    height: 240px;
    max-width: 95%;
    margin-top: 24px;
    align-self: center;
  }

  /* Category Hero Layout Tightening on Mobile */
  .honey-hero, .rice-hero, .fruit-powders-hero, .snacks-hero, .masala-hero {
    padding-top: 32px;
    padding-bottom: 145px;
  }

  /* Subtitle font size refinements for mobile */
  .honey-subtitle, .rice-subtitle, .fruit-powders-subtitle, .snacks-subtitle, .masala-subtitle {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  /* Gift Hamper description refinements for mobile */
  #hamper-image-card .banner-overlay-content p {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  /* Contact hero */
  .contact-hero { padding-block: 80px; }
  .contact-hero h1 { font-size: 32px !important; }

  /* Map */
  .map-container { height: 300px; }

  /* Contact cards */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 40px;
  }

  /* Our Brands 2x2 Grid for Mobile */
  .brands-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    padding-inline: 16px;
    justify-items: center;
  }
  .brand-row img {
    max-height: 110px !important; /* Increased size as requested */
    width: auto;
  }
  .section-header { 
    display: flex;
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
    gap: 12px;
  }
  .section-header h2 { font-size: 20px; }

  /* Fix for over-zoomed parallax background on mobile */
  .parallax-bg, .about-hero .parallax-bg, .contact-hero .parallax-bg {
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* About & Contact Hero refinements for mobile */
  .about-hero, .contact-hero {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }

  /* Specific heading size for "Care you trust..." */
  .about-brand-heading {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }

  /* Promo and Carousel Optimization */
  .promo-heading { font-size: 32px !important; }
  .carousel-track > * {
    flex: 0 0 calc(50% - 9px) !important;
    min-width: 0 !important;
  }

  /* CF Mobile Stack */
  .cf-aside {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cf-aside .cf-info-item {
    margin-bottom: 16px;
  }

  /* Promo heading */
  .promo-heading { font-size: 26px; }

  /* Products layout */
  .global-products-layout {
    padding-top: 36px;
    padding-bottom: 0;
  }

  /* CF card */
  .cf-card { padding: 24px 16px !important; }
  .cf-row { grid-template-columns: 1fr !important; }
}

/* --- 480px: Small phone --- */
@media (max-width: 480px) {
  /* Global container */
  .container { padding-inline: 1rem; }

  /* Footer */
  .footer-inner { padding-inline: 1rem; gap: 24px; }
  .footer-logo { width: 140px !important; }

  /* Hero */
  .contact-hero { padding-block: 60px; }
  .contact-hero h1 { font-size: 26px !important; }
  /* Map */
  .map-container { height: 240px; }

  /* Promo */
  .promo-heading { font-size: 22px; }

  /* Cards */
  .contact-card { padding: 20px 16px; }
  .card-icon { width: 40px; height: 40px; }
  .card-icon img { width: 20px; height: 20px; }

  /* CF */
  .cf-section { padding-block: 48px 40px; }
  .cf-aside h2 { font-size: 20px !important; }
  .cf-card { border-radius: 16px !important; }

  /* Section */
  .section { padding-block: 32px; }
}


/* Hero & Products Shared Sticky Background */
.hero-products-bg-wrapper {
  position: relative;
  overflow: clip;
}

.hero-products-sticky-bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 300.2vw;
  background-image: url('../assets/images/Main%20Background1.svg');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #b8d451; /* Lime Green matching bottom of SVG */
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1920px) {
  .hero-products-sticky-bg {
    height: 5764px;
    background-size: 1920px auto;
  }
}

@media (max-width: 834px) {
  .hero-products-sticky-bg {
    background-image: url('../assets/images/Main%20Background%20Tablet.svg');
    height: 628.9vw;
    background-size: 100% auto;
  }
  .section-header h2,
  .category-header h3 {
    font-size: 24px !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 600px) {
  .hero-products-sticky-bg {
    background-image: url('../assets/images/Main%20Background%20Mobile.svg');
    height: 1192.1vw;
    background-size: 100% auto;
  }
}

.hero-products-inner-content {
  margin-top: -300.2vw;
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
}

@media (max-width: 1920px) {
  .hero-products-inner-content {
    margin-top: -5764px;
  }
}

@media (max-width: 834px) {
  .hero-products-inner-content {
    margin-top: -628.9vw;
  }
}

@media (max-width: 600px) {
  .hero-products-inner-content {
    margin-top: -1192.1vw;
  }
}

/* =========================================================================
   Filter Dropdown & Layout Centering
   ========================================================================= */

/* Filter Dropdown */
.nav-item-dropdown {
  position: relative;
}
.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 24px;
  min-width: 500px;
  display: flex;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
  cursor: default;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-dropdown::-webkit-scrollbar {
  display: none;
}
.nav-item-dropdown:hover .filter-dropdown,
.nav-item-dropdown:focus-within .filter-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.filter-dropdown .sidebar-group {
  margin-bottom: 0;
  flex: 1;
}
.filter-dropdown .group-title {
  margin-bottom: 16px;
  font-size: 14px;
  text-transform: none;
  font-weight: 600;
  color: #000000;
}
.filter-dropdown .filter-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-dropdown .filter-item label {
  font-size: 14px;
  color: var(--clr-ink);
}
.filter-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 20px !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 40px !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}
.filter-trigger::after {
  display: none !important;
}
.filter-trigger:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}
.filter-trigger svg {
  transition: transform 0.3s ease;
  stroke: #ffffff;
  margin-top: 1px;
}
.nav-item-dropdown:hover .filter-chevron {
  transform: scaleY(-1);
}

/* Layout Centering & Sidebar Removal */
.global-products-layout {
  display: flex !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 1600px !important;
  gap: 0 !important;
}
.global-products-main {
  flex: none !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.spotlight-sidebar {
  display: none !important;
}

/* Smooth Filtering Animations */
.filter-hidden {
  opacity: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: scale(0.98) translateY(10px);
  pointer-events: none;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.filter-visible {
  opacity: 1 !important;
  max-height: 3000px !important;
  transform: scale(1) translateY(0) !important;
  visibility: visible;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fix for checkmark character */
.filter-item input:checked::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
}


.section, .category-row { content-visibility: auto; contain-intrinsic-size: 1px 1000px; }