/* Final shared geometry for every coffee demo. Loaded last; brand colours stay in the theme files. */

/* Two equal, centred pill tabs. No moving thumb and no second outline on click. */
html body #widget#widget #mode{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;gap:4px!important;width:auto!important;height:48px!important;min-height:48px!important;margin:8px 12px!important;padding:4px!important;border:1px solid #d1d4d8!important;border-radius:999px!important;background:#f2f3f4!important;box-shadow:none!important;box-sizing:border-box!important;overflow:hidden!important;}
html body #widget#widget #mode .mode__thumb{display:none!important;}
html body #widget#widget #mode .mode__button{position:relative!important;inset:auto!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:38px!important;min-height:38px!important;min-width:0!important;margin:0!important;padding:0 8px!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:#555!important;font-size:12px!important;line-height:1.2!important;}
html body #widget#widget #mode .mode__button.is-active{background:var(--ink,#222)!important;color:#fff!important;}
html body #widget#widget #mode .mode__button:focus:not(:focus-visible){outline:none!important;}
html body #widget#widget #mode .mode__button:focus-visible{outline:2px solid var(--kraft,#888)!important;outline-offset:-3px!important;}

/* Footer credit sits under a thin divider. */
html body #widget#widget .widget__note{position:static!important;margin:0!important;padding:8px 12px!important;min-height:32px!important;border-top:1px solid #d1d4d8!important;background:#fff!important;text-align:center!important;box-sizing:border-box!important;}
html body #widget#widget .widget__note a{font-size:10px!important;line-height:15px!important;}

/* Answer cards: one light border, the picture fills its whole area. */
html body #widget#widget .option{padding:0!important;border:1px solid #d5d7d9!important;border-radius:20px!important;outline:none!important;box-shadow:none!important;background:#fff!important;overflow:hidden!important;}
html body #widget#widget .option.is-selected{border-color:var(--ink,#222)!important;box-shadow:none!important;}
html body #widget#widget .option:focus-visible{outline:2px solid var(--kraft,#888)!important;outline-offset:2px!important;}
html body #widget#widget .option__visual{display:block!important;width:100%!important;aspect-ratio:5/4!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#f4f2ee!important;overflow:hidden!important;}
html body #widget#widget .option__visual img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;object-fit:cover!important;object-position:center!important;}
html body #widget#widget .option__copy{padding:10px 12px 12px!important;}

/* Result shows the whole product. */
html body #widget#widget .result__photo{object-fit:contain!important;background:#fff!important;}
html body #widget#widget .result__nomatch{margin:0 0 12px!important;padding:12px 14px!important;border:1px solid #d5d7d9!important;border-radius:16px!important;background:#faf8f4!important;font-size:12px!important;line-height:1.5!important;color:var(--text,#222)!important;}

/* Real logo: clean mark on the brand circle. */
.cq-mark{display:block;width:100%;height:100%;background:var(--cq-art) center / contain no-repeat;transition:background-color .16s;}
/* Closed bubble inverts on hover. */
html.cq-logo-mask .cq-mark{background:var(--cq-fg,#fff);-webkit-mask:var(--cq-art) center / contain no-repeat;mask:var(--cq-art) center / contain no-repeat;}
html.cq-logo-mask body .launcher__button#open#open{border:1px solid var(--ink,#222)!important;transition:background-color .16s!important;transform:none!important;}
html.cq-logo-mask body .launcher__button#open#open:hover,html.cq-logo-mask body .launcher__button#open#open:focus-visible{background:var(--cq-fg,#fff)!important;}
html.cq-logo-mask body .launcher__button#open#open:hover .cq-mark,html.cq-logo-mask body .launcher__button#open#open:focus-visible .cq-mark{background:var(--ink,#222);}
html body .launcher__button#open{display:grid!important;place-items:center!important;padding:11px!important;border:0!important;border-radius:50%!important;background:var(--ink,#222)!important;overflow:hidden!important;box-sizing:border-box!important;}
html body #widget#widget .msg__avatar{display:grid!important;place-items:center!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex:0 0 36px!important;padding:6px!important;border:0!important;border-radius:50%!important;background:var(--ink,#222)!important;overflow:hidden!important;box-sizing:border-box!important;}
/* Filled badge artwork stays original on a white circle. */
html.cq-logo-plain body .launcher__button#open#open,html.cq-logo-plain body #widget#widget .msg__avatar.msg__avatar{background:#fff!important;border:1px solid #d5d7d9!important;}
html.cq-logo-plain body .launcher__button#open#open{padding:6px!important;}html.cq-logo-plain body #widget#widget .msg__avatar.msg__avatar{padding:3px!important;}
/* Header logo without a white sticker. */
html body #widget#widget .widget__brand>img{filter:none!important;background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:contain!important;}
html body #widget#widget .widget__brand>img.cq-header-pending{visibility:hidden!important;}
html body #widget#widget .widget__brand>img.cq-header-plate{background:#fff!important;border-radius:50%!important;padding:3px!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;}

/* Result: answers the coffee meets, as ticked chips. */
html body #widget#widget .fits{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;}
html body #widget#widget .fits span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface-2,#eef5f4);font-size:12px;line-height:1.2;font-weight:600;color:var(--ink,#222);}
html body #widget#widget .fits span::before{content:"✓";font-weight:700;}
html body #widget#widget .result__photo{width:132px!important;height:auto!important;max-height:190px!important;}

/* Hover goes to the brand's second colour (or a deeper shade), the mark keeps its colour. */
html.cq-logo-mask body .launcher__button#open#open{border:0!important;}
html.cq-logo-mask body .launcher__button#open#open:hover,html.cq-logo-mask body .launcher__button#open#open:focus-visible{background:var(--cq-hover,var(--kraft,#555))!important;}
html.cq-logo-mask body .launcher__button#open#open:hover .cq-mark,html.cq-logo-mask body .launcher__button#open#open:focus-visible .cq-mark{background:var(--cq-fg,#fff);}
html.cq-logo-mask body .launcher__button#open#open:hover .cq-mark,html.cq-logo-mask body .launcher__button#open#open:focus-visible .cq-mark{background:var(--cq-hover-fg,#fff);}
html body #widget#widget #mode .mode__button:focus,html body #widget#widget #mode .mode__button:focus-visible{outline:none!important;box-shadow:none!important;}

html.cq-logo-mask body #open#open{background:var(--cq-rest)!important;}html.cq-logo-mask body #open#open .cq-mark{background:var(--cq-fg)!important;}html.cq-logo-mask body #open#open:hover,html.cq-logo-mask body #open#open:focus-visible{background:var(--cq-hover)!important;}html.cq-logo-mask body #open#open:hover .cq-mark,html.cq-logo-mask body #open#open:focus-visible .cq-mark{background:var(--cq-hover-fg)!important;}

html.cq-logo-mask body .launcher__button#open#open{background:var(--cq-rest)!important;}html.cq-logo-mask body .launcher__button#open#open .cq-mark{background:var(--cq-fg)!important;}html.cq-logo-mask body .launcher__button#open#open:hover,html.cq-logo-mask body .launcher__button#open#open:focus-visible{background:var(--cq-hover)!important;}html.cq-logo-mask body .launcher__button#open#open:hover .cq-mark,html.cq-logo-mask body .launcher__button#open#open:focus-visible .cq-mark{background:var(--cq-hover-fg)!important;}html.cq-logo-mask body #widget#widget .msg__avatar .cq-mark{background:var(--cq-chat-fg,#fff)!important;}

.coffee-more-matches{margin:18px 0;padding:14px;border:1px solid #d5d7d9;border-radius:20px;}.coffee-more-matches summary{cursor:pointer;font-weight:650;}.coffee-match-link{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #eee;color:inherit;text-decoration:none;}.coffee-match-link img{width:80px;height:100px;object-fit:contain;}.coffee-match-link span{display:grid;gap:6px;}.coffee-match-link small{color:#68717a;}

/* Preserve photo and copy size; scroll a short screen instead of clipping descriptions. */
@media(min-width:761px){/* One panel size for every chatbot: 552 x 760, narrowing in the same proportion on a low window. */
html body #widget#widget{width:min(552px,calc((100dvh - 44px) * .7263),calc(100vw - 28px))!important;height:min(760px,calc(100dvh - 44px))!important;right:22px!important;bottom:22px!important;left:auto!important;top:auto!important;}}
html body #widget#widget .advisor.is-questions{overflow-y:auto!important;display:flex!important;flex-direction:column!important;}
html body #widget#widget .advisor.is-questions .options{flex:0 0 auto!important;grid-auto-rows:1fr!important;grid-template-rows:none!important;height:auto!important;min-height:0!important;}
html body #widget#widget .advisor.is-questions .option{height:auto!important;min-height:0!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;}
html body #widget#widget .advisor.is-questions .option__visual{height:auto!important;aspect-ratio:3/2!important;min-height:0!important;}
html body #widget#widget .advisor.is-questions .option__copy{height:auto!important;max-height:none!important;overflow:visible!important;}

html body #widget#widget .option__visual.coffee-double-cup{display:grid!important;grid-template-columns:1fr 1fr!important;}html body #widget#widget .coffee-double-cup img{min-width:0!important;height:100%!important;width:100%!important;}

/* The panel takes focus when it opens so the keyboard lands inside it; it is not a control and shows no ring. */
html body #widget#widget:focus,html body #widget#widget:focus-visible{outline:none!important;}
/* Question steps never scroll: the answers share the height the panel has, photos take what is left. */
html body #widget#widget .advisor.is-questions{display:flex!important;flex-direction:column!important;overflow:hidden!important;}
html body #widget#widget .advisor.is-questions .question{flex:0 0 auto!important;}
html body #widget#widget .advisor.is-questions .options{flex:1 1 0!important;min-height:0!important;max-height:540px!important;height:auto!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;align-content:stretch!important;}
html body #widget#widget .advisor.is-questions .option{min-height:0!important;height:auto!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;}
html body #widget#widget .advisor.is-questions .option .option__visual{aspect-ratio:auto!important;height:100%!important;min-height:0!important;}
html body #widget#widget .advisor.is-questions .option .option__visual img{height:100%!important;min-height:0!important;}

/* An untouched logo rests white-on-black and turns to its own colours on white on hover. */
html.cq-logo-plain.cq-logo-keep body .launcher__button#open#open{background:#141414!important;border:1px solid #141414!important;padding:8px!important;transition:background-color .16s,border-color .16s!important;}
html.cq-logo-plain.cq-logo-keep body .launcher__button#open#open .cq-mark{filter:grayscale(1) invert(1) brightness(1.25);transition:filter .16s;}
html.cq-logo-plain.cq-logo-keep body .launcher__button#open#open:hover,html.cq-logo-plain.cq-logo-keep body .launcher__button#open#open:focus-visible{background:#fff!important;border-color:#d9d4c8!important;}
html.cq-logo-plain.cq-logo-keep body .launcher__button#open#open:hover .cq-mark,html.cq-logo-plain.cq-logo-keep body .launcher__button#open#open:focus-visible .cq-mark{filter:none;}
/* No ring around the bubble on hover or focus, on any demo: only the colours change. */
html body .launcher__button#open#open,html body .launcher__button#open#open:hover,html body .launcher__button#open#open:focus,html body .launcher__button#open#open:focus-visible,html body .launcher__button#open#open:active{box-shadow:0 10px 24px -12px rgba(35,24,14,.45)!important;outline:none!important;transform:none!important;}
/* "Viac info" under the hero buttons, as on the other demos. */
.mcb-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.mcb-more svg{width:14px;height:14px;}

/* A short window cannot hold the one-screen layout: the page then grows and scrolls instead of
   letting the price card slide over the buttons. */
@media (max-height:680px),(max-width:640px){html:not(#_):not(#_),html:not(#_):not(#_) body,html:not(#_):not(#_) body>div[id$="-root"]{height:auto!important;min-height:100%!important;max-height:none!important;overflow:visible!important;}html:not(#_):not(#_){overflow-y:auto!important;}html:not(#_):not(#_) body .mcb-page{height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important;grid-template-rows:auto!important;grid-auto-rows:auto!important;align-content:space-between!important;row-gap:18px!important;}html:not(#_):not(#_) body .mcb-page .mcb-main{height:auto!important;min-height:0!important;overflow:visible!important;}}
/* On a phone the page scrolls, and leaves room so the bubble never sits on the price card. */
@media (max-width:640px){html:not(#_):not(#_) body .mcb-page{padding-bottom:0!important;}}

/* The more-info sheet is a white card: its text is dark whatever the page theme is, and its
   close button shows no ring. */
body .mcb-offer .mcb-offer-card h2,body .mcb-offer .mcb-offer-card li b{color:#1c1a19!important;}
body .mcb-offer .mcb-offer-card li small{color:#55504a!important;}
body .mcb-offer .mcb-offer-close,body .mcb-offer .mcb-offer-close:focus,body .mcb-offer .mcb-offer-close:focus-visible{outline:none!important;box-shadow:none!important;}
/* A wide wordmark gets more room in the bubble. */
html.cq-logo-wide body .launcher__button#open#open{padding:7px!important;}

/* The open fixed panel must not retain the landing page scrollbar. */
html.widget-open:not(#_):not(#_):not(#_),html.widget-open:not(#_):not(#_):not(#_) body{overflow:hidden!important;height:100dvh!important;}

/* Two answers fill the question area as two wide cards instead of leaving an empty row. */
html body #widget#widget#widget .advisor.is-questions .options:not(:has(> :nth-child(3))){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;}

/* The result shows the coffee, not the step header: "Zmeniť odpovede" stays in the footer beside the shop button. */
html body #widget#widget#widget #advisorScreen:has(> .advisor.is-result) > .advisor-top{display:none!important;}
html body #widget#widget#widget #advisorScreen:has(> .advisor.is-result) > .advisor.is-result{padding-top:4px!important;}
@media (min-width:360px){html body #widget#widget#widget #advisorScreen:has(> .advisor.is-result) > .advisor-foot{display:flex!important;flex-direction:row-reverse!important;align-items:center!important;gap:12px!important;padding-top:10px!important;padding-bottom:10px!important;}}
html body #widget#widget#widget#widget #advisorScreen:has(> .advisor.is-result) > .advisor-foot > .cta{flex:1 1 auto!important;margin:0!important;white-space:nowrap!important;min-height:50px!important;height:50px!important;font-size:15px!important;}
html body #widget#widget#widget#widget #advisorScreen:has(> .advisor.is-result) > .advisor-foot > .foot-row{flex:0 0 auto!important;margin:0!important;}
html body #widget#widget#widget#widget #advisorScreen:has(> .advisor.is-result) > .advisor-foot #restart{font-size:13px!important;white-space:nowrap!important;padding:0 2px!important;}

/* Result: the coffee and its attributes first, without boxed repetition. */
html body #widget#widget#widget#widget .advisor.is-result .result__badge:not(.is-nearest){display:none!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__badge.is-nearest{display:inline-block!important;margin:0 0 8px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__hero{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;padding:12px 14px 10px!important;margin:0!important;min-height:0!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__photo{width:72px!important;height:72px!important;min-height:0!important;object-fit:contain!important;box-shadow:none!important;margin:0!important;padding:0!important;border-radius:12px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__headline{gap:6px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__headline h2{font-size:17px!important;line-height:1.22!important;margin:0 0 6px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__body{padding:0 14px 14px!important;gap:8px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__reasons{gap:0!important;margin:0!important;padding:0!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__reasons li{border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;padding:7px 0 7px 24px!important;margin:0!important;position:relative!important;display:block!important;border-top:1px solid rgba(0,0,0,.08)!important;font-size:13px!important;line-height:1.35!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__reasons li::before{content:"✓"!important;position:absolute!important;left:2px!important;top:7px!important;font-weight:700!important;color:var(--brand,#1b1b1b)!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__reasons li b{display:inline!important;font-size:13px!important;margin:0 4px 0 0!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__reasons li b::after{content:" –";font-weight:400;}
html body #widget#widget#widget#widget .advisor.is-result .result__reasons li span{display:inline!important;font-size:13px!important;}
html body #widget#widget#widget#widget .advisor.is-result .facts{gap:8px!important;margin:4px 0 0!important;}
html body #widget#widget#widget#widget .advisor.is-result .fact{padding:8px 10px!important;min-height:0!important;}
@media (max-width:359px){
html body #widget#widget#widget#widget .advisor.is-result .result__hero{grid-template-columns:52px minmax(0,1fr)!important;gap:10px!important;padding:10px 12px 8px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__photo{width:52px!important;height:52px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__headline h2{font-size:15.5px!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__headline{flex-direction:row!important;flex-wrap:wrap!important;}
html body #widget#widget#widget#widget .advisor.is-result .result__body{padding:0 12px 12px!important;}
}

/* Actual coffee differences are compact text choices, not repeated packshots. */
#widget#widget#widget .options.is-difference{display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:auto!important;gap:10px!important;flex:0 0 auto!important;height:auto!important;align-content:start!important;}
#widget#widget#widget .options.is-difference .option{display:flex!important;flex-direction:column!important;justify-content:center!important;min-height:64px!important;height:auto!important;padding:12px 14px!important;}
#widget#widget#widget .options.is-difference .option__copy{padding:0!important;min-height:0!important;}
#widget#widget#widget .options.is-difference .option__copy b{font-size:15px!important;line-height:1.3!important;}
#widget#widget#widget .options.is-difference .option__copy small{font-size:12px!important;line-height:1.4!important;}