/*
Theme Name: Oshima Sushi
Theme URI: https://sitereboots.com/
Author: Site Reboots
Description: Block theme for Oshima Sushi Japanese Cuisine, Sioux Falls. Sumi ink
  ground, washi panels, and the noren — the split curtain in their own dining
  room — as the structuring component.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: oshima
*/

/* ===========================================================================
   OSHIMA SUSHI — the skin.

   assets/mechanics.css loads first and owns behaviour. Nothing in this file
   repeats it. What is here is colour, type, and the noren.

   THE MOTIF. Their dining room has a navy noren hanging on the back wall —
   the split curtain you push through to come into a Japanese restaurant, with
   a red Daruma printed on it. A noren is a panel with vertical slits cut up
   from its bottom edge. Every section of this site is one: an ink header strip
   carrying the name, a washi body, and vermilion slits at the foot. Their logo
   supplies the second half of the language — a brush ring with the kanji for
   fish — so rules are drawn as tapered brush strokes rather than hairlines.

   DARK SURFACES. There are five, and a rule written for one has to be checked
   against all five or it ships unreadable text on one of them:
       .osh-band--sumi      .osh-band--sumi2    .osh-hero
       .osh-noren__head     .osh-footer
   Vermilion (#E85219) reaches only 4.37 on sumi-2, so it is never text on a
   dark surface; kincha (#D9A441) is the on-dark accent. Add new dark surfaces
   to the grouped list below, not to one selector.
   ======================================================================== */

/* ------------------------------------------------------------- tokens --- */
:root{
  --osh-sumi:#12141B;          /* page ground, header, footer                */
  --osh-sumi-2:#1E2029;        /* raised dark band                           */
  --osh-sumi-3:#2E3240;        /* hairlines on dark                          */
  --osh-washi:#EBE9E2;         /* paper panels                               */
  --osh-washi-2:#DCD8CC;       /* rows inside a panel                        */
  --osh-ink:#1E1A17;           /* headings on paper          14.22 / 12.13   */
  --osh-body:#332F2A;          /* body on paper              10.94 /  9.32   */
  --osh-muted:#625A52;         /* secondary on paper          5.57 /  4.75   */
  --osh-chalk:#EDEAE2;         /* text on sumi               15.30 / 13.50   */
  --osh-chalk-dim:#A5A49A;     /* secondary on sumi           7.34 /  6.47   */
  --osh-shu:#E85219;           /* THEIR vermilion. rules, slits, seal only   */
  --osh-shu-deep:#B0300E;      /* CTA fill, chalk label               5.33   */
  --osh-link:#A83510;          /* inline links on paper       5.43 /  4.63   */
  --osh-kincha:#D9A441;        /* on-dark accent              8.18 /  7.22   */
  --osh-ai:#2E3F6E;            /* indigo, secondary structure 8.42 /  7.18   */
  --osh-rule:rgba(30,26,23,.16);
  --osh-rule-dark:rgba(237,234,226,.17);
  --osh-r:2px;                 /* one radius, everywhere                     */
  --osh-pad:clamp(1.15rem,4.4vw,2rem);

  /* the mechanics.css contract */
  --osh-focus:#D9A441;
  --osh-nav-bg:#12141B;
  --osh-burger:#EDEAE2;
  --osh-header-h:74px;
}

/* An author `display` beats the UA's `[hidden]{display:none}` whatever the
   specificity, so every component here that sets display — the basket button,
   a menu row, a rail link, the checkout form — silently ignored the hidden
   attribute the scripts set on it. The basket button sat on screen showing "0".
   One rule, once, rather than a [hidden] twin for each of them. */
[hidden]{display:none !important}

html{background:var(--osh-sumi)}
body{background:var(--osh-sumi);color:var(--osh-body)}

/* -------------------------------------------------------------- bands --- */
.osh-band{
  padding-block:clamp(2.6rem,6vw,4.6rem);
  padding-inline:var(--osh-pad);
  position:relative;
}
.osh-band--sumi{background:var(--osh-sumi);color:var(--osh-chalk)}
.osh-band--sumi2{background:var(--osh-sumi-2);color:var(--osh-chalk)}
.osh-band--washi{background:var(--osh-washi);color:var(--osh-body)}
.osh-band--washi2{background:var(--osh-washi-2);color:var(--osh-body)}
.osh-band--tight{padding-block:clamp(1.9rem,4vw,2.9rem)}

/* A seam. The gap between two hanging cloths, in their own vermilion. */
.osh-band--seam::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:var(--osh-shu);
}

/* --------------------------------------------------------- typography --- */
h1,h2,h3{color:var(--osh-ink)}
.osh-band--washi h1,.osh-band--washi h2,.osh-band--washi h3,
.osh-band--washi2 h1,.osh-band--washi2 h2,.osh-band--washi2 h3{color:var(--osh-ink)}

/* ── THE FIVE DARK SURFACES ───────────────────────────────────────────────
   These come AFTER the light-band rules above on purpose. A noren head is a
   dark strip that sits INSIDE a light band, so `.osh-band--washi2 h2` (0,2,0)
   and `.osh-noren__head h2` (0,2,0) tie on specificity and the later one wins.
   With the order the other way round, every menu section title on the site
   rendered near-black on near-black and the panels looked unlabelled.

   A new dark surface has to be added to EVERY line of this block.
   ──────────────────────────────────────────────────────────────────────── */
.osh-band--sumi h1,.osh-band--sumi h2,.osh-band--sumi h3,.osh-band--sumi h4,
.osh-band--sumi2 h1,.osh-band--sumi2 h2,.osh-band--sumi2 h3,.osh-band--sumi2 h4,
.osh-hero h1,.osh-hero h2,.osh-hero h3,
.osh-pagehead h1,.osh-pagehead h2,
.osh-noren__head,.osh-noren__head h2,.osh-noren__head h3,.osh-noren__title,
.osh-footer h2,.osh-footer h3,.osh-footer h4{color:var(--osh-chalk)}

.osh-band--sumi p,.osh-band--sumi li,
.osh-band--sumi2 p,.osh-band--sumi2 li,
.osh-hero p,.osh-pagehead p,
.osh-noren__head p,.osh-noren__note,
.osh-footer p,.osh-footer li{color:var(--osh-chalk-dim)}

.osh-band--sumi .osh-lead,.osh-band--sumi2 .osh-lead,.osh-hero .osh-lead{color:var(--osh-chalk)}

.osh-band--sumi a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link):not(.osh-nav__link),
.osh-band--sumi2 a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link):not(.osh-nav__link),
.osh-hero a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link),
.osh-pagehead a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link),
.osh-noren__head a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link),
.osh-footer a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link){color:var(--osh-kincha)}

.osh-lead{
  font-size:clamp(1.1rem,1.9vw,1.28rem);line-height:1.56;
  color:var(--osh-body);max-width:46ch;
}
.osh-prose{max-width:66ch}
.osh-prose p{margin:0 0 1.05em}
.osh-prose > *:last-child{margin-bottom:0}

/* Inline links inside prose are (0,2,0) and beat .osh-btn (0,1,0), so a button
   sitting in a prose block takes the link colour and disappears against its own
   fill. Every descendant link rule in this file carries :not(.osh-btn). */
/* --osh-shu-deep is tuned to carry a WHITE LABEL on a button fill. As text it
   only reaches 3.93 on the kozo band, so inline links get --osh-link, which
   clears 4.5 on both paper tones. Scoped to the band rather than to .osh-prose,
   because a link inside a plain panel is still an inline link. */
.osh-prose a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link),
.osh-band--washi a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link),
.osh-band--washi2 a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link),
.osh-form a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link){
  color:var(--osh-link);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
}
.osh-prose a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link):hover,
.osh-band--washi a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link):hover,
.osh-band--washi2 a:not(.osh-btn):not(.osh-chip):not(.osh-rail__link):hover{text-decoration-thickness:2px}

/* Tabular figures everywhere a price, a time or a phone number lands. There
   are about two hundred prices on this site and they have to line up. */
.osh-price,.osh-hours td,.osh-hours th,.osh-figure__n,.osh-menu__price{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* ------------------------------------------------------------ eyebrow --- */
/* The Japanese word, in the display serif, sentence case, closed by a small
   vermilion seal. Deliberately NOT uppercase and letterspaced. */
.osh-eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--wp--preset--font-family--display);
  font-size:1.0625rem;font-weight:600;font-style:normal;
  letter-spacing:0;color:var(--osh-ai);margin:0 0 .7rem;
}
.osh-eyebrow::after{
  content:"";width:9px;height:9px;flex:0 0 auto;
  background:var(--osh-shu);border-radius:1px;
  transform:rotate(45deg);
}
.osh-band--sumi .osh-eyebrow,.osh-band--sumi2 .osh-eyebrow,
.osh-hero .osh-eyebrow,.osh-footer .osh-eyebrow{color:var(--osh-kincha)}

/* ------------------------------------------------------- brush rules --- */
/* Their logo is a brush ring. A rule here is a stroke that thins out, not a
   1px line: a gradient from solid vermilion to nothing, with a soft tail. */
.osh-brush{
  display:block;height:3px;width:clamp(68px,12vw,108px);border:0;margin:0 0 1.15rem;
  background:linear-gradient(90deg,var(--osh-shu) 0%,var(--osh-shu) 58%,rgba(232,82,25,.35) 82%,rgba(232,82,25,0) 100%);
  border-radius:3px;
}
.osh-brush--ai{background:linear-gradient(90deg,var(--osh-ai) 0%,var(--osh-ai) 58%,rgba(46,63,110,.3) 82%,rgba(46,63,110,0) 100%)}
.osh-brush--kincha{background:linear-gradient(90deg,var(--osh-kincha) 0%,var(--osh-kincha) 58%,rgba(217,164,65,.32) 82%,rgba(217,164,65,0) 100%)}

/* ------------------------------------------------------------ buttons --- */
/* Vermilion fill, CHALK label, 2px radius, no border.
   The agency's button is an orange fill with a DARK label, a 6px radius and a
   2px border, so that is already four differences. The label is chalk rather
   than pure white because four of the five previous builds used pure white and
   it is the cheapest tell left to vary — and because a warm paper label on a
   seal-red fill is what this palette actually wants. 5.33 on the fill, 5.77 on
   the hover. */
.osh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.5rem;
  font-family:var(--wp--preset--font-family--text);
  font-size:.9375rem;font-weight:600;letter-spacing:.015em;
  text-decoration:none;border:0;border-radius:var(--osh-r);cursor:pointer;
  background:var(--osh-shu-deep);color:var(--osh-chalk);
  transition:background .16s ease,transform .16s ease;
}
.osh-btn:hover{background:#95290B;transform:translateY(-1px);color:var(--osh-chalk);text-decoration:none}
.osh-btn:active{transform:none}

/* Secondary: indigo from the noren. Never used for the money action. */
.osh-btn--ai{background:var(--osh-ai);color:var(--osh-chalk)}
.osh-btn--ai:hover{background:#263457;color:var(--osh-chalk)}

/* Ghost, for use on a dark surface. Chalk hairline, chalk label. */
.osh-btn--ghost{background:transparent;color:var(--osh-chalk);box-shadow:inset 0 0 0 1px var(--osh-rule-dark)}
.osh-btn--ghost:hover{background:rgba(237,234,226,.09);color:var(--osh-chalk)}

/* Ghost on paper. */
.osh-btn--line{background:transparent;color:var(--osh-ink);box-shadow:inset 0 0 0 1px rgba(30,26,23,.3)}
.osh-btn--line:hover{background:rgba(30,26,23,.06);color:var(--osh-ink)}

.osh-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* -------------------------------------------------------------- noren --- */
/* THE component. An ink header strip, a washi body, and vertical slits cut up
   from the bottom edge in their own vermilion. Used for every menu section,
   and for the hero photograph. */
.osh-noren{
  background:var(--osh-washi);border-radius:var(--osh-r);
  overflow:hidden;position:relative;
  padding-bottom:14px;                    /* room for the slits             */
}
.osh-noren__head{
  background:var(--osh-sumi);color:var(--osh-chalk);
  padding:.95rem var(--osh-pad);
  display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;
  border-bottom:3px solid var(--osh-shu);
}
.osh-noren__title{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.2rem;font-weight:700;line-height:1.2;margin:0;color:var(--osh-chalk);
}
.osh-noren__note{
  font-size:.875rem;color:var(--osh-chalk-dim);margin:0;
  font-family:var(--wp--preset--font-family--text);
}
.osh-noren__body{padding:1.35rem var(--osh-pad) 1.5rem}

/* The slits. Five gaps cut up from the foot of the cloth, which is what makes
   a noren a noren. repeating-linear-gradient draws the cloth, not the gaps. */
.osh-noren::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:
    repeating-linear-gradient(90deg,
      var(--osh-shu) 0 calc(20% - 5px),
      transparent calc(20% - 5px) 20%);
  opacity:.85;
}

/* ---------------------------------------------------------- menu rows --- */
.osh-menu{list-style:none;margin:0;padding:0}
.osh-menu__item{
  display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--osh-rule);
}
.osh-menu__item:last-child{border-bottom:0;padding-bottom:0}
.osh-menu__name{font-weight:600;color:var(--osh-ink);font-size:1rem;line-height:1.35}
.osh-menu__price{font-weight:600;color:var(--osh-link);font-size:1rem;white-space:nowrap}
.osh-menu__desc{
  grid-column:1 / -1;margin:.22rem 0 0;font-size:.9375rem;line-height:1.5;
  color:var(--osh-muted);max-width:62ch;
}
.osh-menu__tag{
  display:inline-block;margin-left:.45rem;vertical-align:.08em;
  font-size:.6875rem;font-weight:600;letter-spacing:.03em;
  padding:.16rem .42rem;border-radius:var(--osh-r);
  background:var(--osh-ai);color:var(--osh-chalk);
}
/* Two columns of rows once there is room for them. */
@media (min-width:46rem){
  .osh-menu--split{columns:2;column-gap:2.75rem}
  .osh-menu--split .osh-menu__item{break-inside:avoid}
}

/* ====================================================== the menu app ===== */
/* 218 dishes is unreadable as one scroll. The tools strip, the section rail
   and the collapse toggles are what make it usable; the markup comes from
   040-oshima-ordering.php. */

.osh-menuapp__tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;
  margin:0 0 1.75rem;
}
.osh-search{position:relative;flex:1 1 20rem;min-width:0}
.osh-search__i{
  position:absolute;left:.9rem;top:50%;transform:translateY(-50%);
  color:var(--osh-muted);pointer-events:none;
}
.osh-search__in{
  width:100%;min-height:52px;padding:.8rem 2.6rem;
  font-family:inherit;font-size:1rem;color:var(--osh-ink);
  background:#fff;border:1px solid rgba(30,26,23,.32);border-radius:var(--osh-r);
  appearance:none;-webkit-appearance:none;
}
.osh-search__in::-webkit-search-cancel-button{display:none}
.osh-search__in:focus-visible{outline:3px solid var(--osh-focus);outline-offset:2px;border-color:var(--osh-ink)}
.osh-search__x{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;background:none;cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--osh-muted);border-radius:var(--osh-r);
}
.osh-search__x:hover{color:var(--osh-ink);background:rgba(30,26,23,.07)}

.osh-filters{display:flex;flex-wrap:wrap;gap:.5rem}
.osh-fchip{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.4rem .9rem;border-radius:var(--osh-r);cursor:pointer;
  font-family:inherit;font-size:.875rem;font-weight:600;
  background:transparent;color:var(--osh-ink);
  border:1px solid rgba(30,26,23,.28);
}
.osh-fchip:hover{background:rgba(30,26,23,.06)}
.osh-fchip.is-on{background:var(--osh-ai);color:var(--osh-chalk);border-color:var(--osh-ai)}
.osh-menuapp__count{
  flex:0 0 auto;margin:0;font-size:.875rem;font-weight:600;color:var(--osh-muted);
}

.osh-menuapp__body{display:grid;gap:1.5rem}
.osh-sections{display:grid;gap:1.5rem;min-width:0}

/* ----- the section rail ----- */
/* On a phone it is a horizontally scrolling strip above the menu. From 60rem
   it becomes a column that sticks beside it. */
.osh-rail{min-width:0}
.osh-rail__h{
  display:none;margin:0 0 .6rem;font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--osh-muted);
}
.osh-rail__list{
  display:flex;gap:.5rem;margin:0;padding:0 0 .5rem;list-style:none;
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.osh-rail__link{
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  min-height:44px;padding:.4rem .8rem;border-radius:var(--osh-r);
  font-size:.875rem;font-weight:500;text-decoration:none;
  color:var(--osh-ink);background:rgba(30,26,23,.05);
}
.osh-rail__link:hover{background:rgba(30,26,23,.1);color:var(--osh-ink)}
.osh-rail__link.is-here{background:var(--osh-sumi);color:var(--osh-chalk)}
.osh-rail__n{
  font-size:.75rem;font-variant-numeric:tabular-nums;opacity:.72;
}
/* Visible at every width. It was desktop-only once, which took the one control
   that fixes a long menu away from the phone, where the menu is longest. */
.osh-rail__all{
  display:block;margin:0 0 .4rem;padding:.4rem .2rem;border:0;background:none;
  font-family:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  color:var(--osh-link);text-decoration:underline;text-underline-offset:3px;
  min-height:36px;
}

@media (min-width:60rem){
  .osh-menuapp__body{grid-template-columns:15rem minmax(0,1fr);gap:2.5rem}
  .osh-rail__h{display:block}
  .osh-rail__list{display:block;overflow:visible;padding:0}
  .osh-rail__list li + li{margin-top:.15rem}
  .osh-rail__link{display:flex;justify-content:space-between;width:100%}
  .osh-rail__all{margin-top:.9rem}
  .osh-rail__inner{
    position:sticky;
    top:calc(var(--osh-stick-h,var(--osh-header-h)) + 1.25rem);
  }
}

/* ----- collapsing a section -----
   Each section is a <details> and the head is its <summary>, so this is the
   browser's own disclosure widget wearing the noren. The slits stay on when a
   section is shut: the curtain is still hanging, it is just closed. */
details.osh-noren > summary.osh-noren__head{
  display:grid;grid-template-columns:1fr auto auto;gap:.2rem .85rem;align-items:center;
  padding:.95rem var(--osh-pad);cursor:pointer;list-style:none;
  background:var(--osh-sumi);color:var(--osh-chalk);
  border-bottom:3px solid var(--osh-shu);
}
details.osh-noren > summary.osh-noren__head::-webkit-details-marker{display:none}
details.osh-noren > summary.osh-noren__head::marker{content:""}
details.osh-noren > summary.osh-noren__head:hover{background:#191C25}
.osh-noren__head .osh-noren__title{grid-column:1;margin:0}
.osh-noren__n{
  grid-column:2;font-size:.8125rem;font-weight:600;color:var(--osh-chalk-dim);
  font-variant-numeric:tabular-nums;
}
.osh-noren__head .osh-noren__note{grid-column:1 / -1;grid-row:2}
.osh-noren__chev{
  grid-column:3;grid-row:1;display:inline-flex;align-items:center;
  color:var(--osh-chalk-dim);transition:transform .18s ease;
}
details.osh-noren:not([open]) .osh-noren__chev{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.osh-noren__chev{transition:none}}

/* The phone has no room for a sticky sidebar, so the section strip pins under
   the header instead and stays reachable the whole way down. It is kept to ONE
   row: the strip scrolls sideways and the expand control sits beside it, which
   on a 844px screen is the difference between losing 70px and losing 130px. */
@media (max-width:59.9375rem){
  .osh-rail{
    position:sticky;z-index:60;
    top:calc(var(--osh-stick-h,var(--osh-header-h)) - 1px);
    margin-inline:calc(var(--osh-pad) * -1);
    padding:.5rem var(--osh-pad);
    background:var(--osh-washi-2);
    box-shadow:0 6px 14px -8px rgba(18,20,27,.5);
  }
  .osh-rail__inner{display:flex;align-items:center;gap:.75rem}
  .osh-rail__list{flex:1 1 auto;min-width:0;padding:0;margin:0}
  .osh-rail__all{flex:0 0 auto;margin:0;padding:.4rem 0;white-space:nowrap;font-size:.75rem}

  /* A shut section should show enough of its note to know what it is, not six
     lines of it. The hoisted bento description is 90 words on its own. */
  details.osh-noren:not([open]) .osh-noren__note{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}

.osh-noresults{
  padding:2.5rem var(--osh-pad);text-align:center;color:var(--osh-muted);
  background:var(--osh-washi);border-radius:var(--osh-r);margin:0;
}
.osh-linkbtn{
  border:0;background:none;padding:0;font:inherit;cursor:pointer;
  color:var(--osh-link);text-decoration:underline;text-underline-offset:3px;
}

/* ----- the Add button on a row ----- */
.osh-menu__item{position:relative}
/* On its own grid row the Add button cost a line of height on all 194 rows.
   It belongs beside the price. */
.osh-menu__item{grid-template-columns:1fr auto auto}
.osh-menu__name{grid-column:1}
.osh-menu__price{grid-column:2}
.osh-menu__desc{grid-column:1 / -1}
.osh-add{
  grid-column:3;grid-row:1;justify-self:end;align-self:center;
  min-height:36px;margin-left:.3rem;padding:.3rem .8rem;
  font-family:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  background:transparent;color:var(--osh-link);
  border:1px solid rgba(168,53,16,.45);border-radius:var(--osh-r);
  transition:background-color .14s ease,border-color .14s ease;
}
.osh-add:hover{background:var(--osh-shu-deep);color:var(--osh-chalk);border-color:var(--osh-shu-deep)}
.osh-add.is-in,.osh-add.is-just{transition:none}
.osh-add.is-in{background:var(--osh-sumi);color:var(--osh-chalk);border-color:var(--osh-sumi)}
.osh-add.is-just{background:var(--osh-shu-deep);color:var(--osh-chalk);border-color:var(--osh-shu-deep)}
.osh-menu__tag--veg{background:#2F5D33}

/* ========================================================== the basket === */

.osh-cartbtn{
  position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  z-index:97;display:inline-flex;align-items:center;gap:.5rem;
  min-height:52px;padding:.7rem 1.1rem;border:0;border-radius:var(--osh-r);cursor:pointer;
  font-family:inherit;font-size:.9375rem;font-weight:600;
  background:var(--osh-shu-deep);color:var(--osh-chalk);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.osh-cartbtn:hover{background:#95290B}
/* Back-to-top is bottom-right too, and the quick action bar owns the foot of a
   phone screen. Step the basket button over both. */
.osh-top{right:1rem}
body:has(.osh-cartbtn:not([hidden])) .osh-top{bottom:calc(1rem + 52px + .75rem + env(safe-area-inset-bottom,0px))}
/* On a phone the quick action bar is already pinned across the foot of the
   screen. A floating basket button on top of it made back-to-top, the basket
   and a two-pill bar into three stacked controls, with "Order pickup" sitting
   beside a basket that meant the same thing. The bar carries the basket on a
   phone and this goes away. */
@media (max-width:52rem){
  .osh-cartbtn{display:none !important}
}

body.osh-locked{overflow:hidden}
.osh-cart{position:fixed;inset:0;z-index:120}
.osh-cart__scrim{position:absolute;inset:0;background:rgba(10,11,15,.62)}
.osh-cart__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(27rem,100%);
  display:flex;flex-direction:column;
  background:var(--osh-washi);box-shadow:-12px 0 40px rgba(0,0,0,.4);
}
.osh-cart__head{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem var(--osh-pad);background:var(--osh-sumi);
  border-bottom:3px solid var(--osh-shu);
}
.osh-cart__head h2{
  margin:0;flex:1 1 auto;color:var(--osh-chalk);
  font-family:var(--wp--preset--font-family--display);font-size:1.2rem;font-weight:700;
}
.osh-cart__x{
  width:44px;height:44px;flex:0 0 auto;border:0;background:none;cursor:pointer;
  font-size:1.9rem;line-height:1;color:var(--osh-chalk);border-radius:var(--osh-r);
}
.osh-cart__x:hover{background:rgba(237,234,226,.12)}
.osh-cart__body{flex:1 1 auto;overflow-y:auto;padding:1rem var(--osh-pad);-webkit-overflow-scrolling:touch}
.osh-cart__empty{color:var(--osh-muted);margin:1rem 0}
.osh-cart__foot{
  flex:0 0 auto;padding:1.1rem var(--osh-pad) calc(1.1rem + env(safe-area-inset-bottom,0px));
  background:var(--osh-washi-2);border-top:1px solid var(--osh-rule);
}
.osh-cart__go{width:100%;margin-top:.9rem}
.osh-cart__fine{font-size:.8125rem;color:var(--osh-muted);margin:.7rem 0 0;line-height:1.5}

.osh-line,.osh-cart__body ul{list-style:none}
.osh-cart__body ul,.osh-review{margin:0;padding:0;list-style:none}
.osh-line{
  display:grid;grid-template-columns:1fr auto;gap:.3rem .85rem;align-items:center;
  padding:.7rem 0;border-bottom:1px solid var(--osh-rule);
}
.osh-line:last-child{border-bottom:0}
.osh-line__n{font-weight:600;color:var(--osh-ink);font-size:.9375rem;line-height:1.35}
.osh-line__p{font-weight:600;color:var(--osh-link);font-variant-numeric:tabular-nums;white-space:nowrap}
.osh-line__q{grid-column:1;color:var(--osh-muted);font-size:.875rem;font-variant-numeric:tabular-nums}
.osh-qty{grid-column:1;display:inline-flex;align-items:center;gap:.2rem}
.osh-qty__b{
  width:38px;height:38px;border:1px solid rgba(30,26,23,.28);border-radius:var(--osh-r);
  background:transparent;color:var(--osh-ink);font:inherit;font-size:1.1rem;line-height:1;cursor:pointer;
}
.osh-qty__b:hover{background:rgba(30,26,23,.08)}
.osh-qty__n{min-width:2.1rem;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

.osh-cart__tot{
  display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;margin:0;
  font-size:.9375rem;
}
.osh-cart__tot dt{color:var(--osh-muted)}
.osh-cart__tot dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--osh-body)}
.osh-cart__tot .is-total{
  font-weight:700;color:var(--osh-ink);font-size:1.0625rem;
  padding-top:.5rem;border-top:1px solid var(--osh-rule);
}

/* ======================================================== the checkout === */

.osh-checkout{display:grid;gap:2rem}
@media (min-width:56rem){
  .osh-checkout__form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;align-items:start}
}
.osh-checkout__review,.osh-checkout__who,.osh-checkout__empty,.osh-placed{
  background:var(--osh-washi);border-radius:var(--osh-r);padding:1.5rem var(--osh-pad) 1.6rem;
}
.osh-checkout__review h2,.osh-checkout__who h2,.osh-checkout__empty h2,.osh-placed h2{margin:0 0 .3rem}
.osh-checkout__who{display:grid;gap:1rem}
.osh-checkout__who .osh-field-row,.osh-checkout__who .osh-field{margin:0}
.osh-review{margin:1.2rem 0}
.osh-check{
  display:flex;align-items:center;gap:.65rem;font-size:.9375rem;
  font-weight:500;color:var(--osh-body);cursor:pointer;min-height:44px;
}
.osh-check input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--osh-shu-deep)}
.osh-placed .osh-lead{margin:.9rem 0 1rem}

/* ------------------------------------------------------------- chips ---- */
/* Jump links. A long menu page is 4,000px of list without them. */
.osh-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none}
.osh-chip{
  display:inline-flex;align-items:center;min-height:40px;
  padding:.4rem .85rem;border-radius:var(--osh-r);
  font-size:.875rem;font-weight:500;text-decoration:none;
  background:rgba(237,234,226,.08);color:var(--osh-chalk);
  box-shadow:inset 0 0 0 1px var(--osh-rule-dark);
}
.osh-chip:hover{background:rgba(237,234,226,.16);color:var(--osh-chalk)}
.osh-band--washi .osh-chip,.osh-band--washi2 .osh-chip{
  background:rgba(30,26,23,.05);color:var(--osh-ink);box-shadow:inset 0 0 0 1px var(--osh-rule);
}
.osh-band--washi .osh-chip:hover,.osh-band--washi2 .osh-chip:hover{background:rgba(30,26,23,.1)}

/* The sticky header would otherwise land on top of the section a chip jumps
   to. mechanics.css publishes the measured height. */
[id]{scroll-margin-top:calc(var(--osh-stick-h,var(--osh-header-h)) + 1.5rem)}

/* --------------------------------------------------------------- grid --- */
.osh-grid{display:grid;gap:1.25rem}
@media (min-width:44rem){.osh-grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:52rem){.osh-grid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:60rem){.osh-grid--4{grid-template-columns:repeat(4,1fr)}}

/* A plain tinted panel, for things that are not a menu section. No border, no
   shadow; the structure is the fill and the brush rule. */
.osh-panel{
  background:var(--osh-washi);border-radius:var(--osh-r);
  padding:1.5rem var(--osh-pad);
}
.osh-panel h3{margin:0 0 .5rem}
.osh-panel p{margin:0;color:var(--osh-muted);font-size:.9688rem;line-height:1.56}
.osh-band--washi .osh-panel{background:var(--osh-washi-2)}
.osh-band--sumi .osh-panel,.osh-band--sumi2 .osh-panel{
  background:rgba(237,234,226,.05);box-shadow:inset 0 0 0 1px var(--osh-rule-dark);
}
.osh-band--sumi .osh-panel h3,.osh-band--sumi2 .osh-panel h3{color:var(--osh-chalk)}
.osh-band--sumi .osh-panel p,.osh-band--sumi2 .osh-panel p{color:var(--osh-chalk-dim)}

/* ------------------------------------------------------------ figures --- */
.osh-figures{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));margin:0;padding:0;list-style:none}
/* In a two-column split the figures get about half the width, where auto-fit
   lands on three across and one orphan underneath. Two by two reads as a
   decision rather than a wrap. */
@media (min-width:52rem){.osh-split .osh-figures{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.25rem}}
.osh-figure__n{
  display:block;font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.9rem,4.2vw,2.5rem);font-weight:700;line-height:1;
  color:var(--osh-kincha);
}
.osh-figure__l{display:block;margin-top:.4rem;font-size:.875rem;line-height:1.4;color:var(--osh-chalk-dim)}
.osh-band--washi .osh-figure__n,.osh-band--washi2 .osh-figure__n{color:var(--osh-link)}
.osh-band--washi .osh-figure__l,.osh-band--washi2 .osh-figure__l{color:var(--osh-muted)}

/* --------------------------------------------------------------- hero --- */
/* Sumi ground, the brush mark ghosted in behind the headline, and the
   photograph HANGING as a noren beside it. Not a full-bleed photo under a
   gradient, and not a split colour panel. */
.osh-hero{
  background:var(--osh-sumi);color:var(--osh-chalk);
  padding:clamp(2.4rem,6vw,4.4rem) var(--osh-pad) clamp(2.6rem,6vw,4.6rem);
  position:relative;overflow:hidden;
}
.osh-hero::before{                      /* the ring, ghosted               */
  content:"";position:absolute;right:-6%;top:-18%;
  width:min(46rem,86vw);aspect-ratio:1;
  background:url("/wp-content/themes/oshima/assets/img/logo.png") no-repeat center/contain;
  opacity:.07;pointer-events:none;
}
.osh-hero__inner{
  position:relative;max-width:84rem;margin:0 auto;
  display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center;
}
@media (min-width:56rem){
  .osh-hero__inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
}
.osh-hero h1{margin:0 0 1rem;color:var(--osh-chalk)}
.osh-hero__sub{font-size:clamp(1.08rem,2vw,1.25rem);line-height:1.55;color:var(--osh-chalk);max-width:44ch;margin:0}

/* The hero photograph, hung. Same slits as a menu panel. */
.osh-hero__noren{position:relative;padding-bottom:16px;border-radius:var(--osh-r);}
.osh-hero__noren img{
  display:block;width:100%;height:auto;border-radius:var(--osh-r) var(--osh-r) 0 0;
  aspect-ratio:9/11;object-fit:cover;
}
.osh-hero__noren::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:16px;
  background:repeating-linear-gradient(90deg,
    var(--osh-shu) 0 calc(16.6667% - 5px),
    transparent calc(16.6667% - 5px) 16.6667%);
}
/* A caption strip across the foot of the cloth, where a noren carries the shop
   name. */
.osh-hero__rail{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.6rem;padding:0;list-style:none;
  font-size:.9375rem;color:var(--osh-chalk-dim);
}
.osh-hero__rail li{display:flex;align-items:center;gap:.5rem}
.osh-hero__rail li::before{content:"";width:7px;height:7px;background:var(--osh-shu);transform:rotate(45deg);border-radius:1px;flex:0 0 auto}

/* ---------------------------------------------------------- page head --- */
.osh-pagehead{
  background:var(--osh-sumi-2);color:var(--osh-chalk);
  padding:clamp(2.2rem,5vw,3.4rem) var(--osh-pad) clamp(2rem,4.5vw,3rem);
  position:relative;
}
.osh-pagehead::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--osh-shu)}
.osh-pagehead h1{margin:0 0 .75rem;color:var(--osh-chalk)}
.osh-pagehead p{margin:0;max-width:56ch;color:var(--osh-chalk-dim);font-size:clamp(1rem,1.7vw,1.1rem);line-height:1.6}

/* ------------------------------------------------------------- header --- */
.osh-header{background:var(--osh-sumi);border-bottom:1px solid var(--osh-shu)}
.osh-headbar{max-width:84rem;margin:0 auto;padding:.7rem var(--osh-pad)}
.osh-brand{gap:.7rem}
.osh-brand img{display:block;height:46px;width:auto}
.osh-brand__txt{display:flex;flex-direction:column;line-height:1.05}
.osh-brand__n{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.18rem;font-weight:700;color:var(--osh-chalk);letter-spacing:-.005em;
}
.osh-brand__s{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--osh-kincha);margin-top:.18rem}

.osh-nav__link{
  color:var(--osh-chalk);text-decoration:none;font-size:.9375rem;font-weight:500;
}
.osh-nav__link:hover{color:var(--osh-kincha)}
.osh-nav__link[aria-current="page"]{color:var(--osh-kincha)}

/* DESKTOP NAVIGATION ONLY. An unscoped display rule here would override the
   mobile panel in mechanics.css at every width, because a media query adds no
   specificity and this file loads second. */
@media (min-width:52.0625rem){
  .osh-header .osh-nav__inner{display:flex;align-items:center;gap:1.35rem}
  .osh-header .osh-nav__link{padding-block:.5rem}
  .osh-header .osh-nav__foot{display:none}
}
/* The mobile panel. */
@media (max-width:52rem){
  .osh-header .osh-nav{background:var(--osh-sumi)}
  .osh-header .osh-nav__link{
    font-size:1.1rem;font-weight:500;
    border-bottom:1px solid var(--osh-rule-dark);
  }
  .osh-header .osh-nav__foot{border-top:3px solid var(--osh-shu);margin-top:.5rem}
  .osh-header .osh-nav__foot .osh-btn{width:100%;margin-bottom:.6rem}
  .osh-header .osh-nav__foot p{color:var(--osh-chalk-dim);font-size:.9375rem;margin:.9rem 0 0}
}
.osh-header .osh-btn{min-height:44px;padding:.55rem 1.05rem;font-size:.875rem}

/* --------------------------------------------------------- action bar --- */
.osh-ab{
  border-radius:var(--osh-r);font-size:.9375rem;font-weight:600;
  background:var(--osh-shu-deep);color:var(--osh-chalk);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.osh-ab--ai{background:var(--osh-ai);color:var(--osh-chalk)}
.osh-top{
  border:0;border-radius:var(--osh-r);
  background:var(--osh-sumi-2);color:var(--osh-chalk);
  box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 0 0 1px var(--osh-rule-dark);
}

/* ------------------------------------------------------------- footer --- */
.osh-footer{background:var(--osh-sumi);color:var(--osh-chalk-dim);border-top:3px solid var(--osh-shu)}
.osh-footer__inner{
  max-width:84rem;margin:0 auto;padding:clamp(2.2rem,5vw,3.2rem) var(--osh-pad) 1.5rem;
  display:grid;gap:2rem;
}
@media (min-width:52rem){.osh-footer__inner{grid-template-columns:1.25fr 1fr 1fr 1.1fr}}
.osh-footer h4{
  font-family:var(--wp--preset--font-family--text);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--osh-kincha);margin:0 0 .85rem;font-weight:600;
}
.osh-footer ul{list-style:none;margin:0;padding:0}
.osh-footer ul a{color:var(--osh-chalk-dim);text-decoration:none;font-size:.9375rem}
.osh-footer ul a:hover{color:var(--osh-chalk)}
.osh-footer__mark img{height:52px;width:auto;display:block;margin-bottom:.9rem}
.osh-footer__note{font-size:.9375rem;line-height:1.6;color:var(--osh-chalk-dim);margin:0;max-width:34ch}
.osh-footer__bar{
  max-width:84rem;margin:0 auto;padding:1.1rem var(--osh-pad) 1.6rem;
  border-top:1px solid var(--osh-rule-dark);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.8125rem;color:var(--osh-chalk-dim);
}
@media (max-width:52rem){
  /* the quick action bar sits over the foot of the page */
  .osh-footer__bar{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}
}

/* -------------------------------------------------------------- hours --- */
.osh-hours{width:100%;border-collapse:collapse;font-size:.9375rem}
.osh-hours th,.osh-hours td{text-align:left;padding:.5rem 0;border-bottom:1px solid var(--osh-rule);vertical-align:top}
.osh-hours tr:last-child th,.osh-hours tr:last-child td{border-bottom:0}
.osh-hours th{font-weight:600;color:var(--osh-ink);width:9.5rem}
.osh-hours td{color:var(--osh-body);text-align:right;font-variant-numeric:tabular-nums}
.osh-hours .is-closed td{color:var(--osh-muted)}
.osh-band--sumi .osh-hours th,.osh-band--sumi2 .osh-hours th,.osh-footer .osh-hours th{color:var(--osh-chalk);border-color:var(--osh-rule-dark)}
.osh-band--sumi .osh-hours td,.osh-band--sumi2 .osh-hours td,.osh-footer .osh-hours td{color:var(--osh-chalk-dim);border-color:var(--osh-rule-dark)}

/* --------------------------------------------------------------- form --- */
/* The markup comes from 010-oshima-enquiries.php, which is identical on every
   build, so these class names are fixed and the skin has to meet them. */
.osh-form{background:var(--osh-washi);border-radius:var(--osh-r);padding:1.6rem var(--osh-pad) 1.75rem}
.osh-form h3{margin:0 0 .6rem}
.osh-form form{display:grid;gap:1rem;margin-top:1.4rem}
.osh-form__intro{margin:0;color:var(--osh-body);font-size:.9688rem;line-height:1.6;max-width:58ch}
.osh-form__fine,.osh-checkout .osh-form__fine{font-size:.8125rem;color:var(--osh-muted);margin:.35rem 0 0;line-height:1.5}
.osh-field{display:grid;gap:.4rem}
/* A row where one field has a hint and the next does not will misalign its
   inputs unless the items are bottom-aligned. */
.osh-field-row{display:grid;gap:1rem;align-items:end}
@media (min-width:40rem){.osh-field-row{grid-template-columns:1fr 1fr}}
.osh-form label,.osh-checkout__who label:not(.osh-check){
  display:grid;gap:.15rem;font-size:.875rem;font-weight:600;color:var(--osh-ink);
}
.osh-label{font-size:.875rem;font-weight:600;color:var(--osh-ink)}
.osh-hint{font-size:.8125rem;color:var(--osh-muted);font-weight:400}
.osh-submit{width:100%;justify-self:start}
@media (min-width:40rem){.osh-submit{width:auto}}
/* Off-screen rather than display:none, so a bot still fills it in. */
.osh-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The plugin emits BARE controls — `<input type="text" id="osh-name" …>` with
   no class on them — so these are matched by element, not by a class. A rule
   written only for `.osh-input` matched nothing and every field rendered at the
   browser's default 32px. */
/* BOTH forms. The enquiry plugin's wrapper is .osh-form and the checkout's is
   .osh-checkout, and scoping these to .osh-form alone shipped the whole
   checkout — name, phone, collection time, notes, the checkbox — as unstyled
   browser defaults on a page whose entire job is taking an order. */
.osh-form input[type="text"],.osh-form input[type="tel"],
.osh-form input[type="email"],.osh-form input[type="date"],
.osh-form select,.osh-form textarea,
.osh-checkout input[type="text"],.osh-checkout input[type="tel"],
.osh-checkout input[type="email"],.osh-checkout input[type="date"],
.osh-checkout select,.osh-checkout textarea,
.osh-input,.osh-textarea,.osh-select{
  width:100%;min-height:52px;padding:.8rem .9rem;
  font-family:inherit;font-size:1rem;line-height:1.4;color:var(--osh-ink);
  background:#fff;border:1px solid rgba(30,26,23,.32);border-radius:var(--osh-r);
  appearance:none;-webkit-appearance:none;
}
.osh-form textarea,.osh-checkout textarea,.osh-textarea{min-height:9rem;resize:vertical;line-height:1.55}
/* A select with appearance:none loses its arrow, so draw one back on. */
.osh-form select,.osh-checkout select,.osh-select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1A17' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:18px;
  padding-right:2.6rem;
}
.osh-form input:focus-visible,.osh-form select:focus-visible,.osh-form textarea:focus-visible,
.osh-checkout input:focus-visible,.osh-checkout select:focus-visible,.osh-checkout textarea:focus-visible,
.osh-input:focus-visible,.osh-textarea:focus-visible,.osh-select:focus-visible{
  outline:3px solid var(--osh-focus);outline-offset:2px;border-color:var(--osh-ink);
}
.osh-form input::placeholder,.osh-form textarea::placeholder,
.osh-checkout input::placeholder,.osh-checkout textarea::placeholder{color:var(--osh-muted)}

/* ---------------------------------------------------------- photo band -- */
/* A page that should close dark closes on a PHOTOGRAPH, not a dark band — two
   dark slabs in a row fuse with the footer and the heading reads as part of it. */
.osh-photoband{
  position:relative;padding:clamp(3rem,7vw,5rem) var(--osh-pad);
  background:var(--osh-sumi);overflow:hidden;color:var(--osh-chalk);
}
.osh-photoband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.osh-photoband::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,20,27,.93) 0%,rgba(18,20,27,.78) 46%,rgba(18,20,27,.4) 100%);
}
.osh-photoband__inner{position:relative;z-index:1;max-width:84rem;margin:0 auto}
.osh-photoband h2{color:var(--osh-chalk);margin:0 0 .8rem}
.osh-photoband p{color:var(--osh-chalk);max-width:46ch;margin:0}

/* --------------------------------------------------------------- misc --- */
.osh-media img{display:block;width:100%;height:auto;border-radius:var(--osh-r)}
.osh-split{display:grid;gap:clamp(1.6rem,4vw,2.8rem);align-items:center}
/* A photograph next to a paragraph wants centring. A map next to a seven-row
   table does not: centring floats it halfway down the column. */
.osh-split--top{align-items:start}
@media (min-width:52rem){
  .osh-split{grid-template-columns:1fr 1fr}
  .osh-split--wide{grid-template-columns:1.25fr .75fr}
}
.osh-inner{max-width:84rem;margin:0 auto}
.osh-map{
  width:100%;aspect-ratio:16/10;border:0;display:block;border-radius:var(--osh-r);
  background:var(--osh-washi-2);
}
.osh-note{
  font-size:.875rem;line-height:1.55;color:var(--osh-muted);
  border-left:3px solid var(--osh-shu);padding-left:.9rem;margin:1.25rem 0 0;max-width:56ch;
}
.osh-band--sumi .osh-note,.osh-band--sumi2 .osh-note,.osh-hero .osh-note{color:var(--osh-chalk-dim)}
.osh-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--osh-shu-deep);color:var(--osh-chalk);padding:.8rem 1.1rem;border-radius:var(--osh-r);
}
.osh-skip:focus{left:.75rem;top:.75rem}

/* The enquiry plugin emits its confirmation as `class="osh-note osh-note--ok"`.
   .osh-note is defined above with a brush rule down its left edge, which is
   wrong for a status message, so these sit at the end of the file and are
   written as (0,2,0) so the dark-surface .osh-note override cannot take them
   back on a band that happens to be dark. */
.osh-note.osh-note--ok,.osh-note.osh-note--err{
  border-left:0;padding:.9rem 1rem;border-radius:var(--osh-r);
  font-size:.9375rem;margin:0 0 1.2rem;max-width:none;
}
.osh-note.osh-note--ok{background:#DDE7DA;color:#1C3519;box-shadow:inset 0 0 0 1px rgba(28,53,25,.25)}
.osh-note.osh-note--err{background:#F3DED7;color:#72230E;box-shadow:inset 0 0 0 1px rgba(114,35,14,.25)}
.osh-note.osh-note--ok a,.osh-note.osh-note--err a{color:inherit;text-decoration:underline}

/* .osh-inner (84rem) and .osh-prose (66ch) both set max-width at the same
   specificity, and .osh-inner is written later, so an element carrying both
   came out at the full band width and the paragraphs ran to 140 characters. */
.osh-inner.osh-prose{max-width:66ch}

/* ===================================================== checkout picking === */

.osh-extras{
  background:var(--osh-washi);border-radius:var(--osh-r);
  padding:1.5rem var(--osh-pad) 1.6rem;
}
.osh-extras h2{margin:0 0 .3rem}
.osh-extras__note{margin:0 0 1.1rem;color:var(--osh-muted);font-size:.9375rem}
.osh-extras__list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.osh-xchip{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;padding:.45rem .85rem;cursor:pointer;
  font-family:inherit;font-size:.875rem;font-weight:500;text-align:left;
  background:var(--osh-washi-2);color:var(--osh-ink);
  border:1px solid rgba(30,26,23,.2);border-radius:var(--osh-r);
  transition:background-color .14s ease,border-color .14s ease;
}
.osh-xchip:hover{background:rgba(30,26,23,.1)}
/* No easing on the confirmation: a half-mixed fill under a final-colour label
   is the one frame in this design that does not clear AA. */
.osh-xchip.is-in,.osh-xchip.is-just{transition:none}
.osh-xchip__p{font-weight:600;color:var(--osh-link);font-variant-numeric:tabular-nums;white-space:nowrap}
.osh-xchip.is-in{background:var(--osh-sumi);color:var(--osh-chalk);border-color:var(--osh-sumi)}
.osh-xchip.is-in .osh-xchip__p{color:var(--osh-kincha)}
.osh-xchip.is-in::after{content:"\00d7" attr(data-q);font-weight:700;font-variant-numeric:tabular-nums}
.osh-xchip.is-just{background:var(--osh-shu-deep);color:var(--osh-chalk);border-color:var(--osh-shu-deep)}
.osh-xchip.is-just .osh-xchip__p{color:var(--osh-chalk)}
.osh-extras__back{margin:1.2rem 0 0;font-size:.9375rem}

/* The one control that finishes the order. On a phone the form runs to about
   3,500px and this used to sit two thirds of the way down it. */
.osh-go{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--osh-washi);border-radius:var(--osh-r);
  padding:1rem var(--osh-pad);
}
.osh-go__tot{font-size:1.0625rem;color:var(--osh-muted);font-variant-numeric:tabular-nums}
.osh-go__tot strong{color:var(--osh-ink);font-size:1.25rem}
.osh-go .osh-submit{margin-left:auto;width:auto}

@media (max-width:52rem){
  .osh-go{
    position:sticky;z-index:70;
    bottom:calc(env(safe-area-inset-bottom,0px));
    margin-inline:calc(var(--osh-pad) * -1);
    border-radius:0;
    border-top:3px solid var(--osh-shu);
    box-shadow:0 -8px 20px -10px rgba(18,20,27,.55);
    padding:.85rem var(--osh-pad) calc(.85rem + env(safe-area-inset-bottom,0px));
  }
  .osh-go .osh-submit{flex:1 1 11rem;margin-left:0}
}

/* ====================================================== mobile polish ===== */

@media (max-width:52rem){
  /* "1 in basket" was 190px of a 390px row, which squeezed the dish name and
     pushed every description onto a third line. On a phone the control is a
     44px square carrying "+" or the quantity; the aria-label still says what
     it does. */
  .osh-add{
    width:44px;min-width:44px;min-height:44px;padding:0;margin-left:.45rem;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.0625rem;font-weight:700;line-height:1;
  }
  .osh-add__t{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .osh-add::before{content:attr(data-q)}

  /* Back-to-top is bottom-right, and so is every row's Add button, so it sat
     on top of one of them the whole way down the menu. On the pages that have
     the sticky section strip there is already a way to get anywhere, so it
     goes. */
  body:has(.osh-rail) .osh-top{display:none !important}

  /* Same on the order page: the sticky total bar is pinned across the foot,
     and back-to-top floated over the extras right above it. */
  body:has(.osh-go) .osh-top{display:none !important}

  /* The quick action bar's primary pill links to /order/. On /order/ that is
     the page you are already on, and the sticky total bar does the job. */
  body:has(.osh-checkout) .osh-actionbar{display:none !important}

  /* Tighter rows: 194 dishes at 24px of saved height each is most of a screen. */
  .osh-menu__item{padding:.6rem 0}
  .osh-menu__desc{margin-top:.15rem;line-height:1.45}
  .osh-noren__body{padding:1rem var(--osh-pad) 1.15rem}
}

/* ================================================= choosing what comes ==== */
/* Eleven dishes need a choice: two rolls off a list of seventeen, or one of six
   things in a bento box. The panel opens under its own row rather than over the
   page, because a modal on a phone loses your place in a 194-row list. */

.osh-pick{
  grid-column:1 / -1;
  margin:.85rem 0 .2rem;padding:1rem var(--osh-pad) 1.1rem;
  background:var(--osh-washi-2);border-radius:var(--osh-r);
  border-top:3px solid var(--osh-shu);
}
.osh-pick__g{border:0;margin:0 0 1rem;padding:0;min-width:0}
.osh-pick__g:last-of-type{margin-bottom:.75rem}
.osh-pick__l{
  padding:0;margin:0 0 .6rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  font-size:.9375rem;font-weight:600;color:var(--osh-ink);
}
.osh-pick__c{font-weight:500;font-size:.8125rem;color:var(--osh-muted)}
.osh-pick__o{display:flex;flex-wrap:wrap;gap:.45rem}
.osh-opt{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  min-height:44px;padding:.35rem .75rem;border-radius:var(--osh-r);
  font-size:.875rem;line-height:1.3;color:var(--osh-ink);
  background:var(--osh-washi);border:1px solid rgba(30,26,23,.2);
}
.osh-opt:hover{background:#fff}
.osh-opt input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--osh-shu-deep);margin:0}
.osh-opt:has(input:checked){background:var(--osh-sumi);color:var(--osh-chalk);border-color:var(--osh-sumi)}
.osh-opt:has(input:disabled){opacity:.45;cursor:not-allowed}
.osh-opt:has(input:focus-visible){outline:3px solid var(--osh-focus);outline-offset:2px}

/* "Any 2 Rolls" is seventeen options, so on a phone the button that finishes
   the choice was below all of them. It sticks to the foot of the panel while
   the panel is on screen. */
.osh-pick__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  position:sticky;bottom:0;
  margin:0 calc(var(--osh-pad) * -1) calc(var(--osh-pad) * -0.35);
  padding:.7rem var(--osh-pad) .8rem;
  background:var(--osh-washi-2);
  box-shadow:0 -6px 12px -8px rgba(18,20,27,.45);
}
.osh-pick__msg{margin:0;flex:1 1 10rem;font-size:.8125rem;font-weight:600;color:var(--osh-link)}
.osh-pick__foot .osh-btn{min-height:44px;padding:.5rem 1rem;font-size:.875rem}
.osh-pick__go[disabled]{opacity:.45;cursor:not-allowed}
.osh-pick__go[disabled]:hover{background:var(--osh-shu-deep);transform:none}

/* What was chosen, on the basket line. */
.osh-line__c{
  grid-column:1 / -1;margin:.1rem 0 .2rem;font-size:.8125rem;line-height:1.4;
  color:var(--osh-muted);
}

@media (max-width:52rem){
  .osh-pick{margin-inline:calc(var(--osh-pad) * -1 + .25rem)}
  .osh-pick__o{flex-direction:column;align-items:stretch}
  .osh-opt{width:100%}
  .osh-pick__foot .osh-btn{flex:1 1 8rem}
  /* The row's control says "Choose" rather than "Add" on these, and a bare "+"
     would not warn anyone there is a question coming. */
  .osh-add[data-osh-opens]{width:auto;min-width:64px;padding:0 .6rem;font-size:.8125rem}
  .osh-add[data-osh-opens]::before{content:attr(data-q) " \00b7"}
  .osh-add[data-osh-opens] .osh-add__t{
    position:static;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;white-space:nowrap;
  }
  .osh-add[data-osh-opens].is-in::before{content:attr(data-q)}
  .osh-add[data-osh-opens].is-in .osh-add__t{display:none}
}