/* The same components and content, fitted to a narrow viewport. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Keep checkout text readable on phones in landscape and on tablets too. */
@media(max-width:1050px){
  .checkout-form .field input,.checkout-form .field select,.checkout-form .field textarea,
  .checkout-form .phone-prefix{font-size:16px}
}

@media(max-width:760px){
  .container,.site-header,.site-footer{
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }
  .container{width:100%;min-width:0}
  .site-header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:16px 12px;padding-top:max(20px,env(safe-area-inset-top,0px));
    padding-bottom:14px;min-height:0;
  }
  .site-header .logo{grid-column:1;grid-row:1;min-width:0;font-size:clamp(1.55rem,5.9vw,2rem)}
  .site-header .logo i{font-size:.6rem;letter-spacing:.035em;margin-top:9px}
  .header-phone{display:block;grid-column:2;grid-row:1;font-size:.8rem;line-height:1.4}
  .header-phone span{font-size:.68rem;margin-top:5px}
  .site-header nav{
    grid-column:1/-1;grid-row:2;display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;width:100%;margin:0;justify-items:stretch;
  }
  .site-header nav a{
    min-height:44px;display:flex;align-items:center;justify-content:center;
    padding:10px 0;font-size:.82rem;white-space:nowrap;
  }
  .cart-link [data-cart-count]{min-width:21px;margin-left:3px;padding:3px 4px}

  .hero{padding-top:36px;padding-bottom:44px;gap:36px;grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-visual,.section-heading>div,.balance-banner>div,
  .contact-details,.contacts-layout>div,.dish-body,.cart-row-info{min-width:0}
  .hero h1{font-size:clamp(2.65rem,11.5vw,4.2rem);line-height:1.05}
  .page-heading{padding:36px 0 22px}
  .page-heading h1{font-size:clamp(2.55rem,10.6vw,3.5rem);line-height:1.08}
  .hero-copy>p,.page-heading p{max-width:none;font-size:1rem}
  .hero-copy .button-row{gap:16px}
  .hero-copy .button-row>.btn{width:100%;padding:16px;font-size:.9rem;text-align:center}
  .hero-visual{margin:0;width:100%}
  .hero-visual .venue-frame img{height:auto;aspect-ratio:4/5;object-fit:cover}
  .hero-stamp{right:10px;top:-16px;width:88px;height:88px;font-size:.78rem;gap:2px}
  .hero-stamp strong{font-size:1.8rem}
  .hero-visual .venue-ticket{padding:18px 16px;gap:12px}
  .venue-ticket>span:last-child{min-width:0}
  .venue-ticket strong{font-size:clamp(1rem,4.3vw,1.15rem);overflow-wrap:break-word}
  .ticket-hours{font-size:.85rem}
  .photo-label{left:18px;bottom:20px;font-size:.82rem}
  .ribbon{gap:10px 18px;padding:20px 16px;font-size:.8rem;flex-wrap:wrap}
  .ribbon span{white-space:normal;text-align:center}

  .section{padding-top:48px;padding-bottom:48px}
  .section-heading{margin-bottom:26px;gap:18px}
  h2{font-size:clamp(2rem,8.7vw,3rem)}
  .section-heading>.btn{max-width:100%;min-height:48px;margin-top:16px}
  .dish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;perspective:none}
  .dish-body{padding:20px}
  .dish-card .dish-body h3{font-size:1.2rem;overflow-wrap:break-word}
  .dish-card .dish-body p{font-size:.95rem;min-height:0}
  .dish-meta{font-size:.88rem}
  .variant-field{font-size:.9rem}
  .variant-field select{font-size:16px;min-height:48px;padding:12px 34px 12px 12px}
  .dish-card .dish-bottom{flex-direction:column;align-items:stretch;gap:12px}
  .dish-bottom .small-btn{width:100%;min-height:44px;font-size:.9rem}
  .price{font-size:1.45rem}
  .add-cart{min-height:48px;font-size:1rem}
  .btn,.small-btn,.filter-btn,.quantity button{appearance:none;-webkit-appearance:none}
  .menu-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 26px}
  .filter-btn{min-height:48px;padding:12px 10px;font-size:.95rem}

  .order-banner-section{margin-top:0;padding-bottom:40px}
  .balance-banner{grid-template-columns:minmax(0,1fr);gap:24px;padding:26px 22px}
  .balance-banner h2{font-size:clamp(2rem,8vw,2.8rem)}
  .balance-banner p{font-size:.95rem;max-width:none}
  .balance-banner .btn{max-width:100%;min-height:48px}
  .order-banner-section .portion-preview{width:100%;margin:0;padding:24px;justify-self:stretch}
  .portion-preview strong{font-size:2.25rem;margin:0 0 12px}
  .portion-preview p{font-size:.95rem}

  .checkout-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .checkout-form-column{display:contents}
  .checkout-form-column>.cart-items{grid-column:1;grid-row:1}
  .checkout-form-column>.cart-extras{grid-column:1;grid-row:2;margin-top:0}
  .summary-track{grid-column:1;grid-row:3}
  .cart-page .checkout-form{grid-column:1;grid-row:4;margin-top:0}
  .checkout-layout>.order-ready{grid-column:1;grid-row:5}
  .summary-track .order-summary{position:static;top:auto}
  .panel{padding:22px 20px;min-width:0}
  .cart-items{padding:0 16px}
  .cart-row{grid-template-columns:76px minmax(0,1fr);gap:12px 14px;padding:20px 0}
  .cart-row .dish-art.food-image{width:76px}
  .cart-row h3{font-size:1.1rem;overflow-wrap:break-word}
  .cart-row-amount{grid-column:2;gap:12px;flex-wrap:wrap}
  .cart-row-amount>strong{white-space:nowrap}
  .quantity button{min-width:44px;min-height:44px}
  .quantity span{min-width:32px;font-size:16px}
  .remove-item{min-height:44px;padding:10px 0}
  .quick-sauces{grid-template-columns:minmax(0,1fr)}
  .extra-sauce{min-height:72px;padding:10px 12px;gap:12px}
  .extra-sauce>b{padding:0 4px;flex-shrink:0}
  .fields{grid-template-columns:minmax(0,1fr);gap:18px}
  .field{font-size:1rem}
  .field input,.field select,.field textarea{font-size:16px;min-height:50px}
  .field small,.field-help{font-size:.9rem}
  .phone-input{width:100%;min-height:50px}
  .phone-prefix{font-size:16px}
  .checkout-form button[type=submit]{width:100%;min-height:50px;font-size:1rem}
  .order-summary .daily-number{font-size:3rem;overflow-wrap:anywhere}
  .order-summary .cart-summary-count{font-size:1.05rem}
  .order-ready .button-row>.btn{width:100%;min-height:48px}
  .order-text{font-size:.9rem;padding:16px;max-width:100%}
  .cart-toast{width:max-content;max-width:calc(100% - 32px);bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:14px 18px}

  .contacts-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .contact-details strong{font-size:clamp(1.1rem,4.8vw,1.35rem);overflow-wrap:break-word}
  .contact-details p{font-size:.95rem}
  .map-wrap,.map-wrap iframe{min-height:0;height:min(420px,110vw)}
  .map-route-actions{margin-top:24px}
  .map-route-actions>.btn{min-height:48px;max-width:100%}

  .site-footer{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px 18px;
    padding-top:32px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
  }
  .footer-brand{grid-column:1;grid-row:1/3;min-width:0;align-self:center}
  .footer-brand .logo{font-size:clamp(1.65rem,6vw,2rem)}
  .footer-details{grid-column:2;grid-row:1;min-width:0}
  .footer-contact{grid-column:2;grid-row:2;min-width:0}
  .footer-contact>a{font-size:.85rem;line-height:1.5;white-space:nowrap}
  .site-footer p{font-size:.8rem;overflow-wrap:break-word}
  .site-footer .footer-details p{font-size:clamp(10px,3.1vw,.8rem);white-space:nowrap;overflow-wrap:normal}

  dialog{width:calc(100% - 24px);max-width:600px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
  .dialog-inner{padding:56px 20px 24px}
  .dialog-close{top:12px;right:12px;width:44px;height:44px}
  .dialog-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .dialog-grid>div{min-width:0}
  .dialog-grid h2{font-size:2.2rem;overflow-wrap:break-word}
  .dialog-inner .button-row>.btn{width:100%;min-height:48px}

  .intro{
    --intro-size:min(310px,70vw,calc(100vh - 190px));
    padding:16px;min-height:0;
    padding-top:max(16px,env(safe-area-inset-top,0px));
    padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  }
  .intro-stage{width:min(430px,88vw);height:var(--intro-size)}
  .intro .intro-pizza{width:min(280px,var(--intro-size));height:min(280px,var(--intro-size))}
  .intro-chef-scene{width:min(280px,var(--intro-size))}
  .intro-burger-scene{width:min(360px,calc(var(--intro-size) * 1.2))}
  .intro #skip-intro{min-height:44px}
  .intro #intro-caption{padding:0;margin:12px 0;font-size:.9rem}
}

@supports(height:100svh){
  @media(max-width:760px){.intro{--intro-size:min(310px,70vw,calc(100svh - 190px))}}
}

@media(max-height:500px){
  .intro{--intro-size:min(240px,calc(100vh - 190px));padding:12px}
  .intro-stage{width:min(430px,88vw);height:var(--intro-size)}
  .intro .intro-pizza{width:min(280px,var(--intro-size));height:min(280px,var(--intro-size))}
  .intro-chef-scene{width:min(280px,var(--intro-size))}
  .intro-burger-scene{width:min(360px,calc(var(--intro-size) * 1.2))}
  .intro #intro-caption{margin:10px 0;font-size:14px}
  .intro-word{font-size:1.8rem;margin-bottom:8px}
  .intro #skip-intro{min-height:44px}
}

@supports(height:100svh){
  @media(max-height:500px){.intro{--intro-size:min(240px,calc(100svh - 190px))}}
}

@media(min-width:761px) and (max-width:1050px) and (hover:none){
  .header-phone{display:block}
}

@media(max-width:520px){
  .dish-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .dish-card .dish-bottom{flex-direction:row;align-items:center}
  .dish-bottom .small-btn{width:auto;flex-shrink:0}
  .dish-body{padding:20px}
}

@media(max-width:340px){
  .site-header{column-gap:8px}
  .header-phone{font-size:.74rem}
  .header-phone span{font-size:.62rem}
  .site-header nav a{font-size:.76rem}
  .cart-link [data-cart-count]{font-size:11px;min-width:19px}
  .cart-row{grid-template-columns:62px minmax(0,1fr);column-gap:10px}
  .cart-row .dish-art.food-image{width:62px}
  .cart-row-amount{grid-column:1/-1;justify-content:space-between}
  .panel{padding:20px 16px}
  .cart-items{padding:0 14px}
  .dish-card .dish-bottom{flex-wrap:wrap}
  .footer-contact>a{font-size:.76rem}
}

/* Compact menu and homepage cards: exactly three dishes per row on phones. */
@media(max-width:760px){
  :is(.menu-page,.featured-menu) .dish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}
  :is(.menu-page,.featured-menu) .dish-card{border-radius:12px}
  :is(.menu-page,.featured-menu) .dish-art{border-radius:11px 11px 0 0;aspect-ratio:4/3!important}
  :is(.menu-page,.featured-menu) .dish-art>svg,:is(.menu-page,.featured-menu) .dish-art>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  :is(.menu-page,.featured-menu) .dish-body{padding:8px 6px;gap:4px;height:auto}
  :is(.menu-page,.featured-menu) .dish-card .dish-body h3{font-size:clamp(.72rem,2.85vw,.85rem);line-height:1.25;letter-spacing:0;margin:0;height:2.5em;min-height:2.5em;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  :is(.menu-page,.featured-menu) .dish-card .dish-body p{font-size:clamp(.63rem,2.55vw,.8rem);line-height:1.4;margin:0;height:2.8em;min-height:2.8em;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  :is(.menu-page,.featured-menu) .dish-meta{display:block;font-size:clamp(.63rem,2.55vw,.8rem);line-height:1.4;height:1.4em;min-height:1.4em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Portion choices remain available in the full details dialog. */
  :is(.menu-page,.featured-menu) .dish-card .variant-field{display:none}
  :is(.menu-page,.featured-menu) .dish-card .dish-bottom{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px;margin-top:0}
  :is(.menu-page,.featured-menu) .price{font-size:clamp(.85rem,3.8vw,1.2rem);line-height:1.3;height:1.3em;white-space:nowrap}
  :is(.menu-page,.featured-menu) .dish-bottom .small-btn{width:100%;font-size:clamp(.63rem,2.6vw,.8rem);padding:6px 3px;min-height:34px;height:34px}
  :is(.menu-page,.featured-menu) .add-cart{font-size:clamp(.68rem,2.8vw,.85rem);margin-top:2px;min-height:38px;height:38px;padding:7px 3px}
}