#snackys-tpl .to-search-searchhelp[hidden], html .to-search-searchhelp[hidden], #snackys-tpl .to-search-searchhelp__list[hidden], html .to-search-searchhelp__list[hidden] { display: none !important; } #snackys-tpl .to-search-searchhelp, html .to-search-searchhelp { flex: 0 0 auto; min-width: 0; margin-bottom: var(--spacing-4); } #snackys-tpl .to-search-searchhelp__content, html .to-search-searchhelp__content { padding: var(--spacing-3) var(--spacing-4) var(--spacing-4); border: 2px solid var(--color-primary-50); border-radius: var(--border-radius-sm, 8px); background: var(--color-white); box-shadow: inset 0px 90px 0px -17px var(--color-primary-100), inset -20px -20px 60px -60px var(--color-primary-100); } #snackys-tpl .to-search-searchhelp__intro, html .to-search-searchhelp__intro { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-6); } #snackys-tpl .to-search-searchhelp__intro-copy, html .to-search-searchhelp__intro-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } #snackys-tpl .to-search-searchhelp__brand, html .to-search-searchhelp__brand { display: block; width: var(--spacing-24); height: var(--spacing-6); margin-bottom: calc(-0.5 * var(--spacing-1)); background: var(--color-white); -webkit-mask: url("https://cdn.toneroffice.de/plugins/wi_tosearch/frontend/img/toneroffice-logo.svg") center / contain no-repeat; mask: url("https://cdn.toneroffice.de/plugins/wi_tosearch/frontend/img/toneroffice-logo.svg") center / contain no-repeat; } #snackys-tpl .to-search-searchhelp__toni, html .to-search-searchhelp__toni { display: block; flex: 0 0 50px; width: 50px; height: 50px; box-sizing: border-box; border: 2px solid var(--color-tertiary-75); border-radius: 50%; background: var(--color-white) url("https://cdn.toneroffice.de/plugins/wi_tosearch/frontend/img/toni.svg") top center / 140% no-repeat; } #snackys-tpl .to-search-searchhelp__intro-label, html .to-search-searchhelp__intro-label { color: var(--color-white) !important; font-size: 16px; font-weight: normal; } #snackys-tpl .to-search-searchhelp__content p, html .to-search-searchhelp__content p { margin: 0; min-height: calc(2 * 1.35em); color: var(--color-neutral); font-size: 16px; line-height: 1.35; } #snackys-tpl .to-search-searchhelp__result-header, html .to-search-searchhelp__result-header { display: none; } #snackys-tpl .to-search-searchhelp.has-selection .to-search-searchhelp__result-header, html .to-search-searchhelp.has-selection .to-search-searchhelp__result-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-bottom: var(--spacing-4); } #snackys-tpl .to-search-modal .to-search-searchhelp .to-search-searchhelp__result-title[hidden], html .to-search-modal .to-search-searchhelp .to-search-searchhelp__result-title[hidden] { display: none !important; } #snackys-tpl .to-search-modal .to-search-searchhelp .to-search-searchhelp__result-title, html .to-search-modal .to-search-searchhelp .to-search-searchhelp__result-title { margin: 0; color: var(--color-primary-100); font-size: var(--font-size-h6); font-weight: bold; } #snackys-tpl .to-search-modal .to-search-searchhelp__back, html .to-search-modal .to-search-searchhelp__back { display: flex; flex: 0 0 var(--spacing-5); align-items: center; justify-content: center; width: var(--spacing-5); height: var(--spacing-5); padding: 0; border: 0; background: transparent; color: var(--color-primary-100); cursor: pointer; } #snackys-tpl .to-search-searchhelp__back svg, html .to-search-searchhelp__back svg { display: block; width: var(--spacing-5); height: var(--spacing-5); } #snackys-tpl .to-search-searchhelp.has-selection .to-search-searchhelp__content p, html .to-search-searchhelp.has-selection .to-search-searchhelp__content p { display: none; } #snackys-tpl .to-search-searchhelp.has-selection .to-search-searchhelp__result-header, html .to-search-searchhelp.has-selection .to-search-searchhelp__result-header { margin: 0; } #snackys-tpl .to-search-searchhelp__switch[hidden], html .to-search-searchhelp__switch[hidden] { display: none !important; } #snackys-tpl .to-search-modal .to-search-searchhelp__switch, html .to-search-modal .to-search-searchhelp__switch { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); margin: var(--spacing-4) auto 0; padding: 0; border: 0; background: transparent; color: var(--color-primary-100); font-size: var(--font-size-xs, 13.3px); font-weight: 400; text-align: center; text-decoration: none; text-transform: none; cursor: pointer; } #snackys-tpl .to-search-searchhelp__switch svg, html .to-search-searchhelp__switch svg { display: block; flex: 0 0 12.5px; width: 12.5px; height: 12.5px; } #snackys-tpl .to-search-searchhelp__question-term, html .to-search-searchhelp__question-term { font-weight: 700; } #snackys-tpl .to-search-searchhelp__divider, html .to-search-searchhelp__divider { position: relative; display: block; width: 100%; margin: var(--spacing-3) 0; border-top: 2px solid var(--color-tertiary-75); } #snackys-tpl .to-search-searchhelp__divider--result, html .to-search-searchhelp__divider--result { display: none; } #snackys-tpl .to-search-searchhelp.has-selection .to-search-searchhelp__divider--result, html .to-search-searchhelp.has-selection .to-search-searchhelp__divider--result { display: block; width: calc(100% + var(--spacing-4) + var(--spacing-4)); margin: var(--spacing-3) calc(-1 * var(--spacing-4)) var(--spacing-6); clip-path: inset(calc(-1 * var(--spacing-4)) 0); } #snackys-tpl .to-search-searchhelp__divider::after, html .to-search-searchhelp__divider::after { content: ""; position: absolute; top: -1px; left: 0em; width: var(--spacing-4); height: var(--spacing-4); box-sizing: border-box; background: var(--color-white); border: 2px solid var(--color-tertiary-75); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; } #snackys-tpl .to-search-searchhelp__cursor, html .to-search-searchhelp__cursor { display: none; width: 1px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -0.15em; animation: to-search-help-cursor .65s steps(1, end) infinite; } #snackys-tpl .to-search-searchhelp.is-typing .to-search-searchhelp__cursor, html .to-search-searchhelp.is-typing .to-search-searchhelp__cursor { display: inline-block; } @keyframes to-search-help-cursor { 50% { opacity: 0; } } #snackys-tpl .to-search-searchhelp__selection, html .to-search-searchhelp__selection { width: calc(100% + var(--spacing-4) + var(--spacing-4)); max-height: 0; overflow: hidden; margin: 0 calc(-1 * var(--spacing-4)); opacity: 0; visibility: hidden; transform: translateY(var(--spacing-3)); transition: max-height .38s ease, opacity .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s; } #snackys-tpl .to-search-searchhelp.is-ready .to-search-searchhelp__selection, html .to-search-searchhelp.is-ready .to-search-searchhelp__selection { max-height: calc(var(--spacing-24) * 4); opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } #snackys-tpl .to-search-searchhelp__ai, html .to-search-searchhelp__ai { display: none; } #snackys-tpl .to-search-searchhelp.is-ai-enabled .to-search-searchhelp__ai, .to-search-searchhelp.is-ai-enabled .to-search-searchhelp__ai { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-3); width: calc(100% - var(--spacing-4) - var(--spacing-4)); min-height: var(--spacing-12); margin: var(--spacing-4) var(--spacing-4) 0; padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3); border: 2px dashed var(--color-tertiary-75); border-radius: var(--border-radius-sm, 8px); background: var(--color-white); box-shadow: inset calc(-1 * var(--spacing-8)) 0 0 var(--color-secondary-50); color: var(--color-primary-100); font-size: 16px; font-weight: 400; text-align: left; text-transform: none; cursor: pointer; transition: transform .2s ease, border-color .2s ease; } #snackys-tpl .to-search-searchhelp.is-ai-enabled .to-search-searchhelp__ai:hover, #snackys-tpl .to-search-searchhelp.is-ai-enabled .to-search-searchhelp__ai:focus-visible, .to-search-searchhelp.is-ai-enabled .to-search-searchhelp__ai:hover, .to-search-searchhelp.is-ai-enabled .to-search-searchhelp__ai:focus-visible { border-color: var(--color-primary-100); transform: scale(1.01); } #snackys-tpl .to-search-searchhelp__ai svg, html .to-search-searchhelp__ai svg { display: block; flex: 0 0 var(--spacing-5); width: var(--spacing-5); height: var(--spacing-5); stroke: currentColor; } #snackys-tpl .to-search-searchhelp.has-selection .to-search-searchhelp__selection, html .to-search-searchhelp.has-selection .to-search-searchhelp__selection { display: none; } #snackys-tpl .to-search-searchhelp__choices, html .to-search-searchhelp__choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-2); margin: var(--spacing-4) var(--spacing-4) 0; } #snackys-tpl .to-search-modal .to-search-searchhelp__choices button, html .to-search-modal .to-search-searchhelp__choices button { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-3); min-width: 0; min-height: var(--spacing-16); padding: var(--spacing-1) calc(var(--spacing-2) - 2px) var(--spacing-1) var(--spacing-3); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm, 8px); background: var(--color-white); box-shadow: inset calc(-1 * var(--spacing-8)) 0 0 var(--color-secondary-50); color: var(--color-primary-100); font-size: var(--font-size-h6); font-weight: 600; text-transform: none; cursor: pointer; text-align: left; transition: transform .2s ease, border-color .2s ease, color .2s ease; } #snackys-tpl .to-search-searchhelp__choice-icon, html .to-search-searchhelp__choice-icon { display: block; width: var(--spacing-12); height: var(--spacing-12); flex: 0 0 auto; stroke: var(--color-neutral); } #snackys-tpl .to-search-searchhelp__choice-label, html .to-search-searchhelp__choice-label { flex: 1 1 auto; min-width: 0; } #snackys-tpl .to-search-searchhelp__choice-arrow, html .to-search-searchhelp__choice-arrow { display: block; flex: 0 0 var(--spacing-5); width: var(--spacing-5); height: var(--spacing-5); pointer-events: none; } #snackys-tpl .to-search-searchhelp__choice-icon [stroke="#000000"], html .to-search-searchhelp__choice-icon [stroke="#000000"] { stroke: var(--color-neutral); } #snackys-tpl .to-search-searchhelp__choice-icon [fill="#000000"], html .to-search-searchhelp__choice-icon [fill="#000000"] { fill: var(--color-neutral); } #snackys-tpl .to-search-searchhelp__choice-icon path, html .to-search-searchhelp__choice-icon path { vector-effect: non-scaling-stroke; } #snackys-tpl .to-search-modal .to-search-searchhelp__choices button:hover, html .to-search-modal .to-search-searchhelp__choices button:hover, #snackys-tpl .to-search-modal .to-search-searchhelp__choices button.is-active, html .to-search-modal .to-search-searchhelp__choices button.is-active { background: var(--color-white); border-color: var(--color-primary-100); color: var(--color-primary-100); transform: scale(1.01); } #snackys-tpl .to-search-modal .to-search-searchhelp__list, html .to-search-modal .to-search-searchhelp__list { display: grid; gap: var(--spacing-4); min-height: 0; margin-top: var(--spacing-3); padding: 0; border: 0; border-radius: 0; opacity: 0; visibility: hidden; transform: translateY(var(--spacing-3)); transition: opacity .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s; } #snackys-tpl .to-search-modal .to-search-searchhelp.has-selection.is-ready .to-search-searchhelp__list, html .to-search-modal .to-search-searchhelp.has-selection.is-ready .to-search-searchhelp__list { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } #snackys-tpl .to-search-searchhelp__group-heading, html .to-search-searchhelp__group-heading { display: flex; align-items: center; min-height: var(--spacing-8); margin: 0 0 var(--spacing-2) !important; padding: var(--spacing-1) var(--spacing-3) !important; border: 0; border-radius: var(--border-radius-sm, 8px); background: var(--color-secondary-50); color: var(--color-primary-100); font-size: var(--font-size-base, 16px); } #snackys-tpl .to-search-searchhelp__group-heading img, html .to-search-searchhelp__group-heading img { display: block; width: auto; max-width: var(--spacing-16); height: calc(var(--spacing-4) * var(--brand-logo-scale, 1)); max-height: var(--spacing-4); object-fit: contain; } #snackys-tpl .to-search-searchhelp__group-items, html .to-search-searchhelp__group-items { display: grid; gap: var(--spacing-2); margin: 0; padding: 0; list-style: none; } #snackys-tpl .to-search-modal .to-search-searchhelp__list button, html .to-search-modal .to-search-searchhelp__list button { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); width: 100%; min-height: var(--spacing-12); padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm, 8px); background: var(--color-white); box-shadow: inset calc(-1 * var(--spacing-8)) 0 0 var(--color-secondary-50); color: var(--color-primary-100); font-size: var(--font-size-base, 16px); font-weight: bold; text-align: left; text-transform: none; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; } #snackys-tpl .to-search-searchhelp__item-product-number-icon, html .to-search-searchhelp__item-product-number-icon { display: block; flex: 0 0 var(--spacing-4); width: var(--spacing-4); height: var(--spacing-4); pointer-events: none; } #snackys-tpl .to-search-searchhelp__item-label, html .to-search-searchhelp__item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; } #snackys-tpl .to-search-searchhelp__item-track, html .to-search-searchhelp__item-track, #snackys-tpl .to-search-searchhelp__item-text, html .to-search-searchhelp__item-text { display: inline-block; width: max-content; white-space: nowrap; } #snackys-tpl .to-search-searchhelp__item-label.is-marquee .to-search-searchhelp__item-track, html .to-search-searchhelp__item-label.is-marquee .to-search-searchhelp__item-track { animation: to-search-marquee var(--marquee-duration, 5s) ease-in-out infinite alternate; } #snackys-tpl .to-search-searchhelp__list button:hover .to-search-searchhelp__item-label.is-marquee .to-search-searchhelp__item-track, #snackys-tpl .to-search-searchhelp__list button:focus-visible .to-search-searchhelp__item-label.is-marquee .to-search-searchhelp__item-track, html .to-search-searchhelp__list button:hover .to-search-searchhelp__item-label.is-marquee .to-search-searchhelp__item-track, html .to-search-searchhelp__list button:focus-visible .to-search-searchhelp__item-label.is-marquee .to-search-searchhelp__item-track { animation-play-state: paused; } #snackys-tpl .to-search-searchhelp__item-image, html .to-search-searchhelp__item-image { display: flex; flex: 0 0 var(--spacing-8); align-items: center; justify-content: center; width: var(--spacing-8); height: var(--spacing-8); } #snackys-tpl .to-search-searchhelp__item-image img, html .to-search-searchhelp__item-image img { display: block; width: 100%; height: 100%; object-fit: contain; } #snackys-tpl .to-search-searchhelp__item-arrow, html .to-search-searchhelp__item-arrow { display: block; flex: 0 0 var(--spacing-4); width: var(--spacing-4); height: var(--spacing-4); pointer-events: none; } #snackys-tpl .to-search-searchhelp__item-check, html .to-search-searchhelp__item-check { display: none; flex: 0 0 var(--spacing-4); width: var(--spacing-4); height: var(--spacing-4); pointer-events: none; } #snackys-tpl .to-search-modal .to-search-searchhelp__list button:hover, html .to-search-modal .to-search-searchhelp__list button:hover, #snackys-tpl .to-search-modal .to-search-searchhelp__list button:focus-visible, html .to-search-modal .to-search-searchhelp__list button:focus-visible { border-color: var(--color-primary-100); color: var(--color-primary-100); transform: scale(1.01); } #snackys-tpl .to-search-modal .to-search-searchhelp__list button.is-active, html .to-search-modal .to-search-searchhelp__list button.is-active { border-color: var(--color-success); background: var(--color-success-soft); box-shadow: inset calc(-1 * var(--spacing-8)) 0 0 var(--color-success); color: var(--color-success); } #snackys-tpl .to-search-searchhelp__list button.is-active .to-search-searchhelp__item-label, html .to-search-searchhelp__list button.is-active .to-search-searchhelp__item-label { font-weight: bold; } #snackys-tpl .to-search-searchhelp__list button.is-active .to-search-searchhelp__item-arrow, html .to-search-searchhelp__list button.is-active .to-search-searchhelp__item-arrow { display: none; } #snackys-tpl .to-search-searchhelp__list button.is-active .to-search-searchhelp__item-check, html .to-search-searchhelp__list button.is-active .to-search-searchhelp__item-check { display: block; color: var(--color-white); } @media (max-width: 991px) { #snackys-tpl .to-search-sidebar > .to-search-searchhelp, html .to-search-sidebar > .to-search-searchhelp { order: 2; } } @media (prefers-reduced-motion: reduce) { #snackys-tpl .to-search-searchhelp__selection, html .to-search-searchhelp__selection, #snackys-tpl .to-search-modal .to-search-searchhelp__list, html .to-search-modal .to-search-searchhelp__list { transition: none; } #snackys-tpl .to-search-searchhelp__cursor, html .to-search-searchhelp__cursor { animation: none; } } #snackys-tpl .to-search-ai-chat[hidden], html .to-search-ai-chat[hidden] { display: none !important; } #snackys-tpl .to-search-ai-chat, html .to-search-ai-chat { position: fixed; z-index: 10002; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-4); background: color-mix(in srgb, var(--color-primary-100) 75%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #snackys-tpl .to-search-ai-chat__panel, html .to-search-ai-chat__panel { display: flex; flex-direction: column; width: min(767px, calc(100vw - 2 * var(--spacing-4))); height: min(620px, calc(100dvh - 2 * var(--spacing-4))); min-height: 320px; overflow: hidden; border: 1px solid var(--color-primary-75); border-radius: var(--border-radius-md, 12px); background: var(--color-white); box-shadow: 0 var(--spacing-4) var(--spacing-12) rgb(0 0 0 / 22%); } #snackys-tpl .to-search-ai-chat__header, html .to-search-ai-chat__header { position: relative; z-index: 1; display: flex; flex: 0 0 auto; align-items: center; gap: var(--spacing-3); min-height: var(--spacing-16); padding: var(--spacing-3) var(--spacing-4); background: var(--color-primary-100); box-shadow: 0px 10px 15px -10px #00000075; color: var(--color-white); } #snackys-tpl .to-search-ai-chat__avatar, html .to-search-ai-chat__avatar { display: block; flex: 0 0 var(--spacing-10); width: var(--spacing-10); height: var(--spacing-10); border: 2px solid var(--color-white); border-radius: 50%; background: var(--color-white) url("https://cdn.toneroffice.de/plugins/wi_tosearch/frontend/img/toni.svg") top center / 140% no-repeat; } #snackys-tpl .to-search-ai-chat__logo, html .to-search-ai-chat__logo { display: block; flex: 0 0 auto; width: var(--spacing-24); height: var(--spacing-6); background: var(--color-white); -webkit-mask: url("https://cdn.toneroffice.de/plugins/wi_tosearch/frontend/img/toneroffice-logo.svg") center / contain no-repeat; mask: url("https://cdn.toneroffice.de/plugins/wi_tosearch/frontend/img/toneroffice-logo.svg") center / contain no-repeat; } #snackys-tpl .to-search-ai-chat__brandline, html .to-search-ai-chat__brandline { display: flex; align-items: center; gap: var(--spacing-1); margin-bottom: calc(-0.5 * var(--spacing-1)); } #snackys-tpl .to-search-ai-chat__badge, html .to-search-ai-chat__badge { margin-top: -3px; padding: 0 var(--spacing-1); border: 1px solid currentColor; border-radius: var(--border-radius-xs, 4px); background: transparent; color: inherit; font-size: 11px !important; line-height: 1.3; text-transform: uppercase; } #snackys-tpl .to-search-ai-chat__heading, html .to-search-ai-chat__heading { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.2; } #snackys-tpl .to-search-ai-chat__heading h2, html .to-search-ai-chat__heading h2 { margin: 0; color: inherit; font-size: var(--font-size-h6, 16px); } #snackys-tpl .to-search-ai-chat__heading span, html .to-search-ai-chat__heading span { font-size: var(--font-size-xs, 13.3px); } #snackys-tpl .to-search-ai-chat__heading-label, html .to-search-ai-chat__heading-label { color: inherit; font-size: 16px !important; font-weight: normal; } #snackys-tpl .to-search-ai-chat__close, html .to-search-ai-chat__close { display: flex; flex: 0 0 var(--spacing-8); align-items: center; justify-content: center; width: var(--spacing-8); height: var(--spacing-8); padding: 0; border: 0; background: transparent; color: var(--color-white); cursor: pointer; } #snackys-tpl .to-search-ai-chat__close svg, html .to-search-ai-chat__close svg { width: var(--spacing-6); height: var(--spacing-6); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } #snackys-tpl .to-search-ai-chat__messages, html .to-search-ai-chat__messages { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: var(--spacing-3); min-height: 0; overflow-y: auto; padding: var(--spacing-6); background: var(--color-tertiary-50); } #snackys-tpl .to-search-ai-chat__footer, html .to-search-ai-chat__footer { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--color-tertiary-75); padding: 0 var(--spacing-3) 0; background: var(--color-white); } #snackys-tpl .to-search-ai-chat__reset, html .to-search-ai-chat__reset { grid-column: 2; grid-row: 2; justify-self: end; margin: var(--spacing-2) 0; padding: 0; border: 0; background: transparent; color: var(--color-neutral); font-size: var(--font-size-xs, 13.3px); text-decoration: none; cursor: pointer; } #snackys-tpl .to-search-ai-chat__privacy, #snackys-tpl .to-search-ai-chat__privacy:visited, #snackys-tpl .to-search-ai-chat__privacy:hover, #snackys-tpl .to-search-ai-chat__privacy:focus, html .to-search-ai-chat__privacy, html .to-search-ai-chat__privacy:visited, html .to-search-ai-chat__privacy:hover, html .to-search-ai-chat__privacy:focus { grid-column: 1; grid-row: 2; justify-self: start; margin: var(--spacing-2) 0; color: var(--color-neutral); font-size: var(--font-size-xs, 13.3px); text-decoration: none !important; } #snackys-tpl .to-search-ai-chat__reset:disabled, html .to-search-ai-chat__reset:disabled { opacity: .5; cursor: wait; } #snackys-tpl .to-search-ai-chat__message, html .to-search-ai-chat__message { position: relative; isolation: isolate; min-width: 80px; max-width: 88%; padding: var(--spacing-4); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); color: var(--color-neutral); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; text-align: justify; white-space: pre-wrap; } #snackys-tpl .to-search-ai-chat__message::before, html .to-search-ai-chat__message::before { position: absolute; bottom: var(--spacing-3); width: var(--spacing-3); height: var(--spacing-3); z-index: -1; box-sizing: border-box; border-left: 2px solid var(--color-tertiary-75); border-bottom: 2px solid var(--color-tertiary-75); background: var(--color-white); content: ""; transform: rotate(45deg); } #snackys-tpl .to-search-ai-chat__message--assistant::before, html .to-search-ai-chat__message--assistant::before { left: calc(-1 * var(--spacing-1)); margin-left: -3px; } #snackys-tpl .to-search-ai-chat__message strong, html .to-search-ai-chat__message strong { font-weight: 700; } #snackys-tpl .to-search-ai-chat__message a, html .to-search-ai-chat__message a { color: var(--color-primary-100); text-decoration: underline; text-underline-offset: .12em; } #snackys-tpl .to-search-ai-chat__message a[href^="tel:"], html .to-search-ai-chat__message a[href^="tel:"] { font-weight: 700; } #snackys-tpl .to-search-ai-chat__message--user, html .to-search-ai-chat__message--user { align-self: flex-end; background: var(--color-white); color: var(--color-neutral); } #snackys-tpl .to-search-ai-chat__message-brand-logo, html .to-search-ai-chat__message-brand-logo { display: block; width: auto; max-width: calc(80px * var(--brand-logo-scale, 1)); height: calc(25px * var(--brand-logo-scale, 1)); object-fit: contain; } #snackys-tpl .to-search-ai-chat__model-help, html .to-search-ai-chat__model-help { display: block; width: 100%; max-width: 50%; height: auto; margin-top: var(--spacing-3); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm, 8px); } #snackys-tpl .to-search-ai-chat__model-examples, html .to-search-ai-chat__model-examples { display: flex; align-items: flex-start; gap: var(--spacing-2); margin-top: var(--spacing-3); } #snackys-tpl .to-search-ai-chat__model-help--example, html .to-search-ai-chat__model-help--example { flex: 0 1 calc(50% - var(--spacing-1)); width: calc(50% - var(--spacing-1)); max-width: 50%; margin-top: 0; } #snackys-tpl .to-search-ai-chat__message--with-grid, #snackys-tpl .to-search-ai-chat__message--with-replies, html .to-search-ai-chat__message--with-grid, html .to-search-ai-chat__message--with-replies { width: 88%; box-sizing: border-box; } #snackys-tpl .to-search-ai-chat__message--user::before, html .to-search-ai-chat__message--user::before { right: calc(-1 * var(--spacing-1)); margin-right: -3px; border: 0; border-top: 2px solid var(--color-tertiary-75); border-right: 2px solid var(--color-tertiary-75); background: var(--color-white); } /**/ #snackys-tpl .to-search-ai-chat .to-search-ai-chat__matched-grid, html .to-search-ai-chat .to-search-ai-chat__matched-grid { box-sizing: border-box; flex: 0 0 auto; width: 100%; min-width: 0; height: auto; max-height: none; margin: 0; } #snackys-tpl .to-search-ai-chat .to-header-saved__grid-model, html .to-search-ai-chat .to-header-saved__grid-model { position: static; height: auto; } #snackys-tpl .to-search-ai-chat .to-header-saved__grid-model .to-header-saved__logo, #snackys-tpl .to-search-ai-chat .to-header-saved__grid-model .to-header-saved__printer, html .to-search-ai-chat .to-header-saved__grid-model .to-header-saved__logo, html .to-search-ai-chat .to-header-saved__grid-model .to-header-saved__printer { position: static; inset: auto; transform: none; } #snackys-tpl .to-search-ai-chat .to-header-saved__name-text, html .to-search-ai-chat .to-header-saved__name-text { font-size: 16px; } #snackys-tpl .to-search-ai-chat .to-header-saved__grid-card .to-header-saved__printer, html .to-search-ai-chat .to-header-saved__grid-card .to-header-saved__printer { height: 115px; max-height: 115px; } #snackys-tpl .to-search-ai-chat .to-header-saved__grid-image, html .to-search-ai-chat .to-header-saved__grid-image { min-height: 115px; } #snackys-tpl .to-search-ai-chat .to-hero-products, html .to-search-ai-chat .to-hero-products { min-height: 0; height: auto; } #snackys-tpl .to-search-ai-chat .to-hero-products__list, html .to-search-ai-chat .to-hero-products__list { box-sizing: border-box; flex: 0 0 auto; height: calc(130px + var(--spacing-8)); max-height: calc(130px + var(--spacing-8)); } #snackys-tpl .to-search-ai-chat__product-panel[hidden], html .to-search-ai-chat__product-panel[hidden] { display: none !important; } #snackys-tpl .to-search-ai-chat__brand-grid, html .to-search-ai-chat__brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2); width: 100%; margin-top: var(--spacing-4); } #snackys-tpl .to-search-ai-chat__cartridge-model-grid, html .to-search-ai-chat__cartridge-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: var(--spacing-2); width: 100%; max-height: 360px; overflow-y: auto; margin-top: var(--spacing-4); padding: var(--spacing-1); } #snackys-tpl .to-search-ai-chat__cartridge-model, html .to-search-ai-chat__cartridge-model { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-2); min-width: 0; min-height: var(--spacing-20); padding: var(--spacing-2); text-align: center; animation: to-search-ai-option-enter .28s ease both; } #snackys-tpl .to-search-ai-chat__cartridge-model-image, html .to-search-ai-chat__cartridge-model-image { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--spacing-12); min-height: var(--spacing-12); } #snackys-tpl .to-search-ai-chat__cartridge-model-image img, html .to-search-ai-chat__cartridge-model-image img { display: block; width: 100%; height: 100%; object-fit: contain; } #snackys-tpl .to-search-ai-chat__cartridge-model-label, html .to-search-ai-chat__cartridge-model-label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--font-size-xs, 13.3px); line-height: 1.2; } #snackys-tpl .to-search-ai-chat__cartridge-model--other, html .to-search-ai-chat__cartridge-model--other { grid-column: 1 / -1; min-height: var(--spacing-12); border-style: dashed; color: var(--color-neutral); } @media (max-width: 575.98px) { #snackys-tpl .to-search-ai-chat__cartridge-model-grid, html .to-search-ai-chat__cartridge-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #snackys-tpl .to-search-ai-chat__brand.to-printer-selector-modal__option--brand, html .to-search-ai-chat__brand.to-printer-selector-modal__option--brand { min-width: 0; min-height: var(--spacing-12); padding: var(--spacing-2); justify-content: center; background: var(--color-white); animation: to-search-ai-option-enter .28s ease both; } #snackys-tpl .to-search-ai-chat__brand:nth-child(3n + 2), html .to-search-ai-chat__brand:nth-child(3n + 2) { animation-delay: .05s; } #snackys-tpl .to-search-ai-chat__brand:nth-child(3n), html .to-search-ai-chat__brand:nth-child(3n) { animation-delay: .1s; } #snackys-tpl .to-search-ai-chat__brand-escape, html .to-search-ai-chat__brand-escape { color: var(--color-neutral); font-size: 16px; } #snackys-tpl .to-search-ai-chat__brand .to-printer-selector-modal__brand-logo, html .to-search-ai-chat__brand .to-printer-selector-modal__brand-logo { display: block; width: auto; max-width: calc(80px * var(--brand-logo-scale, 1)); height: calc(25px * var(--brand-logo-scale, 1)); object-fit: contain; } #snackys-tpl .to-search-ai-chat__replies, html .to-search-ai-chat__replies { display: flex; flex-wrap: wrap; gap: var(--spacing-2); width: 100%; margin-top: var(--spacing-4); } #snackys-tpl .to-search-ai-chat__choice, html .to-search-ai-chat__choice { display: flex; flex: 1 1 calc(50% - var(--spacing-2)); align-items: center; justify-content: space-between; min-height: var(--spacing-10); padding: var(--spacing-2) calc(var(--spacing-2) + 1.5px) var(--spacing-2) var(--spacing-3); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm, 8px); background: var(--color-white); box-shadow: inset calc(-1 * var(--spacing-10)) 0 0 var(--color-secondary-50); color: var(--color-primary-100); font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .2s ease, border-color .2s ease; animation: to-search-ai-option-enter .28s ease both; } #snackys-tpl .to-search-ai-chat__choice svg, html .to-search-ai-chat__choice svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; color: var(--color-primary-100); } #snackys-tpl .to-search-ai-chat__choice[data-search-ai-choice="unknown"], #snackys-tpl .to-search-ai-chat__choice[data-search-ai-choice="ai-unknown"], html .to-search-ai-chat__choice[data-search-ai-choice="unknown"], html .to-search-ai-chat__choice[data-search-ai-choice="ai-unknown"] { border-style: dashed; } #snackys-tpl .to-search-ai-chat__choice:nth-child(2), html .to-search-ai-chat__choice:nth-child(2) { animation-delay: .06s; } #snackys-tpl .to-search-ai-chat__choice:hover, #snackys-tpl .to-search-ai-chat__choice:focus-visible, html .to-search-ai-chat__choice:hover, html .to-search-ai-chat__choice:focus-visible { border-color: var(--color-primary-100); transform: scale(1.01); } #snackys-tpl .to-search-ai-chat__message.is-loading, html .to-search-ai-chat__message.is-loading { min-width: var(--spacing-12); color: var(--color-primary-100); } #snackys-tpl .to-search-ai-chat__typing, html .to-search-ai-chat__typing { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1); min-width: var(--spacing-8); min-height: var(--spacing-4); } #snackys-tpl .to-search-ai-chat__typing > span, html .to-search-ai-chat__typing > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: to-search-ai-dot-bounce 1.1s ease-in-out infinite; } #snackys-tpl .to-search-ai-chat__typing > span:nth-child(2), html .to-search-ai-chat__typing > span:nth-child(2) { animation-delay: .15s; } #snackys-tpl .to-search-ai-chat__typing > span:nth-child(3), html .to-search-ai-chat__typing > span:nth-child(3) { animation-delay: .3s; } #snackys-tpl .to-search-ai-chat__form[hidden], html .to-search-ai-chat__form[hidden] { display: none !important; } #snackys-tpl .to-search-ai-chat__form, html .to-search-ai-chat__form { display: flex; grid-column: 1 / -1; grid-row: 1; flex: 0 0 auto; align-items: center; gap: var(--spacing-2); width: 100%; margin: 0; padding: var(--spacing-2) 0 0; background: var(--color-white); } #snackys-tpl .to-search-ai-chat__form input, html .to-search-ai-chat__form input { flex: 1 1 auto; min-width: 0; height: var(--spacing-10); margin: 0; padding: 0 var(--spacing-3); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm, 8px); background: var(--color-white); color: var(--color-neutral); font-size: 16px; } #snackys-tpl .to-search-ai-chat__form input:focus, html .to-search-ai-chat__form input:focus { outline: none !important; box-shadow: none !important; } #snackys-tpl .to-search-ai-chat__form button, html .to-search-ai-chat__form button { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: auto; height: var(--spacing-10); padding: 0 var(--spacing-3); border: 0; border-radius: var(--border-radius-sm, 8px); background: var(--color-primary-100); color: var(--color-white); font-size: 16px; font-weight: 600; text-transform: uppercase; cursor: pointer; } #snackys-tpl .to-search-ai-chat__message.is-typing::after, html .to-search-ai-chat__message.is-typing::after { display: inline-block; width: 1px; height: 1em; margin-left: 2px; background: currentColor; content: ""; vertical-align: text-bottom; animation: to-search-ai-caret .8s steps(2, start) infinite; } #snackys-tpl .to-search-ai-chat__form.is-busy button, html .to-search-ai-chat__form.is-busy button { opacity: .6; cursor: wait; } @keyframes to-search-ai-dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } } @keyframes to-search-ai-option-enter { from { opacity: 0; translate: 0 var(--spacing-2); } to { opacity: 1; translate: 0 0; } } @keyframes to-search-ai-caret { to { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { #snackys-tpl .to-search-ai-chat__typing > span, html .to-search-ai-chat__typing > span { animation: none; opacity: 1; } #snackys-tpl .to-search-ai-chat__brand, html .to-search-ai-chat__brand, #snackys-tpl .to-search-ai-chat__choice, html .to-search-ai-chat__choice { animation: none; } } html.to-search-chat-open, html.to-search-chat-open body { overflow: hidden; }