/** Shopify CDN: Minification failed

Line 217:13 Expected ":"
Line 217:15 Expected identifier but found "32px"

**/
 @font-face {
    font-family: 'Proxima Nova';
    src: url('/cdn/shop/files/ProximaNova-Bold.woff2?v=1690374519') format('woff2'),
    url('/cdn/shop/files/ProximaNova-Bold.woff?v=1690374518') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

 @font-face {
    font-family: 'Montserrat', sans-serif;
    src: url('/cdn/shop/files/Montserrat-SemiBold.woff2?v=1690430936') format('woff2'),
    url('/cdn/shop/files/Montserrat-SemiBold.woff?v=1690430936') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

div#shopify-section-page-compare-bikes {
  padding-bottom: 50px;
}

#shopify-section-outlet-product-template .product-single__form {
  width: 100% !important;
}

.main-details .cpm-li-wrap span {
  min-height: 34px;
  display: block;
}

.product-description {
  padding-top: 15px;
}

.specs-header {
  background: #595959 !important;
}

.specs-header > * {
  color: #ffffff !important;
}

.mobile-image {
  display: none !important;
}

.desktop-image {
  display: block !important;
}

.site-nav__dropdown-link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.new-feature-menu {
  padding-left: 5px;
  color: #f93822;
  text-transform: capitalize;
  font-size: 13px;
}

.specification-details {
  padding: 40px 0px;
  border-top: 1px solid #ddddde;
  border-bottom: 1px solid #ddddde;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
}

h5.specification-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 34.6px;
  letter-spacing: normal;
}

.specification-details a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.specification-details a .expand {
  margin-right: 16px;
  color: #e00000;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
}

.plus-icon {
  color: #e00000;
  font-size: 34px;
}

.cmp-product-list ul li {
  list-style: none;
}

.product-items {
  padding-top: 0px !important;
}

.cmp-product-lebal {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 210px;
  background-color: #fafafa;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  opacity: 0.95;
  z-index: 9;
}

.hero-banner-parent .hero-banner {
  width: 100%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 50%;
}

.hero-banner-color {
  position: absolute;
  bottom: 0%;
  width: 100%;
  height: 100%;
/*   background: -webkit-linear-gradient(0deg,#292929 0,#292929 22%,rgba(0,0,0,0) 52%);
  background: -moz-linear-gradient(0deg,#292929 0,#292929 22%,rgba(0,0,0,0) 52%);
  background: -ms-linear-gradient(0deg,#292929 0,#292929 22%,rgba(0,0,0,0) 52%);
  background: -o-linear-gradient(0deg,#292929 0,#292929 22%,rgba(0,0,0,0) 52%);
  background: linear-gradient(0deg,#292929 0,#292929 22%,rgba(0,0,0,0) 52%); */
}

.hero-banner-text {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

section.hero-image {
  position: relative;
}

.hero-banner-main-title h1.title {
  font-size: 60px;
/*   font-weight: 400; */
/*   line-height: 153.6px; */
  color: #000000;
  margin: 0px;
}

.hero-banner-main-title {
  margin-bottom: 30px;
  text-align: center;
}

.banner-short-description {
  text-align: center;
  margin-bottom: 30px;
}

.banner-short-description h2 {
  color: #ffffff;
/*   font-size: 60px;
  font-weight: 400;
  letter-spacing: 10px;
  line-height: 64px; */
  margin: 0px;
}

.banner-description-wrapper {
  max-width: 880px;
  text-align: center;
  margin: 0px auto;
}

.banner-description {
  color: #d0d0d0;
  line-height; 32px;
  font-size: 16px;
  font-weight: 400;
/*   margin-bottom: 45px; */
}

.banner-description a {
  color: #4d4d4d;
}
.outlate-page .grid-product__content{
  .image-wrap{
    transition: .3s ease;
  }
  .grid-product__image-mask{
    overflow: unset;
  }
}
.outlate-page .grid-product__content:hover {
  .image-wrap{
    transform: translateY(-4px);
  }
  /* box-shadow: 3px 3px 3px #808080; */
}

.outlate-page .grid-product__content {
  padding: 15px;
  background: #ffffff;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -moz-transition: 1all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.product-table {
  display: none;
}

.outlate-page .grid__item {
  padding: 15px;
}

.outlate-page .quick-product__btn {
  display: none;
}

.outlate-page .grid-product {
  margin-bottom: 0px;
}

div#CollectionSection-page-outlet-featured-collection {
  background-color: #f0f0f0;
  padding-bottom: 55px;
}

.outlate-page .grid-product__colors.grid-product__colors--5770445422748 {
  display: none;
}

div#shopify-section-page-outlet-featured-collection {
  margin: 0px;
}

div#CollectionSection-page-outlet-featured-collection .section-header {
  margin-bottom: 17px;
}

div#CollectionSection-page-outlet-featured-collection h2.section-header__title {
  padding-top: 35px;
}

.outlate-page .grid-product__title.grid-product__title--heading {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outlate-page .grid-product__colors.grid-product__colors--6869792161948 {
  display: none;
}

div#CollectionSection-page-outlet-featured-collection .page-width {
  padding: 0px 20px;
}

.outlate-page .grid {
  margin-left: 0px;
}

.compare-page .rte h4 {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: calc(var(--typeHeaderSize)*.5);
  font-weight: var(--typeHeaderWeight);
  letter-spacing: var(--typeHeaderSpacing);
}

.filter-action {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 40px;
}

.filter-action .filter-btn {
  font-size: 18px;
  background: #f93822;
  color: #ffffff;
  display: inline-block;
  vertical-align: middle;
  padding: 10px 20px;
  margin-left: 20px;
  border-radius: 27.5px;
  -webkit-transition: background-color .3s;
  -ms-transition: background-color .3s;
  -moz-transition: background-color .3s;
  -o-transition: background-color .3s;
  transition: background-color .3s;
  cursor: pointer;
}

.filter-action .filter-btn.disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.filter-action .reset-btn {
  letter-spacing: normal;
  text-decoration: underline;
  cursor: pointer;
}

.cmp-product-tables {
  margin-bottom: 60px;
}

.cmp-product-tables,
.cmp-product-table {
  width: 100%;
  position: relative;
}

.cmp-product-wrapper {
  width: 100%;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  overflow: auto hidden;
}

.cmp-product-row {
  display: inline-flex;
  margin-left: 210px;
}

.cmp-product-lbls {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 210px;
  background-color: #fafafa;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  opacity: 0.95;
  z-index: 9;
}

.scrolling .cmp-product-lbls:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 4px;
  height: 100%;
  background-color: transparent;
  background-image: -webkit-linear-gradient(left,rgba(0,0,0,.06),transparent);
  background-image: linear-gradient(to right,rgba(0,0,0,.06),transparent);
}

.cmp-product-lbls .cmp-image {
  width: 210px;
  height: 234px;
  font-size: 14px;
  line-height: 18px;
  padding: 25px 20px;
  background-color: #fafafa;
  border-right: 1px solid #e6e6e6;
  text-transform: uppercase;
  transition: height .3s;
}

.cmp-product-lebal ul,
.cmp-product-lbls ul,
.cmp-product-item ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.cmp-product-lebal ul li,
.cmp-product-lbls ul li,
.cmp-product-item ul li {
  min-height: 68px;
  font-size: 14px;
  line-height: 18px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0px;
  border-top: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  word-break: break-word;
}

.cmp-product-lebal ul li .cpm-li-wrap,
.cmp-product-lbls ul li .cpm-li-wrap,
.cmp-product-item ul li .cpm-li-wrap {
  padding: 13px 20px;
}

.cmp-product-lebal ul li:nth-child(even),
.cmp-product-lbls ul li:nth-child(even),
.cmp-product-item ul li:nth-child(even) {
  background-color: #ececec;
}

.cmp-product-item {
  width: 249px;
  position: relative;
  -webkit-transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  -ms-transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  -moz-transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  -o-transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  text-align: center;
}

.cmp-product-item .cmp-image {
  width: 249px;
  height: 234px;
  background: #ffffff;
  border-right: 1px solid #e6e6e6;
  transition: height .3s;
}

.cmp-product-item .cmp-image .product-image {
  max-width: 100%;
  max-height: 135px;
  padding: 10px;
  display: block;
  margin: auto;
  object-fit: contain;
  transition: all .3s;
}

a.buy-now-button {
  color: #ffffff !important;
  display: inline-block;
  vertical-align: middle;
  padding: 6px 20px;
  border-radius: 27.5px;
  font-size: 18px;
  background: #f93822;
  text-transform: capitalize;
  line-height: 22.2px;
}

.cpm-li-wrap .variant-input-wrap label {
  width: 35px;
  height: 35px;
  padding: 0;
  margin: 4px;
}

[data-swatch_style=round] .cpm-li-wrap .color-swatch:before {
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  border-width: 3px;
}

.cpm-li-wrap .variant-input-wrap {
  margin: 0px;
}

.cpm-li-wrap .variant-wrapper--dropdown {
  margin-right: 0px;
}

.cmp-product-item ul li {
  font-size: 15px;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  text-transform: none;
}

.cmp-product-item ul li a {
  color: #f93822;
}

.cmp-product-item .ic {
  width: 100%;
  margin-bottom: 5px;
}

.cmp-product-item .ic img {
/*   max-height: 40px; */
  display: block;
  margin: auto;
  height: auto;
  width: 40px;
}

.cmp-chckbox {
  width: 16px;
  height: 16px;
  display: block;
  margin: 16px auto;
  position: relative;
  cursor: pointer;
}

.cmp-chckbox:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
  border: 3px solid #f93822;
  border-radius: 50%;
  -webkit-transition: background-color .3s, transform .3s, border-color .3s;
  -ms-transition: background-color .3s, transform .3s, border-color .3s;
  -moz-transition: background-color .3s, transform .3s, border-color .3s;
  -o-transition: background-color .3s, transform .3s, border-color .3s;
  transition: background-color .3s, transform .3s, border-color .3s;
}

.cmp-chckbox:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 16px;
  height: 16px;
  background: url(//ferlafamilybikes.com/cdn/shop/t/84/assets/check.svg?v=88762879473120400651779603186) no-repeat center/24px;
  opacity: 0;
  -webkit-transition:  opacity .3s;
  -ms-transition:  opacity .3s;
  -moz-transition:  opacity .3s;
  -o-transition:  opacity .3s;
  transition: opacity .3s;
}

.cmp-product-item.selected .cmp-image {
  background-color: #fafafa;
}

.cmp-product-item.selected .cmp-chckbox:before {
  background: #f93822;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25);
}

.cmp-product-item.selected .cmp-chckbox:after {
  opacity: 1;
}

.filtering .cmp-product-item:not(.selected) {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.filtered .cmp-product-item:not(.selected) {
  position: absolute;
}

.cmp-arrow {
  position: absolute;
  top: 100px;
  width: 40px;
  height: 60px;
  background: rgba(64, 64, 66, 0.8);
  border-radius: 3px;
  -webkit-transition: background-color .3s, opacity .3s, visibility .3s, transform .3s;
  -ms-transition: background-color .3s, opacity .3s, visibility .3s, transform .3s;
  -moz-transition: background-color .3s, opacity .3s, visibility .3s, transform .3s;
  -o-transition: background-color .3s, opacity .3s, visibility .3s, transform .3s;
  transition: background-color .3s, opacity .3s, visibility .3s, transform .3s;
  z-index: 6;
  cursor: pointer;
}

.cmp-arrow svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: #ffffff;
  margin: 18px 8px;
}

.cmp-arrow.disabled {
  opacity: 0;
  visibility: hidden;
}

.cmp-arrow.cmp-prev {
  left: 225px;
}

.cmp-arrow.cmp-prev svg {
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.cmp-arrow.cmp-next {
  right: 15px;
}

.compare-ext-info {
  margin: 60px 0 0;
  border-bottom: 1px solid #e6e6e6;
}

.compare-ext-info .cmp-product-wrapper {
  border: 0;
}

.compare-ext-info .cmp-product-lebal, .compare-ext-info .cmp-product-lbls {
  border: 0;
  z-index: 8;
}

.compare-ext-title {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  font-family: var(--typeHeaderPrimary),var(--typeHeaderFallback);
  font-size: calc(var(--typeHeaderSize)*.6);
  font-weight: var(--typeHeaderWeight);
  letter-spacing: var(--typeHeaderSpacing);
  display: flex;
  justify-content: space-between;
  padding: 40px 0;
  border-top: 1px solid #e6e6e6;
  text-transform: uppercase;
}

.cpm-ext-toggle {
  font-size: calc(var(--typeHeaderSize)*.475);
  font-weight: normal;
  color: #f93822;
  letter-spacing: normal;
  margin: auto 0;
  text-transform: none;
  cursor: pointer;
}

.cpm-ext-toggle span {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin: -3px 0 0 5px;
  position: relative;
}

.cpm-ext-toggle span:before, .cpm-ext-toggle span:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: #f93822;
  margin: auto;
}

.cpm-ext-toggle span:after {
  width: 2px;
  height: 100%;
}

.cpm-ext-toggle.active span:after {
  display: none;
}

.compare-ext-content {
  display: none;
}

.mobile-nav__child-item .main-menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.mobile-nav__child-item .main-menu a {
  padding-right: 10px;
}

.mobile-nav__child-item .main-menu span {
  color: #f93822;
  text-transform: capitalize;
  font-size: 13px;
}

html:not(.touch) .compare-ext-info {
  min-width: 100% !important;
}

html:not(.touch) .compare-ext-title {
  width: 100% !important;
}

html.touch .cmp-product-lbls, html.touch .cmp-product-wrapper {
  border-bottom: 0;
}

html.touch .cmp-table-wrapper {
  transform: translate3d(0, 0, 0);
}

html.touch .compare-ext-info .cmp-table-wrapper {
  display: flex;
  transform: none;
}

html.touch .compare-ext-info .cmp-product-lbls {
  position: fixed;
  top: auto;
  left: 0;
}

html.touch .compare-ext-info .cmp-product-wrapper {
  overflow: visible;
}

.announcement-bar.sticky-open {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}

@media only screen and (min-width: 1000px) {
  .visible-x {display: none !important;}
  
  .isticky .cmp-product-lbls, .isticky .cmp-product-item {
    padding-top: 220px;
  }
  
  .isticky .compare-ext-info .cmp-product-lbls {
    padding-top: 0;
  }

  .isticky .cmp-product-lbls .cmp-image, .isticky .cmp-product-item .cmp-image {
    position: fixed;
    top: 0;
    height: 170px;
    z-index: 10;
  }
  
  .isticky .cmp-product-item .cmp-image {
    z-index: 7;
  }

  .isticky .cmp-product-item .cmp-image .product-image {
    max-height: 75px;
  }

  .isticky .cmp-product-lbls .cmp-image:after, .isticky .cmp-product-item .cmp-image:after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 4px;
    width: 100%;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,.06),transparent);
    background-image: linear-gradient(to bottom,rgba(0,0,0,.06),transparent);
  }

  .isticky .cmp-chckbox {
    margin-top: 10px;
  }
  
  .cmp-product-table:not(.isticky) .cmp-image {
    transform: translateX(0) !important;
  }

  .stick-bottom .cmp-product-lbls .cmp-image, .stick-bottom .cmp-product-item .cmp-image {
    position: absolute;
    top: auto;
    bottom: 0;
    z-index: 1;
  }
  
  .stick-bottom:not([aria-expanded="true"]) .cmp-product-lbls .cmp-image, .stick-bottom:not([aria-expanded="true"]) .cmp-product-item .cmp-image {
    transform: translateX(0) !important;
  }
  
  .stick-bottom[aria-expanded="true"] {
    transform: translate3d(0,0,0);
    overflow: hidden;
  }
  
  .stick-bottom[aria-expanded="true"] .cmp-product-lbls .cmp-image, .stick-bottom[aria-expanded="true"] .cmp-product-item .cmp-image {
    position: fixed;
    top: auto;
    bottom: 0;
    z-index: 1;
  }
}

@media only screen and (max-width: 1260px) {
  .hero-banner-main-title h1.title {
    font-size: 56px;
  }

  .hero-banner-parent .hero-banner {
    padding-top: 70%;
  }

  .banner-short-description h2 {
/*     font-size: 46px;
    letter-spacing: 5px; */
  }

  .hero-banner-color {
/*     background: -webkit-linear-gradient(0deg, #292929 0, #292929 53%, rgba(0, 0, 0, 0) 62%);
    background: -moz-linear-gradient(0deg, #292929 0, #292929 53%, rgba(0, 0, 0, 0) 62%);
    background: -ms-linear-gradient(0deg, #292929 0, #292929 53%, rgba(0, 0, 0, 0) 62%);
    background: -o-linear-gradient(0deg, #292929 0, #292929 53%, rgba(0, 0, 0, 0) 62%);
    background: linear-gradient(0deg, #292929 0, #292929 53%, rgba(0, 0, 0, 0) 62%); */
  } 
}

@media only screen and (max-width: 1199px) {
  .cmp-product-row {
    margin-left: 180px;
  }

  .cmp-product-lebal,
  .cmp-product-lbls,
  .cmp-product-lbls .cmp-image {
    width: 180px;
  }

  .cmp-product-item,
  .cmp-product-item .cmp-image {
    width: 210px;
  }

  .cmp-product-lebal ul li .cpm-li-wrap,
  .cmp-product-lbls ul li .cpm-li-wrap,
  .cmp-product-item ul li .cpm-li-wrap {
    padding: 15px;
  }

  .cmp-arrow {
    top: 80px;
  }

  .cmp-arrow.cmp-prev {
    left: 195px;
  }
}

@media only screen and (max-width: 999px) {
  .hidden-x {display: none !important;}
  
  .filter-action {
    margin-bottom: 25px;
  }

  .filter-action .filter-btn {
    font-size: calc(var(--typeBaseSize)*0.85);
    padding: 8px 16px;
    margin-left: 15px;
  }

  .cmp-product-row {
    margin-left: 120px;
  }

  .cmp-product-lebal, 
  .cmp-product-lbls,
  .cmp-product-lbls .cmp-image {
    width: 120px;
  }

  .cmp-product-lbls .cmp-image {
    height: 193px;
    font-size: 12px;
  }

  .cmp-product-item,
  .cmp-product-item .cmp-image {
    width: 150px;
  }

  .cmp-product-item .cmp-image {
    height: 193px;
  }
  
  .cmp-product-item .cmp-image .product-image {
    max-height: 110px;
  }

  .cmp-product-lebal ul li, 
  .cmp-product-item ul li,
  .cmp-product-lbls ul li {
    min-height: 60px;
    font-size: 12px;
    line-height: 15px;
  }

  .cmp-product-item ul li {
    font-size: 13px;
  }
  
  .cmp-product-lebal ul li .cpm-li-wrap,
  .cmp-product-lbls ul li .cpm-li-wrap,
  .cmp-product-item ul li .cpm-li-wrap {
    padding: 15px 12px;
  }

  .cmp-chckbox {
    margin: 10px auto;
  }

  .cmp-arrow {
    top: 50px;
  }

  .cmp-arrow.cmp-prev {
    left: 135px;
  }
  
  .cpm-li-wrap .variant-input-wrap label {
    width: 30px;
    height: 30px;
  }
}


@media only screen and (max-width: 1095px) {
  .hero-banner-parent .hero-banner {
    padding-top: 85%;
  }
}

@media only screen and (max-width: 1024px) {
  .hero-banner-text {
    width: 100%;
    padding: 0px 15px;
  }
  
  .banner-description {
    font-size: 16px;
  }
}

@media only screen and (max-width: 990px) {
  .hero-banner-parent .hero-banner {
    padding-top: 67%;
  }
}


@media only screen and (max-width: 850px) {
  .hero-banner-main-title h1.title {
    font-size: 54px;
    line-height: 66.72px;
  }
  
    .hero-banner-parent .hero-banner {
    padding-top: 87%;
  }

}

@media only screen and (max-width: 768px) {
  .hero-banner-text {
    width: 100%;
    padding: 0px 15px;
  }
  
  .mobile-image {
    display: block !important;
  }
  
  .desktop-image {
    display: none !important;
  }

  .compare-ext-title {
    font-size: 20px;
    letter-spacing: normal;
    padding: 30px 0;
  }
  
  .cpm-ext-toggle {
    font-size: 18px;
  }
  
  .cpm-ext-toggle span {
    width: 12px;
    height: 12px;
  }
}

@media only screen and (max-width: 680px) {
  .hero-banner-parent .hero-banner {
    padding-top: 100%;
  }
}

@media only screen and (max-width: 610px) {
  .hero-banner-parent .hero-banner {
    padding-top: 150%;
  }
}

@media only screen and (max-width: 500px) {
  .hero-banner-parent .hero-banner {
    padding-top: 179%;
  }
}

@media only screen and (max-width: 550px) {
  .outlate-page .grid-product {
    width: 100% !important;
  }
}

@media only screen and (max-width: 475px) {
  div#CollectionSection-page-outlet-featured-collection h2.section-header__title {
    font-size: 21px;
  }
}

@media only screen and (max-width: 450px) {
  
  .hero-banner-parent .hero-banner {
    padding-top: 247%;
  }
  
  .hero-banner-main-title h1.title {
    font-size: 42px;
/*     line-height: 66.72px; */
  }

  .cmp-arrow svg {
    width: 19px;
    height: 14px;
    margin: 8px 5px;
  }

  .cmp-arrow {
    width: 26px;
    height: 29px;
  }
  
}

@media only screen and (max-width: 400px) {
  
  .hero-banner-parent .hero-banner {
    padding-top: 318%;
  }
  
  .hero-banner-color {
/*     background: linear-gradient(0deg,#292929 0,#292929 61%,rgba(0,0,0,0) 74%); */
  }
  
}
.outlate-page .hero-banner-parent .hero-banner {
padding-top: 35% !important;
}
@media only screen and (max-width: 400px){
.outlate-page .hero-banner-parent .hero-banner {
padding-top: 80% !important;
}
.outlate-page .banner-short-description h2{
font-size:20px !important;
}
.outlate-page .banner-description{
font-size:13px !important;
line-height:1.2em !important;
color:white !important;
}
}

/*  */

/* Store Locator CSS Start */
.content-store-info {
  display: none;
}
/* Store Locator CSS End */


/* ============================================================ */
/* Cart page (refactored) — plain CSS, lives in custom.css      */
/* Loaded after trm_style.scss.css so these rules win.          */
/* JS hooks preserved: .cart__product-qty, .trm_cart-product-   */
/* delete, .trm_assembly, .dual-battery-* — see trm_script.js   */
/* ============================================================ */

.trm_cart { background: #ffffff; }

/* Trim the giant default page-content top padding above the cart heading. */
.trm_cart .page-content,
.trm_cart-page.page-content,
.shopify-section.trm_cart .page-content { padding-top: 12px !important; }
@media only screen and (min-width: 769px) {
  .trm_cart .page-content,
  .trm_cart-page.page-content,
  .shopify-section.trm_cart .page-content { padding-top: 16px !important; }
}

.trm_cart .breadcrumb { margin-bottom: 12px; }

.trm_cart .trm_cart-page__header {
  text-align: left;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ececec;
}
.trm_cart .trm_cart-page__title {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.trm_cart .trm_cart-page__subtitle {
  margin: 0;
  color: #6b6b6b;
  font-size: 14px;
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-page__header {
    margin-bottom: 28px;
    padding-bottom: 20px;
  }
  .trm_cart .trm_cart-page__title { font-size: 32px; }
}

/* ----- Layout -----
   !important required to beat the legacy
   `.trm_cart form[action="/cart"] { display: flex }` rule (specificity 0,2,1)
   that was shrink-wrapping our grid layout. */
.trm_cart .trm_cart-form,
.trm_cart form[action="/cart"] {
  display: block !important;
  width: 100% !important;
  align-items: stretch !important;
}

.trm_cart .trm_cart-layout {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 32px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .trm_cart .trm_cart-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
  }
}
@media only screen and (min-width: 1024px) {
  .trm_cart .trm_cart-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
  }
}

.trm_cart .trm_cart-items {
  display: flex;
  flex-direction: column;
  margin: 0;
  flex: none;
  margin-right: 0;
}

/* override legacy .cart__row / first-child / last-child rules from theme.css */
.trm_cart .cart__row {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ----- Items card outer ----- */
.trm_cart .trm_cart-items--card {
  padding: 32px 24px 16px !important;
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-items--card {
    padding: 40px 32px 24px !important;
  }
}

/* ----- Line item card ----- */
/* Dividers go on the TOP of each item (not the bottom), so we can hide them
   on the visually-first item via :first-child. The .trm_assembly row has
   `order: 1` and ends up visually last, so it correctly gets a top divider
   from the previous item — and no bottom divider hangs off the last row. */
.trm_cart .trm_cart-card {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0 !important;
  border-top: 1px solid #ececec !important;
  border-bottom: 0 !important;
}
.trm_cart .trm_cart-card:first-child { border-top: 0 !important; }

@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 24px;
    padding: 30px 0 !important;
  }
}

.trm_cart .trm_cart-card.trm_assembly { order: 1; }
.trm_cart .trm_cart-card.trm_assembly [name="updates[]"] { pointer-events: none; }
.trm_cart .trm_cart-card.trm_assembly .trm_cart-qty__btn {
  pointer-events: none;
  opacity: 0.35;
}

.trm_cart .trm_cart-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #f6f6f6;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  position: relative;
}
.trm_cart .trm_cart-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero card variant — bigger image + larger title for the headline product */
.trm_cart .trm_cart-card--hero { grid-template-columns: 132px minmax(0, 1fr); }
.trm_cart .trm_cart-card--hero .trm_cart-card__image {
  width: 132px;
  height: 132px;
  border-radius: 16px;
  border: 1px solid rgba(11,11,13,0.06);
  box-shadow: 0 4px 12px rgba(11,11,13,0.06);
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-card--hero { grid-template-columns: 152px minmax(0, 1fr); }
  .trm_cart .trm_cart-card--hero .trm_cart-card__image { width: 152px; height: 152px; }
  .trm_cart .trm_cart-card--hero .trm_cart-card__name { font-size: 22px !important; letter-spacing: -0.02em; }
}

/* Bestseller badge over hero image */
.trm_cart .trm_cart-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e83a1f;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(232,58,31,0.35);
}

/* Color swatch dot in variant line */
.trm_cart .trm_cart-card__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: 6px;
}

.trm_cart .trm_cart-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trm_cart .trm_cart-card__heading { margin-bottom: 16px; }

.trm_cart .trm_cart-card__name {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #1c1d1d;
  text-decoration: none;
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-card__name { font-size: 18px; }
}
.trm_cart .trm_cart-card__name:hover { text-decoration: underline; }

.trm_cart .trm_cart-card__variant,
.trm_cart .trm_cart-card__props {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b6b6b;
  line-height: 1.5;
}
.trm_cart .trm_cart-card__props {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.trm_cart .trm_cart-card__prop strong {
  font-weight: 600;
  color: #1c1d1d;
}

.trm_cart .trm_cart-card__descr {
  margin-top: 10px;
  font-size: 13px;
  color: #6b6b6b;
}
.trm_cart .trm_cart-card__descr ul { margin: 4px 0 0 16px; padding: 0; }
.trm_cart .trm_cart-card__descr p { margin: 0 0 4px; }

/* controls row: qty | price | remove */
.trm_cart .trm_cart-card__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-card__controls { gap: 20px; }
}
.trm_cart .trm_cart-card__qty { margin: 0; }

/* ----- Qty stepper (subtle / minimal) ----- */
.trm_cart .trm_cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ececec;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
  height: 28px;
}
.trm_cart .trm_cart-qty__btn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  width: 24px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9a9a9a;
  transition: color 150ms ease;
  padding: 0;
}
.trm_cart .trm_cart-qty__btn:hover { color: #1c1d1d; }
.trm_cart .trm_cart-qty__btn:focus-visible {
  outline: 1px solid #1c1d1d;
  outline-offset: -1px;
}
.trm_cart .trm_cart-qty__btn svg {
  display: block;
  width: 10px;
  height: 10px;
  stroke-width: 2;
}
.trm_cart .trm_cart-qty__input {
  width: 28px;
  height: 26px;
  max-width: none;
  border: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #1c1d1d;
  background: transparent;
  -moz-appearance: textfield;
  padding: 0;
  margin: 0;
}
.trm_cart .trm_cart-qty__input::-webkit-outer-spin-button,
.trm_cart .trm_cart-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.trm_cart .trm_cart-qty__input:focus { outline: none; }

/* ----- Line price ----- */
.trm_cart .trm_cart-card__pricing {
  text-align: right;
  margin: 0;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.trm_cart .trm_cart-card__pricing label { display: none; }
.trm_cart .trm_cart-card__price {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1c1d1d;
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-card__price { font-size: 18px; }
}
.trm_cart .cart__price--strikethrough {
  display: block;
  color: #9a9a9a;
  font-weight: 400;
  font-size: 13px;
}
.trm_cart .trm_cart-card__line-discount {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

/* ----- Remove ----- */
.trm_cart .trm_cart-card__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #6b6b6b;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.trm_cart .trm_cart-card__remove svg {
  width: 16px;
  height: 16px;
  display: block;
}
.trm_cart .trm_cart-card__remove span { display: none; }
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-card__remove span { display: inline; }
}
.trm_cart .trm_cart-card__remove:hover {
  color: #c42424;
  background: #fdf2f2;
  border-color: #f5d3d3;
  text-decoration: none;
}
.trm_cart .trm_cart-card__remove:focus-visible {
  outline: 2px solid #c42424;
  outline-offset: 2px;
}

/* ----- Summary card ----- */
.trm_cart .trm_cart-summary {
  flex: none;
  max-width: none;
  width: 100%;
  justify-self: stretch;
}
@media only screen and (min-width: 768px) {
  .trm_cart .trm_cart-summary {
    position: sticky;
    top: 24px;
    justify-self: end;
    width: 100%;
  }
}
.trm_cart .trm_cart-summary__card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 28px !important;
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-summary__card { padding: 36px 32px !important; }
}
.trm_cart .trm_cart-summary__heading {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.trm_cart .trm_cart-summary__notes { margin-bottom: 20px; }
.trm_cart .trm_cart-summary__notes-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1c1d1d;
}
.trm_cart .trm_cart-summary__notes-input {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  background: #ffffff;
  color: #1c1d1d;
}
.trm_cart .trm_cart-summary__notes-input:focus {
  outline: none;
  border-color: #1c1d1d;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.trm_cart .trm_cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: #1c1d1d;
  font-variant-numeric: tabular-nums;
}
.trm_cart .trm_cart-summary__row--discount span:last-child {
  color: #008900;
  font-weight: 600;
}
.trm_cart .trm_cart-summary__row--total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
  font-size: 18px;
  font-weight: 700;
}
.trm_cart .trm_cart-summary__row--total p {
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}

/* "· included" muted suffix used in the assembly summary row */
.trm_cart .trm_cart-summary__row-mute {
  color: #94949c;
  font-size: 12px;
  font-weight: 400;
  margin-left: 2px;
}

/* Big total amount: dollars in display, cents at smaller size */
.trm_cart .trm_cart-summary__total-amt {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback, sans-serif);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trm_cart .trm_cart-summary__total-amt-cents {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.trm_cart .trm_cart-summary__shipping-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b6b6b;
}
.trm_cart .trm_cart-summary--extra-text {
  margin: 16px 0 0 !important;
  font-size: 13px;
  color: #6b6b6b;
}
.trm_cart .trm_cart-summary__affirm {
  margin: 14px 0 0;
  font-size: 13px;
  color: #1c1d1d;
  min-height: 1em;
}
.trm_cart .trm_cart-summary__affirm:empty { display: none; }

.trm_cart .trm_cart-summary__terms {
  margin: 18px 0 0;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.trm_cart .trm_cart-summary__terms input { margin-top: 3px; }
.trm_cart .trm_cart-summary__terms label { line-height: 1.4; }

.trm_cart .trm_cart-summary__actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Neutralize legacy .cart__checkout green styling so the new red
   .trm_cart-summary__checkout class (defined in the section) wins.
   The legacy SCSS sets `&:hover { background: rgba(0,137,0,.8) !important }`,
   so the hover override needs !important too. */
.trm_cart .trm_cart-summary__actions .cart__checkout {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
}
.trm_cart .trm_cart-summary__actions .cart__checkout:hover,
.trm_cart .trm_cart-summary__actions .cart__checkout:focus,
.trm_cart .trm_cart-summary__actions .cart__checkout:active {
  background: #E83A1F !important;
  color: #fff !important;
}
.trm_cart .trm_cart-summary__actions .cart__checkout:hover {
  background: #C42F18 !important;
}
.trm_cart .trm_cart-summary__actions .additional-checkout-buttons {
  margin-top: 4px;
  text-align: center;
}
.trm_cart .trm_cart-summary--text_below {
  margin: 0 !important;
  font-size: 12px;
  color: #6b6b6b;
  text-align: center;
}

.trm_cart .trm_cart-summary__trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #ececec;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trm_cart .trm_cart-summary__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.3;
}
.trm_cart .trm_cart-summary__trust-item svg {
  width: 16px;
  height: 16px;
  color: #1c1d1d;
  flex-shrink: 0;
  stroke-width: 1.6;
}

.trm_cart button[name="update"] { display: none; }

/* ----- "How did you hear about us" ----- */
.trm_cart .trm_cart-how-did-you-hear-about-us {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid #ececec;
}
.trm_cart .trm_cart-how-did-you-hear-about-us label,
.trm_cart .trm_cart-how-did-you-hear-about-us p {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1c1d1d;
}
.trm_cart .trm_cart-how-did-you-hear-about-us select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #ffffff;
  color: #1c1d1d;
}
.trm_cart .trm_cart-how-did-you-hear-about-us select:focus {
  outline: none;
  border-color: #1c1d1d;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* ----- Empty state ----- */
.trm_cart .trm_cart-empty {
  text-align: center;
  padding: 56px 16px;
  max-width: 440px;
  margin: 0 auto;
}
.trm_cart .trm_cart-empty__icon {
  color: #cdcdcd;
  margin-bottom: 20px;
  width: 64px;
  height: 64px;
}
.trm_cart .trm_cart-empty__title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}
@media only screen and (min-width: 769px) {
  .trm_cart .trm_cart-empty__title { font-size: 28px; }
}
.trm_cart .trm_cart-empty__text {
  margin: 0 0 24px;
  color: #6b6b6b;
  font-size: 15px;
  line-height: 1.5;
}
.trm_cart .trm_cart-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: #E83A1F !important;
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 14px 36px rgba(232,58,31,0.30);
  transition: background .2s, transform .15s;
}
.trm_cart .trm_cart-empty__cta em {
  position: static;
  display: inline-flex;
  width: auto;
  height: auto;
  right: auto;
  top: auto;
  transform: none;
}
.trm_cart .trm_cart-empty__cta em:before { display: none; }
.trm_cart .trm_cart-empty__cta em svg {
  width: 8px;
  height: 10px;
  fill: #fff !important;
}
.trm_cart .trm_cart-empty__cta:hover {
  background: #C42F18 !important;
  transform: translateY(-1.5px);
}

@media (prefers-reduced-motion: reduce) {
  .trm_cart .trm_cart-qty__btn,
  .trm_cart .trm_cart-card__remove,
  .trm_cart .trm_cart-summary__actions .cart__checkout {
    transition: none;
  }
}


/* ============================================================ */
/* Media slider (YouTube/Vimeo testimonials carousel)           */
/* Overrides theme.css .section__media-slider / .media-slider__ */
/* Pairs with featured-content "what our customers say..."      */
/* ============================================================ */

.section__media-slider {
  padding: 32px 0 56px !important;
  background: #ffffff;
}
@media only screen and (min-width: 769px) {
  .section__media-slider { padding: 48px 0 72px !important; }
}

/* Swiper outer */
.media-slider__swiper {
  padding: 8px 0 !important;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .media-slider__swiper { padding: 8px 44px !important; }
}

.media-slider__wrapper { align-items: stretch; }

/* Slide */
.media-slider__slide {
  height: auto;
  display: flex;
}

/* Card wrapping each video + text */
.media-slider__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.media-slider__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.18);
  border-color: #dcdcdc;
}

/* 16:9 media area */
.media-slider__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f0f0f;
  overflow: hidden;
}

/* Facade thumbnail (no iframe loaded yet) */
.media-slider__facade {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.media-slider__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease, filter 220ms ease;
}
.media-slider__facade:hover .media-slider__poster,
.media-slider__facade:focus-visible .media-slider__poster {
  transform: scale(1.04);
  filter: brightness(0.85);
}
.media-slider__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* Play button overlay */
.media-slider__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f93822;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -8px rgba(249, 56, 34, 0.55), 0 2px 4px rgba(0,0,0,0.16);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease;
  pointer-events: none;
}
.media-slider__play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px; /* visual centering of play triangle */
}
.media-slider__facade:hover .media-slider__play,
.media-slider__facade:focus-visible .media-slider__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #e22d18;
}
.media-slider__facade:focus-visible {
  outline: 3px solid #f93822;
  outline-offset: -3px;
}

/* Iframe (after click) */
.media-slider__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Card body (title + subtitle) */
.media-slider__body {
  padding: 12px 14px 14px;
  text-align: left;
}
.media-slider__title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #1c1d1d;
  line-height: 1.3;
  padding: 0 !important; /* override theme.css mobile rule */
  letter-spacing: 0;
}
.media-slider__subtitle,
.media-slider__subtitle p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b6b6b;
}

/* Nav buttons (modern small circles) */
.media-slider__swiper .swiper-button-prev,
.media-slider__swiper .swiper-button-next {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid #e5e5e5 !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transform: none !important;
  color: #1c1d1d;
  margin-top: 0 !important;
  top: 50% !important;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.18);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.media-slider__swiper .swiper-button-prev { left: 6px !important; }
.media-slider__swiper .swiper-button-next { right: 6px !important; }
.media-slider__swiper .swiper-button-prev:hover,
.media-slider__swiper .swiper-button-next:hover {
  background-color: #1c1d1d !important;
  border-color: #1c1d1d !important;
  color: #ffffff !important;
  transform: scale(1.04);
}
.media-slider__swiper .swiper-button-prev:focus-visible,
.media-slider__swiper .swiper-button-next:focus-visible {
  outline: 2px solid #f93822;
  outline-offset: 2px;
}
.media-slider__swiper .swiper-button-prev::after,
.media-slider__swiper .swiper-button-next::after {
  display: none !important; /* hide swiper's default arrow font */
}
.media-slider__swiper .swiper-button-prev svg,
.media-slider__swiper .swiper-button-next svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
  transform: none !important;
}
.media-slider__swiper .swiper-button-disabled {
  opacity: 0.35 !important;
  pointer-events: none;
}

/* Mobile tweaks — keep nav arrows visible at vertical center, smaller */
@media only screen and (max-width: 768px) {
  .media-slider__swiper .swiper-button-prev,
  .media-slider__swiper .swiper-button-next {
    top: 36% !important;
    width: 36px !important;
    height: 36px !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #d9d9d9 !important;
  }
  .media-slider__swiper .swiper-button-prev { left: 6px !important; }
  .media-slider__swiper .swiper-button-next { right: 6px !important; }
  .media-slider__swiper .swiper-button-prev svg,
  .media-slider__swiper .swiper-button-next svg {
    width: 16px !important;
    height: 16px !important;
  }
  .media-slider__play {
    width: 40px;
    height: 40px;
  }
  .media-slider__play svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-slider__card,
  .media-slider__poster,
  .media-slider__play,
  .media-slider__swiper .swiper-button-prev,
  .media-slider__swiper .swiper-button-next {
    transition: none !important;
  }
  .media-slider__card:hover { transform: none; }
  .media-slider__facade:hover .media-slider__poster { transform: none; }
}

/* Verified-customer badge over each video poster */
.media-slider__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}
.media-slider__badge svg {
  color: #4ade80;
  flex-shrink: 0;
}

/* 5-star row inside card body */
.media-slider__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-bottom: 6px;
  color: #f59e0b;
}
.media-slider__stars svg { display: block; }

/* Pagination dots */
.media-slider__swiper .swiper-pagination.media-slider__pagination {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.media-slider__swiper .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  background: #d4d4d4 !important;
  opacity: 1 !important;
  border-radius: 50%;
  transition: background 200ms ease, transform 200ms ease, width 200ms ease;
  margin: 0 !important;
}
.media-slider__swiper .swiper-pagination-bullet-active {
  background: #1c1d1d !important;
  width: 22px !important;
  border-radius: 999px !important;
}

/* Cart-page testimonial heading: add eyebrow + 5-star row above the
   "what our customers say about us" heading, scoped to template-cart so
   we don't touch other pages that use featured-content. */
.template-cart .index-section .richtext-heading {
  position: relative;
  font-size: 28px !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 56px !important;
  margin-bottom: 8px !important;
  padding-top: 56px !important;
}
@media only screen and (min-width: 769px) {
  .template-cart .index-section .richtext-heading {
    font-size: 36px !important;
    padding-top: 68px !important;
  }
}
.template-cart .index-section .richtext-heading::before {
  content: "Real customer stories";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1c1d1d;
  background: #f4f4f4;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  white-space: nowrap;
}
.template-cart .index-section .rte {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto !important;
  color: #6b6b6b;
  font-size: 14px;
}
.template-cart .index-section .rte p {
  margin: 0;
}

/* Tighten the gap between the heading section and the carousel. */
.template-cart .section__media-slider { padding-top: 24px !important; }
.section__media-slider { margin-top: -12px; }


/* ================================================================ */
/* CART DRAWER (mini-cart slide-in)                                 */
/* Redesigned 2026-05 to match the new cart page design language.   */
/* Scoped to #CartDrawer.trm_drawer-cart so legacy .ajaxcart__*     */
/* styles in theme.css.liquid are overridden cleanly.               */
/* ================================================================ */

/* Design tokens — kept consistent with the cart page section. */
#CartDrawer.trm_drawer-cart {
  --tdc-bg: #ffffff;
  --tdc-ink: #0b0b0d;
  --tdc-mute: #6b6b6b;
  --tdc-line: rgba(11,11,13,0.10);
  --tdc-line-2: rgba(11,11,13,0.06);
  --tdc-cream: #f6f5f1;
  --tdc-red: #E83A1F;
  --tdc-red-deep: #C42F18;
  --tdc-display: var(--typeHeaderPrimary), var(--typeHeaderFallback, sans-serif);
  --tdc-sans: var(--typeBasePrimary), var(--typeBaseFallback, sans-serif);

  width: min(440px, 100vw) !important;
  max-width: 100vw !important;
  background: var(--tdc-bg) !important;
  color: var(--tdc-ink) !important;
  font-family: var(--tdc-sans) !important;
  -webkit-font-smoothing: antialiased;
  box-shadow: -24px 0 60px rgba(11,11,13,0.10), -4px 0 12px rgba(11,11,13,0.05);
  /* Sit above pretty much everything: third-party chat bubbles (Tidio,
     Intercom typically ~99999), Klaviyo / Privy popups, Affirm modals,
     sticky headers. theme.css has the drawer at z-index:30 by default. */
  z-index: 2147483646 !important;
}
/* Dim overlay needs to sit just below the cart drawer (which is bumped
   to z-index 2147483646 above) so it doesn't fall behind chat widgets.
   IMPORTANT: this MUST be scoped to the cart drawer only — the nav and
   filter drawers stay at the theme's default z-index 30, so a blanket
   bump on every `.js-drawer-open` would bury them under the overlay
   and leave the user staring at an unclickable gray screen. */
body:has(#CartDrawer.drawer--is-open) .main-content:after {
  z-index: 2147483645 !important;
}

/* Cart-drawer-only blur scrim. Lives at full opacity (so backdrop-filter
   isn't diluted) and is fully invisible at rest — `backdrop-filter:
   blur(0)` and transparent background. When #CartDrawer has
   `drawer--is-open`, :has() flips on the blur. Sits *under* the existing
   dim overlay (z-index 26) so the page reads as "blurred + dimmed"
   without double-tinting, and *above* all page chrome. Skipped for the
   nav/filter drawers because the selector is scoped to #CartDrawer. */
.trm-cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}
body:has(#CartDrawer.drawer--is-open) .trm-cart-scrim {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Nav-drawer blur scrim — same approach as .trm-cart-scrim above.
   Lives at full opacity so the backdrop-filter isn't diluted by the
   theme's animated opacity fade, and is fully invisible at rest. When
   #NavDrawer has `drawer--is-open`, :has() flips on the blur. Sits
   *under* the theme's dim overlay (z-index 26) so the page reads as
   "blurred + lightly dimmed" instead of the flat gray sheet. */
.trm-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}
body:has(#NavDrawer.drawer--is-open) .trm-nav-scrim {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hide the product-page sticky buy-buttons bar while the cart drawer is
   open. Bumping z-index alone doesn't help because the bar is trapped in
   a parent stacking context (likely a transform/will-change ancestor)
   and can't be ordered above the drawer regardless of z-index value. */
body.js-drawer-open div[data-block-type="buy-buttons"],
body.js-drawer-closing div[data-block-type="buy-buttons"] {
  visibility: hidden !important;
  pointer-events: none !important;
}
#CartDrawer.trm_drawer-cart * { box-sizing: border-box; }

/* Form is the column flex container so footer can stick to the bottom. */
#CartDrawer.trm_drawer-cart .trm_drawer-cart__form {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ── Header ── */
#CartDrawer.trm_drawer-cart .trm_drawer-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--tdc-line-2);
  flex-shrink: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__head-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__title {
  font-family: var(--tdc-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--tdc-ink);
  font-variation-settings: "opsz" 144;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__count {
  font-size: 13px;
  color: var(--tdc-mute);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__count:empty { display: none; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--tdc-line);
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  color: var(--tdc-ink);
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
  padding: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__close:hover {
  background: var(--tdc-ink);
  border-color: var(--tdc-ink);
  color: #fff;
}

/* ── Container (Handlebars target) ── */
#CartDrawer.trm_drawer-cart #CartContainer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;          /* let .drawer__scrollable scroll inside */
  overflow: hidden;
}

/* ── Scrollable body ── */
#CartDrawer.trm_drawer-cart .drawer__scrollable.trm_drawer-cart__body,
#CartDrawer.trm_drawer-cart .trm_drawer-cart__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 24px 16px;
  -webkit-overflow-scrolling: touch;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__body::-webkit-scrollbar { width: 6px; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__body::-webkit-scrollbar-thumb {
  background: var(--tdc-line); border-radius: 3px;
}

/* ── Empty state ── */
#CartDrawer.trm_drawer-cart .trm_cart-popup-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  color: var(--tdc-mute);
  font-size: 14px;
  flex: 1 1 auto;
}
#CartDrawer.trm_drawer-cart .trm_cart-popup-empty p { margin: 0; }

/* ── Item list ── */
#CartDrawer.trm_drawer-cart .trm_drawer-cart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--tdc-line-2);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__line:first-child { border-top: 0; }

#CartDrawer.trm_drawer-cart .trm_drawer-cart__media {
  display: block;
  width: 84px; height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tdc-cream);
  border: 1px solid var(--tdc-line-2);
  flex-shrink: 0;
  /* Reserve the box visually so when the <img> is briefly tearing down
     (Handlebars rebuilds on every cart event) the user doesn't see a
     blank flash — they see the cream placeholder. */
  position: relative;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Decode async so the browser doesn't block the paint frame on cached
     images, which would otherwise cause the image area to look blank
     for one frame after a re-render. */
}

#CartDrawer.trm_drawer-cart .trm_drawer-cart__body-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#CartDrawer.trm_drawer-cart .trm_drawer-cart__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__name {
  font-family: var(--tdc-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--tdc-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__name:hover { text-decoration: underline; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--tdc-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__price-strike {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--tdc-mute);
  text-decoration: line-through;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__variant {
  display: block;
  font-size: 12.5px;
  color: var(--tdc-mute);
  margin-bottom: 2px;
  line-height: 1.4;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__discount {
  display: inline-block;
  font-size: 11px;
  color: var(--tdc-red);
  font-weight: 600;
  margin-top: 4px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__unit {
  display: block;
  font-size: 11.5px;
  color: var(--tdc-mute);
  margin-top: 2px;
}

/* ── Per-item controls (low-key qty stepper + remove) ── */
#CartDrawer.trm_drawer-cart .trm_drawer-cart__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__qty,
#CartDrawer.trm_drawer-cart .js-qty__wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--tdc-line-2);
  border-radius: 6px;
  height: 28px;
  transition: border-color .15s ease;
  position: static;          /* override theme.css absolute positioning */
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__qty:hover { border-color: var(--tdc-line); }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-btn,
#CartDrawer.trm_drawer-cart .js-qty__adjust {
  position: static;          /* override theme.css absolute positioning */
  width: 24px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--tdc-mute);
  transition: color .15s ease, background .15s ease;
  padding: 0;
  margin: 0;
  font-size: inherit;
  line-height: 1;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-btn:hover,
#CartDrawer.trm_drawer-cart .js-qty__adjust:hover {
  color: var(--tdc-ink);
  background: rgba(11,11,13,0.04);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-btn:active,
#CartDrawer.trm_drawer-cart .js-qty__adjust:active { color: var(--tdc-red); }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-btn:disabled,
#CartDrawer.trm_drawer-cart .js-qty__adjust:disabled {
  opacity: 0.3; cursor: not-allowed; background: transparent;
}
/* Hide theme.css's icon overlays inside the qty buttons. */
#CartDrawer.trm_drawer-cart .js-qty__adjust .icon__fallback-text { display: none !important; }
#CartDrawer.trm_drawer-cart .js-qty__adjust .icon-minus,
#CartDrawer.trm_drawer-cart .js-qty__adjust .icon-plus { display: none !important; }

#CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-input,
#CartDrawer.trm_drawer-cart .js-qty__num {
  width: 24px; height: 26px;
  border: 0; background: transparent;
  text-align: center;
  font-size: 13px; font-weight: 500;
  color: var(--tdc-ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  padding: 0;
  margin: 0;
}
#CartDrawer.trm_drawer-cart .js-qty__num::-webkit-outer-spin-button,
#CartDrawer.trm_drawer-cart .js-qty__num::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
#CartDrawer.trm_drawer-cart .js-qty__num:focus { outline: none; }

#CartDrawer.trm_drawer-cart .trm_drawer-cart__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--tdc-mute);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
  padding: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__remove:hover { color: var(--tdc-red); }

/* ── Cart-wide note (textarea) ── */
#CartDrawer.trm_drawer-cart .trm_drawer-cart__note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tdc-line-2);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__note-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--tdc-ink);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__note-input {
  width: 100%;
  border: 1.5px solid var(--tdc-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tdc-ink);
  background: #fff;
  resize: vertical;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__note-input:focus {
  outline: none;
  border-color: var(--tdc-ink);
  box-shadow: 0 0 0 3px rgba(11,11,13,0.06);
}

/* ── Recommendations slot (managed by trm_script.js) ──
   The legacy #CartDrawer .trm_cart-popup-recommend block in
   trm_style.scss.liquid forces:
     padding: 20px on the wrapper
     ul { display:flex; flex-wrap:wrap; justify-content:space-between }
     li { width: 48% }
     img { position: absolute; top: 0; width: 100%; height: 100% }
   Those rules predate this redesign and would otherwise blow up the
   compact carousel layout (especially the `position:absolute` on img,
   which made every image stretch to drawer width). We explicitly null
   them out here with !important since they sit at specificity (1,1,1)
   and silently inherit `position` even when our rules win on width. */
#CartDrawer.trm_drawer-cart .trm_cart-popup-recommend:empty { display: none; }
#CartDrawer.trm_drawer-cart .trm_cart-popup-recommend {
  margin-top: 22px;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--tdc-line-2);
}
#CartDrawer.trm_drawer-cart .trm_cart-popup-recommend .trm_drawer-cart__recs-list {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}
#CartDrawer.trm_drawer-cart .trm_cart-popup-recommend .trm_drawer-cart__rec {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Kill the legacy absolute positioning so each image stays inside its
   own square aspect-ratio wrapper instead of stretching to #CartDrawer. */
#CartDrawer.trm_drawer-cart .trm_cart-popup-recommend .trm_drawer-cart__rec-img {
  position: relative !important;
}
#CartDrawer.trm_drawer-cart .trm_cart-popup-recommend .trm_drawer-cart__rec-img img {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Sticky footer ── */
#CartDrawer.trm_drawer-cart .drawer__footer.trm_drawer-cart__foot,
#CartDrawer.trm_drawer-cart .trm_drawer-cart__foot {
  flex-shrink: 0;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--tdc-line-2);
  background: #fff;
  box-shadow: 0 -8px 24px rgba(11,11,13,0.04);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__foot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 6px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__foot-row--sub {
  font-size: 14px;
  margin-bottom: 8px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__foot-row--discount {
  color: var(--tdc-red);
  font-weight: 500;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__foot-label {
  font-weight: 600;
  color: var(--tdc-ink);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__foot-amt {
  font-family: var(--tdc-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tdc-ink);
  font-variant-numeric: tabular-nums;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__foot-note {
  margin: 4px 0 14px;
  font-size: 11.5px;
  color: var(--tdc-mute);
  text-align: center;
  line-height: 1.5;
}

/* Wallet buttons (Apple Pay / Shop Pay etc. via Shopify) — keep them
   visible but compact above our checkout button. */
#CartDrawer.trm_drawer-cart .trm_drawer-cart__wallet {
  margin-bottom: 10px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__wallet:empty { display: none; }

#CartDrawer.trm_drawer-cart .cart__checkout.trm_drawer-cart__checkout {
  width: 100%;
  height: 56px;
  background: var(--tdc-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.005em !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: background .2s, transform .1s, box-shadow .25s !important;
  box-shadow: 0 14px 30px rgba(232,58,31,0.28), 0 2px 6px rgba(232,58,31,0.18) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  text-decoration: none !important;
}
#CartDrawer.trm_drawer-cart .cart__checkout.trm_drawer-cart__checkout:hover,
#CartDrawer.trm_drawer-cart .cart__checkout.trm_drawer-cart__checkout:focus {
  background: var(--tdc-red-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(232,58,31,0.36), 0 4px 10px rgba(232,58,31,0.24) !important;
}
#CartDrawer.trm_drawer-cart .cart__checkout.trm_drawer-cart__checkout svg {
  transition: transform .2s;
}
#CartDrawer.trm_drawer-cart .cart__checkout.trm_drawer-cart__checkout:hover svg {
  transform: translateX(3px);
}

/* ── In-drawer recommendations ── */
#CartDrawer.trm_drawer-cart .trm_drawer-cart__recs {
  margin-top: 4px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__recs-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 12px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__recs-title {
  font-family: var(--tdc-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tdc-ink);
  margin: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__recs-emp {
  font-style: italic;
  font-weight: 600;
  color: var(--tdc-red);
  text-transform: none;
  letter-spacing: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__recs-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__recs-list::-webkit-scrollbar { height: 4px; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__recs-list::-webkit-scrollbar-thumb { background: var(--tdc-line); border-radius: 2px; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec {
  flex: 0 0 110px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tdc-line-2);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11,11,13,0.06);
  border-color: var(--tdc-line);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--tdc-cream);
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-body {
  padding: 7px 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tdc-ink);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-name:hover { text-decoration: underline; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  gap: 4px;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-price {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tdc-ink);
  font-variant-numeric: tabular-nums;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--tdc-ink);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background .15s, transform .1s;
  padding: 0;
  flex-shrink: 0;
}
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-add svg { width: 9px; height: 9px; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-add:hover { background: var(--tdc-red); }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-add:active { transform: scale(0.92); }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-add[disabled] { opacity: 0.4; cursor: not-allowed; }
#CartDrawer.trm_drawer-cart .trm_drawer-cart__rec-soldout {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tdc-mute);
}

/* ── Mobile tweaks ── */
@media (max-width: 480px) {
  #CartDrawer.trm_drawer-cart {
    width: 100vw !important;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__head { padding: 18px 18px 14px; }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__body { padding: 8px 18px 14px; }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__foot { padding: 16px 18px 20px; }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__title { font-size: 22px; }
  /* Compact line item: smaller image, tighter padding/gaps so each row
     takes ~92px instead of ~112px on phones. */
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__media {
    width: 60px; height: 60px; border-radius: 10px;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__line {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__name {
    font-size: 13px;
    line-height: 1.3;
    -webkit-line-clamp: 1;        /* one line on phones to keep rows short */
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__row {
    margin-bottom: 2px;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__variant {
    font-size: 11.5px;
    margin-bottom: 0;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__controls {
    margin-top: 6px;
    gap: 12px;
  }
  /* Slightly smaller stepper + remove on mobile to match the lighter row. */
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__qty,
  #CartDrawer.trm_drawer-cart .js-qty__wrapper {
    height: 24px;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-btn,
  #CartDrawer.trm_drawer-cart .js-qty__adjust {
    width: 22px; height: 22px;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-input,
  #CartDrawer.trm_drawer-cart .js-qty__num {
    width: 20px; height: 22px; font-size: 12px;
  }
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__remove { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #CartDrawer.trm_drawer-cart .cart__checkout.trm_drawer-cart__checkout,
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__qty-btn,
  #CartDrawer.trm_drawer-cart .trm_drawer-cart__close { transition: none !important; }
}