/* Contained feature card: no absolutely positioned button or fixed text height. */
/* Native touch gestures on the range are owned by the builder, not page scroll. */
.kcb-app .kcb-ratio-track input[data-kcb-ratio] { touch-action:none!important; }
.kcb-app { width:100%; max-width:100%; margin-inline:0; overflow:visible; }
.kcb-app :is(h1,h2,h3,h4,button,strong,b) { font-family:inherit; letter-spacing:normal; }
.kcb-app :is(button,a) { white-space:normal; }
.kcb-feature { min-width:0; border:1px solid #e0cfba; border-radius:28px; overflow:hidden; background:#fffaf2; box-shadow:0 20px 55px #402a1814; }
.kcb-feature-art { position:relative; height:240px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:24px; color:#f8e5cd; background:radial-gradient(ellipse at 55% 35%,#926648,#4b2d20 75%); }
.kcb-feature-art>span { font-size:16px; font-weight:700; }
.kcb-feature-art>small { align-self:flex-end; font-size:12px; }
.kcb-feature-art .kcb-cup { width:164px; height:164px; top:35px; right:calc(50% - 82px); border-width:14px; }
.kcb-feature-art .kcb-cup:after { width:40px; height:52px; left:-42px; top:36px; border-width:10px; border-right:0; }
.kcb-feature-art .kcb-cup i { right:30px; top:44px; width:66px; }
.kcb-feature-body { padding:26px; }
.kcb-feature-label { display:inline-block; padding:4px 10px; border-radius:6px; background:#efe4d5; color:#6e452c; font-size:12px; font-weight:700; }
.kcb-feature-body h2 { margin:12px 0 6px; font-size:clamp(22px,3vw,29px); line-height:1.5; color:#3c271c; overflow-wrap:anywhere; }
.kcb-feature-body p { margin:0; color:#766451; font-size:14px; }
.kcb-feature-ratio { display:flex; gap:10px; margin-top:20px; }
.kcb-feature-ratio>span { flex:1; padding:10px 8px; text-align:center; border-radius:10px; background:#ead2b3; color:#563722; font-size:13px; }
.kcb-feature-ratio>span+span { background:#533322; color:#fff5e7; }
.kcb-feature-ratio b { font-size:19px; margin-inline-end:5px; }
.kcb-feature-footer { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.kcb-feature-footer small { font-size:12px; color:#766451; }
.kcb-today-features { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.kcb-today-features li { padding:5px 9px; border:1px solid #ddcbb7; border-radius:99px; background:#fff8ed; color:#68442c; font-size:10px; }
.kcb-quick-quality { display:inline-block; margin-top:10px; padding:5px 10px; border-radius:99px; background:#e1f5eb; color:#176b5c; font-size:11px; font-weight:700; }
.kcb-app .kcb-feature-button { position:static; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; height:auto; min-height:50px; padding:12px 17px; border:0; border-radius:11px; background:#633c27; color:#fff; font:inherit; font-weight:700; line-height:1.65; box-shadow:none; cursor:pointer; transform:none; }
.kcb-app .kcb-feature-button:hover { background:#442818; }
.kcb-app .kcb-feature-button:before,.kcb-app .kcb-feature-button:after { content:none; }
.kcb-app .kcb-ratio-track input[data-kcb-ratio] { direction:rtl; padding:0; border:0; border-radius:0; box-shadow:none; max-width:none; }
.kcb-ratio-track>span { transition:none; }
.kcb-sticky-status,.kcb-builder { scroll-margin-top:calc(var(--kcb-mobile-top-offset,70px) + 16px); }
.kcb-app .kcb-step-heading h3,.kcb-app .kcb-hero h1 { white-space:normal; }
.kcb-app .kcb-actions button { height:auto; white-space:normal; line-height:1.65; }
.kcb-app .kcb-auto-name strong,.kcb-app [data-kcb-final-name] { white-space:normal; overflow-wrap:break-word; line-height:1.8; }
.kcb-app .kcb-auto-name p { margin:6px 0 10px; font-size:14px; line-height:1.9; color:#634d3d; }
.kcb-app [data-kcb-name-ratio] { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #dfceba; }
.kcb-app .kcb-final { grid-template-columns:minmax(150px,210px) minmax(0,1fr); padding:20px; gap:24px; background:linear-gradient(135deg,#633c28,#3e261c); }
.kcb-pouch-preview { container-type:inline-size; border-radius:15px; overflow:hidden; background:#f5ead8; }
.kcb-pouch-canvas { position:relative; width:100%; aspect-ratio:410 / 580; }
.kcb-app .kcb-pouch-image { position:absolute; width:180.488%; max-width:none; height:auto; left:-39.024%; top:-13.793%; mix-blend-mode:multiply; }
.kcb-pouch-label { position:absolute; left:41.46%; top:37.2%; width:40.24%; height:44.6%; min-width:0; padding:6% 4% 4%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(1px,1.5cqi,3px); overflow:hidden; color:#4e3020; background:#fff8e8; border:1px solid #e2c59c; border-radius:2px; box-shadow:1px 2px 3px #3b210c26; transform:skewY(-3.5deg); transform-origin:center; text-align:center; }
.kcb-app .kcb-pouch-logo { display:block; width:88%; max-height:22%; object-fit:contain; margin:0; flex:0 1 auto; mix-blend-mode:multiply; }
.kcb-app .kcb-pouch-label strong { max-width:100%; margin:clamp(2px,1.8cqi,4px) 0 0; font-size:clamp(7px,7.2cqi,15px); line-height:1.2; color:#4e3020; overflow-wrap:anywhere; text-wrap:balance; }
.kcb-pouch-label b { margin:0 0 clamp(1px,1cqi,2px); font-size:clamp(8px,6.6cqi,14px); line-height:1.2; white-space:nowrap; }
.kcb-pouch-label small { max-width:100%; overflow:hidden; font-size:clamp(4px,3.1cqi,6px); white-space:nowrap; line-height:1.25; }
.kcb-pouch-label>span { width:100%; padding-top:clamp(2px,2cqi,4px); margin-top:clamp(1px,1cqi,2px); flex:0 0 auto; overflow:hidden; border-top:1px solid #cdb38e; font-family:Arial,sans-serif; font-size:clamp(5px,4.5cqi,9px); line-height:1.2; color:#714829; white-space:nowrap; letter-spacing:0; }
.kcb-app .kcb-ready-copy h3 { color:#fff4e6; font-size:24px; margin:0 0 12px; }
.kcb-app .kcb-ready-copy p { color:#e7d6c6; font-size:14px; line-height:2; margin:0; }
.kcb-app .kcb-ready-copy>strong { font-size:20px; margin-top:16px; color:#fff4e6; }
@media(max-width:700px) {
  .kcb-app .kcb-final { grid-template-columns:minmax(120px,145px) minmax(0,1fr); padding:12px; gap:14px; }
  .kcb-pouch-label { gap:clamp(1px,1.2cqi,2px); padding:5% 4% 4%; }
  .kcb-app .kcb-pouch-label strong { font-size:clamp(7px,7.2cqi,11px); }
  .kcb-pouch-label b { font-size:clamp(7px,6.6cqi,11px); }
  .kcb-pouch-label small { display:none; }
  .kcb-pouch-label>span { font-size:clamp(5px,4.5cqi,7px); padding-top:clamp(2px,2cqi,3px); }
  .kcb-app .kcb-ready-copy h3 { font-size:18px; }
  .kcb-app .kcb-ready-copy p { font-size:12px; }
  .kcb-app .kcb-ready-copy>strong { font-size:15px; }
}
@media(max-width:390px) {
  .kcb-app .kcb-final { grid-template-columns:1fr; }
  .kcb-pouch-preview { width:180px; max-width:100%; justify-self:center; }
  .kcb-ready-copy { text-align:center; }
}
@media(max-width:700px) {
  .kcb-feature { border-radius:20px; }
  .kcb-feature-art { height:190px; padding:18px; }
  .kcb-feature-art .kcb-cup { width:138px; height:138px; right:calc(50% - 69px); top:24px; border-width:12px; }
  .kcb-feature-art .kcb-cup:after { top:28px; }
  .kcb-feature-body { padding:20px; }
  .kcb-feature-ratio { gap:8px; margin-top:16px; }
  .kcb-feature-body h2 { font-size:23px; }
  .kcb-app .kcb-step-heading p,.kcb-app .kcb-origin small { font-size:12px; }
  .kcb-app .kcb-auto-name small { font-size:12px; }
}
@media(hover:hover) { .kcb-app .kcb-feature-button:hover { background:#442818; } }
@media(hover:none) { .kcb-app button:hover { transform:none; } }

/* Final preview and post-cart suggestions. */
.kcb-app .kcb-final { display:flex; flex-direction:column; align-items:center; width:min(100%,480px); margin:26px auto 0; padding:26px; gap:20px; text-align:center; }
.kcb-app .kcb-final .kcb-pouch-preview { width:190px; max-width:100%; flex-shrink:0; }
.kcb-app .kcb-ready-copy { width:100%; text-align:center; }
.kcb-app .kcb-ready-copy>strong { display:block; font-size:clamp(26px,4vw,34px); line-height:1.6; margin-top:18px; }
.kcb-app .kcb-ready-copy p { font-size:14px; line-height:1.9; }
.kcb-snacks { width:min(560px,calc(100% - 28px)); max-height:calc(100dvh - 40px); margin:auto; padding:30px 24px 20px; overflow:auto; overscroll-behavior:contain; border:1px solid #eadccb; border-radius:24px; background:#fffaf3; color:#40291c; text-align:center; box-shadow:0 24px 100px #24150c55; }
.kcb-snacks::backdrop { background:#20120c99; backdrop-filter:blur(5px); }
.kcb-snacks-close { position:absolute; top:12px; left:12px; margin:0; }
.kcb-app .kcb-snacks-close button { display:grid; place-items:center; width:44px; height:44px; padding:0; background:#eee3d5; color:#513522; border:0; border-radius:50%; font-size:26px; cursor:pointer; }
.kcb-snacks-success { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 12px; border-radius:50%; color:#fff; background:#65704a; font-size:24px; }
.kcb-app .kcb-snacks-confirmation { color:#637046; font-size:13px; margin:0 0 12px; }
.kcb-snacks h2 { color:#40291c; font-size:25px; line-height:1.6; margin:0 0 8px; }
.kcb-snacks p { color:#786652; font-size:14px; }
.kcb-snacks-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:22px 0; }
.kcb-app .kcb-snacks-grid a { display:flex; align-items:center; gap:9px; min-height:72px; padding:12px; border:1px solid #e4d4bf; border-radius:14px; background:#f5eadb; color:#563821; text-align:right; }
.kcb-snacks-grid a>span { font-size:27px; flex-shrink:0; }
.kcb-snacks-grid b { font-size:13px; overflow-wrap:anywhere; }
.kcb-snacks-grid i { font-style:normal; margin-right:auto; }
.kcb-snacks-grid a:hover { background:#edddc7; }
.kcb-snacks-cart { width:100%; margin-top:8px; }
.kcb-app .kcb-snacks-dismiss { display:block; margin:12px auto 0; min-height:44px; border:0; background:transparent; color:#74543c; box-shadow:none; cursor:pointer; }
@media(max-width:390px) { .kcb-snacks { padding:24px 16px 16px; } .kcb-snacks-grid { grid-template-columns:1fr; } .kcb-snacks h2 { font-size:21px; } }
@media(max-width:700px) {
  /* Reserve the space displaced by the toolbar offset, so actions cannot cover the final copy. */
  .kcb-app .kcb-actions { margin-top:calc(var(--kcb-mobile-bottom-offset,70px) + env(safe-area-inset-bottom) + 24px); }
}