/* ============================================================================
   Apple Gift — Aurora Glass (default /apple-gift/)
   ========================================================================== */

body.ag-body-v1 { background: #070b12; }

/* ============================================================================
   VARIANT 1 — AURORA GLASS
   ========================================================================== */

.ag-v1 {
    --ag-bg: #070b12;
    --ag-fg: #e9eef7;
    --ag-muted: #8f9cb3;
    --ag-accent: #19e6a8;
    --ag-accent-2: #3ba8ff;
    --ag-ink: #032019;
    --ag-display: 'Space Grotesk', 'Inter', sans-serif;
    --ag-nav-bg: rgba(9, 13, 21, .72);
}

.ag-v1 .ag-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #070b12;
}
.ag-v1 .ag-aurora::before {
    content: '';
    position: absolute;
    inset: -10% -5% auto;
    height: 120vh;
    background: url('/images/apple-gift/ag-aurora.webp') center top / cover no-repeat;
    opacity: .55;
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
}
.ag-v1 .ag-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    animation: ag-drift 18s ease-in-out infinite alternate;
}
.ag-v1 .ag-orb--a { width: 460px; height: 460px; top: -120px; left: -80px; background: #14e3a5; }
.ag-v1 .ag-orb--b { width: 380px; height: 380px; top: 120px; right: -60px; background: #2f7dff; animation-delay: -6s; }
.ag-v1 .ag-orb--c { width: 320px; height: 320px; top: 620px; left: 45%; background: #7b3bff; animation-delay: -11s; }
.ag-v1 .ag-noise {
    position: absolute;
    inset: 0;
    opacity: .3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ag-v1 .ag-halo {
    position: absolute;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25, 230, 168, .32), transparent 62%);
    filter: blur(14px);
    pointer-events: none;
}
.ag-v1 .ag-card { z-index: 1; }

.ag-v1 .ag-hero-grid { align-items: center; }

.ag-v1 .ag-buybox {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: clamp(2.4rem, 6vw, 4rem);
    padding: clamp(1.15rem, 2.8vw, 1.7rem);
    border-radius: 22px;
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 860px) {
    .ag-v1 .ag-buybox {
        grid-template-columns: 18rem minmax(0, 1fr);
        align-items: start;
        gap: 1.6rem 2.2rem;
        padding: 1.6rem 1.8rem;
    }
}
.ag-v1 .ag-buybox-price {
    display: grid;
    align-content: start;
    gap: 1.15rem;
    min-width: 0;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--ag-line);
}
@media (min-width: 860px) {
    .ag-v1 .ag-buybox-price {
        padding: 0 1.8rem 0 0;
        border-bottom: 0;
        border-right: 1px solid var(--ag-line);
    }
}
.ag-v1 .ag-buybox-pick,
.ag-v1 .ag-buybox-pay { display: grid; gap: .18rem; }
.ag-v1 .ag-buybox-pick span,
.ag-v1 .ag-buybox-pay span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ag-muted);
}
.ag-v1 .ag-buybox-pick b {
    font-family: var(--ag-display);
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ag-fg);
}
.ag-v1 .ag-buybox-pay b {
    font-family: var(--ag-display);
    font-size: clamp(1.85rem, 2.1vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--ag-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ag-v1 .ag-amount { display: grid; gap: .9rem; min-width: 0; }
.ag-v1 .ag-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.1rem, 1fr));
    gap: .45rem;
}
.ag-v1 .ag-chip {
    width: 100%;
    min-width: 0;
    padding: .58rem .3rem;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ag-fg);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
}
.ag-v1 .ag-chip.is-on { color: var(--ag-ink); background: var(--ag-accent); border-color: var(--ag-accent); }
.ag-v1 .ag-stepper-field input {
    color: var(--ag-fg);
    -webkit-text-fill-color: var(--ag-fg);
}
.ag-v1 .ag-specs-strip { margin-top: 1.4rem; }
.ag-v1 .ag-sec { border-top-color: rgba(255, 255, 255, .07); }