/* Android-ready touch layout. Kept as a separate layer so every role shares the same rules. */
:root{--tap:44px}
/* The document is the desktop scroll container. Do not constrain a catalogue inside #app. */
html{height:auto!important;min-height:100%!important;max-width:100%;overflow-x:hidden!important;overflow-y:scroll!important}
body{height:auto!important;min-height:100vh!important;max-width:100%;overflow:visible!important;-webkit-tap-highlight-color:transparent}
#app{display:block!important;height:auto!important;min-height:100vh!important;max-width:100%;overflow:visible!important}
button,a,input,select,textarea{touch-action:manipulation}
button,.button,.icon-button{min-height:var(--tap)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a33bff;outline-offset:3px}
.container,.section,.card,.product,.head,.row,.two,.catalog,.address-grid,.payment-options,.invoice-meta{min-width:0}
.card,.product,.address-card,.delivery-card{overflow-wrap:anywhere}
.button[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.12)}
.loading-state{display:grid;place-items:center;min-height:144px;padding:24px;border:1px dashed #e1d3f5;border-radius:18px;background:#fcfaff;color:#685b83;font-weight:700}
.loading-state:before{content:"";width:24px;height:24px;margin-bottom:10px;border:3px solid #eadcff;border-top-color:#af28e6;border-radius:50%;animation:bringall-spinner .75s linear infinite}
@keyframes bringall-spinner{to{transform:rotate(1turn)}}
@media(max-width:700px){
  :root{--tap:44px}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .topbar{padding-top:env(safe-area-inset-top)!important}
  .customer-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
  .container{width:100%;max-width:100%;padding:16px 14px calc(100px + env(safe-area-inset-bottom))!important}
  .section{margin-top:20px!important}.section:first-child{margin-top:0!important}
  .hero{padding:25px 19px!important;border-radius:22px!important}.hero h1{font-size:clamp(27px,8vw,34px)!important}.hero p{font-size:15px!important}
  .card{padding:15px!important;border-radius:18px!important}.product{padding:11px!important}.catalog{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .catalog .product strong{font-size:14px;line-height:1.25}.catalog .product .muted{font-size:12px;line-height:1.35}.home-image,.product-photo{height:112px!important}
  .two,.address-grid{grid-template-columns:1fr!important}.head{align-items:flex-start!important;flex-wrap:wrap}.head>.button{width:100%}
  .row{gap:9px!important}.row>.button{flex:1}.checkout-card .button,.delivery-card .button,.profile-card .button{width:100%}
  .cart-line{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important}.quantity-control .icon-button{width:38px;height:38px;min-height:38px}
  .customer-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px!important}.customer-nav button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .customer-nav button .nav-label{overflow:hidden;text-overflow:ellipsis}.customer-nav button.active{transform:none!important}
  .floating-cart{bottom:calc(76px + env(safe-area-inset-bottom))!important}.modal,.modal-backdrop{padding:10px!important}.modal .card{max-height:calc(100dvh - 20px)}
  .invoice-meta{display:grid;gap:7px}.invoice-table{display:block;overflow-x:auto;white-space:nowrap}.timeline{scroll-snap-type:x mandatory}.timeline .step{scroll-snap-align:start}
  #toast{right:12px!important;left:12px!important;bottom:calc(80px + env(safe-area-inset-bottom))!important;text-align:center}
}
@media(max-width:360px){.customer-nav button{font-size:10px!important}.brand{font-size:17px!important}.catalog{gap:8px!important}.home-image,.product-photo{height:96px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Narrow Android phones: retain two product columns without squeezing the price or action. */
@media(max-width:480px){
  html,body{display:block!important;position:static!important;width:100%!important;height:auto!important;min-height:100dvh!important;overflow-x:hidden!important;overflow-y:scroll!important;overscroll-behavior-y:auto!important}
  #app{display:block!important;width:100%!important;min-height:100dvh!important;height:auto!important;overflow:visible!important}
  main.container{display:block!important;min-height:calc(100dvh - 64px)!important;overflow:visible!important;-webkit-overflow-scrolling:touch}
  .catalog:not(.home-categories):not(.grocery-section-cards){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .catalog:not(.home-categories):not(.grocery-section-cards) .product{padding:10px!important;gap:8px!important}
  .catalog:not(.home-categories):not(.grocery-section-cards) .product .row{display:grid!important;grid-template-columns:minmax(0,1fr) 68px!important;align-items:center!important;gap:7px!important;flex-wrap:nowrap!important}
  .catalog:not(.home-categories):not(.grocery-section-cards) .product .row .price{min-width:0!important;font-size:17px!important;white-space:nowrap!important;letter-spacing:-.4px}
  .catalog:not(.home-categories):not(.grocery-section-cards) .product .row .button{width:68px!important;min-width:68px!important;min-height:42px!important;height:42px!important;padding:8px 5px!important;white-space:nowrap!important;font-size:13px!important}
  .catalog:not(.home-categories):not(.grocery-section-cards) .product-photo{height:112px!important}
}