/* Peri-Peri Chicken & Grill (2.0), drawn by public/tpl/peri.js. Builds on shop-flagship.css; every rule is scoped to
   .site-body[data-template="peri"].
   - Palette: charcoal #171311 / cards #211B18, cream text #F6EBDD, the ember gradient #E2412E -> #F7A440 used only as
     light (glows, hairlines, the heat scale, large display words). Small text is never in the gradient: prices and
     labels use the light ember #F7A440 (8.4:1 on the cards); cream on charcoal 15.6:1, muted #BFAF9E 8.9:1.
     The takeaway's colour is the button colour.
   - Type: Big Shoulders Display 900 in capitals for names, Manrope 400/600/800 for reading.
   - Motion: the ring of words turning slowly round the platter, the glow breathing, the header's ember line drawing
     in, cards warming on hover, the heat scale lighting up. All of it still with reduced motion. */

/* ---------- tokens */
.site-body[data-template="peri"] {
  --bg: #171311; --card: #211b18; --soft: #2b2420; --line: #3a302b; --ink: #f6ebdd; --muted: #bfaf9e;
  --fs-deep: #0f0c0b; --fs-on-deep: #f6ebdd; --fs-on-deep-muted: rgba(246, 235, 221, .7);
  --pr-e1: #e2412e; --pr-e2: #f7a440; --pr-ember: linear-gradient(90deg, #e2412e, #f7a440); --pr-price: #f7a440; --pr-glow: rgba(226, 65, 46, .26);
  --t-head: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; --t-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hw: 900; --t-weight: 900; --t-case: uppercase; --t-track: .02em; --t-style: normal;
  font-family: var(--t-body);
}
.site-body[data-template="peri"][data-theme="light"] { --bg: #f6ebdd; --card: #fffaf3; --soft: #efe0cc; --line: #e0cdb6; --ink: #1d1714; --muted: #5d4f45; --pr-price: #a8361f; --pr-glow: rgba(226, 65, 46, .16); --fs-deep: #171311; }
.site-body[data-template="peri"] .shop.t-site :is(h1, h2, h3, .fs-word, .fs-foot-name, .fs-info-big, .fs-postcode) { font-weight: 900; font-style: normal; letter-spacing: .02em; }
.site-body[data-template="peri"] :focus-visible { outline-color: var(--pr-e2); }
.site-body[data-template="peri"] .shop.t-site .fs-kicker { color: var(--pr-price); letter-spacing: .24em; font-weight: 800; }

/* ---------- header: minimal, dark, a thin ember line */
.site-body[data-template="peri"] .shop.t-site .pr-head { color: var(--ink); }
.site-body[data-template="peri"] .shop.t-site .pr-head::before { background: color-mix(in srgb, var(--bg) 90%, transparent); box-shadow: none; }
.site-body[data-template="peri"] .shop.t-site .pr-ember-line { position: absolute; left: 0; right: 0; top: calc(var(--fs-head-h) - 1px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--pr-e1) 22%, var(--pr-e2) 58%, transparent 100%); transform-origin: 0 50%; transition: top .35s var(--fs-ease); }
.site-body[data-template="peri"] .shop.t-site .pr-head.is-scrolled .pr-ember-line { top: calc(var(--fs-head-min) - 1px); }
.site-body[data-template="peri"] .shop.t-site .pr-head-in { grid-template-columns: minmax(0, 1fr) auto; }
.site-body[data-template="peri"] .shop.t-site .pr-brand .fs-word { font-family: var(--t-head); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.35rem, 5.4vw, 1.8rem); }
.site-body[data-template="peri"] .shop.t-site .pr-nav-a { font-weight: 600; font-size: .9rem; letter-spacing: .02em; color: var(--muted); }
.site-body[data-template="peri"] .shop.t-site .pr-nav-a:hover, .site-body[data-template="peri"] .shop.t-site .pr-nav-a[aria-current="page"] { color: var(--ink); }
.site-body[data-template="peri"] .shop.t-site .pr-nav-a::after { height: 1px; bottom: 9px; background: var(--pr-ember); }
.site-body[data-template="peri"] .shop.t-site .pr-acts .fs-hbtn { border-color: var(--line); border-radius: 999px; }
.site-body[data-template="peri"] .shop.t-site .pr-basket { border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; transition: border-color .25s ease, background-color .25s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-basket:hover { border-color: var(--pr-e2); background: color-mix(in srgb, var(--pr-e2) 8%, transparent); }
.site-body[data-template="peri"] .shop.t-site .pr-basket .fs-basket-count { background: var(--pr-ember); color: #171311; font-weight: 800; }
@media (min-width: 1024px) {
  .site-body[data-template="peri"] .shop.t-site .pr-head-in { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s5); }
  .site-body[data-template="peri"] .shop.t-site .pr-nav { gap: var(--s4); }
}
.site-body[data-template="peri"] .fs-drawer { background: #120f0d; color: #f6ebdd; }
.site-body[data-template="peri"] .fs-drawer :is(.fs-drawer-nav a, .fs-drawer-call, .fs-drawer-close) { color: #f6ebdd; }
.site-body[data-template="peri"] .fs-drawer :is(.fs-drawer-top, .fs-drawer-nav a) { border-color: #2e2622; }
.site-body[data-template="peri"] .fs-drawer .fs-drawer-nav a { font-size: clamp(2.6rem, 13vw, 3.6rem); text-transform: uppercase; }
.site-body[data-template="peri"] .fs-drawer .fs-drawer-nav a[aria-current="page"] { color: #f7a440; }
.site-body[data-template="peri"] .fs-drawer .fs-drawer-where { color: #bfaf9e; }
.site-body[data-template="peri"] .fs-drawer .fs-drawer-close { background: #241d1a; }

/* ---------- buttons */
.site-body[data-template="peri"] .shop.t-site .pr-go, .site-body[data-template="peri"] .shop.t-site .fs-cta { border-radius: 999px; font-weight: 800; letter-spacing: .02em; }
.site-body[data-template="peri"] .shop.t-site .pr-go { min-height: 56px; padding: 0 var(--s3) 0 28px; gap: 14px; box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--brand) 75%, transparent); }
.site-body[data-template="peri"] .shop.t-site .fs-more { font-weight: 700; }
.site-body[data-template="peri"] .shop.t-site .fs-more:hover { color: var(--pr-price); }

/* ---------- home banner: words left, the platter in a large circle with a ring of words */
.site-body[data-template="peri"] .shop.t-site .pr-hero { position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(55% 60% at 78% 48%, var(--pr-glow), rgba(247, 164, 64, .05) 48%, transparent 72%), radial-gradient(40% 40% at 0% 100%, rgba(226, 65, 46, .08), transparent 70%), var(--bg); }
.site-body[data-template="peri"] .shop.t-site .pr-hero-in { display: grid; gap: var(--s5); align-items: center; padding-top: var(--s5); padding-bottom: var(--s6); }
.site-body[data-template="peri"] .shop.t-site .pr-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s2); font-size: .76rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--pr-price); }
.site-body[data-template="peri"] .shop.t-site .pr-kicker::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--pr-ember); }
.site-body[data-template="peri"] .shop.t-site .pr-h1 { margin: 0; font-family: var(--t-head); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .86; color: var(--ink);
  font-size: min(clamp(3.6rem, 1.6rem + 9vw, 9rem), calc((100vw - 2 * var(--fs-gutter)) / (var(--pr-longest, 8) * .5))); overflow-wrap: normal; text-wrap: balance; }
.site-body[data-template="peri"] .shop.t-site .pr-hero-name { margin: var(--s2) 0 0; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .82rem; color: var(--muted); }
.site-body[data-template="peri"] .shop.t-site .pr-hero-tag { margin: var(--s3) 0 0; max-width: 36ch; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: color-mix(in srgb, var(--ink) 86%, transparent); }
.site-body[data-template="peri"] .shop.t-site .pr-order { display: grid; gap: 14px; margin-top: var(--s4); }
.site-body[data-template="peri"] .shop.t-site .pr-order-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.site-body[data-template="peri"] .shop.t-site .pr-status { border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 600; font-size: .86rem; }
.site-body[data-template="peri"] .shop.t-site .pr-status.ok .dot { background: #4fd18b; box-shadow: 0 0 12px #4fd18b; }
.site-body[data-template="peri"] .shop.t-site .pr-toggle { border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.site-body[data-template="peri"] .shop.t-site .pr-toggle button { border-radius: 999px; color: var(--muted); font-weight: 700; }
.site-body[data-template="peri"] .shop.t-site .pr-toggle button.on { background: var(--ink); color: var(--bg); }
.site-body[data-template="peri"] .shop.t-site .pr-order .type-only { color: var(--ink); font-weight: 700; }
.site-body[data-template="peri"] .shop.t-site .pr-facts .fact b { color: var(--ink); }
@media (max-width: 479px) { .site-body[data-template="peri"] .shop.t-site .pr-order-row > * { flex: 1 1 100%; } .site-body[data-template="peri"] .shop.t-site .pr-toggle { display: flex; } .site-body[data-template="peri"] .shop.t-site .pr-toggle button { flex: 1; } }
/* The circle */
.site-body[data-template="peri"] .shop.t-site .pr-orb { position: relative; isolation: isolate; justify-self: center; width: min(86vw, 420px); aspect-ratio: 1; }
.site-body[data-template="peri"] .shop.t-site .pr-orb::before { content: ""; position: absolute; inset: 4.6%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.site-body[data-template="peri"] .shop.t-site .pr-orb-glow { position: absolute; inset: -24%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(247, 164, 64, .32) 0%, rgba(226, 65, 46, .2) 34%, transparent 66%); pointer-events: none; }
.site-body[data-template="peri"] .shop.t-site .pr-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.site-body[data-template="peri"] .shop.t-site .pr-ring text { font: 800 8.6px var(--t-body); letter-spacing: .12em; fill: var(--ink); fill-opacity: .82; }
.site-body[data-template="peri"] .shop.t-site .pr-orb-photo { position: absolute; inset: 11%; overflow: hidden; border-radius: 50%; background: var(--soft);
  box-shadow: 0 0 0 1px rgba(247, 164, 64, .32), 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 90px -16px rgba(226, 65, 46, .45); }
.site-body[data-template="peri"] .shop.t-site .pr-orb-photo img { width: 100%; height: 100%; object-fit: cover; }
.site-body[data-template="peri"] .shop.t-site .pr-orb-photo .t-sample-tag { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.site-body[data-template="peri"] .shop.t-site .pr-orb.is-glow::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f7a440 0%, #e2412e 52%, #4a150c 100%); opacity: .9; box-shadow: 0 0 120px -10px rgba(226, 65, 46, .6); }
@media (min-width: 900px) {
  .site-body[data-template="peri"] .shop.t-site .pr-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s5); min-height: min(84svh, 820px); padding-top: var(--s6); padding-bottom: var(--s6); }
  .site-body[data-template="peri"] .shop.t-site .pr-hero.size-medium .pr-hero-in { min-height: min(64svh, 620px); }
  .site-body[data-template="peri"] .shop.t-site .pr-h1 { font-size: min(9rem, calc((min(100vw, var(--fs-max)) * .52 - var(--fs-gutter)) / (var(--pr-longest, 8) * .5))); }
  .site-body[data-template="peri"] .shop.t-site .pr-orb { width: min(42vw, 600px); justify-self: end; }
  .site-body[data-template="peri"] .shop.t-site .pr-hero.size-medium .pr-orb { width: min(34vw, 460px); }
}

/* ---------- choose your heat: a scale from lemon to extra hot that lights up */
.site-body[data-template="peri"] .shop.t-site .pr-heat-sec { padding-top: var(--fs-sec); }
.site-body[data-template="peri"] .shop.t-site .pr-heat-head { display: grid; gap: 6px; max-width: 720px; }
.site-body[data-template="peri"] .shop.t-site .pr-heat-head .fs-kicker { margin: 0; }
.site-body[data-template="peri"] .shop.t-site .pr-heat-head h2 { margin: 0; font-family: var(--t-head); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem); line-height: .88; }
.site-body[data-template="peri"] .shop.t-site .pr-heat-note { margin: var(--s1) 0 0; color: var(--muted); }
.site-body[data-template="peri"] .shop.t-site .pr-scale { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(60px, 1fr)); margin: var(--s4) 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.site-body[data-template="peri"] .shop.t-site .pr-scale::-webkit-scrollbar { display: none; }
.site-body[data-template="peri"] .shop.t-site .pr-scale::before { content: ""; position: absolute; left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); top: 31px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f3d36b, #f7a440 35%, #e2412e 70%, #961a12); opacity: .85; }
.site-body[data-template="peri"] .shop.t-site .pr-step { min-width: 0; }
.site-body[data-template="peri"] .shop.t-site .pr-step a { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 44px; padding: 20px 4px 18px; border-radius: 18px; color: var(--muted); text-decoration: none; text-align: center; transition: color .25s ease, background-color .3s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-step-dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--c); background: var(--bg); box-shadow: 0 0 0 5px var(--bg); transition: transform .35s var(--fs-ease), background-color .3s ease, box-shadow .35s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-step-name { font-family: var(--t-head); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(.95rem, .8rem + .8vw, 1.5rem); line-height: 1; overflow-wrap: anywhere; }
.site-body[data-template="peri"] .shop.t-site .pr-step-flames { display: flex; gap: 3px; height: 12px; }
.site-body[data-template="peri"] .shop.t-site .pr-step-flames i { width: 7px; height: 11px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: var(--c); opacity: .3; transition: opacity .3s ease, transform .3s var(--fs-ease); }
.site-body[data-template="peri"] .shop.t-site .pr-step a:is(:hover, :focus-visible, :active) { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.site-body[data-template="peri"] .shop.t-site .pr-step a:is(:hover, :focus-visible, :active) .pr-step-dot { background: var(--c); transform: scale(1.4); box-shadow: 0 0 0 5px var(--bg), 0 0 26px 6px var(--c); }
.site-body[data-template="peri"] .shop.t-site .pr-step a:is(:hover, :focus-visible, :active) .pr-step-flames i { opacity: 1; transform: translateY(-2px); }
.site-body[data-template="peri"] .shop.t-site .pr-step a:focus-visible { outline: 2px solid var(--pr-e2); outline-offset: 2px; }

/* ---------- build your platter */
.site-body[data-template="peri"] .shop.t-site .pr-platter-in { display: grid; gap: var(--s4); align-items: center; padding-top: var(--s4); padding-bottom: var(--s4); border-radius: 28px;
  background: radial-gradient(70% 90% at 0% 50%, rgba(226, 65, 46, .16), transparent 60%), var(--card); border: 1px solid var(--line); }
.site-body[data-template="peri"] .shop.t-site .pr-platter-media { justify-self: center; width: min(100%, 440px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgba(247, 164, 64, .3), 0 0 80px -20px rgba(226, 65, 46, .55); }
.site-body[data-template="peri"] .shop.t-site .pr-platter-media img { width: 100%; height: 100%; object-fit: cover; }
.site-body[data-template="peri"] .shop.t-site .pr-platter h2 { margin: 0 0 var(--s3); font-family: var(--t-head); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.8rem); line-height: .88; }
.site-body[data-template="peri"] .shop.t-site .pr-steps { margin: 0 0 var(--s4); padding: 0; list-style: none; counter-reset: none; }
.site-body[data-template="peri"] .shop.t-site .pr-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: 1.05rem; }
.site-body[data-template="peri"] .shop.t-site .pr-steps li:last-child { border-bottom: 1px solid var(--line); }
.site-body[data-template="peri"] .shop.t-site .pr-steps-no { font-family: var(--t-head); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--pr-price); }
.site-body[data-template="peri"] .shop.t-site .pr-platter-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.site-body[data-template="peri"] .shop.t-site .pr-from { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.site-body[data-template="peri"] .shop.t-site .pr-from span { color: var(--muted); font-weight: 600; }
.site-body[data-template="peri"] .shop.t-site .pr-from b { font-family: var(--t-head); font-weight: 900; font-size: 2.4rem; line-height: 1; }
@media (min-width: 900px) { .site-body[data-template="peri"] .shop.t-site .pr-platter-in.has-photo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s6); padding: var(--s5); } .site-body[data-template="peri"] .shop.t-site .pr-platter-in:not(.has-photo) { padding: var(--s5); } }

/* ---------- off the grill: one feature card, the rest as rows beside it */
.site-body[data-template="peri"] .shop.t-site .pr-picks { display: grid; gap: var(--s3); }
.site-body[data-template="peri"] .shop.t-site .pr-pick-rest { display: grid; gap: 12px; align-content: start; }
.site-body[data-template="peri"] .shop.t-site .pr-pick-lead, .site-body[data-template="peri"] .shop.t-site .pr-pick-cell { display: flex; min-width: 0; }
@media (min-width: 1000px) { .site-body[data-template="peri"] .shop.t-site .pr-picks { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s4); } .site-body[data-template="peri"] .shop.t-site .pr-picks.is-single { grid-template-columns: minmax(0, 760px); } }

/* ---------- the menu board */
.site-body[data-template="peri"] .shop.t-site .pr-board { display: grid; column-gap: var(--s6); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .site-body[data-template="peri"] .shop.t-site .pr-board { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; } .site-body[data-template="peri"] .shop.t-site .pr-board-li:nth-child(-n + 2) { border-top: 1px solid var(--line); } }
.site-body[data-template="peri"] .shop.t-site .pr-board-li { border-bottom: 1px solid var(--line); }
.site-body[data-template="peri"] .shop.t-site .pr-board-a { display: flex; align-items: center; gap: var(--s2); min-height: 88px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.site-body[data-template="peri"] .shop.t-site .pr-board-media { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-board-media img { width: 100%; height: 100%; object-fit: cover; }
.site-body[data-template="peri"] .shop.t-site .pr-board-name { flex: 0 1 auto; min-width: 0; font-family: var(--t-head); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1; overflow-wrap: anywhere; transition: color .25s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-board-rule { flex: 1 1 24px; min-width: 16px; height: 1px; background: var(--line); transition: background .35s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-board-meta { flex: none; font-weight: 700; font-size: .9rem; color: var(--pr-price); white-space: nowrap; }
.site-body[data-template="peri"] .shop.t-site .pr-board-go { flex: none; width: 20px; height: 20px; color: var(--muted); fill: currentColor; transition: transform .3s var(--fs-ease), color .25s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-board-a:hover .pr-board-rule { background: var(--pr-ember); }
.site-body[data-template="peri"] .shop.t-site .pr-board-a:hover .pr-board-go { transform: translateX(4px); color: var(--pr-e2); }
.site-body[data-template="peri"] .shop.t-site .pr-board-a:hover .pr-board-media { box-shadow: 0 0 0 2px var(--pr-e2), 0 0 24px -4px var(--pr-e1); }
@media (max-width: 479px) { .site-body[data-template="peri"] .shop.t-site .pr-board-rule { display: none; } .site-body[data-template="peri"] .shop.t-site .pr-board-name { flex: 1 1 auto; } }

/* ---------- dish cards: horizontal, dark, the photo rounded on the left */
.site-body[data-template="peri"] .shop.t-site :is(.items, .popular-track) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) and (max-width: 1023px) { .site-body[data-template="peri"] .shop.t-site :is(.items, .popular-track) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: stretch; gap: 14px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink);
  transition: transform .35s var(--fs-ease), border-color .3s ease, background-color .3s ease, box-shadow .35s ease; }
@media (min-width: 700px) { .site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card { grid-template-columns: 136px minmax(0, 1fr); gap: 18px; padding: 14px; } }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card:not(.soldout):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pr-e2) 45%, var(--line)); background: color-mix(in srgb, var(--card) 93%, var(--pr-e2)); box-shadow: 0 24px 50px -30px rgba(226, 65, 46, .5); }
.site-body[data-template="peri"] .shop.t-site .pr-media { position: relative; display: block; align-self: start; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--soft); }
.site-body[data-template="peri"] .shop.t-site .pr-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--fs-ease), opacity .6s ease; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card:not(.soldout):hover .pr-media img { transform: scale(1.07); }
.site-body[data-template="peri"] .shop.t-site .pr-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 2px 0 0; }
.site-body[data-template="peri"] .shop.t-site .pr-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card .mi-name { font-family: var(--t-head); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1; color: inherit; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card .mi-desc { -webkit-line-clamp: 2; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.site-body[data-template="peri"] .shop.t-site .pr-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card .mi-price { font-weight: 800; font-size: 1.02rem; color: var(--pr-price); }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card .mi-add { position: static; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; color: var(--ink); box-shadow: none; font-size: 1.4rem; font-weight: 400;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .3s var(--fs-ease); }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card:not(.soldout):hover .mi-add { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); transform: rotate(90deg); }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card .mi-add.has, .site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card:not(.soldout):hover .mi-add.has { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-size: .95rem; font-weight: 800; transform: none; }
/* The heat meter on a spicy dish (the "spicy" label itself stays for screen readers) */
.site-body[data-template="peri"] .shop.t-site .pr-meter { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; margin-top: 1px; }
.site-body[data-template="peri"] .shop.t-site .pr-meter i { width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--pr-e2), var(--pr-e1)); }
.site-body[data-template="peri"] .shop.t-site .pr-meter i:nth-child(1) { height: 6px; }
.site-body[data-template="peri"] .shop.t-site .pr-meter i:nth-child(2) { height: 10px; }
.site-body[data-template="peri"] .shop.t-site .pr-meter i:nth-child(3) { height: 15px; }
.site-body[data-template="peri"] .shop.t-site .pr-card .fs-mark.m-spicy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
/* The feature: the photo wide on top, the name larger */
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.k-feature { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: 14px 14px 18px; border-radius: 26px; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.k-feature .pr-media { aspect-ratio: 16 / 10; border-radius: 18px; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.k-feature .pr-body { padding: 4px 6px 0; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.k-feature .mi-name { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.k-feature .mi-desc { -webkit-line-clamp: 3; font-size: 1rem; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.k-feature .mi-price { font-size: 1.2rem; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.k-feature .mi-add { width: 52px; height: 52px; }
/* No photo (or words only): the same card without the photo column */
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.pr-words { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 14px 18px; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.soldout .mi-add { display: none; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.soldout .mi-price { color: var(--muted); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card.soldout .pr-media img { filter: grayscale(1); opacity: .5; }
.site-body[data-template="peri"] .shop.t-site .fs-dish.pr-card:focus-visible { outline: 2px solid var(--pr-e2); outline-offset: 3px; border-radius: 20px; }

/* ---------- the menu page */
.site-body[data-template="peri"] .shop.t-site .pr-pagehead { border-bottom: 0; background: radial-gradient(55% 140% at 88% 0%, var(--pr-glow), transparent 62%), var(--bg); }
.site-body[data-template="peri"] .shop.t-site .pr-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pr-e1) 25%, var(--pr-e2) 60%, transparent); }
.site-body[data-template="peri"] .shop.t-site .pr-pagehead h1 { font-weight: 900; text-transform: uppercase; }
.site-body[data-template="peri"] .shop.t-site .pr-pagehead .fs-toggle { border: 1px solid var(--line); border-radius: 999px; }
.site-body[data-template="peri"] .shop.t-site .pr-pagehead .fs-toggle button { border-radius: 999px; }
/* The section column (wide screens; shop-templates.css shows it from 1200 px and hides the bar's links) */
.site-body[data-template="peri"] .shop.t-site .pr-side { position: sticky; top: calc(var(--fs-head-min) + 24px); display: flex; flex-direction: column; gap: 2px; margin: var(--s3) 0 0; padding: 0 6px 0 0; max-height: calc(100vh - var(--fs-head-min) - 48px); overflow: hidden auto; border: 0; }
.site-body[data-template="peri"] .shop.t-site .pr-side-title { margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.site-body[data-template="peri"] .shop.t-site .pr-side a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 10px 8px 16px; border: 0; border-left: 1px solid var(--line); border-radius: 0 10px 10px 0;
  color: var(--muted); font-weight: 600; font-size: .95rem; line-height: 1.25; white-space: normal; text-decoration: none; transition: color .2s ease, background-color .25s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-side a small { flex: none; font-size: .74rem; font-weight: 700; opacity: .7; }
.site-body[data-template="peri"] .shop.t-site .pr-side a:hover { color: var(--ink); border-color: var(--line); }
.site-body[data-template="peri"] .shop.t-site .pr-side a.active { color: var(--ink); border-color: transparent; background: linear-gradient(90deg, rgba(226, 65, 46, .16), transparent 90%); }
.site-body[data-template="peri"] .shop.t-site .pr-side a.active::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--pr-e2), var(--pr-e1)); }
/* The slim pill bar (phones and tablets) */
.site-body[data-template="peri"] .shop.t-site .menu-nav.pr-menunav { border-bottom: 1px solid var(--line); }
.site-body[data-template="peri"] .shop.t-site .pr-menunav .cat-tabs { gap: 4px; }
.site-body[data-template="peri"] .shop.t-site .pr-menunav .cat-tabs a { z-index: 1; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: .88rem; transition: color .25s ease; }
.site-body[data-template="peri"] .shop.t-site .pr-menunav .cat-tabs a.active { color: var(--bg); }
.site-body[data-template="peri"] .shop.t-site .pr-menunav .fs-ink { top: 0; bottom: auto; z-index: 0; height: 44px; border-radius: 999px; background: var(--ink); }
.site-body[data-template="peri"] .shop.t-site .pr-menunav .search input { border: 1px solid var(--line); }
.site-body[data-template="peri"] .shop.t-site .pr-cathead { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); padding-bottom: 0; border-bottom: 0; }
.site-body[data-template="peri"] .shop.t-site .cat .pr-cathead h2 { flex: 0 1 auto; min-width: 0; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); line-height: .9; text-transform: uppercase; }
.site-body[data-template="peri"] .shop.t-site .pr-cat-rule { flex: 1 1 24px; min-width: 16px; height: 1px; background: linear-gradient(90deg, var(--pr-e1), var(--pr-e2) 40%, transparent); opacity: .8; }
.site-body[data-template="peri"] .shop.t-site .fs-menu-offers li { background: var(--card); border-color: var(--line); box-shadow: inset 2px 0 0 var(--pr-e2); }
.site-body[data-template="peri"] .shop.t-site .fs-menu-offers li b { color: var(--pr-price); }

/* ---------- story, promo, info: the circle and the glow again */
@media (min-width: 900px) { .site-body[data-template="peri"] .shop.t-site .fs-story.has-photo .fs-story-media { aspect-ratio: 1; border-radius: 50%; max-width: 520px; justify-self: center; width: 100%; box-shadow: 0 0 90px -24px rgba(226, 65, 46, .5); } }
.site-body[data-template="peri"] .shop.t-site .fs-story h2 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.6rem); line-height: .9; text-transform: uppercase; }
.site-body[data-template="peri"] .shop.t-site .fs-promo:not(.has-photo) { background: radial-gradient(70% 140% at 100% 50%, rgba(226, 65, 46, .38), transparent 62%), radial-gradient(40% 80% at 0% 0%, rgba(247, 164, 64, .12), transparent 70%), #1f1916; color: #f6ebdd; }
.site-body[data-template="peri"] .shop.t-site .fs-promo:not(.has-photo) .fs-cta { background: var(--brand); color: var(--brand-ink); }
.site-body[data-template="peri"] .shop.t-site .fs-promo h2 { text-transform: uppercase; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem); line-height: .88; }
.site-body[data-template="peri"] .shop.t-site .fs-info-cell > .fs-ico { color: var(--pr-e2); }
.site-body[data-template="peri"] .shop.t-site .fs-info-cell .fs-info-big { text-transform: uppercase; font-size: 1.7rem; line-height: 1; }
.site-body[data-template="peri"] .shop.t-site :is(.fs-find-card, .fs-about-facts) { border-radius: 22px; }
.site-body[data-template="peri"] .shop.t-site .fs-sec-head h2 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem); line-height: .88; text-transform: uppercase; }

/* ---------- footer: centred under an ember glow */
.site-body[data-template="peri"] .shop.t-site .pr-foot { position: relative; background: radial-gradient(50% 90% at 50% 0%, rgba(226, 65, 46, .2), transparent 70%), #0f0c0b; color: #f6ebdd; }
.site-body[data-template="peri"] .shop.t-site .pr-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pr-e1) 30%, var(--pr-e2) 70%, transparent); }
.site-body[data-template="peri"] .shop.t-site .pr-foot .fs-foot-top { flex-direction: column; align-items: center; text-align: center; }
.site-body[data-template="peri"] .shop.t-site .pr-foot .fs-foot-brand { justify-items: center; }
.site-body[data-template="peri"] .shop.t-site .pr-foot .fs-foot-name { font-size: clamp(3rem, 1.8rem + 6vw, 7rem); line-height: .86; text-transform: uppercase;
  background: linear-gradient(180deg, #f6ebdd 40%, #f7a440 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.site-body[data-template="peri"] .shop.t-site .pr-foot .fs-foot-grid h2 { color: #f7a440; }

/* ---------- the dish sheet, basket and checkout */
.site-body[data-template="peri"] .sheet-panel :is(.sheet-head h2, .item-body h2), .site-body[data-template="peri"] :is(.basket-panel, .basket-sheet) .basket-head h2,
.site-body[data-template="peri"] .checkout-sheet .co-card h3, .site-body[data-template="peri"] .status-page :is(.status-hero .big, .card h3) { font-family: var(--t-head); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.site-body[data-template="peri"] .item-price { color: var(--pr-price); font-weight: 800; }
.site-body[data-template="peri"] .opt-group.is-many label.opt:has(input:checked) { border-color: var(--pr-e2); background: color-mix(in srgb, var(--pr-e2) 12%, var(--card)); }
.site-body[data-template="peri"] .fs-bar-go, .site-body[data-template="peri"] #view-basket { border-radius: 999px; }
.site-body[data-template="peri"] .fly-dot { background: radial-gradient(circle at 35% 35%, #f7a440, #e2412e); box-shadow: 0 0 18px 4px rgba(226, 65, 46, .55); }

/* ---------- motion (none of it with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .site-body[data-template="peri"] .shop.t-site .pr-ring { animation: pr-turn 60s linear infinite; }
  .site-body[data-template="peri"] .shop.t-site .pr-orb-glow { animation: pr-breathe 7s ease-in-out infinite alternate; }
  .site-body[data-template="peri"]:not(.fs-painted) .shop.t-site .pr-ember-line { animation: pr-draw 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .site-body[data-template="peri"]:not(.fs-painted) .shop.t-site .pr-hero-text > * { animation: fs-rise .9s var(--fs-ease) both; }
  .site-body[data-template="peri"] .shop.t-site .pr-hero-text > :nth-child(2) { animation-delay: .08s; }
  .site-body[data-template="peri"] .shop.t-site .pr-hero-text > :nth-child(3) { animation-delay: .16s; }
  .site-body[data-template="peri"] .shop.t-site .pr-hero-text > :nth-child(4) { animation-delay: .24s; }
  .site-body[data-template="peri"] .shop.t-site .pr-hero-text > :nth-child(5) { animation-delay: .32s; }
  .site-body[data-template="peri"]:not(.fs-painted) .shop.t-site .pr-orb-photo { animation: pr-orb-in 1.4s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .site-body[data-template="peri"] .shop.t-site .pr-step.is-in .pr-step-dot { animation: pr-ignite .8s ease both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
}
@keyframes pr-turn { to { transform: rotate(360deg); } }
@keyframes pr-breathe { from { opacity: .75; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@keyframes pr-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pr-orb-in { from { opacity: 0; transform: scale(.9) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes pr-ignite { 0% { box-shadow: 0 0 0 5px var(--bg), 0 0 0 0 var(--c); } 50% { box-shadow: 0 0 0 5px var(--bg), 0 0 22px 6px var(--c); } 100% { box-shadow: 0 0 0 5px var(--bg), 0 0 0 0 var(--c); } }