/* R7: one mobile spacing scale, the photographed hero, and the contextual buy bar. */
@media (max-width: 767px) {
 html:root {
  --mo-space-1: 6px;
  --mo-space-2: 12px;
  --mo-space-3: 16px;
  --mo-space-4: 24px;
  --mo-space-section: 40px;
  --mo-section: var(--mo-space-section);
 }
 html body .mo-section-head.mo-section-head {
  gap: var(--mo-space-2);
  margin-bottom: var(--mo-space-4);
 }
 html body .mo-breadcrumb.mo-breadcrumb { margin-bottom: var(--mo-space-3); }
 html body .mo-eyebrow.mo-eyebrow { margin-bottom: var(--mo-space-2); }
 html body .mo-page-intro.mo-page-intro { padding-block: var(--mo-space-4); }
 html body .mo-page-intro.mo-page-intro h1 { font-size: 36px; line-height: 1.08; text-wrap: balance; }
 html body .mo-page-intro.mo-page-intro p { margin-top: var(--mo-space-2); font-size: 12px; line-height: 1.65; }
 html body .mo-toolbar.mo-toolbar { gap: var(--mo-space-2) 8px; padding-bottom: var(--mo-space-3); margin-bottom: var(--mo-space-3); }
 html body .mo-toolbar.mo-toolbar select { font-size: 14px; line-height: 1.4; min-height: 40px; padding: 8px; max-width: 150px; }

 /* Keep the first benefits beside the photograph instead of below a second image row. */
 html body .mo-home-top.mo-home-top { padding-top: var(--mo-space-2); }
 html body .mo-home-top > .mo-container { display: flex; flex-direction: column; }
 html body .mo-home-top .mo-hero-layout { order: 1; width: 100%; }
 html body .mo-home-top .mo-shipping-progress { order: 2; width: 100%; }
 html body .mo-home-top .mo-benefit-strip { order: 3; width: 100%; }
 html body .mo-home-top .mo-campaign-terms { order: 4; }
 html body .mo-home-top .mo-category-tiles { order: 5; width: 100%; }
 html body .mo-hero.mo-hero {
  display: block;
  min-height: 0;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  isolation: isolate;
 }
 html body .mo-hero .mo-hero__photo.mo-hero__photo {
  position: absolute;
  inset: 0 0 0 22%;
  width: 78%;
  height: 100%;
  object-fit: cover;
  object-position: 20% center;
  opacity: .86;
  z-index: -2;
 }
 html body .mo-hero.mo-hero::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080808 8%, #080808db 38%, #08080870 70%, #0808081a);
  pointer-events: none;
  z-index: -1;
 }
 html body .mo-hero .mo-hero__content.mo-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: var(--mo-space-2) 8px;
  padding: var(--mo-space-4) 20px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
 }
 html body .mo-hero .mo-eyebrow.mo-eyebrow {
  grid-column: 1 / -1;
  max-width: 245px;
  margin: 0;
  font-size: 8px;
  letter-spacing: .14em;
  line-height: 1.6;
 }
 html body .mo-hero.mo-hero h1 {
  grid-column: 1;
  grid-row: 2;
  max-width: 185px;
  margin: 0;
  font-size: clamp(39px, 11.25vw, 46px);
  line-height: .98;
  letter-spacing: -.065em;
 }
 html body .mo-hero .mo-hero__discount.mo-hero__discount {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin: 0 0 2px;
  font-size: clamp(57px, 16vw, 68px);
  line-height: .95;
 }
 html body .mo-hero .mo-hero__content p { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; }
 html body .mo-hero .mo-hero__content > .mo-btn {
  grid-column: 1 / -1;
  justify-self: stretch;
  min-height: 44px;
  padding: 11px 14px;
  font-size: 11px;
 }
 html body .mo-hero .mo-hero-secondary {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  min-height: 26px;
  padding-block: 3px;
  border-bottom: 1px solid #ffffff70;
 }
 html body .mo-benefit-strip.mo-benefit-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mo-space-2) 8px;
  padding-block: var(--mo-space-2);
  margin-block: var(--mo-space-2) 0;
 }
 html body .mo-benefit-strip.mo-benefit-strip > div { font-size: 9px; line-height: 1.5; gap: 7px; }
 html body .mo-campaign-terms.mo-campaign-terms { padding-block: var(--mo-space-2) var(--mo-space-4); font-size: 9px; line-height: 1.6; }

 html body .mo-product-section.mo-product-section { padding-top: var(--mo-space-3); }
 html body .mo-product.mo-product { gap: var(--mo-space-3); }
 html body .mo-product .mo-product__brand { margin: 0 0 var(--mo-space-1); font-size: 11px; line-height: 1.5; }
 html body .mo-product.mo-product h1 { font-size: clamp(28px, 8vw, 32px); line-height: 1.08; margin: 0; text-wrap: balance; }
 html body .mo-product .mo-product__sku { margin-top: var(--mo-space-1); font-size: 10px; }
 html body .mo-product .mo-product__price { margin-top: var(--mo-space-3); }
 html body .mo-product .mo-product__help { margin-top: var(--mo-space-3); padding: var(--mo-space-3); }
 html body .mo-native-gallery.mo-native-gallery .woocommerce-product-gallery { --mo-thumb-space: 63px; }
 html body .mo-native-gallery.mo-native-gallery .woocommerce-product-gallery:not(:has(.woocommerce-product-gallery__image:nth-child(2))) { --mo-thumb-space: 0px; }
 html body .mo-native-gallery.mo-native-gallery .flex-control-thumbs { margin-top: 8px; gap: 8px; }

 html body .mo-promo-hero.mo-promo-hero { padding-block: var(--mo-space-4); }
 html body .mo-promo-hero.mo-promo-hero .mo-eyebrow { margin-bottom: var(--mo-space-2); }
 html body .mo-promo-hero.mo-promo-hero h1 { font-size: 41px; line-height: .98; }
 html body .mo-promo-hero.mo-promo-hero strong { font-size: 60px; }
 html body .mo-promo-hero.mo-promo-hero p { margin-top: var(--mo-space-2); font-size: 11px; line-height: 1.55; }
 html body .mo-promo-hero.mo-promo-hero p + p { margin-top: 8px; }
 html body .mo-promo-hero + .mo-section { padding-top: var(--mo-space-4); }
 html body .mo-promo-tabs.mo-promo-tabs { gap: 6px; margin-bottom: var(--mo-space-3); }
 html body .mo-promo-hero + .mo-section .mo-section-head { gap: 8px; margin-bottom: var(--mo-space-3); }

 html body .mo-product-sticky.mo-product-sticky {
  display: flex;
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease;
 }
 html body .mo-product-sticky.mo-product-sticky.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
 html body .mo-product-sticky.mo-product-sticky { transition: none; }
}

@media (max-width: 767px) {
 html body .mo-native-gallery .flex-control-thumbs { scrollbar-width: none; -ms-overflow-style: none; }
 html body .mo-native-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; width: 0; height: 0; }
}