/* Offer single page (r19 "Giữ trang", audit 7.9 option B): loads after single-store.css and reuses its shared offer card,
   code box, sections and steps. Tokens from ccu-tokens.css only (r22); the shared card reads --purple/--ink/--muted/--line. */
.ccu-offer-page{--purple:var(--ccu-brand);--purple-soft:var(--ccu-brand-soft);--ink:var(--ccu-ink);--muted:var(--ccu-muted);--line:var(--ccu-line);--radius:var(--ccu-radius)}
.ccu-offer-page .ccu-store-shell{max-width:880px}
.ccu-offer-page-head{display:flex;align-items:center;gap:var(--ccu-space-3);background:var(--ccu-surface);border:1px solid var(--ccu-line);border-radius:var(--ccu-radius-lg);padding:var(--ccu-space-3) var(--ccu-space-4);margin:var(--ccu-space-2) 0 var(--ccu-space-3)}
.ccu-offer-page-head .ccu-store-logo{position:relative;flex:0 0 72px;width:72px;height:72px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--ccu-line);border-radius:var(--ccu-radius);background:var(--ccu-surface);text-decoration:none}
.ccu-offer-page-head .ccu-store-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ccu-surface)}
.ccu-offer-page-head .ccu-logo-fallback{font-size:28px;font-weight:var(--ccu-fw-bold);color:var(--ccu-brand)}
.ccu-offer-page-heading{min-width:0}
.ccu-offer-page-heading .ccu-eyebrow{margin:0 0 var(--ccu-space-1)!important;text-transform:uppercase}
.ccu-offer-page-heading .ccu-eyebrow a{color:var(--ccu-brand);text-decoration:none}
.ccu-offer-page-heading h1{font-size:26px;line-height:1.25;margin:0;color:var(--ccu-ink);overflow-wrap:anywhere}
.ccu-offer-page-labels{margin:var(--ccu-space-2) 0 0}
.ccu-offer-verified{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border:1px solid var(--ccu-success-line);border-radius:var(--ccu-radius-pill);background:var(--ccu-success-soft);color:var(--ccu-success);font-size:12px;font-weight:var(--ccu-fw-semibold)}
.ccu-offer-page-notice{margin:0 0 var(--ccu-space-3);padding:var(--ccu-space-2) var(--ccu-space-3);border:1px solid var(--ccu-line-strong);border-radius:var(--ccu-radius);background:var(--ccu-surface-2);color:var(--ccu-ink);font-weight:var(--ccu-fw-semibold)}
.ccu-offer-page-notice a{color:var(--ccu-brand)}
/* The page H1 already names the offer: the hero card keeps its h3 (the code popup reads it) for screen readers only. */
.ccu-offer-page-card .ccu-offer h3{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ccu-offer-page-card .ccu-offer{border-color:var(--ccu-brand-line)}
.ccu-offer-page-more{margin-top:var(--ccu-space-4)}
.ccu-offer-page-more .ccu-section-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--ccu-space-2)}
.ccu-offer-page-more .ccu-section-heading h2{font-size:20px;margin:0}
.ccu-offer-page-more .ccu-section-heading a{display:inline-flex;align-items:center;min-height:44px;color:var(--ccu-brand);font-weight:var(--ccu-fw-semibold)}
.ccu-offer-page-empty{color:var(--ccu-muted)}
.ccu-offer-page-empty a{color:var(--ccu-brand)}
.ccu-offer-page-text h2,.ccu-offer-page-store h2,.ccu-offer-page .ccu-how-to h2{font-size:18px;margin:0 0 var(--ccu-space-2)}
.ccu-offer-page-text p{margin:0 0 6px;color:var(--ccu-muted);line-height:1.6}
.ccu-offer-page-store p{margin:0;line-height:1.6}
@media (max-width:640px){
.ccu-offer-page-head{padding:var(--ccu-space-3);gap:12px}
.ccu-offer-page-head .ccu-store-logo{flex-basis:56px;width:56px;height:56px}
.ccu-offer-page-heading h1{font-size:21px}
.ccu-offer-page .ccu-steps{grid-template-columns:1fr}
}