/* Progressive H5 enhancement of the existing storefront, never the admin or 3D test.
   Keep desktop rules in their original stylesheets. No device/UA-specific layout. */
.mobile-shortcuts{display:none}
@media(max-width:780px){
  html{scroll-padding-top:16px;scroll-padding-bottom:24px}
  body.bistrot{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .bistrot :is(.header,.account-header,.payment-header){padding-top:max(12px,env(safe-area-inset-top,0px))}
  .bistrot :is(.account-layout,.payment-layout){padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
  .bistrot footer{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .bistrot .mobile-shortcuts{display:flex;gap:4px;padding:2px 16px 10px;align-items:stretch;border-bottom:1px solid var(--line)}
  .mobile-shortcuts :is(a,button){flex:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:8px 6px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-size:14px;line-height:1.4;text-align:center}
  .mobile-shortcuts :is(a,button):active{background:var(--cream)}
  .bistrot :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;max-width:100%;min-width:0;scroll-margin-block:24px}
  .bistrot :is(.account-field textarea,.account-field select){width:100%;min-height:48px;padding:12px;border:1px solid #aebac4;border-radius:4px;background:#fff;color:var(--ink)}
  .bistrot .account-field textarea{min-height:112px;resize:vertical}
  .bistrot .address-tags button,.bistrot .address-paste summary{min-height:44px}
  .bistrot.address-page :is(input,select,textarea){scroll-margin-bottom:112px}
  .bistrot input[type=file]{white-space:normal}
  .bistrot :is(.account-card,.payment-card,.account-heading,.payment-intro,.journey-line>span){min-width:0;overflow-wrap:anywhere}
  .bistrot :is(.account-header,.payment-header) .brand{min-width:0;max-width:100%}
  .bistrot :is(.account-header,.payment-header){gap:12px;flex-wrap:nowrap}
  .bistrot :is(.account-header,.payment-header) .brand:has(>.brand-logo){width:160px;flex:0 1 160px}
  .bistrot :is(.account-header form,.payment-header>label){max-width:100%;flex-wrap:wrap}
  .bistrot .account-header form{flex:none}
  .bistrot .account-header form>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bistrot .payment-header>label{font-size:0;gap:0;flex:none}
  .bistrot :is(.account-header,.payment-header) select{min-width:108px;min-height:44px;font-size:16px}
  .bistrot :is(.account-methods,.journey-nav){gap:6px}
  .bistrot .account-methods a{flex-basis:calc(50% - 6px);min-width:0;line-height:1.5}
  .bistrot :is(.account-switch a,.sms-secondary a,.sms-secondary button,.journey-pagination a){display:inline-flex;align-items:center;min-height:44px}
  .bistrot :is(.account-card,.payment-card) .button{white-space:normal;min-height:48px;max-width:100%;gap:12px;text-align:center}
  .bistrot .payment-summary-row>span{min-width:0;overflow-wrap:anywhere}
  .bistrot .payment-fields .coupon{min-width:0}
  .bistrot .payment-fields .coupon input{flex:1;width:0}
  .bistrot .payment-fields .coupon button{flex:none;padding-inline:12px}
  .bistrot .payment-card details>summary{min-height:44px;padding-block:12px;cursor:pointer}
  .bistrot :is(.payment-consent,.payment-method){font-size:16px}
  .bistrot .payment-summary-row{font-size:15px}
  .bistrot .account-errors:focus,.bistrot #payment-error:focus{outline:2px solid var(--wine);outline-offset:4px}
  .bistrot dialog{top:var(--viewport-top,0px);bottom:auto;height:var(--visible-height,100dvh);max-height:var(--visible-height,100dvh);padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .bistrot .panel-header h2{min-width:0;overflow-wrap:anywhere}
  .bistrot #close-panel{flex:none;min-width:44px;min-height:44px}
  .bistrot .cart-checkout-bar{padding-bottom:2px}
  /* Leave more room to edit an address/coupon when the virtual keyboard is open.
     The checkout action stays reachable inside the same scrollable sheet. */
  .mobile-keyboard .bistrot .mobile-bag{display:none}
  .mobile-keyboard .bistrot #panel-content.cart-view{display:block;overflow-y:auto}
  .mobile-keyboard .bistrot .cart-scroll{overflow:visible}
  .mobile-keyboard .bistrot .cart-checkout-bar{padding-top:16px}
  .mobile-keyboard .bistrot .address-save{position:static}
  .bistrot #toast{max-width:calc(100vw - 32px);overflow-wrap:anywhere;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:380px){
  .bistrot :is(.account-layout,.payment-layout){padding-inline:16px}
  .bistrot :is(.account-card,.payment-card){padding:20px 14px}
  .bistrot .account-heading h1,.bistrot .payment-intro h1{font-size:38px}
  .bistrot .payment-method{padding:12px;gap:10px}
}