/* ==========================================================================
   mobile.css — responsive + compact layer                               (v1)

   Loaded LAST (after polish.css). Purely visual: no id or JS hook depends on
   it — delete the <link> and the previous look is back.

     1. no sideways wobble on any device (overflow + long words wrap)
     2. containers: one calm card language, touch press feedback
     3. OPEN BOX: header pill + home band redesigned to stand out
     4. header on phones: slimmer rows, full-width search, chip strip
     5. home on phones: 3-panel banner mosaic, compact decks and rails
     6. product grid + product page on phones
     7. bottom tab bar: animated active pill; hides while the buy bar shows
     8. tablets / foldables / landscape phones
     9. speed: no blur, no heavy shadows while scrolling on phones
    10. reduced motion
   ========================================================================== */

:root{
  --m-r:14px;
  --m-line:#E4E9E7;
  --m-ink:#17201E;
  --m-ink-2:#4A5553;
  --m-green:#1D4A42;
  --m-soft:0 1px 2px rgba(23,32,30,.05),0 6px 16px -12px rgba(23,32,30,.22);
  --m-safe-b:env(safe-area-inset-bottom,0px);
}

/* ------------------------------------------------------------------ 1 ---- */
/* The page must never scroll sideways. `clip` (unlike `hidden`) does not
   break the sticky header. The real culprits are also fixed below (the mini
   rail's negative margin was wider than the page padding). */
html,body{max-width:100%}
html{overflow-x:clip}
@supports not (overflow:clip){ body{overflow-x:hidden} }
img,video,svg,canvas,iframe{max-width:100%}
#view,main,.wrap,.shell,.pdp-grid,.pdp-info,.buybox,.hm-wall,.deck,.deck-grid,.cell,
.pgrid,.pcard,.pcard-body,.rail,.rail-head,.results-bar,.order-card,.summary-box{min-width:0}

/* long product names, SKUs and brand strings wrap instead of pushing width */
.pcard-name,.pdp-title,.pdp h1,.c-name,.rcard-name,.pk-name,.order-item-name,.atc-name,
.crumbs,.spec-table td,.results-bar h2,.deck h3,.rail-head h2,.hm-h2,.summary-row,
.cart-line a,.modal-body,.drawer-body{overflow-wrap:anywhere;word-break:normal}
.spec-table{table-layout:fixed;width:100%}
.spec-table td,.spec-table th{vertical-align:top}

/* ------------------------------------------------------------------ 2 ---- */
.deck,.rail,.hm-picks,.hist,.results-bar,.pdp,.buybox,.order-card,.hcard.hero-cubes{
  border:1px solid var(--m-line);
  box-shadow:var(--m-soft);
}
.deck h3,.rail-head h2{letter-spacing:-.015em}
.deck-chev{
  width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;
  background:#F1F4F3;color:var(--m-ink);line-height:1;
}

/* touch press feedback: the thing you tap answers immediately */
@media (hover:none){
  .cell:active,.pcard:active,.mcard:active,.rcard:active,.pk:active,.hm-tile:active,
  .deck-more:active,.subnav-inner a:active{transform:scale(.975);transition:transform .08s ease}
  .cell,.pcard,.mcard,.rcard,.pk,.hm-tile,.deck-more,.subnav-inner a{transition:transform .22s var(--ease-out,ease)}
}

/* clear keyboard focus everywhere */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--m-green);outline-offset:2px;border-radius:8px;
}

/* ------------------------------------------------------------------ 3 ---- */
/* OPEN BOX home band — rebuilt markup from polish.js (v2). */
.ob-promo-wrap{padding-top:16px}
.ob-promo{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:18px;row-gap:0;
  grid-template-areas:"badge copy cta" "badge points cta";
  padding:18px 20px;border-radius:20px;color:#fff;text-decoration:none;
  background:
    radial-gradient(420px 180px at 100% 0%,rgba(255,197,61,.45),transparent 60%),
    radial-gradient(360px 200px at 0% 100%,rgba(255,61,84,.55),transparent 65%),
    linear-gradient(115deg,#241339 0%,#5A1C4E 48%,#E8364F 100%);
  box-shadow:0 18px 38px -24px rgba(90,28,78,.95);
}
.ob-promo::before{                               /* one sweeping shine, transform only */
  content:"";position:absolute;top:0;left:0;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);
  transform:translateX(-120%) skewX(-18deg);animation:obSweep 4.5s ease-in-out infinite;
}
.ob-promo::after{                                /* dotted texture, static */
  content:"";position:absolute;inset:0;z-index:-2;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.2px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
}
@keyframes obSweep{0%,50%{transform:translateX(-120%) skewX(-18deg)}80%,100%{transform:translateX(330%) skewX(-18deg)}}
.ob-promo:hover{color:#fff;text-decoration:none}

.ob-badge{
  grid-area:badge;position:relative;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(145deg,#FFB020,#FF3D54);
  box-shadow:0 10px 22px -10px rgba(255,61,84,.95),inset 0 1px 0 rgba(255,255,255,.35);
  animation:obFloat 3.6s ease-in-out infinite;
}
.ob-badge svg{width:32px;height:32px;stroke:#fff}
.ob-badge::after{                                /* soft ping ring */
  content:"";position:absolute;inset:-4px;border-radius:22px;border:2px solid rgba(255,197,61,.7);
  animation:obRing 2.4s ease-out infinite;
}
@keyframes obRing{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.18);opacity:0}}

.ob-copy{grid-area:copy;display:flex;flex-direction:column;min-width:0;align-self:end}
.ob-copy .ob-name{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:12px;font-weight:800;color:#FFE3A3;
}
.ob-copy .ob-name i{
  font-style:normal;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;
  background:#FFC53D;color:#3A1C4A;
}
.ob-copy b{
  display:block;margin-top:3px;
  font-family:var(--display,inherit);font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.12;color:#fff;
}
.ob-copy b em{
  font-style:normal;color:#FFC53D;
  background:none;-webkit-background-clip:initial;background-clip:initial;
}
.ob-copy .ob-sub{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.84)}
.ob-points{grid-area:points;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-self:start;min-width:0}
.ob-points i{
  font-style:normal;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:11.5px;font-weight:700;padding:4px 10px 4px 7px;border-radius:999px;
  background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.ob-points i svg{width:12px;height:12px;stroke:#7CF0B5;flex:0 0 auto}
.ob-cta{
  grid-area:cta;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  padding:12px 20px;border-radius:999px;background:#fff;color:#2A1540;font-weight:800;font-size:14px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6);
  transition:transform .18s var(--ease-spring,ease);
}
.ob-cta svg{width:16px;height:16px;transition:transform .18s ease}
@media (hover:hover){ .ob-promo:hover .ob-cta{transform:scale(1.04)} .ob-promo:hover .ob-cta svg{transform:translateX(3px)} }
.ob-promo:active .ob-cta{transform:scale(.96)}

/* Header pill: always labelled, shine kept even on touch devices (it is a
   transform-only animation, so it costs nothing while scrolling). */
.hdr-openbox{white-space:nowrap;flex:0 0 auto}
.lite .hdr-openbox::before{animation:obShine 3.2s ease-in-out infinite !important}
.lite .ob-promo::before{animation:obSweep 4.5s ease-in-out infinite !important}
.lite .ob-badge::after{animation:obRing 2.4s ease-out infinite !important}
.lite .subnav-inner a.sub-openbox::before{animation:obPulse 1.8s ease-out infinite !important}

/* ------------------------------------------------------------------ 4 ---- */
@media (max-width:700px){
  .hdr{box-shadow:none;transition:box-shadow .2s ease}
  html.m-scrolled .hdr{box-shadow:0 6px 18px -14px rgba(23,32,30,.55)}

  .hdr-main{
    display:flex !important;flex-wrap:wrap !important;align-items:center;
    padding:8px 12px 8px !important;gap:8px !important;min-height:0 !important;
  }
  .brand-logo{flex:0 1 auto;min-width:0;display:flex;align-items:center}
  .brand-logo img{height:24px !important;width:auto !important;max-width:120px}
  .hdr-actions{margin-left:auto !important;display:flex;align-items:center;gap:6px !important;flex:0 0 auto}

  .hdr-openbox{
    display:inline-flex !important;align-items:center;gap:6px !important;
    height:36px;padding:3px 12px 3px 3px !important;border-radius:999px !important;
  }
  .hdr-openbox .ob-ico{width:30px !important;height:30px !important;border-radius:50% !important;display:grid !important;place-items:center}
  .hdr-openbox .ob-ico svg{width:17px;height:17px}
  .hdr-openbox .ob-txt{display:flex !important;flex-direction:column;line-height:1.05}
  .hdr-openbox .t1{display:block !important;font-size:9px !important;letter-spacing:.01em}
  .hdr-openbox .t2{display:block !important;font-size:13px !important}
  .hdr-openbox .ob-new{display:none !important}

  .hdr-cart{height:38px !important;min-width:44px;padding:0 11px !important;border-radius:999px !important}
  .hdr-cart svg{width:20px;height:20px}

  /* search: full width, category picker gone (the chip strip does that job) */
  .search-box{
    order:3;flex:1 0 100% !important;height:42px !important;margin:0 !important;
    border-radius:12px !important;
  }
  .search-box select{display:none !important}
  .search-box input{font-size:16px !important;padding:0 12px 0 14px !important;min-width:0}
  .search-box button{width:42px !important;height:34px !important;margin:4px !important;border-radius:9px !important;flex:0 0 auto}

  /* chip strip: swipeable, fades at the edges, snaps */
  .subnav-inner{
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    scroll-snap-type:x proximity;scroll-padding:0 12px;
    padding:0 12px 8px !important;min-height:0 !important;gap:6px !important;flex-wrap:nowrap !important;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .subnav-inner::-webkit-scrollbar{display:none}
  .subnav-inner a{
    flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
    height:30px;display:inline-flex !important;align-items:center;
    padding:0 12px !important;font-size:12.5px !important;border-radius:999px !important;
  }
  .subnav-inner a.sub-openbox{padding-left:24px !important}
  .subnav{max-height:48px}
}

/* narrow phones (≤360): logo shrinks before anything is hidden */
@media (max-width:360px){
  .hdr-main{padding:7px 10px !important;gap:6px !important}
  .brand-logo img{height:20px !important;max-width:98px}
  .hdr-openbox{padding:3px 10px 3px 3px !important;height:34px}
  .hdr-openbox .ob-ico{width:28px !important;height:28px !important}
  .hdr-openbox .t1{display:none !important}
  .hdr-cart{height:34px !important;padding:0 9px !important;min-width:40px}
  .subnav-inner{padding:0 10px 7px !important}
}
/* very narrow (Galaxy Fold cover, 280–320): icon-only pill */
@media (max-width:319px){
  .hdr-openbox .ob-txt{display:none !important}
  .hdr-openbox{padding:3px !important}
}

/* ------------------------------------------------------------------ 5 ---- */
@media (max-width:700px){
  :root{--hm-gap:8px;--hm-pad:10px;--hm-r:14px}
  .wrap{padding-left:12px !important;padding-right:12px !important}

  /* the mini rail bleeds exactly to the page edge — not 2px past it */
  .hm-mini{margin:0 -12px !important;padding:0 12px 4px !important;scroll-padding:0 12px;gap:8px !important}
  .hm-mini-wrap{padding-top:10px !important}
  .mcard{flex:0 0 132px !important;flex-basis:132px !important;height:170px !important;scroll-snap-align:start;border-radius:12px !important}

  /* three banners: tall one left, two short ones stacked right — one
     screen-width, no scrolling. Artwork is `contain` over its own blurred
     copy, so nothing is cropped. */
  .hm-hero-band{padding-top:8px !important}
  .hm-hero.hm-hero-n3{
    grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
  }
  .hm-hero-n3 .hero-l{grid-column:1 !important;grid-row:1 / span 2 !important}
  .hm-hero-n3 .hero-m1{grid-column:2 !important;grid-row:1 !important}
  .hm-hero-n3 .hero-m2{grid-column:2 !important;grid-row:2 !important}
  .hm-hero-n3 .hero-cubes{grid-column:1 / -1 !important;grid-row:3 !important}
  .hm-hero-n3 .hero-l.hpanel{height:calc(62vw + 0px) !important;min-height:0 !important;max-height:340px}
  .hm-hero-n3 .hero-m1.hpanel,.hm-hero-n3 .hero-m2.hpanel{height:calc((62vw - var(--hm-gap)) / 2) !important;min-height:0 !important;max-height:166px}
  .hpanel{border-radius:14px !important}

  /* hero load: one orchestrated entrance, then nothing moves on its own */
  .hm-hero > .hcard{animation:mHeroIn .5s var(--ease-out,ease) both}
  .hm-hero > .hero-m1{animation-delay:.06s}
  .hm-hero > .hero-m2{animation-delay:.12s}
  .hm-hero > .hero-cubes{animation-delay:.18s}

  .hcard.hero-cubes{border-radius:14px}
  .hero-cubes .hcard-head{padding:10px 12px 4px}
  .hero-cubes .hcard-head b{font-size:15px}

  /* Open Box band — compact */
  .ob-promo-wrap{padding-top:10px !important}
  .ob-promo{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badge copy" "points points" "cta cta";column-gap:12px;row-gap:10px;padding:14px;border-radius:16px}
  .ob-copy{align-self:center}
  .ob-badge{width:46px;height:46px;border-radius:14px}
  .ob-badge::after{border-radius:18px}
  .ob-badge svg{width:24px;height:24px}
  .ob-copy .ob-name{font-size:11px}
  .ob-copy b{font-size:18px;margin-top:2px}
  .ob-copy .ob-sub{font-size:12px}
  .ob-points{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);
  }
  .ob-points::-webkit-scrollbar{display:none}
  .ob-points i{font-size:11px;padding:4px 9px 4px 6px}
  .ob-cta{padding:11px 14px;font-size:13.5px;width:100%}

  /* section headings */
  .hm-sec{padding-top:18px !important}
  .hm-h2{font-size:17px !important;line-height:1.25;margin:0 0 8px !important}

  /* decks: 2 x 2 cells, compact text, whole deck is a calm card */
  .hm-wall{gap:8px !important}
  .deck{padding:12px 11px 10px !important;border-radius:14px !important}
  .deck h3{font-size:14.5px !important;line-height:1.25;margin:0 0 8px !important;padding-right:30px}
  .deck-chev{width:24px;height:24px;font-size:15px !important}
  .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px 7px !important}
  .cell-pic{border-radius:10px}
  .c-name{font-size:11px !important;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .c-price{font-size:13px !important}
  .c-off,.c-tag,.c-b,.c-r{font-size:10.5px !important}
  .deck-more{display:inline-flex;align-items:center;min-height:30px;margin-top:8px !important;padding:0 12px !important;font-size:12px !important;border-radius:999px}

  /* horizontal rails: snap, no arrows, cards sized so the next one peeks */
  .rail{padding:12px 0 8px !important;border-radius:14px !important}
  .rail-head{padding:0 12px}
  .rail-head h2{font-size:16px !important;line-height:1.25}
  .rail-track,.hm-picks-row,.hist-row{scroll-snap-type:x proximity;scroll-padding:0 12px;padding-left:12px !important;padding-right:12px !important;scrollbar-width:none}
  .rail-track::-webkit-scrollbar,.hm-picks-row::-webkit-scrollbar,.hist-row::-webkit-scrollbar{display:none}
  .rail-track>*,.hm-picks-row>*,.hist-row>*{scroll-snap-align:start}
  .rcard{flex:0 0 42vw !important;max-width:170px}
  .rcard-name{font-size:12px !important;line-height:1.3}
  .rcard-price{font-size:14.5px !important}
  .pk{flex:0 0 138px !important}
  .rail-btn,.rail-nav{display:none !important}
}

/* ------------------------------------------------------------------ 6 ---- */
@media (max-width:700px){
  .shell{gap:10px !important;grid-template-columns:minmax(0,1fr) !important}
  .shell>section,.shell>div{min-width:0;max-width:100%}
  .results-bar>div{min-width:0}
  .results-bar>div:last-child{flex:1 1 100%;display:flex !important;flex-wrap:nowrap;gap:8px !important}
  .results-bar .sort-sel{flex:1 1 auto;width:auto !important;min-width:0}
  .results-bar{padding:10px 12px !important;border-radius:14px !important;gap:8px;flex-wrap:wrap}
  .results-bar h2{font-size:16px !important}
  .sort-sel,.results-bar select{max-width:100%;min-width:0;height:36px;font-size:13px}
  .mobile-filter-btn{height:36px;border-radius:10px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;white-space:nowrap}

  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  .pcard{padding:5px !important;border-radius:14px !important;display:flex;flex-direction:column}
  .pcard-imgwrap{border-radius:10px !important;aspect-ratio:1/1}
  .pcard-body{padding:8px 5px 2px !important;gap:3px !important;flex:1;display:flex;flex-direction:column}
  .pcard-brand{font-size:10.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard-name{
    font-size:12.5px !important;line-height:1.35 !important;min-height:0 !important;
    display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .pcard-price,.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
  .pcard-price .price-now{font-size:17px !important}
  .pcard-price .price-was,.price-was{font-size:11px !important}
  .pcard-save{align-self:flex-start;font-size:10.5px !important;padding:1px 7px !important;white-space:nowrap}
  .pcard-meta,.pcard-eta,.pcard-rating{font-size:11px !important;line-height:1.35}
  .pcard-eta{white-space:normal}
  .pcard-actions{margin-top:auto;padding-top:8px !important}
  .pcard-actions .btn{min-height:38px !important;font-size:12.5px !important;border-radius:10px !important;white-space:nowrap;padding:0 6px}
  .pcard-deal{font-size:10px !important;padding:2px 7px !important;top:8px !important;left:8px !important}
  .pcard-fav{width:30px !important;height:30px !important;top:8px !important;right:8px !important}

  /* product page */
  .crumbs{font-size:12px;line-height:1.5;white-space:normal}
  .pdp{padding:12px !important;border-radius:14px !important}
  .pdp-grid{gap:12px !important}
  .pdp-gallery{border-radius:12px;overflow:hidden}
  .pdp-thumbs{gap:6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .pdp-thumbs::-webkit-scrollbar{display:none}
  .pdp-thumb{flex:0 0 52px;width:52px;height:52px;scroll-snap-align:start}
  .pdp-title,.pdp h1{font-size:17px !important;line-height:1.32 !important;letter-spacing:-.01em}
  .pdp-price .now,.pdp-price-block .price-now{font-size:26px !important}
  .pdp-offers{gap:8px}
  .offer-card{padding:10px !important;border-radius:12px !important}
  .highlight{padding:8px 10px !important}
  .buybox{padding:14px !important;border-radius:14px !important}
  .bb-actions .btn{min-height:44px}
  .spec-table td,.spec-table th{padding:8px 10px !important;font-size:12.5px}
  .rel-section h2{font-size:16px}

  /* sticky buy bar: safe-area aware, price never wraps into the button */
  .ht-buybar{padding:8px 12px calc(8px + var(--m-safe-b)) !important;gap:10px !important;
    box-shadow:0 -10px 26px -18px rgba(23,32,30,.5)}
  .buybar-price{font-size:18px !important;white-space:nowrap}
  .ht-buybar .btn{min-width:0 !important;flex:0 0 auto;padding:0 18px;min-height:44px;border-radius:12px}

  /* drawers + modals: full-height sheets that respect the notch/home bar */
  .drawer{max-width:92vw}
  .drawer-foot{padding-bottom:calc(12px + var(--m-safe-b)) !important}
  .modal{width:calc(100vw - 20px) !important;max-width:460px;max-height:calc(100dvh - 24px);overflow:auto;border-radius:18px !important}

  /* orders */
  .order-card{border-radius:14px !important}
  .order-head,.order-foot{flex-wrap:wrap;gap:6px 10px}
  .order-item{gap:10px}

  /* footer */
  .ft{margin-top:24px !important;padding-bottom:calc(58px + var(--m-safe-b))}
  .ft-top{min-height:44px}
  .ft-cols-inner{grid-template-columns:1fr 1fr !important;padding:26px 14px 14px !important;gap:18px 12px !important}
  .ft-col h4{font-size:13.5px !important;margin-bottom:6px}
  .ft-col a{font-size:12.5px !important;padding:4px 0;display:block}
  .ft-inner{flex-direction:column;gap:6px;text-align:center;padding:12px !important;font-size:11.5px}
}

@media (max-width:360px){
  .wrap{padding-left:10px !important;padding-right:10px !important}
  .hm-mini{margin:0 -10px !important;padding:0 10px 4px !important}
  .pgrid{gap:6px !important}
  .pcard-name{font-size:12px !important}
  .pcard-price .price-now{font-size:15.5px !important}
  .pcard-actions .btn{min-height:36px !important;font-size:12px !important}
  .deck{padding:10px 9px 9px !important}
  .ob-copy b{font-size:16.5px}
  .ob-copy .ob-sub{display:none}
  .buybar-price{font-size:16px !important}
  .ht-buybar .btn{padding:0 14px}
}

/* ------------------------------------------------------------------ 7 ---- */
@media (max-width:700px){
  .mbar{
    height:auto;padding:4px 6px calc(4px + var(--m-safe-b)) !important;
    background:rgba(255,255,255,.98) !important;border-top:1px solid var(--m-line) !important;
    box-shadow:0 -10px 26px -20px rgba(23,32,30,.5) !important;
    transition:transform .28s var(--ease-out,ease) !important;
  }
  .mbar button{min-height:48px !important;font-size:10.5px !important;gap:3px !important;color:#6B7674}
  .mbar button svg{
    width:40px !important;height:26px !important;padding:3px 10px;border-radius:999px;box-sizing:border-box;
    transition:background .22s ease,color .22s ease,transform .22s var(--ease-spring,ease);
  }
  .mbar button.on{color:var(--m-green) !important;font-weight:800}
  .mbar button.on svg{background:#E2EFEB;transform:translateY(-1px)}
  .mbar button.on::before{display:none !important}
  .mbar button:active svg{transform:scale(.9)}
  .mbar .mb-badge{top:1px !important;left:calc(50% + 7px) !important;box-shadow:0 0 0 2px #fff}

  /* product page: while the sticky buy bar is up, the tab bar steps aside */
  body.has-buybar .mbar{bottom:0 !important}
  html.m-bb-show .mbar{transform:translateY(110%)}
  body.has-buybar .to-top{bottom:calc(70px + var(--m-safe-b)) !important}
  .to-top{bottom:calc(70px + var(--m-safe-b)) !important}
}

/* ------------------------------------------------------------------ 8 ---- */
/* Tablets and big foldables (Fold inner, iPad mini/Air portrait). */
@media (min-width:701px) and (max-width:1050px){
  html{overflow-x:clip}
  .wrap{padding-left:16px !important;padding-right:16px !important}
  .search-box select{max-width:110px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px !important}
  .hm-wall{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .deck-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .pcard-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ob-copy b{font-size:20px}
  .ft-cols-inner{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media (min-width:900px) and (max-width:1050px){
  .pgrid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
/* Big phones held sideways / small tablets: three product columns. */
@media (min-width:540px) and (max-width:700px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .hm-hero-n3 .hero-l.hpanel{height:44vw !important}
  .hm-hero-n3 .hero-m1.hpanel,.hm-hero-n3 .hero-m2.hpanel{height:calc((44vw - var(--hm-gap)) / 2) !important}
  .hm-hero.hm-hero-n3{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important}
}
/* Landscape phones: short screens — keep the header from eating the view. */
@media (max-height:480px) and (orientation:landscape) and (max-width:950px){
  .hdr{position:relative !important}
  .hdr-stick{position:relative !important}
  .subnav{display:none}
  .mbar{display:none !important}
  .ft{padding-bottom:0}
}
/* Wide desktops: keep the band from stretching into a thin strip. */
@media (min-width:1051px){
  .ob-promo{padding:20px 26px}
}

/* ------------------------------------------------------------------ 9 ---- */
@media (max-width:700px){
  .hdr,.hdr-stick,.mbar,.ht-buybar,.drawer,.modal,.overlay{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .pcard,.deck,.rail,.mcard,.cell-pic,.pcard-imgwrap{will-change:auto}
  .pcard:hover,.deck:hover,.rail:hover,.mcard:hover,.hm-picks:hover{transform:none !important;box-shadow:var(--m-soft) !important}
}
@keyframes mHeroIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ----------------------------------------------------------------- 10 ---- */
@media (prefers-reduced-motion:reduce){
  .ob-promo::before,.ob-badge,.ob-badge::after,.hdr-openbox::before,
  .subnav-inner a.sub-openbox::before,.hm-hero > .hcard{animation:none !important}
  .mbar,.mbar button svg{transition:none !important}
}