/* ============================================================================
   Shared mobile hamburger nav — injected on every Patch page (≤1080px).
   Layout on mobile:  [≡] hamburger left · logo centred · 3 icons right (search · account · bag).
   Pairs with assets/nav-mobile.js (builds the burger button + slide-in drawer).
   ========================================================================== */

/* ---- smooth cross-document page transitions (View Transitions API) ----
   One-line opt-in: same-origin navigations cross-fade instead of the hard white
   flash/jitter of a full reload. Both the outgoing AND incoming page must opt in;
   this file loads on every nav page, so all in-nav navigation is covered. Browsers
   without support (older iOS) simply navigate normally — no regression. Honour
   reduced-motion by snapping instead of animating. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.32s;animation-timing-function:cubic-bezier(.4,0,.15,1)}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

.navburger{display:none}

@media(max-width:1080px){
  /* LEFT-aligned logo: burger far-left, logo right beside it, icons far-right.
     margin-right:auto on the logo eats the slack so the icon cluster is pushed
     to the right edge. (Centered variant was grid 1fr auto 1fr + justify-self:center.) */
  .navbar{display:flex;align-items:center;position:relative;padding-top:8px}
  .navbar>.logo{margin:0 auto 0 6px;position:static;top:auto;left:auto;transform:none;height:auto;z-index:auto}
  .navbar>.logo svg{height:34px}
  /* brand sage mark + wordmark on the cream header — one colour in every state,
     so scrolling never recolours the logo. The index hero is transparent over a
     dark photo, so only there the mark stays white until the header gains .scrolled. */
  .navbar>.logo svg path{fill:var(--sage,#617367)}
  .site .navbar>.logo svg path{fill:#fff}
  .site.scrolled .navbar>.logo svg path{fill:var(--sage,#617367)}
  /* right cluster: all three icons (search · account · bag), condensed & even.
     The logo is screen-centred and the mark is narrow (~69px wide at this height),
     so a tight 3-icon cluster clears it on phones ≥360px; the ≤360 block tightens
     it further for the smallest screens. */
  .navbar>.navtools{gap:2px}
  .navtools .nav-ic,.navtools .nav-icon{width:38px;height:38px}
  .navtools .nav-ic svg,.navtools .nav-icon svg{width:20px;height:20px}
  .navlinks{display:none!important}
  .nav-cta{display:none!important}          /* redundant "Shop plants" pill (index only) */

  .navburger{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:-9px;padding:0;
    background:none;border:0;cursor:pointer;color:var(--ink,#252422);
    border-radius:11px;-webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .5s ease}
  .navburger:hover{background:rgba(97,115,103,.12)}
  .navburger:focus-visible{outline:2px solid var(--sage,#617367);outline-offset:2px}
}

/* smallest phones: tighten the 3-icon cluster + logo so nothing crowds the mark */
@media(max-width:360px){
  .navbar>.navtools{gap:0}
  .navtools .nav-ic,.navtools .nav-icon{width:34px;height:34px}
  .navtools .nav-ic svg,.navtools .nav-icon svg{width:19px;height:19px}
  .navbar>.logo svg{height:30px}
}

/* index.html header is transparent over the dark hero (.site wrapper only there):
   burger goes white, then ink once the header frosts on scroll. */
.site .navburger{color:#fff}
.site.scrolled .navburger{color:var(--ink,#252422)}
/* while the drawer is open the burger sits over cream → always ink for contrast */
body.mnav-open .navburger,body.mnav-open .site .navburger{color:var(--ink,#252422)}

/* burger → X animation */
.navburger .bx{position:relative;display:block;width:22px;height:15px}
.navburger .bx i{position:absolute;left:0;height:2px;width:100%;background:currentColor;border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.15,1),opacity .18s ease,top .3s ease}
.navburger .bx i:nth-child(1){top:0}
.navburger .bx i:nth-child(2){top:6.5px}
.navburger .bx i:nth-child(3){top:13px}
body.mnav-open .navburger .bx i:nth-child(1){top:6.5px;transform:rotate(45deg)}
body.mnav-open .navburger .bx i:nth-child(2){opacity:0}
body.mnav-open .navburger .bx i:nth-child(3){top:6.5px;transform:rotate(-45deg)}

/* scrim */
.mnav-scrim{position:fixed;inset:0;background:rgba(33,40,35,.42);opacity:0;pointer-events:none;
  transition:opacity .3s ease;z-index:130}
body.mnav-open .mnav-scrim{opacity:1;pointer-events:auto}

/* drawer + scrim — iOS Safari cream-bottom-bar fix (based.com pattern).
   Safari tints its bottom toolbar from an OPAQUE backdrop. A translucent
   position:fixed layer over the viewport — our rgba(.42) scrim — or any
   backdrop-filter makes Safari abandon colour-sampling and fall back to its
   grey system material. based.com stays cream because its mobile menu is a
   full-screen OPAQUE panel with NO translucent scrim. So on phones we mirror
   that: drawer = 100vw opaque cream, scrim removed (no translucent layer at
   the bottom edge → the chrome behind the URL pill stays cream). Tablets keep
   the 93vw side-drawer + dim scrim (iPad Safari has no bottom URL bar). */
/* DROPDOWN: anchored to the top, drops down on open. height:100dvh tracks the
   dynamic viewport so the panel always reaches the true screen bottom (fixes the
   thin sliver of page that showed under the foot as iOS resized its toolbar mid-
   scroll). The cream box-shadow is an opaque skirt below the panel — during that
   toolbar wobble it fills any momentary gap so no content peeks through. */
.mnav{position:fixed;top:0;left:0;width:min(93vw,430px);max-width:93vw;height:100vh;height:100dvh;
  background:var(--cream,#FDFEF7);z-index:135;display:flex;flex-direction:column;
  transform:translateY(-102%);transition:transform .4s cubic-bezier(.4,0,.15,1);
  overflow:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* Cream skirt ONLY while open — it fills the iOS toolbar-wobble gap below the open
   panel. When CLOSED the panel sits above the viewport (translateY(-102%)), so a
   permanent skirt pokes its 60px cream band DOWN over the top ~43px of the page,
   clipping the header and the cart drawer (both z-index < 135). */
body.mnav-open .mnav{transform:none;box-shadow:0 60px 0 0 var(--cream,#FDFEF7)}
@media(max-width:560px){
  .mnav{width:100vw;max-width:100vw}
  .mnav-scrim{display:none}   /* kill the translucent layer so Safari keeps cream */
}

.mnav-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 6px;flex:none}
/* same horizontal mark + wordmark as the top bar, in brand sage on the cream drawer */
.mnav-logo{display:flex;align-items:center;line-height:0}
.mnav-logo svg{height:32px;width:auto;display:block}
.mnav-logo svg path{fill:var(--sage,#617367)}
.mnav-close{width:42px;height:42px;display:grid;place-items:center;border:0;background:none;
  cursor:pointer;color:var(--ink,#252422);border-radius:50%;margin-right:-8px}
.mnav-close:hover{background:var(--tint,#eef1e6)}
.mnav-close:focus-visible{outline:2px solid var(--sage,#617367);outline-offset:2px}
.mnav-close svg{width:22px;height:22px}

.mnav-nav{padding:8px 8px 14px;display:flex;flex-direction:column}
/* .mnav-top holds the primary categories; .mnav-secondary is pinned to the bottom */
.mnav-top{flex:none;display:flex;flex-direction:column}
/* primary category rows — taller so the top section reads longer */
.mnav-top>a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;min-height:48px;border-radius:12px;text-decoration:none;
  font-family:var(--display,'Satoshi',sans-serif);font-weight:500;font-size:18.5px;
  letter-spacing:-.01em;color:var(--ink,#252422)}
.mnav-top>a:hover,.mnav-top>a:focus-visible{background:var(--tint,#eef1e6);color:var(--sage-d,#4b594f);outline:none}
.mnav-top>a .ar{width:17px;height:17px;color:#9aa08c;flex:0 0 auto}
/* secondary links — smaller, lighter, pushed to the foot of the drawer */
.mnav-secondary{flex:none;margin-top:auto;padding-top:8px;border-top:1px solid var(--line,#e4e7dd)}
.mnav-secondary>a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;min-height:44px;border-radius:12px;text-decoration:none;
  font-family:var(--display,'Satoshi',sans-serif);font-weight:400;font-size:15px;
  letter-spacing:-.005em;color:#6a6f61}
.mnav-secondary>a:hover,.mnav-secondary>a:focus-visible{background:var(--tint,#eef1e6);color:var(--sage-d,#4b594f);outline:none}
.mnav-secondary>a .ar{width:15px;height:15px;color:#b4b9ab;flex:0 0 auto}
.mnav-sep{height:1px;background:var(--line,#e4e7dd);margin:9px 14px}

/* ---- drill-in category sections (desktop mega taxonomy as sliding sub-panels) ---- */
/* the body clips the layers; every level is a full-size layer JS slides & stacks */
.mnav-body{position:relative;flex:1;overflow:hidden}
.mnav-nav,.mnav-sub{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transition:transform .34s cubic-bezier(.4,0,.15,1),visibility .34s}
.mnav-nav{transform:translateX(0)}
.mnav-nav.behind{transform:translateX(-24%)}
.mnav-sub{background:var(--cream,#FDFEF7);transform:translateX(100%);visibility:hidden}
.mnav-sub.behind{transform:translateX(-24%);visibility:visible}
.mnav-sub.active,.mnav-nav.active{transform:translateX(0);visibility:visible}
/* top-level row that drills into a section — right chevron points outward */
.mnav-drill{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;min-height:48px;border:0;background:none;cursor:pointer;border-radius:12px;
  font-family:var(--display,'Satoshi',sans-serif);font-weight:500;font-size:18.5px;letter-spacing:-.01em;
  color:var(--ink,#252422);text-align:left;-webkit-tap-highlight-color:transparent}
.mnav-drill:hover,.mnav-drill:focus-visible{background:var(--tint,#eef1e6);color:var(--sage-d,#4b594f);outline:none}
.mnav-drill .ar{width:18px;height:18px;color:#9aa08c;flex:0 0 auto}
/* section header: sticky bar that steps back to the top level */
.mnav-sub-head{position:sticky;top:0;z-index:1;background:var(--cream,#FDFEF7);
  padding:8px 8px 6px;border-bottom:1px solid var(--line,#e4e7dd)}
.mnav-back{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;
  border:0;background:none;cursor:pointer;border-radius:10px;text-align:left;
  font-family:var(--display,'Satoshi',sans-serif);font-weight:700;font-size:18.5px;letter-spacing:-.01em;
  color:var(--ink,#252422);-webkit-tap-highlight-color:transparent}
.mnav-back:hover,.mnav-back:focus-visible{background:var(--tint,#eef1e6);color:var(--sage-d,#4b594f);outline:none}
.mnav-back .ba{width:20px;height:20px;color:var(--sage,#617367);flex:0 0 auto}
.mnav-sub-body{padding:8px 8px 16px}
.mnav-shopall{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:2px 6px 8px;padding:11px 14px;min-height:44px;border-radius:10px;
  background:var(--tint,#eef1e6);color:var(--sage-d,#4b594f);text-decoration:none;
  font-family:var(--display,'Satoshi',sans-serif);font-weight:600;font-size:16px;letter-spacing:-.01em}
.mnav-shopall:hover,.mnav-shopall:focus-visible{background:#e3e8d9;outline:none}
.mnav-shopall .ar{width:16px;height:16px;flex:0 0 auto;color:currentColor}
.mnav-grp{padding:2px 6px 8px}
.mnav-grp h6{margin:10px 8px 3px;font-family:var(--label,'Korolev','Saira',sans-serif);
  text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:400;color:var(--sage,#617367)}
.mnav-grp a{display:flex;align-items:center;justify-content:flex-start;min-height:44px;padding:8px 8px;
  border-radius:9px;text-decoration:none;font-family:var(--display,'Satoshi',sans-serif);font-weight:400;
  font-size:16px;letter-spacing:-.005em;color:#4b4f45}
.mnav-grp a:hover,.mnav-grp a:focus-visible{background:var(--tint,#eef1e6);color:var(--sage-d,#4b594f);outline:none}

.mnav-foot{margin-top:auto;padding:16px 20px;border-top:1px solid var(--line,#e4e7dd);
  font-family:var(--body,'Saira',sans-serif);font-size:12.5px;letter-spacing:.01em;color:#8a907f}

/* ---- Sunday-inspired clean drawer: airy text list · media card · quiet foot ---- */
.mnav-nav{padding:18px 24px 22px}
.mnav-top>a,.mnav-drill{padding:11px 0;min-height:0;border-radius:0;gap:12px;
  font-size:23px;font-weight:500;letter-spacing:-.022em;color:var(--ink,#252422)}
.mnav-top>a:hover,.mnav-top>a:focus-visible,
.mnav-drill:hover,.mnav-drill:focus-visible{background:none;color:var(--sage-d,#4b594f)}
.mnav-top>a .ar,.mnav-drill .ar{width:14px;height:14px;color:#c4c9ba}

/* feature card — image (no video); doubles as the primary Shop-all CTA */
.mnav-card{position:relative;display:block;margin:16px 0 2px;border-radius:18px;overflow:hidden;
  aspect-ratio:16/10;box-shadow:0 12px 28px -16px rgba(33,40,35,.45)}
.mnav-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mnav-card-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;padding:9px 17px;border-radius:999px;
  background:rgba(253,254,247,.94);box-shadow:0 3px 12px -4px rgba(33,40,35,.4);
  font-family:var(--display,'Satoshi',sans-serif);font-weight:600;font-size:14px;
  letter-spacing:-.01em;color:var(--ink,#252422)}

/* quiet two-link foot (Sunday style) */
.mnav-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 24px}
.mnav-foot a{font-family:var(--display,'Satoshi',sans-serif);font-weight:500;font-size:13.5px;
  letter-spacing:-.005em;color:#8a907f;text-decoration:none}
.mnav-foot a:hover{color:var(--sage,#617367)}

/* ---- ALIGNMENT: every row (root + all sub-panels) shares one 24px left rail and
   one right rail for chevrons. Containers hold the 24px inset; rows have zero
   horizontal padding so their text/chevron line up across levels. The shop-all
   pill breaks out by 14px (its own padding pulls the text back onto the rail). */
.mnav-sub-head{padding:8px 24px 4px}
.mnav-back{padding:9px 0}
.mnav-sub-body{padding:6px 24px 18px}
.mnav-shopall{margin:2px -14px 12px;padding:13px 14px}
.mnav-grp{padding:0}
.mnav-grp a{padding:11px 0;font-size:17px}

@media(prefers-reduced-motion:reduce){
  .mnav,.mnav-scrim,.navburger .bx i,.mnav-nav,.mnav-sub{transition:none}
}