/* Holiday deal pages (/black-friday, /cyber-monday). Same template as /family-wish-list: the
   content-page plum hero (body.page .phero, set by the Worker) with a hand holding the phone, the
   phone playing a drawn 390x844 demo (public/deals.js), then cards, FAQ and a closing button.
   The hand is the home hero's (public/brand/hero-hand-960.webp, 720x1090), screen hole measured
   for the home hero: left 31.94% top 4.04% width 38.61% height 58.17%. */

/* Cards: the same component as /chrome-extension and /family-wish-list. */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4);margin:var(--s5) 0 var(--s6)}
.dcard{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-card);padding:var(--s5);font-size:17px;line-height:26px}
.dcard b{display:block;font:700 20px/26px var(--font-head);color:var(--plum-ink);margin-bottom:var(--s2)}
.page .wrap .dgrid{max-width:none}
.page .wrap .dnote{max-width:none}
.faq h3{margin:var(--s5) 0 var(--s2)}

/* ---- Hero ---- */
.fhero{position:relative;overflow:hidden}
.fphone .xscreen{background:#fff}
.fphone .xscreen::after{display:none}
.fsub b{color:#FFC94A}
.fdate{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;margin:0 0 var(--s4);border-radius:999px;background:rgba(255,255,255,.14);color:#FFF8EF;font:700 15px/1 var(--font)}
@media (min-width:861px){
  .page .fhero{--bandh:84px;--h:min(98svh,1180px);--cx:min(69vw,calc(50vw + 420px));min-height:calc(100svh - var(--bandh));padding-top:clamp(16px,7svh,96px);padding-bottom:var(--s7);box-sizing:border-box}
  .fcopy{position:relative;z-index:2;max-width:min(640px,calc(var(--cx) - var(--h) * .27 - 40px - max(32px,50vw - 568px)))}
  .page .fhero h1{font-size:clamp(40px,min(5.2vw,7.6svh),78px);max-width:none}
  .page .fhero .fsub{font-size:clamp(18px,min(1.6vw,2.7svh),23px);line-height:1.5}
  .fstage{position:absolute;z-index:1;top:max(8px,calc(12.5svh - var(--bandh)));left:calc(var(--cx) - var(--h) * .3385);height:var(--h);aspect-ratio:720/1090}
  .fstage .fphone{position:absolute;inset:0;width:100%;height:100%;padding:0;border-radius:0;background:none;box-shadow:none;transform:none;aspect-ratio:auto}
  .fstage .fphone::after{content:"";position:absolute;inset:0;background:url(/brand/hero-hand-960.webp) center/100% 100% no-repeat;pointer-events:none;z-index:2;filter:drop-shadow(22px 30px 26px rgba(26,4,34,.5))}
  .fstage .fphone .xscreen{position:absolute;left:31.94%;top:4.04%;width:38.61%;height:58.17%;border-radius:11% / 5%;z-index:1}
}
@media (max-width:860px){
  .fstage{display:flex;justify-content:center;margin-top:var(--s6)}
  .fstage .fphone{box-shadow:18px 26px 40px rgba(26,4,34,.45),inset 0 0 0 2px rgba(255,255,255,.08)}
}

/* ---- The drawn phone (390x844, scaled by deals.js) ---- */
.tdev{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;overflow:hidden;background:#FFF8EF;font:400 17px/1.3 -apple-system,"SF Pro Text",system-ui,sans-serif;color:#000}
.tview{position:absolute;inset:0;display:flex;flex-direction:column;background:#FFF8EF;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.tlist{transform:translateX(100%)}
.tdev.swiped .tfeed{transform:translateX(-30%)}.tdev.swiped .tlist{transform:translateX(0)}
.tstatus{display:flex;justify-content:space-between;align-items:center;padding:18px 34px 6px;font-size:16px}
.tbars{display:flex;gap:2px;align-items:flex-end}.tbars i{width:4px;background:#000;border-radius:1px}.tbars i:nth-child(1){height:5px}.tbars i:nth-child(2){height:8px}.tbars i:nth-child(3){height:11px}.tbars i:nth-child(4){height:14px}
.tpage{flex:1;overflow:hidden;padding:4px 18px 0}
.tlogo{padding:8px 0 10px}.tlogo img{height:28px;width:auto;display:block}
.tpage h3{font:700 25px/1.15 "Quicksand",system-ui,sans-serif;color:#1F1230;margin:8px 0 6px}.tpage h3 em{font-style:normal;color:#A3156B}
.page .phero .tdev .tsub{color:#5E5068;max-width:none}
.tsub{font:400 14px/1.35 "Atkinson Hyperlegible Next",system-ui,sans-serif;color:#5E5068;margin:0 0 12px}
.tbanner{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:#4B0B5A;color:#FFF8EF;font:700 14px/1.3 "Atkinson Hyperlegible Next",system-ui,sans-serif}
.tbanner i{font-style:normal;font-size:20px}
/* Deal cards in the feed */
.td{display:grid;grid-template-columns:64px 1fr;gap:6px 12px;background:#fff;border:2px solid #1F1230;border-radius:16px;padding:12px;margin-bottom:10px;font-family:"Atkinson Hyperlegible Next",system-ui,sans-serif}
.tdimg{grid-row:span 2;width:64px;height:64px;border-radius:12px;background:#F4ECF6;display:grid;place-items:center;font-size:34px}
.td b{font:700 16px/1.2 "Quicksand",system-ui,sans-serif;color:#1F1230;align-self:end}
.tdmeta{font-size:13px;line-height:17px;color:#5E5068}
.tchip{display:inline-block;margin-top:4px;font:700 12px/1 "Atkinson Hyperlegible Next",system-ui,sans-serif;color:#4B0B5A;background:#FFE7A3;border-radius:999px;padding:5px 9px}
.td .tbtn{grid-column:1/-1;margin-top:4px}
.tbtn{display:block;text-align:center;background:#4B0B5A;color:#fff;border-radius:999px;padding:9px 0;font:700 15px/1 "Atkinson Hyperlegible Next",system-ui,sans-serif;transition:transform .12s,background .2s}
.tbtn.pressed{transform:scale(.95)}
.tbtn.done{background:#D5F0E0;color:#0E3A2A}
/* The wish list */
.tw{position:relative;background:#fff;border:2px solid #1F1230;border-radius:16px;padding:12px 14px;margin-bottom:10px;font-family:"Atkinson Hyperlegible Next",system-ui,sans-serif;transition:box-shadow .3s,border-color .3s}
.tw b{display:block;font:700 16px/1.25 "Quicksand",system-ui,sans-serif;color:#1F1230}
.tidea{display:block;font-size:13px;color:#A3156B;text-decoration:underline;margin:6px 0 2px}
.tw .tchip{display:none}
.tw.dealt{border-color:#0E3A2A;box-shadow:0 0 0 3px #D5F0E0}.tw.dealt .tchip{display:inline-block}
.trib{display:none;margin:0 0 6px;font:700 12px/1.3 "Atkinson Hyperlegible Next",system-ui,sans-serif;color:#0E3A2A;background:#D5F0E0;border-radius:999px;padding:3px 10px;width:max-content}
.tw.taken .trib{display:block}
.turl{margin:0 18px 26px;padding:9px;border-radius:14px;background:rgba(0,0,0,.06);text-align:center;font-size:14px;color:#1F1230}
.tfinger{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(31,18,48,.22);box-shadow:0 0 0 2px rgba(255,255,255,.7);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.tfinger.on{opacity:1;transform:scale(.8)}
[data-step]{opacity:0;transform:translateY(10px) scale(.96)}
[data-step].on{opacity:1;transform:none;transition:opacity .25s ease,transform .35s cubic-bezier(.2,1.4,.4,1)}
@media (prefers-reduced-motion:reduce){.tview,[data-step].on,.tfinger,.tbtn,.tw{transition:none!important}}

/* ---- This year's deals (filled from /api/deals/<event> by deals.js) ---- */
.dempty{background:var(--surface);border:2px dashed #DDCBB8;border-radius:var(--r-card);padding:var(--s5);font-size:17px;line-height:26px;margin:var(--s5) 0}
.dempty b{display:block;font:700 20px/26px var(--font-head);color:var(--plum-ink);margin-bottom:var(--s2)}
.dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4);margin:var(--s5) 0}
.ddeal{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.ddeal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#F4ECF6}
.ddeal .in{display:flex;flex-direction:column;gap:6px;padding:var(--s4) var(--s5) var(--s5);flex:1}
.ddeal .brand{font:700 14px/20px var(--font);color:var(--muted);text-transform:none}
.ddeal h3{font:700 20px/26px var(--font-head);margin:0;color:var(--ink)}
.ddeal .price{font:700 20px/26px var(--font);color:var(--plum-ink)}
.ddeal .price s{font-weight:400;font-size:16px;color:var(--muted);margin-left:6px}
.ddeal .ends{font-size:15px;line-height:22px;color:var(--muted)}
.ddeal .btn{margin-top:auto;min-height:48px;font-size:17px}
.page .dlist .btn{width:100%;min-width:0}

/* ---- Chrome extension block ---- */
.dext{display:grid;gap:var(--s5);align-items:center}
@media (min-width:861px){.dext{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--s7)}}
.dext img{width:100%;height:auto;border-radius:16px;border:1px solid #EADFD3;display:block;box-shadow:var(--float)}