/* Self-hosted display font (was a render-blocking Google Fonts @import). */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/fonts/lobster-latin.woff2') format('woff2');
}

/*
  McCord Candies 2026 - Stylesheet
  Based on 2026 Graphic Candy Store Style Reference
  --------------------------------------------------
  Core rules:
  - Expensively hippie, modern, premium, lightly Victorian.
  - Solid black, hard-edged offset box-shadows (no blur, no transparency).
  - No glassmorphism, no frosted cards, no gradient shadows.
  - Primary text is warm near-black (--ink).
  - Dark panels use pale yellow (--butter-pale) for text, not white.
  - Stripe bar (red and warm-cream) is a major branding motif.
  - Responsive grids and premium typography.
*/

:root {
  color-scheme: light;

  /* Base palette */
  --warm-cream: #fff1d5;
  --aged-paper: #f3d9ae;
  --butter-pale: #fff0b8;
  --soft-white: #fffaf0;
  --ink: #292018;            /* main text: warm near-black */
  --ink-soft: #473a2f;
  --near-black: #171411;     /* high-contrast panels */

  /* Accent palette */
  --candy-red: #d92828;
  --candy-red-dark: #a91f1f;
  --emerald: #215c45;
  --emerald-light: #b8d9ad;
  --gold: #e7b84d;
  --pink: #ef90ae;
  --peach: #ffb98a;
  --small-plum-accent: #6a315c;

  /* Extra striped-ball swatches — kept deliberately far apart so the small
     category "balls" read as distinct even at icon size (bright/dark pairs). */
  --sb-maroon: #7a1f1f;   /* dark red   */
  --sb-orange: #ef7d1a;
  --sb-brown:  #6b4423;   /* dark amber */
  --sb-lime:   #6bbf3a;   /* bright green */
  --sb-teal:   #0f9d9d;
  --sb-blue:   #2f6fed;
  --sb-navy:   #17235e;   /* dark blue  */
  --sb-purple: #8a2be2;   /* bright purple */

  /* Geometry & effects */
  --line: 2px solid var(--ink);
  --line-light: 2px solid var(--butter-pale);
  --line-dashed: 2px dashed var(--ink);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-sm: 4px 4px 0 #000000;
  --shadow-md: 7px 7px 0 #000000;
  --shadow-lg: 11px 11px 0 #000000;
  --max-width: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Safari 26 (Liquid Glass) samples real element/root colors for its bar tint. */
  background-color: var(--warm-cream);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 7%, rgba(231, 184, 77, 0.18) 0 10%, transparent 10.6%),
    radial-gradient(circle at 91% 12%, rgba(239, 144, 174, 0.15) 0 9%, transparent 9.5%),
    radial-gradient(circle at 84% 88%, rgba(33, 92, 69, 0.10) 0 12%, transparent 12.8%),
    var(--warm-cream);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

/* Paper Grain Texture Overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

body:not(.home) {
  background: var(--warm-cream);
}

body:not(.home) main > section.container:first-child {
  position: relative;
  isolation: isolate;
}

body:not(.home) main > section.container:first-child::before {
  content: "";
  position: absolute;
  inset: -36px 0 -18px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 12%, rgba(231, 184, 77, 0.34) 0 14%, transparent 42%),
    radial-gradient(circle at 84% 16%, rgba(239, 144, 174, 0.3) 0 13%, transparent 40%);
  filter: blur(68px);
  opacity: 0.95;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Base Headings */
h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lobster', Georgia, serif;
  font-weight: normal;
  letter-spacing: normal;
}

h1, h2 {
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(3.2rem, 8vw, 7.5rem);
}

h2 {
  margin-bottom: 20px;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
}

h3 {
  margin-bottom: 12px;
  font-size: 1.6rem;
  line-height: 1.2;
}

.lede {
  max-width: 66ch;
  margin-bottom: 28px;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 680;
  line-height: 1.45;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--candy-red-dark);
  font-size: 1.25rem;
  font-family: 'Lobster', Georgia, serif;
  text-transform: none;
  letter-spacing: normal;
}

/* Layout Utilities */
.page {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: min(var(--max-width), calc(100% - 32px));
  margin: 0 auto;
}

/* Navigation Shell */
.stripe-bar {
  height: 18px;
  border-top: var(--line);
  border-bottom: var(--line);
  background: repeating-linear-gradient(
    90deg,
    var(--candy-red) 0 24px,
    var(--candy-red) 24px 25px,
    var(--soft-white) 25px 49px,
    var(--soft-white) 49px 50px
  );
}

.top-shell {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--warm-cream);
  border-bottom: var(--line);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
  padding: 10px 0;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.logo-mark {
  width: 32px;
  height: 32px;
  border: var(--line);
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, var(--candy-red) 0 8px, var(--soft-white) 8px 16px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.nav-links a {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  position: relative;
  transition: color 150ms ease, transform 150ms ease;
  padding: 4px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--candy-red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--candy-red);
  transform: translateY(-1px);
}

/* Custom logo sizes */
.navbar-logo {
  height: 48px;
  display: block;
}

/* Keep desktop navigation on one line. At medium desktop widths the shorter
   labels are swapped in before the menu transitions to the mobile drawer. */
.nav-label-short { display: none; }
.nav-links a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-links { gap: clamp(14px, 2vw, 22px); }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  .nav-links a { font-size: clamp(0.98rem, 1.55vw, 1.1rem); }
  .nav-links a.nav-shop { padding-inline: 18px; }
}

.footer-logo img {
  height: 55px;
  display: block;
}

/* Nav Toggle Hamburger Button */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  padding: 0;
  z-index: 1010;
}

.nav-toggle span {
  display: block;
  position: absolute;
  height: 4px;
  width: 30px;
  background: var(--ink);
  border-radius: 9px;
  opacity: 1;
  left: 7px;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.nav-toggle span:nth-child(1) {
  top: 12px;
}
.nav-toggle span:nth-child(2) {
  top: 20px;
}
.nav-toggle span:nth-child(3) {
  top: 28px;
}

/* Morph to X */
.menu-open .nav-toggle span:nth-child(1) {
  top: 20px;
  transform: rotate(135deg);
}
.menu-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
.menu-open .nav-toggle span:nth-child(3) {
  top: 20px;
  transform: rotate(-135deg);
}

/* Hero Section — storefront photo over a medium-dark red field */
.hero-wrapper {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 580px;
  overflow: hidden;
  background: #430d0d;
}

/* Photo layer: fills the hero and crops (never stretches). It zooms in as
   the viewport widens; on narrow screens it crops left/right instead.
   Held at 60% so the red field shows through. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.45;
  background-image: url('Assets/McCord_Home_-_Banner.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero-scrim {
  display: none;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: clamp(28px, 5vh, 56px) 0;
  position: relative;
  z-index: 2;
}

.hero-copy {
  color: var(--butter-pale);
}

.hero h1 {
  font-size: clamp(4rem, 8.7vw, 8.2rem);
  line-height: 0.85;
  max-width: 15ch;
  margin: 0 auto 28px;
  color: #fff;
}

.hero .eyebrow {
  color: var(--candy-red);
  margin: 0 0 40px;
  font-size: 1.85rem;
}

.hero .button-row {
  justify-content: center;
  gap: 24px;
}

.hero .button-row .button {
  min-width: 164px;
}

/* Homepage only (desktop): the nav chrome (tan bar, ribbon, logo) stays hidden
   while the hero is in view, then slides in as ONE unit once you scroll.
   The nav links + Shop CTA stay visible over the hero the whole time.
   Scoped to >960px: on mobile (hamburger mode) the bar stays solid + sticky,
   which is what keeps iOS Safari from drifting it off the top. */
@media (min-width: 961px) {
  .home .top-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: none;
  }

  /* One sliding sheet: the tan fill + bottom rule, behind the nav content. */
  .home .top-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--warm-cream);
    border-bottom: var(--line);
    transform: translateY(-140px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  /* Ribbon + logo ride the sheet down: same distance + timing = one motion. */
  .home .top-shell .stripe-bar,
  .home .top-shell .navbar-logo {
    position: relative;
    z-index: 1;
    transform: translateY(-140px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home .top-shell .nav-container {
    position: relative;
    z-index: 2;
  }

  .home .top-shell.nav-solid::before,
  .home .top-shell.nav-solid .stripe-bar,
  .home .top-shell.nav-solid .navbar-logo {
    transform: translateY(0);
  }

  /* Over the hero (sheet hidden): links + hamburger are full white. */
  .home .top-shell:not(.nav-solid) .nav-links a:not(.nav-shop) {
    color: #fff;
  }

  .home .top-shell:not(.nav-solid) .nav-links a:not(.nav-shop)::after {
    background-color: #fff;
  }

  .home .top-shell:not(.nav-solid) .nav-links a:not(.nav-shop):hover,
  .home .top-shell:not(.nav-solid) .nav-links a.active {
    color: #fff;
  }

  .home .top-shell:not(.nav-solid) .nav-toggle span {
    background: #fff;
  }
}

/* Nav Shop CTA: Restore the button's own padding/size — `.nav-links a` was squishing it. */
.nav-links a.nav-shop {
  padding: 10px 24px;
}

.nav-links a.nav-shop::after {
  display: none;
}

.top-shell.nav-solid .nav-shop,
body:not(.home) .nav-shop {
  background: var(--candy-red);
  color: var(--butter-pale);
}

.top-shell.nav-solid .nav-shop:hover,
body:not(.home) .nav-shop:hover {
  background: var(--candy-red-dark);
  color: var(--butter-pale);
}


.back-cast {
  position: absolute;
  inset: 24px -4px -18px 36px;
  border: var(--line);
  border-radius: var(--radius-xl);
  background: repeating-linear-gradient(90deg, var(--candy-red) 0 28px, var(--soft-white) 28px 56px);
  box-shadow: var(--shadow-lg);
  transform: rotate(2deg);
}

.display-card {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  padding: 34px;
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--near-black);
  color: var(--butter-pale);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.display-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;
  border: 2px dashed var(--butter-pale);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.display-card::after {
  content: "";
  position: absolute;
  right: -75px;
  top: -75px;
  width: 260px;
  height: 260px;
  border: var(--line-light);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 240, 184, 0.35) 0 9px, transparent 9px 18px);
  opacity: 0.45;
  pointer-events: none;
}

/* Button UI */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 52px;
  min-width: 132px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-weight: 950;
  letter-spacing: -0.01em;
  transform: translate(0, 0);
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease, color 130ms ease;
  user-select: none;
}

.button:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-md);
}

.button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000000;
}

.button-red {
  background: var(--candy-red);
  color: var(--butter-pale);
}

.button-red:hover {
  background: var(--candy-red-dark);
}

.button-white {
  background: var(--soft-white);
  color: var(--ink);
}

.button-white:hover {
  color: var(--candy-red-dark);
}

.button-green {
  background: var(--emerald);
  color: var(--butter-pale);
}
.button-green:hover { background: #1a4a37; }

.button-gold {
  background: var(--gold);
  color: var(--ink);
}
.button-gold:hover { color: var(--candy-red-dark); }

.button-dark {
  background: var(--near-black);
  color: var(--butter-pale);
}
.button-dark:hover { color: var(--gold); }

.button-small {
  min-height: 52px;
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* Section Layouts */
.section {
  padding: 92px 0;
  border-top: var(--line);
}

/* Decorative section art: sits behind content, never interactive */
.section.has-decor {
  position: relative;
  overflow: hidden;
}

.section.has-decor > .container {
  position: relative;
  z-index: 1;
}

.section-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Hug the edge on normal desktop; past ~1660px anchor to the content
   column so it stops drifting on ultra-wide screens. */
.decor-chandelier {
  top: -55px;
  right: max(-120px, calc(50% - 940px));
  width: clamp(400px, 36vw, 560px);
  opacity: 0.22;
  clip-path: inset(55px 0 0 0);
  filter: saturate(1.15) contrast(1.06);
  transform: rotate(-2.75deg);
  transform-origin: top center;
}

/* Warm ceiling glow behind the chandelier for depth/context */
.section.soft.has-decor {
  background:
    radial-gradient(115% 85% at 100% 0%, rgba(217, 40, 40, 0.12) 0%, rgba(231, 184, 77, 0.07) 32%, transparent 62%),
    var(--soft-white);
}

/* Cream halo keeps the copy crisp where it overlaps the chandelier */
.section.soft.has-decor h2,
.section.soft.has-decor .eyebrow,
.section.soft.has-decor .lede {
  text-shadow: -3px -4px 12px var(--soft-white), -2px -3px 20px var(--soft-white);
}

/* Candy character perched on the photo frame's top-left corner.
   Fixed size + offset at every breakpoint; above everything; inert. */
.photo-frame {
  position: relative;
}

.frame-sitter {
  position: absolute;
  top: 0;
  left: 0;
  width: 184px;
  height: auto;
  transform: translate(-12px, -62%);
  z-index: 50;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.decor-fan {
  bottom: -60px;
  left: max(-270px, calc(50% - 940px));
  width: clamp(460px, 46vw, 760px);
  opacity: 0.6;
  transform-origin: 50.7% 47.6%;
  animation: fan-spin 18s linear infinite;
}

@keyframes fan-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .decor-fan { animation: none; }
}

.section-title-area {
  margin-bottom: 48px;
  max-width: 700px;
}

.section.soft {
  background: var(--soft-white);
}

/* "As Seen On" press marquee — pinned to the bottom of the hero, over the
   dark-red background + photo. Logos scroll right-to-left, seamless infinite. */
.hero-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 0 26px;
  pointer-events: none;
}
.as-seen-on-title {
  text-align: center;
  margin: 0 0 14px;
  color: #d7d0c4;                 /* darker white / warm gray, not pure white */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: as-seen-scroll 60s linear infinite;
}
/* Fixed logo size — deliberately unchanged on mobile, per request. Horizontal
   margins (not flex gap) keep the copies identical so the loop is seamless.
   The logos are black artwork, so brightness(0) invert(1) renders them white. */
.as-seen-logo {
  height: 48px;
  width: auto;
  flex: 0 0 auto;
  margin: 0 34px;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
@keyframes as-seen-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Seamless ceiling-tile background: tiled (repeats as the viewport grows),
   never scaled up like the hero photo, held at 80% over the cream base. */
.section.has-ceiling {
  position: relative;
  background-color: var(--soft-white);
}

.section.has-ceiling::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('Assets/Website Decorative/Ceiling-Texture.jpg');
  background-repeat: repeat;
  background-size: 2600px auto;
  background-position: center top;
  opacity: 0.8;
  pointer-events: none;
}

.section.has-ceiling > .container {
  position: relative;
  z-index: 1;
}

/* Cards & Grid Systems */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-lg);
}

.history-static-card:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}

.card-img-container {
  aspect-ratio: 4/3;
  width: 100%;
  border: var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--aged-paper);
  margin-bottom: 18px;
  position: relative;
}

.card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.card:hover .card-img-container img {
  transform: scale(1.05) rotate(1deg);
}

.history-static-card:hover .card-img-container img {
  transform: none;
}

.card .mini-label {
  align-self: flex-start;
}

.mini-label {
  display: inline-flex;
  margin-bottom: 12px;
  border: var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  background: var(--soft-white);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card.green {
  background: var(--emerald);
  color: var(--soft-white);
}

.card.green h3,
.card.green p {
  color: var(--soft-white);
}

.card.green .mini-label {
  background: var(--soft-white);
  color: var(--emerald);
}

.card.gold {
  background: var(--gold);
}

.card.pink {
  background: var(--pink);
}

/* Leaflet map embed — a clickable image (no hover), opens Maps */
.map-embed {
  display: block;
  position: relative;
  margin: 0 0 30px;
  border: 2px solid var(--butter-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--aged-paper);
  color: inherit;
}

.map-embed-canvas {
  width: 100%;
  height: 240px;
  background: var(--aged-paper);
  pointer-events: none;
}

.map-embed .leaflet-container {
  background: var(--aged-paper);
  font: inherit;
}

/* Warm the OSM tiles toward the site's cream palette (marker unaffected) */
.map-embed .leaflet-tile {
  filter: grayscale(0.2) sepia(0.45) saturate(0.85) brightness(1.05) contrast(0.9) hue-rotate(-6deg);
}

.map-embed-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 12px 16px;
  background: var(--near-black);
  color: var(--butter-pale);
  border-top: 2px solid var(--butter-pale);
}

.map-embed-addr {
  font-weight: 800;
  font-size: 0.95rem;
}

.map-embed-cta {
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--gold);
}

/* Store info + hours: a wide map card and a narrow hours card */
.info-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: stretch;
  justify-content: center;
}

.info-card {
  position: relative;
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--near-black);
  color: var(--butter-pale);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  overflow: hidden;
}

.info-card--wide {
  flex: 1.8 1 460px;
  max-width: 620px;
}

.info-card--hours {
  flex: 1 1 320px;
  max-width: 400px;
}

/* Once the cards stack, the hours card matches the map card's full width */
@media (max-width: 900px) {
  .info-card--wide,
  .info-card--hours {
    flex-basis: 100%;
    max-width: none;
  }
}

.info-card-frame {
  position: absolute;
  inset: 18px;
  border: 2px dashed var(--butter-pale);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 1;
}

.info-card-body {
  position: relative;
  z-index: 2;
  height: 100%;
}

.info-card--hours .info-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.store-hours {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Custom brand map pin (Leaflet divIcon) */
.mc-marker {
  background: transparent;
  border: 0;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.4));
}

.mc-pin {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  background: var(--candy-red);
  border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.mc-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--butter-pale);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.card.near-black {
  background: var(--near-black);
  color: var(--butter-pale);
}

.card.near-black h3,
.card.near-black p {
  color: var(--butter-pale);
}

.card.near-black .mini-label {
  background: var(--butter-pale);
  color: var(--near-black);
  border-color: var(--near-black);
}

/* History Timelines */
.timeline {
  display: grid;
  gap: 32px;
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: repeating-linear-gradient(180deg, var(--candy-red) 0 10px, var(--soft-white) 10px 20px);
  border: var(--line);
  border-radius: var(--radius-pill);
}

.timeline-item {
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: -32px;
  top: 4px;
  width: 20px;
  height: 20px;
  border: var(--line);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 2px 2px 0 #000000;
}

.timeline-card {
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}

.timeline-year {
  font-family: 'Lobster', Georgia, serif;
  font-size: 2.8rem;
  font-weight: normal;
  color: var(--candy-red-dark);
  line-height: 1;
}

/* Cafe Menu Design */
.menu-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.menu-category-card {
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  padding: 28px;
}

.menu-header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: var(--line);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.menu-header-bar h2 {
  font-size: 2rem;
  margin-bottom: 0;
  line-height: 1;
}

/* Category-level description under the title. */
.menu-cat-desc {
  font-weight: 650;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: -6px 0 16px;
}

/* Per-category size price tiers (Small / Medium / Large / Jumbo, etc.). */
.menu-size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.menu-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: 8px 12px;
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--butter-pale);
  box-shadow: var(--shadow-sm);
}
.menu-size-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.menu-size-price {
  font-weight: 950;
  color: var(--candy-red-dark);
  font-size: 1.15rem;
  line-height: 1.1;
}
/* Single flat price (e.g. sandwiches). */
.menu-price-flat {
  font-weight: 950;
  color: var(--candy-red-dark);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.menu-items-list {
  display: grid;
  gap: 14px;
}
.menu-item-row {
  border-bottom: 1px dashed var(--ink-soft);
  padding-bottom: 12px;
}
.menu-item-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.menu-item-name {
  font-weight: 850;
  font-size: 1.05rem;
}
.menu-item-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.4;
}

/* Optional paid extras for a category (marshmallow, cheese, toppings, …). */
.menu-addons {
  margin-top: 18px;
  padding-top: 14px;
  border-top: var(--line-dashed);
}
.menu-addons-label {
  display: inline-block;
  font-family: 'Lobster', Georgia, serif;
  color: var(--candy-red-dark);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.menu-addon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.menu-addon {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--soft-white);
}
.menu-addon b { color: var(--candy-red-dark); }

/* Contact Forms and Inputs */
.contact-container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
}

.info-panel {
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--near-black);
  color: var(--butter-pale);
  box-shadow: var(--shadow-md);
  padding: 34px;
  position: relative;
}

.info-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px dashed var(--butter-pale);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.info-block {
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

.info-block:last-child {
  margin-bottom: 0;
}

.info-block h3 {
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.info-block p,
.info-block a {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
}

.info-block a:hover {
  text-decoration: underline;
}

.form-panel {
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  padding: 34px;
}

.form-grid {
  display: grid;
  gap: 20px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-weight: 850;
  font-size: 0.9rem;
}

.form-control {
  width: 100%;
  border: var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  background: var(--soft-white);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.08);
}

.form-control:focus {
  outline: none;
  border-color: var(--candy-red);
  background: #fff;
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

/* Administrative Console Styles */
.admin-login-card {
  max-width: 450px;
  margin: 80px auto;
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft-white);
  box-shadow: var(--shadow-lg);
  padding: 34px;
  text-align: center;
}

.admin-login-card h2 {
  font-size: 2.2rem;
  margin-bottom: 24px;
}

.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  margin: 40px 0;
}

.admin-sidebar {
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
}

.admin-nav-btn {
  width: 100%;
  border: var(--line);
  border-radius: var(--radius-pill);
  padding: 12px 16px;
  background: var(--soft-white);
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000000;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.admin-nav-btn:hover,
.admin-nav-btn.active {
  transform: translate(-2px, -2px);
  background: var(--candy-red);
  color: var(--butter-pale);
  box-shadow: 4px 4px 0 #000000;
}

.admin-content-panel {
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft-white);
  box-shadow: var(--shadow-lg);
  padding: 34px;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
}

.admin-table th,
.admin-table td {
  border: var(--line);
  padding: 12px;
  text-align: left;
}

.admin-table th {
  background: var(--aged-paper);
  font-weight: 950;
  font-family: Georgia, serif;
}

.admin-table td {
  background: var(--soft-white);
}

.admin-table tr:first-child th:first-child { border-top-left-radius: var(--radius-sm); }
.admin-table tr:first-child th:last-child { border-top-right-radius: var(--radius-sm); }
.admin-table tr:last-child td:first-child { border-bottom-left-radius: var(--radius-sm); }
.admin-table tr:last-child td:last-child { border-bottom-right-radius: var(--radius-sm); }

/* Footer Design */
.site-footer {
  margin-top: auto;
  border-top: var(--line);
  background: var(--near-black);
  color: var(--butter-pale);
  padding: 48px 0 32px;
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  border-bottom: var(--line);
  background: repeating-linear-gradient(
    90deg,
    var(--candy-red) 0 24px,
    var(--candy-red) 24px 25px,
    var(--soft-white) 25px 49px,
    var(--soft-white) 49px 50px
  );
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-logo {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-weight: 950;
  color: var(--butter-pale);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-nav {
  display: grid;
  gap: 10px;
}

.footer-nav a {
  font-weight: 700;
  transition: color 120ms ease;
}

.footer-nav a:hover {
  color: var(--candy-red);
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border: 2px solid var(--butter-pale);
  border-radius: 50%;
  background: var(--ink);
  color: var(--butter-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 950;
  box-shadow: 2px 2px 0 #000000;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.social-icon:hover {
  transform: translate(-2px, -2px);
  background: var(--candy-red);
  box-shadow: 4px 4px 0 #000000;
  color: var(--butter-pale);
}

.footer-bottom {
  border-top: 2px dashed rgba(255, 240, 184, 0.2);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: rgba(255, 240, 184, 0.7);
}

/* Notification Overlay */
.toast-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  border: var(--line);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  background: var(--emerald);
  color: var(--soft-white);
  box-shadow: var(--shadow-md);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(150%);
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-notice.show {
  transform: translateY(0);
}

/* Media Queries for Responsiveness */
@media (max-width: 960px) {
  /* iOS Safari extends this solid header into the Dynamic Island safe area. */
  .top-shell { padding-top: env(safe-area-inset-top, 0px); }
  .hero-wrapper {
    height: 72vh;
    min-height: 420px;
  }

  .hero {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 9.2vw, 5.4rem);
    max-width: 16ch;
    margin: 0 auto 18px;
  }

  .button-row {
    justify-content: center;
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-section-grid {
    grid-template-columns: 1fr;
  }

  .contact-container {
    grid-template-columns: 1fr;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  body:not(.home) .grid-2 { grid-template-columns: 1fr !important; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Responsive Hamburger menu adjustments */
  .nav-toggle {
    display: block;
  }

  .nav-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
  }

  /* Drawer is its own overlay LAYER: absolutely positioned so it never pushes
     page content. Drops below the bar; scrolls if the links exceed the screen. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--warm-cream);
    border-bottom: var(--line);
    padding: 8px 20px 16px;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
    z-index: 1200;
  }

  .menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  .nav-links a { padding: 10px 0; }

  /* Mobile bar is always solid cream, so the Shop pill is always the red state. */
  .top-shell .nav-shop {
    background: var(--candy-red);
    color: var(--butter-pale);
  }
  .top-shell .nav-shop:hover {
    background: var(--candy-red-dark);
  }

  .nav-links a {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 300ms ease, transform 300ms ease, color 150ms ease;
  }

  .menu-open .nav-links a {
    opacity: 1;
    transform: translateY(0);
  }

  .menu-open .nav-links a:nth-child(1) { transition-delay: 80ms; }
  .menu-open .nav-links a:nth-child(2) { transition-delay: 130ms; }
  .menu-open .nav-links a:nth-child(3) { transition-delay: 180ms; }
  .menu-open .nav-links a:nth-child(4) { transition-delay: 230ms; }
  .menu-open .nav-links a:nth-child(5) { transition-delay: 280ms; }
}

@media (max-width: 640px) {
  .grid-3, .grid-4, .grid-2 {
    grid-template-columns: 1fr;
  }

  .timeline-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .timeline-year {
    font-size: 2.2rem;
  }

  h1 {
    font-size: clamp(2.4rem, 12vw, 4.5rem);
  }

  h2 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  .display-card {
    padding: 20px;
    min-height: 380px;
  }

  .display-card::before {
    inset: 12px;
  }
}

@media (max-width: 420px) {
  .nav-container { min-height: 64px; padding: 8px 0; gap: 8px; }
  .logo-link { min-width: 0; }
  .navbar-logo { height: clamp(36px, 12vw, 44px); max-width: calc(100vw - 88px); }
  .nav-toggle { width: clamp(36px, 11vw, 42px); height: clamp(36px, 11vw, 42px); flex: 0 0 auto; }
  .nav-toggle span { width: 68%; left: 16%; height: 3px; }
  .nav-toggle span:nth-child(1) { top: 27%; }
  .nav-toggle span:nth-child(2) { top: 46%; }
  .nav-toggle span:nth-child(3) { top: 65%; }
  .menu-open .nav-toggle span:nth-child(1),
  .menu-open .nav-toggle span:nth-child(3) { top: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   Inline Visual Editor (edit mode)
   ========================================================================= */
.mc-edit body { padding-top: 52px; }
.mc-edit .top-shell { top: 52px; }

/* Top edit banner */
.mc-editbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  z-index: 100000;
  background: var(--candy-red);
  color: #fff;
  border-bottom: var(--line);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
}
.mc-editbar-inner {
  width: min(var(--max-width), calc(100% - 32px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mc-editbar-msg {
  font-weight: 750;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-editbar-msg strong { font-weight: 900; }
.mc-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(0,0,0,0.25);
  animation: mc-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes mc-pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.mc-save-state {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.92;
  white-space: nowrap;
}
.mc-save-state.mc-saving { color: var(--butter-pale); }
.mc-save-state.mc-error { color: #ffe0e0; }

.mc-editbar-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mc-cancel {
  background: transparent; border: none; color: #fff;
  font-weight: 800; font-size: 0.95rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px;
}
.mc-cancel:hover { color: var(--butter-pale); }
.mc-publish {
  background: #fff; color: var(--candy-red-dark);
  border: var(--line); border-radius: var(--radius-pill);
  font-weight: 950; font-size: 0.95rem; cursor: pointer;
  padding: 9px 26px; box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.mc-publish:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(0,0,0,0.45); }
.mc-publish:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Overlay layer + floating badges */
.mc-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 900; }
.mc-badge {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto;
  box-shadow: 2px 2px 0 #000;
  transition: transform 110ms ease, background 110ms ease;
}
.mc-badge:hover { transform: scale(1.12); background: #fff; }
.mc-badge-btn { background: var(--candy-red); color: #fff; }
.mc-badge-btn:hover { background: #fff; color: var(--candy-red-dark); }

/* Editable text affordances */
.mc-edit .mc-editable-text { outline: 2px dashed transparent; outline-offset: 3px; border-radius: 4px; transition: outline-color 120ms ease, background 120ms ease; cursor: text; }
.mc-edit .mc-editable-text:hover { outline-color: var(--gold); background: rgba(231,184,77,0.12); }
.mc-edit .mc-editing { outline: 2px solid var(--candy-red) !important; background: #fff; box-shadow: 0 0 0 4px rgba(217,40,40,0.12); }

/* Editable button affordance */
.mc-edit .mc-editable-btn { position: relative; }
.mc-edit .mc-editable-btn::after {
  content: ""; position: absolute; inset: -4px; border: 2px dashed transparent; border-radius: var(--radius-pill); pointer-events: none; transition: border-color 120ms ease;
}
.mc-edit .mc-editable-btn:hover::after { border-color: var(--candy-red); }

/* Image upload overlay */
.mc-img-overlay {
  position: absolute;
  border: none; padding: 0; margin: 0;
  background: rgba(23,20,17,0.0);
  border-radius: var(--radius-md);
  cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms ease;
  overflow: hidden;
}
.mc-img-overlay:hover { background: rgba(23,20,17,0.55); }
.mc-img-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 140ms ease, transform 140ms ease;
}
.mc-img-overlay:hover .mc-img-inner { opacity: 1; transform: translateY(0); }
.mc-img-plus {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; line-height: 1;
}
.mc-img-text { font-weight: 850; font-size: 0.9rem; letter-spacing: 0.02em; }

/* Button editor modal */
.mc-modal-back {
  position: fixed; inset: 0; z-index: 100001;
  background: rgba(23,20,17,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.mc-modal {
  width: min(420px, 100%);
  background: var(--soft-white);
  border: var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.mc-modal-title { font-size: 1.6rem; margin-bottom: 18px; }
.mc-field { display: grid; gap: 6px; margin-bottom: 16px; }
.mc-field > span { font-weight: 850; font-size: 0.85rem; }
.mc-field input {
  width: 100%; border: var(--line); border-radius: var(--radius-md);
  padding: 10px 14px; background: #fff; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.08); font-size: 0.95rem;
}
.mc-field input:focus { outline: none; border-color: var(--candy-red); }
.mc-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-swatch {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--ink); cursor: pointer;
  box-shadow: 2px 2px 0 #000; transition: transform 110ms ease;
}
.mc-swatch:hover { transform: scale(1.1); }
.mc-swatch.active { outline: 3px solid var(--gold); outline-offset: 2px; }
.mc-sw-red { background: var(--candy-red); }
.mc-sw-white { background: var(--soft-white); }
.mc-sw-green { background: var(--emerald); }
.mc-sw-gold { background: var(--gold); }
.mc-sw-dark { background: var(--near-black); }
.mc-modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.mc-mbtn-ghost {
  background: transparent; border: none; font-weight: 850; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 10px 6px; color: var(--ink-soft);
}
.mc-mbtn-solid {
  background: var(--candy-red); color: #fff; border: var(--line);
  border-radius: var(--radius-pill); font-weight: 900; cursor: pointer;
  padding: 10px 24px; box-shadow: 3px 3px 0 #000;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.mc-mbtn-solid:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #000; }

@media (max-width: 640px) {
  .mc-editbar-msg { font-size: 0.8rem; }
  .mc-editbar-msg .mc-editbar-longtext { display: none; }
}

.footer-bottom { flex-wrap: wrap; gap: 16px; }

/* =====================================================================
   Blog / Journal — home band, listing cards, and single-post body
   ===================================================================== */

/* Global safety net: decorative art that bleeds past the right edge should
   never create a horizontal scrollbar. overflow-x: clip (unlike hidden) does
   not create a scroll container, so the sticky header keeps working. */
body { overflow-x: clip; }

.home-journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.home-journal-all { white-space: nowrap; }

/* Desktop: the "Read The Journal" button lives in the section head (top-right)
   and the mobile version is hidden. On tablet/phone the head button hides and
   the button drops below the stacked cards (after the journal), before the
   next section. */
.home-journal-all-mobile-row { display: none; }
@media (max-width: 960px) {
  .home-journal-head .home-journal-all { display: none; }
  .home-journal-all-mobile-row { display: flex; justify-content: center; margin-top: 30px; }
}

/* Journal band shares the soft radial-gradient look of the intro section,
   but with the warm glow moved to the top-left to sit under the painting. */
.section.soft.has-decor.home-journal {
  background:
    radial-gradient(115% 85% at 0% 0%, rgba(217, 40, 40, 0.12) 0%, rgba(231, 184, 77, 0.07) 32%, transparent 62%),
    var(--soft-white);
}

/* Framed portrait peeking from the top-left corner — mirrors the chandelier
   (top-right). Tilts the opposite way, slightly softer opacity, similar zoom. */
.decor-painting {
  top: -46px;
  right: max(-110px, calc(50% - 900px));
  width: clamp(320px, 30vw, 460px);
  opacity: 0.3;
  filter: saturate(1.05);
  transform: rotate(-5deg);
  transform-origin: top center;
}
@media (max-width: 780px) {
  .decor-painting { display: none; }
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* The home page deliberately spotlights only the newest two stories. */
.home-journal .journal-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 700px) {
  .home-journal .journal-grid { grid-template-columns: 1fr; }
}

/* --- "Latest From McCord" triad: Journal | TikTok | Instagram ------------
   Three equal columns on the home page. The journal card reuses the existing
   .journal-card component verbatim; the TikTok + Instagram embeds sit inside
   .social-frame, which repeats the exact same 2px ink border, 26px corner
   radius and hard offset shadow so all three read as one set. */
.social-triad {
  /* Shared tile height for the journal + Instagram tiles. A script measures the
     TikTok embed's natural height on load and sets this variable to it, so all
     three columns end up exactly as tall as the TikTok card (this value is just
     the fallback used before the embed reports its size). */
  --social-tile-h: 500px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}
/* Tablet: journal spans the full first row, socials share a two-up row below. */
@media (max-width: 960px) {
  .social-triad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-col--journal { grid-column: 1 / -1; }
}
/* Phone: single stacked column. */
@media (max-width: 620px) {
  .social-triad { grid-template-columns: 1fr; }
  .social-col--journal { grid-column: auto; }
}

/* Shared frame for TikTok + Instagram — matches .journal-card exactly, and is
   locked to the fixed tile height so both embeds are the same height as the
   journal card in the desktop triad. */
.social-frame {
  display: flex;
  flex-direction: column;
  height: var(--social-tile-h);
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Match the journal card to the same fixed height only in the 3-across desktop
   layout. When the grid reflows (journal goes full-width on tablet/phone) the
   card returns to its natural height so its wide thumbnail is never clipped. */
@media (min-width: 961px) {
  .social-col--journal .journal-card { height: var(--social-tile-h); }
}
/* The TikTok tile sizes to the embed's own natural height (no forced height),
   and that measured height is what drives --social-tile-h for the other two. */
.social-col--tiktok .social-frame { height: auto; }

/* Vintage marquee header bar naming the platform. */
.social-frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ink);
  border-bottom: var(--line);
}
.social-frame-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lobster', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--butter-pale);
}
.social-frame-ic { width: 20px; height: 20px; fill: var(--gold); flex: 0 0 auto; }
.social-frame-follow {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58%;
}
.social-frame-follow:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Embed body — fills the remaining frame height and clips any overflow so the
   tile stays a fixed size (portrait videos are taller than the tile; the top
   of the video shows and the rest is clipped by the frame). */
.social-embed { flex: 1; min-height: 0; overflow: hidden; background: var(--soft-white); }

/* Keep the TikTok player pinned to the column width (its default markup wants
   a 288px+ min-width and side margins that would otherwise break the frame). */
.social-embed--tiktok .tiktok-embed {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.social-embed--tiktok iframe { display: block; width: 100% !important; margin: 0 !important; }

/* Instagram: the native post/reel embed. Instagram's own iframe carries a
   rounded border + shadow; we strip those so only our frame's edge/shadow/radius
   show, matching the TikTok tile. Center it and pin it to the top of the tile. */
.social-embed--instagram { display: flex; justify-content: center; }
.social-embed--instagram .instagram-media {
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--soft-white) !important;
}
.social-embed--instagram iframe { margin: 0 auto !important; }

/* On-brand placeholder shown when no Instagram URL is set (or it can't load). */
.ig-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 44px 24px 36px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(217, 40, 40, 0.10) 0%, rgba(231, 184, 77, 0.06) 42%, transparent 72%),
    var(--soft-white);
}
.ig-fallback-glyph {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--gold);
  box-shadow: var(--shadow-sm);
}
.ig-fallback-glyph svg { width: 34px; height: 34px; fill: var(--ink); }
.ig-fallback-title {
  font-family: 'Lobster', Georgia, serif;
  color: var(--candy-red-dark);
  font-size: 1.4rem;
  line-height: 1.12;
}
.ig-fallback-sub {
  font-weight: 620;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 34ch;
}
.ig-fallback .button { margin-top: 6px; }

/* Shared end-of-page invitation. */
.visit-callout .info-card-body h2 { color: var(--butter-pale); margin-bottom: 22px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.visit-callout .info-card-body p { color: var(--butter-pale); font-weight: 600; font-size: 1.1rem; margin-bottom: 0; }
.visit-callout .store-hours h3 { color: var(--gold); margin-bottom: 18px; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; }
.visit-callout .store-hours p { font-size: 1rem; font-weight: 700; }
.visit-map-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 2px solid var(--butter-pale);
  border-radius: var(--radius-md);
  background: rgba(255, 240, 184, 0.09);
  color: var(--butter-pale);
  font-weight: 700;
}
.visit-map-link:hover { background: rgba(231, 184, 77, 0.22); }
.visit-map-link-title { color: var(--gold); font-size: 1.05rem; font-weight: 900; }

/* Candy Cane Tours ------------------------------------------------------ */
.section.soft.tour-introduction {
  padding: 76px 0 64px;
  border-top: 0;
  background:
    radial-gradient(115% 85% at 100% 0%, rgba(217, 40, 40, 0.12) 0%, rgba(231, 184, 77, 0.07) 32%, transparent 62%),
    var(--soft-white);
}
.tour-introduction-grid, .tour-info-top { align-items: center; gap: 48px; }
.tour-photo-frame,
.tour-info-photo-wrap {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.tour-photo-frame-inner {
  padding: 16px;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--radius-xl);
  background: repeating-linear-gradient(45deg, var(--candy-red) 0 14px, var(--soft-white) 14px 28px);
  box-shadow: var(--shadow-md);
}
.tour-photo-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1408 / 1117;
  object-fit: cover;
  border: var(--line);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.tour-intro-copy h1 { font-size: clamp(3rem, 6vw, 5.4rem); }
.tour-intro-copy .lede:last-of-type { margin-bottom: 24px; }
.tour-notice { width: 100%; margin: 0 0 24px; padding: 18px 20px; border: var(--line); border-radius: var(--radius-md); background: var(--gold); font-weight: 750; line-height: 1.45; text-align: left; }
.tour-notice a { color: var(--candy-red-dark); font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }
.section.soft.tour-info-section { background: var(--warm-cream); }
.tour-info { max-width: 1040px; margin: 0 auto; }
.tour-info h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.tour-info-top .lede:last-child { margin-bottom: 0; }
.tour-info-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1408 / 1117;
  object-fit: cover;
  border: var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.tour-accordions { display: grid; gap: 20px; margin: 44px 0; }
.tour-accordion { overflow: hidden; border: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tour-accordion-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 24px;
  border: 0;
  cursor: pointer;
  font: 400 clamp(1.6rem, 3.4vw, 2.35rem) / 1.1 'Lobster', Georgia, serif;
  text-align: left;
}
.tour-accordion-icon { flex: 0 0 auto; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 2rem; font-weight: 400; line-height: 1; transition: transform 260ms ease; }
.tour-accordion.is-open .tour-accordion-icon { transform: rotate(45deg); }
.tour-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease; }
.tour-accordion.is-open .tour-accordion-panel { grid-template-rows: 1fr; }
.tour-accordion-content { min-height: 0; overflow: hidden; }
.tour-accordion-content ul { margin: 0; padding: 0 28px 26px 46px; font-weight: 650; line-height: 1.5; }
.tour-accordion-content li { margin-bottom: 10px; }
.tour-accordion--red { background: var(--candy-red); color: var(--butter-pale); }
.tour-accordion--red .tour-accordion-toggle { background: var(--candy-red); color: var(--butter-pale); }
.tour-accordion--red .tour-accordion-content a { color: var(--butter-pale); }
.tour-accordion--gold { background: var(--gold); color: var(--ink); }
.tour-accordion--gold .tour-accordion-toggle { background: var(--gold); color: var(--ink); }
.tour-accordion--gold .tour-accordion-content a { color: var(--candy-red-dark); font-weight: 900; }
.tour-closing { max-width: 720px; margin: 0 auto; text-align: center; }
.tour-closing .lede { margin-inline: auto; }
@media (max-width: 860px) {
  .tour-introduction, .tour-info-top { gap: 32px; }
}

/* Ticket-sale unavailable page ----------------------------------------- */
.ticket-unavailable-page {
  padding: clamp(56px, 8vw, 84px) 0;
  border-top: var(--line);
  background:
    radial-gradient(circle at 20% 12%, rgba(231, 184, 77, 0.26) 0 12%, transparent 30%),
    var(--warm-cream);
}
.ticket-unavailable-card {
  width: min(540px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 42px);
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--soft-white);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.ticket-unavailable-card h1 {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
}
.ticket-desktop-break { display: none; }
.ticket-unavailable-card .lede { margin-inline: auto; }
.ticket-unavailable-card .button { font-family: inherit; font-size: 1rem; }
@media (min-width: 621px) {
  .ticket-unavailable-card {
    width: min(760px, 100%);
    padding: 44px 52px;
  }
  .ticket-unavailable-card h1 {
    font-size: clamp(3.2rem, 4.4vw, 4rem);
  }
  .ticket-desktop-break { display: inline; }
}

.journal-card {
  display: flex;
  flex-direction: column;
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.journal-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }

/* Large rectangular thumbnail with rounded corners (rounded via the card clip) */
.journal-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--aged-paper);
  border-bottom: var(--line);
  overflow: hidden;
}
.journal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
.journal-card:hover .journal-thumb img { transform: scale(1.05); }

.journal-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 22px 24px;
  flex: 1;
}
.journal-card-title {
  font-family: 'Lobster', Georgia, serif;
  color: var(--candy-red-dark);
  font-size: 1.5rem;
  line-height: 1.12;
  margin: 8px 0 6px;
}
.journal-card-excerpt {
  font-weight: 620;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.journal-readmore {
  margin-top: auto;
  font-weight: 900;
  color: var(--candy-red);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.journal-card:hover .journal-readmore { text-decoration: underline; text-underline-offset: 3px; }

/* Single post ------------------------------------------------------------- */
.post-hero {
  width: 100%;
  aspect-ratio: 16 / 8;
  margin: 8px 0 30px;
  border: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--aged-paper);
  box-shadow: var(--shadow-md);
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-body { font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); font-weight: 500; }
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 20px; }
.post-body h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 34px 0 12px; color: var(--candy-red-dark); }
.post-body h3 { font-size: clamp(1.25rem, 3vw, 1.55rem); margin: 28px 0 10px; color: var(--ink); }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 26px; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--candy-red); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote {
  margin: 24px 0;
  padding: 14px 22px;
  border-left: 5px solid var(--candy-red);
  background: var(--soft-white);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
}
.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.post-body table, .post-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0;
  border: var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 0.98rem;
}
.post-body th, .post-body td, .post-table th, .post-table td {
  border-right: var(--line);
  border-bottom: var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.post-body tr > *:last-child, .post-table tr > *:last-child { border-right: none; }
.post-body tr:last-child > *, .post-table tr:last-child > * { border-bottom: none; }
.post-body th, .post-table th { background: var(--aged-paper); font-weight: 900; font-family: Georgia, serif; }
.post-body td, .post-table td { background: var(--soft-white); }

/* =====================================================================
   Admin: Substack-style rich blog editor
   ===================================================================== */
.field-hint { font-weight: 600; color: var(--ink-soft); font-size: 0.8rem; }
.thumb-uploader { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.thumb-uploader .thumb-preview { margin-top: 0; }

.rte {
  border: var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--soft-white);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.08);
}
.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--aged-paper);
  border-bottom: var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
}
.rte-btn {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--soft-white);
  padding: 5px 10px;
  min-width: 34px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 100ms ease, background 100ms ease, color 100ms ease;
}
.rte-btn:hover { background: var(--candy-red); color: #fff; transform: translate(-1px, -1px); }
.rte-btn b { font-weight: 900; }
.rte-btn i { font-style: italic; }
.rte-sep { width: 2px; align-self: stretch; background: rgba(0, 0, 0, 0.15); margin: 2px 4px; }

.rte-editor {
  min-height: 260px;
  max-height: 620px;
  overflow-y: auto;
  padding: 18px 20px;
  line-height: 1.65;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--ink-soft); opacity: 0.55; }
.rte-editor:focus { background: #fff; }
.rte-editor h2, .rte-editor h3 { color: var(--candy-red-dark); margin: 14px 0 8px; line-height: 1.15; }
.rte-editor p { margin: 0 0 14px; }
.rte-editor a { color: var(--candy-red); text-decoration: underline; }
.rte-editor img { max-width: 100%; height: auto; border-radius: var(--radius-md); border: var(--line); margin: 12px 0; display: block; }
.rte-editor blockquote { border-left: 5px solid var(--candy-red); margin: 12px 0; padding: 6px 16px; color: var(--ink-soft); font-style: italic; }
.rte-editor table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.rte-editor th, .rte-editor td { border: var(--line); padding: 8px 10px; min-width: 40px; }
.rte-editor th { background: var(--aged-paper); font-family: Georgia, serif; }

@media (max-width: 900px) {
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .journal-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Menu page — tabs, dynamic category columns + finer striped ball
   ===================================================================== */
/* Tab bar grouping the category cards into "pages". */
.menu-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.menu-tab {
  font-family: 'Lobster', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1;
  padding: 12px 22px;
  color: var(--ink);
  background: var(--soft-white);
  border: var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease, color 100ms ease;
}
.menu-tab:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.menu-tab.active {
  background: var(--candy-red);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.menu-columns {
  columns: 2;
  column-gap: 32px;
}
.menu-columns .menu-category-card {
  break-inside: avoid;
  margin-bottom: 32px;
}
@media (max-width: 760px) {
  .menu-columns { columns: 1; }
}

/* The striped "ball" next to each category title — finer stripes so it
   reads as a striped sphere rather than one big diagonal band. */
.menu-ball {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* =====================================================================
   Admin — full menu editor (categories, color dots, items)
   ===================================================================== */
.menu-edit-cat {
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--aged-paper);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
  padding: 18px 18px 16px;
  margin-bottom: 22px;
}
.menu-edit-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.menu-edit-cat-head .cat-name-input {
  flex: 1;
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 8px 12px;
}
.menu-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
  margin: 20px 0 24px;
  padding: 6px 4px;
}
.menu-color-dot {
  width: 30px;
  height: 30px;
  border: var(--line);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.menu-color-dot:hover { transform: translate(-1px, -1px); }
.menu-color-dot.active {
  outline: 3px solid var(--candy-red);
  outline-offset: 2px;
}
.menu-edit-table { margin-bottom: 12px; }
.menu-edit-table .menu-cell { padding: 8px 10px; font-size: 0.9rem; }
.menu-edit-table td:last-child, .menu-edit-table th:last-child { text-align: center; }
.menu-icon-btn {
  width: 30px;
  height: 30px;
  border: var(--line);
  border-radius: 50%;
  background: var(--soft-white);
  color: var(--candy-red-dark);
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.menu-icon-btn:hover { background: var(--candy-red); color: #fff; }
.menu-cat-desc-input { margin-bottom: 14px; font-size: 0.9rem; }
.menu-edit-subhead {
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 1rem;
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-soft);
}
.menu-edit-subhead .field-hint { font-family: inherit; font-weight: 600; display: block; margin-top: 2px; }

/* --- Admin: pages (tabs) manager --------------------------------------- */
.menu-tabs-manager {
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-white);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.menu-tabs-manager h4 { font-family: Georgia, serif; font-size: 1.1rem; margin: 0 0 10px; }
.menu-tab-manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.menu-tab-manage-row .tab-name-input { flex: 1; font-weight: 800; }
.menu-tab-manage-row label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 800; white-space: nowrap;
}
.menu-tab-manage-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--candy-red); }

/* --- Admin: a page's group of category editors ------------------------- */
.menu-tab-group { margin-bottom: 26px; }
.menu-tab-group-head {
  font-family: 'Lobster', Georgia, serif;
  color: var(--candy-red-dark);
  font-size: 1.4rem;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--ink);
}

/* --- Admin: collapsible category card ---------------------------------- */
.menu-edit-cat-head { cursor: default; }
.menu-edit-cat-toggle {
  width: 30px; height: 30px; flex-shrink: 0;
  border: var(--line); border-radius: 50%;
  background: var(--soft-white); color: var(--ink);
  font-size: 1rem; font-weight: 900; line-height: 1; cursor: pointer;
}
.menu-edit-cat-toggle:hover { background: var(--gold); }
.menu-edit-cat-body { display: none; margin-top: 12px; }
.menu-edit-cat.is-open > .menu-edit-cat-body { display: block; }
.menu-edit-cat-actions { display: flex; gap: 8px; }
.menu-edit-cat-collapsed-hint {
  font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin-left: 4px;
}