:root {
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}

[id] {
  scroll-margin-top: var(--unitone--p3);
}

@supports (font-variant-position: super) {
  sup {
    font-variant-position: inherit;
    vertical-align: super;
    font-size: 75% !important;
  }
}

/*
sticky header
*/
.wp-site-blocks > [data-unitone-layout~=cover] > [data-unitone-layout~=cover__content]:has(.site-header) {
  display: contents;
}

.wp-site-blocks > [data-unitone-layout~=cover] > [data-unitone-layout~=cover__content] .site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  background-color: var(--wp--preset--color--unitone-background);
  box-shadow: 0px 5px 5px -5px rgb(0 0 0 / .2);
  z-index: 5;
}

/*
mega menu
*/
:where(.unitone-mega-menu) {
  .wp-block-term-template {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--unitone--s1);
  }
  .unitone-mega-menu__container {
    inset: calc( 100% + var(--unitone--section--padding-bottom) ) auto auto calc(var(--unitone--rect-left)*-1);
  }
  .unitone-mega-menu__placement {
    background-color: #f9f9f9;
    padding: var(--unitone--section--gutters);
  }
  
  .wp-block-term-name {
    position: static;
    a {
      &:after {
        content: "";
        position: absolute;
        inset: 0;
      }
    }
  }
}

@media screen and ( min-width : 1200px ) {
  :where(.unitone-mega-menu) {
    .wp-block-term-template {
      grid-template-columns: repeat(6, 1fr);
    }
  }
}

.post-type-archive-product {

  .wp-block-term-template {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;

    .wp-block-term {
      position: relative;
      background: #f5f5f5;

      .wp-block-term-name {
        position: static;
      }
      a::after {
        content: "";
        position: absolute;
        inset: 0;
      }
    }
  }

}

.product-card {
  .product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--unitone--p-1);
  }
  .product-card__link {
    display: inline-flex;
    font-size: 110%;
    color: inherit;
    text-decoration: none;
    gap: 1em;
    border-bottom: 1px solid var(--unitone--color--text);
    &::after {
      content: ">";
    }
  }
}

@media screen and ( max-width : 1199px ) {
  .products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax( 300px, 1fr ) );
    gap: 30px;
  }
  .product-card {
    border: 1px solid #383838;
    border-radius: 20px;
    .product-card__title {
      padding: 10px 20px;
      border-radius: 20px;
      background: #383838;
      color: #fff;
    }
    .product-card__body {
      padding: 20px;
    }
  }
}


.network-section {
  background-image: url(/wp-content/uploads/2026/06/d173b25d411fef13a4acdc5272cdc1c4.webp);
}

@media screen and ( min-width : 1200px ) {
  .network-section {
    background-image: url(/wp-content/uploads/2026/06/d173b25d411fef13a4acdc5272cdc1c4.webp);
  }
  .absolute-image-wrapper {
    max-height: 400px;
    .absolute-image {
      position: absolute !important;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .products {
    --card-count: 12;
    --card-body-width: 400px;
    display: flex;
    flex-wrap: nowrap;
    container-type: inline-size;
    .products__card {
      flex: 0 0 calc( ( 100% - var(--card-body-width) ) / var(--card-count) );
      min-width: 0;
      height: 100%;
      cursor: pointer;
      /*
      transition: flex 0.5s ease;
      */
      overflow: hidden;
      position: relative;
      will-change: flex;
      &:hover {
        flex: 0 0 calc( ( ( 100% - var(--card-body-width) ) / var(--card-count) ) + var(--card-body-width) );
      }
    }
    &:not(:has(:hover)) {
      .products__card:first-child {
        flex: 0 0 calc( ( ( 100% - var(--card-body-width) ) / var(--card-count) ) + var(--card-body-width) );
        .product-card__title {
          background: #383838;
          color: #fff;
        }
        .product-card__body {
          flex: 0 0 var(--card-body-width);
          opacity: 1;
          padding: 20px;
          > * {
            display: block;
          }
        }
      }
    }
  }
  .products--en {
    .products__card {
      min-height: 600px;
    }
  }

  .product-card {
    display: flex;
    min-height: 500px;
    border: 1px solid #383838;
    border-radius: 20px;
    .product-card__title {
      place-content: center;
      writing-mode: vertical-rl;
      padding-inline: 30px;
      flex: 1 0 0;
      border-radius: 20px;
    }
    .product-card__body {
      flex: 0 0 0;
      /*
      transition: flex 0.5s ease, opacity 0.5s ease 0.5s;
      */
      will-change: flex;
      opacity: 0;
      > * {
        display: none;
      }
    }
    &:hover {
      .product-card__title {
        background: #383838;
        color: #fff;
      }

      .product-card__body {
        flex: 0 0 var(--card-body-width);
        opacity: 1;
        padding: 20px;
        > * {
          display: block;
        }
      }
    }
  }
}

.wp-block-heading.h2 {
  background-image: linear-gradient(180deg, #3a3a3a, #3a3a3a 1px, transparent 1px, transparent 6px, #f5f5f5 6px, #f5f5f5 );
  padding: var(--unitone--p-2);
  margin-block-start: var(--unitone--p3);
  border-radius: 0 0 6px 6px;
}

.strength-card {
  transition: .4s ease-out;
  .strength-card__append {
    height: 0;
    opacity: 0;
  }
  figure:first-child {
    display: block;
  }  
  figure:last-child {
    display: none;
  }  
  &:hover {
    scale: 1.1;
    .strength-card__append {
      height: auto;
      opacity: 1;
    }
    figure:first-child {
      display: none;
    }  
    figure:last-child {
      display: block;
    }
  }
}

.footer-product-category {
  .wp-block-term-template,
  .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--unitone--s1);
  }
  .wp-block-term,
  .wp-block-post {
    margin-top: 0;
    a {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #ddd;
      color: var(--unitone--color--text);
      padding: 6px 12px;
      border-radius: 6px;
      &::before {
        content: "\203A";
      }
    }
  }
}