/* Home presentation only. The storefront's desktop rules and fonts remain intact. */
@media (max-width:767px) {
 body.mr-home-mobile .mr-home-best { margin-bottom:38px; }
 body.mr-home-mobile .mr-home-best > .cont { padding:0 20px; }
 body.mr-home-mobile .mr-home-best .block_head {
  display:block; margin-bottom:20px; text-align:left;
 }
 body.mr-home-mobile .mr-home-best .block_head .title {
  font-size:var(--font_size_title); line-height:1.25; font-weight:400;
  letter-spacing:normal; text-transform:none;
 }
 body.mr-home-mobile .mr-home-shop {
  display:inline-block; margin-top:8px; padding:4px 0; color:inherit;
  font-size:12px; line-height:1.4; font-weight:400;
  text-decoration:underline; text-underline-offset:4px;
 }
 body.mr-home-mobile .mr-home-best > .swiper { padding:0; }
 body.mr-home-mobile .mr-home-best .swiper-button-next,
 body.mr-home-mobile .mr-home-best .swiper-button-prev { display:none; }
 body.mr-home-mobile .mr-home-best .product { position:relative; }
 body.mr-home-mobile .mr-home-best .product .info { padding:13px 0 0; gap:7px; }
 body.mr-home-mobile .mr-home-best .product .name { font-weight:400; line-height:1.45; }
 body.mr-home-mobile .mr-home-best .product .category,
 body.mr-home-mobile .mr-home-best .product .color,
 body.mr-home-mobile .mr-home-best .product .hover { display:none; }
 body.mr-home-mobile .mr-mobile-quick-add {
  position:absolute; z-index:3; right:10px; top:var(--mr-quick-top,10px);
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  color:#222; background:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
 }
 body.mr-home-mobile .mr-mobile-quick-add svg { width:18px; height:18px; }
 body.mr-home-mobile .mr-mobile-quick-add:focus-visible { outline:2px solid #222; outline-offset:3px; }
 body.mr-home-mobile .mr-home-light {
  display:block; position:relative; margin:0 0 44px; overflow:hidden;
  aspect-ratio:3/4; background:#e6e5e2;
 }
 body.mr-home-mobile .mr-home-light picture,
 body.mr-home-mobile .mr-home-light img { display:block; width:100%; height:100%; }
 body.mr-home-mobile .mr-home-light img { object-fit:cover; object-position:center; }
 body.mr-home-mobile .mr-home-light::after {
  content:""; position:absolute; inset:40% 0 0; pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.5));
 }
 body.mr-home-mobile .mr-home-light-copy {
  position:absolute; z-index:1; left:20px; right:20px; bottom:34px;
  color:#fff; text-align:center;
 }
 body.mr-home-mobile .mr-home-light-copy h2 {
  margin:0 0 9px; font:400 28px/1.2 var(--font_family); letter-spacing:normal;
 }
 body.mr-home-mobile .mr-home-light-copy p { margin:0 0 20px; font-size:13px; line-height:1.5; }
 body.mr-home-mobile .mr-home-light-copy a {
  display:inline-flex; min-width:125px; min-height:42px;
  align-items:center; justify-content:center; padding:10px 24px;
  border:1px solid rgba(255,255,255,.85); color:inherit;
  font-size:12px; line-height:1.4; text-decoration:none;
 }
 body.mr-home-mobile .mr-home-promo-hidden { display:none !important; }
 body.mr-home-mobile header.mr-home-docked { position:fixed !important; top:0; left:0; width:100%; }
 /* The white SVG covers the entire docked header except the logo letters.
    Safari's status/safe area remains opaque white, outside the mask. */
 html:has(body.mr-home-mobile), body.mr-home-mobile { background:#fff; }
 body.mr-home-mobile header,
 body.mr-home-mobile header > .cont { background:#fff; }
 body.mr-home-mobile header.mr-home-docked::before {
  content:""; position:absolute; z-index:2; left:0; right:0; bottom:100%;
  height:env(safe-area-inset-top,0px); background:#fff; pointer-events:none;
 }
 body.mr-home-mobile header .mr-home-stencil { display:none; pointer-events:none; }
 body.mr-home-mobile header.mr-home-stencil-ready.mr-home-docked:not(:has(.menu_modal.show)) {
  background:transparent !important; border-bottom-color:transparent; box-shadow:none;
 }
 body.mr-home-mobile header.mr-home-stencil-ready.mr-home-docked:not(:has(.menu_modal.show)) > .cont {
  position:relative; z-index:1; background:transparent;
 }
 body.mr-home-mobile header.mr-home-stencil-ready.mr-home-docked:not(:has(.menu_modal.show)) > .cont .logo img { opacity:0; }
 body.mr-home-mobile header.mr-home-stencil-ready.mr-home-docked:not(:has(.menu_modal.show)) > .mr-home-stencil {
  display:block; position:absolute; z-index:0; inset:0; width:100%; height:100%;
 }
 body.mr-home-mobile .mr-home-stencil > rect { fill:#fff; }
 /* This stylesheet is home-only. Apply the final height before JS adds body
    classes, so the native hide timer starts a single, continuous collapse. */
 .wrap > .main > .slogan {
  height:240px; transform:none; transform-origin:top;
  transition:height .85s cubic-bezier(.4,0,.2,1), padding .85s cubic-bezier(.4,0,.2,1);
 }
 .wrap > .main > .slogan.hide { height:0; padding-top:0; padding-bottom:0; transform:none; }
 body.mr-home-mobile .main_slider .swiper-pagination {
  display:flex; align-items:center; justify-content:center; gap:8px; bottom:14px;
 }
 body.mr-home-mobile .main_slider .swiper-pagination-bullet {
  position:relative; display:block; flex:none; width:34px; height:22px;
  margin:0 !important; padding:0; border:0; border-radius:0; opacity:1;
  background:transparent; box-shadow:none;
 }
 body.mr-home-mobile .main_slider .swiper-pagination-bullet::before { display:none; }
 body.mr-home-mobile .main_slider .swiper-pagination-bullet::after {
  content:""; position:absolute; left:0; right:0; top:10px; height:2px;
  border:0; border-radius:0; background:rgba(255,255,255,.45); box-shadow:none;
  transition:background-color .2s ease;
 }
 body.mr-home-mobile .main_slider .swiper-pagination-bullet.active::after,
 body.mr-home-mobile .main_slider .swiper-pagination-bullet.swiper-pagination-bullet-active::after { background:#fff; }
 body.mr-home-mobile .main_slider .mr-home-sirocco img { object-position:50% 48%; }
 @media (prefers-reduced-motion:reduce) {
  .wrap > .main > .slogan { transition:none; }
  body.mr-home-mobile .main_slider .swiper-pagination-bullet::after { transition:none; }
 }
}
