/* HYGSI.SK - responsive parity with the original Creative storefront */

@media (max-width: 1279px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* Creative hides the desktop contact/account strip on mobile. */
  .hygsi-topbar {
    display: none !important;
  }

  /* Match the compact 60 px Creative mobile header. */
  html body #header,
  html body #header .header-top,
  html body #header .header-top-wrapper {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  html body #header {
    position: fixed !important;
    z-index: 10000 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
  }

  html body #header .header-top {
    padding: 0 !important;
  }

  html body #header .header-top-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #header .site-name,
  html body .header .site-name {
    flex: 0 0 118px !important;
    width: 118px !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 0 !important;
  }

  html body #header .site-name a,
  html body .header .site-name a {
    justify-content: flex-start !important;
    width: 103px !important;
    height: 60px !important;
    padding-left: 15px !important;
  }

  html body #header .site-name img,
  html body .header .site-name img {
    width: 88px !important;
    height: 44px !important;
    max-width: 88px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }

  html body #header .navigation-buttons {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 60px !important;
    margin-left: auto !important;
  }

  html body #header .navigation-buttons > a {
    display: block !important;
    flex: 0 0 47px !important;
    width: 47px !important;
    height: 50px !important;
    margin: 0 !important;
  }

  html body #header .search,
  html body #header .cart-price {
    display: none !important;
  }

  html body.search-window-visible #header .search {
    display: block !important;
  }

  /* Shoptet switches to its desktop header too early. Keep the compact
     Creative-style header and working slide-in menu on small laptops too. */
  html body #header .header-bottom,
  html body #header .header-bottom-wrapper {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body #navigation.hygsi-original-navigation {
    position: fixed !important;
    z-index: 9999 !important;
    top: 60px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 100% !important;
    display: block !important;
    width: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
  }

  html body.navigation-window-visible #navigation.hygsi-original-navigation {
    left: 0 !important;
    width: 100% !important;
  }

  html body #navigation.hygsi-original-navigation .navigation-in {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body #navigation.hygsi-original-navigation .hygsi-native-menu {
    display: none !important;
  }

  html body #navigation.hygsi-original-navigation .hygsi-custom-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body #navigation.hygsi-original-navigation .hygsi-custom-menu > li {
    width: 100% !important;
    border-bottom: 1px solid #e7e7ea !important;
  }

  html body #navigation.hygsi-original-navigation .hygsi-custom-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 84px !important;
    padding: 13px 18px !important;
    color: #0d0d73 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    text-decoration: underline !important;
    box-sizing: border-box !important;
  }

  html body #navigation.hygsi-original-navigation .hygsi-custom-menu > li > .hygsi-mega-menu {
    display: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 14px 12px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html body #navigation.hygsi-original-navigation .hygsi-custom-menu > li.hygsi-menu-open > .hygsi-mega-menu {
    display: block !important;
  }

  /* Keep the first content block directly below the compact fixed header. */
  html body .overall-wrapper {
    padding-top: 60px !important;
  }

  html body .content-wrapper,
  html body #content-wrapper {
    padding-top: 0 !important;
  }

  /* The desktop two-column block was the main source of horizontal overflow. */
  html body .welcome .hygsi-about {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .welcome .hygsi-about-text,
  html body .welcome .hygsi-about-image,
  html body .welcome .hygsi-about-image img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Slider tracks may be wider internally, but must never widen the page. */
  html body .products-wrapper,
  html body .product-slider,
  html body .carousel-wrapper,
  html body .banners-row,
  html body .next-to-carousel-banners,
  html body .hygsi-home-advisor {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.type-index .banners-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.type-index .banners-row > .col-sm-8,
  html body.type-index .banners-row > .col-sm-4,
  html body.type-index .next-to-carousel-banners {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  html body img,
  html body iframe,
  html body video,
  html body table {
    max-width: 100%;
  }

  .hygsi-purchase-info {
    grid-area: 1 / 1 / 3 / 4 !important;
  }
}

@media (max-width: 767px) {
  /* Homepage: match the 360 px Creative content column at a 390 px viewport. */
  html body.type-index .banners-row {
    gap: 23px !important;
    margin: 0 !important;
    padding: 24px 15px 0 !important;
  }

  html body.type-index .banners-row > .col-sm-8,
  html body.type-index .banners-row > .col-sm-4,
  html body.type-index .next-to-carousel-banners {
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.type-index #carousel,
  html body.type-index #carousel .carousel-inner,
  html body.type-index #carousel .carousel-inner > .item,
  html body.type-index #carousel .carousel-inner > .item > a {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 360 / 277 !important;
  }

  html body.type-index #carousel .carousel-inner > .item > a > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html body.type-index .hygsi-home-advisor {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 360 / 405 !important;
    margin: 0 !important;
    padding: 20px !important;
  }

  html body.type-index .hygsi-home-advisor-head {
    display: block !important;
  }

  html body.type-index .hygsi-home-advisor-photo {
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto !important;
  }

  html body.type-index .hygsi-home-advisor h2 {
    margin: 10px 0 4px !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.type-index .hygsi-home-advisor h2 br {
    display: none !important;
  }

  html body.type-index .hygsi-home-advisor-subtitle {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  html body.type-index .hygsi-home-advisor-links {
    margin-top: 18px !important;
  }

  /* Product detail: the Creative mobile page shows the product information
     directly after a contained image and thumbnails. */
  html body.type-detail .p-detail-inner > .p-image-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 300px auto !important;
    grid-template-areas:
      "main"
      "thumbs" !important;
    gap: 16px !important;
    min-height: 0 !important;
    padding: 20px 15px !important;
    overflow: hidden !important;
  }

  html body.type-detail .p-image-wrapper > .p-image,
  html body.type-detail .p-image-wrapper > .p-image > a {
    width: 100% !important;
    height: 300px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body.type-detail .p-image-wrapper > .p-image img,
  html body.type-detail .p-image-wrapper > .p-image > a > img,
  html body.type-detail .p-main-image img {
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 280px !important;
    margin: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html body.type-detail .hygsi-product-thumbs {
    width: 100% !important;
    max-height: 82px !important;
    padding: 0 !important;
  }

  html body.type-detail .hygsi-product-advisor {
    display: none !important;
  }

  html body.type-detail .p-detail-inner-header-mobile {
    display: none !important;
  }

  html body.type-detail .p-data-wrapper.hygsi-buy-panel {
    padding: 24px 20px 34px !important;
  }

  html body.type-detail .p-data-wrapper .p-detail-inner-header,
  html body.type-detail .p-data-wrapper .p-detail-inner-header h1 {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    opacity: 1 !important;
  }

  html body.type-detail .p-data-wrapper .p-detail-inner-header h1 {
    margin: 0 0 16px !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .hygsi-buy-form .hygsi-cart-ready {
    grid-area: 5 / 1 / 6 / 4 !important;
    width: 100% !important;
  }
}

@media (max-width: 359px) {
  html body #header .site-name,
  html body .header .site-name {
    flex-basis: 100px !important;
    width: 100px !important;
  }

  html body #header .site-name a,
  html body .header .site-name a {
    width: 92px !important;
    padding-left: 10px !important;
  }

  html body #header .site-name img,
  html body .header .site-name img {
    width: 82px !important;
    max-width: 82px !important;
  }

  html body #header .navigation-buttons > a {
    width: 44px !important;
  }
}

/* Additions consolidated from the former inline/runtime styles. */

@media (min-width: 992px) {
  html body #navigation.hygsi-original-navigation
  .hygsi-custom-menu .hygsi-mega-menu > li {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 96px;
  }

  html body #navigation.hygsi-original-navigation
  .hygsi-custom-menu .hygsi-mega-menu > li > .hygsi-menu-image {
    width: 96px;
    height: 96px;
  }
}

.subcategories.with-image > li > a > .image img.hygsi-category-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Homepage product buttons match the Creative storefront. */
.in-index .product .add-to-cart-button {
  background-color: #59a51e;
  border-color: #59a51e;
  color: #fff;
}

.in-index .product .add-to-cart-button:hover,
.in-index .product .add-to-cart-button:focus {
  background-color: #009fe3;
  border-color: #009fe3;
  color: #fff;
}

@media (min-width: 768px) {
  .box-categories {
    overflow: hidden;
    background: #fefefe;
    border: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
  }

  .box-categories > h3.sr-only {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    color: #333;
    background: #fefefe;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    border-bottom: 1px solid #e6e6e6;
  }

  .box-categories > h3.sr-only > span { font-size: 0; }
  .box-categories > h3.sr-only > span::after {
    content: "Kategórie produktov";
    font-size: 14px;
  }

  .box-categories #categories,
  .box-categories .categories {
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .box-categories .categories > .topic > a {
    position: relative;
    display: block;
    min-height: 39px;
    margin: 0;
    padding: 10px 34px 9px 18px;
    color: #666;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 18.2px;
    text-transform: none;
    text-decoration: none;
  }

  .box-categories .categories.active > .topic > a,
  .box-categories .categories > .topic > a:hover,
  .box-categories .categories > .topic > a:focus {
    color: #666;
    background: #f2f2f2;
  }

  .box-categories .categories > ul {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .box-categories .categories > ul > li {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .box-categories .categories > ul > li > a {
    position: relative;
    display: block;
    min-height: 31px;
    margin: 0 0 -1px;
    padding: 8px 34px 7px 23px;
    color: #666;
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 15.6px;
    text-decoration: none;
  }

  .box-categories .categories > ul > li > a:hover,
  .box-categories .categories > ul > li > a:focus,
  .box-categories .categories > ul > li.active > a {
    color: #000066;
    background: #f7f7f7;
  }

  .box-categories .cat-trigger {
    position: absolute;
    top: 50%;
    right: 14px !important;
    left: auto !important;
    width: 12px;
    height: 12px;
    margin: -6px 0 0;
    padding: 0;
    color: transparent;
    background: transparent;
    border: 0;
    transform: none;
  }

  .box-categories .cat-trigger::before,
  .box-categories .cat-trigger::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 1px;
    width: 10px;
    height: 1px;
    background: #888;
  }

  .box-categories .categories:not(.expanded) > .topic .cat-trigger::after,
  .box-categories li:not(.expanded) > a .cat-trigger::after {
    transform: rotate(90deg);
  }
}

body.type-index .hygsi-system-section.hygsi-before-footer {
  width: calc(100% - 30px);
  max-width: 1378px;
  margin: 70px auto !important;
  padding: 0 !important;
}

body.type-index .hygsi-system-section.hygsi-before-footer .hygsi-system-banner {
  display: block;
  width: 100%;
}

body.type-index .hygsi-system-section.hygsi-before-footer .hygsi-system-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
}

@media (max-width: 767px) {
  html body.type-index .banners-row {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  html body.type-index .hygsi-usage-section {
    width: calc(100% - 10px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html body.type-index .hygsi-usage-section h2 {
    margin-bottom: 15px !important;
  }

  html body.type-index .hygsi-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
  }

  html body.type-index .hygsi-usage-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body.type-index .hygsi-usage-large,
  html body.type-index .hygsi-usage-wide {
    grid-column: 1 / -1 !important;
    aspect-ratio: 360 / 176 !important;
  }

  /* Preserve the complete 1598 × 948 homepage artwork on mobile. */
  html body.type-index #carousel,
  html body.type-index #carousel .carousel-inner,
  html body.type-index #carousel .carousel-inner > .item,
  html body.type-index #carousel .carousel-inner > .item > a {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1598 / 948 !important;
  }

  html body.type-index #carousel .carousel-inner > .item > a > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body.type-index .hygsi-system-section.hygsi-before-footer {
    margin: 42px auto !important;
  }
}