/* Consolidated mobile fixes (≤ 767px) */
@media (max-width: 767px){
  /* Product grid: single column */
  .grid { grid-template-columns: 1fr !important; }

  /* Avoid duplicate Next Pickup chip in header */
  .header .header-center { display: none !important; }

  /* Row that holds np-chip + flag when moved by JS */
  #np-lang-row { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:8px; }

  /* Header spans the full viewport width, iOS-safe */
  .header{
    left: 0; right: 0; width: 100%;
    z-index: 1000 !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.85);
    transform: translateZ(0); /* iOS paint fix */
  }
  .header .container{
    max-width: none !important;
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    margin: 0 !important;
    padding-left: calc(12px + env(safe-area-inset-left)) !important;
    padding-right: calc(12px + env(safe-area-inset-right)) !important;
  }

  /* Make top-right controls fit on mobile */
  #cart-total{
    font-size:12px !important;
    min-width:68px !important; /* override inline 90px */
    text-align:right !important;
  }
  #cart-btn, #clear-cart{
    padding:6px 8px !important;
    font-size:12px !important;
  }
  .header .header-right{
    gap:6px !important;
    margin-right:28px !important; /* nudge left */
  }

  /* Hide clear cart button on mobile */
  #clear-cart { display: none !important; }

  /* Flag rendering stability on iOS */
  .flag-btn{ background:#fff !important; }
  .flag-btn img{ display:block; -webkit-transform: translateZ(0); transform: translateZ(0); }

  /* Prevent phantom horizontal scroll on iOS */
  body { overflow-x: hidden; }
}

/* Mobile background: fixed, full device height, no scroll */
@media (hover: none) and (pointer: coarse){
  /* neutralize any fixed/scrolling bg on the main containers */
  body, .hero, .banner, .topbar {
    background-attachment: initial !important;
  }
  /* create a fixed, full-height background layer on mobile */
  body::after{
    content: "";
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh; /* dynamic viewport height for iOS/Android */
    z-index: -1;
    background-image: url('images/flag-morph.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

/* Mobile-only fixed background */
@media (hover: none) and (pointer: coarse){
  /* Disable background scroll behavior on containers */
  body, .hero, .banner, .topbar {
    background-attachment: initial !important;
  }
  /* Create a fixed background layer */
  body::after{
    content: "";
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh; /* dynamic viewport height */
    z-index: -1;
    background-image: url('images/flag-morph.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

/* Robust mobile fixed background (does not scroll) */
@media (hover: none) and (pointer: coarse){
  /* Remove/neutralize existing backgrounds on mobile to avoid double layers */
  body, .hero, .banner, .topbar {
    background: transparent !important;
    background-image: none !important;
    background-attachment: initial !important;
  }
  /* Single fixed layer behind everything */
  #bg-fixed{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;           /* full device viewport height */
    z-index: -1;
    background-image: url('images/flag-morph.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

/* Ensure cart drawer overlays header on small screens */
@media (max-width: 767px){
  .drawer{ z-index: 2000 !important; }
  .overlay{ z-index: 1900 !important; }
  .header{ z-index: 1000 !important; }
}

/* Make hero tagline full screen width on mobile */
@media (max-width: 767px){
  #hero-tagline{
    display: block !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Center both hero tagline and second tagline on mobile */
@media (max-width: 767px){
  #hero-tagline,
  #hero-tagline2{
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Mobile: fixed background centered like desktop-resize */
@media (hover: none) and (pointer: coarse){
  /* Neutralize native page background so it can't scroll */
  html, body {
    background: transparent !important;
    background-image: none !important;
    background-attachment: initial !important;
    overflow-x: hidden;
    -webkit-transform: none !important;
            transform: none !important;
  }

  /* Single fixed layer behind everything */
  #bg-fixed{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100lvh;        /* iOS logical viewport height */
    min-height: 100svh;    /* toolbar-aware */
    min-height: 100vh;     /* fallback */
    z-index: -1;
    background-image: url('images/flag-morph.png'); /* same asset as desktop base */
    background-size: cover;
    background-position: center center; /* center of the flag in the center of the screen */
    background-repeat: no-repeat;
    pointer-events: none;
    backface-visibility: hidden;
    contain: paint;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

/* Keep the top bar pinned on mobile (banner + hamburger + total + cart) */
@media (max-width: 767px){
  .header{
    position: sticky !important;
    top: 0 !important;
    z-index: 1500 !important; /* above content, below drawer if any */
  }
}

/* Mobile: keep the top bar pinned (fixed) and avoid overlap */
@media (max-width: 767px){
  header, .header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1500 !important;
  }
  body.has-fixed-header{
    padding-top: var(--headerH, 64px) !important;
  }
}


/* Stronger Out-of-Stock pill */
.oos-chip{
  background:#b91c1c;
  color:#ffffff;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.8em;
  letter-spacing:0.02em;
}