/* E-gift: homepage slide-in (A/B test arm 'egift') and the gift.html unwrapping page.
   Uses the landing.css tokens (--sun, --cream, --charcoal…). */

/* ---------- Slide-in ---------- */
.egift-offer {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: min(360px, calc(100vw - 32px));
    padding: 22px 22px 18px;
    background: #fff;
    border: 2px solid var(--sun);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(41, 37, 36, 0.18);
    color: var(--charcoal);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.egift-offer.is-visible { transform: none; opacity: 1; }
.egift-offer[hidden] { display: none; }

.egift-offer__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--charcoal-soft);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.egift-offer__close:hover,
.egift-offer__close:focus-visible { background: var(--cream-deep); }

.egift-offer__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--sun);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.egift-offer__row { display: flex; gap: 14px; align-items: center; margin: 12px 0 10px; }
.egift-offer__cover {
    flex: none;
    width: 64px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(41, 37, 36, 0.2);
}
.egift-offer__title { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.3; }
.egift-offer__text { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--charcoal-soft); }

.egift-offer__form { display: flex; gap: 8px; margin-top: 8px; }
.egift-offer__form[hidden] { display: none; }
.egift-offer__form input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1.5px solid var(--cream-edge);
    border-radius: 999px;
    font: inherit;
    font-size: 0.95rem;
}
.egift-offer__form input:focus { outline: none; border-color: var(--sun-hover); box-shadow: 0 0 0 3px var(--sun-glow); }
.egift-offer__form .btn-sun { flex: none; padding: 11px 16px; font-size: 0.9rem; white-space: nowrap; }

.egift-offer__message { margin: 8px 0 0; font-size: 0.9rem; }
.egift-offer__message.error { color: #b91c1c; }
.egift-offer__message.success { font-weight: 600; }
.egift-offer__open { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--charcoal); }
.egift-offer__fineprint { margin: 8px 0 0; font-size: 0.75rem; color: var(--charcoal-soft); }

@media (max-width: 520px) {
    .egift-offer { right: 16px; left: 16px; bottom: 16px; width: auto; }
    .egift-offer__form { flex-direction: column; }
}

/* ---------- gift.html ---------- */
.gift-page { padding: 40px 16px 64px; text-align: center; }
.gift-page__kicker {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charcoal-soft);
}
.gift-page__title { margin: 0 0 28px; font-size: clamp(1.8rem, 5vw, 2.4rem); }

/* The wrapped present: a button that "opens" on tap. */
.gift-box {
    position: relative;
    display: block;
    width: 220px;
    height: 200px;
    margin: 0 auto 12px;
    border: 0;
    background: none;
    cursor: pointer;
}
.gift-box__base,
.gift-box__lid {
    position: absolute;
    left: 50%;
    border-radius: 10px;
    background: var(--sun);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.06);
}
.gift-box__base { bottom: 0; width: 180px; height: 130px; transform: translateX(-50%); }
.gift-box__lid {
    top: 32px;
    width: 204px;
    height: 44px;
    background: var(--sun-hover);
    transform: translateX(-50%);
    transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.gift-box__ribbon-v,
.gift-box__ribbon-h { position: absolute; background: #f43f5e; }
.gift-box__base .gift-box__ribbon-v { left: 50%; top: 0; bottom: 0; width: 22px; transform: translateX(-50%); }
.gift-box__lid .gift-box__ribbon-v { left: 50%; top: 0; bottom: 0; width: 24px; transform: translateX(-50%); }
.gift-box__bow {
    position: absolute;
    left: 50%;
    top: -26px;
    font-size: 40px;
    line-height: 1;
    transform: translateX(-50%);
}
.gift-box:hover .gift-box__lid,
.gift-box:focus-visible .gift-box__lid { transform: translateX(-50%) translateY(-6px) rotate(-3deg); }
.gift-box__tap { position: absolute; left: 0; right: 0; bottom: -30px; font-weight: 700; color: var(--charcoal-soft); }

.gift-page.is-open .gift-box__lid { transform: translateX(-50%) translateY(-90px) rotate(-18deg); }
.gift-page.is-open .gift-box { height: 0; margin: 0 auto; opacity: 0; transition: opacity 0.4s 0.4s, height 0.4s 0.4s; overflow: hidden; }

.gift-reveal { display: none; }
.gift-page.is-open .gift-reveal { display: block; animation: gift-rise 0.6s ease both; }
@keyframes gift-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.gift-reveal__cover {
    display: block;
    width: min(260px, 70vw);
    height: auto;
    margin: 8px auto 20px;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(41, 37, 36, 0.22);
}
.gift-reveal__heading { margin: 0 0 8px; font-size: 1.35rem; }
.gift-reveal__text { max-width: 30rem; margin: 0 auto 20px; color: var(--charcoal-soft); line-height: 1.55; }
.gift-reveal__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gift-reveal__secondary { align-self: center; font-weight: 700; color: var(--charcoal); }

.gift-quote {
    max-width: 30rem;
    margin: 32px auto;
    padding: 18px 22px;
    border-radius: 16px;
    background: var(--cream-deep);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
}

.gift-upsell {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(41, 37, 36, 0.1);
    text-align: left;
}
.gift-upsell img { width: 100%; height: auto; border-radius: 12px; }
.gift-upsell h2 { margin: 0 0 8px; font-size: 1.25rem; }
.gift-upsell p { margin: 0 0 16px; color: var(--charcoal-soft); line-height: 1.5; }

@media (max-width: 560px) {
    .gift-upsell { grid-template-columns: 1fr; text-align: center; }
    .gift-upsell img { max-width: 240px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .egift-offer, .gift-box__lid, .gift-page.is-open .gift-box { transition: none; }
    .gift-page.is-open .gift-reveal { animation: none; }
}