/* ONE navigation bar: it sits at the landing's foot, then stays at the top.
   Scrolling never changes its contents, dimensions, or appearance. */
:root {
  --overcloq-nav-height: 44px;
  /* The landing is one full screen: the viewport minus the nav bar below it.
     (Unlike product pages, the landing never overshoots to hint below.) */
  --landing-h: calc(var(--oc-snap-viewport-h, 100svh) - var(--overcloq-nav-height));
}

/* Fit the entire 6241x3300 image inside the available viewport while
   using as much width as possible. The artwork stays in normal flow so its
   bottom is never cropped by the hero, and the nav follows without a gap. */
.landing-screen { height: auto; min-height: 0; }
.landing-screen > .hero.hero--lineup { flex: 0 0 auto; }
/* On landscape screens, fill the first screen by extending
   the cream hero above the artwork. The artwork retains its complete aspect
   ratio and meets the nav below. Portrait screens of any width use the
   portrait composition instead (hero-switcher.css), which fills --landing-h. */
@media (min-width: 691px) and (orientation: landscape) {
  .landing-screen {
    min-height: var(--landing-h);
    background: #e3d8ca;
  }
  .landing-screen > .hero.hero--lineup {
    flex: 1 0 auto;
    justify-content: flex-end;
  }
}
.hero--lineup .hero-art {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: auto;
  height: min(52.87614164vw, var(--landing-h));
  max-width: 100%;
  aspect-ratio: 6241 / 3300;
  align-self: center;
}
.hero--lineup .hero-lineup-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-index--combined {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  padding: 0;
  background: #FAF7F0;
  /* The three cream button shades provide their own separation. */
  border: 0;
}

/* Three stepped cream shades replace dividers. One unchanged strip whether
   resting at the hero's foot or sticking to the top. */
.product-index--combined .shell { width: 100%; }
.product-index--combined .index-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 0;
}

.product-index--combined .index-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(6px, 1.25vw, 16px);
  position: relative;
  min-width: 0;
  min-height: 43px;
  margin: 0;
  padding: 5px clamp(16px, 3.5vw, 70px) !important;
  border: 0;
  color: #181918;
  white-space: nowrap;
  transition: filter .15s ease;
}

.product-index--combined .index-link--primary { background: #b5aa99; }
.product-index--combined .index-link--b2b { background: #d2c9bd; }
.product-index--combined .index-link--contact { background: #e9e2d8; }

.product-index--combined .index-link + .index-link { border-left: 0 !important; }
.product-index--combined .index-name {
  display: block;
  padding: 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.product-index--combined .index-link--utility .index-name {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 650;
  letter-spacing: -.025em;
}
.product-index--combined .index-arrow {
  position: static;
  flex: 0 0 auto;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  font-size: 16px;
  line-height: 1;
  color: #4d473e;
  transition: transform .15s;
}
.product-index--combined .index-link:hover,
.product-index--combined .index-link:focus-visible {
  color: #181918;
  filter: brightness(.96);
}
.product-index--combined .index-link:hover .index-arrow {
  transform: translate(2px, -2px);
}

/* Keep every button in the same row at all widths. */
@media (max-width: 1000px) {
  :root { --overcloq-nav-height: 39px; }
  .product-index--combined .index-link {
    min-height: 38px;
    padding: 4px clamp(9px, 1.5vw, 18px) !important;
  }
  .product-index--combined .index-name { font-size: clamp(15px, 1.8vw, 18px); }
  .product-index--combined .index-link--utility .index-name { font-size: clamp(15px, 1.8vw, 18px); }
  .product-index--combined .index-arrow { font-size: 13px; }
}
@media (max-width: 690px) {
  /* On phones, show the image at full width and its natural height. */
  .hero--lineup .hero-art { width: 100%; height: auto; }
  .hero--lineup .hero-lineup-image { height: auto; }
  :root { --overcloq-nav-height: 36px; }
  .product-index--combined .shell { width: 100%; }
  .product-index--combined .index-link {
    min-height: 35px;
    padding: 4px clamp(7px, 1.6vw, 12px) !important;
  }
  .product-index--combined .index-name { font-size: clamp(14px, 2.3vw, 16px); }
  .product-index--combined .index-link--utility .index-name { font-size: clamp(14px, 2.3vw, 16px); }
  .product-index--combined .index-arrow { font-size: 12px; }
}
@media (max-width: 540px) {
  :root { --overcloq-nav-height: 33px; }
  .product-index--combined .index-link { min-height: 32px; padding: 4px clamp(6px, 1.5vw, 9px) !important; }
  .product-index--combined .index-name,
  .product-index--combined .index-link--utility .index-name {
    font-size: clamp(13px, 2.9vw, 15px);
    letter-spacing: -.035em;
  }
  /* The three labels always fit without wrapping. */
  .product-index--combined .index-arrow { display: none; }
}

/* Keep the sticky bar and the landing-foot bar exactly the same height.
   The previous subtitle crop was taller than the reserved navigation height,
   so part of the bar was hidden at the bottom of the landing viewport. */
.product-index--combined .shell,
.product-index--combined .index-links {
  height: var(--overcloq-nav-height);
}
.product-index--combined .index-link {
  box-sizing: border-box;
  height: var(--overcloq-nav-height);
  min-height: var(--overcloq-nav-height);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: flex-end;
  text-align: right;
}
.product-index--combined .index-link--primary {
  justify-content: space-between;
  padding-left: clamp(5px, .65vw, 10px) !important;
}
.product-index--combined .index-nav-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(3px, .5vw, 8px);
  margin-left: auto;
  white-space: nowrap;
}
.product-index--combined .index-nav-label .index-arrow {
  display: inline-block;
  flex: 0 0 auto;
  font-size: clamp(11px, 1vw, 16px);
}
/* Crop only the SVG's subtitle. Reuse the actual hero SVG so its current
   symbol, lettering, colors and TM stay identical, while showing the mark
   larger than when the entire subtitle-bearing image was scaled to fit. */
.product-index--combined .index-brand-crop {
  display: block;
  overflow: hidden;
  flex: 0 1 180px;
  width: 180px;
  min-width: 0;
  /* The visible logo occupies SVG rows ~30-166. Cropping by aspect ratio
     keeps its subtitle hidden even when flexbox shrinks the logo on phones. */
  aspect-ratio: 820 / 150;
  pointer-events: none;
}
.product-index--combined .index-brand {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
@media (max-width: 1000px) {
  .product-index--combined .index-brand-crop {
    flex-basis: 146px;
    width: 146px;
  }
}
@media (max-width: 690px) {
  .product-index--combined .index-brand-crop {
    flex-basis: 128px;
    width: 128px;
  }
  .product-index--combined .index-nav-label {
    gap: 3px;
  }
  .product-index--combined .index-nav-label .index-arrow {
    font-size: 11px;
  }
}
@media (max-width: 540px) {
  .product-index--combined .index-brand-crop {
    flex-basis: 110px;
    width: 110px;
  }
  .product-index--combined .index-nav-label { gap: 2px; }
  .product-index--combined .index-nav-label .index-arrow { font-size: 10px; }
}

/* On small widths, the brand is optional decoration: protect the complete
   View Our Products label and its arrow first. Any space shortage must be
   absorbed by the logo instead of squeezing the text. */
.product-index--combined .index-link--primary {
  column-gap: clamp(9px, 1.2vw, 16px);
}
.product-index--combined .index-link--primary .index-nav-label {
  flex: 0 0 auto;
  min-width: max-content;
}
.product-index--combined .index-link--primary .index-name {
  flex: 0 0 auto;
}
.product-index--combined .index-link--primary .index-brand-crop {
  flex-shrink: 1;
  min-width: 0;
}
@media (max-width: 540px) {
  /* Keep the CTA readable even while the brand has to shrink. */
  .product-index--combined .index-link--primary .index-name {
    font-size: clamp(14px, 2.9vw, 15px);
  }
}
@media (max-width: 350px) {
  /* At extreme widths the full text wins over a barely legible logo. */
  .product-index--combined .index-link--primary .index-brand-crop {
    display: none;
  }
}

/* On narrow screens, retain the desktop brand-to-label proportions when
   room allows. The brand is still flex-shrinkable, while the label remains
   non-shrinking and the gap is reserved before any brand space is assigned. */
@media (max-width: 690px) {
  .product-index--combined .index-link--primary {
    column-gap: clamp(10px, 2vw, 12px);
  }
  .product-index--combined .index-link--primary .index-brand-crop {
    flex: 0 1 clamp(48px, 19vw, 126px);
    width: clamp(48px, 19vw, 126px);
    max-width: clamp(48px, 19vw, 126px);
  }
}

/* Quiet branding in the first nav button: the original cream SVG blends
   with its taupe background, reading as a subtle, lighter imprint. */
.product-index--combined .index-brand-crop {
  opacity: .28;
}

/* The three-button strip gets especially tight below 350px. Keep these
   labels at their previous readable size rather than crowd neighboring links. */
@media (max-width: 350px) {
  .product-index--combined .index-name,
  .product-index--combined .index-link--utility .index-name {
    font-size: 12px;
  }
  .product-index--combined .index-link--primary .index-name {
    font-size: 13px;
  }
}