/* ==========================================================================
   GLOBAL TEXT SELECTION & CURSOR PREVENTION (DESKTOP & MOBILE)
   Prevents text selection and I-beam cursor on static UI elements.
   Preserves text selection & text cursor exclusively for input fields & search bar.
   ========================================================================== */
*:not(input):not(textarea):not([contenteditable="true"]) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

body, h1, h2, h3, h4, h5, h6, p, span, div, section, article, label, nav, footer, header {
  cursor: default;
}

a, button, [role="button"], .cursor-pointer {
  cursor: pointer !important;
}

input, textarea, [contenteditable="true"], #searchInput {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
}

/* ==========================================================================
   HEAVENAA LUXURY GROUP — MOBILE RESPONSIVE STYLESHEET
   Strictly scoped to screens <= 768px (Mobile & Small Tablets).
   Desktop (> 768px) is 100% UNTOUCHED and PIXEL-PERFECT.
   ========================================================================== */

@media (max-width: 768px) {

  /* ------------------------------------------------------------------------
     1. Page Container & Layout Safeguards (Zero Horizontal Page Scroll)
     ------------------------------------------------------------------------ */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Main starts immediately below the fixed 60px header with 0 gap */
  main {
    padding-top: 60px !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ------------------------------------------------------------------------
     2. Header Layout (Logo, Search, Icons ALL IN 1 SINGLE HEADER ROW)
     ------------------------------------------------------------------------ */
  header {
    height: 60px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50 !important;
  }

  header > div {
    height: 60px !important;
    min-height: 60px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  /* Brand Logo (Left) */
  header a:first-child,
  header a:first-child img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  /* Search Bar (Center in the SAME SINGLE ROW) */
  header > div > div.flex-1 {
    order: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  header > div > div.flex-1 > div {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 9999px !important;
    height: 34px !important;
  }

  header > div > div.flex-1 input {
    font-size: 11px !important;
    height: 22px !important;
  }

  header > div > div.flex-1 span.material-symbols-outlined {
    font-size: 16px !important;
    margin-right: 4px !important;
  }

  /* ------------------------------------------------------------------------
     2b. Mobile Search Suggestions Dropdown (Tall, Vertical Scroll, Clear Items)
     ------------------------------------------------------------------------ */
  #searchDropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: -20px !important;
    right: -20px !important;
    width: calc(100vw - 32px) !important;
    max-height: 68vh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 100 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5) !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
  }

  #searchResultsList {
    max-height: calc(68vh - 42px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #searchResultsList > div {
    padding: 10px 12px !important;
    min-height: 60px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  #searchResultsList > div:last-child {
    border-bottom: none !important;
  }

  #searchResultsList > div img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  #searchResultsList > div h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  #searchResultsList > div span.text-xs {
    font-size: 9px !important;
  }

  #searchResultsList > div span.font-bold {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  #searchResultsList > div span.text-\[10px\] {
    font-size: 8.5px !important;
  }

  /* Header Action Icons (Right in the SAME SINGLE ROW: Wishlist, Cart, Profile) */
  header > div > div.flex.items-center.gap-3,
  header > div > div.flex.items-center.gap-5,
  header > div > div:last-child {
    gap: 4px !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  header > div > div:last-child button,
  header > div > div:last-child a {
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  header > div > div:last-child span.material-symbols-outlined {
    font-size: 20px !important;
  }

  header > div > div:last-child span[id*="Badge"] {
    width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    top: -2px !important;
    right: -2px !important;
  }

  /* ------------------------------------------------------------------------
     3. Mode Switch Toggle Bar (Fashion / Fragrance Segmented Control)
     ------------------------------------------------------------------------ */
  div.w-full.bg-\[var\(--bg-surface\)\] {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  div.w-full.bg-\[var\(--bg-surface\)\] > div.max-w-xs,
  div.w-full.bg-\[var\(--bg-surface\)\] > div.max-w-sm {
    max-width: 200px !important;
    height: 28px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2px !important;
  }

  div.w-full.bg-\[var\(--bg-surface\)\] button {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* ------------------------------------------------------------------------
     4. Navigation Bar (Placed DIRECTLY below Toggle with ZERO gap)
     ------------------------------------------------------------------------ */
  nav.sticky,
  nav.glass-nav-dynamic {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    z-index: 40 !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  nav > div {
    height: 32px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  nav > div::-webkit-scrollbar {
    display: none !important;
  }

  nav > div > div,
  .nav-items-wrapper {
    gap: 12px !important;
    padding-left: 4px !important;
    padding-right: 16px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  nav > div > div a,
  .nav-items-wrapper a {
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Fragrance Mode Navigation Bar Visibility on Mobile */
  body.mode-fragrance #navFashionLinks {
    display: none !important;
  }

  body.mode-fragrance #navFragranceLinks {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ------------------------------------------------------------------------
     5. Hero Section (Compact, Top-Anchored Image, Zero Extra Spacing Below CTA)
     ------------------------------------------------------------------------ */
  #fashion-hero,
  #fragrance-hero,
  section[id*="hero"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 260px !important;
    height: 38vh !important;
    max-height: 310px !important;
    overflow: hidden !important;
  }

  /* Zoom Fashion Hero image on mobile only */
  #fashion-hero img,
  section[id*="hero"] img {
    object-fit: cover !important;
    object-position: top center !important;
    transform: scale(1.3) !important;
    transform-origin: top center !important;
    height: 100% !important;
    width: 100% !important;
  }

  /* Fragrance Hero image on mobile uses specified mobile image */
  #fragrance-hero img {
    content: url("ChatGPT Image Aug 7, 2026, 01_21_19 PM.png") !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    height: 100% !important;
    width: 100% !important;
  }

  /* Hero Content Padding & Compact Spacing */
  #fashion-hero > div.relative.z-20,
  #fragrance-hero > div.relative.z-20 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    width: 100% !important;
  }

  #fashion-hero > div.relative.z-20 > div {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Fragrance Hero Content: Left 56% of horizontal width */
  #fragrance-hero > div.relative.z-20 > div {
    width: 56% !important;
    max-width: 56% !important;
    flex: 0 0 56% !important;
    text-align: left !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #fashion-hero h1 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  #fragrance-hero h1 {
    font-size: 19px !important;
    line-height: 1.15 !important;
    margin-bottom: 5px !important;
    text-align: left !important;
    font-weight: 700 !important;
  }

  #fragrance-hero span.font-label-caps {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 3px !important;
    display: block !important;
    text-align: left !important;
    font-weight: 800 !important;
  }

  #fashion-hero p {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    max-width: 90% !important;
  }

  #fragrance-hero p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  #fashion-hero div.flex,
  #fragrance-hero div.flex {
    gap: 6px !important;
    margin-bottom: 0 !important;
  }

  #fashion-hero a,
  #fashion-hero button {
    padding: 5px 12px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.08em !important;
    height: 30px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #fragrance-hero a,
  #fragrance-hero button {
    padding: 5px 12px !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    height: 30px !important;
    min-height: 30px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Subpage Category Banners Padding */
  .py-16.bg-\[var\(--bg-surface-lowest\)\],
  .py-12.bg-\[var\(--bg-surface-lowest\)\],
  .py-12,
  .py-16 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  h1.font-serif-display-lg,
  h1.font-cinzel,
  h1.text-3xl,
  h1.text-4xl {
    font-size: 18px !important;
  }

  /* ------------------------------------------------------------------------
     6. Feature Cards (Taller, No Text Overflow, Auto Text Wrapping)
     ------------------------------------------------------------------------ */
  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8,
  div[class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="lg:grid-cols-4"] {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 10px !important;
    padding: 4px 2px 8px 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8::-webkit-scrollbar,
  div[class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="lg:grid-cols-4"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual Feature Card (Slightly taller, no text overflow, clean padding) */
  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8 > div {
    flex: 0 0 210px !important;
    width: 210px !important;
    min-width: 210px !important;
    min-height: 66px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  /* Icon Container Box inside Card */
  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8 > div > div:first-child {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8 > div span.material-symbols-outlined {
    font-size: 18px !important;
  }

  /* Text Container inside Card */
  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8 > div > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8 > div h4 {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
  }

  section div.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-8 > div p {
    font-size: 9px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ------------------------------------------------------------------------
     6c. Fragrance Feature Badges Section (Single Horizontally Scrollable Row on Mobile)
     ------------------------------------------------------------------------ */
  #fragrance-view section div.grid.grid-cols-1.md\:grid-cols-3 {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 10px !important;
    padding: 4px 2px 8px 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #fragrance-view section div.grid.grid-cols-1.md\:grid-cols-3::-webkit-scrollbar {
    display: none !important;
  }

  #fragrance-view section div.grid.grid-cols-1.md\:grid-cols-3 > div {
    flex: 0 0 210px !important;
    width: 210px !important;
    min-width: 210px !important;
    min-height: 66px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  #fragrance-view section div.grid.grid-cols-1.md\:grid-cols-3 > div > span.material-symbols-outlined {
    font-size: 18px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(200, 162, 77, 0.15) !important;
  }

  #fragrance-view section div.grid.grid-cols-1.md\:grid-cols-3 > div > div.text-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #fragrance-view section div.grid.grid-cols-1.md\:grid-cols-3 > div h4 {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
  }

  #fragrance-view section div.grid.grid-cols-1.md\:grid-cols-3 > div p {
    font-size: 9px !important;
    line-height: 1.25 !important;
    margin-top: 1px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ------------------------------------------------------------------------
     7. Product Cards Grid (3 Products Per Row on Mobile)
     ------------------------------------------------------------------------ */
  #productsGrid,
  #bestSellersGrid,
  #newArrivalsGrid,
  #fashionCollectionsGrid,
  #fragranceBestSellersGrid,
  #fragranceNewArrivalsGrid,
  #fragrancePerfumesGrid,
  #fragranceItrGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* Section Padding & Spacing */
  section {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .max-w-container-max,
  .max-w-\[1440px\] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* ------------------------------------------------------------------------
     6. Section Headers on Mobile (Title Left, View All Right, Zero Overlap)
     ------------------------------------------------------------------------ */
  section div.flex.flex-col.md\:flex-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  section div.flex.flex-col.md\:flex-row > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  section div.flex.flex-col.md\:flex-row span.font-label-caps {
    font-size: 8px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 2px !important;
    display: block !important;
  }

  section div.flex.flex-col.md\:flex-row h2 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  section div.flex.flex-col.md\:flex-row > a,
  section div.flex.flex-col.md\:flex-row > div:last-child a {
    flex-shrink: 0 !important;
    font-size: 9.5px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-bottom: 1px !important;
  }

  section div.flex.flex-col.md\:flex-row > a span.material-symbols-outlined {
    font-size: 13px !important;
  }

  /* ------------------------------------------------------------------------
     6b. Empty State Card ("No Products Available") on Mobile
     ------------------------------------------------------------------------ */
  .col-span-full {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 24px 12px !important;
    margin: 8px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: center !important;
    border-radius: 12px !important;
  }

  .col-span-full h3 {
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 4px !important;
  }

  .col-span-full p {
    font-size: 10px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 12px !important;
    padding: 0 4px !important;
  }

  .col-span-full a {
    padding: 6px 12px !important;
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* Product Card Container */
  .group.flex.flex-col {
    padding: 3px !important;
    border-radius: 8px !important;
  }

  /* Product Image Aspect Ratio */
  .aspect-\[3\/4\],
  .aspect-\[4\/5\],
  div[class*="aspect-"] {
    aspect-ratio: 3 / 4 !important;
    margin-bottom: 4px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  /* Product Card Titles & Typography */
  .group.flex.flex-col h4 {
    font-size: 9px !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
  }

  .group.flex.flex-col span.font-label-caps,
  .group.flex.flex-col span.text-\[10px\] {
    font-size: 7px !important;
    letter-spacing: 0.04em !important;
  }

  .group.flex.flex-col span.font-cinzel,
  .group.flex.flex-col span.text-sm,
  .group.flex.flex-col span.text-base {
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  .group.flex.flex-col span.line-through {
    font-size: 7px !important;
  }

  /* Add to Bag Button on Mobile Product Cards */
  .group.flex.flex-col button.mt-auto {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 7px !important;
    letter-spacing: 0.02em !important;
    border-radius: 6px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .group.flex.flex-col button.mt-auto span.material-symbols-outlined {
    font-size: 11px !important;
  }

  /* Wishlist Heart Icon Floating Button */
  .group.flex.flex-col button.absolute.top-2\.5.right-2\.5 {
    top: 3px !important;
    right: 3px !important;
    width: 22px !important;
    height: 22px !important;
  }

  .group.flex.flex-col button.absolute.top-2\.5.right-2\.5 span {
    font-size: 13px !important;
  }

  /* Badges Container Overlay */
  .group.flex.flex-col div.absolute.top-2\.5.left-2\.5 {
    top: 3px !important;
    left: 3px !important;
  }

  .group.flex.flex-col div.absolute.top-2\.5.left-2\.5 span {
    font-size: 7px !important;
    padding: 1px 3px !important;
    border-radius: 4px !important;
  }
}

/* ------------------------------------------------------------------------
   8. Ultra-Small Screens Safeguard (<= 480px)
   ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  #productsGrid,
  #bestSellersGrid,
  #newArrivalsGrid,
  #fashionCollectionsGrid,
  #fragranceBestSellersGrid,
  #fragranceNewArrivalsGrid,
  #fragrancePerfumesGrid,
  #fragranceItrGrid {
    gap: 4px !important;
  }

  .group.flex.flex-col {
    padding: 2px !important;
  }

  .group.flex.flex-col h4 {
    font-size: 8.5px !important;
  }

  .group.flex.flex-col span.font-cinzel {
    font-size: 9px !important;
  }

  .group.flex.flex-col button.mt-auto {
    font-size: 6.5px !important;
    height: 22px !important;
  }
}