:root {
  --top-header-border-size: 1px;
  --top-header-height: calc(40px + 1px); /* i.e. --top-header-border-size */
  --btn-padding: 3px 15px;
}
@media (min-width: 480px) {
  :root {
    --top-header-height: calc(60px + var(--top-header-border-size));
  }
}
@media (min-width: 768px) {
  :root {
    --container-width: 747px;
  }
}
@media (min-width: 992px) {
  :root {
    --top-header-height: calc(80px + var(--top-header-border-size));
    --container-width: 972px;
  }
}
@media (min-width: 1200px) {
  :root {
    --container-width: 1178px;
  }
}
@media (min-width: 1440px) {
  :root {
    --container-width: 1418px;
  }
}

/* homepage */
.homepage-tabs {
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .products-block > div .p .name {
    height: 30px;
  }
}
.welcome {
  background-color: var(--color-header-background);
  padding: 20px;
}
.welcome h2,
.welcome h1 {
  margin-top: 0;
}
.extended-banner-title {
  top: 2.5vw;
  left: 2.5vw;
  background: none;
  border: none;
  color: #fff;
  max-width: 50%;
  line-height: 120%;
  font-size: 250%;
  box-shadow: none;
  text-shadow: 1px 1px 5px #303030;
}
.carousel .extended-banner-title {
  font-size: 3vw;
}
@media (min-width: 768px) {
  .carousel .extended-banner-title {
    font-size: 2.5vw;
  }
}
.extended-banner-link {
  top: 35%;
  left: 2.5vw;
  opacity: 100;
  text-transform: uppercase;
  padding: 3px;
  line-height: 30px;
  background-color: #fff;
  border-color: var(--color-primary);
  color: var(--color-primary);
  vertical-align: middle;
  width: 120px;
  text-align: center;
  box-shadow: none;
  height: auto;
  margin: unset;
}
@media (max-width: 992px) {
  .extended-banner-link {
    top: unset;
    right: 2.5vw;
    bottom: 2.5vw;
    left: unset;
  }
}
.extended-banner-text {
  min-width: 60%;
  max-width: 70%;
  text-align: center;
  left: 0;
  right: 0;
  margin-inline: auto;
  padding: 10px;
}

@media (max-width: 1200px) {
  .footer-banners > .footer-banner:not(:first-child) {
    padding-top: 20px;
  }
}
.footer-banners img {
  border: 1px solid #a0a0a0;
}

/* logo */
.site-name {
  padding-right: 20px;
}
#header {
  border-bottom: 1px solid var(--colors-foregrounds-borders-secondary);
}
#header .site-name a img {
  max-height: 30px;
  max-width: unset;
}
@media (min-width: 480px) {
  #header .site-name a img {
    max-height: var(--top-header-height);
  }
}

/* navigation */
.menu {
  letter-spacing: 4px;
  text-transform: uppercase;
}
.navigation-in ul li a b {
  font-weight: 400;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .navigation-in ul li a {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 1200px) {
  .navigation-in ul li a {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.fitted .navigation-in ul {
  justify-content: space-evenly;
}
.navigation-in ul.menu-level-2 {
  font-size: 12px;
  letter-spacing: 2px;
  z-index: 1003;
}
.navigation-in ul.menu-level-2 li:hover {
  background: #f0f0f0;
}
.breadcrumbs {
  display: flex;
}
@media (max-width: 991px) {
  .breadcrumbs > span > a,
  .breadcrumbs > span > span {
    display: block;
    padding: 10px 0 10px 20px;
  }
  .breadcrumbs > span > a:after {
    color: var(--colors-foregrounds-content-secondary);
    content: "\e90c";
    font-size: 12px;
    padding: 10px 0 10px 20px;
  }
}

/* overflow menu */
.menu-helper.visible::before {
  content: "\e914";
  font-family: shoptet;
  font-size: 20px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 0;
  text-decoration: none;
  text-transform: none;
  vertical-align: middle;
  width: 80px;
  display: flex;
  height: var(--top-header-height);
  align-items: center;
  justify-content: center;
}
.menu-helper > span {
  width: 0px;
  overflow: hidden;
  padding: 0;
  height: 0;
}
.menu-helper ul.menu-level-1 li:hover {
  background: #f0f0f0;
}
.navigation-buttons {
  padding: 0;
}

/* product catalog */
.category-header {
  display: none;
}
.flag:before,
.flag:after {
  display: none;
}
.p:hover .flag {
  opacity: 100;
}
.subcategories,
.subcategories li {
  justify-content: center;
}
.subcategories li:before {
  display: none;
}
.subcategories li a {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  text-wrap: nowrap;
}
.subcategories .active {
  font-weight: 500;
}
.products-block > div .p .p-bottom > div .p-tools .btn,
.products-block > div .p .p-bottom > div .p-tools .btn.btn-cart {
  border-width: 1px;
  background: #5e6f5d;
  color: #ffffff;
  border: 1px solid #2f3b2f;
  text-transform: none;
}

.products-block > div .p .p-bottom > div .p-tools .btn:hover,
.products-block > div .p .p-bottom > div .p-tools .btn.btn-cart:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--colors-foregrounds-content-inverted);
}

/* product detail */
.p-variants-block {
  padding: 10px;
  border-top: 1px solid #e7e7e7;
}
.p-basic-info-block {
  display: none;
}
.p-detail .p-param-block {
  justify-content: end;
  background-color: var(--color-header-background);
  margin-top: 10px;
}
.p-detail .social-buttons-wrapper .print {
  display: none;
}
.p-detail .p-to-cart-block {
  border-bottom: 0;
  border-top: 1px solid #e7e7e7;
}
.p-variants-block:not(:has(tr)) {
  display: none;
}
.detail-parameters.second tbody > tr:first-child {
  display: none;
}
.p-detail table.detail-parameters {
  width: 100%;
}
.one-column-body table.detail-parameters tbody tr th {
  width: 100%;
  min-width: unset;
}
.p-detail #simple-variants {
  width: 320px;
  display: flex;
  justify-content: flex-end;
}
.p-detail-tabs {
  letter-spacing: 2px;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .p-detail-inner {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  table.detail-parameters tbody tr td,
  table.detail-parameters tbody tr th {
    display: table-cell;
  }
}

@media (max-width: 477px) {
  table.detail-parameters tbody tr td,
  table.detail-parameters tbody tr th {
    display: block;
  }
}

.p-short-description,
.basic-description {
  font-size: 120%;
  font-weight: 300;
}
.p-short-description a,
.basic-description a {
  text-decoration: underline;
  font-weight: bold;
}

/* search overrides */
.search-results-groups,
.search-products-heading {
  display: none;
}

/* footer */
.footer-bottom {
  padding-top: 24px;
}
#footer h4 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
#signature {
  margin: 0;
}
#signature > a {
  display: none !important;
}
#footer .custom-footer__articles ul li:before {
  display: none;
}
#footer .custom-footer__articles ul {
  padding: 0;
}

/* page and content */
h1 {
  font-weight: 300;
  text-transform: uppercase;
  margin: 24px 0 16px 0;
}
h2 {
  font-weight: 300;
}
.justified {
  text-align: justify;
}
.align-end {
  align-content: end;
}
.paragraph-container {
  display: flex;
  margin: -20px -20px 0 -20px;
}
@media (max-width: 992px) {
  .paragraph-container {
    flex-direction: column;
  }
}
.paragraph-with-image {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 20px;
  margin-top: 20px;
  padding: 20px;
  column-gap: 20px;
}
.paragraph-with-background {
  background-color: var(--color-header-background);
}
.paragraph-cell {
  width: 49%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
.paragraph-cell h3:first-child {
  margin-top: 0;
}
article p {
  font-size: 120%;
  font-weight: 300;
}
article img {
  border: 1px solid #a0a0a0;
}
article a {
  text-decoration: underline;
  font-weight: bold;
}

/* basket, login and search flyouts */
.user-action,
.content-window {
  top: var(--top-header-height);
}
.content-window-in {
  padding: 0;
}

/* close flyout button  */
.sidebar-left .toggle-window-arr,
.sidebar > a.next-step-back {
  display: none;
}

/* contact form */
#formContact .btn {
  padding: var(--btn-padding);
}

/* order page */
.next-step {
  row-gap: 10px;
  align-items: center;
  display: flex;
  justify-content: center;
}
@media (min-width: 380px) {
  .next-step {
    column-gap: 20px;
    flex-direction: row;
    justify-content: space-between;
  }
}

.next-step > .btn.next-step-back,
a.back-to-shop {
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  border: 1px solid #000000;
  height: auto;
  min-width: 150px;
  padding: var(--btn-padding);
  max-width: 300px;
  text-align: center;
  color: #000000;
  text-transform: uppercase;
}
a#continue-order-button,
button#orderFormButton,
button#submit-order {
  line-height: 30px;
  padding: var(--btn-padding);
  min-width: 150px;
  max-width: 300px;
  display: block;
}
.order-button-text {
  font-size: 14px;
}
body.ordering-process .content-wrapper-in {
  flex-direction: column;
}
.cart-window-in > button.toggle-window {
  display: none;
}

/* KONKURENČNÍ VÝHODY */

.banner-benefits {
  padding: 24px 0;
  gap: 20px;
}

.banner-benefits .banner-wrapper {
  background: #f8f7f3;
  border-radius: 18px;
  padding: 26px 22px;
  transition: all 0.25s ease;
}

.banner-benefits .banner-wrapper:hover {
  background: #eef3ea;
  transform: translateY(-2px);
}

.banner-benefits .banner-name {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  margin-top: 10px;
}

.banner-benefits .banner-description {
  font-size: 15px;
  line-height: 1.7;
  color: #5f5f5f;
}

.banner-benefits img {
  max-height: 58px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .banner-benefits .banner-wrapper {
    padding: 22px 18px;
  }

  .banner-benefits .banner-name {
    font-size: 18px;
  }

  .banner-benefits .banner-description {
    font-size: 14px;
  }
}

/* KONKURENČNÍ VÝHODY - Homepage */
.benefitBanner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
}
.benefitBanner__item {
  flex: 1;
  margin: 0;
  background: #f8f7f3;
  border-radius: 12px;
  padding: 10px;
  transition: all 0.25s ease;
  width: 100%;
}
.benefitBanner__item:hover {
  background: #eef3ea;
}
.benefitBanner__link {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.benefitBanner__picture {
  background: transparent;
  box-shadow: none;
  flex: unset;
  height: 40px;
}
.benefitBanner__picture img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
}
.benefitBanner__title {
  font-weight: 600;
  line-height: 1.35;
  color: #1f1f1f;
}

@media (min-width: 992px) {
  .benefitBanner {
    flex-direction: row;
    font-size: 20px;
    gap: 40px;
  }

  .benefitBanner__item {
    font-size: 18px;
  }

  .benefitBanner__picture {
    height: auto;
    width: auto;
  }
}

/* Alerts and messages */
.messages {
  bottom: 0;
  top: auto;
}
