/* Founarna - unified professional header, mobile menu and homepage showcase, v: 20260713hs6 */

:root {
  --fn-hs-ink: #111827;
  --fn-hs-muted: #667085;
  --fn-hs-line: rgba(80, 91, 120, .13);
  --fn-hs-surface: rgba(255, 255, 255, .96);
  --fn-hs-shadow: 0 18px 46px rgba(31, 42, 70, .13);
  --fn-hs-yellow: #ffc928;
}

html.fn-header-showcase,
html.fn-header-showcase * {
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------
   Permanent store strip, reusing the existing Shoptet top bar height.
   ------------------------------------------------------------------ */
html.fn-header-showcase .top-navigation-bar {
  min-height: 31px;
  border: 0 !important;
  background: #151a24 !important;
  color: #fff !important;
}

html.fn-header-showcase .top-navigation-bar > .container {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 31px;
}

.fn-store-strip {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.fn-store-strip__label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(255, 213, 64, .26);
  border-radius: 999px;
  background: rgba(255, 205, 42, .1);
  color: #ffe28a;
  font-weight: 800;
}

.fn-store-strip__item,
.fn-store-strip__hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none !important;
}

.fn-store-strip__item:hover,
.fn-store-strip__item:focus-visible {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.fn-store-strip svg,
.fn-mobile-menu-footer svg {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.fn-header-showcase .top-navigation-tools {
  position: relative;
  z-index: 3;
  margin-left: auto;
  color: rgba(255, 255, 255, .82) !important;
}

html.fn-header-showcase .top-navigation-tools a,
html.fn-header-showcase .top-navigation-tools button {
  color: inherit !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .fn-store-strip__hours,
  .fn-store-strip__mail {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Desktop navigation: typography + a restrained active line.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  html.fn-header-showcase .header-bottom {
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 1px 0 rgba(31, 42, 70, .06);
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a {
    position: relative !important;
    min-height: 48px !important;
    margin: 6px 2px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--fn-hs-ink) !important;
    font-size: clamp(13px, 1.08vw, 15px) !important;
    font-weight: 760 !important;
    letter-spacing: -.012em;
    transform: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a::before,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a::before {
    content: none !important;
    display: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a::after,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a::after {
    display: none !important;
    content: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a {
    border: 0 !important;
    background: linear-gradient(135deg, rgba(248, 247, 255, .98), rgba(241, 249, 252, .96)) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 82, 156, .1), 0 8px 20px rgba(41, 50, 78, .07) !important;
    transform: none !important;
  }

  html.fn-header-showcase .navigation-in .submenu-arrow,
  html.fn-header-showcase .menu-helper .submenu-arrow {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    content: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li > a *,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a * {
    border-bottom: 0 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-2,
  html.fn-header-showcase .menu-helper .menu-level-2 {
    top: calc(100% - 4px) !important;
    padding: 17px !important;
    border: 1px solid rgba(70, 82, 112, .12) !important;
    border-top: 3px solid rgba(111, 95, 211, .5) !important;
    border-radius: 0 0 24px 24px !important;
    background:
      radial-gradient(circle at 91% 3%, rgba(120, 217, 233, .18), transparent 31%),
      radial-gradient(circle at 7% 100%, rgba(245, 202, 220, .18), transparent 29%),
      rgba(255, 255, 255, .985) !important;
    box-shadow: 0 25px 65px rgba(31, 42, 70, .18) !important;
    backdrop-filter: blur(14px);
  }

  html.fn-header-showcase .navigation-in .menu-level-2 > li,
  html.fn-header-showcase .menu-helper .menu-level-2 > li {
    min-height: 110px !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 17px rgba(31, 42, 70, .055) !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-2 > li:hover,
  html.fn-header-showcase .navigation-in .menu-level-2 > li:focus-within,
  html.fn-header-showcase .menu-helper .menu-level-2 > li:hover,
  html.fn-header-showcase .menu-helper .menu-level-2 > li:focus-within {
    box-shadow: 0 12px 27px rgba(31, 42, 70, .105) !important;
    transform: translateY(-1px) !important;
  }
}

/* ------------------------------------------------------------------
   Mobile hamburger navigation: compact accordion, large tap targets.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  html.fn-header-showcase .top-navigation-bar {
    display: block !important;
    height: 34px !important;
    min-height: 34px !important;
    overflow: hidden;
  }

  html.fn-header-showcase .top-navigation-bar > .container {
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
  }

  html.fn-header-showcase .top-navigation-tools {
    display: none !important;
  }

  .fn-store-strip {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    height: 34px;
    width: 100%;
    font-size: 10.5px;
  }

  .fn-store-strip__label,
  .fn-store-strip__hours,
  .fn-store-strip__mail span {
    display: none;
  }

  .fn-store-strip__address {
    min-width: 0;
    overflow: hidden;
  }

  .fn-store-strip__address span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fn-store-strip__phone {
    padding: 0 5px;
    color: #fff !important;
    font-weight: 800;
  }

  .fn-store-strip__mail {
    display: inline-flex;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 {
    padding: 0 12px 26px !important;
    background:
      radial-gradient(circle at 90% 3%, rgba(121, 210, 235, .16), transparent 28%),
      linear-gradient(180deg, #f7f9fc 0%, #f3f6fa 100%) !important;
    color: var(--fn-hs-ink) !important;
  }

  .fn-mobile-menu-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 78px;
    margin: 0 -12px 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--fn-hs-line);
    background: rgba(248, 250, 253, .94);
    backdrop-filter: blur(16px);
  }

  .fn-mobile-menu-head > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .fn-mobile-menu-kicker {
    margin-bottom: 3px;
    color: #7b8497;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .fn-mobile-menu-head strong {
    color: var(--fn-hs-ink);
    font-size: 20px;
    line-height: 1.05;
  }

  .fn-mobile-menu-head > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(173, 125, 0, .15);
    border-radius: 12px;
    background: var(--fn-hs-yellow);
    box-shadow: 0 8px 18px rgba(220, 158, 0, .16);
    color: #171717 !important;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    text-decoration: none !important;
  }

  .fn-mobile-menu-list {
    gap: 9px !important;
  }

  .fn-mobile-menu-section-v2 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .fn-mobile-menu-section-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: stretch;
    min-height: 40px;
    margin: 2px 0 5px;
  }

  .fn-mobile-menu-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    padding: 0 7px;
    border: 0;
    background: transparent;
    color: var(--fn-hs-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-align: left;
  }

  .fn-mobile-menu-section-all {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 0;
    color: #6756bd !important;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none !important;
  }

  .fn-mobile-menu-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 0 10px;
    border-top: 0;
    background: transparent;
  }

  .fn-mobile-menu-items[hidden] {
    display: none !important;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-item {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(76, 90, 120, .1) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-img {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px !important;
    height: 54px !important;
    min-width: 50px !important;
    margin: 0 !important;
    padding: 3px;
    border-radius: 10px;
    background: linear-gradient(145deg, #f7f2fb, #eef8fb);
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-img img {
    max-width: 49px !important;
    max-height: 49px !important;
    filter: drop-shadow(0 5px 6px rgba(31, 42, 70, .12)) !important;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-title {
    min-width: 0;
    color: var(--fn-hs-ink) !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-arrow {
    display: none !important;
  }

  .fn-mobile-menu-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: 8px 12px;
    margin-top: 13px;
    padding: 14px;
    border: 1px solid rgba(99, 83, 186, .13);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 251, 239, .94), rgba(239, 247, 255, .94));
  }

  .fn-mobile-menu-footer > strong {
    grid-column: 1 / -1;
    color: var(--fn-hs-ink);
    font-size: 15px;
  }

  .fn-mobile-menu-footer a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #4c5870 !important;
    font-size: 11px;
    font-weight: 720;
    text-decoration: none !important;
  }

  .fn-mobile-menu-footer a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
   Homepage hero rotation. CTA and brand selection remain static.
   ------------------------------------------------------------------ */
html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner {
  min-height: 630px !important;
  background: #f8f7f4 !important;
}

html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner::before,
html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner::after {
  display: none !important;
}

html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__content {
  z-index: 5 !important;
}

html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__eyebrow,
html.fn-header-showcase .fn-model-finder--slider #fn-model-finder-title,
html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__lead {
  transition: opacity .2s ease;
}

html.fn-header-showcase .fn-model-finder--slider #fn-model-finder-title {
  min-height: 2em;
}

html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__lead {
  min-height: 4.45em;
}

html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__visual {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.fn-hero-scenes,
.fn-hero-scene,
.fn-hero-scene picture,
.fn-hero-scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.fn-hero-scene {
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}

.fn-hero-scene.is-active {
  opacity: 1;
  visibility: visible;
}

.fn-hero-scene img {
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center;
}

.fn-hero-scene--prodejna::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: linear-gradient(90deg, rgba(250, 250, 250, .98) 0%, rgba(250, 250, 250, .94) 37%, rgba(250, 250, 250, .62) 56%, rgba(250, 250, 250, .08) 80%);
  content: "";
}

.fn-hero-controls {
  position: absolute;
  right: clamp(18px, 2.4vw, 34px);
  bottom: 19px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(53, 65, 92, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 24px rgba(31, 42, 70, .09);
  backdrop-filter: blur(12px);
}

.fn-hero-control,
.fn-hero-control-list button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 0;
  background: transparent;
  color: #525d72;
  font: inherit;
  cursor: pointer;
}

.fn-hero-control {
  width: 30px;
  border-radius: 50%;
  font-size: 17px;
}

.fn-hero-control:hover,
.fn-hero-control:focus-visible {
  background: #f0f3f8;
  color: #171d2a;
}

.fn-hero-control-list {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fn-hero-control-list button {
  position: relative;
  width: 18px;
  padding: 0;
  border-radius: 999px;
}

.fn-hero-control-list button span {
  display: none !important;
}

.fn-hero-control-list button i {
  position: static;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8deea;
  transition: width .18s ease, background-color .18s ease, border-radius .18s ease;
}

.fn-hero-control-list button[aria-current="true"] {
  background: transparent;
}

.fn-hero-control-list button[aria-current="true"] i {
  width: 16px;
  border-radius: 999px;
  background: #7562d2;
}

@media (max-width: 767px) {
  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner {
    min-height: 620px !important;
    padding-bottom: 66px !important;
  }

  html.fn-header-showcase .fn-model-finder--slider #fn-model-finder-title {
    min-height: 0;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__lead {
    min-height: 7em;
  }

  .fn-hero-scene img {
    object-position: 67% center;
  }

  .fn-hero-scene::after {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(180deg, rgba(250, 250, 250, .98) 0%, rgba(250, 250, 250, .9) 44%, rgba(250, 250, 250, .35) 72%, rgba(250, 250, 250, .12) 100%);
    content: "";
  }

  .fn-hero-scene--prodejna::after {
    background: linear-gradient(180deg, rgba(250, 250, 250, .98) 0%, rgba(250, 250, 250, .94) 51%, rgba(250, 250, 250, .54) 76%, rgba(250, 250, 250, .2) 100%);
  }

  .fn-hero-controls {
    right: 12px;
    bottom: 11px;
    left: 12px;
    justify-content: space-between;
    padding: 5px;
  }

  .fn-hero-control-list button {
    width: 26px;
  }
}

@media (max-width: 380px) {
  .fn-mobile-menu-head > a {
    max-width: 140px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 11px;
  }

  .fn-mobile-menu-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fn-mobile-menu-footer {
    grid-template-columns: 1fr 1fr;
  }

  .fn-mobile-menu-footer a:first-of-type {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fn-hero-scene,
  .fn-hero-control-list button i,
  .fn-mobile-menu-section-toggle i {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   hs3: stable desktop navigation, balanced store strip and new hero art.
   These rules intentionally stay last so legacy Shoptet hover styles cannot
   alter the geometry of the navigation after first paint.
   ------------------------------------------------------------------ */
.fn-store-strip {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  width: 100%;
  gap: 0;
}

.fn-store-strip__left,
.fn-store-strip__right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.fn-store-strip__left {
  gap: clamp(9px, 1vw, 16px);
}

.fn-store-strip__right {
  gap: clamp(15px, 1.7vw, 28px);
  margin-left: auto;
  padding-left: clamp(24px, 4vw, 72px);
}

.fn-store-strip__pickup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff1b8;
  font-weight: 780;
}

@media (min-width: 992px) {
  html.fn-header-showcase .navigation-in .menu-level-1,
  html.fn-header-showcase .menu-helper .menu-level-1 {
    display: flex !important;
    align-items: stretch !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li,
  html.fn-header-showcase .menu-helper .menu-level-1 > li,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within {
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li::before,
  html.fn-header-showcase .navigation-in .menu-level-1 > li::after,
  html.fn-header-showcase .menu-helper .menu-level-1 > li::before,
  html.fn-header-showcase .menu-helper .menu-level-1 > li::after {
    display: none !important;
    content: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 6px 2px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 11px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    transform: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a *,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
    transform: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-2,
  html.fn-header-showcase .menu-helper .menu-level-2 {
    top: 100% !important;
    border-top: 1px solid rgba(70, 82, 112, .12) !important;
  }

  html.fn-header-showcase .navigation-in::after,
  html.fn-header-showcase .navigation-in .menu-level-1::after,
  html.fn-header-showcase .menu-helper::after,
  html.fn-header-showcase .menu-helper .menu-level-1::after {
    display: none !important;
    content: none !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__button {
    min-height: 52px;
    padding: 13px 22px 13px 24px;
    font-size: 16px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brands {
    max-width: 690px;
    margin-top: 21px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid {
    gap: 6px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid a {
    min-height: 43px;
    padding: 6px 8px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid img {
    max-height: 24px;
  }
}

@media (min-width: 1200px) {
  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner {
    aspect-ratio: 1896 / 829;
    min-height: 0 !important;
    padding: clamp(34px, 3.25vw, 54px) clamp(38px, 4.25vw, 70px) !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__content {
    max-width: min(55%, 760px) !important;
  }
}

html.fn-header-showcase .fn-model-finder--slider .fn-hero-scene::after {
  display: none !important;
  content: none !important;
}

html.fn-header-showcase .fn-model-finder--slider .fn-hero-scene img {
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 767px) {
  .fn-store-strip {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    height: 34px;
  }

  .fn-store-strip__left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .fn-store-strip__right {
    flex: 0 0 auto;
    gap: 5px;
    margin-left: auto;
    padding-left: 0;
  }

  .fn-store-strip__label,
  .fn-store-strip__hours,
  .fn-store-strip__pickup,
  .fn-store-strip__mail span {
    display: none !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner {
    aspect-ratio: 941 / 1672;
    min-height: 0 !important;
    padding: 23px 15px 56px !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__lead {
    min-height: 0 !important;
    margin: 13px 0 14px;
    font-size: 14.5px;
    line-height: 1.42;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__button {
    width: auto;
    min-height: 46px;
    gap: 16px;
    padding: 11px 15px 11px 17px;
    font-size: 14.5px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brands {
    margin-top: 15px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid {
    gap: 5px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid a {
    min-height: 40px;
    padding: 5px 8px;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid img {
    max-height: 22px;
  }
}

/* ------------------------------------------------------------------
   HS5: fixed desktop geometry, balanced store strip and final hero fit.
   These rules intentionally live last so older Shoptet/menu overrides
   cannot move the first-level navigation when hover state is applied.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  html.fn-header-showcase .top-navigation-bar > .container {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  html.fn-header-showcase .fn-store-strip {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  html.fn-header-showcase .fn-store-strip__left {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  html.fn-header-showcase .fn-store-strip__right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding-left: clamp(28px, 4vw, 78px) !important;
  }

  html.fn-header-showcase .top-navigation-tools {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1,
  html.fn-header-showcase .menu-helper .menu-level-1 {
    align-items: stretch !important;
    min-height: 60px !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active,
  html.fn-header-showcase .menu-helper .menu-level-1 > li,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: stretch !important;
    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active > a {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 6px 2px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    transform: none !important;
    translate: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a > b,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a > b,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a > b,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active > a > b {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    transform: none !important;
    translate: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active > a {
    border-color: rgba(91, 82, 156, .1) !important;
    background: linear-gradient(135deg, rgba(248, 247, 255, .98), rgba(241, 249, 252, .96)) !important;
    box-shadow: 0 8px 20px rgba(41, 50, 78, .07) !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li::before,
  html.fn-header-showcase .navigation-in .menu-level-1 > li::after,
  html.fn-header-showcase .navigation-in .menu-level-1 > li > a::before,
  html.fn-header-showcase .navigation-in .menu-level-1 > li > a::after,
  html.fn-header-showcase .navigation-in .menu-level-1 > li > a > b::before,
  html.fn-header-showcase .navigation-in .menu-level-1 > li > a > b::after,
  html.fn-header-showcase .menu-helper .menu-level-1 > li::before,
  html.fn-header-showcase .menu-helper .menu-level-1 > li::after,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a::before,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a::after,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a > b::before,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a > b::after,
  html.fn-header-showcase .navigation-in .submenu-arrow,
  html.fn-header-showcase .menu-helper .submenu-arrow {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > .menu-level-2,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > .menu-level-2 {
    top: 60px !important;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  html.fn-header-showcase .fn-store-strip__label {
    display: none !important;
  }

  html.fn-header-showcase .fn-store-strip__right {
    gap: 12px !important;
    padding-left: 20px !important;
  }

  html.fn-header-showcase .fn-store-strip__pickup span {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 992px) and (max-width: 1119px) {
  html.fn-header-showcase .fn-store-strip__pickup,
  html.fn-header-showcase .fn-store-strip__hours {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   HS6: final no-jump navigation and uncropped supplied hero artwork.
   Keep this block last: it neutralizes late Shoptet hover declarations
   without changing the dimensions of the navigation items.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  html.fn-header-showcase .navigation-in .menu-level-1 > li,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active,
  html.fn-header-showcase .menu-helper .menu-level-1 > li,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    translate: 0 0 !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active > a {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 6px 2px !important;
    padding: 0 14px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: transparent !important;
    transform: none !important;
    translate: 0 0 !important;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active > a {
    border-color: rgba(93, 112, 152, .16) !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > a > b,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover > a > b,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within > a > b,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within > a > b,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active > a > b {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
    transform: none !important;
    translate: 0 0 !important;
  }
}

html.fn-header-showcase .fn-model-finder--slider .fn-hero-scene img {
  object-fit: contain !important;
  object-position: center !important;
  background: #f8f6f1;
}

@media (min-width: 768px) and (max-width: 1199px) {
  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner {
    min-height: clamp(540px, 62vw, 630px) !important;
  }
}

/* ------------------------------------------------------------------
   HS7: stable megamenu anchor, unclipped hero controls and compact
   mobile navigation. Keep this block last so legacy Shoptet rules
   cannot re-anchor a submenu to the hovered first-level item.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  html.fn-header-showcase .navigation-in,
  html.fn-header-showcase .menu-helper,
  html.fn-header-showcase .navigation-in .menu-level-1,
  html.fn-header-showcase .menu-helper .menu-level-1 {
    position: relative !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:hover,
  html.fn-header-showcase .navigation-in .menu-level-1 > li:focus-within,
  html.fn-header-showcase .navigation-in .menu-level-1 > li.active,
  html.fn-header-showcase .menu-helper .menu-level-1 > li,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:hover,
  html.fn-header-showcase .menu-helper .menu-level-1 > li:focus-within,
  html.fn-header-showcase .menu-helper .menu-level-1 > li.active {
    position: static !important;
  }

  html.fn-header-showcase .navigation-in .menu-level-1 > li > .menu-level-2,
  html.fn-header-showcase .menu-helper .menu-level-1 > li > .menu-level-2 {
    position: absolute !important;
    top: 60px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    translate: 0 0 !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner {
    min-height: clamp(630px, 43.72vw, 760px) !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__content {
    padding-bottom: 24px;
  }
}

@media (max-width: 767px) {
  html.fn-header-showcase,
  html.fn-header-showcase body {
    max-width: 100%;
    overflow-x: clip;
  }

  html.fn-header-showcase .top-navigation-bar .container,
  html.fn-header-showcase .header-top-wrapper {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html.fn-header-showcase .fn-mobile-menu-head strong {
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.12;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-item {
    box-sizing: border-box !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-img {
    width: 46px !important;
    height: 50px !important;
    min-width: 46px !important;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-img img {
    max-width: 45px !important;
    max-height: 45px !important;
  }

  html.fn-header-showcase .fn-mobile-menu-v2 .fn-mobile-menu-title {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html.fn-header-showcase .fn-mobile-menu-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px 12px;
  }

  html.fn-header-showcase .fn-mobile-menu-footer > strong,
  html.fn-header-showcase .fn-mobile-menu-footer > a:first-of-type {
    grid-column: 1 / -1;
  }

  html.fn-header-showcase .fn-mobile-menu-footer a {
    align-items: flex-start;
    font-size: 11.5px;
    line-height: 1.25;
  }

  html.fn-header-showcase .fn-mobile-menu-footer a span {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__inner {
    aspect-ratio: auto !important;
    min-height: clamp(720px, 177.7vw, 790px) !important;
    padding: 20px 14px 54px !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-hero-scene::after {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    background: linear-gradient(180deg,
      rgba(255, 251, 242, .99) 0%,
      rgba(255, 251, 242, .97) 48%,
      rgba(255, 251, 242, .88) 63%,
      rgba(255, 251, 242, .28) 79%,
      rgba(255, 251, 242, 0) 100%) !important;
    content: "" !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-hero-scene img {
    object-fit: cover !important;
    object-position: center bottom !important;
    background: #f8f6f1;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__button {
    min-width: 0 !important;
    min-height: 40px !important;
    gap: 12px !important;
    padding: 8px 13px 8px 15px !important;
    font-size: 13.5px !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__lead {
    margin: 10px 0 11px !important;
    font-size: 13.5px !important;
    line-height: 1.38 !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brands {
    margin-top: 11px !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid {
    gap: 5px !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid a {
    min-height: 42px !important;
    padding: 4px 6px !important;
    background: rgba(255, 255, 255, .96) !important;
  }

  html.fn-header-showcase .fn-model-finder--slider .fn-model-finder__brand-grid img {
    width: 94% !important;
    max-width: 94% !important;
    height: 29px !important;
    max-height: 29px !important;
    object-fit: contain !important;
  }
}