/*
 * Cart Info V5 - structure and default look, shared by every instance on the page.
 *
 * Each instance's Styling settings arrive as --ci5-* custom properties that default/view.php sets on
 * #<id>, on its drawer (#<id>-drawer) and on a template element hosting its button ([data-ci5-host]).
 * A property nobody set falls back to the Cms design tokens, and every token fallback here is the token
 * sheet's own default (or Site Header V5's, for the tokens the sheet leaves without one), so the cart
 * follows the site's brand until the merchant changes something.
 *
 *   colours   --ci5-accent  --ci5-accent-hover  --ci5-accent-text  --ci5-text  --ci5-muted  --ci5-card-bg
 *             --ci5-border  --ci5-soft  --ci5-sale  --ci5-badge-bg  --ci5-badge-text  --ci5-overlay
 *             --ci5-icon-color  --ci5-icon-hover  --ci5-title-color  --ci5-name-color  --ci5-meta-color
 *             --ci5-price-color  --ci5-was-color  --ci5-qty-bg  --ci5-qty-color  --ci5-qty-border
 *             --ci5-remove-color  --ci5-remove-hover  --ci5-btn2-bg  --ci5-btn2-color  --ci5-btn2-border
 *             --ci5-btn2-hover-bg  --ci5-btn2-hover-color  --ci5-summary-bg  --ci5-summary-border
 *             --ci5-summary-label  --ci5-summary-value  --ci5-discount  --ci5-total-color  --ci5-input-bg
 *             --ci5-input-border  --ci5-input-color  --ci5-panel-bg  --ci5-close-color  --ci5-progress-track
 *             --ci5-progress-fill  --ci5-empty-icon  --ci5-empty-title  --ci5-empty-text  --ci5-notice-bg
 *             --ci5-notice-border  --ci5-notice-color  --ci5-toast-bg  --ci5-toast-color
 *   sizes     --ci5-radius  --ci5-btn-radius  --ci5-border-w  --ci5-pad  --ci5-gap  --ci5-img  --ci5-img-mini
 *             --ci5-img-radius  --ci5-font-size  --ci5-title-size  --ci5-name-size  --ci5-price-size
 *             --ci5-qty-radius  --ci5-qty-h  --ci5-btn-size  --ci5-summary-radius  --ci5-summary-pad
 *             --ci5-summary-w  --ci5-total-size  --ci5-input-radius  --ci5-icon-size  --ci5-drawer-w
 *             --ci5-modal-w  --ci5-panel-radius  --ci5-empty-title-size
 *   weights   --ci5-title-weight  --ci5-name-weight  --ci5-price-weight  --ci5-btn-weight  --ci5-total-weight
 *   buttons   --ci5-btn-transform  --ci5-btn-spacing (the "Uppercase" switch)
 *
 * Every var() fallback is the look the cart had before the setting existed, so a blank setting changes
 * nothing. Where that look was simply inherited (a weight, say), the fallback is "inherit".
 *
 * Storefront themes style bare a, button, input, ul and img, so every rule is prefixed with .ci5-scope.
 * Separation is borders and backgrounds only - no shadows. The focus ring and [hidden] are !important:
 * themes ship "*:focus {outline: none !important}".
 */

.ci5-scope {
    --_a: var(--ci5-accent, var(--cms-primary, #005ea8));
    --_ah: var(--ci5-accent-hover, var(--ci5-accent, var(--cms-primary-hover, #004d8a)));
    --_at: var(--ci5-accent-text, var(--cms-primary-contrast, #ffffff));
    --_t: var(--ci5-text, var(--cms-text, #18202c));
    --_m: var(--ci5-muted, var(--cms-muted, #5f6b7a));
    --_bg: var(--ci5-card-bg, var(--cms-card, #ffffff));
    --_soft: var(--ci5-soft, var(--cms-surface-2, #f8f9fa));
    --_line: var(--ci5-border, var(--cms-line, #dfe5ec));
    --_lw: var(--ci5-border-w, 1px);
    --_r: var(--ci5-radius, var(--cms-radius, 8px));
    --_br: var(--ci5-btn-radius, var(--cms-radius-sm, 6px));
    --_pad: var(--ci5-pad, 20px);
    --_gap: var(--ci5-gap, 16px);
    --_img: var(--ci5-img, 96px);
    --_sale: var(--ci5-sale, var(--cms-danger, #dc3545));
    --_danger: var(--cms-danger, #dc3545);
    --_ok: var(--cms-success, #198754);
    --_badge-bg: var(--ci5-badge-bg, var(--ci5-accent, var(--cms-primary, #005ea8)));
    --_badge-t: var(--ci5-badge-text, var(--ci5-accent-text, var(--cms-primary-contrast, #ffffff)));
    --_overlay: var(--ci5-overlay, rgba(15, 23, 42, 0.45));
    color: var(--_t);
    font-size: var(--ci5-font-size, inherit);
    line-height: 1.45;
}

/* Dark storefront themes announce themselves with one of these; the cart follows them. */
body.dark-mode .ci5-scope,
body.theme-dark .ci5-scope,
body.is-dark .ci5-scope,
[data-theme="dark"] .ci5-scope {
    --_t: var(--ci5-text, #f3f4f6);
    --_m: var(--ci5-muted, #a7b0bd);
    --_bg: var(--ci5-card-bg, #111827);
    --_soft: var(--ci5-soft, #1b2433);
    --_line: var(--ci5-border, #374151);
}

/* ------------------------------------------------------------------------------ resets */

.ci5-scope,
.ci5-scope *,
.ci5-scope *::before,
.ci5-scope *::after {
    box-sizing: border-box;
}

.ci5-scope [hidden] {
    display: none !important;
}

.ci5-scope ul,
.ci5-scope dl,
.ci5-scope dd,
.ci5-scope p,
.ci5-scope h2,
.ci5-scope h3 {
    margin: 0;
    padding: 0;
}

.ci5-scope ul {
    list-style: none;
}

.ci5-scope img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

.ci5-scope a,
.ci5-scope button,
.ci5-scope input {
    font: inherit;
    transition: none;
}

.ci5-scope .ci5-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.ci5-scope .ci5-icon--sm {
    width: 16px;
    height: 16px;
}

.ci5-scope .ci5-icon--xs {
    width: 12px;
    height: 12px;
}

.ci5-scope .ci5-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ci5-scope a:focus-visible,
.ci5-scope button:focus-visible,
.ci5-scope input:focus-visible,
.ci5-scope summary:focus-visible,
.ci5-scope [tabindex]:focus-visible {
    outline: 2px solid var(--_a) !important;
    outline-offset: 2px;
}

.ci5-scope [data-ci5-heading]:focus {
    outline: none !important;
}

/* The panel takes focus only from a click on its text or padding (tabindex -1, so Esc and the Tab trap keep
   working); it is never a keyboard stop, so it draws no ring. */
.ci5-scope .ci5-drawer[tabindex]:focus {
    outline: none !important;
}

.ci5-scope .ci5-muted {
    color: var(--_m);
}

/* ------------------------------------------------------------------------------ cards, buttons, fields */

.ci5-scope .ci5-card {
    background: var(--_bg);
    border: var(--_lw) solid var(--_line);
    border-radius: var(--_r);
}

.ci5-scope .ci5-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--_br);
    background: transparent;
    color: var(--_a);
    font-size: var(--ci5-btn-size, 1em);
    font-weight: var(--ci5-btn-weight, 600);
    line-height: 1.2;
    letter-spacing: var(--ci5-btn-spacing, normal);
    text-align: center;
    text-decoration: none;
    text-transform: var(--ci5-btn-transform, none);
    cursor: pointer;
}

.ci5-scope .ci5-btn--block {
    display: flex;
    width: 100%;
}

.ci5-scope .ci5-btn--primary {
    background: var(--_a);
    border-color: var(--_a);
    color: var(--_at);
}

.ci5-scope .ci5-btn--primary:hover,
.ci5-scope .ci5-btn--primary:focus {
    background: var(--_ah);
    border-color: var(--_ah);
    color: var(--_at);
    text-decoration: none;
}

.ci5-scope .ci5-btn--secondary {
    background: var(--ci5-btn2-bg, var(--_bg));
    border-color: var(--ci5-btn2-border, var(--_a));
    color: var(--ci5-btn2-color, var(--_a));
}

.ci5-scope .ci5-btn--secondary:hover,
.ci5-scope .ci5-btn--secondary:focus {
    background: var(--ci5-btn2-hover-bg, var(--_soft));
    color: var(--ci5-btn2-hover-color, var(--ci5-btn2-color, var(--_a)));
    text-decoration: none;
}

.ci5-scope .ci5-btn--ghost {
    color: var(--_m);
}

.ci5-scope .ci5-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

.ci5-scope .ci5-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--_m);
    font-size: 0.875em;
    cursor: pointer;
}

.ci5-scope .ci5-link-btn:hover {
    color: var(--_danger);
}

.ci5-scope .ci5-save-open:hover {
    color: var(--_a);
}

.ci5-scope .ci5-remove {
    color: var(--ci5-remove-color, var(--_m));
}

.ci5-scope .ci5-remove:hover {
    color: var(--ci5-remove-hover, var(--_danger));
}

.ci5-scope .ci5-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--_t);
    cursor: pointer;
}

.ci5-scope .ci5-icon-btn:hover {
    background: var(--_soft);
}

.ci5-scope .ci5-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.875em;
    font-weight: 600;
    color: var(--_t);
}

.ci5-scope .ci5-input {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--ci5-input-border, var(--_line));
    border-radius: var(--ci5-input-radius, var(--_br));
    background: var(--ci5-input-bg, var(--_bg));
    color: var(--ci5-input-color, var(--_t));
    box-shadow: none;
}

.ci5-scope .ci5-input:focus {
    border-color: var(--_a);
}

.ci5-scope .ci5-field-msg {
    min-height: 0;
    margin: 6px 0 0;
    color: var(--_danger);
    font-size: 0.875em;
}

.ci5-scope .ci5-field-msg:empty {
    display: none;
}

.ci5-scope .ci5-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--_soft);
    color: var(--_t);
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.ci5-scope .ci5-badge--sale {
    background: var(--_sale);
    color: #ffffff;
}

.ci5-scope .ci5-badge--free {
    background: var(--_ok);
    color: #ffffff;
}

.ci5-scope .ci5-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--_line);
    border-radius: 999px;
    background: var(--_soft);
    color: var(--_t);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
}

.ci5-scope .ci5-chip:hover {
    border-color: var(--_danger);
    color: var(--_danger);
}

.ci5-scope .ci5-chip--static {
    cursor: default;
}

.ci5-scope .ci5-alert,
.ci5-scope .ci5-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 var(--_gap);
    padding: 12px 14px;
    border: 1px solid var(--_danger);
    border-radius: var(--_r);
    background: var(--_bg);
    color: var(--_t);
}

.ci5-scope .ci5-alert .ci5-icon {
    color: var(--_danger);
}

.ci5-scope .ci5-notice {
    border-color: var(--ci5-notice-border, var(--cms-warning, #ffc107));
    background: var(--ci5-notice-bg, var(--_bg));
    color: var(--ci5-notice-color, var(--_t));
}

.ci5-scope .ci5-notice .ci5-icon {
    color: var(--ci5-notice-color, var(--_t));
}

.ci5-scope .ci5-notice__title {
    font-weight: 600;
}

.ci5-scope .ci5-notice ul {
    margin-top: 4px;
    padding-left: 18px;
    list-style: disc;
}

.ci5-scope .ci5-note {
    margin: 12px 0 0;
    color: var(--_m);
    font-size: 0.8125em;
}

.ci5-scope .ci5-note--ok {
    color: var(--_ok);
}

/* ------------------------------------------------------------------------------ the cart page */

.ci5-scope .ci5-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 var(--_gap);
}

.ci5-scope .ci5-title {
    color: var(--ci5-title-color, var(--_t));
    font-size: var(--ci5-title-size, 1.75em);
    font-weight: var(--ci5-title-weight, 700);
    line-height: 1.2;
}

.ci5-scope .ci5-head__count {
    color: var(--_m);
}

.ci5-scope .ci5-grid {
    display: grid;
    gap: var(--_gap) calc(var(--_gap) * 1.5);
    align-items: start;
}

.ci5-scope .ci5-grid--side {
    /* 280-360px by default; a Summary width under 280 (the setting allows 240) is used as it is. */
    grid-template-columns: minmax(0, 1fr) minmax(min(280px, var(--ci5-summary-w, 280px)), var(--ci5-summary-w, 360px));
}

.ci5-scope .ci5-grid--below {
    grid-template-columns: minmax(0, 1fr);
}

.ci5-scope .ci5-grid--below .ci5-summary {
    width: 100%;
    max-width: var(--ci5-summary-w, 420px);
    justify-self: end;
}

/* One column left with blocks (the other was emptied on the Cart Page Layout tab): it takes the width. */
.ci5-scope .ci5-grid--solo {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 899px) {
    .ci5-scope .ci5-grid--side {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ci5-scope .ci5-main {
    min-width: 0;
}

.ci5-scope .ci5-lines--cards {
    display: grid;
    gap: calc(var(--_gap) * 0.75);
}

.ci5-scope .ci5-lines--list > .ci5-line + .ci5-line {
    border-top: var(--_lw) solid var(--_line);
}

.ci5-scope .ci5-line {
    display: grid;
    grid-template-columns: var(--_img) minmax(0, 1fr) auto;
    grid-template-areas: "media body total";
    gap: 6px var(--_gap);
    align-items: start;
    padding: var(--_pad);
}

.ci5-scope .ci5-line.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.ci5-scope .ci5-line__media {
    grid-area: media;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_img);
    height: var(--_img);
    overflow: hidden;
    border-radius: var(--ci5-img-radius, calc(var(--_r) * 0.75));
    background: var(--_soft);
}

.ci5-scope .ci5-line__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ci5-scope .ci5-line__placeholder {
    color: var(--_m);
}

.ci5-scope .ci5-line__placeholder .ci5-icon {
    width: 32px;
    height: 32px;
}

.ci5-scope .ci5-line__body {
    grid-area: body;
    display: grid;
    gap: 6px;
    min-width: 0;
}

/* No image column: the body takes its place. */
.ci5-scope .ci5-line.ci5-line--noimg {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "body total";
}

.ci5-scope .ci5-line__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.ci5-scope .ci5-line__name {
    color: var(--ci5-name-color, var(--_t));
    font-size: var(--ci5-name-size, 1em);
    font-weight: var(--ci5-name-weight, 600);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ci5-scope a.ci5-line__name:hover {
    color: var(--_a);
    text-decoration: underline;
}

.ci5-scope .ci5-line__badges {
    display: inline-flex;
    gap: 6px;
}

.ci5-scope .ci5-line__meta {
    display: grid;
    gap: 2px;
    color: var(--ci5-meta-color, var(--_m));
    font-size: 0.875em;
}

.ci5-scope .ci5-meta-label {
    color: var(--ci5-meta-color, var(--_m));
}

.ci5-scope .ci5-line__unit {
    color: var(--ci5-price-color, var(--_t));
    font-size: var(--ci5-price-size, 0.9375em);
}

/* The price weight: the unit price (normally inherited), the sale and free prices, the line total. */
.ci5-scope .ci5-price {
    font-weight: var(--ci5-price-weight, inherit);
}

.ci5-scope .ci5-price--sale {
    color: var(--_sale);
    font-weight: var(--ci5-price-weight, 600);
}

.ci5-scope .ci5-price--was {
    color: var(--ci5-was-color, var(--_m));
    font-size: 0.875em;
    font-weight: inherit;
}

.ci5-scope .ci5-price--free {
    color: var(--_ok);
    font-weight: var(--ci5-price-weight, 600);
}

.ci5-scope .ci5-price-each {
    color: var(--_m);
    font-size: 0.875em;
}

.ci5-scope .ci5-line__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 4px;
}

.ci5-scope .ci5-line__total {
    grid-area: total;
    color: var(--ci5-price-color, var(--_t));
    font-size: var(--ci5-price-size, 1em);
    font-weight: var(--ci5-price-weight, 700);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 559px) {
    .ci5-scope .ci5-line {
        grid-template-columns: calc(var(--_img) * 0.75) minmax(0, 1fr);
        grid-template-areas: "media body" "media total";
        padding: calc(var(--_pad) * 0.75);
    }

    .ci5-scope .ci5-line__media {
        width: calc(var(--_img) * 0.75);
        height: calc(var(--_img) * 0.75);
    }

    .ci5-scope .ci5-line__total {
        text-align: left;
    }

    .ci5-scope .ci5-line__actions {
        gap: 8px 10px;
    }

    .ci5-scope .ci5-qty__btn {
        width: 34px;
    }

    .ci5-scope .ci5-qty__input {
        width: 40px;
    }
}

/* Quantity stepper */

.ci5-scope .ci5-qty {
    display: inline-flex;
    align-items: stretch;
    height: var(--ci5-qty-h, 40px);
    border: 1px solid var(--ci5-qty-border, var(--_line));
    border-radius: var(--ci5-qty-radius, var(--_br));
    background: var(--ci5-qty-bg, var(--_bg));
    overflow: hidden;
}

.ci5-scope .ci5-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ci5-qty-color, var(--_t));
    cursor: pointer;
}

.ci5-scope .ci5-qty__btn:hover:not([disabled]) {
    background: var(--_soft);
}

.ci5-scope .ci5-qty__btn[disabled] {
    color: var(--_m);
    opacity: 0.5;
    cursor: default;
}

.ci5-scope .ci5-qty__btn .ci5-icon {
    width: 16px;
    height: 16px;
}

.ci5-scope .ci5-qty__input {
    width: 48px;
    height: auto;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-left: 1px solid var(--ci5-qty-border, var(--_line));
    border-right: 1px solid var(--ci5-qty-border, var(--_line));
    border-radius: 0;
    background: transparent;
    color: var(--ci5-qty-color, var(--_t));
    font-weight: 600;
    text-align: center;
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ci5-scope .ci5-qty__input::-webkit-outer-spin-button,
.ci5-scope .ci5-qty__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ci5-scope .ci5-qty-static {
    color: var(--_m);
    font-size: 0.875em;
}

.ci5-scope .ci5-qty-static strong {
    color: var(--_t);
}

.ci5-scope .ci5-continue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--_gap);
    color: var(--_a);
    font-weight: 600;
    text-decoration: none;
}

.ci5-scope .ci5-continue:hover {
    text-decoration: underline;
}

/* Order summary */

.ci5-scope .ci5-summary {
    padding: var(--ci5-summary-pad, var(--_pad));
}

.ci5-scope .ci5-summary.ci5-card {
    border-color: var(--ci5-summary-border, var(--_line));
    border-radius: var(--ci5-summary-radius, var(--_r));
    background: var(--ci5-summary-bg, var(--_bg));
}

.ci5-scope .ci5-summary.is-sticky {
    position: sticky;
    top: var(--ci5-sticky-top, 24px);
}

.ci5-scope .ci5-summary__title {
    margin: 0 0 12px;
    color: var(--ci5-title-color, var(--_t));
    font-size: 1.125em;
    font-weight: var(--ci5-title-weight, 700);
}

.ci5-scope .ci5-totals {
    display: grid;
    gap: 8px;
}

.ci5-scope .ci5-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ci5-scope .ci5-row dt {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    color: var(--ci5-summary-label, var(--_t));
}

.ci5-scope .ci5-row dd {
    margin: 0;
    color: var(--ci5-summary-value, var(--_t));
    text-align: right;
    white-space: nowrap;
}

.ci5-scope .ci5-row--discount dd {
    color: var(--ci5-discount, var(--_ok));
    font-weight: 600;
}

.ci5-scope .ci5-row--discount .ci5-icon {
    color: var(--ci5-discount, var(--_ok));
}

.ci5-scope .ci5-row--total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: var(--_lw) solid var(--_line);
    font-size: var(--ci5-total-size, 1.125em);
    font-weight: var(--ci5-total-weight, 700);
}

.ci5-scope .ci5-row--total dt {
    color: var(--ci5-total-color, var(--ci5-summary-label, var(--_t)));
    font-weight: var(--ci5-total-weight, 700);
}

.ci5-scope .ci5-row--total dd {
    color: var(--ci5-total-color, var(--ci5-summary-value, var(--_t)));
}

.ci5-scope .ci5-coupon {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: var(--_lw) solid var(--_line);
}

.ci5-scope .ci5-coupon__row {
    display: flex;
    gap: 8px;
}

.ci5-scope .ci5-coupon__row .ci5-input {
    flex: 1 1 auto;
    min-width: 0;
}

.ci5-scope .ci5-checkout {
    margin-top: 16px;
}

.ci5-scope .ci5-save {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.ci5-scope .ci5-save__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ci5-scope .ci5-save-open {
    margin-top: 12px;
}

.ci5-scope .ci5-summary__items {
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: var(--_lw) solid var(--_line);
}

.ci5-scope .ci5-summary__items > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--_a);
}

.ci5-scope .ci5-summary__items .ci5-mini-lines {
    margin-top: 10px;
}

/* Empty cart */

.ci5-scope .ci5-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: calc(var(--_pad) * 2) var(--_pad);
    text-align: center;
}

.ci5-scope .ci5-empty--compact {
    padding: 32px 8px;
}

.ci5-scope .ci5-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--_soft);
    color: var(--ci5-empty-icon, var(--_m));
}

.ci5-scope .ci5-empty__icon .ci5-icon {
    width: 30px;
    height: 30px;
}

.ci5-scope .ci5-empty__title {
    color: var(--ci5-empty-title, var(--_t));
    font-size: var(--ci5-empty-title-size, 1.125em);
    font-weight: 700;
}

.ci5-scope .ci5-empty__text {
    max-width: 36ch;
    color: var(--ci5-empty-text, var(--_m));
}

.ci5-scope .ci5-empty .ci5-btn {
    margin-top: 6px;
}

.ci5-scope .ci5-loading {
    padding: var(--_pad);
    color: var(--_m);
}

/* ------------------------------------------------------------------------------ the header cart */

.ci5-scope .ci5-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--_br);
    background: transparent;
    color: var(--ci5-icon-color, inherit);
    cursor: pointer;
}

.ci5-scope .ci5-trigger:hover {
    color: var(--ci5-icon-hover, var(--_a));
}

.ci5-scope .ci5-trigger .ci5-icon {
    width: var(--ci5-icon-size, 24px);
    height: var(--ci5-icon-size, 24px);
}

.ci5-scope .ci5-trigger__count {
    position: absolute;
    top: 2px;
    left: calc(8px + var(--ci5-icon-size, 24px) - 10px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--_badge-bg);
    color: var(--_badge-t);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ci5-scope .ci5-trigger__label,
.ci5-scope .ci5-trigger__subtotal {
    font-weight: 600;
    white-space: nowrap;
}

.ci5-host {
    display: inline-flex;
    align-items: center;
}

html.ci5-locked {
    overflow: hidden;
}

.ci5-drawer-root {
    position: fixed;
    inset: 0;
    z-index: var(--ci5-z, 1060);
}

.ci5-drawer-root .ci5-overlay {
    position: absolute;
    inset: 0;
    background: var(--_overlay);
    opacity: 0;
    transition: opacity 0.25s ease;
}

/*
 * The panel (Drawer & Modal Layout's style): a drawer from the right (the standard), the left or the
 * bottom, or a centred modal - the same four as Product List V5's Quick View. The corner radius rounds the
 * edge that faces the page; a side drawer keeps square corners until the merchant sets one.
 */
.ci5-drawer-root .ci5-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(var(--ci5-drawer-w, 420px), 100vw);
    overflow: hidden;
    background: var(--ci5-panel-bg, var(--_bg));
    color: var(--_t);
    border-left: var(--_lw) solid var(--_line);
    border-radius: var(--ci5-panel-radius, 0px) 0 0 var(--ci5-panel-radius, 0px);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.ci5-drawer-root--left .ci5-drawer {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: var(--_lw) solid var(--_line);
    border-radius: 0 var(--ci5-panel-radius, 0px) var(--ci5-panel-radius, 0px) 0;
    transform: translateX(-100%);
}

/* Bottom sheet: full width, slides up, as tall as its content up to 85% of the screen. */
.ci5-drawer-root--bottom .ci5-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    border-left: 0;
    border-top: var(--_lw) solid var(--_line);
    border-radius: var(--ci5-panel-radius, 12px) var(--ci5-panel-radius, 12px) 0 0;
    transform: translateY(100%);
}

/* Modal: centred, fades and grows in. The root centres it ([hidden] still wins while it is shut). */
.ci5-drawer-root--modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ci5-drawer-root--modal .ci5-drawer {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(var(--ci5-modal-w, 560px), calc(100vw - 32px));
    max-height: 90vh;
    border: var(--_lw) solid var(--_line);
    border-radius: var(--ci5-panel-radius, 12px);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.ci5-drawer-root.is-open .ci5-overlay {
    opacity: 1;
}

.ci5-drawer-root.is-open .ci5-drawer {
    transform: translateX(0);
}

.ci5-drawer-root--modal.is-open .ci5-drawer {
    opacity: 1;
    transform: none;
}

.ci5-scope .ci5-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px var(--_pad);
    border-bottom: var(--_lw) solid var(--_line);
}

.ci5-scope .ci5-drawer__head .ci5-icon-btn {
    color: var(--ci5-close-color, var(--_t));
}

.ci5-scope .ci5-drawer__title {
    color: var(--ci5-title-color, var(--_t));
    font-size: 1.125em;
    font-weight: var(--ci5-title-weight, 700);
}

.ci5-scope .ci5-drawer__msg:empty {
    display: none;
}

.ci5-scope .ci5-drawer__msg {
    padding: 12px var(--_pad) 0;
}

.ci5-scope .ci5-drawer__msg .ci5-alert {
    margin: 0;
}

.ci5-scope .ci5-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px var(--_pad);
}

.ci5-scope .ci5-drawer__foot {
    padding: 16px var(--_pad) calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: var(--_lw) solid var(--_line);
    background: var(--ci5-panel-bg, var(--_bg));
}

.ci5-scope .ci5-drawer__foot:empty {
    display: none;
}

/* A short screen (a phone on its side) leaves the pinned footer no room for the items above it: there the
   whole panel scrolls instead of only its body. */
@media (max-height: 520px) {
    .ci5-drawer-root .ci5-drawer {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ci5-scope .ci5-drawer__body {
        flex: 0 0 auto;
        overflow: visible;
    }
}

.ci5-scope .ci5-mini-lines > .ci5-line + .ci5-line {
    border-top: var(--_lw) solid var(--_line);
}

.ci5-scope .ci5-line--mini {
    --_img: var(--ci5-img-mini, 64px);
    padding: 14px 0;
}

.ci5-scope .ci5-line--mini .ci5-qty {
    height: var(--ci5-qty-h, 34px);
}

.ci5-scope .ci5-line--mini .ci5-qty__btn {
    width: 32px;
}

.ci5-scope .ci5-line--mini .ci5-qty__input {
    width: 40px;
}

@media (max-width: 559px) {
    .ci5-scope .ci5-line--mini {
        grid-template-columns: var(--_img) minmax(0, 1fr) auto;
        grid-template-areas: "media body total";
        padding: 12px 0;
    }

    .ci5-scope .ci5-line--mini .ci5-line__media {
        width: var(--_img);
        height: var(--_img);
    }

    .ci5-scope .ci5-line--mini .ci5-line__total {
        text-align: right;
    }
}

.ci5-scope .ci5-more {
    display: block;
    padding: 12px 0;
    color: var(--_a);
    font-weight: 600;
    text-decoration: none;
}

.ci5-scope .ci5-more:hover {
    text-decoration: underline;
}

.ci5-scope .ci5-totals--mini .ci5-row--total {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ------------------------------------------------------------------------------ layout rows */

/*
 * The Cart Page Layout and Drawer & Modal Layout rows: each a flex row with the merchant's alignment
 * (the product card's .pcard-row rules). A list, the totals, a form or a progress bar takes the whole row;
 * links, buttons and short text sit side by side.
 */
.ci5-scope .ci5-brow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ci5-scope .ci5-brow > .ci5-lines,
.ci5-scope .ci5-brow > .ci5-mini-list,
.ci5-scope .ci5-brow > .ci5-totals,
.ci5-scope .ci5-brow > .ci5-coupon,
.ci5-scope .ci5-brow > .ci5-ship,
.ci5-scope .ci5-brow > .ci5-added,
.ci5-scope .ci5-brow > .ci5-gifts,
.ci5-scope .ci5-brow > .ci5-savecart {
    flex: 1 1 100%;
    min-width: 0;
}

/* The cart page's Checkout spans its row alone; sharing a row, it sits beside the other blocks. */
.ci5-scope .ci5-brow > .ci5-btn--block:not(:only-child) {
    display: inline-flex;
    width: auto;
}

.ci5-scope .ci5-justify-left {
    justify-content: flex-start;
}

.ci5-scope .ci5-justify-center {
    justify-content: center;
    text-align: center;
}

.ci5-scope .ci5-justify-right {
    justify-content: flex-end;
    text-align: right;
}

.ci5-scope .ci5-justify-between {
    justify-content: space-between;
}

.ci5-scope .ci5-justify-around {
    justify-content: space-around;
}

/* Spread rows of panel buttons share the width (View cart | Checkout, as the drawer always had them). */
.ci5-scope .ci5-drawer .ci5-justify-between > .ci5-btn,
.ci5-scope .ci5-drawer .ci5-justify-around > .ci5-btn {
    flex: 1 1 0;
    min-width: 0;
}

/*
 * The space between rows is the space the first block of the row always had above it, so the standard
 * layouts look as the cart did before blocks could be moved. A block's own top margin gives way to it.
 */
.ci5-scope .ci5-brow + .ci5-brow {
    margin-top: 16px;
}

.ci5-scope .ci5-brow + .ci5-brow[data-ci5-row="continue"] {
    margin-top: var(--_gap);
}

.ci5-scope .ci5-brow + .ci5-brow[data-ci5-row="note"],
.ci5-scope .ci5-brow + .ci5-brow[data-ci5-row="savecart"] {
    margin-top: 12px;
}

.ci5-scope .ci5-drawer .ci5-brow + .ci5-brow[data-ci5-row="viewcart"],
.ci5-scope .ci5-drawer .ci5-brow + .ci5-brow[data-ci5-row="checkout"],
.ci5-scope .ci5-drawer .ci5-brow + .ci5-brow[data-ci5-row="continue"] {
    margin-top: 14px;
}

/* A row hidden while it has nothing (an empty free-gift offer) leaves no gap at the top of its column. */
.ci5-scope .ci5-brow[hidden]:first-child + .ci5-brow {
    margin-top: 0;
}

.ci5-scope .ci5-brow > .ci5-continue,
.ci5-scope .ci5-brow > .ci5-coupon,
.ci5-scope .ci5-brow > .ci5-checkout,
.ci5-scope .ci5-brow > .ci5-note,
.ci5-scope .ci5-savecart > :first-child {
    margin-top: 0;
}

/* The panel's list and its "+ N more" link stay together as one block. */
.ci5-scope .ci5-mini-list {
    min-width: 0;
}

/* Your message */

.ci5-scope .ci5-message {
    color: var(--_t);
    overflow-wrap: anywhere;
}

/* Free-shipping progress */

.ci5-scope .ci5-ship__text {
    margin: 0 0 8px;
    color: var(--_t);
    font-size: 0.875em;
}

.ci5-scope .ci5-ship.is-done .ci5-ship__text {
    color: var(--_ok);
    font-weight: 600;
}

.ci5-scope .ci5-ship__bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ci5-progress-track, var(--_line));
}

.ci5-scope .ci5-ship__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ci5-progress-fill, var(--_a));
}

.ci5-scope .ci5-ship.is-done .ci5-ship__fill {
    background: var(--ci5-progress-fill, var(--_ok));
}

/* Added to your cart */

.ci5-scope .ci5-added {
    margin-top: 12px;
    padding: 12px 14px 4px;
    border: var(--_lw) solid var(--_line);
    border-radius: var(--_r);
    background: var(--_soft);
}

.ci5-scope .ci5-added__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--_t);
    font-weight: 700;
}

.ci5-scope .ci5-added__title .ci5-icon {
    color: var(--_ok);
}

.ci5-scope .ci5-added .ci5-line--mini {
    padding: 10px 0;
}

.ci5-scope .ci5-added__incart {
    color: var(--_m);
    white-space: nowrap;
}

/*
 * Free-gift offers. Free Item List writes into #free-items-container (moved here by the script) and
 * empties it when there is no offer; an empty one takes no room. Its merchant template is drawn for the
 * page's width, so inside the panel its columns stack and its buttons fit.
 */
.ci5-scope #free-items-container:empty {
    display: none;
}

.ci5-drawer-root .ci5-gifts .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.ci5-drawer-root .ci5-gifts a.free-select {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
}

.ci5-scope .ci5-gifts img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------------------ toast */

.ci5-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--ci5-z-toast, 1070);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 8px 10px 16px;
    border: 1px solid var(--_line);
    border-radius: var(--_r);
    background: var(--ci5-toast-bg, var(--_bg));
    color: var(--ci5-toast-color, var(--_t));
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ci5-toast .ci5-toast__close {
    color: var(--ci5-toast-color, var(--_t));
}

.ci5-toast.is-shown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ci5-toast.is-error {
    border-color: var(--_danger);
}

.ci5-toast .ci5-toast__text {
    flex: 1 1 auto;
}

.ci5-toast .ci5-toast__link {
    color: var(--_a);
    font-weight: 600;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ci5-drawer-root .ci5-overlay,
    .ci5-drawer-root .ci5-drawer,
    .ci5-toast {
        transition: none;
    }
}