/* Keep the contact and navigation groups together as the header wraps. */
.rossko-storefront .utility-inner {
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 2px;
}
.rossko-storefront .utility-inner .utility-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  min-width: 0;
}
.utility-contact > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}
.utility-contact .icon { width: 15px; height: 15px; flex: none; }
.utility-contact .utility-phone { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rossko-storefront .utility-inner .utility-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 clamp(12px, 1.4vw, 22px);
  margin: 0 0 0 auto;
}
.rossko-storefront .utility-inner .utility-navigation > a:any-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  white-space: nowrap;
}
.rossko-storefront .forward-footer .footer-directory {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(18px, 3vw, 42px);
  padding-block: 8px 20px;
}
.rossko-storefront .footer-directory > div { min-width: 0; }
.rossko-storefront .footer-directory > div:last-child {
  display: block;
  grid-column: auto;
  padding-top: 0;
  border: 0;
}
.rossko-storefront .footer-directory h3 { margin: 0 0 12px; }
.rossko-storefront .footer-directory > div > a {
  width: fit-content;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.footer-shop-address {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  font-style: normal;
}
.footer-shop-address a {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  width: fit-content;
}
.footer-shop-address .icon {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--muted);
}
.footer-shop-city { display: block; }
.footer-shop-phone { font-size: 16px; font-weight: 700; white-space: nowrap; }
.footer-shop-location { color: var(--muted); }
.footer-shop-location strong { font-weight: 600; color: var(--ink); }
.footer-shop-address a:hover { text-decoration: underline; }
.rossko-storefront .forward-footer .footer-bottom { margin-top: 8px; }
.rossko-storefront .forward-footer a:focus-visible,
.rossko-storefront .utility-contact a:focus-visible { outline: 2px solid #255e9a; outline-offset: 3px; }

.rossko-storefront [data-brand-marquee] .brands-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rossko-storefront .brand-pause { min-height: 44px; padding-inline: 8px; }
.rossko-storefront [data-brand-marquee] .brands-window:focus-visible {
  outline: 2px solid #255e9a;
  outline-offset: 3px;
}

/* The desktop crop keeps the text on the dark side of the image. On phones the copy sits below it. */
.rossko-storefront .forward-hero.forward-hero-workshop {
  display: flex;
  align-items: center;
  height: 300px;
  min-height: 300px;
  background: #171c21;
}
.rossko-storefront .forward-hero-workshop .hero-plate {
  width: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 1;
}
.rossko-storefront .forward-hero-workshop .hero-shade {
  background: linear-gradient(90deg, #10151be8, #10151b78 32%, transparent 65%);
}
.rossko-storefront .forward-hero-workshop .forward-hero-copy h1,
.rossko-storefront .forward-hero-workshop .forward-hero-copy p { color: #fff; }
.rossko-storefront .home-support-panel.home-support-photo {
  isolation: isolate;
  background: #22272d;
  color: #fff;
}
.home-support-photo .home-support-image, .home-support-photo::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-support-photo .home-support-image { z-index: -2; object-fit: cover; object-position: right center; }
.home-support-photo::before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #121820f7, #121820c9 45%, #1218201f);
}
.rossko-storefront .home-support-photo .home-panel-heading h2,
.rossko-storefront .home-support-photo .home-panel-heading p,
.rossko-storefront .home-support-photo .home-support-note,
.rossko-storefront .home-support-photo .home-support-actions .text-link { color: #fff; }

@media (max-width: 950px) {
  .rossko-storefront .utility-inner .utility-navigation > a.utility-secondary:any-link { display: none; }
}
@media (max-width: 700px) {
  .rossko-storefront .utility-inner .utility-contact {
    width: 100%;
    justify-content: space-between;
    gap: 0 10px;
  }
  .utility-contact > a { min-height: 32px; }
  .rossko-storefront .utility-inner .utility-navigation { display: none; }
  .rossko-storefront .forward-footer .footer-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .rossko-storefront .forward-footer .footer-contact-details {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
  }
  .rossko-storefront .forward-hero.forward-hero-workshop { display: grid; height: auto; min-height: 0; }
  .rossko-storefront .forward-hero-workshop .hero-plate {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1.85 / 1;
    object-fit: cover;
    object-position: right center;
  }
  .rossko-storefront .forward-hero-workshop .hero-shade { display: none; }
  .rossko-storefront .forward-hero-workshop .forward-hero-copy {
    position: relative;
    width: auto;
    max-width: none;
  }
  .rossko-storefront .home-support-photo .home-support-actions { flex-wrap: wrap; }
}

.rossko-storefront .forward-header .catalog-button.button.primary {
  background: var(--orange-strong);
  color: #fff;
}
.rossko-storefront .forward-header .catalog-button.button.primary:hover {
  background: #b42a16;
  color: #fff;
}
.rossko-storefront .forward-header .catalog-button.button.primary:focus-visible {
  outline: 2px solid #20231f;
  outline-offset: 3px;
}
.rossko-storefront .forward-footer .footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  text-align: left;
  gap: 10px;
}
.rossko-storefront .forward-footer .footer-brand-logo {
  width: clamp(126px, 16vw, 170px);
}
.rossko-storefront .footer-brand-logo .forward-wordmark-image { width: 100%; }
.rossko-storefront .forward-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.rossko-storefront [data-brand-marquee] .brands-window {
  overflow-x: auto;
  cursor: grab;
  scrollbar-width: none;
  container-type: inline-size;
}
.rossko-storefront [data-brand-marquee] .brands-window::-webkit-scrollbar { display: none; }
.rossko-storefront [data-brand-marquee] .brands-window.is-dragging,
.rossko-storefront [data-brand-marquee] .brands-window.is-dragging a {
  cursor: grabbing;
  user-select: none;
}
.rossko-storefront [data-brand-marquee] .brands-track { display: flex; width: max-content; }
.rossko-storefront [data-brand-marquee] .brands-group {
  display: flex;
  width: max-content;
  min-width: calc(100cqw + 2px);
  gap: clamp(12px, 2vw, 26px);
  padding-inline: 8px;
}
.rossko-storefront [data-brand-marquee] .brands-group[hidden] { display: none; }
.rossko-storefront [data-brand-marquee] .brands-group > a {
  flex: 0 0 clamp(116px, 14vw, 176px);
  width: auto;
  text-align: center;
}
.forward-card-pick { position: relative; min-width: 0; }
.forward-card-pick > .product-card { height: 100%; }
.forward-pick-badge {
  position: absolute;
  z-index: 2;
  inset: 8px auto auto 8px;
  max-width: calc(100% - 16px);
  padding: 4px 8px;
  border-radius: 6px;
  background: #ffe28a;
  color: #302600;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

/* Keep the wide offer table and its positioned labels inside its scroll area. */
.rossko-storefront .offer-table-scroll { position: relative; }

.rossko-storefront .spec-list dt,
.rossko-storefront .spec-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
}