/* ---------- Web Interface Guidelines pass ----------
   :where() keeps these at zero specificity so any page rule still wins. */
:where(a,button,summary,label,input,select,textarea){touch-action:manipulation}
:where([id]){scroll-margin-top:calc(var(--header-h) + var(--s3))}
.mobile-nav{overscroll-behavior:contain}
@supports (padding:max(0px)){
  .wrap,.header-inner{
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
  }
  .mobile-nav{
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
    padding-bottom:max(var(--gutter),env(safe-area-inset-bottom));
  }
  .site-footer{padding-bottom:max(var(--s3),env(safe-area-inset-bottom))}
}

/* ---------- WHITE DISH CARDS ----------
   Dishes are transparent cut-outs, so the card returns to MASTER.md's original
   spec: a white card with dark text. Cards sit on the indigo sections, which is
   where the brief's "high contrast sections" actually pays off. */
.dish{background:#FFFFFF;border:1px solid rgba(26,27,46,.10);box-shadow:var(--sh-1)}
.dish:hover{box-shadow:var(--sh-3)}
.dish-figure{
  background:#FFFFFF;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;padding:var(--s2);
}
.dish-figure img{width:100%;height:100%;object-fit:contain}
.dish-name{color:var(--c-primary)}
.dish-desc{color:var(--c-muted)}
.dish-price{color:var(--c-accent-ink)}
.chip{background:#F2EDE6;color:#6B5A4C}
.dish--noimg .dish-body{padding-top:var(--s3)}
/* the hero dial no longer needs a lacquer plate: the dish is a real cut-out */
.dial-centre{
  background:#FFFFFF;border-radius:50%;overflow:hidden;inset:19%;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55);
}
.dial-dish{object-fit:contain;padding:0;filter:none}
.dial-dish[data-kind="plate"]{object-fit:contain;padding:0}
/* about figure: light, so the cut-out reads the same way as the cards */
.about-figure{background:#FFFFFF;border:1px solid rgba(26,27,46,.10)}
.about-figure img{padding:var(--s4);object-fit:contain}

/* ---------- BRAND LOCKUP ----------
   The supplied logo is already the full lockup: the salmon mark plus a white
   "BENTO YUME SUSHI" wordmark. The hand-built text beside it was both redundant
   and truncated the name, so the image now stands alone, and larger. */
.brand img{height:60px;width:auto;object-fit:contain}
.brand{gap:0}
.foot-brand img{height:92px;width:auto;margin-bottom:var(--s3)}
.mobile-nav .brand img{height:56px}
@media (min-width:760px){ .brand img{height:78px} }
@media (min-width:1000px){ .brand img{height:88px} }

/* ---------- OPEN RESTAURANT PICKER MUST NOT BE CLIPPED OR COVERED ----------
   Interior heroes set overflow:hidden to contain their own grain/bloom decoration,
   which also slices the "Velg restaurant" dropdown in half. And the menu (z 60) sat
   under the sticky category bar (z 90), so what survived the clip was painted over.
   :has() raises specificity above the component's own rule, so no !important needed.
   Scoped to the OPEN state: the decoration stays clipped the rest of the time. */
section:has(.picker[open]){overflow:visible;position:relative;z-index:95}
.picker[open]{z-index:95}
.picker[open] .picker-menu{z-index:95}
/* keep the panel inside the viewport on narrow screens */
.picker-menu{max-width:min(320px,calc(100vw - 32px))}
/* town and address are separate lines: both spans were inline, so they rendered
   as one run-on string ("FørdeNaustdalsvegen 1A, 6800 Førde") */
.picker-menu .town{display:block}
.picker-menu .addr{display:block;margin-top:2px}

/* RUNDE 2 (2026-10-14): rettkortene står på marineblått. Sist i arket, fordi «hvite kort»-revisjonen setter #FFFFFF lenger opp. */
.dish-figure{background:#121833}

/* ---------- RUNDE 2b (2026-10-14): kokkeslider på forsiden ---------- */
.kokk-slider{position:relative;margin-top:var(--s4)}
.kokk-track{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px 0 var(--s2);outline-offset:6px;border-radius:24px}
.kokk-track::-webkit-scrollbar{display:none}
.kokk-track:focus-visible{outline:2px solid var(--c-accent)}
/* 88 % wide: the next card peeks in, which is the swipe hint */
.kokk-slide{flex:0 0 88%;scroll-snap-align:start;display:grid;gap:var(--s3);align-content:start;
  background:#fff;border:1px solid var(--c-line);border-radius:24px;padding:var(--s2);box-shadow:var(--sh-1)}
.kokk-fig{margin:0;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--c-bg)}
.kokk-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.kokk-body{display:grid;gap:10px;padding:0 var(--s1) var(--s1)}
.kokk-body p{max-width:52ch}
.kokk-n{font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.18em;color:var(--c-accent-ink);font-variant-numeric:tabular-nums}
@media (min-width:760px){
  .kokk-slide{flex-basis:min(86%,920px);grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s4);align-items:center;padding:var(--s3)}
  .kokk-fig{aspect-ratio:4/5}
  .kokk-body{padding:0 var(--s2) 0 0}
}
.kokk-nav{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.kokk-btn{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--c-line);background:#fff;color:var(--c-primary);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.kokk-btn:hover{background:var(--c-accent-soft);border-color:var(--c-accent)}
.kokk-btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.kokk-btn[disabled]{opacity:.35;cursor:default;transform:none}
.kokk-dots{display:flex;gap:8px;margin-inline:auto}
.kokk-dot{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--c-line);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.kokk-dot[aria-selected="true"]{background:var(--c-accent-ink);transform:scale(1.25)}
.kokk-dot:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.kokk-status{font-size:var(--t-small);color:var(--c-muted);min-width:5ch;text-align:right;font-variant-numeric:tabular-nums}
.kokk-more{display:inline-block;margin-top:var(--s3)}

/* RUNDE 2b: the about figure is a photograph now (was a 286 px cut-out on a white card) */
.about-figure{aspect-ratio:4/3;background:#121833;border:1px solid var(--c-line-dark)}
.about-figure img{object-fit:cover;padding:0}

/* RUNDE 2f (2026-10-14): the tagline moves under a new headline — salmon, small, light */
.hero-sub{margin:var(--s2) 0 0;font-size:clamp(18px,2.4vw,26px);font-weight:300;letter-spacing:.02em;line-height:1.3;color:var(--c-accent)}
.hero .hero-sub + .lead{margin-top:var(--s3)}

/* ---------- RUNDE 2k (2026-10-19): rettene som karusell, bare navn ---------- */
.dish-slider{margin-top:var(--s4)}
.dish-track{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px 0 var(--s2);border-radius:20px;outline-offset:6px}
.dish-track::-webkit-scrollbar{display:none}
.dish-track:focus-visible{outline:2px solid var(--c-accent)}
/* 68 % wide on a phone, a third-and-a-bit on desktop: the next card always peeks in */
.dish-track .dish{flex:0 0 min(68vw,320px);scroll-snap-align:start;height:auto}
@media (min-width:760px){ .dish-track{gap:var(--s3)} .dish-track .dish{flex-basis:calc((100% - 2 * var(--s3)) / 3.25)} }
.dish-track .dish-body{padding:var(--s2) var(--s2) var(--s3);align-items:center;text-align:center}
.dish-track .dish-name{font-size:18px}
.dish-nav .kokk-status{color:rgba(251,247,242,.7)}

/* ---------- RUNDE 2m (2026-10-19): catering-teaser på forsiden ---------- */
.cat-teaser{display:grid;gap:var(--s3);background:#fff;border:1px solid var(--c-line);border-radius:24px;padding:var(--s2);box-shadow:var(--sh-1)}
.cat-teaser-fig{margin:0;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#000}
.cat-teaser-fig img{width:100%;height:100%;object-fit:cover;display:block}
.cat-teaser-body{display:grid;gap:var(--s2);padding:var(--s1) var(--s1) var(--s2);align-content:center;justify-items:start}
.cat-teaser-body .lead{color:var(--c-muted);max-width:44ch;margin:0}
@media (min-width:900px){
  .cat-teaser{grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:var(--s5);padding:var(--s3);align-items:center}
  .cat-teaser-body{padding:0 var(--s2) 0 0}
}

/* ---------- RUNDE 2p (2026-10-20): hero v2 («Sabi»-varianten) på ?hero=v2 ---------- */
:root{--bar-h:0px}
.hero-v2,.hero-bar{display:none}
/* runde 2x: the «Sabi» hero is phones/tablets only — desktop is the v1 hero */
@media (max-width:999px){
body.is-hero-v2{--bar-h:104px}
body.is-hero-v2 .hero-grid{display:none}
body.is-hero-v2 .hero{display:flex;flex-direction:column;min-height:100svh;padding-bottom:calc(var(--s4) + var(--bar-h))}
body.is-hero-v2 .hero-v2{display:grid;gap:var(--s3);justify-items:start;margin-top:auto;position:relative;z-index:1}
body.is-hero-v2 .hero-bg video{object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
body.is-hero-v2 .hero-bg::after{background:linear-gradient(180deg,rgba(14,16,38,.3) 0%,rgba(14,16,38,.12) 35%,rgba(14,16,38,.78) 100%)}
}
.hero-v2-towns{margin:0;font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#FBF7F2;text-shadow:0 1px 12px rgba(14,16,38,.5)}
.hero-v2-title{color:#FBF7F2;text-shadow:0 2px 24px rgba(14,16,38,.45);max-width:10ch}
.hero-arrow{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--c-accent);color:var(--c-deep);box-shadow:var(--sh-2);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.hero-arrow:hover{transform:translateX(4px);box-shadow:var(--sh-3)}
.hero-arrow:focus-visible{outline:2px solid #FBF7F2;outline-offset:3px}
.hero-line{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);color:#FBF7F2;text-decoration:none;font-size:var(--t-lead);line-height:1.4;max-width:30ch;text-shadow:0 1px 12px rgba(14,16,38,.5)}
.hero-line-ico{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-accent);color:var(--c-deep)}
.hero-line:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
/* runde 2q (2026-10-20): on phones the client wants the film and the one line only — the h1 stays for
   assistive tech and search, visually hidden; towns and the big arrow are gone */
@media (max-width:999px){ /* runde 2x: phones/tablets */
  body.is-hero-v2 .hero-v2-towns,body.is-hero-v2 .hero-arrow{display:none}
  body.is-hero-v2 .hero-v2-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}
  body.is-hero-v2 .hero-line{margin-top:0}
}
/* the bar: fixed to the bottom of the phone screen, a row inside the hero on wide screens */
body.is-hero-v2 .hero-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--c-deep);border-top:1px solid var(--c-line-dark)}
.hero-bar-btn{display:grid;justify-items:center;align-content:center;gap:6px;padding:12px 4px;border-radius:18px;border:0;background:transparent;
  color:#FBF7F2;font:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.15;hyphens:manual;text-decoration:none;text-align:center;cursor:pointer;list-style:none;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.hero-bar-btn::-webkit-details-marker{display:none}
.hero-bar-btn:hover{background:rgba(251,247,242,.08)}
.hero-bar-btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.hero-bar-btn--primary{background:var(--c-accent);color:var(--c-deep)}
.hero-bar-btn--primary:hover{background:var(--c-accent);transform:translateY(-2px)}
.hero-bar-ico{width:26px;height:26px}
.hero-bar .picker{position:relative;display:block}
.hero-bar .picker>summary{display:grid;padding:12px 4px;border-radius:18px;box-shadow:none;transform:none;font-size:12px}
.hero-bar .picker>summary:hover{transform:translateY(-2px);box-shadow:none}
.hero-bar .picker-menu{top:auto;bottom:calc(100% + 12px);left:0}
/* runde 2r: compact bar while scrolling down on phones — icons only, labels back on scroll up */
body.is-hero-v2 .hero-bar{z-index:98;transition:padding .25s var(--ease)}
.hero-bar-btn span,.hero-bar .picker>summary span{transition:opacity .2s var(--ease)}
@media (min-width:0){ /* runde 2s: every width */
  .hero-bar.is-compact{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .hero-bar.is-compact .hero-bar-btn,.hero-bar.is-compact .picker>summary{padding:8px 6px;gap:0}
  .hero-bar.is-compact .hero-bar-btn span,.hero-bar.is-compact .picker>summary span{display:none}
  .hero-bar.is-compact .hero-bar-ico{width:24px;height:24px}
}
@media (min-width:1000px){
  /* runde 2x: desktop = the v1 hero — no bar */
  body.is-hero-v2 .hero-bar{display:none}
}

/* ---------- RUNDE 2u (2026-10-22): reel-kort i hero v2 på desktop, hjulet flyttet, sashimi-zoom ---------- */
.menu-head.has-dial{grid-template-columns:minmax(0,1fr);align-items:center}
.menu-head.has-dial .dial{width:min(86vw,420px)}
@media (min-width:900px){
  .menu-head.has-dial{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:var(--s5)}
  .menu-head.has-dial > .btn{grid-column:1;justify-self:start}
  .menu-head.has-dial > .hero-dial-col{grid-column:2;grid-row:1 / span 2}
}