/* ============================================================
   CUSTOM — Per-store overrides for City South Pizza
   This file is generated per restaurant. Override tokens or add
   store-specific rules here. Do NOT edit global.css, theme.css,
   or style.css directly for per-store changes.

   DESIGN LAW — "Charcoal ground, red action"
   A warm charcoal page carries the site; deeper charcoal-burgundy
   anchors the nav, footer and feature bands. Chili red (from the
   PIZZA wordmark) is reserved for things you can tap. Saffron
   highlights and measures heat; it never becomes a button.
   No blue anywhere — the ground is warm, the food is the colour.

   TABLE OF CONTENTS
   01  Homepage scope
   02  Navigation additions (status, drawer)
   03  Mobile order bar
   04  Homepage primitives (section, eyebrow, heading, rule, buttons)
   05  Spice dial — the signature element
   06  Hero
   07  Trust strip
   08  Menu categories
   09  Split band
   10  Customer favourites
   11  Rating
   12  Catering
   13  Find us
   14  FAQ
   15  Explore hub
   16  Closing CTA
   17  Footer touches
   18  Legacy FAQ heading reset
   ============================================================ */


/* ============================================================
   01  HOMEPAGE SCOPE
   ============================================================ */

/* Only the redesigned homepage opts in to the display face. Other
   pages keep Cormorant until they are migrated. */
body.csp-home {
  --gs-font-heading: var(--gs-font-display);
  background: var(--gs-bg);
}

body.csp-home h1,
body.csp-home h2,
body.csp-home h3 {
  font-variation-settings: "SOFT" 45, "WONK" 1;
}


/* ============================================================
   02  NAVIGATION ADDITIONS
   ============================================================ */

.logo__image {
  height: 66px;
}

.nav__container {
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.nav__container.is-scrolled {
  background: var(--gs-primary-deep);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.nav__container.is-scrolled nav {
  height: 68px;
}

.nav__container.is-scrolled .logo__image {
  height: 50px;
}

/* Right-hand cluster: status · order.
   The header carries no call control — ordering is the single action. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/* Live open/closed pill — reads from the real McPhillips St hours */
.csp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.9em 0.42em 0.75em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--gs-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gs-dark-text);
  white-space: nowrap;
}

.csp-status[hidden] {
  display: none;
}

.csp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.csp-status.is-open {
  color: #b7ecc6;
  border-color: rgba(122, 222, 150, 0.34);
}

.csp-status.is-open .csp-status-dot {
  background: #57d97e;
  animation: csp-pulse 2.6s ease-in-out infinite;
}

.csp-status.is-closed {
  color: #f2c4c4;
  border-color: rgba(229, 57, 53, 0.36);
}

.csp-status.is-closed .csp-status-dot {
  background: var(--gs-accent-bright);
}

@keyframes csp-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(87, 217, 126, 0.5);
  }
  55% {
    box-shadow: 0 0 0 6px rgba(87, 217, 126, 0);
  }
}

/* Hamburger is a real button now — strip the UA chrome */
.nav__menu__btn {
  background: none;
  border: 0;
  padding: 0.3rem;
  border-radius: 6px;
}

/* Only the hamburger sits here now; .nav__header spaces it to the right
   edge, so this just keeps it optically centred against the logo. */
.nav__mobile-actions {
  display: flex;
  align-items: center;
}

/* Status lives in the drawer on small screens */
.nav__drawer-status {
  display: none;
}

@media (max-width: 992px) {
  /* style.css hides .nav__btn here; our .nav__actions rule has equal
     specificity and loads later, so restate the hide or the desktop
     cluster survives and blows out the page width. */
  .nav__actions {
    display: none;
  }
  .logo__image {
    height: 46px;
  }
  .nav__container.is-scrolled nav {
    height: var(--gs-nav-height-mobile);
  }
  .nav__container.is-scrolled .logo__image {
    height: 42px;
  }
  .nav__drawer-status {
    display: block;
    width: 100%;
    padding: 0.2rem 0 1rem;
  }
  .nav__drawer-status .csp-status {
    font-size: 0.72rem;
  }
}


/* ============================================================
   03  MOBILE ORDER BAR
   Order is one thumb-tap away from every scroll position. It is the
   only control down here — a single full-bleed target, no split.
   ============================================================ */

.csp-orderbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--gs-primary-deep);
  border-top: 1px solid var(--gs-dark-border);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.5);
  padding-bottom: env(safe-area-inset-bottom);
}

.csp-orderbar-inner {
  display: block;
}

.csp-orderbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 56px;
  font-family: var(--gs-font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.csp-orderbar-primary {
  background: var(--gs-accent);
  color: var(--gs-white);
}

.csp-orderbar-primary:active {
  background: var(--gs-accent-dark);
}

@media (max-width: 768px) {
  .csp-orderbar {
    display: block;
  }
  body.csp-home {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
  /* The desktop floating pill would collide with the bar */
  body.csp-home .gs-floating-btn {
    display: none;
  }
}


/* ============================================================
   04  HOMEPAGE PRIMITIVES
   ============================================================ */

.csp-section {
  padding: clamp(3.25rem, 6.5vw, 5.5rem) 1.25rem;
}

.csp-shell {
  max-width: var(--max-width);
  margin-inline: auto;
}

.csp-section--tint {
  background: var(--gs-bg-alt);
}

.csp-section--paper {
  background: var(--gs-cream);
}

.csp-head {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.csp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--gs-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gs-saffron-deep);
}

.csp-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.csp-on-dark .csp-eyebrow,
.csp-eyebrow--light {
  color: var(--gs-saffron);
}

.csp-h2 {
  font-family: var(--gs-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--gs-dark);
  margin-top: 0.7rem;
}

.csp-h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gs-primary);
}

.csp-on-dark .csp-h2 {
  color: var(--gs-dark-heading);
}

.csp-on-dark .csp-h2 em {
  color: var(--gs-saffron);
}

.csp-lede {
  margin-top: 0.9rem;
  color: var(--gs-text-light);
  font-size: 0.98rem;
  line-height: 1.7;
}

.csp-on-dark .csp-lede {
  color: var(--gs-dark-text-soft);
}

/* Maple rule — the mark's own motif, not a generic ornament */
.csp-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0.85rem 0 0;
}

.csp-rule::before,
.csp-rule::after {
  content: "";
  height: 1px;
  width: min(72px, 14vw);
  background: linear-gradient(90deg, transparent, var(--gs-saffron));
}

.csp-rule::after {
  background: linear-gradient(90deg, var(--gs-saffron), transparent);
}

.csp-rule i {
  width: 15px;
  height: 15px;
  background: var(--gs-saffron);
  -webkit-mask: var(--csp-maple) center / contain no-repeat;
  mask: var(--csp-maple) center / contain no-repeat;
}

:root {
  --csp-maple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.7 3.9 3.9-1-1.1 3.9 3 .6-3.2 2.8.8 2.1-4-.9.3 4.6h-2.8l.3-4.6-4 .9.8-2.1L4.5 9.4l3-.6-1.1-3.9 3.9 1L12 2z'/%3E%3C/svg%3E");
}

/* Buttons — inherit the template shell, restate the intent */
.csp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* Cream slab on a dark band — warm, not clinical white */
.csp-btn-light {
  background: var(--gs-dark);
  border-color: var(--gs-dark);
  color: var(--gs-primary-deep);
}

.csp-btn-light:hover {
  background: var(--gs-white);
  border-color: var(--gs-white);
  color: var(--gs-primary-deep);
  transform: translateY(-2px);
}

.csp-btn-onnavy {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--gs-dark-heading);
}

.csp-btn-onnavy:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--gs-white);
  transform: translateY(-2px);
}

/* The blue bands are lighter in this theme, so a solid red button no
   longer separates from them on luminance alone. A hairline ring gives
   the block an edge without touching its white-on-red text contrast. */
.csp-hero .gs-btn-primary,
.csp-on-dark .gs-btn-primary,
.csp-catering .gs-btn-primary {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.csp-hero .gs-btn-primary:hover,
.csp-on-dark .gs-btn-primary:hover,
.csp-catering .gs-btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34), var(--gs-shadow-gold);
}


/* ============================================================
   05  SPICE DIAL — the signature element
   Three pips, saffron through chili. Heat is the one thing an
   Indian-fusion pizzeria can say that nobody else can.
   ============================================================ */

.csp-spice {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--gs-font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.csp-spice-pips {
  display: inline-flex;
  gap: 3px;
}

.csp-spice-pips i {
  width: 13px;
  height: 5px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.24;
}

.csp-spice[data-heat="1"] {
  color: var(--gs-heat-1);
}
.csp-spice[data-heat="2"] {
  color: var(--gs-heat-2);
}
.csp-spice[data-heat="3"] {
  color: var(--gs-heat-3);
}

.csp-spice[data-heat="1"] .csp-spice-pips i:nth-child(-n + 1),
.csp-spice[data-heat="2"] .csp-spice-pips i:nth-child(-n + 2),
.csp-spice[data-heat="3"] .csp-spice-pips i:nth-child(-n + 3) {
  opacity: 1;
}

/* Chili red goes muddy on navy — brighten it there */
.csp-on-dark .csp-spice[data-heat="3"],
.csp-hero .csp-spice[data-heat="3"],
.csp-fav .csp-spice[data-heat="3"] {
  color: #f2645f;
}

.csp-on-dark .csp-spice[data-heat="2"],
.csp-hero .csp-spice[data-heat="2"],
.csp-fav .csp-spice[data-heat="2"] {
  color: #f08b3c;
}


/* ============================================================
   06  HERO
   ============================================================ */

.csp-hero {
  position: relative;
  overflow: hidden;
  background: var(--gs-primary-deep);
  color: var(--gs-dark-text);
  padding: clamp(2.75rem, 6vw, 4.75rem) 1.25rem clamp(3rem, 6vw, 4.5rem);
}

.csp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Two embers on charcoal: a chili glow behind the photo stage and a
     deeper burgundy pooling bottom-left, so the plate is the brightest
     thing on the screen without a single hard edge. */
  background: radial-gradient(105% 80% at 74% 26%, rgba(209, 59, 46, 0.30), transparent 60%),
    radial-gradient(95% 85% at 2% 100%, rgba(90, 26, 27, 0.85), transparent 64%);
  pointer-events: none;
}

.csp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gs-grain);
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* The photo column now outweighs the copy — the pizza is the poster.
   The copy column is capped so long lines never crowd the plate. */
.csp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.25rem, 5.5vw, 4.5rem);
  align-items: center;
}

.csp-hero-copy {
  max-width: 34rem;
}

.csp-hero-h1 {
  font-family: var(--gs-font-body);
  font-size: clamp(0.82rem, 1.5vw, 0.95rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gs-saffron);
  margin: 1rem 0 1.6rem;
}

.csp-hero-h1 span {
  display: block;
  font-size: 0.88em;
  font-weight: 400;
  letter-spacing: 0.13em;
  color: var(--gs-dark-text-soft);
  margin-top: 0.5rem;
}

/* Rotating feature — the pizza is the poster, not the tagline.
   Slides stack in one grid cell so the block is always as tall as
   its tallest slide and never jumps mid-rotation. */
.csp-hero-feature {
  display: grid;
}

.csp-feature {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;
}

.csp-feature.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.csp-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.45em 0.95em;
  border-radius: 999px;
  background: rgba(255, 238, 214, 0.08);
  border: 1px solid var(--gs-dark-border);
  font-family: var(--gs-font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gs-dark-text);
}

.csp-feature-chip::after {
  content: "";
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.24);
}

.csp-feature-name {
  font-family: var(--gs-font-display);
  font-weight: 600;
  /* Capped so the longest name ("Tandoori Chicken Pizza") still sets on
     one line — otherwise the grid reserves a phantom second line. */
  font-size: clamp(2.15rem, 5vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gs-dark-heading);
  margin: 0.9rem 0 0.25rem;
}

.csp-feature-tag {
  font-family: var(--gs-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  color: var(--gs-saffron);
  margin-bottom: 0.8rem;
}

.csp-feature-desc {
  max-width: 36ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--gs-dark-text-soft);
}

.csp-hero .csp-actions {
  margin-top: 1.7rem;
}

.csp-dots {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.6rem;
}

.csp-dot {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(209, 59, 46, 0.45);
  cursor: pointer;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.csp-dot[aria-selected="true"] {
  width: 44px;
  background: var(--gs-accent-bright);
}

/* Photo stage — the hero's centre of gravity.
   A saffron hairline and an ember halo lift the plate off the charcoal
   without adding motion; the plate itself does the work. */
.csp-hero-art {
  position: relative;
}

.csp-hero-art::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 163, 61, 0.22), transparent 72%);
  pointer-events: none;
}

.csp-hero-stage {
  position: relative;
  aspect-ratio: 4 / 3.15;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--gs-border-gold);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.62);
  transform: rotate(-1.6deg);
  background: var(--gs-primary-deep);
}

.csp-hero-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 0.7s ease, transform 9s linear;
}

.csp-hero-stage img.is-active {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .csp-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  /* Photo leads on small screens too — same hierarchy, stacked */
  .csp-hero-art {
    order: -1;
  }
  .csp-hero-copy {
    max-width: none;
  }
  .csp-hero-stage {
    transform: none;
    aspect-ratio: 4 / 3;
  }
  .csp-feature-desc {
    max-width: none;
  }
}


/* ============================================================
   07  TRUST STRIP
   ============================================================ */

.csp-trust {
  background: var(--gs-cream);
  border-bottom: 1px solid var(--gs-border-light);
}

.csp-trust-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.csp-trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.35rem 1.5rem;
  border-right: 1px solid var(--gs-border-light);
}

.csp-trust-item:last-child {
  border-right: 0;
}

.csp-trust-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gs-saffron-light);
  border: 1px solid rgba(232, 163, 61, 0.3);
  color: var(--gs-saffron-deep);
  font-size: 1rem;
}

.csp-trust-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gs-dark);
  line-height: 1.3;
}

.csp-trust-sub {
  display: block;
  font-size: 0.77rem;
  color: var(--gs-text-light);
  line-height: 1.45;
}

.csp-trust-sub a:hover {
  color: var(--gs-accent-bright);
}

@media (max-width: 860px) {
  .csp-trust-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .csp-trust-item {
    padding: 1.1rem 1.1rem;
    border-bottom: 1px solid var(--gs-border-light);
  }
  .csp-trust-item:nth-child(2n) {
    border-right: 0;
  }
  .csp-trust-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .csp-trust-icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
  .csp-trust-title {
    font-size: 0.8rem;
  }
}


/* ============================================================
   08  MENU CATEGORIES
   Typographic, not photographic — we don't have an honest photo
   for poutine or desserts, and a wrong photo is worse than none.
   ============================================================ */

.csp-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.csp-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.45rem 1.25rem 1.3rem;
  background: var(--gs-cream);
  border: 1px solid var(--gs-border-light);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.csp-cat:hover {
  transform: translateY(-4px);
  box-shadow: var(--gs-shadow);
  border-color: rgba(232, 163, 61, 0.55);
}

.csp-cat-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gs-saffron-light);
  border: 1px solid rgba(232, 163, 61, 0.32);
  color: var(--gs-saffron-deep);
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}

.csp-cat h3 {
  font-family: var(--gs-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gs-dark);
}

.csp-cat p {
  flex: 1;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gs-text-light);
}

.csp-cat-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-accent-bright);
}

.csp-cat-more i {
  transition: transform 0.3s ease;
}

.csp-cat:hover .csp-cat-more i {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .csp-cats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .csp-cats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .csp-cat {
    padding: 1.15rem 1rem 1.05rem;
  }
  .csp-cat-icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }
  .csp-cat h3 {
    font-size: 0.88rem;
  }
}


/* ============================================================
   09  SPLIT BAND
   ============================================================ */

.csp-split {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
}

.csp-split-media {
  position: relative;
  min-height: clamp(320px, 40vw, 470px);
  display: flex;
}

.csp-split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csp-split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(24, 15, 16, 0.35) 0%, rgba(18, 11, 12, 0.9) 82%);
}

.csp-split-overlay {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.csp-split-overlay h2 {
  font-family: var(--gs-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.1;
  color: var(--gs-white);
  margin: 0.7rem 0 0.7rem;
}

.csp-split-overlay p {
  max-width: 40ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(240, 226, 210, 0.86);
}

/* A raised warm panel, not an ember slab — the copy has to stay readable */
.csp-split-panel {
  background: var(--gs-primary-dark);
  padding: clamp(2rem, 4.5vw, 3.4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  align-items: flex-start;
}

.csp-split-panel .csp-lede {
  max-width: 42ch;
  color: var(--gs-dark-text);
}

@media (max-width: 900px) {
  .csp-split {
    grid-template-columns: 1fr;
  }
  .csp-split-media {
    min-height: 300px;
  }
}


/* ============================================================
   10  CUSTOMER FAVOURITES
   ============================================================ */

.csp-favs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.csp-fav {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gs-primary-deep);
}

.csp-fav img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.csp-fav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 12, 0) 26%, rgba(20, 12, 12, 0.66) 56%, rgba(14, 9, 9, 0.95) 100%);
}

.csp-fav:hover img,
.csp-fav:focus-visible img {
  transform: scale(1.07);
}

.csp-fav-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.05rem 1.1rem 1.1rem;
}

.csp-fav-body h3 {
  font-family: var(--gs-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--gs-white);
  margin: 0.35rem 0 0.25rem;
}

.csp-fav-body p {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(240, 226, 210, 0.82);
}

@media (max-width: 900px) {
  .csp-favs {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 1.25rem;
    margin-inline: -1.25rem;
  }
  .csp-favs::-webkit-scrollbar {
    display: none;
  }
  .csp-fav {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .csp-fav {
    flex-basis: 84%;
  }
}


/* ============================================================
   11  RATING
   ============================================================ */

.csp-rating {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  max-width: 62rem;
  margin-inline: auto;
}

.csp-rating-score {
  text-align: center;
  padding-right: clamp(1.5rem, 5vw, 4rem);
  border-right: 1px solid var(--gs-border-light);
}

.csp-rating-number {
  font-family: var(--gs-font-display);
  font-weight: 600;
  font-size: clamp(3.2rem, 9vw, 4.6rem);
  line-height: 1;
  color: var(--gs-primary);
}

.csp-stars {
  display: block;
  margin: 0.35rem 0 0.4rem;
  color: var(--gs-saffron);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
}

.csp-rating-caption {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gs-text-light);
}

.csp-rating-facts {
  display: grid;
  gap: 1rem;
}

.csp-rating-fact {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.csp-rating-fact i {
  flex: none;
  margin-top: 0.2rem;
  color: var(--gs-saffron-deep);
  font-size: 1rem;
}

.csp-rating-fact b {
  display: block;
  font-family: var(--gs-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gs-dark);
}

.csp-rating-fact span {
  font-size: 0.85rem;
  color: var(--gs-text-light);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .csp-rating {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .csp-rating-score {
    padding-right: 0;
    padding-bottom: 1.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--gs-border-light);
  }
}


/* ============================================================
   12  CATERING
   ============================================================ */

.csp-catering {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 1.25rem;
}

.csp-catering img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csp-catering::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 15, 16, 0.84), rgba(16, 10, 10, 0.92));
}

.csp-catering-inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
}

.csp-catering .csp-actions {
  justify-content: center;
  margin-top: 1.6rem;
}


/* ============================================================
   13  FIND US
   ============================================================ */

.csp-find {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  border: 1px solid var(--gs-border-light);
  border-radius: 16px;
  overflow: hidden;
  background: var(--gs-cream);
  box-shadow: var(--gs-shadow);
}

.csp-find-map {
  min-height: 400px;
}

.csp-find-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.csp-find-card {
  padding: clamp(1.6rem, 3.2vw, 2.5rem);
}

/* The storefront, so people know what to look for on McPhillips */
.csp-find-shot {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 45%;
  border-radius: 10px;
  margin-bottom: 1.2rem;
}

.csp-find-card h3 {
  font-family: var(--gs-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--gs-dark);
}

.csp-find-lines {
  margin: 1.1rem 0 1.3rem;
  display: grid;
  gap: 0.7rem;
}

.csp-find-lines a,
.csp-find-lines p {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gs-text);
}

.csp-find-lines i {
  flex: none;
  margin-top: 0.2rem;
  color: var(--gs-saffron-deep);
}

.csp-find-lines a:hover {
  color: var(--gs-accent-bright);
}

.csp-hours-title {
  font-family: var(--gs-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gs-saffron-deep);
  margin-bottom: 0.5rem;
}

.csp-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--gs-border-light);
  font-size: 0.86rem;
  color: var(--gs-text-light);
}

.csp-hours li:last-child {
  border-bottom: 0;
}

.csp-hours li.is-today {
  color: var(--gs-dark);
  font-weight: 600;
}

.csp-hours li.is-today span:first-child::before {
  content: "●";
  color: var(--gs-saffron);
  font-size: 0.55em;
  vertical-align: middle;
  margin-right: 0.55em;
}

.csp-find-card .csp-actions {
  margin-top: 1.4rem;
}

@media (max-width: 860px) {
  .csp-find {
    grid-template-columns: 1fr;
  }
  .csp-find-map,
  .csp-find-map iframe {
    min-height: 280px;
  }
}


/* ============================================================
   14  FAQ
   ============================================================ */

.csp-faq-card {
  background: var(--gs-cream);
  border: 1px solid var(--gs-border-light);
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  box-shadow: var(--gs-shadow);
}

.csp-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}

.csp-faq-group h3 {
  font-family: var(--gs-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gs-saffron-deep);
  margin-bottom: 0.35rem;
}

.csp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gs-border-light);
  text-align: left;
  cursor: pointer;
  font-family: var(--gs-font-body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--gs-dark);
  transition: color 0.25s ease;
}

.csp-faq-q:hover {
  color: var(--gs-accent-bright);
}

.csp-faq-q i {
  flex: none;
  color: var(--gs-accent);
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}

.csp-faq-q[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.csp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.csp-faq-a.open {
  max-height: 900px;
}

.csp-faq-a > div {
  padding: 0.9rem 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--gs-text-light);
  border-bottom: 1px solid var(--gs-border-light);
}

/* Prose lists inside an answer. .csp-chips overrides this where used. */
.csp-faq-a ul {
  margin: 0.55rem 0 0;
  display: grid;
  gap: 0.35rem;
}

.csp-faq-a ul li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.86rem;
  line-height: 1.6;
}

.csp-faq-a ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gs-saffron);
}

.csp-faq-a ul.csp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.csp-faq-a ul.csp-chips li {
  padding-left: 0;
  font-size: inherit;
}

.csp-faq-a ul.csp-chips li::before {
  display: none;
}

@media (max-width: 820px) {
  .csp-faq-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   15  EXPLORE HUB
   Every tag/ page is one tap from the homepage.
   ============================================================ */

.csp-hub-group + .csp-hub-group {
  margin-top: 1.75rem;
}

.csp-hub-label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--gs-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gs-primary);
  margin-bottom: 0.75rem;
}

.csp-hub-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gs-border-light);
}

.csp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.csp-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.52em 1em;
  border-radius: 999px;
  background: var(--gs-cream);
  border: 1px solid var(--gs-border-light);
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--gs-text);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.csp-chip:hover {
  color: var(--gs-accent-bright);
  border-color: var(--gs-accent);
  transform: translateY(-2px);
}


/* ============================================================
   16  CLOSING CTA
   The page's single red surface — and it is the ask.
   ============================================================ */

.csp-cta {
  position: relative;
  overflow: hidden;
  background: var(--gs-accent);
  text-align: center;
  padding: clamp(3rem, 6.5vw, 4.75rem) 1.25rem;
}

.csp-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gs-grain);
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.csp-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
}

.csp-cta h2 {
  font-family: var(--gs-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.08;
  color: var(--gs-white);
}

.csp-cta p {
  margin-top: 0.8rem;
  color: rgba(255, 244, 240, 0.9);
  font-size: 0.98rem;
  line-height: 1.65;
}

.csp-cta .csp-actions {
  justify-content: center;
  margin-top: 1.7rem;
}

.csp-cta .csp-btn-onnavy {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--gs-white);
}

.csp-cta .csp-btn-onnavy:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--gs-white);
}


/* ============================================================
   17  FOOTER TOUCHES
   ============================================================ */

.footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
}

.footer__hours li.is-today {
  color: var(--gs-dark-heading);
  font-weight: 600;
}

.footer__hours li.is-today span:first-child::before {
  content: "●";
  color: var(--gs-saffron);
  font-size: 0.55em;
  vertical-align: middle;
  margin-right: 0.5em;
}


/* ============================================================
   18  LEGACY FAQ HEADING RESET
   Keeps the semantic <h4> around older accordion buttons from
   disturbing their layout.
   ============================================================ */

h4.gs-faq-question-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


/* ============================================================
   MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .csp-hero-stage img,
  .csp-feature,
  .csp-fav img,
  .csp-cat,
  .csp-chip,
  .csp-dot {
    transition: none !important;
  }
  .csp-status.is-open .csp-status-dot {
    animation: none;
  }
}