/* Locale — mobile design review, October 2026.
   This sheet is loaded LAST; all refinements are scoped to tablet/phone
   widths so the previously approved desktop layouts stay unchanged. */
@media (max-width:800px) {
  /* Expanded mobile menu: retailer CTA spans the available menu width. */
  .site-header .primary-nav .nav-cta {
    display:flex;
    width:100%;
    min-width:0;
    max-width:none;
    margin:18px 0 4px;
    align-self:stretch;
    justify-content:center;
    text-align:center;
  }

  /* Homepage: centered Founding Mothers editorial story and button. */
  body:not(.story-page):not(.product-page):not(.collection-page) .story-copy {
    text-align:center;
  }
  body:not(.story-page):not(.product-page):not(.collection-page) .story-copy h2,
  body:not(.story-page):not(.product-page):not(.collection-page) .story-copy p {
    margin-left:auto;
    margin-right:auto;
  }
  body:not(.story-page):not(.product-page):not(.collection-page) .story-copy .button {
    display:flex;
    width:max-content;
    max-width:100%;
    margin:23px auto 0;
  }

  /* Homepage: center Explore heading and keep strain options in one swipeable row.
     Negative margins extend the scroller exactly to the screen edges without
     widening the page itself (which would create document overflow). */
  .explore .section-heading {
    text-align:center;
  }
  .explore .section-heading h2,
  .explore .section-heading p {
    margin-left:auto;
    margin-right:auto;
  }
  .explore .strain-tabs {
    display:flex;
    flex-flow:row nowrap;
    width:calc(100% + 44px);
    max-width:none;
    margin-left:-22px;
    margin-right:-22px;
    padding:6px 22px 14px;
    overflow-x:auto;
    overflow-y:hidden;
    gap:9px;
    scroll-snap-type:x proximity;
    scroll-padding-inline:22px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scrollbar-width:none;
  }
  .explore .strain-tabs::-webkit-scrollbar { display:none; }
  .explore .strain-tab {
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  /* Individual SKU pages: Origin Story typographic alignment only. */
  .product-page .origin-copy {
    text-align:center;
  }
  .product-page .origin-copy h2,
  .product-page .origin-copy > p,
  .product-page .origin-copy > p:not(.eyebrow) {
    margin-left:auto;
    margin-right:auto;
  }

  /* Shop All: centered eyebrow, headline, and supporting paragraph. */
  .collection-page .collection-intro {
    text-align:center;
  }
  .collection-page .collection-intro h1,
  .collection-page .collection-intro .eyebrow,
  .collection-page .collection-intro .intro-bottom p {
    margin-left:auto;
    margin-right:auto;
  }
  .collection-page .collection-intro .intro-bottom {
    justify-content:center;
    align-items:center;
  }

  /* Story: show more of the traveler (face, torso and device) rather than
     centering on the left-hand atmospheric blur of this panoramic image. */
  .story-page .editorial-hero .panel-photo {
    object-position:72% center;
  }
  /* Keep the overlaid white hero type legible against the new photo crop. */
  .story-page .editorial-hero .where-shade {
    background:linear-gradient(0deg,rgba(17,16,15,.73) 0%,rgba(17,16,15,.13) 60%,transparent 100%);
  }

  /* Story editorial sections: center section labels, headlines, body and CTA. */
  .story-page .story-lead,
  .story-page .story-manifesto {
    text-align:center;
  }
  .story-page .story-lead h2,
  .story-page .story-lead p,
  .story-page .story-manifesto h2,
  .story-page .story-manifesto p {
    margin-left:auto;
    margin-right:auto;
  }
  .story-page .story-lead > div:last-child {
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .story-page .story-lead > div:last-child .button {
    align-self:center;
  }
  .story-page .story-manifesto {
    width:100%;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Keep the row edge-to-edge on narrow phones with the same 22px page gutters. */
@media (max-width:560px) {
  .explore .strain-tabs { padding-bottom:12px; }
  .story-page .editorial-hero .panel-photo { object-position:72% center; }
}