/*
 * Zetronix Refresh v0.7.6: add-to-cart popup (Amasty Ajax Cart).
 * Loaded on every page. Everything is scoped to the classes js/zxr-cart-popup adds
 * (#confirmOverlay.zxr-cp-ov, #confirmBox.zxr-cp-on), so if the script does not run
 * the popup keeps Amasty's own look.
 *
 * Same system as the product page (design style guide): white body, navy footer like
 * the buy panel, blue section label with an orange dash, orange for the main button,
 * selected tiles and small accents.
 */

#confirmOverlay.zxr-cp-ov {
    --zxr-navy: #0b1830;
    --zxr-blue: #0d4dad;
    --zxr-sky: #9fc5ff;
    --zxr-cta: #f26a00;
    --zxr-cta-hover: #e05f00;
    --zxr-orange: #fe7209;
    --zxr-orange-ink: #c85000;
    --zxr-peach: #fff1e6;
    --zxr-peach-line: #ffd9bf;
    --zxr-tint: #fff6ef;
    --zxr-text: #0e1726;
    --zxr-muted: #566378;
    --zxr-muted-d: #aebad0;
    --zxr-paper: #f1f3f6;
    --zxr-card-line: #e3e7ee;
    --zxr-divider: #edf0f4;
    --zxr-err: #b42318;
    --zxr-ok: #7ee2a8;
    --zxr-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    z-index: 1000000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(11, 24, 48, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

html.zxr-cp-lock,
html.zxr-cp-lock body {
    overscroll-behavior: none;
}

/* ---------- the box ---------- */

#confirmOverlay.zxr-cp-ov #confirmBox.zxr-cp-on {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 640px;
    max-width: calc(100vw - 48px);
    max-height: min(860px, calc(100vh - 48px));
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(11, 24, 48, .08), 0 30px 70px -20px rgba(11, 24, 48, .55);
    color: var(--zxr-text);
    font-family: var(--zxr-font);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    animation: zxr-cp-in .22s cubic-bezier(.2, .8, .2, 1);
}

@keyframes zxr-cp-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

/* Amasty's own content stays in the box (our buttons click it) but is not shown */
#confirmBox.zxr-cp-on > #messageBox,
#confirmBox.zxr-cp-on > .amcart-message-box,
#confirmBox.zxr-cp-on > #confirmButtons,
#confirmBox.zxr-cp-on > .amcart-confirm-buttons,
#confirmBox.zxr-cp-on > .am-related-box {
    display: none !important;
}

#confirmBox.zxr-cp-on *,
#confirmBox.zxr-cp-on *::before,
#confirmBox.zxr-cp-on *::after {
    box-sizing: border-box;
}

/* close button */
#confirmBox.zxr-cp-on > .cross {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--zxr-paper);
    color: var(--zxr-navy);
    font: 400 24px/36px var(--zxr-font);
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s ease;
}

#confirmBox.zxr-cp-on > .cross:hover {
    background: #e4e8ee;
}

#confirmBox.zxr-cp-on > .cross:focus-visible,
#confirmBox.zxr-cp-on .zxr-cp button:focus-visible,
#confirmBox.zxr-cp-on .zxr-cp a:focus-visible,
#confirmBox.zxr-cp-on .zxr-cp input:focus-visible {
    outline: 3px solid rgba(13, 77, 173, .4) !important;
    outline-offset: 2px;
}

#confirmBox.zxr-cp-on .zxr-cp__title:focus {
    outline: none !important;
}

#confirmBox.zxr-cp-on .zxr-cp {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#confirmBox.zxr-cp-on .zxr-cp svg {
    display: block;
    flex: none;
}

#confirmBox.zxr-cp-on .zxr-cp [hidden] {
    display: none !important;
}

/* ---------- white body ---------- */

#confirmBox.zxr-cp-on .zxr-cp__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 26px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#confirmBox.zxr-cp-on .zxr-cp__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 44px;
}

#confirmBox.zxr-cp-on .zxr-cp__ok {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--zxr-peach-line);
    border-radius: 50%;
    background: var(--zxr-peach);
    color: var(--zxr-orange);
}

#confirmBox.zxr-cp-on .zxr-cp__ok svg {
    width: 18px;
    height: 18px;
}

#confirmBox.zxr-cp-on .zxr-cp__title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--zxr-navy);
    font: 800 20px/1.2 var(--zxr-font);
    letter-spacing: -.015em;
    text-transform: none;
}

/* product line */
#confirmBox.zxr-cp-on .zxr-cp__item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--zxr-divider);
}

#confirmBox.zxr-cp-on .zxr-cp__img {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--zxr-card-line);
    border-radius: 16px;
    background: #fff;
}

#confirmBox.zxr-cp-on .zxr-cp__img img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

#confirmBox.zxr-cp-on .zxr-cp__info {
    flex: 1 1 auto;
    min-width: 0;
}

#confirmBox.zxr-cp-on a.zxr-cp__name,
#confirmBox.zxr-cp-on a.zxr-cp__name:hover,
#confirmBox.zxr-cp-on a.zxr-cp__name:visited {
    display: block;
    color: var(--zxr-navy);
    font: 800 19px/1.2 var(--zxr-font);
    letter-spacing: -.02em;
    text-decoration: none;
}

#confirmBox.zxr-cp-on .zxr-cp__sub {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--zxr-muted);
    font-size: 13.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#confirmBox.zxr-cp-on .zxr-cp__chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    color: var(--zxr-muted);
    font-size: 12.5px;
}

#confirmBox.zxr-cp-on .zxr-cp__chosen b {
    color: var(--zxr-text);
    font-weight: 700;
}

#confirmBox.zxr-cp-on .zxr-cp__chosen a,
#confirmBox.zxr-cp-on .zxr-cp__chosen a:hover {
    color: var(--zxr-blue);
    font-weight: 700;
    text-decoration: none;
}

#confirmBox.zxr-cp-on .zxr-cp__price {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    align-self: flex-start;
    padding-top: 2px;
    text-align: right;
}

#confirmBox.zxr-cp-on .zxr-cp__line {
    min-width: 64px;
    color: var(--zxr-navy);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
}

#confirmBox.zxr-cp-on .zxr-cp__each {
    color: var(--zxr-muted);
    font-size: 12px;
}

/* accessories and memory cards added with the product */
#confirmBox.zxr-cp-on .zxr-cp__extras {
    padding: 16px 0 8px;
    border-bottom: 1px solid var(--zxr-divider);
}

#confirmBox.zxr-cp-on .zxr-cp__xlist {
    margin-top: 6px;
}

#confirmBox.zxr-cp-on .zxr-cp__extra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

#confirmBox.zxr-cp-on .zxr-cp__extra + .zxr-cp__extra {
    border-top: 1px solid var(--zxr-divider);
}

#confirmBox.zxr-cp-on .zxr-cp__ximg {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--zxr-card-line);
    border-radius: 12px;
    background: #fff;
}

#confirmBox.zxr-cp-on .zxr-cp__ximg img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

#confirmBox.zxr-cp-on .zxr-cp__xinfo {
    flex: 1 1 auto;
    min-width: 0;
}

#confirmBox.zxr-cp-on .zxr-cp__xname {
    display: -webkit-box;
    overflow: hidden;
    color: var(--zxr-navy);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#confirmBox.zxr-cp-on .zxr-cp__xname.is-loading {
    display: block;
    width: 60%;
}

#confirmBox.zxr-cp-on .zxr-cp__xmeta {
    margin-top: 2px;
    color: var(--zxr-muted);
    font-size: 12.5px;
}

#confirmBox.zxr-cp-on .zxr-cp__xprice {
    flex: none;
    min-width: 56px;
    color: var(--zxr-navy);
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

/* placeholder while the cart total loads */
#confirmBox.zxr-cp-on .is-loading {
    display: inline-block;
    min-width: 72px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef1f5 0%, #f7f9fb 50%, #eef1f5 100%) 0 0 / 200% 100%;
    color: transparent !important;
    animation: zxr-cp-shimmer 1.2s linear infinite;
}

#confirmBox.zxr-cp-on .zxr-cp__foot .is-loading {
    background: linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .08) 100%) 0 0 / 200% 100%;
}

@keyframes zxr-cp-shimmer {
    to { background-position: -200% 0; }
}

/* ---------- options ---------- */

#confirmBox.zxr-cp-on .zxr-cp__opts {
    padding: 18px 0 4px;
    border-bottom: 1px solid var(--zxr-divider);
}

#confirmBox.zxr-cp-on .zxr-cp__eyebrow {
    padding-left: 26px;
    background: linear-gradient(var(--zxr-orange), var(--zxr-orange)) 0 50% / 18px 3px no-repeat;
    color: var(--zxr-blue);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

#confirmBox.zxr-cp-on .zxr-cp__hint {
    margin: 4px 0 0;
    color: var(--zxr-muted);
    font-size: 13px;
}

#confirmBox.zxr-cp-on .zxr-cp__group {
    margin: 14px 0;
}

#confirmBox.zxr-cp-on .zxr-cp__glabel {
    margin-bottom: 2px;
    color: var(--zxr-navy);
    font-size: 14px;
    font-weight: 700;
}

#confirmBox.zxr-cp-on .zxr-cp__gnote {
    margin-left: 4px;
    color: var(--zxr-muted);
    font-size: 12.5px;
    font-weight: 500;
}

#confirmBox.zxr-cp-on .zxr-cp__tiles {
    display: grid;
    padding: 6px 6px 0 0;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
}

/* one row for 2-4 choices, a compact grid for 5 or more */
#confirmBox.zxr-cp-on .zxr-cp__tiles[data-n="1"],
#confirmBox.zxr-cp-on .zxr-cp__tiles[data-n="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#confirmBox.zxr-cp-on .zxr-cp__tiles[data-n="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#confirmBox.zxr-cp-on .zxr-cp__tiles[data-n="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#confirmBox.zxr-cp-on .zxr-cp__tiles.-compact {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

#confirmBox.zxr-cp-on .zxr-cp__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    margin: 0;
    padding: 10px 12px;
    border: 1.5px solid var(--zxr-card-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    color: var(--zxr-text);
    font-family: var(--zxr-font);
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

#confirmBox.zxr-cp-on .zxr-cp__tiles.-compact .zxr-cp__tile {
    min-height: 52px;
    padding: 8px 10px;
}

#confirmBox.zxr-cp-on .zxr-cp__tile:hover {
    border-color: #cfd8e6;
    background: #fff;
}

#confirmBox.zxr-cp-on .zxr-cp__tile.is-on {
    border-color: var(--zxr-orange);
    background: var(--zxr-tint);
}

/* small orange check on the corner of the selected tile */
#confirmBox.zxr-cp-on .zxr-cp__tile.is-on::after {
    content: "";
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--zxr-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.4l2.3 2.3 4.9-5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    box-shadow: 0 0 0 2px #fff;
}

#confirmBox.zxr-cp-on .zxr-cp__tile[disabled] {
    cursor: progress;
}

#confirmBox.zxr-cp-on .zxr-cp__tt {
    color: var(--zxr-navy);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

#confirmBox.zxr-cp-on .zxr-cp__tiles.-compact .zxr-cp__tt {
    font-size: 13.5px;
}

#confirmBox.zxr-cp-on .zxr-cp__ts {
    color: var(--zxr-muted);
    font-size: 12px;
    line-height: 1.25;
}

#confirmBox.zxr-cp-on .zxr-cp__tp {
    color: var(--zxr-muted);
    font-size: 12.5px;
    font-weight: 600;
}

#confirmBox.zxr-cp-on .zxr-cp__tp.is-add {
    color: var(--zxr-blue);
    font-weight: 700;
}

#confirmBox.zxr-cp-on .zxr-cp__tile.is-on .zxr-cp__tp.is-add {
    color: var(--zxr-orange-ink);
}

/* ---------- quantity ---------- */

#confirmBox.zxr-cp-on .zxr-cp__qtyrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
}

#confirmBox.zxr-cp-on .zxr-cp__qlabel {
    color: var(--zxr-navy);
    font-size: 14px;
    font-weight: 700;
}

#confirmBox.zxr-cp-on .zxr-cp__step {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 4px;
    border: 1px solid var(--zxr-card-line);
    border-radius: 999px;
    background: #fff;
}

#confirmBox.zxr-cp-on .zxr-cp__sbtn {
    position: relative;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--zxr-paper);
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

#confirmBox.zxr-cp-on .zxr-cp__sbtn:hover {
    background: #e4e8ee;
}

#confirmBox.zxr-cp-on .zxr-cp__sbtn::before,
#confirmBox.zxr-cp-on .zxr-cp__sbtn.-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 1px;
    background: var(--zxr-navy);
}

#confirmBox.zxr-cp-on .zxr-cp__sbtn.-plus::after {
    transform: rotate(90deg);
}

#confirmBox.zxr-cp-on .zxr-cp__qty {
    width: 44px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--zxr-navy);
    font: 700 16px/34px var(--zxr-font);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

#confirmBox.zxr-cp-on .zxr-cp__qty::-webkit-outer-spin-button,
#confirmBox.zxr-cp-on .zxr-cp__qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* ---------- status line ---------- */

#confirmBox.zxr-cp-on .zxr-cp__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 20px;
    margin-top: 8px;
    color: var(--zxr-muted);
    font-size: 13px;
}

#confirmBox.zxr-cp-on .zxr-cp__status.is-wait::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid var(--zxr-card-line);
    border-top-color: var(--zxr-orange);
    border-radius: 50%;
    animation: zxr-cp-spin .7s linear infinite;
}

#confirmBox.zxr-cp-on .zxr-cp__status.is-ok {
    color: #1c7a4a;
    font-weight: 600;
}

#confirmBox.zxr-cp-on .zxr-cp__status.is-ok svg {
    width: 16px;
    height: 16px;
}

#confirmBox.zxr-cp-on .zxr-cp__status.is-err {
    justify-content: flex-start;
    color: var(--zxr-err);
    font-weight: 600;
}

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

#confirmBox.zxr-cp-on .zxr-cp.is-busy .zxr-cp__tile:not(.is-on),
#confirmBox.zxr-cp-on .zxr-cp.is-busy .zxr-cp__step {
    opacity: .6;
}

/* Amasty related products, if that option is ever switched on */
#confirmBox.zxr-cp-on .zxr-cp__body > .am-related-box {
    display: block !important;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--zxr-divider);
}

/* ---------- navy footer (like the buy panel) ---------- */

#confirmBox.zxr-cp-on .zxr-cp__foot {
    position: relative;
    flex: none;
    padding: 20px 26px 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(159, 197, 255, .16), transparent 55%),
        var(--zxr-navy);
    color: #fff;
}

#confirmBox.zxr-cp-on .zxr-cp__sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

#confirmBox.zxr-cp-on .zxr-cp__sumlabel {
    color: var(--zxr-muted-d);
    font-size: 14px;
    font-weight: 600;
}

#confirmBox.zxr-cp-on .zxr-cp__count {
    font-weight: 400;
}

#confirmBox.zxr-cp-on .zxr-cp__subtotal,
#confirmBox.zxr-cp-on .zxr-cp__subtotal .price {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.015em;
}

#confirmBox.zxr-cp-on .zxr-cp.is-busy .zxr-cp__subtotal {
    opacity: .55;
}

#confirmBox.zxr-cp-on .zxr-cp__ship {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #d6deeb;
    font-size: 13px;
}

#confirmBox.zxr-cp-on .zxr-cp__ship svg {
    width: 18px;
    height: 18px;
    color: var(--zxr-sky);
}

#confirmBox.zxr-cp-on .zxr-cp__ship.is-ok svg {
    color: var(--zxr-orange);
}

#confirmBox.zxr-cp-on a.zxr-cp__checkout,
#confirmBox.zxr-cp-on a.zxr-cp__checkout:visited,
#confirmBox.zxr-cp-on a.zxr-cp__checkout:hover,
#confirmBox.zxr-cp-on a.zxr-cp__checkout:active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    margin-top: 16px;
    border-radius: 14px;
    background: var(--zxr-cta);
    box-shadow: 0 8px 20px -10px rgba(242, 106, 0, .8);
    color: #fff;
    font: 800 17px/1 var(--zxr-font);
    letter-spacing: .005em;
    text-decoration: none;
    transition: background-color .15s ease;
}

#confirmBox.zxr-cp-on a.zxr-cp__checkout:hover {
    background: var(--zxr-cta-hover);
}

#confirmBox.zxr-cp-on a.zxr-cp__checkout svg {
    width: 19px;
    height: 19px;
}

#confirmBox.zxr-cp-on .zxr-cp__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

#confirmBox.zxr-cp-on .zxr-cp__ghost,
#confirmBox.zxr-cp-on a.zxr-cp__ghost,
#confirmBox.zxr-cp-on a.zxr-cp__ghost:visited,
#confirmBox.zxr-cp-on a.zxr-cp__ghost:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font: 700 15px/1 var(--zxr-font);
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

#confirmBox.zxr-cp-on .zxr-cp__ghost:hover,
#confirmBox.zxr-cp-on a.zxr-cp__ghost:hover {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .08);
}

/* ---------- phones: bottom sheet ---------- */

@media (max-width: 640px) {
    #confirmOverlay.zxr-cp-ov {
        align-items: flex-end;
        padding: 0;
    }

    html.zxr-cp-lock,
    html.zxr-cp-lock body {
        overflow: hidden;
    }

    #confirmOverlay.zxr-cp-ov #confirmBox.zxr-cp-on {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        border: 0;
        border-radius: 22px 22px 0 0;
        animation: zxr-cp-up .28s cubic-bezier(.2, .8, .2, 1);
    }

    @keyframes zxr-cp-up {
        from { transform: translateY(100%); }
        to { transform: none; }
    }

    #confirmBox.zxr-cp-on > .cross {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        line-height: 34px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__body {
        padding: 18px 18px 14px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__ok {
        width: 28px;
        height: 28px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__title {
        font-size: 18px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__item {
        gap: 12px;
        margin-top: 14px;
        padding-bottom: 14px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__img {
        width: 68px;
        height: 68px;
        border-radius: 14px;
    }

    #confirmBox.zxr-cp-on a.zxr-cp__name {
        font-size: 17px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__sub {
        font-size: 12.5px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__line {
        font-size: 16px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__extras {
        padding-top: 14px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__extra {
        gap: 10px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__ximg {
        width: 46px;
        height: 46px;
        border-radius: 11px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__xname {
        font-size: 14px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__opts {
        padding-top: 14px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__group {
        margin: 12px 0;
    }

    #confirmBox.zxr-cp-on .zxr-cp__tiles[data-n="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #confirmBox.zxr-cp-on .zxr-cp__tiles.-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__tile {
        min-height: 54px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__tiles.-compact .zxr-cp__tile {
        min-height: 48px;
        padding: 7px 9px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__qtyrow {
        padding-top: 12px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__status {
        margin-top: 6px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__foot {
        padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    #confirmBox.zxr-cp-on .zxr-cp__subtotal,
    #confirmBox.zxr-cp-on .zxr-cp__subtotal .price {
        font-size: 21px;
    }

    #confirmBox.zxr-cp-on a.zxr-cp__checkout {
        height: 52px;
        margin-top: 12px;
        font-size: 16px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__ghost,
    #confirmBox.zxr-cp-on a.zxr-cp__ghost {
        height: 44px;
        font-size: 14px;
    }
}

/* small phones: keep "Continue Shopping" and "View or Edit Cart" on one line each */
@media (max-width: 374px) {
    #confirmBox.zxr-cp-on .zxr-cp__row {
        gap: 8px;
    }

    #confirmBox.zxr-cp-on .zxr-cp__ghost,
    #confirmBox.zxr-cp-on a.zxr-cp__ghost {
        padding: 0 6px;
        font-size: 13px;
        letter-spacing: -.01em;
    }
}

@media (prefers-reduced-motion: reduce) {
    #confirmOverlay.zxr-cp-ov #confirmBox.zxr-cp-on,
    #confirmBox.zxr-cp-on .is-loading,
    #confirmBox.zxr-cp-on .zxr-cp__status.is-wait::before {
        animation: none;
    }
}

/* ---- Patch Oct 26, 2026: accessibility (WCAG 2.1 AA), look unchanged (a11y Oct 26, 2026) ----
   - Secure Checkout text is 19px: white on the orange #f26a00 is 3.1:1, which WCAG allows
     only for large text (bold 18.66px and up).
   - Keyboard focus rings are solid blue (the 40% ring was too faint, 2:1).
   - Option tiles say "busy" with aria-disabled while the cart updates (they keep focus). */
#confirmBox.zxr-cp-on a.zxr-cp__checkout,
#confirmBox.zxr-cp-on a.zxr-cp__checkout:visited,
#confirmBox.zxr-cp-on a.zxr-cp__checkout:hover,
#confirmBox.zxr-cp-on a.zxr-cp__checkout:active { font-size: 19px; }
#confirmBox.zxr-cp-on > .cross:focus-visible,
#confirmBox.zxr-cp-on .zxr-cp button:focus-visible,
#confirmBox.zxr-cp-on .zxr-cp a:focus-visible,
#confirmBox.zxr-cp-on .zxr-cp input:focus-visible { outline: 3px solid #0d4dad !important; outline-offset: 2px; }
#confirmBox.zxr-cp-on .zxr-cp__tile[aria-disabled="true"] { cursor: progress; }

/* ---- Patch Oct 26, 2026 (2): keyboard focus rings on the navy footer (a11y-2 Oct 26, 2026) ---- */
#confirmBox.zxr-cp-on .zxr-cp__foot a:focus-visible,
#confirmBox.zxr-cp-on .zxr-cp__foot button:focus-visible { outline: 3px solid #9fc5ff !important; outline-offset: 2px; }