/*
 * pcbr-core.css — generated by scripts/build-css.sh. Do not edit.
 * Edit the sources in assets/css/src/ and re-run the script.
 */

/* == src/tokens.css == */
/**
 * Design v2 tokens. Source of truth: design/v2/SPEC.md §1 and the foundation boards.
 * One family, one accent, three elevations. Nothing here is brand-specific except --pcbr-accent,
 * which inc/assets.php may override at runtime from PCBR_ACCENT (its inline style is printed after this
 * sheet, so it wins by source order).
 *
 * No cascade layers: the parent theme and Bootstrap 3 ship unlayered element rules (body, h1, p, a), and
 * any layered declaration loses to those regardless of specificity. Found on staging 2026-09-11.
 */
:root {
  --pcbr-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ink and ground */
  --pcbr-ink: #1C1B19;
  --pcbr-ink-2: #4A4744;
  --pcbr-ink-3: #74716C;
  --pcbr-line: #E6E3DE;
  --pcbr-surface: #FFFFFF;
  --pcbr-surface-2: #F7F5F1;
  --pcbr-surface-3: #EFECE6;

  /* The one accent: approved PCA blue (brand v3). Hover and soft are pcbr_accent_palette()'s derivation of #005B86
     (hover ×0.88, soft 12% into white), so a PCBR_ACCENT override and these defaults agree. The brand orange #F48120
     lives in the artwork only (low contrast on white): no UI text or control uses it. */
  --pcbr-accent: #005B86;
  --pcbr-accent-hover: #005076;
  --pcbr-accent-soft: #E0EBF0;
  /* Calls to action (owner, 2026-10-19): the brand orange (brand v3 "PCA orange", the GO in the wordmark) with white
     text, on primary buttons only; links, focus rings, badges and the rest of the accent stay blue. */
  --pcbr-cta: #F48120;
  --pcbr-cta-hover: #DB7119;
  --pcbr-brand-orange: #F48120; /* artwork and small decorative marks only; never text or a filled control */

  /* Semantic */
  --pcbr-success: #1E7B4F;  --pcbr-success-soft: #E6F3EC; /* confirmed surfaces: a pickup derived from a resolved flight */
  /* Review star glyphs only (owner-selected yellow). Decorative: every star carries aria-hidden or a text label,
     so the colour never has to meet a contrast ratio. */
  --pcbr-star: #FABB06;
  --pcbr-warning: #B26A00;
  --pcbr-warning-soft: #FFF6E5;
  --pcbr-error: #B3261E;
  --pcbr-error-soft: #FBEAE8;

  /* Type scale: size + line-height pairs */
  --pcbr-fs-caption: 12px;  --pcbr-lh-caption: 16px;
  --pcbr-fs-small: 14px;    --pcbr-lh-small: 20px;
  --pcbr-fs-body: 16px;     --pcbr-lh-body: 24px;
  --pcbr-fs-lead: 18px;     --pcbr-lh-lead: 26px;
  --pcbr-fs-h3: 22px;       --pcbr-lh-h3: 28px;
  --pcbr-fs-h2: 26px;       --pcbr-lh-h2: 32px;
  --pcbr-fs-h1: 32px;       --pcbr-lh-h1: 38px;
  --pcbr-fs-display: 40px;  --pcbr-lh-display: 46px;
  --pcbr-fs-money: 24px;    --pcbr-lh-money: 28px;
  --pcbr-weight-body: 400;
  --pcbr-weight-medium: 500;
  --pcbr-weight-strong: 600;
  --pcbr-tracking-label: .06em;

  /* Spacing */
  --pcbr-space-1: 4px;   --pcbr-space-2: 8px;   --pcbr-space-3: 12px;
  --pcbr-space-4: 16px;  --pcbr-space-5: 20px;  --pcbr-space-6: 24px;
  --pcbr-space-7: 32px;  --pcbr-space-8: 40px;  --pcbr-space-9: 48px;
  --pcbr-space-10: 64px; --pcbr-space-11: 80px; --pcbr-space-12: 96px;

  /* Radii */
  --pcbr-r-control: 8px;
  --pcbr-r-surface: 12px;
  --pcbr-r-sheet: 16px;
  --pcbr-r-full: 999px;

  /* Elevation: three shadows, one owner each */
  --pcbr-e-decision: 0 6px 16px rgba(28, 27, 25, .12);
  --pcbr-e-sticky: 0 -2px 12px rgba(28, 27, 25, .08);
  --pcbr-e-sheet: 0 12px 32px rgba(28, 27, 25, .16);
  --pcbr-scrim: rgba(28, 27, 25, .32);
  /* Photo-control overlays (gallery pills and counters, the viewer tint): ink at .72, hover and press at .86. */
  --pcbr-overlay: rgba(28, 27, 25, .72);
  --pcbr-overlay-strong: rgba(28, 27, 25, .86);

  /* Homepage photo: a light darkening over faces; copy uses the stronger existing overlays. */
  /* Business hero: white text over navy, lighter tint where the subjects sit. */
  --pcbr-biz-photo-shade: rgba(7, 29, 43, .84);
  --pcbr-biz-photo-mid: rgba(7, 29, 43, .72);
  --pcbr-biz-photo-light: rgba(7, 29, 43, .12);
  --pcbr-biz-photo-base: #071d2b;
  --pcbr-home-photo-tint: rgba(28, 27, 25, .18);

  /* Rings */
  --pcbr-ring-selected: 0 0 0 2px var(--pcbr-ink) inset;
  --pcbr-ring-focus: 0 0 0 3px var(--pcbr-accent-soft), 0 0 0 5px var(--pcbr-accent);

  /* Controls */
  --pcbr-control-h: 48px;
  --pcbr-control-h-sm: 40px;
  --pcbr-touch: 44px;
  --pcbr-underline-offset: 3px;   /* links styled as quiet underlined text actions */

  /* Safe areas (viewport-fit=cover, owner decision 2026-10-01): the device insets, 0px where a device has none. Every
     fixed or sticky surface reads them through these names, so a test can stand in a device inset on <html>. iOS reports
     the same left and right inset in landscape; --pcbr-safe-inline is the larger, and every page gutter keeps clear of it.
     On Android a one-sided cutout reports one side only, so the far side is over-padded by the same amount (accepted). */
  --pcbr-safe-top: env(safe-area-inset-top, 0px);
  --pcbr-safe-right: env(safe-area-inset-right, 0px);
  --pcbr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pcbr-safe-left: env(safe-area-inset-left, 0px);
  --pcbr-safe-inline: max(var(--pcbr-safe-left), var(--pcbr-safe-right));

  /* Booking overlay: visualViewport updates these while the mobile keyboard is open. */
  --pcbr-wizard-viewport: 100dvh;
  --pcbr-wizard-bottom: 0px;

  /* Layout */
  --pcbr-container: 1120px;
  --pcbr-header-container: var(--pcbr-container);
  --pcbr-home-inventory: 1280px; /* homepage shell from 1440px (pages.css), as on Punta Cana Boat Rentals */
  --pcbr-gutter: max(20px, var(--pcbr-safe-inline));
  --pcbr-booking-col: 400px;
  --pcbr-booking-gap: 72px;
  --pcbr-commerce-col: 360px;
  --pcbr-commerce-gap: var(--pcbr-space-7);
  --pcbr-sticky-top: 88px;
  --pcbr-section-gap: 48px;
  --pcbr-heading-gap: 24px;
}

/* The shared header follows the homepage grid on every route. */
@media (min-width: 1280px) {
  :root { --pcbr-header-container: 1200px; }
}
@media (min-width: 1440px) {
  :root { --pcbr-header-container: var(--pcbr-home-inventory); }
}

@media (min-width: 900px) {
  :root { --pcbr-gutter: max(40px, var(--pcbr-safe-inline)); }
}
@media (min-width: 1024px) {
  :root {
    --pcbr-fs-money: 26px; --pcbr-lh-money: 30px;
    --pcbr-section-gap: 80px;
    --pcbr-heading-gap: 32px;
  }
}
/* The reservation aside widens once the form column can spare it, so the trip snapshot's two flight columns fit. */
@media (min-width: 1200px) {
  :root { --pcbr-commerce-col: 400px; }
}

/* --------------------------------------------------------------------
   Legacy aliases. Every name the pre-v2 templates use, remapped onto the
   tokens above so nothing breaks before V2-V10 move to the new classes.
   Delete this block once no template references them.
   -------------------------------------------------------------------- */
:root {
  --font-body: var(--pcbr-font);
  --font-display: var(--pcbr-font);
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-body: var(--pcbr-fs-body);  --fs-sm: var(--pcbr-fs-small);  --fs-xs: var(--pcbr-fs-caption);
  --fs-h1: var(--pcbr-fs-h1);      --fs-h2: var(--pcbr-fs-h2);     --fs-h3: var(--pcbr-fs-h3);
  --fs-h4: var(--pcbr-fs-lead);    --fs-h5: var(--pcbr-fs-small);  --fs-h6: var(--pcbr-fs-caption);
  --fs-hero: var(--pcbr-fs-h1);    --fs-display: var(--pcbr-fs-display);
  --fs-body-mobile: var(--pcbr-fs-lead);
  --lh-tight: 1.15; --lh-snug: 1.2; --lh-head: 1.25; --lh-body: 1.5; --lh-prose: 1.7;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 600; --weight-black: 700;

  --color-heading: var(--pcbr-ink);
  --color-body: var(--pcbr-ink);
  --color-muted: var(--pcbr-ink-3);
  --color-border: var(--pcbr-line);
  --color-border-muted: var(--pcbr-line);
  --color-border-strong: var(--pcbr-line);
  --color-background: var(--pcbr-surface);
  --color-background-light: var(--pcbr-surface-2);
  --color-background-muted: var(--pcbr-surface-3);
  --color-primary: var(--pcbr-accent);
  --color-primary-hover: var(--pcbr-accent-hover);
  --color-success: var(--pcbr-success);
  --color-success-dark: var(--pcbr-success);
  --color-error: var(--pcbr-error);
  --color-warning: var(--pcbr-warning);
  --color-info: var(--pcbr-accent);
  --color-primary-orange: var(--pcbr-warning);
  --color-primary-orange-hover: var(--pcbr-warning);
  --color-primary-orange-light: var(--pcbr-warning-soft);
  --color-tropical-teal: var(--pcbr-accent);
  --color-tropical-teal-dark: var(--pcbr-accent-hover);
  --color-tropical-teal-light: var(--pcbr-accent-soft);
  --color-tropical-sand: var(--pcbr-surface-2);
  --hero-content-bg: var(--pcbr-surface);
  --hero-text-primary: var(--pcbr-ink);
  --hero-text-secondary: var(--pcbr-ink-2);

  --radius-xs: 4px; --radius-sm: 4px;
  --radius-md: var(--pcbr-r-control);
  --radius-lg: var(--pcbr-r-surface);
  --radius-xl: var(--pcbr-r-sheet);
  --radius-round: var(--pcbr-r-full);

  --shadow-sm: none;
  --shadow-md: var(--pcbr-e-decision);
  --shadow-lg: var(--pcbr-e-sheet);
  --shadow-xl: var(--pcbr-e-sheet);

  --space-xs: var(--pcbr-space-2);  --space-sm: var(--pcbr-space-3);
  --space-md: var(--pcbr-space-4);  --space-lg: var(--pcbr-space-6);
  --space-xl: var(--pcbr-space-7);  --space-2xl: var(--pcbr-space-9);
  --component-margin: var(--pcbr-space-7) 0;
  --section-gap: var(--pcbr-section-gap);
  --content-gap: var(--pcbr-space-6);

  --container-sm: var(--pcbr-booking-col);
  --container-md: 768px;
  --container-lg: var(--pcbr-container);

  --step-4: var(--pcbr-fs-h1);  --step-3: var(--pcbr-fs-h2);  --step-2: var(--pcbr-fs-h3);
  --step-1: var(--pcbr-fs-lead); --step-0: var(--pcbr-fs-body);
  --step--1: var(--pcbr-fs-small); --step--2: var(--pcbr-fs-caption);

  /* Bootstrap bridge */
  --bs-font-sans-serif: var(--pcbr-font);
  --bs-body-font-family: var(--pcbr-font);
  --bs-body-font-size: var(--pcbr-fs-body);
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--pcbr-ink);
  --bs-border-color: var(--pcbr-line);
  --bs-border-radius: var(--pcbr-r-control);
  --bs-link-color: var(--pcbr-accent);
  --bs-link-hover-color: var(--pcbr-accent-hover);
}

/* Approved homepage mockup. Scoped values leave inner-page and checkout geometry intact. */
.pcbr-home-brand {
  --pcbr-home-title: 48px;
  --pcbr-home-heading: 34px;
  --pcbr-home-column-gap: 52px;
  --pcbr-home-photo-height: 430px;
  --pcbr-home-section: 72px;
}
@media (max-width: 1100px) {
  .pcbr-home-brand { --pcbr-home-title: 40px; --pcbr-home-heading: 30px; --pcbr-home-column-gap: 32px; --pcbr-home-photo-height: 390px; --pcbr-home-section: 56px; }
}
@media (max-width: 760px) {
  .pcbr-home-brand { --pcbr-home-title: 34px; --pcbr-home-heading: 28px; --pcbr-home-photo-height: 200px; --pcbr-home-section: 40px; }
}
@media (max-width: 360px) {
  .pcbr-home-brand { --pcbr-home-title: 30px; --pcbr-home-photo-height: 145px; }
}

/* == src/base.css == */
/**
 * Base: reset scoped to .pcbr, the type scale mapped to elements, links, the one focus ring,
 * the layout primitives (container, section, two-col, surface, trust) and the global shell
 * (header, menu sheet, footer) carried over from the retired theme.css, retokenised.
 *
 * Element-level rules are written as `:where(.pcbr) el` so they keep element specificity: they beat the
 * parent theme's and Bootstrap 3's element rules by source order (this sheet loads later) and stay below
 * every class-based component rule. They are not in a cascade layer on purpose: a layered rule loses to
 * any unlayered one on the same element, which is how Bootstrap's `body { font-family: "Helvetica Neue" }`
 * silently replaced Plus Jakarta Sans on every page.
 */
html { font-size: 16px; scroll-padding-top: var(--pcbr-sticky-top); -webkit-text-size-adjust: 100%; }

.pcbr {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  font-family: var(--pcbr-font);
  font-size: var(--pcbr-fs-body);
  line-height: var(--pcbr-lh-body);
  color: var(--pcbr-ink);
  background: var(--pcbr-surface);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
.pcbr-main { flex: 1 0 auto; min-width: 0; }
.pcbr-header, .pcbr-footer { flex-shrink: 0; }
:where(.pcbr) *, :where(.pcbr) *::before, :where(.pcbr) *::after { box-sizing: border-box; }
:where(.pcbr) img, :where(.pcbr) svg, :where(.pcbr) video { max-width: 100%; height: auto; }
:where(.pcbr) h1, :where(.pcbr) h2, :where(.pcbr) h3, :where(.pcbr) h4 { font-weight: var(--pcbr-weight-strong); letter-spacing: 0; margin: 0; }
:where(.pcbr) h1, :where(.pcbr) h2 { font-size: var(--pcbr-fs-h2); line-height: var(--pcbr-lh-h2); }
:where(.pcbr) h3 { font-size: var(--pcbr-fs-h3); line-height: var(--pcbr-lh-h3); }
:where(.pcbr) h4 { font-size: var(--pcbr-fs-lead); line-height: var(--pcbr-lh-lead); }
:where(.pcbr) p { margin: 0; }
:where(.pcbr) small, :where(.pcbr) .pcbr-small { font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); }
:where(.pcbr) .pcbr-lead { font-size: var(--pcbr-fs-lead); line-height: var(--pcbr-lh-lead); color: var(--pcbr-ink-2); }
:where(.pcbr) .pcbr-caption { font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); color: var(--pcbr-ink-3); }
:where(.pcbr) .pcbr-eyebrow {
  font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption);
  font-weight: var(--pcbr-weight-strong); letter-spacing: var(--pcbr-tracking-label);
  text-transform: uppercase; color: var(--pcbr-ink-3);
}
:where(.pcbr) a { color: var(--pcbr-accent); text-underline-offset: 2px; }
:where(.pcbr) a:hover { color: var(--pcbr-accent-hover); }
:where(.pcbr) .pcbr-prose a:not(.pcbr-btn), :where(.pcbr) p a:not([class]) { text-decoration: underline; } /* a link inside running text is told apart by the underline, not by colour alone */
:where(.pcbr) .pcbr-price__amount, :where(.pcbr) .price, :where(.pcbr) .amount { font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) { :where(.pcbr) h1 { font-size: var(--pcbr-fs-h1); line-height: var(--pcbr-lh-h1); } }
@media (prefers-reduced-motion: reduce) {
  :where(.pcbr) *, :where(.pcbr) *::before, :where(.pcbr) *::after {
    animation-duration: .001ms; animation-iteration-count: 1;
    transition-duration: .001ms; scroll-behavior: auto;
  }
}

/* Focus, hidden and the display utilities. */
.pcbr :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--pcbr-ring-focus); }
.pcbr [hidden] { display: none; }
/* A quick second tap on a field, a stepper or a result row is a double-tap to iOS Safari, which zooms the page.
   manipulation turns off only that gesture on the controls themselves: pinch zoom and scrolling stay available
   everywhere (the viewport meta carries no maximum-scale and no user-scalable=no on purpose). Zero specificity, so
   a component that needs another touch-action keeps it. */
:where(.pcbr) :where(a, button, input, select, textarea, label, summary, [role="option"], [role="tab"]) { touch-action: manipulation; }
/* Scoped under body.pcbr (0,2,0) so a later single-class rule such as .pcbr-band { display: grid } cannot
   re-show a hidden element. Only the hide is written: a shown element keeps its own display value. */
@media (max-width: 1023.98px) { .pcbr .pcbr-only-desktop { display: none; } }
@media (min-width: 1024px) { .pcbr .pcbr-only-mobile { display: none; } }

/* Layout primitives */
.pcbr-container { width: 100%; max-width: calc(var(--pcbr-container) + 2 * var(--pcbr-gutter)); margin-inline: auto; padding-inline: var(--pcbr-gutter); }
.pcbr-section { display: grid; gap: var(--pcbr-heading-gap); }
.pcbr-section--sand { background: var(--pcbr-surface-2); border-radius: var(--pcbr-r-surface); padding: var(--pcbr-space-6); }
.pcbr-section__title { margin: 0; font-size: var(--pcbr-fs-h3); line-height: var(--pcbr-lh-h3); font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink); }
.pcbr-section__lead { margin: 0; font-size: var(--pcbr-fs-lead); line-height: var(--pcbr-lh-lead); color: var(--pcbr-ink-2); }
.pcbr-page-sections, .pcbr-experience__main { display: grid; gap: var(--pcbr-section-gap); }

.pcbr-two-col, .pcbr-experience__grid { display: grid; gap: var(--pcbr-space-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .pcbr-two-col, .pcbr-experience__grid { grid-template-columns: minmax(0, 1fr) var(--pcbr-booking-col); gap: var(--pcbr-booking-gap); }
  .pcbr-two-col__aside, .pcbr-experience__aside { position: sticky; top: var(--pcbr-sticky-top); }
}
@media (max-width: 1023.98px) { .pcbr-two-col__aside, .pcbr-experience__aside { order: -1; } }
.pcbr-grid { display: grid; gap: var(--pcbr-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .pcbr-grid--experiences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pcbr-space-8); } }
@media (min-width: 1024px) { .pcbr-grid--experiences { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcbr-two-col__main { display: grid; gap: var(--pcbr-section-gap); min-width: 0; }
.pcbr-split { display: grid; gap: var(--pcbr-space-7); align-items: start; }
.pcbr-split__copy, .pcbr-split__aside { display: grid; gap: var(--pcbr-space-4); min-width: 0; }
@media (min-width: 1024px) { .pcbr-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pcbr-booking-gap); } }

.pcbr-surface, .pcbr-widget {
  display: grid; gap: var(--pcbr-space-4); padding: var(--pcbr-space-4);
  border: 1px solid var(--pcbr-line); border-radius: var(--pcbr-r-surface); background: var(--pcbr-surface);
}
@media (min-width: 1024px) {
  .pcbr-surface, .pcbr-widget { padding: var(--pcbr-space-6); border-color: transparent; box-shadow: var(--pcbr-e-decision); }
}
.pcbr-trust { display: flex; flex-wrap: wrap; gap: var(--pcbr-space-3) var(--pcbr-space-5); margin: 0; padding: 0; list-style: none; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-2); }
.pcbr-trust__item { display: flex; align-items: center; gap: var(--pcbr-space-1); }
.pcbr-trust__item svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--pcbr-ink-3); }
@media (max-width: 599.98px) { .pcbr-trust { display: grid; grid-template-columns: 1fr 1fr; } }

/* == src/button.css == */
/**
 * Button. Three weights, one size system: full-width and primary actions are 48px, text buttons 40px.
 * The primary is never disabled; only --secondary and --text carry a disabled state.
 */
.pcbr-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pcbr-space-2);
  min-height: var(--pcbr-control-h); padding: 0 var(--pcbr-space-5);
  border: 1px solid transparent; border-radius: var(--pcbr-r-control);
  font-family: inherit; font-size: var(--pcbr-fs-body); line-height: var(--pcbr-lh-body);
  font-weight: var(--pcbr-weight-strong); text-align: center; text-decoration: none;
  cursor: pointer; background: none; color: var(--pcbr-ink);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pcbr-btn--block { width: 100%; }

.pcbr-btn--primary { background: var(--pcbr-cta); color: var(--pcbr-ink); }
.pcbr-btn--primary:hover, .pcbr-btn--primary:focus { background: var(--pcbr-cta-hover); color: var(--pcbr-ink); }

.pcbr-btn--secondary { background: var(--pcbr-surface); color: var(--pcbr-ink); border-color: var(--pcbr-ink); }
.pcbr-btn--secondary:hover, .pcbr-btn--secondary:focus { background: var(--pcbr-surface-2); color: var(--pcbr-ink); }

.pcbr-btn--text, .pcbr-link {
  min-height: var(--pcbr-control-h-sm); padding: 0 var(--pcbr-space-2);
  background: none; border: 0; color: var(--pcbr-accent);
  font-family: inherit; font-size: var(--pcbr-fs-small); font-weight: var(--pcbr-weight-strong);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.pcbr-btn--text { display: inline-flex; align-items: center; justify-content: center; gap: var(--pcbr-space-1); border-radius: var(--pcbr-r-control); }
.pcbr-btn--text:hover, .pcbr-link:hover { color: var(--pcbr-accent-hover); background: var(--pcbr-surface-2); }
/* In the booking widget the text buttons ("Ask our team", "Contact our team") are 44px targets (ledger A-06)
   that still occupy their 40px: the 2px each side is taken back with negative block margins, so nothing moves. */
.pcbr-widget .pcbr-btn--text { min-height: var(--pcbr-touch); margin-block: calc((var(--pcbr-control-h-sm) - var(--pcbr-touch)) / 2); }

.pcbr-btn--sm { min-height: var(--pcbr-control-h-sm); padding: 0 var(--pcbr-space-3); font-size: var(--pcbr-fs-small); }

.pcbr-btn[disabled], .pcbr-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Loading keeps the button's width so the layout does not jump. */
.pcbr-btn.is-loading { pointer-events: none; }
.pcbr-btn.is-loading > * { visibility: hidden; }
.pcbr-btn__spinner {
  position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; visibility: visible;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--pcbr-r-full);
  animation: pcbr-spin .7s linear infinite;
}
@keyframes pcbr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pcbr-btn__spinner { animation-duration: 2s; } }

.pcbr-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.pcbr-btn__label { display: inline-block; }

/* == src/input.css == */
/**
 * Text input, search combobox, segmented control and the date trigger.
 * Label above the field, always visible; 48px tall, 8px radius, 14px horizontal padding.
 * .pcbr-input__control is the pre-v2 alias of .pcbr-input and is kept until V2 renames the markup.
 */
/* align-content: start keeps a field's rows at their own height when a multi-column grid stretches the field. */
.pcbr-field { display: grid; align-content: start; gap: var(--pcbr-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.pcbr-label {
  font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small);
  font-weight: var(--pcbr-weight-medium); letter-spacing: 0;
  text-transform: none; color: var(--pcbr-ink-2);
}
.pcbr-input, .pcbr-input__control {
  width: 100%; min-height: var(--pcbr-control-h); padding: 0 14px;
  border: 1px solid var(--pcbr-ink-3); border-radius: var(--pcbr-r-control);
  background: var(--pcbr-surface); color: var(--pcbr-ink);
  font-family: inherit; font-size: var(--pcbr-fs-body); line-height: var(--pcbr-lh-body);
}
.pcbr-input::placeholder, .pcbr-input__control::placeholder { color: var(--pcbr-ink-3); }
.pcbr-input:hover, .pcbr-input__control:hover { border-color: var(--pcbr-ink-3); }
.pcbr-input:focus, .pcbr-input__control:focus { outline: none; border-color: var(--pcbr-accent); box-shadow: var(--pcbr-ring-focus); }
/* iOS Safari gives date and time inputs an intrinsic minimum width and centred text, so they overflow a narrow
   column and an empty one collapses (found in iOS Safari, iPhone 17 Simulator, 2026-10-07). The picker still opens. */
.pcbr-input:is([type="date"], [type="time"]) {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: var(--pcbr-control-h);
  padding-block: calc((var(--pcbr-control-h) - var(--pcbr-lh-body) - 2px) / 2); line-height: var(--pcbr-lh-body); text-align: left;
}
.pcbr-input::-webkit-date-and-time-value { text-align: left; }
/* iOS draws an empty date or time input as a blank box (no "mm/dd/yyyy"), so nothing says it is a field to tap
   (iPhone 17 Simulator, 2026-10-08). The control's own `data-empty` text shows until it has a value; the script keeps
   `is-empty` current. iOS only: desktop browsers draw their own placeholder and would show both. */
@supports (-webkit-touch-callout: none) {
  .pcbr-input:is([type="date"], [type="time"]).is-empty::before { content: attr(data-empty); color: var(--pcbr-ink-3); }
}
/* Trip dates read "Nov 20, 2026" everywhere (owner, 2026-10-10): a native date input draws its value in the device
   locale ("2026-11-20", "20/11/2026"). The picker, the ISO value and the accessible value stay the input's own; the
   script writes the formatted date into the aria-hidden text over the control's text area and the control's own text
   turns transparent while a value is set. The text never takes a pointer, so a tap still opens the native picker and
   the calendar icon stays visible. Firefox has no styleable date parts: it keeps its native text and the overlay
   stays hidden. */
.pcbr-date-input { position: relative; display: block; min-width: 0; }
.pcbr-date-input__text {
  position: absolute; inset: 1px 44px 1px 15px; display: flex; align-items: center; overflow: hidden;
  color: var(--pcbr-ink); font-size: var(--pcbr-fs-body); line-height: var(--pcbr-lh-body); white-space: nowrap; pointer-events: none;
}
/* Two rules, not one list: a browser that lacks either pseudo-element would drop the whole list. */
.pcbr-date-input .pcbr-input:not(.is-empty)::-webkit-datetime-edit { color: transparent; }
.pcbr-date-input .pcbr-input:not(.is-empty)::-webkit-date-and-time-value { color: transparent; }
.pcbr-date-input .pcbr-input.is-empty + .pcbr-date-input__text { visibility: hidden; }
/* iOS draws no calendar icon here, so the whole control's text can go transparent. */
@supports (-webkit-touch-callout: none) {
  .pcbr-date-input .pcbr-input:not(.is-empty) { color: transparent; }
}
/* Desktop Chrome keeps focus in the field after a pick and highlights the focused segment: that highlight goes too.
   Typing still works: while a typed date is incomplete the value is empty, so the native segments show until it is. */
.pcbr-date-input .pcbr-input:not(.is-empty)::-webkit-datetime-edit-month-field { color: transparent; background: transparent; }
.pcbr-date-input .pcbr-input:not(.is-empty)::-webkit-datetime-edit-day-field { color: transparent; background: transparent; }
.pcbr-date-input .pcbr-input:not(.is-empty)::-webkit-datetime-edit-year-field { color: transparent; background: transparent; }
@supports (-moz-appearance: none) {
  .pcbr-date-input__text { display: none; }
}
/* iOS Safari zooms the page when a focused text control is under 16px, and the page stays zoomed afterwards. Our own
   controls are --pcbr-fs-body (16px) through .pcbr-input, the WooCommerce .form-row rule and the business form; these
   floors cover what plugins render without our class: the WooCommerce payment box sets 14px text (woo-scope.css, checkout.css),
   so a saved-card select or a card-form postal code would inherit 14px, and select2's search box (the country list)
   inherits whatever its container says. Checkboxes and radios open no keyboard and are left alone. */
.pcbr #payment :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), select, textarea),
.pcbr .select2-search__field { font-size: var(--pcbr-fs-body); }
.pcbr-input[disabled], .pcbr-input__control[disabled] { background: var(--pcbr-surface-2); color: var(--pcbr-ink-3); }
textarea.pcbr-input, textarea.pcbr-input__control { padding: var(--pcbr-space-3) 14px; min-height: 96px; }
.pcbr-hint { margin: 0; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-3); }
.pcbr-hint--warn { color: var(--pcbr-warning); }
.pcbr-error { margin: 0; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-error); }
.pcbr-field.is-invalid .pcbr-input, .pcbr-field.is-invalid .pcbr-input__control { border-color: var(--pcbr-error); }
/* A control the script marked invalid (wizard and checkout alike) carries the error colour on its own, so the state
   never depends on a wrapper class or on colour alone: the message under it is what explains. */
.pcbr-input[aria-invalid="true"], .pcbr-input__control[aria-invalid="true"] { border-color: var(--pcbr-error); }

/* Search combobox: leading icon slot, 48px result rows. The wrapper carries the one line and the
   focus ring; the control inside it is bare so the field is a single box. */
.pcbr-input--search { position: relative; display: flex; align-items: center; padding: 0; }
.pcbr-input--search .pcbr-input, .pcbr-input--search .pcbr-input__control { padding-left: 42px; }
.pcbr-input--search .pcbr-input__control { min-height: calc(var(--pcbr-control-h) - 2px); border: 0; border-radius: 0; background: transparent; }
.pcbr-input--search .pcbr-input__control:focus { box-shadow: none; }
.pcbr-input--search:focus-within { border-color: var(--pcbr-accent); box-shadow: var(--pcbr-ring-focus); }
.pcbr-input__icon { position: absolute; left: 12px; width: 20px; height: 20px; color: var(--pcbr-ink-3); pointer-events: none; }
.pcbr-pickup, .pcbr-field--pickup { position: relative; }
.pcbr-pickup__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: var(--pcbr-space-1); list-style: none; max-height: 288px; overflow: auto;
  background: var(--pcbr-surface); border: 1px solid var(--pcbr-line);
  border-radius: var(--pcbr-r-surface); box-shadow: var(--pcbr-e-sheet);
}
.pcbr-pickup__item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--pcbr-space-3);
  min-height: var(--pcbr-control-h); padding: var(--pcbr-space-2) var(--pcbr-space-3);
  border-radius: var(--pcbr-r-control); cursor: pointer;
}
.pcbr-pickup__item:hover, .pcbr-pickup__item.is-active, .pcbr-pickup__item[aria-selected="true"] { background: var(--pcbr-surface-2); }
.pcbr-pickup__title { font-weight: var(--pcbr-weight-medium); color: var(--pcbr-ink); }
.pcbr-pickup__meta { grid-column: 1; font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); color: var(--pcbr-ink-3); }
.pcbr-pickup__fee { grid-row: 1; grid-column: 2; font-size: var(--pcbr-fs-small); color: var(--pcbr-ink-2); }
.pcbr-pickup__empty { padding: var(--pcbr-space-3); font-size: var(--pcbr-fs-small); color: var(--pcbr-ink-3); }
.pcbr-pickup__state, .pcbr-pickup__line { display: grid; gap: var(--pcbr-space-1); font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-2); }
.pcbr-pickup-why { justify-self: start; }
.pcbr-guests-label { display: block; }
.pcbr-pickup__time { margin: 0; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-2); }

/* Segmented control: radios rendered as one joined row. */
.pcbr-seg { display: flex; flex-wrap: wrap; gap: var(--pcbr-space-2); }
.pcbr-seg__opt { position: relative; flex: 1 1 auto; }
.pcbr-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pcbr-seg__opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--pcbr-touch); padding: 0 var(--pcbr-space-4);
  border: 1px solid var(--pcbr-line); border-radius: var(--pcbr-r-control);
  font-size: var(--pcbr-fs-small); font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink-2);
}
.pcbr-seg__opt input:checked + span, .pcbr-seg__opt.is-selected span {
  border: 2px solid var(--pcbr-ink); background: var(--pcbr-accent-soft); color: var(--pcbr-ink);
}
.pcbr-seg__opt input:focus-visible + span { box-shadow: var(--pcbr-ring-focus); }

/* Date trigger: a hairline row, never a typed field. */
.pcbr-date {
  display: flex; align-items: center; gap: var(--pcbr-space-3); width: 100%;
  min-height: var(--pcbr-control-h); padding: 0 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--pcbr-line); border-radius: var(--pcbr-r-control);
  background: var(--pcbr-surface); color: var(--pcbr-ink); font: inherit;
}
.pcbr-date svg, .pcbr-date__icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--pcbr-ink-3); }
.pcbr-date__value { flex: 1 1 auto; font-weight: var(--pcbr-weight-medium); }
.pcbr-date.is-empty .pcbr-date__value { color: var(--pcbr-ink-3); font-weight: var(--pcbr-weight-body); }
/* The calendar script swaps in an alt input carrying the parent theme's .form-control box; the row is the box. */
.pcbr-date .pcbr-date__value, .pcbr-date .pcbr-date__value:focus { min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; }
/* Its placeholder would inherit Bootstrap's #999 (2.85:1); keep the accessible muted ink. One rule per
   pseudo-element: an unknown vendor selector would drop a grouped rule in the other engines. */
.pcbr-date .pcbr-date__value::placeholder { color: var(--pcbr-ink-3); opacity: 1; }
.pcbr-date .pcbr-date__value::-webkit-input-placeholder { color: var(--pcbr-ink-3); }
.pcbr-date .pcbr-date__value::-moz-placeholder { color: var(--pcbr-ink-3); opacity: 1; }
.pcbr-date .pcbr-date__value:-ms-input-placeholder { color: var(--pcbr-ink-3); }
.pcbr-date:focus-within { border-color: var(--pcbr-accent); box-shadow: var(--pcbr-ring-focus); }
/* Non-text contrast (WCAG 1.4.11, experience audit H, ledger A-07): in the booking widget the date row and the hotel
   search are fields whose outline is the only thing that shows where to type or tap, so their boundary takes the muted
   ink (4.8:1 on white; 6.35:1 with the tour's darker pair) instead of the hairline (1.25-1.41:1). Hover darkens to ink;
   focus keeps the accent and the ring (restated after, at the same specificity). Option cards are identified by their
   text and their selected state by a 2px ink ring, so their hairline stays decorative. */
.pcbr-widget :is(.pcbr-date, .pcbr-input--search) { border-color: var(--pcbr-ink-3); }
.pcbr-widget :is(.pcbr-date, .pcbr-input--search):hover { border-color: var(--pcbr-ink); }
.pcbr-widget :is(.pcbr-date, .pcbr-input--search):focus-within { border-color: var(--pcbr-accent); }
.pcbr-date__change { color: var(--pcbr-accent); font-size: var(--pcbr-fs-small); font-weight: var(--pcbr-weight-strong); text-decoration: underline; }
/* Empty row: the whole row is the trigger, so no "Change" affordance until a date exists. */
.pcbr-date.is-empty .pcbr-date__change { display: none; }

/* == src/card.css == */
/**
 * Link card: the whole card is the link. 3:2 media, no shadow ever.
 */
.pcbr-card {
  display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none;
  border: 1px solid var(--pcbr-line); border-radius: var(--pcbr-r-surface); background: var(--pcbr-surface);
}
.pcbr-card:hover { border-color: var(--pcbr-ink-3); color: inherit; }
.pcbr-card:focus-visible { box-shadow: var(--pcbr-ring-focus); }
.pcbr-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--pcbr-surface-3); overflow: hidden; }
.pcbr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcbr-card__body { display: grid; gap: var(--pcbr-space-2); padding: var(--pcbr-space-4); flex: 1 1 auto; }
.pcbr-card__title { margin: 0; font-size: var(--pcbr-fs-lead); line-height: var(--pcbr-lh-lead); font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink); }
.pcbr-card__text { margin: 0; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-2); }
.pcbr-card__annot {
  align-self: start; font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption);
  font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink);
  background: var(--pcbr-accent-soft); border-radius: var(--pcbr-r-full); padding: 2px var(--pcbr-space-2);
}
.pcbr-card__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pcbr-space-1) var(--pcbr-space-3);
  margin-top: auto; padding-top: var(--pcbr-space-3); border-top: 1px solid var(--pcbr-line);
  font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-3);
}
.pcbr-card__from, .pcbr-card__price { font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink); }
.pcbr-card__desc { margin: 0; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-2); }
.pcbr-card__why { margin: 0; font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); color: var(--pcbr-ink-3); }
.pcbr-card__cap, .pcbr-card__dur { font-size: var(--pcbr-fs-small); color: var(--pcbr-ink-3); }
.pcbr-card__dur { white-space: nowrap; }
.pcbr-card__tags { display: flex; flex-wrap: wrap; gap: var(--pcbr-space-2); font-size: var(--pcbr-fs-caption); color: var(--pcbr-ink-3); }
.pcbr-card__media--empty { background: var(--pcbr-surface-3); }
.pcbr-cards { display: grid; gap: var(--pcbr-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .pcbr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pcbr-space-8); } }
@media (min-width: 1024px) { .pcbr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pcbr-card__body { padding: var(--pcbr-space-6); } }

/* == src/notice.css == */
/**
 * Notice: four tones, one shape. 12px radius, 1px border, a 20px icon, and a sentence that
 * says what to do next. No shadows. Info is the sand default. .pcbr-band is the accent-soft block.
 */
.pcbr-notice {
  display: flex; align-items: flex-start; gap: var(--pcbr-space-3); padding: var(--pcbr-space-4);
  border: 1px solid var(--pcbr-line); border-radius: var(--pcbr-r-surface);
  background: var(--pcbr-surface-2); color: var(--pcbr-ink-2);
  font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small);
}
.pcbr-notice > svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
.pcbr-notice__body { display: grid; gap: var(--pcbr-space-1); min-width: 0; }
.pcbr-notice__title { margin: 0; font-size: var(--pcbr-fs-body); line-height: var(--pcbr-lh-body); font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink); }
.pcbr-notice p { margin: 0; }
.pcbr-notice__actions { display: flex; flex-wrap: wrap; gap: var(--pcbr-space-2); margin-top: var(--pcbr-space-1); }

.pcbr-notice--info { background: var(--pcbr-surface-2); border-color: var(--pcbr-line); }
.pcbr-notice--warning { background: var(--pcbr-warning-soft); border-color: var(--pcbr-warning); }
.pcbr-notice--warning > svg { color: var(--pcbr-warning); }
.pcbr-notice--error { background: var(--pcbr-surface); border-color: var(--pcbr-error); }
.pcbr-notice--error > svg { color: var(--pcbr-error); }
.pcbr-notice--success { background: var(--pcbr-surface); border-color: var(--pcbr-success); }
.pcbr-notice--success > svg { color: var(--pcbr-success); }

.pcbr-band { padding: var(--pcbr-space-4); border-radius: var(--pcbr-r-surface); background: var(--pcbr-accent-soft); display: grid; gap: var(--pcbr-space-3); }
.pcbr-band__text { margin: 0; color: var(--pcbr-ink-2); }
.pcbr-band--sand { background: var(--pcbr-surface-2); padding: var(--pcbr-space-6) var(--pcbr-space-5); }
.pcbr-band > .pcbr-btn { align-self: start; }
@media (min-width: 1024px) {
  .pcbr-band { padding: var(--pcbr-space-6); }
  .pcbr-band--sand { padding: var(--pcbr-space-8); }
  .pcbr-band > .pcbr-btn { justify-self: start; }
}

/* Pre-v2 widget notices, retokenised until V2 replaces the markup. */
.pcbr-widget__notice, .pcbr-widget__message {
  margin: 0; padding: var(--pcbr-space-3) var(--pcbr-space-4); border-radius: var(--pcbr-r-surface);
  background: var(--pcbr-surface-2); font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-2);
}
.pcbr-widget__message { background: var(--pcbr-warning-soft); color: var(--pcbr-ink); }

/* Caption text on tinted surfaces (band, selected option) needs the darker secondary ink for AA. */
.pcbr-band small, .pcbr-band .pcbr-caption, .pcbr-band .pcbr-eyebrow, .pcbr-option.is-selected small, .pcbr-option.is-selected .pcbr-option__meta, .pcbr-surface small { color: var(--pcbr-ink-2); }

/* == src/chip.css == */
/**
 * Chip: times and filters. 40px tall, 12px horizontal padding, pill radius.
 * A chip never carries a price and never wraps: if a label needs a second line it is an option card.
 * .pcbr-slot is the pre-v2 time chip markup and shares the shape.
 */
.pcbr-chips, .pcbr-slots { display: flex; flex-wrap: wrap; gap: var(--pcbr-space-3); }
.pcbr-chip, .pcbr-slot { position: relative; display: inline-flex; }
.pcbr-chip input, .pcbr-slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pcbr-chip > span, .pcbr-slot > span, a.pcbr-chip, button.pcbr-chip {
  display: inline-flex; align-items: center; gap: var(--pcbr-space-1); white-space: nowrap;
  height: var(--pcbr-control-h-sm); padding: 0 var(--pcbr-space-3);
  border: 1px solid var(--pcbr-line); border-radius: var(--pcbr-r-full);
  background: var(--pcbr-surface); color: var(--pcbr-ink);
  font-family: inherit; font-size: var(--pcbr-fs-small); font-weight: var(--pcbr-weight-strong);
  text-decoration: none; cursor: pointer;
}
.pcbr-chip:hover > span, .pcbr-slot:hover > span, a.pcbr-chip:hover, button.pcbr-chip:hover { background: var(--pcbr-surface-2); color: var(--pcbr-ink); }
.pcbr-chip input:checked + span, .pcbr-slot input:checked + span, .pcbr-chip.is-selected > span,
a.pcbr-chip.is-selected, button.pcbr-chip.is-selected, button.pcbr-chip[aria-pressed="true"] {
  border: 2px solid var(--pcbr-ink); padding: 0 11px; background: var(--pcbr-accent-soft);
}
.pcbr-chip input:focus-visible + span, .pcbr-slot input:focus-visible + span { box-shadow: var(--pcbr-ring-focus); }
.pcbr-chip input[disabled] + span, .pcbr-slot input[disabled] + span, .pcbr-chip.is-disabled > span {
  background: var(--pcbr-surface-2); color: var(--pcbr-ink-3); cursor: not-allowed; text-decoration: line-through;
}
.pcbr-chip--filter > span, a.pcbr-chip--filter, button.pcbr-chip--filter { font-weight: var(--pcbr-weight-medium); }
.pcbr-chip--filter.is-selected { font-weight: var(--pcbr-weight-strong); }

/* == src/accordion.css == */
/**
 * Accordion: hairline-separated rows, never boxed. The whole 56px row is the target;
 * the panel is prose at 16/24, never a nested box.
 */
.pcbr-acc { display: grid; }
.pcbr-acc__item { border-bottom: 1px solid var(--pcbr-line); }
.pcbr-acc__item:first-child { border-top: 1px solid var(--pcbr-line); }
.pcbr-acc__head { margin: 0; font-size: inherit; }
.pcbr-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pcbr-space-3);
  width: 100%; min-height: 56px; padding: var(--pcbr-space-3) 0; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--pcbr-ink);
  font-family: inherit; font-size: var(--pcbr-fs-body); line-height: var(--pcbr-lh-body); font-weight: var(--pcbr-weight-strong);
}
.pcbr-acc__label { flex: 1 1 auto; min-width: 0; }
.pcbr-acc__btn svg, .pcbr-acc__chevron, .pcbr-acc__caret { width: 20px; height: 20px; flex: 0 0 20px; color: var(--pcbr-ink-3); transition: transform .15s ease; }
.pcbr-acc__btn[aria-expanded="true"] svg, .pcbr-acc__item.is-open .pcbr-acc__chevron, .pcbr-acc.is-open .pcbr-acc__chevron { transform: rotate(180deg); }
.pcbr-acc__h { margin: 0; font-size: inherit; }
.pcbr-acc--inline .pcbr-acc__item, .pcbr-acc--inline .pcbr-acc__item:first-child { border: 0; }
.pcbr-acc--inline .pcbr-acc__btn { min-height: var(--pcbr-touch); font-size: var(--pcbr-fs-small); }
.pcbr-acc__panel { display: none; padding: 0 0 var(--pcbr-space-4); }
.pcbr-acc__btn[aria-expanded="true"] + .pcbr-acc__panel, .pcbr-acc__item.is-open .pcbr-acc__panel,
/* a single-row accordion (the widget's add-ons field) carries is-open on the .pcbr-acc itself; its toggle sits in a
   div.pcbr-acc__h, not a heading, since the widget comes before the page's first section heading (ledger C-09) */
.pcbr-acc.is-open > .pcbr-acc__panel { display: grid; gap: var(--pcbr-space-3); }
.pcbr-acc__panel[hidden] { display: none; }
.pcbr-acc__panel p { margin: 0; color: var(--pcbr-ink-2); }

/* Pre-v2 <details> FAQ, same rhythm until V3 swaps in the button-in-h3 markup. */
.pcbr-faq { display: grid; }
.pcbr-faq__item { border-bottom: 1px solid var(--pcbr-line); padding: var(--pcbr-space-3) 0; }
.pcbr-faq__item:first-child { border-top: 1px solid var(--pcbr-line); }
.pcbr-faq__item summary { cursor: pointer; min-height: 32px; font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink); }
.pcbr-faq__item p { margin: var(--pcbr-space-2) 0 0; color: var(--pcbr-ink-2); }

/* == src/sheet.css == */
/**
 * Bottom sheet (<1024) and right drawer (>=1024). 16px radius on the top corners only,
 * e-sheet over a 32% ink scrim, every control inside is 48px. Focus is trapped by pcbr-sheet.js.
 */
.pcbr-sheet { position: fixed; inset: 0; z-index: 80; display: none; }
.pcbr-sheet.is-open { display: block; }
.pcbr-sheet__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--pcbr-scrim); cursor: pointer; }
.pcbr-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(88vh - var(--pcbr-safe-top)); overflow: auto;
  display: grid; gap: var(--pcbr-space-4); align-content: start;
  padding: var(--pcbr-space-2) var(--pcbr-gutter) calc(var(--pcbr-space-4) + var(--pcbr-safe-bottom)); /* sides: the gutter clears the side insets */
  background: var(--pcbr-surface); border-radius: var(--pcbr-r-sheet) var(--pcbr-r-sheet) 0 0;
  box-shadow: var(--pcbr-e-sheet);
}
.pcbr-sheet__handle { justify-self: center; width: 40px; height: 4px; margin: var(--pcbr-space-1) 0; border-radius: var(--pcbr-r-full); background: var(--pcbr-line); }
.pcbr-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pcbr-space-3); }
.pcbr-sheet__title { margin: 0; font-size: var(--pcbr-fs-h3); line-height: var(--pcbr-lh-h3); font-weight: var(--pcbr-weight-strong); }
.pcbr-sheet__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pcbr-touch); height: var(--pcbr-touch); flex: 0 0 var(--pcbr-touch);
  background: none; border: 0; border-radius: var(--pcbr-r-full); cursor: pointer; color: var(--pcbr-ink);
}
.pcbr-sheet__close:hover { background: var(--pcbr-surface-2); }
.pcbr-sheet__close svg { width: 20px; height: 20px; }
.pcbr-sheet__body { display: grid; gap: var(--pcbr-space-4); }
.pcbr-sheet__done, .pcbr-sheet .pcbr-btn { width: 100%; }
body.pcbr-sheet-open { overflow: hidden; }

@media (min-width: 1024px) {
  .pcbr-sheet--drawer .pcbr-sheet__panel {
    left: auto; top: 0; bottom: 0; width: min(420px, 92vw); max-height: none;
    border-radius: var(--pcbr-r-sheet) 0 0 var(--pcbr-r-sheet);
    padding: calc(var(--pcbr-space-6) + var(--pcbr-safe-top)) calc(var(--pcbr-space-6) + var(--pcbr-safe-right)) calc(var(--pcbr-space-6) + var(--pcbr-safe-bottom)) var(--pcbr-space-6);
  }
  .pcbr-sheet--drawer .pcbr-sheet__handle { display: none; }
}

/* == src/shell.css == */
/**
 * Global shell: skip link, header, mobile menu sheet, footer and the page wrapper.
 * Real WordPress menus render `li.menu-item` under the list classes, so the row and link
 * rules are written against descendants, not against a class on the <li> or <a>.
 */
.pcbr-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; width: 1px; height: 1px; overflow: hidden; background: var(--pcbr-ink); color: #fff; text-decoration: none; padding: var(--pcbr-space-2) var(--pcbr-space-3); border-radius: var(--pcbr-r-control); }
.pcbr-skip:focus, .pcbr-skip:focus-visible { left: calc(var(--pcbr-space-3) + var(--pcbr-safe-left)); top: calc(var(--pcbr-space-3) + var(--pcbr-safe-top)); width: auto; height: auto; overflow: visible; color: #fff; }
.pcbr-main { display: block; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pcbr-header { position: relative; padding-top: var(--pcbr-safe-top); background: var(--pcbr-surface); border-bottom: 1px solid var(--pcbr-line); } /* the surface runs under a top inset (standalone, notch); its row starts below it; the row's sides follow --pcbr-gutter */
/* Header width is global; page content may use a narrower container. */
.pcbr-header__inner { max-width: calc(var(--pcbr-header-container) + 2 * var(--pcbr-gutter)); display: flex; align-items: center; justify-content: space-between; gap: var(--pcbr-space-4); min-height: 56px; }
.pcbr-header__brand, .pcbr-brand { display: flex; flex-direction: column; justify-content: center; text-decoration: none; line-height: 1.2; color: var(--pcbr-ink); }
.pcbr-header__brand:hover, .pcbr-brand:hover { color: var(--pcbr-ink); }
.pcbr-header__wordmark, .pcbr-brand__name { font-size: var(--pcbr-fs-lead); font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink); }
.pcbr-header__by, .pcbr-brand__by { font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); color: var(--pcbr-ink-3); }
/* Logo (brand v3, assets/brand/v3/svg/pujgo-compact.svg, 618 × 184): the compact wordmark at 168px on phones and
   tablets and 135px from 1024px (owner). Width + the intrinsic width/height attributes reserve the box before the SVG loads
   (no layout shift); height follows the artwork's ratio, so the journey curve is never squashed or clipped. The
   endorsement "Part of Punta Cana Adventures" is real text: under the wordmark, flush with its left edge, until the
   row has room for the side-by-side family lockup (1200px, below). */
.pcbr-header__brand { min-width: 0; gap: 2px; padding-block: var(--pcbr-space-2); } /* clear space around the wordmark and its curve */
.pcbr-header__logo { display: block; width: 168px; max-width: 100%; height: auto; aspect-ratio: 618 / 184; }
.pcbr-header__brand .pcbr-header__by { white-space: nowrap; color: var(--pcbr-ink-2); }
.pcbr-header__menu-btn { flex-shrink: 0; }
/* Team contact (owner, 2026-10-17): WhatsApp and call as 44px icon targets beside the menu button on phones and
   tablets; from 1280px the phone link also writes the number out. The number stays the link's accessible name. */
.pcbr-header__actions { display: flex; align-items: center; gap: var(--pcbr-space-2); flex-shrink: 0; }
.pcbr-header__contact {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pcbr-space-2);
  min-width: var(--pcbr-touch); min-height: var(--pcbr-touch); border-radius: var(--pcbr-r-control);
  color: var(--pcbr-ink); text-decoration: none; font-size: var(--pcbr-fs-small); font-weight: var(--pcbr-weight-strong); white-space: nowrap;
}
.pcbr-header__contact:hover { background: var(--pcbr-surface-2); color: var(--pcbr-ink); }
.pcbr-header__contact svg { width: 20px; height: 20px; flex-shrink: 0; }
.pcbr-header__phone-number { display: none; }
/* Cart (PCA shell pattern): the bag is a 44px target like the contact icons; the count badge overlaps its
   lower-right corner and exists only while the cart holds something ([hidden] keeps it out of the layout). */
.pcbr-header__cart { position: relative; }
.pcbr-header__cart-state { position: absolute; top: 6px; right: 6px; }
.pcbr-header__cart-state[hidden] { display: none; }
.pcbr-header__cart-count {
  display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--pcbr-r-full); background: var(--pcbr-accent); color: #fff;
  font-size: 11px; line-height: 1; font-weight: var(--pcbr-weight-strong);
}
.pcbr-header__menu-btn, .pcbr-menu-btn, .pcbr-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: var(--pcbr-touch); height: var(--pcbr-touch);
  position: relative; background: none; border: 1px solid var(--pcbr-line); border-radius: var(--pcbr-r-control); cursor: pointer; color: var(--pcbr-ink);
}
.pcbr-header__menu-btn svg { width: 20px; height: 20px; }
.pcbr-nav-toggle__bar, .pcbr-nav-toggle__bar::before, .pcbr-nav-toggle__bar::after { content: ""; position: absolute; left: 11px; width: 20px; height: 2px; background: var(--pcbr-ink); }
.pcbr-nav-toggle__bar { top: 21px; } .pcbr-nav-toggle__bar::before { top: -6px; left: 0; } .pcbr-nav-toggle__bar::after { top: 6px; left: 0; }
.pcbr-header__nav, .pcbr-nav { display: none; align-items: center; gap: var(--pcbr-space-5); }
.pcbr-header__menu, .pcbr-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcbr-space-2); }
.pcbr-header__item, .pcbr-header__menu li { display: block; }
.pcbr-header__link, .pcbr-header__menu li > a, .pcbr-nav__list a {
  display: inline-flex; align-items: center; min-height: var(--pcbr-touch);
  padding: 0 var(--pcbr-space-3); border-radius: var(--pcbr-r-control);
  color: var(--pcbr-ink); text-decoration: none;
  font-size: var(--pcbr-fs-small); font-weight: var(--pcbr-weight-strong);
}
.pcbr-header__link:hover, .pcbr-header__menu li > a:hover, .pcbr-nav__list a:hover { background: var(--pcbr-surface-2); color: var(--pcbr-ink); }
.pcbr-header__menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 4px; }
:where(.pcbr) .pcbr-header__menu a[aria-current="page"],
:where(.pcbr) .pcbr-menu-sheet__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: var(--pcbr-underline-offset); }
/* Without JavaScript, keep the primary links visible instead of an unusable menu toggle. */
html:not(.pcbr-has-js) :where(.pcbr) .pcbr-header__menu-btn { display: none; }
@media (max-width: 1023.98px) {
  html:not(.pcbr-has-js) :where(.pcbr) .pcbr-header__inner { flex-wrap: wrap; padding-bottom: var(--pcbr-space-3); }
  html:not(.pcbr-has-js) :where(.pcbr) .pcbr-header__nav { display: flex; flex-basis: 100%; order: 2; }
  .pcbr-nav.is-open { display: flex; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; flex-direction: column; align-items: stretch; background: var(--pcbr-surface); border-bottom: 1px solid var(--pcbr-line); padding: var(--pcbr-space-4); }
  .pcbr-nav.is-open .pcbr-nav__list { flex-direction: column; }
}
@media (min-width: 1024px) {
  .pcbr-header__inner { min-height: 72px; }
  .pcbr-header__logo { width: 135px; } /* owner, 2026-10-05: compact desktop wordmark */
  .pcbr-header__nav, .pcbr-nav { display: flex; }
  .pcbr-header__menu-btn, .pcbr-menu-btn, .pcbr-nav-toggle { display: none; }
  .pcbr-header--sticky-desktop { position: sticky; top: 0; z-index: 50; }
}
/* Family lockup (brand v3 placement proof): from 1200px the endorsement sits to the right of the wordmark after a
   hairline, on two lines ("Part of Punta Cana / Adventures") at caption size on a tight 1.25 line height so the two
   lines read as one unit. Below 1200px the nav plus this lockup can crowd the row, so it stays stacked above. */
@media (min-width: 1200px) {
  .pcbr-header__inner { min-height: 64px; }
  .pcbr-header__brand { flex-direction: row; align-items: center; gap: var(--pcbr-space-3); }
  .pcbr-header__brand .pcbr-header__by {
    margin-left: 0; padding-left: var(--pcbr-space-3); border-left: 1px solid var(--pcbr-line);
    max-width: 11em; white-space: normal; font-size: var(--pcbr-fs-caption); line-height: 1.25; letter-spacing: 0; color: var(--pcbr-ink-2);
  }
}

/* The written-out number needs ~130px; below 1280px the desktop nav would wrap, so it stays an icon there. */
@media (min-width: 1280px) {
  .pcbr-header__phone { padding-inline: var(--pcbr-space-2); }
  .pcbr-header__phone-number { display: inline; }
}

/* Mobile menu sheet: the shared .pcbr-sheet primitive (core bundle) plus its own rows. */
.pcbr-menu-sheet__nav { display: grid; gap: var(--pcbr-space-2); }
.pcbr-menu-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; }
.pcbr-menu-sheet__item, .pcbr-menu-sheet__list li { border-bottom: 1px solid var(--pcbr-line); }
.pcbr-menu-sheet__link, .pcbr-menu-sheet__list li > a {
  display: flex; align-items: center; min-height: var(--pcbr-touch);
  color: var(--pcbr-ink); text-decoration: none; font-weight: var(--pcbr-weight-strong);
}
.pcbr-menu-sheet__link:hover, .pcbr-menu-sheet__list li > a:hover { color: var(--pcbr-accent); }
.pcbr-menu-sheet__actions { display: grid; gap: var(--pcbr-space-3); }
.pcbr-menu-sheet__contact { margin: 0; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-3); }
@media (min-width: 1024px) { .pcbr-menu-sheet { display: none; } }

.pcbr-footer { border-top: 1px solid var(--pcbr-line); margin-top: var(--pcbr-section-gap); padding-block: var(--pcbr-space-7); font-size: var(--pcbr-fs-body); line-height: var(--pcbr-lh-body); color: var(--pcbr-ink-2); }
.pcbr-footer__inner, .pcbr-footer__cols { display: grid; gap: var(--pcbr-space-6); }
.pcbr-footer__col { display: grid; gap: var(--pcbr-space-2); align-content: start; }
.pcbr-footer__col .pcbr-acc__panel { display: grid; }
@media (max-width: 899.98px) {
  .pcbr-has-js .pcbr-footer__col:not(.is-open) .pcbr-acc__panel { display: none; }
}
.pcbr-footer__line { margin: 0; color: var(--pcbr-ink); font-weight: var(--pcbr-weight-strong); }
.pcbr-footer__list, .pcbr-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pcbr-space-2); }
.pcbr-footer__list a, .pcbr-footer__links a { color: inherit; }
.pcbr-footer__links a { display: inline-flex; align-items: center; min-height: var(--pcbr-touch); }
.pcbr-footer__coltitle { margin: 0; font-size: inherit; }
.pcbr-footer__meta { display: grid; gap: var(--pcbr-space-2); }
/* Footer brand block: the compact wordmark (restrained, 144px) with the family endorsement as text. */
.pcbr-footer__brand { display: grid; gap: var(--pcbr-space-1); justify-items: start; }
.pcbr-footer__logo-link { display: block; }
.pcbr-footer__logo { display: block; width: 144px; height: auto; aspect-ratio: 618 / 184; }
.pcbr-footer__by { margin: 0; font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); color: var(--pcbr-ink-2); }
.pcbr-footer__listing, .pcbr-footer__legal { margin: 0; }
@media (min-width: 900px) {
  /* Tracks follow the rendered groups: auto-fit collapses the tracks nothing fills, and 140px keeps the footer
     menu's four columns on one row from 900px with 40px gutters (160px wrapped the fourth beside the brand). */
  .pcbr-footer__cols { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--pcbr-space-8); }
  .pcbr-footer__inner { gap: var(--pcbr-space-6); }
  /* Above 900 the columns are plain lists: the accordion button becomes a heading. */
  .pcbr-footer__col.pcbr-acc { border: 0; }
  .pcbr-footer__col .pcbr-acc__btn { min-height: 0; padding: 0; cursor: default; pointer-events: none; }
  .pcbr-footer__col .pcbr-acc__chevron { display: none; }
  .pcbr-footer__col .pcbr-acc__panel { display: grid; padding: var(--pcbr-space-2) 0 0; }
  /* Desktop lists: 32px rows with no gap (≈32px between links, ≈20px heading to first link); the 44px touch rows
     stay below 900px, where the columns are accordions. */
  .pcbr-footer__links { gap: 0; }
  .pcbr-footer__links a { min-height: 32px; }
}

.pcbr-page { padding-block: var(--pcbr-space-7); }
@media (min-width: 1024px) {
  .pcbr-page { padding-block: var(--pcbr-space-9); }
  .pcbr-footer__inner { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); align-items: start; } /* brand ≈25% */
  .pcbr-footer__meta { grid-column: 1 / -1; border-top: 1px solid var(--pcbr-line); padding-top: var(--pcbr-space-4); }
}
.pcbr-page__title:has(+ .pcbr-page__lead) { margin-bottom: var(--pcbr-space-2); }
.pcbr-page__lead { margin: 0 0 var(--pcbr-space-4); max-width: 65ch; }
.pcbr-page__title { margin: 0 0 var(--pcbr-space-4); font-size: var(--pcbr-fs-h2); line-height: var(--pcbr-lh-h2); font-weight: var(--pcbr-weight-strong); color: var(--pcbr-ink); }
@media (min-width: 1024px) { .pcbr-page__title { font-size: var(--pcbr-fs-h1); line-height: var(--pcbr-lh-h1); } }
.pcbr-prose { max-width: 70ch; line-height: 1.7; display: grid; gap: var(--pcbr-space-4); }

/* Breadcrumbs (components/breadcrumbs.php): one quiet 14px line above the page title, the trail the
   BreadcrumbList describes. The separator is drawn by the item that follows it, centred in the column
   gap and placed inline-start so it mirrors in RTL, and it carries empty alternative text so a screen
   reader hears the list, not the slashes. The current page is the last item and is not a link. */
.pcbr-breadcrumbs { margin: 0 0 var(--pcbr-space-4); min-width: 0; }
.pcbr-breadcrumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcbr-space-1) var(--pcbr-space-4);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); color: var(--pcbr-ink-3);
}
.pcbr-breadcrumbs__item { position: relative; min-width: 0; }
.pcbr-breadcrumbs__item + .pcbr-breadcrumbs__item::before {
  content: "/"; content: "/" / ""; position: absolute; top: 0;
  inset-inline-start: calc(-1 * var(--pcbr-space-4)); width: var(--pcbr-space-4); text-align: center; color: var(--pcbr-line);
}
.pcbr-breadcrumbs__link { color: var(--pcbr-ink-2); text-decoration: underline; text-underline-offset: var(--pcbr-underline-offset); }
.pcbr-breadcrumbs__current { color: var(--pcbr-ink-3); }

/* Homepage lockup and useful footer follow the approved mockup. Other page shells keep their layout. */
.pcbr-home-brand .pcbr-header { position: relative; }
.pcbr-home-brand .pcbr-header__inner { min-height: 92px; }
.pcbr-home-brand .pcbr-header__brand { flex-direction: column; align-items: flex-start; gap: var(--pcbr-space-1); flex-shrink: 0; }
.pcbr-home-brand .pcbr-header__logo { width: 134px; }
.pcbr-home-brand .pcbr-header__brand .pcbr-header__by { border: 0; padding: 0; max-width: none; white-space: normal; font-size: 11px; line-height: 1.4; }
.pcbr-home-brand .pcbr-header__actions > [data-pcbr-contact] { display: none; }
.pcbr-home-brand .pcbr-header__cart { gap: var(--pcbr-space-2); font-weight: var(--pcbr-weight-medium); }
.pcbr-home-brand .pcbr-header__cart-state { right: auto; left: 13px; }
.pcbr-home-brand .pcbr-header__menu li > a { padding-inline: var(--pcbr-space-2); font-weight: var(--pcbr-weight-medium); }
.pcbr-home-brand .pcbr-header__menu-btn { border: 0; }
.pcbr-support-links { display: flex; flex-wrap: wrap; gap: var(--pcbr-space-2) var(--pcbr-space-5); }
.pcbr-support-links a { display: inline-flex; align-items: center; min-height: var(--pcbr-touch); color: var(--pcbr-accent); font-size: var(--pcbr-fs-small); text-decoration: underline; text-underline-offset: var(--pcbr-underline-offset); overflow-wrap: anywhere; }
.pcbr-footer.pcbr-footer--home { margin-top: 0; padding-block: var(--pcbr-space-8) var(--pcbr-space-6); border-top: 0; }
.pcbr-footer-home__top { display: flex; justify-content: space-between; gap: var(--pcbr-space-7); padding-bottom: var(--pcbr-space-7); }
.pcbr-footer-home__help p { margin: 0; font-size: var(--pcbr-fs-small); }
.pcbr-footer-home__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--pcbr-space-6); border-top: 1px solid var(--pcbr-line); padding-top: var(--pcbr-space-4); font-size: var(--pcbr-fs-caption); }
.pcbr-footer-home__bottom nav { display: flex; flex-wrap: wrap; column-gap: var(--pcbr-space-6); }
.pcbr-footer-home__bottom a { display: inline-flex; align-items: center; min-height: var(--pcbr-touch); color: var(--pcbr-ink-2); text-decoration: none; }
.pcbr-footer-home__bottom a:hover { text-decoration: underline; }
@media (max-width: 1199.98px) {
  .pcbr-home-brand .pcbr-header__nav { display: none; }
  .pcbr-home-brand .pcbr-header__menu-btn { display: inline-flex; }
  .pcbr-home-brand .pcbr-menu-sheet { display: none; }
  .pcbr-home-brand .pcbr-menu-sheet.is-open { display: block; }
  html:not(.pcbr-has-js) .pcbr-home-brand .pcbr-header__nav { display: flex; }
  html:not(.pcbr-has-js) .pcbr-home-brand .pcbr-header__inner { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .pcbr-home-brand .pcbr-header__inner { min-height: 72px; gap: var(--pcbr-space-2); }
  .pcbr-home-brand .pcbr-header__logo { width: 111px; }
  .pcbr-home-brand .pcbr-header__brand .pcbr-header__by { font-size: 10px; }
  .pcbr-home-brand .pcbr-header__help { display: none; }
  .pcbr-header__trip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .pcbr-footer.pcbr-footer--home { padding-block: var(--pcbr-space-7) var(--pcbr-space-5); }
  .pcbr-footer-home__top, .pcbr-footer-home__bottom { display: block; }
  .pcbr-footer-home__help { margin-top: var(--pcbr-space-6); }
  .pcbr-footer-home__bottom nav { margin-top: var(--pcbr-space-2); gap: 0 var(--pcbr-space-5); }
  .pcbr-footer--home .pcbr-footer__logo { width: 111px; }
}
@media (max-width: 360px) {
  .pcbr-home-brand .pcbr-header__inner { min-height: 68px; }
}

/* == src/gallery.css == */
/**
 * Gallery: the plain grid used on class pages, the mobile 4:3 snap scroller with its
 * counter, and the desktop 2-up hero (one large 3:2 plus two stacked).
 * The counter is positioned against .pcbr-gallery--hero, a non-scrolling wrapper around the
 * scroller; without that wrapper it would scroll away with the images.
 */
/* Plain gallery grid (class pages). position: relative is inert here and lets the
   hero wrapper below own the counter's containing block. */
.pcbr-gallery { position: relative; min-width: 0; display: grid; gap: var(--pcbr-space-2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pcbr-gallery img, .pcbr-gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--pcbr-r-surface); }
.pcbr-gallery__item { min-width: 0; margin: 0; }

/* Sand placeholder: 4:3 in the scroller, 3:2 in the grid, full-bleed in the desktop 2-up. */
.pcbr-gallery__ph {
  display: flex; align-items: flex-end; aspect-ratio: 3 / 2; padding: var(--pcbr-space-3);
  background: var(--pcbr-surface-3); border-radius: var(--pcbr-r-surface);
  font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); color: var(--pcbr-ink-2);
}
.pcbr-gallery--scroll .pcbr-gallery__ph { aspect-ratio: 4 / 3; }

/* Hero wrapper: does not scroll, so the counter can be positioned against it. */
.pcbr-gallery--hero { position: relative; display: block; min-width: 0; }

/* Mobile hero: 4:3 horizontal snap scroller. */
.pcbr-gallery--scroll {
  display: flex; gap: var(--pcbr-space-2); grid-template-columns: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--pcbr-gutter)); padding-inline: var(--pcbr-gutter);
}
.pcbr-gallery--scroll::-webkit-scrollbar { display: none; }
.pcbr-gallery--scroll > * { flex: 0 0 100%; scroll-snap-align: center; }
.pcbr-gallery--scroll img { aspect-ratio: 4 / 3; }
.pcbr-gallery__counter {
  position: absolute; right: var(--pcbr-space-3); bottom: var(--pcbr-space-3); margin: 0;
  padding: 2px var(--pcbr-space-2); border-radius: var(--pcbr-r-full);
  background: var(--pcbr-overlay); color: var(--pcbr-surface);
  font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); font-weight: var(--pcbr-weight-strong);
}

/* Desktop hero: one large 3:2 plus two stacked, 8px gaps, capped at 460px tall. */
.pcbr-gallery--grid { display: none; }
@media (min-width: 1024px) {
  .pcbr-gallery--scroll, .pcbr-gallery--hero, .pcbr-gallery__counter { display: none; }
  /* A fixed height (not just a cap): with a real photo the 1fr rows would otherwise grow to the image's intrinsic
     height and the cap would clip everything but the top sky; at 460px the rows are 226px each and object-fit
     centres the crop, so square and landscape photos both frame their subject. */
  .pcbr-gallery--grid {
    display: grid; gap: var(--pcbr-space-2); height: 460px; max-height: 460px; overflow: hidden;
    grid-template-columns: 2fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--pcbr-r-surface);
  }
  /* minmax(0, 1fr) + min-height: 0 keep the rows at 226px each; an item's intrinsic image height must not grow them. */
  .pcbr-gallery--grid > * { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
  .pcbr-gallery--grid > *:first-child { grid-row: span 2; }
  .pcbr-gallery--grid > *:nth-child(n + 4) { display: none; } /* the 2-up shows three; the rest live in the mobile scroller */
  /* Absolutely filling the cell makes the crop independent of the image's intrinsic height (square or landscape). */
  .pcbr-gallery--grid img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
  .pcbr-gallery--grid .pcbr-gallery__ph { aspect-ratio: auto; height: 100%; min-height: 300px; border-radius: 0; }
}

/*
 * Experience page media (templates/experience/gallery.php; audit L-05, L-06, M-03, M-04, A-04). Scoped to
 * .pcbr-tour-media so the generic rules above keep the class pages as they are. The scroller stays the
 * phone hero under 600px; the mosaic (one large tile plus two stacked, 8px gaps, 12px outer radius) takes over
 * from 600px at clamp(360px, 40vw, 420px) tall, and from 1200px follows the column at 2:1 (848x424 from 1440,
 * 768x384 at 1280, 688x344 at 1200). Tiles are buttons; the two overlay pills open the same viewer.
 */
.pcbr-tour-media .pcbr-gallery--mosaic { position: relative; display: none; min-width: 0; }
.pcbr-tour-media .pcbr-gallery__tile {
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--pcbr-surface-3); color: inherit; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
}
/* An inset ring on an overlay above the photo: the mosaic clips overflow, so an outer ring would show only in
   the gaps, and a shadow on the button itself would sit under the absolutely positioned image. */
.pcbr-tour-media .pcbr-gallery__tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pcbr-tour-media .pcbr-gallery__tile:focus-visible { outline: none; box-shadow: none; }
.pcbr-tour-media .pcbr-gallery__tile:focus-visible::after { box-shadow: inset 0 0 0 3px var(--pcbr-accent), inset 0 0 0 6px var(--pcbr-accent-soft); }
/* The phone scroller photo is a button too (same opener model as the tile). It keeps the scroller child's geometry
   (flex 0 0 100% and the snap point from the --scroll rule, the 4:3 image and its radius), drops the button chrome,
   and leaves panning to the scroller: a swipe scrolls, only a tap is a click. Focus uses the tile's inset overlay,
   rounded with the photo. */
.pcbr-tour-media .pcbr-gallery__photo {
  position: relative; display: block; padding: 0; border: 0; border-radius: var(--pcbr-r-surface);
  background: transparent; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none;
}
.pcbr-tour-media .pcbr-gallery__photo img { display: block; }
.pcbr-tour-media .pcbr-gallery__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.pcbr-tour-media .pcbr-gallery__photo:focus-visible { outline: none; box-shadow: none; }
.pcbr-tour-media .pcbr-gallery__photo:focus-visible::after { box-shadow: inset 0 0 0 3px var(--pcbr-accent), inset 0 0 0 6px var(--pcbr-accent-soft); }
/* The overlay pills: the phone count button on the scroller, the "View all" button on the mosaic. Both are
   44px-tall pills (not discs: 16px side padding, full radius) in the photo-control overlay, surface-coloured
   caption text at the strong weight. */
.pcbr-tour-media .pcbr-gallery__count,
.pcbr-tour-media .pcbr-gallery__all {
  position: absolute; right: var(--pcbr-space-3); bottom: var(--pcbr-space-3); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--pcbr-touch); height: var(--pcbr-touch); margin: 0; padding: 0 var(--pcbr-space-4);
  border: 0; border-radius: var(--pcbr-r-full); background: var(--pcbr-overlay); color: var(--pcbr-surface);
  font: inherit; font-size: var(--pcbr-fs-caption); line-height: var(--pcbr-lh-caption); font-weight: var(--pcbr-weight-strong);
  font-variant-numeric: tabular-nums; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.pcbr-tour-media .pcbr-gallery__count:hover,
.pcbr-tour-media .pcbr-gallery__all:hover { background: var(--pcbr-overlay-strong); }
@media (min-width: 600px) {
  .pcbr-tour-media .pcbr-gallery--hero { display: none; }
  .pcbr-tour-media .pcbr-gallery--mosaic { display: block; }
  /* The same grid the generic rules open at 1024, here from 600 and sized to the column, never to a fixed cap. */
  .pcbr-tour-media .pcbr-gallery--grid {
    display: grid; gap: var(--pcbr-space-2); height: clamp(360px, 40vw, 420px); max-height: none; overflow: hidden;
    grid-template-columns: 2fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--pcbr-r-surface);
  }
  .pcbr-tour-media .pcbr-gallery--grid > * { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
  .pcbr-tour-media .pcbr-gallery--grid > *:first-child { grid-row: span 2; }
  .pcbr-tour-media .pcbr-gallery--grid > *:nth-child(n + 4) { display: none; } /* three tiles; the rest live in the viewer */
  .pcbr-tour-media .pcbr-gallery--grid > :only-child { grid-column: 1 / -1; }
  .pcbr-tour-media .pcbr-gallery--grid > :nth-child(2):last-child { grid-row: 1 / -1; }
  .pcbr-tour-media .pcbr-gallery--grid img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
  .pcbr-tour-media .pcbr-gallery--grid .pcbr-gallery__ph { aspect-ratio: auto; height: 100%; min-height: 0; border-radius: 0; }
}
@media (min-width: 1200px) {
  .pcbr-tour-media .pcbr-gallery--grid { height: auto; aspect-ratio: 2 / 1; }
}

/*
 * Photo viewer (components/photo-viewer.php): a native <dialog> that fills the viewport and paints its own
 * backdrop (--pcbr-ink at .92, the rgba literal kept as the fallback for engines without color-mix), so a click
 * beside the photo lands on the dialog element and closes it. Three
 * rows: the bar (count, close), the stage (one photo at a time, object-fit contain), the previous/next row.
 * From 900px the controls float at the sides of the stage instead. Phones are edge to edge inside the safe
 * areas. No shadow: the booking card is the page's one shadowed element.
 */
.pcbr-viewer {
  --pcbr-viewer-bar: 56px;
  --pcbr-viewer-nav: 64px;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; color: var(--pcbr-surface); overflow: hidden;
  background: rgba(28, 27, 25, .92);
  background: color-mix(in srgb, var(--pcbr-ink) 92%, transparent);
  padding: var(--pcbr-safe-top) var(--pcbr-safe-right) var(--pcbr-safe-bottom) var(--pcbr-safe-left);
}
.pcbr-viewer:not([open]) { display: none; }
.pcbr-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.pcbr-viewer::backdrop { background: transparent; }
.pcbr-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--pcbr-space-3); min-height: var(--pcbr-viewer-bar); padding: 0 var(--pcbr-space-3) 0 var(--pcbr-space-4); }
.pcbr-viewer__count { margin: 0; font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); font-weight: var(--pcbr-weight-strong); font-variant-numeric: tabular-nums; }
.pcbr-viewer__close, .pcbr-viewer__btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--pcbr-touch); height: var(--pcbr-touch); flex: 0 0 auto;
  margin: 0; padding: 0; border: 1px solid currentColor; border-radius: var(--pcbr-r-full); background: transparent; color: inherit;
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
/* Hover and press: a light tint of the surface colour over the dark backdrop (rgba fallback first). */
.pcbr-viewer__close:hover, .pcbr-viewer__btn:hover { background: rgba(255, 255, 255, .14); background: color-mix(in srgb, var(--pcbr-surface) 14%, transparent); }
.pcbr-viewer__close:active, .pcbr-viewer__btn:active { background: rgba(255, 255, 255, .24); background: color-mix(in srgb, var(--pcbr-surface) 24%, transparent); }
.pcbr-viewer :is(button):focus-visible { outline: 2px solid var(--pcbr-surface); outline-offset: 2px; box-shadow: none; }
.pcbr-viewer__stage { position: relative; min-height: 0; }
.pcbr-viewer__list { list-style: none; margin: 0; padding: 0; height: 100%; min-height: 0; }
.pcbr-viewer__item { display: grid; place-items: center; height: 100%; min-height: 0; padding: 0 var(--pcbr-space-4); }
.pcbr-viewer__item[hidden] { display: none; }
/* A block figure, not a grid: Chrome sizes a replaced grid item to its track, which would stretch the photo. */
.pcbr-viewer__figure { display: block; margin: 0; max-width: 100%; min-height: 0; text-align: center; }
.pcbr-viewer__figure img {
  display: block; width: auto; height: auto; max-width: 100%; margin: 0 auto; object-fit: contain; aspect-ratio: auto; border-radius: 0;
  max-height: calc(100vh - var(--pcbr-viewer-bar) - var(--pcbr-viewer-nav) - var(--pcbr-space-4) - var(--pcbr-safe-top) - var(--pcbr-safe-bottom));
  max-height: calc(100dvh - var(--pcbr-viewer-bar) - var(--pcbr-viewer-nav) - var(--pcbr-space-4) - var(--pcbr-safe-top) - var(--pcbr-safe-bottom));
}
.pcbr-viewer__caption { margin-top: var(--pcbr-space-2); font-size: var(--pcbr-fs-small); line-height: var(--pcbr-lh-small); }
.pcbr-viewer__nav { display: flex; justify-content: center; gap: var(--pcbr-space-4); min-height: var(--pcbr-viewer-nav); padding: var(--pcbr-space-2) var(--pcbr-space-4); }
.pcbr-viewer__btn--prev .pcbr-icon { transform: rotate(90deg); }
.pcbr-viewer__btn--next .pcbr-icon { transform: rotate(-90deg); }
@media (min-width: 900px) {
  .pcbr-viewer { --pcbr-viewer-nav: 0px; }
  .pcbr-viewer__item { padding: var(--pcbr-space-4) var(--pcbr-space-10); }
  .pcbr-viewer__figure img {
    max-height: calc(100vh - var(--pcbr-viewer-bar) - var(--pcbr-space-8) - var(--pcbr-safe-top) - var(--pcbr-safe-bottom));
    max-height: calc(100dvh - var(--pcbr-viewer-bar) - var(--pcbr-space-8) - var(--pcbr-safe-top) - var(--pcbr-safe-bottom));
  }
  .pcbr-viewer__nav { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); justify-content: space-between; min-height: 0; padding: 0 var(--pcbr-space-4); pointer-events: none; }
  .pcbr-viewer__nav .pcbr-viewer__btn { pointer-events: auto; }
}
/* Page lock while the viewer is open (pcbr-gallery.js stores scrollY and puts it back on close). */
html.pcbr-viewer-open { overflow: hidden; }
body.pcbr-viewer-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* Motion is an enhancement: present only for visitors who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .pcbr-viewer[open] { animation: pcbr-viewer-fade 160ms ease-out; }
}
@keyframes pcbr-viewer-fade { from { opacity: 0; } to { opacity: 1; } }