/* White / calm D — opt-in shell only.
 * Load after legacy shell styles. Supply Archivo 400 separately.
 * No review banner, page-content palette reset, or menu/consent JS changes.
 */
body[data-white-calm] {
  --white-shell-paper: #fff;
  --white-shell-ink: #292a28;
  --white-shell-dim: #60615e;
  --white-shell-line: #e6e7e3;
  --white-shell-pad: clamp(18px, 3.4vw, 54px);
  --white-shell-font: "Archivo", Arial, sans-serif;
  --white-shell-nav-height: 72px;
  background-color: var(--white-shell-paper);
}

/* IDs are the inspected home / Sencha shells; .nav is shared-shell support.
 * Important is restricted to shell contrast against legacy inline writers.
 * Do not set opacity, visibility, transform, or display on dropdown roots.
 */
body[data-white-calm] :is(#nav, #topnav, .nav) {
  background: var(--white-shell-paper) !important;
  color: var(--white-shell-ink) !important;
  border-bottom: 1px solid var(--white-shell-line);
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none;
  font-family: var(--white-shell-font);
  font-weight: 400;
  text-shadow: none !important;
}

/* Keep the production nav at zero: D's 44px review strip is not shipped.
 * Use a minimum, not a fixed height, so localized/injected controls can wrap.
 */
body[data-white-calm] :is(#nav, #topnav) {
  top: 0;
  height: auto;
  min-height: var(--white-shell-nav-height);
  padding: 10px var(--white-shell-pad);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(a, button, select, option, label, b, strong, span, small) {
  font-family: var(--white-shell-font);
  font-weight: 400;
  color: var(--white-shell-ink) !important;
  text-shadow: none !important;
}

body[data-white-calm] :is(#nav, #topnav, .nav) a:not([aria-disabled="true"]) {
  opacity: 1;
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(.navlinks, .links, .c, .navright, .r) {
  font-family: var(--white-shell-font);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .1em;
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(.navlinks, .links, .c) > a,
body[data-white-calm] :is(#nav, #topnav, .nav) .ndrop > a {
  font-size: 11px;
  letter-spacing: .1em;
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(.brandlock, .logo) {
  min-width: 0;
}

/* Both inspected logo src variants are monochrome. This survives the old
 * white/dark src switch without changing the image, alt text, or its URL.
 */
body[data-white-calm] :is(#nav, #topnav, .nav) :is(.brandlock img, .logo img, img.logo, #navlogo) {
  width: 34px;
  height: 40px;
  flex: 0 0 34px;
  object-fit: contain;
  filter: brightness(0) opacity(.84) !important;
  mix-blend-mode: normal !important;
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(.brandlock, .logo) .col {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .03em;
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(.brandlock, .logo) .div {
  background: var(--white-shell-line) !important;
}

body[data-white-calm] :is(#nav, #topnav, .nav) .cart {
  background: var(--white-shell-paper) !important;
  border-color: var(--white-shell-line);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body[data-white-calm] :is(#nav, #topnav, .nav) .cart .cdot {
  background: var(--white-shell-ink) !important;
}

body[data-white-calm] :is(#nav, #topnav, .nav) .burger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent !important;
}

body[data-white-calm] :is(#nav, #topnav, .nav) .burger span {
  background: var(--white-shell-ink) !important;
}

body[data-white-calm] :is(#nav, #topnav, .nav) select {
  min-height: 44px;
  max-width: 100%;
  background-color: var(--white-shell-paper) !important;
  border-color: var(--white-shell-line);
  color-scheme: light;
}

body[data-white-calm] :is(#nav, #topnav, .nav) .ndm {
  background: var(--white-shell-paper) !important;
  color: var(--white-shell-ink) !important;
  border: 1px solid var(--white-shell-line);
  border-radius: 0;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none;
}

body[data-white-calm] #nav .ndm {
  top: 100%;
}

body[data-white-calm] :is(#nav, #topnav, .nav) .ndm a {
  min-height: 38px;
  border-color: var(--white-shell-line);
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(.ndl, .ndm-foot, .ndall) {
  font-family: var(--white-shell-font) !important;
  font-weight: 400;
  border-color: var(--white-shell-line);
}

body[data-white-calm] :is(#nav, #topnav, .nav) :is(.lang a.on, .lang a[aria-current="page"]) {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* The original .on / .openm / shared-controller states remain authoritative.
 * In particular, do not force a closed drawer to display or transform:none.
 */
body[data-white-calm] :is(.mm, .mmenu, .mnav) {
  background: var(--white-shell-paper) !important;
  color: var(--white-shell-ink) !important;
  font-family: var(--white-shell-font);
  font-weight: 400;
  border-color: var(--white-shell-line);
  box-shadow: none;
  text-shadow: none !important;
}

body[data-white-calm] :is(.mm, .mmenu, .mnav) :is(a, button, select, option, label, b, strong, span, small) {
  font-family: var(--white-shell-font);
  font-weight: 400;
  color: var(--white-shell-ink) !important;
  border-color: var(--white-shell-line);
  text-shadow: none !important;
}

body[data-white-calm] :is(.mm, .mmenu) a {
  min-height: 44px;
  line-height: 1.4;
  opacity: 1;
}

body[data-white-calm] .mm li {
  padding: 2px 0;
  border-color: var(--white-shell-line);
}

body[data-white-calm] .mm li > a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-block: 9px;
}

body[data-white-calm] .mm li.msub > a {
  padding-left: 16px;
}

body[data-white-calm] :is(.mm .x, .mmenu .mclose) {
  min-width: 44px;
  min-height: 44px;
  background: transparent !important;
}

body[data-white-calm] :is(.mm .mlang, .mmenu .mfoot) {
  flex-wrap: wrap;
  color: var(--white-shell-dim);
}

body[data-white-calm] :is(.mm .mlang, .mmenu .mfoot) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding-block: 12px;
}

body[data-white-calm] :is(.mm, .mmenu, .mnav) select {
  min-height: 44px;
  max-width: 100%;
  background-color: var(--white-shell-paper) !important;
  color-scheme: light;
}

/* White footer; only the inspected text/form hooks are recolored.
 * No footer-wide descendant reset: consent panels keep their own actions,
 * error/success states, hidden/open state, and native disclosure semantics.
 */
body[data-white-calm] footer {
  background: var(--white-shell-paper);
  color: var(--white-shell-ink);
  border-top: 1px solid var(--white-shell-line);
  font-family: var(--white-shell-font);
  font-weight: 400;
}

body[data-white-calm] footer.sfooter {
  padding: 65px var(--white-shell-pad) 28px;
}

body[data-white-calm] footer :is(.fgrid h4, .fgrid h5, .fgrid li a, .fsub, .fbottom, .fnotice, noscript p) {
  color: var(--white-shell-dim);
  font-family: var(--white-shell-font);
  font-weight: 400;
  text-shadow: none;
}

body[data-white-calm] footer .fgrid h4 {
  color: var(--white-shell-ink);
}

body[data-white-calm] footer .fgrid h5 {
  font-size: 12px;
  letter-spacing: .025em;
  text-transform: none;
}

body[data-white-calm] footer .fgrid li a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 12px;
}

body[data-white-calm] footer :is(.fgrid li a:hover, .fbottom a:hover) {
  color: var(--white-shell-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-white-calm] footer .fsub {
  letter-spacing: .08em;
}

body[data-white-calm] footer .fbottom {
  border-color: var(--white-shell-line);
  font-size: 10px;
  letter-spacing: .025em;
  text-transform: none;
}

body[data-white-calm] footer .fseal {
  background: #9b9e95;
}

body[data-white-calm] footer .fnews {
  max-width: 100%;
  flex-wrap: wrap;
}

body[data-white-calm] footer .fnews :is(input, button) {
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  border: 1px solid var(--white-shell-line);
  border-radius: 0;
  background: var(--white-shell-paper);
  color: var(--white-shell-ink);
  font-family: var(--white-shell-font);
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: none;
}

body[data-white-calm] footer .fnews input::placeholder {
  color: var(--white-shell-dim);
  opacity: 1;
}

body[data-white-calm] footer details,
body[data-white-calm] footer details > summary {
  font-family: var(--white-shell-font);
  font-weight: 400;
}

/* Focus is shell-local, never a reset of product/configurator controls. */
body[data-white-calm] :is(#nav, #topnav, .nav, .mm, .mmenu, .mnav, footer) :is(a, button, select, input, summary):focus-visible {
  outline: 1px solid var(--white-shell-ink);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  body[data-white-calm] :is(#nav, #topnav) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
  }

  /* Only the desktop link cluster is replaced by its existing drawer. */
  body[data-white-calm] #nav .navlinks,
  body[data-white-calm] #topnav .links {
    display: none;
  }

  body[data-white-calm] :is(#nav, #topnav) .burger {
    display: flex;
    flex-direction: column;
  }

  body[data-white-calm] :is(#nav, #topnav) .navright {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 10px;
    font-size: 11px;
    letter-spacing: .04em;
  }

  /* Override the old mobile hide rules, not language/currency/cart state.
   * Semantic [hidden] remains hidden; injected select wrappers are not hidden.
   */
  body[data-white-calm] :is(#nav, #topnav) .navright .lang:not([hidden]),
  body[data-white-calm] :is(#nav, #topnav) .navright .cart:not([hidden]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex-shrink: 0;
  }

  body[data-white-calm] :is(#nav, #topnav) .navright .lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 780px) {
  body[data-white-calm] {
    --white-shell-nav-height: 64px;
  }

  /* Two explicit rows on inspected shells avoid hiding commerce controls.
   * The fixed header may grow again if a currency widget needs another row;
   * the page integrator must reserve its measured height, not assume 64px.
   */
  body[data-white-calm] :is(#nav, #topnav) {
    row-gap: 4px;
  }

  body[data-white-calm] :is(#nav, #topnav) > :is(.brandlock, .logo) {
    grid-row: 1;
    grid-column: 1;
    min-height: 44px;
    padding-right: 44px;
  }

  body[data-white-calm] :is(#nav, #topnav) .navright {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: flex-start;
  }

  body[data-white-calm] :is(#nav, #topnav) .navright .burger {
    position: absolute;
    top: 10px;
    right: var(--white-shell-pad);
  }

  body[data-white-calm] footer .fgrid li a {
    min-height: 44px;
    font-size: 12px;
  }
}