/* ==========================================================================
   MyCabin Header Site Part — frontend.css
   Clean-room build from source-design/Header-original.zip (styles.css §00-05).
   Every selector scoped under .pp-mycabin-header (Page Pack Spec §5).
   Single breakpoint, min-width: 900px, matching source exactly.
   ========================================================================== */

.pp-mycabin-header {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-beige:        #FBF6F3;
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;
  --pp-scrim:        var(--pp-ink);

  --pp-surface:  var(--pp-beige);
  --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-ink-28:   color-mix(in oklab, var(--pp-ink) 28%, transparent);
  --pp-ink-72:   color-mix(in oklab, var(--pp-ink) 72%, transparent);
  --pp-bone-80:  color-mix(in oklab, var(--pp-bone) 80%, transparent);
  --pp-bone-60:  color-mix(in oklab, var(--pp-bone) 60%, transparent);
  --pp-bone-line: color-mix(in oklab, var(--pp-bone) 22%, transparent);

  --pp-maxw:   1280px;
  --pp-gutter: clamp(18px, 4vw, 40px);
  --pp-hdr-h:  clamp(58px, 7vw, 74px);

  --pp-r-pill: 999px;
  --pp-r-md:   9px;
  --pp-r-sm:   8px;

  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-fast: .18s;
  --pp-t-med:  .25s;
  --pp-t-slow: .35s;

  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
}
.pp-mycabin-header, .pp-mycabin-header *, .pp-mycabin-header ::before, .pp-mycabin-header ::after {
  box-sizing: border-box;
}
.pp-mycabin-header a { color: var(--pp-ink); text-decoration: none !important; }
.pp-mycabin-header a:hover { color: var(--pp-accent); text-decoration: none !important; }
.pp-mycabin-header button { font: inherit; color: inherit; }
.pp-mycabin-header :focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.pp-mycabin-header h1, .pp-mycabin-header p { margin: 0; }

/* Real WordPress typography-cascade fix (Master Workflow §44) — the active
   theme's own generated global-styles declare a direct font-family rule on
   .wp-block-button__link/.wp-element-button, which beats an inherited value
   regardless of specificity. */
.pp-mycabin-header .wp-block-button__link,
.pp-mycabin-header .wp-element-button {
  font-family: inherit;
}

/* Skip link */
.pp-mycabin-header .pp-skip { position: absolute; left: -9999px; top: 0; z-index: 300; }
.pp-mycabin-header .pp-skip:focus {
  left: 12px;
  top: 12px;
  padding: 12px 18px;
  background: var(--pp-ink);
  color: var(--pp-bone);
  border-radius: var(--pp-r-pill);
}

/* ==========================================================================
   WordPress Flow-margin defense
   ========================================================================== */
.pp-mycabin-header .pp-header__inner > *,
.pp-mycabin-header .pp-nav__item > *,
.pp-mycabin-header .pp-nav__dropdown > *,
.pp-mycabin-header .pp-nav__dropdown-card > *,
.pp-mycabin-header .pp-mobnav__inner > *,
.pp-mycabin-header .pp-mobnav__top > *,
.pp-mycabin-header .pp-mobnav__list > *,
.pp-mycabin-header .pp-mobnav__group > *,
.pp-mycabin-header .pp-mobnav__panel > *,
.pp-mycabin-header .pp-mobnav__foot > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.pp-mycabin-header > * { margin-top: 0 !important; }


/* ==========================================================================
   HEADER + DESKTOP NAVIGATION
   ========================================================================== */
.pp-mycabin-header .pp-header {
  position: fixed;
  /* WordPress real, live admin-bar custom property (Master Workflow §42) —
     0px fallback when logged out, matching source exactly for every real
     visitor; established fix already proven on this exact Site Part's own
     v1.1.2 round. */
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0; right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--pp-t-slow) ease, border-color var(--pp-t-slow) ease, backdrop-filter var(--pp-t-slow) ease;
}
.pp-mycabin-header .pp-header.pp-is-solid {
  background: color-mix(in oklab, var(--pp-bone) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--pp-ink-hair);
}
.pp-mycabin-header .pp-header__inner {
  position: relative;
  max-width: var(--pp-maxw);
  margin: 0 auto !important;
  padding-inline: var(--pp-gutter);
  height: var(--pp-hdr-h);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 36px);
}
.pp-mycabin-header .pp-header__logo { display: flex; align-items: center; flex: 1 1 0; justify-content: flex-start; }
.pp-mycabin-header .pp-header__logo svg { height: clamp(28px, 4vw, 38px); width: auto; display: block; color: var(--pp-ink); }

/* Nav capsule — desktop only, revealed below in the 900px layer */
.pp-mycabin-header .pp-nav {
  display: none;
  position: relative;
  align-items: center;
  gap: clamp(2px, 0.6vw, 8px);
  font-size: 14.5px;
  white-space: nowrap;
  padding: 6px;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-bone) 20%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--pp-t-slow) ease;
}
.pp-mycabin-header .pp-header.pp-is-solid .pp-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The sliding pill — one real element, positioned via transform/width by
   frontend.js. Decorative only (aria-hidden), core/html per Page Pack Spec
   §6 — no editorial content of its own. */
.pp-mycabin-header .pp-nav__pill {
  position: absolute;
  top: 6px; bottom: 6px; left: 0;
  width: 0;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-ink) 8%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  margin: 0 !important;
  transition: transform var(--pp-t-med) var(--pp-ease), width var(--pp-t-med) var(--pp-ease), opacity var(--pp-t-fast) ease;
}
.pp-mycabin-header .pp-nav__pill.pp-is-active { opacity: 1; }

/* .pp-nav__link is the shared look for every top-level entry — both a
   plain link and a dropdown trigger (a real core/button in both cases;
   triggers use a placeholder href="#", frontend.js prevents navigation and
   toggles the dropdown instead, matching the established cookie-settings-
   button pattern already used elsewhere in this project).

   Every box-model property below is !important. Root cause of this
   round's reported defect (confirmed against the real @wordpress/block-
   library source, not guessed): core/button's OWN block-library default
   for `.wp-block-button__link` is entirely either non-important or
   wrapped in `:where()` (zero specificity) — `padding: calc(.667em + 2px)
   calc(1.333em + 2px)`, `border-radius: 9999px` — which this rule's own
   3-class selector should already out-specify on paper. In practice each
   nav item was still rendering as its own tall, rounded, individually-
   backgrounded block — the signature of the active WordPress THEME's own
   generated global-styles "Buttons" element preset, which real themes
   apply to `.wp-element-button` (the cross-block class every button-like
   element carries, this <a> included — see its own class="wp-block-
   button__link wp-element-button") and which this project has already
   confirmed, on a different property, is not reliably beatable by
   ordinary specificity alone (Master Workflow §44's font-family lesson).
   !important is the correct, deliberate tool here — not a default reflex
   — because the exact competing rule's own selector/specificity can't be
   inspected without real WordPress access this round. */
/* v2.0.2 — `all: revert !important` on both the wrapper (.wp-block-button)
   and the link (.wp-block-button__link), applied BEFORE every other
   declaration in each rule. This round's own v2.0.1 fix (individual
   !important overrides on padding/border-radius/height/background) was
   confirmed, on real WordPress staging, still not enough — the visible
   rectangles and misalignment persisted. Adding !important to a growing
   list of individually-guessed properties is exactly the wrong pattern to
   keep repeating without real access to inspect the actual winning rule
   (an installed theme's own generated global-styles CSS, not part of this
   repository, not inspectable this round either): the next leaked
   property would just need another round. `all: revert` resets EVERY
   CSS property on the element back to what it would be with NO author-
   origin CSS at all (both WordPress core's own block-library CSS and the
   theme's own global-styles are author-origin) — i.e. plain user-agent
   defaults — before this rule then explicitly re-declares, with
   !important, literally everything the nav needs. This is exhaustive by
   construction: it cannot be beaten by a leaked property this rule
   doesn't yet know about, because nothing survives to be beaten. */
/* .pp-mycabin-header.pp-mycabin-header (the root class repeated) is a
   deliberate specificity boost — matches exactly the same element as a
   single .pp-mycabin-header (repeating a class in a selector doesn't
   change what it matches), but counts twice toward specificity. Combined
   with !important and `all: revert` above, this is the strongest
   defensive posture available in plain CSS short of an inline style or
   ID selector, for a competing rule whose own exact specificity can't be
   inspected without real WordPress access. */
.pp-mycabin-header.pp-mycabin-header .pp-nav__link,
.pp-mycabin-header.pp-mycabin-header .pp-nav__link .wp-block-button__link {
  all: revert !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav__link {
  display: inline-flex !important;
  margin: 0 !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav__link .wp-block-button__link {
  display: inline-flex !important;
  position: relative !important;
  z-index: 1 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: inherit !important;
  text-align: left !important;
  text-decoration: none !important;
  /* var(--pp-ink), not `inherit` — this rule is now more specific/
     important than the general `.pp-mycabin-header a{color:var(--pp-ink)}`
     rule it previously (and only accidentally) relied on for its own
     default-state color; explicit here so the default state is correct
     on its own merits. The three :has()-based state rules below (on-hero/
     how-hero/is-solid) still correctly override this with their own
     higher-specificity !important declarations. */
  color: var(--pp-ink) !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color var(--pp-t-slow) ease !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav__link .wp-block-button__link:hover,
.pp-mycabin-header.pp-mycabin-header .pp-nav__link .wp-block-button__link:focus-visible { color: var(--pp-ink) !important; }
.pp-mycabin-header.pp-mycabin-header .pp-nav__link .wp-block-button__link[aria-current="page"] { font-weight: 500 !important; }

/* Chevron — decorative CSS-only indicator (structural UI chrome, not
   independent editorial content, per Page Pack Spec §6 / this project's
   established icon-architecture discipline), a small border-drawn
   triangle rather than an embedded asset. */
.pp-mycabin-header .pp-nav__trigger .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--pp-t-med) var(--pp-ease);
}
.pp-mycabin-header .pp-nav__item:hover .pp-nav__trigger .wp-block-button__link::after,
.pp-mycabin-header .pp-nav__item:focus-within .pp-nav__trigger .wp-block-button__link::after {
  transform: rotate(225deg);
  margin-top: 3px;
}
/* v2.0.3 — Resources/Visit MyCabin (the only two items wrapped in this
   extra .pp-nav__item group, needed so the dropdown panel has somewhere
   to anchor) were reported sitting visibly lower than the five plain nav
   links on real WordPress staging. Root cause: .pp-nav__item is a plain
   block-level element, not itself a flex container — so its only in-flow
   child, .pp-nav__link (display:inline-flex), was participating in
   .pp-nav__item's own ANONYMOUS INLINE FORMATTING CONTEXT instead of
   being a flex item, subject to ordinary inline baseline/line-height
   alignment there. Plain links never had this problem because they sit
   as DIRECT children of .pp-nav (a real flex container), which
   blockifies them and centers them via align-items:center with no inline
   line-box involved at all. Making .pp-nav__item itself a flex container
   (with the same align-items:center as its own parent .pp-nav) makes
   .pp-nav__link a genuine flex item here too, centered identically to a
   plain link — not an inline box subject to baseline quirks. */
.pp-mycabin-header.pp-mycabin-header .pp-nav__item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* .pp-nav__dropdown is an invisible hit-box, not the visible panel — it
   starts flush against the trigger (top:100%, no margin) so the pointer
   never leaves .pp-nav__item's own descendant tree on the way down to the
   card. The visual gap lives as padding-top INSIDE this box, not margin
   outside it — a margin gap here is exactly what lets the pointer fall out
   of :hover before reaching the card. See source styles.css's own comment
   above .nav__dropdown and README.md. */
.pp-mycabin-header .pp-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 10px;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pp-t-med) ease;
}
.pp-mycabin-header .pp-nav__item:hover .pp-nav__dropdown,
.pp-mycabin-header .pp-nav__item:focus-within .pp-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
}
.pp-mycabin-header .pp-nav__dropdown-card {
  min-width: 200px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: var(--pp-bone);
  border-radius: var(--pp-r-md);
  box-shadow: 0 12px 32px color-mix(in oklab, var(--pp-ink) 14%, transparent);
  transform: translateY(-4px);
  transition: transform var(--pp-t-med) var(--pp-ease);
}
.pp-mycabin-header .pp-nav__item:hover .pp-nav__dropdown-card,
.pp-mycabin-header .pp-nav__item:focus-within .pp-nav__dropdown-card { transform: translateY(0); }
.pp-mycabin-header .pp-nav__sub-link { margin: 0 !important; }
.pp-mycabin-header .pp-nav__sub-link .wp-block-button__link {
  display: block;
  width: 100%;
  height: auto;
  padding: 9px 14px;
  border-radius: var(--pp-r-sm);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: var(--pp-ink-72);
  background: none !important;
}
.pp-mycabin-header .pp-nav__sub-link .wp-block-button__link:hover,
.pp-mycabin-header .pp-nav__sub-link .wp-block-button__link:focus-visible { background: var(--pp-tint); color: var(--pp-ink); }
.pp-mycabin-header .pp-nav__sub-link .wp-block-button__link[aria-current="page"] { color: var(--pp-ink); font-weight: 500; }

.pp-mycabin-header .pp-header__cta { margin: 0 0 0 auto !important; }
.pp-mycabin-header .pp-header__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 38px;
  padding: 0 clamp(14px, 2.4vw, 21px);
  border-radius: var(--pp-r-pill);
  background: var(--pp-accent-soft);
  color: var(--pp-ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--pp-t-slow) ease, color var(--pp-t-slow) ease;
}
.pp-mycabin-header .pp-header__cta .wp-block-button__link:hover { background: var(--pp-accent); color: var(--pp-ink); }

.pp-mycabin-header .pp-burger {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--pp-ink-28);
  background: transparent;
  border-radius: var(--pp-r-pill);
  cursor: pointer;
  transition: background var(--pp-t-med);
}
.pp-mycabin-header .pp-burger:hover { background: var(--pp-ink-hair); }
.pp-mycabin-header .pp-burger span { display: block; width: 17px; height: 1.6px; background: var(--pp-ink); }


/* ==========================================================================
   HEADER STATE ARCHITECTURE — default / on-hero / how-hero
   --------------------------------------------------------------------------
   Source drives this with a modifier class on the header's own element
   (header--on-hero, header--how-hero), chosen per-page. This Site Part's
   markup is identical on every page (Site Parts render the same saved
   content everywhere), so the state can't live on the header's own class
   the way source does it — it's derived instead from each page's own,
   already-unique Page Pack root class (already rendered on every page's
   own content root, and already the CSS scope every Page Pack uses) via
   the CSS :has() relational selector: "if <body> contains this page's own
   root class anywhere, style the header accordingly." Zero PHP/importer/
   Page-Pack changes required — see the handoff doc's "Header state
   assignment mechanism" section for the full reasoning and the page-by-
   page audit that produced this list.
   ========================================================================== */
.pp-mycabin-header .pp-nav__pill { }
body:has(.pp-about-clean) .pp-header .pp-nav__pill,
body:has(.pp-contact-clean) .pp-header .pp-nav__pill,
body:has(.pp-ready-houses) .pp-header .pp-nav__pill,
body:has(.pp-how-it-works-clean) .pp-header .pp-nav__pill {
  background: color-mix(in oklab, var(--pp-bone) 22%, transparent);
}
body:has(.pp-about-clean) .pp-header .pp-header__logo svg,
body:has(.pp-contact-clean) .pp-header .pp-header__logo svg,
body:has(.pp-ready-houses) .pp-header .pp-header__logo svg,
body:has(.pp-how-it-works-clean) .pp-header .pp-header__logo svg {
  color: var(--pp-bone);
}
body:has(.pp-about-clean) .pp-header .pp-burger,
body:has(.pp-contact-clean) .pp-header .pp-burger,
body:has(.pp-ready-houses) .pp-header .pp-burger,
body:has(.pp-how-it-works-clean) .pp-header .pp-burger {
  border-color: var(--pp-bone-line);
}
body:has(.pp-about-clean) .pp-header .pp-burger span,
body:has(.pp-contact-clean) .pp-header .pp-burger span,
body:has(.pp-ready-houses) .pp-header .pp-burger span,
body:has(.pp-how-it-works-clean) .pp-header .pp-burger span {
  background: var(--pp-bone);
}
/* Nav links: every on-hero page (incl. how-hero) starts light... !important
   on both rules below (and the is-solid one further down) — required so
   they correctly win against this file's own .pp-nav__link .wp-block-
   button__link base rule above, which is itself !important as of v2.0.2's
   `all: revert` fix; without matching !important here, that base rule's
   own `color: inherit !important` would otherwise always win regardless
   of these rules' own higher specificity (a real regression caught and
   fixed within this same round, before shipping). */
body:has(.pp-about-clean) .pp-header .pp-nav__link .wp-block-button__link,
body:has(.pp-contact-clean) .pp-header .pp-nav__link .wp-block-button__link,
body:has(.pp-ready-houses) .pp-header .pp-nav__link .wp-block-button__link,
body:has(.pp-how-it-works-clean) .pp-header .pp-nav__link .wp-block-button__link {
  color: var(--pp-bone) !important;
}
/* ...except how-hero's own narrow exception: only the nav LINKS (not logo/
   burger) revert to ink, since the nav capsule sits over a much brighter
   sky-only slice of that one page's short/wide hero. Written after the
   general on-hero rule above so it correctly wins at equal specificity. */
body:has(.pp-how-it-works-clean) .pp-header .pp-nav__link .wp-block-button__link {
  color: var(--pp-ink) !important;
}

/* The one rule that always wins, regardless of state: past 40px of scroll
   the header is solid and everything reverts to ink. */
body:has(.pp-about-clean) .pp-header.pp-is-solid .pp-header__logo svg,
body:has(.pp-contact-clean) .pp-header.pp-is-solid .pp-header__logo svg,
body:has(.pp-ready-houses) .pp-header.pp-is-solid .pp-header__logo svg,
body:has(.pp-how-it-works-clean) .pp-header.pp-is-solid .pp-header__logo svg {
  color: var(--pp-ink);
}
body:has(.pp-about-clean) .pp-header.pp-is-solid .pp-burger,
body:has(.pp-contact-clean) .pp-header.pp-is-solid .pp-burger,
body:has(.pp-ready-houses) .pp-header.pp-is-solid .pp-burger,
body:has(.pp-how-it-works-clean) .pp-header.pp-is-solid .pp-burger {
  border-color: var(--pp-ink-28);
}
body:has(.pp-about-clean) .pp-header.pp-is-solid .pp-burger span,
body:has(.pp-contact-clean) .pp-header.pp-is-solid .pp-burger span,
body:has(.pp-ready-houses) .pp-header.pp-is-solid .pp-burger span,
body:has(.pp-how-it-works-clean) .pp-header.pp-is-solid .pp-burger span {
  background: var(--pp-ink);
}
body:has(.pp-about-clean) .pp-header.pp-is-solid .pp-nav__link .wp-block-button__link,
body:has(.pp-contact-clean) .pp-header.pp-is-solid .pp-nav__link .wp-block-button__link,
body:has(.pp-ready-houses) .pp-header.pp-is-solid .pp-nav__link .wp-block-button__link,
body:has(.pp-how-it-works-clean) .pp-header.pp-is-solid .pp-nav__link .wp-block-button__link {
  color: var(--pp-ink) !important;
}
body:has(.pp-about-clean) .pp-header.pp-is-solid .pp-nav__pill,
body:has(.pp-contact-clean) .pp-header.pp-is-solid .pp-nav__pill,
body:has(.pp-ready-houses) .pp-header.pp-is-solid .pp-nav__pill,
body:has(.pp-how-it-works-clean) .pp-header.pp-is-solid .pp-nav__pill {
  background: color-mix(in oklab, var(--pp-ink) 8%, transparent);
}


/* ==========================================================================
   MOBILE NAV OVERLAY
   ========================================================================== */
.pp-mycabin-header .pp-mobnav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--pp-ink);
  color: var(--pp-bone);
  overflow-y: auto;
  display: none;
  animation: pp-header-rise .28s ease both;
}
.pp-mycabin-header .pp-mobnav.pp-is-open { display: block; }
@keyframes pp-header-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pp-mycabin-header .pp-mobnav__inner {
  max-width: var(--pp-maxw);
  margin: 0 auto !important;
  padding: var(--pp-gutter);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.pp-mycabin-header .pp-mobnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  margin-bottom: 34px !important;
}
.pp-mycabin-header .pp-mobnav__logo { height: 30px; width: auto; display: block; color: var(--pp-bone); }
.pp-mycabin-header .pp-mobnav__close {
  width: 38px; height: 38px;
  border-radius: var(--pp-r-pill);
  border: 1px solid var(--pp-bone-line);
  background: transparent;
  color: var(--pp-bone);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pp-mycabin-header .pp-mobnav__list { display: flex; flex-direction: column; }
.pp-mycabin-header .pp-mobnav__row { margin: 0 !important; }
.pp-mycabin-header .pp-mobnav__row .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--pp-bone-line);
  border-radius: 0;
  background: none !important;
  color: var(--pp-bone);
  font: inherit;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
}
.pp-mycabin-header .pp-mobnav__list > .pp-mobnav__row:first-child .wp-block-button__link,
.pp-mycabin-header .pp-mobnav__group:first-child .pp-mobnav__row .wp-block-button__link {
  border-top: 0;
}
.pp-mycabin-header .pp-mobnav__row .wp-block-button__link:hover { color: var(--pp-accent-soft); }
.pp-mycabin-header .pp-mobnav__row .wp-block-button__link[aria-current="page"] { font-weight: 500; }

/* Chevron — same CSS-drawn triangle as the desktop dropdown trigger. */
.pp-mycabin-header .pp-mobnav__trigger .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--pp-bone-60);
  border-bottom: 1.6px solid var(--pp-bone-60);
  transform: rotate(45deg);
  transition: transform var(--pp-t-med) var(--pp-ease);
}
.pp-mycabin-header .pp-mobnav__row[aria-expanded="true"] .wp-block-button__link::after { transform: rotate(225deg); }

.pp-mycabin-header .pp-mobnav__panel {
  display: none;
  flex-direction: column;
  padding: 2px 0 10px 14px;
}
.pp-mycabin-header .pp-mobnav__panel.pp-is-open { display: flex; }
.pp-mycabin-header .pp-mobnav__sub-row { margin: 0 !important; }
.pp-mycabin-header .pp-mobnav__sub-row .wp-block-button__link {
  display: block;
  width: 100%;
  height: auto;
  padding: 9px 0;
  background: none !important;
  border: 0;
  text-align: left;
  font-size: 15.5px;
  font-weight: 300;
  color: var(--pp-bone-80);
}
.pp-mycabin-header .pp-mobnav__sub-row .wp-block-button__link:hover { color: var(--pp-accent-soft); }
.pp-mycabin-header .pp-mobnav__sub-row .wp-block-button__link[aria-current="page"] { color: var(--pp-bone); font-weight: 500; }

.pp-mycabin-header .pp-mobnav__foot {
  margin-top: auto !important;
  padding-top: 36px;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}
.pp-mycabin-header .pp-mobnav__foot .wp-block-button__link {
  height: 45px;
  font-size: 15px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pp-r-pill);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-mycabin-header .pp-btn-accent .wp-block-button__link { background: var(--pp-accent-soft); color: var(--pp-ink); border: 0; }
.pp-mycabin-header .pp-btn-accent .wp-block-button__link:hover { background: var(--pp-accent); color: var(--pp-ink); }
.pp-mycabin-header .pp-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--pp-bone);
  border: 1px solid var(--pp-bone-line);
}
.pp-mycabin-header .pp-btn-outline .wp-block-button__link:hover { background: color-mix(in oklab, var(--pp-bone) 10%, transparent); color: var(--pp-bone); }


/* ==========================================================================
   DESKTOP LAYER (min-width: 900px)
   ========================================================================== */
@media (min-width: 900px) {
  .pp-mycabin-header .pp-nav {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .pp-mycabin-header .pp-burger { display: none; }
}