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

/* Rakesh 2026-10-29: overflow:hidden makes min-height 0, so 26 categories shrank instead of scrolling - keep full height, sidebar scrolls */
.menu-buttons .menu-button { flex-shrink: 0; }

/* Pita Nutso logo (Brandy pack v1): round 85x85 badge, no white plate */
.site-header .brand img { width: 72px; height: 72px; padding: 0; background: transparent; box-shadow: none; border-radius: 50%; }
.foot-brand img { width: 85px; height: 85px; padding: 0; background: transparent; border-radius: 50%; }
@media (max-width: 600px) { .site-header .brand img { width: 56px; height: 56px; } }

/* ============================================================
   TOPLINE (2026-11-06): Google rating + address on the left,
   opening hours on the right. Shown on every breakpoint; on
   phones it stacks into two centred lines (address hidden).
   ============================================================ */
.site-topline {
  background: var(--basil-deep);
  color: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-topline .wrap {
  flex-wrap: wrap;
  row-gap: 0.2rem;
  padding-block: 0.5rem;
}
.tl-left,
.tl-right {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.tl-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.tl-rating:hover { text-decoration: none; }
.tl-rating:hover .tl-count { text-decoration: underline; text-underline-offset: 3px; }
.tl-rating strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--gold);
}
.tl-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1;
}
.tl-count { opacity: 0.8; font-weight: 500; }
.tl-sep { width: 1px; height: 1rem; background: rgba(255, 255, 255, 0.22); }
.tl-addr { white-space: nowrap; }
.tl-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.tl-hours .ico { color: var(--gold); font-size: 0.95rem; }

@media (max-width: 900px) {
  .site-topline { display: block; }
  .site-topline .wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
    padding-block: 0.45rem;
  }
  .tl-addr, .tl-sep { display: none; }
  .tl-hours { white-space: normal; font-size: 0.74rem; line-height: 1.35; justify-content: center; }
}

/* ============================================================
   HOME HERO v5 (2026-11-06): new photo (shawarma spit, wraps,
   plates on a wooden counter), solid white H1, deeper scrim.
   Desktop fills the viewport under the header; the square photo
   is anchored a little below centre so the dishes stay in view.
   Phones get a 3:4 portrait crop and a content-driven height.
   ============================================================ */
.hero-full {
  aspect-ratio: auto;
  min-height: clamp(560px, 88vh, 880px);
}
@media (min-width: 601px) {
  #home-top {
    min-height: calc(100vh - var(--header-h, 0px));
    min-height: calc(100svh - var(--header-h, 0px));
  }
}
.hero-full__bg img { object-position: center 62%; }
@media (max-width: 600px) {
  .hero-full { min-height: 0; }
  .hero-full__bg img { object-position: center 58%; }
  .hero-full__content { padding-top: clamp(3.5rem, 12vw, 5rem); }
}

.hero-full::before {
  background: linear-gradient(180deg,
    rgba(20, 13, 9, 0.74) 0%,
    rgba(20, 13, 9, 0.46) 38%,
    rgba(20, 13, 9, 0.56) 68%,
    rgba(20, 13, 9, 0.9) 100%);
}

.hero-full .kicker--light { color: var(--gold); letter-spacing: 0.2em; }
.hero-full .kicker--light::before { background: var(--gold); }

/* H1: plain white, tight leading, strong but soft shadow. Reads on
   every part of the photo. (Replaces the red/green gradient text.) */
.hero-full h1 {
  color: #fff;
  font-size: clamp(2.45rem, 6.2vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 19ch;
  margin: 1rem auto 1.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 12px 40px rgba(0, 0, 0, 0.45);
}
.hero-full__tag {
  color: rgba(255, 255, 255, 0.93);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 6px 24px rgba(0, 0, 0, 0.4);
}
.hero-full__tag em { color: var(--gold); }

/* store bar: two cells (Find us, Hours), dark glass with a hairline, saffron icons */
.hero-full .store-bar {
  grid-template-columns: repeat(2, 1fr);
  max-width: 52rem;
  margin-inline: auto;
  background: rgba(20, 13, 9, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-full h1 { margin-top: 0; }
.hero-full .sb-ico { background: rgba(255, 255, 255, 0.12); color: var(--gold); }
.hero-full .sb-cell:last-child .sb-ico { background: rgba(233, 166, 58, 0.2); color: var(--gold); }
.hero-full a.sb-cell:hover { background: rgba(255, 255, 255, 0.1); }
.hero-full .sb-body span { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 560px) {
  .hero-full .store-bar { grid-template-columns: 1fr; }
  .hero-full .sb-cell:not(:first-child) { border-top-color: rgba(255, 255, 255, 0.12); }
}

/* ============================================================
   HOME PAGE STYLE (2026-11-06): warm ivory wash behind the dish
   carousel, saffron glow in the espresso menu band, saffron dish
   numbers, ivory CTA band.
   ============================================================ */
.plates {
  background: linear-gradient(180deg, #fff 0%, var(--sand) 100%);
}
.plate { border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.plate .plate-no { color: var(--gold); }
.plate h3 a:hover { color: var(--chili); }

.menu-band {
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--brand-3) 24%, var(--basil)) 0%, transparent 60%),
    var(--basil);
}
.cat-tile { border: 1px solid rgba(255, 255, 255, 0.08); }

.cta-band { background: var(--sand); }
.cta-band h2 em { color: var(--chili); }
