/* SwissAccs customer layer. Loaded last. Familiar shop, not a brand film. */

/* Return visit in this tab: no splash, no slogan film. */
html.sa-return #page-loader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}
html.sa-return #landing-intro,
html.sa-return .landing-intro,
html.sa-return #bd-intro,
html.sa-return .bd-intro,
html.sa-return #yt-intro,
html.sa-return .yt-intro {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* A full-page fade on every click reads as another loading screen. */
html.sa-ready body,
html.sa-bridge-enter body {
  animation: none !important;
}
html.sa-bridge-enter::before {
  display: none !important;
  animation: none !important;
}

html {
  scroll-padding-top: calc(68px + env(safe-area-inset-top, 0px));
  scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Logo sits in the row. It never floats over a field or a link. */
nav.site-nav .logo,
.footer-brand .logo,
footer .logo,
.success-nav-logo {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
}
nav.site-nav .logo-img,
.footer-brand .logo-img {
  height: 22px !important;
  max-height: none !important;
  width: auto !important;
  max-width: 148px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
}
@media (min-width: 901px) {
  nav.site-nav .logo-img { height: 26px !important; max-width: 168px !important; }
}

/* One header on the phone: logo, cart, marketplace menu. */
@media (max-width: 900px) {
  body:has(#navMenu) nav.site-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: 52px !important;
    max-height: none !important;
    padding: env(safe-area-inset-top, 0px) 112px 0 16px !important;
    background: rgba(7, 10, 8, 0.94) !important;
    background-color: rgba(7, 10, 8, 0.94) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
  }
  body:has(#navMenu) nav.site-nav .mob-hamburger,
  body:has(#navMenu) nav.site-nav .store-hub-nav,
  body:has(#navMenu) nav.site-nav .nav-links > a {
    display: none !important;
  }
  body:has(#navMenu) nav.site-nav .logo {
    position: static !important;
    transform: none !important;
    margin-right: auto !important;
    max-width: 42vw !important;
    grid-column: auto !important;
    justify-self: start !important;
  }
  body:has(#navMenu) nav.site-nav .nav-links {
    display: flex !important;
    margin-left: auto !important;
    position: static !important;
  }
  body:has(#navMenu) .nav-cart-btn {
    color: #f4f7f5 !important;
  }
  .nav-menu {
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
  }
}

/* Prices: a normal strikethrough, not a bar that misses the digits. */
.hero-v2 .hpf-from .hpf-val,
.hps-old,
.price-old,
.price-col-amount.retail-price,
.cat-old {
  text-decoration: line-through !important;
  text-decoration-color: #ff5d5d !important;
  text-decoration-thickness: 2px !important;
  text-decoration-skip-ink: none !important;
}
.hero-v2 .hpf-val::after,
.hero-v2 .hpf-from .hpf-val::after,
.hps-old::after,
.price-col-amount.retail-price::after {
  content: none !important;
  display: none !important;
}
.hpf-val-new,
.hero-v2 .hpf-val-new,
.price-new,
.hps-new {
  text-decoration: none !important;
}

/* Decorative layers must not make the page swipe sideways. */
html, body { overflow-x: clip !important; max-width: 100%; }
.marquee-wrap,
.hero-brands,
.hb-strip,
.hero,
.hero.hero-v2,
.mechanism-section {
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* Chat button is an icon. Hidden over the hero price, back after you scroll. */
body:has(.hero-v2) .wa-float {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.sa-chat-on .wa-float {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.wa-float {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: nowrap !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  right: 14px !important;
}
.wa-float .wa-label,
.wa-float .wa-label-short {
  display: none !important;
}
.wa-float .wa-icon {
  font-size: 16px !important;
  line-height: 0 !important;
}
/* Checkout pages already have a pay bar and a Support link.
   The home services sit in the same corner, so the chip stays in the menu. */
body.svc .wa-float,
body.hub .wa-float { display: none !important; }
body:has(.cart-panel.open) .wa-float,
body:has(.nav-menu.is-open) .wa-float,
body:has(.mob-menu.open) .wa-float {
  display: none !important;
}
nav.site-nav .logo,
.nav-logo {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center !important;
}
html.sa-return .svc-hero,
html.sa-return .svc-section:not(.is-dim) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html.sa-return .svc-section.is-dim {
  animation: none !important;
  opacity: 0.38 !important;
  transform: none !important;
}
.wa-float .wa-icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}

/* While typing, nothing sits on the field. Keyboard owns the bottom. */
body:has(input:focus, textarea:focus, select:focus) .wa-float,
body.sa-scrolling .wa-float {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.svc:has(input:focus, textarea:focus, select:focus) .pay-bar-inner {
  transform: translateY(130%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.svc {
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}
input, textarea, select {
  scroll-margin-top: 88px;
  scroll-margin-bottom: 140px;
}
@media (max-width: 900px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #page-loader,
  .loader-symbol,
  .loader-text,
  .loader-bar > i,
  .hero-blob,
  .orb,
  .btn-how,
  .btn-how-ring,
  .marquee-track {
    animation: none !important;
  }
}