/* ============================================================================
   Apple Gift — Clay Play (/apple-gift/v/10)
   ========================================================================== */

body.ag-body-v10 { background: #fdf6e8; }

/* ============================================================================
   VARIANT 10 — CLAY PLAY
   ========================================================================== */

.ag-v10 {
    --ag-bg: #fdf6e8;
    --ag-bg-2: #fff;
    --ag-fg: #443a5e;
    --ag-muted: #857a9c;
    --ag-accent: #7c5cff;
    --ag-accent-2: #ff8fab;
    --ag-ink: #ffffff;
    --ag-line: rgba(124, 92, 255, .16);
    --ag-line-2: rgba(124, 92, 255, .28);
    --ag-surface: rgba(255, 255, 255, .8);
    --ag-surface-2: #fff;
    --ag-track: #ece5ff;
    --ag-radius: 28px;
    --ag-radius-sm: 22px;
    --ag-pill: 999px;
    --ag-font: 'Fredoka', 'Inter', system-ui, sans-serif;
    --ag-display: 'Fredoka', 'Inter', sans-serif;
    --ag-nav-bg: rgba(255, 251, 243, .8);
    --ag-drop-bg: #fff;
    --ag-modal-bg: #fff;
    --ag-shadow: 12px 14px 34px rgba(120, 100, 170, .18);
}

.ag-v10 .ag-clay-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ag-v10 .ag-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; animation: ag-drift 16s ease-in-out infinite alternate; }
.ag-v10 .ag-blob--a { width: 420px; height: 420px; top: -80px; left: -100px; background: #cdbcff; }
.ag-v10 .ag-blob--b { width: 340px; height: 340px; top: 200px; right: -80px; background: #ffd4c2; animation-delay: -5s; }
.ag-v10 .ag-blob--c { width: 300px; height: 300px; top: 700px; left: 30%; background: #bdf3dc; animation-delay: -9s; }

.ag-v10 .ag-h1 { font-family: var(--ag-display); font-weight: 600; letter-spacing: -.02em; }
.ag-v10 .ag-brand-mark { border-radius: 14px; background: linear-gradient(140deg, #7c5cff, #ff8fab); color: #fff; box-shadow: 4px 5px 12px rgba(124, 92, 255, .35); }
.ag-v10 .ag-brand-name i { color: #ff8fab; }
.ag-v10 .ag-nav { border-bottom: 0; }
.ag-v10 .ag-nav.is-scrolled { box-shadow: 0 10px 30px rgba(120, 100, 170, .14); }
.ag-v10 .ag-nav-link { border-radius: 999px; font-weight: 500; }
.ag-v10 .ag-lang-btn,
.ag-v10 .ag-nav-tg,
.ag-v10 .ag-burger { border-radius: 14px; border-color: var(--ag-line); background: rgba(255, 255, 255, .7); }
.ag-v10 .ag-nav-mob a { color: var(--ag-fg); }

.ag-v10 .ag-clay-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 980px) { .ag-v10 .ag-clay-grid { grid-template-columns: 1fr 1fr; } }
.ag-v10 .ag-clay-copy > * + * { margin-top: 1rem; }
.ag-v10 .ag-badge { border-radius: 999px; background: #fff; border-color: var(--ag-line); box-shadow: 4px 5px 14px rgba(120, 100, 170, .16); text-transform: none; letter-spacing: .02em; }
.ag-v10 .ag-trust li { background: #fff; border-color: var(--ag-line); box-shadow: 3px 4px 12px rgba(120, 100, 170, .14); }

.ag-v10 .ag-clay-art { position: relative; display: grid; place-items: center; }
.ag-v10 .ag-clay-art img { width: min(100%, 460px); border-radius: 42px; box-shadow: 16px 20px 44px rgba(120, 100, 170, .24); }
.ag-v10 .ag-clay-card { position: absolute; bottom: -6%; left: -4%; width: min(70%, 300px); animation: ag-bob 6s ease-in-out infinite; }
.ag-v10 .ag-clay-card .ag-card { width: 100%; }

.ag-v10 .ag-clay-buy {
    margin-top: clamp(3rem, 7vw, 4.5rem);
    padding: clamp(1.3rem, 3vw, 2rem);
    border-radius: 34px;
    background: #fff;
    box-shadow: 16px 20px 44px rgba(120, 100, 170, .18), -8px -8px 22px #fff;
    display: grid;
    gap: 1rem;
}
@media (min-width: 820px) {
    .ag-v10 .ag-clay-buy {
        grid-template-columns: 18rem minmax(0, 1fr);
        align-items: start;
        gap: 2rem;
    }
}
.ag-v10 .ag-clay-price { display: grid; gap: 1.15rem; min-width: 0; }
.ag-v10 .ag-buybox-pick,
.ag-v10 .ag-buybox-pay { display: grid; gap: .18rem; }
.ag-v10 .ag-buybox-pick span,
.ag-v10 .ag-buybox-pay span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ag-muted);
}
.ag-v10 .ag-buybox-pick b {
    font-family: var(--ag-display);
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ag-fg);
}
.ag-v10 .ag-buybox-pay b {
    font-family: var(--ag-display);
    font-size: clamp(1.7rem, 2.2vw, 2.2rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ag-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ag-v10 .ag-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.1rem, 1fr));
    gap: .45rem;
}
.ag-v10 .ag-chip {
    min-width: 0;
    width: 100%;
    padding: .5rem .3rem;
    font-size: .88rem;
    color: var(--ag-fg);
}
.ag-v10 .ag-chip {
    border-radius: 999px;
    background: #fff;
    border-color: var(--ag-line);
    box-shadow: 4px 5px 12px rgba(120, 100, 170, .16);
}
.ag-v10 .ag-chip.is-on { background: linear-gradient(140deg, #7c5cff, #a78bfa); color: #fff; border-color: transparent; }
.ag-v10 .ag-cta {
    border-radius: 999px;
    background: linear-gradient(100deg, #7c5cff, #ff8fab);
    color: #fff;
    box-shadow: 8px 12px 26px rgba(124, 92, 255, .35);
}
.ag-v10 .ag-cta:hover { transform: translateY(-3px) scale(1.01); }
.ag-v10 .ag-range { height: 12px; }
.ag-v10 .ag-range::-webkit-slider-thumb { width: 30px; height: 30px; border-width: 6px; box-shadow: 4px 6px 14px rgba(124, 92, 255, .4); }
.ag-v10 .ag-range::-moz-range-thumb { width: 26px; height: 26px; border-width: 6px; }

.ag-v10 .ag-clay-specs { margin-top: 2rem; padding: .6rem 1.4rem 1.2rem; border-radius: 28px; background: #fff; box-shadow: 12px 14px 30px rgba(120, 100, 170, .14); }
.ag-v10 .ag-spec { border-bottom-color: rgba(124, 92, 255, .12); }
.ag-v10 .ag-sec { border-top-color: rgba(124, 92, 255, .14); }
.ag-v10 .ag-sec-title { font-family: var(--ag-display); font-weight: 600; }
.ag-v10 .ag-use,
.ag-v10 .ag-step,
.ag-v10 .ag-faq details { background: #fff; border-color: transparent; box-shadow: 8px 10px 24px rgba(120, 100, 170, .14); }
.ag-v10 .ag-use:hover { transform: translateY(-4px) rotate(-.6deg); }
.ag-v10 .ag-step-n { color: var(--ag-accent); opacity: .14; }
.ag-v10 .ag-foot { border-top: 0; }