@charset "UTF-8";
@import url(/static/modal.css);
@import url(/static/reset.css);
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: Epilogue, Inter, "Inter UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400; }

.layout {
  display: flex;
  flex: 1;
  flex-direction: row;
  position: relative; }
  @media (max-width: 900px) {
    .layout {
      flex-direction: column; } }
  @media (max-width: 650px) {
    .layout {
      flex-direction: column; } }
li.tab {
  cursor: pointer; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  /* gap: 16px 16px; */
  grid-template-areas: ". . ." ". . ." ". . ."; }
  @media (max-width: 1600px) {
    .grid {
      display: grid;
      grid-template-rows: repeat(1, 1fr);
      gap: 1px 1px;
      grid-template-areas: ". . ." ". . ." ". . .";
      border-radius: 10px;
      background: #efefef;
      border: 1px solid #e6e6e6;
      overflow: hidden; } }
  @media (min-width: 1600px) {
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(1, 1fr);
      gap: 1px 1px;
      grid-template-areas: ". . . ." ". . . ." ". . . .";
      border-radius: 10px;
      background: #efefef;
      border: 1px solid #e6e6e6;
      overflow: hidden; } }
  @media (max-width: 1200px) {
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, 1fr);
      grid-template-areas: ". ."; } }
  @media (max-width: 900px) {
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, 1fr);
      grid-template-areas: "."; } }
nav.side-nav {
  width: 20rem;
  /* Put it on the left */
  order: -1;
  /* Don't shrink when AJAX content loads */
  flex-shrink: 1;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 0 1.5rem;
  height: 100vh;
  overflow: scroll;
  position: sticky;
  top: 0; }
  @media (max-width: 75rem) {
    nav.side-nav {
      width: 16rem; } }
  @media (max-width: 900px) {
    nav.side-nav {
      background: #fff;
      height: unset;
      z-index: 9;
      position: relative;
      padding: 0 20px;
      display: block;
      width: 100%;
      border: 0;
      box-sizing: border-box; } }
  nav.side-nav header {
    padding: 1rem;
    position: sticky;
    top: 0;
    background: #f6f6f6;
    color: black;
    z-index: 10;
    margin-top: 2rem;
    border-radius: 10px; }
    nav.side-nav header h1 {
      margin-top: 1rem;
      font-size: 1.125rem;
      line-height: 140%;
      font-weight: 500; }
    nav.side-nav header .logo {
      height: 2.125rem;
      max-width: 80%; }
      nav.side-nav header .logo img {
        height: 100%; }

.modal__content {
  padding-top: 56px; }
  .modal__content p.shoe-modal-headline {
    font-family: "Saira";
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 130%; }
  .modal__content .content {
    overflow-y: auto;
    flex: 2; }
  @media (max-width: 900px) {
    .modal__content {
      flex-direction: column;
      overflow-y: scroll !important;
      justify-content: flex-start;
      margin-top: 56px; }
      .modal__content .img-container {
        flex: 1;
        padding: 0;
        margin: 0;
        border-right: 0; }
      .modal__content .content {
        overflow-y: unset !important; } }
.shoe-settings {
  font-size: 16px;
  line-height: 19px;
  text-transform: capitalize;
  color: #828282;
  margin-bottom: 3rem;
  padding-top: 2rem; }
  @media (max-width: 900px) {
    .shoe-settings {
      display: none; } }
  .shoe-settings .form-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; }
    .shoe-settings .form-group label {
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 8px;
      flex-grow: 1; }
    .shoe-settings .form-group input,
    .shoe-settings .form-group select {
      width: 100%; }
    .shoe-settings .form-group select {
      outline: none;
      font-size: 1rem;
      border: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .shoe-settings .form-group select option:not(:last-child) {
        margin-bottom: 0.25rem; }

fieldset {
  margin-bottom: 1.375rem; }
  fieldset legend {
    display: block;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025rem;
    font-size: 0.8rem;
    font-weight: 516;
    color: #191919;
    font-family: "Saira"; }

option {
  position: relative;
  display: inline-block;
  padding: 0.75rem 0.5rem;
  border: 1px solid #191919;
  box-sizing: border-box;
  border-radius: 0.25rem;
  color: #191919;
  flex: 0 0 1;
  margin-bottom: 0.875rem; }

input[type="checkbox"], input[type="radio"] {
  opacity: 0;
  position: absolute;
  left: -100vw; }
  input[type="checkbox"] + label, input[type="radio"] + label {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 0.5rem 0;
    border: 1px solid #efefef;
    box-sizing: border-box;
    border-radius: 0.25rem;
    color: #191919;
    font-size: 0.875rem; }
  input[type="checkbox"]:hover + label, input[type="radio"]:hover + label {
    background-color: gainsboro;
    color: black; }
  input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {
    background-color: #191919;
    color: #fff; }

input[type="submit"] {
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  font-size: 1.125rem;
  font-weight: 300;
  background: #191919;
  padding: 1rem 1.5rem;
  color: white;
  z-index: 11;
  box-shadow: rgba(25, 25, 25, 0.18) 2px 0 5px;
  border-radius: 10rem;
  border: 1px solid black; }

.feature-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; }
  .feature-illustration img {
    width: 60%; }

.collection {
  margin-top: 1rem;
  padding: 0 8rem; }
  @media (max-width: 1600px) {
    .collection {
      padding: 0 2rem; } }
  @media (max-width: 1200px) {
    .collection {
      padding: 2rem; } }
  @media (max-width: 650px) {
    .collection {
      padding: 1rem; } }
  .collection h3 {
    font-size: 1rem; }
  .collection header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 6rem;
    flex-direction: column; }
    .collection header small {
      margin-bottom: 0.5rem; }
    .collection header img {
      max-height: 8rem;
      max-width: 8rem; }
    .collection header h2 {
      font-size: 3rem;
      text-transform: uppercase;
      margin-bottom: 0.8rem;
      font-family: Saira;
      font-weight: 300;
      margin-bottom: 0; }
    .collection header h3 {
      font-size: 1.25rem;
      color: gray;
      font-size: italic; }
    .collection header small {
      margin-bottom: 1rem;
      display: block;
      font-family: "Saira";
      letter-spacing: 0.8px;
      color: #767676; }

small {
  font-size: 1rem;
  text-transform: uppercase;
  font-family: "Epilogue"; }

.purchase-link {
  flex-shrink: 1;
  display: flex;
  align-items: center;
  flex: 3;
  align-self: unset; }
  .purchase-link .button {
    transition: 0.2s all ease-in-out;
    border: 1px solid #d9d9d9;
    -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.1);
    display: block;
    text-align: center;
    border-radius: 6px;
    color: #191919;
    text-decoration: none;
    height: 3rem;
    align-items: center;
    flex: 1;
    align-items: center;
    display: flex;
    font-weight: 500;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid darkgray; }
    .purchase-link .button:hover {
      color: black;
      background-color: white;
      border: 1px dashed; }
  .purchase-link .price {
    height: 3rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0; }

main {
  flex: 1;
  position: relative;
  padding-bottom: 5rem; }
  main .bg {
    position: absolute;
    width: 100%;
    z-index: -10; }
    main .bg.bg-top {
      top: 0;
      left: 0;
      right: 0; }
    main .bg.bg-bottom {
      bottom: 0;
      left: 0;
      right: 0; }

header.brand-tabs {
  border-bottom: 1px solid lightgray;
  position: sticky;
  overflow-x: scroll;
  top: 0;
  background: #ffffff;
  box-shadow: rgba(25, 25, 25, 0.18) 2px 0 5px;
  max-width: calc(100vw - 23rem);
  height: 3rem;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */ }
  header.brand-tabs::-webkit-scrollbar {
    display: none;
    /* Chrome and Safari */ }
  @media (max-width: 900px) {
    header.brand-tabs {
      max-width: calc(100vw - 17rem); } }
  @media (max-width: 650px) {
    header.brand-tabs {
      width: 100vw !important;
      overflow-x: scroll;
      max-width: 100vw !important;
      position: sticky;
      justify-content: flex-start;
      align-self: flex-start; }
      header.brand-tabs ul {
        justify-content: flex-start; } }
  header.brand-tabs ul {
    display: flex;
    justify-content: center;
    height: 3rem;
    white-space: nowrap; }
  header.brand-tabs div {
    height: 3rem; }
  header.brand-tabs ul li:first-child {
    border-left: 1px solid lightgray; }
  header.brand-tabs li[data-tab] {
    padding: 1rem 2rem;
    height: fit-content;
    white-space: nowrap;
    height: 1rem; }
    header.brand-tabs li[data-tab]:not(.tab--active):hover {
      background: gainsboro;
      color: black; }
  header.brand-tabs .tab {
    border-right: 1px solid lightgray; }
    header.brand-tabs .tab.tab--active {
      background: #191919;
      color: #fff; }

.shoe {
  display: flex;
  background: white;
  min-width: 0;
  transition: 0.3s background linear; }
  .shoe:hover {
    background: #f5f5f5; }
  .shoe .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.5rem;
    min-width: 0;
    text-align: left;
    padding: 0 0 16px;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.01rem;
    line-height: 1.4rem;
    flex: 0; }
    .shoe .title p {
      text-overflow: ellipsis;
      flex: 1;
      white-space: nowrap;
      overflow: hidden; }
    .shoe .title img {
      max-width: 20px;
      margin-left: 8px; }
  .shoe .img-container {
    position: relative;
    border-radius: 20px;
    flex: 1;
    align-items: flex-end;
    display: flex;
    width: 100%; }
    .shoe .img-container img {
      border-radius: 20px;
      color: transparent;
      width: 100%; }
      .shoe .img-container img:after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: ""; }

button.to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: white;
  padding: 0.5rem 1rem;
  color: black;
  z-index: 11;
  box-shadow: rgba(25, 25, 25, 0.18) 2px 0 5px;
  outline: none;
  border-radius: 10rem;
  border: 1px solid black;
  cursor: pointer;
  display: none;
  height: 50px; }
  button.to-top svg {
    height: 28px;
    width: 80px; }

button.open-filters {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: white;
  padding: 0.5rem 1rem;
  color: black;
  z-index: 11;
  box-shadow: rgba(25, 25, 25, 0.18) 2px 0 5px;
  outline: none;
  border-radius: 10rem;
  border: 1px solid black;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  height: 50px;
  text-transform: uppercase; }
  @media (max-width: 900px) {
    button.open-filters {
      display: flex; } }
  button.open-filters img {
    margin-right: 5px; }

.tabs-container {
  overflow-x: scroll;
  width: 100%; }

.empty-state {
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; }
  .empty-state .wrapper {
    max-width: 600px;
    padding: 4rem 0;
    text-align: center; }
    .empty-state .wrapper * {
      flex: 0 0 auto;
      margin-bottom: 2rem; }
  .empty-state .button {
    text-align: center;
    border-radius: 6px;
    color: #191919;
    text-decoration: none;
    height: 3rem;
    align-items: center;
    flex: 1;
    align-items: center;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid darkgray; }
    .empty-state .button:hover {
      border: 1px dashed; }

p.large {
  font-size: 2rem;
  font-family: "Saira"; }

.result-count {
  display: flex;
  justify-content: center;
  padding: 2rem 0 0; }
  .result-count p {
    background-color: rgba(211, 211, 211, 0.29);
    padding: 1rem;
    border-radius: 10rem; }

.sticky {
  position: fixed !important;
  top: 0 !important;
  width: 100% !important; }

.learn-more {
  text-align: center;
  /* flex: 1; */
  text-align: left;
  margin-left: 1rem;
  display: flex;
  color: gray;
  padding: 12px 0;
  display: flex;
  align-items: center; }
  .learn-more small {
    padding: 0.2rem;
    text-transform: none;
    font-size: 0.875rem;
    cursor: pointer;
    margin-top: 2px; }

a.card-link {
  width: 100%;
  display: flex;
  padding: 1.3rem;
  flex-direction: column;
  color: unset;
  text-decoration: unset;
  min-width: 0; }

small.price {
  text-align: center;
  font-size: 1.4rem; }

.bottom-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem; }

.collection-titles {
  margin-bottom: 2rem; }

.form-group div {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 0.5rem; }

.form-group label img {
  max-width: 20px;
  height: 20px;
  margin-right: 5px; }

.form-group label:hover img {
  color: white; }

.form-group--brands input[type="checkbox"]:checked + label > img {
  filter: invert(1); }

.form-group--colors input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  justify-content: center; }
  .form-group--colors input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--color);
    margin-right: 0.5rem;
    border-radius: 4px;
    box-sizing: border-box; }
  .form-group--colors input[type="checkbox"] + label.has-border:before {
    border: 1px solid #191919; }

.form-group--colors input[type="checkbox"]:checked + label:before {
  border: 1px solid white; }

#mobileForm.shoe-settings {
  height: 100%;
  margin-bottom: 0;
  display: block; }

.section-link {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #191919;
  text-decoration: underline;
  text-underline-offset: 3px; }

.nav-sub {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #555;
  line-height: 1.3; }

.running-settings {
  text-transform: none; }
  @media (max-width: 900px) {
    .running-settings {
      display: block;
      padding-top: 1rem;
      margin-bottom: 1rem; } }
.running-main {
  flex: 1;
  min-width: 0;
  padding-bottom: 4rem; }

.page-intro {
  padding: 2.5rem 8rem 0; }
  @media (max-width: 1600px) {
    .page-intro {
      padding: 2.5rem 2rem 0; } }
  @media (max-width: 650px) {
    .page-intro {
      padding: 1.5rem 1rem 0; } }
  .page-intro h2 {
    font-family: Saira, sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.15;
    color: #191919; }
  .page-intro p {
    margin-top: 0.75rem;
    max-width: 44rem;
    color: #444;
    line-height: 1.5; }
  .page-intro .result-meta {
    font-size: 0.875rem;
    color: #767676; }

.guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  list-style: none;
  padding: 0; }
  .guide-links a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid #e0e0e0;
    border-radius: 10rem;
    font-size: 0.875rem;
    color: #191919;
    text-decoration: none;
    background: #fff; }
    .guide-links a:hover {
      background: #f0f0f0; }
    .guide-links a.active {
      background: #191919;
      border-color: #191919;
      color: #fff; }

.shoe .brand-text {
  margin-left: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  color: #767676;
  white-space: nowrap; }

.shoe .specs {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.75rem;
  font-size: 0.8rem;
  color: #191919; }
  .shoe .specs li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.25rem;
    white-space: nowrap; }
  .shoe .specs span {
    color: #767676; }
  @media (max-width: 650px) {
    .shoe .specs {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.3rem;
      font-size: 0.75rem; }
      .shoe .specs li {
        white-space: normal; } }
.empty-running {
  padding: 3rem 8rem;
  color: #444; }
  @media (max-width: 1600px) {
    .empty-running {
      padding: 3rem 2rem; } }
  .empty-running code {
    background: #f3f3f3;
    padding: 0.1rem 0.35rem;
    border-radius: 4px; }

.apply-filters {
  display: none; }

.running-settings.is-pending {
  opacity: 0.75;
  transition: opacity 0.2s; }

.filters-toggle summary {
  display: none; }

@media (max-width: 900px) {
  .filters-toggle[open] .running-settings {
    padding-bottom: 5rem; }
  .filters-toggle .apply-filters {
    display: block;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 10rem;
    background: #191919;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.25); }
  .filters-toggle .running-settings.is-dirty .apply-filters {
    background: #fd6a61; } }

@media (max-width: 900px) {
  .filters-toggle {
    margin-top: 1rem; }
    .filters-toggle summary {
      display: block;
      cursor: pointer;
      padding: 0.75rem 1rem;
      border: 1px solid #191919;
      border-radius: 10rem;
      text-align: center;
      font-size: 0.95rem; } }

.shoe--running {
  flex-direction: column; }
  .shoe--running a.card-link {
    padding-bottom: 0.5rem;
    box-sizing: border-box; }
  .shoe--running .card-buy {
    margin-top: auto;
    box-sizing: border-box;
    padding: 0 1.3rem 1.3rem; }
    .shoe--running .card-buy a.purchase-link {
      text-decoration: none;
      width: 100%; }

.shoe-page {
  background: #fff; }

.shoe-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid #efefef; }
  @media (max-width: 650px) {
    .shoe-topbar {
      padding: 0.75rem 1rem; } }
  .shoe-topbar .shoe-topbar__logo img {
    height: 1.75rem; }
  .shoe-topbar .section-link {
    margin-top: 0; }

.shoe-detail {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem; }
  @media (max-width: 650px) {
    .shoe-detail {
      padding: 1rem 1rem 3rem; } }
  .shoe-detail h2 {
    font-family: Saira, sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #191919; }
  .shoe-detail section {
    margin-top: 2.5rem; }
  .shoe-detail .similar .grid {
    margin-top: 1rem; }

.crumbs {
  font-size: 0.85rem;
  color: #767676; }
  .crumbs a {
    color: #767676; }

.shoe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  margin-top: 1rem !important; }
  @media (max-width: 900px) {
    .shoe-hero {
      grid-template-columns: 1fr;
      gap: 1.5rem; } }
  .shoe-hero .shoe-hero__image {
    background: #f6f6f6;
    border-radius: 20px;
    overflow: hidden; }
    .shoe-hero .shoe-hero__image img {
      width: 100%;
      display: block; }
  .shoe-hero .shoe-hero__brand {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 0.8rem;
    color: #767676; }
  .shoe-hero h1 {
    font-family: Saira, sans-serif;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.1;
    margin-top: 0.25rem;
    color: #191919; }
  .shoe-hero .shoe-hero__summary {
    margin-top: 1rem;
    line-height: 1.55;
    color: #333; }
  .shoe-hero .shoe-hero__price {
    margin-top: 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #191919; }
    .shoe-hero .shoe-hero__price span {
      display: block;
      margin-top: 0.25rem;
      font-size: 0.85rem;
      font-weight: 400;
      color: #767676; }

.buy-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem; }
  .buy-list .buy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid #191919;
    border-radius: 8px;
    color: #191919;
    text-decoration: none;
    transition: 0.15s background ease-in-out; }
    .buy-list .buy-row:hover {
      background: #191919;
      color: #fff; }
  .buy-list .buy-row__price {
    font-weight: 500; }

.spec-table dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem; }
  @media (max-width: 650px) {
    .spec-table dl {
      grid-template-columns: 1fr; } }
  .spec-table dl div {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #efefef; }
  .spec-table dl dt {
    color: #767676; }
  .spec-table dl dd {
    font-weight: 500;
    color: #191919;
    text-align: right; }

.spec-table .spec-note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #767676; }

.similar-sub {
  margin-top: -0.5rem;
  font-size: 0.9rem;
  color: #767676; }

.share-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid #d9d9d9;
  border-radius: 10rem;
  background: #fff;
  color: #191919;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer; }
  .share-button:hover {
    border-color: #191919; }

.colorways {
  margin-top: 1.25rem; }
  .colorways .colorways__label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #767676;
    margin-bottom: 0.5rem; }
  .colorways .colorways__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; }
  .colorways .colorway {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 4.5rem;
    padding: 0.25rem;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.7rem;
    color: #444; }
    .colorways .colorway img {
      width: 100%;
      border-radius: 6px;
      background: #f6f6f6; }
    .colorways .colorway:hover, .colorways .colorway.is-active {
      border-color: #191919; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }

.site-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 1rem;
  z-index: 20; }
  .site-search > svg {
    position: absolute;
    left: 0.8rem;
    color: #767676;
    pointer-events: none; }
  .site-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem 0.65rem 2.3rem;
    border: 1px solid #d9d9d9;
    border-radius: 10rem;
    font: inherit;
    font-size: 0.95rem;
    color: #191919;
    background: #fff;
    outline: none;
    -webkit-appearance: none; }
    .site-search input[type="search"]:focus {
      border-color: #191919; }

.site-search__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  min-width: 18rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  max-height: 70vh;
  overflow-y: auto; }
  .site-search__list li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    color: #191919;
    text-decoration: none; }
  .site-search__list li.is-active a,
  .site-search__list li a:hover {
    background: #f3f3f3; }
  .site-search__list img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    background: #f6f6f6;
    border-radius: 6px;
    flex-shrink: 0; }
  .site-search__list .site-search__name {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: 1.25;
    text-transform: none; }
    .site-search__list .site-search__name small {
      font-family: inherit;
      font-size: 0.75rem;
      color: #767676;
      text-transform: capitalize; }
  .site-search__list .site-search__empty {
    padding: 0.75rem;
    font-size: 0.9rem;
    color: #767676; }
  .site-search__list .site-search__all a {
    justify-content: center;
    font-size: 0.85rem;
    color: #555;
    border-top: 1px solid #f0f0f0;
    border-radius: 0; }

.shoe-topbar {
  gap: 1rem; }
  .shoe-topbar .site-search {
    margin-top: 0;
    flex: 1;
    max-width: 28rem; }
  @media (max-width: 650px) {
    .shoe-topbar {
      flex-wrap: wrap; }
      .shoe-topbar .site-search {
        order: 3;
        flex-basis: 100%;
        max-width: none; } }
.search-title {
  font-family: Saira, sans-serif;
  font-weight: 500;
  font-size: 2rem;
  color: #191919; }

.stars {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #191919; }
  .stars .stars__bar {
    --pct: 0%;
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 1px; }
    .stars .stars__bar::before {
      content: "★★★★★";
      color: #dcdcdc; }
    .stars .stars__bar::after {
      content: "★★★★★";
      position: absolute;
      left: 0;
      top: 0;
      width: var(--pct);
      overflow: hidden;
      white-space: nowrap;
      color: #f5a623; }
  .stars .stars__count {
    font-weight: 400;
    color: #767676; }
  .stars.stars--large {
    margin-top: 0.75rem;
    font-size: 0.95rem; }
    .stars.stars--large .stars__bar {
      font-size: 1.15rem; }
    .stars.stars--large a.stars__count {
      margin-left: 0.25rem;
      color: #555;
      text-decoration: underline;
      text-underline-offset: 3px; }

.site-footer {
  margin-top: auto;
  padding: 2rem 2rem 2.5rem;
  border-top: 1px solid #ececec;
  background: #fafafa;
  color: #555;
  font-size: 0.85rem;
  text-align: center; }
  .site-footer p {
    margin: 0 auto 0.75rem;
    max-width: 46rem;
    line-height: 1.5; }
  .site-footer a {
    color: inherit; }
  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.75rem; }
    .site-footer__links a {
      color: #222;
      text-decoration: none;
      font-weight: 500; }
    .site-footer__links a:hover {
      color: #fd6a61; }
  .site-footer__small {
    color: #888;
    font-size: 0.78rem; }

.info-page {
  max-width: 46rem;
  line-height: 1.65; }
  .info-page h1 {
    font-size: 2rem;
    margin: 1rem 0 0.75rem; }
  .info-page h2 {
    font-size: 1.2rem;
    margin: 2rem 0 0.5rem; }
  .info-page p, .info-page ul {
    margin-bottom: 0.9rem;
    color: #333; }
  .info-page ul {
    padding-left: 1.25rem;
    list-style: disc; }
  .info-page li {
    margin-bottom: 0.4rem; }
  .info-page a {
    color: #fd6a61; }
  .info-page .info-lede {
    font-size: 1.05rem;
    color: #555; }

.buy-note {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #888; }
  .buy-note a {
    color: inherit; }