/* /css/helperg-weather.css
   The HELPERG weather card in the PetroHrys header, and its details panel.
   Loaded only by the pages that carry the card (scripts/inject-helperg-weather.cjs).
   Layout follows HELPERG's header card (icon | place | temperature, with the
   basis caption beneath); colours are this site's tokens, so the card reads as
   part of the header rather than as a foreign banner. */

.ph-wx {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--ff-sans);
}

.ph-wx__card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  width: 188px;
  height: 40px;
  /* The card is taller than the text line it sits beside; the negative block
     margin keeps the header exactly as tall as it was without it. */
  margin-block: -6px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-blue);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.ph-wx__card:hover { border-color: var(--blue); }
.ph-wx__card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ph-wx.is-open .ph-wx__card { border-color: var(--blue-strong); }

.ph-wx__icon { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; color: var(--blue); }
.ph-wx__icon svg { display: block; width: 24px; height: 24px; }
.ph-wx__place {
  grid-column: 2; grid-row: 1; align-self: end;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 1.15;
}
.ph-wx__temp {
  grid-column: 3; grid-row: 1; align-self: end;
  font-size: 17px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ph-wx__caption {
  grid-column: 2 / 4; grid-row: 2; align-self: start;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; line-height: 1.3; color: var(--text-3);
}

.ph-wx[data-ph-wx-theme="night"] .ph-wx__card { background: linear-gradient(120deg, #12283f, #202844); border-color: #354666; color: #f2f7ff; }
.ph-wx[data-ph-wx-theme="night"] .ph-wx__icon { color: #c4d4e9; }
.ph-wx[data-ph-wx-theme="night"] .ph-wx__caption { color: #c4d4e9; }
.ph-wx[data-ph-wx-state="loading"] .ph-wx__temp { opacity: 0.55; }

/* ---- the details panel ---- */

.ph-wx__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 102;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ph-wx__panel[hidden] { display: none; }
.ph-wx__panel p { margin: 0; }
.ph-wx__panel [hidden] { display: none !important; }

.ph-wx__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ph-wx__title { font-family: var(--ff-serif); font-size: var(--fs-md); font-weight: 500; line-height: 1.25; }
.ph-wx__basis { margin-top: 2px !important; font-size: var(--fs-xs); color: var(--text-3); }
.ph-wx__close {
  flex: 0 0 auto; width: 32px; height: 32px; margin: -6px -6px 0 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-2);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ph-wx__close:hover { background: var(--hover-tint); }
.ph-wx__close:focus-visible, .ph-wx__panel :is(button, select, input):focus-visible, .ph-wx__panel a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ph-wx__reading { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ph-wx__big-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--blue); }
.ph-wx__big-icon svg { width: 44px; height: 44px; }
.ph-wx__big-temp { display: block; font-size: 30px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ph-wx__words { display: block; color: var(--text-2); }

.ph-wx__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 12px 0 0; }
.ph-wx__facts div { min-width: 0; }
.ph-wx__facts dt { font-size: var(--fs-xs); color: var(--text-3); }
.ph-wx__facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

.ph-wx__when, .ph-wx__attr, .ph-wx__flow, .ph-wx__copy-out { margin-top: 10px !important; font-size: var(--fs-xs); color: var(--text-3); }
.ph-wx__attr a, .ph-wx__panel a { color: var(--blue-strong); }
.ph-wx__status:not(:empty) { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-soft); font-size: var(--fs-xs); color: var(--text); }

/* A time-zone suggestion is a name until asked for: one clear action. */
.ph-wx__show {
  box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 12px; padding: 8px 12px;
  border: 1px solid var(--blue-strong); border-radius: 8px; background: var(--blue-strong);
  color: var(--surface); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.ph-wx__show:hover { background: var(--blue); border-color: var(--blue); }
.ph-wx__show:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ph-wx__pending { margin-top: 8px !important; font-size: var(--fs-xs); color: var(--text-3); }

.ph-wx__controls {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: var(--rule-w) solid var(--rule);
}
.ph-wx__label { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ph-wx__select, .ph-wx__button, .ph-wx__retry {
  box-sizing: border-box; min-height: 40px; padding: 6px 10px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.ph-wx__select { width: 100%; min-width: 0; }
.ph-wx__button, .ph-wx__retry { cursor: pointer; color: var(--blue-strong); font-weight: 500; }
.ph-wx__button:hover, .ph-wx__retry:hover { border-color: var(--blue); }
.ph-wx__retry { margin-top: 8px; }
.ph-wx__units { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; }
.ph-wx__units legend { float: left; margin-right: 8px; padding: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ph-wx__unit { position: relative; display: inline-flex; }
.ph-wx__unit input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ph-wx__unit span {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--rule); border-radius: 8px; font-weight: 500;
}
.ph-wx__unit input:checked + span { border-color: var(--blue-strong); background: var(--surface-blue); color: var(--blue-strong); }
.ph-wx__unit input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.ph-wx__link-button {
  justify-self: start; padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--blue-strong); font: inherit; font-size: var(--fs-xs); text-decoration: underline;
}
.ph-wx__controls .ph-wx__link-button { grid-column: 1 / -1; }

.ph-wx__goto-title { margin-top: 14px !important; padding-top: 14px; border-top: var(--rule-w) solid var(--rule); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ph-wx__goto-what { margin-top: 2px !important; font-size: var(--fs-xs); color: var(--text-3); }
.ph-wx__goto { display: grid; gap: 2px; margin-top: 4px; }
.ph-wx__go { margin: 0; }
.ph-wx__go-button {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 4px 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--blue-strong); font: inherit; font-size: var(--fs-sm); font-weight: 500;
}
.ph-wx__go-button::after { content: "\2192"; }
.ph-wx__go-button:hover { text-decoration: underline; }

/* ---- narrower headers ---- */

/* Between the mobile menu and the full desktop row the primary navigation is
   still inline, so the card gives up its caption line first. */
@media (max-width: 1080px) and (min-width: 861px) {
  .ph-wx__card { width: 132px; grid-template-rows: auto; }
  .ph-wx__caption { display: none; }
  .ph-wx__icon { grid-row: 1; }
  .ph-wx__place, .ph-wx__temp { align-self: center; }
}

@media (max-width: 860px) {
  /* The menu keeps the far right; the card sits just before it. */
  header > nav > .ph-wx { margin-left: auto; position: static; }
  header > nav > .ph-wx + .nav-mobile { margin-left: 0; }
  .ph-wx__card { width: 164px; }
  /* The panel spans the header on small screens. */
  .ph-wx__panel { left: var(--s-4); right: var(--s-4); width: auto; top: calc(100% + 1px); }
}

/* One caption at a time: the long form, or its few-word version — at narrow
   widths, and whenever the long one would be cut (see fitCaption()). */
.ph-wx__caption-short { display: none; }
.ph-wx--short-caption [data-ph-wx-caption] { display: none; }
.ph-wx--short-caption .ph-wx__caption-short { display: block; }

@media (max-width: 420px) {
  .ph-wx__card { width: 124px; padding: 0 8px; column-gap: 6px; }
  .ph-wx__caption { font-size: 10px; }
  [data-ph-wx-caption] { display: none; }
  .ph-wx__caption-short { display: block; }
}

/* At the narrowest widths the icon (decorative; the words are in the label)
   gives its room to the city name. */
@media (max-width: 360px) {
  /* Wordmark (106px), card (88px) and menu (61px) share 272px here, with 8px gaps. */
  header > nav:has(> .ph-wx) { gap: 8px; }
  .ph-wx__card { width: 88px; padding: 0 6px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; }
  .ph-wx__icon { display: none; }
  .ph-wx__place { grid-column: 1; }
  .ph-wx__temp { grid-column: 2; }
  .ph-wx__caption { grid-column: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-wx__card { transition: none; }
}

@media (forced-colors: active) {
  .ph-wx__card, .ph-wx[data-ph-wx-theme] .ph-wx__card { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .ph-wx__icon, .ph-wx__caption { color: CanvasText; }
}

/* ---- the band under the header (homepages) ----
   The card's details, laid out large right under the header: the reading,
   its facts, and what to do next. The card in the header stays compact and
   takes the visitor here. The band keeps one height across its states (see
   render()), and that height is reserved per width before the script runs,
   so nothing under it moves. */

.ph-wxb {
  /* Clear of the sticky stack (ecosystem bar + header), which the ecosystem
     script measures into --sticky-stack-height. */
  scroll-margin-top: calc(var(--sticky-stack-height, 110px) + 8px);
  border-bottom: var(--rule-w) solid var(--rule);
  background: linear-gradient(120deg, #eaf4fe 0%, #f4f9ff 55%, #eefaf5 100%);
  color: var(--text);
  font-family: var(--ff-sans);
}
.ph-wxb[data-ph-wx-theme="night"] {
  border-bottom-color: #354666;
  background: linear-gradient(120deg, #12283f, #202844);
  color: #f2f7ff;
}
.ph-wxb__inner {
  box-sizing: border-box;
  max-width: var(--col-footer);
  min-height: var(--ph-wxb-height);
  margin: 0 auto;
  padding: 24px var(--s-4) 14px;
}
.ph-wx__panel.ph-wx__panel--band {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 40px;
  align-items: start;
  width: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}
.ph-wxb__col { min-width: 0; }

/* Now: the city, then the reading — or, until it is asked for, the button. */
.ph-wxb .ph-wx__title { font-size: 30px; line-height: 1.1; outline-offset: 4px; }
.ph-wxb .ph-wx__basis { min-height: 2.9em; margin-top: 3px !important; font-size: var(--fs-xs); }   /* two lines, whatever the note */
.ph-wxb__slot { display: flex; align-items: center; min-height: 82px; margin-top: 8px; }
.ph-wxb .ph-wx__reading { gap: 16px; margin-top: 0; }
.ph-wxb .ph-wx__big-icon, .ph-wxb .ph-wx__big-icon svg { width: 64px; height: 64px; }
.ph-wxb .ph-wx__big-temp { font-size: 56px; line-height: 1; }
.ph-wxb .ph-wx__words { margin-top: 2px; font-size: var(--fs-sm); }
.ph-wxb .ph-wx__show { width: auto; min-width: 260px; margin-top: 0; }
/* One reserved place for what the card has to say: the "not requested yet"
   note, a status, "Try again" — so a message never moves the band. Two rows:
   an error's message and "Try again" wrap onto a second one at most widths. */
.ph-wxb__notes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 64px; margin-top: 6px; }
.ph-wxb__notes .ph-wx__status:not(:empty) { margin-top: 0; padding: 4px 8px; }
.ph-wxb .ph-wx__pending { margin-top: 0 !important; }
.ph-wxb .ph-wx__retry { min-height: 32px; margin-top: 0; padding: 2px 10px; }

/* Facts */
.ph-wxb .ph-wx__facts { gap: 8px 20px; margin-top: 4px; }
.ph-wxb .ph-wx__facts dd { font-size: var(--fs-md); line-height: 1.3; }
.ph-wxb .ph-wx__when { min-height: 4.35em; margin-top: 8px !important; }   /* three lines, kept while empty */

/* What to do: city and units, then HELPERG's forecast. */
.ph-wxb__change > summary {
  display: none;
  cursor: pointer;
  min-height: 32px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue-strong);
}
.ph-wxb .ph-wx__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.ph-wxb .ph-wx__select { flex: 1 1 120px; width: auto; }
.ph-wxb .ph-wx__button { flex: 0 1 auto; }
.ph-wxb .ph-wx__units { flex: 0 0 auto; }
.ph-wxb .ph-wx__label {                    /* the select is named by this label; kept for screen readers */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ph-wxb .ph-wx__select, .ph-wxb .ph-wx__button { min-height: 38px; }
.ph-wxb .ph-wx__controls .ph-wx__link-button { flex: 0 0 auto; }
.ph-wxb .ph-wx__goto-title { margin-top: 10px !important; padding-top: 10px; }
.ph-wxb .ph-wx__goto { margin-top: 2px; }
.ph-wxb .ph-wx__goto-what { margin-top: 0 !important; }
.ph-wxb .ph-wx__link-button { padding: 2px 0; }

/* Beneath: the attribution, and the data-flow note folded away. */
.ph-wxb__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
.ph-wxb__foot .ph-wx__attr { flex: 1 1 100%; min-height: 1.45em; margin-top: 0 !important; }   /* its own line, held while empty */
.ph-wxb__about summary { cursor: pointer; min-height: 24px; font-size: var(--fs-xs); color: var(--text-3); }
.ph-wxb__about[open] { flex-basis: 100%; }
.ph-wxb__about .ph-wx__flow { max-width: 78ch; margin-top: 2px !important; }
.ph-wxb :is(summary, .ph-wx__title):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* What comes and goes keeps its place in the band — invisible and out of the
   tab order while it is not there — so no state changes the band's height. */
.ph-wxb .ph-wx__link-button[hidden] { display: inline-block !important; visibility: hidden; }
.ph-wxb .ph-wx__attr[hidden] { display: block !important; visibility: hidden; }

/* Before the script: the same place, the section's name and the way out. */
.ph-wxb__static .ph-wxb__col--act .ph-wx__goto-title { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.ph-wxb__static .ph-wx__go-button { display: inline-flex; width: auto; text-decoration: none; }

/* Night: the band carries the place's own daylight, as the card does. */
.ph-wxb[data-ph-wx-theme="night"] :is(.ph-wx__basis, .ph-wx__words, .ph-wx__when, .ph-wx__attr, .ph-wx__flow,
  .ph-wx__pending, .ph-wx__goto-what, .ph-wx__goto-title, .ph-wx__facts dt, .ph-wxb__about summary, .ph-wx__units legend) { color: #c4d4e9; }
.ph-wxb[data-ph-wx-theme="night"] :is(a, .ph-wx__go-button, .ph-wx__link-button, .ph-wxb__change > summary) { color: #a8d0ff; }
.ph-wxb[data-ph-wx-theme="night"] .ph-wx__goto-title { border-top-color: #354666; }
.ph-wxb[data-ph-wx-theme="night"] .ph-wx__big-icon { color: #c4d4e9; }
.ph-wxb[data-ph-wx-theme="night"] .ph-wx__status:not(:empty) { background: rgba(255, 255, 255, 0.08); color: #f2f7ff; }
.ph-wxb[data-ph-wx-theme="night"] .ph-wx__unit span { border-color: #4a5d80; }
.ph-wxb[data-ph-wx-theme="night"] .ph-wx__unit input:checked + span { border-color: #a8d0ff; background: rgba(168, 208, 255, 0.14); color: #f2f7ff; }
.ph-wxb[data-ph-wx-theme="night"] .ph-wx__title { color: #f2f7ff; }
.ph-wxb[data-ph-wx-theme="night"] :is(button, select, input, a, summary, .ph-wx__title):focus-visible { outline-color: #a8d0ff; }

@media (max-width: 1080px) {
  .ph-wx__panel.ph-wx__panel--band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 32px; }
  .ph-wxb__col--act { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .ph-wxb__col--act > .ph-wxb__change { grid-row: 1 / span 4; }
  .ph-wxb__col--act .ph-wx__goto-title { margin-top: 0 !important; padding-top: 0; border-top: 0; }
}

@media (max-width: 640px) {
  .ph-wxb__inner { padding: 18px var(--s-4) 12px; }
  .ph-wx__panel.ph-wx__panel--band { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ph-wxb__col--act { display: block; }
  .ph-wxb .ph-wx__title { font-size: 24px; }
  .ph-wxb__slot { min-height: 68px; margin-top: 6px; }
  .ph-wxb .ph-wx__big-icon, .ph-wxb .ph-wx__big-icon svg { width: 48px; height: 48px; }
  .ph-wxb .ph-wx__big-temp { font-size: 44px; }
  .ph-wxb .ph-wx__show { width: 100%; min-width: 0; }
  .ph-wxb .ph-wx__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
  .ph-wxb .ph-wx__facts dd { font-size: var(--fs-sm); }
  .ph-wxb__change > summary { display: flex; align-items: center; }
  .ph-wxb__change[open] > summary { margin-bottom: 6px; }
  /* On a phone the button says it all; the heading and the note fold away. */
  .ph-wxb__col--act > .ph-wx__goto-title, .ph-wxb__col--act > .ph-wx__goto-what { display: none; }
  .ph-wxb__col--act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
  .ph-wxb__col--act > .ph-wxb__change { flex: 1 1 100%; }
  .ph-wxb__static .ph-wxb__col--act > .ph-wx__goto-title, .ph-wxb__static .ph-wxb__col--act > .ph-wx__goto-what { display: none; }
}

@media (max-width: 420px) {
  .ph-wxb .ph-wx__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-wxb__foot .ph-wx__attr { min-height: 2.9em; }       /* the attribution takes two lines here */
}

/* The narrowest phones: the Spanish and French error message takes two lines
   before "Try again", and the German time-zone note three. */
@media (max-width: 359px) {
  html[lang="es"] .ph-wxb__notes, html[lang="fr"] .ph-wxb__notes { min-height: 82px; }
  html[lang="de"] .ph-wxb .ph-wx__basis { min-height: 4.35em; }
}

/* The red brand field sits flush under the band (the owner's call): the
   homepage's top spacing, main's and the hero's, is taken out where the band
   is, and so is the band's own bottom rule. The field reaches 1px under the
   band: at a fractional offset the band's background and the field's clip
   round apart, and the page showed through as a white hairline. */
.ph-wxb + main { padding-top: 0; margin-top: -1px; }
.ph-wxb + main > .hero:first-child { padding-top: 0; }
/* The hero's card now starts under the red field. Starting it level with the
   field left its light edge in the seam on 2x and 3x screens; 2px lower, the
   field covers it. */
.ph-wxb + main > .hero:first-child::before { top: 2px; }
@media (forced-colors: none) {
  .ph-wxb:has(+ main > .hero:first-child > .brand-lockup:first-child) { border-bottom: 0; }
}

@media (forced-colors: active) {
  .ph-wxb, .ph-wxb[data-ph-wx-theme] { border-bottom: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* band-reserve:start */
/* Reserved band heights, per language and width range: the tallest the band
   gets in any state, with the site's web fonts and without, plus 6 px. The
   browser suite fails if the band ever changes height. Written by
   scripts/measure-helperg-weather-band.cjs --write; run it again when the
   band's text or layout changes. */
.ph-wxb__inner { --ph-wxb-height: 319px; }
html[lang="de"] .ph-wxb__inner { --ph-wxb-height: 375px; }
html[lang="es"] .ph-wxb__inner { --ph-wxb-height: 329px; }
html[lang="fr"] .ph-wxb__inner { --ph-wxb-height: 329px; }
@media (max-width: 1080px) {
  .ph-wxb__inner { --ph-wxb-height: 440px; }
  html[lang="de"] .ph-wxb__inner { --ph-wxb-height: 440px; }
  html[lang="es"] .ph-wxb__inner { --ph-wxb-height: 440px; }
  html[lang="fr"] .ph-wxb__inner { --ph-wxb-height: 440px; }
}
@media (max-width: 860px) {
  .ph-wxb__inner { --ph-wxb-height: 454px; }
  html[lang="de"] .ph-wxb__inner { --ph-wxb-height: 454px; }
  html[lang="es"] .ph-wxb__inner { --ph-wxb-height: 454px; }
  html[lang="fr"] .ph-wxb__inner { --ph-wxb-height: 454px; }
}
@media (max-width: 767px) {
  .ph-wxb__inner { --ph-wxb-height: 454px; }
  html[lang="de"] .ph-wxb__inner { --ph-wxb-height: 504px; }
  html[lang="es"] .ph-wxb__inner { --ph-wxb-height: 473px; }
  html[lang="fr"] .ph-wxb__inner { --ph-wxb-height: 519px; }
}
@media (max-width: 640px) {
  .ph-wxb__inner { --ph-wxb-height: 494px; }
  html[lang="de"] .ph-wxb__inner { --ph-wxb-height: 494px; }
  html[lang="es"] .ph-wxb__inner { --ph-wxb-height: 494px; }
  html[lang="fr"] .ph-wxb__inner { --ph-wxb-height: 494px; }
}
@media (max-width: 479px) {
  .ph-wxb__inner { --ph-wxb-height: 494px; }
  html[lang="de"] .ph-wxb__inner { --ph-wxb-height: 537px; }
  html[lang="es"] .ph-wxb__inner { --ph-wxb-height: 511px; }
  html[lang="fr"] .ph-wxb__inner { --ph-wxb-height: 519px; }
}
@media (max-width: 420px) {
  .ph-wxb__inner { --ph-wxb-height: 578px; }
  html[lang="de"] .ph-wxb__inner { --ph-wxb-height: 596px; }
  html[lang="es"] .ph-wxb__inner { --ph-wxb-height: 596px; }
  html[lang="fr"] .ph-wxb__inner { --ph-wxb-height: 596px; }
}
/* band-reserve:end */