/* ==========================================================================
   Gift voucher — page-scoped, linked only by gift-voucher.html (house style:
   a rule for one page goes in that page's own sheet). Started 2026-10-02.
   The FAQ and the form fields come from support.css and blocks.css.
   ========================================================================== */
/* ---- the offer: the picture, and the card to buy it ---- */
.voucher-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    /* gap: var(--space-8) */
    align-items: stretch;
    max-width: 60rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .voucher-offer {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);

        /* gap: var(--space-12) */
    }
}

.voucher-image {
    display: block;
    width: 100%;
    max-width: 18rem;
    height: auto;
    margin: 0 auto;
}

.voucher-card {
    text-align: left;
}

.voucher-card h2 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-2xl);
    line-height: 1.2;
    color: var(--c-blue-900);
}

.voucher-card .price-text {
    margin: 0 0 var(--space-4);
}

/* The quantity field, as it was before the stepper (Zlatan, 2026-10-04: "return
   #voucher-quantity back"): a plain number field, a short one. */
.voucher-card .w-input {
    width: 8rem;
}

/* ---- the quantity stepper: [-] 1 [+]  Total €76 ----
   NOT USED BY ANY PAGE since the same day (gift-voucher.html has its plain
   field back); kept with initQuantityStepper() in blocks.js, as unused rules
   are in this project, in case a cart line wants one.
   Square buttons the height of the field, the number between them centred and
   typeable (the browser's own spin arrows are gone: these are the control). */
.quantity-stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.quantity-stepper .w-input {
    width: 4.5rem;
    padding-right: var(--space-2);
    padding-left: var(--space-2);
    text-align: center;
    appearance: textfield;
}

.quantity-stepper .w-input::-webkit-inner-spin-button,
.quantity-stepper .w-input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.quantity-stepper__button {
    width: var(--space-12);
    height: var(--space-12);
    padding: 0;
    border: 1px solid var(--c-border);
    background-color: var(--c-white);
    color: var(--c-blue-900);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.quantity-stepper__button:hover {
    border-color: var(--c-green);
    background-color: var(--c-green);
    color: var(--c-white);
}

.quantity-stepper__button:focus-visible {
    outline: 2px solid var(--c-orange);
    outline-offset: 2px;
}

/* At one there is nothing fewer to take: dimmed, but still a button, so a
   press can be answered (never `disabled`). */
.quantity-stepper__button.is-min {
    opacity: .4;
    cursor: default;
}

.quantity-stepper__button.is-min:hover {
    border-color: var(--c-border);
    background-color: var(--c-white);
    color: var(--c-blue-900);
}

.quantity-stepper__total {
    margin-left: var(--space-3);
    color: var(--c-blue-900);
}

.voucher-card .submit-row {
    display: block;
}

/* ---- how it works: three steps, numbered with the checkout's disc ---- */
.voucher-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: voucher-step;
}

@media (min-width: 768px) {
    .voucher-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.voucher-steps li {
    text-align: center;
}

/* The number is drawn here, so the markup is only the words: the list is
   ordered, and a number is the one mark that says "this, then that". */
.voucher-steps li::before {
    counter-increment: voucher-step;
    content: counter(voucher-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto var(--space-4);
    border: 1px solid var(--c-orange);
    border-radius: 50%;
    color: var(--c-orange);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-lg);
}

.voucher-steps h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-lg);
}

.voucher-steps p {
    margin: 0;
}

/* ==========================================================================
   redeem-voucher.html — the page that takes the code (data-redeem-state:
   enter | invalid | used | locked | accepted; every case's copy is in the
   markup and CSS shows one, house style: state is an attribute)
   ========================================================================== */
[data-redeem-state] [data-redeem-part] {
    display: none;
}

[data-redeem-state="enter"] [data-redeem-part~="enter"],
[data-redeem-state="invalid"] [data-redeem-part~="invalid"],
[data-redeem-state="used"] [data-redeem-part~="used"],
[data-redeem-state="locked"] [data-redeem-part~="locked"],
[data-redeem-state="accepted"] [data-redeem-part~="accepted"],
[data-redeem-state="chart"] [data-redeem-part~="accepted"] {
    display: block;
}

/* chart is the accepted page with the birth-details panel open over it, so
   it shows what accepted shows; the panel itself is the order overlay. */
/* The code in the hero, shown back: smaller than it was as a panel's
   headline, and in the page's white. */
.confirm-hero .redeem-shown {
    font-size: var(--fs-2xl);
    color: var(--c-white-soft);
}

/* ---- the covers, on the light ground ----
   .cover-gallery is made for the dark ones; on cream the words need the
   light set's colours. */
#redeem-covers {
    color: var(--c-text);
    text-shadow: none;
}

#redeem-covers .product-heading {
    color: var(--c-blue-900);
}

.redeem-card {
    max-width: var(--max-form-width);
    margin: 0 auto;
    padding-top: 0;
    text-align: left;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* TWO COLUMNS FROM 768px (Zlatan, 2026-10-13: "image rotator (only 01.webp
   of every cover) on the left, existing content on the right"). The card
   widens to the container so the form keeps its own width in the right
   half; the photos rotate on their own (data-photo-auto) through every
   cover's 01, the photo that stands for a cover everywhere it is small.
   On a phone the photo goes: stacked above the field it would push the one
   thing on the page below the fold. */
.redeem-card__row {
    align-items: center;
}

.redeem-card__photos .card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 767px) {
    .redeem-card__photos {
        display: none;
    }
}

@media (min-width: 768px) {
    .redeem-card {
        max-width: none;
    }

    .redeem-card__photos {
        padding-right: var(--space-4);
    }

    .redeem-card__form {
        padding-left: var(--space-4);
    }
}

/* The message that explains why the code did not work: a rule in the
   page's orange, in the card's own ground, so it reads as part of the form. */
.redeem-message {
    margin: 0 0 var(--space-6);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--c-orange);
    background-color: var(--c-orange-50);
    color: var(--c-blue-950);
    font-weight: 600;
}

/* A code is read off a page, so the letters are set apart. */
.redeem-code {
    font-family: var(--font-heading-fat);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.redeem-code::placeholder {
    font-family: var(--font-body);
    font-weight: var(--fw-light);
    letter-spacing: 0;
    text-transform: none;
}

.redeem-shown {
    font-family: var(--font-heading-fat);
    font-size: var(--fs-3xl);
    letter-spacing: 3px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   cart.html — a gift voucher line (linked there for this alone)
   ========================================================================== */
.cart-line[data-voucher-state="off"] {
    display: none;
}

/* The chart block of a book is "Made for" and a person; a voucher has no
   chart, so the same place says in words who it is for. Same size as the
   facts line it stands in for. */
.cart-line__note {
    margin: var(--space-2) 0 0;
    line-height: var(--lh-snug);
}

/* The picture is a card on a transparent ground, not a square cover: it sits
   in its own space rather than being cropped to it. */
.cart-line[data-voucher-state] .cart-line__image img {
    object-fit: contain;
    background-color: transparent;
}

/* ==========================================================================
   checkout-success.html — books, vouchers, or a book paid with a voucher
   (data-order-variant="books|vouchers|redeemed", 2026-10-02; redeemed 2026-10-04)
   ========================================================================== */
[data-order-variant="books"] [data-order-part]:not([data-order-part~="books"]),
[data-order-variant="vouchers"] [data-order-part]:not([data-order-part~="vouchers"]),
[data-order-variant="redeemed"] [data-order-part]:not([data-order-part~="redeemed"]) {
    display: none;
}

/* The voucher's picture is a card on a transparent ground, not a square
   cover: shown whole, not cropped to the recap's square. */
.recap-line img.recap-line__voucher {
    object-fit: contain;
    background-color: transparent;
}