/* 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-noodle {
  display:block; position:relative; margin:0 0 44px; overflow:hidden;
  aspect-ratio:2/3; background:#e6e5e2;
 }
 body.mr-home-mobile .mr-home-noodle video { display:block; width:100%; height:100%; object-fit:cover; }
 body.mr-home-mobile .mr-home-noodle::after {
  content:""; position:absolute; inset:55% 0 0; pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.34));
 }
 body.mr-home-mobile .mr-home-noodle-copy {
  position:absolute; z-index:1; left:20px; right:20px; bottom:34px; color:#fff; text-align:center;
 }
 body.mr-home-mobile .mr-home-noodle-copy h2 {
  margin:0 0 9px; font:400 28px/1.2 var(--font_family); letter-spacing:normal;
 }
 body.mr-home-mobile .mr-home-noodle-copy p { margin:0 auto 12px; max-width:290px; font-size:13px; line-height:1.5; font-weight:400; }
 body.mr-home-mobile .mr-home-noodle-link {
  display:inline-flex; min-height:42px; align-items:center; padding:8px 0;
  color:inherit; font-size:12px; line-height:1.4; text-decoration:underline; text-underline-offset:4px;
 }
 body.mr-home-mobile .mr-home-noodle-toggle {
  position:absolute; z-index:2; right:12px; bottom:12px; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:0; padding:12px; border:0; border-radius:0;
  color:#fff; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
 }
 body.mr-home-mobile .mr-home-noodle-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.3; }
 body.mr-home-mobile .mr-home-noodle-toggle:focus-visible { outline:1px solid #fff; outline-offset:-5px; }
 body.mr-home-mobile .mr-home-promo-hidden { display:none !important; }
 body.mr-home-mobile header.mr-home-docked {
  position:fixed !important; top:calc(env(safe-area-inset-top,0px) + var(--mr-home-viewport-offset,0px)); left:0; width:100%;
 }
 /* Keep a real, opaque fixed edge inside the viewport even when compact Safari
    reports a zero safe inset. Its browser chrome samples fixed backgrounds near
    that edge; an offscreen shield and the stencil SVG do not provide that color.
    12px occupies only the header's empty top padding, above the logo and icons. */
 body.mr-home-mobile .mr-home-safe-area {
  position:fixed; z-index:1001; top:0; left:0; right:0;
  height:max(12px,calc(env(safe-area-inset-top,0px) + var(--mr-home-viewport-offset,0px)));
  background:#fff; pointer-events:none;
 }
 body.mr-home-mobile .mr-home-safe-area::before {
  content:""; position:absolute; left:0; right:0; bottom:100%; height:128px; background:#fff;
 }
 /* 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 .wrap > .main { padding-top:env(safe-area-inset-top,0px); }
 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:1; filter:brightness(0); transition:opacity .14s ease;
 }
 body.mr-home-mobile header.mr-home-stencil-ready.mr-home-docked.mr-home-scrolling:not(:has(.menu_modal.show)) > .cont .logo img {
  opacity:var(--mr-home-logo-scroll-opacity,1); transition:none;
 }
 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 1.2s cubic-bezier(.4,0,.2,1), padding 1.2s 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-hero-copy { display:block; margin:0; font-weight:400; }
 body.mr-home-mobile .main_slider .mr-home-hero-note { display:block; margin-bottom:6px; font-size:13px; line-height:1.45; letter-spacing:.01em; }
 body.mr-home-mobile .main_slider .mr-home-hero-name { display:block; font-size:32px; line-height:1.15; font-weight:400; letter-spacing:-.01em; }
 @media (prefers-reduced-motion:reduce) {
  .wrap > .main > .slogan { transition:none; }
  body.mr-home-mobile .main_slider .swiper-pagination-bullet::after,
  body.mr-home-mobile header .logo img { transition:none !important; }
 }
}