/* Cookie banner, in the Shack's own palette: a smoke panel with cream text,
   the ember pill button for Accept, and Inter to match the site's buttons.
   Loaded from the page head, not injected, so the banner cannot flash
   unstyled. The site has no fixed bar at the bottom of the screen (the call
   bar sits at the top and scrolls away), so the banner can use the bottom
   edge on phones too. */
.bbq-consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.5rem;
  max-width: var(--wrap); margin-inline: auto;
  background: var(--smoke-2); color: #ddd2c4;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem; line-height: 1.55;
}
.bbq-consent__text { margin: 0; max-width: 62ch; }
.bbq-consent__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.bbq-consent__text a:hover { color: var(--cream); }
.bbq-consent__actions { display: flex; gap: 0.6rem; flex: none; }
.bbq-consent__btn {
  font: inherit; font-weight: 700; font-size: 0.85rem;
  padding: 0.6rem 1.25rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bbq-consent__btn--accept { background: var(--ember); border-color: var(--ember); color: #fff; }
.bbq-consent__btn--accept:hover { background: var(--ember-d); border-color: var(--ember-d); }
.bbq-consent__btn--decline { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.bbq-consent__btn--decline:hover { background: rgba(255, 255, 255, 0.12); }
.bbq-consent__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 560px) {
  .bbq-consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 0.9rem 1rem; }
  .bbq-consent__actions { width: 100%; }
  .bbq-consent__btn { flex: 1; }
}

/* Cookie table on the privacy page. */
.cookie-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin-top: 1.25rem; }
.cookie-table th, .cookie-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px dashed var(--line); }
.cookie-table th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom-style: solid; }
.cookie-table td:first-child { font-weight: 700; color: var(--smoke); white-space: nowrap; }
@media (max-width: 560px) {
  .cookie-table thead { display: none; }
  .cookie-table tr { display: block; padding: 0.6rem 0; border-bottom: 1px dashed var(--line); }
  .cookie-table td { display: block; padding: 0.1rem 0; border: 0; }
}