/* Blog layout — site-header outside hero: in-flow, light theme */

body.wrapper--home .site-header-shell {
  position: relative;
  z-index: 100;
  pointer-events: auto;
}

body.wrapper--home .site-header-shell__backdrop,
body.wrapper--home .site-header__blur {
  display: none;
}

body.wrapper--home .site-header {
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

body.wrapper--home .site-header .header-link,
body.wrapper--home .site-header .header__menu-btn-chevron,
body.wrapper--home .site-header .header-how {
  color: #000;
}

body.wrapper--home .site-header .header-how {
  transition: color .25s;
}

body.wrapper--home .site-header .header-link:hover,
body.wrapper--home .site-header .header-link:hover .header__menu-btn-chevron,
body.wrapper--home .site-header .header-how:hover {
  color: #fb0953;
}

body.wrapper--home .site-header .header-btn--outline {
  border-color: rgba(0, 0, 0, .35);
  color: #000;
  font-weight: 400;
  background: transparent;
}

body.wrapper--home .site-header .header-btn--outline:hover {
  border-color: #fb0953;
  color: white;
  background: #fb0953;
}

body.wrapper--home .site-header .header-btn--solid {
  background: #bd995b;
  font-weight: 400;
  color: #fff;
}

body.wrapper--home .site-header .header-btn--solid:hover {
  background: #fb0953;
}

body.wrapper--home .site-header .header-cart i {
  color: #575757;
}

body.wrapper--home .site-header .header-logo img {
  filter: brightness(0);
}

body.wrapper--home .site-header .header-burger .hamburger-inner,
body.wrapper--home .site-header .header-burger .hamburger-inner::before,
body.wrapper--home .site-header .header-burger .hamburger-inner::after {
  background-color: #000;
}

@media (max-width: 1159px) {
  body.wrapper--home .site-header .header-account__img--default {
    display: none;
  }

  body.wrapper--home .site-header .header-account__img--open {
    display: block;
  }
}

.blog-post {
  min-height: 40vh;
}

.blog-post__article {
  max-width: 1390px;
  margin: 0 auto;
  padding: 40px 45px 60px;
}

.blog-post:has(.blog-article) > .blog-post__article,
.blog-post .blog-article,
.blog-post .blog-index {
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1260px) {
  .blog-post__article:not(:has(.blog-article)) {
    padding: 30px 30px 50px;
  }
}

@media (max-width: 767px) {
  .blog-post__article:not(:has(.blog-article)) {
    padding: 24px 20px 40px;
  }
}