/* gift — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* --- gift card ----------------------------------------------------------- */
.gift__inner {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center;
}


.gift__lead { color: var(--muted); font-size: 1.05rem; }


.gift__points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }


.gift__points li { position: relative; padding-left: 1.4rem; color: var(--ink); }


.gift__points li::before {
    content: '✦'; position: absolute; left: 0; top: 0; color: var(--accent);
}

/* The ticket itself is typography and tokens, not an image: change the palette
   and it changes with it, with no new asset file. */
.gift__ticket {
    background: var(--primary); color: var(--primary-ink);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}


.gift__ticket::after {
    /* a thin gold rule inside — the small detail that reads as expensive */
    content: ''; position: absolute; inset: .6rem;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: calc(var(--radius) - .4rem);
    pointer-events: none;
}


.gift__ticket-brand {
    font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .08em;
}


/* The amount is the ticket's one number: the ink checked against --primary,
   not --accent (free, and may match the ticket's own colour). */
.gift__ticket-amount { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--primary-ink); }


/* .9: on the brand band it holds wherever the button label does (.75 did not). */
.gift__ticket-note { font-size: .85rem; opacity: .9; }

.gift__form { display: flex; align-items: end; gap: .75rem; margin-top: 1.25rem; }


.gift__qty-label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .25rem; }


.gift__qty {
    width: 4.5rem; padding: .7rem; border: 1px solid var(--line);
    border-radius: var(--radius-small); background: var(--surface); color: var(--ink);
}

@media (max-width: 900px) {
    .gift__inner      { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 560px) {
    .gift__ticket-amount { font-size: 2.4rem; }
}