/*
 * Desktop-only layout layer.
 *
 * The legacy stylesheet still serves shared and mobile components. Keep
 * desktop navigation, typography scale and footer layout together here so
 * their breakpoint and cascade are explicit instead of scattered overrides.
 */

@media (min-width: 1201px) {
  body:before {
    height: 110px;
  }

  header {
    padding: 0 clamp(28px, 3.2vw, 64px);
    border-bottom: 1px solid rgba(45, 53, 58, 0.08);
    box-shadow: 0 8px 30px rgba(20, 31, 37, 0.04);
  }

  header .nav-bar,
  header.header-scrolled .nav-bar {
    display: flex;
    width: 100%;
    max-width: 1800px;
    height: 110px;
    margin: 0 auto;
    align-items: center;
    gap: clamp(28px, 3vw, 56px);
    font-size: 1rem;
  }

  header.header-scrolled .nav-bar {
    height: 88px;
  }

  header .nav-bar:after {
    display: none;
  }

  header .nav-bar .logo,
  header .nav-bar .main-nav {
    top: auto;
    float: none;
    transform: none;
  }

  header .nav-bar .logo {
    flex: 0 0 auto;
  }

  header .nav-bar .logo a img {
    display: block;
    width: clamp(190px, 13.5vw, 245px);
    height: auto;
    transition: width .2s ease-in-out;
  }

  header.header-scrolled .nav-bar .logo a img {
    width: clamp(174px, 11.5vw, 210px);
  }

  header .nav-bar .main-nav {
    display: flex;
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  header .nav-bar .main-nav .navigation,
  header .nav-bar .main-nav .other {
    padding: 0;
  }

  header .nav-bar .main-nav .navigation {
    display: flex;
    width: auto;
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.15vw, 22px);
  }

  header .nav-bar .main-nav .navigation > li {
    display: inline-flex;
    height: 100%;
    margin: 0;
    align-items: center;
  }

  header .nav-bar .main-nav .navigation > li > a {
    display: inline-flex;
    height: 100%;
    padding: 6px 0;
    align-items: center;
    font-size: clamp(13px, 0.2vw + 10px, 14px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .015em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  header .nav-bar .main-nav .navigation > li.menu-item-has-children > a {
    padding-right: 3px;
  }

  header .nav-bar .main-nav .navigation a:before {
    display: none;
  }

  header .nav-bar .main-nav .navigation > li > a:hover,
  header .nav-bar .main-nav .navigation > li > a:focus-visible,
  header .nav-bar .main-nav .navigation li.current-menu-item > a,
  header .nav-bar .main-nav .navigation li.current-menu-parent > a,
  header .nav-bar .main-nav .navigation li.current-menu-ancestor > a {
    color: var(--accent);
  }

  header .nav-bar .main-nav .other {
    display: flex;
    height: auto;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
  }

  header .nav-bar .main-nav .other .search-button {
    margin: 0;
  }

  header .nav-bar .main-nav .other .search-button {
    display: inline-flex;
    width: 34px;
    height: 34px;
    line-height: 1;
    align-items: center;
    justify-content: center;
  }

  header .nav-bar .main-nav .other .search-button img {
    width: 15px;
    height: 15px;
  }

  .main-nav .navigation li.menu-item-has-children > a:after {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 3px 4px 10px;
    flex: 0 0 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
  }

  .main-nav ul li .sub-menu {
    left: -18px;
    width: 315px;
    padding: 0;
    border: 1px solid rgba(45, 53, 58, 0.12);
    border-radius: 0;
    background: var(--white);
    box-shadow: 0 10px 24px rgba(22, 34, 40, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity .12s ease-in-out, visibility .12s ease-in-out;
  }

  .main-nav ul li:focus-within > .sub-menu,
  .main-nav ul li.is-menu-open > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .main-nav .navigation > li > .sub-menu {
    top: calc(50% + 18px);
    z-index: 100;
  }

  .main-nav ul li .sub-menu li {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 46px;
    padding: 0;
    align-items: center;
    border-bottom: 1px solid rgba(45, 53, 58, 0.08);
    line-height: 1.3;
  }

  .main-nav ul li .sub-menu li:last-child {
    border-bottom: 0;
  }

  .main-nav ul li .sub-menu li:hover,
  .main-nav ul li .sub-menu li:focus-within {
    background: rgba(0, 158, 84, 0.07);
  }

  .main-nav ul li .sub-menu li > a {
    display: flex;
    min-width: 0;
    min-height: 46px;
    padding: 11px 18px;
    flex: 1 1 auto;
    align-items: center;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    text-transform: none;
  }

  .main-nav ul li .sub-menu li > a:hover,
  .main-nav ul li .sub-menu li > a:focus-visible {
    background: transparent;
    color: var(--accent);
  }

  header .nav-bar .main-nav .navigation .sub-menu li a:before {
    display: none;
  }

  .main-nav .navigation .sub-menu li.menu-item-has-children > a:after {
    width: 8px;
    height: 8px;
    margin: 0 3px 0 auto;
    flex-basis: 8px;
    transform: rotate(-45deg);
  }

  .sub-menu.dropdown-menu li ul.sub-menu {
    top: -1px;
    left: 100%;
    max-height: min(70vh, 580px);
    overflow-y: auto;
    background: var(--white);
  }

  .sub-menu.dropdown-menu li:focus-within > ul.sub-menu,
  .sub-menu.dropdown-menu li.is-menu-open > ul.sub-menu {
    top: -1px;
  }

  header a:focus-visible,
  header button:focus-visible {
    outline: 3px solid rgba(0, 158, 84, 0.35);
    outline-offset: 3px;
  }
}

@media (min-width: 1201px) and (max-width: 1380px) {
  header {
    padding-right: 28px;
    padding-left: 28px;
  }

  header .nav-bar,
  header.header-scrolled .nav-bar {
    gap: 24px;
  }

  header .nav-bar .logo a img {
    width: 155px;
  }

  header.header-scrolled .nav-bar .logo a img {
    width: 145px;
  }

  header .nav-bar .main-nav .navigation {
    gap: 8px;
  }

  header .nav-bar .main-nav .navigation > li > a {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  header *,
  .main-nav ul li .sub-menu {
    transition-duration: .01ms !important;
  }
}

/* Desktop type and element scale */
@media (min-width: 1201px) {
  body {
    font-size: clamp(15px, 0.16vw + 12.7px, 16px);
    line-height: 1.58;
  }

  h1,
  .h1,
  .b-h1 {
    margin-bottom: 34px;
    font-size: clamp(2.75rem, 2.45vw, 3.5rem);
    line-height: 1.12;
  }

  h2,
  .h2 {
    margin-bottom: 26px;
    font-size: clamp(2rem, 1.85vw, 2.6rem);
    line-height: 1.18;
  }

  h2.b-h2,
  .p-b-h2 {
    margin-bottom: 34px;
    font-size: clamp(2.4rem, 2.25vw, 3.1rem);
    line-height: 1.14;
  }

  h3,
  .h3 {
    margin-bottom: 24px;
    font-size: clamp(1.7rem, 1.45vw, 2.1rem);
    line-height: 1.22;
  }

  .h3-h5 {
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 1.25vw, 1.85rem);
    line-height: 1.24;
  }

  .h3-h6 {
    margin-bottom: 18px;
    font-size: clamp(1.2rem, 1vw, 1.5rem);
    line-height: 1.3;
  }

  h4,
  .h4 {
    margin-bottom: 20px;
    font-size: clamp(1.4rem, 1.18vw, 1.75rem);
    line-height: 1.28;
  }

  h5,
  .h5 {
    margin-bottom: 18px;
    font-size: clamp(1.25rem, 1.02vw, 1.55rem);
    line-height: 1.3;
  }

  h6,
  .h6 {
    margin-bottom: 16px;
    font-size: clamp(1.08rem, .88vw, 1.3rem);
    line-height: 1.35;
  }

  .subpage-header h1,
  .subpage-header .h1 {
    font-size: clamp(3.25rem, 4.15vw, 4.35rem);
    line-height: 1.1;
  }

  .main-carousel .container .text h1 {
    font-size: clamp(2.55rem, 3vw, 3.25rem);
    line-height: 1.13;
  }

  p {
    margin-bottom: 1.35rem;
  }

  .fl-rich-text,
  .fl-module-rich-text,
  .description {
    line-height: 1.62;
  }

  .primary-button,
  .secondary-button,
  .ssf-button#applyFilterOptions,
  .woocommerce .button.add_to_cart_button,
  .woocommerce button.button.single_add_to_cart_button,
  .woocommerce a.button.checkout-button,
  .woocommerce-checkout-payment button.button.alt {
    min-height: 48px;
    padding: 14px 24px;
    border-radius: 0;
    font-size: .95rem;
    line-height: 1.3;
  }

  .read-more {
    margin-top: 24px;
    font-size: 1rem;
  }

  input[type=text],
  input[type=url],
  input[type=tel],
  input[type=email],
  input[type=password],
  textarea,
  select {
    min-height: 50px;
    padding: 13px 14px;
    font-size: 1rem;
    line-height: 1.4;
  }

  label {
    font-size: .78rem;
    line-height: 1.35;
    letter-spacing: .025em;
  }

  nav.rank-math-breadcrumb {
    padding: 17px clamp(28px, 3.2vw, 64px);
    border-bottom: 1px solid rgba(45, 53, 58, 0.08);
    background: var(--bright);
    font-size: .86rem;
    line-height: 1.45;
  }

  nav.rank-math-breadcrumb p {
    width: 100%;
    max-width: var(--km-content-max);
    margin: 0 auto;
  }

  .product-display .nav span {
    padding: 16px 22px;
    font-size: clamp(1.15rem, 1.2vw, 1.45rem);
    line-height: 1.25;
  }

  .product-display .description {
    width: min(72%, 850px);
    margin-top: 52px;
  }

  .arrow-button {
    width: 58px;
    height: 58px;
  }

  section.w21 {
    padding-top: 0;
    padding-bottom: 56px;
  }

  section.w21 > .row > .col-md-12 > center {
    min-height: 0;
    padding: 42px 20px;
  }

  footer {
    display: flex;
    padding: 26px clamp(40px, 4.8vw, 92px);
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
    font-size: .8rem;
    line-height: 1.4;
  }

  footer:after {
    display: none;
  }

  footer ul {
    display: flex;
    min-width: 0;
    margin: 0;
    float: none;
    align-items: center;
    gap: 8px clamp(18px, 1.7vw, 32px);
    flex: 1 1 820px;
    flex-wrap: wrap;
  }

  footer ul li,
  footer ul li:first-child {
    margin: 0;
  }

  footer ul li a {
    padding: 6px 0;
  }

  footer .copyright {
    margin-left: auto;
    padding: 6px 0;
    float: none;
    white-space: nowrap;
  }
}