/* ============================================================
   CUSTOM — Per-store overrides for Template PT
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* ===== Open now / Closed now badge (new-website standards 2026-10-22) =====
   Sits just under the header (absolute, so it never shifts the layout).
   Hidden until the live hours check answers; stays hidden on any error. */
.open-badge {
  position: absolute;
  top: calc(100% + 8px);
  left: max(12px, calc((100% - 1200px) / 2 + 12px));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.open-badge[hidden] { display: none; }
.open-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
}
.open-badge.is-open::before { background: #15803d; }
.open-badge.is-closed::before { background: #b91c1c; }

/* ============================================================
   RAKESH DESIGN RULES — Oriental Bowl (binding, 2026-10-24)
   Clean, bright, minimal, photo-led. White + light-grey base.
   ONE accent (#D61A20, from the logo) on buttons + max 2 bands.
   Schibsted Grotesk 600 headings (Rakesh 2026-10-24 03:34), system body, 2 weights (400/600).
   Headings ~28px, tight tracking; body 16px / 1.4.
   16px image radius, no shadows, no gradients, no glass.
   Buttons: 10px radius, solid accent + white text + small ">".
   Secondary: white with a thin border. One button per section.
   ============================================================ */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-display: "Schibsted Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, sans-serif;
  --pt-r-btn: 10px;
  --pt-r-img: 16px;
  --pt-deep: var(--brand);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --pt-shadow: none;
}
html, body { background: #ffffff; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.4; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }          /* ~28px */
h3 { font-size: clamp(1.125rem, 1.6vw, 1.25rem); }
h1 { font-size: clamp(1.875rem, 3.4vw, 2.5rem); }
b, strong, th, dt { font-weight: 600; }
p, li, dd, td { font-size: 1rem; line-height: 1.4; }
* , *::before, *::after { box-shadow: none !important; text-shadow: none !important; }

/* buttons */
.btn, .btn-line, .btn-ghost, .btn--butter, .btn--green, .btn-secondary, .btn-small {
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  transform: none;
}
.btn:hover { transform: none; }
.btn { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.btn--green, .btn--butter, .btn-line, .btn-ghost, .btn-secondary {
  background: #fff; color: var(--ink); border: 1px solid var(--pt-line);
}
.btn--green:hover, .btn--butter:hover, .btn-line:hover, .btn-ghost:hover, .btn-secondary:hover {
  background: #fff; color: var(--ink); border-color: var(--ink);
}
.btn .arrow { display: none; }
.btn::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  flex: none;
}
.btn--green::after, .btn--butter::after { display: none; }

/* header nav: flat, no pills */
.site-nav a, .nav-toggle, .chip, .cat-tile { border-radius: 10px; }

/* photos: 16px corners, no shadows (logos, hero slides and the badge excluded) */
main img, .plate img, .gallery img, figure img, .ph-img img, .dish-hero img, .about-img img,
.story img, .split img, .media img, .contact-sec iframe, iframe {
  border-radius: 16px;
}
.brand img, .foot-brand img, .hero-slide img, .hero-full img, .hero-slides img, [class*="hero-slide"] img { border-radius: 0; }

/* no glass: solid white surfaces where the template blurred */
[class*="store-bar"], .site-header, .header-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }


/* Open-now badge: flat (thin border instead of shadow) */
.open-badge { border: 1px solid var(--pt-line); }

/* accent budget: red only on buttons + the menu band + the CTA band */
.site-topline { background: var(--canvas); color: var(--ink); }
.site-topline a, .site-topline a:hover { color: var(--ink); }
.kicker, .kicker--light, .menu-band .kicker { color: var(--pt-ink-2); }
.kicker::before, .kicker--light::before, .menu-band .kicker::before { background: currentColor; }
.hero-full .kicker, .kicker--light { color: #fff; }
.menu-band .kicker { color: rgba(255, 255, 255, 0.9); }
h1 em, h2 em, h3 em, .sec-head em, .faq-intro em, .story-copy em { color: inherit; font-style: normal; }
.menu-band h2 em, .cta-band h2 em { color: #fff; }
.plate-foot, .plate-no { color: var(--pt-ink-2); }
.site-nav a.active, .site-nav a:hover { background: var(--canvas); color: var(--ink); }
main a:not(.btn):not(.btn-line):not(.btn-ghost):not(.cat-tile):not(.arrow-btn) { color: var(--ink); text-decoration-color: var(--pt-line); }
.cta-band a:not(.btn) { color: #fff; }
/* no icon rows: hero store bar + info cards show text only */
.store-bar .sb-ico, .info-card .ic { display: none; }
.chip .ico, .chip-row .ico { display: none; }
.plate .plate-foot, .food-picks-grid .plate-foot, .plate .plate-no { color: var(--pt-ink-2); }
/* one arrow only: the chevron. Template icon glyphs inside buttons are hidden; other glyphs are ink */
.btn i[class^="ri-"], .btn span:has(> i[class^="ri-"]), .btn svg:not(.keep) { display: none; }
i[class^="ri-"] { color: var(--ink); }
.delivery-area-card h3, .package-card h3 { color: var(--ink); }
.cs-button-solid, .active-button { border-radius: 10px; background: var(--brand); color: #fff; font-weight: 600; }
.cs-button-solid::after, .active-button::after {
  content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.5em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translateY(-1px);
}


/* ===== Dennis QA fix on 77f93a3 (2026-10-24 04:2x) ===== */
/* F2: the white link in the red CTA band must beat the ink rule above (3.26:1 -> 5.21:1) */
.cta-band .cta-phone a, .cta-band .cta-phone a:hover { color: #fff !important; text-decoration-color: rgba(255, 255, 255, 0.6); }
/* outline buttons: no template glyphs (one chevron per section) */
.btn-line .arrow, .btn-line svg { display: none; }

/* F3: only two type styles. Schibsted Grotesk 600 (headings + nav/FAQ labels), system 400 (everything else). */
body * { font-weight: 400 !important; }
h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.site-nav a, summary, summary *, .menu-title, .dropbtn, .qa-ico, .step-number, .privacy-title, .menu-title * {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}
.open-badge { font-family: var(--font-body); }

/* F4: mobile CLS. #header-container is display:contents once components.js fills it;
   while empty it holds the measured top line + header height (34.375 + 81 px at every width),
   and the no-JS breadcrumb fallback sits inside that space instead of pushing <main> down. */
#header-container:empty { display: block; min-height: 115.375px; }
body:not(.header-loaded) .breadcrumb-container { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }

/* Dennis QA 5e3bb87: opened mobile nav "Order Online" kept the nav-link ink colour (3.26:1 on red). Keep it white on red, hover included. */
.site-nav .nav-extra .btn,
.site-nav .nav-extra .btn:hover,
.site-nav .nav-extra .btn:focus-visible { color: #fff; }
.site-nav .nav-extra .btn { background: var(--chili); }
.site-nav .nav-extra .btn:hover { background: var(--chili-dark); }
/* QA FAIL2 (Dennis fee4b95, Atlas 04:53): 3rd store-bar cell spans full row when the bar is 2-up */
@media (max-width: 1080px) { .store-bar .sb-cell:nth-child(3) { grid-column: 1 / -1; } }