/*
 * Round 5, the mobile menu (29 Oct 2026). Loaded after design.css (Layout::roundStyles). Markup: Layout::header (.md-*), script: site.js initMenu.
 * Nikola: "icons look cheap and AI generated, with those backgrounds and borders too generic". So: no icon tiles, no boxed rows, no pastel chips.
 * Type does the work (display font, three large entries, the rest in a quiet two-column list), hairlines and space instead of borders, one
 * photograph (the season now), one dark action (the cart, pinned where the thumb is), bare fine-line icons only for WhatsApp, e-mail, cart, close.
 * Motion answers the tap: the panel slides in (transform), the backdrop fades (opacity), the entries rise one after another (--i, 60 ms steps); closing
 * is the mirror and quicker; prefers-reduced-motion gets none of it. The older .md-* rules of components.css (section 10) no longer match anything
 * here except .md-panel, .md-backdrop and .md-account (kept on the cart link because the cart badge script and its test look for it).
 */

:root {
  --md-in: .46s;
  --md-out: .3s;
  --md-ease-in: cubic-bezier(.32, .72, 0, 1);       /* the sheet curve: fast start, long settle */
  --md-ease-out: cubic-bezier(.4, 0, .2, 1);
  --md-ink: var(--green-ink, #1d3a2c);
  --md-rule: rgba(43, 30, 21, .15);
  --md-accent: #8c4422;   /* the clay of the soil, a shade deeper than --clay so it keeps 5:1 on the butter blend of the panel */
}

/* ---- the page behind: locked while the menu is open (site.js sets html.md-locked and --md-sbw) ---- */
html.md-locked { overflow: hidden; }
html.md-locked body { padding-right: var(--md-sbw, 0px); }
html.md-locked .cookie-banner { visibility: hidden; }

/* ---- the drawer: hidden until open; visibility waits for the slide-out so closing is seen ---- */
.mobile-drawer { visibility: hidden; transition: visibility 0s linear var(--md-out); }
.mobile-drawer.is-open { visibility: visible; transition-delay: 0s; }
.md-backdrop { background: rgba(31, 24, 17, .5); opacity: 0; transition: opacity var(--md-out) linear; touch-action: none; }
.mobile-drawer.is-open .md-backdrop { opacity: 1; transition-duration: .4s; }

/* ---- the panel ---- */
.md-panel {
  top: 0; right: 0; bottom: auto; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  border-radius: 22px 0 0 22px; touch-action: pan-y; outline: 0;
  background:
    var(--grain),
    radial-gradient(120% 52% at 100% 0%, rgba(207, 224, 189, .72), transparent 64%),
    radial-gradient(120% 46% at 0% 100%, rgba(234, 216, 164, .62), transparent 66%),
    #f4f7f0;
  box-shadow: -30px 0 70px -34px rgba(31, 24, 17, .55);
  transform: translate3d(100%, 0, 0);
  transition: transform var(--md-out) var(--md-ease-out);
}
.mobile-drawer.is-open .md-panel { transform: translate3d(0, 0, 0); transition-duration: var(--md-in); transition-timing-function: var(--md-ease-in); }
.mobile-drawer.is-dragging .md-panel, .mobile-drawer.is-dragging .md-backdrop { transition: none; }
@layer fi-pre {
  .md-panel { width: min(calc(100% - 44px), 440px) !important; overflow: hidden !important; overscroll-behavior: contain; }
}

/* ---- top bar: the wordmark, a bare close icon ---- */
.md-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 0 24px; }
.md-brand { display: block; line-height: 0; }
.md-brand img { display: block; width: 118px; height: auto; }
.md-x {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--md-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; --hi-w: 1.5;
}
.md-x svg { width: 26px; height: 26px; }
.md-x:active, .md-nav a:active, .md-line:active, .md-langs a:active, .md-legal a:active, .md-season:active { opacity: .55; }

/* ---- the scrolling middle ---- */
.md-main {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 24px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  touch-action: pan-y;   /* (a scroll container ends the touch-action of its ancestors: the panel's own pan-y does not reach what is inside it) */
  /* when the list is longer than the window it fades out under the cart instead of being cut off (the 24 px of padding keep a short list whole) */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent);
}
.md-nav { flex: none; }
.md-nav ul { list-style: none; margin: 0; padding: 0; }
.md-nav li { margin: 0; padding: 0; }
.md-nav a { text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* three large entries: the routes a customer buys by */
.md-big a {
  display: block; padding: 6px 0; color: var(--md-ink);
  font: 600 clamp(31px, 9.4vw, 44px) / 1.1 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.028em;
}
/* the quiet list: two columns, the display face a size smaller, one hairline above */
.md-nav .md-small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--md-rule); }
.md-small a {
  display: flex; align-items: center; min-height: 46px; color: var(--ink-2, #232c26);
  font: 500 clamp(17px, 5vw, 22px) / 1.2 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.014em; overflow-wrap: anywhere;
}
/* the page you are on: clay, underlined */
.md-nav a[aria-current="page"] { color: var(--md-accent); text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .2em; text-decoration-skip-ink: auto; }

/* ---- the season now: one photograph, one line, one way in ---- */
.md-season {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; flex: none; min-height: 112px; margin-top: 20px; padding: 14px 16px 13px;
  border-radius: 16px; overflow: hidden; background-color: #2d3a22; background-size: cover; background-position: 50% 55%; color: #fff; text-decoration: none; isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.md-season::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 13, 8, 0) 0, rgba(18, 13, 8, 0.02) 8.33%, rgba(18, 13, 8, 0.06) 16.67%, rgba(18, 13, 8, 0.13) 25%, rgba(18, 13, 8, 0.22) 33.33%, rgba(18, 13, 8, 0.32) 41.67%, rgba(18, 13, 8, 0.43) 50%, rgba(18, 13, 8, 0.54) 58.33%, rgba(18, 13, 8, 0.64) 66.67%, rgba(18, 13, 8, 0.73) 75%, rgba(18, 13, 8, 0.8) 83.33%, rgba(18, 13, 8, 0.84) 91.67%, rgba(18, 13, 8, 0.86) 100%); }   /* white text stays above 7:1 even on the frost photo */
.md-season-title { font: 600 17px / 1.22 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.012em; }
.md-season-cta { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px / 1.3 var(--font-sans), sans-serif; color: rgba(255, 255, 255, .92); }
.md-season-cta svg { flex: none; width: 17px; height: 17px; --hi-w: 1.6; }
.mobile-drawer.is-warm .md-season[data-season="spring"] { background-image: url("../img/photo/menu-season-spring.webp"); }
.mobile-drawer.is-warm .md-season[data-season="summer"] { background-image: url("../img/photo/menu-season-summer.webp"); }
.mobile-drawer.is-warm .md-season[data-season="autumn"] { background-image: url("../img/photo/menu-season-autumn.webp"); }
.mobile-drawer.is-warm .md-season[data-season="winter"] { background-image: url("../img/photo/menu-season-winter.webp"); }

/* ---- the bottom block: contact, languages, legal ---- */
.md-bottom { flex: none; margin-top: auto; padding-top: 22px; }
.md-reach { display: grid; padding-top: 12px; border-top: 1px solid var(--md-rule); }
.md-line {
  display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink-2, #232c26); text-decoration: none; overflow-wrap: anywhere;
  font: 500 15.5px / 1.3 var(--font-sans), sans-serif; -webkit-tap-highlight-color: transparent;
}
.md-line svg { flex: none; width: 21px; height: 21px; color: var(--md-ink); --hi-w: 1.45; }
.md-line > span { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.md-line small { color: var(--ink-3, #3b463f); font-size: 13px; font-weight: 400; }
.md-langs ul { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; list-style: none; }
.md-langs li { margin: 0; padding: 0; }
.md-langs a { display: flex; align-items: center; min-height: 44px; padding: 0 10px 0 0; color: var(--ink-2, #232c26); font: 500 15.5px / 1 var(--font-sans), sans-serif; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.md-langs a[aria-current] { color: var(--md-accent); font-weight: 650; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .28em; }
.md-legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; }
.md-legal a { display: flex; align-items: center; min-height: 44px; color: var(--ink-3, #3b463f); font: 400 13px / 1.2 var(--font-sans), sans-serif; text-decoration: none; }

/* ---- the dock: the cart, always at the bottom, where the thumb rests ---- */
.md-dock { flex: none; padding: 10px 24px max(18px, env(safe-area-inset-bottom)); }
.md-dock .md-cart.md-account {
  display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; height: 56px; margin: 0; padding: 0 22px; border-radius: 999px; background: var(--md-ink); box-shadow: none;
  color: #f4f7f0; font: 600 16.5px / 1 var(--font-sans), sans-serif; text-decoration: none; opacity: 1; transform: none; transition: opacity .15s linear; -webkit-tap-highlight-color: transparent;
}
.md-dock .md-cart:active { opacity: .85; }
.md-cart svg { flex: none; width: 23px; height: 23px; --hi-w: 1.5; }
.md-cart-label { flex: 1; min-width: 0; }
.md-dock .md-cart .badge { position: static; min-width: 0; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--m-butter, #ead8a4); font: 700 17px / 1 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; }
.md-dock .md-cart:focus-visible { outline-color: var(--md-ink); }

/* ---- motion: the entries rise after the panel; closing is quick ---- */
@media (prefers-reduced-motion: no-preference) {
  .md-nav li, .md-season, .md-bottom { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .14s linear, transform .14s linear; }
  .mobile-drawer.is-open .md-nav li, .mobile-drawer.is-open .md-season, .mobile-drawer.is-open .md-bottom {
    opacity: 1; transform: none; transition: opacity .44s var(--md-ease-in), transform .56s var(--md-ease-in); transition-delay: calc(130ms + var(--i, 0) * 60ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer, .md-backdrop, .md-panel, .md-dock .md-cart.md-account { transition: none !important; }
}

/* ---- what a hand sees: pressed states are above; a pointer gets a quiet underline, nothing moves ---- */
@media (hover: hover) and (pointer: fine) {
  .md-nav a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .2em; }
  .md-line:hover span span, .md-langs a:hover, .md-legal a:hover { text-decoration: underline; text-underline-offset: .22em; }
  .md-x { transition: opacity .15s linear; }
  .md-x:hover { opacity: .6; }
  .md-season:hover .md-season-cta { text-decoration: underline; text-underline-offset: .22em; }
}

/* ---- short windows (landscape phones): the panel scrolls, the dock stays ---- */
@media (max-height: 560px) {
  .md-top { padding-top: 6px; }
  .md-big a { padding: 4px 0; }
}