/* ==========================================================================
   Qemmah — Customer account (profile, orders, favourites, addresses, cards,
   balance, affiliate). Shell = layoutmodule::components.qm-account.
   Loaded after checkout-premium.css, whose panels, forms and address cards
   the account pages reuse (the shell carries .qm-checkout for that).
   ========================================================================== */

.qm-account { padding-bottom: 64px; }

.qm-account__grid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.qm-account__aside { position: sticky; top: 190px; }

.qm-account__main { display: grid; gap: 18px; min-width: 0; }

.qm-account__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.qm-account__head h1 {
    margin: 0;
    padding-bottom: .1em;
    font-size: clamp(24px, 2.3vw, 30px);
    font-weight: 800;
    color: var(--qm-ink);
}
.qm-account__head p { max-width: 560px; margin: 4px 0 0; font-size: 14px; line-height: 1.75; color: var(--qc-muted); }
.qm-account__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qm-account__actions .qm-btn-gold { width: auto; }

/* --------------------------------------------------------------------------
   1. Account navigation (dark atelier card)
   -------------------------------------------------------------------------- */

.qm-acc-nav {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 22px 16px 16px;
    color: #fff;
    background:
        radial-gradient(360px 220px at 100% -10%, rgba(226, 193, 156, .26), transparent 60%),
        linear-gradient(165deg, #1a1210 0%, #2b1a14 60%, #3d251b 100%);
    border-radius: 24px;
    box-shadow: 0 40px 70px -48px rgba(26, 18, 16, .85);
}

.qm-acc-nav__me { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; border-bottom: 1px solid rgba(226, 193, 156, .16); }

.qm-acc-nav__avatar {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 60px;
    height: 60px;
    font-size: 24px;
    font-weight: 800;
    color: #3a2219;
    background: var(--qm-gloss-gold);
    border: 3px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* arch: a doorway concentric with the avatar (10px clear all round), standing on the divider.
   Measured from the avatar's padding box: 3px border, 54px inside, divider 18px below. */
.qm-acc-nav__avatar::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 80px;
    height: 88px;
    border: 1px solid rgba(226, 193, 156, .3);
    border-bottom: 0;
    border-radius: 40px 40px 0 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.qm-acc-nav__who { display: grid; min-width: 0; gap: 2px; }
.qm-acc-nav__who b { overflow: hidden; font-size: 16px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.qm-acc-nav__who small { font-size: 12.5px; color: rgba(255, 255, 255, .55); text-align: start; }

.qm-acc-nav__list { display: grid; gap: 2px; padding: 12px 0; }

.qm-acc-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .78) !important;
    text-decoration: none;
    border-radius: 13px;
    transition: background-color .2s, color .2s;
}

.qm-acc-nav__link i { width: 18px; font-size: 14px; text-align: center; color: var(--qm-gold-3); transition: color .2s; }
.qm-acc-nav__link:hover { color: #fff !important; background: rgba(255, 255, 255, .06); }

.qm-acc-nav__link.is-active { color: #fff !important; background: rgba(226, 193, 156, .14); }
.qm-acc-nav__link.is-active i { color: var(--qm-gold-1); }
.qm-acc-nav__link.is-active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    inset-inline-start: -16px;
    width: 3px;
    background: var(--qm-gloss-gold);
    border-radius: 0 3px 3px 0;
}
.qm-ar .qm-acc-nav__link.is-active::before { border-radius: 3px 0 0 3px; }

.qm-acc-nav__link.is-soon { cursor: default; opacity: .5; }
.qm-acc-nav__link.is-soon:hover { background: none; }
.qm-acc-nav__link em { margin-inline-start: auto; padding: 2px 8px; font-size: 10.5px; font-style: normal; font-weight: 700; color: var(--qm-gold-1); border: 1px solid rgba(226, 193, 156, .3); border-radius: 999px; }

.qm-acc-nav__foot { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(226, 193, 156, .16); }
.qm-acc-nav__link--out i { color: #e8a59b; }
.qm-acc-nav__delete { justify-self: start; padding: 6px 12px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .42); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.qm-acc-nav__delete:hover { color: #e8a59b; }

/* --------------------------------------------------------------------------
   2. Shared account pieces
   -------------------------------------------------------------------------- */

.qm-acc-card { padding: 26px 28px; background: #fff; border-radius: 22px; box-shadow: var(--qc-card); }
.qm-acc-card + .qm-acc-card { margin-top: 0; }
.qm-acc-card__title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 17px; font-weight: 800; color: var(--qm-ink); }
.qm-acc-card__title i { font-size: 14px; color: var(--qm-gold-4); }

.qm-acc-flash { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; font-size: 14px; font-weight: 700; border-radius: 14px; }
.qm-acc-flash--ok { color: #2e6b47; background: #eef8f1; }
.qm-acc-flash--error { color: #a3352a; background: #fdf0ee; }

/* form layout inside account cards */
.qm-acc-form { max-width: none; }
.qm-acc-form .qm-form__grid { gap: 0 18px; }
.qm-acc-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.qm-acc-form__foot .qm-btn-gold { width: auto; min-width: 200px; }

/* read-only value with an action (phone number) */
.qm-acc-static {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding-inline: 14px 6px;
    background: #faf6f1;
    border: 1px solid #eadfd3;
    border-radius: 13px;
}
.qm-acc-static img { width: 24px; height: 16px; object-fit: cover; border-radius: 3px; }
.qm-acc-static b { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--qm-ink); direction: ltr; text-align: start; }
.qm-acc-static a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qm-brown) !important;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(161, 120, 92, .3);
    border-radius: 10px;
    transition: border-color .2s, background-color .2s;
}
.qm-acc-static a:hover { border-color: var(--qm-gold-3); background: #fffaf5; }

/* segmented choice (gender) — index.js toggles .active on .gender */
.qm-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; background: #f6efe8; border-radius: 14px; }
.qm-seg .gender {
    display: grid;
    place-items: center;
    height: 42px;
    font-size: 14px;
    font-weight: 700;
    color: #8a7466;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.qm-seg .gender.active { color: var(--qm-ink); background: #fff; box-shadow: 0 6px 16px -10px rgba(58, 34, 25, .45), 0 0 0 1px rgba(199, 154, 114, .4); }

/* country select (legacy component markup) */
.qm-account .qm-form select.form-control { height: 50px; padding: 0 14px; font-size: 14.5px; background-color: #fffdfb; border: 1px solid #eadfd3; border-radius: 13px; }
.qm-account .qm-form select.form-control:focus { border-color: var(--qm-gold-3); box-shadow: 0 0 0 4px rgba(199, 154, 114, .2); }

/* empty state */
.qm-acc-empty { display: grid; justify-items: center; gap: 12px; padding: 54px 20px; text-align: center; background: #fff; border-radius: 22px; box-shadow: var(--qc-card); }
.qm-acc-empty__art { display: grid; place-items: center; width: 76px; height: 76px; font-size: 28px; color: var(--qm-gold-4); background: radial-gradient(circle at 50% 35%, #fff 0%, #f6ede4 100%); border-radius: 50%; box-shadow: 0 0 0 8px #fbf7f2; }
.qm-acc-empty h2 { margin: 6px 0 0; font-size: 18px; font-weight: 800; color: var(--qm-ink); }
.qm-acc-empty p { max-width: 380px; margin: 0; font-size: 14px; line-height: 1.75; color: var(--qc-muted); }
.qm-acc-empty .qm-btn-gold { width: auto; margin-top: 6px; }

/* --------------------------------------------------------------------------
   3. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .qm-account__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .qm-account__grid > * { min-width: 0; }
    .qm-account__aside { position: static; }

    /* the nav becomes a swipeable row of chips under the profile strip */
    .qm-acc-nav { padding: 16px; border-radius: 20px; }
    .qm-acc-nav__avatar::before { display: none; }
    .qm-acc-nav__me { padding: 0 0 14px; }
    .qm-acc-nav__avatar { width: 46px; height: 46px; font-size: 19px; }
    .qm-acc-nav__list { display: flex; gap: 6px; margin: 0 -16px; padding: 14px 16px 2px; overflow-x: auto; scrollbar-width: none; }
    .qm-acc-nav__list::-webkit-scrollbar { display: none; }
    .qm-acc-nav__link { flex: none; padding: 9px 14px; font-size: 13px; white-space: nowrap; background: rgba(255, 255, 255, .05); border-radius: 999px; }
    .qm-acc-nav__link.is-active::before { display: none; }
    .qm-acc-nav__link.is-active { background: rgba(226, 193, 156, .22); box-shadow: inset 0 0 0 1px rgba(226, 193, 156, .45); }
    .qm-acc-nav__link.is-soon { display: none; }
    .qm-acc-nav__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
    .qm-acc-nav__foot .qm-acc-nav__link { background: none; padding: 6px 4px; }
}

@media (max-width: 575px) {
    .qm-acc-card { padding: 20px 16px; border-radius: 18px; }
    .qm-account .qm-form__grid { grid-template-columns: 1fr; }
    .qm-acc-form__foot .qm-btn-gold { width: 100%; }
}

.qm-label__opt { font-size: 12px; font-weight: 600; color: var(--qc-muted); }

/* --------------------------------------------------------------------------
   4. Orders
   -------------------------------------------------------------------------- */

.qm-acc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qm-acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: #6b5a50;
    background: #fff;
    border: 1px solid rgba(161, 120, 92, .2);
    border-radius: 999px;
    transition: background-color .2s, color .2s, border-color .2s;
}
.qm-acc-chip 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-acc-chip:hover { border-color: var(--qm-gold-3); }
.qm-acc-chip.is-active { color: #fff; background: #2b1a14; border-color: #2b1a14; }
.qm-acc-chip.is-active span { color: #2b1a14; background: var(--qm-gloss-gold); }

.qm-orders { display: grid; gap: 14px; }

.qm-order {
    position: relative;
    padding: 18px 22px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--qc-card);
    transition: transform .3s var(--qm-ease), box-shadow .3s var(--qm-ease);
}
.qm-order:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(199, 154, 114, .35), 0 30px 60px -36px rgba(58, 34, 25, .5); }
.qm-order__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

.qm-order__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-bottom: 14px; border-bottom: 1px dashed rgba(161, 120, 92, .25); }
.qm-order__head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.qm-order__no { font-size: 16px; font-weight: 800; color: var(--qm-ink); letter-spacing: .01em; }
.qm-order__date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--qc-muted); }
.qm-order__date i { font-size: 11px; }

.qm-order__body { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding-top: 14px; }

.qm-order__thumbs { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qm-order__thumbs li { width: 58px; aspect-ratio: 4 / 5; overflow: hidden; background: #f3ece5; border-radius: 12px; box-shadow: 0 0 0 1px rgba(161, 120, 92, .12); }
.qm-order__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qm-order__thumbs img.is-empty { padding: 14px; object-fit: contain; opacity: .35; background: radial-gradient(circle at 50% 42%, #fdf9f4 0%, #efe3d6 100%); }
.qm-order__more { display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--qm-brown); }

.qm-order__sum { display: grid; justify-items: end; gap: 2px; text-align: end; }
.qm-order__sum small { font-size: 12px; color: var(--qc-muted); }
.qm-order__sum b { display: inline-flex; align-items: baseline; gap: 4px; font-size: 20px; font-weight: 800; color: var(--qm-ink); }
.qm-order__sum b svg { width: .7em; height: .7em; }

.qm-order__go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 13px; font-weight: 700; color: var(--qm-brown); white-space: nowrap; border: 1px solid rgba(161, 120, 92, .3); border-radius: 999px; transition: background-color .2s, color .2s; }
.qm-order:hover .qm-order__go { color: #fff; background: var(--qm-gloss-gold); border-color: transparent; }

/* status pills */
.qm-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; font-size: 12.5px; font-weight: 800; border-radius: 999px; }
.qm-status::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.qm-status--new { color: #2f5d8a; background: #eaf2fb; }
.qm-status--preparing { color: #9a6410; background: #fff4e0; }
.qm-status--shipping { color: #6a4bb0; background: #f1ecfb; }
.qm-status--ready { color: #0f7a74; background: #e5f6f4; }
.qm-status--delivery { color: #2e7d4f; background: #e9f6ee; }
.qm-status--cancel { color: #b0453a; background: #fdeeec; }

@media (max-width: 767px) {
    .qm-order { padding: 16px; }
    .qm-order__body { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
    .qm-order__thumbs li { width: 48px; }
    .qm-order__thumbs li:nth-child(n+4):not(.qm-order__more) { display: none; }
    .qm-order__go { display: none; }
}

/* --------------------------------------------------------------------------
   5. Order page
   -------------------------------------------------------------------------- */

.qm-account__actions form { margin: 0; }
.qm-acc-danger { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: 13px; font-weight: 700; color: #b0453a; background: #fff; border: 1px solid rgba(176, 69, 58, .35); border-radius: 999px; transition: background-color .2s; }
.qm-acc-danger:hover { background: #fdf0ee; }

/* status tracker */
.qm-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 22px 18px; list-style: none; background: #fff; border-radius: 22px; box-shadow: var(--qc-card); }
.qm-track__step { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }

/* connector to the next step */
.qm-track__step + .qm-track__step::before {
    content: "";
    position: absolute;
    top: 21px;
    inset-inline-end: calc(50% + 28px);
    width: calc(100% - 56px);
    height: 2px;
    background: repeating-linear-gradient(90deg, #e3d6c9 0 6px, transparent 6px 11px);
}
.qm-track__step.is-done + .qm-track__step::before,
.qm-track__step.is-done + .qm-track__step.is-current::before { background: var(--qm-gloss-gold); }

.qm-track__dot { display: grid; place-items: center; width: 44px; height: 44px; font-size: 15px; color: #b9a797; background: #f6f0ea; border-radius: 50%; transition: background-color .2s; }
.qm-track__step.is-done .qm-track__dot { color: #fff; background: #2b1a14; }
.qm-track__step.is-current .qm-track__dot { color: #3a2219; background: var(--qm-gloss-gold); box-shadow: 0 0 0 6px rgba(199, 154, 114, .2), inset 0 1px 0 rgba(255, 255, 255, .5); }
.qm-track__label { font-size: 13px; font-weight: 700; color: #a3917f; }
.qm-track__step.is-done .qm-track__label { color: var(--qm-ink); }
.qm-track__step.is-current .qm-track__label { font-weight: 800; color: var(--qm-brown); }

.qm-acc-cancelled { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: #8f3329; background: #fdf0ee; border: 1px solid rgba(176, 69, 58, .2); border-radius: 18px; }
.qm-acc-cancelled > span { display: grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 17px; color: #fff; background: #b0453a; border-radius: 50%; }
.qm-acc-cancelled div { display: grid; gap: 2px; }
.qm-acc-cancelled b { font-size: 15px; font-weight: 800; }
.qm-acc-cancelled small { font-size: 13px; color: #a3524a; }

.qm-acc-order { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 18px; }
.qm-acc-order__side { display: grid; gap: 14px; }
.qm-acc-card--flush { padding-bottom: 8px; }
.qm-acc-card__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; font-size: 12px; color: var(--qm-brown); background: #f6ede4; border-radius: 999px; }

/* line items */
.qm-oitems { margin: 0; padding: 0; list-style: none; }
.qm-oitem { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 16px 0; }
.qm-oitem + .qm-oitem { border-top: 1px solid var(--qc-line); }
.qm-oitem:first-child { padding-top: 0; }
.qm-oitem__thumb { display: block; width: 84px; aspect-ratio: 4 / 5; overflow: hidden; background: #f3ece5; border-radius: 14px; }
.qm-oitem__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qm-oitem__thumb.is-empty img { padding: 22px; object-fit: contain; opacity: .35; }
.qm-oitem__info { display: grid; min-width: 0; gap: 4px; }
.qm-oitem__shop { font-size: 12px; font-weight: 700; color: var(--qm-gold-4); }
.qm-oitem__name { font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--qm-ink) !important; text-decoration: none; }
.qm-oitem__name:hover { color: var(--qm-brown) !important; }
.qm-oitem__vars { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; font-size: 12.5px; color: var(--qc-muted); }
.qm-oitem__vars span { display: inline-flex; align-items: center; gap: 5px; }
.qm-oitem__vars b { font-weight: 700; color: var(--qm-ink); }
.qm-oitem__dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.qm-oitem__note { margin-top: 6px; }
.qm-oitem__note summary { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--qm-brown); cursor: pointer; list-style: none; }
.qm-oitem__note summary::-webkit-details-marker { display: none; }
.qm-oitem__note p { margin: 8px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.7; background: #faf6f1; border-radius: 10px; }
.qm-oitem__end { display: grid; justify-items: end; gap: 8px; }
.qm-oitem__price { display: inline-flex; align-items: baseline; gap: 3px; font-size: 16px; font-weight: 800; color: var(--qm-ink); white-space: nowrap; }
.qm-oitem__price svg, .qm-acc-order__side svg { width: .75em; height: .75em; }
.qm-oitem__rate { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; background: #fbf5ee; border-radius: 999px; }
.qm-oitem__rate i { color: #f2b01e; }

/* side cards */
.qm-acc-side { padding: 18px 20px; background: #fff; border-radius: 18px; box-shadow: var(--qc-card); }
.qm-acc-side__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14.5px; font-weight: 800; color: var(--qm-ink); }
.qm-acc-side__title i { font-size: 13px; color: var(--qm-gold-4); }
.qm-acc-side__strong { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--qm-ink); }
.qm-acc-side__muted { margin: 0; font-size: 13px; line-height: 1.7; color: var(--qc-muted); }
.qm-acc-side__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.qm-acc-side__pay b { font-size: 13.5px; font-weight: 700; color: var(--qm-ink); }
.qm-acc-side .qm-pay__logos { display: flex; align-items: center; gap: 6px; }
.qm-acc-side .qm-pay__logos img { display: block; width: auto !important; height: 18px !important; padding: 3px 5px; background: #fff; border: 1px solid rgba(161, 120, 92, .16); border-radius: 6px; box-sizing: content-box; }

.qm-summary--receipt { margin: 0; }

@media (max-width: 1199px) {
    .qm-acc-order { grid-template-columns: 1fr; }
    .qm-acc-order__side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 575px) {
    .qm-track { padding: 18px 8px; }
    .qm-track__dot { width: 36px; height: 36px; font-size: 13px; }
    .qm-track__step + .qm-track__step::before { top: 17px; inset-inline-end: calc(50% + 22px); width: calc(100% - 44px); }
    .qm-track__label { font-size: 11.5px; }
    .qm-oitem { grid-template-columns: 64px minmax(0, 1fr); }
    .qm-oitem__thumb { width: 64px; }
    .qm-oitem__end { grid-column: 2; justify-items: start; }
}

/* --------------------------------------------------------------------------
   6. Favourites
   -------------------------------------------------------------------------- */

.qm-acc-chip i { font-size: 12px; }
.qm-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.qm-acc-shops { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

@media (max-width: 575px) {
    .qm-acc-grid,
    .qm-acc-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* --------------------------------------------------------------------------
   7. Saved addresses (shared address card, without the picker radio)
   -------------------------------------------------------------------------- */

.qm-acc-addr .qm-addr__radio { display: none; }
.qm-acc-addr .qm-addr__card { cursor: default; padding-inline-end: 110px; }
.qm-account .qm-acc-addr .qm-addr > input:checked + .qm-addr__card { background: #fff; }
.qm-account .qm-acc-addr .qm-addr > input:checked + .qm-addr__card::before { display: none; }
.qm-acc-addr .qm-addr { transition: background-color .2s; }
.qm-acc-addr .qm-addr:hover .qm-addr__card { background: #fdfaf6 !important; }
.qm-account .qm-btn-gold { width: auto; }

/* --------------------------------------------------------------------------
   8. Saved cards
   -------------------------------------------------------------------------- */

.qm-wallet { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.qm-wallet__item { display: grid; gap: 10px; }

.qm-wallet__face {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    aspect-ratio: 1.586;
    overflow: hidden;
    isolation: isolate;
    padding: 20px 22px;
    color: #fff;
    background:
        radial-gradient(260px 160px at 100% 0, rgba(226, 193, 156, .32), transparent 65%),
        linear-gradient(140deg, #1a1210 0%, #2b1a14 55%, #4a2c20 100%);
    border-radius: 20px;
    box-shadow: 0 28px 50px -30px rgba(26, 18, 16, .8);
}

/* arch watermark */
.qm-wallet__face::after {
    content: "";
    position: absolute;
    top: 18px;
    inset-inline-end: -30px;
    z-index: -1;
    width: 150px;
    height: 220px;
    border: 1px solid rgba(226, 193, 156, .18);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.qm-wallet__face.is-default { box-shadow: 0 0 0 2px #c79a72, 0 28px 50px -30px rgba(26, 18, 16, .8); }
.qm-wallet__chip { width: 44px; height: 32px; background: var(--qm-gloss-gold); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.qm-wallet__badge { position: absolute; top: 20px; inset-inline-end: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; color: #3a2219; background: var(--qm-gloss-gold); border-radius: 999px; }
.qm-wallet__badge i { font-size: 9px; }
.qm-wallet__num { align-self: center; font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; letter-spacing: .12em; text-align: left; }
.qm-wallet__brand { display: flex; justify-content: flex-end; gap: 6px; }
.qm-wallet__brand img { height: 26px; width: auto !important; padding: 4px 6px; background: #fff; border-radius: 6px; box-sizing: content-box; }

.qm-wallet__tools { display: flex; gap: 8px; }
.qm-wallet__tools a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; font-size: 12.5px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; background: #fff; border: 1px solid rgba(161, 120, 92, .25); border-radius: 999px; transition: background-color .2s, border-color .2s; }
.qm-wallet__tools a:hover { background: #fffaf5; border-color: var(--qm-gold-3); }
.qm-wallet__tools .qm-wallet__delete { color: #b0453a !important; }
.qm-wallet__tools .qm-wallet__delete:hover { background: #fdf0ee; border-color: rgba(176, 69, 58, .35); }

.qm-acc-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--qc-muted); }
.qm-acc-note i { font-size: 12px; color: var(--qm-gold-4); }

/* --------------------------------------------------------------------------
   9. Credit
   -------------------------------------------------------------------------- */

.qm-credit { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; }

.qm-credit__face {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 18px;
    min-height: 210px;
    overflow: hidden;
    isolation: isolate;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(260px 160px at 100% 0, rgba(226, 193, 156, .34), transparent 65%),
        linear-gradient(140deg, #1a1210 0%, #2b1a14 55%, #4a2c20 100%);
    border-radius: 22px;
    box-shadow: 0 30px 56px -34px rgba(26, 18, 16, .85);
}

.qm-credit__face::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-end: 22px;
    z-index: -1;
    width: 120px;
    height: 160px;
    border: 1px solid rgba(226, 193, 156, .2);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.qm-credit__label { font-size: 13px; font-weight: 700; color: var(--qm-gold-2); }
.qm-credit__value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    background: var(--qm-gloss-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.qm-credit__value svg { width: .42em; height: .42em; color: var(--qm-gold-2); }
.qm-credit__soon { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--qm-gold-1); border: 1px solid rgba(226, 193, 156, .35); border-radius: 999px; }

.qm-credit__points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.qm-credit__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.7; color: var(--qc-text); }
.qm-credit__points i { display: grid; flex: none; place-items: center; width: 32px; height: 32px; font-size: 13px; color: var(--qm-gold-4); background: #faf3ec; border-radius: 10px; }

.qm-acc-empty--inline { padding: 26px 10px 10px; box-shadow: none; }
.qm-acc-empty--inline .qm-acc-empty__art { width: 60px; height: 60px; font-size: 22px; }

@media (max-width: 991px) {
    .qm-credit { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. Affiliate: designer cards, bank account, modals
   -------------------------------------------------------------------------- */

.qm-acc-flash--info { color: #2f4f73; background: #eef4fb; }
.qm-acc-tab { display: grid; gap: 14px; }
.qm-acc-tab.d-none { display: none !important; }

.qm-partner { display: grid; gap: 16px; padding: 22px 24px; background: #fff; border-radius: 22px; box-shadow: var(--qc-card); }
.qm-partner__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.qm-partner__shop { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.qm-partner__shop > img { flex: none; width: 54px; height: 54px; object-fit: cover; border: 2px solid #e2c19c; border-radius: 50%; }
.qm-partner__shop > span { display: grid; gap: 3px; min-width: 0; }
.qm-partner__shop b { font-size: 16px; font-weight: 800; color: var(--qm-ink); }
.qm-partner__shop small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--qc-muted); }
.qm-partner__shop small img { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }
.qm-partner__shop small i { margin-inline-start: 8px; font-size: 10px; color: #f2b01e; }
.qm-partner__chat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--qm-brown) !important; text-decoration: none; }

.qm-partner__terms { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.75; color: #6b5040; background: #fdf8f3; border-radius: 14px; }
.qm-partner__terms > i { display: grid; flex: none; place-items: center; width: 26px; height: 26px; font-size: 11px; color: #fff; background: var(--qm-gloss-gold); border-radius: 8px; }
.qm-partner__terms b { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 800; color: var(--qm-ink); }
.qm-partner__terms svg { width: .8em; height: .8em; }

.qm-partner__link { display: flex; gap: 8px; padding: 6px; background: #faf6f1; border: 1px dashed rgba(161, 120, 92, .35); border-radius: 14px; }
.qm-partner__link input { flex: 1; min-width: 0; padding: 0 10px !important; font-size: 13px; color: #6b5a50; background: transparent; border: 0; outline: 0; text-overflow: ellipsis; }
.qm-partner__copy { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 13px; font-weight: 700; color: #fff; background: #2b1a14; border: 0; border-radius: 10px; transition: background-color .2s; }
.qm-partner__copy:hover { background: #3d251b; }
.qm-partner__copy.is-done { color: #3a2219; background: var(--qm-gloss-gold); }

.qm-partner__stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; background: var(--qc-line); border-radius: 14px; box-shadow: 0 0 0 1px var(--qc-line); }
.qm-partner__stats > div { display: grid; gap: 4px; padding: 12px 10px; text-align: center; background: #fff; }
.qm-partner__stats dt { font-size: 11.5px; font-weight: 600; color: var(--qc-muted); }
.qm-partner__stats dd { display: inline-flex; justify-content: center; align-items: baseline; gap: 2px; margin: 0; font-size: 16px; font-weight: 800; color: var(--qm-ink); }
.qm-partner__stats dd svg { width: .7em; height: .7em; }
.qm-partner__stats .is-highlight { background: #2b1a14; }
.qm-partner__stats .is-highlight dt { color: var(--qm-gold-2); }
.qm-partner__stats .is-highlight dd { color: #fff; }

.qm-partner__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.qm-partner__foot small { display: flex; align-items: center; gap: 6px; max-width: 420px; font-size: 12px; line-height: 1.6; color: var(--qc-muted); }
.qm-partner__foot small i { color: var(--qm-gold-4); }
.qm-partner__foot > div { display: flex; flex-wrap: wrap; gap: 8px; }
.qm-partner__foot .qm-btn-gold { width: auto; height: 42px; padding: 0 18px; font-size: 13.5px; }

.qm-bank { max-width: 520px; padding: 20px 22px; background: #fff; border-radius: 20px; box-shadow: var(--qc-card); }
.qm-bank__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--qc-line); }
.qm-bank__icon { display: grid; place-items: center; width: 40px; height: 40px; font-size: 15px; color: var(--qm-gold-4); background: #faf3ec; border-radius: 12px; }
.qm-bank__head b { flex: 1; font-size: 15px; font-weight: 800; color: var(--qm-ink); }
.qm-bank__tools { display: flex; gap: 6px; }
.qm-bank__tools button { display: grid; place-items: center; width: 34px; height: 34px; font-size: 13px; color: #8a7466; background: #f7f1eb; border: 0; border-radius: 10px; transition: background-color .2s, color .2s; }
.qm-bank__tools button:hover { color: var(--qm-ink); background: #f2e8de; }
.qm-bank__tools .remove_bank_account:hover { color: #b0453a; background: #fdf0ee; }
.qm-bank__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 14px 0 0; }
.qm-bank__rows .is-wide { grid-column: 1 / -1; }
.qm-bank__rows dt { margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--qc-muted); }
.qm-bank__rows dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--qm-ink); overflow-wrap: anywhere; text-align: start; }

.qm-aff-about p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--qc-text); white-space: pre-line; }

/* modals (bank account, payout request) */
.qm-modal .modal-content { overflow: hidden; border: 0; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(26, 18, 16, .6); }
.qm-modal__head { position: relative; display: flex; align-items: center; gap: 12px; padding: 20px 22px; color: #fff; background: linear-gradient(150deg, #1a1210 0%, #2b1a14 60%, #4a2c20 100%); }
.qm-modal__icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 16px; color: #3a2219; background: var(--qm-gloss-gold); border-radius: 12px; }
.qm-modal__title { margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.qm-modal__sub { margin: 2px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.qm-modal__close { display: grid; place-items: center; width: 34px; height: 34px; margin-inline-start: auto; font-size: 14px; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); border: 0; border-radius: 50%; }
.qm-modal__close:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.qm-modal__body.qm-checkout { padding: 22px; }
.qm-modal__body .qm-field { margin-bottom: 14px; }
.qm-modal__body select.form-control { height: 50px; padding: 0 14px; font-size: 14.5px; background-color: #fffdfb; border: 1px solid #eadfd3; border-radius: 13px; }
.qm-modal__body .alert-danger:empty { display: none; }
.qm-modal__body .alert-danger { margin: 6px 0 0 !important; padding: 0 !important; font-size: 12.5px; font-weight: 600; color: #c0392b; background: none; border: 0; }
.qm-modal__submit { width: 100% !important; margin-top: 6px; }
.qm-modal__money { position: relative; }
.qm-modal__money span { position: absolute; top: 50%; inset-inline-end: 14px; color: var(--qc-muted); transform: translateY(-50%); }
.qm-modal__money svg { width: 14px; height: 14px; }
.qm-modal__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--qc-muted); }
.qm-input--area { height: auto !important; padding: 12px 14px !important; resize: vertical; }
.qm-modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.qm-modal__foot .qm-btn-gold { width: auto; }

@media (max-width: 991px) {
    .qm-partner__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .qm-partner { padding: 18px 16px; }
    .qm-partner__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qm-partner__copy span { display: none; }
    .qm-bank__rows { grid-template-columns: 1fr; }
}

/* payouts */
.qm-payouts { display: grid; gap: 12px; }
.qm-payout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 22px; background: #fff; border-radius: 18px; box-shadow: var(--qc-card); }
.qm-payout__main { display: grid; gap: 4px; min-width: 0; }
.qm-payout__amount { display: inline-flex; align-items: baseline; gap: 4px; font-size: 22px; font-weight: 800; color: var(--qm-ink); }
.qm-payout__amount svg { width: .65em; height: .65em; }
.qm-payout__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--qc-muted); }
.qm-payout__meta i { margin-inline-end: 5px; font-size: 11px; color: var(--qm-gold-4); }
.qm-payout__note { font-size: 12.5px; color: var(--qc-muted); }
.qm-payout__note--warn { display: flex; align-items: center; gap: 6px; color: #a3352a; }
.qm-payout__side { display: grid; justify-items: end; gap: 10px; }
.qm-payout__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.qm-payout__actions .qm-btn-gold { height: 40px; padding: 0 16px; font-size: 13px; }
.qm-payout__wait { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--qc-muted); }
.qm-proof { display: grid; place-items: center; min-height: 200px; padding: 10px; background: #faf6f1; border-radius: 14px; }
.qm-proof img { max-width: 100%; max-height: 60vh; border-radius: 10px; }
.qm-proof__note { margin-bottom: 14px; padding: 12px 14px; background: #fdf8f3; border-radius: 12px; }
.qm-proof__note b { font-size: 13px; color: var(--qm-ink); }
.qm-proof__note p { margin: 4px 0 0; font-size: 13.5px; color: var(--qc-text); }

@media (max-width: 575px) {
    .qm-payout__side { justify-items: start; }
    .qm-payout__actions { justify-content: flex-start; }
}

/* change phone / OTP: sign-in field styling inside an account card */
.qm-acc-split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 28px; }
.qm-acc-steps { display: grid; gap: 4px; margin: 0; padding: 18px; list-style: none; background: #faf6f1; border-radius: 16px; }
.qm-acc-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 13.5px; font-weight: 600; color: #a3917f; }
.qm-acc-steps span { display: grid; flex: none; place-items: center; width: 28px; height: 28px; font-size: 12px; font-weight: 800; color: #a3917f; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #eadfd3; }
.qm-acc-steps .is-current { color: var(--qm-ink); }
.qm-acc-steps .is-current span { color: #3a2219; background: var(--qm-gloss-gold); box-shadow: none; }
.qm-acc-steps .is-done { color: var(--qm-ink); }
.qm-acc-steps .is-done span { color: #fff; background: #2b1a14; box-shadow: none; }
@media (max-width: 767px) { .qm-acc-split { grid-template-columns: 1fr; } .qm-acc-steps { display: none; } }
.qm-auth.qm-acc-embed { padding: 0; background: none; }
.qm-acc-embed .qm-acc-form__foot .qm-btn-gold { min-width: 0; }
.qm-acc-embed--otp { text-align: center; }

/* button rows: the gold button's checkout top margin would drop it below its neighbours,
   and a secondary link next to it takes the same height and corner radius */
.qm-account .qm-btn-gold,
.qm-modal .qm-btn-gold { margin-top: 0; }

.qm-acc-form__foot,
.qm-modal__foot { align-items: center; }

.qm-acc-form__foot .qm-panel__link,
.qm-modal__foot .qm-panel__link { height: 54px; padding: 0 24px; font-size: 14.5px; border-radius: 15px; }

.qm-account__actions { align-items: center; }
.qm-account__actions .qm-btn-gold { height: 44px; padding: 0 18px; font-size: 14px; border-radius: 13px; }
.qm-account__actions .qm-panel__link,
.qm-account__actions .qm-acc-danger { height: 44px; padding: 0 16px; border-radius: 13px; }

.qm-partner__foot > div,
.qm-payout__actions { align-items: center; }
.qm-partner__foot .qm-panel__link,
.qm-payout__actions .qm-panel__link { height: 42px; border-radius: 12px; }
.qm-payout__actions .qm-btn-gold { height: 42px; border-radius: 12px; }

/* shipment tracking */
.qm-shipment {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 28px;
    overflow: hidden;
    isolation: isolate;
    padding: 26px 28px;
    color: #fff;
    background:
        radial-gradient(420px 240px at 100% -10%, rgba(226, 193, 156, .3), transparent 60%),
        linear-gradient(150deg, #1a1210 0%, #2b1a14 55%, #4a2c20 100%);
    border-radius: 22px;
    box-shadow: 0 34px 60px -40px rgba(26, 18, 16, .85);
}
.qm-shipment__main { display: flex; align-items: center; gap: 16px; }
.qm-shipment__icon { display: grid; flex: none; place-items: center; width: 58px; height: 58px; font-size: 22px; color: #3a2219; background: var(--qm-gloss-gold); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.qm-shipment__label { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: var(--qm-gold-2); }
.qm-shipment__status { display: block; font-size: 22px; font-weight: 800; text-transform: capitalize; }
.qm-shipment__date { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.qm-shipment__facts { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 28px; margin: 0; }
.qm-shipment__facts dt { margin-bottom: 3px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.qm-shipment__facts dd { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; }
.qm-shipment__copy { display: grid; place-items: center; width: 30px; height: 30px; font-size: 12px; color: var(--qm-gold-1); background: rgba(255, 255, 255, .08); border: 1px solid rgba(226, 193, 156, .3); border-radius: 9px; }
.qm-shipment__copy.is-done { color: #3a2219; background: var(--qm-gloss-gold); }

@media (max-width: 767px) {
    .qm-shipment { grid-template-columns: 1fr; padding: 22px 18px; }
    .qm-shipment__facts { grid-template-columns: 1fr 1fr; padding-top: 16px; border-top: 1px solid rgba(226, 193, 156, .18); }
}
.qm-shipment__facts dd span { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   11. Notifications
   -------------------------------------------------------------------------- */

.qm-notifs { display: grid; overflow: hidden; background: #fff; border-radius: 22px; box-shadow: var(--qc-card); }
.qm-notif { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 20px; text-decoration: none; transition: background-color .2s; }
.qm-notif + .qm-notif { border-top: 1px solid var(--qc-line); }
.qm-notif:hover { background: #fdf9f5; }
.qm-notif__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; font-size: 16px; border-radius: 14px; }
.qm-notif--order .qm-notif__icon { color: #3a2219; background: var(--qm-gloss-gold); }
.qm-notif--status .qm-notif__icon { color: #6a4bb0; background: #f1ecfb; }
.qm-notif--money .qm-notif__icon { color: #2e7d4f; background: #e9f6ee; }
.qm-notif__body { display: grid; flex: 1; gap: 4px; min-width: 0; }
.qm-notif__body b { font-size: 14.5px; font-weight: 700; line-height: 1.6; color: var(--qm-ink); }
.qm-notif__body small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--qc-muted); }
.qm-notif__dot { flex: none; width: 9px; height: 9px; background: var(--qm-gold-3); border-radius: 50%; box-shadow: 0 0 0 4px rgba(199, 154, 114, .2); }