/* ==========================================================================
   Qemmah — Cart & checkout (cart, shipping address, payment)
   Scoped to .qm-checkout. Tokens come from premium.css; product rows
   (recently viewed) come from sections-premium.css. The line items, the
   coupon form and the address list are driven by cart.js / ajaxActions.js,
   so their hook classes stay and are only restyled here.
   ========================================================================== */

.qm-checkout {
    --qc-line: rgba(161, 120, 92, .15);
    --qc-text: #3a2a22;
    --qc-muted: #8a7466;
    --qc-card: 0 0 0 1px rgba(161, 120, 92, .1), 0 2px 6px -2px rgba(58, 34, 25, .06), 0 30px 60px -38px rgba(58, 34, 25, .4);

    padding-bottom: 56px;
    color: var(--qc-text);
}

/* --------------------------------------------------------------------------
   1. Page head + grid
   -------------------------------------------------------------------------- */

.qm-checkout__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto 22px; }

.qm-checkout__head h1 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    color: var(--qm-ink);
}

.qm-checkout__head h1 > span { font-size: 15px; font-weight: 700; color: var(--qc-muted); }

.qm-checkout__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; }
.qm-checkout__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.qm-checkout__back i { font-size: 12px; }

.qm-checkout__steps { margin-bottom: 22px; }

.qm-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 24px; max-width: 1180px; margin-inline: auto; }
.qm-checkout__aside { position: sticky; top: 150px; }

/* --------------------------------------------------------------------------
   2. Bag: compact rows in one panel (layoutmodule::components.basketshoppingno)
   -------------------------------------------------------------------------- */

.qm-bag {
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: var(--qc-card);
}

.qm-bag__head,
.qm-line {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 124px 112px;
    align-items: center;
    column-gap: 18px;
}

.qm-bag__head {
    padding: 14px 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--qc-muted);
    background: #fbf7f3;
    border-bottom: 1px solid var(--qc-line);
}

.qm-bag__head span:first-child { grid-column: 1 / 3; }
.qm-bag__head span:nth-child(2) { text-align: center; }
.qm-bag__head span:last-child { text-align: end; }

.qm-line { padding: 16px 20px; transition: background-color .25s; }
.qm-line + .qm-line { border-top: 1px solid var(--qc-line); }
.qm-line:hover { background: #fffcf9; }

.qm-line__media {
    position: relative;
    display: block;
    width: 84px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f3ece5;
    border-radius: 14px;
}

.qm-line__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qm-line__media.is-empty { background: radial-gradient(circle at 50% 42%, #fdf9f4 0%, #efe3d6 100%); }
.qm-line__media.is-empty img { opacity: 0; }
.qm-line__media.is-empty::before { content: ""; position: absolute; inset: 0; background: url("../images/system/favicon-192.png") center / 40% no-repeat; opacity: .22; }

.qm-line__info { display: grid; min-width: 0; gap: 3px; }
.qm-line__shop { justify-self: start; font-size: 12px; font-weight: 700; color: var(--qm-gold-4) !important; text-decoration: none; }
.qm-line__shop:hover { text-decoration: underline; }

.qm-line__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--qm-ink) !important;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.qm-line__name:hover { color: var(--qm-brown) !important; }

.qm-line__opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }

.qm-line__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 2px 4px 2px 10px;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--qc-muted);
    background: #faf6f2;
    border: 1px solid var(--qc-line);
    border-radius: 999px;
}

[dir="rtl"] .qm-line__opt { padding: 2px 10px 2px 4px; }

.qm-line__opt select {
    height: 26px;
    padding: 0 8px;
    padding-inline-end: 22px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--qm-ink);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1785c' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat;
    background-position: left 6px center;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.qm-en .qm-line__opt select { background-position: right 6px center; }
.qm-line__opt select:focus { outline: 0; }

.qm-line__actions { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; }

.qm-line__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qc-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .2s;
}

.qm-line__action:hover { color: var(--qm-ink); }
.qm-line__action svg { width: 15px; height: 15px; }
.qm-line__action--remove:hover { color: #b0453a; }

.qm-checkout .qm-line__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-self: center;
    width: 112px;
    height: 40px;
    margin: 0;
    padding: 0 4px;
    background: #faf6f2;
    border: 1px solid var(--qc-line);
    border-radius: 12px;
}

/* forms.css pads every number input (padding-top: 9px !important; padding-left: 126px) */
.qm-checkout .qm-line__qty input { width: 36px; height: 100%; min-height: 0; margin: 0; padding: 0 !important; line-height: 1; text-align: center; font-size: 15px; font-weight: 800; color: var(--qm-ink); background: transparent; border: 0; box-shadow: none; -moz-appearance: textfield; }
.qm-checkout .qm-line__qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.qm-checkout .qm-line__qty .plus,
.qm-checkout .qm-line__qty .minus {
    position: static;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    font-size: 11px;
    color: var(--qm-brown);
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 3px 8px -5px rgba(58, 34, 25, .45);
    cursor: pointer;
}

.qm-line__price { display: grid; justify-items: end; gap: 1px; text-align: end; }
.qm-line__price b { display: inline-flex; align-items: baseline; gap: 4px; font-size: 17px; font-weight: 800; color: var(--qm-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qm-line__price b.is-sale { color: #c0392b; }
.qm-line__price del { display: inline-flex; align-items: baseline; gap: 3px; font-size: 12.5px; color: #a8968a; white-space: nowrap; }
.qm-line__price svg { width: .75em; height: .75em; }

/* --------------------------------------------------------------------------
   3. Order summary receipt (layoutmodule::components.couponscomponent)
   -------------------------------------------------------------------------- */

.qm-summary {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 18px;
    background: #fff;
    border-radius: 22px;
    box-shadow: var(--qc-card);
}

.qm-summary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--qm-gold-2), var(--qm-gold-4), var(--qm-gold-2), transparent);
}

.qm-summary__title { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: var(--qm-ink); }

.qm-summary__rows { display: grid; gap: 10px; margin: 0; }
.qm-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qm-summary__row dt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--qc-text); }
.qm-summary__row dd { display: inline-flex; align-items: baseline; gap: 3px; margin: 0; font-size: 14.5px; font-weight: 800; color: var(--qm-ink); font-variant-numeric: tabular-nums; }
.qm-summary__row dd svg { width: .75em; height: .75em; }
.qm-summary__row--muted dd { font-size: 12.5px; font-weight: 600; color: var(--qc-muted); }
.qm-summary__row--discount dt, .qm-summary__row--discount dd { color: #2e8b57; }
.qm-summary__row--discount .discount_precent:not(:empty) { padding: 1px 8px; font-size: 11.5px; background: rgba(46, 139, 87, .1); border-radius: 999px; }
.qm-summary__row .remove_coupon_btn { display: grid; place-items: center; width: 20px; height: 20px; font-size: 10px; color: #b0453a; background: #fdf0ee; border-radius: 50%; cursor: pointer; }

.qm-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 14px;
    padding: 14px 0 0;
    border-top: 1px dashed rgba(161, 120, 92, .35);
}

.qm-summary__total > span { display: grid; font-size: 15px; font-weight: 800; color: var(--qm-ink); }
.qm-summary__total small { font-size: 11.5px; font-weight: 600; color: var(--qc-muted); }
.qm-summary__total b { display: inline-flex; align-items: baseline; gap: 4px; font-size: 26px; font-weight: 800; color: var(--qm-ink); font-variant-numeric: tabular-nums; }
.qm-summary__total b svg { width: .7em; height: .7em; color: var(--qm-gold-4); fill: currentColor; }

/* promo code, folded */
.qm-summary__promo { margin: 0 0 14px; background: #faf6f2; border: 1px dashed rgba(161, 120, 92, .35); border-radius: 14px; }
.qm-summary__promo.d-none { display: none !important; }

.qm-summary__promo > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--qm-brown);
    list-style: none;
    cursor: pointer;
}

.qm-summary__promo > summary::-webkit-details-marker { display: none; }
.qm-summary__promo > summary i { color: var(--qm-gold-4); }
.qm-summary__promo > summary::after { content: "\f078"; margin-inline-start: auto; font-family: "Font Awesome 6 Free"; font-size: 10px; font-weight: 900; transition: transform .3s; }
.qm-summary__promo[open] > summary::after { transform: rotate(180deg); }

.qm-summary__coupon { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 12px 12px; }

.qm-summary__coupon input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    letter-spacing: .04em;
    background: #fff;
    border: 1px solid var(--qc-line);
    border-radius: 11px;
}

.qm-summary__coupon input:focus { outline: 0; border-color: var(--qm-gold-3); box-shadow: 0 0 0 3px rgba(199, 154, 114, .2); }

.qm-summary__coupon-btn {
    display: grid;
    place-items: center;
    min-width: 78px;
    height: 42px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(180deg, #4a2c20, #2b1a14);
    border: 0;
    border-radius: 11px;
    transition: filter .2s;
}

.qm-summary__coupon-btn:hover { filter: brightness(1.15); }
.qm-summary__coupon .error_coupon { flex-basis: 100%; margin: 0 !important; padding: 0 !important; font-size: 12.5px; color: #c0392b; background: none; border: 0; }
.qm-summary__coupon .error_coupon:empty { display: none; }

.qm-summary__signin { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 14px; font-size: 12.5px; line-height: 1.7; color: var(--qc-text); background: #faf6f2; border-radius: 12px; }
.qm-summary__signin i { margin-top: 4px; color: var(--qm-gold-4); }
.qm-summary__signin a { font-weight: 800; color: var(--qm-brown) !important; text-decoration: underline; text-underline-offset: 3px; }

.qm-summary__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    overflow: hidden;
    isolation: isolate;
    font-size: 15.5px;
    font-weight: 800;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(58, 34, 25, .35);
    background: var(--qm-gloss-gold);
    border-radius: 15px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px rgba(58, 34, 25, .25), 0 16px 30px -16px rgba(107, 62, 46, .85);
    transition: filter .25s, transform .25s var(--qm-ease);
}

.qm-summary__cta::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    z-index: -1;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0));
    transform: translateX(-180%) skewX(-22deg);
    animation: qm-sweep 4s cubic-bezier(.45, 0, .2, 1) infinite;
}

.qm-summary__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.qm-summary__cta i { font-size: 12px; }

.qm-summary__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 11.5px; font-weight: 600; color: var(--qc-muted); }
.qm-summary__trust li { display: inline-flex; align-items: center; gap: 6px; }
.qm-summary__trust i { color: var(--qm-gold-3); }

/* --------------------------------------------------------------------------
   3b. Checkout steps pages: panel, address cards, order list, form
   -------------------------------------------------------------------------- */

.qm-checkout__head--steps { justify-content: center; margin-bottom: 26px; }
.qm-checkout__head--steps .qm-steps { padding: 10px 18px; background: #fff; border-radius: 999px; box-shadow: var(--qc-card); }
.qm-checkout__aside { display: grid; gap: 14px; }

.qm-panel { padding: 24px; background: #fff; border-radius: 22px; box-shadow: var(--qc-card); }
.qm-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.qm-panel__head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 800; color: var(--qm-ink); }

.qm-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--qm-brown) !important;
    background: #faf6f2;
    border: 1px solid var(--qc-line);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}

.qm-panel__link:hover { background: #fff; border-color: var(--qm-gold-3); }
.qm-panel__link i { font-size: 11px; }

.qm-panel__empty { display: grid; justify-items: center; gap: 14px; padding: 30px 10px 10px; text-align: center; }
.qm-panel__empty.d-none { display: none !important; }
.qm-panel__empty h2 { max-width: 380px; margin: 0; font-size: 16px; font-weight: 800; line-height: 1.7; color: var(--qc-text); }

.qm-panel__empty-art {
    display: grid;
    place-items: center;
    width: 96px;
    height: 112px;
    font-size: 34px;
    color: var(--qm-gold-4);
    background: radial-gradient(circle at 50% 40%, #fdf9f4, #f1e5d9);
    border-radius: 999px 999px 20px 20px;
    box-shadow: 0 0 0 1px rgba(199, 154, 114, .35);
}

.qm-tag { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; font-weight: 800; border-radius: 999px; }
.qm-tag--green { color: #2e7d4f; background: rgba(46, 139, 87, .12); }

.qm-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; font-size: 14px; font-weight: 600; line-height: 1.7; border-radius: 14px; }
.qm-alert i { margin-top: 4px; }
.qm-alert--info { color: #2f4f73; background: #eef4fb; }
.qm-alert--error { color: #a3352a; background: #fdf0ee; }

.qm-btn-gold {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    margin-top: 18px;
    padding: 0 22px;
    overflow: hidden;
    isolation: isolate;
    font-size: 15.5px;
    font-weight: 800;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(58, 34, 25, .35);
    background: var(--qm-gloss-gold);
    border: 0;
    border-radius: 15px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px rgba(58, 34, 25, .25), 0 16px 30px -16px rgba(107, 62, 46, .85);
    cursor: pointer;
    transition: filter .25s, transform .25s var(--qm-ease);
}

.qm-btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
.qm-btn-gold i { font-size: 13px; }
.qm-panel__empty .qm-btn-gold { width: auto; margin-top: 4px; }

/* ----- Address cards (layoutmodule::components.shippingaddresscomponent) ----- */

.qm-addr-list { display: grid; gap: 12px; }

.qm-addr { position: relative; }
.qm-addr > input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.qm-addr__card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
    padding: 16px 18px;
    padding-inline-end: 96px; /* room for the edit / delete tools */
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #fff;
    border: 1.5px solid var(--qc-line);
    border-radius: 18px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.qm-addr__card:hover { border-color: rgba(199, 154, 114, .55); }

.qm-addr__radio {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    border: 2px solid #d6c4b2;
    border-radius: 50%;
    transition: border-color .2s;
}

.qm-addr__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--qm-gloss-gold); transform: scale(0); transition: transform .2s var(--qm-ease); }

.qm-addr__icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 16px; color: var(--qm-gold-4); background: #faf3ec; border-radius: 12px; }

.qm-addr__body { display: grid; min-width: 0; gap: 3px; }
.qm-addr__body b { font-size: 15px; font-weight: 800; color: var(--qm-ink); }
.qm-addr__body > span { font-size: 13.5px; line-height: 1.7; color: var(--qc-text); }
.qm-addr__body small { justify-self: start; font-size: 12px; color: var(--qc-muted); }
.qm-addr__body small i { margin-inline-end: 4px; font-size: 10px; }

.qm-addr > input:checked + .qm-addr__card { background: #fffaf5; border-color: var(--qm-gold-3); box-shadow: 0 0 0 3px rgba(199, 154, 114, .18); }
.qm-addr > input:checked + .qm-addr__card .qm-addr__radio { border-color: var(--qm-gold-4); }
.qm-addr > input:checked + .qm-addr__card .qm-addr__radio::after { transform: scale(1); }
.qm-addr > input:focus-visible + .qm-addr__card { box-shadow: 0 0 0 3px rgba(199, 154, 114, .35); }

.qm-addr__tools { position: absolute; top: 50%; inset-inline-end: 14px; display: flex; gap: 6px; transform: translateY(-50%); }

.qm-addr__tools a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    color: var(--qc-muted) !important;
    background: #faf6f2;
    border-radius: 10px;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.qm-addr__tools a:hover { color: var(--qm-ink) !important; background: #f2e8de; }
.qm-addr__tools .delete_address:hover { color: #b0453a !important; background: #fdf0ee; }

/* ----- Order list in the aside (ordersummarycomponent + ordercard) ----- */

.qm-mini { padding: 18px 18px 8px; background: #fff; border-radius: 22px; box-shadow: var(--qc-card); }
.qm-mini__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.qm-mini__head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 800; color: var(--qm-ink); }
.qm-mini__head h3 span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 11.5px; color: var(--qm-brown); background: #f6ede4; border-radius: 999px; }
.qm-mini__head a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; }
.qm-mini__head a i { font-size: 10px; }

.qm-mini__list { max-height: 330px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.qm-mini__list li + li { border-top: 1px solid var(--qc-line); }

.qm-mini__item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }

.qm-mini__thumb { position: relative; display: block; width: 54px; aspect-ratio: 4 / 5; background: #f3ece5; border-radius: 11px; }
.qm-mini__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.qm-mini__thumb.is-empty { background: radial-gradient(circle at 50% 42%, #fdf9f4 0%, #efe3d6 100%); }
.qm-mini__thumb.is-empty img { opacity: 0; }

.qm-mini__qty {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--qm-brown);
    border: 2px solid #fff;
    border-radius: 999px;
}

.qm-mini__info { display: grid; min-width: 0; gap: 1px; }
.qm-mini__shop { font-size: 11.5px; font-weight: 700; color: var(--qm-gold-4); }
.qm-mini__name { overflow: hidden; font-size: 13.5px; font-weight: 800; color: var(--qm-ink); white-space: nowrap; text-overflow: ellipsis; }
.qm-mini__vars { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--qc-muted); }
.qm-mini__vars span { display: inline-flex; align-items: center; gap: 4px; }
.qm-mini__dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.qm-mini__price { display: inline-flex; align-items: baseline; gap: 3px; font-size: 14px; font-weight: 800; color: var(--qm-ink); white-space: nowrap; }
.qm-mini__price svg { width: .75em; height: .75em; }

.qm-summary--compact { padding-top: 18px; }
.qm-summary--compact .qm-summary__total { margin-bottom: 0; }
.qm-summary--compact .qm-summary__total b { font-size: 22px; }

/* ----- Forms (address create / edit) ----- */

.qm-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.qm-checkout .qm-field { margin-bottom: 16px; }
.qm-checkout .qm-field--full { grid-column: 1 / -1; }

.qm-checkout .qm-label {
    display: block;
    margin: 0 0 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--qm-ink) !important;
}

.qm-checkout .qm-input,
.qm-checkout .qm-form select {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 14px;
    font-size: 14.5px;
    color: var(--qm-ink);
    background: #fffdfb;
    border: 1px solid #eadfd3;
    border-radius: 13px;
    transition: border-color .2s, box-shadow .2s;
}

.qm-checkout .qm-input:focus { outline: 0; background: #fff; border-color: var(--qm-gold-3); box-shadow: 0 0 0 4px rgba(199, 154, 114, .2); }
.qm-checkout .qm-input::placeholder { color: #b9a797; }

.qm-checkout .qm-form .select2-container { width: 100% !important; }
.qm-checkout .qm-form .select2-container .select2-selection--single { display: flex; align-items: center; height: 50px !important; background: #fffdfb; border: 1px solid #eadfd3 !important; border-radius: 13px !important; }
.qm-checkout .qm-form .select2-container--open .select2-selection--single,
.qm-checkout .qm-form .select2-container--focus .select2-selection--single { border-color: var(--qm-gold-3) !important; box-shadow: 0 0 0 4px rgba(199, 154, 114, .2); }
.qm-checkout .qm-form .select2-selection__rendered { padding-inline: 14px !important; font-size: 14.5px; color: var(--qm-ink) !important; line-height: 48px !important; }
.qm-checkout .qm-form .select2-selection__arrow { top: 12px !important; }

.qm-checkout .qm-form .alert-danger { margin: 6px 0 0 !important; padding: 0 !important; font-size: 12.5px; font-weight: 600; color: #c0392b; background: none; border: 0; }

/* --------------------------------------------------------------------------
   3c. Payment step: numbered panels, shipping options, notes, place order
   -------------------------------------------------------------------------- */

.qm-checkout__main { display: grid; gap: 16px; margin: 0; }
.qm-checkout__alerts:empty { display: none; }
.qm-checkout__alerts { max-width: 1180px; margin: 0 auto 6px; }
.qm-checkout__alerts .qm-alert a { font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.qm-panel__head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 800; color: var(--qm-ink); }
.qm-panel__head h2 small { font-size: 12.5px; font-weight: 600; color: var(--qc-muted); }

.qm-panel__num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: var(--qm-gloss-gold);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 12px -8px rgba(107, 62, 46, .8);
}

.qm-alert--warn { color: #8a5a12; background: #fff6e6; }

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

.qm-ship { display: grid; gap: 10px; max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.qm-ship.loading { position: relative; opacity: .6; pointer-events: none; }

.qm-ship__opt {
    position: relative;
    display: grid;
    grid-template-columns: auto 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
    padding: 12px 16px;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #fff;
    border: 1.5px solid var(--qc-line);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.qm-ship__opt:hover { border-color: rgba(199, 154, 114, .55); }
.qm-ship__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.qm-ship__radio { position: relative; width: 20px; height: 20px; border: 2px solid #d6c4b2; border-radius: 50%; }
.qm-ship__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--qm-gloss-gold); transform: scale(0); transition: transform .2s var(--qm-ease); }

.qm-ship__logo { display: grid; place-items: center; width: 56px; height: 40px; overflow: hidden; color: var(--qm-gold-4); background: #fff; border: 1px solid var(--qc-line); border-radius: 10px; }
.qm-ship__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.qm-ship__body { display: grid; min-width: 0; gap: 2px; }
.qm-ship__body b { font-size: 14.5px; font-weight: 800; color: var(--qm-ink); }
.qm-ship__body small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--qc-muted); }
.qm-ship__price { display: inline-flex; align-items: baseline; gap: 3px; font-size: 16px; font-weight: 800; color: var(--qm-ink); white-space: nowrap; }
.qm-ship__price svg { width: .75em; height: .75em; }

.qm-ship__opt.active,
.qm-ship__opt:has(input:checked) { background: #fffaf5; border-color: var(--qm-gold-3); box-shadow: 0 0 0 3px rgba(199, 154, 114, .16); }
.qm-ship__opt.active .qm-ship__radio,
.qm-ship__opt:has(input:checked) .qm-ship__radio { border-color: var(--qm-gold-4); }
.qm-ship__opt.active .qm-ship__radio::after,
.qm-ship__opt:has(input:checked) .qm-ship__radio::after { transform: scale(1); }

/* ----- Notes for the designer (layoutmodule::components.ordernotescomponent) ----- */

.qm-notes { display: grid; gap: 10px; }

.qm-note { background: #fff; border: 1px solid var(--qc-line); border-radius: 16px; transition: border-color .2s; }
.qm-note[open] { border-color: rgba(199, 154, 114, .55); }

.qm-note > summary {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    list-style: none;
    cursor: pointer;
}

.qm-note > summary::-webkit-details-marker { display: none; }

.qm-note__thumb { display: block; width: 46px; aspect-ratio: 4 / 5; overflow: hidden; background: #f3ece5; border-radius: 10px; }
.qm-note__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qm-note__thumb.is-empty { background: radial-gradient(circle at 50% 42%, #fdf9f4 0%, #efe3d6 100%); }
.qm-note__thumb.is-empty img { opacity: 0; }

.qm-note__info { display: grid; min-width: 0; gap: 1px; }
.qm-note__info b { overflow: hidden; font-size: 14px; font-weight: 800; color: var(--qm-ink); white-space: nowrap; text-overflow: ellipsis; }
.qm-note__info small { font-size: 12px; color: var(--qm-gold-4); }

.qm-note__add { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--qm-brown); white-space: nowrap; }
.qm-note[open] .qm-note__add { opacity: .5; }

.qm-note__text {
    display: block;
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.8;
    background: #fffdfb;
    border: 1px solid #eadfd3;
    border-radius: 12px;
    resize: vertical;
}

.qm-note__text:focus { outline: 0; border-color: var(--qm-gold-3); box-shadow: 0 0 0 4px rgba(199, 154, 114, .2); }

/* ----- Place order ----- */

.qm-checkout__place { height: 58px; margin-top: 4px; font-size: 16.5px; }
.qm-checkout__place[disabled] { filter: grayscale(.3) opacity(.75); cursor: progress; }
.qm-checkout__fine { margin: -4px 0 0; font-size: 12px; color: var(--qc-muted); text-align: center; }

.qm-summary__hint { padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--qc-muted); background: #f6efe8; border-radius: 999px; }
.qm-summary__free { font-size: 12.5px; font-weight: 600; color: var(--qc-muted); }

/* --------------------------------------------------------------------------
   3d. Checkout flow (address + payment steps): one main card, grouped
       option lists, one tinted order sidebar. Overrides the panel looks above.
   -------------------------------------------------------------------------- */

.qm-checkout .qm-checkout__grid { grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; }

.qm-flow {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--qc-card);
}

.qm-flow--pad { padding: 26px 28px; }
.qm-flow__sec { padding: 26px 28px; }
.qm-flow__sec + .qm-flow__sec { border-top: 1px solid var(--qc-line); }

.qm-flow__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 16px; }
.qm-flow__head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 800; color: var(--qm-ink); }
.qm-flow__head h2 small { font-size: 12.5px; font-weight: 600; color: var(--qc-muted); }
.qm-flow__head p { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--qc-muted); }
.qm-flow__head p i { font-size: 11px; color: var(--qm-gold-4); }

.qm-flow__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 28px;
    background: #fcf9f6;
    border-top: 1px solid var(--qc-line);
}

.qm-flow__foot .qm-btn-gold { width: auto; min-width: 260px; margin: 0; }
.qm-flow__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; }
.qm-flow__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.qm-flow__back i { font-size: 12px; }
.qm-flow + .qm-checkout__fine,
.qm-flow .qm-checkout__fine { margin: 0; padding: 0 28px 18px; background: #fcf9f6; }

/* ----- Contact / ship-to recap ----- */

.qm-recap { margin: 0; overflow: hidden; border: 1px solid var(--qc-line); border-radius: 16px; }
.qm-recap__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 16px; }
.qm-recap__row + .qm-recap__row { border-top: 1px solid var(--qc-line); }
.qm-recap dt { font-size: 12.5px; font-weight: 700; color: var(--qc-muted); }
.qm-recap dd { margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--qm-ink); white-space: nowrap; text-overflow: ellipsis; }
.qm-recap__sep { margin: 0 6px; color: var(--qc-muted); }
.qm-recap a { font-size: 12.5px; font-weight: 800; color: var(--qm-brown) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ----- Grouped lists: addresses, shipping options, notes ----- */

.qm-checkout .qm-addr-list,
.qm-checkout .qm-ship,
.qm-checkout .qm-notes {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(161, 120, 92, .2);
    border-radius: 16px;
}

.qm-checkout .qm-addr + .qm-addr,
.qm-checkout .qm-addr-list > .qm-addr-add,
.qm-checkout .qm-ship__opt + .qm-ship__opt,
.qm-checkout .qm-note + .qm-note { border-top: 1px solid rgba(161, 120, 92, .16); }

.qm-checkout .qm-addr__card,
.qm-checkout .qm-ship__opt,
.qm-checkout .qm-note {
    position: relative;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
}

.qm-checkout .qm-addr > input:checked + .qm-addr__card,
.qm-checkout .qm-ship__opt.active,
.qm-checkout .qm-ship__opt:has(input:checked) { background: #fdf8f3; }

/* gold bar on the selected row */
.qm-checkout .qm-addr > input:checked + .qm-addr__card::before,
.qm-checkout .qm-ship__opt.active::before,
.qm-checkout .qm-ship__opt:has(input:checked)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--qm-gloss-gold);
}

.qm-checkout .qm-addr__card { padding-block: 15px; }
.qm-checkout .qm-addr__icon { width: 38px; height: 38px; font-size: 14px; }
.qm-checkout .qm-ship { max-height: 360px; }
.qm-checkout .qm-ship__opt { padding: 14px 16px; }
.qm-checkout .qm-note[open] { background: #fdf8f3; }

.qm-addr-add {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 800;
    color: var(--qm-brown) !important;
    background: #fff;
    text-decoration: none;
    transition: background-color .2s;
}

.qm-addr-add:hover { background: #fcf8f4; }
.qm-addr-add span { display: grid; place-items: center; width: 22px; height: 22px; font-size: 10px; color: var(--qm-brown); border: 1.5px dashed var(--qm-gold-3); border-radius: 50%; }

.qm-flow .qm-panel__empty { padding: 10px 0 4px; }
.qm-flow .qm-panel__empty h3 { max-width: 380px; margin: 0; font-size: 16px; font-weight: 800; line-height: 1.7; color: var(--qc-text); }

/* ----- One tinted order sidebar ----- */

.qm-sidebar {
    position: sticky;
    top: 150px;
    display: grid;
    overflow: hidden;
    background: linear-gradient(180deg, #fbf5ef 0%, #f7efe6 100%);
    border: 1px solid rgba(161, 120, 92, .18);
    border-radius: 24px;
}

.qm-sidebar .qm-mini,
.qm-sidebar .qm-summary {
    padding: 22px 24px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.qm-sidebar .qm-summary::before { display: none; }
.qm-sidebar > * + * { border-top: 1px solid rgba(161, 120, 92, .18); }
.qm-sidebar .qm-mini__head h3 span { background: #fff; }
.qm-sidebar .qm-mini__list { max-height: 280px; }
.qm-sidebar .qm-mini__thumb { background: #fff; box-shadow: 0 0 0 1px rgba(161, 120, 92, .18); }
.qm-sidebar .qm-summary__title { font-size: 15px; }
.qm-sidebar .qm-summary__promo { background: #fff; }
.qm-sidebar .qm-summary__total { border-top-color: rgba(161, 120, 92, .3); }

/* --------------------------------------------------------------------------
   4. Empty cart
   -------------------------------------------------------------------------- */

.qm-empty { display: grid; justify-items: center; gap: 16px; padding: clamp(40px, 6vw, 80px) 20px; text-align: center; background: #fff; border-radius: 28px; box-shadow: var(--qc-card); }
.qm-empty.d-none { display: none !important; }

.qm-empty__art {
    position: relative;
    display: grid;
    place-items: center;
    width: 128px;
    height: 150px;
    font-size: 46px;
    color: var(--qm-gold-4);
    background: radial-gradient(circle at 50% 40%, #fdf9f4, #f1e5d9);
    border-radius: 999px 999px 24px 24px;
    box-shadow: 0 0 0 1px rgba(199, 154, 114, .35), 0 24px 40px -26px rgba(107, 62, 46, .7);
}

.qm-empty__art::after { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(199, 154, 114, .35); border-bottom: 0; border-radius: 999px 999px 0 0; }
.qm-empty h2 { max-width: 420px; margin: 0; font-size: 20px; font-weight: 800; line-height: 1.6; color: var(--qm-ink); }

.qm-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 800;
    color: #fff !important;
    background: var(--qm-gloss-gold);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 26px -14px rgba(107, 62, 46, .8);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .qm-checkout__grid { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 991px) {
    .qm-checkout__grid,
    .qm-checkout .qm-checkout__grid { grid-template-columns: 1fr; }
    .qm-checkout__aside, .qm-sidebar { position: static; }
    .qm-sidebar { order: -1; }   /* order recap first on phones / tablets */
}

@media (max-width: 767px) {
    .qm-flow__sec, .qm-flow--pad { padding: 20px 16px; }
    .qm-flow__foot { flex-direction: column-reverse; align-items: stretch; padding: 16px; }
    .qm-flow__foot .qm-btn-gold { width: 100%; min-width: 0; }
    .qm-flow__back { justify-content: center; }
    .qm-recap__row { grid-template-columns: 1fr auto; row-gap: 2px; }
    .qm-recap dt { grid-column: 1 / -1; }
    .qm-recap dd { white-space: normal; }
    .qm-form__grid { grid-template-columns: 1fr; }
    .qm-panel { padding: 18px 14px; border-radius: 18px; }
    .qm-addr__card { padding: 14px; padding-inline-end: 88px; gap: 10px; }
    .qm-addr__icon { display: none; }
    .qm-ship__opt { grid-template-columns: auto 46px minmax(0, 1fr); row-gap: 6px; padding: 12px; }
    .qm-ship__price { grid-column: 3; }
    .qm-ship__logo { width: 46px; height: 34px; }
    .qm-note > summary { grid-template-columns: 40px minmax(0, 1fr); }
    .qm-note__add { grid-column: 2; }
    .qm-bag__head { display: none; }
    /* phones: thumb + details, then quantity and price on one row underneath */
    .qm-line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "media info info" "media qty price"; row-gap: 10px; column-gap: 14px; padding: 14px; }
    .qm-line__media { grid-area: media; width: 72px; align-self: start; }
    .qm-line__info { grid-area: info; }
    .qm-checkout .qm-line__qty { grid-area: qty; justify-self: start; width: 104px; height: 36px; }
    .qm-line__price { grid-area: price; }
}

@media (max-width: 575px) {
    .qm-line__name { font-size: 14px; }
    .qm-summary { padding: 20px 16px 16px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .qm-checkout *, .qm-checkout *::after { animation: none !important; transition: none !important; }
}