.header-search .header .header__menu-main-link {
  color: var(--color-black) !important;
}
.header-wrapper--border-bottom {
  border: none;
}
.section-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.section-header.moved-top {
  top: var(--announcement-bar-height, 45px);
}
.header {
  height: 60px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 750px) {
  .header {
    padding: 0 24px;
  }
}
@media (min-width: 1024px) {
  .header {
    padding: 0 40px;
    max-width: 100%;
  }
}
/* .header__rewards / .header__fit-guide rules removed with the homepage
   redesign: both links moved out of the header into the black utility bar
   (sections/announcement-bar.liquid). Their styles now live there. */
.header .header-logo {
  width: 91px;
  height: 20px;
  /* The -4px nudge that used to sit here compensated for the old centred-logo
     layout. The logo is now absolutely centred on mobile and flush-left on
     desktop, so the nudge would throw both off. */
}
.header .header-logo svg {
  width: 100%;
  height: 100%;
}
.header .header-logo path {
  fill: var(--color-black);
}
.header .header__icon,
.header .header__icon--cart .icon {
  width: auto;
  height: auto;
}
.header .header__icon--menu .icon {
  position: relative;
}
.header .icon-search {
  width: 19px;
  height: 19px;
}
.header .icon-search path {
  fill: var(--color-black);
}
.header .icon-close {
  width: 17px;
  height: 17px;
  position: relative;
  left: -20px;
}
.header .header__search {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header .header__icon--search {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  top: 0;
  right: -3px;
  text-decoration: none !important;
  border: none;
  background: none;
  padding: 8px 0;
  gap: 6px;
  min-height: 44px;
}

.header .header__icon--cart {
  margin: 0 0 0 10px;
  position: relative;
  top: -3px;
  right: -3px;
}
.header .header__icon--account {
  width: 17px;
  height: auto;
  margin: 0 0 0 10px;
}
.header .header__icon--account .icon {
  width: 100%;
  height: 100%;
}
.header .icon-hamburger {
  width: 18px;
  height: 17px;
}
.header header-drawer {
  margin: 0;
}
.header .menu-drawer__navigation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header .menu-drawer__navigation {
  width: 100%;
  padding: 20px 0 20px 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 18px;
  margin-right: -18px;
}
.header .menu-drawer__menu li {
  margin: 0 !important;
  border-top: 1px solid var(--color-neutral-mid);
}
@media (min-width: 990px) {
  .header .list-menu--inline li {
    margin: 0 15px 0 0 !important;
  }
}
.header .menu-drawer__utility-links {
  display: none;
}
.header .header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 1px;
}
.header summary.menu-drawer__menu-item {
  position: relative;
}
.header summary.menu-drawer__menu-item:after {
  content: "+";
  position: absolute;
  top: 47%;
  right: 5px;
  transform: translateY(-50%);
  color: var(--color-black);
  font-size: 18px;
}
.header summary.menu-drawer__menu-item.active:after {
  content: "-";
}
.header summary.menu-drawer__menu-item .icon-arrow {
  display: none;
}
.header .header__icon--account path {
  fill: var(--color-black);
}
.header .menu-drawer__menu-item--active:hover {
  background-color: var(--color-white) !important;
}
.header .menu-drawer__menu-item:hover {
  background-color: var(--color-white) !important;
}
@media (min-width: 990px) {
  .header summary.list-menu__item {
    padding-right: 26px;
  }
}
.header .list-menu__item {
  font-size: 21px;
  line-height: 100%;
  color: var(--color-black);
  padding: 17px 0 21px;
  background-color: rgba(0, 0, 0, 0);
}
@media (min-width: 990px) {
  .header .list-menu__item {
    font-size: 14px;
    padding: 23px 0;
    text-transform: uppercase;
    font-family: "Moderat Mono";
  }
}
@media (min-width: 990px) {
  .header .list-menu__item span {
    text-underline-offset: 1px;
  }
}
.header .menu-drawer {
  width: 100%;
  height: calc(100vh - 60px);
  padding: 20px 18px 0 18px;
}
.header .menu-drawer__navigation .submenu-open {
  visibility: visible !important;
}
.header .menu-drawer__submenu {
  position: relative !important;
  border: none !important;
  margin: -10px 0 12px 0;
}
.header .menu-drawer__submenu .menu-drawer__menu li {
  border: none !important;
  margin: 0 0 1px 0 !important;
  display: block;
}
.header .menu-drawer__submenu .menu-drawer__menu .list-menu__item {
  padding: 10px 0 !important;
}
.header .menu-drawer__close-button {
  display: none;
}
.header .header__menu-item {
  transition: none;
}
.header .search-modal {
  top: 60px;
  border: none;
  min-height: auto;
}
.header .search-modal .field {
  height: 60px;
  width: calc(100% - 60px);
  margin: 0 0 0 auto;
}
@media (min-width: 768px) {
  .header .search-modal {
    top: var(--header-height, 60px);
  }
  .header .search-modal .field {
    width: 410px;
  }
  .header .search-modal .field {
    height: var(--header-height, 60px);
    width: calc(100% - var(--header-height, 60px));
  }
}
@media (min-width: 1024px) {
  .header .search-modal .field {
    margin-right: 10px;
  }
}
.header .search-modal .field:after {
  box-shadow: none;
  border: none;
}
.header .search-modal .field__label {
  font-family: Moderat;
  font-size: 11px;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--color-black);
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.header .search-modal .field__button {
  height: 100%;
  right: 20px;
}
.header .search-modal .field__button > svg {
  height: auto;
  width: auto;
}
.header .search-modal__form {
  max-width: 100%;
}
.header .search__input.field__input {
  height: auto;
  padding: 20px 100px 20px 20px;
  border-left: 1px solid var(--color-neutral-mid);
  font-family: "Moderat Mono";
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--color-black);
}
.header .search__input.field__input::placeholder {
  color: var(--color-black);
}
.header .search__input.field__input:focus {
  box-shadow: none;
}
.header .search__input.field__input:focus + .field__label {
  display: none !important;
}
.header .search-modal__content {
  padding: 0;
  border-top: 1px solid var(--color-neutral-mid);
  border-bottom: 1px solid var(--color-neutral-mid);
}
.header .modal__close-button.link {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  width: 60px;
  height: 60px;
}
.header .modal__close-button.link .icon-close {
  left: auto;
}
.header .predictive-search {
  display: block;
  top: 59px;
  left: 0;
  width: 100%;
  box-shadow: none;
  border: none;
}
@media (min-width: 990px) {
  .header .predictive-search {
    top: var(--header-height, 60px);
  }
}
.header .header__active-menu-item,
.header .header__menu-item {
  text-decoration: none !important;
}
.header .header__submenu .header__menu-item {
  text-decoration: none !important;
}
.header .header__menu-item:hover span {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
}
/* The `left: 90px` nudge at >=1100px and its <=1439px reset used to fake-centre
   the nav around the old centred logo. The nav is now truly centred (see the
   header layout block at the end of this file), so both would push it off. */
/* Tighten header spacing for smaller desktops (13-inch screens ~1280-1439px) */
@media (min-width: 990px) and (max-width: 1439px) {
  .header .list-menu--inline li {
    margin: 0 8px 0 0 !important;
  }
  .header__icons {
    gap: 16px !important;
  }
}
@media (min-width: 990px) {
  .header summary .icon-caret {
    width: 10px;
    top: 25px;
    right: 5px;
  }
}
@media (min-width: 990px) {
  .header .header__submenu.list-menu {
    padding: 0;
    width: auto;
    min-width: 150px;
    background: rgba(0, 0, 0, 0);
    border: none;
    left: -20px;
  }
}
.header .header__submenu.list-menu .header__menu-item {
  color: var(--color-black);
}
@media (min-width: 990px) {
  .header .header__submenu.list-menu .header__menu-item {
    padding: 16px 20px 15px;
    white-space: nowrap;
    background: var(--color-white);
  }
  .header .header__submenu.list-menu .header__menu-item:hover {
    background-color: var(--color-black);
    color: var(--color-white) !important;
  }
}
@media (min-width: 990px) {
  .header .header__submenu.list-menu li {
    margin: 1px 0 0 0 !important;
  }
}
.menu-open {
  background-color: var(--color-white) !important;
}
.menu-open .list-menu__item:not(.clearance-link) {
  color: var(--color-black) !important;
}
.menu-open .header-logo path {
  fill: var(--color-black) !important;
}
.menu-open .icon-hamburger path {
  fill: var(--color-black) !important;
}
.menu-open .icon-search path {
  fill: var(--color-black) !important;
}
.menu-open .header__icon--cart path {
  fill: var(--color-black) !important;
}
@media (min-width: 1024px) {
  .search-results {
    padding: 80px 0 55px;
    margin: 0;
  }
}
.search-results .container {
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results .container {
    padding: 0 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}
.search-results button {
  width: 100%;
}
.search-results .product__tag {
  display: none;
}
@media (min-width: 1024px) {
  .search-results .product__tag {
    display: block;
    top: 10px;
    left: 10px;
  }
}
.search-results .product__tag--mob {
  display: block;
  position: static;
}
@media (min-width: 1024px) {
  .search-results .product__tag--mob {
    display: none;
  }
}
.search-results .product__tag--mob .tag-sale {
  font-family: "Moderat Mono";
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-black);
}
.search-results .product__tag .tag-sale--big {
  font-size: 6px;
  padding: 1px 1px;
}
@media (min-width: 1024px) {
  .search-results .product__tag .tag-sale--big {
    font-size: 11px;
    padding: 7px 10px;
  }
}
.search-results .product__img a {
  height: 100%;
}
.search-results .product__img img {
  height: 100%;
}
.results-link {
  flex: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (min-width: 1024px) {
  .results-link {
    margin-right: 20px;
    width: 180px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 66px;
  }
}
.results-link__logo {
  display: none;
  height: 47px;
}
@media (min-width: 1024px) {
  .results-link__logo {
    display: block;
  }
}
.results-link__logo svg {
  width: 100%;
  height: 100%;
}
.results-link .btn-view {
  width: 100%;
  height: 60px;
  padding: 0 25px 0 20px;
}
.results-link .btn-view__icon {
  margin: 0 0 0 auto;
}
.results-wrap {
  height: calc(100vh - 180px);
  padding: 0 36px 20px 20px;
  overflow: hidden;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .results-wrap {
    height: auto;
    overflow: visible;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .results-wrap__row {
    display: flex;
    margin: 0 -10px;
  }
}
.results-wrap__col {
  border-bottom: 1px solid var(--color-neutral-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.results-wrap__col:last-child {
  border-bottom: none;
}
@media (min-width: 1024px) {
  .results-wrap__col {
    padding: 0 10px;
    border-bottom: none;
    display: block;
  }
}
.results-wrap .product {
  width: 100%;
}
.results-wrap .product--small {
  max-width: 280px;
}
@media (min-width: 1024px) {
  .results-wrap .product {
    width: 14vw;
  }
}
@media (min-width: 1300px) {
  .results-wrap .product {
    width: 180px;
  }
}
@media (min-width: 1024px) {
  .results-wrap .product__price {
    font-size: 13px;
  }
}
@media (min-width: 1300px) {
  .results-wrap .product__price {
    font-size: 14px;
  }
}
.results-wrap .product__wrap {
  padding: 20px 0;
  display: flex;
}
@media (min-width: 1024px) {
  .results-wrap .product__wrap {
    flex-direction: column;
    padding: 0;
  }
}
.results-wrap .product__img {
  width: 45px;
  height: 45px;
  overflow: hidden;
  margin-right: 20px;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .results-wrap .product__img {
    width: 100%;
    height: 180px;
  }
}
.results-wrap .product__body {
  padding: 0;
}
@media (min-width: 1024px) {
  .results-wrap .product__body {
    padding-top: 15px;
  }
}
.bg-transparent .section-header {
  transform: translateY(0);
}
.bg-transparent .section-header.shopify-section-header-sticky .header-wrapper {
  background: var(--color-white);
}
.bg-transparent .section-header.shopify-section-header-sticky .header .list-menu__item,
.bg-transparent .section-header.shopify-section-header-sticky .header .header__menu-main-link {
  color: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__icon--account
  path {
  fill: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__fit-guide-text {
  color: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__fit-guide-img:after {
  background-color: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__fit-guide-img
  path {
  fill: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__fit-guide-img
  circle {
  stroke: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__rewards-img:after {
  background-color: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__rewards-img
  path {
  fill: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__rewards-img
  circle {
  stroke: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__rewards-text {
  color: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header
  .list-menu__item {
  color: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header-logo
  path {
  fill: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .icon-hamburger
  path {
  fill: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .icon-search
  path {
  fill: var(--color-black);
}
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header__icon--cart
  path {
  fill: var(--color-black);
}
.bg-transparent .header-logo path {
  fill: var(--color-white);
}
.bg-transparent .header-wrapper {
  background: rgba(0, 0, 0, 0);
}
.bg-transparent .header .list-menu__item {
  color: var(--color-white);
}
.bg-transparent .header__submenu .list-menu__item,
.bg-transparent .header__submenu .header__menu-item {
  color: var(--color-black);
}
.bg-transparent .header:has(.header__search details[open]) .list-menu__item,
.bg-transparent .header:has(.header__search details[open]) .header__menu-main-link {
  color: var(--color-black);
}
.bg-transparent .icon-hamburger path {
  fill: var(--color-white);
}
.bg-transparent .icon-search path {
  fill: var(--color-white);
}
.bg-transparent .header__icon--cart path {
  fill: var(--color-white);
}
.bg-transparent .header__icon--account path {
  fill: var(--color-white);
}
.bg-transparent .header__fit-guide-text {
  color: var(--color-white);
}
.bg-transparent .header__fit-guide-img:after {
  background-color: var(--color-white);
}
.bg-transparent .header__fit-guide-img path {
  fill: var(--color-white);
}
.bg-transparent .header__fit-guide-img circle {
  stroke: var(--color-white);
}
.bg-transparent .header__rewards-img:after {
  background-color: var(--color-white);
}
.bg-transparent .header__rewards-img path {
  fill: var(--color-white);
}
.bg-transparent .header__rewards-img circle {
  stroke: var(--color-white);
}
.bg-transparent .header__rewards-text {
  color: var(--color-white);
}
.section-header {
  transform: translateY(0);
}
.fixed-pos .intro-section {
  margin: -35px 0 0 0 !important;
}
.fixed-pos [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
  margin: -15px 0 0 0 !important;
}
.fixed-pos .section-header {
  top: 34vw !important;
}
@media (min-width: 768px) {
  .fixed-pos .section-header {
    top: 30vw !important;
  }
}
@media (min-width: 1024px) {
  .fixed-pos .section-header {
    top: 28vw !important;
  }
  .fixed-pos [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
    margin: -35px 0 0 0 !important;
  }
}
.fixed-pos .section-header.fixed-any {
  position: fixed;
  top: var(--announcement-bar-height, 45px) !important;
}
.fixed-pos.header-search .section-header {
  position: fixed;
  top: var(--announcement-bar-height, 45px) !important;
}
.fixed-pos .menu-drawer {
  height: calc(100vh - var(--announcement-bar-height, 45px) - 60px);
}
.index-page .intro-section {
  margin: -60px 0 0 0;
}
@media (min-width: 750px) {
  .index-page .intro-section {
    margin: -80px 0 0 0;
  }
}
.index-page [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
  margin: -60px 0 0 0;
}
.index-page.header-search .section-header {
  position: fixed;
  top: 0;
}
.index-page .section-header {
  position: relative;
  top: 24vw;
  transform: translateY(0);
}
.index-page .section-header.fixed-any {
  position: fixed;
  top: 0;
}
.index-page .section-header.shopify-section-header-sticky .header-wrapper {
  background: var(--color-white);
}
.index-page
  .section-header.shopify-section-header-sticky
  .header
  .list-menu__item {
  color: var(--color-black);
}
@media (min-width: 1100px) {
  .index-page [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
    margin: -80px 0 0 0;
  }
}
/* The sticky `left: 90px` and the `position:relative; left:-5px` nudge that used
   to live here both fake-centred the nav around the old centred logo. They have
   higher specificity than the shared centring rule at the end of this file, so on
   scroll they yanked the nav off-centre. The nav is truly centred now. */
/* The homepage header used to be a transparent strip floating over the hero, so
   this block forced a hidden logo and white text/icons, plus colouring for the
   rewards + fit-guide links that used to live in the header. The redesign makes
   it a solid white bar ABOVE the hero with a visible logo and black content, and
   those two links now live in the utility bar - so the whole treatment is gone.
   Only the two dropdown rules below still carry their weight. */
.index-page .header__submenu .header__menu-item,
.index-page .header__submenu .list-menu__item {
  color: var(--color-black) !important;
}
.index-page .header:has(.header__search details[open]) .list-menu__item,
.index-page .header:has(.header__search details[open]) .header__menu-main-link {
  color: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header-wrapper {
  background: var(--color-white);
  top: 0;
}
.index-page .shopify-section-header-sticky .header__icon--account path {
  fill: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__fit-guide-text {
  color: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__fit-guide-img:after {
  background-color: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__fit-guide-img path {
  fill: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__rewards-img:after {
  background-color: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__rewards-img path {
  fill: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__rewards-img circle {
  stroke: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__rewards-text {
  color: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__active-menu-item {
  color: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header .list-menu__item,
.index-page .shopify-section-header-sticky .header .header__menu-main-link {
  color: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header-logo {
  display: block;
}
.index-page .shopify-section-header-sticky .icon-hamburger path {
  fill: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .icon-search path {
  fill: var(--color-black) !important;
}
.index-page .shopify-section-header-sticky .header__icon--cart path {
  fill: var(--color-black) !important;
}
.next-page .section-header {
  top: 0;
}
.next-page .section-header[announce-hidden="true"] {
  top: 0 !important;
}
.next-page .section-header.moved-top {
  top: var(--announcement-bar-height, 45px);
}
.overflow-hidden-tablet .header-wrapper {
  top: 0;
  background: #fff;
}
.overflow-hidden-tablet .header-logo {
  display: block;
}
.overflow-hidden-tablet .icon-search path {
  fill: var(--color-black);
}
.change-top[announce-hidden="true"] {
  top: 0 !important;
}
.header-search .header-wrapper {
  background: var(--color-white);
}
.header-search .header__active-menu-item {
  color: var(--color-black) !important;
}
.header-search .header .list-menu__item,
.header-search .header .header__menu-main-link {
  color: var(--color-black) !important;
}
.header-search .header-logo {
  display: block;
}
.header-search .header-logo path {
  fill: var(--color-black) !important;
}
.header-search .icon-hamburger path {
  fill: var(--color-black) !important;
}
.header-search .icon-search path {
  fill: var(--color-black) !important;
}
.header-search .header__icon--cart path {
  fill: var(--color-black) !important;
}
.header-search .header__icon--account path {
  fill: var(--color-black) !important;
}
.header-search .header__fit-guide-text {
  color: var(--color-black) !important;
}
.header-search .header__fit-guide-img:after {
  background-color: var(--color-black) !important;
}
.header-search .header__fit-guide-img path {
  fill: var(--color-black) !important;
}
.header-search .header__fit-guide-img circle {
  stroke: var(--color-black) !important;
}
.header-search .header__rewards-img path {
  fill: var(--color-black) !important;
}
.header-search .header__rewards-img circle {
  stroke: var(--color-black) !important;
}
.header-search .header__rewards-img:after {
  background-color: var(--color-black) !important;
}
.header-search .header__rewards-text {
  color: var(--color-black) !important;
}
@media (min-width: 1100px) {
  .header-search .header__inline-menu {
    left: 90px;
  }
}
.product-page .header__fit-guide-text {
  color: var(--color-black);
}
.product-page .header__fit-guide-img:after {
  background-color: var(--color-black);
}
.product-page .header__fit-guide-img path {
  fill: var(--color-black);
}
.product-page .header__fit-guide-img circle {
  stroke: var(--color-black);
}
.product-page .header__rewards-img path {
  fill: var(--color-black);
}
.product-page .header__rewards-img circle {
  stroke: var(--color-black);
}
.product-page .header__rewards-img:after {
  background-color: var(--color-black);
}
.product-page .header__rewards-text {
  color: var(--color-black);
}
@media (min-width: 990px) {
  .header__icons {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--header-height, 60px);
    padding-top: 0px;
  }

  .header .header__search {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The old `margin-top: 32px` pushed the icon down so the "SEARCH" caption
       lined up with the Loyalitty/Fit Guide text stacks. Those are gone, so the
       offset only knocked search 16px below the account and cart icons. */
  }

  .header .header__icon--search {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    top: 0;
    right: 0;
    gap: 8px;
    padding-top: 8px;
  }
  .header .header__icon--search span:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
  
  .header .header__icon--search .search-text {
    font-family: "Moderat Mono";
    font-style: normal;
    font-weight: 502;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-black);
    margin-top: 8px;
    white-space: nowrap;
    text-decoration: none;
    margin-top: 8px;
  }
  

  .header .header__icon--cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    margin: 0;
    position: relative;
    }
  .header .header__icon--cart svg {
    width: 30px;
    height: 30px;
  }
  /* The 'CART' caption is gone with the redesign — the reference header is
     icon-only on the right, matching the 'SEARCH' label removed alongside it. */

  .header .icon-search {
    width: 30px;
    height: 30px;
  }

  .header .header__icon--cart svg {
    width: 30px;
    height: 30px;
  }

  .header .cart-count-bubble {
    position: absolute;
    top: 5px;
    left: 17px;
  }
}

@media (min-width: 990px) {
  .bg-transparent .header__icon--search .search-text,
  .bg-transparent .header__icon--cart::after {
    color: var(--color-white);
  }

  .bg-transparent .section-header.shopify-section-header-sticky .header__icon--search .search-text,
  .bg-transparent .section-header.shopify-section-header-sticky .header__icon--cart::after {
    color: var(--color-black);
  }

  .index-page .header__icon--search .search-text,
  .index-page .header__icon--cart::after {
    color: var(--color-white) !important;
  }

  .index-page .shopify-section-header-sticky .header__icon--search .search-text,
  .index-page .shopify-section-header-sticky .header__icon--cart::after {
    color: var(--color-black) !important;
  }
}

/* Hover states */
.header__rewards:hover .header__rewards-text,
.header__fit-guide:hover .header__fit-guide-text,
.header__icon--search:hover .search-text,
.header__icon--cart:hover::after {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Mobile color variations */
.bg-transparent .header__icon--search .search-text {
  color: var(--color-white);
}

.bg-transparent .section-header.shopify-section-header-sticky .header__icon--search .search-text {
  color: var(--color-black);
}

.index-page .header__icon--search .search-text {
  color: var(--color-white) !important;
}

.index-page .shopify-section-header-sticky .header__icon--search .search-text {
  color: var(--color-black) !important;
}

/* Ensure sticky header maintains proper height for search text */
.shopify-section-header-sticky .header {
  min-height: 60px;
}

.shopify-section-header-sticky .header__icon--search {
  min-height: 44px;
  padding: 8px 0;
}

/* Remove all circle strokes */
.header__fit-guide-img circle,
.header .header__fit-guide-img circle,
.bg-transparent .header__fit-guide-img circle,
.index-page .header__fit-guide-img circle,
.header-search .header__fit-guide-img circle,
.header__fit-guide-img circle,
.index-page .header__fit-guide-img circle,
.product-page .header__fit-guide-img circle {
  stroke: transparent !important;
}

/* TikTok Alt Menu - Desktop: Always transparent, Mobile: Transparent at top, sticky black/white on scroll */
/* Override index-page positioning and logo visibility for tiktok-alt-menu */
.tiktok-alt-menu-page.index-page .section-header {
  position: fixed !important;
  top: 0 !important;
  transform: translateY(0) !important;
}
.tiktok-alt-menu-page.index-page .section-header.moved-top {
  top: var(--announcement-bar-height, 45px) !important;
}
.tiktok-alt-menu-page.index-page .header-logo {
  display: block !important;
}

@media (min-width: 991px) {
  /* Desktop: Ensure submenu items have white background with black text when header is transparent */
  .tiktok-alt-menu-page.bg-transparent .header__submenu.list-menu {
    background: rgba(0, 0, 0, 0) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .header__submenu.list-menu .header__menu-item {
    background: var(--color-white) !important;
    color: var(--color-black) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .header__submenu.list-menu .header__menu-item:hover {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
  }
  
  /* Desktop: Transparent at top, white background with black text when scrolled */
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header-wrapper {
    background: var(--color-white) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header .list-menu__item,
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__active-menu-item {
    color: var(--color-black) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header-logo path,
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .icon-hamburger path,
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .icon-search path,
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__icon--cart path,
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__icon--account path {
    fill: var(--color-black) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__fit-guide-text {
    color: var(--color-black) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__fit-guide-img path {
    fill: var(--color-black) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__rewards-text {
    color: var(--color-black) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__rewards-img path {
    fill: var(--color-black) !important;
  }
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__icon--search::after,
  .tiktok-alt-menu-page.bg-transparent .section-header.shopify-section-header-sticky .header__icon--cart::after {
    color: var(--color-black) !important;
  }
}

@media (max-width: 990px) {
  /* Mobile: When scrolled (next-page removed), make sticky header black/white */
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header-wrapper {
    background: var(--color-white) !important;
  }
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header .list-menu__item,
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header__active-menu-item {
    color: var(--color-black) !important;
  }
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header-logo path,
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .icon-hamburger path,
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .icon-search path,
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header__icon--cart path,
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header__icon--account path {
    fill: var(--color-black) !important;
  }
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header__fit-guide-text {
    color: var(--color-black) !important;
  }
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header__fit-guide-img path {
    fill: var(--color-black) !important;
  }
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header__rewards-text {
    color: var(--color-black) !important;
  }
  .tiktok-alt-menu-page:not(.next-page) .section-header.shopify-section-header-sticky .header__rewards-img path {
    fill: var(--color-black) !important;
  }
}

/* ============================================================================
   Homepage redesign — header bar layout + mobile avatar menu
   Appended last so it wins over the older rules above without !important.
   ========================================================================== */

/* --- Bar layout -----------------------------------------------------------
   DOM order is: header-drawer, search modal, logo, inline nav, icons.
   Mobile  : burger + search left, logo optically centred, account + cart right.
   Desktop : logo left, nav centred, search + account + cart right.
   The centred element is absolutely positioned rather than flex-centred because
   the left and right clusters differ in width, and a flex centre would drift as
   the cart bubble appears/disappears.

   It resolves against .header-wrapper (already position:relative in base.min.css),
   NOT .header. Do not add position:relative to .header — that would steal the
   containing block from .menu-drawer (top:100%/width:100%) and the search
   .modal__content (inset:0), both of which are absolute and expect the wrapper. */

header-drawer {
  order: 1;
}

.header > .header__search {
  order: 2;
  /* Pushes everything after it to the right edge. */
  margin-right: auto;
}

.header .header-logo {
  order: 3;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header .header__inline-menu {
  order: 4;
}

.header .header__icons {
  order: 5;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* The search summary is a flex child of .header now, not of .header__icons, so
   its old right-edge nudge would offset it from the burger. */
.header .header__icon--search {
  right: 0;
  gap: 0;
}

/* Search, account and cart are three separate flex items that inherited three
   different icon sizes (19 / 17 / 30px) and a -3px cart nudge, so they read as
   sitting on different lines. Normalise the box, the icon size and the baseline
   so the right-hand cluster is one row of equally-sized marks. */
.header .header__icon--cart,
.header .header__icon--account,
.header .header__icon--search {
  margin: 0;
  right: 0;
  top: 0;
  align-self: center;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The three marks have different aspect ratios (search 24.5x24.5, profile
   21.5x24.7, bag 19.5x24.5) but a near-identical cap height, so size by HEIGHT
   and let width follow — forcing a square box would scale them unevenly. */
.header .header__icon--search .icon,
.header .header__icon--account .icon,
.header .header__icon--cart .icon,
.header .header__icon--cart svg,
.header .icon-search {
  height: 21px;
  width: auto;
}

/* The search modal is a sibling of .header__icons (it has to be, so flex `order`
   can move it left on mobile and right on desktop with a single instance — a
   second modal would duplicate the input ids). That means the space between
   search and account comes from .header's own column-gap, which was 32px while
   .header__icons used 20px internally, making search look detached from the
   cluster. Match them so the three read as one block. */
.header {
  column-gap: 12px;
}

@media (min-width: 990px) {
  .header {
    column-gap: 20px;
  }
}

/* Burger and close live in the same <span> and are swapped with `visibility`,
   which still reserves layout space — so the button was two icons wide and the
   close was dragged back over the burger with `left: -20px`. Stack them in one
   grid cell instead: the button is now one icon wide and the offset is unneeded. */
.header .header__icon--menu > span {
  display: grid;
  place-items: center;
}

.header .header__icon--menu > span > .icon {
  grid-area: 1 / 1;
}

.header .header__icon--menu .icon-close {
  left: 0;
  width: 14px;
  height: 14px;
}

/* The count bubble used hard pixel offsets (top:11/left:10, and top:5/left:17 at
   one breakpoint) tuned to the old 30px cart glyph, so it sat off the new bag.
   It rides the top-right corner of the bag as a badge — anchored to the corner
   rather than to fixed pixels, so it stays put if the icon size changes again. */
.header .cart-count-bubble {
  position: absolute;
  top: -5px;
  right: -7px;
  left: auto;
  bottom: auto;
  transform: none;
  width: 15px;
  height: 15px;
  min-width: 0;
  font-size: 9px;
  line-height: 1;
  z-index: 1;
}

/* Single colour source for the cluster, so the SVGs recolour together. */
.header .header__icon--search,
.header .header__icon--account,
.header .header__icon--cart {
  color: var(--color-black);
}

.header .header__icon--search .icon-search path,
.header .header__icon--account .icon-account path,
.header .header__icon--cart .icon-cart path {
  fill: currentColor;
}

/* Transparent-header templates (collections banners, etc.): white marks over the
   artwork, flipping to black once the header goes sticky — the same treatment
   .list-menu__item already gets.

   These set `color`, not `fill`. The older `.bg-transparent … path { fill: white }`
   rules are specificity 0,3,0 losers against the `fill: currentColor` rule above,
   so colouring the path directly no longer works; the single colour source is the
   link element and currentColor carries it into the SVG (the account mark also
   strokes with currentColor, so it follows too). */
.bg-transparent .header .header__icon--search,
.bg-transparent .header .header__icon--account,
.bg-transparent .header .header__icon--cart {
  color: var(--color-white);
}

.bg-transparent
  .section-header.shopify-section-header-sticky
  .header
  .header__icon--search,
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header
  .header__icon--account,
.bg-transparent
  .section-header.shopify-section-header-sticky
  .header
  .header__icon--cart {
  color: var(--color-black);
}

/* Open search modal and open mobile menu both force the solid white bar, so the
   marks go black there regardless of template. `!important` because these have to
   beat the `.bg-transparent .header …` rule above (0,3,0) and `menu-open` lands on
   #shopify-section-header, not on .header, so the selector cannot simply be made
   longer. The neighbouring .menu-open icon rules in this file already use it. */
.header-search .header .header__icon--search,
.header-search .header .header__icon--account,
.header-search .header .header__icon--cart,
.menu-open .header__icon--search,
.menu-open .header__icon--account,
.menu-open .header__icon--cart {
  color: var(--color-black) !important;
}

/* The wrapper is a column flexbox from the old icon-over-label treatment; with
   the labels gone it just needs to centre a single mark. */
.header .header__search {
  justify-content: center;
}

@media (min-width: 990px) {
  .header .header-logo {
    position: static;
    transform: none;
    order: 1;
  }

  .header .header__inline-menu {
    order: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Sits with the icon cluster on the right, after the centred nav. */
  .header > .header__search {
    order: 3;
    margin-right: 0;
    margin-left: auto;
  }

  .header .header__icons {
    order: 4;
    gap: 20px;
  }

  /* base.min.css hides a search modal that is a DIRECT child of .header on
     desktop (`.header:not(.header--top-center) > .header__search`). It is a
     direct child by design now, so answer that rule at equal specificity —
     otherwise the desktop search icon disappears entirely. */
  .header:not(.header--top-center) > .header__search {
    display: flex;
  }
}

/* --- Mobile avatar menu ---------------------------------------------------
   Row geometry from the reference: 54px circle, 68px pitch, 24px page inset,
   19px avatar-to-label gap, "+" inset 29px from the right edge. */
.header .menu-drawer {
  padding: 0;
}

.header .menu-drawer__navigation {
  padding: 24px 0 40px;
  padding-right: 0;
  margin-right: 0;
}

.header .menu-avatar-list {
  width: 100%;
}

/* The design has no hairlines between rows. */
.header .menu-avatar-list > li,
.header .menu-drawer__menu li {
  border-top: 0;
  margin: 0 !important;
}

.header .menu-avatar-row {
  display: flex;
  align-items: center;
  gap: 19px;
  padding: 7px 29px 7px 24px;
  min-height: 68px;
  text-decoration: none;
  position: relative;
}

.header .menu-avatar-row__media {
  display: block;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.header .menu-avatar-row__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Shown until a merchant picks an image, so row rhythm is correct while empty. */
.header .menu-avatar-row__img--empty {
  background-color: var(--color-neutral-mid);
}

.header .menu-avatar-row__label {
  font-family: "Moderat Mono", "Monda", monospace;
  font-size: 19px;
  line-height: 1;
  color: var(--color-black);
  letter-spacing: 0.01em;
}

/* "+" / "-" — the ::after and its `.active` swap are defined further up; only the
   position changes here, to line up with the design's right inset. */
.header summary.menu-avatar-row:after {
  right: 29px;
  font-size: 22px;
  top: 50%;
}

/* Submenu: inline accordion, text-only children, indented to the label column
   (24px inset + 54px avatar + 19px gap). */
.header .menu-avatar-row__submenu {
  padding: 0 29px 12px 97px;
}

.header .menu-avatar-row__sublink {
  font-family: "Moderat Mono", "Monda", monospace;
  font-size: 15px;
  line-height: 1;
  color: var(--color-black);
  padding: 11px 0 !important;
  min-height: 0;
}

.header .menu-drawer__submenu .menu-avatar-row__submenu li {
  margin: 0 !important;
}


/* ============================================================================
   Homepage redesign — header sits ON TOP of the intro section, not over it.

   Previously the homepage header was pushed 24-34vw down the hero and rendered
   transparent with a hidden logo and white icons, so it floated in the middle of
   the artwork. The new design puts a solid white bar above the hero, exactly like
   every other template. That means three coupled changes:
     1. drop the vw offsets so the header sits at the top of normal flow,
     2. drop the negative .intro-section margins that pulled the hero up under it,
     3. restore the logo and the black-on-white colouring.
   `!important` is used only where the rules being overridden already use it.
   ========================================================================== */

/* The announcement bar is `position: fixed` (announcement-bar.min.css), so it
   reserves NO flow space. `top:` on a relative header only shifts it visually and
   would let the bar cover it, so the clearance is a MARGIN — that reserves real
   space, keeping bar, header and hero stacked with no overlap. */
.index-page .section-header {
  top: 0;
  margin-top: var(--announcement-bar-height, 45px);
}

/* Dismissed bar: no fixed strip to clear, so drop the margin. */
.index-page .section-header[announce-hidden="true"] {
  margin-top: 0;
}

.fixed-pos .section-header {
  top: 0 !important;
}

@media (min-width: 768px) {
  .fixed-pos .section-header {
    top: 0 !important;
  }
}

@media (min-width: 1024px) {
  .fixed-pos .section-header {
    top: 0 !important;
  }
}

/* Once sticky the header leaves flow, so the margin no longer applies; it pins
   directly under the fixed bar instead. */
.index-page .section-header.fixed-any,
.index-page .section-header.shopify-section-header-sticky {
  margin-top: 0;
  top: var(--announcement-bar-height, 45px);
}

/* The hero no longer tucks under the header. */
.index-page .intro-section,
.index-page [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
  margin: 0;
}

@media (min-width: 750px) {
  .index-page .intro-section {
    margin: 0;
  }
}

.fixed-pos .intro-section,
.fixed-pos [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
  margin: 0 !important;
}

@media (min-width: 1024px) {
  .fixed-pos [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
    margin: 0 !important;
  }
}

@media (min-width: 1100px) {
  .index-page [id*="tolstoy_shoppable_video_ugc_hero_video_block"] {
    margin: 0;
  }
}

/* Solid bar, visible logo, black icons — same treatment as the sticky state. */
.index-page .header-wrapper {
  background: var(--color-white);
}

.index-page .header-logo {
  display: block;
}

.index-page .header-logo path {
  fill: var(--color-black) !important;
}

.index-page .header .list-menu__item {
  color: var(--color-black) !important;
}

.index-page .header__active-menu-item {
  color: var(--color-black) !important;
}

.index-page .icon-hamburger path,
.index-page .icon-search path,
.index-page .header__icon--cart path,
.index-page .header__icon--account path {
  fill: var(--color-black) !important;
}


/* ============================================================================
   Header is permanently pinned under the announcement bar.

   The bar is no longer dismissible, so there is nothing for the header to move
   up and down for: it stays fixed directly beneath the bar at every scroll
   position. StickyHeader still toggles its classes (they close the search modal
   and open disclosures on scroll, which is worth keeping) but they no longer
   move anything.

   `!important` is deliberate here: a dozen legacy rules set competing
   position/top values for this element, several of them already !important, and
   this block is the single final answer.
   ========================================================================== */

.section-header,
.index-page .section-header,
.fixed-pos .section-header,
.index-page .section-header.fixed-any,
.index-page.header-search .section-header,
.fixed-pos.header-search .section-header,
.index-page .section-header.shopify-section-header-sticky {
  position: fixed !important;
  top: var(--announcement-bar-height, 45px) !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* Kill the scroll-away transform and its transition. */
.shopify-section-header-hidden,
.shopify-section-header-hidden.menu-open,
#shopify-section-header.animate,
.shopify-section-header-sticky {
  transform: none !important;
  transition: none !important;
}

/* The header is out of flow, so the homepage reserves the bar + header height
   on the body rather than on .intro-section — that way it holds regardless of
   which section the merchant puts first. The hero is already sized
   `calc(100vh - var(--site-chrome-height))`, so hero + chrome = exactly 100vh. */
body.index-page {
  padding-top: var(--site-chrome-height, 125px);
}