/* Site shell additions: substantial header, contact footer and local widgets. */

:root { --pn-shell-header-height: 108px; }

.pn-skip-link {
  position: fixed;
  z-index: 100000;
  top: 12px;
  right: 12px;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pn-skip-link:focus {
  width: auto;
  height: auto;
  padding: 12px 18px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border-radius: 8px;
  background: #fff;
  color: #06324a;
  font-weight: 800;
}

.pn-header,
.pn-header__inner { height: 108px; }

/* Light is the safe default. Dark/photo hero classes opt into the white
   treatment, so a newly added light page cannot silently inherit white text. */
body .pn-header.pn-header {
  background: linear-gradient(180deg, rgba(250, 250, 250, .99), rgba(250, 250, 250, .94));
  box-shadow: 0 1px 0 rgba(6, 50, 74, .12);
  transition: background .24s ease, box-shadow .24s ease;
}

body .pn-header .pn-nav a:hover { color: #ab4533; }

body:has(.pn-hero) .pn-header,
body:has(.pn-pageopen) .pn-header,
body:has(.products-hero) .pn-header,
.pn-shell-chrome--dark .pn-header {
  /* The scrim has to stay opaque for the full height of the logo, not just the
     top of the bar. It previously faded to transparent by 100%, so the lower
     two thirds of the white logo sat on raw photograph — invisible wherever a
     hero image happens to be bright, as on /partner. Hold the tone through the
     logo, then fade below it. */
  background: linear-gradient(180deg, rgba(6, 50, 74, .96) 0%, rgba(6, 50, 74, .92) 60%, rgba(6, 50, 74, .78) 88%, rgba(6, 50, 74, 0) 100%);
  box-shadow: none;
}

body:has(.pn-hero) .pn-nav a,
body:has(.pn-pageopen) .pn-nav a,
body:has(.products-hero) .pn-nav a,

body:has(.pn-hero) .pn-nav a:hover,
body:has(.pn-pageopen) .pn-nav a:hover,
body:has(.products-hero) .pn-nav a:hover,
.pn-shell-chrome--dark .pn-nav a:hover { color: #f2e3ce; }

/* The logo variant and the nav colour must never disagree. They were separate
   rule sets, and `body .pn-header .pn-nav a` above out-specifies the :has()
   selectors — so on the article and news pages the nav correctly went dark on a
   light header while the logo stayed white and vanished. Both now read one
   variable, set in a single place, so there is exactly one decision. */
.pn-header { --pn-chrome-ink: #06324a; --pn-chrome-logo: url('/assets/logo-navy.png'); }

body:has(.pn-hero) .pn-header,
body:has(.pn-pageopen) .pn-header,
body:has(.products-hero) .pn-header,
.pn-shell-chrome--dark.pn-header,
body.pn-scrolled .pn-header {
  --pn-chrome-ink: #fff;
  --pn-chrome-logo: url('/assets/logo-white.png');
}

body .pn-header .pn-nav a { color: var(--pn-chrome-ink); }
.pn-header .pn-logo img { content: var(--pn-chrome-logo); }

.pn-nav a {
  height: 108px;
  padding-inline: clamp(12px, 1.25vw, 22px);
}

.pn-logo { margin-inline: clamp(22px, 2.5vw, 42px); }
.pn-logo img { height: 76px; }

body.pn-scrolled .pn-header,
body.pn-scrolled .pn-header__inner,
body.pn-scrolled .pn-nav a { height: 84px; }

body.pn-scrolled { --pn-shell-header-height: 84px; }

body.pn-scrolled .pn-logo img { height: 60px; }

body.pn-scrolled .pn-header.pn-header {
  position: fixed;
  background: #06324a;
  box-shadow: 0 12px 30px rgba(6, 50, 74, .22);
}

body.pn-scrolled .pn-nav a:hover { color: #f2e3ce; }

.pn-burger,
.pn-drawer__close,
#pn-scroll-up {
  appearance: none;
  border: 0;
  padding: 0;
}

.pn-drawer-overlay { z-index: 1298; }
.pn-drawer { z-index: 1299; }
.pn-drawer__close { z-index: 1300; }

.pn-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 14px;
  color: var(--pn-white);
  font-family: var(--pn-font-body);
  font-style: normal;
}

.pn-footer__contact strong { color: var(--pn-cream); font-size: 18px; }

.pn-footer__contact a {
  color: var(--pn-white);
  font-size: 17px;
  line-height: 1.55;
  text-decoration: underline;
  text-decoration-color: rgba(242, 227, 206, .5);
  text-underline-offset: 4px;
}

.pn-footer__contact a:hover {
  color: var(--pn-cream);
  text-decoration-color: currentColor;
}

.pn-shell-content { position: relative; }

.pn-contact-dock {
  position: fixed;
  z-index: 1180;
  right: calc(18px + env(safe-area-inset-right));
  left: auto;
  bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}


.pn-whatsapp,
.pn-chat__toggle {
  min-width: 56px;
  width: 56px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 3px solid #f2e3ce;
  border-radius: 999px;
  padding: 0;
  color: #fff;
  font-family: var(--pn-font-body);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 3px #06324a, 0 14px 34px -14px rgba(6, 50, 74, .65);
  transition: transform .2s ease, box-shadow .2s ease;
}

.pn-whatsapp span,
.pn-chat__toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pn-whatsapp { background: #146c49; }
.pn-chat__toggle { background: var(--pn-primary); }

.pn-whatsapp:hover,
.pn-chat__toggle:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px #06324a, 0 18px 38px -14px rgba(6, 50, 74, .8);
}

.pn-whatsapp svg,
.pn-chat__toggle svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  fill: currentColor;
}

.pn-chat { position: relative; }

.pn-chat__panel {
  width: min(370px, calc(100vw - 32px));
  max-height: calc(100vh - 175px);
  max-height: calc(100dvh - 175px);
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid rgba(6, 50, 74, .13);
  border-radius: 22px;
  background: var(--pn-off-white, #fafafa);
  color: var(--pn-body, #1e1e1e);
  box-shadow: 0 24px 65px -24px rgba(6, 50, 74, .68);
}

.pn-chat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 17px;
  border-radius: 20px 20px 0 0;
  background: var(--pn-primary);
  color: #fff;
}

.pn-chat__head strong,
.pn-chat__head span { display: block; }

.pn-chat__head strong {
  margin-bottom: 4px;
  font-family: var(--pn-font-head);
  font-size: 22px;
}

.pn-chat__head span { font-size: 14px; line-height: 1.5; }

.pn-chat__close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.pn-chat__form {
  display: grid;
  gap: 13px;
  padding: 18px 20px 20px;
}

.pn-chat__form label,
.pn-chat__form label > span {
  display: grid;
  gap: 6px;
}

.pn-chat__form label > span {
  color: var(--pn-primary);
  font-size: 14px;
  font-weight: 700;
}

.pn-chat__form input,
.pn-chat__form textarea {
  width: 100%;
  border: 1px solid rgba(6, 50, 74, .25);
  border-radius: 10px;
  background: #fff;
  color: var(--pn-body, #1e1e1e);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
}

.pn-chat__form input:focus-visible,
.pn-chat__form textarea:focus-visible {
  outline: 3px solid var(--pn-coral);
  outline-offset: 2px;
}

.pn-chat__form textarea { resize: vertical; }

.pn-chat__submit {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--pn-coral);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.pn-chat__submit:disabled { cursor: wait; opacity: .72; }

.pn-chat__status {
  min-height: 1.5em;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.pn-chat__status--success { color: #246b3d; }
.pn-chat__status--error { color: #8d3024; }

@media (max-width: 1200px) {
  :root,
  body.pn-scrolled { --pn-shell-header-height: calc(88px + env(safe-area-inset-top)); }

  .pn-mobile-header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
  }

  .pn-shell-content { padding-top: var(--pn-shell-header-height); }

  .pn-mobile-header__row {
    height: var(--pn-shell-header-height);
    padding-top: env(safe-area-inset-top);
  }
  .pn-mobile-header__right { width: 44px; }

  .pn-burger {
    width: 44px;
    height: 44px;
    background: transparent;
  }

  .pn-burger span { left: 8px; width: 28px; }
  .pn-burger span:nth-child(1) { top: 11px; }
  .pn-burger span:nth-child(2) { top: 21px; }
  .pn-burger span:nth-child(3) { top: 31px; }
  .pn-mobile-logo img { height: 68px; }
  .pn-drawer nav a { display:flex;align-items:center;min-block-size:44px; }
  .pn-drawer__close { width:44px;height:44px;top:calc(21px + env(safe-area-inset-top)); }
  .pn-drawer nav li:nth-child(5) { transition-delay: .38s; }
}

@media (max-width: 600px) {
  .pn-contact-dock {
    right: calc(16px + env(safe-area-inset-right));
    left: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .pn-chat__panel { max-height: calc(100vh - 160px);max-height:calc(100dvh - 160px); }
  .pn-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .pn-footer__contact a,
  .pn-footer__links a,
  .pn-footer__bottom a { display:inline-flex;align-items:center;min-block-size:44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-header,
  .pn-whatsapp,
  .pn-chat__toggle { transition: none; }
}

/* --------------------------------------------------------------------------
   Mobile experience system

   The desktop composition used to be scaled down at a collection of unrelated
   breakpoints.  These tokens and rules give phones and tablets one deliberate
   rhythm: compact chrome, readable type, predictable gutters and heroes that
   reveal the next piece of content in the first viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --pn-mobile-gutter: clamp(18px, 4.8vw, 32px);
    --pn-mobile-section: clamp(48px, 8vw, 72px);
    --pn-mobile-section-tight: clamp(32px, 5vw, 48px);
    --pn-mobile-h1: clamp(2rem, 7.8vw, 3.5rem);
    --pn-mobile-h2: clamp(1.75rem, 5.8vw, 2.55rem);
    --pn-mobile-h3: clamp(1.25rem, 4vw, 1.75rem);
  }

  body { font-size: 16px; line-height: 1.7; }

  .pn-container,
  .pn-container--wide,
  .pn-container--footer {
    width: auto;
    max-width: none;
    margin-inline: var(--pn-mobile-gutter);
  }

  main :where(h1) { font-size: var(--pn-mobile-h1); line-height: 1.12; }
  main :where(h2) { font-size: var(--pn-mobile-h2); line-height: 1.2; }
  main :where(h3) { font-size: var(--pn-mobile-h3); line-height: 1.3; }

  /* iOS Safari zooms the viewport when a text control computes below 16px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  /* Preserve the existing 24px site floor, including unclassed inline links. */
  :where(main, .pn-footer) :where(a[href]:not(.pn-skip-link)) { min-block-size: 24px; }
  :where(main, .pn-footer) :where(a[href]:not([class])) {
    /* Inline padding grows the hit box without turning every store/contact
       link into its own block and making long lists dramatically taller. */
    display: inline;
    padding: 4px 2px;
    margin: -4px -2px;
    vertical-align: baseline;
  }
  :where(main, .pn-footer) :where(button, input, select, textarea, summary) {
    min-block-size: 24px;
  }

  .pn-hero {
    height: clamp(31rem, 66svh, 42rem);
    min-height: 0;
  }

  .pn-hero__layers {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.5vh, 24px);
    padding: clamp(28px, 6vh, 64px) var(--pn-mobile-gutter);
    text-align: center;
  }

  .pn-hero__title,
  .pn-hero__sub,
  .pn-hero__btn-wrap {
    position: static;
    inset: auto;
    width: 100%;
    margin: 0 !important;
    transform: none;
  }

  .pn-hero__title {
    max-width: 18ch;
    padding: 0 !important;
    font-size: var(--pn-mobile-h1) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }

  .pn-hero__sub {
    max-width: 42rem;
    padding: 0 !important;
    font-size: clamp(1rem, 2.25vw, 1.16rem) !important;
    line-height: 1.6 !important;
    text-wrap: pretty;
  }

  .pn-hero__btn-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .pn-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    height: auto !important;
    padding: 13px 24px !important;
    /* 19px, not 16px: white on the brandbook orange is 3.43:1, which passes AA
       only as large text (>=18.66px at 700+). At 16px this CTA needed 4.5:1 and
       failed on every mobile hero. */
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .pn-pageopen {
    padding: var(--pn-mobile-section) var(--pn-mobile-gutter);
  }
  .pn-pageopen h1 { font-size: var(--pn-mobile-h1); }
  .pn-pageopen p { margin-top: 12px; font-size: 16px; line-height: 1.65; }

  /* Keep contact actions in their reserved bottom-right gutter. Moving them to
     a top-left command band put them directly over the sticky mobile header. */
  .pn-contact-dock {
    z-index: 1291;
    gap: 8px;
  }
  .pn-contact-dock:has(.pn-chat.is-open) {
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  body:has(#pn-cookie-info:not([hidden])) .pn-contact-dock,
  body:has(#pn-a11y-panel:not([hidden])) .pn-contact-dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .pn-whatsapp,
  .pn-chat__toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border-width: 2px;
    box-shadow: 0 0 0 2px #06324a, 0 10px 24px -12px rgba(6, 50, 74, .65);
  }
  .pn-whatsapp svg,
  .pn-chat__toggle svg { width: 23px; height: 23px; }

  #pn-a11y-btn,
  #pn-cookies-btn {
    left: calc(10px + env(safe-area-inset-left));
    width: 44px;
    min-height: 44px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  #pn-cookies-btn { left: calc(62px + env(safe-area-inset-left)); }
  #pn-a11y-btn svg { width: 26px; height: 26px; }
  #pn-cookies-btn svg { width: 20px; height: 20px; }

  #pn-scroll-up {
    right: auto;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    margin-left: -22px;
  }

  #pn-a11y-panel,
  #pn-cookie-info {
    bottom: calc(66px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #pn-cookie-info { padding: 18px; }

  .pn-chat__panel {
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-bottom: 8px;
  }
}

@media (max-width: 1200px) {
  :root,
  body.pn-scrolled { --pn-shell-header-height: calc(72px + env(safe-area-inset-top)); }

  /* Make the chrome itself sticky and keep it in flow. This removes the shell
     spacer responsible for the white strip on home and news. */
  .pn-shell-chrome {
    position: sticky;
    top: 0;
    z-index: 1290;
  }
  .pn-mobile-header {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .pn-shell-content { padding-top: 0; }
  .pn-mobile-header__row { height: var(--pn-shell-header-height); }
  .pn-mobile-logo img { height: 58px; }
}

@media (max-width: 600px) {
  .pn-hero { height: 66svh; min-height: 31rem; }
  .pn-hero__btn-wrap { flex-direction: column; }
  .pn-hero__btn { width: min(100%, 19rem); }

  .pn-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .pn-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }
  .pn-footer__col { width: auto; padding: 0; }
  .pn-footer__col:first-child { grid-column: 1 / -1; }
  .pn-footer__col .pn-spacer { display: none; }
  .pn-footer__title { margin-bottom: 10px; }
  .pn-footer__bottom { gap: 12px; }
  .pn-footer__legal { display: flex; flex-wrap: wrap; white-space: normal; }
}

@media (max-width: 900px) and (max-height: 600px) {
  .pn-hero { height: calc(100dvh - var(--pn-shell-header-height)); min-height: 0; }
}

/* The dock is always visible now, so reserve room for it rather than hiding it
   when content scrolls underneath. */
.pn-shell-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 700px) {
  .pn-shell-content { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
}

/* Cookie / browser-storage consent dialog. It is fixed so its first-visit
   appearance never changes document geometry, and it stays above the permanent
   controls instead of covering them. */
#pn-cookie-info {
  bottom: calc(142px + env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 36px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100dvh - 178px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 16px;
  overscroll-behavior: contain;
}

.pn-cookie-info__head h2:focus { outline: 0; }

/* Keyboard-critical controls that carried no focus indicator at all. */
.pn-burger:focus-visible,
.pn-drawer__close:focus-visible {
  outline: 3px solid #f2e3ce !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}

.pn-cookie-info__body {
  font-size: 16px;
  line-height: 1.55;
}

.pn-cookie-info__body code {
  direction: ltr;
  unicode-bidi: isolate;
  padding: 1px 5px;
  border-radius: 5px;
  background: #eef3f5;
  color: #06324a;
  font-size: .92em;
}

.pn-cookie-info__choice {
  padding: 10px 12px;
  border-inline-start: 4px solid #e85e46;
  border-radius: 8px;
  background: #f7f2e8;
  font-weight: 700;
}

/* The choice status is an aria-live region and carries no text until the visitor
   accepts or declines, so on every first visit it drew an empty cream bar with an
   orange cap across the middle of the dialog. Strip the box while it is empty
   rather than display:none, which would pull the region out of the accessibility
   tree and risk swallowing the announcement of the very first message. */
.pn-cookie-info__choice:empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.pn-cookie-info__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.pn-cookie-info__action {
  min-height: 42px;
  padding: 8px 12px;
  border: 2px solid #06324a;
  border-radius: 12px;
  background: #fff;
  color: #06324a;
  font: 700 14px/1.35 var(--pn-font-body);
  cursor: pointer;
}

.pn-cookie-info__action:hover,
.pn-cookie-info__action[aria-pressed="true"] {
  background: #06324a;
  color: #fff;
}

.pn-cookie-info__more { text-align: center; font-size: 14px; }

@media (max-width: 900px) {
  /* Contact actions remain visible while the consent dialog is open. */
  body:has(#pn-cookie-info:not([hidden])) .pn-contact-dock {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #pn-cookie-info {
    left: calc(12px + env(safe-area-inset-left));
    bottom: calc(66px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px;
  }
}

/* At 375-500px the dialog was covering nearly half the viewport: a full-size
   heading, two stacked full-width buttons and the link. Compact bottom sheet
   instead — same three actions, same storage behaviour, side-by-side buttons. */
@media (max-width: 520px) {
  #pn-cookie-info {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: calc(55dvh - env(safe-area-inset-bottom));
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }
  .pn-cookie-info__head h2 { font-size: 17px; }
  .pn-cookie-info__body { font-size: 14px; line-height: 1.45; }
  .pn-cookie-info__actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .pn-cookie-info__action { min-height: 40px; padding: 6px 10px; font-size: 14px; }
  .pn-cookie-info__more { margin: 8px 0 0; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #pn-cookie-info { animation: none; }
}

/* --------------------------------------------------------------------------
   Accessibility widget: panel internals and the display-adjustment modes.
   These rules used to be injected as a <style> element by prestige-core.js at
   runtime. The Content Security Policy allowlists only the inline styles the
   worker hashed out of the server-rendered document, so that element was
   blocked on every page and the grayscale and high-contrast modes silently did
   nothing. Serving them from this stylesheet is what makes the widget work.
   -------------------------------------------------------------------------- */
#pn-a11y-panel{width:min(320px,calc(100vw - 36px));max-height:calc(100dvh - 174px);overflow:auto}
.pn-a11y-head h2{margin:0;font:inherit;color:inherit}
.pn-a11y-close{min-width:44px;min-height:44px}
.pn-a11y-intro{margin:2px 10px 10px;color:#324f5f;font-size:14px;line-height:1.55}
.pn-a11y-text{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;color:#06324a;font:600 15px/1.4 var(--pn-font-body)}
.pn-a11y-text__controls{display:flex;align-items:center;gap:4px;direction:ltr}
.pn-a11y-step{display:grid;place-items:center;width:40px;min-width:40px;height:40px;border:1px solid #9aaab2;border-radius:10px;background:#fff;color:#06324a;font:700 22px/1 var(--pn-font-body);cursor:pointer}
.pn-a11y-step:disabled{cursor:not-allowed;opacity:.4}
.pn-a11y-text__value{min-width:48px;text-align:center;font-variant-numeric:tabular-nums}
.pn-a11y-item{min-height:44px}
.pn-a11y-reset,.pn-a11y-statement{min-height:40px;display:inline-flex;align-items:center}
html.pn-a11y-grayscale body{filter:none!important}
html.pn-a11y-grayscale #root{filter:grayscale(1)!important}
html.pn-a11y-contrast body{filter:none!important;background:#fff!important}
html.pn-a11y-contrast #root,html.pn-a11y-contrast #root *:not(img):not(picture):not(video):not(a){background-color:#fff!important;background-image:none!important;color:#000!important;border-color:#000!important;box-shadow:none!important;text-shadow:none!important}
html.pn-a11y-contrast #root a{color:#0047c7!important;text-decoration:underline!important;text-decoration-thickness:.12em!important}
html.pn-a11y-contrast #root :focus-visible{outline:3px solid #000!important;outline-offset:3px!important}
html.pn-a11y-contrast.pn-a11y-grayscale #root{filter:grayscale(1)!important}

/* Paragraphs remain readable at every breakpoint, including auxiliary copy. */
body main p:is(.hm-b2b__note,.hm-loyal__note,.club-form__privacy,.product-card__meta,.product-card__flag,.product-hero__note,.store-card__address,.store-card__phone,.article-hero__category,.pn-form__status){font-size:16px}
/* Keep floating contact actions out of the storage-choice surface. */
@media(max-width:900px){
  body:has(#pn-cookie-info:not([hidden])) .pn-contact-dock{visibility:hidden;opacity:0;pointer-events:none}
  #pn-cookie-info{max-width:480px;left:12px;right:auto;bottom:12px;width:calc(100% - 24px);padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-radius:16px}
  .pn-cookie-info__head{min-height:32px}
  .pn-cookie-info__head h2{font-size:16px}
  .pn-cookie-info__body,.pn-cookie-info__body p{font-size:16px;line-height:1.4}
  .pn-cookie-info__body>p:first-child{margin:8px 0}
  .pn-cookie-info__actions{margin-top:8px;gap:10px}
  .pn-cookie-info__action{min-height:44px;font-size:16px}
}

.pn-cookie-info__head>a{font-size:16px;text-decoration:underline;text-underline-offset:3px;margin-inline-start:auto}

/* One stable identity across routes and viewport sizes. */
body .pn-header.pn-header{background:#fafafa;box-shadow:0 1px 0 #06324a20;--pn-chrome-ink:#06324a;--pn-chrome-logo:url('/assets/logo-navy.png')}
body .pn-header .pn-header__inner{width:100%;max-width:1440px;margin-inline:auto;padding-inline:5%;background:transparent;box-shadow:none;backdrop-filter:none;border-radius:0;justify-content:space-between}
body .pn-header,body .pn-header__inner,body .pn-header .pn-nav a{height:104px}
body .pn-header .pn-nav a{color:#06324a;font-size:16px;font-weight:500;padding-inline:18px}
body .pn-header .pn-nav a:hover .pn-nav__text{color:#06324a}
body .pn-header .pn-logo{margin:0 30px;transform:none;opacity:1}
body .pn-header .pn-logo img{height:68px;width:auto;filter:none;transform:none}
body.pn-scrolled .pn-header,body.pn-scrolled .pn-header__inner,body.pn-scrolled .pn-header .pn-nav a{height:84px}
body.pn-scrolled .pn-header .pn-logo img{height:58px}
body .pn-mobile-header{background:#fafafa;box-shadow:0 1px 0 #06324a20}
body .pn-mobile-header .pn-burger span{background:#06324a}
body .pn-mobile-logo img{content:url('/assets/logo-navy.png');filter:none;height:54px;width:auto}
body .pn-drawer__logo img{content:url('/assets/logo-navy.png');filter:none}
body .pn-footer__logo img{content:url('/assets/logo-white.png');filter:none}
body.pn-scrolled .pn-header.pn-header .pn-header__inner,body.pn-no-hero.pn-scrolled .pn-header.pn-header .pn-header__inner{background:transparent;box-shadow:none;backdrop-filter:none}
body.pn-scrolled .pn-header.pn-header{background:#fafafa;box-shadow:0 1px 0 #06324a20;--pn-chrome-ink:#06324a;--pn-chrome-logo:url('/assets/logo-navy.png')}
/* Compact storage choice, with full-size touch controls. */
body #pn-cookie-info{border-width:1px;border-radius:8px;padding:12px 14px;box-shadow:0 8px 28px #06324a24}
body .pn-cookie-info__head h2{font-size:15px}body .pn-cookie-info__body{font-size:14px;line-height:1.5}
body .pn-cookie-info__body p{margin:6px 0 0}body .pn-cookie-info__close{border-radius:4px;border-width:1px}
body #pn-cookie-info [data-consent-choice]{border-radius:4px;min-height:44px;border-width:1px;font-size:14px}
/* Legal links and copyright must wrap independently at tablet widths. */
.pn-footer__bottom{flex-wrap:wrap;gap:12px 32px}.pn-footer__bottom-col{width:auto;flex:1 1 320px;min-width:0}.pn-footer__legal{display:flex;flex-wrap:wrap;gap:0 8px;white-space:normal}
@media(max-width:1000px){.pn-footer__bottom{flex-direction:column;align-items:stretch}.pn-footer__bottom-col{flex:auto;width:100%;text-align:start}}

/* Match masks to each photo's intrinsic ratio and object-fit:contain box.
   Only backgrounds are hidden; package colors and printed labels stay intact. */
img[src="/assets/prestige-adult-medium-14kg.jpg"]{mask-image:url('/assets/pack-medium-mask.svg')}
img[src="/assets/prestige-adult-mini-3kg.jpg"]{mask-image:url('/assets/pack-mini-mask.svg')}
img[src="/assets/prestige-adult-medium-14kg.jpg"],img[src="/assets/prestige-adult-mini-3kg.jpg"]{mask-size:contain;mask-position:center;mask-repeat:no-repeat}
/* Customer's mixed Hebrew/Latin logo alphabet; body typography stays Rubik. */
@font-face{font-family:'Prestige Membership';src:url('/assets/fonts/prestige-membership-v1.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.membership-wordmark{display:inline-flex;vertical-align:middle;align-items:center;direction:rtl;unicode-bidi:isolate;background:#06324a;border-radius:.15em;padding:.06em .15em;font-size:1.6em;line-height:1;white-space:nowrap;color:#f2e3ce}
.membership-wordmark__letters{display:inline-flex;direction:rtl;align-items:baseline;gap:.04em;font-family:'Prestige Membership',sans-serif;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;line-height:1;-webkit-text-stroke:.012em #fff8e9;paint-order:stroke fill;text-shadow:0 0 .09em #f2e3ce70}
.membership-wordmark__i{position:relative}.membership-wordmark__i svg{position:absolute;width:.43em;height:.43em;top:-.03em;left:-.04em;color:#e85e46;filter:none}
.membership-wordmark--display{font-size:clamp(52px,6vw,96px);padding:.08em .12em .04em;background:transparent}.membership-wordmark--display .membership-wordmark__letters{text-shadow:0 0 .08em #fff8e960,0 0 .22em #fff8e938}
@media(forced-colors:active){.membership-wordmark{background:Canvas;color:CanvasText}.membership-wordmark__letters{-webkit-text-stroke:0;text-shadow:none}.membership-wordmark__i svg{color:CanvasText}}