/* ============================================================
   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 — Pepperfry.ca (binding, 2026-10-24)
   Clean, bright, minimal, photo-led. White + light-grey base.
   ONE accent (#d50000, from the logo) on buttons + max 2 bands.
   Fraunces 600 headings, 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: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-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: "Fraunces", Georgia, "Times New Roman", 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.01em; 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; }

/* logo badge size in the header */
.brand img { width: 56px; height: 56px; max-height: none; }
.foot-brand img { width: 96px; height: 96px; }

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

/* ===== "100% Halal" header badge (Rakesh via Atlas, 2026-10-24 01:16) =====
   Source: owner site + owner's Google text say "100% halal" (Store Information).
   Plain text pill, our own design — no certifier logo (HMA/ISNA are trademarks).
   Ink outline on white so it stays inside the accent budget and reads over the home photo. */
.brand { gap: 10px; }
.halal-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 600 12px/1 var(--font-body, system-ui, sans-serif);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: none;
}
@media (max-width: 420px) {
  .brand { gap: 6px; }
  .halal-badge { height: 22px; padding: 0 7px; font-size: 10.5px; }
}

/* ===== Mobile header logo +39% (Rakesh via Atlas, 2026-10-24 01:26) =====
   Phones/tablets only (<=768px): 56px -> 78px so the "Pepperfry" wordmark reads at arm's length.
   Source files: Brandy pack logo-170.webp (1x) / logo.webp 340px (2x, 3x) — never upscaled.
   Fixed width+height on the img (attrs 170x170 + CSS) so nothing shifts on load. Desktop unchanged. */
@media (max-width: 768px) {
  .brand img { width: 78px; height: 78px; flex: none; }
  .site-header .wrap { min-height: 5.5rem; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .header-cta { flex: none; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* ===== Perf + design fixes (Dennis QA 2026-10-24 01:40) ===== */
/* CLS: #header-container is display:contents once components.js fills it; while empty it
   holds the measured top line + header height (34.4 + 103 px <=768, 34.4 + 81 px above),
   and the no-JS breadcrumb fallback sits inside that space instead of pushing main down. */
#header-container:empty { display: block; min-height: 115.375px; }
@media (max-width: 768px) { #header-container:empty { min-height: 137.375px; } }
body:not(.header-loaded) .breadcrumb-container { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }

/* LCP: hero slides 2+ stay unrendered (so their lazy images are not fetched) until
   components.js marks the slideshow live after window load + 1.5 s. */
.hero-slides:not(.is-live) .hero-slide:not(.is-active) { display: none; }

/* Design rule: 16px photo corners — style.css .story-collage .img-a set 0 */
.story-collage .img-a { border-radius: 16px; }