/* Shared page styles for takeaways' ordering pages (1.23, rebuilt for 1.24 with the website builder). Loaded after
   shop.css on every ordering page. Template rules are scoped to a templated page (.tpl-body / .shop.tpl, set by
   order.js), so the Classic page looks exactly as before; only the page sections an owner adds in the builder
   (.t-sec) are styled on Classic too. Each takeaway's own colour is --brand (with --brand-ink for words on it and
   --brand-text for words in it, darkened by order.js until it reads at 4.5:1 on the page's background).
   Fonts are self-hosted (public/fonts, SIL Open Font License, see OFL.txt): no outside font service.
   2.1: the seven one-page templates of 1.23/1.24 are gone (every design is a template family, styled by
   shop-flagship.css and public/tpl/<key>.css); what is left here is shared by them and by Classic. */

@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/static/fonts/InterDisplay-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/static/fonts/InterDisplay-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/static/fonts/InterDisplay-ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/static/fonts/InterDisplay-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/static/fonts/InterDisplay-BlackItalic.woff") format("woff"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("/static/fonts/Caladea-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("/static/fonts/Caladea-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("/static/fonts/Caladea-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Medium.woff") format("woff"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Bold.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; }

/* =====================================================================================================
   TOKENS: the builder's choices (heading font, text font, buttons, spacing), drawn the same way everywhere
   ===================================================================================================== */
.shop-body {
  --t-sec: 56px; --t-btn-r: 12px; --brand-text: color-mix(in srgb, var(--brand) 80%, var(--ink));
  --t-head: inherit; --t-weight: 800; --t-case: none; --t-track: -.02em; --t-style: normal;
  --t-tint: color-mix(in srgb, var(--brand) 9%, var(--bg)); --t-tint-2: color-mix(in srgb, var(--brand) 16%, var(--bg));
  --t-accent: color-mix(in srgb, var(--brand) 78%, var(--ink));
}
.tpl-body {
  --t-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-head: "Inter Display", "Inter", system-ui, sans-serif;
  font-family: var(--t-body);
}
.tpl-body[data-theme="dark"] { --t-accent: color-mix(in srgb, var(--brand) 55%, #fff); }
.tpl-body[data-font="serif"] { --t-head: "Caladea", Georgia, "Times New Roman", serif; --t-weight: 700; --t-track: -.005em; }
.tpl-body[data-font="editorial"] { --t-head: "Caladea", Georgia, "Times New Roman", serif; --t-weight: 400; --t-track: -.01em; --t-style: italic; }
.tpl-body[data-font="rounded"] { --t-head: "Poppins", "Inter", system-ui, sans-serif; --t-weight: 700; --t-track: -.015em; }
.tpl-body[data-font="condensed"] { --t-weight: 900; --t-case: uppercase; --t-track: -.025em; }
.tpl-body[data-font="street"] { --t-weight: 900; --t-case: uppercase; --t-track: -.02em; --t-style: italic; }
.tpl-body[data-body-font="poppins"] { --t-body: "Poppins", "Inter", system-ui, sans-serif; }
.tpl-body[data-body-font="caladea"] { --t-body: "Caladea", Georgia, "Times New Roman", serif; }
.shop-body[data-buttons="pill"] { --t-btn-r: 999px; }
.shop-body[data-buttons="square"] { --t-btn-r: 2px; }
.shop-body[data-spacing="compact"] { --t-sec: 36px; }
.shop-body[data-spacing="airy"] { --t-sec: 76px; }
@media (min-width: 900px) {
  .shop-body { --t-sec: 80px; }
  .shop-body[data-spacing="compact"] { --t-sec: 52px; }
  .shop-body[data-spacing="airy"] { --t-sec: 112px; }
}
.shop.tpl :is(h1, h2, h3), .tpl-body .sheet-panel :is(h2, h3), .shop.tpl :is(.t-foot-name, .t-brand > span) {
  font-family: var(--t-head); font-weight: var(--t-weight); text-transform: var(--t-case); letter-spacing: var(--t-track); font-style: var(--t-style); font-stretch: normal;
}
.tpl-body .sheet-panel :is(h2, h3) { text-transform: none; font-style: normal; }
.shop.tpl .mi-price, .tpl-body .bl-price, .tpl-body .totals, .tpl-body .opt-price { font-variant-numeric: tabular-nums; }
/* Button shapes: every button on the page and in its sheets (dish, basket, checkout) */
.tpl-body :is(.btn, .hero-btn, .type-toggle, .type-toggle button) { border-radius: var(--t-btn-r); }
.tpl-body .stepper { border-radius: var(--t-btn-r); }
.tpl-body .stepper button { border-radius: max(2px, calc(var(--t-btn-r) - 4px)); }

/* ---------- focus you can always see: the page's own text colour, never only the brand colour */
.tpl-body :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.shop.tpl .mi:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* =====================================================================================================
   PARTS EVERY TEMPLATE SHARES
   ===================================================================================================== */
.shop.tpl .hero { position: relative; }
.shop.tpl .hero-logo { margin-top: 0; border: 0; box-shadow: none; }
.shop.tpl .hero-logo.letter { font-family: var(--t-head); font-weight: var(--t-weight); font-style: var(--t-style); }
.shop.tpl .t-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop.tpl .hero-status { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: .4em .85em; border-radius: var(--pill); background: var(--soft); color: var(--ink); font-size: .92rem; }
.shop.tpl .hero-tagline { color: var(--ink); }
.shop.tpl .hero-facts { margin: 0; }
.shop.tpl .hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shop.tpl .hero-btn { min-height: 44px; }
.shop-body .shop.tpl a.hero-btn { color: var(--ink); }
.shop.tpl .preview-ribbon { position: static; }
.shop.tpl .t-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shop.tpl .t-brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; line-height: 1.2; }
.shop.tpl .t-brand .hero-logo { flex: none; width: 44px; height: 44px; object-fit: contain; }
.shop.tpl .t-brand .hero-logo.letter { display: grid; place-items: center; font-size: 1.3rem; background: var(--brand); color: var(--brand-ink); }
.shop.tpl .t-cta { width: fit-content; padding: 0 28px; }
/* A sample photo is marked as illustrative wherever customers see it */
.shop-body .t-sample-tag { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .58); color: #fff;
  font: 500 .7rem/1.3 var(--t-body, system-ui), system-ui, sans-serif; letter-spacing: .02em; text-transform: none; font-style: normal; pointer-events: none; }
.shop.tpl .cat h2 { font-size: 1.5rem; line-height: 1.15; }
.shop.tpl .mi-name { overflow-wrap: anywhere; }
.shop.tpl .mi-allergens { display: block; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.shop.tpl .mi-opts { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--muted); }
.shop.tpl .mi-ph { display: none; }
.shop.tpl .mi-media { overflow: hidden; border-radius: var(--r-sm); }
.shop.tpl .mi.noimg .mi-media { overflow: visible; }
.shop.tpl .mi-media img { background: var(--soft); }
@media (max-width: 599px) { .shop.tpl.l-grid .items .mi-allergens { display: none; } .shop.tpl.l-grid .cat.drinks .items .mi-allergens { display: block; }
}
.shop.tpl .tags { vertical-align: 1px; }
/* Footers: the classic footer's layout is replaced; space is kept under it for the phone's basket bar. */
.shop.tpl .t-footer { display: block; margin: var(--t-sec) 0 0; padding: 40px 0 calc(120px + env(safe-area-inset-bottom)); border: 0; font-size: .95rem; color: var(--ink); text-align: left; }
@media (min-width: 1024px) { .shop.tpl .t-footer { padding-bottom: 48px; }
}
.shop.tpl .t-foot-name { font-size: 1.4rem; margin: 0 0 6px; line-height: 1.2; overflow-wrap: anywhere; }
.shop.tpl .t-foot-line { margin: 0 0 4px; color: var(--muted); }
.shop.tpl .t-foot-line a { color: var(--ink); font-weight: 600; }
.shop.tpl .t-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; font-size: .9rem; }
.shop.tpl .t-legal :is(a, .link) { color: var(--ink); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; text-align: left; }
.shop.tpl .t-footer .socials { margin-top: 14px; }
.shop.tpl .t-footer .socials a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); border-color: var(--line); }
.shop.tpl .t-foot-cols { display: grid; gap: 22px; }
@media (min-width: 700px) { .shop.tpl .t-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shop.tpl .t-foot-cols h2 { margin: 0 0 6px; font: 700 .78rem/1.3 var(--t-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.shop.tpl .menu-nav { margin-top: 18px; }
.shop.tpl .cat-tabs a { min-height: 44px; display: inline-flex; align-items: center; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.shop.tpl .cat-group { flex: none; align-self: center; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line); }
.shop.tpl .cat-group:first-child { padding-left: 0; border-left: 0; }

/* ---------- a column of section links beside the menu on wide screens (Indian & Pakistani) */
.shop.tpl .side-col { display: none; }
@media (min-width: 1200px) {
  .shop.tpl .shop-grid.has-side { grid-template-columns: 184px minmax(0, 1fr) 360px; }
  .shop.tpl .shop-grid.has-side .side-col { display: block; padding-top: 18px; }
  .shop.tpl .shop-grid.has-side .menu-nav .cat-tabs { display: none; }
  .shop.tpl .shop-grid.has-side .menu-nav { padding-bottom: 12px; }
}
.shop.tpl .side-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 32px); overflow: auto; margin: 0; }
.shop.tpl .side-nav .side-title { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.shop-body .shop.tpl .side-nav a { white-space: normal; padding: 9px 12px; border-bottom: 0; border-left: 3px solid var(--line); color: var(--muted); font-weight: 600; line-height: 1.3; }
.shop-body .shop.tpl .side-nav a.active, .shop-body .shop.tpl .side-nav a:hover { color: var(--ink); border-left-color: var(--brand); background: var(--t-tint); }

/* =====================================================================================================
   PAGE SECTIONS (website builder): featured dishes, promo banners, story, gallery, opening hours and info.
   Shared shapes here (Classic too); each template adds its own look further down.
   ===================================================================================================== */
.shop .t-sec { position: relative; padding-top: var(--t-sec); }
.shop .t-sec.at-before:first-of-type { padding-top: calc(var(--t-sec) * .75); }
.shop .t-sec h2 { margin: 0; font-size: clamp(1.6rem, 5.4vw, 2.5rem); line-height: 1.08; overflow-wrap: anywhere; }
.shop .t-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.shop .t-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Featured dishes: they scroll sideways on a phone, a grid on a computer. The cards are the menu's own dish cards. */
.shop .t-feat-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 74%); gap: 14px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; list-style: none; }
.shop .t-feat-cell { min-width: 0; scroll-snap-align: start; display: flex; }
@media (min-width: 600px) { .shop .t-feat-track { grid-auto-columns: minmax(240px, 42%); }
}
@media (min-width: 1024px) {
  .shop .t-feat-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 4px 0 0; overflow: visible; }
  .shop .t-feat-track.many { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.shop .mi.feat { flex-direction: column-reverse; justify-content: flex-end; gap: 0; padding: 0; min-height: 0; overflow: hidden; height: 100%; }
.shop .mi.feat .mi-media { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.shop .mi.feat .mi-media img { border-radius: 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.shop .mi.feat:hover .mi-media img { transform: scale(1.04); }
.shop .mi.feat .mi-text { padding: 14px 16px 16px; }
.shop .mi.feat .mi-desc { -webkit-line-clamp: 2; }
.shop .mi.feat.noimg .mi-media { position: absolute; right: 12px; bottom: 12px; width: auto; aspect-ratio: auto; }
.shop .mi.feat.noimg .mi-text { padding-right: 64px; min-height: 140px; }
.shop.tpl .mi.feat.noimg .mi-media { position: relative; right: auto; bottom: auto; width: 100%; aspect-ratio: 4 / 3; }
.shop.tpl .mi.feat.noimg .mi-text { padding-right: 16px; min-height: 0; }
.shop.tpl .mi.feat .mi-ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--t-tint-2); color: var(--t-accent); font-family: var(--t-head); font-weight: var(--t-weight); font-style: var(--t-style); font-size: 3.6rem; }
.shop.tpl .mi.feat.noimg .mi-add { position: absolute; right: 10px; bottom: 10px; border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
/* Promo banner: a photo with a panel of words, or a block of the takeaway's colour. The words always sit on a
   solid panel (never straight on the photo), so they stay readable whatever the photo looks like. */
.shop .t-promo { position: relative; display: block; overflow: hidden; isolation: isolate; }
.shop .t-promo.is-colour { background: var(--brand); color: var(--brand-ink); }
.shop .t-promo.is-photo { background: var(--ink); color: var(--bg); }
.shop .t-promo-media { position: relative; z-index: 0; aspect-ratio: 16 / 10; }
.shop .t-promo-body { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 16px 36px; }
.shop .t-promo.is-photo .t-promo-body h2 { color: var(--bg); }
.shop .t-promo.is-colour .t-promo-body h2 { color: var(--brand-ink); }
.shop .t-promo-body h2 { max-width: 16ch; }
.shop .t-promo-body p { max-width: 46ch; margin: 10px 0 0; font-size: 1.08rem; line-height: 1.5; }
.shop .t-promo-btn { width: fit-content; margin-top: 20px; padding: 0 26px; border-radius: var(--t-btn-r); }
.shop-body .t-promo.is-photo .t-promo-btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.shop-body .t-promo.is-colour .t-promo-btn { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); }
.shop-body .t-promo :focus-visible { outline-color: currentColor; }
.shop .t-promo .t-sample-tag { top: 10px; bottom: auto; }
@media (min-width: 900px) {
  .shop .t-promo.is-photo { display: grid; align-items: end; min-height: 480px; background: none; color: var(--ink); }
  .shop .t-promo.is-photo .t-promo-media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .shop .t-promo.is-photo .t-promo-body { width: min(480px, 46%); margin: 0 0 44px max(24px, calc((100vw - 1200px) / 2 + 24px)); padding: 36px; border-radius: var(--r); background: var(--card); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
  .shop .t-promo.is-photo .t-promo-body h2 { color: var(--ink); }
  .shop-body .t-promo.is-photo .t-promo-btn { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
  .shop .t-promo-body { padding: 64px 24px 56px; }
}
/* The menu after sections above it: a little air before the offers and section links */
.shop .t-sec.at-before ~ .shop-grid { padding-top: calc(var(--t-sec) * .5); }
/* Story: the takeaway's own "About us" words, with a photo if they chose one */
.shop .t-story-grid { display: grid; gap: 24px; align-items: center; }
.shop .t-story-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--soft); }
.shop .t-story-body .about-text { margin: 14px 0 0; max-width: 62ch; color: var(--ink); line-height: 1.7; white-space: pre-line; font-size: 1.04rem; }
@media (min-width: 900px) { .shop .t-story-grid.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
}
/* Gallery */
.shop .t-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.shop .t-gallery li { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--soft); }
.shop .t-gallery.n1 { grid-template-columns: minmax(0, 1fr); }
.shop .t-gallery.n1 li { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .shop .t-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .shop .t-gallery.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop .t-gallery.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop .t-gallery li:first-child:not(:only-child) { grid-row: span 2; grid-column: span 2; }
  .shop .t-gallery.n2 li:first-child, .shop .t-gallery.n3 li:first-child { grid-row: auto; grid-column: auto; }
}
/* Opening hours and info: the takeaway's real hours, address and delivery areas */
.shop .t-info-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .shop .t-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shop .t-info-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); min-width: 0; }
.shop .t-info-card h3 { margin: 0 0 12px; font-size: 1.1rem; }
.shop .t-info-card p { margin: 0 0 8px; line-height: 1.5; overflow-wrap: anywhere; }
.shop .t-info-card .socials { margin-top: 10px; }
.shop .t-hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.shop .t-hours :is(th, td) { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.shop .t-hours td { text-align: right; padding-left: 12px; }
.shop .t-hours tr.today :is(th, td) { font-weight: 700; }
.shop .t-zones { margin: 0 0 10px; padding: 0; list-style: none; }
.shop .t-zones li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .93rem; line-height: 1.45; }

/* =====================================================================================================
   MOTION: only where it helps (photos settling in, sheets sliding up, the basket answering a tap), and none at
   all for people who ask for less motion
   ===================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .shop.tpl .reveal { opacity: 0; transform: translateY(16px) scale(1.015); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .shop.tpl .reveal.is-in { opacity: 1; transform: none; }
  .shop.tpl .t-hero .t-cover { animation: t-settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .shop.tpl .t-feat-cell { animation: t-rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .tpl-body .sheet:not([hidden]) { animation: t-fade .2s ease both; }
  .tpl-body .sheet:not([hidden]) .sheet-panel { animation: t-up .34s cubic-bezier(.2, .8, .2, 1) both; }
  @media (min-width: 700px) { .tpl-body .sheet:not([hidden]) .sheet-panel { animation-name: t-pop; }
}
  .tpl-body #view-basket.bump { animation: t-bump .5s cubic-bezier(.3, 1.6, .5, 1); }
  .tpl-body #view-basket.bump .count { animation: t-count .5s ease; }
  .tpl-body .basket-panel.bump { animation: t-glow .8s ease; }
  .shop.tpl .mi .mi-media img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .shop.tpl .mi:not(.soldout):hover .mi-media img { transform: scale(1.04); }
  .shop.tpl .t-cta, .shop .t-promo-btn { transition: transform .15s ease, box-shadow .15s ease; }
  .shop.tpl .t-cta:hover, .shop .t-promo-btn:hover { transform: translateY(-1px); }
}
@keyframes t-settle { from { transform: scale(1.06); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes t-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes t-fade { from { background: rgba(20, 16, 12, 0); } }
@keyframes t-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes t-pop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes t-bump { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes t-count { 40% { transform: scale(1.35); } }
@keyframes t-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--brand) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .shop.tpl *, .tpl-body .sheet * { transition: none !important; animation: none !important; }
  .shop.tpl .reveal { opacity: 1; transform: none; }
}

/* Offers: loud blocks */

/* Section buttons: chunky capitals */

/* Dishes: dark poster cards, the price as a tag in the takeaway's colour */

/* Featured: tall poster cards with the price stamped on the photo */

/* Promo: half photo, half a block of colour with huge words */

/* Dishes, photo beside: a printed menu line (name, dotted leader, price) with a round photo */

/* Dishes, big photo cards: the photo in an arch, words centred under it */

/* Featured: a numbered list like the first page of a printed menu */

/* Promo: the photo framed, with a cream card laid over it */

/* Featured: platters with a square photo beside the words */

/* Promo: an olive band with the photo in a circle */

/* Featured: framed cards with a fine gold edge, names centred */

/* Promo: a deep band in the takeaway's colour with a gold rule, the photo framed inside it */

/* Featured: clean cards, lots of air */

/* Promo: a soft rounded photo with a small card */

/* Featured: a mosaic, the first pick big */

/* Promo: a seasonal band with sprinkles and a round photo */

/* Dishes, photo beside: big tap targets and a big Add */

/* Featured: deal cards with a slanted price tag */

/* Promo: a yellow band with a slanted photo */

/* ---------- the basket: suggestions (Desserts & Shakes) */
.tpl-body .upsell { margin-top: 14px; padding: 12px; border-radius: var(--r); background: var(--t-tint); }
.tpl-body .upsell-title { margin: 0 0 8px; font-weight: 700; font-size: .92rem; }
.tpl-body .upsell-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tpl-body .upsell-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 6px; border: 0; border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tpl-body .upsell-item img, .tpl-body .upsell-ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r-sm) - 2px); }
.tpl-body .upsell-ph { display: grid; place-items: center; background: var(--t-tint-2); color: var(--t-accent); font-family: var(--t-head); font-weight: 700; font-size: 1.4rem; }
.tpl-body .upsell-name { font-size: .82rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tpl-body .upsell-price { font-size: .8rem; color: var(--muted); }

/* ---------- the "Popular" row in every template: a little narrower cards that scroll sideways */
.shop.tpl .popular-track .mi.card { width: 200px; }
.shop.tpl .popular-track .mi-desc, .shop.tpl .popular-track .mi-allergens { display: none; }

/* ---------- the order page after checkout (status.js) wears the template's fonts */
.tpl-body .status-page :is(h1, h3, .big) { font-family: var(--t-head); font-weight: var(--t-weight); font-style: var(--t-style); }
.tpl-body .status-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; font-family: var(--t-head); font-weight: var(--t-weight); font-style: var(--t-style); text-transform: var(--t-case); font-size: 1.2rem; }
.tpl-body a.status-brand { color: var(--ink); text-decoration: none; }
.tpl-body .status-brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; }

/* 2.1 Classic's offers, contact and text sections */
.shop .t-sec-lead { max-width: 60ch; margin: 0 0 12px; color: var(--muted); }
.shop .t-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.shop .t-offers li { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r, 12px); background: var(--card); }
.shop .t-offers li.is-later { opacity: .75; }
.shop .t-text p { max-width: 68ch; margin: 0 0 10px; line-height: 1.6; }