/* ==========================================================================
   MyCabin Header Site Part — frontend.css  (v2.1.3 — 2026 mega-menu redesign)
   Built from the designer's Navigation-update handoff (index.html /
   mobile-menu.html / styles.css §01, §05, §07, §08, §15 / script.js §01, §03,
   §03b). Every value below is copied from that source stylesheet; only the
   selectors are renamed (.nav-mega__x -> .pp-nav-mega__x, etc.) and scoped
   under .pp-mycabin-header (Page Pack Spec §5).
   Single breakpoint: min-width 900px, exactly as source.

   00  Tokens, base, WordPress defences, shared icons
   01  Header bar (logo, nav capsule, pill, CTA, burger)
   02  Mega menus (desktop panels)
   03  Header states (on-hero / how-hero / home-hero / product CTA)
   04  Mobile navigation (two-layer drill-down)
   05  Desktop layer (min-width: 900px)
   ========================================================================== */

/* ==========================================================================
   00  TOKENS, BASE, WORDPRESS DEFENCES
   ========================================================================== */
.pp-mycabin-header {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-paper:        var(--pp-bone);
  --pp-beige:        #FBF6F3;
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;

  --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-ink-56:   color-mix(in oklab, var(--pp-ink) 65%, 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;

  /* The designer's inline SVG icons that appear on many elements (chevron,
     arrow) drawn as CSS masks of the SAME source paths, so the core/button
     text stays editable (RichText cannot hold an inline <svg>). */
  --pp-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pp-i-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* v2.1.3 — the arrow that slides/fades in on row hover, as a plain background image of the SAME source
     path/stroke/size (ink at 65% alpha = --pp-ink-56). It used to be a CSS mask over a coloured box; a masked
     element that animates opacity+transform needs its own render surface, which is torn down and rebuilt on
     every hover in/out — the only place in the About/Resources rows where hover creates such a surface. */
  --pp-i-arrow-56: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%2327272C' stroke-opacity='.65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  color: var(--pp-ink);
  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-wrap: pretty;
}
.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 img { max-width: 100%; }
.pp-mycabin-header :focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.pp-mycabin-header h2, .pp-mycabin-header p, .pp-mycabin-header figure { margin: 0; }
.pp-mycabin-header :is(h2, p) { line-height: normal; }

/* 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 defence — every block group here is a plain layout
   container; none may pick up the theme's block-gap margins. Components that
   want a margin re-declare it (with !important) further down. */
.pp-mycabin-header .wp-block-group > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.pp-mycabin-header > * { margin-top: 0 !important; }


/* --------------------------------------------------------------------------
   Every clickable label in this Site Part is a real, editable core/button.
   The active WordPress theme's own generated "Buttons" preset (and core's
   block-library CSS) target `.wp-block-button__link` / `.wp-element-button`
   and cannot be reliably out-specified property-by-property (see manifest
   notes, v2.0.1–v2.0.3). So, exactly as the proven v2.0.2 fix: one generic
   reset — `all: revert !important` on the wrapper and the link — and every
   component below then re-declares, with !important, everything it needs.
   `.pp-mycabin-header.pp-mycabin-header` (root class doubled) is a deliberate
   specificity boost. All declarations inside the BTN regions of this file are
   !important by construction.
   -------------------------------------------------------------------------- */
.pp-mycabin-header.pp-mycabin-header .wp-block-button {
  all: revert !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pp-mycabin-header.pp-mycabin-header .wp-block-button .wp-block-button__link {
  all: revert !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: normal !important;
  letter-spacing: inherit !important;
  text-align: left !important;
  text-decoration: none !important;
  color: inherit !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}



/* ==========================================================================
   01  HEADER BAR  (source §07)
   ========================================================================== */
.pp-mycabin-header .pp-header {
  position: fixed;
  /* WordPress' own live admin-bar height (0px for every logged-out visitor) so
     the fixed bar sits under the admin bar for logged-in editors. */
  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; /* anchor for the centred nav capsule — see the 900px layer */
  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 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-paper) 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 decorative element positioned by frontend.js */
.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; }


/* Nav link / mega-menu trigger (source .nav__link / .nav__trigger) */
.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 {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  color: var(--pp-ink) !important;
  white-space: nowrap !important;
  transition: color var(--pp-t-slow) ease !important;
}
/* v2.1.5: the label keeps its CURRENT colour on hover / keyboard focus / while its
   mega panel is open. This used to be a hover + focus-visible rule that forced
   `color: var(--pp-ink) !important` (specificity 0,5,0), which out-ranked the
   header-state rules below (0,4,1 -- e.g. the white label over a hero) and turned the
   label dark the moment the pointer was on it. There is nothing to set here: the
   default colour (ink; paper on a hero; ink again once solid) is already owned by the
   state rules, which do not depend on :hover, so removing the override makes hover =
   default in EVERY header state without hard-coding a colour. The hover pill (the
   sliding .pp-nav__pill), the chevron (currentColor) and the focus outline are
   untouched. */
.pp-mycabin-header.pp-mycabin-header .pp-nav__link .wp-block-button__link[aria-current="page"] {
  font-weight: 500 !important;
}


/* Chevron (source .nav__chevron: 10px svg, rotates 180° while the item is hovered/focused) */
.pp-mycabin-header .pp-nav__trigger .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--pp-i-chevron) center / contain no-repeat;
          mask: var(--pp-i-chevron) center / contain no-repeat;
  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(180deg);
}
/* .pp-nav__item wraps a trigger (needed so the trigger has a positioned
   wrapper); made a flex container like its parent so the link is a genuine
   flex item, centred exactly like a plain link (v2.0.3 lesson). */
.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;
}


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

/* 44px tap target on touch devices (source: .header__cta::after) */
@media (hover: none) and (pointer: coarse) {
  .pp-mycabin-header .pp-header__cta .wp-block-button__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* Burger (source .burger) */
.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: 0;
  background: transparent;
  cursor: pointer;
  margin: 0 -11px 0 0;
  padding: 0;
}
.pp-mycabin-header .pp-burger span {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--pp-ink);
}


/* ==========================================================================
   02  MEGA MENUS  (source §07 .nav__dropdown--mega / .nav-mega*)
   Each panel is a DOM sibling of the <nav> capsule, not nested in its trigger
   — deliberate, see source README: .pp-nav is position:absolute + transform
   (a transformed ancestor would become the containing block of a
   position:fixed descendant). Open/close is therefore driven by frontend.js
   (.pp-is-open), not by :hover.
   ========================================================================== */
.pp-mycabin-header .pp-nav__dropdown--mega {
  display: none; /* < 900px: the desktop panels do not exist visually (mobile has its own menu) */
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--pp-hdr-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden; /* closed panels are not tabbable / not read by screen readers (source leaves them focusable) */
  pointer-events: none;
  transition: opacity var(--pp-t-med) ease, visibility 0s linear var(--pp-t-med);
}
/* While the header is solid it has backdrop-filter, which makes IT the
   containing block of this fixed panel — so the admin-bar offset above must
   not be applied twice. */
.pp-mycabin-header .pp-header.pp-is-solid .pp-nav__dropdown--mega {
  top: calc(var(--pp-hdr-h) + 12px);
}
.pp-mycabin-header .pp-nav__dropdown--mega.pp-is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

.pp-mycabin-header .pp-nav-mega {
  width: min(1280px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: 262px 1fr 270px;
  gap: 16px;
  background: var(--pp-bone);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 36px);
  box-shadow: 0 24px 64px color-mix(in oklab, var(--pp-ink) 18%, transparent);
}
.pp-mycabin-header .pp-nav-mega__intro { display: flex; flex-direction: column; }
.pp-mycabin-header .pp-nav-mega__title {
  font-size: clamp(30px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: normal;
  color: var(--pp-ink);
}
.pp-mycabin-header .pp-nav-mega__desc {
  margin-top: 14px !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pp-ink-72);
  font-weight: 300;
}


/* "Learn more" link-arrow (source .nav-mega__more.link-arrow). Font-size: source's
   .nav-mega__more says 15px but the later .link-arrow rule (16px) wins the cascade,
   so 16px is what the designer's page actually renders. The link is a flex item of
   the intro column in source (blockified, full width) — display:flex reproduces that. */
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__more {
  margin-top: auto !important;
  padding-top: 24px !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__more .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  color: var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__more .wp-block-button__link:hover {
  color: var(--pp-accent) !important;
}

.pp-mycabin-header .pp-nav-mega__more .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--pp-i-arrow) center / contain no-repeat;
          mask: var(--pp-i-arrow) center / contain no-repeat;
}

/* --- Homes: model list ---------------------------------------------------- */
.pp-mycabin-header .pp-nav-mega__models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 16px;
}
.pp-mycabin-header .pp-nav-mega__model {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 22px 7px 8px;
  border-radius: var(--pp-r-md);
  transition: background var(--pp-t-med) ease;
}
.pp-mycabin-header .pp-nav-mega__model:hover,
.pp-mycabin-header .pp-nav-mega__model:has(.wp-block-button__link:focus-visible) { background: var(--pp-surface); }
.pp-mycabin-header .pp-nav-mega__model-media {
  flex: none;
  width: 64px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-mycabin-header .pp-nav-mega__model-media .wp-block-image,
.pp-mycabin-header .pp-mobnav__mrow-media .wp-block-image {
  width: 100%;
  height: 100%;
  margin: 0;
}
.pp-mycabin-header .pp-nav-mega__model-media img,
.pp-mycabin-header .pp-mobnav__mrow-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Each house render carries a different amount of transparent canvas margin
   in its own file; source corrects per file (desktop AND mobile share these). */
.pp-mycabin-header .pp-nav-img--l100 img { transform: translateY(1.3px) scale(1.14); }
.pp-mycabin-header .pp-nav-img--l80  img { transform: translateY(1.1px) scale(1.07); }
.pp-mycabin-header .pp-nav-img--m47  img { transform: translate(2.5px, -.5px) scale(1.04); }
.pp-mycabin-header .pp-nav-img--m40  img { transform: translate(2px, -.4px) scale(1.01); }
.pp-mycabin-header .pp-nav-img--m25  img { transform: translate(4px, .2px) scale(.95); }
.pp-mycabin-header .pp-nav-img--s30  img { transform: translate(-2px, -1.7px) scale(.79); }
.pp-mycabin-header .pp-nav-mega__model-text { flex: 1 1 auto; min-width: 0; }
.pp-mycabin-header .pp-nav-mega__model-specs {
  display: block;
  margin-top: 2px !important;
  font-size: 12.5px;
  color: var(--pp-ink-56);
}

/* Whole-row click target: the model name is the real link, stretched over the row */
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__model-name .wp-block-button__link {
  display: block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__model:hover .pp-nav-mega__model-name .wp-block-button__link,
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__model:has(.wp-block-button__link:focus-visible) .pp-nav-mega__model-name .wp-block-button__link {
  color: var(--pp-accent) !important;
}

.pp-mycabin-header .pp-nav-mega__model-name .wp-block-button__link::after,
.pp-mycabin-header .pp-nav-mega__link-text .wp-block-button__link::after,
.pp-mycabin-header .pp-nav-mega__promo-title .wp-block-button__link::after,
.pp-mycabin-header .pp-mobnav__mrow-name .wp-block-button__link::after,
.pp-mycabin-header .pp-mobnav__irow-text .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.pp-mycabin-header .pp-nav-mega__model:has(.wp-block-button__link:focus-visible),
.pp-mycabin-header .pp-nav-mega__link-item:has(.wp-block-button__link:focus-visible),
.pp-mycabin-header .pp-mobnav__mrow:has(.wp-block-button__link:focus-visible),
.pp-mycabin-header .pp-mobnav__irow:has(.wp-block-button__link:focus-visible) {
  outline: 2px solid var(--pp-accent);
  outline-offset: 1px;
}
.pp-mycabin-header .pp-nav-mega__model .wp-block-button__link:focus-visible,
.pp-mycabin-header .pp-nav-mega__link-item .wp-block-button__link:focus-visible,
.pp-mycabin-header .pp-mobnav__mrow .wp-block-button__link:focus-visible,
.pp-mycabin-header .pp-mobnav__irow .wp-block-button__link:focus-visible { outline: none; }
/* row arrow (source .nav-mega__model-arrow) */
.pp-mycabin-header .pp-nav-mega__model::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--pp-i-arrow-56) center / contain no-repeat;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity var(--pp-t-med) ease, transform var(--pp-t-med) ease;
  pointer-events: none;
}
.pp-mycabin-header .pp-nav-mega__model:hover::after,
.pp-mycabin-header .pp-nav-mega__model:has(.wp-block-button__link:focus-visible)::after { opacity: 1; transform: translateY(-50%); }

/* --- About / Resources: icon + label link list ----------------------------- */
.pp-mycabin-header .pp-nav-mega__links { display: flex; flex-direction: column; gap: 16px; }
.pp-mycabin-header .pp-nav-mega__link-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 40px 10px 12px;
  border-radius: var(--pp-r-md);
  transition: background var(--pp-t-med) ease;
}
.pp-mycabin-header .pp-nav-mega__link-item:hover,
.pp-mycabin-header .pp-nav-mega__link-item:has(.wp-block-button__link:focus-visible) { background: var(--pp-surface); }
.pp-mycabin-header .pp-nav-mega__link-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pp-r-md);
  background: var(--pp-surface);
  color: var(--pp-ink-72);
  transition: background var(--pp-t-med) ease, color var(--pp-t-med) ease;
}
.pp-mycabin-header .pp-nav-mega__link-icon svg,
.pp-mycabin-header .pp-mobnav__irow-icon svg { display: block; flex: none; }
.pp-mycabin-header .pp-nav-mega__link-item:hover .pp-nav-mega__link-icon,
.pp-mycabin-header .pp-nav-mega__link-item:has(.wp-block-button__link:focus-visible) .pp-nav-mega__link-icon { background: var(--pp-accent-soft); color: var(--pp-ink); }

.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__link-text .wp-block-button__link {
  display: block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__link-item:hover .pp-nav-mega__link-text .wp-block-button__link,
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__link-item:has(.wp-block-button__link:focus-visible) .pp-nav-mega__link-text .wp-block-button__link {
  color: var(--pp-accent) !important;
}

.pp-mycabin-header .pp-nav-mega__link-item::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--pp-i-arrow-56) center / contain no-repeat;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity var(--pp-t-med) ease, transform var(--pp-t-med) ease;
  pointer-events: none;
}
.pp-mycabin-header .pp-nav-mega__link-item:hover::after,
.pp-mycabin-header .pp-nav-mega__link-item:has(.wp-block-button__link:focus-visible)::after { opacity: 1; transform: translateY(-50%); }

/* --- Promo photo cards (shared by desktop panels and the mobile screens) ----
   Source stacks <img>, a scrim, a title (top) and a CTA (bottom) with
   position:absolute inside the link. Here the card is a CSS grid whose single
   cell every layer occupies (grid items paint in `order`/z-index order, so no
   absolute layout is needed and the title stays a real, stretched link). */
.pp-mycabin-header .pp-nav-mega__promos { display: flex; flex-direction: column; gap: 16px; }
.pp-mycabin-header .pp-nav-mega__promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  border-radius: var(--pp-r-md);
  overflow: hidden;
}
.pp-mycabin-header .pp-nav-mega__promo > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.pp-mycabin-header .pp-nav-mega__promo-img {
  position: relative;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.pp-mycabin-header .pp-nav-mega__promo-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pp-t-slow) var(--pp-ease);
}
.pp-mycabin-header .pp-nav-mega__promo:hover img { transform: scale(1.05); }
.pp-mycabin-header .pp-nav-mega__promo::before {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background: rgba(0, 0, 0, .4);
  pointer-events: none;
}
.pp-mycabin-header .pp-nav-mega__promo-cta {
  z-index: 2;
  align-self: end;
  justify-self: start;
  padding: 14px;
  font-size: 16px; /* source: 13px on .nav-mega__promo-cta, but the later .link-arrow (16px) wins; the 14px variants below are more specific */
  font-weight: 500;
  color: var(--pp-paper);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  pointer-events: none; /* the stretched title link underneath receives the click */
}
.pp-mycabin-header .pp-nav-mega__promo-cta::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--pp-i-arrow) center / contain no-repeat;
          mask: var(--pp-i-arrow) center / contain no-repeat;
}
.pp-mycabin-header .pp-nav-mega__promo:hover .pp-nav-mega__promo-cta { color: var(--pp-accent-soft); }

/* the title wrapper is a grid item of the card: re-declare its placement (all: revert would drop it) */
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__promo-title {
  grid-area: 1 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  z-index: 2 !important;
  align-self: start !important;
  justify-self: stretch !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__promos--single .pp-nav-mega__promo-title {
  max-width: 80% !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__visit .pp-nav-mega__promo-title {
  max-width: 90% !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__promo-title .wp-block-button__link {
  display: block !important;
  padding: 14px !important;
  color: var(--pp-paper) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__promo-title .wp-block-button__link:hover {
  color: var(--pp-paper) !important;
}

.pp-mycabin-header .pp-nav-mega__promos--single { height: 100%; }
.pp-mycabin-header .pp-nav-mega__promos--single .pp-nav-mega__promo { flex: 1; aspect-ratio: auto; }
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__promos--single .pp-nav-mega__promo-title .wp-block-button__link { font-size: 19px !important; }
.pp-mycabin-header .pp-nav-mega__promos--single .pp-nav-mega__promo-cta { font-size: 14px; }
.pp-mycabin-header .pp-nav-mega__visit {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pp-mycabin-header.pp-mycabin-header .pp-nav-mega__visit .pp-nav-mega__promo-title .wp-block-button__link { font-size: 18px !important; }
.pp-mycabin-header .pp-nav-mega__visit .pp-nav-mega__promo-cta { font-size: 14px; }


/* ==========================================================================
   03  HEADER STATES  (source .header--on-hero / --how-hero / --home-hero,
       .header__cta--ink)
   --------------------------------------------------------------------------
   Source picks a state with a modifier class on <header>, per page. A Site
   Part renders the same markup on every page, so the state is derived from
   each page's own Page Pack root class via :has() — the established mechanism
   of this Site Part since v2.0.0 (see manifest notes). Pages that register
   their own state in their own Page Pack CSS (Warranty) are untouched.
   ========================================================================== */
/* on-hero: About, Contact, Ready Houses, How It Works — dark photo hero */
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-paper);
}
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-paper);
}
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-paper) !important;
}
/* how-hero: How It Works' short, wide hero — only the nav links revert to ink */
body:has(.pp-how-it-works-clean) .pp-header .pp-nav__link .wp-block-button__link {
  color: var(--pp-ink) !important;
}
/* The rule that always wins: past 40px of scroll 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 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);
}

/* home-hero: the Homepage's video hero — logo/burger light at every width
   (source: "unlike on-hero this isn't paired with a desktop-only hero"); the
   nav links/pill follow in the 900px layer below, exactly as source. */
body:has(.pp-home) .pp-header .pp-header__logo svg { color: var(--pp-paper); }
body:has(.pp-home) .pp-header .pp-burger span { background: var(--pp-paper); }
body:has(.pp-home) .pp-header.pp-is-solid .pp-header__logo svg { color: var(--pp-ink); }
body:has(.pp-home) .pp-header.pp-is-solid .pp-burger span { background: var(--pp-ink); }

/* ==========================================================================
   03b  MANUAL PAGE APPEARANCE  (v2.1.6)  -- "Header appearance" page setting
   --------------------------------------------------------------------------
   MyCabin Page Importer >= 0.3.17 adds ONE generic class to <body> from each
   Page's own setting (MyCabin Page Settings > Header appearance):

     body.mcpi-header-light   white / paper header elements (the on-hero look)
     body.mcpi-header-dark    ink header elements (the default look)
     (Auto = no class at all: every rule above keeps deciding, unchanged)

   It sets only the TOP-of-page look. Priority, highest first:
     1. the scrolled .pp-is-solid state -- every rule below is `:not(.pp-is-solid)`,
        so the existing solid header rules (ink on a blurred bone bar) keep winning;
     2. this manual override -- one extra class + the :not() make these rules more
        specific than any page-state rule above and than the Warranty Page Pack's own
        `body:has(.pp-warranty) ...` state, so no page root class needs to be listed
        and no page id is used;
     3. Auto -- the page-root :has() states above, then the ink default.
   The values are exactly the ones the on-hero / default rules use (--pp-paper,
   --pp-ink, the two pill tints). The nav label colour needs `!important` only
   because the base nav-link colour (and the state rules) already carry it; the other
   properties do not. The hover colour is not set here: since 2.1.5 hover = default.
   Chevrons are currentColor and the mobile burger is the same span element, so they
   follow. The open mobile overlay (.pp-mobnav) is a separate surface and is not
   touched. */
body.mcpi-header-light .pp-header:not(.pp-is-solid) .pp-header__logo svg { color: var(--pp-paper); }
body.mcpi-header-light .pp-header:not(.pp-is-solid) .pp-burger span { background: var(--pp-paper); }
body.mcpi-header-light .pp-header:not(.pp-is-solid) .pp-nav__pill { background: color-mix(in oklab, var(--pp-bone) 22%, transparent); }
body.mcpi-header-light .pp-header:not(.pp-is-solid) .pp-nav__link .wp-block-button__link { color: var(--pp-paper) !important; }

body.mcpi-header-dark .pp-header:not(.pp-is-solid) .pp-header__logo svg { color: var(--pp-ink); }
body.mcpi-header-dark .pp-header:not(.pp-is-solid) .pp-burger span { background: var(--pp-ink); }
body.mcpi-header-dark .pp-header:not(.pp-is-solid) .pp-nav__pill { background: color-mix(in oklab, var(--pp-ink) 8%, transparent); }
body.mcpi-header-dark .pp-header:not(.pp-is-solid) .pp-nav__link .wp-block-button__link { color: var(--pp-ink) !important; }

/* product pages open on a light background, so the CTA is ink (source .header__cta--ink) */

body:has(.pp-milla-47-clean) .pp-header .pp-header__cta .wp-block-button__link,
body:has(.pp-living-80-clean) .pp-header .pp-header__cta .wp-block-button__link {
  background: var(--pp-ink) !important;
  color: var(--pp-bone) !important;
}
body:has(.pp-milla-47-clean) .pp-header .pp-header__cta .wp-block-button__link:hover,
body:has(.pp-living-80-clean) .pp-header .pp-header__cta .wp-block-button__link:hover {
  background: var(--pp-accent) !important;
  color: var(--pp-bone) !important;
}



/* ==========================================================================
   04  MOBILE NAVIGATION — two-layer drill-down  (source §08)
   #mobnav is a full-screen overlay (fixed, inset 0). Source shows/hides it
   with the `hidden` attribute; a saved block cannot carry a toggled
   attribute, so frontend.js toggles .pp-is-open instead. Inside it, one
   persistent top bar is shared by every screen (logo on the main list; back
   arrow + section title when drilled in), and .pp-is-active picks the screen.
   ========================================================================== */
.pp-mycabin-header .pp-mobnav {
  position: fixed;
  inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
  z-index: 90;
  display: none;
  background: var(--pp-surface);
  color: var(--pp-ink);
  animation: pp-header-rise .28s ease both;
  margin: 0 !important;
}
/* v2.1.1 — horizontal lock. The overlay clips (it is exactly viewport-sized; the inner column is
   height:100% so nothing legitimately overflows it), never chains a scroll to the page behind, and
   only accepts vertical pan (pinch-zoom stays available). */
.pp-mycabin-header .pp-mobnav {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}
.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-inline: var(--pp-gutter);
  padding-bottom: var(--pp-gutter);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pp-mycabin-header .pp-mobnav__top {
  display: flex;
  align-items: center;
  flex: none;
  height: var(--pp-hdr-h);
  margin-bottom: 17px !important;
  border-bottom: 1px solid var(--pp-ink-hair);
}
.pp-mycabin-header .pp-mobnav__logo { display: flex; align-items: center; margin-right: auto; }
.pp-mycabin-header .pp-mobnav__logo svg { height: clamp(28px, 4vw, 38px); width: auto; display: block; color: var(--pp-ink); }
.pp-mycabin-header .pp-mobnav__top-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.pp-mycabin-header .pp-mobnav__back,
.pp-mycabin-header .pp-mobnav__close {
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--pp-ink);
  cursor: pointer;
  padding: 0;
}
.pp-mycabin-header .pp-mobnav__back { margin-left: -14.375px; }
.pp-mycabin-header .pp-mobnav__close { margin-right: -14.375px; }
/* Source flips the logo / back arrow / title with the `hidden` attribute. A saved block
   (and WordPress' KSES filter, for users without unfiltered_html) cannot carry a JS-toggled
   attribute, so the drilled-in state is a class on the top bar instead (.pp-is-sub). */
.pp-mycabin-header .pp-mobnav__back,
.pp-mycabin-header .pp-mobnav__top-title { display: none; }
.pp-mycabin-header .pp-mobnav__top.pp-is-sub .pp-mobnav__logo { display: none; }
.pp-mycabin-header .pp-mobnav__top.pp-is-sub .pp-mobnav__back { display: flex; }
.pp-mycabin-header .pp-mobnav__top.pp-is-sub .pp-mobnav__top-title { display: block; }
.pp-mycabin-header .pp-mobnav__screens {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* v2.1.1 — ROOT CAUSE of the sideways swipe. `overflow-y: auto` makes overflow-x compute to `auto`
     too, and the designer's arrows deliberately overhang their row by 3.375px (margin-right:-3.375px
     on .pp-mobnav__open / __mrow / __irow ::after, so the arrow tip lines up with the text edge). That
     overhang is scrollable overflow of THIS scroller, so it could be dragged 3px sideways on every
     screen that has arrows (main, Homes, About, Resources; Visit has none). Fix at the owner: clip x,
     keep y scrolling, and give the overhang somewhere to live — the scroller is widened 6px each side
     into the 18px+ gutter and given 6px of inline padding back, so every row/arrow/card sits exactly
     where it did (content box unchanged) while the overhang now lands inside the padding box (no
     scrollable overflow, and the arrow tips are not clipped). */
  margin-inline: -6px;
  padding-inline: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: break-word; /* a very long label wraps instead of widening the column (no visual change otherwise) */
}
.pp-mycabin-header .pp-mobnav__screen { display: none; flex-direction: column; flex: 1; min-height: 0; }
.pp-mycabin-header .pp-mobnav__screen.pp-is-active { display: flex; }
/* v2.1.2 — bottom strip. In source the overlay's inner column carries `padding-bottom: var(--gutter)`
   OUTSIDE the scroller, so the scroller (.pp-mobnav__screens) ends 18px above the viewport bottom: a
   fixed beige band under the content, and a screen that overflows (Homes: 6 rows + 2 promo cards) is
   hard-clipped along that line instead of scrolling to the bottom edge. The same 18px now lives INSIDE
   the scroll content — on the screen itself, which is allowed to grow with its content (flex 1 0 auto
   instead of min-height:0 clipping) — so:
     · a screen that fits looks exactly as before (same bottom gap, main-list CTAs in the same place);
     · a screen that overflows scrolls all the way to the viewport bottom, with the same 18px of
       breathing room only at the very end of the scroll.
   Scoped to the open overlay so the editor's stacked representation is untouched. */
.pp-mycabin-header .pp-mobnav.pp-is-open .pp-mobnav__inner { padding-bottom: 0; }
.pp-mycabin-header .pp-mobnav.pp-is-open .pp-mobnav__screen {
  flex: 1 0 auto;
  min-height: auto;
  padding-bottom: var(--pp-gutter);
}
.pp-mycabin-header .pp-mobnav__list { display: flex; flex-direction: column; }


/* main list rows (source .mobnav__row) — 4 drill-down triggers + Contacts */
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__row .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 19px 0 !important;
  border-bottom: 1px solid var(--pp-ink-hair) !important;
  color: var(--pp-ink) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  text-align: left !important;
  cursor: pointer !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__row .wp-block-button__link:hover {
  color: var(--pp-accent) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__row .wp-block-button__link[aria-current="page"] {
  color: var(--pp-accent) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__open .wp-block-button__link:hover {
  color: var(--pp-ink) !important;
}

.pp-mycabin-header .pp-mobnav__open .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: -3.375px;
  background: var(--pp-ink-56);
  -webkit-mask: var(--pp-i-arrow) center / contain no-repeat;
          mask: var(--pp-i-arrow) center / contain no-repeat;
}

.pp-mycabin-header .pp-mobnav__foot {
  margin-top: auto !important;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* CTA pills (source .btn .btn--accent / .btn--outline .btn--block, sized by .mobnav__foot .btn) */
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__cta .wp-block-button__link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 52px !important;
  padding: 0 21px !important;
  border-radius: var(--pp-r-pill) !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: scale(1) !important;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med), transform .15s var(--pp-ease) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__cta .wp-block-button__link:active {
  transform: scale(.96) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__cta.pp-btn-accent .wp-block-button__link {
  background: var(--pp-accent-soft) !important;
  color: var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__cta.pp-btn-accent .wp-block-button__link:hover {
  background: var(--pp-accent) !important;
  color: var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__cta.pp-btn-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--pp-ink) !important;
  border: 1px solid var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__cta.pp-btn-outline .wp-block-button__link:hover {
  background: var(--pp-surface) !important;
  color: var(--pp-ink) !important;
}


/* Homes screen: model rows (source .mobnav__mlist / __mrow) */
.pp-mycabin-header .pp-mobnav__mlist { display: flex; flex-direction: column; padding-bottom: 13px; }
.pp-mycabin-header .pp-mobnav__mrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pp-ink-hair);
}
.pp-mycabin-header .pp-mobnav__mrow-media {
  flex: none;
  width: 74px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-mycabin-header .pp-mobnav__mrow-text { flex: 1 1 auto; min-width: 0; }
.pp-mycabin-header .pp-mobnav__mrow-specs {
  display: block;
  margin-top: 3px !important;
  font-size: 14.5px;
  color: var(--pp-ink-56);
}

.pp-mycabin-header.pp-mycabin-header .pp-mobnav__mrow-name .wp-block-button__link {
  display: block !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__mrow:hover .pp-mobnav__mrow-name .wp-block-button__link {
  color: var(--pp-accent) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__mrow-name .wp-block-button__link[aria-current="page"] {
  color: var(--pp-accent) !important;
}

.pp-mycabin-header .pp-mobnav__mrow::after,
.pp-mycabin-header .pp-mobnav__irow::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: -3.375px;
  background: var(--pp-ink-56);
  -webkit-mask: var(--pp-i-arrow) center / contain no-repeat;
          mask: var(--pp-i-arrow) center / contain no-repeat;
}

/* About / Resources screens: icon rows (source .mobnav__ilist / __irow) */
.pp-mycabin-header .pp-mobnav__ilist { display: flex; flex-direction: column; padding-bottom: 13px; }
.pp-mycabin-header .pp-mobnav__irow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pp-ink-hair);
}
.pp-mycabin-header .pp-mobnav__irow-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pp-r-md);
  background: var(--pp-surface);
  color: var(--pp-ink-72);
}

.pp-mycabin-header.pp-mycabin-header .pp-mobnav__irow-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__irow-text .wp-block-button__link {
  display: block !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: var(--pp-ink) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__irow:hover .pp-mobnav__irow-text .wp-block-button__link {
  color: var(--pp-accent) !important;
}
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__irow-text .wp-block-button__link[aria-current="page"] {
  color: var(--pp-accent) !important;
}


/* Promo cards on the mobile screens: stacked, full width, aspect-ratio per screen */
.pp-mycabin-header .pp-mobnav__promos { display: flex; flex-direction: column; gap: 11px; padding-bottom: 4px; }
.pp-mycabin-header .pp-mobnav__promos .pp-nav-mega__promo-cta { font-size: 16px; padding: 13px; }
.pp-mycabin-header.pp-mycabin-header .pp-mobnav__promos .pp-nav-mega__promo-title .wp-block-button__link { font-size: 20px !important; padding: 13px !important; }
.pp-mycabin-header .pp-mobnav__screen--homes .pp-nav-mega__promo { aspect-ratio: 3.2; flex: none; }
.pp-mycabin-header .pp-mobnav__screen--about .pp-nav-mega__promo { aspect-ratio: 1.4; flex: none; }
.pp-mycabin-header .pp-mobnav__screen--resources .pp-nav-mega__promo { aspect-ratio: 2; flex: none; }
.pp-mycabin-header .pp-mobnav__screen--visit .pp-nav-mega__promo { aspect-ratio: 1.25; flex: none; }


/* ==========================================================================
   05  DESKTOP LAYER (min-width: 900px)  (source §15)
   ========================================================================== */
@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; }
  .pp-mycabin-header .pp-nav__dropdown--mega { display: block; }

  /* home-hero (continued): the nav capsule sits over the video hero too */
  body:has(.pp-home) .pp-header .pp-nav__link .wp-block-button__link { color: var(--pp-paper) !important; }
  body:has(.pp-home) .pp-header .pp-nav__pill { background: color-mix(in oklab, var(--pp-bone) 22%, transparent); }
  body:has(.pp-home) .pp-header.pp-is-solid .pp-nav__link .wp-block-button__link { color: var(--pp-ink) !important; }
}