/** Shopify CDN: Minification failed

Line 294:19 Unexpected "input"

**/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Unbounded:wght@200..900&display=swap");

.scall-div {
  margin: 85px 0px;
  max-width: 320.25px;
}

/* .unloading[data-transitions=true][data-animate_page_transition_style=page-slow-fade] .transition-body {
animation-duration: .5s !important;
} */

div#quiz-container {
    width: 100%;
    padding: 0 20px !important;
}

.range_container {
  --_marker-border-clr: #1c1d1d;
  --_marker-size: 15px;
  --_track-heigt: 3px;
  --_tooltip-bg-clr: rgba(0, 0, 0, 0.4);
  --_tooltip-txt-clr: var(--_marker-border-clr);
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}
.sliders_control {
  position: relative;
}
.slider-tooltip {
  position: absolute;
  top: -2.5rem;
  left: 0;
  width: max-content;
  color: #1c1d1d;
  font-size: 0.8rem;
  border-radius: 4px;
  padding: 3px 6px;
  text-align: center;
  translate: -50% -10px;
  font-size: 12px;
  background: #d3d3d3;
  min-width: 50px;
  letter-spacing: 0.7px;
  font-family: 'Poppins';
}
.slider-tooltip::before {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  translate: -50% 0;
  width: 0.5rem;
  height: 0.5rem;
  rotate: 45deg;
  z-index: -1;
  background-color: inherit;
}
.scale div {
  padding-top: 0px;
  margin-top: 12px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 14px;
  height: 28px;
  background-color: var(--_marker-border-clr);
  border-radius: 4px; /* Set the border-radius to 0px for square handles */
  box-shadow: 0 0 0 1px var(--_marker-border-clr);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: var(--_marker-size);
  height: var(--_marker-size);
  background-color: var(--_marker-border-clr);
  border-radius: 4px; /* Set the border-radius to 0px for square handles */
  box-shadow: 0 0 0 1px var(--_marker-border-clr);
  cursor: pointer;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: var(--_track-heigt);
  width: 100%;
  position: absolute;
  background-color: #d3d3d3;
  pointer-events: none;
  padding: 2px 0px;
}
#fromSlider,
#fromSlider2 {
  height: 0;
  z-index: 1;
}
.scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  position: relative;
  width: calc(100% - var(--_marker-size));
  margin-inline: auto;
  z-index: 9;
  font-size: 16px;
  line-height: 17.5px;
  color: #666666;
  letter-spacing: 0.7px;
}
.scale div {
  position: absolute;
  translate: -50% 0;
}
.scale div::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% -125%;
  width: 1.75px;
  height: 14.5px;
  background-color: #d3d3d3;
}
.scale2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  position: relative;
  width: calc(100% - var(--_marker-size));
  margin-inline: auto;
  font-size: 0.8rem;
  z-index: 9;
}

.scale2 div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -125%;
  width: 1.75px;
  height: 17.5px;
  background-color: #d3d3d3;
}
.scale div:first-child {
  font-size: 16px;
  line-height: 17px;
  color: #666666;
}
.scale div {
  color: #66339900;
}

.scale div:last-child {
  font-size: 16px;
  line-height: 17px;
  color: #666666;
  min-width: 70px;
}

.scale2 div:first-child {
  font-size: 16px;
  line-height: 17px;
  color: #666666;
}
.scale2 div {
  color: #66339900;
}

.scale2 div:last-child {
  font-size: 16px;
  line-height: 17px;
  color: #666666;
  min-width: 50px;
}

/*  */

div#step_7 img {
    max-height: 396px;
    max-width: 610px;
    object-fit: contain;
    width: 100%;
    margin-top: 65px;
    border-radius: 12px;
}
div#step_6 img {
  max-height: 445px;
    max-width: 530px;
    object-fit: contain;
    width: 100%;
    padding: 58px;
}
div#step_5 img {
     max-height: 442px;
    max-width: 521px;
    object-fit: contain;
    padding-top: 44px;
    width: 100%;
}
div#step_4 img {
      width: 100%;
    max-height: 476px;
    max-width: 450px;
    object-fit: contain;
}
div#step_3 img {
  width: 100%;
    max-height: 500px;
    max-width: 426px;
    object-fit: contain;
    padding: 51px;
}
div#step_2 img {
     max-width: 379.42px;
    object-fit: contain;
    width: 100%;
    max-height: 496px;
    padding: 58px;
}
div#step_1 img {
  max-width: 491px;
    object-fit: contain;
    width: 100%;
    max-height: 472px;
    padding-bottom: 60px;
}
.fit_right_image img {
  max-height: 410px;
  max-width: 450px;
  object-fit: cover;
  width: 100%;
}
.promotional-cards-section__card-image {
  align-content: end;
  margin: auto;
  width: 100%;
}
.error_msg {
  color: red !important;
  margin: 20px 0 20px 0 !important;
}
.number-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.radio_high {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 35px 0px 70px 0px;
}

.radio-div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.29px;
  color: #666666;
  cursor: pointer;
  font-family: "Poppins";
}
.radio-div input[type="radio"] {
  width: 15px !important;
  height: 15px;
}
.radio-div input[type="radio"] {
  accent-color: #ff3300 !important;
}
.radio_yes_no {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 35px 0px 70px 0px;
}

input[type="radio"]input:checked::after {
  background: green;
  width: 15px;
  height: 15px;
  position: absolute;
  content: "";
  z-index: 0;
  border-radius: 20px;
}

input:is([type="checkbox"], [type="radio"]):checked {
  accent-color: #ff231b !important;
  background: #ff231b !important;
  border: 1px solid #ff231b !important;
  box-shadow: inset 0px 0px 1px 2px #ffffff !important;
}

.number-grid li {
  background: #fff;
  padding: 10px 8px;
  border: 1px solid #eee;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  font-family: "Poppins";
  cursor: pointer;
  transition: background 0.2s;
  color: #666666;
  width: 48px;
  height: 48px;
  border-radius: 62px;
}
.size_type_value .shoes_type {
  grid-template-columns: repeat(3, 2fr);
}
.size_type_value .shoes_type li {
  width: 106px;
  height: 48px;
  border-radius: 70px;
  font-size: 16px;
}

.number-grid li:hover {
  background: #eaeaea;
}
.number-grid li.active {
  background-color: #c7c7c7;
}

.Question-span {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  margin: 20px 0px;
  text-transform: uppercase;
  letter-spacing: 3.2px;
  font-family: 'Unbounded';
}
.back_button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 35px;
}

.back_button svg {
  display: inline-block;
  vertical-align: middle;
}

.back_button span {
  font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: 0.4px;
    font-family: 'Poppins';
}

.custom-inner-section1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 100px 0px;
  align-items: center;
  gap: 30px;
}
.left_fit_col {
  max-width: 478px;
}
.promotional-cards-section__card-content {
  max-width: 478px;
}
.custom_first_section
  .cards-wrapper
  .promotional-cards-section__card
  .main_innrer_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 30px 0 80px 0;
  align-content: center;
  gap: 30px;
}
.left_fit_col h1 {
  font-size: 30.6px;
  font-weight: 700;
  line-height: 36.72px;
  color: #1c1d1d;
  font-family: Microgramma D Extended;
}
.promotional-cards-section__card-content h1 {
  font-size: 30.6px;
  font-weight: 600;
  line-height: 36.72px;
  letter-spacing: 0px;
  color: #1c1d1d;
  font-family: 'Unbounded';
  text-transform: math-auto;
}

.left_fit_col p {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.56px;
  color: #1c1d1d;
  margin: 25px 0px;
  line-height: 32px;
  font-family: Helvetica;
}
.promotional-cards-section__card-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.56px;
  color: #1c1d1d;
  margin: 25px 0px;
  font-style: italic;
  font-family: "Poppins";
}
.start-over {
  text-align: center;
  display: grid;
  gap: 28px;
}
.start-over-btn {
  display: inline-flex;
  font-size: 14px;
  font-weight: 400;
  color: #1c1d1d;
  margin: 0 auto;
}
div#BackProductGridContainer {
  width: 594px;
  margin: 0 auto;
}
.start-over h2 {
  font-family: "Unbounded";
  font-weight: 600;
  text-transform: math-auto;
  font-size: 30.6px;
  line-height: 36.72px;
  letter-spacing: 0px;
  color: #1c1d1d;
  width: 478px;
  margin: 0 auto;
}

.start-over p {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.56px;
  margin: 0 auto;
}

.left_fit_col a {
  text-decoration: none;
  width: 245px;
  height: 47.5px;
  background-color: #ff3300;
  color: #ffffff;
  font-size: 16px;
  line-height: 22.72px;
  letter-spacing: 0.8px;
  font-weight: 700;
  padding: 12px 50px;
  text-align: center;
  font-family: Microgramma D Extended;
}
.left_fit_col a:hover {
  background-color: #f30;
  color: #ffffff;
}
.promotional-cards-section__card-content a {
  text-decoration: none;
  width: fit-content;
  height: 51px;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 14px;
  line-height: 18.18px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 16px 32px;
  text-align: center;
  font-family: "Unbounded";
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
}
.promotional-cards-section__card-content a:hover {
  background-color: #f30;
  color: #ffffff;
}
/*  */
.custom_first_section {
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
  padding: 0px 40px;
}
.promotional-cards-section__card-content .size_type_value {
  margin-bottom: 25px;
  width: fit-content;
}

/* For iPad Mini (Portrait) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .left_fit_col,
  .promotional-cards-section__card-content {
    min-width: 325px;
  }
  .fit_right_image img {
    max-width: 100%;
  }
  div#step_1 img {
    max-width: 350px;
  }
  div#step_2 img {
    max-width: 100%;
  }
  div#step_5 img {
    max-width: 100%px;
    margin-top: 0px;
  }
  div#step_6 img {
    max-width: 100%;
  }
  div#step_7 img {
    max-width: 100%;
    margin-top: 0px;
  }
  .shoes_type {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* For iPad Air (Portrait) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .left_fit_col,
  .promotional-cards-section__card-content {
    min-width: 325px;
  }
  .fit_right_image img {
    max-width: 350px;
  }
  div#step_1 img {
    max-width: 350px;
  }
  div#step_2 img {
    max-width: 350px;
  }
  div#step_5 img {
    max-width: 350px;
    margin-top: 0px;
  }
  div#step_6 img {
    max-width: 350px;
  }
  div#step_7 img {
    max-width: 350px;
    margin-top: 0px;
  }
  .shoes_type {
    grid-template-columns: repeat(4, 1fr);
  }
}

div#scale2 {
  cursor: pointer;
}
div#scale {
  cursor: pointer;
}

/* =====================  collection page css  ================================ */

.main_collection .full-unstyled-link {
  font-size: 18.9px;
  font-weight: 400;
  color: #1c1d1d;
  line-height: 28.32px;
  letter-spacing: 0.4px;
}

.main_collection .card-information .caption-with-letter-spacing.light {
  color: #1c1d1d;
  font-size: 11px;
  line-height: 17.6px;
  letter-spacing: 2.2px;
}

.main_collection .card-information span.price-item.price-item--regular {
  font-size: 14.4px;
  color: #1c1d1d;
  line-height: 21.6px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.custom-btn
  button.quick-add__submit.button.button--full-width.button--secondary {
    margin-top: 20px;
    max-width: 216px;
    background: #FF0000;
    color: white;
    height: 51px;
    border: none !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 18.18px;
    letter-spacing: 1px;
    font-family: "Unbounded";
    width: 100%;
}

li.grid__item.scroll-trigger.animate--slide-in
  .card.card--standard.card--media {
  border: none;
}

.main_collection li.grid__item.scroll-trigger.animate--slide-in {
  padding-right: 22px;
}

.custom-btn
  button.quick-add__submit.button.button--full-width.button--secondary:after {
  box-shadow: none !important;
}

.main_collection .main_title h2 {
  font-family: "microgramma_dbold_extended";
  font-size: 30.6px;
  font-weight: 700;
  line-height: 36.72px;
  letter-spacing: 1.5299999713897705px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  max-width: 478px;
  margin: auto;
  margin-bottom: 24px;
}

.main_collection .main_title p {
  font-family: Helvetica;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 35.84px;
  letter-spacing: 0.5600000023841858px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.main_collection ul#product-grid {
  margin-top: 40px;
}

.pagination__list {
  display: block !important;
}

ul.pagination__list.list-unstyled {
  display: flex !important;
  flex-direction: row;
  align-content: space-around;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

/* jan 2 */

.radio-div input[type="radio"] {
  accent-color: #ff231b;
}

ul.filter-items li {
  list-style: none;
}
ul.filter-items {
  padding: 0;
  margin: 0;
}
ul.filter-items li {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 400;
  color: #1c1d1d;
  font-family: Helvetica;
  line-height: 17px;
  align-items: center;
  display: flex;
  gap: 4px;
}

.match_percentage {
  position: absolute;
  top: 3px;
  z-index: 99;
  right: 10px;
  width: 100%;
  text-align: end;
}
.match_percentage span {
  font-size: 12px;
  font-family: "Unbounded";
  font-weight: 500;
  color: #000;
  line-height: 30.21px;
  text-transform: uppercase;
  letter-spacing: 0px;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
}

.view-more button#load-more {
  width: 179px;
  border: 1px solid #e8e8e1;
  padding: 10px;
  background: transparent;
  font-size: 14px;
  font-family: "Poppins";
  font-weight: 400;
  line-height: 15.6px;
  letter-spacing: 0.4px;
  height: 48px;
  color: #000000;
  border-radius: 50px;
}

.card__inner.color-scheme-2.gradient.ratio {
  height: 200px;
}

.card.card--standard.card--media .card__heading a:after {
  display: none;
}

.attributes p {
    font-size: 12px !important;
    font-weight: 400;
    color: #1c1d1d;
    line-height: 17.6px;
    margin: 0px 0px 4px;
}

.view-more {
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

/* =======================  new css  =====================  */

.grid-product__content
  a.grid-product__link
  .grid-product__image-mask
  .image-wrap.loaded {
  padding-bottom: 71.10105580693816% !important;
}

/* add to cart note css */

.product-block .product-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffc2c2;
  padding: 8px 16px;
  background: var(--colorBtnPrimary) var(--urlButtonArrowPng) no-repeat 150% 35%;
}

.product-block .product-note {
  --colorBtnPrimary: #ffc2c2;
}
.product-block .product-note span.note-icon {
  display: inline-flex;
}
.product-block .product-note .custom-note {
  font-family: Helvetica;
  font-size: 13px;
  font-weight: 700;
  line-height: 19.2px;
  margin: 0;
  color: #ff0000;
}
.product-block .product-note a {
  margin-left: 0;
}

.feature-row-wrapper .feature-row__item .appear-delay-2 a.btn:hover {
  background-position: 95% 35% !important;
}

[data-animate_buttons="true"]
  .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static):hover:not(
    [disabled]
  ) {
  background-position: 95% 35% !important;
  padding-right: 55px;
}

.product-single__meta .product-block .product-note:hover {
  background-position: 95% 35% !important;
  padding-right: 35px;
}
.product-single__meta .product-block .product-note:hover span.next-arrow svg {
  display: none;
}
.product-single__meta .product-block .product-note span.next-arrow {
  min-height: 26px;
}

.product-note a {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.back-button {
  text-align: right;
  margin-bottom: 30px;
}
div#BackProductGridContainer .back-button button {
  background: var(--colorBtnPrimary) var(--urlButtonArrowPng) no-repeat -130% 35%;
  background-size: 29px;
  background-image: url(https://www.lakecycling.com/cdn/shop/t/28/assets/button-back-arrow-2x%201.png) !important;
  transition: padding-left 0.3s, background 0.3s, opacity 1s;
}
body div#BackProductGridContainer .back-button button:hover {
  padding-left: 50px;
  padding-right: 20px;
  background: var(--colorBtnPrimary) var(--urlButtonArrowPng) no-repeat 10% 35% !important;
  background-image: url(https://www.lakecycling.com/cdn/shop/t/28/assets/button-back-arrow-2x%201.png) !important;
  background-size: 29px !important;
}

div#ProductGridContainer .product-card__details a {
    font-weight: 500;
    font-size: 16px;
    line-height: 28.32px;
    letter-spacing: 0.4px;
}
div#ProductGridContainer .product-card--card {
    background: white !important;
}
div#ProductGridContainer .product-card--card img {
    max-height: 200px;
}
div#ProductGridContainer .product-card--card .media {
    background: white !important;
}
div#ProductGridContainer {
    max-width: 1250px;
    width: 100%;
    /* margin: auto; */
}
div#ProductGridContainer .product-card__content.grow {
    padding: 30px 0px;
}

div#ProductGridContainer .product-card__details {
    flex-direction: column;
    margin-bottom: 20px;
}
div#ProductGridContainer a.caption.reversed-link.uppercase.leading-none.tracking-widest {
    font-family: 'Poppins' !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    line-height: 17.6px !important;
    letter-spacing: 2.2px !important;
    vertical-align: middle;
    text-transform: uppercase;
    color: #1C1D1D !important;
    margin: 0 !important;
}

@media screen and (max-width: 1300px) {
.collection.page-width.relative .collection__content.flex {
    margin-top: 30px;
}


}




@media screen and (max-width: 1200px) {
  .main_collection li.grid__item.scroll-trigger.animate--slide-in {
    padding-right: 0;
  }
}

@media screen and (max-width: 850px) {
  .number-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 650px) {
  .promotional-cards-section__card-content h1 {
    font-size: 27.6px;
  }
  div#BackProductGridContainer {
    width: auto;
    margin-bottom: 25px;
  }
  .start-over h2 {
    width: auto;
    font-size: 25.6px;
  }
  .start-over-btn {
    font-size: 16px;
  }
  .match_percentage span {
    font-size: 14px;
  }
  .custom-inner-section1 {
    display: grid;
    grid-template-columns: 1fr;
    margin: 30px 0px;
    align-items: center;
    gap: 20px;
  }

  .custom_first_section
    .cards-wrapper
    .promotional-cards-section__card
    .main_innrer_cards {
    display: grid;
    grid-template-columns: 1fr;
    margin: 30px 0px;
    align-content: center;
    gap: 20px;
  }

  .number-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 20px;
  }
  .radio_high {
    margin: 20px 0 20px;
  }

  .slider-tooltip {
    font-size: 10px;
    min-width: 45px;
  }

  .custom-btn
    button.quick-add__submit.button.button--full-width.button--secondary {
    font-size: 14px;
  }
  .radio_yes_no {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0 20px;
  }

  .scall-div {
    margin: 85px auto;
    max-width: 95%;
  }
  .promotional-cards-section__card-content a {
    text-decoration: none;
    width: 100%;
  }
  .left_fit_col a {
    width: 100%;
  }
  .scale div:first-child {
    font-size: 14px;
  }
  .scale div:last-child {
    font-size: 14px;
  }
  div#step_5 img {
    margin-top: 0px;
    width: 100%;
  }
  div#step_7 img {
    margin-top: 0;
  }
}

/* 14-02-2025 */
.fit-banner a.fit-banner__link {
  /* background-image: var(--urlButtonArrow2xPng);
    background-repeat: no-repeat;
    background-size: 29px;
    background-position: 110% 100%;
    transition: 0.25s ease-in-out; */
  position: relative;
  overflow: hidden;
}
/* .fit-banner a.fit-banner__link:hover {
    background-position: 96% 100%;
} */
.fit-banner a.fit-banner__link::after {
  content: "";
  position: absolute;
  right: -100%;
  top: 50%;
  width: 30px;
  height: 10px;
  background-color: transparent;
  background-image: var(--urlButtonArrow2xPng);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 29px;
  transform: translateY(-50%);
  transition: 0.25s ease-in-out;
  filter: brightness(0) saturate(100%) invert(33%) sepia(97%) saturate(4839%)
    hue-rotate(3deg) brightness(102%) contrast(108%);
}
.fit-banner a.fit-banner__link:hover::after {
  right: 16px;
}
.fit-banner a.fit-banner__link:hover span.fit-banner__chevron {
  visibility: hidden;
}
.fit-banner a.fit-banner__link span.fit-banner__chevron {
  margin-left: auto;
  margin-right: 10px;
}
.fit-banner span.fit-banner__alert svg {
  width: 18px;
  height: auto;
}
a.fixed-view-your-fit {
  position: fixed;
    z-index: 99;
    bottom: 90px;
    right: 28px;
    background: #FF0000;
    color: #fff !important;
    font-size: 14px;
    font-family: "Unbounded";
    font-weight: 700;
    border-radius: 80px;
    padding: 16px 36px;
}

.promotional-cards-section__card-content p a {
  display: inline;
  padding: inherit !important;
  width: inherit;
  height: inherit;
  margin: 0 !important;
  background: none;
  color: #ff3300;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.56px;
  margin: 25px 0px;
  font-style: italic;
  font-family: Helvetica;
  text-decoration: underline;
}

/* Collection banner mobile fix: long single-word titles in non-English locales
   (e.g. Dutch "WIELRENSCHOENEN", German compounds) were forced onto one line by
   .split-words .word { white-space: nowrap } and pushed the flex banner box past
   the viewport, cutting off both the title and the description. Allow the title
   to wrap, scale it down on small screens, and stop the flex item from expanding. */
@media screen and (max-width: 767px) {
  .banner__title.title-xl {
    font-size: clamp(30px, 10vw, 48px);
  }

  .banner__title .split-words {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .banner__title .split-words .word {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .collection-banner-section .banner__box {
    min-width: 0;
    max-width: 100%;
  }

  .laseo-collection-lead {
    font-size: 14px;
  }
}

/* ==========================================================================
   Uitverkochte maat: belletje in plaats van doorstreping
   --------------------------------------------------------------------------
   theme.css tekent over een uitgeschakelde swatch een diagonale streep via
   ::before. custom.css laadt voor theme.css, dus de selector hieronder
   herhaalt .swatches om hoger te scoren op specificiteit zonder !important.

   De bel is een mask in plaats van een achtergrondplaatje, zodat hij
   currentColor overneemt en dus meekleurt met de uitverkocht-staat.
   ========================================================================== */

/* Een uitverkochte maat draagt alleen de class .disabled, niet het echte
   disabled-attribuut, dus je kunt hem wel degelijk aanklikken: dat is juist
   wat de notify-knop tevoorschijn haalt. theme.css zet er not-allowed op en
   dat suggereert ten onrechte dat er niets te doen valt. */
.swatches.swatches
  input:is([type="checkbox"], [type="radio"]):is(:disabled, .disabled)
  + .label-swatch {
  cursor: pointer;
}

.swatches.swatches
  input:is([type="checkbox"], [type="radio"]):is(:disabled, .disabled)
  + .label-swatch::before {
  --lake-bell: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9'/%3E%3Cpath%20d='M13.73%2021a2%202%200%200%201-3.46%200'/%3E%3C/svg%3E");
  content: "";
  position: absolute;
  z-index: 1;
  /* De pil is 44px hoog en volledig afgerond, dus de rechterbovencurve heeft
     een radius van 22px. Het punt op 45 graden ligt 6,44px van de hoek; met een
     bel van 16px komt het midden daar precies op uit bij -1,56px. Zo snijdt de
     rand de bel door het midden in plaats van er langs te lopen. */
  inset: -1.56px -1.56px auto auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--lake-bell) center / contain no-repeat;
  mask: var(--lake-bell) center / contain no-repeat;
}

/* ==========================================================================
   Winkelwagen: knoppen zwart in plaats van rood
   --------------------------------------------------------------------------
   Rood is de globale knopkleur van het thema; losse secties zetten hem zelf
   op zwart. De winkelwagen deed dat niet, dus zetten we de knopvariabelen
   hier op dezelfde waarde als de rest van de site (--color-foreground).
   ========================================================================== */
.template-cart .cart.section,
cart-drawer,
.cart-drawer {
  --color-button-background: 23 23 23;
  --color-button-border: 23 23 23;
  --color-button-gradient: #171717;
}

/* ==========================================================================
   Gekozen maat die uitverkocht is
   --------------------------------------------------------------------------
   Een gekozen maat krijgt normaal een zwarte ring, maar de uitverkocht-regel
   overschrijft die kleur met het lichte red-200 en dan zie je nauwelijks nog
   welke maat aanstaat. Hieronder een dikkere ring in de volle rode tint.
   ========================================================================== */
.swatches.swatches
  input:is([type="checkbox"], [type="radio"]):is(:disabled, .disabled):checked
  + .label-swatch::after {
  --tw-shadow-color: rgb(var(--color-foreground));
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  --tw-shadow: var(--tw-shadow-colored);
  box-shadow: var(--tw-shadow);
  inset: 0;
}

.swatches.swatches
  input:is([type="checkbox"], [type="radio"]):is(:disabled, .disabled):checked
  + .label-swatch {
  background-color: rgb(var(--color-red-200) / 0.35);
}

/* ==========================================================================
   LASEO 2026-09-23: "Ons verhaal" / "Our story" verbergen in het bureaublad-menu
   op smalle desktopbreedtes.
   Vanaf 1024px toont het thema het horizontale menu, maar de labels passen
   dan niet op een regel: "Vind jouw pasvorm" klapt naar een tweede regel en
   de dropdowns zijn daardoor niet bereikbaar. Per taal is de bovengrens
   gemeten (breedte waarop het volledige menu weer op een regel past, plus
   marge). Het item blijft staan in de mobiele menulade en in de footer.
   ========================================================================== */
@media screen and (min-width: 1024px) and (max-width: 1399.98px) {
  .header__menu > ul > li:has(> details > summary[data-link$="/pages/onze-verhaal"]) {
    display: none;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
  .header__menu > ul > li:has(> details > summary[data-link$="/pages/nuestra-historia"]) {
    display: none;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1599.98px) {
  .header__menu > ul > li:has(> details > summary[data-link$="/pages/unsere-geschichte"]) {
    display: none;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1679.98px) {
  .header__menu > ul > li:has(> details > summary[data-link$="/pages/notre-histoire"]) {
    display: none;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1099.98px) {
  .header__menu > ul > li:has(> details > summary[data-link$="/pages/our-story"]) {
    display: none;
  }
}

/* LASEO-USPS-START */
/* ==========================================================================
   LASEO 2026-09-23: kleur-, breedte- en USP-regels op de productkaart en PDP
   Hoort bij snippets/laseo-product-usps.liquid.

   De PDP-pillen zijn neutraal: een lichte grijstint met zwarte tekst. Rood is
   in dit thema de kleur van aandacht (uitverkocht, sale, de knop); als de USP's
   die kleur ook dragen, vecht alles om dezelfde aandacht. Grijs houdt de kop
   rustig en laat de rode knop het werk doen.
   ========================================================================== */

:root {
  /* Zelfde grijs als de fototegels op de PDP (.media / .product__media). */
  --laseo-chip-bg: rgb(var(--color-placeholder, 250 250 250));
  --laseo-chip-ink: rgb(var(--color-foreground, 23 23 23));
  --laseo-chip-icon: rgb(var(--color-foreground, 23 23 23) / 0.4);
}

/* De tegel leest van boven naar beneden: modelnaam, beschikbare breedtes, prijs,
   kleurstalen. De kleurnaam staat er niet bij, want de stalen tonen de kleur al,
   en de USP's ook niet: die herhalen zich bij elke kleur van hetzelfde model en
   maken het raster onrustig. Ze staan wel op de PDP. */
/* De kleurstalen staan rechtsboven, op de regel van de titel: het raster krijgt
   twee kolommen en beide blokken staan in rij 1.
   .product-card ervoor zetten omdat theme.css later laadt: met alleen
   .product-card__details wint de themaregel bij gelijke specificiteit. */
.product-card .product-card__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
}

.product-card .product-card__details {
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0;
}

/* Breedtes strak onder de titel, daarna meer lucht voor de prijs. */
.product-card .laseo-meta {
  margin: 0.1rem 0 0.5rem;
}

.product-card .product-card__details .price {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
}

.laseo-meta {
  display: block;
  color: rgb(var(--color-foreground) / 0.55);
  font-size: var(--text-xs, 0.6875rem);
}

.product-card .product-card__bottom {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  margin-top: 0.25rem;
  padding-top: 0;
}

/* Iets grotere kleurstalen: het thema zet ze op 12px (mobiel) en 16px (desktop),
   en dat is klein voor een schoen waar de kleur het verschil maakt. */
.product-card .product-card__bottom .color-swatch {
  --swatch-size: 1.25rem;
}

@media screen and (min-width: 768px) {
  .product-card .product-card__bottom .color-swatch {
    --swatch-size: 1.5rem;
  }
}

.laseo-usps {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.laseo-usps__icon {
  flex: none;
}

/* --------------------------------------------------------------- kaart
   Op de tegel blijft het een rustige afvinklijst. Drie rode pillen per
   tegel zouden in een raster van 24 tegels gaan concurreren met de
   New-badge, de sale-prijs en de knop. */
.laseo-usps--card {
  display: grid;
  gap: 0.25rem;
  font-size: var(--text-xs, 0.6875rem);
  line-height: 1.35;
}

.laseo-usps--card .laseo-usps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.45rem;
  color: rgb(var(--color-foreground) / 0.78);
}

.laseo-usps--card .laseo-usps__icon {
  width: 0.85em;
  height: 0.85em;
  margin-top: 0.22em;
  color: rgb(var(--color-foreground) / 0.45);
}

.laseo-usps--card .laseo-usps__item > span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Op telefoon staan de tegels in twee kolommen en past een USP niet op een
   regel. Liever twee volledige USP's dan drie afgekapte: een half afgebroken
   zin ("Sport Comfort-leest,...") zegt niets. */
@media screen and (max-width: 767px) {
  /* Kleur en breedte onder elkaar: naast elkaar passen ze niet in een tegel
     van een halve schermbreedte. De scheidingsstip vervalt dan ook. */
  .laseo-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem 0;
  }

  .laseo-meta__color + .laseo-meta__width::before {
    display: none;
  }

  .laseo-usps--card .laseo-usps__item:nth-child(n + 3) {
    display: none;
  }

  .laseo-usps--card .laseo-usps__item > span {
    -webkit-line-clamp: 2;
  }
}

/* ----------------------------------------------------------------- PDP
   Strakke chips: vlakke grijstint, geen rand, geen schaduw. Dezelfde
   afgeronde vorm als de maatpillen eronder, zodat de kop en de keuze-
   interface een taal spreken. */
.laseo-usps--pdp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.4rem 0 0.25rem;
}

.laseo-usps--pdp .laseo-usps__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--laseo-chip-bg);
  color: var(--laseo-chip-ink);
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 500;
  line-height: 1.25;
}

.laseo-usps--pdp .laseo-usps__icon {
  width: 0.9em;
  height: 0.9em;
  stroke-width: 2;
  color: var(--laseo-chip-icon);
}

/* Score naast de titel op de PDP: sterretje plus cijfer, zonder aantal reviews. */
.laseo-score {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  font-size: var(--text-sm, 0.8125rem);
  line-height: 1;
  color: rgb(var(--color-foreground) / 0.75);
}

/* Zelfde sterkleur als de badge op de productkaart: het thema gebruikt daar
   --color-rating (245 158 11) via .product-card__rating .icon. */
.laseo-score__icon {
  width: 1.1em;
  height: 1.1em;
  color: rgb(var(--color-rating, 245 158 11));
}

/* ------------------------------------------ titel, score, prijs onder elkaar
   Het thema zet de prijs naast de titel: .product__title.with-price is een
   raster van twee kolommen met de prijs rechts uitgelijnd. Hier staan ze onder
   elkaar, in leesvolgorde: wat het is, wat anderen ervan vinden, wat het kost.
   In een kolomraster bepaalt de DOM-volgorde de rijen, dus de score hoeft in
   de markup alleen maar tussen de titel en de prijs te staan. */
.product__info .product__title.with-price {
  grid-template-columns: 1fr;
  align-items: start;
  justify-content: start;
  row-gap: 0.55rem;
}

.product__info .product__title.with-price h1 {
  grid-column: 1 / -1;
}

.product__info .product__title.with-price .product__price,
.product__info .product__title.with-price .price__sale {
  place-self: start;
}

/* Vanaf lg zet het thema de prijs in een kolom, rechts uitgelijnd. Onder de
   titel hoort hij als een regel, links, met de sale-prijs ernaast. */
.product__info .product__title.with-price .price {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
}

/* De rijafstand van het raster doet het werk; een eigen marge telt er dubbel bij op. */
.product__info .product__title .laseo-score {
  margin: 0;
}

/* ------------------------------------------- ademruimte in de keuzekolom
   De optiegroepen (breedte, kleur, maat) stonden op 20px van elkaar,
   waardoor het label van de volgende groep tegen de pillen van de vorige
   aan plakte. Meer lucht tussen de groepen dan binnen een groep: dat is
   wat de kolom scanbaar maakt. */
.product__info .variant-picker {
  gap: 2rem;
}

/* Het label is bijzaak, de gekozen waarde is de informatie: klein label,
   vette waarde. */
.product__info .variant-picker .form__label {
  margin-bottom: 0.5rem;
  font-size: 12px;
  line-height: 1.3;
}

.product__info .variant-picker .form__label .font-medium {
  font-weight: 700;
}

/* De keuzes zelf staan dichter op elkaar, horizontaal en verticaal. Het thema
   zet er 16px tussen; dat valt in een rij van 25 maten uit elkaar. */
.product__info .variant-picker .swatches {
  gap: 0.5rem;
}

.product__info .variant-picker fieldset + fieldset {
  padding-top: 0.25rem;
}

/* Alle maatpillen even breed: de breedste is "46.5" (67px), de smalste 53px, en
   dat verschil maakt van 24 maten een rommelig raster. De breedte- en kleurkeuze
   blijven op hun eigen breedte, want daar staan woorden in. */
.product__info .variant-picker fieldset:not([data-option-slug='width']) .label-swatch {
  min-width: 4.25rem;
  text-align: center;
}

/* Het belletje op een uitverkochte maat staat op de rand van de pil en die rand
   liep er dwars doorheen. Het krijgt nu een wit schijfje eronder. Daarvoor wordt
   de bel als achtergrondafbeelding getekend in plaats van als mask: een mask
   knipt het witte vlak net zo goed weg als de rest. */
.swatches.swatches
  input:is([type='checkbox'], [type='radio']):is(:disabled, .disabled)
  + .label-swatch::before {
  -webkit-mask: none;
  mask: none;
  width: 17px;
  height: 17px;
  inset: -3px -3px auto auto;
  border-radius: 50%;
  background-color: rgb(var(--color-background, 255 255 255));
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fca5a5'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9'/%3E%3Cpath%20d='M13.73%2021a2%202%200%200%201-3.46%200'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* De grote foto links in de scroll-indeling staat in een hoog, staand vlak. Het
   thema schaalt hem daar met cover, dus een liggende productfoto wordt flink
   bijgesneden. Op de US-site draagt dezelfde tegel de class media--contain; die
   regel is hier in CSS overgenomen, zodat de hele schoen in beeld blijft. */
.product__preview .product__media > img {
  object-fit: contain;
}

/* De knoppenrij mag niet tegen de laatste maat aan komen te staan. */
.product__info .product-form,
.product__info .product__inventory {
  margin-top: 0.75rem;
}

/* Op de kleinste telefoons (iPhone SE, mini) moet de langste USP nog op een
   regel in de pil passen; anders breekt de tekst binnen de pil en valt de
   vorm uit elkaar. */
@media screen and (max-width: 400px) {
  .laseo-usps--pdp .laseo-usps__item {
    padding: 0.35rem 0.65rem;
    font-size: var(--text-xs, 0.6875rem);
  }
}

@media screen and (min-width: 768px) {
  .laseo-usps--pdp {
    margin-top: 1.75rem;
  }

  .product__info .variant-picker {
    gap: 2.25rem;
  }
}
/* LASEO-USPS-END */

/* ==========================================================================
   Fototegels: een grijs voor collectiepagina en PDP
   --------------------------------------------------------------------------
   Een tikje donkerder dan de themawaarde (#fafafa, --color-placeholder),
   anders valt de tegel op wit weg. Hier op een plek, zodat collectie, PDP en
   de USP-pillen op de PDP altijd dezelfde tint hebben.
   ========================================================================== */
:root {
  --lake-tile-bg: 244 244 244;
}

/* ==========================================================================
   Productfoto's op de collectiepagina
   --------------------------------------------------------------------------
   Zelfde effect als op de PDP: de fototegel krijgt het tegelgrijs en de
   witte achtergrond van de foto wordt via multiply weggemengd. De regel met
   #ProductGridContainer hierboven zet .media op white !important, dus deze
   override moet specifieker zijn. Alleen de fototegel van gewone
   productkaarten (.product-card--card .product-card__media), niet de
   icoontjes verderop in de kaart en niet de promokaart.

   Het thema rondt bij de kaartstijl alleen de bovenhoeken af, omdat foto en
   tekst normaal een kaart vormen. Hier staat de foto als losse tegel op wit,
   dus alle vier de hoeken rond. De foto zelf ook, want op desktop heeft de
   tegel geen overflow: hidden zodra er hoverfoto's zijn.

   Geldt voor main-collection en filtered-main-collection.
   ========================================================================== */
.template-collection div#ProductGridContainer .product-card--card .product-card__media .media {
  background: rgb(var(--lake-tile-bg)) !important;
  border-radius: var(--card-radius);
}

.template-collection .product-card--card .product-card__media .media > img {
  mix-blend-mode: multiply;
  border-radius: var(--card-radius);
}

/* Iets hogere tegels: de regel hierboven begrenst de foto op 200px. Geldt
   vanaf tablet; op mobiel is de tegel vierkant en bepaalt de breedte de
   hoogte, dus daar verandert niets. */
.template-collection div#ProductGridContainer .product-card--card .product-card__media img {
  max-height: 240px;
}

/* Minder lucht tussen foto en titel: de regel hierboven zet er 30px boven. */
.template-collection div#ProductGridContainer .product-card__content.grow {
  padding-top: 8px;
}

/* ==========================================================================
   Promokaart in het collectieraster (bijv. "Accessoires")
   --------------------------------------------------------------------------
   De titel is een woord in Unbounded, hoofdletters, en werd op desktop
   breder dan de kaart. Door word-break: break-word uit het thema viel de
   laatste letter dan op een eigen regel ("ACCESSOIRE / S"). Nu altijd op een
   regel, en de lettergrootte schaalt mee met de kaartbreedte. Het langste
   woord over de talen is "ACCESSOIRES", ongeveer 8,7 keer de lettergrootte
   breed; bij 9cqi past dat met marge binnen de padding van de kaart.

   De USP-regel .product-card .product-card__content (grid met een lege
   tweede kolom, align-items: start) raakte ook de promokaart: de inhoud
   stond daardoor bovenin en een paar pixels links van het midden. De
   promokaart krijgt hier zijn eigen flex-centrering terug.
   ========================================================================== */
.product-card.product-card--promo .product-card__content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-collection #ProductGridContainer .product-card--promo {
  container-type: inline-size;
}

.template-collection #ProductGridContainer .product-card--promo .promo-title {
  white-space: nowrap;
  word-break: normal;
  font-size: min(var(--text-3xl), 9cqi);
}

/* ==========================================================================
   PDP: fototegels en USP-pillen in hetzelfde grijs als de collectiepagina
   --------------------------------------------------------------------------
   Alle .media-tegels op de PDP lezen --color-placeholder. --laseo-chip-bg is
   op :root al uitgerekend, dus die moet hier apart mee.
   ========================================================================== */
.template-product {
  --color-placeholder: var(--lake-tile-bg);
  --laseo-chip-bg: rgb(var(--lake-tile-bg));
}