/* light-2026 desktop layer — loads >=768px via media-gated link + scoped body.ptshell.
   Mobile (promotions.css) untouched. Animated dark-orange hero → white 2026 card; the
   colourful campaign/deal tiles are marketing art (keep their gradients) but re-grid to
   3-4 up on the wide canvas. Orange accent preserved throughout. */
body.ptshell{background:#F4F5F7}

/* content column rhythm */
body.ptshell main.page{max-width:var(--pt-content-max);margin-inline:auto;padding:8px 0 40px}

/* --- animated dark-orange hero → light-2026 white card (aligns with centred content) --- */
body.ptshell .hero{
  max-width:1180px;margin:0 auto 20px;border-radius:20px;padding:24px 26px;color:var(--ink);
  background:#fff;border:1px solid #E8EAEF;box-shadow:0 22px 48px -30px rgba(20,25,35,.28);animation:none
}
body.ptshell .hero .blob{display:none}          /* neutralise dark-hero decorations */
body.ptshell .hero .eb{color:var(--sun-deep)}   /* eyebrow → orange accent (#EF5F06) */
body.ptshell .hero h1{color:var(--ink)}
body.ptshell .hero p{color:var(--ink-2);opacity:1}
/* voucher pill: white-on-orange chip → solid orange CTA on the white card */
body.ptshell .hero .vlink{
  background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;
  box-shadow:0 12px 24px -14px rgba(239,95,6,.7)
}

/* cards: hairline + soft shadow */
body.ptshell main.page>.card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}

/* campaign tiles: 2-up (mobile) → 4-up on the wide canvas */
body.ptshell .camps{grid-template-columns:repeat(4,1fr);gap:14px}
/* promo deals: single column → 2-up */
body.ptshell .deals{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (min-width:1280px){
  body.ptshell main.page{max-width:var(--pt-content-max)}
  body.ptshell .hero{max-width:1240px}
}