/* Campaign skin for the offers app, matching the home page: aubergine, lime and ivory. Loaded last. */
:root{
 --aubergine:#24123e;--aubergine-2:#341b57;--aubergine-3:#4a2b74;--lime:#ece2ff;--lime-2:#e2d6ff;--ivory:#f5f0e7;--ivory-2:#ece4d6;
 --ink:#24123e;--purple:#24123e;--purple-dark:#140a24;--paper:#f5f0e7;--line:#ddd2c2;--muted:#64566f;--coral:#ece2ff;
 --display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-family:var(--sans);color:var(--ink)}
a{color:var(--aubergine)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--aubergine-3);outline-offset:3px}
h1,h2,h3,.sectionhead h2,.offers-heading h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em}

/* Header */
header{background:var(--ivory)}
.brand{font-family:var(--sans);font-weight:800;letter-spacing:-.025em;color:var(--aubergine)}
.mark{background:var(--aubergine);color:var(--lime);border-radius:11px}
.brand-logo{display:block;height:44px;width:auto}
.brand-word{color:#6334b5;font:800 28px/1 var(--sans,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);letter-spacing:-.04em}
@media(max-width:600px){.brand-logo{height:38px}.brand-word{font-size:24px}}
.region{border-color:var(--line)}
.pill{background:#fffdf8;border-color:var(--line)}

/* Search-first hero */
.discover-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--aubergine);color:var(--ivory);border-radius:30px;padding:clamp(26px,4.5vw,56px);margin:0 0 28px}
.discover-hero::before{content:"";position:absolute;z-index:-1;width:min(520px,90vw);aspect-ratio:1;right:-12%;top:-45%;border-radius:50%;border:2px solid #ece2ff40;box-shadow:inset 0 0 0 60px #4a2b7433}
.discover-kicker{margin:0 0 10px;font:800 clamp(18px,2vw,24px)/1.2 var(--display);color:var(--lime)}
.discover-hero .need-form{margin:0}
.discover-hero .need-form>label{font:800 clamp(42px,7vw,96px)/.92 var(--display);letter-spacing:-.025em;margin-bottom:24px;color:var(--ivory)}
.discover-hero .need-input-row{background:var(--ivory);border:0;border-radius:999px;padding:6px;max-width:760px}
.discover-hero .need-input-row:focus-within{box-shadow:0 0 0 4px var(--lime)}
.discover-hero .need-input-row input{color:var(--aubergine);font-size:16px;padding:12px 18px}
.discover-hero .need-input-row input:focus{outline:none}
.discover-hero .need-input-row button{background:#6334b5;color:#fff;border-radius:999px;padding:12px 22px;font-weight:800}
.discover-hero .need-input-row button:focus-visible{outline-color:var(--aubergine)}
.discover-hero .need-form>p{color:#d9cfe8;font-size:13px;margin-top:12px}
.need-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.need-pills button{min-height:42px;padding:8px 16px;border-radius:999px;border:1.5px solid #ffffff40;background:transparent;color:var(--ivory);font-weight:700;font-size:14px;transition:background .2s,color .2s,border-color .2s}
.need-pills button:hover{background:var(--lime);border-color:var(--lime);color:var(--aubergine)}
.discover-hero :focus-visible{outline-color:var(--lime)}
.discover-entries{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:22px;border-top:1px dashed #ffffff33}
.discover-entries a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:16px;background:#ffffff12;color:var(--ivory);text-decoration:none;font-weight:700;font-size:14px;transition:background .2s}
.discover-entries a:hover{background:#ffffff24}
.discover-entries svg{width:18px;height:18px}
.discover-entries .count{background:var(--lime);color:var(--aubergine);font-weight:800}

/* Spotlight highlights */
.media-hero{border-radius:28px;background:var(--aubergine-2);box-shadow:none}
.spotlight-stage{background:radial-gradient(circle at 95% 0%,#4a2b74 0,transparent 50%),var(--aubergine-2)}
.spotlight-stage.spotlight-tone-1{background:radial-gradient(circle at 95% 0%,#5d3b8c 0,transparent 50%),#2b1648}
.spotlight-stage.spotlight-tone-2{background:radial-gradient(circle at 95% 0%,#3b1f63 0,transparent 50%),#1d0f33}
.spotlight-title{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.spotlight-cta{color:var(--lime)}

/* Sections and lists */
.disclosure{color:var(--muted)}
.sectionhead h2{font-size:clamp(28px,3.4vw,40px)}
.offers-heading h1{font-size:clamp(36px,5vw,60px);line-height:.95}
.brand-chip .logo{border-color:var(--line);box-shadow:none}
.brand-chip:hover .logo{box-shadow:0 0 0 3px var(--lime)}
.search input,select{border-color:var(--line);background:#fffdf8}
.categories button,.chip{border-color:var(--line);background:#fffdf8}
.categories button[aria-pressed=true]{background:var(--aubergine);border-color:var(--aubergine);color:#fff}
.status{background:#fffdf8;border-color:var(--line)}
.status button{background:#6334b5;color:#fff}

/* Cards */
.card{background:#fffdf8;border-color:var(--line);border-radius:22px}
.card:hover{border-color:var(--aubergine)}
.grid>.card:nth-child(n) .cover{background:var(--ivory-2);border-bottom-color:var(--line)}
.offer-bundle{border-radius:24px;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.offer-bundle:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px var(--aubergine)}
.offer-bundle .cover{background:#fffdf8!important}
.offer-bundle .cardbody h3,.card h3{font-family:var(--display);font-weight:800}
.offer-bundle .details,.details{border-radius:999px}
.offer-bundle .details{background:#6334b5;color:#fff}
.details:hover{background:var(--ivory-2)}
.offer-bundle .details:hover{background:var(--aubergine-3)}
.save{background:var(--ivory-2);color:var(--aubergine);border-radius:999px}
.save[aria-pressed=true]{background:var(--lime);color:var(--aubergine)}
.tag{background:var(--ivory-2);color:var(--aubergine)}
.tag.aff{background:#f3e3ff;color:var(--aubergine)}
.tag.new{background:var(--lime);color:var(--aubergine)}
.shopgrid .card,.shopgrid .card:nth-child(3n+2),.shopgrid .card:nth-child(3n+3){border-top:5px solid var(--aubergine)}
.shopgrid .card:nth-child(3n+2){border-top-color:var(--lime)}
.shopgrid .card:nth-child(3n+3){border-top-color:var(--aubergine-3)}
.visit{background:#6334b5;color:#fff;border-radius:999px}
.visit:hover{background:var(--aubergine-3)}

/* Floating navigation */
.tabs{background:#24123ef2;border-color:#ffffff1f}
.tabs a{color:var(--ivory)}
.tabs a[aria-current=page]{background:var(--lime);color:var(--aubergine)}
.tabs a:focus-visible{outline-color:var(--lime)}
.pinching .tabs{background:var(--aubergine)}

/* Dialogs */
dialog{border-radius:26px;color:var(--aubergine);background:#fffdf8}
dialog::backdrop{background:#140a24b3}
dialog h2{font-family:var(--display);font-weight:800}
.cta{background:#6334b5;color:#fff;border-radius:999px}
.cta.retailer{background:#fffdf8;color:var(--aubergine);border-color:var(--aubergine)}
.dialogsave{background:var(--ivory-2);color:var(--aubergine);border-radius:999px}
.dialogsave[aria-pressed=true]{background:var(--lime);color:var(--aubergine)}
.code{background:var(--ivory);border-color:var(--aubergine-3)}
.codewrap button{border-radius:999px;border-color:var(--aubergine);color:var(--aubergine);font-weight:700}
.codewrap .copy-status[data-state=ok]{color:#2c5e17}

/* About + footer */
.about{border-radius:26px}
footer{color:var(--muted)}

@media(max-width:600px){
 .discover-hero{border-radius:24px;padding:24px 20px}
 .discover-hero::before{top:-30%;right:-40%}
 .discover-hero .need-input-row{border-radius:22px}
 .discover-hero .need-input-row button{width:100%}
 .need-pills{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}
 .need-pills::-webkit-scrollbar{display:none}
 .need-pills button{flex:none}
 .discover-entries a{flex:1 1 140px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.offer-bundle,.need-pills button,.discover-entries a{transition:none}.offer-bundle:hover{transform:none}}

/* Luminous website background (scoped to .pocket-web, which the native app shell never gets). */
.pocket-web{--brand:#6334b5;--brand-deep:#4a2590;--card:#fffdf8;--muted:#5d4f6b}
.pocket-web body{background:
  radial-gradient(60vw 60vw at 98% 2%,#c8f3e2b3,transparent 62%),
  radial-gradient(46vw 46vw at -8% 40%,#ffd9c4a6,transparent 64%),
  radial-gradient(52vw 52vw at 104% 72%,#d9c8ffb3,transparent 62%),
  linear-gradient(172deg,#ece2ff 0%,#f4e9ff 28%,#fdebe4 62%,#ffe6d6 86%,#f3ecff 100%)}
.pocket-web header{background:#fffdf8e6}
.pocket-web button:focus-visible,.pocket-web a:focus-visible,.pocket-web input:focus-visible,.pocket-web select:focus-visible,.pocket-web summary:focus-visible,.pocket-web .discover-hero :focus-visible{outline-color:var(--brand)}

/* Search hero: an opaque ivory card with purple type */
.pocket-web .discover-hero{background:var(--card);color:var(--aubergine);box-shadow:0 26px 60px #6334b52b,0 0 0 1px #6334b51a}
.pocket-web .discover-hero::before{border-color:#6334b524;box-shadow:inset 0 0 0 60px #c8f3e259}
.pocket-web .discover-kicker{color:var(--brand)}
.pocket-web .discover-hero .need-form>label{color:var(--aubergine)}
.pocket-web .discover-hero .need-input-row{background:#fff;box-shadow:inset 0 0 0 1.5px var(--brand)}
.pocket-web .discover-hero .need-input-row:focus-within{box-shadow:inset 0 0 0 1.5px var(--brand),0 0 0 4px #ece2ff}
.pocket-web .discover-hero .need-input-row button{background:var(--brand);color:#fff}
.pocket-web .discover-hero .need-input-row button:focus-visible{outline-color:var(--aubergine)}
.pocket-web .discover-hero .need-form>p{color:var(--muted)}
.pocket-web .need-pills button{border-color:#6334b559;color:var(--brand)}
.pocket-web .need-pills button:hover{background:#ece2ff;border-color:#c9b6f2;color:var(--aubergine)}
.pocket-web .discover-entries{border-top-color:#6334b533}
.pocket-web .discover-entries a{background:#f1eaff;color:var(--aubergine)}
.pocket-web .discover-entries a:hover{background:#e6dbff}
.pocket-web .discover-entries .count{background:var(--brand);color:#fff}

/* Highlights: purple brand cards (white text stays legible), not near-black */
.pocket-web .media-hero{background:var(--brand-deep);box-shadow:0 20px 50px #6334b533}
.pocket-web .spotlight-stage{background:radial-gradient(circle at 95% 0%,#8f63dc 0,transparent 52%),linear-gradient(150deg,#6334b5,#4a2590)}
.pocket-web .spotlight-stage.spotlight-tone-1{background:radial-gradient(circle at 95% 0%,#7fd3b5 0,transparent 50%),linear-gradient(150deg,#5a2fa6,#432185)}
.pocket-web .spotlight-stage.spotlight-tone-2{background:radial-gradient(circle at 95% 0%,#f0a98a 0,transparent 50%),linear-gradient(150deg,#6b36b9,#4a2590)}

/* Cards and controls on the glow */
.pocket-web .card,.pocket-web .offer-bundle,.pocket-web .status,.pocket-web .about{background:var(--card)}
.pocket-web .offer-bundle .details,.pocket-web .visit,.pocket-web .cta:not(.retailer),.pocket-web .status button{background:var(--brand);color:#fff}
.pocket-web .offer-bundle .details:hover,.pocket-web .visit:hover{background:var(--brand-deep)}
.pocket-web .categories button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.pocket-web .tabs{background:#6334b5f2;border-color:#ffffff40}
.pocket-web .tabs a{color:#fff}
.pocket-web .tabs a[aria-current=page]{background:#fffdf8;color:var(--brand)}
.pocket-web .tabs a:focus-visible{outline-color:#fff}
.pocket-web .disclosure,.pocket-web footer{color:var(--muted)}

/* Previous/Next controls for horizontal rails (offer shelves and brands) */
.sectionhead-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.rail-controls{display:flex;align-items:center;gap:8px}
.rail-button{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--aubergine);background:#fffdf8;color:var(--aubergine);font-size:18px;font-weight:800;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.rail-button:hover:not(:disabled){background:var(--aubergine);color:#fff}
.rail-button:disabled{opacity:.35;cursor:default}
.pocket-web .rail-button{border-color:var(--brand);color:var(--brand)}
.pocket-web .rail-button:hover:not(:disabled){background:var(--brand);color:#fff}
@media(max-width:600px){.rail-controls .shelf-hint{display:none}}
@media(prefers-reduced-motion:reduce){.rail-button{transition:none}}

/* Six tabs (with Eat out) on small phones: labels measured to fit 390px and 320px screens.
   Counts become badges on the icon so they don't widen the label; every tab stays at least 48×56px. */
@media(max-width:420px){
 .tabs{width:calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));padding:4px;gap:1px}
 .tabs a{position:relative;min-height:56px;padding:6px 0;gap:4px;font-size:9px;letter-spacing:0;text-transform:none}
 .tabs a>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tabs a svg{width:22px;height:22px}
 .tabs a .count{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;font-size:9px;line-height:16px;font-weight:800;background:#ece2ff;color:#24123e;vertical-align:baseline}
}
@media(max-width:340px){.tabs a{font-size:8px}.tabs a svg{width:20px;height:20px}}

/* Travel / Seasonal category filter: pill buttons; the pressed one is deep purple with white text. */
.category-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.category-filter button{min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid #6334b5;background:#fffdf8;color:#4a2590;font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.category-filter button:hover{background:#ece2ff;color:#24123e}
.category-filter button[aria-pressed=true]{background:#6334b5;border-color:#6334b5;color:#fff}
.category-count:empty{display:none}
.category-count{min-width:22px;padding:2px 7px;border-radius:999px;background:#ece2ff;color:#24123e;font-size:12px;line-height:1.3;text-align:center}
.category-filter button[aria-pressed=true] .category-count{background:#fff;color:#4a2590}
.category-filter button:focus-visible{outline:3px solid #6334b5;outline-offset:3px}
@media(max-width:600px){.category-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}.category-filter::-webkit-scrollbar{display:none}.category-filter button{flex:none}}

/* Calmer offers landing: header Home link, one compact heading/search row, one offer grid. */
.top-actions{display:flex;align-items:center;gap:10px;min-width:0}
.home-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:999px;background:#ece2ff;color:#24123e;font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.home-link:hover{background:#e2d6ff}
.home-link svg{width:18px;height:18px}
.home-link:focus-visible{outline:3px solid #6334b5;outline-offset:3px}
.discover-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:4px 0 10px}
.discover-bar h1{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.1;color:#24123e}
.discover-bar .toolbar{flex:1 1 380px;margin:0;display:flex;gap:10px}
.discover-bar .search input{background:#fffdf8;border:1.5px solid #6334b5;border-radius:999px;min-height:46px}
.discover-bar select{border-radius:999px;min-height:46px;background:#fffdf8;border:1.5px solid #ddd2c2;color:#24123e}
.discover-bar+.category-filter{margin:0 0 18px}
.offer-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.offer-list-head h2{margin:0;font-size:22px}
.offer-list-head .counter{font-size:14px;font-weight:700;color:#5d4f6b}
.offer-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:18px;align-items:stretch}
.more{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0}
#show-more{min-height:46px;padding:10px 22px;border:0;border-radius:999px;background:#6334b5;color:#fff;font-weight:800;cursor:pointer}
#show-more:hover{background:#4a2590}
#show-more:focus-visible{outline:3px solid #6334b5;outline-offset:3px}
#show-more-status:empty{display:none}
@media(max-width:600px){.discover-bar .toolbar{flex-wrap:wrap}.discover-bar select{width:100%}}
@media(max-width:420px){
 .top-actions{gap:6px}
 .pill{padding:8px}
 .pill #feed-pill-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .home-link{padding:8px 12px}
}

/* Advertiser cards (discover bundles, Shops, search results, favourites) share one layout: a full-width white logo
   stage, then the wrapping brand name with its favourite button, the short factual descriptor, the live-offer count,
   the current-offer teaser, and the call to action pinned to the bottom so buttons line up across a grid row.
   Logos are only ever contained, never cropped or stretched. Wide wordmarks centred on mostly empty square canvases
   (e.g. Hairdressing Supplies 41960, Aeternum 82371) use measured artwork bounds so the artwork fills the stage; only
   surrounding white canvas can fall outside it. Without an image the stage shows the brand name, never a blank box. */
.card.offer-card,.card.offer-bundle,.card.shopcard{display:flex;flex-direction:column;min-width:0;padding:0;gap:0}
.card.offer-bundle{border:1.5px solid var(--line);box-shadow:none}.card.offer-bundle:hover{border-color:var(--aubergine);box-shadow:none}
.card .logo-stage{position:relative;display:flex;align-items:center;justify-content:center;height:152px;min-height:0;padding:16px 22px;background:#fff!important;border:0!important;border-bottom:1px solid var(--line)!important}
.logo-stage .logo.stage{width:100%;height:100%;max-width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;flex:none;display:flex;align-items:center;justify-content:center}
.card.offer-card .cardbody,.card.offer-bundle .cardbody,.card.shopcard .cardbody{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 18px 12px}
.card.offer-card .cardbody>*,.card.offer-bundle .cardbody>*,.card.shopcard .cardbody>*{margin:0;min-width:0}
.brand-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}
.brand-row>:first-child{flex:1 1 auto;min-width:0;max-width:100%;margin:0;overflow-wrap:anywhere}
.card .card-brand-name,.shopcard .brand-row h3{font-family:var(--display);font-size:19px;font-weight:800;line-height:1.25;color:var(--purple)}
.card .brand-row .heart{position:static;flex:none;width:40px;height:40px;margin:-6px -6px 0 0;border:1px solid var(--line);background:#fff;z-index:auto}
.shopcard .shop-label,.offer-bundle .cardbody>.brand-summary,.card.offer-card .cardbody>.brand-summary{color:var(--muted);font-size:14px;line-height:1.4}
.card.offer-card .cardbody h3{font-size:19px;margin:0}
.card.offer-bundle .teaser,.card.shopcard .teaser{margin:2px 0 0;box-shadow:none;border-radius:14px}
.card.offer-bundle .brand-media,.card.shopcard .brand-media{margin:2px 0 0;box-shadow:none;border-radius:14px}
.card.offer-card .cardfoot,.card.offer-bundle .cardfoot,.card.shopcard .actions{margin-top:auto;padding:4px 18px 18px}
.card.offer-bundle .cardfoot .details{width:100%;min-height:44px}
.card.shopcard .actions .details,.card.shopcard .actions .visit{min-height:44px}
@media(max-width:600px){.card .logo-stage{height:120px;padding:12px 18px}.card .card-brand-name,.shopcard .brand-row h3{font-size:18px}.card.offer-card .cardbody,.card.offer-bundle .cardbody,.card.shopcard .cardbody{padding:14px 16px 10px}.card.offer-card .cardfoot,.card.offer-bundle .cardfoot,.card.shopcard .actions{padding:4px 16px 16px}}
/* Shared description line under the retailer name in saved offers and the offer details dialog. */
.card .cardbody>.brand-summary{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.4}
.od-brand{margin:-2px 0 10px;color:var(--muted);font-size:14px;line-height:1.4}

/* Compact offer details: small shop header, then the voucher code, Copy code and Shop this offer in first view.
   Copy success swaps the code for a tick in the same grid cell, so nothing moves; the confetti is clipped to the panel. */
#offer-dialog{padding:20px 22px;max-height:calc(100dvh - 24px)}
#offer-dialog .detail-nav{top:-20px;padding:0 0 6px}
#offer-dialog .detail-nav .back-button{min-height:40px;padding:6px 12px;font-size:14px}
#offer-dialog .detail-nav .close{width:40px;height:40px;min-width:40px;min-height:40px}
.od-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px}
#offer-dialog .od-head .dshop{margin:0;gap:8px;font-size:14px;color:var(--ink)}
#offer-dialog .od-head .logo.small{width:32px;height:32px;border-radius:8px;font-size:13px;padding:2px}
#offer-dialog .od-head .logo.small.has-img{width:68px;height:32px;padding:3px 5px}
#offer-dialog h2{font-size:clamp(19px,2.4vw,23px);line-height:1.25;margin:8px 0 10px}
#offer-dialog .codewrap{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:12px;border:1px solid #d9c8f5;border-radius:16px;background:#fff}
#offer-dialog .codewrap>p{grid-column:1/-1;margin:0}
.codestack{display:grid;min-width:0}
.codestack>*{grid-area:1/1}
#offer-dialog .codewrap input.code{margin:0;min-height:56px;padding:10px 12px;font-size:20px;letter-spacing:2px}
#offer-dialog .codewrap .copy{min-height:56px;padding:0 20px;background:#6334b5;border-color:#6334b5;color:#fff;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap}
#offer-dialog .codewrap .copy:hover{background:#4a2590}
#offer-dialog .codewrap .copy{min-width:10.5em}
.copied{visibility:hidden;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;min-height:56px}
.copied .tick{grid-row:1/4;position:relative;width:52px;height:52px;border-radius:50%;background:#8b3dff;box-shadow:0 0 0 4px #efe4ff}
.copied .tick::after{content:"";position:absolute;left:18px;top:10px;width:12px;height:23px;border:solid #fff;border-width:0 5px 5px 0;transform:rotate(45deg)}
#offer-dialog .copied-title{margin:0;font:900 22px/1.1 var(--display);letter-spacing:.03em;color:#7a2ff0}
#offer-dialog .copied-help{margin:3px 0 0;font-size:14px;line-height:1.3;font-weight:700;color:var(--ink)}
#offer-dialog .copied-code{margin:2px 0 0;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--muted);overflow-wrap:anywhere}
#offer-dialog .codewrap[data-state=ok] .copied{visibility:visible}
#offer-dialog .codewrap[data-state=ok] input.code{visibility:hidden}
.codewrap[data-state=ok] .tick{animation:od-pop .25s ease-out}
#offer-dialog .codewrap .copy-status[data-state=ok]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Confirmed copy only: the button reads "Code copied ✓" in solid deep purple and the tracked "Shop this offer" link
   directly below is emphasised. A failed copy keeps the normal look and shows the manual-copy help instead. */
#offer-dialog .codewrap[data-state=ok] .copy{background:#4a2590;border-color:#4a2590;box-shadow:0 0 0 3px #e3d2ff}
#od-code:has(.codewrap[data-state=ok])+#od-link .cta{background:#4a2590;border-color:#4a2590;color:#fff;box-shadow:0 0 0 4px #e3d2ff}
#offer-dialog .codewrap[data-state=manual]{border-color:#6334b5}
#offer-dialog .cta{margin-top:12px;padding:14px;font-size:16px}
#offer-dialog .facts{margin:12px 0 0;font-size:13px;gap:4px 12px}
.od-more{margin-top:10px;border-top:1px solid var(--line)}
.od-more summary{padding:12px 0;font-weight:800;cursor:pointer;color:var(--aubergine)}
.od-more .od-brand{margin:0 0 8px}
.od-more #od-description{margin:0 0 4px}
@keyframes od-pop{from{transform:scale(.6)}to{transform:scale(1)}}
.copied .confetti{position:absolute;left:26px;top:50%;width:0;height:0;pointer-events:none}
.confetti i{position:absolute;left:-4px;top:-3px;width:8px;height:6px;border-radius:2px;background:#8b3dff;opacity:0;animation:od-confetti .9s cubic-bezier(.2,.7,.3,1) forwards}
.confetti i:nth-child(even){background:#e8b10c}
.confetti i:nth-child(5n){width:6px;height:6px;border-radius:50%;background:#b57cff}
.confetti i:nth-child(1){--x:46px;--y:-44px;--r:220deg}.confetti i:nth-child(2){--x:90px;--y:-30px;--r:-180deg}
.confetti i:nth-child(3){--x:140px;--y:-40px;--r:260deg}.confetti i:nth-child(4){--x:180px;--y:-18px;--r:-240deg}
.confetti i:nth-child(5){--x:210px;--y:10px;--r:200deg}.confetti i:nth-child(6){--x:160px;--y:34px;--r:-200deg}
.confetti i:nth-child(7){--x:110px;--y:48px;--r:300deg}.confetti i:nth-child(8){--x:60px;--y:40px;--r:-260deg}
.confetti i:nth-child(9){--x:-18px;--y:-40px;--r:180deg}.confetti i:nth-child(10){--x:20px;--y:-58px;--r:-220deg}
.confetti i:nth-child(11){--x:240px;--y:-34px;--r:240deg}.confetti i:nth-child(12){--x:250px;--y:30px;--r:-300deg}
.confetti i:nth-child(13){--x:-14px;--y:42px;--r:260deg}.confetti i:nth-child(14){--x:120px;--y:-56px;--r:-180deg}
@keyframes od-confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.codewrap[data-state=ok] .tick{animation:none}}
@media(max-width:520px){
 #offer-dialog{padding:14px 16px;width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
 #offer-dialog .detail-nav{top:-14px}
 #offer-dialog .codewrap{grid-template-columns:minmax(0,1fr)}
 #offer-dialog .codewrap .copy{min-height:48px;width:100%}
}
/* Shop details (opened from the home page logos and discovery cards): the offer dialog's layout, and the readable
   small print that sits above every outbound button in both dialogs. */
#shop-dialog{padding:20px 22px;max-height:calc(100dvh - 24px)}
#shop-dialog .detail-nav{top:-20px;padding:0 0 6px}
#shop-dialog .detail-nav .back-button{min-height:40px;padding:6px 12px;font-size:14px}
#shop-dialog .detail-nav .close{width:40px;height:40px;min-width:40px;min-height:40px}
#shop-dialog .od-head .dshop{margin:0}
#shop-dialog .od-head .logo.small{width:32px;height:32px;border-radius:8px;font-size:13px;padding:2px}
#shop-dialog .od-head .logo.small.has-img{width:68px;height:32px;padding:3px 5px}
#shop-dialog h2{font-size:clamp(19px,2.4vw,23px);line-height:1.25;margin:8px 0 6px}
#shop-dialog .cta{margin-top:10px;padding:14px;font-size:16px}
.sd-offers{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 14px}
.sd-offers .details{min-height:40px}
.smallprint{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:#f5effd;color:var(--ink);font-size:13.5px;line-height:1.45;text-align:left}