/* PLANTATION BAY — PACKAGES THEME · dist/plantation-packages.css
   GENERATED FILE — do not hand-edit. Edit tokens/*.css or
   handoff/plantation-packages/plantation-packages.css then run
   ./build-dist.sh. Linked only by english/rooms/package/index.php. */

/* ===== TOKENS ===== */
/* ============================================================
   Plantation Bay — Color System
   Direction: "Colonial Plantation Luxury"
   Warm ivory grounds · deep plantation greens · aged brass ·
   burgundy calls-to-action. Palette derived from the live
   rooms + packages redesign; kept intentionally close to the
   colours already in production.
   ============================================================ */

:root {
  /* ── Warm neutrals (backgrounds & cards) ─────────────────── */
  --pb-ivory:        #F8F3EB;  /* page ground (rooms) */
  --pb-cream:        #FAF8F4;  /* page ground (packages) */
  --pb-cream-card:   #FFFEF9;  /* room detail card fill */
  --pb-ivory-dark:   #EDE8DC;  /* muted ivory / dividers block */
  --pb-stone:        #F0ECE4;  /* image placeholder / inset fill */
  --pb-white:        #FFFFFF;

  /* ── Plantation greens ───────────────────────────────────── */
  --pb-forest:       #1A3628;  /* deepest — full-bleed room panels */
  --pb-deep:         #1E3C38;  /* package titles / deep headings */
  --pb-teal-deep:    #1E4A40;  /* "Seniors, Golf & Solo" group */
  --pb-teal:         #3D6B64;  /* section headings / links */
  --pb-sage:         #4A7060;  /* quiet UI labels */
  --pb-sage-mid:     #4A8A7E;  /* group mid-tone accents */

  /* ── Aged brass / gold (metallic accent) ─────────────────── */
  --pb-brass:        #B8882E;  /* rooms gold — rules, prices, eyebrows */
  --pb-gold:         #B8965A;  /* packages gold — bullets, hairlines */
  --pb-gold-light:   #D4B07A;  /* light brass — hover borders */

  /* ── Burgundy / crimson (calls-to-action) ────────────────── */
  --pb-crimson:      #C0392B;  /* primary Book button */
  --pb-crimson-dark: #96281B;  /* Book button hover */
  --pb-burgundy:     #5C2430;  /* "All-Inclusive Wellness" group */

  /* ── Slate (cool accent · group 3) ───────────────────────── */
  --pb-slate:        #2A3D5C;  /* "Graceful Aging & Spa" group */

  /* ── Ink & text ──────────────────────────────────────────── */
  --pb-ink:          #2A2016;  /* darkest warm text */
  --pb-text:         #2A2420;  /* body copy */
  --pb-muted:        #6B6259;  /* secondary copy */
  --pb-muted-warm:   #6B5B47;  /* captions on ivory */
  --pb-on-dark:      #FFFEF9;  /* text on forest panels */
  --pb-on-dark-soft: rgba(255, 254, 249, 0.72); /* body on forest */

  /* ── Hairlines & borders ─────────────────────────────────── */
  --pb-border-gold:        rgba(184, 150, 90, 0.18);
  --pb-border-gold-strong: rgba(184, 136, 46, 0.35);
  --pb-border-hairline:    rgba(184, 136, 46, 0.15);
  --pb-border-crimson:     rgba(192, 57, 43, 0.18);

  /* ── Rate-row tints ──────────────────────────────────────── */
  --pb-rate-nonpeak: #FCF8EF;  /* non-peak row */
  --pb-rate-peak:    #F1F7FB;  /* peak-period row (cool tint) */

  /* ── Collection accents (package groups) ─────────────────── */
  --pb-group-1:       #1E4A40;  /* Seniors, Golf & Solo */
  --pb-group-1-light: #E8F2F0;
  --pb-group-2:       #5C2430;  /* All-Inclusive Wellness */
  --pb-group-2-light: #F5EAEC;
  --pb-group-3:       #2A3D5C;  /* Graceful Aging & Spa */
  --pb-group-3-light: #EAECF4;
  --pb-group-1-tint:  #F4FAF9;  /* group 1 section ground */
  --pb-group-2-tint:  #FDF5F6;  /* group 2 section ground */
  --pb-group-3-tint:  #F4F6FB;  /* group 3 section ground */
  --pb-group-2-mid:   #A05060;  /* group 2 rule/dot mid-tone */
  --pb-group-3-mid:   #5A708A;  /* group 3 rule/dot mid-tone */

  /* ============================================================
     EXISTING SITE CHROME (header / footer) — preserve as-is
     A cooler, brighter legacy palette kept for the persistent
     navigation so redesigned pages drop in without reskinning
     the chrome.
     ============================================================ */
  --pb-brand-green:   #42971F;  /* green brush-script tagline */
  --pb-nav-bg:        #1E2D3D;  /* main nav bar (slate) */
  --pb-nav-selected:  #679966;  /* selected nav item */
  --pb-nav-hover:     #8ACD89;  /* nav hover */
  --pb-gold-solid:    #F2BB2C;  /* header gold top-border / mega rule */
  --pb-cta-red:       #C82020;  /* header "I'm Ready to Book!" */
  --pb-footer-menu:   #1D2C26;  /* footer nav strip */
  --pb-subnav:        #6E9C6B;  /* footer / mobile sub-nav */
  --pb-subnav-hover:  #0B7B6C;  /* sub-nav hover */
  --pb-copyright:     #004D4D;  /* copyright bar */
  --pb-legacy-teal:   #008080;  /* legacy teal (jQuery Mobile) */

  /* ── Semantic aliases ────────────────────────────────────── */
  --pb-surface-page:       var(--pb-ivory);
  --pb-surface-alt:        var(--pb-cream);
  --pb-surface-card:       var(--pb-cream-card);
  --pb-surface-dark:       var(--pb-forest);
  --pb-text-heading:       var(--pb-deep);
  --pb-text-body:          var(--pb-text);
  --pb-text-secondary:     var(--pb-muted);
  --pb-accent:             var(--pb-brass);
  --pb-accent-rule:        var(--pb-gold);
  --pb-cta:                var(--pb-crimson);
  --pb-cta-hover:          var(--pb-crimson-dark);
  --pb-link:               var(--pb-teal);
}
/* ============================================================
   Plantation Bay — Typography System
   ONE sans-serif family across every role. Hierarchy comes from
   weight, size, letter-spacing and colour — never from a second
   typeface. Stack: Segoe UI · Roboto · Helvetica · Arial.
   ============================================================ */

:root {
  /* ── Family (single sans voice — all roles map to it) ────── */
  --pb-font-sans:    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pb-font-display: var(--pb-font-sans);
  --pb-font-body:    var(--pb-font-sans);
  --pb-font-script:  var(--pb-font-sans);
  --pb-font-chrome:  var(--pb-font-sans);

  /* ── Fluid type scale (role-based) ───────────────────────── */
  --pb-text-hero:    clamp(2rem, 5vw, 3.8rem);        /* page hero title */
  --pb-text-h1:      clamp(1.6rem, 5vw, 2.5rem);      /* section main title */
  --pb-text-h2:      clamp(1.35rem, 3.5vw, 2.2rem);   /* room / group name */
  --pb-text-h3:      clamp(1.3rem, 3vw, 1.8rem);      /* package title */
  --pb-text-lead:    clamp(1.15rem, 2vw, 1.4rem);     /* italic subtitle */
  --pb-text-body:    clamp(0.9375rem, 1.5vw, 1.0625rem);
  --pb-text-price:   1.6rem;                          /* rate figure */
  --pb-text-eyebrow: 0.68rem;                         /* gold micro-labels */
  --pb-text-nav:     14px;                            /* main-nav links */
  --pb-text-fine:    0.8rem;                          /* fine print */

  /* ── Weights ─────────────────────────────────────────────── */
  --pb-weight-light:    300;
  --pb-weight-regular:  400;
  --pb-weight-medium:   500;
  --pb-weight-semibold: 600;
  --pb-weight-bold:     700;

  /* ── Letter-spacing ──────────────────────────────────────── */
  --pb-ls-display: 0.14em;   /* airy uppercase hero */
  --pb-ls-heading: 0.09em;   /* group / section titles */
  --pb-ls-eyebrow: 0.22em;   /* gold micro-labels */
  --pb-ls-nav:     0.05em;
  --pb-ls-body:    0.01em;

  /* ── Line-height ─────────────────────────────────────────── */
  --pb-lh-tight:   1.2;   /* @kind other */
  --pb-lh-snug:    1.4;   /* @kind other */
  --pb-lh-normal:  1.7;   /* @kind other */
  --pb-lh-relaxed: 1.9;   /* @kind other */

  /* ── Measure (max line length) ───────────────────────────── */
  --pb-measure:      68ch;
  --pb-measure-wide: 70ch;
}
/* ============================================================
   Plantation Bay — Spacing System
   8px base unit (from the site's global.css) extended with the
   larger section rhythms used by the redesigned landing pages.
   ============================================================ */

:root {
  /* ── Base scale (8px unit) ───────────────────────────────── */
  --pb-space-xs:   4px;
  --pb-space-sm:   8px;
  --pb-space-md:   12px;
  --pb-space-base: 16px;
  --pb-space-lg:   20px;
  --pb-space-xl:   24px;
  --pb-space-2xl:  32px;
  --pb-space-3xl:  40px;
  --pb-space-4xl:  48px;
  --pb-space-5xl:  64px;   /* card-to-card gap */
  --pb-space-6xl:  80px;   /* package group gap */

  /* ── Layout rails ────────────────────────────────────────── */
  --pb-container:       1200px;  /* header / footer chrome width */
  --pb-container-rooms: 1320px;  /* rooms content rail */
  --pb-container-pkg:   100%;    /* packages content rail (full width since 2026-07-23) */
  --pb-container-faq:   960px;   /* FAQ rail (rooms page keeps the old pkg width) */
  --pb-measure-col:     44ch;    /* single readable column */

  /* ── Gutters ─────────────────────────────────────────────── */
  --pb-gutter-mobile:  16px;
  --pb-gutter-desktop: 24px;
  --pb-pad-card:       36px 40px;  /* package card body padding */
  --pb-pad-panel:      2.5rem;     /* room detail panel padding */

  /* ── Fixed chrome offsets ────────────────────────────────── */
  --pb-header-h:        108px;  /* brandbar height (desktop) */
  --pb-header-total:    148px;  /* full fixed chrome height: brandbar + nav bar */
  --pb-scroll-offset:   115px;  /* anchor scroll clearance (desktop) */
  --pb-scroll-offset-m: 170px;  /* anchor scroll clearance (mobile) */

  /* ── Hit target ──────────────────────────────────────────── */
  --pb-tap-min: 44px;

  /* ── Decorative placeholder ─────────────────────────────── */
  --pb-placeholder-h: 180px;   /* imageless card media block */
  --pb-stripe: 10px;           /* placeholder stripe width */
}
/* ============================================================
   Plantation Bay — Effects System
   Radii, shadows, borders, motion. The redesign favours small
   radii (2–4px), soft warm-grey card shadows, thin brass
   hairlines, and gentle 0.25–0.7s eases. No heavy glows.
   ============================================================ */

:root {
  /* ── Corner radii (restrained) ───────────────────────────── */
  --pb-radius-sm:   2px;   /* buttons, tags */
  --pb-radius:      4px;   /* cards */
  --pb-radius-lg:   10px;  /* language dropdown (chrome) */
  --pb-radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --pb-shadow-card:   0 2px 24px rgba(30, 30, 20, 0.07), 0 1px 4px rgba(30, 30, 20, 0.04);
  --pb-shadow-hover:  0 8px 40px rgba(30, 30, 20, 0.12), 0 2px 8px rgba(30, 30, 20, 0.06);
  --pb-shadow-image:  0 4px 16px rgba(28, 54, 40, 0.12);   /* floor-plan thumb */
  --pb-shadow-cta:    0 4px 24px rgba(192, 57, 43, 0.30);
  --pb-shadow-cta-hv: 0 8px 32px rgba(150, 40, 27, 0.45);
  --pb-shadow-chrome: 0 2px 18px rgba(0, 0, 0, 0.35);      /* fixed header */

  /* ── Border widths ───────────────────────────────────────── */
  --pb-hairline: 1px;
  --pb-rule:     2px;   /* accent underlines, gold top-rule */
  --pb-focus-offset: 2px;   /* focus-ring offset from the element edge */
  --pb-accent-bar: 3px;   /* package-card top accent bar */

  /* ── Decorative rules ────────────────────────────────────── */
  --pb-rule-len-sm:  36px;   /* under a heading */
  --pb-rule-len-md:  52px;   /* under hero title */
  --pb-rule-len-lg:  120px;  /* between package groups */

  /* ── Motion ──────────────────────────────────────────────── */
  --pb-ease:         cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --pb-dur-fast:     0.2s;   /* @kind other */
  --pb-dur:          0.25s;  /* @kind other */
  --pb-dur-slow:     0.35s;  /* @kind other */
  --pb-dur-reveal:   0.7s;   /* @kind other */ /* scroll-reveal fade-up */
  --pb-reveal-shift: 28px;   /* scroll-reveal translate distance */
}

/* ===== PACKAGES THEME ===== */
/* ============================================================
   PLANTATION BAY — PACKAGES THEME (branch DS-Packages)
   Own artifact: dist/plantation-packages.css. Linked ONLY by
   english/rooms/package/index.php. Shares tokens with the DS,
   shares zero selectors with the rooms trust layer.
   Site-wide dist/plantation-ds.css styles a few legacy pkg-*
   classes; the new markup does not use them, so no overrides
   are needed. .pkg-book-btn and .pkg-group-footer are now
   styled here too (relocated from the legacy sheet, see the
   "Relocated from legacy packages.css" section below; the
   .pkg-group-footer rules left with the injected footers) —
   the legacy packages.css remains loaded on the live page for
   now and still defines the --pbay- and --ff- vars those
   copied rules reference, until it is retired.
   ============================================================ */

:root {
  /* header submenu colors (matched live from header_v3) */
  --pb-subnav-green: #679966;
  --pb-subnav-teal: #006666;
  --pb-subnav-hover: #199280; /* .pb-nav__drop-link:hover */
  /* brass reads muddy on the submenu green — panel marks use pale gold */
  --pb-gold-pale: #EFD9A7;
  /* standfirst (price line) — a step above body copy so the price
     sentence reads as the card's second voice, not a paragraph */
  --pbp-text-standfirst: clamp(1.25rem, 2.4vw, 1.5rem);
}

/* ── Page rail & hero ── */
.roomswithpackage.content-wrapper {
  background: var(--pb-cream);
  /* jQM's .ui-page-theme-a paints text-shadow: 0 1px 0 #f3f3f3 on the
     whole page and it inherits into everything; reset it for our scope */
  text-shadow: none;
  /* full-bleed canvas like the rooms page (owner 2026-07-23) — the
     legacy 960px rail moves to the inner sections, which already
     carry their own --pb-container-pkg widths */
  max-width: none;
}
/* (the jQM content shell's own 1200px cap stays — owner 2026-07-23:
   content sits in the 1200px rail; only the sticky row spans wider) */
/* the legacy 48px lead-in above the first collection is dead air now
   that the tiles are hidden — the group's own top padding is enough */
#pkgRoomsWithPackage { padding-top: 0; }
.pbp-hero {
  text-align: center;
  max-width: var(--pb-container-pkg);
  margin: 0 auto;
  padding: var(--pb-space-3xl) var(--pb-gutter-desktop) 0;
}
.pbp-hero-title {
  font-family: var(--pb-font-display);
  font-size: var(--pb-text-h1);
  font-weight: var(--pb-weight-bold);
  letter-spacing: var(--pb-ls-display);
  text-transform: uppercase;
  color: var(--pb-deep);
  margin: 0 0 var(--pb-space-md);
}
.pbp-hero-rule {
  width: var(--pb-rule-len-md);
  height: var(--pb-rule);
  background: var(--pb-brass);
  margin: 0 auto var(--pb-space-2xl);
}

/* ── Collection index nav (keeps legacy .pkg-index-link for the
      page's smooth-scroll handler; visuals come from pbp-*) ──
   Hidden 2026-07-23 (owner trial): the always-visible capsule
   dropdown is the page's overview now, like the rooms page.
   Markup stays — restore display:flex to bring the tiles back. */
.pbp-index {
  display: none;
  gap: var(--pb-space-md);
  max-width: var(--pb-container-pkg);
  margin: 0 auto var(--pb-space-4xl);
}
.pbp-index a.pkg-index-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pb-space-sm);
  padding: var(--pb-space-lg) var(--pb-space-lg);
  text-decoration: none;
  background: var(--pb-cream-card, #FFFEF9);
  border: var(--pb-hairline) solid var(--pb-border-gold-strong);
  border-radius: var(--pb-radius-sm);
  transition: background var(--pb-dur, 0.25s) ease;
  min-height: var(--pb-tap-min);
}
.pbp-index a.pkg-index-link:hover,
.pbp-index a.pkg-index-link:focus-visible {
  background: var(--pb-deep);
}
.pbp-index a.pkg-index-link:hover .pbp-index-label,
.pbp-index a.pkg-index-link:focus-visible .pbp-index-label,
.pbp-index a.pkg-index-link:hover .pbp-index-count,
.pbp-index a.pkg-index-link:focus-visible .pbp-index-count {
  color: var(--pb-cream-card, #FFFEF9);
}
.pbp-index a.pkg-index-link:focus-visible {
  outline: var(--pb-rule) solid var(--pb-deep);
  outline-offset: var(--pb-focus-offset, 2px);
}
.pbp-index-dot { width: var(--pb-space-sm); height: var(--pb-space-sm); border-radius: var(--pb-radius-pill); background: var(--pb-brass); }
.pbp-index-label {
  font-size: var(--pb-text-eyebrow);
  font-weight: var(--pb-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  color: var(--pb-deep);
}
.pbp-index-count { font-size: var(--pb-text-fine); font-weight: var(--pb-weight-medium); color: var(--pb-muted); }

/* ── Sticky package index: label + capsule + dropdown ─────────── */
.pbp-nav-row {
  position: -webkit-sticky;
  position: sticky;
  top: 160px; /* corrected per frame by JS (--pbp-nav-clearance source) */
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  /* opaque band, rooms-page treatment: same tone as the page canvas
     (owner 2026-07-23 — the transparent row let the page title show
     through behind the pinned label; the hairline beneath was removed
     the same day: it read as a stray line floating over the canvas) */
  background: var(--pb-cream);
}
.pbp-nav-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pb-brass);
}
.pbp-nav-row .pbp-nav-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: auto;     /* jQM's button.ui-btn{width:100%} is (0,1,1) — outgun it */
  flex: 0 0 auto;
  text-shadow: none; /* jQM sets it directly on .ui-btn, inheritance reset is not enough */
  background: var(--pb-cream-card, #FFFEF9);
  border: 1px solid var(--pb-border-gold-strong);
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-deep);
  padding: 0.5rem 1rem;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.pbp-nav-bar:focus { outline: none; box-shadow: none; }
.pbp-nav-bar:focus-visible { outline: 2px solid var(--pb-deep); outline-offset: 2px; }
.pbp-nav-bar-num { color: var(--pb-brass); font-weight: 700; }
.pbp-nav-bar-chev { flex: 0 0 auto; transition: transform 0.2s ease; }
.pbp-nav-row.is-open .pbp-nav-bar-chev { transform: rotate(180deg); }
.pbp-nav-pills { display: none; }
/* Open panel: rooms-page parity — capped centered green panel, one
   column per collection, pastel list cards with name + pitch. */
.pbp-nav-row.is-open .pbp-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1200px; /* the UI content width */
  top: 100%;
  background: var(--pb-subnav-green);
  border-bottom: 2px solid var(--pb-brass);
  box-shadow: 0 18px 40px rgba(26, 54, 40, 0.35);
  padding: 1.5rem 2rem 3rem;
  /* the row is only visible while pinned, so always clamp to the fold */
  max-height: calc(100vh - var(--pbp-nav-clearance, 240px) - 8px);
  overflow-y: auto;
}
.pbp-nav-row.is-open .pbp-pills-group {
  flex: 1 1 340px;
  min-width: 300px;
  max-width: 420px;
  padding: 0 1.25rem;
}
.pbp-nav-row.is-open .pbp-pills-group + .pbp-pills-group {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.pbp-nav-pills .pbp-pills-caption {
  display: block;
  text-align: center;
  color: var(--pb-gold-pale, #EFD9A7);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0.35rem 0 1.1rem;
}
.pbp-nav-pills .pbp-pills-caption::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--pb-gold-pale, #EFD9A7);
  opacity: 0.65;
  margin: 0.5rem auto 0;
}
.pbp-nav-pills a {
  text-shadow: none;
  /* pastel list card: name line, pitch beneath, arrow cue */
  color: var(--pb-text);
  background: var(--pb-ivory, #F8F3EB);
  position: relative;
  display: block;
  border: none;
  border-radius: 2px;
  padding: 0.6rem 2.2rem 0.7rem 0.85rem;
  margin-bottom: 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  text-align: left;
  line-height: 1.5;
  transition: background 0.2s ease;
}
.pbp-nav-row.is-open .pbp-pills-group a:last-child { margin-bottom: 0; }
.pbp-nav-pills a .pbp-pill-name {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--pb-deep);
}
.pbp-nav-pills a .pbp-pill-sub {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--pb-sage);
}
/* Click affordance: the DS arrow glyph on the card's right edge */
.pbp-nav-pills a::after {
  content: '\2192';
  position: absolute;
  right: 0.85rem;
  bottom: 0.6rem;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--pb-gold);
  opacity: 0.85;
  transition: transform 0.2s ease;
}
/* Per-package pastels (anchor-keyed, order-proof) */
.pbp-nav-pills a[href="#sinful-seniors-package"]   { background: #E9F4F1; }
.pbp-nav-pills a[href="#saintly-seniors-package"]  { background: #F7F0E2; }
.pbp-nav-pills a[href="#mountain-golf-package"]    { background: #EAF1F8; }
.pbp-nav-pills a[href="#room-only-package"]        { background: #F8F4DE; }
.pbp-nav-pills a[href="#all-inclusive-package"]    { background: #F9ECEC; }
.pbp-nav-pills a[href="#weight-management-package"]{ background: #FAEFE3; }
.pbp-nav-pills a[href="#graceful-aging-package"]   { background: #ECF6E8; }
.pbp-nav-pills a[href="#sleep-protocol-package"]   { background: #F1EEF8; }
.pbp-nav-pills a[href="#graceful-module1-package"] { background: #EFF1EE; }
.pbp-nav-pills a[href="#graceful-module2-package"] { background: #F8EFD9; }
.pbp-nav-pills a[href="#graceful-module3-package"] { background: #EAF6F6; }
.pbp-nav-pills a[href="#spa-sampler-package"]      { background: #F3F1E6; }
.pbp-nav-pills a[href="#stress-relief-package"]    { background: #EDF3EC; }
/* Hover mirrors the header submenu's hover; current keeps selected teal */
.pbp-nav-pills a:hover {
  background: var(--pb-subnav-hover, #199280);
}
.pbp-nav-pills a.pbp-pill-active {
  background: var(--pb-subnav-teal);
}
.pbp-nav-pills a:hover .pbp-pill-name,
.pbp-nav-pills a.pbp-pill-active .pbp-pill-name,
.pbp-nav-pills a:hover::after,
.pbp-nav-pills a.pbp-pill-active::after {
  color: #ffffff;
}
.pbp-nav-pills a:hover .pbp-pill-sub,
.pbp-nav-pills a.pbp-pill-active .pbp-pill-sub {
  color: rgba(255, 255, 255, 0.88);
}
.pbp-nav-pills a:hover::after { transform: translateX(3px); }
.pbp-nav-pills a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (max-width: 1099px) {
  /* single column: collections stack with clear air between them */
  .pbp-nav-row.is-open .pbp-pills-group { flex-basis: 100%; max-width: none; }
  .pbp-nav-row.is-open .pbp-pills-group + .pbp-pills-group {
    border-left: none;
    margin-top: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pbp-nav-pills a,
  .pbp-nav-pills a::after { transition: none; }
  .pbp-nav-pills a:hover::after { transform: none; }
}
.pbp-stack > div[id] { scroll-margin-top: var(--pbp-nav-clearance, 200px); }
@media (max-width: 899px) {
  .pbp-nav-row { padding: 0.5rem var(--pb-gutter-mobile); }
  .pbp-nav-title { display: none; }
  .pbp-nav-pills a { white-space: normal; text-align: center; }
}

/* ── Collection groups ── */
.pbp-group {
  padding: var(--pb-space-5xl) var(--pb-gutter-desktop);
  margin: 0 0 var(--pb-space-2xl);
}
.pbp-group + .pbp-group { margin-top: 4rem; }
.pbp-group + .pbp-group::before {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: var(--pb-border-gold-strong);
  margin: 0 auto 2.5rem;
}
.pbp-stack { max-width: var(--pb-container-pkg); margin: 0 auto; }
.pbp-stack > div[id] { margin-bottom: var(--pb-space-5xl); }
.pbp-stack > div[id]:last-child { margin-bottom: 0; }

/* ── Package card ── */
.pbp-card {
  background: var(--pb-white);
  border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-card);
  border: var(--pb-hairline) solid var(--pb-border-gold-strong);
  padding: var(--pb-pad-card);
  /* legacy packages.css centers the whole .packageHeader section; the card
     anatomy is left-aligned (brass underline, gold left rules, dot bullets) */
  text-align: left;
}
.pbp-card-columns { display: flex; gap: var(--pb-space-2xl); align-items: flex-start; }
.pbp-card-body { flex: 1 1 58%; min-width: 0; }
/* Media column top-aligns with the pitch: photo and subtitle start on
   the same line under the title (the card's one shared alignment line) */
.pbp-card-media { flex: 1 1 38%; }
.pbp-card-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pb-radius-sm);
  border: var(--pb-hairline) solid var(--pb-border-gold-strong);
  box-shadow: var(--pb-shadow-image);
}
.pbp-card-placeholder {
  min-height: var(--pb-placeholder-h);
  border-radius: var(--pb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: var(--pb-rule) solid var(--pb-brass);
  background: repeating-linear-gradient(
    -45deg,
    var(--pb-stone),
    var(--pb-stone) var(--pb-stripe),
    var(--pb-ivory-dark) var(--pb-stripe),
    var(--pb-ivory-dark) calc(var(--pb-stripe) * 2)
  );
}
.pbp-card-placeholder .pbp-placeholder-label {
  font-size: 0.62rem;
  font-weight: var(--pb-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pb-muted);
  text-align: center;
  padding: 0 var(--pb-space-base);
}
/* Card paragraphs carry the .pbp-card prefix: global.css's phone media
   block (.ui-content p { font-size: 14px; margin: 0 15px }) is (0,1,1)
   and silently beats bare single-class selectors on mobile. */
.pbp-card .pbp-card-group {
  font-family: var(--pb-font-display);
  font-style: italic;
  font-size: var(--pb-text-fine);
  letter-spacing: 0.06em;
  color: var(--pb-muted);
  text-align: right;
  /* hug the card's top edge, breathe before the title */
  margin: calc(-1 * var(--pb-space-md)) 0 var(--pb-space-lg);
}
.pbp-title {
  font-family: var(--pb-font-display);
  font-size: var(--pb-text-h3);
  font-weight: var(--pb-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pb-deep);
  margin: 0 0 var(--pb-space-md);
}
.pbp-title::after {
  content: '';
  display: block;
  width: var(--pb-rule-len-sm);
  height: var(--pb-rule);
  background: var(--pb-brass);
  margin: 0.6rem 0 0;
}
.pbp-card .pbp-subtitle {
  font-style: normal;
  font-size: var(--pbp-text-standfirst, var(--pb-text-lead));
  color: var(--pb-sage);
  line-height: 1.6;
  max-width: 55ch;
  border-left: var(--pb-accent-bar) solid var(--pb-brass);
  padding-left: var(--pb-space-base);
  margin: 0 0 var(--pb-space-lg);
}
.pbp-copy p {
  font-size: var(--pb-text-body);
  line-height: 1.75;
  max-width: 70ch;
  margin: 0 0 var(--pb-space-base);
}
/* Generous air above the eyebrow: the pitch (subtitle + copy) and the
   spec list read as two distinct beats of the card */
.pbp-includes-title {
  font-family: var(--pb-font-body);
  font-size: var(--pb-text-eyebrow);
  font-weight: var(--pb-weight-bold);
  letter-spacing: var(--pb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--pb-brass);
  margin: var(--pb-space-3xl) 0 var(--pb-space-md);
}
.pbp-includes { list-style: none; margin: 0 0 var(--pb-space-lg); padding: 0; max-width: 70ch; }
.pbp-includes li {
  position: relative;
  padding-left: var(--pb-space-lg);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 var(--pb-space-md); /* zero the sides: global.css li margins */
}
.pbp-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: var(--pb-space-xs);
  height: var(--pb-space-xs);
  border-radius: var(--pb-radius-pill);
  background: var(--pb-gold);
}
.pbp-card .pbp-guarantee {
  font-size: var(--pb-text-fine);
  font-style: italic;
  color: var(--pb-muted);
  background: var(--pb-cream-card);
  border-left: var(--pb-accent-bar) solid var(--pb-brass);
  padding: var(--pb-space-md) var(--pb-space-base);
  margin: var(--pb-space-md) 0 0;
  max-width: 70ch;
}
.pbp-card .pbp-detail-link {
  display: block;
  text-align: center;
  margin: var(--pb-space-base) 0 0;
  font-size: var(--pb-text-fine);
  letter-spacing: var(--pb-ls-body);
}
.pbp-detail-link a {
  color: var(--pb-deep);
  font-weight: var(--pb-weight-medium);
  text-decoration: none;
}
.pbp-detail-link a:hover,
.pbp-detail-link a:focus-visible {
  text-decoration: underline;
}
/* booking button lives in the media column, under the photo/placeholder */
.pbp-card-media .pkg-book-btn-wrap {
  padding: 0;
  margin-top: var(--pb-space-base);
}
.pbp-card-media .pkg-book-btn {
  width: 100% !important;   /* !important: the relocated legacy block pins */
  min-width: 0 !important;  /* width/min/max with !important at >=768px    */
  max-width: none !important;
}

/* ── Relocated from legacy packages.css (kept identical; legacy sheet pending retirement) ── */
.pkg-book-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 32px 40px 40px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pkg-book-btn-wrap { padding: 24px 36px 36px; }
}
.pkg-book-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: #C0392B !important;
  color: #f5ede8 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 2px !important;
  padding: 1.1rem 2rem !important;
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  white-space: normal !important;
  text-shadow: none !important;
  box-shadow: 0 4px 24px rgba(192, 57, 43, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 1.3 !important;
}
.pkg-book-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.pkg-book-btn:hover::after { transform: translateX(100%); }
.pkg-book-btn:hover {
  background: #96281B !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(150, 40, 27, 0.45) !important;
  transform: translateY(-2px) !important;
}
.pkg-book-btn:active {
  transform: translateY(0) !important;
}
.pkg-book-btn-arrow {
  font-size: 1rem;
  transition: transform 0.25s ease;
  line-height: 1;
  flex-shrink: 0;
}
.pkg-book-btn:hover .pkg-book-btn-arrow {
  transform: translateX(4px);
}
@media (min-width: 768px) {
  .pkg-book-btn {
    width: auto !important;
    min-width: 320px !important;
    max-width: 480px !important;
  }
}
@media (max-width: 767px) {
  .pkg-book-btn-wrap {
    padding: 20px 20px 28px;
  }
  .pkg-book-btn {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 24px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-book-btn,
  .pkg-book-btn::after { transition: none !important; }
  .pkg-book-btn:hover { transform: none !important; }
}

/* ── FAQ (native details/summary; own names, no lux-* overlap) ── */
.pkg-faq {
  max-width: var(--pb-container-pkg);
  margin: var(--pb-space-5xl) auto 0;
  padding: 0 var(--pb-gutter-desktop);
}
.pkg-faq-title {
  font-family: var(--pb-font-display);
  font-size: var(--pb-text-h2);
  font-weight: var(--pb-weight-semibold);
  letter-spacing: var(--pb-ls-heading);
  text-transform: uppercase;
  text-align: center;
  color: var(--pb-deep);
  margin: 0 0 var(--pb-space-xl);
}
.pkg-faq-item { border-top: var(--pb-hairline) solid var(--pb-border-gold-strong); }
.pkg-faq-item:last-of-type { border-bottom: var(--pb-hairline) solid var(--pb-border-gold-strong); }
.pkg-faq-item summary.pkg-faq-q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-space-base);
  padding: var(--pb-space-lg) var(--pb-space-sm);
  font-family: var(--pb-font-body);
  font-size: var(--pb-text-lead);
  font-weight: var(--pb-weight-medium);
  color: var(--pb-deep);
  min-height: var(--pb-tap-min);
}
.pkg-faq-item summary.pkg-faq-q::-webkit-details-marker { display: none; }
.pkg-faq-item summary.pkg-faq-q::after {
  content: "\2192";
  color: var(--pb-brass);
  transition: transform var(--pb-dur, 0.25s) ease;
}
.pkg-faq-item[open] summary.pkg-faq-q::after { transform: rotate(90deg); }
.pkg-faq-item summary.pkg-faq-q:focus-visible {
  outline: var(--pb-rule) solid var(--pb-deep);
  outline-offset: var(--pb-focus-offset, 2px);
}
.pkg-faq-a { padding: 0 var(--pb-space-sm) var(--pb-space-lg); color: var(--pb-text); text-align: left; }
.pkg-faq-a p { max-width: 70ch; font-size: var(--pb-text-body); line-height: 1.75; margin: 0; }

/* ── Desktop card: negative space as a grouping system ──────────────
   Two top-aligned columns sharing ONE alignment line (the tops of the
   subtitle and the photo). Inside each column, space encodes belonging:

     pitch group    subtitle + copy, tight (their own margins)
     chapter break  one generous 64px pause before THIS PACKAGE INCLUDES
     spec group     eyebrow tied to its bullets at 12px
     media group    photo + book button coupled at 16px

   Cross-column pixel-locking (photo-to-copy, eyebrow-to-button) was
   tried and removed: coupling the columns let one column's height leak
   residue voids into the other. Residue is emptiness left over after
   content runs out; negative space is shaped — here by the shared top
   line and by the column's natural rag at the bottom right, which the
   eye reads like ragged-right text. */
@media (min-width: 900px) {
  .pbp-includes-title { margin-top: var(--pb-space-5xl); }
}

/* ── Responsive ── */
@media (max-width: 899px) {
  .pbp-card-columns { flex-direction: column; }
  .pbp-card-media { width: 100%; }
  /* the page main already carries the 16px mobile gutter — don't double
     it, and slim the card's interior so text isn't ~72px from the glass */
  .pbp-group { padding-left: 0; padding-right: 0; }
  .pbp-card { padding: var(--pb-space-xl) var(--pb-space-lg); }
}
@media (max-width: 600px) {
  .pbp-index { flex-direction: column; }
  /* one-line collection name; the count wraps below only when it must */
  .pbp-index a.pkg-index-link { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
  .pbp-index-label { text-align: left; white-space: nowrap; }
  .pbp-index-count { white-space: nowrap; }
}