/* =====================================================================
   Zuri Restaurant – site styles
   Loaded after tailwind.css. Handles everything the old React bundle did
   with JavaScript-driven inline styles: header states, reveal animations,
   intro overlay, menu tabs, gallery lightbox and the slide indicator.
   ===================================================================== */

:root {
  --ivory: #f7f4ed;
  --charcoal: #2b2723;
  --champagne: #dcc994;
  --gold: #cdb273;
  --timber: #8a6a45;
  --stone: #6b655b;
  --beige: #dccfb8;
  --ease-luxe: cubic-bezier(.22, 1, .36, 1);
}

/* Utility: hide regardless of Tailwind display classes */
.is-hidden { display: none !important; }

/* ------------------------------------------------------------------ */
/*  Intro overlay                                                      */
/* ------------------------------------------------------------------ */
#intro-overlay {
  background: radial-gradient(120% 120% at 50% 45%, #16302E 0%, #0E2422 55%, #0A1918 100%);
  transition: opacity .65s ease-in-out;
}
#intro-overlay.is-leaving { opacity: 0; pointer-events: none; }

.intro-title { animation: introRise .9s var(--ease-luxe) both; }
.intro-wave  { opacity: 0; animation: introFade .9s var(--ease-luxe) .35s both; }
.intro-wave path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: introDraw .9s var(--ease-luxe) .35s both;
}
.intro-sub { opacity: 0; animation: introFade .9s ease-out .6s both; }

@keyframes introRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes introFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes introDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ */
/*  Header – transparent over the hero, solid once scrolled            */
/* ------------------------------------------------------------------ */
.site-header {
  background: linear-gradient(to bottom, rgba(43, 39, 35, .5), transparent);
  border-bottom: 0;                 /* no hairline under the bar, over the hero or once scrolled */
  transition: background-color .5s, color .5s;
}
.site-header.is-scrolled {
  background: rgba(247, 244, 237, .95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.site-header .brand-name { color: var(--champagne); transition: color .5s; }
.site-header .brand-sub  { color: rgba(247, 244, 237, .8); transition: color .5s; }
.site-header.is-scrolled .brand-name { color: var(--gold); }
.site-header.is-scrolled .brand-sub  { color: var(--stone); }

.site-header .nav-link { color: var(--ivory); border-color: transparent; }
.site-header .nav-link.is-active { border-color: var(--ivory); }
.site-header.is-scrolled .nav-link { color: var(--charcoal); }
.site-header.is-scrolled .nav-link.is-active { border-color: var(--charcoal); }

.site-header .reserve-btn { border-color: rgba(247, 244, 237, .7); color: var(--ivory); }
.site-header .reserve-btn:hover { background: var(--ivory); color: var(--charcoal); }
.site-header.is-scrolled .reserve-btn { border-color: rgba(43, 39, 35, .5); color: var(--charcoal); }
.site-header.is-scrolled .reserve-btn:hover { background: var(--charcoal); color: var(--ivory); }

.site-header .nav-toggle { color: var(--ivory); transition: color .5s; }
.site-header.is-scrolled .nav-toggle { color: var(--charcoal); }

/* WhatsApp icon in the header row, beside Reserve a Table: a small outlined circle, WhatsApp green on hover */
.site-header .wa-btn { border-color: rgba(247, 244, 237, .7); color: var(--ivory); }
.site-header.is-scrolled .wa-btn { border-color: rgba(43, 39, 35, .5); color: var(--charcoal); }
.site-header .wa-btn:hover, .site-header.is-scrolled .wa-btn:hover { background: #25d366; border-color: #25d366; color: #fff; }

/* Overlay menu */
.mobile-menu { opacity: 0; transition: opacity .3s ease; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu li { opacity: 0; transform: translateX(20px); transition: opacity .3s ease, transform .3s ease; }
.mobile-menu.is-open li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .05s); }

/* ------------------------------------------------------------------ */
/*  Hero entrance                                                       */
/* ------------------------------------------------------------------ */
.hero-img  { animation: heroZoom 1.8s var(--ease-luxe) both; }
.hero-rise { opacity: 0; animation: heroRise .9s var(--ease-luxe) var(--d, 0s) both; }
.hero-fade { opacity: 0; animation: introFade .9s var(--ease-luxe) var(--d, 0s) both; }
.scroll-pulse { transform-origin: top; animation: scrollPulse 1.8s ease-in-out infinite; }

@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes scrollPulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.4); } }

/* ------------------------------------------------------------------ */
/*  Scroll reveal (replaces motion.div whileInView)                     */
/* ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(var(--y, 24px));
  transition: opacity .9s var(--ease-luxe) var(--d, 0s), transform .9s var(--ease-luxe) var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-zoom {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.3s var(--ease-luxe), transform 1.3s var(--ease-luxe);
}
.reveal-zoom.in-view { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/*  Menu                                                                */
/* ------------------------------------------------------------------ */
.menu-group-btn { color: var(--charcoal); }
.menu-group-btn:hover { color: var(--timber); }
.menu-group-btn.is-active { color: var(--ivory); }
.menu-group-pill { opacity: 0; transform: scale(.85); transition: opacity .35s var(--ease-luxe), transform .35s var(--ease-luxe); }
.menu-group-btn.is-active .menu-group-pill { opacity: 1; transform: none; }

.menu-panel.is-entering { animation: panelIn .4s var(--ease-luxe) both; }
.menu-panel.is-entering .menu-item { animation: itemIn .45s var(--ease-luxe) var(--d, 0s) both; }

@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes itemIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ */
/*  Gallery lightbox                                                    */
/* ------------------------------------------------------------------ */
.lightbox { opacity: 0; transition: opacity .3s ease; }
.lightbox.is-open { opacity: 1; }
.lightbox figure { animation: lightboxIn .4s var(--ease-luxe) both; }
.lightbox figure.is-swapping { animation: none; }
/* The animated figure paints in its own layer; keep the controls above it so they stay tappable
   when the photo spans the whole width (phones) */
#lightbox-prev, #lightbox-next, #lightbox [data-lb-close] { z-index: 2; }

@keyframes lightboxIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ */
/*  Slide indicator (right edge, desktop)                              */
/* ------------------------------------------------------------------ */
.slide-dots { transition: background-color .3s, color .3s; }
.slide-dots.on-dark  { background: rgba(43, 39, 35, .35); color: var(--ivory); }
.slide-dots.on-light { background: rgba(247, 244, 237, .75); color: var(--charcoal); }

.slide-dot { width: 5px; height: 5px; opacity: .35; transition: width .3s, height .3s, opacity .3s; }
.slide-dot.is-active { width: 8px; height: 8px; opacity: 1; }

/* ------------------------------------------------------------------ */
/*  Reduced motion                                                      */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-zoom { transform: none; }
  .hero-rise, .hero-fade, .hero-img, .intro-title, .intro-wave, .intro-sub, .intro-wave path { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .scroll-pulse { animation: none; }
}

/* ------------------------------------------------------------------ */
/*  Phone refinements (below Tailwind's sm breakpoint)                  */
/*  Desktop and tablet layouts are untouched.                           */
/* ------------------------------------------------------------------ */
@media (max-width: 639.98px) {

  /* --- Menu: legible category rail that snaps as you swipe --- */
  .menu-group-btn { min-height: 44px; padding-left: 1.5rem; padding-right: 1.5rem; }
  .menu-cat-btn {
    font-size: .72rem;
    padding: .8rem 1rem;
    min-height: 48px;
    scroll-snap-align: start;
  }
  .rail { scroll-snap-type: x proximity; }

  /* Dish rows: room for the name and price to sit side by side */
  .menu-item { gap: .875rem; padding-top: .875rem; padding-bottom: .875rem; }
  .menu-item h4 { font-size: 1.05rem; }


  /* Lightbox controls sit clear of the notch and stay thumb-sized */
  #lightbox [data-lb-close] { top: max(1rem, env(safe-area-inset-top)); right: .75rem; }
  /* Arrows move to the bottom corners where a thumb reaches them and never overlap the photo */
  #lightbox-prev, #lightbox-next {
    top: auto; transform: none;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    width: 3rem; height: 3rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(247, 244, 237, .12); color: var(--ivory);
  }
  #lightbox-prev { left: 1.25rem; }
  #lightbox-next { right: 1.25rem; }
  #lightbox-figure { max-height: calc(100vh - 9rem); margin-bottom: 4.5rem; }
  #lightbox-img { max-height: calc(100vh - 12rem); }

  /* --- Reservation: comfortable, tappable fields --- */
  #reserve-form { gap: .75rem; }
  #reserve-form > label { padding-top: .7rem; padding-bottom: .7rem; }
  #reserve-form input,
  #reserve-form select,
  #reserve-form textarea {
    font-size: 16px;        /* keeps iOS Safari from zooming in on focus */
    min-height: 44px;
    line-height: 1.35;
  }
  #reserve-form select { padding-right: .25rem; }
}

/* ------------------------------------------------------------------ */
/*  One continuous document                                             */
/*  The page used to scroll inside #scroller, with every .slide a       */
/*  second, rigid 100svh scroll container. Sections taller than the     */
/*  viewport trapped the scroll, so half the page sat frozen while the  */
/*  inner list moved. The document is now the only scroll container.    */
/* ------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html, body {
  width: 100%;
  height: auto;            /* the compiled base sheet pinned these to 100% */
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;        /* ...and hid the overflow, so the page could not scroll */
}

#scroller { display: block; width: 100%; }

/* Sections fill the screen when short and grow past it when tall */
.slide {
  min-height: 100svh;
  overflow: visible;
}
@supports (min-height: 100dvh) {
  .slide { min-height: 100dvh; }
}
/* Inner pages (/menu/, /about/ …): breadcrumb, "also see" and thank-you blocks are ordinary rows, not screens */
.slide.slide-auto { min-height: 0; }
.slide.page-crumb { padding-top: 7rem; }   /* breadcrumb row: clear the 6rem fixed header at every width */

/* Footer credit: "Powered by Tribal Sand" links to the parent brand */
.site-footer .credit-link { color: rgba(247, 244, 237, .8); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(247, 244, 237, .35); transition: color .3s; }
.site-footer .credit-link:hover { color: var(--ivory); text-decoration-color: var(--ivory); }
/* Short viewports (landscape phones, small laptops): never force a full
   screen, or a long section is pushed into an unreachable second screen */
@media (max-height: 620px) {
  .slide { min-height: 0; }
  .slide.pt-24 { padding-top: 5.5rem; }
}
/* Phones: a section shorter than the screen (the gallery) would otherwise be
   stretched to a full viewport, leaving a blank block before the next one */
@media (max-width: 639.98px) {
  .slide { min-height: 0; }
  .slide.pt-24 { padding-top: 3rem; }
  /* The padding utilities on these two sections were never compiled into
     tailwind.css, so set the phone spacing here */
  #gallery { padding-bottom: 1.5rem; }
  #reserve { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  /* Contact card: the opening-hours rows are white-space:nowrap, which fixed the
     card's minimum width at ~393px and clipped it on phones narrower than that */
  #contact dl > div { white-space: normal; grid-template-columns: 22px minmax(0, 1fr); row-gap: .125rem; }
  #contact dl > div dd { grid-column: 2; }   /* value on its own line under the label, like the Location block */
  /* Footer text links: a larger tap area without moving anything (padding offset by negative margin) */
  footer ul a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; }
  #contact .reveal > div > div { min-width: 0; }
}

/* Tablet/desktop: the section's own sm:pt-6 / sm:pb-12 were never compiled */
@media (min-width: 640px) {
  #reserve { padding-top: 2.5rem; padding-bottom: 3rem; }
}

/* Desktop: keep the reservation card short so it sits beside the heading */
@media (min-width: 1024px) {
  .reserve-card > div { padding: 1.375rem 1.5rem 1.5rem; }
  .reserve-card .text-center p:last-child { font-size: .8rem; margin-top: .375rem; }
  #reserve-form { margin-top: 1.125rem; gap: .75rem; }
  #reserve-form > label,
  #reserve-form > div > label { padding-top: .55rem; padding-bottom: .55rem; }
  #reserve-form label span.block { font-size: .72rem; }
  #reserve-form input,
  #reserve-form select,
  #reserve-form textarea { line-height: 1.35; }
  #reserve-form > div:last-child { margin-top: .25rem; }
  #reserve-form button[type="submit"] { padding-top: .7rem; padding-bottom: .7rem; }
}

/* sm:hidden was never compiled into tailwind.css */
@media (min-width: 640px) {
  .sm\:hidden { display: none; }
}

/* Anchor jumps clear the fixed header */
#scroller section[id] { scroll-margin-top: 6rem; }

/* Scroll lock for the mobile menu, lightbox and intro overlay */
body.is-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* Three utilities used in the markup that were never compiled into tailwind.css
   (frozen build, no pipeline) — values are what the classes were meant to give */
#reserve [data-reference] { letter-spacing: normal; margin-left: .25rem; }   /* tracking-normal ml-1 */
[data-share-note] { color: rgb(247 244 237 / .45); }                          /* text-ivory/45 */

/* ------------------------------------------------------------------ */
/*  Gallery carousel                                                    */
/*  A native scroll container: touch swipes, trackpads and mouse drags  */
/*  move it and snapping keeps a photo aligned. Every photo shares one  */
/*  aspect ratio per breakpoint and is cropped with object-fit: cover.  */
/* ------------------------------------------------------------------ */
.gallery-rail {
  gap: .75rem;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;     /* a swipe never drags the page sideways */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-rail:focus-visible { outline: 2px solid var(--gold, #cdb273); outline-offset: 4px; border-radius: .875rem; }
.gallery-rail.is-dragging, .gallery-rail.is-animating { scroll-snap-type: none; }
.gallery-rail.is-dragging { cursor: grabbing; user-select: none; }
.gallery-rail.is-dragging .gallery-slide img { transition: none; }
.gallery-slide {
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  height: clamp(280px, 46svh, 520px);  /* laptops & desktops (≥1280px): about two and a half photos across */
  border-radius: .875rem;
  background: var(--sand, #ede6d8);
  scroll-snap-align: start;
}
.gallery-slide:focus-visible { outline: 2px solid var(--gold, #cdb273); outline-offset: 3px; }
.gallery-arrow[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.gallery-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.gallery-dot {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px;
  background: rgba(43, 39, 35, .18); cursor: pointer;
  transition: width .35s var(--ease-luxe, ease), background-color .35s;
}
.gallery-dot:hover { background: rgba(43, 39, 35, .4); }
.gallery-dot[aria-selected="true"] { width: 1.5rem; background: var(--timber, #8a6a45); }
.gallery-dot:focus-visible { outline: 2px solid var(--gold, #cdb273); outline-offset: 3px; }
/* The gallery is shorter than a screen; do not stretch its slide to one */
.slide:has(> #gallery) { min-height: 0; }
@media (min-width: 640px) and (max-width: 1279.98px) {
  .gallery-slide { height: auto; width: calc((100% - .75rem) / 2); }   /* tablets, iPad portrait, small laptops: two photos across */
}
@media (max-width: 639.98px) {
  .gallery-rail { gap: .625rem; scroll-padding-inline: 8%; }
  .gallery-slide {
    height: auto; width: 84%; max-width: 440px;
    aspect-ratio: 4 / 3;                /* one prominent photo with the next one peeking in */
    border-radius: .75rem;
    scroll-snap-align: center;
    scroll-snap-stop: always;           /* a flick moves one photo, never flies to the end */
  }
  .gallery-dots { margin-top: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-dot, .gallery-slide img { transition: none; }
}

/* Utilities used by the markup that were never compiled into tailwind.css */
#reserve-form [role="alert"] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
#reserve-form [data-error-note] { color: #b91c1c; }
#menu .inline-block { display: inline-block; padding-top: .125rem; padding-bottom: .125rem; }
#menu .text-stone\/40 { color: rgba(120, 113, 108, .4); font-size: 2.4rem; }
/* The sticky Reserve bar (phones and tablets) must not cover the last line of the footer */
@media (max-width: 1023.98px) { body { padding-bottom: 3.75rem; } }
#reserve-form [data-availability].text-red-700 { color: #b91c1c; }

/* Header links (seven since Takeaway joined, 9 Oct 2026). Below 1280 px the full row never fitted — it wrapped
   "Our Story" and the Reserve button onto two lines even with six links — so those widths use the menu button,
   which every width already shows and which lists every page. From 1280 to 1439 px the gaps tighten to fit. */
.site-header .nav-link, .site-header .reserve-btn { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279.98px) { .site-header nav[aria-label="Main"] > ul { display: none !important; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .site-header nav[aria-label="Main"] > ul { gap: 1.5rem; } }

/* ------------------------------------------------------------------ */
/* Guest stories (sections/reviews.php): Tribal Table's layout - one  */
/* row of four equal cards, the QR card first, three reviews beside.  */
/* ------------------------------------------------------------------ */
.reviews { color: var(--charcoal); padding: 6.5rem 0 7rem; background: radial-gradient(120% 90% at 85% 100%, #e9dcc3 0%, rgba(233, 220, 195, 0) 60%), linear-gradient(180deg, #f7f1e6 0%, #efe4cf 100%); }
.reviews-inner { max-width: 88rem; margin: 0 auto; padding: 0 1.25rem; text-align: center; }
@media (min-width: 640px) { .reviews-inner { padding: 0 2rem; } }
@media (min-width: 1024px) { .reviews-inner { padding: 0 5.5rem; } }
.reviews-eyebrow { margin: 0; color: var(--charcoal); font-size: .74rem; letter-spacing: .34em; text-transform: uppercase; font-weight: 600; }
.reviews-title { margin: 1.4rem 0 0; font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.1; color: #1f2b25; }
.reviews-body { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3.5rem; text-align: left; }
@media (min-width: 640px) { .reviews-body { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews-body { grid-template-columns: repeat(4, 1fr); } .reviews-carousel { grid-column: 2 / -1; } }
.reviews-body.is-alone { grid-template-columns: minmax(0, 22rem); justify-content: center; }
.reviews-carousel { position: relative; min-width: 0; }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1.5rem; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; }
.reviews-track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .reviews-track { grid-auto-columns: calc((100% - 3rem) / 3); } }
.review-card { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; margin: 0; min-height: 17.5rem; padding: 1.9rem 1.75rem 1.75rem; border: 1px solid rgba(205, 178, 115, .35); border-radius: 14px; background: rgba(255, 255, 255, .72); box-shadow: 0 10px 28px rgba(31, 43, 37, .07); transition: border-color .35s var(--ease-luxe); }
.review-card:hover { border-color: rgba(205, 178, 115, .8); }
.review-mark { display: block; height: 1.5rem; color: var(--gold); font-family: Georgia, serif; font-size: 2.7rem; line-height: 1; }
.review-card blockquote { margin: 1rem 0 1.6rem; font-style: italic; font-weight: 300; font-size: 1.13rem; line-height: 1.6; color: #2b2723; }
.review-card figcaption { margin-top: auto; font-size: .85rem; letter-spacing: .06em; }
.review-name { color: var(--timber); font-weight: 600; }
.review-dot { margin: 0 .45rem; color: rgba(43, 39, 35, .35); }
.review-place { color: var(--stone); font-weight: 500; }
.review-cta { align-items: center; justify-content: center; text-align: center; }
.review-qr { display: block; width: 7.5rem; height: 7.5rem; padding: .4rem; background: #fff; border-radius: 4px; }
.review-qr img { display: block; width: 100%; height: 100%; }
.review-cta-title { margin: 1.5rem 0 0; color: var(--timber); font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.review-cta-text { margin: .5rem 0 0; color: var(--stone); font-size: .9rem; }
.review-btn { display: inline-flex; align-items: center; margin-top: 1.25rem; padding: .62rem 1.15rem; border: 1px solid var(--timber); border-radius: 999px; color: var(--timber); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s; }
.review-btn:hover, .review-btn:focus-visible { background: var(--timber); color: #fff; }
.review-btn:focus-visible, .review-qr:focus-visible, .reviews-track:focus-visible, .reviews-arrow:focus-visible { outline: 2px solid var(--timber); outline-offset: 3px; }
.reviews-arrow { position: absolute; top: calc(50% - 1.2rem); z-index: 2; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: #1f2b25; box-shadow: 0 8px 22px rgba(31, 43, 37, .16); cursor: pointer; transition: opacity .25s, background .25s; }
.reviews-arrow.prev { left: -2.95rem; } .reviews-arrow.next { right: -2.95rem; }
.reviews-arrow:hover:not(:disabled) { background: #faf7f0; }
.reviews-arrow:disabled { opacity: 0; pointer-events: none; }
.reviews-carousel.no-scroll .reviews-arrow { display: none; }
@media (max-width: 639.98px) { .reviews { padding: 5rem 0; } .review-card { min-height: 0; } .reviews-arrow.prev { left: -.7rem; } .reviews-arrow.next { right: -.7rem; } }
.reviews-more { margin: 2.25rem 0 0; }
.reviews-more a { color: var(--timber); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-decoration: none; border-bottom: 1px solid rgba(138, 106, 69, .4); padding-bottom: 2px; }
.reviews-more a:hover { color: #1f2b25; border-color: #1f2b25; }
.review-stars { margin: .5rem 0 0; color: var(--gold); letter-spacing: .12em; font-size: .9rem; }
.review-stars .off { color: rgba(43, 39, 35, .18); }
/* From 1024 px the arrows sit outside the whole row, one each side, measured from the row rather than the reviews */
@media (min-width: 1024px) { .reviews-body { position: relative; } .reviews-carousel { position: static; } .reviews-arrow { top: calc(50% - 1.2rem); } }
/* Menu symbol T: the dish can be ordered for takeaway (Admin → Menu → "Available for takeaway (T)") */
.dietary-t { color: #3a6b68; border-color: rgba(58, 107, 104, .45); }