#sa-root,.sa-wand-panel{--sa-raccoon:url(data:image/webp;base64,UklGRsoQAABXRUJQVlA4WAoAAAAQAAAAXwAAXwAAQUxQSMkDAAABoPZs2yFJX9WdJ5VJpbO2rde2vfa+tm3btm3b1tq2vZ1Bp9MZVJ5cuVIf+qmq7qo7IiZAkg5ZDLrx1/6icLuFYEz7TCt9HgFjY3EfbboVExD5E5W5kIkRnKjLL0hE1A7TJFdbAWJzN0UG2UoQUz09RoMVxd1GjYvpDMMEDA5V4y2QDN2xsNjX4p0IkvGIJzy/Q49eu/cYMKxfj1Zehn4oI8sYxiL+mrp4+/bG2tpCfvPKn165fOwQPxufxUoMWAsAFhaALcx8ZXgfk773mGps/ebUdlXocvDE66++8OwBJt4z6SKAxTfv6Vei1eh3lgYASQbz490aFabD2fjH6FyC3NhP6kkwEvHGIyLVaPxpeKsYw57LE2DseIcCGSifenSNY+9vLMGk8ToVs4LCY91EOr1hwQrG89Y6wvSRnD726jxY0XjyCrOLgGAKhmeoiglabdVOnlPvcGgSVmSihSLuBHvuBFXrthhUreYTahzHXGuV278I3TotB1MYpg9R/legSo1RtwbpyOAbEYcWQZXr+7gGrQd1vlScbaZSZyysceReQDrC1KG0r5R3eQ3UGRONiL/3veup9e0iIq/UWmh1tykLqDRwpzihVeOp4qbW1xrtThXt7tQO76g319dubRvtinsrx+BE7ezoCGjFu9V7zLhKan3luX6rXpgRbOzmujhQio2Hu/znUK3M4maX9Fis1dRWLjlwK1Ri4/AIc3pJJ76Xc0nN1c1QqXRtziXepQWVsHms5xIzsQSFiKkHivhlYkZvhEa1Fxv5ad8yMXsvh0KbxxpB/aU5Ke8zFfr80E2EsH8MMyIiXT4LoAu2jxQRkszf20FExD93OzRB8daaCGD+8UZEzN7/WejReH0riSAR3OuJiLS6dDvUWN5B4hD2vR4iImb310pa4L14JDY/NcyIiLlRC6JfAoLFPy7sJeZ4mz24hhtpc2Wccpt/b2yXJ7IGLC6U8fpT3yoyMYC1/2UMte8M+g9lBFhRMMtA4/QTfW+zS1+gMP3UHv2G3wgqDCBY+cqxQ079od5SWwBEcelz40c+MrcAgNra4tbZT919/uWfrWwEQVVnnn39rXdeOf7AfuMfWN0MAqykzVLt9dfefuNbX323dDMJVvyDIEMkSIAAq+nt+0opQ6kU8Y7+rABoJuL1uX1+ACgmYtqd+0uBUExEvENf2UlAMRGv1+m/FFQTEW/ffFXC9AFIYm5FdcJUgQxqF3+XZFgzk4axwjTB/jF+/35tjDFJfkJVyJSADDa+08cYqWA3yyqHYfWAYOfUe4/uINEAVlA4INoMAABQMACdASpgAGAAPj0aiUOiIaEWqZ7YIAPEsYBjl6mrtl48cmarr7+4/cB2wtvZ5gPsA4QD+e/0DrQ/QA/VX05PY5/bf0d8wA7Nv7f4D+Lj1T7ietTh362dSDsr/UeY3eb8VdQj2D/p/zA4KS1PoKd9v99xmdtnxxdAP9C+id/5f6/zy/s/+1/8n+j+Aj+ef2P/k+u/7HfRm/apypePrSTWY+8oEsB7BdkzIkNaKgRoCOPQJ+3eRgWWeVT/giIm0II+veEr9RDafyub1jtLoH+/BnUSfmnN7oShSzt3oxrRf8/O4ahHmK2O52LCeozDcLSXmmzr9yC9SJ3pv5/yw2l35DcbejhBwn6cIXZcLFOvTXQHektfP/mdBsZjP9+fgf13mfafuqZ9C5Kuh1rXdqvM6NT7K4wAj89Q6YrWsqlxtW3+hR2pVnCG76afX/+Wb4nirb/6EjIqh8P43pm9luYZZwU+zDUQUgl1q5nIRUh4r5I0zJ6bdEHGU9S7E+TokeDclIqccZhhB0b8AAD+/+r8e+cJpfvT0msgeVyKGcbbPYGB821o1wXesv/4vgiZyIVa5VyFacdzvDjVoaN9Rddi03Bqf/hmLMPJ04yhYa3S57CXraz1TwprqvvX76LV8hr2p0jydqLaMzFpHaZWnTEf/sW193vMIaV4VcPoY8yXvbVsbxoC5yb6yfKOQ98w3vR5t4fYErpXDBptYC1M5KSpfNAVji/ZBdb3X/wUdSGSIeoDW/STFsVzXuNEyhrxlSv4YOSYtU2IeL7E2rgJfAT+dyhlAKRg0rxu/Wph3U5EJMmU/hPdBjMkEUpqMgLCKn+4rZP9Si8+JuavY8h+PgVpd+grk/ABmBxf/0OlxttSE3Zo8wGtdM5Z564KZCRvwVUv7xIbqQg3CUTZvNO/ASCp4zgv0yN9/Owj60DeLGb4VsBzpKgisfhbLR1mH3p0dDf0cSMGwfZlFaL8hZmu8X/NIvqeURy2oDvmjxbDrxPorms/LBNojVdrpUEGsIWZvUOfTabyj2+6fx8BhHcrtrJqxpj0EE6r86pL/RmcnVcEtIStJdi1lxLmFKEgr845LphKy0d35n92cbTF2L4R2HyUW2eOnFPyYEJT/fBOBJ/07lmxgfw0nAphuWW9PTxM7n/jHgBczw/a02OYbbPnXfsrgLTYAg+aSt0HN4M1cmqM2L4W8Yg0XgrPcb7cHLo12iCz4CB72aDHP8HeGphh+EuSNATcDgpglDmKYfWxRsMkIPAEzR0d9+khTU5nbj0fCUHmLQ9uXAA7iIuHhtFo4v8WyAbbZSL29KBRDcQAcQq1ktWu+Vza+ko9hDIypJrozpgVFGrAjvddyll6vAjJXTWiODg11YJB6gaZX2lXmJ8JgrT9f1LtHmWsE51P8xVEQgs/F0caiGMNEJsiz+DgWxPcyE3CTqZ1lsjYuARIg5K+X2LAVO7DqICtpjr6OliHVBiYxyxCGm7fZ88HI5mv0kmer6vak0bKahEqy8+p2az20oB0Qn0uP2UzmfNW374caiOUb7cotnRWi2Amh+vgLm3clws+g833wIHUMbY59+BT2jC6jJnlGVWOwrYzwCsOUBjYSeESJnND5IWpqz2WLu+MM6tuYLoS1uWaVhJV3GHXvD1xjGDNMz74u/oaV/Wo070ytBl6P0UGsMiZ932c15xFTDIk7uyaIkBPqhpufi324D3xbOBPh9uExqUyfw/eEBTccfuWdurXUwIrl81T/qbXUQAg08WAKpiWDNXmP9bhcemvF67vlVOqysCI61u0E29+FCWZYL6/Qcx4pCCXN+VthtPm+B9wFnbFU9qtx9e9y/GFMV1bjBjpnfe313hT6XO2sAQpNOZ1mBOQMV+5Ofb1PgzrpOfaY/qu3VRSyoJ58F3mU2ix8uugD8GkaQUBKv/ROuwbT7XKZNHjHzhOFCDwE616N/CTEDz9k2r3VG159ktnAfZx8/V8Z1CJiO/RR/tgA2rRdp9bzq89L32jMv3QDJ1YtSPE+oeksp6fraAuP3Syve//waxj9JfO+v9DM3E5vrAzWYKXWEwJR2sGXoAYF4Oe/lDcT2iZmNNsfN8gN9F3QlxwmqdU0d3CTaghgeB+ZBz81u7cNQDPsNzu6vURzrprEYgAY1tKZLWJRlWwGyTPQoygLFcL8pbEE7K+s6AI2XMXqAMraz6+PNIXPvKdkeM8rM54JRDW6+MjPM8GwnzgG1irUVsNIsMtgrrDttp0tv8pp3qbdzkMQb3eXXGjCU4zivSAMhuxL0JDxE/HuYVbUH3vmGLLqRbIOvU7udOlTmmb3H8P4zX1T9mr5LJCr6wvYGPow3+A4VthWRWvQcOyfC9GdEAuiiWiYk1oL098yALbbiXzK8oGSePOgmoX8wgRr1ebcl2rf7tdBPIUq8PoTP+f3+9/cT2Oz0GPzffbmuQGmCD+vIZgwr2eixFvhqrV0bg5pE2VX4trgAxidoo13+E5tOZYVgtkdmIdOaj04d6x+5GzAx+OQsD+x/VHH/esdM9wbFHjhr+nXmxPifGANZ/ZVB1jzY28J4DQP4sD1VDHt4XUUtZO3KRyMY3VRHZrOlAB+FTXOpXa9VXOcL7rBdVycP5JSlHjv5WQ31kExy9YI/ue71QIWsIPoPjz9M6ATrkpxo77G8uyowQSObLGPLZqzD5quLLT//rE6UN+w2+V/aoWurC6i7K+/c/BPDnqh9A/ZGrKb8w9izSFn3WWj2CKeYYKe0rZnY35+HDoSnUkqr43KH7F37TecS8+YDExsuEoqR5gylRdBOVIfStxHmkJu9xVKOK4LUwcGnZuQaKakadLt4RbfhqpWsFvWvd9sMsSqQ+nQAXqkoONrPoaggNIK/y1wQX+xQMYuaOKSYMyhmEFD9l3/ZW/1qkJSnNHxwyozD79iFaiU/NbT/+rJX3qXRRvv5ajwtMZY/QCtNsT6TUhod6WYHeBTmX8DfiQFWeh6C9Y/R6OyGwBus8RyrcyYyZ+UaKGzeZpFPDPisvKA+MttZYDc68B8o9FwrFKugDbPPY+e0zsASV+T0AcXYodI/O1sWVH8DU1h5JObVRQ/yh82nPFZB1odx5ipdQ7OSBW5qFR2C8T3CAKxmxj27pbkxjyc6cHn9DchxEuhXh6U2UEXbgfwu9x1fXk4x6pF5oiIVNlr9vXsfKN40Nep/ayyxmE+rwxEVTAJiexE2T+H3qOq6zImXp5c84r/vtSK4QAWxrH2mf+LZdaz/cwwf2bO8RHR2GPoVdU0OlGFd7RoVL86QpIeyPZ4yqUgISuGV5KIj5rMm0dMhY9En/+0BjWRrk0VihI8gA35uBhDRK6VZzWskJtjX8nykkEEeYtOB0AIeGZXoqIRSxwjAUet+m5O42gQCnqVLx6jWk1A91goIfaleJ8rRyOXJ2HXTa0Du3X29SQxjxpSasbsZEXCkTs0idSax/7tFRN/Ij9kcrcpKR2Mm+q61MKWfPcLfHSTZfHlxUxKp/G4Yh6M5jGIzKnjmWubdT7zAcOqAK3WSzr6Ua5nDTIrGRX5128UYC0u0DKtjLln9kRAOd86CiCv4/whnLWUQ+5v1mBOTAmEqGfPvcTu6TTQN0FQ4E0Ushkywom/gpq6thBCDimI2dy1PZQCDbS19Qc9B8k49kScj4GL3slFFXodzS2XteDaI/R6EYfmzUVY5fcWlvCHtANYrrdBQtPES7Tr5eC3OEmHlnDD5Qblu1nA+WTAUzHehSt4N0eeZpSgoBqKPE9LQU92IlKxqC70prMn2naz1A96wiMcfXH+mEaxhU9f0mFxA2TBlRHhibaZdUgdCzHDzIeeJbQDj9/s+eRthVUsmrz28A+OPzPpRe8woxfnqlhMDxdFQbAqJ05m7ByoaUute/PwY0NDEHj89El5jO2VfiQO53IhxXMwYcOqc+pMWIVOirr93sgHTi+QTJqzsduFHTbNOxIvuqxLbq+nagnbvIhCtMr9iESkUNjmmX3xdH9vF+J52tlmv/Ws4lejX1k6CJVzmkvnH75yLkAldJcY03IYUREG1hFLJzCmOUfErsdUZIyrAwMh6IDgiujvs1idRZCEBs0fViHzEfyh5EEGgASOp7RpMHaWFoJh6FXuhH0MsxmmYVG1bSoyr9haHi6cIb17BbWNup08HmP3mhdBv6K8vF+tevmn64/J2u4X7pfLTYJmrhc56tH+UsGB2iIe796yftyeEvZsmypdN/b2cItsQzV+OjFQiQA0hIk3pLe4BDNltLCYn3+I6/rD90F4pJJMCEwhcbYZocOBxXKvPiFnhm40LvgQqBKxpry8bVZ0yUhOz99HE/RLnMMTHxmWWH01wyf4QDIyPW/6oRXtpMzZDclHn6y64vgyAoIVCO7KvulMOyrbzaAAA==);
}

#sa-root {
    --sa-green: #1d9001;
    --sa-green-dark: #167001;
    --sa-green-soft: #ebffe7;
    --sa-orange: #ff7c00;
    --sa-ink: #2e2e2e;
    --sa-muted: #6b6b6b;
    --sa-line: #eee;
    --sa-bg: #f7f7f7;
    --sa-red: #d93025;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10010;
    font-family: "Poppins", sans-serif;
    color: var(--sa-ink);
    line-height: 1.4;
}

#sa-root *,
#sa-root *::before,
#sa-root *::after {
    box-sizing: border-box;
}

#sa-root button,
#sa-root textarea,
#sa-root input {
    font-family: inherit;
}

#sa-root [hidden] {
    display: none !important;
}

#sa-root .sa-ico {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* -- logo: the orange paw on a white disc ------------------------------------------ */
#sa-root .sa-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--sa-orange);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

#sa-root .sa-paw {
    display: block;
    width: 62%;
    height: 62%;
}

#sa-root .sa-logo-bar {
    width: 40px;
    height: 40px;
}

#sa-root .sa-logo-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sa-green);
    color: #fff;
    box-shadow: 0 0 0 2px #2e2e2e;
}

#sa-root .sa-logo-badge .sa-ico {
    width: 13px;
    height: 13px;
}

/* -- launcher ---------------------------------------------------------------------- */
#sa-root .sa-open {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    background: var(--sa-green);
    color: #fff;
    padding: 6px 18px 6px 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(29, 144, 1, 0.28);
    transition: transform .15s ease, background .15s ease;
}

#sa-root .sa-open:hover {
    background: var(--sa-green-dark);
    transform: translateY(-1px);
}

/* The answer is being prepared / is ready while the chat is closed. */
#sa-root .sa-open.sa-busy-reply .sa-logo::after,
#sa-root .sa-open.sa-has-reply .sa-logo::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sa-orange);
    box-shadow: 0 0 0 2px var(--sa-green);
}

#sa-root .sa-open.sa-busy-reply .sa-logo::after {
    animation: sa-blink 1.1s ease-in-out infinite;
}

#sa-root .sa-open.sa-has-reply {
    animation: sa-pulse 1.6s ease-out 3;
}

@keyframes sa-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* -- panels ------------------------------------------------------------------------ */
#sa-root .sa-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 32px));
    height: min(580px, calc(100vh - 32px));
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(46, 46, 46, 0.18);
}

#sa-root .sa-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 12px 10px 12px 14px;
    background: var(--sa-green);
    color: #fff;
}

#sa-root .sa-bar-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sa-root .sa-bar > .sa-bar-title,
#sa-root .sa-bar-titles {
    flex: 1 1 auto;
    min-width: 0;
}

#sa-root .sa-bar-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    opacity: .78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sa-root .sa-bar-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

#sa-root .sa-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

#sa-root .sa-icon-btn:hover,
#sa-root .sa-icon-btn:focus-visible,
#sa-root .sa-icon-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.3);
    outline: none;
}

#sa-root .sa-icon-btn .sa-ico {
    width: 19px;
    height: 19px;
}

#sa-root .sa-icon-btn .sa-cmp-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    margin: 0;
    box-shadow: 0 0 0 2px var(--sa-green);
}

#sa-root .sa-to-cmp.sa-busy .sa-ico {
    animation: sa-tilt 1.4s ease-in-out infinite;
}

/* -- history / comparison list ------------------------------------------------------ */
#sa-root .sa-threads {
    position: absolute;
    z-index: 3;
    top: 70px;
    left: 8px;
    right: 8px;
    max-height: 320px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

#sa-root .sa-threads button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid #f2f2f2;
    background: #fff;
    color: var(--sa-ink);
    text-align: left;
    cursor: pointer;
}

#sa-root .sa-threads button:hover {
    background: #f7fbf6;
}

#sa-root .sa-threads button:last-child {
    border-bottom: 0;
}

#sa-root .sa-threads button strong {
    display: block;
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sa-root .sa-threads button span {
    font-size: 12px;
    color: var(--sa-muted);
}

#sa-root .sa-threads button.sa-current {
    background: #f3fbf1;
    box-shadow: inset 3px 0 0 var(--sa-green);
}

#sa-root .sa-threads button.sa-current strong {
    color: var(--sa-green);
}

#sa-root .sa-threads button em {
    font-style: normal;
    font-size: 11px;
    color: var(--sa-orange);
}

/* -- conversation ------------------------------------------------------------------- */
#sa-root .sa-log {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: var(--sa-bg);
}

#sa-root .sa-log > p {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#sa-root .sa-log > p.sa-user {
    margin-left: 40px;
    background: var(--sa-green);
    color: #fff;
}

#sa-root .sa-log > p.sa-bot {
    position: relative;
    margin-left: 40px;
    background: #fff;
    border: 1px solid var(--sa-line);
    color: var(--sa-ink);
    white-space: normal;
}

#sa-root .sa-log > p.sa-bot::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff var(--sa-raccoon) center / cover no-repeat;
    box-shadow: 0 0 0 1px var(--sa-line);
}

/* Customer care answers as a person: the headset instead of the raccoon (later a colleague's photo:
   --sa-agent-photo: url(...) on #sa-root). */
#sa-root .sa-panel[data-view="support"] .sa-log > p.sa-bot::before {
    background: #fff var(--sa-agent-photo, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff7c00' d='M12 1a9 9 0 0 0-9 9v7a3 3 0 0 0 3 3h3v-8H5v-2a7 7 0 0 1 14 0v2h-4v8h4v1h-7v2h6a3 3 0 0 0 3-3V10a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E")) center / var(--sa-agent-photo-size, 18px) no-repeat;
}

#sa-root .sa-log > p.sa-bot strong {
    color: var(--sa-green);
}

#sa-root .sa-log > p.sa-live {
    opacity: .92;
}

/* status line with the progress bar */
#sa-root .sa-log .sa-typing {
    padding: 11px 14px 12px;
    min-height: 44px;
}

#sa-root .sa-log .sa-typing em {
    font-style: normal;
    color: var(--sa-ink);
}

#sa-root .sa-typing-wheel {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid #d7ead3;
    border-top-color: var(--sa-green);
    border-radius: 50%;
    vertical-align: -3px;
    animation: sa-spin .7s linear infinite;
}

#sa-root .sa-typing-away {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f3faf1;
    color: #1d5c12;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

@keyframes sa-spin {
    to { transform: rotate(360deg); }
}

#sa-root .sa-log .sa-typing > span:not(.sa-progress) {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--sa-green);
    vertical-align: middle;
    animation: sa-dot 1s infinite;
}

#sa-root .sa-log .sa-typing > span:nth-of-type(2) { animation-delay: .15s; }
#sa-root .sa-log .sa-typing > span:nth-of-type(3) { animation-delay: .3s; }

@keyframes sa-dot {
    0%, 80%, 100% { opacity: .2; }
    40% { opacity: 1; }
}

#sa-root .sa-progress {
    position: relative;
    display: block;
    height: 6px;
    margin-top: 9px;
    border-radius: 999px;
    background: #e8f3e5;
    overflow: hidden;
}

#sa-root .sa-progress i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #45b52a, var(--sa-green));
    transition: width .35s ease;
}

#sa-root .sa-progress i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: sa-shine 1.3s linear infinite;
}

@keyframes sa-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* product cards, plans, guides, orders */
#sa-root .sa-cards,
#sa-root .sa-plan {
    margin: 0 0 10px 40px;
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    padding: 6px;
}

#sa-root .sa-cards article {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
    border-bottom: 1px solid #f2f2f2;
}

#sa-root .sa-cards article:last-child {
    border-bottom: 0;
}

#sa-root .sa-card-row {
    display: flex;
    gap: 10px;
    padding: 6px;
}

#sa-root .sa-card-row > div {
    min-width: 0;
}

#sa-root .sa-block-title {
    margin: 4px 6px 6px;
    color: var(--sa-ink);
    font-size: 14px;
    font-weight: 700;
}

#sa-root .sa-plan {
    padding: 8px;
}

#sa-root .sa-plan-intro {
    margin: 0 6px 8px;
    color: var(--sa-muted);
    font-size: 12px;
}

#sa-root .sa-plan-total {
    margin: 0 6px 10px;
    color: var(--sa-ink);
    font-size: 15px;
    font-weight: 700;
}

#sa-root .sa-plan-outline {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

#sa-root .sa-plan-outline li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #f2f2f2;
}

#sa-root .sa-plan-outline li:last-child {
    border-bottom: 0;
}

#sa-root .sa-plan-n {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sa-green-soft);
    color: var(--sa-green);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

#sa-root .sa-plan-outline img,
#sa-root .sa-set-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--sa-bg);
    flex-shrink: 0;
}

#sa-root .sa-has-pic img {
    cursor: zoom-in;
}

#sa-root .sa-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 6px 4px;
}

#sa-root .sa-plan-add {
    display: block;
    width: calc(100% - 12px);
    margin: 8px 6px 4px;
}

#sa-root .sa-modal-narrow {
    width: min(560px, 100%);
}

#sa-root .sa-step-or {
    margin: 4px 0 0;
    color: var(--sa-muted);
    font-size: 12px;
}

#sa-root .sa-set-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
}

#sa-root .sa-set-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sa-root .sa-set-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f2;
}

#sa-root .sa-plan-outline .sa-set-item {
    padding: 6px 8px;
}

#sa-root .sa-set-item:last-child {
    border-bottom: 0;
}

#sa-root .sa-set-name {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--sa-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#sa-root .sa-set-name:hover {
    color: var(--sa-green);
    text-decoration: underline;
}

#sa-root .sa-item-price {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sa-green-soft);
    color: var(--sa-green);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

#sa-root .sa-reason .sa-item-price {
    font-size: 12px;
}

#sa-root .sa-hover-pic {
    position: fixed;
    z-index: 10040;
    width: 220px;
    height: 220px;
    padding: 10px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(46, 46, 46, 0.22);
    pointer-events: none;
}

#sa-root .sa-hover-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#sa-root .sa-step {
    margin: 0 0 8px;
    padding: 8px;
    border-radius: 10px;
    background: #f7fbf6;
}

#sa-root .sa-step:last-child {
    margin-bottom: 0;
}

#sa-root .sa-step-label {
    margin: 0 0 2px;
    color: var(--sa-green);
    font-size: 13px;
    font-weight: 700;
}

#sa-root .sa-step-detail {
    margin: 0 0 6px;
    color: var(--sa-ink);
    font-size: 13px;
    line-height: 1.4;
}

#sa-root .sa-plan .sa-cards,
#sa-root .sa-step .sa-cards {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#sa-root .sa-card-row img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--sa-bg);
    flex-shrink: 0;
}

#sa-root .sa-card-row a {
    color: var(--sa-green);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

#sa-root .sa-card-row a:hover {
    text-decoration: underline;
}

#sa-root .sa-unit-price {
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}

#sa-root .sa-packs {
    margin: 2px 0 4px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

#sa-root .sa-packs span {
    white-space: nowrap;
}

#sa-root .sa-packs .is-current {
    color: #1f2937;
    font-weight: 600;
}

#sa-root .sa-reason {
    margin: 2px 0 0;
    color: var(--sa-muted);
    font-size: 12px;
}

#sa-root .sa-why {
    margin: 0;
    padding: 0 6px 4px 68px;
    color: var(--sa-ink);
    font-size: 13px;
    line-height: 1.4;
}

/* The assistant's question and the answers to pick: compact, they must not fill the chat. */
#sa-root .sa-ask {
    margin: 0 0 6px 40px;
    padding: 7px 11px;
    border-radius: 10px;
    border-left: 3px solid var(--sa-green);
    background: var(--sa-green-soft);
    color: var(--sa-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

#sa-root .sa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 10px 40px;
}

#sa-root .sa-chip {
    border: 1px solid rgba(29, 144, 1, .45);
    border-radius: 999px;
    background: #fff;
    color: var(--sa-green);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    padding: 4px 10px;
    text-align: left;
    cursor: pointer;
}

#sa-root .sa-chip:hover {
    background: var(--sa-green);
    color: #fff;
}

#sa-root a.sa-checkout {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--sa-green);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
}

#sa-root a.sa-checkout:hover {
    background: var(--sa-green-dark);
    color: #fff;
}

#sa-root .sa-other {
    display: flex;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
}

#sa-root .sa-other input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--sa-ink);
}

#sa-root .sa-other button {
    border: 0;
    border-radius: 999px;
    background: var(--sa-green);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
}

#sa-root .sa-cart {
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--sa-green);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
}

#sa-root .sa-cart:hover {
    background: var(--sa-green-dark);
}

#sa-root .sa-order .sa-track {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    color: var(--sa-green);
}

/* -- composer ----------------------------------------------------------------------- */
#sa-root .sa-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    padding: 12px;
    background: #fff;
    border-top: 1px solid var(--sa-line);
}

#sa-root .sa-text {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 72px;
    max-height: 140px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    background: #fff;
    color: var(--sa-ink);
    font-size: 15px;
    line-height: 1.4;
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#sa-root .sa-text:focus {
    border-color: var(--sa-green);
    outline: 2px solid rgba(29, 144, 1, 0.18);
}

/* The icon is a block in a flex box: centred on both axes, no inline baseline gap. */
#sa-root .sa-form .sa-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 0 13px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sa-green);
    color: #fff;
    line-height: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, transform .15s ease;
}

#sa-root .sa-form .sa-send:hover {
    background: var(--sa-green-dark);
}

#sa-root .sa-form .sa-send:active {
    transform: scale(.95);
}

#sa-root .sa-form .sa-send:disabled {
    background: #9ccc90;
    cursor: default;
}

#sa-root .sa-form .sa-send .sa-ico {
    width: 22px;
    height: 22px;
}

#sa-root .sa-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* formatted assistant text (formatBot) */
#sa-root .sa-log .sa-para {
    display: block;
}

#sa-root .sa-log .sa-para + .sa-para,
#sa-root .sa-log .sa-para + .sa-list,
#sa-root .sa-log .sa-list + .sa-para {
    margin-top: 8px;
}

#sa-root .sa-log .sa-list {
    display: block;
    margin: 4px 0;
}

#sa-root .sa-log .sa-li {
    display: block;
    position: relative;
    padding-left: 18px;
    margin: 2px 0;
}

#sa-root .sa-log .sa-li-mark {
    position: absolute;
    left: 2px;
    top: 0;
    color: var(--sa-green);
    font-weight: 600;
}

/* -- buttons ------------------------------------------------------------------------ */
#sa-root .sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--sa-green);
    border-radius: 999px;
    background: #fff;
    color: var(--sa-green);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

#sa-root .sa-btn .sa-ico {
    width: 18px;
    height: 18px;
}

#sa-root .sa-btn-primary {
    background: var(--sa-green);
    color: #fff;
}

#sa-root .sa-btn-primary:hover {
    background: var(--sa-green-dark);
    border-color: var(--sa-green-dark);
}

#sa-root .sa-btn.sa-busy {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    cursor: wait;
    opacity: 0.9;
}

#sa-root .sa-btn.sa-busy::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: var(--sa-cart-pct, 0%);
    background: #fff;
    transition: width .2s ease;
}

#sa-root .sa-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    animation: sa-spin .7s linear infinite;
}

@keyframes sa-spin {
    to { transform: rotate(360deg); }
}

#sa-root .sa-btn-ghost:hover {
    background: var(--sa-green-soft);
}

#sa-root .sa-btn-wide {
    width: 100%;
}

/* -- comparator bubble ---------------------------------------------------------------- */
#sa-root .sa-cmp-open {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--sa-green);
    border-radius: 999px;
    background: #fff;
    color: var(--sa-green);
    padding: 4px 14px 4px 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(46, 46, 46, 0.16);
}

#sa-root .sa-cmp-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

#sa-root .sa-cmp-ring > svg:first-child {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

#sa-root .sa-ring-bg,
#sa-root .sa-ring-fg {
    fill: none;
    stroke-width: 3;
}

#sa-root .sa-ring-bg {
    stroke: transparent;
}

#sa-root .sa-ring-fg {
    stroke: var(--sa-orange);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .8s ease;
}

#sa-root .sa-cmp-open.sa-busy .sa-ring-bg {
    stroke: #ffe3c7;
}

#sa-root .sa-cmp-icon {
    width: 20px;
    height: 20px;
}

#sa-root .sa-cmp-open.sa-busy .sa-cmp-icon {
    animation: sa-tilt 1.4s ease-in-out infinite;
}

@keyframes sa-tilt {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

#sa-root .sa-cmp-open.sa-ready {
    background: var(--sa-green);
    color: #fff;
    animation: sa-pulse 1.6s ease-out 3;
}

@keyframes sa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(29, 144, 1, 0.45); }
    100% { box-shadow: 0 0 0 14px rgba(29, 144, 1, 0); }
}

#sa-root .sa-cmp-badge {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--sa-orange);
}

/* -- comparator window --------------------------------------------------------------- */
#sa-root .sa-panel-cmp .sa-bar {
    background: #2e2e2e;
}

#sa-root .sa-panel-cmp .sa-icon-btn .sa-cmp-badge {
    box-shadow: 0 0 0 2px #2e2e2e;
}

#sa-root .sa-log > p.sa-cmp-note {
    margin-left: 40px;
    background: #fff8f0;
    border: 1px dashed #ffb366;
    color: var(--sa-ink);
    white-space: normal;
}

#sa-root .sa-cmp-note .sa-progress {
    background: #ffe9d4;
}

#sa-root .sa-cmp-note .sa-progress i {
    background: linear-gradient(90deg, #ffa24d, var(--sa-orange));
}

#sa-root .sa-cmp-brief {
    margin: 0 0 12px 40px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--sa-line);
    color: var(--sa-muted);
    font-size: 12px;
    line-height: 1.45;
}

#sa-root .sa-cmp-brief strong {
    display: block;
    margin-bottom: 2px;
    color: var(--sa-ink);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

#sa-root .sa-cmp-brief p {
    margin: 0;
}

/* Always in sight in the comparator window: the button for the full table. */
#sa-root .sa-cmp-actions {
    padding: 5px 12px;
    background: #fff;
    border-top: 1px solid var(--sa-line);
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04);
}

#sa-root .sa-cmp-actions .sa-btn {
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
}

#sa-root .sa-cmp-actions .sa-btn .sa-ico {
    width: 15px;
    height: 15px;
}

/* In the main chat when a comparison has just finished: at the bottom, where the customer looks. */
/* icon + text on the first row, the button across the whole card below */
#sa-root .sa-cmp-ready {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 40px;
    padding: 12px;
    border-radius: 14px;
    background: var(--sa-green-soft);
    border: 1px solid #b7e8ae;
    animation: sa-rise .25s ease-out;
}

#sa-root .sa-cmp-ready .sa-cmp-card-icon {
    width: 32px;
    height: 32px;
    background: #fff;
}

#sa-root .sa-cmp-ready-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}

#sa-root .sa-cmp-ready-text strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--sa-green-dark);
}

#sa-root .sa-cmp-ready-text span {
    font-size: 13px;
    color: var(--sa-ink, #333);
    overflow-wrap: anywhere;
}

#sa-root .sa-cmp-ready .sa-btn {
    grid-column: 1 / -1;
    padding: 8px 14px;
    font-size: 13px;
}

#sa-root .sa-cmp-ready .sa-btn .sa-ico {
    width: 16px;
    height: 16px;
}

/* the chat's card for a comparison running in the comparator */
#sa-root .sa-cmp-card {
    margin: 0 0 12px 40px;
    padding: 12px;
    border: 1px solid #d9eed4;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f6fcf4);
}

#sa-root .sa-cmp-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

#sa-root .sa-cmp-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sa-green-soft);
    color: var(--sa-green);
    flex-shrink: 0;
}

#sa-root .sa-cmp-card.sa-running .sa-cmp-card-icon .sa-ico {
    animation: sa-tilt 1.4s ease-in-out infinite;
}

#sa-root .sa-cmp-card-head > div {
    min-width: 0;
}

#sa-root .sa-cmp-card-head strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

#sa-root .sa-cmp-card-state {
    display: block;
    margin-top: 2px;
    color: var(--sa-muted);
    font-size: 12px;
}

#sa-root .sa-cmp-card.sa-failed .sa-cmp-card-state {
    color: var(--sa-red);
}

#sa-root .sa-cmp-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

#sa-root .sa-cmp-card-actions .sa-btn {
    padding: 8px 14px;
    font-size: 13px;
}

/* the comparison inside the comparator window */
#sa-root .sa-cmp-block {
    margin: 0 0 10px 40px;
    padding: 12px;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    background: #fff;
}

#sa-root .sa-cmp-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--sa-green);
}

#sa-root .sa-cmp-block-head strong {
    color: var(--sa-ink);
    font-size: 14px;
    line-height: 1.3;
}

#sa-root .sa-verdict {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sa-green-soft);
    border-left: 4px solid var(--sa-green);
    font-size: 13px;
    line-height: 1.45;
}

#sa-root .sa-cmp-block > .sa-btn-wide {
    margin-bottom: 8px;
}

#sa-root .sa-cmp-item {
    position: relative;
    margin-top: 8px;
    padding: 8px 8px 10px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
}

#sa-root .sa-cmp-item.sa-pick {
    border-color: #9fd98f;
    background: #fbfff9;
}

#sa-root .sa-cmp-item .sa-card-row {
    padding: 2px;
}

#sa-root .sa-pick-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px 2px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sa-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

#sa-root .sa-best-for {
    margin: 6px 2px 4px;
    font-size: 12px;
    color: var(--sa-muted);
}

#sa-root .sa-best-for b {
    color: var(--sa-ink);
    font-weight: 600;
}

#sa-root .sa-points {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

#sa-root .sa-points li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 5px;
    font-size: 13px;
    line-height: 1.4;
}

#sa-root .sa-point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
}

#sa-root .sa-point-icon .sa-ico {
    width: 12px;
    height: 12px;
}

#sa-root .sa-points-pro .sa-point-icon {
    background: var(--sa-green);
}

#sa-root .sa-points-con .sa-point-icon {
    background: var(--sa-red);
}

/* -- full comparison (modal) --------------------------------------------------------- */
html.sa-modal-open,
html.sa-modal-open body {
    overflow: hidden !important;
}

#sa-root .sa-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(24, 28, 24, 0.55);
    animation: sa-fade .18s ease-out;
}

@keyframes sa-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

#sa-root .sa-modal-box {
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    max-height: 100%;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    animation: sa-rise .22s ease-out;
}

@keyframes sa-rise {
    from { transform: translateY(12px); opacity: .6; }
    to { transform: none; opacity: 1; }
}

#sa-root .sa-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 16px 22px;
    border-bottom: 1px solid var(--sa-line);
}

#sa-root .sa-modal-head .sa-cmp-card-icon {
    width: 42px;
    height: 42px;
}

#sa-root .sa-modal-titles {
    flex: 1 1 auto;
    min-width: 0;
}

#sa-root .sa-modal-kicker {
    display: block;
    color: var(--sa-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#sa-root .sa-modal-title {
    margin: 2px 0 0;
    color: var(--sa-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

#sa-root .sa-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f2f2;
    color: var(--sa-ink);
    cursor: pointer;
    flex-shrink: 0;
}

#sa-root .sa-modal-close:hover {
    background: #e6e6e6;
}

#sa-root .sa-modal-body {
    overflow: auto;
    padding: 18px 22px 22px;
    -webkit-overflow-scrolling: touch;
}

#sa-root .sa-modal-body > .sa-verdict {
    margin-bottom: 16px;
    font-size: 14px;
}

/* The table scrolls sideways by itself when the products do not fit (4 products on a tablet, any phone). */
#sa-root .sa-mx {
    display: grid;
    grid-template-columns: minmax(120px, 170px) repeat(var(--sa-cols, 2), minmax(210px, 1fr));
    border: 1px solid var(--sa-line);
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#sa-root .sa-mx > div {
    padding: 12px 14px;
    border-top: 1px solid var(--sa-line);
    border-left: 1px solid var(--sa-line);
    font-size: 14px;
    line-height: 1.45;
    min-width: 0;
}

#sa-root .sa-mx > .sa-mx-top {
    border-top: 0;
}

#sa-root .sa-mx > .sa-mx-label {
    border-left: 0;
    background: #fafafa;
    color: var(--sa-muted);
    font-size: 13px;
    font-weight: 600;
}

#sa-root .sa-mx > .sa-mx-pick {
    background: #f6fcf4;
}

#sa-root .sa-mx-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

#sa-root .sa-mx-head img {
    width: 100%;
    height: 130px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
}

#sa-root .sa-mx-head a {
    color: var(--sa-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

#sa-root .sa-mx-head a:hover {
    color: var(--sa-green);
}

#sa-root .sa-mx-price {
    color: var(--sa-green);
    font-size: 20px;
    font-weight: 700;
}

#sa-root .sa-stock {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sa-green-soft);
    color: var(--sa-green);
    font-size: 12px;
    font-weight: 600;
}

#sa-root .sa-stock.sa-out {
    background: #fdecea;
    color: var(--sa-red);
}

#sa-root .sa-mx-head .sa-cart {
    align-self: flex-start;
    margin-top: 2px;
    padding: 8px 14px;
    font-size: 13px;
}

#sa-root .sa-mx-head .sa-pick-badge {
    align-self: flex-start;
    margin: 0;
}

#sa-root .sa-mx .sa-points {
    margin: 0;
}

#sa-root .sa-mx-empty {
    color: #b0b0b0;
}

#sa-root .sa-mx-foot {
    margin: 12px 2px 0;
    color: var(--sa-muted);
    font-size: 13px;
}

#sa-root .sa-mx-foot b {
    color: var(--sa-ink);
}

/* -- stars (a chat or a comparison) --------------------------------------------------- */
#sa-root .sa-rate,
#sa-root .sa-support,
#sa-root .sa-login-nudge {
    position: relative;
    margin: 0 0 12px 40px;
    padding: 12px;
    border: 1px solid #d9eed4;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f6fcf4);
    animation: sa-rise .25s ease-out;
}

#sa-root .sa-rate-title {
    margin: 0 26px 6px 0;
    font-size: 13px;
    font-weight: 700;
}

#sa-root .sa-rate-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sa-muted);
    cursor: pointer;
}

#sa-root .sa-rate-close:hover {
    background: var(--sa-line);
}

#sa-root .sa-rate-close .sa-ico {
    width: 16px;
    height: 16px;
}

#sa-root .sa-rate-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Two rows of the same five stars: the coloured one is cut to the value (half stars too). */
#sa-root .sa-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    cursor: pointer;
    touch-action: none;
    border-radius: 6px;
    outline-offset: 3px;
}

#sa-root .sa-stars:focus-visible {
    outline: 2px solid var(--sa-green);
}

#sa-root .sa-stars-row {
    display: inline-flex;
    white-space: nowrap;
}

#sa-root .sa-stars-row svg {
    display: block;
    flex: 0 0 auto;
}

#sa-root .sa-stars-base {
    color: #dcdcdc;
}

#sa-root .sa-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    color: #f5a623;
    pointer-events: none;
    transition: width .08s linear;
}

#sa-root .sa-rated .sa-stars {
    cursor: default;
}

#sa-root .sa-rate-value {
    min-width: 44px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sa-muted);
}

#sa-root .sa-rate-comment {
    margin-top: 10px;
}

#sa-root .sa-rate-comment-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

#sa-root .sa-rate-ask {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}

#sa-root .sa-rate-comment textarea,
#sa-root .sa-support input,
#sa-root .sa-support textarea {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #cfd8cd;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    color: var(--sa-ink);
    resize: vertical;
}

#sa-root .sa-rate-comment textarea:focus,
#sa-root .sa-support input:focus,
#sa-root .sa-support textarea:focus {
    outline: 0;
    border-color: var(--sa-green);
    box-shadow: 0 0 0 3px var(--sa-green-soft);
}

#sa-root .sa-rate-sorry,
#sa-root .sa-rate-note {
    margin: 10px 0 8px;
    font-size: 13px;
}

/* -- customer care ---------------------------------------------------------------------- */
#sa-root .sa-support-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sa-green);
    font-size: 14px;
}

#sa-root .sa-support-note {
    margin: 6px 0 10px;
    font-size: 13px;
    color: var(--sa-muted);
}

#sa-root .sa-support form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

#sa-root .sa-support-error {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--sa-red);
}

#sa-root .sa-support-privacy {
    margin: 0;
    font-size: 11px;
    color: var(--sa-muted);
}

#sa-root .sa-support-done {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--sa-green-dark);
    font-size: 13px;
}

#sa-root .sa-support-done p {
    margin: 0;
}

#sa-root .sa-rate > .sa-support,
#sa-root .sa-blocks .sa-support {
    margin-left: 0;
}

#sa-root .sa-rate > .sa-support {
    margin: 10px 0 0;
}

/* In place of the composer when customer care runs in another module's live chat: the
   conversation is read here, the button opens the live chat. */
#sa-root .sa-form.sa-form-elsewhere,
#sa-root #sa-form.sa-form-elsewhere {
    display: none !important;
}

#sa-root .sa-ext-continue {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    border-width: 1px 0 0;
    border-color: var(--sa-line);
    border-radius: 0;
}

#sa-root .sa-ext-continue p {
    margin: 0;
    font-size: 13px;
    color: var(--sa-muted);
}

/* In place of the composer until a guest gives an e-mail. */
#sa-root .sa-email-gate {
    margin: 0;
    border-width: 1px 0 0;
    border-color: var(--sa-line);
    border-radius: 0;
}

/* -- shop categories ---------------------------------------------------------------------- */
#sa-root .sa-cats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#sa-root .sa-cats-title {
    font-size: 13px;
}

#sa-root .sa-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    background: #fff;
    color: var(--sa-ink);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

#sa-root .sa-cat:hover {
    border-color: var(--sa-green);
    background: var(--sa-green-soft);
}

#sa-root .sa-cat .sa-ico {
    flex: 0 0 auto;
    color: #eeb426;
}

#sa-root .sa-cat-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

#sa-root .sa-cat-name {
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

#sa-root .sa-cat-text small {
    font-size: 11px;
    color: var(--sa-muted);
}

#sa-root .sa-cat-count {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sa-bg);
    font-size: 11px;
    color: var(--sa-muted);
}

/* -- signing in keeps the chats ------------------------------------------------------------ */
#sa-root .sa-login-nudge {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border-color: #ffd9b3;
    background: linear-gradient(180deg, #fff, #fff7ef);
}

#sa-root .sa-login-nudge .sa-cmp-card-icon {
    width: 32px;
    height: 32px;
    background: #fff1e3;
    color: var(--sa-orange);
}

#sa-root .sa-login-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.3;
}

#sa-root .sa-login-text span {
    color: var(--sa-muted);
}

#sa-root .sa-login-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#sa-root .sa-login-actions .sa-btn {
    padding: 7px 14px;
    font-size: 13px;
    text-decoration: none;
}

#sa-root .sa-login-actions .sa-btn .sa-ico,
#sa-root .sa-rate .sa-btn .sa-ico,
#sa-root .sa-support .sa-btn .sa-ico {
    width: 16px;
    height: 16px;
}

/* -- small screens ------------------------------------------------------------------ */
@media (max-width: 480px) {
    #sa-root .sa-cmp-open .sa-cmp-label,
    #sa-root .sa-open-label {
        display: none;
    }

    #sa-root .sa-open {
        padding: 6px;
    }

    #sa-root .sa-logo {
        width: 44px;
        height: 44px;
    }

    #sa-root .sa-logo-bar {
        width: 38px;
        height: 38px;
    }

    #sa-root .sa-icon-btn {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 760px) {
    #sa-root .sa-modal {
        padding: 0;
    }

    #sa-root .sa-modal-box {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    #sa-root .sa-modal-head {
        padding: 12px 12px 12px 16px;
    }

    #sa-root .sa-modal-title {
        font-size: 17px;
    }

    #sa-root .sa-modal-body {
        padding: 12px;
    }

    /* Products scroll sideways; each criterion becomes a heading row across them. */
    #sa-root .sa-mx {
        grid-template-columns: repeat(var(--sa-cols, 2), minmax(68vw, 1fr));
        scroll-snap-type: x mandatory;
    }

    #sa-root .sa-mx > .sa-mx-label {
        grid-column: 1 / -1;
        padding: 8px 12px;
        border-top: 1px solid var(--sa-line);
    }

    #sa-root .sa-mx > .sa-mx-label span {
        position: sticky;
        left: 12px;
    }

    #sa-root .sa-mx > .sa-mx-label.sa-mx-corner {
        display: none;
    }

    #sa-root .sa-mx > div:not(.sa-mx-label) {
        border-top: 0;
        scroll-snap-align: start;
    }

    #sa-root .sa-mx > .sa-mx-col0 {
        border-left: 0;
    }

    #sa-root .sa-mx-head img {
        height: 110px;
    }
}

/* -- "Did not find it?" under the shop search (outside the widget: hook abcElasticSearchExtra) -- */
.sa-wand {
    margin: 10px 0;
    font-family: "Poppins", sans-serif;
    line-height: 1.35;
    color: #2e2e2e;
}

.sa-wand *,
.sa-wand *::before,
.sa-wand *::after {
    box-sizing: border-box;
}

.sa-wand [hidden] {
    display: none !important;
}

.sa-wand-note {
    margin: 0 0 8px;
    font-size: 14px;
}

.sa-wand-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 1px dashed #8fcf7f;
    border-radius: 14px;
    background: linear-gradient(90deg, #f3fcf0, #fff);
    color: #2e2e2e;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.sa-wand-toggle:hover,
.sa-wand-toggle[aria-expanded="true"] {
    border-style: solid;
    border-color: #1d9001;
    background: #ebffe7;
}

.sa-wand-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #ff7c00;
}

.sa-wand-toggle:hover .sa-wand-ico {
    animation: sa-wand-wave .6s ease-in-out;
}

@keyframes sa-wand-wave {
    0%, 100% { transform: rotate(0); }
    40% { transform: rotate(-14deg); }
    70% { transform: rotate(8deg); }
}

.sa-wand-text {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    font-size: 13px;
}

.sa-wand-text strong {
    font-weight: 700;
}

.sa-wand-text span {
    color: #1d9001;
    font-weight: 600;
}

.sa-wand-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 8px;
}

.sa-wand-field {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #cfd8cd;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #2e2e2e;
    resize: vertical;
}

.sa-wand-field:focus {
    outline: 0;
    border-color: #1d9001;
    box-shadow: 0 0 0 3px #ebffe7;
}

.sa-wand-send {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #1d9001;
    border-radius: 999px;
    background: #1d9001;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sa-wand-send:hover {
    background: #167001;
}

/* In the search dropdown: one slim line under the products. */
.sa-wand-autocomplete {
    margin: 8px 0 2px;
}

.sa-wand-autocomplete .sa-wand-toggle {
    padding: 8px 12px;
}

.sa-wand-autocomplete.sa-wand-none .sa-wand-toggle,
.sa-wand-empty .sa-wand-toggle {
    border-style: solid;
    border-color: #1d9001;
}

@media (max-width: 480px) {
    .sa-wand-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* -- 1.4.0: history rows with delete -------------------------------------------------- */
#sa-root .sa-threads .sa-thread {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f2f2f2;
}

#sa-root .sa-threads .sa-thread:last-child {
    border-bottom: 0;
}

#sa-root .sa-threads .sa-thread > button.sa-thread-open {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
}

#sa-root .sa-threads .sa-thread > button.sa-thread-del {
    flex: 0 0 44px;
    width: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-bottom: 0;
    color: #a6a6a6;
}

#sa-root .sa-threads .sa-thread > button.sa-thread-del:hover,
#sa-root .sa-threads .sa-thread > button.sa-thread-del:focus-visible {
    background: #fff4f3;
    color: var(--sa-red);
}

#sa-root .sa-threads .sa-thread > button.sa-thread-del .sa-ico {
    width: 18px;
    height: 18px;
}

#sa-root .sa-threads .sa-thread-confirm {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fffaf9;
}

#sa-root .sa-threads .sa-thread-confirm > span {
    flex: 1 1 100%;
    font-size: 13px;
    font-weight: 600;
}

#sa-root .sa-threads .sa-thread-confirm > button.sa-btn {
    display: inline-flex;
    flex-direction: row;
    width: auto;
    padding: 7px 14px;
    border: 1px solid var(--sa-green);
    border-radius: 999px;
    font-size: 13px;
}

#sa-root .sa-threads .sa-thread-confirm > button.sa-btn-danger {
    border-color: var(--sa-red);
    background: var(--sa-red);
    color: #fff;
}

#sa-root .sa-threads .sa-thread-confirm > button.sa-btn-danger .sa-ico {
    width: 16px;
    height: 16px;
}

#sa-root .sa-threads button em.sa-thread-unread {
    font-weight: 700;
}

/* -- customer care in the chat --------------------------------------------------------- */
#sa-root .sa-bar-sub.sa-staff-sub::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    vertical-align: 1px;
}

#sa-root .sa-bar-sub.sa-staff-sub.sa-online::before {
    background: #8dff6e;
    box-shadow: 0 0 0 2px rgba(141, 255, 110, 0.25);
}

#sa-root .sa-log > p.sa-staff {
    position: relative;
    margin-left: 40px;
    background: #fff8ef;
    border: 1px solid #ffe0bd;
    color: var(--sa-ink);
    white-space: normal;
}

#sa-root .sa-log > p.sa-staff::before {
    content: attr(data-initial);
    position: absolute;
    left: -40px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sa-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}

#sa-root .sa-log > p.sa-staff .sa-staff-name {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #b85a00;
}

#sa-root .sa-log > p.sa-staff .sa-staff-text {
    display: block;
}

#sa-root .sa-log > p.sa-staff-typing {
    padding: 10px 14px;
}

#sa-root .sa-log > p.sa-staff-typing em {
    font-style: normal;
    color: #b85a00;
}

#sa-root .sa-log > p.sa-staff-typing > span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--sa-orange);
    vertical-align: middle;
    animation: sa-dot 1s infinite;
}

#sa-root .sa-log > p.sa-staff-typing > span:nth-of-type(2) { animation-delay: .15s; }
#sa-root .sa-log > p.sa-staff-typing > span:nth-of-type(3) { animation-delay: .3s; }

#sa-root .sa-log > p.sa-event {
    margin: 4px 24px 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef5ec;
    color: #3d6b33;
    font-size: 12px;
    text-align: center;
    white-space: normal;
}

#sa-root .sa-unread,
#sa-root .sa-link-notice,
#sa-root .sa-photo-ask,
#sa-root .sa-pet-invite {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px 40px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--sa-line);
}

#sa-root .sa-unread {
    align-items: center;
    border-color: #ffe0bd;
    background: #fff8ef;
}

#sa-root .sa-unread > .sa-ico,
#sa-root .sa-link-notice > .sa-ico,
#sa-root .sa-photo-ask > .sa-ico {
    color: var(--sa-orange);
    margin-top: 2px;
}

#sa-root .sa-unread-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
}

#sa-root .sa-unread-text strong,
#sa-root .sa-unread-text span {
    display: block;
}

#sa-root .sa-unread-text span {
    color: var(--sa-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sa-root .sa-unread .sa-btn {
    padding: 7px 14px;
    flex-shrink: 0;
}

#sa-root .sa-link-notice {
    flex-wrap: wrap;
    background: #fff8ef;
    border-color: #ffe0bd;
}

#sa-root .sa-link-notice p,
#sa-root .sa-photo-ask p,
#sa-root .sa-pet-invite p {
    flex: 1 1 200px;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
}

/* -- photos ------------------------------------------------------------------------------ */
#sa-root .sa-form .sa-photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    background: #fff;
    color: var(--sa-green);
    cursor: pointer;
    flex-shrink: 0;
}

#sa-root .sa-form .sa-photo-btn:hover {
    background: var(--sa-green-soft);
    border-color: var(--sa-green);
}

#sa-root .sa-photo-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 0;
    background: #fff;
    border-top: 1px solid var(--sa-line);
}

#sa-root .sa-photo-preview img {
    display: block;
    max-width: 96px;
    max-height: 72px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--sa-line);
}

#sa-root .sa-photo-preview .sa-photo-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    color: var(--sa-ink);
    cursor: pointer;
}

#sa-root .sa-photo-preview .sa-photo-remove .sa-ico {
    width: 16px;
    height: 16px;
}

#sa-root .sa-log > p.sa-user .sa-user-photo {
    display: block;
    max-width: 100%;
    max-height: 260px;
    margin: 0 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
}

#sa-root .sa-log > p.sa-user.sa-has-photo {
    padding: 6px 6px 8px;
}

#sa-root .sa-log > p.sa-user.sa-has-photo:empty::after {
    content: none;
}

#sa-root .sa-photo-ask > div,
#sa-root .sa-pet-invite > div {
    flex: 1 1 auto;
    min-width: 0;
}

#sa-root .sa-photo-ask .sa-btn,
#sa-root .sa-pet-invite .sa-btn {
    padding: 8px 14px;
    text-decoration: none;
}

/* -- the pet profile ----------------------------------------------------------------------- */
#sa-root .sa-pet-invite {
    background: #f3fbf1;
    border-color: #d6ecd0;
}

#sa-root .sa-pet-invite strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--sa-green-dark);
}

#sa-root .sa-pet-invite-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--sa-orange);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px #d6ecd0;
}

#sa-root .sa-pet-invite a.sa-btn-primary .sa-ico {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    #sa-root .sa-unread,
    #sa-root .sa-link-notice,
    #sa-root .sa-photo-ask,
    #sa-root .sa-pet-invite {
        margin-left: 0;
    }
}

/* -- notice: customer care wrote (above the bubble, on every page) ------------------------ */
#sa-root .sa-toast {
    /* Above the bubble, without moving it. */
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(320px, calc(100vw - 32px));
    padding: 12px 34px 12px 12px;
    border: 1px solid #ffe0bd;
    border-radius: 14px;
    background: #fff8ef;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    font-size: 13px;
    animation: sa-toast-in .25s ease-out;
}

#sa-root .sa-toast > .sa-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--sa-orange);
}

#sa-root .sa-toast-text {
    flex: 1 1 auto;
    min-width: 0;
}

#sa-root .sa-toast-text strong {
    display: block;
    margin-bottom: 2px;
}

#sa-root .sa-toast-text span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    color: var(--sa-muted);
    overflow-wrap: anywhere;
}

#sa-root .sa-toast-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sa-muted);
    cursor: pointer;
}

#sa-root .sa-toast-close:hover {
    background: rgba(0, 0, 0, .06);
}

#sa-root .sa-toast-close .sa-ico {
    width: 16px;
    height: 16px;
}

@keyframes sa-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #sa-root .sa-toast { animation: none; }
}

/* -- the wand chat: each search from the shop search box starts with a divider ------------ */
#sa-root .sa-wand-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 8px;
    color: var(--sa-muted);
    font-size: 12px;
    font-weight: 600;
}

#sa-root .sa-wand-sep::before,
#sa-root .sa-wand-sep::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--sa-line);
}

#sa-root .sa-threads button em.sa-thread-wandmark {
    display: block;
    margin-top: 2px;
    color: var(--sa-green);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

/* -- 1.6.0: the one chat with customer care ----------------------------------------------- */
#sa-root .sa-log > p.sa-event.sa-event-go {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 10px 12px;
}

#sa-root .sa-log > p.sa-event.sa-event-go .sa-btn {
    font-size: 12px;
}

#sa-root .sa-wand-sep.sa-carried {
    color: var(--sa-orange);
}

/* The list: an icon for each kind of chat (customer care, the wand, the customer's own). */
#sa-root .sa-threads .sa-thread > button.sa-thread-open {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#sa-root .sa-threads .sa-thread-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--sa-ink);
    font-size: 13px;
}

#sa-root .sa-threads .sa-thread-body > span {
    color: var(--sa-muted);
    font-size: 12px;
}

#sa-root .sa-threads .sa-thread-ico {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f3f0;
    color: #6b7368;
}

#sa-root .sa-threads .sa-thread-ico .sa-ico {
    width: 17px;
    height: 17px;
}

#sa-root .sa-threads .sa-thread-support .sa-thread-ico {
    background: #fff1e0;
    color: var(--sa-orange);
}

#sa-root .sa-threads .sa-thread-wand .sa-thread-ico {
    background: #ebffe7;
    color: var(--sa-green);
}

#sa-root .sa-threads .sa-thread-support {
    background: #fffaf3;
}

#sa-root .sa-support-done .sa-btn {
    margin-top: 8px;
}

/* -- 1.6.3: "Customer care", the shop's live chat, always there ----------------------------- */
#sa-root .sa-support-open {
    position: absolute;
    right: calc(100% + 10px);
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--sa-orange);
    border-radius: 999px;
    background: #fff;
    color: #b85900;
    padding: 4px 14px 4px 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(46, 46, 46, 0.16);
}

#sa-root .sa-support-open:hover {
    background: #fff8ef;
}

#sa-root .sa-open[hidden] ~ .sa-support-open {
    display: none;
}

#sa-root .sa-support-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sa-orange);
    color: #fff;
}

#sa-root .sa-support-ico .sa-ico {
    width: 19px;
    height: 19px;
}

#sa-root .sa-support-open.sa-has-reply .sa-support-ico::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sa-red);
    box-shadow: 0 0 0 2px #fff;
}

#sa-root .sa-icon-btn.sa-to-support.sa-active {
    background: #fff;
    color: var(--sa-orange);
}

@media (max-width: 480px) {
    #sa-root .sa-support-open {
        padding: 4px;
    }

    #sa-root .sa-support-label {
        display: none;
    }
}

/* -- 1.8.0: rating a resolved ticket ------------------------------------------------------- */
#sa-root .sa-ticket-stars {
    gap: 2px;
}

#sa-root .sa-ticket-star {
    display: inline-flex;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #dcdcdc;
    line-height: 0;
    cursor: pointer;
}

#sa-root .sa-ticket-star.is-on {
    color: #f5a623;
}

#sa-root .sa-ticket-star:focus-visible {
    outline: 2px solid var(--sa-green);
}

#sa-root .sa-rated .sa-ticket-star {
    cursor: default;
}

/* == 1.12.0: one window ==========================================================================
   One launcher (the orb with the paw and "AI") opens one window; the assistant, the comparator,
   customer care and the history are its tabs. The bar's colour says where the customer is. */

/* -- launcher -------------------------------------------------------------------------- */
#sa-root .sa-open {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 22px 7px 7px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #2bb30a 0%, #1d9001 52%, #157200 100%);
    color: #fff;
    text-align: left;
    box-shadow: 0 12px 30px rgba(29, 144, 1, 0.34), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform .18s ease, box-shadow .18s ease;
}

#sa-root .sa-open:hover {
    background: linear-gradient(135deg, #2bb30a 0%, #1a8401 52%, #126300 100%);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(29, 144, 1, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12);
}

#sa-root .sa-open:focus-visible {
    outline: 3px solid rgba(255, 124, 0, 0.6);
    outline-offset: 3px;
}

/* A soft wave around the launcher a few times after the page loads: "you can ask here". */
#sa-root .sa-open::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 2px solid rgba(43, 179, 10, 0.55);
    animation: sa-launch-wave 2.8s ease-out 1.2s 3 both;
    pointer-events: none;
}

@keyframes sa-launch-wave {
    0% { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); }
}

#sa-root .sa-orb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: none;
}

#sa-root .sa-orb-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: #fff var(--sa-raccoon) center / cover no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

#sa-root .sa-orb-ai,
#sa-root .sa-logo-ai {
    position: absolute;
    top: -2px;
    right: -6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--sa-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .05em;
    box-shadow: 0 0 0 2px #1d9001;
}

#sa-root .sa-orb-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

#sa-root .sa-orb-ring circle {
    fill: none;
    stroke-width: 2.4;
}

#sa-root .sa-orb-ring .sa-ring-bg {
    stroke: transparent;
}

#sa-root .sa-orb-ring .sa-ring-fg {
    stroke: #ffc78f;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .8s ease;
}

/* A comparison runs in the background: the ring fills around the orb. */
#sa-root .sa-open.sa-cmp-busy .sa-ring-bg {
    stroke: rgba(255, 255, 255, 0.28);
}

#sa-root .sa-open-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.15;
}

#sa-root .sa-open-label {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

#sa-root .sa-open-tagline {
    font-size: 12px;
    font-weight: 500;
    opacity: .88;
    white-space: nowrap;
}

/* A reply waits, an answer is on its way, or a comparison is ready. */
#sa-root .sa-open-dot {
    display: none;
    position: absolute;
    top: 3px;
    left: 44px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 2px #fff;
}

#sa-root .sa-open.sa-has-reply .sa-open-dot,
#sa-root .sa-open.sa-busy-reply .sa-open-dot,
#sa-root .sa-open.sa-cmp-ready .sa-open-dot {
    display: block;
}

#sa-root .sa-open.sa-busy-reply .sa-open-dot {
    display: none;
}

#sa-root .sa-open.sa-busy-reply .sa-orb-ring {
    animation: sa-orb-spin .8s linear infinite;
}

#sa-root .sa-open.sa-busy-reply .sa-ring-bg {
    stroke: rgba(255, 255, 255, 0.35);
}

#sa-root .sa-open.sa-busy-reply .sa-ring-fg {
    stroke: #fff;
    stroke-dasharray: 24 76;
    stroke-dashoffset: 0;
    transition: none;
}

#sa-root .sa-open.sa-has-reply .sa-open-tagline {
    font-weight: 700;
    opacity: 1;
}

#sa-root .sa-open.sa-has-reply {
    animation: sa-ready-pulse 1.6s ease-in-out infinite;
}

@keyframes sa-ready-pulse {
    0%, 100% { box-shadow: 0 12px 30px rgba(29, 144, 1, 0.34), 0 0 0 0 rgba(255, 59, 48, 0); }
    50% { box-shadow: 0 12px 30px rgba(29, 144, 1, 0.42), 0 0 0 7px rgba(255, 59, 48, 0.28); }
}

@keyframes sa-orb-spin {
    from { transform: rotate(-90deg); }
    to { transform: rotate(270deg); }
}

#sa-root .sa-open.sa-cmp-ready .sa-open-dot {
    background: var(--sa-orange);
}

#sa-root .sa-open.sa-busy-reply .sa-logo::after,
#sa-root .sa-open.sa-has-reply .sa-logo::after {
    content: none;
}

/* The live chat of another module shows its button at the bottom: the launcher moves above it
   (an open window of this widget takes the corner as before; one window at a time). */
#sa-root {
    transition: bottom .25s ease, opacity .2s ease, visibility .2s ease;
}

/* Its script tells where its button is (--sa-ext-bottom); 96 px when it does not. */
#sa-root.sa-external-on:not(.sa-is-open) {
    bottom: var(--sa-ext-bottom, 96px);
}

/* Its window (or its greeting) is open: the launcher shrinks to the orb above its button. */
#sa-root.sa-external-open:not(.sa-is-open) .sa-open {
    padding: 5px;
    gap: 0;
}

#sa-root.sa-external-open:not(.sa-is-open) .sa-open-text {
    display: none;
}

#sa-root.sa-external-open .sa-open::before {
    animation: none;
}

#sa-root.sa-external-open .sa-open-dot {
    left: auto;
    right: 2px;
}

/* Even the orb would cover that window (e.g. on a phone): the launcher steps away until it closes. */
#sa-root.sa-external-cover:not(.sa-is-open) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* -- window -------------------------------------------------------------------------------- */
#sa-root .sa-panel {
    height: min(620px, calc(100vh - 32px));
}

#sa-root .sa-bar {
    min-height: 60px;
    padding: 10px 10px 10px 12px;
    transition: background .2s ease;
}

#sa-root .sa-panel[data-view="support"] .sa-bar {
    background: linear-gradient(135deg, #ff8a1d, #e86a00);
}

#sa-root .sa-panel[data-view="cmp"] .sa-bar {
    background: #2e2e2e;
}

#sa-root .sa-panel[data-view="history"] .sa-bar {
    background: #3b4a3a;
}

#sa-root .sa-logo-bar {
    position: relative;
    width: 38px;
    height: 38px;
    overflow: visible;
    background: #fff var(--sa-raccoon) center / cover no-repeat;
}

/* Customer care: the headset, no AI badge (a person answers). */
#sa-root .sa-panel[data-view="support"] .sa-logo-bar {
    background: #fff var(--sa-agent-photo, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff7c00' d='M12 1a9 9 0 0 0-9 9v7a3 3 0 0 0 3 3h3v-8H5v-2a7 7 0 0 1 14 0v2h-4v8h4v1h-7v2h6a3 3 0 0 0 3-3V10a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E")) center / var(--sa-agent-photo-size, 22px) no-repeat;
}

#sa-root .sa-panel[data-view="support"] .sa-logo-bar .sa-logo-ai {
    display: none;
}

#sa-root .sa-logo-bar .sa-logo-ai {
    top: -4px;
    right: -8px;
    font-size: 9px;
    padding: 1px 5px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

#sa-root .sa-back .sa-ico {
    width: 20px;
    height: 20px;
}

/* -- 1.19.0: no tabs; History is a button in the bar ------------------------------------------- */
#sa-root .sa-history-btn .sa-ico {
    width: 20px;
    height: 20px;
}

/* A reply of customer care waits unread, or a finished comparison was not seen yet. */
#sa-root .sa-icon-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sa-orange);
    box-shadow: 0 0 0 2px var(--sa-green);
}

/* The history: the latest comparisons, then the chats. */
#sa-root .sa-history-head {
    margin: 0;
    padding: 12px 14px 6px;
    color: var(--sa-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#sa-root .sa-threads .sa-thread-cmp .sa-thread-ico {
    background: #f1f1f1;
    color: var(--sa-ink);
}

#sa-root .sa-threads button em.sa-thread-state {
    color: var(--sa-muted);
}

/* -- views --------------------------------------------------------------------------------- */
#sa-root .sa-view {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#sa-root .sa-view > .sa-log {
    flex: 1 1 auto;
    min-height: 0;
}

#sa-root .sa-view-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 10px 6px 12px;
    border-bottom: 1px solid var(--sa-line);
    background: #fafafa;
    font-size: 13px;
    font-weight: 600;
}

#sa-root .sa-view-head-ico .sa-ico {
    width: 18px;
    height: 18px;
    color: #2e2e2e;
}

#sa-root .sa-view-head-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#sa-root .sa-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background: #fff;
    color: var(--sa-ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#sa-root .sa-mini-btn .sa-ico {
    width: 15px;
    height: 15px;
}

#sa-root .sa-view-cmp .sa-threads {
    top: 44px;
}

/* The history is a view of its own (not a dropdown any more). */
#sa-root .sa-threads.sa-history-list {
    position: static;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

#sa-root .sa-history-empty {
    margin: 0;
    padding: 36px 24px;
    color: var(--sa-muted);
    font-size: 14px;
    text-align: center;
}

/* -- customer care in another live chat ------------------------------------------------------ */
#sa-root .sa-external {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 16px;
    background: var(--sa-bg);
}

#sa-root .sa-ext-card {
    padding: 18px 16px;
    border: 1px solid #ffe0c2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(46, 46, 46, 0.06);
}

#sa-root .sa-ext-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

#sa-root .sa-ext-head strong {
    display: block;
    font-size: 16px;
}

#sa-root .sa-ext-head span:not(.sa-ext-ico) {
    font-size: 12px;
    color: var(--sa-muted);
}

#sa-root .sa-ext-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8a1d, #e86a00);
    color: #fff;
}

#sa-root .sa-ext-ico .sa-ico {
    width: 22px;
    height: 22px;
}

#sa-root .sa-ext-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
}

#sa-root .sa-ext-card.is-failed .sa-ext-status {
    color: var(--sa-red);
}

/* 1.13.0: customer care replied in the live chat while its window was closed. */
#sa-root .sa-ext-reply {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #fff1f0;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
}

#sa-root .sa-ext-reply::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--sa-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}

#sa-root .sa-ext-reply b {
    min-width: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sa-red);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

#sa-root .sa-ext-spin {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: none;
    border: 2.5px solid #ffd7b3;
    border-top-color: var(--sa-orange);
    border-radius: 50%;
    animation: sa-spin .8s linear infinite;
}

@keyframes sa-spin {
    to { transform: rotate(360deg); }
}

#sa-root .sa-ext-number {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff7ef;
    font-size: 13px;
}

#sa-root .sa-ext-number b {
    font-size: 18px;
    letter-spacing: .04em;
    color: #c25e00;
}

#sa-root .sa-ext-note {
    margin: 6px 2px 14px;
    font-size: 12px;
    color: var(--sa-muted);
}

#sa-root .sa-ext-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* -- customer care changed the cart -------------------------------------------------------------- */
#sa-root .sa-cart-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 24, 20, 0.45);
    animation: sa-fade-in .2s ease-out;
}

@keyframes sa-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#sa-root .sa-cart-box {
    width: min(420px, 100%);
    padding: 20px 18px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    animation: sa-pop-in .22s ease-out;
}

@keyframes sa-pop-in {
    from { transform: translateY(12px) scale(.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}

#sa-root .sa-cart-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 16px;
}

#sa-root .sa-cart-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--sa-green-soft);
    color: var(--sa-green);
}

#sa-root .sa-cart-rows {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

#sa-root .sa-cart-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

#sa-root .sa-cart-row:last-child {
    border-bottom: 0;
}

#sa-root .sa-cart-row b {
    flex: none;
    color: var(--sa-green);
}

#sa-root .sa-cart-row.is-remove span {
    color: var(--sa-muted);
    text-decoration: line-through;
}

#sa-root .sa-cart-note {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--sa-muted);
}

#sa-root .sa-cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#sa-root .sa-cart-actions .sa-btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* -- small screens ---------------------------------------------------------------------------- */
@media (max-width: 480px) {
    #sa-root .sa-open {
        padding: 5px;
        gap: 0;
    }

    #sa-root .sa-open-text {
        display: none;
    }

    #sa-root .sa-orb {
        width: 58px;
        height: 58px;
    }

    #sa-root .sa-orb-face {
        width: 48px;
        height: 48px;
    }

    #sa-root .sa-open-dot {
        left: auto;
        right: 2px;
    }

    #sa-root.sa-external-on:not(.sa-is-open) {
        bottom: var(--sa-ext-bottom, 88px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #sa-root .sa-open::before,
    #sa-root .sa-cart-modal,
    #sa-root .sa-cart-box {
        animation: none;
    }
}

/* 1.13.0: the order's way as a time line */
#sa-root .sa-order-line {
    position: relative;
    margin: 8px 0 10px;
    padding: 0;
    list-style: none;
}

#sa-root .sa-order-line::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 7px;
    width: 2px;
    background: #e6e1da;
}

#sa-root .sa-order-step {
    position: relative;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.35;
}

#sa-root .sa-order-dot {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
    border: 2px solid #d6cfc6;
    border-radius: 50%;
    background: #fff;
}

#sa-root .sa-order-step b {
    display: block;
    font-weight: 600;
    color: var(--sa-muted);
}

#sa-root .sa-order-step time {
    display: block;
    font-size: 11.5px;
    color: var(--sa-muted);
}

#sa-root .sa-order-step.is-done .sa-order-dot {
    border-color: #8fd19e;
    background: #8fd19e;
    box-shadow: inset 0 0 0 3px #fff;
}

#sa-root .sa-order-step.is-now .sa-order-dot {
    border-color: var(--sa-orange);
    background: var(--sa-orange);
    box-shadow: 0 0 0 4px rgba(255, 138, 29, .2);
}

#sa-root .sa-order-step.is-now b {
    color: var(--sa-text, #1f1f1f);
    font-weight: 700;
}

#sa-root .sa-order-step.is-now.is-delivered .sa-order-dot {
    border-color: #1f9d55;
    background: #1f9d55;
    box-shadow: 0 0 0 4px rgba(31, 157, 85, .18);
}

#sa-root .sa-order-step.is-now.is-cancelled .sa-order-dot,
#sa-root .sa-order-step.is-now.is-delayed .sa-order-dot,
#sa-root .sa-order-step.is-now.is-refunded .sa-order-dot {
    border-color: var(--sa-red);
    background: var(--sa-red);
    box-shadow: 0 0 0 4px rgba(217, 48, 37, .15);
}

#sa-root .sa-order-step.is-next .sa-order-dot {
    border-style: dashed;
    background: #fff;
}

#sa-root .sa-order-step.is-next span:not(.sa-order-dot) {
    color: var(--sa-muted);
    font-style: italic;
}

/* 1.13.0: on a phone the window is a sheet from the bottom (the keyboard pushes it up). */
#sa-root .sa-grip {
    display: none;
}

@media (max-width: 600px) {
    #sa-root.sa-is-open {
        right: 0;
        bottom: var(--sa-kb, 0px);
        left: 0;
    }

    #sa-root.sa-is-open .sa-panel {
        width: 100%;
        height: calc(100vh - 12px);
        height: calc(min(var(--sa-vh, 100dvh), 100dvh) - 12px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 30px rgba(46, 46, 46, .2);
        transform: translateY(var(--sa-drag, 0px));
        transition: transform .2s ease;
        animation: sa-sheet-in .24s ease-out;
    }

    #sa-root.sa-is-open .sa-panel.sa-dragging {
        transition: none;
    }

    #sa-root .sa-grip {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 3;
        display: block;
        width: 72px;
        height: 18px;
        margin-left: -36px;
        touch-action: none;
    }

    #sa-root .sa-grip::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 18px;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, .7);
    }

    #sa-root.sa-is-open .sa-bar {
        padding-top: 16px;
        touch-action: none;
    }

    #sa-root .sa-log {
        overscroll-behavior: contain;
    }
}

@keyframes sa-sheet-in {
    from { transform: translateY(40%); opacity: .4; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #sa-root.sa-is-open .sa-panel {
        animation: none;
        transition: none;
    }
}

/* 1.13.0: take a change of customer care back; dictation */
#sa-root .sa-cart-undo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 auto;
    padding: 4px 9px;
    border: 1px solid #e3ddd5;
    border-radius: 999px;
    background: #fff;
    color: var(--sa-ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#sa-root .sa-cart-undo:hover:not(:disabled) {
    border-color: var(--sa-orange);
    color: #c25e00;
}

#sa-root .sa-cart-undo:disabled {
    opacity: .5;
    cursor: default;
}

#sa-root .sa-cart-undo .sa-ico {
    width: 14px;
    height: 14px;
}

#sa-root .sa-cart-undone,
#sa-root .sa-cart-undo-failed {
    margin-left: auto;
    font-size: 12px;
    font-style: normal;
    color: var(--sa-muted);
}

#sa-root .sa-cart-undo-failed {
    color: var(--sa-red);
}

#sa-root .sa-cart-row.is-undone > span {
    text-decoration: line-through;
    opacity: .6;
}

#sa-root .sa-mic.sa-mic-on {
    border-color: var(--sa-red);
    background: #fff1f0;
    color: var(--sa-red);
    animation: sa-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes sa-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, .35); }
    50% { box-shadow: 0 0 0 6px rgba(217, 48, 37, 0); }
}

@media (prefers-reduced-motion: reduce) {
    #sa-root .sa-mic.sa-mic-on {
        animation: none;
    }
}

#sa-root .sa-cart-row:has(.sa-cart-undo),
#sa-root .sa-cart-row:has(.sa-cart-undone),
#sa-root .sa-cart-row:has(.sa-cart-undo-failed) {
    flex-wrap: wrap;
    align-items: center;
}

#sa-root .sa-cart-row > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* 1.14.0: where a request (ticket) starts in the chat with customer care */
#sa-root .sa-ticket-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    color: var(--sa-muted);
    font-size: 12px;
    line-height: 1.3;
}

#sa-root .sa-ticket-sep::before,
#sa-root .sa-ticket-sep::after {
    content: "";
    flex: 1 1 16px;
    min-width: 16px;
    height: 1px;
    background: var(--sa-line);
}

#sa-root .sa-ticket-sep b {
    flex: none;
    font-weight: 700;
    white-space: nowrap;
}

#sa-root .sa-ticket-sep span {
    overflow: hidden;
    max-width: 55%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the question was received: a tick on the customer's bubble */
#sa-root .sa-log > p.sa-user.sa-sent::after {
    content: "\2713";
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1;
    text-align: right;
    opacity: .75;
}

/* the task under the status line: which question the assistant works on */
#sa-root .sa-log .sa-typing .sa-typing-task {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--sa-muted, #6b6b6b);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* the welcome of an empty chat: questions to start from, the customer's own first */
#sa-root .sa-welcome {
    margin: 0 0 12px;
}

#sa-root .sa-welcome-section {
    margin: 0 0 4px;
}

#sa-root .sa-welcome-label {
    display: block;
    margin: 0 0 6px 40px;
    color: var(--sa-muted, #6b6b6b);
    font-size: 12px;
    font-weight: 600;
}

#sa-root .sa-welcome .sa-chips {
    margin-bottom: 10px;
}

#sa-root .sa-welcome .sa-chips.sa-welcome-support {
    margin: 0 0 12px 0;
}

#sa-root .sa-welcome .sa-chip.sa-offer-support {
    padding: 8px 14px;
    font-size: 13.5px;
}

#sa-root .sa-chip-skel {
    display: inline-block;
    width: 150px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef3ec 25%, #f8fbf7 50%, #eef3ec 75%);
    background-size: 200% 100%;
    animation: sa-skel 1.1s ease-in-out infinite;
}

#sa-root .sa-chip-skel:nth-child(2) { width: 120px; }
#sa-root .sa-chip-skel:nth-child(3) { width: 170px; }

@keyframes sa-skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    #sa-root .sa-chip-skel { animation: none; }
}

/* -- 1.15.0: the external live chat drawn in this window ------------------------------------- */
#sa-root .sa-external.is-embed {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--sa-bg);
}

#sa-root .sa-xc {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#sa-root .sa-xc.is-form,
#sa-root .sa-xc.is-failed,
#sa-root .sa-xc.is-hidden,
#sa-root .sa-xc.is-loading {
    overflow-y: auto;
}

#sa-root .sa-xc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 10px 6px 14px;
    border-bottom: 1px solid var(--sa-line);
    background: #fff;
    font-size: 12px;
    font-weight: 600;
}

#sa-root .sa-xc-state {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--sa-muted);
}

#sa-root .sa-xc-state i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b5b5b5;
    flex-shrink: 0;
}

#sa-root .sa-xc-state.is-online i { background: #2bb31a; box-shadow: 0 0 0 3px rgba(43, 179, 26, 0.18); }
#sa-root .sa-xc-state.is-busy i { background: var(--sa-orange); }

#sa-root .sa-xc-end-btn .sa-ico {
    width: 14px;
    height: 14px;
}

#sa-root .sa-xc-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 40px 20px;
    color: var(--sa-muted);
    font-size: 14px;
}

#sa-root .sa-xc-card,
#sa-root .sa-xc-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px;
    padding: 16px;
    border: 1px solid var(--sa-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(46, 46, 46, 0.05);
}

#sa-root .sa-xc-note,
#sa-root .sa-xc-intro {
    margin: 0;
    color: var(--sa-ink);
    font-size: 14px;
    line-height: 1.5;
}

#sa-root .sa-xc-greeting {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sa-green-soft);
    font-size: 13px;
}

#sa-root .sa-xc-greeting strong {
    color: var(--sa-green-dark);
    font-size: 14px;
}

#sa-root .sa-xc-input {
    width: 100%;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    background: #fff;
    color: var(--sa-ink);
    font-size: 14px;
    line-height: 1.4;
    resize: none;
}

#sa-root .sa-xc-input:focus {
    border-color: var(--sa-green);
    outline: 2px solid rgba(29, 144, 1, 0.18);
}

#sa-root .sa-xc-input.is-error,
#sa-root .sa-xc-consent.is-error {
    border-color: var(--sa-red);
    color: var(--sa-red);
}

#sa-root .sa-xc-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--sa-muted);
}

#sa-root .sa-xc-consent a,
#sa-root .sa-xc-intro a {
    color: var(--sa-green);
}

#sa-root .sa-xc-error,
#sa-root .sa-xc-alert {
    margin: 0;
    color: var(--sa-red);
    font-size: 13px;
}

#sa-root .sa-xc-alert {
    padding: 8px 14px;
    background: #fff4f3;
    border-top: 1px solid #ffd9d5;
}

#sa-root .sa-xc-submit {
    align-self: stretch;
}

#sa-root .sa-xc-back {
    display: flex;
    justify-content: center;
    padding: 0 14px 16px;
}

#sa-root .sa-xc-confirm {
    padding: 12px 14px;
    border-bottom: 1px solid #ffe0bd;
    background: #fff8ef;
    font-size: 13px;
}

#sa-root .sa-xc-confirm p {
    margin: 0 0 8px;
}

#sa-root .sa-xc-confirm-q {
    font-weight: 600;
}

#sa-root .sa-xc-confirm-info {
    color: var(--sa-muted);
    font-size: 12px;
}

#sa-root .sa-xc-confirm-row,
#sa-root .sa-xc-end-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#sa-root .sa-xc-log {
    flex: 1 1 auto;
    min-height: 0;
}

#sa-root .sa-log > p.sa-staff.sa-xc-has-icon::before {
    content: "";
    background: #fff var(--sa-xc-icon) center / cover no-repeat;
    box-shadow: 0 0 0 1px var(--sa-line);
}

#sa-root .sa-log > p.sa-xc-sys {
    white-space: pre-wrap;
}

#sa-root .sa-xc-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

#sa-root .sa-log > p.sa-user .sa-xc-attachments a {
    color: #fff;
}

#sa-root .sa-xc-image img {
    display: block;
    max-width: 180px;
    max-height: 140px;
    border-radius: 10px;
    object-fit: cover;
}

#sa-root .sa-xc-filelink {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

#sa-root .sa-xc-filelink small {
    font-weight: 400;
    opacity: .75;
}

#sa-root .sa-xc-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--sa-line);
    background: #fff;
}

#sa-root .sa-xc-compose {
    flex-wrap: wrap;
}

#sa-root .sa-xc-compose .sa-text {
    flex-basis: 0;
}

#sa-root .sa-xc-attach {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    background: #fff;
    color: var(--sa-muted);
    cursor: pointer;
    flex-shrink: 0;
}

#sa-root .sa-xc-attach:hover {
    border-color: var(--sa-green);
    color: var(--sa-green);
}

#sa-root .sa-xc-files {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#sa-root .sa-xc-file {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sa-bg);
    font-size: 12px;
}

#sa-root .sa-xc-file.is-error {
    background: #fff4f3;
    color: var(--sa-red);
}

#sa-root .sa-xc-file em {
    font-style: normal;
}

#sa-root .sa-xc-file-remove {
    display: inline-flex;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--sa-muted);
    cursor: pointer;
}

#sa-root .sa-xc-file-remove .sa-ico {
    width: 16px;
    height: 16px;
}

#sa-root .sa-xc-end {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60%;
    padding: 14px;
    overflow-y: auto;
    border-top: 1px solid var(--sa-line);
    background: #fff;
}

#sa-root .sa-xc-ended {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

#sa-root .sa-xc-done {
    margin: 0;
    color: var(--sa-green-dark);
    font-size: 13px;
    text-align: center;
}

#sa-root .sa-xc-nps,
#sa-root .sa-xc-transcript,
#sa-root .sa-xc-nps-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#sa-root .sa-xc-transcript p,
#sa-root .sa-xc-nps-q {
    margin: 0;
    color: var(--sa-muted);
    font-size: 13px;
    text-align: center;
}

#sa-root .sa-xc-faces {
    display: flex;
    justify-content: center;
    gap: 6px;
}

#sa-root .sa-xc-face {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    font-size: 28px;
    line-height: 1;
    opacity: .6;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
}

#sa-root .sa-xc-face:hover,
#sa-root .sa-xc-face.is-on {
    opacity: 1;
    transform: scale(1.12);
}

#sa-root .sa-xc-end-actions {
    justify-content: center;
}

#sa-root .sa-xc-popup {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(20, 20, 20, 0.86);
}

#sa-root .sa-xc-popup img {
    max-width: 100%;
    max-height: calc(100% - 70px);
    border-radius: 10px;
    object-fit: contain;
}

#sa-root .sa-xc-popup-bar {
    display: flex;
    gap: 8px;
}

/* == 1.19.0: the approved design (search window & assistant) ========================================= */

/* The window takes the focus when it opens (not the field): no outline around all of it. */
#sa-root .sa-panel:focus {
    outline: none;
}

/* The shop's accessibility module rings every :focus-visible element (a box-shadow and a 2 px radius,
   both !important); the window keeps its own shadow and corners when it has the focus. */
#sa-root .sa-panel:focus-visible {
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(46, 46, 46, 0.18) !important;
}

@media (max-width: 600px) {
    #sa-root.sa-is-open .sa-panel:focus-visible {
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 30px rgba(46, 46, 46, .2) !important;
    }
}

/* An open window (and the full comparison) is above everything, the shop's search field on a phone too
   (it sits at 100050). */
#sa-root.sa-is-open {
    z-index: 100060;
}

#sa-root .sa-modal {
    z-index: 100070;
}

/* -- offers under the latest answer: compare these products, ask customer care ----------------- */
#sa-root .sa-chip.sa-offer,
#sa-root .sa-chip.sa-chip-cmp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#sa-root .sa-chip-ico {
    display: flex;
    width: 14px;
    height: 14px;
}

#sa-root .sa-chip-ico .sa-ico {
    width: 14px;
    height: 14px;
}

#sa-root .sa-chips.sa-offers-row {
    margin-left: 40px;
}

/* A finished comparison: its card in the chat lights up (instead of a second notice). */
@keyframes sa-cmp-done-pulse {
    0% { box-shadow: 0 0 0 0 rgba(29, 144, 1, .45); }
    70% { box-shadow: 0 0 0 10px rgba(29, 144, 1, 0); }
    100% { box-shadow: 0 0 0 0 rgba(29, 144, 1, 0); }
}

#sa-root .sa-cmp-card.sa-cmp-done {
    border-color: var(--sa-green);
    animation: sa-cmp-done-pulse .9s ease-out 2;
}

/* -- the full comparison -------------------------------------------------------------------------- */
#sa-root .sa-modal-box {
    position: relative;
    width: min(960px, 100%);
}

#sa-root .sa-modal-body {
    background: #f7faf6;
}

/* The verdict as the assistant's recommendation. */
#sa-root .sa-modal-body > .sa-verdict {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    margin: 0 0 16px;
    padding: 14px 18px 14px 14px;
    border: 1px solid #d5e8cf;
    border-radius: 16px;
    background: #fff;
    color: var(--sa-ink);
    font-size: 14px;
    line-height: 1.55;
}

#sa-root .sa-verdict-ava {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff var(--sa-raccoon) center / cover no-repeat;
    box-shadow: 0 0 0 1px #e4e4e4;
}

#sa-root .sa-verdict-label {
    display: block;
    margin: 1px 0 2px;
    color: var(--sa-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

#sa-root .sa-verdict b {
    font-weight: 700;
}

/* The table: white, the same columns; the picked column framed in green. */
#sa-root .sa-mx {
    grid-template-columns: 150px repeat(var(--sa-cols, 2), minmax(0, 1fr));
    border-color: #e4e4e4;
    background: #fff;
    overflow: hidden;
}

#sa-root .sa-mx > div {
    padding: 14px 18px;
}

#sa-root .sa-mx > .sa-mx-label {
    background: #fff;
}

#sa-root .sa-mx > .sa-mx-pick {
    background: #fbfffa;
    box-shadow: inset 2px 0 0 var(--sa-green), inset -2px 0 0 var(--sa-green);
}

#sa-root .sa-mx > .sa-mx-pick.sa-mx-top {
    box-shadow: inset 2px 0 0 var(--sa-green), inset -2px 0 0 var(--sa-green), inset 0 2px 0 var(--sa-green);
}

#sa-root .sa-mx > .sa-mx-pick.sa-mx-last {
    box-shadow: inset 2px 0 0 var(--sa-green), inset -2px 0 0 var(--sa-green), inset 0 -2px 0 var(--sa-green);
}

#sa-root .sa-mx > .sa-mx-pick.sa-mx-top.sa-mx-col-last {
    border-top-right-radius: 15px;
}

#sa-root .sa-mx > .sa-mx-pick.sa-mx-last.sa-mx-col-last {
    border-bottom-right-radius: 15px;
}

/* The products' heads: the same build in every column. */
#sa-root .sa-mx-head {
    gap: 8px;
}

#sa-root .sa-mx-head img {
    box-sizing: border-box;
    height: 170px;
    margin-bottom: 4px;
    padding: 12px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background: #fff;
}

#sa-root .sa-mx-head .sa-pick-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    margin: 0;
}

#sa-root .sa-mx-head .sa-pick-badge .sa-ico {
    display: none;
}

#sa-root .sa-mx-head a {
    display: -webkit-box;
    min-height: calc(2 * 1.35em);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 15px;
}

#sa-root .sa-mx-pricerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

#sa-root .sa-mx-cheaper {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sa-green-soft);
    color: #145000;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#sa-root .sa-mx-cheaper.sa-ghost {
    visibility: hidden;
}

#sa-root .sa-mx-head .sa-cart {
    align-self: stretch;
    justify-content: center;
    min-height: 42px;
    margin-top: 4px;
    font-size: 14px;
}

#sa-root .sa-mx .sa-points li {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
}

#sa-root .sa-mx .sa-points li:last-child {
    margin-bottom: 0;
}

/* Stock as on the catalogue's cards: a green tick and the text, no pill. */
#sa-root .sa-mx-head .sa-stock {
    gap: 6px;
    padding: 0;
    background: none;
    font-size: 13px;
}

#sa-root .sa-mx-head .sa-stock::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 15-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 15-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#sa-root .sa-mx-head .sa-stock.sa-out::before {
    display: none;
}

/* The products in a bar under the head once their heads scrolled away. */
#sa-root .sa-mx-bar {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 150px repeat(var(--sa-cols, 2), minmax(0, 1fr));
    padding: 0 23px;
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .25);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
}

#sa-root .sa-mx-bar.sa-on {
    transform: none;
    visibility: visible;
    transition: transform .2s ease;
}

#sa-root .sa-mx-bar-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 18px;
}

#sa-root .sa-mx-bar-cell img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

#sa-root .sa-mx-bar-cell span {
    min-width: 0;
    overflow: hidden;
    color: var(--sa-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#sa-root .sa-mx-bar-cell b {
    margin-left: auto;
    color: var(--sa-green);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

#sa-root .sa-mx-bar-cell.sa-pick {
    box-shadow: inset 0 -3px 0 var(--sa-green);
}

/* The close button gets the focus when the comparison opens: a round green ring. */
#sa-root .sa-modal-close:focus-visible {
    outline: none;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--sa-green);
}

/* Phone: both products side by side, no scrolling sideways. */
@media (max-width: 760px) {
    #sa-root .sa-modal-body > .sa-verdict {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 12px 14px 12px 12px;
        font-size: 13px;
    }

    #sa-root .sa-verdict-ava {
        width: 32px;
        height: 32px;
    }

    #sa-root .sa-mx {
        grid-template-columns: repeat(var(--sa-cols, 2), minmax(0, 1fr));
        overflow: hidden;
        scroll-snap-type: none;
    }

    #sa-root .sa-mx > div {
        padding: 10px 12px;
        font-size: 13px;
    }

    #sa-root .sa-mx > .sa-mx-label {
        padding: 8px 12px;
        background: #f7faf6;
        font-size: 12px;
    }

    #sa-root .sa-mx > .sa-mx-pick,
    #sa-root .sa-mx > .sa-mx-pick.sa-mx-last {
        box-shadow: none;
    }

    #sa-root .sa-mx > .sa-mx-pick.sa-mx-top {
        box-shadow: inset 0 0 0 2px var(--sa-green);
    }

    #sa-root .sa-mx-head img {
        height: 120px;
        padding: 8px;
    }

    #sa-root .sa-mx-head .sa-pick-badge {
        top: 6px;
        left: 6px;
    }

    #sa-root .sa-mx-head a {
        min-height: calc(3 * 1.35em);
        font-size: 13px;
        -webkit-line-clamp: 3;
    }

    #sa-root .sa-mx-head .sa-cart {
        min-height: 40px;
        padding: 6px 10px;
        font-size: 13px;
    }

    #sa-root .sa-mx .sa-points li {
        font-size: 13px;
    }

    #sa-root .sa-mx-bar {
        grid-template-columns: repeat(var(--sa-cols, 2), minmax(0, 1fr));
        padding: 0 13px;
    }

    #sa-root .sa-mx-bar-label {
        display: none;
    }

    #sa-root .sa-mx-bar-cell {
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 6px 12px;
    }

    #sa-root .sa-mx-bar-cell img {
        display: none;
    }

    #sa-root .sa-mx-bar-cell span {
        flex: 1 1 100%;
        font-size: 12px;
    }

    #sa-root .sa-mx-bar-cell b {
        margin-left: 0;
        font-size: 13px;
    }
}

/* -- the launcher ------------------------------------------------------------------------------------ */
#sa-root .sa-open.sa-cmp-ready .sa-open-tagline {
    font-weight: 700;
    opacity: 1;
}

/* Tablets and desktops: the dot in the pill's top right corner (on its arc), the AI badge stays. */
@media (min-width: 768px) {
    #sa-root .sa-open .sa-open-dot {
        top: 3px;
        left: auto;
        right: 7px;
        width: 12px;
        height: 12px;
    }
}

/* Phones: a 50 px circle 12 px from the right (the shop's "to the top" and search buttons sit in the
   same column above it), a soft shadow; the dot replaces the AI badge, so they never overlap. */
@media (max-width: 767px) {
    #sa-root:not(.sa-is-open) {
        right: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    #sa-root .sa-open {
        gap: 0;
        padding: 2px;
        vertical-align: top;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    }

    #sa-root .sa-orb {
        width: 46px;
        height: 46px;
    }

    #sa-root .sa-orb-face {
        width: 42px;
        height: 42px;
    }

    #sa-root .sa-open .sa-orb-ai {
        top: -4px;
        right: -2px;
        box-shadow: 0 0 0 2px #fff;
    }

    #sa-root .sa-open .sa-open-dot {
        top: -2px;
        left: auto;
        right: -2px;
    }

    #sa-root .sa-open.sa-has-reply .sa-orb-ai,
    #sa-root .sa-open.sa-cmp-ready .sa-orb-ai {
        display: none;
    }
}

/* iPhone: Safari zooms into a field with text under 16 px when it gets the focus (and the controls on
   the right end up off the screen). */
@media (max-width: 991px) {
    #sa-root .sa-text,
    #sa-root .sa-cmp-text,
    #sa-root textarea,
    #sa-root input[type="text"] {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sa-root .sa-cmp-card.sa-cmp-done {
        animation: none;
        box-shadow: 0 0 0 2px var(--sa-green);
    }

    #sa-root .sa-mx-bar {
        transition: none;
    }
}

/* -- the row at the bottom of the search window (wand.tpl) --------------------------------------------- */
.sa-wand-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid #1d9001;
    border-radius: 14px;
    background: linear-gradient(90deg, #f3fcf0, #fff);
}

.sa-wand-panel .sa-wand-head {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: default;
}

.sa-wand-panel .sa-wand-head:hover {
    background: none;
}

.sa-wand-panel .sa-wand-form {
    position: relative;
    flex: 1 1 320px;
    align-items: center;
    margin-top: 0;
}

.sa-wand-panel .sa-wand-field {
    height: 40px;
    min-height: 40px;
    padding: 9px 12px;
    padding-left: 50px !important;
    border-radius: 999px;
    resize: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sa-wand-panel .sa-wand-send {
    padding: 9px 18px;
}

/* The raccoon with the AI badge in the field, on its left. */
.sa-wand-panel .sa-wand-ava {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 5px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    background: #fff var(--sa-raccoon) center / cover no-repeat;
    box-shadow: 0 0 0 1px #d5e8cf;
    pointer-events: none;
}

.sa-wand-panel .sa-wand-ava i {
    position: absolute;
    top: -5px;
    right: -9px;
    padding: 1px 4px;
    border-radius: 999px;
    background: #ff7c00;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .04em;
}

@media (max-width: 480px) {
    .sa-wand-panel .sa-wand-form {
        flex-direction: row;
        flex-basis: 100%;
    }
}

/* In the bottom row of the window (next to "Show all"): no frame, the title, the field and an arrow.
   The selectors weigh as much as the search module's own (as in the approved prototype). */
.ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel .sa-wand-form {
    flex: 1 1 auto;
}

/* The hint in the field says what to do; the title is enough. */
.ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel .sa-wand-text > span {
    display: none;
}

.ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel .sa-wand-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
}

.ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel .sa-wand-send::before {
    content: "\27A4";font-size:17px;line-height:1}@media (max-width:991px){.sa-wand-panel .sa-wand-field{font-size:16px!important}#rsel-search-widget.rsel-search-widget .ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px;width:100%}#rsel-search-widget.rsel-search-widget .ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel .sa-wand-head{width:100%}#rsel-search-widget.rsel-search-widget .ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel .sa-wand-form{flex:0 0 auto;flex-direction:row!important;align-items:center!important;gap:8px;width:100%;min-width:0}#rsel-search-widget.rsel-search-widget .ae_megaautocomplete.luigi-skin .qw-ac-footrow .sa-wand-panel .sa-wand-field{flex:1 1 auto;width:auto;min-width:0}}#sa-root .sa-offline-offer{display:grid;justify-items:start;gap:6px;margin:0 0 10px}#sa-root .sa-offline-offer .sa-btn{margin-left:40px}