/* Customer club: stable first fold, theme-derived colours, no entrance movement. */
#rewardsScreen{max-width:760px;margin-inline:auto;padding-bottom:36px}
#rewardsScreen .reward-page-kicker{font-size:10px;font-weight:750;letter-spacing:.16em;color:var(--primary-text,var(--olive));margin-top:14px}
#rewardsScreen #rewardGreeting{font-size:clamp(30px,6vw,40px)!important;line-height:1.18;margin:10px 0!important;min-height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rewardsScreen #rewardWelcome{margin:0;line-height:1.5;font-size:14px;min-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#rewardsScreen #rewardLoadStatus{height:32px;padding-top:7px;font-size:11px;line-height:14px;color:var(--muted);overflow:hidden}
#rewardsScreen #rewardSpotlight{height:320px;margin:0 0 16px}
body[data-theme] #rewardsScreen .reward-card.reward-spotlight{height:320px;min-height:320px;margin:0;padding:20px;display:grid;grid-template-rows:32px 62px 40px 54px 48px 16px;gap:5px;border:1px solid color-mix(in srgb,var(--olive) 22%,var(--line));border-radius:min(var(--v4-radius,20px),24px);box-shadow:0 12px 32px color-mix(in srgb,var(--olive) 8%,transparent);background:radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--accent,var(--olive)) 23%,transparent),transparent 62%),linear-gradient(135deg,color-mix(in srgb,var(--olive) 10%,var(--white)),var(--white));color:var(--surface-ink,var(--ink));overflow:hidden}
#rewardsScreen .reward-hero-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
#rewardsScreen .reward-kicker{font-size:10px;letter-spacing:.1em;color:var(--primary-text,var(--olive));font-weight:800}
#rewardsScreen .reward-spotlight .reward-emblem{width:32px;height:32px;font-size:26px;margin:0;border-radius:50%;background:var(--olive);color:var(--on-primary)}
#rewardsScreen .reward-spotlight h2{font-size:clamp(25px,5vw,32px);line-height:1.08;margin:0;align-self:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#rewardsScreen .reward-hero-description{font-size:13px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#rewardsScreen .reward-hero-progress{display:flex;align-items:center;gap:12px;min-width:0}
#rewardsScreen .reward-hero-progress>div:last-child{min-width:0}
#rewardsScreen .reward-hero-progress strong{display:block;font-size:13px;margin-bottom:4px}
#rewardsScreen .reward-hero-progress span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.4;color:var(--surface-muted,var(--muted))}
#rewardsScreen .reward-ring{position:relative;flex:0 0 54px;width:54px;height:54px;color:var(--primary-text,var(--olive))}
#rewardsScreen .reward-ring svg{width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:7}
#rewardsScreen .ring-track{stroke:color-mix(in srgb,var(--olive) 14%,var(--white))}
#rewardsScreen .ring-value{stroke:var(--olive);stroke-linecap:round}
#rewardsScreen .reward-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-variant-numeric:tabular-nums}
#rewardsScreen .reward-focus-action{min-height:48px;margin:0;border-radius:var(--v4-radius,12px);align-items:center;font-size:14px;padding:12px 16px}
#rewardsScreen .reward-update,#rewardsScreen .reward-update:not(:empty){height:16px;font-size:10px;line-height:16px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-theme] #rewardsScreen .reward-summary{margin:0 0 18px;gap:10px}
body[data-theme] #rewardsScreen .reward-summary>div{height:110px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:var(--v4-radius,16px);box-shadow:none;background:var(--white)}
#rewardsScreen .reward-summary span{font-size:11px;display:block;white-space:nowrap}
#rewardsScreen .reward-summary b{font-size:30px;line-height:36px;font-variant-numeric:tabular-nums;margin:3px 0;color:var(--surface-ink,var(--ink));overflow:hidden;text-overflow:ellipsis}
#rewardsScreen .reward-summary small{font-size:9px;display:block;color:var(--surface-muted,var(--muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rewardsScreen .reward-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--v4-radius,14px);margin:0 0 16px;padding:4px;gap:3px;overflow:visible}
#rewardsScreen .reward-tabs button{height:44px;border-radius:var(--v4-radius,10px);font-size:11px;padding:6px;color:var(--surface-muted,var(--muted));background:transparent}
#rewardsScreen .reward-tabs button.on{background:var(--olive);color:var(--on-primary)}
#rewardsScreen .reward-tabs button:disabled{opacity:.6}
#rewardsScreen #rewardContent{min-height:202px}
body[data-theme] #rewardsScreen #rewardContent .reward-card{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--v4-radius,16px);padding:20px;background:var(--white);box-shadow:none}
#rewardsScreen #rewardContent .reward-card h3{font-size:23px;line-height:1.2;margin:12px 0;overflow-wrap:anywhere}
#rewardsScreen .reward-card-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--v4-radius,10px);background:color-mix(in srgb,var(--olive) 12%,var(--white));color:var(--primary-text,var(--olive));font-size:22px;margin-bottom:12px}
body[data-theme] #rewardsScreen #rewardContent .reward-prize{border-color:color-mix(in srgb,var(--olive) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--olive) 5%,var(--white)),var(--white))}
#rewardsScreen #rewardContent .cta{min-height:46px;width:100%;margin-top:14px;font-size:13px}
#rewardsScreen .reward-empty{min-height:202px}
#rewardsScreen .reward-empty p{font-size:13px;line-height:1.6;margin:0}
#rewardsScreen .reward-state{background:color-mix(in srgb,var(--olive) 12%,var(--white));color:var(--primary-text,var(--olive));text-transform:none;padding:8px 10px}
#rewardsScreen .reward-stamps{gap:6px;margin:14px 0}
#rewardsScreen .reward-stamps span{width:32px;height:32px;font-size:12px}
#rewardsScreen .progress-track{background:color-mix(in srgb,var(--olive) 13%,var(--white))}
#rewardsScreen .reward-condition{font-size:12px;line-height:1.6}
#rewardsScreen .ux-loyalty-guide{border-radius:var(--v4-radius,16px);box-shadow:none}
#rewardsScreen #rewardIdentifyBox{border-radius:var(--v4-radius,16px);background:var(--white);box-shadow:none;margin-top:16px}
#rewardsScreen .skeleton-line{display:block;height:14px;border-radius:6px;background:color-mix(in srgb,var(--olive) 12%,var(--white));width:85%;animation:reward-loading 1.5s ease-in-out infinite alternate}
#rewardsScreen .skeleton-line.short{width:45%}
#rewardsScreen .skeleton-line.title{height:40px;width:78%;align-self:center}
#rewardsScreen .skeleton-line.action{height:48px;width:100%}
#rewardsScreen .reward-list-skeleton{height:202px;display:flex;flex-direction:column;gap:18px}
#rewardsScreen .reward-summary .skeleton-line{height:36px;margin-top:3px}
body[data-theme="artpop"] #rewardsScreen .reward-card.reward-spotlight{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--accent)}
body[data-theme="editorial"] #rewardsScreen .reward-card.reward-spotlight,body[data-theme="classic"] #rewardsScreen .reward-card.reward-spotlight{box-shadow:none}
@keyframes reward-loading{from{opacity:.45}to{opacity:.85}}
@media(min-width:700px){#rewardsScreen .reward-summary>div{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){#rewardsScreen .skeleton-line{animation:none}}
/* Passport stamps represent the configured purchase/product target only. */
body[data-theme] #rewardsScreen .reward-card.reward-spotlight.has-passport,body[data-theme] #rewardsScreen .reward-card.reward-spotlight.is-unlocked{padding:16px;grid-template-rows:26px 54px 24px 100px 44px 16px;gap:4px}
#rewardsScreen .has-passport .reward-hero-description,#rewardsScreen .is-unlocked .reward-hero-description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:12px}
#rewardsScreen .reward-passport{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
#rewardsScreen .passport-stamps{display:grid;grid-template-columns:repeat(var(--stamp-columns),minmax(0,1fr));gap:7px;max-width:380px;width:100%;margin-inline:auto;justify-items:center}
#rewardsScreen .passport-stamp{display:grid;place-items:center;width:36px;height:36px;border:1px dashed color-mix(in srgb,var(--olive) 35%,var(--line));border-radius:50%;background:var(--white);color:var(--surface-muted,var(--muted));font-size:13px;font-weight:700;position:relative}
#rewardsScreen .passport-stamp.is-earned{border:2px solid var(--olive);background:var(--olive);color:var(--on-primary);font-size:24px;transform:rotate(-10deg)}
#rewardsScreen .passport-stamp.is-next{border:2px solid var(--olive);box-shadow:0 0 0 3px color-mix(in srgb,var(--olive) 12%,transparent);color:var(--primary-text,var(--olive))}
#rewardsScreen .passport-caption{display:block;text-align:center;font-size:10px;line-height:16px;color:var(--surface-muted,var(--muted));font-weight:650}
#rewardsScreen .reward-ticket{display:flex;align-items:center;gap:16px;border:1px dashed color-mix(in srgb,var(--olive) 50%,var(--line));padding:14px;background:color-mix(in srgb,var(--olive) 8%,var(--white));border-radius:min(var(--v4-radius,12px),20px);margin:8px 0}
#rewardsScreen .reward-ticket>span{font-size:40px;color:var(--primary-text,var(--olive))}
#rewardsScreen .reward-ticket strong{font-size:15px;display:block;line-height:1.3}
#rewardsScreen .reward-ticket small{font-size:11px;display:block;margin-top:5px;color:var(--surface-muted,var(--muted))}
#rewardsScreen .passport-stamp.stamp-earned-now{animation:stamp-arrive .6s ease-out 1}
@keyframes stamp-arrive{0%{opacity:.2;transform:scale(1.35) rotate(-25deg)}65%{opacity:1;transform:scale(.94) rotate(-8deg)}100%{transform:scale(1) rotate(-10deg)}}
@media(prefers-reduced-motion:reduce){#rewardsScreen .passport-stamp.stamp-earned-now{animation:none}}