/* ============================================================
   MOSDOLI V8 — PRODUCTION RESPONSIVE & INTERACTION LOCK
   Mobile-first conversion shell. Brand geometry/tokens are locked.
   This layer only controls resilience, ergonomics and viewport fit.
   ============================================================ */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scrollbar-gutter:stable;
  scroll-padding-top:96px;
}
body{
  min-width:280px;
  min-height:100svh;
  min-height:100dvh;
  text-rendering:optimizeLegibility;
}
button,a,input,textarea,select{touch-action:manipulation}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--mosdoli-yellow);outline-offset:3px}
.order-v4 :focus-visible,.checkout-v4-body :focus-visible{outline-color:var(--mosdoli-red)}
img{max-width:100%}

/* Reduce layout shift in every brand surface. */
.brand img,.order-app-logo img,.checkout-logo img,.footer-brand img{aspect-ratio:430/128;object-fit:contain}
.home-mobile-order img{aspect-ratio:93.5/112.75}

/* General content rhythm: comfortable from tablets through large desktops. */
@media (min-width:1440px){
  :root{--max:1320px}
  .hero-grid{min-height:720px}
  .order-app-shell,.checkout-v3-shell{width:min(1180px,calc(100% - 64px))}
}
@media (min-width:1800px){
  :root{--max:1380px}
  .hero-copy h1{font-size:108px}
}

/* iPad Pro / small laptop: preserve the premium two-column hero instead of
   creating an unnecessarily tall stacked page. */
@media (min-width:900px) and (max-width:1050px){
  .hero-grid{grid-template-columns:.9fr 1.1fr;min-height:620px;gap:0}
  .hero-copy{padding:64px 0}
  .hero-copy h1{font-size:clamp(58px,7.3vw,76px)}
  .food-stage{min-height:570px}
  .stage-disc{width:470px;height:470px;right:-45px;top:55px}
  .stage-box{width:430px;right:3%;bottom:75px}
  .stage-fries{width:150px;right:-2%;bottom:55px}
  .stage-coke{width:70px;right:17%;top:88px}
  .stage-bucket{width:170px;left:-2%;bottom:35px}
  .kairaba-hero-grid{grid-template-columns:.9fr 1.1fr}
}

/* Tablet: cleaner density, not a stretched phone. */
@media (min-width:601px) and (max-width:899px){
  :root{--pad:clamp(24px,5vw,42px)}
  .section{padding:84px 0}
  .hero-copy{padding-top:58px}
  .food-stage{min-height:500px}
  .order-app-shell,.checkout-v3-shell{width:calc(100% - 48px)}
  .menu-list-v3{grid-template-columns:1fr 1fr}
  .popular-rail{grid-auto-columns:minmax(190px,32%)}
  .checkout-v4-content{order:0}
  .checkout-summary-v4{order:1}
  .checkout-summary-v4 .checkout-items-v3{display:block}
  .checkout-summary-v4 .summary-total-v3>div:not(.grand-total-v3){display:flex}
  .checkout-summary-v4 .summary-note-v3{display:flex}
}

/* Mobile global shell. */
@media (max-width:700px){
  html{scroll-padding-top:76px}
  body{overflow-wrap:break-word}
  .shell{width:calc(100% - 32px)}
  .announcement a{padding:5px 12px;line-height:1.25}
  .nav{height:64px}
  .brand img{width:132px}
  .menu-button{width:44px;height:44px;padding:0}
  .mobile-menu{padding-left:16px;padding-right:16px;padding-bottom:16px}
  .mobile-menu a{min-height:48px;display:flex;align-items:center}
  .button{min-height:52px;padding-inline:18px}
  .hero-copy{padding-top:44px}
  .hero-copy h1{font-size:clamp(48px,15.5vw,68px);line-height:.88;letter-spacing:-.06em}
  .hero-copy>p{font-size:16px;line-height:1.45;max-width:34ch}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .hero-actions .button{width:100%;padding-inline:12px}
  .hero-meta{margin-top:26px;font-size:12px}
  .food-stage{min-height:clamp(340px,96vw,410px)}
  .stage-disc{width:min(94vw,380px);height:min(94vw,380px);right:-34px}
  .stage-box{width:min(88vw,350px);right:0;bottom:54px}
  .stage-fries{width:min(31vw,125px);right:-5%;bottom:33px}
  .stage-coke{width:min(15vw,60px);right:20%;top:28px}
  .stage-bucket{width:min(34vw,138px);left:-4%;bottom:18px}
  .quick-grid{gap:22px}
  .quick-options>div:last-child{border-bottom:0}
  .food-bento{gap:12px}
  .food-tile{min-height:0}
  .people-copy{padding-left:0;padding-right:0}
  .location-actions{flex-wrap:wrap}
  .location-actions a{min-height:44px;display:inline-flex;align-items:center}
  .footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .page-hero h1{font-size:clamp(44px,14vw,58px)}
  .kairaba-hero h1{font-size:clamp(48px,15vw,64px)}
  .kairaba-hero p{font-size:16px}
}

/* Compact phones: 320–374px. No squeezed controls or clipped display type. */
@media (max-width:374px){
  :root{--pad:15px}
  .shell{width:calc(100% - 30px)}
  .announcement{font-size:10px}
  .announcement strong{display:none}
  .brand img{width:124px}
  .hero-copy h1{font-size:clamp(44px,14.4vw,54px)}
  .hero-copy>p{font-size:15px}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions .button-outline-light{min-height:48px}
  .hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .food-stage{min-height:320px}
  .stage-disc{width:315px;height:315px;right:-44px}
  .stage-box{width:292px;right:-2%;bottom:48px}
  .stage-fries{width:102px;bottom:29px}
  .stage-bucket{width:114px}
  .section{padding:60px 0}
  .section-tight{padding:50px 0}
  .section-head h2,.duality-copy h2,.people-copy h2,.kairaba-copy h2{font-size:clamp(36px,12vw,46px)}
  .food-bento{grid-template-rows:280px 280px 260px 260px}
  .tile-copy strong{font-size:30px}
  .location-page-card .location-info{padding:20px}
  .location-page-card h2{font-size:29px}
}

/* Ordering app: one-glance context, thumb targets, horizontal rails that never clip. */
@media (max-width:600px){
  .order-v4 .order-app-shell,.checkout-v4-body .checkout-v3-shell{width:calc(100% - 24px)}
  .order-v4 .order-start-card{top:calc(60px + env(safe-area-inset-top));}
  .order-v4 .location-trigger{min-height:44px}
  .order-v4 .fulfilment-toggle button{min-width:62px;min-height:40px;font-size:10px}
  .order-v4 .order-search-wrap input{font-size:16px;min-width:0}
  .order-v4 .order-search-wrap button{min-width:44px;min-height:44px}
  .order-v4 .category-circles{scroll-padding-inline:12px;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
  .order-v4 .category-circles button{scroll-snap-align:start;min-height:72px}
  .order-v4 .popular-rail{overscroll-behavior-inline:contain;scroll-snap-type:x mandatory}
  .order-v4 .product-v3-compact{scroll-snap-align:start}
  .order-v4 .product-add-v3{width:44px;height:44px;min-width:44px;min-height:44px}
  .order-v4 .product-qty-v3 button{width:44px;height:44px;min-width:44px;min-height:44px}
  .floating-cart-bar{min-height:58px}
  .order-v4 .app-bottom-nav a,.order-v4 .app-bottom-nav button{min-height:48px}
  .drawer-close-v3,.sheet-close,.product-sheet-close{min-width:44px;min-height:44px}
  .cart-qty-v3 button{width:40px;height:40px;min-width:40px;min-height:40px}
  .product-sheet-qty button{min-width:44px}
  .checkout-v4-content{order:0}
  .checkout-summary-v4{order:1}
  .checkout-summary-v4 .summary-head-v3{padding-bottom:4px}
  .checkout-v4-title{padding-top:3px}
  .checkout-v4-body .field-v3 input,.checkout-v4-body .field-v3 textarea,.checkout-v4-body .phone-field input{font-size:16px!important}
  .checkout-v4-body .field-v3 input,.checkout-v4-body .field-v3 textarea{min-height:52px}
  .checkout-location-v4 a{min-width:48px;min-height:48px}
  .checkout-mobile-bar{min-height:calc(74px + env(safe-area-inset-bottom))}
}

/* Very narrow ordering screens: stack order mode rather than compressing labels. */
@media (max-width:359px){
  .order-v4 .order-app-logo img{width:118px}
  .order-v4 .order-start-card{display:grid;grid-template-columns:1fr;gap:8px;padding:9px 10px}
  .order-v4 .fulfilment-toggle{width:100%}
  .order-v4 .fulfilment-toggle button{flex:1;font-size:11px}
  .order-v4 .category-icon{width:46px;height:46px}
  .order-v4 .category-circles button{min-width:50px}
  .order-v4 .popular-rail{grid-auto-columns:64%}
  .order-v4 .product-main-v4{grid-template-columns:76px 1fr}
  .order-v4 .product-image-v3{height:76px}
  .order-v4 .product-copy-v3 h3{font-size:12px}
  .order-v4 .order-promo{min-height:146px}
  .order-v4 .order-promo h1{font-size:25px}
  .order-v4 .order-promo-art img{max-width:150px}
  .fulfilment-cards-v4{grid-template-columns:1fr!important}
  .checkout-v4-header .checkout-logo img{width:116px}
  .checkout-v4-title h1{font-size:26px}
  .checkout-section-v4{padding:13px 11px}
  .payment-cards-v4 .payment-card-v3{min-height:66px}
  .checkout-mobile-bar{gap:8px;padding-left:9px;padding-right:9px}
  .checkout-mobile-bar button{min-width:145px}
}

/* Phone landscape / small-height screens: keep the buying surface usable. */
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){
  .home-mobile-order,.mobile-order-bar{position:static}
  body.home-page{padding-bottom:0}
  .order-v4 .order-app-header{position:static}
  .order-v4 .order-start-card{position:static}
  .order-v4 .app-bottom-nav{height:58px}
  .floating-cart-bar{bottom:64px}
  .product-sheet-v4{max-height:96dvh}
  .product-sheet-image{height:150px}
  .checkout-v4-header{position:static}
  .checkout-mobile-bar{position:sticky}
}

/* Standalone PWA: respect the hardware, not a browser-shaped mockup. */
@media (display-mode:standalone){
  .site-header{padding-top:env(safe-area-inset-top)}
  body.home-page{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
}

/* Pointer devices get hover; touch devices do not depend on it. */
@media (hover:hover) and (pointer:fine){
  .product-v3:hover{transform:translateY(-1px)}
  .location-page-card:hover{border-color:rgba(17,17,15,.28)}
}
@media (hover:none){
  .button:hover,.order-pill:hover,.food-tile:hover img,.campaign-grid a:hover img,.campaign-grid figure:hover img{transform:none}
}