/* Phone menu (owner pick B2). Full screen under the header; cream paper, serif names, orange only for prices and the cart. */
.site-header--store .mobile-nav > nav {
  position: fixed; inset: var(--mnav-top, 72px) 0 0 0; z-index: 90;
  width: auto; max-width: none; margin: 0; padding: 0; display: block;
  border: 0; border-top: 1px solid rgba(48, 39, 28, .12); border-radius: 0;
  background: #f8f3ea; box-shadow: none; backdrop-filter: none;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  color: #1d140b;
}
.mobile-nav[open] > nav { animation: mnav-in 420ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes mnav-in {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .mobile-nav[open] > nav { animation: none; } }
html.mnav-open, html.mnav-open body { overflow: hidden; }

.mnav { display: flex; flex-direction: column; min-height: 100%; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); font: 400 15px/1.4 var(--sans, "Manrope", sans-serif); }
.site-header--store .mobile-nav nav :where(.mnav) a { padding: 0; border: 0; font-family: inherit; font-size: inherit; color: inherit; text-decoration: none; }

/* Search */
.mnav__search { position: relative; display: flex; align-items: center; }
.mnav__search svg { position: absolute; left: 18px; color: #6a5b4c; pointer-events: none; }
.mnav__search input[type="search"] {
  width: 100%; min-height: 54px; margin: 0; padding: 0 18px 0 50px;
  border: 1px solid rgba(48, 39, 28, .18); border-radius: 999px; background: #fbf7f0;
  color: #1d140b; font: 400 17px/1 var(--sans, "Manrope", sans-serif); box-shadow: none; -webkit-appearance: none; appearance: none;
}
.mnav__search input::placeholder { color: #7a6a58; }
.mnav__search input:focus { border-color: #c9a45a; outline: 3px solid rgba(201, 164, 90, .25); outline-offset: 0; }

/* Shop by mood */
.mnav__label { margin: 24px 0 12px; color: #54453a; font: 400 19px/1.2 "Rufina", Georgia, serif; }
.mnav__moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mnav__moods li { margin: 0; }
.site-header--store .mobile-nav .mnav__moods a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mnav__mood-photo { display: block; width: 100%; max-width: 64px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #efe4d0; box-shadow: 0 6px 14px rgba(35, 22, 9, .16); transition: translate 220ms cubic-bezier(.16, 1, .3, 1); }
.mnav__mood-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mnav__mood-name { color: #1d140b; font-size: 12.5px; line-height: 1.25; }
.site-header--store .mobile-nav .mnav__moods a:active .mnav__mood-photo { translate: 0 -2px; }

/* Categories */
.mnav__cats { margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(48, 39, 28, .12); list-style: none; }
.mnav__cats li { margin: 0; border-bottom: 1px solid rgba(48, 39, 28, .12); }
.site-header--store .mobile-nav .mnav__cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.mnav__cat-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mnav__cat-name { color: #1d140b; font: 400 clamp(28px, 8vw, 34px)/1.05 "Rufina", Georgia, serif; }
.mnav__cat-meta { color: #a8590a; font: 600 17px/1.2 var(--sans, "Manrope", sans-serif); font-variant-numeric: lining-nums; }
.mnav__cat-photo { flex: 0 0 auto; width: 118px; height: 96px; object-fit: cover; border-radius: 10px; background: #14100c; box-shadow: 0 10px 22px rgba(35, 22, 9, .18); }
.mnav__cat.is-home .mnav__cat-photo { object-position: 40% 72%; }
.mnav__cat.is-car .mnav__cat-photo { object-position: 30% 45%; }
.site-header--store .mobile-nav .mnav__all { display: flex; align-items: center; gap: 12px; padding: 18px 0; color: #1d140b; font: 400 26px/1.1 "Rufina", Georgia, serif; }

/* Info links */
.mnav__info { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: auto 0 0; padding: 26px 0 14px; color: #6a5b4c; font-size: 14px; }
.site-header--store .mobile-nav .mnav__info a { color: #6a5b4c; text-decoration: underline; text-decoration-color: rgba(106, 91, 76, .35); text-underline-offset: 4px; }

/* Account + cart */
.mnav__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site-header--store .mobile-nav .mnav__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px;
  border: 1px solid rgba(48, 39, 28, .35); border-radius: 999px; color: #1d140b; font: 500 16px/1 var(--sans, "Manrope", sans-serif);
}
.site-header--store .mobile-nav .mnav__btn--cart { border-color: #f2921c; background: #f2921c; color: #2a1607; }
.mnav__btn .store-cart-count { position: static; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 0; border-radius: 999px; background: #2a1607; color: #f8f1e6; font: 600 12px/1 var(--sans, "Manrope", sans-serif); transform: none; }
.mnav__btn .store-cart-count.is-empty { display: none; }

.site-header--store .mobile-nav .mnav a:focus-visible { outline: 2px solid #f2921c; outline-offset: 3px; border-radius: 6px; }

@media (min-width: 560px) {
  .mnav { max-width: 560px; margin: 0 auto; }
}

/* Interaction: hover (mouse) and press (touch) feedback, plus a soft staggered entrance when the menu opens. */
.mnav a, .mnav__search input { -webkit-tap-highlight-color: transparent; }
.mnav__mood-photo { transition: transform 300ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms ease; }
.mnav__mood-photo img { transition: transform 500ms cubic-bezier(.16, 1, .3, 1); }
.mnav__mood-name { transition: color 180ms ease; }
.mnav__cat-photo { transition: transform 450ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms ease; }
.mnav__cat-name { transition: color 180ms ease; }
.mnav__all svg { transition: transform 300ms cubic-bezier(.16, 1, .3, 1); }
.mnav__btn { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease; }

@media (hover: hover) {
  .site-header--store .mobile-nav .mnav__moods a:hover .mnav__mood-photo { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(35, 22, 9, .2); }
  .site-header--store .mobile-nav .mnav__moods a:hover .mnav__mood-photo img { transform: scale(1.08); }
  .site-header--store .mobile-nav .mnav__moods a:hover .mnav__mood-name { color: #a8590a; }
  .site-header--store .mobile-nav .mnav__cat:hover .mnav__cat-photo { transform: scale(1.04); box-shadow: 0 14px 26px rgba(35, 22, 9, .24); }
  .site-header--store .mobile-nav .mnav__cat:hover .mnav__cat-name { color: #a8590a; }
  .site-header--store .mobile-nav .mnav__all:hover { color: #a8590a; }
  .site-header--store .mobile-nav .mnav__all:hover svg { transform: translateX(6px); }
  .site-header--store .mobile-nav .mnav__btn:hover { border-color: #1d140b; background: #1d140b; color: #f8f3ea; }
  .site-header--store .mobile-nav .mnav__btn--cart:hover { border-color: #ffa83c; background: #ffa83c; color: #2a1607; }
  .site-header--store .mobile-nav .mnav__info a:hover { color: #a8590a; }
}
/* Touch: a short press-down so every tap feels answered. */
.site-header--store .mobile-nav .mnav__moods a:active .mnav__mood-photo { transform: scale(.94); }
.site-header--store .mobile-nav .mnav__cat:active .mnav__cat-photo { transform: scale(.97); }
.site-header--store .mobile-nav .mnav__btn:active { transform: scale(.97); }

/* Opening: search, moods, rows and buttons rise in one after another. */
.mobile-nav[open] .mnav > * { animation: mnav-item-in 520ms cubic-bezier(.16, 1, .3, 1) both; }
.mobile-nav[open] .mnav > :nth-child(1) { animation-delay: 60ms; }
.mobile-nav[open] .mnav > :nth-child(2) { animation-delay: 110ms; }
.mobile-nav[open] .mnav > :nth-child(3) { animation-delay: 150ms; }
.mobile-nav[open] .mnav > :nth-child(4) { animation-delay: 200ms; }
.mobile-nav[open] .mnav > :nth-child(5) { animation-delay: 250ms; }
.mobile-nav[open] .mnav > :nth-child(6) { animation-delay: 290ms; }
@keyframes mnav-item-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav[open] .mnav > * { animation: none; }
  .mnav__mood-photo, .mnav__mood-photo img, .mnav__cat-photo, .mnav__all svg, .mnav__btn { transition: none; }
}

/* Menu button: two lines slide to the centre first, then rotate into a clean X (and back the same way). */
.site-header--store .mobile-nav summary { position: relative; display: block; }
.site-header--store .mobile-nav summary span {
  position: absolute; left: 50%; width: 24px; height: 1.5px; margin: 0 0 0 -12px; border-radius: 1px;
  transform: none;
  transition: top 160ms ease 160ms, transform 200ms cubic-bezier(.16, 1, .3, 1) 0ms;
}
.site-header--store .mobile-nav summary span:first-child { top: calc(50% - 4.5px); }
.site-header--store .mobile-nav summary span:last-child { top: calc(50% + 3px); }
.site-header--store .mobile-nav[open] summary span { top: calc(50% - .75px); transition: top 160ms ease 0ms, transform 220ms cubic-bezier(.16, 1, .3, 1) 160ms; }
.site-header--store .mobile-nav[open] summary span:first-child { transform: rotate(45deg); }
.site-header--store .mobile-nav[open] summary span:last-child { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .site-header--store .mobile-nav summary span { transition: none; } }

/* Reliability: the menu and its icon change instantly; nothing waits for an animation to become visible. */
.mobile-nav[open] > nav, .mobile-nav[open] .mnav > * { animation: none !important; opacity: 1; transform: none; }
.site-header--store .mobile-nav summary span, .site-header--store .mobile-nav[open] summary span { transition: none !important; }

/* Shop pages give the header a backdrop blur, which makes it the containing block for the fixed menu panel
   (the panel collapsed to 1px). While the menu is open the header drops the blur and turns solid, and the
   panel's height is set explicitly so it fills the screen on every page. */
html.mnav-open .site-header--store { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f8f3ea !important; }
.site-header--store .mobile-nav > nav { height: calc(100dvh - var(--mnav-top, 72px)); bottom: auto; }