/* Rare Origin — mobile app layer.
   Loaded after style.css. Everything below 900px wide turns the store into an app-like
   experience (bottom tab bar, sticky buy bars, bottom sheets). Desktop is unchanged. */

html,body{overflow-x:clip;max-width:100%}
.m-tabbar,.m-buybar,.m-back,.m-acct-back{display:none}
.text-link{white-space:nowrap}
.nf-num{margin-bottom:.16em}
@media (min-width:901px){body:has(.wa-float) .site-footer{padding-bottom:88px}}
/* keep the side gutter on containers whose padding shorthand removed it */
.wrap.pdp,.wrap.article-grid,.wrap.article-head,.wrap.page-body,.wrap.thanks,.wrap.trust-row{padding-left:var(--gut);padding-right:var(--gut)}

@media (max-width:900px){
  :root{--tab-h:62px;--safe-b:env(safe-area-inset-bottom,0px)}
  html{-webkit-tap-highlight-color:transparent}
  body{overscroll-behavior-y:none;padding-bottom:calc(var(--tab-h) + var(--safe-b))}
  body:has(.m-buybar){padding-bottom:calc(76px + var(--safe-b))}
  a,button,label,summary,select{touch-action:manipulation}
  img{max-width:100%}

  /* --- form controls: no iOS zoom, finger-sized --- */
  input:not([type=checkbox]):not([type=radio]),textarea,.field select,.form-panel select,#co-form select{font-size:16px!important}
  .btn{min-height:48px}
  .field input,.field select{min-height:50px}

  /* --- app header --- */
  .announce-row{min-height:28px;font-size:9.5px;letter-spacing:.14em}
  .site-header{padding-top:env(safe-area-inset-top,0px)}
  .header-row{min-height:56px}
  .header-left{gap:2px}
  .is-inner .m-back{display:flex}
  .header-right a[href*="search"],.header-right a[href$="/login"],.header-right a[href$="/account"],.header-left a[href*="search"]{display:none!important}
  .icon-btn{min-width:42px;min-height:42px}
  .logo img{width:52px}
  .main-nav{background:var(--ivory)}
  .nav-row>li>a{padding:11px 0 10px}
  .bag-count{transform:scale(.92)}

  /* --- bottom tab bar --- */
  .m-tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:90;
    height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(251,248,242,.97);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);box-shadow:0 -6px 24px -18px rgba(31,28,23,.35)}
  .m-tabbar a,.m-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--stone);background:none;border:0;padding:0;
    font:500 10px var(--sans);letter-spacing:.06em;position:relative}
  .m-tabbar a.on{color:var(--ink)}
  .m-tabbar a.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--gold)}
  .m-tabbar a.on .ic{stroke-width:1.8}
  .m-tabbar a:active,.m-tabbar button:active{transform:scale(.94)}
  body:has(.m-buybar) .m-tabbar{display:none}

  /* --- sticky buy / checkout bar --- */
  .m-buybar{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:91;
    padding:10px var(--gut) calc(10px + var(--safe-b));background:rgba(251,248,242,.98);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -8px 24px -18px rgba(31,28,23,.4)}
  .m-buybar .mb-price{display:flex;flex-direction:column;line-height:1.1;margin-right:auto;min-width:0}
  .m-buybar .mb-price small{font:500 9px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
  .m-buybar .mb-price b{font:400 24px var(--serif);color:var(--ink);white-space:nowrap}
  .m-buybar .btn{min-height:48px;padding:0 16px;font-size:11px;letter-spacing:.12em;white-space:nowrap;flex:none}
  .m-buybar .btn-outline{background:var(--ivory)}
  .m-buybar .btn .ic{margin-left:6px}
  .m-buybar .btn[disabled]{opacity:.45}

  /* --- floating extras sit above the bars --- */
  .wa-float{display:none!important}
  .drawer-wa{display:flex!important;align-items:center;gap:8px;margin-top:14px;font:500 12px var(--sans);letter-spacing:.08em;color:var(--olive)}
  .toast{bottom:calc(var(--tab-h) + var(--safe-b) + 16px)!important}
  body:has(.m-buybar) .toast{bottom:calc(90px + var(--safe-b))!important}

  /* --- bag as a bottom sheet, menu as full-height drawer --- */
  #cart-drawer{top:auto;left:0;right:0;width:100%;height:min(86vh,720px);border-radius:20px 20px 0 0;transform:translateY(100%);padding-bottom:var(--safe-b);box-shadow:0 -20px 50px -20px rgba(0,0,0,.35)}
  #cart-drawer.open{transform:none}
  #cart-drawer::before{content:"";position:absolute;top:8px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:var(--linen);z-index:2}
  #menu-drawer{width:min(360px,88vw);padding-top:env(safe-area-inset-top,0px)}
  .drawer-head{padding:14px 20px}
  .drawer-body{padding:8px 22px 20px}
  .drawer-foot{padding:16px 22px calc(16px + var(--safe-b))}
  .modal-box{border-radius:20px 20px 0 0}

  /* --- product grids: two clean columns --- */
  .pgrid,.pgrid.three,.pgrid[data-pane]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px}
  .pgrid.one-m{grid-template-columns:minmax(0,1fr)!important}
  .pcard{min-width:0}
  .pcard-media{margin-bottom:12px;border-radius:12px}
  .pcard-wish{width:32px;height:32px;top:8px;right:8px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
  .pcard .eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard-title{font-size:18px;line-height:1.18;word-break:break-word}
  .pcard-sub{font-size:12px;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pcard .btn-split{flex-direction:column;align-items:stretch;min-height:0;border-radius:8px;overflow:hidden;padding:7px 4px}
  .pcard .btn-split span{justify-content:center;padding:0 2px!important;font-size:9.5px;letter-spacing:.08em;white-space:nowrap;line-height:1.5}
  .pcard .btn-split span:last-child{border-left:0!important;font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:500}
  .promo-tile{grid-column:1/-1}
  .chips{margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}
  .chip{white-space:nowrap;flex:none;border-radius:999px}
  .trust-row{margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}
  .jgrid.scroll-m{scroll-snap-type:x mandatory;margin-right:calc(var(--gut) * -1);padding-right:var(--gut)} .jgrid.scroll-m .jcard{scroll-snap-align:start}

  /* --- shop filter bar sticks under the header --- */
  .filterbar{position:sticky;top:calc(var(--hdr-h,100px) - 1px);z-index:20;background:var(--ivory);padding-top:10px;padding-bottom:10px;margin-top:0}

  /* --- product page --- */
  .pdp{gap:22px}
  .gallery{margin:0 calc(var(--gut) * -1)}
  .gallery-main,.gallery>div:first-child{border-radius:0}
  .thumbs{padding:0 var(--gut);gap:8px;scrollbar-width:none} .thumbs::-webkit-scrollbar{display:none}
  .thumbs button{width:58px;border-radius:8px}
  .buy-row .btn-split,.pdp [data-buy-now].btn-block{display:none}
  .buy-row{gap:10px}
  .price-big{font-size:34px}

  /* --- cart --- */
  .cart-layout .summary>.btn-dark[value=checkout]{display:none!important}
  .cart-prod .mini-img{border-radius:10px;overflow:hidden}

  /* --- checkout: sticky place-order button --- */
  [data-place]{position:sticky;bottom:calc(10px + var(--safe-b));z-index:5;box-shadow:0 10px 30px -10px rgba(31,28,23,.6);border-radius:10px}
  .co-sec{border-radius:0}
  .pay-opt,.ship-opt{border-radius:10px}

  /* --- account: app-style menu --- */
  .acct{padding:22px var(--gut) 50px!important;gap:22px}
  .acct-band .wrap[style]{padding:18px var(--gut) 26px!important}
  .acct-band .h1{font-size:36px!important}
  .acct-band .band-art{width:46%!important;top:10px!important;right:0!important;opacity:.35}
  .acct-band .crumbs{display:none}
  .acct-band-sub{display:none}
  .acct-sub>nav{display:none}
  .m-acct-back{display:flex!important;align-items:center;gap:8px;font:400 12px var(--sans);color:var(--stone);padding:2px 0 4px;border-bottom:1px solid var(--line)}
  .m-acct-back b{margin-left:auto;font:400 22px var(--serif);color:var(--ink)}
  .acct-home>nav{order:2}
  .acct-home .acct-nav{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
  .acct-nav li:last-child a{border-bottom:0}
  .acct-nav a{align-items:center;gap:14px;padding:15px 16px;font-size:12px;letter-spacing:.1em;border-left:0}
  .acct-nav a .al{flex:1}
  .acct-nav a .ai{display:inline-flex!important;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:var(--sand);color:var(--ink)}
  .acct-nav a.on{background:var(--sand)}
  .acct-nav .signout{color:var(--berry)}
  .acct-stats{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:24px}
  .acct-stats>a,.acct-stats>a+a{padding:16px 12px;text-align:center}
  .acct-stats b{font-size:32px}
  .acct-stats span{font-size:9px;letter-spacing:.12em}
  .order-card,.box,.box-sand,.ticket,.form-panel{border-radius:14px}

  .popular{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--gut) * -1);padding-right:var(--gut)} .popular::-webkit-scrollbar{display:none}
  .popular a{white-space:nowrap;flex:none}

  .wrap.band-row{padding-left:var(--gut)!important;padding-right:var(--gut)!important}
  body:has(.auth) .wa-float,body:has(.acct) .wa-float,body:has(.cart-layout) .wa-float,body:has(.contact-cards) .wa-float,body:has(.form-panel) .wa-float{display:none!important}

  /* --- footer: compact, clear of the tab bar --- */
  .site-footer{padding-bottom:10px}
  .dev-credit{padding:0 0 10px!important}
  .newsletter .nl-row{flex-direction:column;gap:10px}
  .newsletter .nl-row .btn{width:100%}

  /* --- installed app (home-screen) --- */
  @media (display-mode:standalone){
    .announce{display:none}
  }
}

@media (max-width:380px){
  .in-story{flex-wrap:wrap;gap:12px}
  .in-story .mini-img{width:80px}
  .in-story .btn-split{flex:1 1 100%}
  .in-story .btn-split span{white-space:nowrap}
  .m-buybar .mb-price b{font-size:20px}
  .m-buybar .btn{padding:0 12px;letter-spacing:.08em}
  .m-tabbar a span,.m-tabbar button span{font-size:9px}
}