/* V12 responsive finish: narrow, tablet and compact-landscape safeguards. */

/* Keep the shared header on the same 1180px collapse point as chrome-v4.js/readability-v8. */
:root{--header-size:88px;--header-offset:88px}
html:has(body.home-v6),html:has(body.menu-v7){--header-size:88px;--header-offset:88px}
html.chrome-hidden{--header-offset:0px}
.site-header{min-width:0}
.site-header .brand{min-width:0}
.site-header nav{min-width:0}
.site-header :is(.home-header-order,.menu-header-order){flex:none}
@media(max-width:1180px){
  .site-header{padding-inline:clamp(20px,5vw,56px)}
  .site-header nav{top:var(--header-size);max-height:calc(100dvh - var(--header-size));padding-bottom:max(24px,env(safe-area-inset-bottom));}
  .site-header nav>a:not(.button),.site-header nav .button{min-height:52px}
  .site-header #nav-toggle{min-width:78px;min-height:48px;flex:none}
  .site-header .language-switch{flex:none}
}
@media(max-width:760px){
  :root{--header-size:84px;--header-offset:84px}
  html:has(body.home-v6),html:has(body.menu-v7){--header-size:84px;--header-offset:84px}
  html.chrome-hidden{--header-offset:0px}
  .site-header{padding-inline:20px;gap:12px}
  .site-header nav{top:var(--header-size);max-height:calc(100dvh - var(--header-size))}
}
@media(max-width:540px){
  :root{--header-size:72px;--header-offset:72px}
  html:has(body.home-v6),html:has(body.menu-v7){--header-size:72px;--header-offset:72px}
  html.chrome-hidden{--header-offset:0px}
  .site-header{height:var(--header-size);padding-inline:16px;gap:9px}
  .site-header .brand>span{display:none}
  .site-header .brand img{width:40px;height:40px}
  .site-header #nav-toggle{min-width:70px;padding-inline:10px}
  .site-header :is(.home-header-order,.menu-header-order){padding-inline:11px}
  .site-header nav{top:var(--header-size);max-height:calc(100dvh - var(--header-size))}
}

/* At tablet widths, show the complete 3:2 hero photo below copy so the cup is not cropped. */
@media(max-width:1000px){
  .home-v6 .home-hero>picture{aspect-ratio:3/2;}
  .home-v6 .home-hero img{object-fit:cover;object-position:70% 50%;}
}
@media(max-width:700px){
  .home-v6 .home-hero>picture{aspect-ratio:3/2;}
  .home-v6 .home-hero img{object-position:68% 50%;}
}

/* Menu prices keep the label and amount on a shared, stable baseline on tablets. */
@media(max-width:1180px){
  .menu-v7 .menu-item>.menu-prices>dl{display:block;}
  .menu-v7 .menu-item>.menu-prices .menu-price-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
  .menu-v7 .menu-price-line dt{min-width:0;overflow-wrap:anywhere;}
  .menu-v7 .menu-price-line dd{flex:none;white-space:nowrap;margin:0;}
}
@media(max-width:700px){
  .menu-v7 .menu-plain-grid .menu-item>.menu-prices>dl{display:block;}
  .menu-v7 .menu-plain-grid .menu-item>.menu-prices .menu-price-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #073b3114;}
}

/* Contain long form values and native dialogs inside the viewport. */
.form-shell,.form-shell :is(form,fieldset,.full){min-width:0;}
.form-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){box-sizing:border-box;max-width:100%;}
.form-shell fieldset{max-width:100%;}
dialog{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;}
#assistant-dialog{width:min(680px,calc(100vw - 24px));padding:clamp(20px,4vw,36px);}
#assistant-dialog .input-row{min-width:0;}
#assistant-dialog .input-row :is(input,button){min-width:0;}
.menu-v7 #product-dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overscroll-behavior:contain;}
@media(max-width:760px){
  .form-shell{padding-inline:6%;}
  .form-shell :is(#resForm,#applyForm,#artForm,.ws-form){grid-template-columns:minmax(0,1fr);}
  .form-shell :is(#resForm,#applyForm,#artForm,.ws-form)>*{min-width:0;}
  #assistant-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:22px 18px calc(18px + env(safe-area-inset-bottom));}
  #assistant-dialog .input-row{flex-wrap:wrap;}
  #assistant-dialog .input-row input{flex:1 1 180px;}
  #assistant-dialog .input-row button{flex:1 1 120px;}
}

/* Article navigation should precede the text as soon as the two-column measure gets tight. */
@media(max-width:900px){
  .article-layout{display:flex;flex-direction:column;align-items:stretch;gap:28px;}
  .article-toc{position:static;width:100%;max-height:none;order:-1;}
  .article-content{min-width:0;width:100%;}
}

/* Short landscape viewports keep the mobile nav and dialogs scrollable. */
@media(max-height:600px) and (min-width:541px) and (max-width:1180px){
  .site-header nav{max-height:calc(100dvh - var(--header-size));}
  dialog,#assistant-dialog,.menu-v7 #product-dialog{max-height:calc(100dvh - 16px);}
}