/* Thorman Coffee Lux — dedicated menu page */
.menu-page { background: var(--color-ivory); }

.menu-page .site-nav > a[aria-current="page"] { color: var(--color-gold-light); }
.menu-page .site-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.menu-page .site-header.is-scrolled .site-nav > a[aria-current="page"] { color: var(--color-matcha-deep); }

/* Compact menu hero */
.menu-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: var(--color-espresso);
  color: var(--color-white);
}
.menu-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(71,49,39,0.45), transparent 52%),
    radial-gradient(circle at 82% 20%, rgba(204,181,135,0.13), transparent 30%);
  content: '';
  pointer-events: none;
}
.menu-hero__layout {
  position: relative;
  display: grid;
  min-height: 520px;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-top: 7rem;
  padding-bottom: 3rem;
}
.menu-hero__content { max-width: 760px; }
.menu-hero__content .eyebrow { margin-bottom: 1rem; }
.menu-hero__content h1 {
  margin-bottom: 1.4rem;
  font-size: clamp(3.25rem, 5.3vw, 5.5rem);
  line-height: 0.97;
}
.menu-hero__content > p:last-child {
  max-width: 590px;
  margin-bottom: 0;
  color: rgba(255,253,249,0.7);
  font-size: clamp(0.96rem, 1.25vw, 1.08rem);
}
.menu-hero__visual {
  position: relative;
  height: auto;
  aspect-ratio: 1672 / 941;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(204,181,135,0.28);
  border-radius: var(--radius-large);
  background: var(--color-espresso-soft);
  box-shadow: 0 24px 60px rgba(15,9,7,0.24);
}
.menu-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Compact in-page category selector */
.menu-category-nav {
  position: sticky;
  top: 5.5rem;
  z-index: 70;
  padding-top: 1rem;
  background: transparent;
}
.menu-category-nav__viewport {
  width: fit-content;
  max-width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin-inline: auto;
  padding: 0.38rem;
  overflow: hidden;
  border: 1px solid rgba(43,28,22,0.12);
  border-radius: 999px;
  background: rgba(247,242,232,0.9);
  box-shadow: 0 9px 24px rgba(43,28,22,0.075);
  backdrop-filter: blur(12px);
}
.menu-category-nav__track {
  display: flex;
  min-width: max-content;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  margin-inline: auto;
  padding: 0;
}
.menu-category-nav button {
  appearance: none;
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0.62rem clamp(0.9rem, 1.8vw, 1.35rem);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.menu-category-nav button:hover,
.menu-category-nav button:focus-visible {
  border-color: rgba(178,146,95,0.34);
  background: rgba(217,201,181,0.48);
  color: var(--color-espresso);
}
.menu-category-nav button[aria-selected="true"] {
  border-color: rgba(204,181,135,0.58);
  background: var(--color-espresso-soft);
  color: var(--color-ivory);
  box-shadow: inset 0 0 0 1px rgba(204,181,135,0.1), 0 4px 12px rgba(43,28,22,0.12);
}

/* Editorial category collection */
.menu-collection { padding-block: clamp(2.8rem, 5vw, 4.75rem); }
.menu-collection__inner { display: grid; }
.menu-category {
  --menu-tone: var(--color-ivory-deep);
  --menu-accent: var(--color-gold);
  --menu-image-scale: 0.92;
  --menu-image-hover-scale: 0.945;
  --menu-image-y: 0px;
  display: grid;
  grid-area: 1 / 1;
  min-height: 248px;
  grid-template-columns: minmax(240px, 0.85fr) minmax(260px, 1fr) 228px;
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding: 1rem 1rem 1rem clamp(1.5rem, 3.5vw, 3.25rem);
  overflow: hidden;
  border: 1px solid rgba(43,28,22,0.1);
  border-radius: var(--radius-large);
  background: var(--menu-tone);
  box-shadow: 0 12px 32px rgba(43,28,22,0.045);
  opacity: 0;
  pointer-events: none;
  scroll-margin-top: 9rem;
  transform: translateY(8px);
  visibility: hidden;
  transition:
    opacity 240ms cubic-bezier(0.22,0.61,0.36,1),
    transform 240ms cubic-bezier(0.22,0.61,0.36,1),
    visibility 0s linear 240ms,
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition-slow);
}
.menu-category.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.menu-category--coffee { --menu-tone: #e7dbcd; --menu-accent: var(--color-espresso-soft); }
.menu-category--matcha { --menu-tone: #dfe1d3; --menu-accent: var(--color-matcha-deep); --menu-image-y: 2px; }
.menu-category--smoothies { --menu-tone: #e8d9d4; --menu-accent: #8a6658; --menu-image-scale: 1.32; --menu-image-hover-scale: 1.35; }
.menu-category--refreshers { --menu-tone: #dde0d1; --menu-accent: var(--color-matcha-deep); --menu-image-scale: 1.32; --menu-image-hover-scale: 1.35; }
.menu-category--lemonades { --menu-tone: #e9e0c8; --menu-accent: var(--color-gold); --menu-image-scale: 0.95; --menu-image-hover-scale: 0.975; --menu-image-y: 2px; }
.menu-category__intro .eyebrow { margin-bottom: 0.7rem; color: var(--menu-accent); }
.menu-category__intro h2 {
  margin-bottom: 0.85rem;
  font-size: clamp(2.55rem, 4vw, 4rem);
  line-height: 0.95;
}
.menu-category__intro > p:last-child {
  max-width: 330px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.menu-category__selection {
  min-height: 118px;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid rgba(43,28,22,0.13);
}
.menu-drink-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 0.7rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-drink-list li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1rem;
  font-family: 'Iowan Old Style', Baskerville, var(--font-display);
  font-size: clamp(1.18rem, 1.55vw, 1.45rem);
  line-height: 1.25;
}
.menu-drink-list li::before {
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 0.35rem;
  height: 1px;
  background: var(--menu-accent);
  content: '';
}
.menu-category__selection--pending {
  display: flex;
  align-items: center;
}
.menu-category__selection--pending p {
  max-width: 285px;
  margin: 0;
  color: var(--color-text-muted);
  font-family: 'Iowan Old Style', Baskerville, var(--font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.4;
}
.menu-category__visual {
  position: relative;
  display: grid;
  height: 216px;
  margin: 0;
  padding: 0.75rem 0.75rem 0.55rem;
  overflow: hidden;
  place-items: end center;
  border-radius: calc(var(--radius-large) - 0.25rem);
  background: var(--color-espresso-soft);
}
.menu-category__visual::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,253,249,0.12);
  border-radius: inherit;
  content: '';
  pointer-events: none;
}
.menu-category__visual img {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: calc(100% - 1.5rem);
  height: calc(100% - 1.3rem);
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(var(--menu-image-y)) scale(var(--menu-image-scale));
  transform-origin: center bottom;
  transition: transform 560ms cubic-bezier(0.22,0.61,0.36,1);
}

/* Event menu callout */
.menu-customization {
  padding-block: clamp(3.3rem, 5vw, 4.8rem);
  background: var(--color-matcha-deep);
  color: var(--color-white);
}
.menu-customization__inner {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}
.menu-customization .eyebrow { margin-bottom: 0.8rem; }
.menu-customization h2 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(2.75rem, 4.5vw, 4.5rem);
}
.menu-customization h2 em { color: var(--color-gold-light); }
.menu-customization__content {
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid rgba(255,253,249,0.2);
}
.menu-customization__content p {
  max-width: 470px;
  margin: 0 0 1.4rem;
  color: rgba(255,253,249,0.7);
  font-size: 0.9rem;
  line-height: 1.65;
}
.menu-customization .button { min-height: 3.15rem; }

@media (hover: hover) and (pointer: fine) {
  .menu-category:hover {
    border-color: rgba(178,146,95,0.38);
    box-shadow: 0 16px 38px rgba(43,28,22,0.075);
  }
  .menu-category:hover .menu-category__visual img {
    transform: translateY(calc(var(--menu-image-y) - 2px)) scale(var(--menu-image-hover-scale));
  }
}

/* Tablet */
@media (max-width: 960px) {
  .menu-category-nav button { min-height: 2.75rem; }
  .menu-page .site-nav > a[aria-current="page"] { color: var(--color-gold-light); }
  .menu-hero,
  .menu-hero__layout { min-height: 500px; }
  .menu-hero__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.7fr);
    gap: 2.5rem;
    padding-top: 6.75rem;
  }
  .menu-hero__content h1 { font-size: clamp(3rem, 6.6vw, 4.6rem); }
  .menu-hero__visual { height: auto; }
  .menu-category {
    grid-template-columns: minmax(210px, 0.8fr) minmax(230px, 1fr) 180px;
    gap: 1.6rem;
    padding-left: 1.5rem;
  }
  .menu-category__selection { padding-left: 1.5rem; }
  .menu-drink-list { grid-template-columns: 1fr; gap: 0.35rem; }
  .menu-category__visual { height: 205px; }
  .menu-category--smoothies,
  .menu-category--refreshers {
    --menu-image-scale: 1.64;
    --menu-image-hover-scale: 1.675;
  }
  .menu-customization__inner { grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.86fr); gap: 2.5rem; }
}

/* Mobile */
@media (max-width: 700px) {
  .menu-hero,
  .menu-hero__layout { min-height: auto; }
  .menu-hero__layout {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding-top: 7rem;
    padding-bottom: 2.2rem;
  }
  .menu-hero__content h1 {
    max-width: 560px;
    margin-bottom: 1rem;
    font-size: clamp(2.75rem, 12.4vw, 4rem);
  }
  .menu-hero__content > p:last-child { font-size: 0.9rem; line-height: 1.6; }
  .menu-hero__visual { width: 100%; height: auto; }

  .menu-category-nav {
    top: 4.8rem;
    padding-top: 0.7rem;
  }
  .menu-category-nav__viewport {
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }
  .menu-category-nav__viewport::-webkit-scrollbar { display: none; }
  .menu-category-nav__track {
    width: max-content;
    justify-content: flex-start;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
  }
  .menu-category-nav button {
    min-height: 2.75rem;
    flex: 0 0 auto;
    padding-inline: 1rem;
    scroll-snap-align: center;
  }

  .menu-collection { padding-block: 2rem 2.8rem; }
  .menu-collection__inner { gap: 0.85rem; }
  .menu-category {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 1.25rem;
    padding: 1.3rem;
    scroll-margin-top: 8rem;
  }
  .menu-category__intro { align-self: start; }
  .menu-category__intro h2 { margin-bottom: 0.6rem; font-size: clamp(2.35rem, 11vw, 3.3rem); }
  .menu-category__intro > p:last-child { font-size: 0.79rem; line-height: 1.48; }
  .menu-category__selection {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(43,28,22,0.13);
    border-left: 0;
  }
  .menu-drink-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1rem;
  }
  .menu-drink-list li { font-size: 1.12rem; }
  .menu-category__selection--pending { align-items: flex-start; }
  .menu-category__selection--pending p { font-size: 1.08rem; }
  .menu-category__visual {
    grid-column: 2;
    grid-row: 1;
    height: 136px;
    padding: 0.55rem 0.5rem 0.4rem;
  }
  .menu-category__visual img {
    top: 0.55rem;
    left: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 0.95rem);
  }
  .menu-category--smoothies,
  .menu-category--refreshers {
    --menu-image-scale: 1.64;
    --menu-image-hover-scale: 1.64;
  }

  .menu-customization { padding-block: 3rem; }
  .menu-customization__inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .menu-customization h2 { font-size: clamp(2.6rem, 11vw, 3.5rem); }
  .menu-customization__content { padding: 1.25rem 0 0; border-top: 1px solid rgba(255,253,249,0.2); border-left: 0; }
}

@media (max-width: 430px) {
  .menu-category { grid-template-columns: minmax(0, 1fr) 96px; gap: 1rem; padding: 1.1rem; }
  .menu-category__visual { height: 124px; }
  .menu-category--smoothies,
  .menu-category--refreshers { --menu-image-scale: 1.92; --menu-image-hover-scale: 1.92; }
  .menu-category__intro .eyebrow { font-size: 0.61rem; }
  .menu-category__intro h2 { font-size: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-category { transition: none; }
  .menu-category:hover .menu-category__visual img {
    transform: translateY(var(--menu-image-y)) scale(var(--menu-image-scale));
  }
}