/* ============================================================
   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 — "Navy ground, red action"
   Deep royal blue (from the CITY SOUTH wordmark) is the ground.
   Chili red (from the PIZZA wordmark) is reserved for things you
   can tap. Saffron highlights and measures heat; it never becomes
   a button.

   TABLE OF CONTENTS
   01  Homepage scope
   02  Navigation additions (status, phone, 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(6, 10, 40, 0.32);
}

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

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

/* Right-hand cluster: status · phone · order */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gs-dark-text);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.nav__phone i {
  color: var(--gs-saffron);
  font-size: 0.95em;
}

.nav__phone:hover {
  color: var(--gs-white);
}

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

.nav__mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav__call {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--gs-dark-heading);
  font-size: 1.1rem;
}

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

@media (max-width: 1120px) {
  .nav__phone span {
    display: none;
  }
  .nav__phone {
    width: 40px;
    height: 40px;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@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__call {
    display: inline-flex;
  }
  .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.
   ============================================================ */

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

.csp-orderbar-inner {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
}

.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);
}

.csp-orderbar-secondary {
  color: var(--gs-dark-heading);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

@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;
}

.csp-btn-light {
  background: var(--gs-white);
  border-color: var(--gs-white);
  color: var(--gs-primary-deep);
}

.csp-btn-light:hover {
  background: var(--gs-bg);
  border-color: var(--gs-bg);
  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);
}


/* ============================================================
   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;
  background: radial-gradient(115% 85% at 76% 20%, rgba(198, 40, 40, 0.4), transparent 58%),
    radial-gradient(95% 80% at 4% 96%, rgba(40, 53, 147, 0.85), transparent 62%);
  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;
}

.csp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.csp-hero-h1 {
  font-family: var(--gs-font-body);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gs-saffron);
  margin: 0.9rem 0 1.5rem;
}

.csp-hero-h1 span {
  display: block;
  font-size: 0.72em;
  letter-spacing: 0.16em;
  color: var(--gs-dark-text-soft);
  margin-top: 0.35rem;
}

/* 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, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--gs-font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f0e3ce;
}

.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, 5.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gs-white);
  margin: 0.75rem 0 0.2rem;
}

.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(198, 40, 40, 0.42);
  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 */
.csp-hero-art {
  position: relative;
}

.csp-hero-stage {
  position: relative;
  aspect-ratio: 4 / 3.15;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 34px 74px rgba(4, 8, 32, 0.55);
  transform: rotate(-1.6deg);
  background: var(--gs-primary);
}

.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;
  }
  .csp-hero-art {
    order: -1;
  }
  .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-dark);
}

@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-dark);
}

.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(16, 22, 79, 0.4) 0%, rgba(12, 17, 62, 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(226, 230, 250, 0.86);
}

.csp-split-panel {
  background: var(--gs-primary);
  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(12, 17, 62, 0) 26%, rgba(12, 17, 62, 0.62) 56%, rgba(10, 14, 50, 0.94) 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(226, 230, 250, 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(12, 17, 62, 0.82), rgba(10, 14, 50, 0.9));
}

.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-dark);
}

.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-dark);
}

.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-dark);
  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;
  }
}