/* QR Print Shop (wedding-qr-prints.php)
   Styled in the dashboard-new (.dnew) design language - tokens come from
   dashboard-new.css, loaded alongside this file. The checkout page styles
   at the bottom still use the classic global tokens. */

/* ============================================================
   Hero
   ============================================================ */
.qrp-hero {
    background: var(--sage-mist);
    border-bottom: 1px solid var(--hairline-soft);
}

.qrp-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px 0;
}

.qrp-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.qrp-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.qrp-crumb a {
    color: var(--sage-dark);
    text-decoration: none;
}

.qrp-crumb svg {
    color: var(--muted);
}

.qrp-crumb span {
    color: var(--charcoal);
}

.qrp-orders-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--sage-dark);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .qrp-orders-link:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Live order strip - answers "where are my prints?" before any scrolling */
.qrp-live-order {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1200px;
    margin: 18px auto 0;
    padding: 14px 20px;
    background: var(--paper);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--charcoal);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrp-live-order:hover {
        border-color: var(--sage-light);
        box-shadow: var(--shadow-sm);
    }
}

.qrp-live-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sage-wash);
    color: var(--sage-dark);
}

.qrp-live-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qrp-live-copy strong {
    font-weight: 500;
    font-size: 15px;
}

.qrp-live-copy span {
    font-size: 13px;
    color: var(--muted);
}

.qrp-live-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--sage-dark);
}

@media (max-width: 640px) {
    .qrp-live-order {
        margin-top: 14px;
        padding: 12px 14px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .qrp-live-cta {
        width: 100%;
        /* padding, not margin: with border-box the indent stays inside the
           100%, where a margin would push the strip past the viewport */
        margin-left: 0;
        padding-left: 54px;
    }
}

.qrp-hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0 0;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 64px;
    align-items: center;
}

.qrp-hero-copy {
    padding-bottom: 56px;
}

.qrp-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage-dark);
}

.qrp-hero-copy h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(40px, 4.6vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0 0 20px;
    text-wrap: pretty;
}

.qrp-hero-copy h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--sage-dark);
}

.dnew .qrp-hero-lede {
    font-size: 19px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--charcoal-soft);
    max-width: 52ch;
    margin: 0 0 28px;
}

.qrp-hero-art {
    align-self: end;
    display: flex;
    justify-content: center;
}

.qrp-hero-arch {
    width: 380px;
    height: 340px;
    background: var(--sage-wash);
    border-radius: 190px 190px 0 0;
    position: relative;
}

.qrp-fan-card {
    position: absolute;
    display: block;
    border: 4px solid var(--paper);
    background: var(--paper);
    overflow: hidden;
}

.qrp-fan-card img:first-child {
    width: 100%;
    display: block;
}

.qrp-fan-card .qrp-thumb-qr {
    position: absolute;
}

.qrp-fan-card.fan-left {
    left: 34px;
    bottom: 26px;
    width: 128px;
    transform: rotate(-7deg);
    box-shadow: var(--shadow-lg);
}

.qrp-fan-card.fan-mid {
    left: 126px;
    bottom: 40px;
    width: 136px;
    transform: rotate(1deg);
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

.qrp-fan-card.fan-right {
    right: 30px;
    bottom: 26px;
    width: 128px;
    transform: rotate(8deg);
    box-shadow: var(--shadow-lg);
}

/* ============================================================
   Jump nav
   ============================================================ */
.qrp-jump {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.qrp-jump a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrp-jump a:hover {
        background: var(--sage-mist);
        border-color: var(--sage-light);
    }
}

.qrp-jump-price {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
}

.qrp-jump-short {
    display: none;
}

/* ============================================================
   Free vs printed, said once above the range
   ============================================================ */
.qrp-ways {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.qrp-way {
    background: var(--paper);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
}

.dnew .qrp-way h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin: 0 0 6px;
}

.dnew .qrp-way h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--sage-dark);
}

.dnew .qrp-way p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--charcoal-soft);
    margin: 0;
}

@media (max-width: 860px) {
    .qrp-ways {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 20px;
        margin-top: 18px;
    }
}

/* Free download, subordinate to Add to basket in each family */
/* Centred, not baseline-aligned: the link is itself a flex row starting with
   an icon, so its baseline comes from the icon rather than its text and the
   note beside it sits a couple of pixels out */
.dnew .qrp-home-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 22px 0 0;
}

.qrp-home-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sage-dark);
    text-decoration: none;
}

.qrp-home-link svg {
    flex-shrink: 0;
}

.qrp-home-link[aria-disabled="true"] {
    color: var(--muted);
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .qrp-home-link:not([aria-disabled="true"]):hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.qrp-home-note {
    font-size: 13px;
    color: var(--muted);
}


/* ============================================================
   Guest reminders cross-sell, after the range (Claude Design)
   ============================================================ */
.qrp-reminders {
    background: var(--sage-mist);
    border-radius: var(--radius-xl);
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    align-items: center;
}

.qrp-reminders-copy .qrp-eyebrow {
    display: block;
    margin-bottom: 16px;
}

.dnew .qrp-reminders h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0 0 16px;
}

.dnew .qrp-reminders p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--charcoal-soft);
    max-width: 56ch;
    margin: 0 0 24px;
}

.qrp-reminders-points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qrp-reminders-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--charcoal);
}

.qrp-reminders-points svg {
    flex-shrink: 0;
    color: var(--sage-dark);
}

.qrp-reminders-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.qrp-reminders-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

@media (max-width: 860px) {
    .qrp-reminders {
        grid-template-columns: 1fr;
        /* No row gap: the children below carry their own margins, which is
           what keeps the copy tight once the photo is interleaved into it */
        gap: 0;
        padding: 28px 20px;
    }

    /* display: contents lifts the copy's children into the grid so the photo
       can slot in between the eyebrow and the headline (same trick the hero
       uses to put the fan under its title on a phone) */
    .qrp-reminders-copy {
        display: contents;
    }

    .qrp-reminders-copy .qrp-eyebrow {
        order: 1;
        margin-bottom: 14px;
    }

    .qrp-reminders-photo {
        order: 2;
        margin-bottom: 22px;
    }

    .dnew .qrp-reminders h2 {
        order: 3;
        font-size: 28px;
    }

    .dnew .qrp-reminders p {
        order: 4;
    }

    .qrp-reminders-points {
        order: 5;
    }

    .qrp-reminders .qrp-add {
        order: 6;
        display: flex;
        justify-content: center;
    }
}

/* ============================================================
   Just the QR code image (free digital download)
   ============================================================ */
/* Same 1200/32 container as the bands above and the product cards below, so
   every card down the page shares one edge */
.qrp-digital-wrap {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 32px;
}

.qrp-digital {
    padding: 18px 22px;
    background: var(--soft-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 22px;
}

.qrp-digital-thumb {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-sm);
    background: var(--paper);
    overflow: hidden;
}

.qrp-digital-thumb img {
    width: 100%;
    height: 100%;
    /* contain, not cover: a cropped QR is a broken QR */
    object-fit: contain;
    display: block;
}

.qrp-digital-copy {
    /* basis 0 so the text shrinks instead of demanding its full width and
       bumping itself below the QR when the card narrows */
    flex: 1 1 0;
    min-width: 0;
}

.dnew .qrp-digital-copy h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin: 4px 0 4px;
}

.dnew .qrp-digital-copy p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--charcoal-soft);
    max-width: 60ch;
    margin: 0;
}

.qrp-digital-actions {
    display: flex;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.qrp-digital-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sage-dark);
    background: var(--paper);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrp-digital-btn:hover {
        background: var(--sage-mist);
        border-color: var(--sage-light);
    }
}

@media (max-width: 860px) {
    .qrp-digital-wrap {
        margin-top: 14px;
        padding: 0 20px;
    }

    .qrp-digital {
        padding: 18px 20px;
        /* QR and copy stay side by side; only the buttons drop to their own
           row, which they do by being 100% wide */
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 14px 16px;
    }

    .qrp-digital-actions {
        width: 100%;
        margin-left: 0;
    }

    .qrp-digital-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================================
   Product sections
   ============================================================ */
.qrp-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.qrp-family {
    background: var(--soft-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 40px;
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 48px;
    align-items: start;
    scroll-margin-top: 90px;
}

.qrp-media {
    position: relative;
    min-width: 0;
}

.qrp-family-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: var(--sage);
    color: var(--soft-bg);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    pointer-events: none;
}

/* Carousel - one per size, toggled by the size chips */
.qrp-carousel {
    display: none;
}

.qrp-carousel.active {
    display: block;
}

.qrp-carousel-stage {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.qrp-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.qrp-carousel-track::-webkit-scrollbar {
    display: none;
}

.qrp-carousel-track img {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    display: block;
}

/* Overlay controls (zoom + prev/next) on the photo */
.qrp-carousel-zoom,
.qrp-carousel-nav {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(254, 253, 251, 0.82);
    color: var(--charcoal);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out);
}

.qrp-carousel-zoom {
    top: 12px;
    right: 12px;
}

.qrp-carousel-nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.45rem;
    line-height: 1;
    padding-bottom: 3px;
}

.qrp-carousel-nav.prev {
    left: 12px;
}

.qrp-carousel-nav.next {
    right: 12px;
}

@media (hover: hover) and (pointer: fine) {
    .qrp-carousel-zoom:hover,
    .qrp-carousel-nav:hover {
        background: var(--paper);
    }
}

.qrp-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.qrp-carousel-dots button {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    border: none;
    padding: 0;
    background: var(--hairline);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.qrp-carousel-dots button.active {
    background: var(--sage-dark);
    transform: scale(1.25);
}

/* ============================================================
   Configuration column
   ============================================================ */
.qrp-config {
    min-width: 0;
}

.qrp-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.qrp-title-row h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0;
}

.qrp-from-line {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--charcoal-soft);
    margin: 0;
}

.qrp-from-line strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: var(--charcoal);
}

.dnew .qrp-family-intro {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--charcoal-soft);
    max-width: 62ch;
}

.qrp-size-chips {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.qrp-size-chip {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    border: 1px solid var(--hairline);
    background: var(--paper);
    color: var(--charcoal-soft);
}

.qrp-size-chip.selected {
    border-color: var(--sage-dark);
    background: var(--sage-wash);
    color: var(--sage-dark);
}

/* Arrival estimate + wedding urgency */
.qrp-arrival {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    background: var(--sage-mist);
    border-radius: var(--radius-pill);
    padding: 10px 22px 10px 16px;
}

.qrp-arrival svg {
    color: var(--sage-dark);
    flex-shrink: 0;
}

.qrp-arrival-text {
    font-size: 14px;
    color: var(--charcoal-soft);
}

.qrp-arrival-text em {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--charcoal);
}

.qrp-arrival-status {
    display: block;
    font-size: 13px;
    color: var(--sage-dark);
}

.qrp-arrival.tight {
    background: #F7F0DF;
}

.qrp-arrival.tight svg {
    color: #A3781F;
}

.qrp-arrival.tight .qrp-arrival-status {
    color: #A3781F;
    font-weight: 500;
}

.qrp-arrival.late {
    background: #F5E4E1;
    border-radius: var(--radius-lg);
}

.qrp-arrival.late svg {
    color: #B04A42;
}

.qrp-arrival.late .qrp-arrival-status {
    color: #B04A42;
    font-weight: 500;
}

/* Step rows: eyebrow left, italic confirmation right */
.qrp-step-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}

.qrp-step-row .qrp-eyebrow {
    color: var(--muted);
}

.qrp-sel-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--sage-dark);
}

/* Design strip */
.qrp-design-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, 84px);
    gap: 16px;
    margin-top: 14px;
    /* Buttons as grid items self-align oddly when their two-line labels
       differ - pin every tile to the top of its row */
    align-items: start;
}

.qrp-design {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-body);
    position: relative;
    width: 84px;
}

.qrp-thumb-wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--hairline);
    transition: box-shadow var(--dur-base) var(--ease-out);
    background: var(--paper);
}

/* Every design in a family shares the same trim aspect, so natural sizing
   keeps all tiles identical AND the QR overlay geometry exact - a forced
   crop shaved each artwork differently and misaligned the grid */
.qrp-thumb-wrap > img:first-child {
    width: 100%;
    height: auto;
    display: block;
}

.qrp-thumb-wrap .qrp-thumb-qr {
    position: absolute;
}

.qrp-design.selected .qrp-thumb-wrap {
    box-shadow: 0 0 0 2px var(--soft-bg), 0 0 0 4px var(--sage-dark);
}

.qrp-design-name {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.3;
    color: var(--muted);
    font-weight: 400;
    display: block;
    transition: color var(--dur-base) var(--ease-out);
}

.qrp-design.selected .qrp-design-name {
    color: var(--charcoal);
    font-weight: 500;
}

.qrp-design-zoom {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(254, 253, 251, 0.85);
    color: var(--charcoal);
    box-shadow: var(--shadow-xs);
    cursor: zoom-in;
}

/* Quantity tiers - old card page anatomy in the new clothes */
.qrp-tier-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 12px;
    margin-top: 14px;
    padding-top: 8px;
}

.qrp-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--paper);
    padding: 14px 8px 12px;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-body);
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrp-tier:hover {
        border-color: var(--sage-light);
        background: var(--sage-mist);
    }
}

.qrp-tier.recommended {
    border-color: var(--sage-dark);
}

.qrp-tier.selected {
    border-color: var(--sage-dark);
    background: var(--sage-wash);
    box-shadow: 0 0 0 1px var(--sage-dark);
}

.qrp-tier-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.qrp-tier-badge.popular {
    background: var(--sage);
    color: var(--soft-bg);
}

.qrp-tier-badge.value {
    background: var(--sage-wash);
    color: var(--sage-dark);
    border: 1px solid var(--sage-light);
}

.qrp-tier-num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.15;
}

.qrp-tier-unit {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.qrp-tier-price {
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
    margin-top: 4px;
}

.qrp-tier-per {
    font-size: 11px;
    color: var(--muted);
}

.qrp-tier-save {
    font-size: 11px;
    font-weight: 500;
    color: #C89968;
    margin-top: 2px;
}

.dnew .qrp-postage-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.qrp-quantity-stage[hidden] {
    display: none;
}

/* CTA */
.qrp-buy-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.qrp-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding: 13px 28px;
    background: var(--sage);
    color: var(--soft-bg);
    box-shadow: var(--shadow-sage);
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrp-add:hover {
        background: var(--sage-dark);
        color: var(--soft-bg);
    }
}

.qrp-add:active {
    transform: translateY(1px) scale(0.99);
}

.qrp-add:disabled {
    opacity: 0.55;
    cursor: default;
}

.qrp-cta-hint {
    font-size: 13px;
    color: var(--muted);
}

.qrp-auth-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.qrp-auth-cta span {
    font-size: 14px;
    color: var(--charcoal-soft);
}

.qrp-auth-cta span a {
    color: var(--sage-dark);
    text-decoration: underline;
}

/* ============================================================
   Mixed-design check before checkout
   ============================================================ */
.qrp-mix {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.qrp-mix[hidden] {
    display: none;
}

.qrp-mix-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 44, 0.62);
}

/* A column so the list is the only part that scrolls - scrolling the whole box
   pushed the buttons off the bottom of a phone, which is where the decision
   this dialog is asking for actually gets made.
   dvh rather than vh: on iOS Safari vh measures the viewport with the toolbars
   retracted, so 88vh is taller than what you can see and the box ran to the
   full height of the screen. vh first as the fallback for anything without dvh. */
.qrp-mix-box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 460px);
    max-height: 88vh;
    max-height: min(88dvh, 640px);
    background: var(--soft-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    padding: 30px;
    text-align: left;
}

.qrp-mix-box > h2,
.qrp-mix-box > p,
.qrp-mix-actions {
    flex-shrink: 0;
}

.dnew .qrp-mix-box h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0 0 10px;
}

.dnew .qrp-mix-box p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 18px;
}

.qrp-mix-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    /* min-height:0 lets this flex child shrink past its content height, which
       is what makes it scroll instead of stretching the box. */
    overflow-y: auto;
    min-height: 0;
}

.qrp-mix-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline-soft);
}

.qrp-mix-list li:last-child {
    border-bottom: none;
}

.qrp-mix-thumb {
    position: relative;
    flex-shrink: 0;
    height: 54px;
    display: inline-block;
}

.qrp-mix-thumb img:first-child {
    height: 100%;
    width: auto;
    display: block;
}

.qrp-mix-thumb .qrp-thumb-qr {
    position: absolute;
}

.qrp-mix-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qrp-mix-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
}

.qrp-mix-detail {
    font-size: 13px;
    color: var(--muted);
}

.qrp-mix-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.qrp-mix-actions .qrp-add {
    width: 100%;
}

.qrp-mix-back {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--sage-dark);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .qrp-mix-back:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (max-width: 520px) {
    .qrp-mix-box {
        padding: 24px 20px;
        /* Leave the backdrop visible above and below so it still reads as a
           dialog over the page rather than a new screen. */
        max-height: 80vh;
        max-height: 80dvh;
    }
}

/* ============================================================
   Floating basket pill + panel
   ============================================================ */
.qrp-basket {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 50;
}

.qrp-basket-toggle {
    background: var(--sage);
    color: var(--soft-bg);
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-sage);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrp-basket-toggle:hover {
        background: var(--sage-dark);
    }
}

.qrp-basket-count {
    background: var(--soft-bg);
    color: var(--sage);
    border-radius: var(--radius-pill);
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0 5px;
}

.qrp-basket-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 360px;
    max-width: calc(100vw - 40px);
    background: var(--soft-bg);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.qrp-basket-panel.open {
    opacity: 1;
    transform: none;
}

.qrp-basket-panel[hidden] {
    display: none;
}

.qrp-basket-chevron {
    transition: transform var(--dur-base) var(--ease-out);
}

.qrp-basket.panel-open .qrp-basket-chevron {
    transform: rotate(180deg);
}

/* The pill toggles the panel too, but once the panel is open the pill sits
   below it, away from where the eye is - so there is no obvious way out from
   the top of the list. A row rather than an absolutely positioned button, so
   the first item can never collide with it; the negative margins pull it into
   the panel's own corner padding, which is empty anyway, and stop a thumb-sized
   target adding a thumb-sized gap above the basket contents. */
.qrp-basket-panel-head {
    display: flex;
    justify-content: flex-end;
    margin: -12px -10px -4px 0;
}

.qrp-basket-close {
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    /* 40px square. A 24px icon button is fine with a mouse and fiddly with a
       thumb, and this is a corner with room to spare. */
    padding: 11px;
    line-height: 0;
    border-radius: var(--radius-pill);
    transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrp-basket-close:hover {
        color: var(--charcoal);
        background: var(--hairline-soft);
    }
}

.qrp-basket-items {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.qrp-basket-items li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 14px;
}

.qrp-basket-items li.unavailable .qrp-basket-item-detail {
    color: #B04A42;
}

.qrp-basket-item-thumb {
    position: relative;
    flex-shrink: 0;
    height: 52px;
    display: inline-block;
}

.qrp-basket-item-thumb img:first-child {
    height: 100%;
    width: auto;
    display: block;
}

.qrp-basket-item-thumb .qrp-thumb-qr {
    position: absolute;
}

.qrp-basket-item-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qrp-basket-item-title {
    font-weight: 500;
    color: var(--charcoal);
}

.qrp-basket-item-detail {
    font-size: 12px;
    color: var(--muted);
}

.qrp-basket-item-price {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 500;
    color: var(--charcoal);
}

.qrp-basket-item-remove {
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px;
}

.qrp-basket-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: var(--charcoal-soft);
    margin: 0;
}

.qrp-basket-subtotal strong {
    color: var(--charcoal);
}

.dnew .qrp-basket-panel .qrp-postage-note {
    margin: 4px 0 12px;
}

.qrp-basket-checkout {
    width: 100%;
}

/* ============================================================
   Zoom lightbox
   ============================================================ */
.qrp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrp-lightbox[hidden] {
    display: none;
}

.qrp-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 44, 0.72);
}

.qrp-lightbox-body {
    position: relative;
    z-index: 1;
    max-width: min(88vw, 900px);
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrp-lightbox-imgwrap {
    position: relative;
    display: inline-block;
}

.qrp-lightbox-imgwrap img:first-child {
    max-width: min(88vw, 900px);
    max-height: 86vh;
    display: block;
}

.qrp-lightbox-imgwrap .qrp-thumb-qr {
    position: absolute;
}

.qrp-lightbox-close,
.qrp-lightbox-nav {
    position: absolute;
    z-index: 2;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(254, 253, 251, 0.92);
    color: var(--charcoal);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.qrp-lightbox-close {
    top: 0.9rem;
    right: 1.1rem;
    font-size: 1.7rem;
}

.qrp-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.9rem;
}

.qrp-lightbox-nav.prev {
    left: 1rem;
}

.qrp-lightbox-nav.next {
    right: 1rem;
}

.qrp-lightbox-nav[hidden] {
    display: none;
}

/* Below 1080px the four full-name pills don't fit one line. Free-wrapping
   pills looked ragged (2+1+1), and a scroll row reads as clipped with no
   visible scrollbar - so smaller screens get a structured grid of equal
   cells: four across on tablets, 2x2 on phones, name stacked over price. */
@media (max-width: 1080px) {
    .qrp-jump {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        padding: 16px 20px 0;
    }

    .qrp-jump a {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 11px 8px;
        text-align: center;
        border-radius: var(--radius-lg);
        white-space: normal;
    }

    .qrp-jump-full {
        display: none;
    }

    .qrp-jump-short {
        display: inline;
        font-size: 14px;
    }

    .qrp-jump-price {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .qrp-jump {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 860px) {
    .qrp-hero-inner {
        padding: 20px 20px 0;
    }

    .qrp-hero-top {
        justify-content: center;
    }

    .qrp-crumb {
        width: 100%;
        justify-content: flex-start;
        font-size: 11px;
    }

    /* Wraps to its own line under the breadcrumb - keep it left, not centred */
    .qrp-orders-link {
        margin-right: auto;
    }

    /* Stacked hero order: title -> fan -> lede -> points. display:contents
       lifts the copy's children into the flex stack so the art (a sibling
       container on desktop) can slot in right after the headline. */
    .qrp-hero-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-top: 24px;
        text-align: center;
    }

    .qrp-hero-copy {
        display: contents;
    }

    .qrp-hero-copy h1 {
        order: 1;
        font-size: 34px;
        line-height: 1.12;
        margin-bottom: 18px;
    }

    .qrp-hero-art {
        order: 2;
        align-self: center;
        margin-bottom: 24px;
    }

    .dnew .qrp-hero-lede {
        order: 3;
        font-size: 16px;
        margin: 0 auto 18px;
        max-width: 34ch;
    }

    .qrp-hero-arch {
        width: 300px;
        height: 250px;
        border-radius: 150px 150px 0 0;
    }

    .qrp-fan-card {
        border-width: 3px;
    }

    .qrp-fan-card.fan-left { left: 24px; bottom: 18px; width: 98px; }
    .qrp-fan-card.fan-mid { left: 97px; bottom: 28px; width: 106px; }
    .qrp-fan-card.fan-right { right: 22px; bottom: 18px; width: 98px; }

    .qrp-main {
        padding: 20px 16px 80px;
        gap: 24px;
    }

    .qrp-family {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
        overflow: hidden;
        scroll-margin-top: 80px;
    }

    .qrp-carousel-stage {
        border-radius: 0;
    }

    .qrp-carousel-track img {
        aspect-ratio: 4 / 3;
    }

    .qrp-carousel-dots {
        margin: 10px 0;
    }

    .qrp-config {
        padding: 14px 20px 28px;
    }

    .qrp-title-row h2 {
        font-size: 24px;
    }

    .qrp-from-line strong {
        font-size: 20px;
    }

    .qrp-family-intro {
        font-size: 14px;
        margin-top: 10px;
    }

    .qrp-size-chips {
        margin-top: 18px;
    }

    .qrp-size-chip {
        padding: 11px 18px;
    }

    .qrp-arrival {
        display: flex;
        border-radius: var(--radius-lg);
        padding: 12px 16px;
        margin-top: 18px;
    }

    .qrp-step-row {
        margin-top: 24px;
    }

    .qrp-design-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 12px;
    }

    .qrp-design {
        width: auto;
    }

    .qrp-design-name {
        font-size: 11px;
        margin-top: 7px;
    }

    .qrp-tier-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 16px;
    }

    .qrp-buy-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 24px;
    }

    .qrp-add {
        width: 100%;
        padding: 15px 28px;
    }

    .qrp-cta-hint {
        text-align: center;
        font-size: 12px;
        min-height: 16px;
    }

    .qrp-auth-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .qrp-basket {
        right: 16px;
        bottom: 16px;
    }
}

/* ==========================================================================
   Checkout page (qr-print-checkout.php) - dnew design language
   ========================================================================== */

.qrpc-hero .qrp-hero-inner {
    padding-bottom: 36px;
}

.qrpc-hero-copy {
    padding-top: 28px;
}

.qrpc-hero-copy h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 3.6vw, 44px);
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0 0 8px;
}

.qrpc-hero-copy p {
    font-size: 17px;
    font-weight: 300;
    color: var(--charcoal-soft);
    margin: 0;
}

.qrpc-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 32px 96px;
}

.qrpc-layout {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 32px;
    align-items: start;
}

.qrpc-summary,
.qrpc-address {
    background: var(--soft-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 32px;
}

.qrpc-summary h2,
.qrpc-address h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0 0 18px;
}

.qrpc-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.qrpc-summary-head h2 {
    margin-bottom: 0;
}

.qrpc-edit-basket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--sage-dark);
    text-decoration: none;
}

.qrpc-edit-basket svg {
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .qrpc-edit-basket:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.qrpc-items {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.qrpc-items li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 14px;
}

.qrpc-item-thumb {
    position: relative;
    flex-shrink: 0;
    height: 58px;
    display: inline-block;
}

.qrpc-item-thumb img:first-child {
    height: 100%;
    width: auto;
    display: block;
}

.qrpc-item-thumb .qrp-thumb-qr {
    position: absolute;
}

.qrpc-item-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qrpc-item-title {
    font-weight: 500;
    color: var(--charcoal);
}

.qrpc-item-detail {
    font-size: 12px;
    color: var(--muted);
}

.qrpc-item-price {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 500;
    color: var(--charcoal);
}

.qrpc-delivery h3 {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 20px 0 10px;
}

.qrpc-shipping-option {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--paper);
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.qrpc-shipping-option.selected {
    border-color: var(--sage-dark);
    background: var(--sage-wash);
    box-shadow: 0 0 0 1px var(--sage-dark);
}

.qrpc-shipping-option input {
    accent-color: var(--sage-dark);
}

.qrpc-shipping-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qrpc-shipping-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--charcoal);
}

.qrpc-shipping-when {
    font-size: 12px;
    color: var(--muted);
}

.qrpc-shipping-price {
    margin-left: auto;
    font-weight: 500;
    white-space: nowrap;
    color: var(--charcoal);
}

.qrpc-loading {
    color: var(--muted);
    font-size: 14px;
}

.qrpc-totals {
    margin: 20px 0 0;
}

.qrpc-totals div {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
}

.qrpc-totals dt {
    color: var(--muted);
}

.qrpc-totals dd {
    margin: 0;
    font-weight: 500;
    color: var(--charcoal);
}

.qrpc-totals .qrpc-grand {
    border-top: 1px solid var(--hairline-soft);
    margin-top: 6px;
    padding-top: 12px;
    font-size: 16px;
}

.qrpc-totals .qrpc-grand dt {
    color: var(--charcoal);
    font-weight: 500;
}

.qrpc-totals .qrpc-grand dd {
    font-family: var(--font-display);
    font-size: 22px;
}

.qrpc-address .form-group {
    margin-bottom: 16px;
}

.qrpc-address label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 6px;
}

.qrpc-hint {
    font-weight: 400;
    color: var(--muted);
    font-size: 12px;
}

.qrpc-address input,
.qrpc-address select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--charcoal);
    background: var(--paper);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.qrpc-address input:focus,
.qrpc-address select:focus {
    outline: none;
    border-color: var(--sage-dark);
    box-shadow: 0 0 0 3px rgba(139, 157, 131, 0.15);
}

.dnew .qrpc-error {
    color: #B04A42;
    font-size: 14px;
    margin: 0 0 12px;
}

.qrpc-pay {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding: 15px 28px;
    background: var(--sage);
    color: var(--soft-bg);
    box-shadow: var(--shadow-sage);
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrpc-pay:hover {
        background: var(--sage-dark);
    }
}

.qrpc-pay:active {
    transform: translateY(1px) scale(0.99);
}

.qrpc-pay:disabled {
    opacity: 0.55;
    cursor: default;
}

.dnew .qrpc-secure {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin: 12px 0 0;
}

@media (max-width: 860px) {
    .qrpc-main {
        padding: 20px 16px 80px;
    }

    .qrpc-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .qrpc-summary,
    .qrpc-address {
        padding: 22px 20px;
    }
}

/* ============================================================
   Your orders (my-qr-prints.php)
   ============================================================ */
.qrpo-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qrpo-empty {
    background: var(--soft-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 48px 32px;
    text-align: center;
}

.dnew .qrpo-empty h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0 0 10px;
}

.dnew .qrpo-empty p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 46ch;
    margin: 0 auto 24px;
}

.qrpo-order {
    background: var(--soft-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 28px 32px;
}

.qrpo-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dnew .qrpo-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.015em;
    color: var(--charcoal);
    margin: 0;
}

.dnew .qrpo-ref {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 4px 0 0;
}

.qrpo-status {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--sage-wash);
    color: var(--sage-dark);
    font-size: 13px;
    font-weight: 500;
}

.qrpo-status-shipped {
    background: var(--sage);
    color: var(--soft-bg);
}

.qrpo-status-delivered {
    background: var(--sage-mist);
    color: var(--charcoal-soft);
}

.qrpo-status-failed,
.qrpo-status-cancelled {
    background: #FBEDEC;
    color: #A4423E;
}

/* Four-step track. The line is drawn behind the dots by the ::before on each
   step after the first, so it never overshoots the ends. */
.qrpo-track {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 26px 0 22px;
    padding: 0;
}

.qrpo-track li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

.qrpo-track li::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 50%;
    left: -50%;
    height: 1px;
    background: var(--hairline-soft);
}

.qrpo-track li:first-child::before {
    display: none;
}

.qrpo-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--soft-bg);
    border: 1px solid var(--hairline);
    z-index: 1;
}

.qrpo-track li.done .qrpo-dot,
.qrpo-track li.current .qrpo-dot {
    background: var(--sage);
    border-color: var(--sage);
}

.qrpo-track li.done::before,
.qrpo-track li.current::before {
    background: var(--sage-light);
}

.qrpo-track li.current .qrpo-step {
    color: var(--charcoal);
    font-weight: 500;
}

.dnew .qrpo-note {
    font-size: 14px;
    color: var(--charcoal-soft);
    margin: 0 0 18px;
}

.dnew .qrpo-note-alert {
    color: #A4423E;
}

.qrpo-items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hairline-soft);
}

.qrpo-items li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 14px;
}

.qrpo-thumb {
    position: relative;
    flex-shrink: 0;
    height: 58px;
    display: inline-block;
}

.qrpo-thumb img:first-child {
    height: 100%;
    width: auto;
    display: block;
}

.qrpo-thumb .qrp-thumb-qr {
    position: absolute;
}

.qrpo-item-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qrpo-item-title {
    font-weight: 500;
    color: var(--charcoal);
}

.qrpo-item-detail {
    font-size: 12px;
    color: var(--muted);
}

.qrpo-item-price {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 500;
    color: var(--charcoal);
}

.qrpo-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
}

.qrpo-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
}

.qrpo-meta strong {
    font-weight: 500;
    color: var(--charcoal);
}

.qrpo-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline);
    background: var(--soft-bg);
    color: var(--charcoal);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .qrpo-track-btn:hover {
        background: var(--sage-mist);
        border-color: var(--sage-light);
    }
}

.qrpo-again {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

@media (max-width: 640px) {
    .qrpo-main {
        padding: 20px 16px 80px;
        gap: 16px;
    }

    .qrpo-order {
        padding: 22px 20px;
    }

    .qrpo-head {
        flex-direction: column;
        gap: 10px;
    }

    .qrpo-track li {
        font-size: 11px;
    }

    .qrpo-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .qrpo-track-btn {
        justify-content: center;
    }
}