/* Shared mobile HTML presentation. Loaded last on consumer pages only. */
body[data-client="consumer"]{
  --c-page-width:480px;
  --c-nav-height:64px;
  --c-action-height:76px;
  margin:0;
  min-width:0;
  background:#faf9f2;
  -webkit-text-size-adjust:100%;
}
body[data-client="consumer"] *,body[data-client="consumer"] *::before,body[data-client="consumer"] *::after{box-sizing:border-box}
body[data-client="consumer"] .consumer-stage{display:block;min-height:100vh;min-height:100dvh;padding:0;background:#faf9f2}
body[data-client="consumer"] .consumer-context,body[data-client="consumer"] .phone-status{display:none}
body[data-client="consumer"] .phone{
  width:100%;max-width:var(--c-page-width);min-width:0;
  min-height:100vh;min-height:100dvh;
  margin:0 auto;padding:env(safe-area-inset-top,0px) 0 0;
  border:0;border-radius:0;box-shadow:none;overflow:visible;
  background:#faf9f2;
}
body[data-client="consumer"] .phone:has(.c-bottomnav){padding-bottom:calc(var(--c-nav-height) + env(safe-area-inset-bottom,0px) + 16px)}
body[data-client="consumer"] .phone img{max-width:100%}
body[data-client="consumer"] .c-content{padding:18px 16px}
body[data-client="consumer"] .c-nav{gap:8px;padding:12px 16px;min-height:56px}
body[data-client="consumer"] .c-nav>*{min-width:0;overflow-wrap:anywhere}
body[data-client="consumer"] .c-nav b{flex:1;text-align:center;font-size:16px}
body[data-client="consumer"] .c-nav a,body[data-client="consumer"] .c-nav button{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
body[data-client="consumer"] .c-sectionhead,body[data-client="consumer"] .rs-sectionhead{gap:10px;flex-wrap:wrap}
body[data-client="consumer"] .phone :is(h1,h2,h3,p,dd,strong){overflow-wrap:anywhere}
body[data-client="consumer"] .phone :is(.buttons,.c-cardmeta){flex-wrap:wrap}
body[data-client="consumer"] .phone :is(.ff-c-product,.rs-product,.tx-product-summary)>*{min-width:0}
body[data-client="consumer"] :is(.ff-product-image,.rs-product-image,.tx-product-icon){flex-shrink:0}
body[data-client="consumer"] .phone .formgrid{grid-template-columns:minmax(0,1fr);padding:16px}
body[data-client="consumer"] .phone .field{min-width:0}
body[data-client="consumer"] :is(input,select,textarea){max-width:100%;font-size:16px}
body[data-client="consumer"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){min-width:0;min-height:44px}
body[data-client="consumer"] textarea{resize:vertical}
body[data-client="consumer"] :is(input[type="checkbox"],input[type="radio"]){width:20px;height:20px;flex-shrink:0}
body[data-client="consumer"] :is(.btn,.shelf-tabs a,.shelf-search button,.rs-search button,.tx-quantity button){min-height:44px}
body[data-client="consumer"] :is(.shelf-tabs,.tx-c-tabs){overflow-x:auto;overscroll-behavior-x:contain}
body[data-client="consumer"] .shelf-tabs a{display:flex;align-items:center}
body[data-client="consumer"] .tablewrap{max-width:100%;overflow-x:auto}
body[data-client="consumer"] .c-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-around;gap:4px;
  width:100%;max-width:var(--c-page-width);min-height:calc(var(--c-nav-height) + env(safe-area-inset-bottom,0px));
  margin:0 auto;padding:8px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  border-top:1px solid #e1e6d8;background:#fcfcf5;
}
body[data-client="consumer"] .c-bottomnav :is(a.btn,a,button){display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:44px;margin:0;padding:6px 4px;font-size:13px;white-space:normal}
/* Keep the action bar above navigation, with enough document space for both. */
body[data-client="consumer"] .c-buybar{position:static;gap:10px;flex-wrap:wrap;padding:12px 16px;min-height:var(--c-action-height)}
body[data-client="consumer"] .phone>.c-buybar,
body[data-client="consumer"] .phone>form>.c-buybar{
  position:fixed;z-index:19;left:0;right:0;bottom:0;
  width:100%;max-width:var(--c-page-width);margin:0 auto;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
}
body[data-client="consumer"] .phone:has(.c-bottomnav)>.c-buybar,
body[data-client="consumer"] .phone:has(.c-bottomnav)>form>.c-buybar{bottom:calc(var(--c-nav-height) + env(safe-area-inset-bottom,0px));padding-bottom:12px}
body[data-client="consumer"] .phone:has(>.c-buybar,>form>.c-buybar){padding-bottom:calc(var(--c-action-height) + env(safe-area-inset-bottom,0px) + 20px)}
body[data-client="consumer"] .phone:has(.c-bottomnav):has(>.c-buybar,>form>.c-buybar){padding-bottom:calc(var(--c-nav-height) + var(--c-action-height) + env(safe-area-inset-bottom,0px) + 20px)}
body[data-client="consumer"] .tx-purchase{position:sticky;bottom:calc(var(--c-nav-height) + env(safe-area-inset-bottom,0px));z-index:19}
body[data-client="consumer"] .tx-purchase .c-buybar{position:static}
body[data-client="consumer"] :is(.dialog,dialog){width:calc(100% - 24px);max-width:480px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
body[data-client="consumer"] .overlay{padding:12px}
@media(max-width:760px){body[data-client="consumer"]{--c-page-width:100%}}
@media(max-width:360px){
  body[data-client="consumer"] .c-content{padding:16px 12px}
  body[data-client="consumer"] .c-nav{padding-inline:12px}
  body[data-client="consumer"] .shelf-stage .c-homehero h1{font-size:22px}
  body[data-client="consumer"] .shelf-hero-image{width:130px}
  body[data-client="consumer"] .rs-market-grid{gap:8px}
  body[data-client="consumer"] .rs-facts>div{gap:8px;flex-wrap:wrap}
  body[data-client="consumer"] .c-buybar .btn{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){body[data-client="consumer"] *{scroll-behavior:auto}}