/* Naan Sense Grocery v1.7.1 — mobile-first homepage refinement.
   Uses the established, Admin-configured brand variables. Safe for both app and native routes.
   Intentionally does not modify checkout, product cards, recipes, hero dates or WooCommerce. */
#nsg-app.nsg-app-storefront .nsg-mobile-nav {
  z-index: 500 !important; /* Above decorative launchers, below checkout/payment dialogs. */
}
#nsg-app .nsg-quick-more {max-width:1200px;margin:0 auto;}
#nsg-app .nsg-quick-more summary {
  color:var(--nsg-secondary,var(--nsg-ink));font-size:12px;font-weight:800;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  min-height:32px;list-style:none;padding:5px 1px;
}
#nsg-app .nsg-quick-more summary::-webkit-details-marker {display:none;}
#nsg-app .nsg-quick-more summary>span {transition:transform .18s ease;}
#nsg-app .nsg-quick-more[open] summary>span {transform:rotate(180deg);}
#nsg-app .nsg-quick-more summary:focus-visible {outline:2px solid var(--nsg-secondary,var(--nsg-ink));outline-offset:2px;border-radius:3px;}
#nsg-app .nsg-quick-chip {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;text-transform:none!important;line-height:1.2;overflow-wrap:anywhere;}
#nsg-app .nsg-quick-chip-icon {font-size:19px;line-height:1;flex:none;font-weight:600;}
#nsg-app .nsg-quick-chip>span:last-child {min-width:0;}
#nsg-app .nsg-quick-chip-list.nsg-quick-extra {margin-top:5px;}
@media(max-width:849px) {
  #nsg-app .nsg-mobile-nav {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;
    padding:7px 7px max(8px,env(safe-area-inset-bottom))!important;
  }
  #nsg-app .nsg-mobile-nav .nsg-mobile-nav-item,
  #nsg-app .nsg-mobile-nav button,
  #nsg-app .nsg-mobile-nav a.nsg-mobile-nav-item {
    min-width:0;min-height:55px!important;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;padding:5px 3px!important;
    text-align:center;text-decoration:none!important;
  }
  #nsg-app .nsg-mobile-nav-item>span {font-size:24px;line-height:1;}
  #nsg-app .nsg-mobile-nav-item small {font-size:10px;line-height:1.15;font-weight:800;white-space:nowrap;}
  #nsg-app .nsg-benefits {
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    padding:13px 12px!important;margin:0 auto;
    background:var(--nsg-paper)!important;
  }
  #nsg-app .nsg-benefits>div {
    min-width:0;padding:7px 5px!important;margin:0;border:1px solid var(--nsg-border)!important;
    border-radius:13px;display:flex;flex-direction:column;gap:6px;
    align-items:center;justify-content:flex-start;text-align:center;
    background:var(--nsg-cream);min-height:85px;
  }
  #nsg-app .nsg-benefit-icon {
    height:28px;width:28px;border-radius:9px;font-size:19px;
    display:grid;place-items:center;flex-shrink:0;
  }
  #nsg-app .nsg-benefits :is(strong,small) {display:block;line-height:1.15;overflow-wrap:break-word;hyphens:auto;}
  #nsg-app .nsg-benefits strong {font-size:11px!important;font-weight:850;}
  #nsg-app .nsg-benefits small {font-size:9.5px!important;margin-top:2px;color:var(--nsg-muted)!important;}
  #nsg-app .nsg-quick-finds {padding:19px 14px 16px!important;}
  #nsg-app .nsg-quick-heading {display:block;max-width:100%;}
  #nsg-app .nsg-quick-heading .nsg-overline {font-size:10px!important;letter-spacing:.12em;}
  #nsg-app .nsg-quick-heading h2 {margin:3px 0 3px!important;font-size:clamp(23px,6.5vw,28px)!important;line-height:1.15!important;}
  #nsg-app .nsg-quick-heading p {font-size:12px!important;margin:3px 0 0!important;line-height:1.4!important;}
  #nsg-app .nsg-quick-chip-list {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    padding:0;overflow:visible;margin:12px 0 0;max-width:100%;
  }
  #nsg-app .nsg-quick-chip {
    display:flex!important;width:100%!important;max-width:100%;min-height:43px!important;
    padding:8px 8px!important;margin:0!important;
    border-radius:12px!important;font-size:13px!important;
    font-weight:800!important;white-space:normal;text-align:center;
    box-shadow:none!important;
  }
  #nsg-app .nsg-quick-more {margin-top:5px;}
  #nsg-app .nsg-quick-more .nsg-quick-chip-list {margin:5px 0 0;}
  #nsg-app .nsg-category-section {padding:29px 14px 38px!important;}
  #nsg-app .nsg-section-heading {margin-bottom:18px!important;}
  #nsg-app .nsg-section-heading h2 {font-size:clamp(26px,7vw,35px)!important;line-height:1.18!important;margin:6px 0!important;}
  #nsg-app .nsg-section-heading p {font-size:13px!important;line-height:1.45;}
  #nsg-app .nsg-center-action {margin-top:19px;}
  #nsg-app .nsg-discovery {padding:30px 16px 38px!important;}
  #nsg-app .nsg-discovery h2 {font-size:clamp(27px,7vw,36px)!important;line-height:1.2;}
  #nsg-app .nsg-discovery p {font-size:13px!important;line-height:1.5;}
  /* Keep fixed navigation readable without adding an empty scroll gap after the footer. */
  #nsg-app .nsg-footer {padding-bottom:calc(85px + env(safe-area-inset-bottom))!important;}
}
@media(min-width:850px) {
  #nsg-app .nsg-quick-chip-list {overflow:visible;flex-wrap:wrap;}
}
@media(max-width:699px) {
  /* A landscape campaign image (or desktop-only upload) must never lose
     embedded text off-screen. Give it a full-width, uncropped media slot and
     put the real, accessible campaign headline/buttons below it. Portrait
     mobile images keep the existing immersive full-bleed presentation. */
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile.nsg-hero-slide {
    min-height:0!important;display:flex;flex-direction:column;
    align-items:stretch;justify-content:flex-start;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile .nsg-hero-picture {
    display:block!important;position:relative!important;
    z-index:0!important;inset:auto!important;width:100%;height:auto;
    aspect-ratio:16/9;max-height:260px;
    background:var(--nsg-deep);overflow:hidden;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile .nsg-hero-picture img {
    position:absolute;inset:0;width:100%;height:100%;
    max-width:100%;object-fit:contain!important;object-position:center!important;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile .nsg-hero-tint {display:none!important;}
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile .nsg-hero-copy {
    padding:18px 16px 32px!important;width:100%;min-width:0;
    background:var(--nsg-deep);text-align:left;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile h1 {
    font-size:clamp(27px,7.5vw,39px)!important;line-height:1.15!important;
    margin:7px 0 8px!important;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile p {
    font-size:13px!important;line-height:1.45!important;margin:0 0 12px!important;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile .nsg-hero-actions {
    margin-top:14px!important;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile .nsg-hero-actions :is(button,a) {
    min-height:45px!important;
  }
  #nsg-app .nsg-hero-managed .nsg-hero-wide-mobile .nsg-eyebrow {font-size:9px;}
}
@media(max-width:360px) {
  #nsg-app .nsg-benefits {gap:5px;padding:9px!important;}
  #nsg-app .nsg-benefits>div {padding:6px 3px!important;}
  #nsg-app .nsg-benefits strong {font-size:10px!important;}
  #nsg-app .nsg-quick-finds {padding-inline:11px!important;}
}
@media(prefers-reduced-motion:reduce) {
  #nsg-app .nsg-quick-more summary>span {transition:none;}
}