/* ==========================================================================
   NEON RAMEN — page-level composition
   ========================================================================== */

/* ==========================================================================
   Shared components
   ========================================================================== */

/* --- category / flavour tag chips (chamfered outline) --- */
.chip {
  --cut: 7px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0;
  background: var(--line);
  font-family: var(--f-display); font-weight: 600;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
}
.chip > span {
  display: block; margin: 1px; padding: 0;
  background: var(--panel); clip-path: inherit;
}
.chip__in { padding: 7px 13px; }

/* --- flavour meta line (icon + word), no boxes --- */
.meta-tags { display: flex; align-items: center; gap: 18px; }
.meta-tags b {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-display); font-weight: 500;
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--mute-2);
}
.meta-tags svg { width: 15px; height: 15px; }
.meta-tags b.t-hot svg { color: var(--pink); }
.meta-tags b.t-veg svg { color: var(--teal); }

/* --- quantity stepper --- */
.qty {
  --cut: 9px;
  display: inline-flex; align-items: stretch;
  background: var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  position: relative;
}
.qty::before {
  content: ""; position: absolute; inset: 1px; background: var(--panel-2);
  clip-path: inherit;
}
.qty button {
  position: relative; z-index: 1;
  width: 40px; display: grid; place-items: center;
  color: var(--teal); transition: color .14s linear;
}
.qty button:hover { color: var(--cream); }
.qty button svg { width: 17px; height: 17px; stroke-width: 2.2; }
.qty__n {
  position: relative; z-index: 1;
  min-width: 34px; padding: 10px 0;
  display: grid; place-items: center;
  font-size: 16px; color: var(--cream);
}
.qty--pink button { color: var(--pink); }
.qty--sm button { width: 30px; }
.qty--sm button svg { width: 14px; height: 14px; }
.qty--sm .qty__n { min-width: 26px; padding: 6px 0; font-size: 14px; }

/* --- add button --- */
.add {
  --cut: 13px;
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px;
  background: var(--pink); color: var(--ink);
  font-family: var(--f-display); font-weight: 700;
  font-size: 14px; letter-spacing: .13em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: background .14s linear;
}
.add:hover { background: #ff5f8c; }
.add.is-added { background: var(--teal); }
.add svg { width: 17px; height: 17px; }

/* --- section rule: title + hairline + count --- */
.srule { display: flex; align-items: center; gap: 20px; }
.srule__line { flex: 1 1 auto; height: 1px; background: var(--line); }
.srule__n {
  font-family: var(--f-display); font-weight: 600;
  font-size: 12px; letter-spacing: .2em; color: var(--mute-2);
}

/* --- page masthead (menu / locations) --- */
.mast { padding: 34px 0 26px; }
.mast__row { display: flex; align-items: flex-end; gap: 22px; }
.mast h1 { font-size: 58px; line-height: .86; letter-spacing: -.005em; }
.mast p { margin-top: 10px; color: var(--mute); font-size: 16px; }
.mast__icon { width: 60px; height: 60px; color: var(--teal); flex: none; }
.mast__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }

/* ==========================================================================
   INDEX — hero
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: stretch;
  min-height: 524px;
  border-bottom: 1px solid #12161d;
  background: var(--ink);
}
.hero__l {
  display: flex; gap: 30px;
  padding: 52px 44px 48px calc(max(0px, (100vw - var(--shell)) / 2) + 28px);
}
.hero__plate { flex: none; padding-top: 8px; }
.hero__body { max-width: 520px; padding-top: 4px; }

.hero h1 { font-size: 74px; line-height: .92; letter-spacing: -.01em; }
.hero h1 .a { color: var(--teal); display: block; }
.hero h1 .b { color: var(--cream); display: block; }
.hero__sub { margin-top: 20px; font-size: 18px; line-height: 1.5; color: #cfc9bc; }

.hero__form { margin-top: 34px; max-width: 470px; }
.hero__note {
  display: flex; align-items: center; gap: 13px;
  margin-top: 22px;
  font-family: var(--f-display); font-weight: 600;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream);
}
.hero__note .b { color: var(--cream); display: flex; }
.hero__note .b svg { width: 17px; height: 21px; }

.hero__r { position: relative; overflow: hidden; }
.hero__r img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.hero__r::after {   /* the render keeps a hard left edge — only the seam is softened */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,11,17,.85) 0%, transparent 7%);
}

/* Left decorative glyph stack floating under the plate */
.hero__deco { position: absolute; left: 20px; bottom: 26px; }
.hero__deco .q {
  width: 74px; height: 74px; margin-top: 16px;
  background: var(--pink);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* --- select field --- */
.sel {
  --cut: 10px;
  position: relative;
  background: var(--teal-deep);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.sel::before { content: ""; position: absolute; inset: 1px; background: var(--ink); clip-path: inherit; }
.sel__face {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  font-family: var(--f-display); font-weight: 600;
  font-size: 16px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--teal);
  pointer-events: none;
}
.sel__face > svg:first-child { width: 19px; height: 19px; }
.sel__val { flex: 1 1 auto; }
.sel__face .sel__caret { width: 22px; height: 22px; stroke-width: 2.2; }
.sel select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
  -webkit-appearance: none; appearance: none;
}
.sel select option { background: var(--panel); color: var(--cream); }
.sel:hover { background: var(--teal-dim); }

.f-label {
  display: block; margin-bottom: 9px;
  font-family: var(--f-display); font-weight: 600;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal);
}

/* Chevrons sit hard left while the label stays optically centred, as in the render. */
.hero__cta { margin-top: 15px; position: relative; }
.hero__cta .g-chevs { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: rgba(10,13,19,.9); }

/* ==========================================================================
   INDEX — status bar
   ========================================================================== */

.status { --cut: 22px; margin: 26px 0 0; }
.status__in {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1.1fr;
  align-items: center;
  padding: 20px 30px;
  position: relative;
}
.status__cell {
  display: flex; align-items: center; gap: 16px;
  padding: 2px 26px;
  border-left: 1px solid #1e2833;
}
.status__cell:first-child { border-left: 0; padding-left: 4px; }
.status__cell > svg { width: 30px; height: 30px; color: var(--teal); flex: none; }
.status__k {
  font-family: var(--f-display); font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal);
}
.status__v {
  font-family: var(--f-display); font-weight: 700;
  font-size: 21px; line-height: 1.15; margin-top: 3px; color: var(--cream);
}
.status__v.t { color: var(--teal); letter-spacing: .03em; text-transform: uppercase; }
.status__s { font-size: 14px; color: var(--mute); margin-top: 1px; }
.status__link {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  font-family: var(--f-display); font-weight: 600;
  font-size: 15px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--teal);
  padding-right: 6px;
  transition: color .14s linear;
}
.status__link:hover { color: var(--cream); }
.status__link svg { width: 22px; height: 22px; stroke-width: 2.2; }
.status .g-slashes { position: absolute; right: 22px; bottom: 8px; opacity: .95; }

/* ==========================================================================
   INDEX — featured cards
   ========================================================================== */

.feats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 24px;
}
.feat { --cut: 15px; overflow: hidden; }
.feat__in { display: grid; grid-template-columns: 53fr 47fr; min-height: 254px; }
.feat__txt { padding: 24px 2px 24px 24px; display: flex; flex-direction: column; }
.feat__kicker { display: flex; align-items: center; gap: 9px; }
.feat__kicker .k {
  font-family: var(--f-display); font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal);
}
.feat__kicker.pink .k { color: var(--pink); }
.feat__kicker svg { width: 15px; height: 15px; }
.feat h3 { margin-top: 13px; font-size: 28px; letter-spacing: .005em; color: var(--cream); white-space: nowrap; }
.feat p { margin-top: 11px; font-size: 15px; line-height: 1.42; color: var(--mute); max-width: 21ch; }
.feat__price { margin-top: auto; padding-top: 18px; font-family: var(--f-display); font-weight: 700; font-size: 25px; }
.feat--teal .feat__price { color: var(--teal); }
.feat--pink .feat__price { color: var(--pink); }

.feat__art { position: relative; }
.feat__art .slab {           /* the angled colour slab behind the bowl */
  position: absolute; inset: 13% 4% 15% 4%;
  clip-path: polygon(23% 0, 100% 0, 77% 100%, 0 100%);
}
.feat--teal .feat__art .slab { background: var(--teal); }
.feat--pink .feat__art .slab { background: var(--pink); }
.feat__art img {
  position: absolute; left: -6%; top: 4%;
  max-width: none; width: 112%; height: 92%;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.75));
}
.feat__art .g-a { position: absolute; right: 11px; top: 11px; z-index: 2; }
.feat__art .g-b { position: absolute; right: 11px; bottom: 11px; z-index: 2; transform: scale(-1); }

/* ==========================================================================
   MENU
   ========================================================================== */

.menu-top { display: flex; align-items: flex-end; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid #161a20; }
.menu-top .mast { padding: 30px 0 0; flex: 1 1 auto; }

.ordertab { --cut: 16px; flex: none; min-width: 300px; }
.ordertab__in { display: flex; align-items: center; gap: 16px; padding: 16px 22px; }
.ordertab svg { width: 28px; height: 28px; color: var(--teal); flex: none; }
.ordertab__k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.ordertab__n { font-size: 16px; color: var(--cream); margin-top: 2px; }
.ordertab__p { margin-left: auto; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--cream); }

.menu-grid {
  display: grid;
  grid-template-columns: 302px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding-top: 26px;
}

/* --- sidebar --- */
.side { position: sticky; top: 138px; }
.cats { --cut: 16px; }
.cats__h { padding: 18px 22px 12px; }
.cats a {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 22px;
  font-family: var(--f-display); font-weight: 600;
  font-size: 16px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cream);
  transition: background .14s linear, color .14s linear;
}
.cats a svg { width: 24px; height: 24px; color: var(--teal); flex: none; }
.cats a.pink svg { color: var(--pink); }
.cats a b { margin-left: auto; font-weight: 500; color: var(--mute-2); font-family: var(--f-body); font-size: 16px; letter-spacing: 0; }
.cats a:hover { background: #101720; }
.cats a.is-on {
  --cut: 11px;
  background: var(--pink); color: var(--ink); font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.cats a.is-on svg, .cats a.is-on b { color: var(--ink); }
.cats__pad { height: 12px; }

.promo {
  --cut: 18px;
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}
.promo__in { padding: 22px 20px 0; text-align: center; }
.promo__jp {
  font-family: 'Hiragino Sans','Noto Sans JP',sans-serif;
  font-size: 22px; letter-spacing: .12em; color: var(--pink);
}
.promo__en {
  margin-top: 8px;
  font-family: var(--f-display); font-weight: 600;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
}
.promo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 62%; margin-top: 16px; }
.promo .g-pixels--sm { position: absolute; left: 12px; top: 12px; }
.promo .g-brackets { --gb: var(--teal-deep); }

/* --- menu sections --- */
.msec + .msec { margin-top: 34px; }
.msec__head { display: flex; align-items: center; gap: 18px; }
.msec__head h2 { font-size: 25px; letter-spacing: .04em; color: var(--teal); }
.msec__head.pink h2 { color: var(--pink); }
.msec__head > svg { width: 24px; height: 24px; color: var(--teal); flex: none; }
.msec__head.pink > svg { color: var(--pink); }
.msec__blurb { margin: 7px 0 18px; font-size: 15px; color: var(--mute); }

.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.mcard { --cut: 15px; display: flex; flex-direction: column; overflow: hidden; }
.mcard__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mcard__art img { width: 100%; height: 100%; object-fit: cover; }
.mcard__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,15,22,.92) 100%);
}
.mcard__art .g-pixels--sm { position: absolute; right: 12px; top: 12px; z-index: 2; }
.jbadge {
  --cut: 7px;
  position: absolute; left: 13px; top: 13px; z-index: 2;
  padding: 4px 9px;
  font-family: 'Hiragino Sans','Noto Sans JP',sans-serif;
  font-size: 13px; letter-spacing: .05em;
  color: var(--pink);
  border: 1px solid var(--pink);
  background: rgba(8,11,17,.72);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.jbadge--teal { color: var(--teal); border-color: var(--teal); }
.ibadge {
  position: absolute; left: 13px; top: 13px; z-index: 2;
  width: 26px; height: 26px; color: var(--pink);
}
.ibadge svg { width: 100%; height: 100%; }
.ibadge--teal { color: var(--teal); }

.mcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mcard h3 { font-size: 23px; color: var(--teal); letter-spacing: .02em; }
.mcard__desc { margin-top: 9px; font-size: 14.5px; line-height: 1.42; color: var(--mute); flex: 1 1 auto; }
.mcard__price { margin-top: 12px; font-family: var(--f-display); font-weight: 700; font-size: 21px; color: var(--pink); }
.mcard__act { display: flex; align-items: stretch; gap: 12px; margin-top: 14px; }

/* ==========================================================================
   LOCATIONS
   ========================================================================== */

.loc-grid {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding-bottom: 10px;
}
.loc-mast { padding: 34px 0 22px; }
.loc-mast h1 { font-size: 66px; color: var(--pink); letter-spacing: -.01em; }
.loc-mast p { margin-top: 10px; font-size: 17px; color: var(--cream); }

.filters { --cut: 12px; margin-bottom: 16px; }
.filters__in { display: flex; align-items: stretch; }
.filters__l {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  font-family: var(--f-display); font-weight: 600;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
  flex: 1 1 auto;
}
.filters__l svg { width: 22px; height: 22px; color: var(--teal); }
.filters .sel { flex: none; width: 230px; background: none; clip-path: none; border-left: 1px solid var(--line); }
.filters .sel::before { display: none; }
.filters .sel__face { color: var(--cream); font-size: 13px; letter-spacing: .16em; padding: 14px 18px; }

.lolist { display: flex; flex-direction: column; gap: 11px; }
.lo { --cut: 12px; cursor: pointer; text-align: left; width: 100%; display: block; }
.lo__in { display: flex; align-items: center; gap: 18px; padding: 17px 20px; }
.lo__pin { position: relative; width: 34px; height: 40px; flex: none; color: var(--teal); }
.lo__pin svg { width: 34px; height: 40px; stroke: none; fill: currentColor; }
.lo__pin b {
  position: absolute; inset: 0 0 auto; top: 6px; text-align: center;
  font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ink);
}
.lo__name { display: block; font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); }
.lo__addr { display: block; margin-top: 3px; font-size: 15px; line-height: 1.2; color: var(--mute); }
.lo__mid { display: block; flex: 1 1 auto; min-width: 0; }
.lo__rule { width: 1px; align-self: stretch; background: var(--line); margin: 2px 0; flex: none; }
.lo__st { display: block; text-align: left; flex: none; width: 116px; }
.lo__st .a { display: block; font-family: var(--f-display); font-weight: 600; font-size: 13px; line-height: 1.1; letter-spacing: .11em; text-transform: uppercase; color: var(--teal); }
.lo__st .a.shut { color: var(--mute); }
.lo__st .b { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1; color: var(--teal); }
.lo__go { width: 24px; height: 24px; color: var(--pink); flex: none; stroke-width: 2.4; }
.lo:hover { background: var(--line); }
.lo.is-on { background: var(--pink); }
.lo.is-on .lo__rule { background: var(--line-pink); }

.lo--cta { --cut: 12px; background: var(--pink); }
.lo--cta .lo__in { align-items: center; gap: 16px; }
.lo--cta .lo__pin { color: var(--pink); }
.lo--cta .lo__pin svg { filter: none; }
.lo--cta .h { font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; color: var(--pink); }
.lo--cta .s { margin-top: 2px; font-size: 15px; color: var(--mute); }
.lo--cta .r { text-align: left; font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; color: var(--pink); }

/* --- map --- */
.map { --cut: 20px; position: relative; }
.map__in { position: relative; aspect-ratio: 850 / 455; overflow: hidden; }
.map__in > img { width: 100%; height: 100%; object-fit: cover; }
.map__pin {
  position: absolute; transform: translate(-50%, -100%);
  width: 34px; height: 41px; color: var(--pink);
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.75));
  transition: transform .16s ease, color .16s linear;
}
.map__pin svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.map__pin b {
  position: absolute; left: 0; right: 0; top: 6px; text-align: center;
  font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--ink);
}
.map__pin:hover, .map__pin.is-on { color: var(--teal); transform: translate(-50%, -100%) scale(1.16); z-index: 3; }
.map__lab {
  position: absolute; transform: translate(-50%, -50%);
  font-family: 'Hiragino Sans','Noto Sans JP',sans-serif;
  font-size: 15px; letter-spacing: .1em; color: var(--pink); opacity: .82;
  pointer-events: none;
}
.map__badge {
  --cut: 8px;
  position: absolute; right: 22px; top: 22px;
  padding: 10px 12px;
  border: 1px solid var(--pink);
  writing-mode: vertical-rl;
  font-family: 'Hiragino Sans','Noto Sans JP',sans-serif;
  font-size: 21px; letter-spacing: .08em; color: var(--pink);
  background: rgba(5,9,15,.55);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.map__zoom { position: absolute; right: 22px; bottom: 22px; display: flex; flex-direction: column; }
.map__zoom button {
  --cut: 8px;
  width: 42px; height: 40px; display: grid; place-items: center;
  background: rgba(9,14,21,.9); border: 1px solid var(--line);
  color: var(--cream);
}
.map__zoom button:first-child { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.map__zoom button:last-child { border-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.map__zoom button:hover { background: var(--panel-3); color: var(--teal); }
.map__zoom svg { width: 20px; height: 20px; stroke-width: 2; }

/* --- location detail --- */
.det { --cut: 20px; margin-top: 22px; }
.det__in { display: grid; grid-template-columns: 205px minmax(0, 1fr) 205px; gap: 0; padding: 20px; }
.det__art { --cut: 12px; overflow: hidden; align-self: start; line-height: 0; }
.det__art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.det__mid { min-width: 0; padding: 4px 20px; }
.det__hd { display: flex; align-items: center; gap: 14px; }
.det__hd .lo__pin { width: 30px; height: 36px; }
.det__hd .lo__pin svg { width: 30px; height: 36px; }
.det__hd .lo__pin b { font-size: 13px; top: 5px; }
.det__hd h2 { font-size: 27px; letter-spacing: .02em; color: var(--cream); white-space: nowrap; }
.det__addr { margin-top: 6px; margin-left: 40px; font-size: 15.5px; color: var(--mute); }
.det__hr { height: 1px; background: var(--line); margin: 18px 0; }
.det__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.det__stat { display: flex; gap: 8px; min-width: 0; }
.det__stat > svg { width: 20px; height: 20px; color: var(--teal); flex: none; margin-top: 2px; }
.det__stat > div { min-width: 0; }
.det__stat .k { font-family: var(--f-display); font-weight: 600; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--mute-2); white-space: nowrap; }
.det__stat .v { margin-top: 3px; font-family: var(--f-display); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.det__stat .s { margin-top: 2px; font-size: 12px; color: var(--mute); white-space: nowrap; }
.det__blurb { margin-top: 20px; font-size: 15.5px; line-height: 1.5; color: var(--cream); max-width: 46ch; }
.det__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.det__side { min-width: 0; padding-left: 20px; border-left: 1px solid var(--line); }
.det__side .k { font-family: var(--f-display); font-weight: 600; font-size: 11px; letter-spacing: .19em; text-transform: uppercase; color: var(--pink); }
.det__side p { margin-top: 9px; font-size: 15px; line-height: 1.45; color: var(--cream); }
.det__side .btn { margin-top: 16px; width: 100%; --cut: 12px; font-size: 13px; }
.det__side .btn span { padding: 12px 16px; }
.det__side .btn svg { width: 17px; height: 17px; }
.det__feat { margin-top: 26px; }
.det__feat .row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.det__feat img { --cut: 8px; width: 56px; height: 56px; object-fit: cover; flex: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.det__feat .n { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--pink); }
.det__feat .p { margin-top: 2px; font-size: 15px; color: var(--cream); }

/* ==========================================================================
   ORDER
   ========================================================================== */

.steps { position: relative; padding: 22px 0 20px; border-bottom: 1px solid #161a20; }
.steps__in { display: flex; align-items: center; gap: 0; padding-right: 66px; }
.step { display: flex; align-items: center; gap: 14px; flex: none; }
.step__hex {
  width: 30px; height: 34px; flex: none;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--line); color: var(--mute-2);
}
.step.on .step__hex { background: var(--teal); color: var(--ink); }
.step.now .step__hex { background: var(--pink); color: var(--ink); }
.step__t { font-family: var(--f-display); font-weight: 700; font-size: 14.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--mute-2); }
.step.on .step__t { color: var(--teal); }
.step.now .step__t { color: var(--pink); }
.step__bar { flex: 1 1 auto; height: 2px; background: var(--line); margin: 0 22px; min-width: 40px; }
.step__bar.on { background: var(--teal); }
.step__bar.dash { height: 0; border-top: 2px dashed var(--line); background: none; }
.steps .g-checker { position: absolute; right: 0; top: 8px; --gc: var(--pink); opacity: .9; transform: scaleX(-1); }

.ordergrid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 420px;
  gap: 22px;
  align-items: start;
  padding-top: 22px;
}

.ocol { --cut: 18px; position: relative; }
.ocol__in { padding: 24px 22px; }
.ocol h2 { font-size: 24px; letter-spacing: .03em; color: var(--pink); }
.ocol h2.teal { color: var(--teal); }
.ocol__sub { margin-top: 7px; font-size: 15px; color: var(--mute); }
.ocol .g-pixels--sm { position: absolute; right: 16px; top: 16px; --px: #2c3138; }

.ocol--pin { --fill: var(--panel); background: var(--line-pink); }
.ocol--mid { background: var(--line-pink); }
.ocol--sum { background: var(--line-teal); }

/* pickup list */
.plist { display: flex; flex-direction: column; margin-top: 16px; }
.pl { --cut: 10px; display: flex; gap: 14px; padding: 12px; text-align: left; align-items: flex-start; width: 100%; }
.pl img { width: 68px; height: 58px; object-fit: cover; flex: none; --cut: 7px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.pl__n { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); }
.pl__s { margin-top: 2px; font-family: var(--f-display); font-weight: 600; font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--teal-dim); }
.pl__s.shut { color: var(--mute-2); }
.pl__a { margin-top: 4px; font-size: 13.5px; color: var(--mute); line-height: 1.35; }
.pl__dot { width: 9px; height: 9px; background: var(--teal); flex: none; margin: 6px 0 0 auto; opacity: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pl { background: transparent; }
.pl:hover { background: var(--line-soft); }
.pl.is-on { background: var(--teal-dim); --fill: #0b1a20; }
.pl.is-on .pl__dot { opacity: 1; }
.pl.is-on .pl__n { color: var(--teal); }

.ohours { --cut: 12px; margin-top: 16px; }
.ohours__in { display: flex; align-items: center; gap: 14px; padding: 15px 18px; }
.ohours svg { width: 26px; height: 26px; color: var(--teal); flex: none; }
.ohours .a { font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); }
.ohours .b { margin-top: 2px; font-size: 14px; color: var(--mute); }

/* filter tabs */
.tabs { display: flex; gap: 12px; margin-top: 16px; }
.tab {
  --cut: 10px;
  flex: 1 1 0; padding: 13px 10px;
  background: var(--line);
  font-family: var(--f-display); font-weight: 700;
  font-size: 14px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  position: relative;
  isolation: isolate;
}
.tab::before { content: ""; position: absolute; inset: 1px; background: var(--panel); clip-path: inherit; z-index: -1; }
.tab:hover { color: var(--cream); }
.tab.is-on { background: var(--pink); color: var(--pink); }
.tab.is-on::before { background: #180b12; }

/* order-page item rows */
.orows { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.orow { --cut: 14px; display: grid; grid-template-columns: 232px minmax(0, 1fr); overflow: hidden; min-height: 190px; }
.orow--pink { background: var(--line-pink); }
.orow--teal { background: var(--line-teal); }
.orow__art { position: relative; overflow: hidden; }
.orow__art img { width: 100%; height: 100%; object-fit: cover; }
.orow__art .corner {
  position: absolute; left: 0; top: 0; width: 48px; height: 48px; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.orow--teal .orow__art .corner { background: var(--teal); }
.orow--pink .orow__art .corner { background: var(--pink); }
.orow__art .corner svg { width: 18px; height: 18px; margin: 8px 0 0 8px; color: var(--ink); }
.orow__body { padding: 20px 20px 18px; display: flex; flex-direction: column; }
.orow__hd { display: flex; align-items: baseline; gap: 16px; }
.orow__hd h3 { font-size: 22px; letter-spacing: .03em; color: var(--cream); }
.orow__hd .p { margin-left: auto; font-family: var(--f-display); font-weight: 700; font-size: 18px; white-space: nowrap; }
.orow--pink .orow__hd .p { color: var(--pink); }
.orow--teal .orow__hd .p { color: var(--teal); }
.orow__d { margin-top: 9px; font-size: 15px; line-height: 1.42; color: var(--mute); max-width: 40ch; }
.orow__f { display: flex; align-items: stretch; gap: 14px; margin-top: auto; padding-top: 16px; }
.orow__f .add { flex: none; min-width: 132px; }
.orow .meta-tags { margin-top: 14px; }

.viewall { --cut: 14px; margin-top: 16px; display: block; }
.viewall__in {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 15px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 15px; letter-spacing: .13em; text-transform: uppercase; color: var(--teal);
}
.viewall:hover { background: var(--teal-deep); }

/* summary */
.sum__hd { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; }
.sum__hd .n { font-size: 15px; color: var(--mute); }
.sum__hd a { margin-left: auto; font-size: 15px; color: var(--teal); }
.sum__hd a:hover { color: var(--cream); }

.sline { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.sline img { --cut: 8px; width: 62px; height: 62px; object-fit: cover; flex: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.sline__b { flex: 1 1 auto; min-width: 0; }
.sline__t { display: flex; align-items: baseline; gap: 10px; }
.sline__t .n { font-size: 16px; color: var(--cream); font-weight: 500; }
.sline__t .p { margin-left: auto; font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--mute); }
.sline__x { width: 22px; height: 22px; color: var(--mute-2); flex: none; }
.sline__x:hover { color: var(--pink); }
.sline__x svg { width: 100%; height: 100%; stroke-width: 2; }
.sline__o { margin-top: 2px; font-size: 13.5px; color: var(--mute-2); line-height: 1.35; }
.sline__f { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.sline__f .tot { margin-left: auto; font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--cream); }

.stot { margin-top: 18px; }
.stot .r { display: flex; align-items: baseline; padding: 6px 0; font-size: 16px; color: var(--cream); }
.stot .r span:last-child { margin-left: auto; font-family: var(--f-display); font-weight: 600; }
.stot .r.big { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.stot .r.big span:first-child { font-family: var(--f-display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .05em; }
.stot .r.big span:last-child { font-family: var(--f-display); font-weight: 700; font-size: 27px; color: var(--pink); }

.snote { --cut: 12px; margin-top: 18px; }
.snote__in { display: flex; gap: 14px; padding: 15px 18px; }
.snote svg { width: 18px; height: 22px; color: var(--cream); flex: none; }
.snote p { font-size: 14.5px; line-height: 1.42; color: var(--mute); }

.checkout { margin-top: 18px; font-size: 15px; letter-spacing: .09em; gap: 16px; }
.back { display: flex; align-items: center; gap: 12px; margin-top: 18px;
  font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); }
.back:hover { color: var(--cream); }
.back svg { width: 20px; height: 20px; }

.empty { padding: 34px 0; text-align: center; color: var(--mute-2); font-family: var(--f-display); letter-spacing: .12em; text-transform: uppercase; font-size: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
  .ordergrid { grid-template-columns: 300px minmax(0, 1fr); }
  .ordergrid > .ocol--sum { grid-column: 1 / -1; }
  .loc-grid { grid-template-columns: 420px minmax(0, 1fr); }
  .det__in { grid-template-columns: 200px minmax(0, 1fr); }
  .det__side { grid-column: 1 / -1; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 20px; }
  .det__side .det__feat { margin-top: 18px; }
}

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero__l { padding: 40px 22px 40px 22px; }
  .hero__r { min-height: 340px; }
  .hero__r::after { background: linear-gradient(180deg, var(--ink) 0%, transparent 22%); }
  .hero h1 { font-size: 54px; }
  .status__in { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .status__cell:nth-child(3) { border-left: 0; padding-left: 4px; }
  .status__link { justify-content: flex-start; }
  .feats { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .side { position: static; }
  .promo { display: none; }
  .mgrid { grid-template-columns: repeat(2, 1fr); }
  .loc-grid { grid-template-columns: 1fr; }
  .ordergrid { grid-template-columns: 1fr; }
  .steps__in { overflow-x: auto; padding-bottom: 8px; }
  .steps .g-checker { display: none; }
  .step__bar { min-width: 24px; margin: 0 12px; }
  .menu-top { flex-direction: column; align-items: stretch; gap: 16px; }
  .ordertab { min-width: 0; }
}

@media (max-width: 720px) {
  .mgrid { grid-template-columns: 1fr; }
  .mast h1, .loc-mast h1 { font-size: 42px; }
  .hero h1 { font-size: 42px; }
  .hero__plate { display: none; }
  .status__in { grid-template-columns: 1fr; padding: 18px 20px; }
  .status__cell { border-left: 0; padding-left: 4px; }
  .feat__in { grid-template-columns: 1fr; }
  .feat__art { min-height: 200px; }
  .det__in { grid-template-columns: 1fr; }
  .det__mid { padding: 20px 0 0; }
  .det__stats { grid-template-columns: 1fr 1fr; }
  .orow { grid-template-columns: 1fr; }
  .orow__art { min-height: 180px; }
  .lo__st { min-width: 0; }
  .lo__addr { font-size: 13.5px; }
}