/* ── OhMyKajo side cart ─────────────────────────────────────────────────────
   The whole drawer, in one file. Nothing else in the theme styles
   .cart-widget-side; the rules that used to sit in ohmykajo-glass-navbar.css
   and ohmykajo-navbar-final.css were removed when this was written.

   Everything below is scoped to .cart-widget-side, so the frosted panel, the
   line items, the upsell and the footer cannot reach any other widget drawer.
   Sizes come from the custom properties at the top: one place to retune the
   drawer per breakpoint instead of per element.                              */

.cart-widget-side {
    --kajo-cart-ink: #061525;
    --kajo-cart-ink-soft: #5d6f62;
    --kajo-cart-olive: #6f875f;
    --kajo-cart-olive-dark: #557145;
    --kajo-cart-accent: #f58634;
    --kajo-cart-cream: #fff8ef;
    --kajo-cart-line: rgba(6, 21, 37, .09);
    --kajo-cart-surface: rgba(255, 255, 255, .72);

    --kajo-cart-w: 408px;
    --kajo-cart-pad: 18px;
    --kajo-cart-thumb: 52px;
    --kajo-cart-gap: 14px;
    --kajo-cart-title: 12.5px;
    --kajo-cart-radius: 16px;

    width: var(--kajo-cart-w) !important;
    max-width: 100vw !important;
    /* The frosted panel. Kept from the previous drawer, with a warmer tint so
     * it sits with the rest of the storefront rather than reading as grey.
     *
     * !important on the filter because the navbar stylesheet frosts every side
     * drawer through `body .wd-side-hidden.wd-right`, which the cart still
     * matches and which outranks a single class. That rule is shared with the
     * mobile navigation, so it stays; this just wins for the cart. */
    background: linear-gradient(180deg, rgba(255, 253, 249, .88), rgba(246, 247, 243, .86)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
    border-inline-start: 1px solid rgba(255, 255, 255, .6);
    box-shadow: -24px 0 60px rgba(6, 21, 37, .14);
    color: var(--kajo-cart-ink);
}

/* ── Open and close ─────────────────────────────────────────────────────────
   Woodmart drives the drawer by swapping .wd-side-hidden for .wd-opened, so
   the motion is attached to those rather than to a class of our own. The panel
   slides on a single transform and the overlay cross-fades with it; both use
   the same duration so they arrive together.                                 */

.cart-widget-side {
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    transition:
        transform .46s cubic-bezier(.33, 1, .45, 1),
        visibility 0s linear .46s;
    will-change: transform;
}

.cart-widget-side.wd-opened {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition:
        transform .52s cubic-bezier(.22, 1, .3, 1),
        visibility 0s linear 0s;
}

/* The drawer keeps `wd-side-hidden` alongside `wd-opened`, and the navbar
 * stylesheet hides every side drawer through that class at a specificity a
 * single class cannot beat. Restating visibility on the open panel and its
 * contents keeps the whole subtree shown rather than only the parts that
 * happen to set their own. */
.cart-widget-side.wd-opened,
.cart-widget-side.wd-opened * { visibility: visible; }

/* RTL comes in from the other edge. */
[dir="rtl"] .cart-widget-side ,
body.kajo-rtl .cart-widget-side{ transform: translate3d(-100%, 0, 0); }
[dir="rtl"] .cart-widget-side.wd-opened ,
body.kajo-rtl .cart-widget-side.wd-opened{ transform: translate3d(0, 0, 0); }

/* The contents settle a beat after the panel, which reads as the drawer
 * carrying them in rather than everything arriving flat. */
.cart-widget-side .kajo-cart > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .36s cubic-bezier(.22, 1, .3, 1);
}

.cart-widget-side.wd-opened .kajo-cart > * {
    opacity: 1;
    transform: none;
}

.cart-widget-side.wd-opened .kajo-cart__head { transition-delay: .10s; }
.cart-widget-side.wd-opened .shopping-cart-widget-body { transition-delay: .15s; }
.cart-widget-side.wd-opened .shopping-cart-widget-footer { transition-delay: .20s; }

@media (prefers-reduced-motion: reduce) {
    .cart-widget-side,
    .cart-widget-side.wd-opened,
    .cart-widget-side .kajo-cart > * {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

.cart-widget-side .kajo-cart {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Woodmart's heading is reduced to the close control. The drawer states its
 * own title as the item count, so the duplicate "Shopping cart" label goes. */
.cart-widget-side .wd-heading {
    position: absolute;
    z-index: 5;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: auto;
    min-height: 0;
    /* Logical, to match the logical inset above. The box is pinned with
       inset-inline-end, so it moves to the drawer's left edge under RTL; a
       physical `padding: 14px 14px 0 0` then put the 14px gap on the inside
       and left the button flush against that edge. Stated inline-wise, the
       gap follows the box. */
    padding-block: 14px 0;
    padding-inline: 0 14px;
    border: 0;
    background: none;
}

.cart-widget-side .wd-heading .title { display: none; }

/* The circle stays 36px; the hit area is grown to 44x44 with a transparent
   outline-free pseudo-element so the control meets the minimum touch target
   without altering how it looks. */
.cart-widget-side .wd-heading .close-side-widget {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    color: var(--kajo-cart-ink);
    place-items: center;
    transition: background-color .2s ease, transform .2s ease;
}

/* The glyph is drawn by the theme inside a nested span that carries its own
 * padding, which left the cross two pixels right of the circle's centre. */
.cart-widget-side .wd-heading .close-side-widget .wd-action-icon {
    display: grid;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    place-items: center;
}

.cart-widget-side .wd-heading .close-side-widget:hover {
    background: var(--kajo-cart-accent);
    color: #fff;
    transform: rotate(90deg);
}

.cart-widget-side .wd-heading .close-side-widget a {
    display: grid;
    width: 100%;
    height: 100%;
    color: inherit;
    place-items: center;
}

.cart-widget-side .wd-heading .close-side-widget::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.cart-widget-side .wd-heading .wd-action-text { display: none; }

/* ── Head: count and shipping progress ──────────────────────────────────── */

.cart-widget-side .kajo-cart__head {
    flex: 0 0 auto;
    padding: 18px var(--kajo-cart-pad) 13px;
    border-block-end: 1px solid var(--kajo-cart-line);
}

.cart-widget-side .kajo-cart__count {
    margin: 0 0 4px;
    color: var(--kajo-cart-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
}

.cart-widget-side .wd-free-progress-bar {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.cart-widget-side .wd-free-progress-bar .progress-msg {
    margin: 0 0 8px;
    color: var(--kajo-cart-ink-soft);
    font-size: 11.5px;
    line-height: 1.35;
    text-align: center;
}

.cart-widget-side .wd-free-progress-bar .progress-msg .amount {
    color: var(--kajo-cart-olive);
    font-weight: 700;
}

.cart-widget-side .wd-free-progress-bar .progress-area {
    /* The track draws its own fill. The theme's fill element could not be
     * made to sit inside it - it measured 0px tall and laid out 10px below the
     * track whatever was done to it - so the width the theme sets on that
     * element is copied onto `--kajo-progress` by the drawer's script and
     * painted here instead. One element, fully under this stylesheet.
     *
     * overflow is visible rather than hidden so the two badges can sit on the
     * track. The fill keeps its own radius, so nothing needs clipping. */
    position: relative;
    display: flex;
    align-items: stretch;
    height: 7px;
    /* The theme sets width:100% on this element, so the right margin below was
       pushing the box - and with it the gift badge - past the edge of the
       drawer instead of shrinking it. Both are stated here as a reservation
       the theme cannot undo. */
    width: auto !important;
    /* Logical: the 30px reservation belongs to the finish end of the track,
       which is the right in English and the left in Arabic. */
    margin-block: 14px 16px !important;
    margin-inline: 0 30px !important;
    overflow: visible;
    border-radius: 999px;
    background: rgba(6, 21, 37, .1);
}

/* The gift at the finish line. Always present, and it fills in once the
   threshold is reached so the bar has a visible pay-off. */
.cart-widget-side .wd-free-progress-bar .progress-area::after {
    position: absolute;
    top: 50%;
    /* Straddling the finish line rather than sitting past it, so the whole
       badge stays inside the drawer at every width. */
    inset-inline-end: -28px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(82, 105, 72, .14) center / 14px 14px no-repeat
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526948' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
    transform: translateY(-50%);
    transition: background-color .3s ease;
    content: "";
}

/* Reached: the gift goes solid. The script already sets --kajo-progress, so
   no extra state has to be tracked. */
.cart-widget-side .wd-free-progress-bar.wd-free-progress-bar-reached .progress-area::after,
.cart-widget-side .wd-free-progress-bar .progress-area[data-reached="1"]::after {
    background-color: var(--kajo-cart-olive, #526948);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}

.cart-widget-side .wd-free-progress-bar .progress-area::before {
    width: var(--kajo-progress, 0%);
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--kajo-cart-olive), var(--kajo-cart-olive-dark));
    content: "";
    align-self: stretch;
    transition: width .5s cubic-bezier(.22, 1, .3, 1);
}

/* The van rides the leading edge of the fill. The theme's own fill element is
   hidden (below) and re-used here purely as the badge, which keeps this to the
   elements the markup already has. */
.cart-widget-side .wd-free-progress-bar .kajo-progress-van {
    position: absolute;
    top: 50%;
    /* Clamped to half its own width at either end, so a nearly empty basket
       does not hang the badge off the start of the track. */
    inset-inline-start: clamp(13px, var(--kajo-progress, 0%), calc(100% - 13px));
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--kajo-cart-olive-dark, #3f5438) center / 15px 15px no-repeat
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
    box-shadow: 0 2px 8px rgba(6, 21, 37, .25);
    transform: translate(-50%, -50%);
    transition: inset-inline-start .5s cubic-bezier(.22, 1, .3, 1);
}

/* At the finish line the van and the gift occupy the same spot and merged
   into one dark blob. The delivery has arrived, so the van hands over to the
   gift rather than sitting on top of it. */
.cart-widget-side .wd-free-progress-bar.wd-free-progress-bar-reached .kajo-progress-van,
.cart-widget-side .wd-free-progress-bar .progress-area[data-reached="1"] .kajo-progress-van {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
    transition: opacity .3s ease, transform .3s ease, inset-inline-start .5s cubic-bezier(.22, 1, .3, 1);
}

/* The theme's fill is laid out 10px below the track and was being clipped
 * away by the track's own overflow, so the bar always read as empty no matter
 * how full the basket was. Positioning it against the track makes the width
 * the theme sets inline actually show. */
.cart-widget-side .wd-free-progress-bar .progress-bar {
    /* The theme's own fill is no longer drawn; its width is read from here
     * and re-expressed as --kajo-progress above. */
    display: none !important;
}

/* ── Scroll region ──────────────────────────────────────────────────────── */

.cart-widget-side .shopping-cart-widget-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cart-widget-side .wd-scroll-content { padding: 0; }

.cart-widget-side .woocommerce-mini-cart {
    margin: 0;
    padding: 0 var(--kajo-cart-pad);
    list-style: none;
}

/* ── Line item ──────────────────────────────────────────────────────────── */

.cart-widget-side .kajo-cart-item {
    position: relative;
    display: grid;
    /* thumb | copy | price | remove. The remove control used to sit in a
     * second row and ended up stranded at the bottom corner; on one line with
     * the price it reads as part of the row's top edge, which is where people
     * look for it. */
    grid-template-columns: var(--kajo-cart-thumb) minmax(0, 1fr) auto 18px;
    gap: 2px var(--kajo-cart-gap);
    margin: 0;
    /* WooCommerce pads product-list rows by 15px on every side and outranks a
     * plain declaration, which pushed the thumbnail a further 15px in from
     * the drawer's own padding - the image ended up further from the edge
     * than from its own title. */
    padding: 11px 0 !important;
    border: 0;
    border-block-end: 1px dashed var(--kajo-cart-line);
    align-items: start;
}

.cart-widget-side .kajo-cart-item:last-child { border-block-end: 0; }

/* The row's hover state.
 *
 * The theme paints a flat grey straight onto the <li>, which has no radius and
 * stops exactly at the content box - so it sliced through the remove cross on
 * one side and ran up against the thumbnail on the other. It is replaced with
 * a rounded panel drawn behind the row, bled 10px past the content on each
 * side so both controls sit inside it with air around them. The drawer's own
 * padding is 18px, so the bleed cannot reach the edge of the panel.
 *
 * `isolation` keeps the z-index:-1 inside this row: without it the panel would
 * drop behind the drawer's background and never be seen. */
.cart-widget-side .woocommerce-mini-cart .kajo-cart-item,
.cart-widget-side .kajo-cart-item {
    isolation: isolate;
}

.cart-widget-side .woocommerce-mini-cart .kajo-cart-item:hover,
.cart-widget-side .kajo-cart-item:hover {
    background-color: transparent !important;
}

.cart-widget-side .kajo-cart-item::before {
    position: absolute;
    z-index: -1;
    inset: 3px -10px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 2px 10px rgba(6, 21, 37, .05);
    opacity: 0;
    transition: opacity .18s ease;
    content: "";
    pointer-events: none;
}

.cart-widget-side .kajo-cart-item:hover::before,
.cart-widget-side .kajo-cart-item:focus-within::before {
    opacity: 1;
}

/* A row on its way out must not light up under the pointer. */
.cart-widget-side .kajo-cart-item.is-removing::before { opacity: 0 !important; }

.cart-widget-side .kajo-cart-item__media {
    grid-column: 1;
    grid-row: 1;
    /* A flex container, so the picture is a flex item. WooCommerce floats
     * mini-cart thumbnails, and a float on a flex item is ignored outright -
     * which is what keeps the image inside its own cell rather than escaping
     * to the row's edge. Unsetting `float` in a declaration was not enough on
     * its own. */
    display: flex;
    width: var(--kajo-cart-thumb);
    min-width: var(--kajo-cart-thumb);
    height: var(--kajo-cart-thumb);
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    align-items: center;
    justify-content: center;
}

.cart-widget-side .kajo-cart-item__media img {
    display: block;
    /* WooCommerce floats mini-cart thumbnails with a right margin and caps
     * them at 65px, the old list layout where the picture sits beside the
     * text. Both are undone so the picture simply fills its square cell and
     * `contain` letterboxes it - tall bottles were being cropped before. */
    float: none !important;
    margin: 0 !important;
    /* min-width wins over both width and max-width in the sizing algorithm,
     * and a flex item's automatic minimum size is its content size - which is
     * why the picture kept measuring 65px inside a 52px cell however often
     * width and max-width were set, and why tall bottles came out cropped by
     * the cell's overflow. Zeroing the minimum lets it shrink to the cell. */
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 3px;
    object-fit: contain !important;
    border-radius: 9px;
    background: none;
}

.cart-widget-side .kajo-cart-item__info {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cart-widget-side .kajo-cart-item__title {
    margin: 0;
    color: var(--kajo-cart-ink);
    font-size: var(--kajo-cart-title);
    /* 800 read as shouty rather than considered. A lighter weight with more
     * tracking is what makes small uppercase look composed. */
    font-weight: 600;
    letter-spacing: .07em;
    line-height: 1.35;
    text-transform: uppercase;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* The title is a flex item inside .kajo-cart-item__info, which blockifies
     * -webkit-box and leaves the clamp inert - a long name still ran to three
     * lines and made every row a different height. Capping the box at two
     * lines is what actually holds it. 2 x 1.25 x the title size. */
    max-height: calc(var(--kajo-cart-title) * 1.35 * 2);
}

.cart-widget-side .kajo-cart-item__title a {
    color: inherit;
    text-decoration: none;
}

.cart-widget-side .kajo-cart-item__title a:hover { color: var(--kajo-cart-olive); }

.cart-widget-side .kajo-cart-item__variant,
.cart-widget-side .kajo-cart-item__fixed {
    color: var(--kajo-cart-ink-soft);
    font-size: 11.5px;
    line-height: 1.25;
}

.cart-widget-side .kajo-cart-item__price {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-block-start: 1px;
    color: var(--kajo-cart-ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.cart-widget-side .kajo-cart-item__price del {
    margin-inline-end: 4px;
    color: var(--kajo-cart-ink-soft);
    font-weight: 500;
}

/* Top right, on the price's line. */
.cart-widget-side .kajo-cart-item__remove {
    position: static !important;
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: none !important;
    color: var(--kajo-cart-ink-soft) !important;
    font-size: 15px !important;
    line-height: 17px;
    text-align: center;
    opacity: .55;
    transition: color .2s ease, opacity .2s ease, background-color .2s ease;
}

.cart-widget-side .kajo-cart-item__remove:hover {
    background: rgba(245, 134, 52, .14) !important;
    color: var(--kajo-cart-accent) !important;
    opacity: 1;
}

/* The theme decorates `.remove` with its own cross, which doubled up with the
 * one in the markup and rendered as two glyphs side by side. The element's
 * text is the cross, so the pseudo-elements go. */
.cart-widget-side .kajo-cart-item__remove::before,
.cart-widget-side .kajo-cart-item__remove::after {
    display: none !important;
    content: none !important;
}

/* ── Quantity stepper ───────────────────────────────────────────────────── */

.cart-widget-side .kajo-cart-qty {
    display: inline-grid;
    grid-template-columns: 26px minmax(22px, auto) 26px;
    width: max-content;
    height: 28px;
    margin-block-start: 2px;
    border: 1px solid var(--kajo-cart-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    align-items: center;
    justify-items: center;
}

.cart-widget-side .kajo-cart-qty__btn {
    display: grid;
    /* Locked square, and not allowed to stretch: as a grid item it was
     * taking the stepper's full height and the hover fill came out as an
     * oval rather than a circle. */
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--kajo-cart-ink);
    cursor: pointer;
    place-items: center;
    align-self: center;
    justify-self: center;
    transition: background-color .18s ease, color .18s ease;
}

.cart-widget-side .kajo-cart-qty__btn svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.cart-widget-side .kajo-cart-qty__btn:hover:not(:disabled) {
    background: var(--kajo-cart-olive);
    color: #fff;
}

.cart-widget-side .kajo-cart-qty__btn:disabled { cursor: not-allowed; opacity: .35; }

.cart-widget-side .kajo-cart-qty__value {
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}

.cart-widget-side .kajo-cart-item.is-busy { opacity: .55; pointer-events: none; }

/* ── Complete your routine ──────────────────────────────────────────────── */

.cart-widget-side .kajo-cart-upsell {
    margin: 2px 0 0;
    padding: 14px var(--kajo-cart-pad) 18px;
    border-block-start: 1px solid var(--kajo-cart-line);
}

.cart-widget-side .kajo-cart-upsell__heading {
    margin: 0 0 11px;
    color: var(--kajo-cart-ink-soft);
    /* !important because the theme sizes h2 responsively and its mobile rule
     * took this to roughly double, which broke out of the drawer. The element
     * stays an h2 so the section keeps its heading semantics. */
    font-size: 12px !important;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.3 !important;
    text-align: center;
    text-transform: uppercase;
}

.cart-widget-side .kajo-cart-upsell__heading strong {
    color: var(--kajo-cart-ink);
    font-weight: 700;
}

.cart-widget-side .kajo-cart-upsell__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: var(--kajo-cart-radius);
    /* A hard white card floated above the frosted panel instead of sitting in
     * it. A warm tint with a hairline and no drop shadow belongs to the same
     * surface as everything else in the drawer. */
    background: rgba(255, 252, 246, .62);
    border: 1px solid rgba(6, 21, 37, .07);
    box-shadow: none;
    align-items: center;
}

.cart-widget-side .kajo-cart-upsell__card.has-media { grid-template-columns: 56px minmax(0, 1fr); }

.cart-widget-side .kajo-cart-upsell__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 4px;
    border-radius: 10px;
    background: #fff;
}

.cart-widget-side .kajo-cart-upsell__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cart-widget-side .kajo-cart-upsell__title {
    color: var(--kajo-cart-ink);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.35;
    text-transform: uppercase;
    max-height: calc(11.5px * 1.35 * 2);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cart-widget-side .kajo-cart-upsell__select {
    width: 100%;
    max-width: 100%;
    height: 32px;
    min-height: 0;
    padding: 0 26px 0 2px;
    border: 0;
    border-block-end: 1px solid var(--kajo-cart-line);
    border-radius: 0;
    background: transparent;
    color: var(--kajo-cart-ink-soft);
    font-size: 13px;
    /* The theme hides native select chevrons across the storefront, so the
     * drawer draws its own rather than leaving the control looking inert. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235d6f62' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 11px;
    -webkit-appearance: none;
    appearance: none;
}

[dir="rtl"] .cart-widget-side .kajo-cart-upsell__select ,
body.kajo-rtl .cart-widget-side .kajo-cart-upsell__select{
    padding: 0 2px 0 26px;
    background-position: left 4px center;
}

.cart-widget-side .kajo-cart-upsell__add {
    display: inline-flex;
    width: 100%;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--kajo-cart-olive);
    color: #fff;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color .2s ease, transform .18s ease;
}

.cart-widget-side .kajo-cart-upsell__add:hover { background: var(--kajo-cart-olive-dark); }
.cart-widget-side .kajo-cart-upsell__add:active { transform: scale(.985); }
.cart-widget-side .kajo-cart-upsell__add.is-busy { cursor: progress; opacity: .7; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.cart-widget-side .shopping-cart-widget-footer {
    flex: 0 0 auto;
    padding: 10px var(--kajo-cart-pad) calc(10px + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--kajo-cart-line);
    background: rgba(255, 255, 255, .5);
}

/* With nothing in the basket this still painted its border, background and
 * padding - a pale strip across the bottom of an otherwise empty drawer. */
.cart-widget-side .shopping-cart-widget-footer.wd-cart-empty { display: none; }

.cart-widget-side .kajo-cart__subtotal {
    display: flex;
    /* The theme gives this row its own padding and rule, which made a single
     * line of text 53px tall and was most of the oversized footer. */
    padding: 0 !important;
    border: 0 !important;
    margin: 0 0 5px;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cart-widget-side .kajo-cart__subtotal-label {
    color: var(--kajo-cart-ink-soft);
    font-size: 13.5px;
    font-weight: 400;
}

.cart-widget-side .kajo-cart__subtotal-value {
    color: var(--kajo-cart-ink);
    font-size: 15.5px;
    font-weight: 800;
}

/* Side by side rather than stacked. Checkout comes first in the markup and
   takes the larger share, so the primary action still reads as the primary
   one at a glance and the reading order matches the visual one. */
.cart-widget-side .kajo-cart__actions {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}

.cart-widget-side .kajo-cart__checkout,
.cart-widget-side .kajo-cart__view {
    display: grid;
    width: 100%;
    /* The theme margins buttons in this group; left alone they added 10px of
     * dead height to the footer. */
    margin: 0 !important;
    padding: 0 12px;
    border: 0;
    border-radius: 999px !important;
    /* Stated for both, at both breakpoints: the theme gives .checkout a 5px
       radius and a taller minimum on narrow screens, and two buttons sharing
       a row have to be the same shape and the same height. */
    min-height: 40px !important;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    white-space: nowrap;
    place-items: center;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.cart-widget-side .kajo-cart__checkout {
    background: var(--kajo-cart-olive) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(85, 113, 69, .22);
}

.cart-widget-side .kajo-cart__checkout:hover {
    background: var(--kajo-cart-olive-dark) !important;
    color: #fff !important;
}

.cart-widget-side .kajo-cart__view {
    background: transparent !important;
    color: var(--kajo-cart-ink-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(6, 21, 37, .16);
    text-decoration: none;
}

.cart-widget-side .kajo-cart__view:hover {
    color: var(--kajo-cart-olive) !important;
    box-shadow: inset 0 0 0 1px var(--kajo-cart-olive);
}

/* ── Empty ──────────────────────────────────────────────────────────────── */

.cart-widget-side .kajo-cart__empty {
    display: grid;
    gap: 10px;
    padding: 56px var(--kajo-cart-pad);
    place-items: center;
    text-align: center;
}

/* Woodmart draws its own empty-basket graphic on this container. The drawer
 * renders its own mark below, so the theme's is suppressed rather than having
 * two carts stacked above the message. */
.cart-widget-side .kajo-cart__empty::before,
.cart-widget-side .kajo-cart__empty::after {
    display: none !important;
    content: none !important;
}

.cart-widget-side .kajo-cart__empty-mark {
    display: grid;
    width: 64px;
    height: 64px;
    margin-block-end: 2px;
    border-radius: 50%;
    background: rgba(111, 135, 95, .1);
    place-items: center;
}

.cart-widget-side .kajo-cart__empty-mark svg {
    width: 28px;
    height: 22px;
    fill: none;
    stroke: var(--kajo-cart-olive);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.cart-widget-side .kajo-cart__empty .empty {
    margin: 0;
    color: var(--kajo-cart-ink);
    font-size: 15px;
    font-weight: 700;
}

.cart-widget-side .kajo-cart__empty-hint {
    max-width: 24ch;
    margin: 0 0 4px;
    color: var(--kajo-cart-ink-soft);
    font-size: 12.5px;
    line-height: 1.45;
}

.cart-widget-side .kajo-cart__shop-link {
    display: grid;
    min-height: 42px;
    padding: 0 24px;
    place-items: center;
    border-radius: 999px;
    background: var(--kajo-cart-olive) !important;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Breakpoints ────────────────────────────────────────────────────────────
   Only the custom properties change; no part is re-laid-out per screen.      */

@media (max-width: 1024px) {
    .cart-widget-side {
        --kajo-cart-w: 388px;
        --kajo-cart-pad: 16px;
        --kajo-cart-thumb: 50px;
        --kajo-cart-gap: 13px;
    }

    /* Tablets keep the fixed header visible above the drawer; phones below
     * get the full screen, handled in the next breakpoint. */
    body .cart-widget-side {
        inset-block-start: calc(var(--kajo-mobile-header-h, 62px) + var(--kajo-admin-bar-offset, 0px)) !important;
        inset-block-end: 0 !important;
        height: auto !important;
    }
}

@media (max-width: 767px) {
    .cart-widget-side {
        --kajo-cart-w: min(100vw, 400px);
        --kajo-cart-pad: 14px;
        --kajo-cart-thumb: 48px;
        --kajo-cart-gap: 12px;
        --kajo-cart-title: 12px;
    }

    /* On a phone the basket is the whole task, so it takes the whole screen
     * and covers the header rather than sitting in a slot beneath it. The
     * close control is the way back, which is why it is pinned over the panel
     * rather than scrolling with the contents. */
    body .cart-widget-side {
        inset-block-start: var(--kajo-admin-bar-offset, 0px) !important;
        inset-block-end: 0 !important;
        /* Span the viewport by anchoring both inline edges rather than by
         * setting a width. `100vw` counts the scrollbar while a fixed
         * element's containing block does not, so a 100vw panel pinned to the
         * right edge hung 15px off the left of the screen - every row looked
         * flush to the edge because the drawer, not its contents, was out of
         * position. */
        inset-inline: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        /* Above the fixed header, which sits at 1007 and was painting over
         * the drawer's own heading and close control. The dimmer goes just
         * under the panel so the header is covered there too. */
        z-index: 1010 !important;
    }

    body .wd-close-side { z-index: 1008 !important; }

    .cart-widget-side .kajo-cart__count { font-size: 14.5px; }
    .cart-widget-side .kajo-cart-upsell__card.has-media { grid-template-columns: 50px minmax(0, 1fr); }
    .cart-widget-side .kajo-cart__checkout { min-height: 42px; }
}

/* Short viewports: the keyboard on a phone can leave very little height, so
 * the item list keeps the space and the trimmings give it up. */
@media (max-height: 640px) {
    .cart-widget-side .kajo-cart__head { padding-block: 16px 12px; }
    .cart-widget-side .kajo-cart-upsell { padding-block: 14px 16px; }
}

/* Where the browser cannot frost the panel, fall back to an opaque one rather
 * than letting the page show through the text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cart-widget-side { background: #fdfbf7 !important; }
}

/* A removed line collapses out of the list immediately. WooCommerce's
   remove_from_cart round trip takes as long as the server takes - close to
   four seconds on this install - and without this the row sat there looking
   untouched until it answered. The cart itself is still decided by the
   response; this only stops the interface pretending nothing happened. */
.cart-widget-side .kajo-cart-item.is-removing {
    overflow: hidden;
    pointer-events: none;
    /* !important on the transition because the theme sets its own on these
     * rows and was winning, so the row jumped instead of collapsing. */
    transition:
        height .26s cubic-bezier(.4, 0, .2, 1),
        padding .26s cubic-bezier(.4, 0, .2, 1),
        opacity .18s ease !important;
}

.cart-widget-side .kajo-cart-item.is-removing.is-collapsing {
    height: 0 !important;
    /* The row's own padding is !important (it has to outrank WooCommerce's),
     * so the collapse has to match it - otherwise the row bottomed out at
     * 22px of leftover padding and only vanished when the server replied. */
    padding-block: 0 !important;
    border-block-end-width: 0 !important;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cart-widget-side .kajo-cart-item.is-removing { transition-duration: .01ms; }
}

/* While a change is in flight the whole drawer is marked busy rather than the
   control that was pressed. The contents are replaced wholesale by the
   refresh, so a state parked on a button is either thrown away with it or
   left stuck when no replacement arrives. The panel stays readable and
   interactive-looking; it just stops accepting a second press. */
.cart-widget-side.is-updating .kajo-cart__head,
.cart-widget-side.is-updating .shopping-cart-widget-body,
.cart-widget-side.is-updating .shopping-cart-widget-footer {
    pointer-events: none;
}

.cart-widget-side.is-updating .kajo-cart__subtotal-value,
.cart-widget-side.is-updating .kajo-cart__count {
    opacity: .45;
    transition: opacity .18s ease;
}

/* A hairline at the top edge of the panel, so a slow server still reads as
   working rather than as nothing having happened. */
.cart-widget-side.is-updating .kajo-cart__head::after {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--kajo-cart-olive), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: kajo-cart-progress 1.1s linear infinite;
    content: "";
}

.cart-widget-side .kajo-cart__head { position: relative; }

@keyframes kajo-cart-progress {
    0% { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-widget-side.is-updating .kajo-cart__head::after { animation: none; }
}

/* ── Transitions between cart states ────────────────────────────────────────
   WooCommerce replaces the drawer's contents wholesale on every change, so
   each new state arrives as fresh DOM. CSS animations run on insertion, which
   means the transition needs no JavaScript and cannot get out of step with
   the markup it is animating. */

/* Rows settle in rather than appearing. The stagger is capped at four so a
   large basket does not turn into a long cascade on every refresh. */
@keyframes kajo-cart-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.cart-widget-side .kajo-cart-item {
    animation: kajo-cart-row-in .28s cubic-bezier(.22, 1, .3, 1) both;
}

.cart-widget-side .kajo-cart-item:nth-child(2) { animation-delay: .04s; }
.cart-widget-side .kajo-cart-item:nth-child(3) { animation-delay: .08s; }
.cart-widget-side .kajo-cart-item:nth-child(n+4) { animation-delay: .12s; }

/* A row being removed must not re-run the entry animation while it collapses. */
.cart-widget-side .kajo-cart-item.is-removing { animation: none; }

/* Going from a full basket to an empty one is the biggest jump in the drawer,
   so the empty state is given a proper entrance instead of appearing. */
@keyframes kajo-cart-empty-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes kajo-cart-empty-mark-in {
    0% { opacity: 0; transform: scale(.82); }
    60% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

.cart-widget-side .kajo-cart__empty {
    animation: kajo-cart-empty-in .36s cubic-bezier(.22, 1, .3, 1) both;
}

.cart-widget-side .kajo-cart__empty-mark {
    animation: kajo-cart-empty-mark-in .44s cubic-bezier(.3, 1.3, .5, 1) .06s both;
}

.cart-widget-side .kajo-cart__empty .empty { animation: kajo-cart-empty-in .36s ease .1s both; }
.cart-widget-side .kajo-cart__empty-hint { animation: kajo-cart-empty-in .36s ease .15s both; }
.cart-widget-side .kajo-cart__shop-link { animation: kajo-cart-empty-in .36s ease .2s both; }

/* The suggestion changes with the basket, so it gets the same treatment. */
.cart-widget-side .kajo-cart-upsell__card {
    animation: kajo-cart-row-in .3s cubic-bezier(.22, 1, .3, 1) .06s both;
}

/* The figures that change on every edit cross-fade rather than snapping. */
.cart-widget-side .kajo-cart__subtotal-value,
.cart-widget-side .kajo-cart__count {
    animation: kajo-cart-figure-in .3s ease both;
}

@keyframes kajo-cart-figure-in {
    from { opacity: .35; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-widget-side .kajo-cart-item,
    .cart-widget-side .kajo-cart__empty,
    .cart-widget-side .kajo-cart__empty-mark,
    .cart-widget-side .kajo-cart__empty .empty,
    .cart-widget-side .kajo-cart__empty-hint,
    .cart-widget-side .kajo-cart__shop-link,
    .cart-widget-side .kajo-cart-upsell__card,
    .cart-widget-side .kajo-cart__subtotal-value,
    .cart-widget-side .kajo-cart__count {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
    }
}


/* ===========================================================================
 * Announcement bar, discount pills, upsell card and the savings row.
 * ======================================================================== */

/* ── Announcement bar ───────────────────────────────────────────────────── */

/* Colours come from the settings screen as inline custom properties, so the
   shop owner can change them without anyone touching this file. */
.cart-widget-side .kajo-cart-announce {
    flex: 0 0 auto;
    /* The drawer draws a 1px white hairline down its leading edge, and the bar
       starts inside it - which read as a white sliver against the dark
       background. The bar is pulled over the hairline so it runs edge to
       edge; everything below it still sits inside the border as before. */
    margin-inline-start: -1px;
    padding: 9px 16px;
    background: var(--kajo-announce-bg, #132a1c);
    color: var(--kajo-announce-fg, #fff);
    text-align: center;
}

.cart-widget-side .kajo-cart-announce__text {
    display: block;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    text-decoration: none;
    /* A long message wraps rather than being cut off - the drawer is narrow
       and a clipped offer reads worse than a two-line one. */
    text-wrap: pretty;
}

a.kajo-cart-announce__text:hover,
a.kajo-cart-announce__text:focus-visible {
    text-decoration: underline;
}

/* The close button is pinned to the top-right corner of the drawer, which is
   where the announcement now starts. The drawer's script measures the bar and
   publishes its height, so a message that wraps to two lines pushes the button
   down by exactly as much as it needs. */
.cart-widget-side .wd-heading {
    inset-block-start: var(--kajo-announce-h, 0px);
}

/* ── Discount pill ──────────────────────────────────────────────────────── */

.cart-widget-side .kajo-cart-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--kajo-cart-olive, #526948);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Line item price, when discounted ───────────────────────────────────── */

/* Two rows: the old and new price on the first, the pill on its own beneath.
   Side by side the pill competed with the title for the row's width and
   stretched the card; underneath it costs nothing horizontally. The column is
   shrink-to-fit, so both rows stay flush with the right-hand edge. */
.cart-widget-side .kajo-cart-item__price.has-sale {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    align-items: center;
    gap: 3px 6px;
}

.cart-widget-side .kajo-cart-item__price.has-sale .kajo-cart-pill {
    grid-column: 1 / -1;
    justify-self: end;
}

.cart-widget-side .kajo-cart-item__was {
    color: var(--kajo-cart-ink-soft, rgba(6, 21, 37, .55));
    font-size: 12px;
    font-weight: 500;
    text-decoration: line-through;
}

.cart-widget-side .kajo-cart-item__now {
    font-weight: 700;
}

/* ── Upsell card ────────────────────────────────────────────────────────── */

/* Image, details, action - one row, with the button in its own column so a
   long product name cannot push it out of reach. */
.cart-widget-side .kajo-cart-upsell__card.has-media {
    grid-template-columns: 56px minmax(0, 1fr) auto;
}

.cart-widget-side .kajo-cart-upsell__card:not(.has-media) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cart-widget-side .kajo-cart-upsell__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 13px;
}

.cart-widget-side .kajo-cart-upsell__was {
    color: var(--kajo-cart-ink-soft, rgba(6, 21, 37, .55));
    font-size: 12px;
    text-decoration: line-through;
}

.cart-widget-side .kajo-cart-upsell__now {
    font-weight: 700;
}

/* The action now has a column of its own rather than a full-width row under
   the details, so it stops at its own width and keeps a floor so the third
   column does not jump about between one product and the next. */
.cart-widget-side .kajo-cart-upsell__add {
    width: auto;
    min-width: 62px;
    padding: 0 13px;
    font-size: 11.5px;
}

/* ── Order Summary ───────────────────────────────────────── */

/* WooCommerce pads every paragraph in this widget by 15px a side, which left
   the summary sitting crooked against the subtotal and the button below it.
   Every row here shares one left edge and one right edge. */
/* WooCommerce pads the direct children of this widget by 15px a side, which
   inset the whole summary from the subtotal and the button below it. */
.cart-widget-side .kajo-cart-summary {
    padding: 0 !important;
    margin: 0;
}

.cart-widget-side .kajo-cart-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 5px;
    padding: 0 !important;
    font-size: 13px;
}

.cart-widget-side .kajo-cart-summary__heading {
    margin: 0 0 9px;
    color: var(--kajo-cart-ink);
    /* !important because the theme sizes headings responsively and was
       printing this one at 25px on mobile. */
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    text-transform: none;
}

.cart-widget-side .kajo-cart-summary__label {
    color: var(--kajo-cart-ink-soft);
    font-weight: 500;
}

.cart-widget-side .kajo-cart-summary__value,
.cart-widget-side .kajo-cart-summary__value .amount {
    color: var(--kajo-cart-ink);
    font-weight: 600;
    white-space: nowrap;
}

.cart-widget-side .kajo-cart-summary__row.is-discount .kajo-cart-summary__value,
.cart-widget-side .kajo-cart-summary__row.is-discount .kajo-cart-summary__value .amount {
    color: var(--kajo-cart-accent);
    font-weight: 700;
}

/* Free shipping is the one line here worth looking at twice. */
.cart-widget-side .kajo-cart-summary__value.is-free {
    color: var(--kajo-cart-olive);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 12px;
}

/* "Calculated at checkout" is a statement of fact, not a figure. */
.cart-widget-side .kajo-cart-summary__value.is-muted {
    color: var(--kajo-cart-ink-soft);
    font-weight: 500;
}

/* ── Total ────────────────────────────────────────────────── */

/* Ruled off from the summary above it: this is the figure being paid. */
.cart-widget-side .kajo-cart__subtotal {
    padding-block-start: 9px !important;
    border-block-start: 1px solid var(--kajo-cart-line) !important;
    /* !important because the theme margins this paragraph too, which left the
       buttons sitting flush against the total. */
    margin: 8px 0 16px !important;
}

.cart-widget-side .kajo-cart__subtotal-label {
    color: var(--kajo-cart-ink);
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
}

.cart-widget-side .kajo-cart__subtotal-figures {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 8px;
    min-width: 0;
}

/* The saving, stated as a headline rather than buried in a row of its own. */
.cart-widget-side .kajo-cart__off {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 21px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--kajo-cart-accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
}

.cart-widget-side .kajo-cart__was,
.cart-widget-side .kajo-cart__was .amount {
    color: var(--kajo-cart-ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: line-through;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .cart-widget-side .kajo-cart-upsell__card.has-media {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .cart-widget-side .kajo-cart-upsell__add {
        min-width: 58px;
        height: 34px;
        padding: 0 11px;
    }
}

/* ===========================================================================
   The lazy upsell's empty placeholder must take no room.

   The section is printed with the `hidden` attribute, but `[hidden]` is a
   user-agent rule and the author rule above gives .kajo-cart-upsell
   `padding: 14px … 18px` and a 1px top border. Measured in the drawer while
   the suggestion was still loading: a 33px band and a visible rule sitting
   between the cart line and Order Summary, with nothing in it.

   Stated at author level with !important so it cannot lose to the padding
   rule above or to anything the theme adds later. The script removes the
   element entirely once it has an answer, so this only ever applies while the
   block is pending or has failed.
   ======================================================================== */

.cart-widget-side .kajo-cart-upsell[hidden],
.cart-widget-side .kajo-cart-upsell--pending:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* ===========================================================================
   RTL: the drawer belongs on the left
   ---------------------------------------------------------------------------
   Woodmart anchors this drawer to the right through `.wd-right` and hides it
   with a transform. The parent theme's RTL stylesheet flips that transform to
   translateX(-100%) - correct for a LEFT-anchored drawer - but the anchoring
   itself never moved. The closed drawer therefore sat at translateX(-408px)
   from a right-hand anchor, which put it in the MIDDLE of the screen, visible,
   and it then slid rightwards into place. That is the "opens from mid-screen"
   behaviour.

   Rather than fight the parent's transform, the anchoring is brought into
   agreement with it: in Arabic the drawer lives on the left, so -100% hides it
   off the left edge and it slides in from there, mirroring English exactly.
   ======================================================================== */
body.kajo-rtl .cart-widget-side.wd-right,
[dir="rtl"] .cart-widget-side.wd-right {
    right: auto;
    left: 0;
}

/* The close control is pinned to the drawer's inline-end, which is now the
   left - the outer screen edge, mirroring English. The announcement runs the
   full width underneath it, so it needs the button's width kept clear or the
   Arabic message runs under the cross. */
body.kajo-rtl .cart-widget-side .kajo-cart-announce,
[dir="rtl"] .cart-widget-side .kajo-cart-announce {
    padding-inline: 16px 58px;
}

/* The fill is a flex child, so it already grows from the correct end once the
   track is RTL; only the gradient's angle is physical. */
body.kajo-rtl .cart-widget-side .wd-free-progress-bar .progress-area::before,
[dir="rtl"] .cart-widget-side .wd-free-progress-bar .progress-area::before {
    background: linear-gradient(270deg, var(--kajo-cart-olive), var(--kajo-cart-olive-dark));
}

/* The van is centred on the leading edge by a half-width shift. The inset is
   logical and flips by itself; the shift is physical and has to be told. */
body.kajo-rtl .cart-widget-side .wd-free-progress-bar .kajo-progress-van,
[dir="rtl"] .cart-widget-side .wd-free-progress-bar .kajo-progress-van {
    transform: translate(50%, -50%);
}

body.kajo-rtl .cart-widget-side .wd-free-progress-bar.wd-free-progress-bar-reached .kajo-progress-van,
body.kajo-rtl .cart-widget-side .wd-free-progress-bar .progress-area[data-reached="1"] .kajo-progress-van,
[dir="rtl"] .cart-widget-side .wd-free-progress-bar.wd-free-progress-bar-reached .kajo-progress-van,
[dir="rtl"] .cart-widget-side .wd-free-progress-bar .progress-area[data-reached="1"] .kajo-progress-van {
    transform: translate(50%, -50%) scale(.55);
}

/* The close control overlays the top of the drawer at its inline-end. In Arabic
   that is the left, and the free-shipping message runs the full drawer width
   and wraps, so its second line passed straight under the cross. The earlier
   clearance was put on `.kajo-cart-announce` - the dark bar above - which is
   not the element that collides. Measured: close y 48-84 x 14-50, progress
   message y 76-92 x 14-375. */
body.kajo-rtl .cart-widget-side .wd-free-progress-bar .progress-msg,
[dir="rtl"] .cart-widget-side .wd-free-progress-bar .progress-msg {
    padding-inline-end: 58px;
}