/* ===== Responsive ===== */
@media (max-width: 768px) {
  .ostory-hero {
    grid-template-columns: 1fr;
    gap: 2.125rem;
    min-height: 0;
    padding: 2.5rem var(--gutter) 2.75rem;
    text-align: center;
  }
  .ostory-hero__frame {
    order: -1;
    display: block;
  }
  .ostory-hero__img {
    aspect-ratio: 4/5;
  }
  .ostory-hero__text {
    margin: 0 auto;
  }
  .ostory-hero__title {
    font-size: 2.375rem;
  }
  .ostory-hero__lead {
    font-size: 0.9375rem;
    margin-left: auto;
    margin-right: auto;
  }
  .ostory-hero__meta {
    justify-content: center;
  }

  .pull {
    padding: 3rem var(--gutter);
  }
  .pull__q {
    font-size: 1.5rem;
  }
  .pull__by {
    font-size: 0.875rem;
  }

  .chapter {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.5rem var(--gutter);
    text-align: center;
  }
  .chapter--rev .chapter__media {
    order: -1;
  }
  .chapter__media {
    order: -1;
  }
  .chapter__img {
    min-height: 18.75rem;
  }
  .chapter__text {
    margin: 0 auto;
  }
  .chapter__title {
    font-size: 1.75rem;
  }
  .chapter__quote {
    text-align: left;
    font-size: 1.125rem;
  }

  /* keep the story sections in normal flow on small screens */
  .story-stack > section {
    position: static;
    top: auto;
    border-radius: 0;
    box-shadow: none;
  }

  .belief {
    padding: 3rem var(--gutter);
  }
  .belief__title {
    font-size: 1.75rem;
  }
  .belief__body {
    font-size: 0.9375rem;
  }

  .welcome {
    padding: 3rem var(--gutter);
  }
  .welcome__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .journey {
    padding: 3rem var(--gutter);
  }
  .journey__steps {
    grid-template-columns: 1fr;
    gap: 1.375rem;
  }

  .threads {
    padding: 3rem var(--gutter);
  }
  .threads__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .threads__foot {
    font-size: 1.3125rem;
    margin-top: 2.375rem;
  }

  .manifesto {
    padding: 3.25rem var(--gutter);
  }
  .manifesto__title {
    font-size: 1.75rem;
  }
  .manifesto__body {
    font-size: 0.875rem;
  }

  .closing {
    padding: 3rem var(--gutter);
  }
  .closing__q {
    font-size: 1.75rem;
  }
  .closing__body {
    font-size: 0.875rem;
  }

  .lexicon {
    grid-template-columns: 1fr 1fr;
  }
  .lexicon__item:nth-child(2) {
    border-right: 0;
  }
  .lexicon__item:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .lexicon__item {
    border-bottom: 1px solid color-mix(in srgb, var(--green) 16%, var(--line));
  }
  .lexicon__item:nth-last-child(-n + 1) {
    border-bottom: 0;
  }
}

/* ---- horizontal-scroll affordance ----
   JS wraps each swipeable rail in .scroller and adds --more / --back only when
   the rail actually overflows. The wrapper stays inert (display:contents) while
   everything fits, so it never touches layout; the moment content overflows —
   at ANY viewport, desktop or phone — it becomes a positioned box that paints
   edge fades + chevrons signalling there is more to scroll. Same behaviour and
   same indicators everywhere; hidden only when nothing is clipped. */
.scroller {
  display: contents;
  --scroll-fade: #faf4e9;
}
.weave .scroller {
  --scroll-fade: #f3ead6;
}

.scroller--more,
.scroller--back {
  display: block;
  position: relative;
}

.scroller--more::after,
.scroller--back::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  pointer-events: none;
  z-index: 6;
}
.scroller--more::after {
  right: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='34' viewBox='0 0 24 24' fill='none' stroke='%237a2e2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")
      no-repeat right 1rem center,
    linear-gradient(to left, var(--scroll-fade), transparent);
}
.scroller--back::before {
  left: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='34' viewBox='0 0 24 24' fill='none' stroke='%237a2e2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E")
      no-repeat left 1rem center,
    linear-gradient(to right, var(--scroll-fade), transparent);
}

@media (max-width: 768px) {
  .announce {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    padding: 0.5625rem;
  }
  .hdr {
    padding: 1rem 1.25rem;
  }
  .hdr__burger {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ink-muted);
  }
  .hdr__brand {
    font-size: 1.3125rem;
    gap: 0.5rem;
  }
  .hdr__logo {
    height: 2.625rem;
  }
  .hdr__brand span {
    display: none;
  }
  /* right column keeps only the cart icon on phones; the search icon drops out
     in favour of the full-width .msearch bar below the header. */
  .hdr__col--right {
    gap: 1.125rem;
  }
  .hdr__search {
    display: none;
  }
  .hdr__nav--right {
    display: none;
  }

  /* off-canvas nav drawer — slides in from the left, mirroring the filter
     drawer (which slides in from the right). */
  .hdr__nav--left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 80;
    width: 86%;
    max-width: 21.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    box-shadow: 4px 0 30px rgba(51, 42, 32, 0.18);
    padding: 1.25rem 1.375rem calc(1.75rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
  }
  .nav-toggle:checked ~ .hdr .hdr__nav--left {
    transform: translateX(0);
    visibility: visible;
  }
  .hdr__nav--left a {
    padding: 0.75rem 0;
  }
  /* plain top-level links (Our Story) are hidden on desktop — bring them back
     inside the mobile drawer */
  .hdr__nav--left > a {
    display: block;
  }

  /* drawer chrome */
  .hdr__nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--line);
  }
  .hdr__nav-title {
    font-family: "Marcellus", serif;
    font-size: 1.375rem;
    color: var(--ink);
  }
  .hdr__nav-close {
    display: inline-flex;
    padding: 0.375rem;
    margin: -0.375rem;
    cursor: pointer;
    color: var(--ink-muted);
  }
  .hdr__nav-close .icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  /* backdrop behind the nav drawer */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 75;
    background: rgba(51, 42, 32, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .nav-toggle:checked ~ .hdr .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* nav groups on mobile: inline tap-accordion (no hover dropdown) */
  .navgroup {
    position: static;
    display: block;
    width: 100%;
    border-top: 1px solid var(--line);
  }
  .navgroup::after {
    content: none;
  }
  .navgroup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8125rem 0;
    width: 100%;
  }
  .navgroup__head::after {
    content: "+";
    font-size: 1.25rem;
    color: var(--maroon);
  }
  .navgroup__menu {
    position: static;
    transform: none;
    display: none;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 0 0.625rem 0.875rem;
    font-size: 0.875rem;
  }
  .navgroup__menu a {
    padding: 0.5625rem 0;
  }
  .navgroup__all {
    margin-bottom: 0.125rem;
  }
  .navgroup__primary {
    padding-top: 0.6875rem;
  }
  /* nested primary → subcategory as a second-level accordion (no flyout) */
  .subnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6875rem 0 0.5625rem;
  }
  .subnav__head::after {
    content: "+";
    font-size: 1.125rem;
    color: var(--maroon);
  }
  .subnav__toggle:checked ~ .subnav__head::after {
    content: "\2013"; /* – */
  }
  .subnav__menu {
    position: static;
    display: none;
    flex-direction: column;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.375rem 1rem;
  }
  .subnav:hover > .subnav__menu {
    display: none;
  }
  .subnav__toggle:checked ~ .subnav__menu {
    display: flex;
  }
  .subnav__menu a {
    padding: 0.5625rem 0;
  }
  .navgroup:hover > .navgroup__menu {
    display: none;
  }
  .navgroup__toggle:checked ~ .navgroup__menu {
    display: flex;
  }

  /* mobile header stack: header + search + categories — scrolls with the page */
  .topbar {
    background: var(--cream);
  }
  .hdr {
    border-bottom: 0;
  }

  .msearch {
    display: block;
    padding: 0 1.25rem 0.75rem;
  }
  .msearch__form {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--cream);
    border: 1px solid var(--line-gold);
    border-radius: 62.4375rem;
    padding: 0.625rem 1rem;
  }
  .msearch__icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ink-faint);
    flex: 0 0 auto;
  }
  .msearch input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: "Jost", sans-serif;
    font-size: 0.875rem;
    color: var(--ink-heading);
  }
  .msearch input::placeholder {
    color: var(--ink-faint);
  }
  .msearch input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .mcats {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0 0.5rem;
  }
  .mcats::-webkit-scrollbar {
    display: none;
  }
  .mcats a {
    flex: 0 0 auto;
    padding: 0.8125rem 1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  /* app-style bottom bar — the clearance lives on the footer's own dark
     background so no cream gap shows when the bar slides away */
  .appbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .appbar--hidden {
    transform: translateY(115%);
  }
  .appbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3125rem;
    padding: 0.5625rem 0.25rem 0.625rem;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-align: center;
  }
  .appbar__item .icon {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--maroon-deep);
  }
  .appbar__fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-top: -1.5rem;
    border-radius: 50%;
    background: var(--maroon);
    border: 0.25rem solid var(--cream);
  }
  .appbar__fab .icon {
    color: var(--cream);
  }

  /* cart item = the WooCommerce Mini-Cart block (same as the header). Strip the
     block's button chrome so it reads as an appbar icon, size the icon to match
     the sibling items, and keep the "Cart" label beneath. The block owns the
     count badge and the slide-out drawer. */
  .appbar__minicart .wc-block-mini-cart__button {
    padding: 0;
    background: none;
    border: 0;
    color: var(--maroon-deep);
    cursor: pointer;
  }
  .appbar__minicart .wc-block-mini-cart__icon {
    width: 1.3125rem;
    height: 1.3125rem;
  }
  .appbar__minicart .wc-block-mini-cart__amount {
    display: none; /* hasHiddenPrice already hides it; belt-and-braces */
  }

  .hero {
    grid-template-columns: 1fr;
  }
  .hero__img {
    order: -1;
    /* Cancel the desktop min-height floor and give the slider box its own height
       from the 1:1 mobile crop — the slide images are absolutely positioned and
       carry no intrinsic height, so without this the slider collapses to 0. */
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  /* Arrows are a desktop affordance; mobile navigates by swipe + dots. */
  .hero__nav {
    display: none;
  }
  .hero__text {
    padding: 2.125rem var(--gutter) 2.5rem;
    text-align: center;
    align-items: center;
  }
  .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 21.25rem;
  }
  .btn {
    padding: 0.9375rem !important;
    text-align: center;
  }

  .story {
    grid-template-columns: 1fr;
    padding: 0.5rem var(--gutter) 2.75rem;
    text-align: center;
  }
  .story__img {
    order: -1;
    min-height: 18.75rem;
    margin: 0 0 1.625rem;
  }
  .story__text {
    align-items: center;
  }
  .story__title {
    font-size: 2rem;
  }
  .body {
    font-size: 0.875rem;
  }

  .weave {
    padding: 2.75rem 0 2.75rem var(--gutter);
  }
  .weave__head {
    margin-bottom: 1.75rem;
    padding-right: var(--gutter);
  }
  .section-title {
    font-size: 1.875rem;
  }
  .weave__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0.875rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-right: var(--gutter);
    scrollbar-width: none;
  }
  .weave__grid::-webkit-scrollbar {
    display: none;
  }
  /* ~4 circles across, with a peek of the next; the % basis makes them
     scale fluidly with viewport width instead of using a fixed size. */
  .weave__item {
    flex: 0 0 21%;
    scroll-snap-align: start;
  }
  .weave__circle {
    width: 100%;
  }
  .weave__label {
    font-size: 0.6875rem;
  }

  .favourites {
    padding: 2.75rem 0 2.75rem var(--gutter);
  }
  .section-head {
    display: block;
    text-align: center;
    margin-bottom: 1.625rem;
    padding-right: var(--gutter);
  }
  .section-head .link-underline {
    margin-top: 1rem;
  }
  .grid-4 {
    display: flex;
    grid-template-columns: none;
    gap: 1.125rem;
    overflow-x: auto;
    padding-right: var(--gutter);
    padding-bottom: 0.875rem;
  }
  .grid-4 .product {
    flex: 0 0 70vw;
  }

  .values {
    grid-template-columns: 1fr 1fr;
  }
  .values__cell:nth-child(2) {
    border-right: 0;
  }
  .values__cell {
    border-bottom: 1px solid var(--line);
  }

  .insta {
    padding: 3.5rem 0 3.75rem;
  }
  .insta__head {
    margin-bottom: 1.75rem;
    padding: 0 var(--gutter);
  }
  .insta__tile {
    width: 11.25rem;
    margin-right: 0.625rem;
  }
  .insta__cap {
    left: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    padding: 0.25rem 0.4375rem;
  }
  .insta__cta {
    margin-top: 1.875rem;
  }

  .newsletter-sec {
    padding: 3rem var(--gutter);
  }
  .newsletter-sec__title {
    font-size: 1.75rem;
  }
  .newsletter-sec__body {
    font-size: 0.875rem;
  }
  .subscribe {
    flex-direction: column;
    max-width: 21.25rem;
  }

  .footer {
    padding: 2.75rem var(--gutter) calc(2rem + 4.5rem + env(safe-area-inset-bottom));
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.5rem;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__tag {
    max-width: none;
  }
  .footer__copy {
    margin-top: 2rem;
    padding-top: 1.25rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .grid-4 .product {
    flex: 0 0 78vw;
  }
}