/* SEO-SMART mobile layout V1 (2026-11-01).
   Shared responsive safety for FIELD NOTES, VERDANT, CLEARPOINT, DAYLIGHT,
   Keyword Theme Lab and customized main-site menus.
   Desktop CSS, product facts, affiliate links, branding and page text unchanged. */
@media (max-width:850px) {
  html { max-width:100%; }
  body.theme-editorial,body.theme-noir,body.theme-clinical,body.theme-modern,
  body.lab-site,body.keyword-site { width:100%;max-width:100%;margin:0;overflow-x:clip; }

  .site-header {width:100%;max-width:100%;box-sizing:border-box;position:relative;}
  .site-header .header-inner {
    box-sizing:border-box!important;width:calc(100% - 30px)!important;max-width:100%!important;
    min-width:0!important;min-height:68px!important;height:auto!important;
    margin-inline:auto!important;padding-block:10px!important;
    display:flex!important;align-items:center!important;flex-wrap:wrap!important;
    column-gap:10px!important;row-gap:5px!important;
  }
  .site-header .header-inner > .brand,
  .site-header .header-inner > a.brand {
    box-sizing:border-box!important;min-width:0!important;max-width:calc(100% - 58px)!important;
    flex:1 1 0!important;display:inline-flex!important;align-items:center!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
    font-size:clamp(17px,4.6vw,22px)!important;line-height:1.14!important;
  }
  .site-header .brand-type,.site-header .brand-type > span {min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .site-header .brand img,.site-header .brand svg {flex:0 0 auto;max-width:44px;height:auto;}
  .site-header .menu-toggle {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-width:44px!important;min-height:44px!important;width:44px!important;height:44px!important;
    padding:6px!important;margin-left:auto!important;flex:0 0 44px!important;
    position:relative!important;z-index:2!important;
  }
  /* Theme Lab's !important CTA rule defeated the original mobile display:none.
     Keep the CTA in the article/hero, remove it ONLY from the crowded header. */
  .site-header .header-inner > .header-cta,
  body.lab-site.keyword-site .site-header .header-inner > a.header-cta,
  body.keyword-site .site-header .header-cta {display:none!important;}
  .site-header .site-nav {min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
  .site-header .site-nav:not(.is-open) {display:none!important;}
  .site-header .header-inner > .site-nav.is-open {
    display:flex!important;position:static!important;inset:auto!important;
    order:30!important;flex:1 0 100%!important;width:100%!important;max-width:100%!important;
    margin:5px 0 0!important;padding:8px 12px!important;gap:0!important;
    flex-direction:column!important;align-items:stretch!important;white-space:normal!important;
    box-shadow:none!important;transform:none!important;max-height:min(65vh,460px);overflow-y:auto;
    border:1px solid var(--line,#d5e2da);border-radius:12px;z-index:3!important;
    background:var(--surface,#fff);
  }
  .site-header .site-nav.is-open a {display:block;min-width:0;max-width:100%;padding:11px 8px;overflow-wrap:anywhere;}

  /* Some custom main-sites use native <details class="mobile-menu">.
     Keep the opened menu IN FLOW rather than overlaying the hero/title. */
  .site-header details.mobile-menu[open] {
    position:static!important;inset:auto!important;transform:none!important;
    flex:0 0 100%!important;order:31!important;width:100%!important;
    max-width:100%!important;min-width:0!important;height:auto!important;
    margin:0!important;padding:0 0 10px!important;overflow:visible!important;
  }
  .site-header details.mobile-menu[open] > :is(nav,div,ul),
  .site-header details.mobile-menu[open] :is(.mobile-nav,.mobile-menu-content,.mobile-menu-panel,.menu-panel) {
    position:static!important;inset:auto!important;transform:none!important;
    display:block!important;box-sizing:border-box!important;max-width:100%!important;
    width:100%!important;min-width:0!important;max-height:min(65vh,460px);overflow-y:auto;
    margin:6px 0 0!important;box-shadow:none!important;
  }
  .site-header details.mobile-menu[open] summary {cursor:pointer;list-style:none;text-align:right;}

  .utility,.utility-inner {box-sizing:border-box;max-width:100%;min-width:0;}
  .utility-inner {white-space:normal;overflow-wrap:anywhere;}
  main,.site-footer {min-width:0;max-width:100%;box-sizing:border-box;}
  .wrap,.section.wrap,.site-header .wrap {max-width:calc(100% - 28px)!important;min-width:0!important;box-sizing:border-box!important;}
  .article-layout,.article-body,.article-section,.article-aside,.products-grid,.article-grid,
  .product-info,.product-card,.product-detail,.topic-hero,.topic-sales-box,
  .keyword-products,.keyword-related,.lab-related,.lab-medical-v3 {
    box-sizing:border-box;max-width:100%;min-width:0;
  }
  .article-layout,.product-detail {grid-template-columns:minmax(0,1fr)!important;}
  .article-layout > *, .product-detail > *, .topic-hero > *,
  .product-card > *,.site-footer .footer-main > * {min-width:0;max-width:100%;}
  .products-grid,.article-grid,.topic-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  :is(main,.site-footer) :is(h1,h2,h3,p,a,li,summary) {overflow-wrap:break-word;}
  main img,main video,main iframe {max-width:100%;height:auto;}
  main svg {max-width:100%;}
  .hero-actions,.med-actions,.product-link-actions,.v18-card-actions {max-width:100%;flex-wrap:wrap;}
  .hero-actions a,.med-actions a,.product-link-actions a,.v18-card-actions a {max-width:100%;white-space:normal!important;text-align:center;}
  .site-footer .footer-main {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .site-footer .footer-col:last-child {grid-column:auto!important;}
}
@media (max-width:650px) {
  .site-header .header-inner {width:calc(100% - 24px)!important;}
  .wrap,.section.wrap,.site-header .wrap {width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;margin-left:auto!important;margin-right:auto!important;}
  .products-grid,.article-grid,.topic-grid,.article-aside {grid-template-columns:minmax(0,1fr)!important;}
  .site-footer .footer-main {grid-template-columns:minmax(0,1fr)!important;}
  .site-footer {padding-left:18px!important;padding-right:18px!important;}
  .site-footer .footer-col,.site-footer .footer-brand {grid-column:auto!important;}
  .site-footer .footer-bottom {flex-wrap:wrap!important;}
  .topic-hero,.topic-hero-art,.product-detail {display:block!important;min-height:0!important;}
  .product-detail-img,.product-detail-surface,.topic-hero-art {max-width:100%;height:auto;min-height:0!important;}
  .article-heading h1,.index-heading h1,.topic-hero h1 {font-size:clamp(29px,8vw,42px)!important;line-height:1.13!important;}
  .btn,.header-cta,.product-review-link,.product-offer-link {max-width:100%;white-space:normal;}

  /* Four keyword theme heroes: no min-content columns or off-screen left edge. */
  body.keyword-site :is(.bright-hero,.journal-hero,.lux-hero,.med-hero),
  body.lab-site.keyword-site :is(.bright-hero,.journal-hero,.lux-hero,.med-hero) {
    box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
    align-items:stretch!important;grid-template-columns:minmax(0,1fr)!important;
    width:calc(100% - 24px)!important;min-width:0!important;max-width:calc(100% - 24px)!important;
    margin:18px auto 32px!important;padding:clamp(18px,5vw,26px)!important;
    gap:22px!important;height:auto!important;min-height:0!important;
  }
  body.keyword-site :is(.bright-hero-copy,.journal-hero-copy,.lux-hero-copy,.med-hero-copy,
                      .bright-hero-image,.journal-hero-media,.lux-photo,.med-photo),
  body.lab-site.keyword-site :is(.bright-hero-copy,.journal-hero-copy,.lux-hero-copy,.med-hero-copy,
                      .bright-hero-image,.journal-hero-media,.lux-photo,.med-photo) {
    box-sizing:border-box!important;min-width:0!important;max-width:100%!important;width:100%!important;
    margin-left:0!important;margin-right:0!important;
  }
  body.keyword-site :is(.bright-hero,.journal-hero,.lux-hero,.med-hero) h1,
  body.lab-site.keyword-site :is(.bright-hero,.journal-hero,.lux-hero,.med-hero) h1 {
    font-size:clamp(29px,7.6vw,38px)!important;line-height:1.13!important;
    max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  body.lab-site.keyword-site .keyword-related.lab-related,
  body.lab-site.keyword-site .lab-medical-v3,
  body.keyword-site .keyword-related {
    box-sizing:border-box!important;min-width:0!important;
    max-width:calc(100% - 24px)!important;width:calc(100% - 24px)!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  body.lab-site.keyword-site .lab-medical-v3-inner,
  body.lab-site.keyword-site .article-body .lab-medical-v3-inner,
  body.keyword-site .article-layout {grid-template-columns:minmax(0,1fr)!important;}
  body.lab-site.keyword-site .v18-sale-box,
  body.lab-site.keyword-site .article-body .v18-sale-box {
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    padding:22px!important;min-width:0!important;
  }
  body.lab-site.keyword-site .v18-sale-box .lab-v3-choice-art {position:static!important;left:auto!important;top:auto!important;margin:0 0 16px!important;}
  body.lab-site.keyword-site .v18-product-grid,
  body.lab-site.keyword-site .keyword-products .products-grid,
  body.keyword-site .v18-product-grid {grid-template-columns:minmax(0,1fr)!important;}
  body.lab-site.keyword-site .v18-offers .v18-product-grid > .v18-product-card,
  body.lab-site.keyword-site .keyword-products .products-grid > .product-card {
    box-sizing:border-box!important;min-width:0!important;width:100%!important;max-width:100%!important;flex:0 0 100%!important;
  }
  body.lab-site.keyword-site .v18-product-cluster,
  body.lab-site.keyword-site .v18-cluster-rail,
  body.lab-site.keyword-site .lab-related-grid {max-width:100%!important;min-width:0!important;}
  body.lab-site.keyword-site .v18-cluster-rail {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.keyword-site .article-heading {max-width:100%;min-width:0;}
  .product-detail-copy h1 {font-size:clamp(30px,8vw,45px)!important;}
}
@media (max-width:360px) {
  .site-header .brand {font-size:16px!important;}
  .site-header .header-inner {width:calc(100% - 20px)!important;}
  body.lab-site.keyword-site :is(.bright-hero,.journal-hero,.lux-hero,.med-hero),
  body.keyword-site :is(.bright-hero,.journal-hero,.lux-hero,.med-hero) {
    width:calc(100% - 18px)!important;max-width:calc(100% - 18px)!important;padding:18px!important;
  }
  body.lab-site.keyword-site :is(.bright-hero,.journal-hero,.lux-hero,.med-hero) h1 {font-size:28px!important;}
}

/* SEO-SMART THEME 02_NOIR MOBILE MENU CONTRAST V2.
   V1 places the expanded navigation on a light surface, while 02_noir.css
   still gives its links white text. Make ONLY opened 02_noir menus readable.
   Other themes, closed header, hero and desktop remain unchanged. */
@media (max-width:850px) {
  body.theme-noir .site-header .site-nav.is-open {
    background-color:#f7f8f2 !important;
    border-color:#c2d0c5 !important;
    color:#173629 !important;
  }
  body.theme-noir .site-header .site-nav.is-open a,
  body.theme-noir .site-header .site-nav.is-open a:link,
  body.theme-noir .site-header .site-nav.is-open a:visited,
  body.theme-noir .site-header .site-nav.is-open a[aria-current] {
    color:#173629 !important;
    text-shadow:none !important;
    opacity:1 !important;
  }
  body.theme-noir .site-header .site-nav.is-open a:hover,
  body.theme-noir .site-header .site-nav.is-open a:focus-visible {
    background-color:#e6eee7 !important;
    color:#112a20 !important;
    outline-color:#275745 !important;
  }
}

/* SEO-SMART MOBILE SINGLE PRODUCT COLUMN V3 (2026-11-01).
   Theme Lab V3 lays out product cards using display:flex and !important
   flex-basis for product counts 2 and 4. Setting grid-template-columns alone
   cannot override that Flexbox layout. Use a single Grid track on mobile.
   Applies to all four themes, not just 02_noir, and only <=767px.
   Does NOT collapse decorative image clusters or article lists. */
@media screen and (max-width:767px) {
  body.lab-site.keyword-site .keyword-products .products-grid,
  body.lab-site.keyword-site .keyword-products .products-grid[data-lab-v3-count],
  body.lab-site.keyword-site .keyword-products .products-grid[data-v20-count],
  body.keyword-site .keyword-products .products-grid,
  body.keyword-site .keyword-products .products-grid[data-v20-count],
  main .keyword-products .products-grid,
  main .keyword-products .products-grid[data-v20-count],
  body.keyword-site .v18-offers .v18-product-grid,
  body.lab-site.keyword-site .v18-offers .v18-product-grid,
  body.keyword-site .v18-product-grid,
  main .v18-offers .v18-product-grid,
  main .products-grid,
  main .products-grid[data-v20-count] {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    justify-content:stretch!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.lab-site.keyword-site .keyword-products .products-grid[data-lab-v3-count] > .product-card,
  body.lab-site.keyword-site .keyword-products .products-grid > .product-card,
  body.lab-site.keyword-site .keyword-products .products-grid > .product-card--sales,
  body.keyword-site .keyword-products .products-grid > .product-card,
  body.keyword-site .v18-offers .v18-product-grid > .v18-product-card,
  body.lab-site.keyword-site .v18-offers .v18-product-grid > .v18-product-card,
  main .v18-product-grid > .v18-product-card,
  main .products-grid > .product-card {
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    flex:0 1 auto!important;
    grid-column:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body.keyword-site .keyword-products .products-grid .product-info,
  body.keyword-site .v18-offers .v18-product-text,
  main .products-grid .product-info {
    min-width:0!important;
    max-width:100%!important;
  }
}