/**
 * Klever_VidurAi — standalone assistant page (/vidur-ai).
 *
 * Loaded only by viduraipage_index_index.xml, on top of chatbot.css. Everything
 * here is scoped to .klv-chat--page, so the floating widget is untouched: this
 * file only re-lays-out the same components as a full-page app shell —
 * CHATS rail | conversation column — in place of a corner panel.
 *
 * Colours are the tokens chatbot.css already defines on .klv-chat (brand green
 * #00843D, accent yellow #FFC300, ink #222222); no new palette is introduced.
 */

/* ------------------------------------------------------------------- shell */

/* The page runs on the `empty` page layout — no theme header, no footer — so it
   owns the whole viewport. Magento still wraps the block in page-wrapper >
   page-main > columns > column.main, which carry the theme's container width and
   padding; flatten them so the shell can reach every edge. */
/* The handle puts this class on <body> itself. Magento still nests the block in
   page-wrapper > page-main > columns > column.main, which carry the theme's
   container width and padding. Flatten those, then make the whole chain a flex
   column so the shell inherits the full viewport height instead of collapsing to
   its content — a plain `height: 100dvh` on the shell alone would overflow
   whatever else main.content happens to render above it. */
.klever-vidurai-page {
    display: flex;
    flex-direction: column;
    /* A definite height, deliberately not min-height: the flex chain below only
       shrinks its items — letting the transcript scroll instead of growing — when
       it has a fixed size to distribute. With a floor, everything sizes to its
       content and the composer is pushed past the clipped bottom edge. */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.klever-vidurai-page .page-wrapper,
.klever-vidurai-page .page-main,
.klever-vidurai-page .columns,
.klever-vidurai-page .column.main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Without this a flex child refuses to shrink below its content height, and
       the inner scroll areas push the page taller than the viewport. */
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.klv-chat--page {
    /* Reading width of the conversation column, centred inside whatever width
       is left after the rail. */
    --klv-column: 52rem;
    --klv-rail: 17.5rem;
    /* Height of the slim assistant bar. The intro state lifts the bar out of
       flow to centre the landing under it, and pads by exactly this much. */
    --klv-bar: 3.5rem;

    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Beat the corner-panel offsets chatbot.css sets on the open state, including
   the ones inside its max-width: 480px block. */
.klv-chat--page.klv-chat--open {
    position: static;
    inset: auto;
    bottom: auto;
}

.klv-chat__shell {
    display: flex;
    align-items: stretch;
    /* Height comes from the flex chain above, which is anchored to 100dvh on the
       body — dvh so a collapsing mobile URL bar can't leave a gap under the page. */
    flex: 1 1 auto;
    min-height: 0;
    background: var(--klv-white);
}

/* -------------------------------------------------------------------- rail */

.klv-chat__rail {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--klv-rail);
    width: var(--klv-rail);
    min-height: 0;
    padding: 16px 14px;
    background: var(--klv-surface);
    border-right: 1px solid var(--klv-hairline);
    transition: flex-basis .18s ease, width .18s ease, padding .18s ease;
}

.klv-chat__rail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-bottom: 18px;
}

.klv-chat__rail-brand {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-right: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--klv-ink);
    white-space: nowrap;
    overflow: hidden;
}

.klv-chat__rail-brand:hover {
    color: var(--klv-green-deep);
}

.klv-chat__rail-brand svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--klv-green);
}

.klv-chat__rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--klv-ink-55);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__rail-toggle:hover {
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
}

.klv-chat__rail-toggle svg {
    width: 19px;
    height: 19px;
}

.klv-chat__rail-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--klv-green) 0%, var(--klv-green-deep) 100%);
    color: var(--klv-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 94, 44, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}

.klv-chat__rail-new:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 94, 44, .3);
}

.klv-chat__rail-new:disabled {
    opacity: .6;
    cursor: default;
}

.klv-chat__rail-new svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

.klv-chat__rail-heading {
    flex: 0 0 auto;
    margin: 20px 0 10px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--klv-green);
}

/* Stands in for the chat list until the visitor has identified themselves. */
.klv-chat__rail-note {
    flex: 0 0 auto;
    padding: 14px;
    background: var(--klv-white);
    border: 1px solid var(--klv-hairline);
    border-radius: 12px;
}

.klv-chat__rail-note-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__rail-note-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--klv-ink-70);
}

.klv-chat__rail-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.klv-chat__rail-list::-webkit-scrollbar {
    width: 6px;
}

.klv-chat__rail-list::-webkit-scrollbar-thumb {
    background: var(--klv-green-20);
    border-radius: 3px;
}

.klv-chat__rail-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--klv-ink-70);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__rail-item:hover:not(:disabled) {
    background: var(--klv-green-08);
    color: var(--klv-ink);
}

.klv-chat__rail-item.is-active {
    background: var(--klv-green-12);
    color: var(--klv-green-deep);
    font-weight: 600;
}

.klv-chat__rail-item:disabled {
    opacity: .55;
    cursor: default;
}

.klv-chat__rail-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--klv-hairline);
    color: var(--klv-ink-70);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.klv-chat__rail-foot:hover {
    color: var(--klv-green-deep);
}

.klv-chat__rail-foot svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------- rail collapsed */

.klv-chat--rail-collapsed .klv-chat__rail {
    flex-basis: 4rem;
    width: 4rem;
    padding-left: 10px;
    padding-right: 10px;
}

.klv-chat--rail-collapsed .klv-chat__rail-brand span,
.klv-chat--rail-collapsed .klv-chat__rail-new span,
.klv-chat--rail-collapsed .klv-chat__rail-foot span,
.klv-chat--rail-collapsed .klv-chat__rail-heading,
.klv-chat--rail-collapsed .klv-chat__rail-note,
.klv-chat--rail-collapsed .klv-chat__rail-list {
    display: none;
}

.klv-chat--rail-collapsed .klv-chat__rail-head {
    flex-direction: column;
    gap: 12px;
}

.klv-chat--rail-collapsed .klv-chat__rail-brand {
    margin-right: 0;
}

.klv-chat--rail-collapsed .klv-chat__rail-new {
    padding: 11px 0;
}

.klv-chat--rail-collapsed .klv-chat__rail-foot {
    justify-content: center;
}

/* ------------------------------------------------- conversation column */

.klv-chat--page .klv-chat__panel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--klv-white);
}

.klv-chat--page .klv-chat__header {
    min-height: var(--klv-bar);
    padding: 12px max(20px, calc((100% - var(--klv-column)) / 2));
}

.klv-chat--page .klv-chat__title {
    font-size: 17px;
}

.klv-chat__badge {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--klv-green-12);
    color: var(--klv-green-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The transcript and the composer share one centred reading column, produced by
   symmetric padding rather than an extra wrapper element — the markup is the
   same in both modes. */
.klv-chat--page .klv-chat__body {
    gap: 14px;
    padding: 26px max(20px, calc((100% - var(--klv-column)) / 2));
    background: var(--klv-white);
}

.klv-chat--page .klv-chat__composer {
    padding: 4px max(20px, calc((100% - var(--klv-column)) / 2)) 18px;
}

/* -------------------------------------------------------------- intro state */

/* Before the first question the column is a centred landing: greeting, then the
   composer, then the starter chips — the composer sits between them, which it
   can only do if the message body stops being a box of its own. */
.klv-chat--page.klv-chat--intro .klv-chat__panel {
    justify-content: center;
    /* The bar is taken out of flow so that `justify-content: center` centres the
       greeting, composer and chips only — otherwise the header centres too. */
    padding-top: var(--klv-bar);
    padding-bottom: 4vh;
    /* A short viewport can leave the landing taller than the panel; let it
       scroll rather than clipping against the panel's overflow: hidden. */
    overflow-y: auto;
}

.klv-chat--page.klv-chat--intro .klv-chat__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: var(--klv-white);
}

.klv-chat--page.klv-chat--intro .klv-chat__body {
    display: contents;
}

.klv-chat--page.klv-chat--intro .klv-chat__body > * {
    order: 1;
    margin-left: max(20px, calc((100% - var(--klv-column)) / 2));
    margin-right: max(20px, calc((100% - var(--klv-column)) / 2));
}

.klv-chat--page.klv-chat--intro .klv-chat__hero {
    order: 1;
    margin-bottom: 18px;
    text-align: center;
}

.klv-chat--page.klv-chat--intro .klv-chat__composer {
    order: 2;
}

.klv-chat--page.klv-chat--intro .klv-chat__chips {
    order: 3;
    margin-top: 14px;
}

.klv-chat--page.klv-chat--intro .klv-chat__hero-eyebrow {
    justify-content: center;
    font-size: 16px;
    color: var(--klv-ink-70);
}

.klv-chat--page.klv-chat--intro .klv-chat__hero-eyebrow svg {
    width: 22px;
    height: 22px;
}

.klv-chat--page.klv-chat--intro .klv-chat__hero-title {
    font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
    line-height: 1.25;
}

/* Starter chips read as a row of suggestions on a wide column, not a stack. */
.klv-chat--page.klv-chat--intro .klv-chat__chips {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.klv-chat--page.klv-chat--intro .klv-chat__chip {
    padding: 10px 18px;
    font-size: 13.5px;
}

/* ------------------------------------------------------- messages / answers */

/* An assistant answer is a card with the sparkle mark alongside it. */
.klv-chat__row {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.klv-chat__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 12px;
    color: var(--klv-green);
}

.klv-chat__avatar svg {
    width: 22px;
    height: 22px;
}

.klv-chat--page .klv-chat__row .klv-chat__msg--assistant {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.65;
}

.klv-chat--page .klv-chat__msg--user {
    max-width: 70%;
    padding: 12px 18px;
    border-radius: 16px;
    font-size: 15px;
}

/* Follow-on blocks belong to the answer, so they line up with its text rather
   than with the avatar gutter. */
.klv-chat--page .klv-chat__cards,
.klv-chat--page .klv-chat__chips:not([data-role="starter"]),
.klv-chat--page .klv-chat__rate,
.klv-chat--page .klv-chat__note,
.klv-chat--page .klv-chat__rate-form {
    margin-left: 34px;
}

.klv-chat--page .klv-chat__chips:not([data-role="starter"]) {
    flex-direction: row;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------- card carousel */

/* On a wide column the cards run across instead of down, one scroll track with
   snap points and an arrow, the way the reference screens show them. */
.klv-chat--page .klv-chat__cards--carousel {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 15rem;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

@media (max-width: 767px) {
    .klv-chat--page .klv-chat__cards--carousel {
        grid-auto-columns: minmax(15rem, 1fr);
    }
}

.klv-chat--page .klv-chat__cards--carousel::-webkit-scrollbar {
    height: 6px;
}

.klv-chat--page .klv-chat__cards--carousel::-webkit-scrollbar-thumb {
    background: var(--klv-green-20);
    border-radius: 3px;
}

.klv-chat--page .klv-chat__cards--carousel .klv-chat__card {
    scroll-snap-align: start;
}

/* The track and its arrows share a positioned wrapper. */
.klv-chat__carousel {
    position: relative;
    align-self: stretch;
    min-width: 0;
}

.klv-chat__carousel-nav {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--klv-ink);
    color: var(--klv-white);
    cursor: pointer;
    opacity: .92;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 2;
}

.klv-chat__carousel-nav:hover {
    transform: scale(1.06);
    opacity: 1;
}

.klv-chat__carousel-nav[hidden] {
    display: none;
}

.klv-chat__carousel-nav--prev {
    left: -10px;
}

.klv-chat__carousel-nav--next {
    right: -10px;
}

.klv-chat__carousel-nav svg {
    width: 18px;
    height: 18px;
}

.klv-chat__carousel-nav--prev svg {
    transform: rotate(90deg);
}

.klv-chat__carousel-nav--next svg {
    transform: rotate(-90deg);
}

/* Cards are taller and image-led on the page, closer to a catalog tile. */
.klv-chat--page .klv-chat__cards--carousel .klv-chat__card {
    padding: 14px;
}

.klv-chat--page .klv-chat__cards--carousel .klv-chat__card-main {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.klv-chat--page .klv-chat__cards--carousel .klv-chat__card-img {
    width: 100%;
    height: 9.5rem;
}

/* A staggered set card holds two tyres side by side where an ordinary card holds
   one, so it takes two of the track's columns rather than squeezing both axle
   rows into a single tile's width. */
.klv-chat--page .klv-chat__cards--carousel .klv-chat__card--set {
    grid-column: span 2;
}

/* Its axle rows run two-up once there is room for them, the way the storefront's
   own staggered box puts front and rear beside each other. */
@media (min-width: 48rem) {
    .klv-chat--page .klv-chat__card--set .klv-chat__set-axles {
        flex-direction: row;
    }

    .klv-chat--page .klv-chat__card--set .klv-chat__set-axle {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ---------------------------------------------------------------- composer */

/* The pill from the reference screens: a soft brand glow around the gradient
   rim, and a round send button rather than the widget's stadium one. */
.klv-chat--page .klv-chat__composer-frame {
    border-radius: 999px;
    box-shadow: 0 0 0 4px var(--klv-green-08), 0 8px 26px rgba(0, 94, 44, .12);
    transition: box-shadow .18s ease;
}

.klv-chat--page .klv-chat__composer-frame:focus-within {
    box-shadow: 0 0 0 5px var(--klv-green-12), 0 10px 30px rgba(0, 94, 44, .18);
}

.klv-chat--page .klv-chat__composer-field {
    flex-direction: row;
    /* Centred, not flex-end: the field is one line tall until the visitor writes
       a long message, and bottom-aligning a single line against a 44px send
       button leaves the text riding high in the pill. */
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 22px;
    border-radius: 999px;
}

/* A pinned product turns the pill back into a rounded box so the quote fits. */
.klv-chat--page .klv-chat__composer-field:has(.klv-chat__reply:not([hidden])) {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px 10px;
    border-radius: 20px;
}

.klv-chat--page .klv-chat__composer-frame:has(.klv-chat__reply:not([hidden])) {
    border-radius: 22px;
}

.klv-chat--page .klv-chat__input {
    /* No vertical padding: the row is centred, and padding here would offset the
       text against the send button again. The script sizes the height to the
       content, so one line of text is exactly one line tall. */
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    /* One line until the script sizes it to the content. This is the height the
       field has before JS runs (the markup says rows="2" so it still reads as a
       text box without it), and the floor the measurement can never fall below —
       scrollHeight still reports the true content height once it exceeds a line. */
    height: 1.5em;
    min-height: 1.5em;
}

.klv-chat--page .klv-chat__send {
    align-self: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.klv-chat--page .klv-chat__send svg {
    width: 20px;
    height: 20px;
}

.klv-chat__disclaimer {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--klv-ink-55);
}

/* --------------------------------------------- lead gate / returning picker */

/* Both are narrow forms; centre them in the wide column instead of stretching. */
.klv-chat--page .klv-chat__lead,
.klv-chat--page .klv-chat__resume {
    width: min(30rem, 100%);
    margin: 0 auto;
    padding-top: 6vh;
}

/* ----------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
    .klv-chat--page {
        --klv-rail: 15rem;
    }
}

/* The rail costs too much width on a phone: it collapses to its icon strip and
   the conversation takes the rest. */
@media (max-width: 767px) {
    .klv-chat__rail {
        flex-basis: 3.5rem;
        width: 3.5rem;
        padding-left: 8px;
        padding-right: 8px;
    }

    .klv-chat__rail-brand span,
    .klv-chat__rail-new span,
    .klv-chat__rail-foot span,
    .klv-chat__rail-heading,
    .klv-chat__rail-note,
    .klv-chat__rail-list,
    .klv-chat__rail-toggle {
        display: none;
    }

    .klv-chat__rail-new {
        padding: 10px 0;
    }

    .klv-chat__rail-foot {
        justify-content: center;
    }

    .klv-chat--page .klv-chat__msg--user {
        max-width: 85%;
    }

    .klv-chat--page .klv-chat__cards,
    .klv-chat--page .klv-chat__chips:not([data-role="starter"]),
    .klv-chat--page .klv-chat__rate,
    .klv-chat--page .klv-chat__note,
    .klv-chat--page .klv-chat__rate-form {
        margin-left: 0;
    }

    .klv-chat__row {
        gap: 8px;
    }

    .klv-chat__carousel-nav {
        display: none;
    }

    /* The header row (title + "AI mode" badge + Sign in pill + cart + kebab) is
       one non-wrapping flex line sized for desktop; at phone widths its
       non-shrinking items alone exceed the available width even with the title
       collapsed to nothing, so Sign in ends up jammed against its neighbours.
       Drop the purely decorative badge and tighten the remaining pills/gaps so
       everything fits with room to spare. */
    .klv-chat--page .klv-chat__badge {
        display: none;
    }

    .klv-chat--page .klv-chat__header {
        gap: 6px;
    }

    .klv-chat--page .klv-chat__bar-link {
        padding: 6px 12px;
        font-size: 12px;
    }

    .klv-chat--page .klv-chat__bar-cart {
        width: 30px;
        height: 30px;
    }
}

/* -------------------------------------------------------------------- RTL */

[dir="rtl"] .klv-chat__rail {
    border-right: 0;
    border-left: 1px solid var(--klv-hairline);
}

[dir="rtl"] .klv-chat__rail-item {
    text-align: right;
}

[dir="rtl"] .klv-chat--page .klv-chat__cards,
[dir="rtl"] .klv-chat--page .klv-chat__chips:not([data-role="starter"]),
[dir="rtl"] .klv-chat--page .klv-chat__rate,
[dir="rtl"] .klv-chat--page .klv-chat__note,
[dir="rtl"] .klv-chat--page .klv-chat__rate-form {
    margin-left: 0;
    margin-right: 34px;
}

[dir="rtl"] .klv-chat--page .klv-chat__composer-field {
    padding: 10px 22px 10px 10px;
}

[dir="rtl"] .klv-chat__carousel-nav--prev {
    left: auto;
    right: -10px;
}

[dir="rtl"] .klv-chat__carousel-nav--next {
    right: auto;
    left: -10px;
}

/* ------------------------------------------------------------------ top bar */

.klv-chat__bar-link {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid var(--klv-green-20);
    border-radius: 999px;
    color: var(--klv-green-deep);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.klv-chat__bar-link:hover {
    background: var(--klv-green-08);
    border-color: var(--klv-green);
}

/* Signed-in indicator: same pill as the sign-in link, with the account glyph
   ahead of the customer's first name. */
.klv-chat__bar-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--klv-green-08);
}

.klv-chat__bar-account svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.klv-chat__bar-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--klv-ink);
    cursor: pointer;
    transition: background .15s ease;
}

.klv-chat__bar-cart:hover {
    background: var(--klv-green-08);
}

.klv-chat__bar-cart svg {
    width: 21px;
    height: 21px;
}

.klv-chat__bar-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--klv-green);
    color: var(--klv-white);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* -------------------------------------------------------------------- drawer */

.klv-chat__drawer {
    /* chatbot.css (loaded before this file) makes the drawer an absolutely
       positioned overlay for the popup, with inset: 0. Left un-overridden here,
       that combination of position: absolute + left/right: 0 + this rule's own
       width: 26rem is over-constrained, and the spec then drops `right` and
       keeps `left` — pinning the drawer to the left edge of the whole viewport
       instead of the right-hand column below. position: static cancels that and
       returns the drawer to the shell's normal flex flow. */
    position: static;
    display: flex;
    flex-direction: column;
    flex: 0 0 26rem;
    width: 26rem;
    min-height: 0;
    background: var(--klv-white);
    border-left: 1px solid var(--klv-hairline);
    border-radius: 0;
}

.klv-chat__drawer-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: var(--klv-bar);
    padding: 10px 12px;
    border-bottom: 1px solid var(--klv-hairline);
}

.klv-chat__drawer-title {
    margin-right: auto;
    padding-left: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__drawer-nav,
.klv-chat__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--klv-ink-70);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__drawer-nav:hover,
.klv-chat__drawer-close:hover {
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
}

.klv-chat__drawer-nav svg,
.klv-chat__drawer-close svg {
    width: 18px;
    height: 18px;
}

.klv-chat__drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
}

.klv-chat__drawer-body::-webkit-scrollbar {
    width: 6px;
}

.klv-chat__drawer-body::-webkit-scrollbar-thumb {
    background: var(--klv-green-20);
    border-radius: 3px;
}

/* The conversation column gives up the width, not the rail. */
@media (max-width: 1279px) {
    .klv-chat--drawer .klv-chat__rail {
        flex-basis: 4rem;
        width: 4rem;
        padding-left: 10px;
        padding-right: 10px;
    }

    .klv-chat--drawer .klv-chat__rail-brand span,
    .klv-chat--drawer .klv-chat__rail-new span,
    .klv-chat--drawer .klv-chat__rail-foot span,
    .klv-chat--drawer .klv-chat__rail-heading,
    .klv-chat--drawer .klv-chat__rail-note,
    .klv-chat--drawer .klv-chat__rail-list {
        display: none;
    }
}

/* On a phone the drawer is the whole surface, sliding over the conversation. */
@media (max-width: 767px) {
    .klv-chat__drawer {
        position: absolute;
        inset: 0;
        z-index: 5;
        width: auto;
        flex-basis: auto;
        border-left: 0;
    }

    .klv-chat__shell {
        position: relative;
    }

    .klv-chat__drawer-body {
        padding-top: 0;
    }
}

/* --------------------------------------------------------------- quick view */

.klv-chat__card-main--open {
    cursor: pointer;
    border-radius: 8px;
}

.klv-chat__card-main--open:focus-visible {
    outline: 2px solid var(--klv-green);
    outline-offset: 2px;
}

.klv-chat__pv-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: var(--klv-surface);
    border: 1px solid var(--klv-hairline);
    border-radius: 12px;
}

.klv-chat__pv-img {
    max-width: 100%;
    max-height: 14rem;
    object-fit: contain;
}

.klv-chat__pv-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
}

.klv-chat__pv-thumb {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    padding: 4px;
    border: 1px solid var(--klv-line);
    border-radius: 8px;
    background: var(--klv-white);
    cursor: pointer;
}

.klv-chat__pv-thumb.is-active {
    border-color: var(--klv-green);
}

.klv-chat__pv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.klv-chat__pv-brand {
    margin: 16px 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--klv-green);
}

.klv-chat__pv-name {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--klv-ink);
}

.klv-chat__pv-sku {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--klv-ink-55);
}

.klv-chat__pv-was {
    margin: 0;
    font-size: 13px;
    color: var(--klv-ink-55);
    text-decoration: line-through;
}

.klv-chat__pv-price {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__pv-stock {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #B00020;
}

.klv-chat__pv-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.klv-chat__pv-btn {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.klv-chat__pv-btn:disabled {
    opacity: .6;
    cursor: default;
}

.klv-chat__pv-btn--ask {
    background: transparent;
    border-color: var(--klv-green-20);
    color: var(--klv-green-deep);
}

.klv-chat__pv-btn--ask:hover:not(:disabled) {
    background: var(--klv-green-08);
    border-color: var(--klv-green);
}

.klv-chat__pv-btn--add {
    background: var(--klv-white);
    border-color: var(--klv-ink);
    color: var(--klv-ink);
}

.klv-chat__pv-btn--add:hover:not(:disabled) {
    background: var(--klv-ink);
    color: var(--klv-white);
}

.klv-chat__pv-btn--buy {
    background: linear-gradient(140deg, var(--klv-green) 0%, var(--klv-green-deep) 100%);
    color: var(--klv-white);
}

.klv-chat__pv-btn--buy:hover:not(:disabled) {
    box-shadow: 0 8px 20px rgba(0, 94, 44, .3);
}

.klv-chat__pv-link {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--klv-green);
    text-align: center;
}

/* ------------------------------------------------------------- order pass

   chatbot.css carries the whole component; this is only what the standalone
   page changes. The page gives the pass a real 26rem column instead of an
   overlay over a popup, so it can afford what the widget cannot: the three
   fitting methods side by side, and a little more air between sections. */

/* Above the phone breakpoint only: these are more specific than chatbot.css's
   own narrow fallback, so left unguarded they would put three fitting cards
   across a 400px-wide screen. */
@media (min-width: 481px) {
    .klv-chat--page .klv-pass__choices {
        grid-template-columns: repeat(3, 1fr);
    }

    .klv-chat--page .klv-pass__choice {
        flex-direction: column;
        align-items: flex-start;
    }

    .klv-chat--page .klv-pass__choice-blurb {
        padding-left: 0;
    }
}

.klv-chat--page .klv-pass__sec-head {
    padding-top: 15px;
    padding-bottom: 15px;
}

.klv-chat--page .klv-pass__centers {
    max-height: 17rem;
}

/* The page has room for the whole list, so the head does not have to be as
   tight as it is inside the popup. */
.klv-chat--page .klv-pass__head-total {
    font-size: 21px;
}

/* -------------------------------------------------------------- drawer RTL */

[dir="rtl"] .klv-chat__drawer {
    border-left: 0;
    border-right: 1px solid var(--klv-hairline);
}

[dir="rtl"] .klv-chat__bar-count {
    right: auto;
    left: -2px;
}

[dir="rtl"] .klv-pass__remove {
    margin-left: 0;
    margin-right: auto;
}

/* The assistant's "Go to your cart" link, which opens the drawer instead of
   navigating. Styled as an action so it does not read as an outbound link. */
.klv-chat__cart-open {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--klv-green-12);
    color: var(--klv-green-deep) !important;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__cart-open:hover {
    background: var(--klv-green);
    color: var(--klv-white) !important;
}

/* ---------------------------------------------- inline checkout: address, payment */

.klv-chat__checkout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.klv-chat__checkout-title {
    margin: 4px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__checkout-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}