/* Gift card SFH2026 — tokens and shapes borrowed from contact/sfh2026 (Figma
   560:326), which is the closest designed page. Overrides module.css. */

.sfh-giftcard { padding: clamp(48px, 5vw, 80px) 20px; background: #fff; color: #000; }
.sfh-giftcard .cms2-giftcard-in { max-width: 1040px; }

.sfh-giftcard .cms2-giftcard-heading {
    margin: 0 0 24px;
    font-size: clamp(34px, 4.6vw, 60px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.sfh-giftcard .cms2-giftcard-intro {
    margin: 0 auto 40px;
    font-size: 16px;
    color: rgba(0,0,0,.7);
}

/* shared pill button (landing cards + form submit) */
.sfh-giftcard .cms2-giftcard-button {
    gap: 12px;
    padding: 15px 25px;
    border-radius: 100px;
    background: #be202e;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.sfh-giftcard .cms2-giftcard-button:not([disabled]):hover { background: #9d1a26; }
.sfh-giftcard .sfh-btn-arrow { display: inline-flex; align-items: center; }
.sfh-giftcard .sfh-btn-arrow svg { width: 30px; height: 10px; display: block; }
.sfh-giftcard .sfh-btn-cart { display: inline-flex; align-items: center; }
.sfh-giftcard .sfh-btn-cart svg { width: 22px; height: 22px; display: block; }

/* landing: photo on top, grey info panel below, like the product cards */
.sfh-giftcard .cms2-giftcard-options { gap: 24px; }
.sfh-giftcard .cms2-giftcard-option { background: #f4f4f4; text-align: left; }
.sfh-giftcard .cms2-giftcard-option img { margin: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.sfh-giftcard .cms2-giftcard-optbody { padding: 28px 28px 32px; }
.sfh-giftcard .cms2-giftcard-opttitle {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}
.sfh-giftcard .cms2-giftcard-opttext { margin: 0 0 24px; font-size: 16px; color: rgba(0,0,0,.7); }

/* form panel */
.sfh-giftcard-panel { background: #f4f4f4; padding: 50px; }
.sfh-giftcard .cms2-giftcard-form { gap: 44px; }
.sfh-giftcard .cms2-giftcard-stephead {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #898989;
}

.sfh-giftcard .cms2-giftcard-design {
    padding: 0;
    border: 3px solid transparent;
    background: #fff;
    opacity: .7;
}
.sfh-giftcard .cms2-giftcard-design:hover,
.sfh-giftcard .cms2-giftcard-design:has(input:checked),
.sfh-giftcard .cms2-giftcard-design.is-selected { opacity: 1; border-color: #be202e; }

.sfh-giftcard .cms2-giftcard-label { font-size: 14px; font-weight: 600; color: #000; }
.sfh-giftcard .cms2-giftcard-field input,
.sfh-giftcard .cms2-giftcard-field textarea {
    padding: 14px 18px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 100px;
    font-size: 16px;
    color: #000;
    background: #fff;
}
.sfh-giftcard .cms2-giftcard-field textarea { border-radius: 20px; min-height: 140px; }
/* opacity:1 so Firefox paints the placeholder black like Chrome (see contact) */
.sfh-giftcard .cms2-giftcard-field input::placeholder,
.sfh-giftcard .cms2-giftcard-field textarea::placeholder { color: rgba(0,0,0,.55); opacity: 1; }
.sfh-giftcard .cms2-giftcard-field input:focus,
.sfh-giftcard .cms2-giftcard-field textarea:focus { outline: none; border-color: #be202e; }
.sfh-giftcard .cms2-giftcard-pair > .cms2-giftcard-label { padding-top: 16px; }

.sfh-giftcard .cms2-giftcard-note { font-size: 14px; color: rgba(0,0,0,.6); opacity: 1; }
.sfh-giftcard .cms2-giftcard-error { color: #be202e; }
.sfh-giftcard .cms2-giftcard-field input[aria-invalid="true"],
.sfh-giftcard .cms2-giftcard-field textarea[aria-invalid="true"] { border-color: #be202e; }
.sfh-giftcard .cms2-giftcard-unavailable { font-size: 14px; color: rgba(0,0,0,.6); opacity: 1; }

@media (max-width: 820px) {
    .sfh-giftcard-panel { padding: 40px 40px; }   /* tablet */
    .sfh-giftcard .cms2-giftcard-form { gap: 36px; }
}
@media (max-width: 640px) {
    .sfh-giftcard-panel { padding: 24px 20px; }   /* phone */
    .sfh-giftcard .cms2-giftcard-pair > .cms2-giftcard-label { padding-top: 0; }
    .sfh-giftcard .cms2-giftcard-designlist { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}