/* Mobile Responsive Styles */

/* Mobile visual simplification: make header/nav less heavy (only for small screens) */
@media (max-width: 640px) {
  .header { 
    background: rgba(6,8,12,0.88) !important; 
    box-shadow: none !important; 
    border-bottom: 1px solid rgba(255,255,255,0.04) !important; 
  }
  .header-inner { 
    padding: 4px 6px !important; 
    gap: 6px !important; 
  }
  .logo-gif { 
    width: 40px !important; 
    height: 40px !important; 
  }
  /* simpler pill style for nav items on mobile */
  .header .nav a {
    background: rgba(255,255,255,0.012) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
    transform: none !important;
    color: var(--text) !important;
  }
  /* remove animated gradients on mobile for clarity */
  .header .nav a::before, .header .nav a::after { display: none !important; }
  /* make scroll buttons smaller and subtler */
  .nav-scroll { 
    width:30px !important; 
    height:30px !important; 
    font-size:18px !important; 
    opacity:0.92 !important; 
  }
}

/* Tight mobile header: thinner, minimal background around category pills */
@media (max-width: 640px) {
  /* even tighter mobile header */
  :root { --header-height: 50px; }
  .header { 
    height: var(--header-height) !important; 
    background: rgba(6,8,12,0.82) !important; 
    box-shadow: none !important; 
    border-bottom: 1px solid rgba(255,255,255,0.04) !important; 
  }
  .header-inner { 
    padding: 2px 4px !important; 
    gap: 4px !important; 
    height: var(--header-height) !important; 
    align-items: center !important; 
  }

  /* Make header children part of the horizontal flow and reduce empty space */
  .header-inner > * { flex: 0 0 auto !important; margin: 0 2px !important; }

  /* Nav pills: very minimal background, very small padding, no shadows */
  .header .nav a {
    background: rgba(255,255,255,0.008) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: var(--text) !important;
    min-width: 0 !important;
  }

  /* Make search compact and inline inside header flow */
  .header-center { flex: 0 0 auto !important; max-width: 100px !important; }
  .search input { padding: 6px 8px !important; font-size: 13px !important; }

  /* Smaller logo so it doesn't dominate */
  .logo-gif { width: 32px !important; height: 32px !important; }
  .logo-label { display: none !important; }

  /* Subtle scroll buttons */
  .nav-scroll { 
    background: rgba(0,0,0,0.28) !important; 
    border: 1px solid rgba(255,255,255,0.03) !important; 
    width:28px !important; 
    height:28px !important; 
    font-size:16px !important; 
  }
}

/* Desktop header layout only */
@media (min-width: 641px) {
  .header .header-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .header .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
  }

  .header .nav a {
    white-space: nowrap !important;
    text-decoration: none;
    color: inherit;
  }
}

/* Mobile tweaks: keep desktop identical, adapt only small screens */
@media (max-width: 640px) {
  :root { --radius: 12px; --radius-sm: 10px; }

  /* smaller header on mobile */
  :root { --header-height: 110px; }

  /* Header / nav */
  .header { padding: 8px 0; }
  .header-inner { 
    grid-template-columns: 1fr; gap: 6px; padding: 8px 12px; height: auto; 
  }
  /* Mobile: keep nav as a single horizontal scroller so all categories are reachable */
  .nav {
    gap: 10px;
    padding: 6px 6px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .nav a { 
    padding: 10px 14px; font-size: 15px; border-radius: 12px; 
    white-space: nowrap !important; flex: 0 0 auto; 
  }

  /* Search + logo */
  .header-center { order: 2; width: 100%; display: flex; justify-content: center; padding: 0 8px; }
  .search { max-width: none; width: 100%; }
  .search input { padding: 12px 14px; font-size: 16px; border-radius: 12px; }
  .header-actions { order: 3; justify-content: center; }
  .logo-gif { width: 48px; height: 48px; }

  /* Hero */
  /* Make hero compact and readable on phones */
  .hero { padding: 18px 12px; }
  h1 { font-size: 26px; line-height: 1.18; }
  .hero-sub { font-size: 15px; margin-bottom:12px; }
  .cta-row { justify-content: center; flex-direction: row; }

  /* Countdown - stack into 2x2 */
  /* Countdown - stack into 2x2 and use full width blocks */
  .hero-card { margin-top: 14px; padding: 10px; width: 100%; box-sizing: border-box; }
  .countdown { grid-template-columns: repeat(2, 1fr); gap: 10px; width:100%; }
  .cd-item { padding: 12px; border-radius: 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .cd-num { font-size: 20px; }

  /* Category pills */
  /* Make category pills full-width scrollable, bigger touch targets */
  .cat-pills { gap: 10px; padding: 8px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pill { padding: 10px 14px; font-size: 14px; border-radius: 12px; }

  /* Products */
  .section { padding: 12px 0 24px; }
  .section h2 { font-size: 24px; }
  /* On phones show 2 cards per row (mobile design requested) */
  .grid { gap: 10px; grid-template-columns: repeat(2, 1fr); }

    /* High-specificity override for product grid/cards on phones
       Use !important so this wins over other product CSS which may be loaded later */
    #productGrid.grid, #productGrid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      align-items: start !important;
      box-sizing: border-box !important;
      padding-left: 6px !important;
      padding-right: 6px !important;
      max-width: 100% !important;
    }
    /* Make each card smaller and remove heavy decorations on phones */
    #productGrid .card {
      padding: 6px !important;
      border-radius: 10px !important;
      min-height: 180px !important;
      box-shadow: none !important;
      transform: none !important;
      min-width: 0 !important; /* allow cards to shrink without forcing layout overflow */
      width: 100% !important;
      box-sizing: border-box !important;
    }
    /* Ensure product image is responsive and shown in full (don't crop) */
    #productGrid .card img, #productGrid .card .main-image {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important; /* avoid forcing extra height that can push layout */
      object-fit: contain !important;
      object-position: center center !important;
      border-radius: 8px !important;
      display: block !important;
      max-height: none !important; /* avoid cropping tall images on small screens */
    }
    /* Reduce text size inside cards to fit the new compact layout */
    #productGrid .card .title { font-size: 14px !important; line-height: 1.15 !important; }
    #productGrid .card .price { font-size: 14px !important; }
    #productGrid .card .card-body { padding: 8px !important; }



  /* Apply same compact product grid/controls for slightly larger phone viewports
     Some modern phones report widths above 640px; add a secondary breakpoint at 820px */
  @media (max-width: 820px) {
    #productGrid.grid, #productGrid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
      align-items: start !important;
    }
    #productGrid .card {
      padding: 6px !important;
      border-radius: 10px !important;
      min-height: 180px !important;
      box-shadow: none !important;
      transform: none !important;
    }
    #productGrid .card img, #productGrid .card .main-image {
      width: 100% !important;
      height: auto !important;
      min-height: auto !important;
      object-fit: contain !important;
      object-position: center center !important;
      border-radius: 8px !important;
      display: block !important;
      max-height: 320px !important;
    }
    #productGrid .card .title { font-size: 14px !important; line-height: 1.15 !important; }
    #productGrid .card .price { font-size: 14px !important; }
    #productGrid .card .card-body { padding: 8px !important; }
  }
  /* For very narrow phones (old iPhones / small viewports) switch to single column so cards are never cut in half */
  @media (max-width: 420px) {
    #productGrid.grid, #productGrid {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    #productGrid .card { min-height: auto !important; }
  }

  /* Center hero title on mobile and make it compact */
  @media (max-width: 820px) {
    .hero { text-align: center !important; }
    .hero .hero-inner > div:first-child { margin: 0 auto !important; }
    .hero h1 { font-size: 30px !important; line-height: 1.06 !important; text-align: center !important; font-weight:900 !important; margin: 8px 0 12px !important; }
    .hero-sub { font-size: 14px !important; text-align: center !important; }

  /* small mobile-brand label inside each product card (displayed above title) */
    #productGrid .card .mobile-brand {
      display: none !important; /* hidden per request */
      font-size: 12px !important;
      font-weight: 800 !important;
      color: var(--neon-1) !important;
      background: rgba(0,0,0,0.18) !important;
      padding: 6px 8px !important;
      border-radius: 8px !important;
      text-align: center !important;
      margin: 6px 0 !important;
    }
  }
  /* Cards */
  /* Cards: use full-width stacking and larger buttons */
  .card-body { padding: 8px 16px 16px; box-sizing: border-box; }
  .title { font-size: 16px; }
  .price ins { font-size: 18px; }
  .card-actions { margin-top: 14px; gap: 10px; }
  .btn { padding: 12px 16px; font-size: 15px; border-radius: 12px; }

  /* Happy customers */
  .happy { padding: 20px 0 40px; }
  .happy h2 { font-size: 24px; }
  .gallery { gap: 12px; }
  .gcard img { height: 200px; }
  .gcap { padding: 6px 10px; font-size: 12px; }
/* Hero */
  .hero { padding: 48px 12px 24px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,212,255,.10), transparent 70%);
  animation: hero-glow 4s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes hero-glow { 0% { opacity:.3; transform: scale(1);} 100% { opacity:.55; transform: scale(1.08);} }

.h-eyebrow {
  display: inline-flex; gap: 10px; align-items: center; color: #fff;
  font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 12px;
  border: 1px solid var(--neon-1);
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2));
  border-radius: 999px; padding: 10px 16px;
  box-shadow: var(--glow-1), var(--glow-2);
  animation: eyebrow-pulse 2.2s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.h-eyebrow::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  animation: eyebrow-shine 3s ease-in-out infinite;
}
@keyframes eyebrow-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.04);} }
@keyframes eyebrow-shine { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

h1 {
  margin: 20px 0 10px; font-size: 52px; font-weight: 1000; letter-spacing: -.03em;
  background: linear-gradient(135deg, #fff, var(--neon-1), var(--neon-2), var(--neon-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(0, 212, 255, .35);
  animation: title-glow 3s ease-in-out infinite alternate; position: relative;
}
h1::after{ content:""; position:absolute; inset:auto 0 -6px 0; height:2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); filter: blur(1px); }
@keyframes title-glow { 0% { filter: brightness(1);} 100% { filter: brightness(1.18);} }

.hero-sub { color: var(--muted); margin: 0 0 24px; font-size: 18px; line-height: 1.6; animation: fade-in-up 1s ease-out 0.4s both; }
@keyframes fade-in-up { from { opacity:0; transform: translateY(26px);} to { opacity:1; transform: translateY(0);} }

.cta-row { display: flex; gap: 10px; flex-wrap: wrap }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius); border: 1px solid var(--neon-1);
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2), var(--neon-3));
  color: #fff; text-decoration: none; padding: 14px 22px;
  font-weight: 900; font-size: 15px; letter-spacing: .4px;
  position: relative; overflow: hidden; transition: all .25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--glow-1), var(--glow-2); animation: btn-glow 2s ease-in-out infinite alternate;
}
.btn::before { content:''; position:absolute; inset:0; border-radius: var(--radius); background: linear-gradient(135deg, var(--neon-4), var(--neon-5)); opacity:0; transition: opacity .25s; }
.btn::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-100%); transition: transform .55s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--glow-1), var(--glow-2), var(--glow-3), 0 20px 40px rgba(0,0,0,.35); border-color: var(--neon-4); }
.btn:hover::before { opacity:.25; }
.btn:hover::after { transform: translateX(100%); }
@keyframes btn-glow { 0% { box-shadow: var(--glow-1), var(--glow-2);} 100% { box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);} }

.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; animation: none; }
.btn-outline:hover { background: linear-gradient(135deg, var(--neon-1), var(--neon-2)); color: #fff; border-color: var(--neon-1); box-shadow: var(--glow-1), var(--glow-2); }

  /* Policy */
  #policy { padding: 30px 20px; margin: 40px auto; }
  #policy h2 { font-size: 28px; }
  #policy p, #policy li { font-size: 16px; }
}

/* Final mobile enforce: ensure header is one row and nav scrolls horizontally */
@media (max-width: 640px) {
  /* make the whole header row scrollable so logo, search and nav are part of horizontal flow */
  .header-inner { 
    display: flex !important; 
    flex-wrap: nowrap !important; 
    align-items: center !important; 
    gap: 8px !important; 
    padding: 6px 8px !important; 
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    white-space: nowrap !important; 
  }
  .header-inner > * { flex: 0 0 auto !important; min-width: 0 !important; }

  .header .nav { 
    display: inline-flex !important; 
    flex: 0 0 auto !important; 
    gap: 8px !important; 
    padding: 0 !important; 
    white-space: nowrap !important; 
  }
  .header .nav a { 
    flex: 0 0 auto !important; 
    white-space: nowrap !important; 
    padding: 6px 10px !important; 
    font-size: 14px !important; 
    border: 1px solid rgba(255,255,255,0.08) !important; 
    border-radius: 8px !important; 
  }

  .logo-label { display: none !important; }
  .header-center { flex: 0 0 auto !important; max-width: 140px !important; }
  .header-actions { flex: 0 0 auto !important; }
}

/* Hide previous/next arrows on mobile (user requested) and remove heavy header decoration for performance */
@media (max-width: 640px) {
  .nav-scroll { display: none !important; }
  /* Make grid paint simpler on phones */
  .grid { contain: none !important; }
  /* Reduce heavy effects that can block paint */
  .card { box-shadow: none !important; transition: none !important; }
  .card::before, .card::after, .always-glow::before, .always-glow::after { display: none !important; }
  .card img { transform: none !important; }
}

/* Mobile skeleton placeholders for cards to show while images load */
@media (max-width:640px){
  /* lighter card backgrounds and smaller image placeholders for phones */
  .card { background: linear-gradient(180deg, rgba(25,25,25,0.96), rgba(18,18,18,0.96)); border: none; padding: 6px; }
  .card .card-body { opacity: 0.95; }
  .card .card-image-placeholder { width: 100%; height: auto; padding-top: 56%; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04)); border-radius: 10px; box-sizing: border-box; }
  /* Make main product images flexible on mobile. Avoid fixed heights so images don't get cropped or cause layout overflow. */
  #productGrid .card img, #productGrid .card .product-image .main-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  /* slightly smaller thumbnails inside each card */
  .card .product-image .thumb-image { width:44px !important; height:44px !important; }
}

/* Final ultra-tight mobile override: make category pills very short and remove excess background (phones only) */
@media (max-width: 640px) {
  /* bigger mobile header so pills and surrounding background are more prominent */
  :root { --header-height: 64px; }
  .header { height: var(--header-height) !important; }

  /* center the header-inner content and reduce tiny gaps */
  .header-inner { 
    gap: 6px !important; 
    padding: 6px 8px !important; 
    height: var(--header-height) !important; 
    align-items: center !important; 
    justify-content: center !important; 
  }

  /* put a rounded background bar behind the nav so the pills have more 'breathing room' */
  .header .nav {
    gap: 8px !important;
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
    height: calc(var(--header-height) - 12px) !important;
  }

  /* larger, centered pills with more background area */
  .header .nav a {
    height: calc(var(--header-height) - 26px) !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.012) !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  /* shrink logo and search slightly so they don't steal space */
  .logo-gif { width: 26px !important; height: 26px !important; }
  .logo-label { display: none !important; }
  .header-center { flex: 0 0 auto !important; max-width: 100px !important; }

  /* scroll buttons smaller but still usable */
  .nav-scroll { 
    width:28px !important; 
    height:28px !important; 
    font-size:15px !important; 
  }
}

/* -----------------------------------------------------------------------
   Mobile-only: show the full image inside cards (don't crop), and keep
   the layout light so images load more easily on phones. This overrides
   earlier mobile rules that force a fixed height/object-fit:cover.
   These rules are intentionally specific and only inside the mobile
   media query so desktop behaviour is unchanged.
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Allow the card to grow to the image height and avoid clipping */
  #productGrid .card, .card, #productGrid .card .product-image {
    overflow: visible !important;
    min-height: auto !important;
  }

  /* Show the full image — responsive width, auto height, and contain */
  #productGrid .card img,
  #productGrid .card .product-image .main-image,
  .card img,
  .card .main-image {
    width: 100% !important;
    height: auto !important;
    max-height: 260px !important; /* keeps cards compact on small screens */
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 8px !important;
  }

  /* Remove forced small fixed-height placeholders so the real image can show fully */
  #productGrid .card .card-image-placeholder { display: none !important; }

  /* Reduce heavy box-shadows or transitions that can slow paint on phones */
  #productGrid .card, .card { box-shadow: none !important; transition: none !important; }

  /* If thumbnails exist, keep them small but not taller than the main image */
  #productGrid .card .product-image .thumb-image { width:40px !important; height:40px !important; }
}

/* Mobile grid visibility fixes: ensure all cards render and nothing clips the grid
   Apply at both <=820px and <=600px to override other CSS that might collapse the grid */
@media (max-width: 820px) {
  #productGrid, .grid {
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, 1fr) !important; /* two columns on phones */
    max-height: none !important;
    overflow: visible !important;
    contain: none !important;
  }

  /* Allow each card to size naturally and avoid fixed image heights that hide later cards */
  #productGrid .card {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    visibility: visible !important;
  }

  #productGrid .card img, #productGrid .card .main-image {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }
}

@media (max-width: 600px) {
  /* be explicit at the smallest breakpoint: keep two columns and no clipping */
  #productGrid, .grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; overflow: visible !important; max-height: none !important; }
  #productGrid .card { min-height: 0 !important; height: auto !important; }
  #productGrid .card img, #productGrid .card .main-image { height: auto !important; min-height: 0 !important; max-height: none !important; }
}

/* שמירה על מבנה החיפוש ולוגו */
.header-center {
  margin-left: 20px;
  flex-grow: 1;
}

.header-actions {
  margin-left: auto;
}

/* שולחן עבודה: כל הקטגוריות בשורה אחת (לא כולל מסכים קטנים) */
@media (min-width: 641px) {
  .header .nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 48px;
    justify-content: flex-start;
  }

  /* מונעים ירידת שורה בטקסט הקטגוריות בשולחן עבודה */
  .header .nav a {
    white-space: nowrap;
    /* heavier desktop pill appearance */
    padding: 12px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.32), 0 0 18px rgba(0,212,255,0.03);
    font-weight: 700;
    font-size: 15px;
  }
}

/* floating close: base position & hidden by default */
#cCloseMobile { 
  position:fixed; z-index:10050; right:12px; top:12px; width:44px; height:44px; 
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; 
  background: rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.06); 
  transform: translateY(-6px) scale(.96); opacity: 0; pointer-events: none; 
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1); 
}

#cCloseMobile.show { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
  pointer-events: auto; 
}

#cCloseMobile.hide { 
  opacity: 0; 
  transform: translateY(-6px) scale(.96); 
  pointer-events: none; 
}

/* hide on desktop */
@media (min-width:641px) { 
  #cCloseMobile { display:none !important; } 
}

  /* Strong mobile overrides: force exactly 2 columns on phones (prevent other rules from collapsing to 1) */
  @media (max-width: 820px) {
    .grid, #productGrid.grid, #productGrid { grid-template-columns: repeat(2, 1fr) !important; }
    /* ensure nav/feature grids also respect the two-column mobile layout if they use .grid */
    .grid > * { width: 100% !important; }
    /* make sure card titles are visible and centered */
    .card h3, .card .title { display: block !important; text-align: center !important; }
    /* hide eyebrow on small screens (if still present) */
    .h-eyebrow { display: none !important; }
  }

  @media (max-width: 640px) {
    .grid, #productGrid.grid, #productGrid { grid-template-columns: repeat(2, 1fr) !important; }
    .grid > * { width: 100% !important; }
    .card h3, .card .title { font-size: 15px !important; }
    .h-eyebrow { display: none !important; }
  }

  @media (max-width: 600px) {
    /* Some CSS (products.css) previously forced 1 column at <=600px — override that */
    .grid, #productGrid.grid, #productGrid { grid-template-columns: repeat(2, 1fr) !important; }
    .card h3, .card .title { font-size: 14px !important; }
  }

  /* Tight/flush layout overrides for mobile: remove gaps and outer paddings so cards touch */
  @media (max-width: 820px) {
    /* small row gap and slight column gap to avoid huge vertical spacing while keeping sides visible */
    .grid, #productGrid.grid, #productGrid { gap: 8px 6px !important; }

    /* ensure container doesn't add extra horizontal padding that creates visible gutters */
    .container { padding-left: 6px !important; padding-right: 6px !important; }

    /* remove card margins and make cards fill their grid cell fully */
    #productGrid .card, .card {
      margin: 0 !important;
      width: 100% !important;
      box-shadow: none !important;
      background-clip: padding-box !important;
    }

    /* reduce inner spacing so adjacent cards visually touch but not overlap */
    #productGrid .card .card-body { padding: 6px 8px !important; }

    /* if there's a border-radius creating visible gaps, reduce it slightly */
    #productGrid .card { border-radius: 6px !important; }
  }

  @media (max-width: 640px) {
    .grid, #productGrid.grid, #productGrid { gap: 8px 6px !important; }
    .container { padding-left: 4px !important; padding-right: 4px !important; }
    #productGrid .card, .card { margin: 0 !important; border-radius: 6px !important; }
    #productGrid .card .card-body { padding: 6px 6px !important; }
  }

/* Mobile fix: center price inside product card and prevent overflow/cutting */
@media (max-width: 640px) {
  #productGrid .card .price {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 8px 0 12px !important;
    overflow: visible !important;
  }
  #productGrid .card .price ins,
  #productGrid .card .price del {
    display: inline-block !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }
}

  @media (max-width: 600px) {
    .grid, #productGrid.grid, #productGrid { gap: 8px 6px !important; }
    .container { padding-left: 4px !important; padding-right: 4px !important; }
    #productGrid .card, .card { margin: 0 !important; border-radius: 6px !important; }
    #productGrid .card .card-body { padding: 5px 6px !important; }
  }

  /* Slightly reduce card size on small phones so edges are visible and layout feels less cramped */
  @media (max-width: 640px) {
    /* reduce gaps so two cards fit with visible sides */
    .grid, #productGrid.grid, #productGrid { gap: 6px !important; }

    /* slightly smaller card padding and min-height */
    #productGrid .card, .card {
      padding: 4px !important;
      border-radius: 8px !important;
      min-height: 150px !important;
    }

    /* reduce inner body padding to make more room for image width */
    #productGrid .card .card-body { padding: 6px 8px !important; }

    /* allow images to be a bit taller but still contained to avoid overflow */
    #productGrid .card img, #productGrid .card .main-image, .card .main-image {
      max-height: 300px !important;
      height: auto !important;
      object-fit: contain !important;
    }

    /* slightly smaller action buttons on very small screens */
    #productGrid .card .card-actions .btn, .card .card-actions .btn { padding: 10px 12px !important; font-size: 14px !important; }
  }

  /* ------------------------------------------------------------------
     Ensure mobile product text matches desktop typography exactly.
     This block intentionally uses higher-specificity selectors and
     !important so it overrides earlier mobile-only reductions while
     remaining inside mobile media queries (mobile-only).
     ------------------------------------------------------------------ */
  @media (max-width: 820px) {
    /* Title: match desktop `.title` from products.css */
    #productGrid .card .title,
    #productGrid .card .title * {
      margin: 8px 0 8px !important;
      font-size: 17px !important;
      font-weight: 1000 !important;
      line-height: 1.25 !important;
      text-align: unset !important; /* preserve desktop alignment */
      background: linear-gradient(135deg, #fff, var(--neon-1)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
      text-shadow: none !important;
    }

    /* Price: match desktop `.price` and `.price ins` */
    #productGrid .card .price { display: inline-flex !important; gap: 10px !important; align-items: baseline !important; margin: 8px 0 14px !important; }
    #productGrid .card .price del { color: var(--muted) !important; opacity: .75 !important; font-size: 15px !important; text-decoration: line-through !important; }
    #productGrid .card .price ins {
      color: transparent !important;
      background: linear-gradient(135deg, var(--neon-1), var(--neon-2)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      font-weight: 1000 !important;
      font-size: 23px !important;
      text-decoration: none !important;
      text-shadow: 0 0 20px rgba(0,212,255,.4) !important;
    }

    /* Card body & actions spacing: match desktop paddings and margins */
    #productGrid .card .card-body { padding: 0 16px 16px !important; }
    #productGrid .card .card-actions { margin-top: 28px !important; gap: 10px !important; }

    /* Category and stock appearance: keep desktop weights/sizes */
    #productGrid .card .cat a { color: var(--neon-4) !important; text-decoration: none !important; font-weight: 900 !important; font-size: 12px !important; padding: 4px 8px !important; border-radius: 6px !important; }
    #productGrid .card .stock { color: var(--success) !important; font-weight: 900 !important; font-size: 13px !important; padding: 4px 8px !important; border-radius: 6px !important; }
  }

/* ------------------------------------------------------------------
   Mobile-only interaction fixes
   - Ensure nothing overlays product cards on small screens (z-index/pointer-events)
   - Make buttons and interactive elements inside cards reliably receive touch events
   - Keep desktop unchanged
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  /* bring cards and their interactive children above decorative layers */
  #productGrid .card {
    z-index: 50 !important;
    position: relative !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.06) !important;
  }

  /* ensure product images and overlays do not block buttons */
  #productGrid .card img,
  #productGrid .card .product-image,
  .canvas-aurora,
  .hero::before,
  .header::before {
    pointer-events: none !important; /* decorative only on mobile */
  }

  /* make card actions fully interactive on touch devices */
  #productGrid .card .card-actions,
  #productGrid .card .card-actions .btn,
  #productGrid .card .card-actions button,
  #productGrid .card .card-actions a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  }

  /* If a modal/backdrop accidentally remains visible with pointer-events, ensure it doesn't block the grid
     on mobile unless it has the explicit 'open' class. This avoids leftover overlays from scripts. */
  .modal-backdrop, .order-backdrop, .order-modal, .modal {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .modal.open, .modal-backdrop.open, .order-modal.open, .order-backdrop.open {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* final safety: increase specificity so nothing sitting near the top of the document
     (like header overlays) blocks card clicks. This only applies on mobile screens. */
  #productGrid, #productGrid * { z-index: 49 !important; }
}