/* App workspace sits between the theme's top and bottom navigation. */
.kcb-app { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.kcb-app button { -webkit-appearance:none; appearance:none; }
.kcb-app .kcb-step-nav { display:flex; flex-wrap:nowrap; gap:4px; }
.kcb-app .kcb-step-nav button { flex:1 1 0; min-width:0; width:auto; }
.kcb-app .kcb-step-nav button:not(.is-current) { background:#f4ecdf!important; color:#735740!important; opacity:1; box-shadow:none; }
.kcb-app .kcb-step-nav button.is-current { background:#653b24!important; color:white!important; box-shadow:none; }
.kcb-app .kcb-step-nav button:not(.is-current) i { background:transparent; color:inherit; border-color:#d7c5ad; }
.kcb-app .kcb-pouch-label { left:43%; }
.kcb-app .kcb-pouch-logo { transform:translateY(3px); }
.kcb-origin-tabs { display:flex; gap:8px; margin-bottom:14px; }
.kcb-app .kcb-origin-tabs button { flex:1; min-height:44px; border:1px solid #dcc8b1; border-radius:10px; padding:6px; background:#f4eadf; color:#67492e; font:inherit; font-size:14px; cursor:pointer; }
.kcb-app .kcb-origin-tabs button.is-selected { background:#653b24; color:#fff; }
.is-workspace .kcb-origin-head { display:flex; margin-bottom:6px; }
.is-workspace .kcb-origin-section+.kcb-origin-section { margin:10px 0 0!important; padding:0!important; border:0; }
.kcb-app .kcb-origin-grid.is-carousel { display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc((100% - 16px)/3); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding-bottom:4px; scrollbar-width:thin; }
.kcb-app .kcb-origin-grid.is-carousel { grid-auto-columns:clamp(100px,30%,140px); }
.kcb-app .kcb-origin-grid.is-carousel>.kcb-origin { min-height:0; aspect-ratio:1; scroll-snap-align:start; scroll-snap-stop:always; }
.kcb-app.is-workspace { position:fixed; z-index:390; inset:var(--kcb-workspace-top,62px) 0 calc(var(--kcb-workspace-bottom,70px) + env(safe-area-inset-bottom)); width:100%; height:auto; margin:0; overflow:hidden; background:#eee5d9; }
.kcb-app.is-workspace>.kcb-hero,.kcb-app.is-workspace>.kcb-saved { display:none; }
.kcb-app.is-workspace { bottom:auto; height:var(--kcb-workspace-height,calc(100dvh - 132px)); container:kcb-workspace / size; }
.kcb-app.is-workspace .kcb-builder { display:flex; flex-direction:column; gap:8px; height:100%; max-width:960px; padding:10px 16px; margin:auto; background:transparent; overflow:hidden; }
.is-workspace .kcb-builder-head { display:none; }
.kcb-app.is-workspace .kcb-sticky-status { position:static!important; flex-shrink:0; margin:0; padding:8px 12px; border-radius:14px; box-shadow:none; }
.is-workspace .kcb-status-main { gap:10px; }
.is-workspace .kcb-status-main>span { margin-left:auto; }
.is-workspace .kcb-status-chips { display:none; }
.is-workspace .kcb-progress { margin:6px 0 0; height:3px; }
.kcb-app .kcb-exit { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; padding:0; border:0; border-radius:10px; background:#eee3d6; color:#623d27; font-size:25px; cursor:pointer; }
.kcb-app.is-workspace .kcb-step-nav { display:flex; flex-shrink:0; margin:0; gap:4px; }
.is-workspace .kcb-step-nav button { flex:1; display:flex; flex-direction:row; gap:5px; padding:5px; min-height:36px; border-radius:9px; opacity:1; }
.is-workspace .kcb-step-nav i { margin:0; flex-shrink:0; }
.is-workspace .kcb-step-nav span { margin:0; font-size:11px; }
.is-workspace .kcb-step-nav button.is-next-ready { color:#56341f; background:#e5d2bb; box-shadow:inset 0 0 0 1px #c19d77; font-weight:700; }
.kcb-app.is-workspace .kcb-panel { flex:1; min-height:0; width:100%; padding:18px; border-radius:18px; display:flex; flex-direction:column; margin:0; overflow:hidden; }
.is-workspace .kcb-step { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.is-workspace .kcb-step-heading { margin-bottom:16px; gap:10px; }
.is-workspace .kcb-step-heading>span { display:none; }
.is-workspace .kcb-step-heading h3 { font-size:22px; white-space:normal; }
.is-workspace .kcb-step-heading p { font-size:13px; }
.kcb-app.is-workspace .kcb-actions { position:static; flex-shrink:0; margin:12px 0 0; padding:12px 0 0; background:transparent; backdrop-filter:none; gap:10px; }
.kcb-app .kcb-actions [data-kcb-next].is-ready:not(:disabled) { background:#653b24!important; color:#fff!important; opacity:1!important; filter:none!important; box-shadow:0 5px 16px #482c1920; cursor:pointer; }
.kcb-app .kcb-actions [data-kcb-next]:disabled { opacity:.55!important; }
.is-workspace .kcb-actions button { min-height:48px; font-size:14px; }
.is-workspace .kcb-error { flex-shrink:0; margin:8px 0 0; font-size:12px; }
.is-workspace .kcb-choice-grid.kcb-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.is-workspace .kcb-choice { min-height:105px; }
.is-workspace .kcb-brew-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.is-workspace .kcb-brew { min-height:108px; padding:12px; }
.is-workspace .kcb-brew>i { height:40px; width:40px; margin-bottom:7px; }
.is-workspace .kcb-brew svg { width:34px; height:34px; }
.is-workspace .kcb-origin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.is-workspace .kcb-origin { min-height:104px; padding:10px; }
.is-workspace .kcb-origin em { display:none; }
.is-workspace .kcb-flag { height:30px; width:34px; font-size:23px; margin-bottom:4px; }
.is-workspace .kcb-origin b { font-size:14px; }
.is-workspace .kcb-origin small { font-size:11px; line-height:1.6; }
.is-workspace .kcb-origin-section+.kcb-origin-section { margin-top:14px; padding-top:12px; }
.is-workspace .kcb-origin-head { margin-bottom:8px; }
.is-workspace .kcb-weight-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.is-workspace .kcb-weight { min-height:110px; padding:28px 12px 12px; text-align:center; }
.is-workspace .kcb-presets { margin-bottom:12px; gap:6px; }
.is-workspace .kcb-presets button { min-height:40px; padding:6px 12px; font-size:12px; }
.kcb-app .kcb-presets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.kcb-app .kcb-presets button { min-width:0; padding-inline:3px; white-space:nowrap; }
@media(max-width:360px){.kcb-app .kcb-presets button { font-size:10px; padding-inline:2px; }}
.is-workspace .kcb-ratio-box { padding:16px; }
.is-workspace .kcb-ratio-values>div { padding:8px; }
.is-workspace .kcb-taste-bars { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.is-workspace .kcb-taste-bars div { grid-template-columns:1fr; gap:3px; }
.is-workspace .kcb-result-copy { margin-top:10px; }
.kcb-app.is-workspace .kcb-final { height:100%; min-height:0; width:100%; margin:0; padding:18px; gap:16px; flex-direction:row; justify-content:center; border-radius:14px; }
.kcb-app.is-workspace .kcb-final .kcb-pouch-preview { width:180px; }
.is-workspace .kcb-ready-copy { max-width:340px; }
@media(max-width:700px) {
  .kcb-app.is-workspace .kcb-builder { padding:6px 8px; gap:6px; }
  .kcb-app.is-workspace .kcb-panel { padding:12px; }
  .is-workspace .kcb-step-nav i { display:none; }
  .is-workspace .kcb-step-nav span { font-size:11px; }
  .is-workspace .kcb-step-heading { margin-bottom:12px; }
  .is-workspace .kcb-step-heading h3 { font-size:19px; }
  .is-workspace .kcb-step-heading p { font-size:12px; }
  .is-workspace .kcb-choice-grid.kcb-two { grid-template-columns:1fr; }
  .is-workspace .kcb-choice { min-height:84px; padding:12px; }
  .is-workspace .kcb-brew-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .is-workspace .kcb-brew { display:flex; align-items:center; gap:8px; min-height:78px; padding:10px; }
  .is-workspace .kcb-brew>i { flex:0 0 32px; height:36px; margin:0; }
  .is-workspace .kcb-brew b { font-size:12px; }
  .is-workspace .kcb-brew small { font-size:10px; }
  .is-workspace .kcb-origin { min-height:96px; padding:8px; }
  .is-workspace .kcb-origin b { font-size:13px; }
  .is-workspace .kcb-origin small { font-size:10px; }
  .is-workspace .kcb-weight-grid { grid-template-columns:1fr; }
  .is-workspace .kcb-weight { min-height:76px; text-align:right; padding:14px; }
  .is-workspace .kcb-ratio-values strong { font-size:25px; }
  .kcb-app.is-workspace .kcb-final { flex-direction:column; gap:12px; padding:14px; }
  .kcb-app.is-workspace .kcb-final .kcb-pouch-preview { width:145px; }
  .is-workspace .kcb-ready-copy h3 { margin-bottom:6px; font-size:20px; }
  .kcb-app.is-workspace .kcb-ready-copy>strong { margin-top:10px; font-size:27px; }
  .kcb-app.is-workspace .kcb-ready-copy p { font-size:12px; }
}
@media(max-height:720px) {
  .is-workspace .kcb-origin small { display:none; }
  .is-workspace .kcb-origin .kcb-flag { height:22px; font-size:20px; margin-bottom:2px; }
  .is-workspace .kcb-origin { min-height:60px!important; padding:6px; }
  .is-workspace .kcb-step-heading p { display:none; }
  .is-workspace .kcb-step-heading { margin-bottom:8px; }
  .is-workspace .kcb-origin-section+.kcb-origin-section { margin-top:8px; padding-top:8px; }
  .is-workspace .kcb-origin { min-height:86px; }
  .is-workspace .kcb-presets { margin-bottom:8px; }
  .is-workspace .kcb-ratio-box { padding:10px; }
  .is-workspace .kcb-taste-bars { margin-top:10px; }
  .is-workspace .kcb-result-copy { font-size:11px; }
  .kcb-app.is-workspace .kcb-final { flex-direction:row; gap:12px; padding:10px; }
  .kcb-app.is-workspace .kcb-final .kcb-pouch-preview { width:120px; }
  .is-workspace .kcb-weight { min-height:64px; padding:10px; }
  .is-workspace .kcb-brew { min-height:65px; }
  .is-workspace .kcb-taste-bars { display:none; }
  .is-workspace .kcb-result-copy { display:none; }
  .is-workspace .kcb-presets button { min-height:36px; padding:4px 8px; }
  .is-workspace .kcb-ratio-values>div { padding:4px; }
  .is-workspace .kcb-ratio-track { margin:10px 0 4px; }
  .is-workspace .kcb-ratio-ends { display:none; }
}
@media(max-height:600px) {
  .is-workspace .kcb-origin-head { margin-bottom:4px; }
  .is-workspace .kcb-origin-head h4 { font-size:12px; line-height:1.5; }
  .is-workspace .kcb-origin-head span { line-height:1.5; }
  .kcb-app.is-workspace .kcb-origin-grid.is-carousel { grid-auto-columns:76px; }
  .is-workspace [data-kcb-step="4"]>.kcb-step-heading { display:none; }
  .is-workspace .kcb-step-heading { margin-bottom:4px; }
  .is-workspace .kcb-ratio-box { padding:8px; }
  .is-workspace .kcb-ratio-track { margin-top:4px; }
  .is-workspace .kcb-choice { min-height:72px; padding:8px; }
  .is-workspace .kcb-brew { min-height:49px; padding:6px; }
  .is-workspace .kcb-brew small { display:none; }
  .is-workspace .kcb-weight { min-height:48px; padding:6px 12px; }
  .is-workspace .kcb-weight small { display:none; }
  .is-workspace .kcb-ratio-values strong { font-size:22px; }
  .is-workspace .kcb-ratio-values span { font-size:10px; }
  .kcb-app.is-workspace .kcb-final { display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows: auto auto auto; align-content:center; gap:4px 10px; }
  .kcb-app.is-workspace .kcb-final .kcb-pouch-preview { width:96px; grid-row:1/3; }
  .is-workspace .kcb-ready-copy { display:contents; }
  .is-workspace .kcb-ready-copy h3 { font-size:17px; margin:0; align-self:end; }
  .kcb-app.is-workspace .kcb-ready-copy p { font-size:11px; align-self:start; }
  .kcb-app.is-workspace .kcb-ready-copy>strong { grid-column:1/-1; font-size:24px; margin-top:4px; }
}

/* Nine device cards; espresso types replace the grid within the same step. */
.kcb-app .kcb-brew-grid,.kcb-app .kcb-quick-brews{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kcb-app .kcb-brew-grid .kcb-brew{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:88px;padding:9px 5px;text-align:center}
.kcb-app .kcb-brew-grid .kcb-brew>i{flex:0 0 auto;width:34px;height:34px;margin:0}
.kcb-app .kcb-brew-grid .kcb-brew svg{width:32px;height:32px}
.kcb-app .kcb-brew-grid .kcb-brew b{font-size:13px;line-height:1.5}
.kcb-app .kcb-brew-grid .kcb-brew small{display:none}
.kcb-app .kcb-espresso-types{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.kcb-app .kcb-espresso-types h4{font-size:16px;margin:4px 0 8px;color:var(--brown)}
.kcb-app .kcb-espresso-types .kcb-espresso-type{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:14px 18px;text-align:right}
.kcb-app .kcb-espresso-type b{font-size:14px}
.kcb-app .kcb-espresso-type:after{content:'';width:17px;height:17px;border:1px solid #cbb7a5;border-radius:50%;flex-shrink:0;margin-right:10px}
.kcb-app .kcb-espresso-type.is-selected:after{background:var(--brown);box-shadow:inset 0 0 0 4px #fff}
.kcb-app .kcb-brew-back{justify-self:start;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--brown);border-radius:12px;background:var(--brown);color:#fff;padding:10px 18px;min-height:44px;font:inherit;font-size:13px;font-weight:700;line-height:1.5;box-shadow:0 3px 8px #40271918;cursor:pointer;transition:background .18s,box-shadow .18s}
.kcb-app .kcb-brew-back:hover{background:#452a1c;color:#fff;box-shadow:0 4px 12px #40271928}
.kcb-app .kcb-brew:focus-visible,.kcb-app .kcb-brew-back:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.kcb-app .kcb-quick-brews button{min-width:0;font-size:12px}
@media(max-height:680px) and (max-width:700px){
 .kcb-app.is-workspace [data-kcb-step="2"]>.kcb-step-heading{display:none}
 .kcb-app.is-workspace .kcb-espresso-types{gap:3px}
 .kcb-app.is-workspace .kcb-espresso-types h4{font-size:14px;line-height:21px;margin:0}
 .kcb-app.is-workspace .kcb-espresso-types .kcb-brew-back{min-height:44px;padding:8px 16px}
 .kcb-app.is-workspace .kcb-espresso-types .kcb-espresso-type{min-height:44px;padding:8px 12px}
 .kcb-app.is-workspace .kcb-brew-grid{gap:6px}
 .kcb-app.is-workspace .kcb-brew-grid .kcb-brew{min-height:66px;padding:5px 3px;gap:2px}
 .kcb-app.is-workspace .kcb-brew-grid .kcb-brew>i,.kcb-app.is-workspace .kcb-brew-grid .kcb-brew svg{width:28px;height:28px}
 .kcb-app.is-workspace .kcb-brew-grid .kcb-brew b{font-size:11px}
}

/* Safari toolbar changes can reduce app space without changing media-query height. */
@container kcb-workspace (max-height:660px) {
  .is-workspace .kcb-origin small { display:none; }
  .is-workspace .kcb-origin .kcb-flag { height:22px; font-size:20px; margin-bottom:2px; }
  .is-workspace .kcb-origin { min-height:60px!important; padding:6px; }
  .is-workspace .kcb-step-heading p { display:none; }
  .is-workspace .kcb-step-heading { margin-bottom:8px; }
  .is-workspace .kcb-origin-section+.kcb-origin-section { margin-top:8px; padding-top:8px; }
  .is-workspace .kcb-origin { min-height:86px; }
  .is-workspace .kcb-presets { margin-bottom:8px; }
  .is-workspace .kcb-ratio-box { padding:10px; }
  .is-workspace .kcb-taste-bars { margin-top:10px; }
  .is-workspace .kcb-result-copy { font-size:11px; }
  .kcb-app.is-workspace .kcb-final { flex-direction:row; gap:12px; padding:10px; }
  .kcb-app.is-workspace .kcb-final .kcb-pouch-preview { width:120px; }
  .is-workspace .kcb-weight { min-height:64px; padding:10px; }
  .is-workspace .kcb-brew { min-height:65px; }
  .is-workspace .kcb-taste-bars { display:none; }
  .is-workspace .kcb-result-copy { display:none; }
  .is-workspace .kcb-presets button { min-height:36px; padding:4px 8px; }
  .is-workspace .kcb-ratio-values>div { padding:4px; }
  .is-workspace .kcb-ratio-track { margin:10px 0 4px; }
  .is-workspace .kcb-ratio-ends { display:none; }
}
@container kcb-workspace (max-height:468px) {
  .is-workspace .kcb-origin-head { margin-bottom:4px; }
  .is-workspace .kcb-origin-head h4 { font-size:12px; line-height:1.5; }
  .is-workspace .kcb-origin-head span { line-height:1.5; }
  .kcb-app.is-workspace .kcb-origin-grid.is-carousel { grid-auto-columns:76px; }
  .is-workspace [data-kcb-step="4"]>.kcb-step-heading { display:none; }
  .is-workspace .kcb-step-heading { margin-bottom:4px; }
  .is-workspace .kcb-ratio-box { padding:8px; }
  .is-workspace .kcb-ratio-track { margin-top:4px; }
  .is-workspace .kcb-choice { min-height:72px; padding:8px; }
  .is-workspace .kcb-brew { min-height:49px; padding:6px; }
  .is-workspace .kcb-brew small { display:none; }
  .is-workspace .kcb-weight { min-height:48px; padding:6px 12px; }
  .is-workspace .kcb-weight small { display:none; }
  .is-workspace .kcb-ratio-values strong { font-size:22px; }
  .is-workspace .kcb-ratio-values span { font-size:10px; }
  .kcb-app.is-workspace .kcb-final { display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows: auto auto auto; align-content:center; gap:4px 10px; }
  .kcb-app.is-workspace .kcb-final .kcb-pouch-preview { width:96px; grid-row:1/3; }
  .is-workspace .kcb-ready-copy { display:contents; }
  .is-workspace .kcb-ready-copy h3 { font-size:17px; margin:0; align-self:end; }
  .kcb-app.is-workspace .kcb-ready-copy p { font-size:11px; align-self:start; }
  .kcb-app.is-workspace .kcb-ready-copy>strong { grid-column:1/-1; font-size:24px; margin-top:4px; }
}
@container kcb-workspace (max-height:548px) and (max-width:700px) {
 .kcb-app.is-workspace [data-kcb-step="2"]>.kcb-step-heading{display:none}
 .kcb-app.is-workspace .kcb-espresso-types{gap:3px}
 .kcb-app.is-workspace .kcb-espresso-types h4{font-size:14px;line-height:21px;margin:0}
 .kcb-app.is-workspace .kcb-espresso-types .kcb-brew-back{min-height:44px;padding:8px 16px}
 .kcb-app.is-workspace .kcb-espresso-types .kcb-espresso-type{min-height:44px;padding:8px 12px}
 .kcb-app.is-workspace .kcb-brew-grid{gap:6px}
 .kcb-app.is-workspace .kcb-brew-grid .kcb-brew{min-height:66px;padding:5px 3px;gap:2px}
 .kcb-app.is-workspace .kcb-brew-grid .kcb-brew>i,.kcb-app.is-workspace .kcb-brew-grid .kcb-brew svg{width:28px;height:28px}
 .kcb-app.is-workspace .kcb-brew-grid .kcb-brew b{font-size:11px}
}

/* Keep the final composition centered on every phone, regardless of viewport height. */
@media(max-width:700px) {
  .kcb-app.is-workspace [data-kcb-step="6"] { overflow:auto; }
  .kcb-app.is-workspace .kcb-final {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:auto;
    min-height:100%;
    gap:10px;
    padding:12px;
    text-align:center;
  }
  .kcb-app.is-workspace .kcb-final .kcb-pouch-preview {
    width:clamp(88px,20cqh,155px);
    margin-inline:auto;
    grid-row:auto;
    flex:0 0 auto;
  }
  .kcb-app.is-workspace .kcb-ready-copy {
    display:block;
    width:100%;
    max-width:360px;
    margin-inline:auto;
    text-align:center;
  }
  .kcb-app.is-workspace .kcb-ready-copy h3 { margin:0 0 4px; font-size:18px; }
  .kcb-app.is-workspace .kcb-ready-copy p { margin:0; font-size:11px; line-height:1.75; }
  .kcb-app.is-workspace .kcb-ready-copy>strong { margin-top:6px; font-size:22px; }
}
@container kcb-workspace (max-height:500px) {
  .kcb-app.is-workspace .kcb-final { gap:3px; padding:6px; }
  .kcb-app.is-workspace .kcb-final .kcb-pouch-preview { width:88px; }
  .kcb-app.is-workspace .kcb-ready-copy h3 { margin-bottom:1px; font-size:15px; }
  .kcb-app.is-workspace .kcb-ready-copy p { font-size:9px; line-height:1.45; }
  .kcb-app.is-workspace .kcb-ready-copy>strong { margin-top:2px; font-size:18px; line-height:1.4; }
}