/* Gift card — structure shared by every layout. Layout CSS loads after this. */

.cms2-giftcard { padding: clamp(48px, 6vw, 88px) 20px; }
.cms2-giftcard-in { max-width: 880px; margin: 0 auto; }
.cms2-giftcard-heading { margin: 0 0 16px; text-align: center; }
.cms2-giftcard-intro { margin: 0 auto 40px; max-width: 680px; text-align: center; line-height: 1.6; }
.cms2-giftcard-intro p { margin: 0 0 1em; }

/* landing */
.cms2-giftcard-options {
    display: grid;
    /* capped + centred: a site selling one kind of card gets one card, not a banner */
    grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
    justify-content: center;
    gap: 32px;
}
.cms2-giftcard-option { text-align: center; }
.cms2-giftcard-optimg { display: block; }
.cms2-giftcard-option img { display: block; width: 100%; height: auto; margin-bottom: 20px; }
.cms2-giftcard-opttitle { margin: 0 0 8px; }
.cms2-giftcard-opttext { margin: 0 0 20px; line-height: 1.5; }

/* form */
.cms2-giftcard-form { display: flex; flex-direction: column; gap: 40px; }
.cms2-giftcard-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.cms2-giftcard-stephead { margin: 0 0 20px; padding: 0; }

.cms2-giftcard-designlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.cms2-giftcard-design {
    display: block;
    padding: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s, border-color .15s;
}
.cms2-giftcard-design img { display: block; width: 100%; height: auto; }
.cms2-giftcard-design:hover,
.cms2-giftcard-design:has(input:checked) { opacity: 1; border-color: currentColor; }
.cms2-giftcard-design.is-selected { opacity: 1; border-color: currentColor; }   /* browsers without :has() */
.cms2-giftcard-design:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }

.cms2-giftcard-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cms2-giftcard-field input,
.cms2-giftcard-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.25);
    font: inherit;
    background: #fff;
    color: inherit;
}
.cms2-giftcard-field textarea { min-height: 110px; resize: vertical; }
.cms2-giftcard-amount { max-width: 320px; }

.cms2-giftcard-pair {
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    gap: 12px 16px;
    align-items: start;
    margin-bottom: 16px;
}
.cms2-giftcard-pair > .cms2-giftcard-label { padding-top: 13px; }
.cms2-giftcard-label { font-size: 14px; font-weight: 600; }
.cms2-giftcard-message { margin-top: 8px; }
.cms2-giftcard-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; opacity: .75; }

.cms2-giftcard-error { margin: 8px 0 0; font-size: 13px; color: #b42318; }
.cms2-giftcard-field .cms2-giftcard-error { margin: 0; }
.cms2-giftcard-field input[aria-invalid="true"],
.cms2-giftcard-field textarea[aria-invalid="true"] { border-color: #b42318; }

.cms2-giftcard-submit { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cms2-giftcard-unavailable { margin: 0; font-size: 14px; opacity: .75; }
.cms2-giftcard-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border: 0;
    background: var(--cms2-accent, #121212);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.cms2-giftcard-button[disabled] { opacity: .45; cursor: not-allowed; }
.cms2-giftcard-status { margin: 0; font-size: 14px; }

@media (max-width: 640px) {
    .cms2-giftcard-pair { grid-template-columns: 1fr; }
    .cms2-giftcard-pair > .cms2-giftcard-label { padding-top: 0; }
    .cms2-giftcard-amount { max-width: none; }
    .cms2-giftcard-submit { align-items: stretch; }
    .cms2-giftcard-button { justify-content: center; }
}