/* ===== Chip rows — badges and product types =====
   Both rows are generated from live catalogue data, so the count pill is part
   of the chip contract: it tells the shopper how many products sit behind the
   label before they commit to a click. */
.ms-chipbar{
  gap:8px;align-items:center;flex-wrap:wrap;
  padding:12px 2px 4px;margin-bottom:2px;
}
.ms-chip{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 13px;border-radius:999px;
  border:1px solid #e4e5e9;background:#fff;color:#494b52;
  font-size:12.5px;font-weight:700;line-height:1;text-decoration:none;
  white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.ms-chip:hover,.ms-chip:focus-visible{
  border-color:#cfd1d7;background:#fbfbfc;color:#25262b;text-decoration:none;
}
.ms-chip i{font-size:11px;color:#9aa0a8;transition:color .18s ease}
.ms-chip--badge.is-active{
  border-color:#16161c;background:#16161c;color:#fff;
}
.ms-chip--badge.is-active i{color:#fff}
.ms-chip__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:19px;padding:0 6px;border-radius:999px;
  background:#f1f2f4;color:#6b6d75;
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.ms-chip--badge.is-active .ms-chip__count{background:rgba(255,255,255,.2);color:#fff}

/* Nested sub-category checkboxes inside the filter panel */
.ms-subcategory-check{margin-left:26px}

/* ===== Filter panel — collapsible groups (reference style) ===== */
.ms-filter-group{
  border:0;border-bottom:1px solid rgba(22,22,28,.07);
  padding:0;margin:0 0 2px;background:transparent;
}
.ms-filter-group:last-of-type{border-bottom:0}
.ms-filter-group__head{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:14px 2px;border:0;background:transparent;
  cursor:pointer;text-align:left;
}
.ms-filter-group__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 auto;border-radius:10px;
  background:#f4f4f6;color:#595b63;
}
.ms-filter-group.is-open .ms-filter-group__icon{background:rgba(var(--ms-brand-rgb),.12);color:var(--ms-brand,#21cc87)}
.ms-filter-group__icon svg{display:block}
.ms-filter-group__title{
  font-size:13px;font-weight:800;letter-spacing:.02em;
  color:#27282d;text-transform:none;
  flex:1 1 auto;min-width:0;
}
.ms-filter-group__caret{
  font-size:11px;color:#9ca3af;
  transition:transform .22s ease;flex:0 0 auto;
}
.ms-filter-group.is-open .ms-filter-group__caret{transform:rotate(180deg)}
.ms-filter-group__body{display:none;padding:0 2px 14px}
.ms-filter-group.is-open .ms-filter-group__body{display:block}
/* Collection & Tag cloud — minimalist wrap chips */
.ms-tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.ms-tag-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 13px;border-radius:999px;
  border:1px solid #e5e6ea;background:#fff;
  color:#3c3d43;font-size:12.5px;font-weight:700;line-height:1;
  text-decoration:none;transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.ms-tag-chip:hover{border-color:#c9cbd1;color:#16161c}
.ms-tag-chip.is-active{border-color:var(--ms-brand,#21cc87);background:rgba(var(--ms-brand-rgb),.1);color:var(--ms-brand,#21cc87)}
.ms-tag-chip__count{font-size:11.5px;font-weight:800;color:#9ca3af;font-variant-numeric:tabular-nums}
.ms-tag-chip.is-active .ms-tag-chip__count{color:var(--ms-brand,#21cc87)}
/* Inside the mobile sheet the old spacing rules still apply, so trim the
   group chrome there and keep the fold behaviour. */
.filter-form.is-open .ms-filter-group{margin-bottom:0!important}
.filter-form.is-open .ms-filter-group__body{padding-bottom:12px}

/* ===== Result count pill ===== */
.ms-browse-toolbar__count{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;flex:0 1 auto}
.ms-count-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;padding:4px 12px;border-radius:999px;
  background:rgba(var(--ms-brand-rgb),.12);color:var(--ms-brand,#21cc87);
  font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.4;
  flex:0 0 auto;white-space:nowrap;
}
.ms-count-text{font-size:14px;color:#6b7280;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* AJAX grid cap note — quiet, centered single line under the grid */
.mc-cap-note{margin-top:10px;width:100%;flex:0 0 100%;text-align:center;padding:12px 18px;background:#fff;border:1px solid #e7e7ea;border-radius:14px;color:#595b63;font-size:12.5px;font-weight:600}
.ms-browse-pager[hidden]{display:none!important}
/* Mobile keeps the clean light header — no heavy hero card (desktop only) */

/* Desktop browse polish (reference-like clean marketplace) */
.ms-browse-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:nowrap}
.ms-browse-toolbar__count{font-size:14px;color:#6b7280;font-weight:600}
.ms-browse-toolbar__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ms-browse-filter-toggle{height:36px;padding:0 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#374151;font-size:13px;font-weight:600;align-items:center;gap:8px;cursor:pointer}
.mc-view-toggle{display:flex;gap:6px}
.mc-toggle-btn{width:36px;height:36px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#9ca3af;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mc-toggle-btn.is-active{color:#111827;border-color:#d1d5db;background:#fff}
@media (min-width:768px){
  .shop-section{background:#f7f7f8!important;padding-top:36px!important;padding-bottom:60px!important}
  .shop-section > .container{max-width:1280px}
  .ms-browse-layout{--bs-gutter-x:1.25rem}
  .ms-browse-filter-col .filter-form > .sidebar_body{display:block!important;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.05);padding:16px}
  .ms-browse-filter-col .ms-filter-sheet__handle,.ms-browse-filter-col .ms-filter-sheet__scrim,.ms-browse-filter-col .ms-filter-sheet__title,.ms-browse-filter-col .ms-filter-sheet__apply,.ms-browse-filter-col .ms-filter-sheet__buttons{display:none!important}
  .ms-browse-layout.is-filter-collapsed .ms-browse-filter-col{display:none}
  .ms-browse-layout.is-filter-collapsed .ms-browse-main{width:100%;max-width:100%;flex:0 0 100%}
}
/* Desktop/tablet: hide the phone-only browse chrome (bottom nav) and the
   mobile design elements at base — the phone media below re-shows them, and
   the min-width:768px "design parity" block at the end of this sheet re-shows
   them on desktop too (store decision: one design language, per-device
   layout). The .ms-browse-mobile section itself stays visible so its promo
   bar renders on desktop; its sticky header bar is hidden there instead. */
body.ms-browse-page{background:#f7f7f8}
.ms-browse-mobile__heading,.ms-browse-mobile__badges,.ms-browse-mobile__categories--kinds,.ms-mobile-bottom-nav{display:none}
@media (min-width:768px){
  .ms-browse-filter-col .filter-form{display:block!important}
  .ms-browse-filter-col .filter-form > .sidebar_body{position:static;height:auto;max-height:none;overflow:visible}
  .ms-browse-filter-col .ms-filter-sheet__content{overflow:visible}
  .ms-browse-filter-col .sidebar-categories{max-height:none;overflow:visible}
  .ms-browse-filter-col .filter-form.is-open{position:static}
  .ms-browse-filter-col .filter-form.is-open > .sidebar_body{position:static;height:auto;max-height:none;overflow:visible;border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.05)}
  .ms-browse-filter-col .filter-form.is-open .ms-filter-sheet__scrim{display:none}
}
/* Tablet: same two-panel browse layout as desktop (wider sidebar + 2-up grid handled in browse-taste.css) */
@media (min-width:768px) and (max-width:991.98px){
  .ms-browse-layout .ms-browse-filter-col{order:2}
  .ms-browse-layout .ms-browse-main{order:1}
}
@media (max-width:767px){
    body{background:#f7f7f8;padding-bottom:calc(78px + env(safe-area-inset-bottom))}.breadcumb,.ms-breadcrumb,body>.footer-section,footer{display:none!important}
    /* The new reference chrome (.ms-browse-mobile) owns the top of Browse on
       phones: hide the theme's own fixed mobile header, its scroll spacer and
       the theme marquee promo bar (the custom promo bar replaces it). */
    .ms-hdr,.ms-hdr-scroll-pad,.ms-marquee-bar{display:none!important}
    /* Block layout beats the legacy flex row on __heading that squeezed the
       stat cards into 84px columns. */
    .ms-browse-mobile__heading{display:block!important}
    .shop-section{padding:0 0 8px!important;background:#f7f7f8!important}.shop-section>.container{max-width:none;padding:0 14px}.ms-browse-mobile{display:block;background:#fff;position:sticky;top:0;z-index:1000;border-bottom:1px solid #e9e9ec}.ms-browse-mobile__header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.ms-browse-mobile__brand img{display:block;max-height:30px;max-width:144px;width:auto}.ms-browse-mobile__header-actions{display:flex;gap:6px}.ms-icon-button{width:38px;height:38px;border:1px solid #e3e4e8;border-radius:50%;background:#fff;color:#202124;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.ms-browse-mobile__search{display:flex;align-items:center;gap:9px;background:#f2f3f5;border:1px solid #ebecef;border-radius:999px;margin:0 14px 12px;padding:0 6px 0 12px;height:46px;color:#74757a;box-shadow:0 1px 2px rgba(16,24,40,.04)}.ms-browse-mobile__search:focus-within{border-color:var(--ms-brand,#21cc87);background:#fff;box-shadow:0 0 0 3px rgba(var(--ms-brand-rgb),.15)}.ms-browse-mobile__search input{border:0!important;background:transparent!important;outline:0!important;box-shadow:none!important;min-width:0;flex:1;font-size:14px;color:#222}.ms-browse-mobile__search button{border:0;background:var(--ms-brand,#21cc87);border-radius:999px;color:#fff;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative}.ms-browse-mobile__search button:hover,.ms-browse-mobile__search button:focus-visible{filter:brightness(1.08)}.ms-browse-mobile__categories{position:relative;display:flex;gap:8px;overflow-x:auto;padding:0 14px 12px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:auto;will-change:scroll-position;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%)}.ms-browse-mobile__categories::-webkit-scrollbar{display:none}.ms-category-chip{flex:0 0 auto;border:1px solid #e1e2e6;border-radius:999px;background:#fff;padding:7px 12px;line-height:1;font-size:12px;font-weight:700;color:#4d4f55;white-space:nowrap}.ms-category-chip.is-active{border-color:var(--ms-brand,#21cc87);background:var(--ms-brand,#21cc87);color:#fff}.ms-browse-mobile__heading{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 2px 6px;margin-bottom:6px;min-height:0}.ms-browse-mobile__heading p{margin:0 0 2px;color:#797b83;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.ms-browse-mobile__heading h1{margin:0;font-size:18px;line-height:1.2;color:#1e1f23}.ms-browse-mobile__heading button{border:0;background:none;color:#303137;font-size:13px;font-weight:700;padding:4px}.shop-section .row.card_wraper{margin:0}.shop-section aside{padding:0}.filter-form{display:block}.filter-form>.sidebar_body{display:none}.main-content{padding:0}.mc-grid:not(.mc-list){display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0!important;padding:0!important;align-items:stretch!important;--bs-gutter-x:0!important;--bs-gutter-y:0!important}.mc-grid:not(.mc-list)>.mc-col{flex:0 0 calc(50% - 4px)!important;width:calc(50% - 4px)!important;min-width:0!important;padding:0!important}.mc-list{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:12px!important;overflow:visible!important;margin:0!important;padding:0!important}.mc-list>.mc-col{width:100%!important;flex:0 0 100%!important;padding:0!important}/* Soft UI card owns all product-card visuals — no legacy .mc-card compact overrides here */
.soft-card{min-height:0!important}.mc-grid:not(.mc-list) .soft-card__footer{flex-direction:column!important;align-items:stretch!important;gap:8px!important}.mc-grid:not(.mc-list) .soft-card__price-col,.mc-grid:not(.mc-list) .soft-card__cta,.mc-grid:not(.mc-list) .soft-card__btn{width:100%!important;max-width:100%!important;margin-left:0!important}.mc-grid:not(.mc-list) .soft-card__media{max-height:132px!important;margin-bottom:8px!important}.mc-grid:not(.mc-list) .soft-card__btn{min-width:0!important;min-height:36px!important;font-size:11px!important;padding:8px 10px!important}.mc-grid:not(.mc-list) .soft-card__price{font-size:16px!important}.mc-video-modal{z-index:1200}.ms-mobile-bottom-nav{position:fixed;display:flex;align-items:stretch;justify-content:space-around;min-height:64px;height:calc(64px + env(safe-area-inset-bottom));padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e3e4e7;z-index:1100}.ms-mobile-bottom-nav a,.ms-mobile-bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;color:#72747b;text-decoration:none;font-size:10px;line-height:1}.ms-mobile-bottom-nav i{font-size:16px}.ms-mobile-bottom-nav .is-active{color:var(--ms-brand,#21cc87)!important;font-weight:800}.ms-mobile-bottom-nav a:hover,.ms-mobile-bottom-nav a:focus-visible{color:var(--ms-brand,#21cc87)}.ms-mobile-cart-link{position:relative}.ms-mobile-cart-badge{position:absolute;top:8px;right:calc(50% - 22px);display:none;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:#d1d5db;color:#fff;font-size:9px;font-weight:800;line-height:1}.ms-mobile-cart-link.has-items{color:#111827!important;font-weight:800}.ms-mobile-cart-link.has-items .ms-mobile-cart-badge{background:var(--ms-brand,#21cc87);display:inline-flex}.filter-form.is-open{display:block;position:fixed;z-index:1150;inset:0}.filter-form.is-open>.sidebar_body{display:flex!important;flex-direction:column;position:absolute;left:0;right:0;bottom:0;z-index:1;height:min(88dvh,760px);max-height:calc(100dvh - 14px);overflow:hidden;background:var(--ms-sheet,#fff);border-radius:22px 22px 0 0;padding:10px 20px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -24px 60px rgba(10,12,16,.22)}.ms-filter-sheet__scrim{display:none}.filter-form.is-open .ms-filter-sheet__scrim{display:block;position:absolute;inset:0;background:rgba(16,18,22,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.ms-filter-sheet__handle{width:36px;height:4px;background:#d9dadf;border-radius:99px;margin:2px auto 14px;flex:0 0 auto}.ms-filter-sheet__title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex:0 0 auto}.ms-filter-sheet__title h2{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--ms-ink,#16161c);font-family:var(--ms-font,'Outfit',system-ui,sans-serif)}.ms-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;border-radius:99px;background:rgba(var(--ms-brand-rgb),.12);color:var(--ms-brand,#21cc87);font-size:11.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.ms-icon-button{border-color:transparent;background:#f4f4f6;color:#3c3d43;width:36px;height:36px}.ms-filter-sheet__content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 1px 4px;scrollbar-width:thin}.ms-filter-sheet__apply{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;background:var(--ms-brand,#21cc87);color:#0b1310;height:50px;font-family:var(--ms-font,'Outfit',system-ui,sans-serif);font-size:15px;font-weight:800;margin-top:0;flex-basis:auto;box-shadow:0 10px 24px -10px rgba(var(--ms-brand-rgb),.55);transition:filter .18s ease,transform .12s ease}.ms-filter-sheet__apply:hover{filter:brightness(1.05)}.ms-filter-sheet__apply:active{transform:scale(.985)}.ms-filter-count--cta{background:rgba(255,255,255,.22);color:#fff}.ms-filter-dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.12);pointer-events:none}.ms-filter-sheet__buttons{margin:0!important}.ms-filter-sheet__actions{display:flex;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(22,22,28,.07);flex:0 0 auto}.ms-filter-sheet__actions .ms-filter-sheet__reset{flex:0 0 auto;height:50px;padding:0 16px;border-radius:14px;border:1px solid transparent;background:#f4f4f6;color:#5a5b63;display:inline-flex;align-items:center;gap:7px;font-family:var(--ms-font,'Outfit',system-ui,sans-serif);font-size:13.5px;font-weight:700;text-decoration:none;transition:color .18s ease,background .18s ease}.ms-filter-sheet__actions .ms-filter-sheet__reset:hover{color:#e5484d;background:#fdf1f1}.filter-form.is-open .sidebar-wraper{margin-bottom:6px!important}.filter-form.is-open .script-item>p,.filter-form.is-open .range-slider-box>p{font-size:14px;font-weight:800;color:#27282d}body.ms-browse-page .shop-section .filter-form.is-open .sidebar_body .form-check{padding:10px 10px}body.ms-browse-page .shop-section .filter-form.is-open .sidebar_body .sidebar-categories{max-height:none;overflow:visible}.filter-form.is-open .ms-filter-group{border-bottom:1px solid rgba(22,22,28,.06)}.filter-form.is-open .ms-filter-group__head{padding:13px 2px}.filter-form.is-open .ms-filter-group__body{padding-bottom:14px}.ms-price-range-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.ms-price-range-heading p{margin:0!important;padding:0!important}.ms-price-range-values{white-space:nowrap;color:var(--ms-brand,#21cc87);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}.filter-form.is-open #p_range{margin:10px 4px 4px}.shop-section .mt-4{margin-top:10px!important}.shop-section .pagination{transform:scale(.9);transform-origin:center}.shop-section .mc-empty{margin:20px 0!important;min-width:100%;padding:20px;background:#fff;border:1px solid #e5e5e7;border-radius:8px}.mc-video-modal__dialog{border-radius:10px!important}.mc-video-modal{padding:14px!important}
}
/* ===== Mobile reference header: logo (no pill box) + actions ===== */
.ms-browse-mobile__brand{
  display:inline-flex;align-items:center;
  height:38px;padding:0;border-radius:0;
  background:transparent;transition:opacity .18s ease;
}
.ms-browse-mobile__brand:active{opacity:.7}
.ms-browse-mobile__brand img{display:block;height:18px;width:auto;max-width:120px;object-fit:contain}
.ms-browse-mobile__header-actions{display:flex;align-items:center;gap:7px}
.ms-browse-mobile__header .ms-icon-button{
  width:36px;height:36px;border:0;border-radius:999px;background:#f4f4f6;
  color:#23252b;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:background .18s ease,color .18s ease;
}
.ms-browse-mobile__header .ms-icon-button:hover,.ms-browse-mobile__header .ms-icon-button:focus-visible{background:#ececf0;color:#101114}
.ms-cart-button{
  position:relative;width:36px;height:36px;border:0;border-radius:999px;
  background:#f4f4f6;color:#23252b;font-size:13.5px;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.ms-cart-button:hover,.ms-cart-button:focus-visible{background:#ececf0;color:#101114}
.ms-cart-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:#ff5e5e;color:#fff;font-size:9.5px;font-weight:800;line-height:1;
  display:none;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;border:2px solid #fff;
}

/* ===== Currency switcher (mobile) ===== */
.ms-currency{position:relative}
.ms-currency__btn{
  display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 10px;
  border:0;border-radius:999px;background:#f4f4f6;color:#23252b;
  font-family:var(--ms-font,'Outfit',system-ui,sans-serif);font-size:11.5px;font-weight:800;
  letter-spacing:.02em;cursor:pointer;transition:background .18s ease;
}
.ms-currency__btn:hover,.ms-currency__btn:focus-visible{background:#ececf0}
.ms-currency__btn img{width:16px;height:auto;border-radius:2px;display:block}
.ms-currency__btn i{font-size:8px;opacity:.6}
.ms-currency__dd{
  position:absolute;top:calc(100% + 10px);right:0;min-width:150px;
  background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;
  box-shadow:0 18px 44px -12px rgba(15,23,42,.28);
  padding:6px;display:none;flex-direction:column;gap:1px;z-index:30;
}
.ms-currency__dd.is-open{display:flex}
.ms-currency__dd a{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  color:#23252b;font-size:12.5px;font-weight:700;text-decoration:none;
  transition:background .15s ease;
}
.ms-currency__dd a img{width:16px;height:auto;border-radius:2px}
.ms-currency__dd a span{flex:1}
.ms-currency__dd a i{color:var(--ms-brand,#21cc87);font-size:11px}
.ms-currency__dd a:hover{background:#f4f5f7}
.ms-currency__dd a.is-active{background:rgba(var(--ms-brand-rgb,33,204,135),.1);color:var(--ms-brand,#21cc87)}

/* ===== Promo bar (MICHIGO20) ===== */
.ms-promo-bar{
  display:flex;align-items:center;gap:10px;
  margin:0 14px 10px;padding:10px 10px 10px 12px;border-radius:12px;
  background:rgba(var(--ms-brand-rgb,33,204,135),.1);
  border:1px solid rgba(var(--ms-brand-rgb,33,204,135),.22);
}
.ms-promo-bar__gift{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  background:var(--ms-brand,#21cc87);color:#fff;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
}
.ms-promo-bar__text{
  flex:1;min-width:0;margin:0;
  font-family:var(--ms-font,'Outfit',system-ui,sans-serif);
  font-size:13px;font-weight:700;color:#2c4a3c;line-height:1.35;
}
.ms-promo-bar__text strong{
  color:var(--ms-brand,#21cc87);font-weight:800;letter-spacing:.03em;
  padding:1px 6px;border-radius:6px;background:rgba(var(--ms-brand-rgb,33,204,135),.14);
}
.ms-promo-bar__close{
  flex:0 0 auto;width:40px;height:40px;margin:-8px;border:0;border-radius:999px;
  background:transparent;color:#5f7a6c;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.ms-promo-bar__close:hover{background:rgba(15,23,42,.07);color:#20302a}

/* ===== Hero mobile: one premium minimalist card — eyebrow, title, sub and
   the 3 stats merged inside it. Scoped under __heading to outrank the legacy
   `.ms-browse-mobile__heading p` chrome; spacing uses padding because
   browse-taste.css forces margins to 0 with !important inside the heading. */
.ms-browse-mobile__heading{
  margin:0!important;padding:16px!important;border-radius:20px;
  background:#fff;border:1px solid #ececef;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.ms-browse-mobile__heading .ms-browse-mobile__eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0;padding:0 0 12px;
  color:#767882;font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
}
.ms-browse-mobile__eyebrow-bolt{
  width:22px;height:22px;border-radius:999px;
  background:rgba(var(--ms-brand-rgb,33,204,135),.12);color:var(--ms-brand,#21cc87);
  font-size:10px;display:inline-flex;align-items:center;justify-content:center;
}
.ms-browse-mobile__heading h1{
  margin:0;padding:0 0 8px;font-family:var(--ms-font,'Outfit',system-ui,sans-serif);
  font-size:clamp(26px,7.5vw,34px);font-weight:800;
  letter-spacing:-.035em;line-height:1.08;color:#141519;text-wrap:balance;
}
.ms-browse-mobile__heading .ms-browse-mobile__sub{
  margin:0;padding:0 0 14px;color:#75767e;font-size:13px;font-weight:500;
  line-height:1.55;max-width:52ch;text-transform:none;letter-spacing:0;
}
/* Hero search — merged into the hero card; typing here feeds the same live
   filter pipeline as the header search (#msHeroSearch). */
.ms-hero-search{
  display:flex;align-items:center;gap:9px;margin:0 0 16px;
  padding:0 6px 0 14px;height:50px;border-radius:999px;
  background:#f4f5f7;border:1px solid #ebecef;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.03);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ms-hero-search:focus-within{
  border-color:var(--ms-brand,#21cc87);background:#fff;
  box-shadow:0 0 0 3px rgba(var(--ms-brand-rgb,33,204,135),.15);
}
.ms-hero-search > svg{width:17px;height:17px;color:#85868d;flex:0 0 auto}
.ms-hero-search input{
  border:0!important;background:transparent!important;outline:0!important;box-shadow:none!important;
  min-width:0;flex:1;height:100%;font-size:14px;color:#202124;font-family:inherit;
}
@media (max-width:767.98px){
  /* iOS Safari auto-zooms any focused input below 16px — 16px keeps the
     page steady when the shopper taps search. */
  .ms-hero-search input{font-size:16px!important}
  .ms-browse-mobile__search input{font-size:16px!important}
}
.ms-hero-search input::placeholder{color:#9a9ba2}
.ms-hero-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.ms-hero-search button{
  border:0;background:var(--ms-brand,#21cc87);color:#fff;
  width:38px;height:38px;border-radius:999px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .15s ease,filter .15s ease,box-shadow .18s ease;
  box-shadow:0 4px 12px -4px rgba(var(--ms-brand-rgb,33,204,135),.55);
}
.ms-hero-search button svg{width:17px;height:17px}
.ms-hero-search button:hover{filter:brightness(1.06)}
.ms-hero-search button:active{transform:scale(.92)}
/* ===== Live-search loading feedback =====
   While the AJAX filter request is in flight: a spinner swaps in inside the
   search field, and the grid dims under a small floating "Searching" chip —
   users always see that the search is running. */
@keyframes msSearchSpin{to{transform:rotate(360deg)}}
.ms-search-spinner{
  display:none;width:16px;height:16px;flex:0 0 auto;
  border:2px solid rgba(var(--ms-brand-rgb,33,204,135),.25);
  border-top-color:var(--ms-brand,#21cc87);border-radius:999px;
  animation:msSearchSpin .7s linear infinite;
}
.ms-hero-search.is-searching .ms-search-spinner{display:inline-block}
.ms-hero-search.is-searching > svg:first-child{display:none}
.aside-search-box{position:relative}
.aside-search-box .ms-search-spinner{
  position:absolute;right:14px;top:50%;margin-top:-8px;width:15px;height:15px;
}
.aside-search-box.is-searching .ms-search-spinner{display:inline-block}
#productGridContainer{position:relative}
#productGridContainer > .mc-grid{transition:opacity .18s ease}
#productGridContainer.is-busy > .mc-grid{opacity:.4;filter:saturate(.55);pointer-events:none}
#productGridContainer .ms-grid-loader{
  position:absolute;left:50%;top:88px;transform:translateX(-50%);z-index:5;
  display:none;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid #ebecef;box-shadow:0 12px 30px -14px rgba(16,24,40,.35);
  font-size:12.5px;font-weight:600;color:#3f4149;white-space:nowrap;
}
#productGridContainer.is-busy .ms-grid-loader{display:inline-flex}
#productGridContainer .ms-grid-loader .ms-search-spinner{display:inline-block;width:14px;height:14px}
html.dark #productGridContainer .ms-grid-loader{background:#23242b;border-color:#3a3b44;color:#c9cad2}
/* Animated caret after the sub line: a green blinking bar that echoes the
   typing animation on the headline. */
.ms-browse-mobile__heading .ms-browse-mobile__sub::after{
  content:"";display:inline-block;width:2px;height:1em;margin-left:3px;
  background:var(--ms-brand,#21cc87);vertical-align:text-bottom;border-radius:1px;
  animation:msCaretBlink 1.05s steps(1) infinite;
}
@keyframes msCaretBlink{50%{opacity:0}}
.ms-h1-caret{
  display:inline-block;width:3px;height:.85em;margin-left:4px;
  background:var(--ms-brand,#21cc87);border-radius:2px;vertical-align:baseline;
  animation:msCaretBlink .9s steps(1) infinite;
}
.ms-h1-caret.is-done{animation:msCaretFade .6s ease forwards}
@keyframes msCaretFade{to{opacity:0;width:0;margin-left:0}}
/* Stats row sits inside the hero card, separated by one hairline and a
   soft tinted band — one merged block, no three separate boxes. */
.ms-browse-mobile__stats{
  display:flex;flex-direction:row;gap:0;margin:0;
  padding:14px 0 2px;border-top:1px solid #f0f1f4;
}
.ms-browse-mobile__stats .ms-mstat{
  flex:1 1 0;min-width:0;flex-direction:column;align-items:center;text-align:center;gap:5px;
  padding:2px 4px;background:transparent;border:0;box-shadow:none;border-radius:0;
  animation:msMStatRise .55s cubic-bezier(.22,1,.36,1) both;
}
.ms-browse-mobile__stats .ms-mstat:nth-child(1){animation-delay:.08s}
.ms-browse-mobile__stats .ms-mstat:nth-child(2){animation-delay:.16s}
.ms-browse-mobile__stats .ms-mstat:nth-child(3){animation-delay:.24s}
.ms-browse-mobile__stats .ms-mstat + .ms-mstat{border-left:1px solid #f0f1f4}
.ms-browse-mobile__stats .ms-mstat__icon{
  display:inline-flex;width:30px;height:30px;border-radius:999px;
  background:rgba(var(--ms-brand-rgb,33,204,135),.11);color:var(--ms-brand,#21cc87);
  align-items:center;justify-content:center;flex:0 0 auto;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.ms-browse-mobile__stats .ms-mstat__icon svg{width:15px;height:15px}
.ms-browse-mobile__stats .ms-mstat:active .ms-mstat__icon{transform:scale(.88)}
.ms-browse-mobile__stats .ms-mstat__copy{align-items:center;gap:2px}
.ms-browse-mobile__stats .ms-mstat__copy strong{
  font-size:17px;background:linear-gradient(180deg,#1c1e24,#3d4450);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@keyframes msMStatRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ms-browse-mobile__stats .ms-mstat{animation:none}
}
.ms-mstat{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:#fff;border:1px solid #ececef;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.ms-mstat__icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
}
.ms-mstat__icon--brand{background:rgba(var(--ms-brand-rgb,33,204,135),.12);color:var(--ms-brand,#21cc87)}
.ms-mstat__icon--shield{background:rgba(124,58,237,.1);color:#7c3aed}
.ms-mstat__icon--bolt{background:rgba(245,158,11,.14);color:#d97706}
.ms-mstat__copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.ms-mstat__copy strong{
  font-family:var(--ms-font,'Outfit',system-ui,sans-serif);
  font-size:14px;font-weight:800;letter-spacing:-.01em;color:#141519;line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.ms-mstat__copy small{font-size:11px;font-weight:600;color:#8a8b93;line-height:1.3}

/* Manual scroll strips — finger owns the gesture; no JS rewrites scrollLeft. */
.ms-browse-mobile__categories,
.ms-browse-mobile__badges{
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
  will-change:auto;
}

/* ===== Mobile badge chips (All / New Arrival / Top Sale / ...) ===== */
.ms-browse-mobile__badges{
  display:flex;gap:8px;overflow-x:auto;padding:6px 14px 2px;margin:0 -14px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
@media (min-width:768px){.ms-browse-mobile__badges{display:none!important}}
.ms-browse-mobile__categories .ms-category-chip i{font-size:10.5px;margin-right:5px;opacity:.75}
.ms-browse-mobile__categories .ms-category-chip.is-active i{opacity:1}
.ms-browse-mobile__badges::-webkit-scrollbar{display:none}
.ms-mbadge{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 13px;border-radius:999px;
  border:1px solid #e3e4e9;background:#fff;color:#4b4d54;
  font-family:var(--ms-font,'Outfit',system-ui,sans-serif);
  font-size:12px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.ms-mbadge i{font-size:11px}
.ms-mbadge:hover,.ms-mbadge:focus-visible{border-color:#cfd1d8;color:#25262c;text-decoration:none}
.ms-mbadge.is-active{
  background:var(--ms-brand,#21cc87);border-color:var(--ms-brand,#21cc87);color:#fff;
  box-shadow:0 6px 16px -6px rgba(var(--ms-brand-rgb,33,204,135),.5);
}
.ms-mbadge.is-active i{color:#fff!important}

/* ===== Mobile Filters pill in toolbar ===== */
.ms-mfilters{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;
  border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#374151;
  font-family:var(--ms-font,'Outfit',system-ui,sans-serif);font-size:12.5px;font-weight:700;
  cursor:pointer;transition:border-color .18s ease,color .18s ease;
}
.ms-mfilters:hover,.ms-mfilters:focus-visible{border-color:rgba(var(--ms-brand-rgb,33,204,135),.4);color:var(--ms-brand,#21cc87)}
.ms-mfilters:active{transform:scale(.98)}
.ms-filter-count--bar{
  min-width:17px;height:17px;font-size:10px;
  background:var(--ms-brand,#21cc87);color:#fff;
}

/* Dark mode — mobile chrome */
html.dark .ms-browse-mobile__brand,html.dark .ms-browse-mobile__header .ms-icon-button,
html.dark .ms-cart-button,html.dark .ms-currency__btn,
body.dark .ms-browse-mobile__brand,body.dark .ms-browse-mobile__header .ms-icon-button,
body.dark .ms-cart-button,body.dark .ms-currency__btn{background:#232936;color:#c6cad4}
html.dark .ms-browse-mobile__brand:hover,html.dark .ms-browse-mobile__brand:focus-visible,
html.dark .ms-browse-mobile__header .ms-icon-button:hover,html.dark .ms-browse-mobile__header .ms-icon-button:focus-visible,
html.dark .ms-cart-button:hover,html.dark .ms-cart-button:focus-visible,
html.dark .ms-currency__btn:hover,html.dark .ms-currency__btn:focus-visible,
body.dark .ms-browse-mobile__brand:hover,body.dark .ms-browse-mobile__brand:focus-visible,
body.dark .ms-browse-mobile__header .ms-icon-button:hover,body.dark .ms-browse-mobile__header .ms-icon-button:focus-visible,
body.dark .ms-cart-button:hover,body.dark .ms-cart-button:focus-visible,
body.dark .ms-currency__btn:hover,body.dark .ms-currency__btn:focus-visible{background:#2c3241;color:#eef0f5}
html.dark .ms-cart-badge,body.dark .ms-cart-badge{border-color:#0f1419}
html.dark .ms-currency__dd,body.dark .ms-currency__dd{background:#161b26;border-color:rgba(255,255,255,.1);box-shadow:0 18px 44px -12px rgba(0,0,0,.6)}
html.dark .ms-currency__dd a,body.dark .ms-currency__dd a{color:#e2e6ee}
html.dark .ms-currency__dd a:hover,body.dark .ms-currency__dd a:hover{background:#232936}
html.dark .ms-promo-bar,body.dark .ms-promo-bar{background:rgba(var(--ms-brand-rgb,33,204,135),.12);border-color:rgba(var(--ms-brand-rgb,33,204,135),.3)}
html.dark .ms-promo-bar__text,body.dark .ms-promo-bar__text{color:#a9dfc5}
html.dark .ms-promo-bar__text strong,body.dark .ms-promo-bar__text strong{color:#5df0ab;background:rgba(var(--ms-brand-rgb,33,204,135),.18)}
html.dark .ms-promo-bar__close,body.dark .ms-promo-bar__close{color:#7c9c8c}
html.dark .ms-promo-bar__close:hover,body.dark .ms-promo-bar__close:hover{background:rgba(255,255,255,.08);color:#cfe9dc}
html.dark .ms-browse-mobile__eyebrow,body.dark .ms-browse-mobile__eyebrow{color:#9aa2b1}
html.dark .ms-browse-mobile__heading h1,body.dark .ms-browse-mobile__heading h1{color:#eef0f5}
html.dark .ms-browse-mobile__sub,body.dark .ms-browse-mobile__sub{color:#9aa2b1}
html.dark .ms-mstat,body.dark .ms-mstat{background:#151c2c;border-color:rgba(255,255,255,.07);box-shadow:none}
html.dark .ms-mstat__copy strong,body.dark .ms-mstat__copy strong{color:#eef0f5}
html.dark .ms-mstat__copy small,body.dark .ms-mstat__copy small{color:#8b93a5}
html.dark .ms-browse-mobile__heading,body.dark .ms-browse-mobile__heading{background:#151c2c;border-color:rgba(255,255,255,.07);box-shadow:none}
html.dark .ms-browse-mobile__stats,body.dark .ms-browse-mobile__stats{border-top-color:rgba(255,255,255,.08)}
html.dark .ms-browse-mobile__stats .ms-mstat + .ms-mstat,body.dark .ms-browse-mobile__stats .ms-mstat + .ms-mstat{border-left-color:rgba(255,255,255,.08)}
html.dark .ms-browse-mobile__stats .ms-mstat__copy strong,body.dark .ms-browse-mobile__stats .ms-mstat__copy strong{background:linear-gradient(180deg,#f2f5fa,#c3cbdb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.dark .ms-mbadge,body.dark .ms-mbadge{background:#151c2c;border-color:rgba(255,255,255,.1);color:#c2c8d4}
html.dark .ms-mbadge:hover,html.dark .ms-mbadge:focus-visible,body.dark .ms-mbadge:hover,body.dark .ms-mbadge:focus-visible{border-color:rgba(255,255,255,.22);color:#eef0f5}
html.dark .ms-mbadge.is-active,body.dark .ms-mbadge.is-active{background:var(--ms-brand,#21cc87);border-color:var(--ms-brand,#21cc87);color:#0b1310}
html.dark .ms-mfilters,body.dark .ms-mfilters{background:#151c2c;border-color:rgba(255,255,255,.1);color:#c2c8d4}
html.dark .ms-mfilters:hover,html.dark .ms-mfilters:focus-visible,body.dark .ms-mfilters:hover,body.dark .ms-mfilters:focus-visible{border-color:rgba(var(--ms-brand-rgb,33,204,135),.45);color:var(--ms-brand,#21cc87)}

/* Dark mode — mobile filter sheet */
html.dark .filter-form.is-open>.sidebar_body,body.dark .filter-form.is-open>.sidebar_body{background:#161b26;box-shadow:0 -24px 60px rgba(0,0,0,.5)}
html.dark .filter-form.is-open .ms-filter-sheet__scrim,body.dark .filter-form.is-open .ms-filter-sheet__scrim{background:rgba(2,4,8,.62)}
html.dark .filter-form.is-open .ms-filter-sheet__title h2,body.dark .filter-form.is-open .ms-filter-sheet__title h2{color:#f2f4f8}
html.dark .filter-form.is-open .ms-filter-sheet__handle,body.dark .filter-form.is-open .ms-filter-sheet__handle{background:#2c3241}
html.dark .filter-form.is-open .ms-icon-button,body.dark .filter-form.is-open .ms-icon-button{background:#232936;color:#c6cad4}
html.dark .filter-form.is-open .form--control,body.dark .filter-form.is-open .form--control{background:#1d2330;border-color:#2c3241!important;color:#e8eaf0}
html.dark .filter-form.is-open .form--control::placeholder,body.dark .filter-form.is-open .form--control::placeholder{color:#69707f;opacity:1}
html.dark .filter-form.is-open .form--control:focus,body.dark .filter-form.is-open .form--control:focus{background:#1a2030;border-color:rgba(var(--ms-brand-rgb),.55)!important}
html.dark .filter-form.is-open .form-check:hover,body.dark .filter-form.is-open .form-check:hover{background:rgba(255,255,255,.05)}
html.dark .filter-form.is-open .form-check-label,body.dark .filter-form.is-open .form-check-label{color:#d4d8e1}
html.dark .filter-form.is-open .ms-facet-count,body.dark .filter-form.is-open .ms-facet-count{color:#69707f}
html.dark .filter-form.is-open .ms-filter-group,body.dark .filter-form.is-open .ms-filter-group{border-bottom-color:rgba(255,255,255,.07)}
html.dark .filter-form.is-open .ms-filter-group__title,body.dark .filter-form.is-open .ms-filter-group__title{color:#eef0f5}
html.dark .filter-form.is-open .ms-filter-group__caret,body.dark .filter-form.is-open .ms-filter-group__caret{color:#69707f}
html.dark .filter-form.is-open .script-item>p,body.dark .filter-form.is-open .script-item>p,html.dark .filter-form.is-open .range-slider-box>p,body.dark .filter-form.is-open .range-slider-box>p{color:#eef0f5}
html.dark .filter-form.is-open .ms-price-range-values,body.dark .filter-form.is-open .ms-price-range-values{color:var(--ms-brand,#21cc87)}
html.dark .filter-form.is-open .ms-filter-sheet__actions,body.dark .filter-form.is-open .ms-filter-sheet__actions{border-top-color:rgba(255,255,255,.08)}
html.dark .filter-form.is-open .ms-filter-sheet__actions .ms-filter-sheet__reset,body.dark .filter-form.is-open .ms-filter-sheet__actions .ms-filter-sheet__reset{background:#232936;color:#a9aeb9}
html.dark .filter-form.is-open .ms-filter-sheet__actions .ms-filter-sheet__reset:hover,body.dark .filter-form.is-open .ms-filter-sheet__actions .ms-filter-sheet__reset:hover{background:#2c1720;color:#ff7a80}
html.dark .filter-form.is-open .range-slider .ui-slider,body.dark .filter-form.is-open .range-slider .ui-slider{background:#2c3241}
html.dark .filter-form.is-open .range-slider .ui-slider .ui-slider-handle,body.dark .filter-form.is-open .range-slider .ui-slider .ui-slider-handle{background:#161b26;border-color:var(--ms-brand,#21cc87)}
body.ms-browse-page .scroll-top,.scroll-top{right:14px!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;z-index:1050!important;width:42px!important;height:42px!important}
@media (max-width:767.98px){
  .ms-browse-toolbar{flex-wrap:wrap;row-gap:8px}
  .ms-browse-toolbar__count{flex:1 1 100%}
  .ms-count-text{overflow:visible;text-overflow:clip}
  /* The controls row must span the full main column so the grid/list toggle
     lines up with the product cards' right edge instead of stopping short. */
  .ms-browse-toolbar__actions{flex:1 1 auto;justify-content:space-between}
  .ms-browse-toolbar__actions .mc-view-toggle{margin-left:auto}
}
/* ===== Design parity (store decision 2026-10-14) =====
   The mobile reference design is the store's single design language. Desktop
   keeps its desktop LAYOUT (theme header, footer, breadcrumb, static filter
   sidebar, multi-column grid, desktop Filters button) but renders the SAME
   design elements as the phone: promo bar, hero card, badge pills and icon
   kind-chips. Only true phone chrome (sticky header bar, bottom nav, sheet
   trigger) stays mobile-only. Placed last so it wins over the base hides. */
@media (min-width:768px){
  .ms-browse-mobile{display:block;background:transparent;border-bottom:0}
  .ms-browse-mobile__header{display:none}
  .ms-promo-bar{max-width:1256px;width:calc(100% - 24px);margin:14px auto 0;padding:13px 16px;gap:12px;border-radius:14px}
  .ms-promo-bar__gift{width:32px;height:32px;border-radius:10px;font-size:14px}
  .ms-promo-bar__text{font-size:16px}
  .ms-promo-bar__close{width:38px;height:38px}
  .ms-browse-mobile__heading{display:block!important;margin:14px 0 0!important}
  .ms-browse-mobile__badges{display:flex!important;flex-wrap:wrap;overflow:visible;margin:12px 0 0;padding:0}
  .ms-browse-mobile__categories--kinds{display:flex!important;flex-wrap:wrap;gap:8px;overflow:visible;margin:10px 0 0;padding:0;-webkit-mask-image:none;mask-image:none}
  /* The kinds chips only carried styles inside the phone media, so on desktop
     they rendered as bare underlined links. Give them the reference chip
     design here (green active state, same as mobile). */
  .ms-browse-mobile__categories--kinds .ms-category-chip{flex:0 0 auto;display:inline-flex;align-items:center;border:1px solid #e1e2e6;border-radius:999px;background:#fff;padding:8px 14px;line-height:1;font-size:13px;font-weight:600;color:#4a4a55;white-space:nowrap;text-decoration:none;transition:border-color .18s ease,color .18s ease,background .18s ease}
  .ms-browse-mobile__categories--kinds .ms-category-chip:hover{border-color:#cfd1d7;color:#25262b;text-decoration:none}
  .ms-browse-mobile__categories--kinds .ms-category-chip.is-active{border-color:var(--ms-brand,#21cc87);background:var(--ms-brand,#21cc87);color:#fff}
  body.ms-browse-page .scroll-top,.scroll-top{bottom:24px!important}
}
@media (prefers-reduced-motion:reduce){.ms-browse-mobile{position:static}.marketplace-grid{scroll-behavior:auto}}
/* ===== Hero entrance choreography (2026-10-14) =====
   One coordinated load sequence: promo bar slides down, the hero card rises,
   eyebrow/H1/sub/search follow in beats, stats rise last (their count-up runs
   on top), then badges and kind-chips cascade with a per-item delay (--mk-i
   is set by JS). When typing finishes the H1 gets one green shimmer sweep.
   Pure opacity/transform — zero layout shift — and everything is skipped for
   visitors who prefer reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes mkRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes mkPromoIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  @keyframes mkBoltPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
  @keyframes mkH1Shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .ms-promo-bar{animation:mkPromoIn .5s ease both}
  .ms-browse-mobile__heading{animation:mkRise .55s cubic-bezier(.22,1,.36,1) both}
  .ms-browse-mobile__heading .ms-browse-mobile__eyebrow{animation:mkRise .45s ease .12s both}
  .ms-browse-mobile__eyebrow-bolt{animation:mkBoltPulse 2.4s ease-in-out 1.2s infinite}
  .ms-browse-mobile__heading h1{animation:mkRise .45s ease .18s both}
  .ms-browse-mobile__heading .ms-browse-mobile__sub{animation:mkRise .45s ease .3s both}
  .ms-hero-search{animation:mkRise .5s cubic-bezier(.22,1,.36,1) .42s both}
  .ms-browse-mobile__stats .ms-mstat{animation-delay:.6s}
  .ms-browse-mobile__stats .ms-mstat:nth-child(2){animation-delay:.7s}
  .ms-browse-mobile__stats .ms-mstat:nth-child(3){animation-delay:.8s}
  .ms-browse-mobile__badges .ms-mbadge,.ms-browse-mobile__categories--kinds .ms-category-chip{animation:mkRise .4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.72s + var(--mk-i,0)*.04s)}
  .ms-browse-mobile__heading h1.mk-h1-done{background:linear-gradient(90deg,#141519 38%,var(--ms-brand,#21cc87) 50%,#141519 62%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:mkH1Shimmer 1.5s ease .1s forwards}
}
html.dark .ms-browse-mobile__heading h1.mk-h1-done,body.dark .ms-browse-mobile__heading h1.mk-h1-done{background:linear-gradient(90deg,#eef0f5 38%,#5df0ab 50%,#eef0f5 62%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ===== Numbered pager (ms_pager partial) — numbers visible on every screen
   size. Laravel's default responsive pager hides 2 3 4 below 576px. ===== */
.ms-pager{display:flex;justify-content:center;width:100%}
.ms-pager__list{margin:0;padding:0;list-style:none}
.ms-pager__gap .page-link{border-color:transparent!important;background:transparent!important;color:hsl(var(--black)/.45)!important}
@media (max-width:575px){
  .ms-pager .pagination .page-item .page-link{width:34px;height:34px;margin:0 2px;font-size:13px;border-radius:999px}
}

/* ===== Filter sheet steadiness: stop iOS auto-zoom & background drift ===== */
@media (max-width:767px){
  .filter-form.is-open{touch-action:manipulation}
  .filter-form.is-open input[type="search"],
  .filter-form.is-open input.form--control,
  .filter-form.is-open .form-check-input{font-size:16px}
  .filter-form.is-open .ms-filter-sheet__panel{overscroll-behavior:contain}
}
/* (stronger) iOS refuses to zoom when the focused input is >=16px */
@media (max-width:767px){
  .filter-form.is-open input[type="search"],
  .filter-form.is-open input.form--control,
  .filter-form.is-open input[type="text"]{font-size:16px!important}
}
/* Close (X) button inside the mobile filter sheet — browse-taste.css hides
   .ms-browse-filter-col .ms-icon-button wholesale, which also killed the
   sheet's own close button. */
.filter-form.is-open .ms-filter-sheet__title .ms-icon-button{display:inline-flex}