/* ==========================================================================
   Boardology LLC — global.css
   Shared base, layout, components, and the warm glassmorphism card system.
   Loaded on every page after variables.css. Page-specific rules live in a
   small <style> block (or css/pages/*) on each page.
   ========================================================================== */

/* ---- Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  background-color: var(--color-bg-deep);
  /* Real photographic oak texture, fixed so content scrolls over it */
  background-image: url('../images/ui/wood-bg.jpg');
  background-repeat: repeat;
  background-size: 600px auto;
  background-attachment: fixed;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Dark smoked-glass overlay so text stays readable over the warm wood */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(15, 8, 2, 0.82);
  z-index: 0;
  pointer-events: none;
}

/* Keep real content above the wood overlay layer */
main, footer { position: relative; z-index: var(--z-raised); }
/* Header must sit ABOVE main, or the fixed nav gets painted over by the
   hero (main + header shared a z-index, and main came later in source). */
header { position: relative; z-index: var(--z-nav); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Layout helpers -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; z-index: 1; padding-block: var(--section-padding); }

/* Smoked-glass panel over fixed wood → parallax depth on scroll */
.section--parallax {
  background-image:
    linear-gradient(rgba(18, 10, 3, 0.88), rgba(18, 10, 3, 0.88)),
    url('../images/ui/wood-bg.jpg');
  background-size: cover;
  background-attachment: fixed;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.7;
}

.section-title { font-size: var(--fs-2xl); max-width: 18ch; color: var(--color-cream); }

.section-head { max-width: var(--container-narrow); margin-bottom: var(--space-xl); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head.is-centered .section-title { margin-inline: auto; }
.section-head.is-centered .eyebrow { justify-content: center; }

/* Gold section divider */
.divider {
  width: 120px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100%;
  z-index: var(--z-toast);
  background: var(--color-gold);
  color: var(--color-bg-deep);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-sm); }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  will-change: transform;
}
.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-bg-deep);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover {
  background-color: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-strong);
}
.btn--ghost {
  background-color: transparent;
  color: var(--color-cream);
  border: 1px solid var(--color-border-light);
}
.btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}
.btn--block { width: 100%; }

/* ======================================================================
   Glassmorphism card system — warm smoked amber glass
   ====================================================================== */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
  padding: 2rem;
  transition: background var(--transition-slow) var(--ease-glass),
              border-color var(--transition-slow) var(--ease-glass),
              transform var(--transition-slow) var(--ease-glass),
              box-shadow var(--transition-slow) var(--ease-glass);
}
.glass-card--interactive:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-6px);
  box-shadow: var(--glass-shadow-hover);
}
/* Gold left accent variant (menu items, reviews) */
.glass-card--accent { border-left: 3px solid var(--color-gold); }

/* ---- Navigation ------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  /* Solid, always-visible bar — reads clearly over bright hero imagery */
  background-color: rgba(20, 12, 4, 0.92);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
  border-bottom: 1px solid rgba(201, 169, 110, 0.28);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.nav.is-scrolled {
  background-color: rgba(20, 12, 4, 0.97);
  border-bottom-color: var(--color-wood-grain);
}
/* Let the bar span the full viewport so the logo sits in the true top-left */
.nav .container { max-width: 100%; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav__logo {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  /* Warm brushed-gold gradient text */
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 55%, #9c7b44 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-gold-light); /* fallback */
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.55));
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.nav__logo:hover { filter: drop-shadow(0 2px 14px rgba(201, 169, 110, 0.45)); transform: translateY(-1px); }
.nav__logo span { -webkit-text-fill-color: transparent; }

/* Inline desktop links are retired — navigation now lives in the overlay menu */
.nav__links { display: none; }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-cream-muted);
  transition: color var(--transition-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-cream); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { padding: 0.6rem 1.4rem; font-size: var(--fs-xs); }

/* Hamburger — three gold lines, mobile/tablet only (hidden ≥1024px) */
.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
}
.nav__toggle span {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ======================================================================
   Wood serving-tray menu.
   The .tray IS the board (wood, rim, handles, content); .nav__drawer is the
   positioning layer / backdrop. Content is injected by js/main.js.
   - Mobile/tablet: the board fills the screen, slides in from the right.
   - Desktop (>=1024px): an elegant compact board panel on a dim backdrop.
   ====================================================================== */
.nav__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  transition: visibility 0.45s, background 0.4s ease, backdrop-filter 0.4s ease;
}
.nav__drawer.is-open { visibility: visible; }

/* The board */
.tray {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-image: url('../images/ui/wood-bg.jpg');
  background-size: cover;
  background-position: center;
  border-left: 1.5px solid rgba(201, 169, 110, 0.45);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7), inset 1px 0 0 rgba(201, 169, 110, 0.15);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav__drawer.is-open .tray { transform: translateX(0); }
/* Dark overlay over the wood so content stays legible */
.tray::before { content: ''; position: absolute; inset: 0; background: rgba(15, 8, 2, 0.72); z-index: 0; }
/* Inner double-rim, like a routed tray edge */
.tray::after { content: ''; position: absolute; inset: 16px; border: 0.5px solid rgba(201, 169, 110, 0.15); border-radius: 18px; pointer-events: none; z-index: 2; }

/* Carved tray handles flanking the board */
.tray-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 130px;
  z-index: 3;
  background-image: url('../images/ui/wood-bg.jpg');
  background-size: cover;
  border-radius: 26px;
  border: 1px solid rgba(201, 169, 110, 0.22);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 8px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.tray-handle::before {
  content: '';
  position: absolute;
  inset: 20px 14px;
  border-radius: 18px;
  background: rgba(12, 6, 1, 0.78);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.85);
}
.tray-handle--l { left: -22px; }
.tray-handle--r { right: -22px; }

.tray-close {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--color-gold);
  transition: color 0.2s ease, transform 0.2s ease;
}
.tray-close:hover { color: var(--color-gold-light); transform: rotate(90deg); }

/* Content column */
.tray-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; padding: 64px 24px 80px; }

.tray-logo {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--color-gold);
}
.tray-tagline {
  text-align: center;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--color-cream-muted);
}
.tray-divider {
  width: 200px;
  height: 1px;
  margin: 24px auto;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.tray-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  transition: background 0.2s ease;
}
.mobile-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}
.mobile-nav-link:hover { background: rgba(201, 169, 110, 0.07); }
.mnl-text { display: flex; flex-direction: column; }
.mnl-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: 4px;
  line-height: 1.1;
  color: var(--color-cream);
}
.mnl-sub {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-gold);
}
.mnl-arrow { color: var(--color-gold); font-size: 18px; flex: none; }

/* ORDER NOW — the highlighted, framed row */
.mobile-nav-link--order {
  margin: 12px 32px 0;
  padding: 18px 40px;
  background: rgba(201, 169, 110, 0.1);
  border: 0.5px solid rgba(201, 169, 110, 0.35);
  border-radius: 8px;
}
.mobile-nav-link--order::after { display: none; }
.mobile-nav-link--order .mnl-name { color: var(--color-gold); }
.mobile-nav-link--order:hover { background: rgba(201, 169, 110, 0.16); }

.tray-footer {
  text-align: center;
  margin-top: 36px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--color-cream-muted);
}

@media (max-width: 480px) {
  .tray-handle { height: 96px; width: 38px; }
  .tray-inner { padding-top: 56px; }
}

/* Desktop: elegant compact board panel on a dim, blurred backdrop */
@media (min-width: 1024px) {
  .nav__drawer { align-items: center; justify-content: center; }
  .nav__drawer.is-open {
    background: rgba(8, 4, 1, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .tray {
    width: 440px;
    max-width: 92vw;
    min-height: 0;
    overflow: visible;             /* let the handles show beside the panel */
    border: 1.5px solid rgba(201, 169, 110, 0.4);
    border-radius: 20px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.75);
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
  }
  .nav__drawer.is-open .tray { transform: none; opacity: 1; }
  .tray::after { inset: 12px; border-radius: 14px; }
  .tray-inner { max-width: none; padding: 44px 40px 36px; }
  .tray-close { top: 16px; right: 18px; }
  .tray-footer { margin-top: 28px; }
  .tray-handle { width: 28px; height: 86px; border-radius: 16px; }
  .tray-handle::before { inset: 14px 9px; border-radius: 10px; }
  .tray-handle--l { left: -14px; }
  .tray-handle--r { right: -14px; }
}

/* ---- Page hero (short, inner pages) --------------------------------- */
.page-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--nav-height);
}
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(15, 8, 2, 0.72), rgba(15, 8, 2, 0.86));
}
.page-hero__inner { padding-block: var(--space-xl); }
.page-hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.page-hero__subtitle { font-size: var(--fs-lg); font-weight: var(--fw-light); color: var(--color-cream-muted); margin-top: var(--space-sm); }

/* ---- Footer ---------------------------------------------------------- */
.footer {
  background-color: #120c04;
  border-top: 1px solid var(--color-wood-grain);
  padding-block: var(--space-xl) var(--space-lg);
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.footer__logo { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-gold-light); margin-bottom: var(--space-xs); }
.footer__logo span { color: var(--color-gold); }
.footer__tagline { color: var(--color-cream-muted); max-width: 32ch; }
.footer__heading { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-md); }
.footer__links li { margin-bottom: var(--space-xs); }
.footer__links a { color: var(--color-cream-muted); transition: color var(--transition-fast); }
.footer__links a:hover { color: var(--color-gold); }
.footer__contact address { font-style: normal; color: var(--color-cream-muted); line-height: var(--lh-relaxed); }
.footer__contact a:hover { color: var(--color-gold); }
.footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-top: var(--space-md);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-pill);
  color: var(--color-gold);
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.footer__social:hover { border-color: var(--color-gold); color: var(--color-gold-light); transform: translateY(-2px); }
.footer__bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
}
.footer__bottom p { margin: 0; }
.footer__credit a { color: var(--color-cream-muted); transition: color var(--transition-fast); }
.footer__credit a:hover { color: var(--color-gold); }
@media (max-width: 600px) { .footer__bottom { justify-content: center; text-align: center; } }

/* ---- Scroll-reveal fallback (when GSAP/JS unavailable) --------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--transition-slower), transform var(--transition-slower); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ======================================================================
   Responsive — mobile first
   ====================================================================== */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* The wood-tray hamburger menu is used on EVERY screen size — the inline
   desktop links stay retired so desktop gets the same board experience. */

/* Lock background scroll while the tray menu is open */
body.menu-open { overflow: hidden; }

/* ======================================================================
   Board Builder — premium wood-tray modal (same board language as the menu).
   Mobile: fullscreen board sliding from the right. Desktop: centered panel.
   Built by js/board-builder.js.
   ====================================================================== */
.builder-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; justify-content: flex-end;
  visibility: hidden;
  transition: visibility 0.45s, background 0.4s ease, backdrop-filter 0.4s ease;
}
.builder-overlay.is-open { visibility: visible; }
.builder {
  position: relative; width: 100%; min-height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background-image: url('../images/ui/wood-bg.jpg'); background-size: cover; background-position: center;
  border-left: 1.5px solid rgba(201,169,110,0.45);
  box-shadow: -20px 0 60px rgba(0,0,0,0.7), inset 1px 0 0 rgba(201,169,110,0.15);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1);
}
.builder-overlay.is-open .builder { transform: translateX(0); }
.builder::before { content:''; position:absolute; inset:0; background:rgba(15,8,2,0.84); z-index:0; }
.builder::after { content:''; position:absolute; inset:16px; border:0.5px solid rgba(201,169,110,0.15); border-radius:18px; pointer-events:none; z-index:2; }
.builder-close {
  position: absolute; top: 24px; right: 24px; z-index: 5;
  width: 42px; height: 42px; display:flex; align-items:center; justify-content:center;
  font-size: 26px; line-height: 1; color: var(--color-gold);
  transition: color 0.2s ease, transform 0.2s ease;
}
.builder-close:hover { color: var(--color-gold-light); transform: rotate(90deg); }
.builder-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 56px 24px 0; }
.builder-eyebrow {
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-gold);
}
.builder-eyebrow::before, .builder-eyebrow::after { content:''; width:28px; height:1px; background:var(--color-gold); opacity:.7; }
.builder-title { text-align:center; font-family:var(--font-heading); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--color-cream); margin:0.4rem 0 1.6rem; }
.builder-group { margin-bottom: 1.8rem; }
.builder-group__title {
  font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-gold);
  letter-spacing: 0.5px; margin-bottom: 0.85rem; padding-bottom: 0.4rem;
  border-bottom: 0.5px solid rgba(201,169,110,0.25);
}
.sizes { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.size-opt {
  border:1px solid rgba(201,169,110,0.3); border-radius:10px; padding:14px 16px;
  cursor:pointer; background:rgba(20,12,4,0.5);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.size-opt:hover { border-color: var(--color-gold); transform: translateY(-2px); }
.size-opt.is-on { border-color: var(--color-gold); background: rgba(201,169,110,0.16); box-shadow: 0 0 18px rgba(201,169,110,0.15); }
.size-opt h4 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-cream); }
.size-opt span { font-size: 0.8rem; color: var(--color-cream-muted); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  display:inline-flex; align-items:center; padding:0.5rem 1rem;
  border:1px solid rgba(201,169,110,0.32); border-radius:var(--radius-pill);
  background:rgba(201,169,110,0.06); color:var(--color-cream); font-size:0.88rem;
  cursor:pointer; transition: all 0.18s ease;
}
.chip:hover { border-color: var(--color-gold); }
.chip.is-on { background: var(--color-gold); color:#1c1208; border-color: var(--color-gold); font-weight:600; }
.b-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
.b-field { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:0.9rem; }
.b-field label { font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-gold); font-weight:600; }
.b-field input, .b-field textarea {
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--color-cream);
  background:rgba(20,12,4,0.55); border:1px solid var(--color-border-light); border-radius:6px;
  padding:0.7rem 0.8rem; -webkit-appearance:none; appearance:none;
}
.b-field input:focus, .b-field textarea:focus { outline:none; border-color:var(--color-gold); box-shadow:0 0 0 3px rgba(201,169,110,0.18); }
.builder-error { color:#e08b76; font-size:0.82rem; text-align:center; margin-bottom:0.6rem; }
.builder-foot {
  position:sticky; bottom:0; z-index:3; margin:0 -24px; padding:16px 24px;
  background:rgba(12,7,2,0.96); border-top:1px solid rgba(201,169,110,0.3);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.builder-summary { font-size:0.85rem; color:var(--color-cream-muted); }
.builder-summary strong { color:var(--color-gold); }
.builder-success { text-align:center; padding:70px 20px; position:relative; z-index:1; }
.builder-success h3 { font-family:var(--font-heading); color:var(--color-gold); font-size:1.8rem; margin-bottom:0.6rem; }
.builder-success p { color:var(--color-cream-muted); max-width:38ch; margin:0 auto; }

@media (min-width:1024px) {
  .builder-overlay { align-items:center; justify-content:center; }
  .builder-overlay.is-open { background:rgba(8,4,1,0.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .builder {
    width:760px; max-width:92vw; min-height:0; max-height:90vh;
    border:1.5px solid rgba(201,169,110,0.4); border-radius:20px;
    transform:translateY(28px) scale(0.97); opacity:0;
    transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), opacity 0.4s ease;
  }
  .builder-overlay.is-open .builder { transform:none; opacity:1; }
  .builder::after { inset:12px; border-radius:14px; }
  .sizes { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:480px) { .b-grid2 { grid-template-columns:1fr; } }

/* ======================================================================
   Premium date picker (js/datepicker.js)
   ====================================================================== */
.dp-input { cursor: pointer; }
.dp-pop {
  position: fixed;
  z-index: calc(var(--z-modal) + 20);
  width: 300px;
  padding: 14px;
  background: rgba(26, 17, 9, 0.98);
  background-image: url('../images/ui/wood-bg.jpg');
  background-size: 600px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 100vmax rgba(20, 12, 4, 0.86);
  color: var(--color-cream);
  font-family: var(--font-body);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-title { font-family: var(--font-heading); color: var(--color-gold); font-size: 1.05rem; letter-spacing: 0.5px; }
.dp-nav {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--color-gold);
  border: 1px solid rgba(201, 169, 110, 0.3); cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dp-nav:hover { background: rgba(201, 169, 110, 0.16); border-color: var(--color-gold); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span { text-align: center; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-cream-muted); padding: 4px 0; }
.dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; border-radius: 8px; cursor: pointer; color: var(--color-cream);
  background: none; border: none; font-family: var(--font-body);
  transition: background 0.15s ease, color 0.15s ease;
}
.dp-day:hover:not(.is-disabled):not(.is-empty) { background: rgba(201, 169, 110, 0.18); }
.dp-day.is-today { box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.55); }
.dp-day.is-selected { background: var(--color-gold); color: #1c1208; font-weight: 600; }
.dp-day.is-disabled { color: #5a4e3c; cursor: default; }
.dp-day.is-empty { cursor: default; }

/* ======================================================================
   Reusable wooden board card — looks like a real serving board.
   .board-card (small) in a .board-grid (2-up), or .board-card--long
   for full-width single items. Used by the menu (js/menu.js) and reusable
   anywhere a "board" surface is wanted.
   ====================================================================== */
.board-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 640px) { .board-grid { grid-template-columns: 1fr 1fr; } }
.board-grid--single { grid-template-columns: 1fr; }

.board-card {
  position: relative;
  background-image:
    linear-gradient(rgba(34, 21, 10, 0.55), rgba(26, 16, 7, 0.7)),
    url('../images/ui/wood-bg.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 12px;
  padding: 30px 32px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5),
              inset 0 2px 0 rgba(201, 169, 110, 0.12),
              inset 0 -12px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: transform 0.3s var(--ease-glass), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* routed inner rim, like a real board edge */
.board-card::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(201, 169, 110, 0.16);
  border-radius: 8px;
  pointer-events: none;
}
.board-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.5);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6),
              0 0 28px rgba(201, 169, 110, 0.12),
              inset 0 2px 0 rgba(201, 169, 110, 0.16),
              inset 0 -12px 24px rgba(0, 0, 0, 0.35);
}
.board-card__name { font-family: var(--font-heading); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--color-gold-light); line-height: 1.1; margin-bottom: 0.45rem; }
.board-card__desc { color: var(--color-cream); opacity: 0.9; margin-bottom: 0.7rem; }
.board-card__price { font-style: italic; color: var(--color-gold); font-size: 1rem; font-weight: var(--fw-medium); }

/* Static board surface (no hover lift) — for forms / non-interactive panels */
.board-card--static:hover {
  transform: none;
  border-color: rgba(201, 169, 110, 0.28);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5),
              inset 0 2px 0 rgba(201, 169, 110, 0.12),
              inset 0 -12px 24px rgba(0, 0, 0, 0.35);
}

.board-card--long { padding: 34px 40px; }
@media (min-width: 760px) {
  .board-card--long { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-lg); align-items: center; }
  .board-card--long .board-card__name { grid-column: 1; grid-row: 1; margin-bottom: 0.3rem; }
  .board-card--long .board-card__desc { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .board-card--long .board-card__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.2rem; white-space: nowrap; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}