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



/* ============================================================
   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; }



/* 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;
}

/* 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; } }

/* ============================================================
   SPLIT BUTTONS + NO AI-LOOK PATTERNS (Rakesh 2026-10-24 16:57, standing for PT)
   Markup: <a class="btn|btn-line"><span class="btn__label">Text</span><span class="btn__arrow">arrow-right svg</span></a>
   Primary (.btn) = every order button: accent label + accent darkened 25% arrow block, white text/icon.
   Secondary (.btn-line): white label with thin border + dark text, light-grey arrow block + dark arrow.
   No gap, 6px radius on the outer corners only, Schibsted Grotesk 600. One primary per section.
   ============================================================ */
:root {
  --btn-accent: var(--brand);                    /* #D61A20  white text 5.21:1 */
  --btn-accent-dark: #A11418;                    /* #D61A20 darkened 25%  white 7.9:1 */
  --btn-accent-hover: #B8161C;                   /* hover on the label, white 6.6:1 */
  --btn-sec-line: #C9C9C7;
  --btn-sec-arrow: #E8E8E6;
}
.btn, .btn-line,
.site-nav .nav-extra .btn, .header-cta .btn, .btn.order-float {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: none !important;
  overflow: hidden;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none !important;
  text-decoration: none !important;
  transform: none !important;
  white-space: nowrap;
  vertical-align: middle;
}
.btn::before, .btn::after, .btn-line::before, .btn-line::after { content: none !important; display: none !important; }
.btn .btn__label, .btn-line .btn__label {
  display: flex; align-items: center; justify-content: center; flex: 1 1 auto;
  padding: 12px 18px;
  border-radius: 6px 0 0 6px;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  transition: background-color .15s ease;
}
.btn .btn__arrow, .btn-line .btn__arrow {
  display: flex !important; align-items: center; justify-content: center; flex: none;
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
}
.btn .btn__arrow .ico, .btn-line .btn__arrow .ico { display: block !important; width: 1em; height: 1em; }
/* primary */
.btn .btn__label { background: var(--btn-accent); color: #fff !important; }
.btn .btn__arrow { background: var(--btn-accent-dark); color: #fff !important; }
.btn:hover .btn__label, .btn:focus-visible .btn__label { background: var(--btn-accent-hover); }
/* secondary */
.btn-line .btn__label { background: #fff; color: var(--ink) !important; border: 1px solid var(--btn-sec-line); border-right: 0; }
.btn-line .btn__arrow { background: var(--btn-sec-arrow); color: var(--ink) !important; border: 1px solid var(--btn-sec-arrow); }
.btn-line:hover .btn__label, .btn-line:focus-visible .btn__label { border-color: var(--ink); }
/* primary on the red bands: a red label would vanish on red, so the label turns white with accent text (5.21:1);
   the arrow block keeps the darkened accent + white arrow */
.menu-band .btn .btn__label, .cta-band .btn .btn__label { background: #fff; color: var(--btn-accent) !important; }
.menu-band .btn:hover .btn__label, .cta-band .btn:hover .btn__label { background: #f3f3f3; }
.btn:focus-visible, .btn-line:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.order-float { justify-content: stretch; }

/* No eyebrows, no numbering, no icon grids, no uppercase labels/links */
.kicker, .kicker::before, .ch-no, .step-number, .v-ico { display: none !important; }
.chapter { grid-template-columns: 1fr !important; }
.cat-tile::before, .qa summary::before, .menu-band::after { content: none !important; display: none !important; }
.values-copy { max-width: 46rem; margin-top: 1rem; }
.plate .plate-no, .plate .plate-foot, .chip, .item-desc span, .info-card strong,
#home-hero .cs-subtitle, .cs-subtitle, .cs-topper, .sticker {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#home-hero .cs-subtitle::before, .cs-topper::before { content: none !important; display: none !important; }
/* Phones: the split header button + logo + menu toggle don't fit under 480px, so the header button steps aside there.
   The fixed full-width "Order online" bar (.order-float) and the opened menu's "Order online" stay visible. */
@media (max-width: 479px) { .header-cta .btn { display: none !important; } }