/* ---- My Dumb Widget.html line 157 ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

.wl-root{
  --o:#F75E1C; --card:#1a1208; --line:rgba(247,94,28,.2); --line-hi:rgba(247,94,28,.55);
  --txt:#fff; --dim:rgba(255,255,255,.55);
  font-family:'Poppins',sans-serif; color:var(--txt);
  max-width:1200px; margin:0 auto; padding:0 0 60px;
  -webkit-font-smoothing:antialiased;
  --heart:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20.4S3.6 15.3 3.6 9.6A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8.4 2.6c0 5.7-8.4 10.8-8.4 10.8Z'/></svg>");
}
.wl-root *{box-sizing:border-box;}
/* Squarespace zeroes <p> margins inside Code Blocks — never rely on them. */
.wl-root p{margin:0;}
/* Every panel below sets an explicit display (flex/grid), which OUTRANKS the
   UA sheet's [hidden]{display:none} — without this the help tip and the empty
   states render regardless of the attribute. */
.wl-root [hidden]{display:none !important;}

/* ── header ─────────────────────────────────────────────────────────────── */
.wl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:0 0 22px;}
.wl-headtext{display:flex; flex-direction:column; gap:6px;}
.wl-eyebrow{font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--o);}
.wl-title{font-size:clamp(30px,4.4vw,46px); font-weight:800; letter-spacing:-1.2px; line-height:1; margin:0;}
.wl-sub{font-size:14px; color:var(--dim);}

.wl-btn{font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:500; letter-spacing:.8px;
  text-transform:uppercase; border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 6px 24px rgba(0,0,0,.35); color:rgba(255,255,255,.65); padding:9px 18px;
  transition:color .16s, border-color .16s, background .16s; display:inline-flex; align-items:center; gap:9px;
  text-decoration:none;}
.wl-btn:hover{color:var(--o);}
.wl-btn-primary{background:var(--o); border-color:var(--o); color:#fff; font-weight:600;}
.wl-btn-primary:hover{color:#fff; background:#ff7137; border-color:#ff7137;}
.wl-btn svg{width:15px;height:15px;display:block;}

/* Signed-out save banner. Quiet by design: it sits above the queue in the
   page's own colours rather than announcing itself, because it appears only
   to someone who has already saved something and is being offered a way to
   keep it — not to sell anything. */
.wl-guestbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding:13px 18px;border-radius:12px;
  background:rgba(232,118,58,.08);border:1px solid rgba(232,118,58,.28);}
.wl-guestbar-txt{font-size:15px;line-height:1.45;}
.wl-guestbar-txt b{font-weight:700;}
.wl-guestbar .wl-btn{flex:none;}
@media (max-width:560px){.wl-guestbar{flex-direction:column;align-items:flex-start;}}


/* ── tabs ───────────────────────────────────────────────────────────────── */
.wl-tabs{display:flex; gap:26px; border-bottom:1px solid rgba(255,255,255,.09); margin:0 0 26px; flex-wrap:wrap;}
.wl-tab{background:none; border:0; padding:0 0 13px; cursor:pointer; position:relative;
  font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:rgba(255,255,255,.45); transition:color .16s;
  display:inline-flex; align-items:center; gap:9px;}
.wl-tab:hover{color:rgba(255,255,255,.8);}
.wl-tab.is-on{color:#fff;}
.wl-tab.is-on::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--o);}
.wl-pill{font-family:'Poppins',sans-serif; font-size:11px; font-weight:600; letter-spacing:0;
  padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.09); color:rgba(255,255,255,.7);}
.wl-tab.is-on .wl-pill{background:rgba(247,94,28,.18); color:var(--o);}

/* Six tabs no longer fit a phone. Wrapping put the underline of a second row on
   top of the content below it, so the strip scrolls sideways instead — the
   tabs keep their size and the row keeps its height. */
@media (max-width:720px){
  .wl-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    gap:20px; margin-bottom:22px;}
  .wl-tabs::-webkit-scrollbar{display:none;}
  .wl-tab{flex:0 0 auto;}
}
/* Pulled up under the tab strip so it reads as that tab's line rather than as
   a paragraph floating above the grid. Same size and colour as the share bar's
   note — it is the same kind of sentence, in the same position. */
/* .wl-root prefix on the margins for the same reason .wl-giftcontact carries
   one further down: `.wl-root p{margin:0}` is element+class and outranks a lone
   class, so an unprefixed rule here silently loses its margins. */
.wl-root .wl-note{margin:-14px 0 22px;}
.wl-note{font-size:14px; line-height:1.5; color:rgba(255,255,255,.5);}
@media (max-width:720px){ .wl-root .wl-note{margin:-10px 0 18px;} }

/* ── wishlist: share bar ──────────────────────────────────────────────────
   Deliberately not a card. It sits above the list as a row of controls, so a
   border and a filled background just drew a box around the page's own top
   edge. The URL isn't printed either — "Copy link" is what anyone actually
   does with it, and a raw token-bearing URL is a lot of visual noise for
   something nobody reads. */
.wl-sharebar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 24px;}
.wl-sharenote{margin:0; flex:1 1 220px; min-width:0; font-size:14px; line-height:1.5;
  color:rgba(255,255,255,.5);}
.wl-shareacts{display:flex; flex-wrap:wrap; gap:8px;}
.wl-sharebar .wl-btn{white-space:nowrap;}

/* ── add all to cart ────────────────────────────────────────────────────── */
/* Sits BELOW the grid and centred (Chris, 2026-08-19): you decide to buy the
   lot after you've looked at it, not before. A COLUMN, not a wrapping row —
   the button, the running commentary, the go-to-cart link and the couldn't-add
   line stack centred instead of stringing out beside each other. */
.wl-cartbar{display:flex; flex-direction:column; align-items:center; gap:12px;
  margin:30px 0 6px; text-align:center;}
.wl-cartbar .wl-btn{flex:0 0 auto;}
.wl-cartstatus{min-width:0; margin:0; font-size:13.5px; line-height:1.5;
  color:rgba(255,255,255,.5);}
.wl-cartstatus.wl-cartfail{color:rgba(255,255,255,.66);}

/* ── wishlist thumbnails ──────────────────────────────────────────────────
   One grid, two shapes. Store products are photographed square (2000×2000);
   video and download covers are 16:9. The shared 16:9 tile cropped the top and
   bottom off every poster, so wishlist tiles default to 1:1 with the artwork
   CONTAINED and a blurred, scaled copy of itself filling the space either side.
   Art that really is wide keeps the plain 16:9 tile — there'd be nothing to
   fill, and letterboxing it into a square would waste the row. The class is
   added after the bitmap loads, since the ratio isn't knowable before that.

   Both classes are named in every selector on purpose: .wl-thumb sets
   aspect-ratio:16/9 further down this stylesheet, and at equal specificity the
   later rule wins — a lone .wl-wishthumb was silently overridden.

   EVERY wishlist thumb is 1:1, including wide ones. An earlier version gave
   16:9 art its own 16:9 tile, which read as broken next to the square ones —
   one short card in a row of tall ones. Uniformity wins: wide art is still
   never cropped, the blur just fills above and below instead of either side.

   Equal HEIGHT needs three things beyond the shared thumb ratio, because
   titles run to one, two or three lines: the tile is a flex column, the meta
   block grows to fill it, and the action row is pushed to the bottom. Without
   the last one the buttons float mid-card on anything with a short title. */
#wl-view-wish .wl-tile, #wl-giftgrid .wl-tile{display:flex; flex-direction:column;}
#wl-view-wish .wl-tmeta, #wl-giftgrid .wl-tmeta{flex:1; display:flex; flex-direction:column;}
#wl-view-wish .wl-wishacts, #wl-giftgrid .wl-wishacts{margin-top:auto; padding-top:4px;}
.wl-thumb.wl-wishthumb{aspect-ratio:1/1; background-image:none; overflow:hidden; flex:0 0 auto;}
.wl-thumb.wl-wishthumb .wl-tb-blur,
.wl-thumb.wl-wishthumb .wl-tb-img{position:absolute; inset:0;}
.wl-thumb.wl-wishthumb .wl-tb-blur{background:center/cover no-repeat; filter:blur(24px) saturate(1.3);
  transform:scale(1.3); opacity:.55;}
.wl-thumb.wl-wishthumb .wl-tb-img{background:center/contain no-repeat;}

/* ── wishlist + gift tiles ──────────────────────────────────────────────── */
.wl-wishmeta{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-top:5px;}
.wl-price{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px; letter-spacing:.02em; color:#fff;}
.wl-price s{opacity:.45; font-weight:600; margin-right:6px;}
.wl-variant{font-size:12.5px; color:rgba(255,255,255,.6);}
/* Plain text, no pill — see the perk-ticker note: bordered discount banners are
   not wanted on this site. */
.wl-memberoff{font-size:12.5px; color:var(--o); white-space:nowrap;}
.wl-wishnote{margin:7px 0 0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.72); font-style:italic;}
.wl-flag{display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px;
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;}
.wl-flag-sale{background:rgba(247,94,28,.18); color:var(--o);}
.wl-flag-claimed{background:rgba(255,255,255,.1); color:rgba(255,255,255,.66);}
.wl-flag-mine{background:rgba(76,175,80,.18); color:#7bd47f;}
.wl-wishacts{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px;}
/* Owner tiles: plain centred text instead of framed buttons. Same Barlow
   Condensed caps + orange hover the overlay menus use. */
.wl-textacts{justify-content:center; gap:20px; margin-top:13px;}
.wl-textact{appearance:none; -webkit-appearance:none; background:none; border:0; padding:0;
  cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.6);
  transition:color .15s ease;}
.wl-textact:hover, .wl-textact:focus-visible{color:var(--o);}
.wl-tile.is-claimed{opacity:.5;}
.wl-tile.is-claimed:hover{opacity:.72;}

/* ── gift mode ──────────────────────────────────────────────────────────── */
.wl-gifthead{margin:0 0 22px;}
/* .wl-root p{margin:0} further up is element+class, which outranks a lone
   class — the bottom margin here silently did nothing until this was scoped. */
.wl-root .wl-giftcontact{margin:0 0 42px; padding:15px 18px; border-left:2px solid var(--o);
  background:rgba(247,94,28,.06); font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.8);
  white-space:pre-wrap; overflow-wrap:anywhere;}
.wl-giftcontact b{display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--o); margin-bottom:5px;}
.wl-giftfoot{margin:28px 0 0; font-size:13px; line-height:1.55; color:rgba(255,255,255,.45); text-align:center;}
.wl-root.is-gift .wl-head,
.wl-root.is-gift .wl-tabs{display:none;}

/* ── hero ───────────────────────────────────────────────────────────────── */
.wl-hero{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0; margin:0 0 26px;
  background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden;}
.wl-hero-thumb{position:relative; aspect-ratio:16/9; background:#0d0906 center/cover no-repeat; display:block;}
.wl-hero-thumb::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,rgba(26,18,8,.85) 100%);}
@media (max-width:860px){.wl-hero-thumb::after{background:linear-gradient(180deg,transparent 45%,rgba(26,18,8,.9) 100%);}}
.wl-hero-body{padding:30px 32px; display:flex; flex-direction:column; justify-content:center; gap:14px; min-width:0;}
.wl-hero-eyebrow{font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--o);}
.wl-hero-title{font-size:clamp(21px,2.6vw,30px); font-weight:700; letter-spacing:-.7px; line-height:1.22; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.wl-hero-meta{font-size:13.5px; color:var(--dim);}
.wl-hero-desc{font-size:14px; line-height:1.65; color:rgba(255,255,255,.72);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.wl-hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.wl-playbig{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:70px; height:70px; border-radius:50%; background:rgba(247,94,28,.92); display:flex; align-items:center;
  justify-content:center; box-shadow:0 10px 34px rgba(0,0,0,.5); transition:transform .2s;}
.wl-hero:hover .wl-playbig{transform:translate(-50%,-50%) scale(1.1);}
.wl-playbig svg{width:24px;height:26px;}

/* ── the shared tile (queue, history, purchases) ────────────────────────── */
.wl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:20px;}
.wl-tile{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:transform .2s, border-color .2s, box-shadow .2s, opacity .2s;}
.wl-tile:hover{transform:translateY(-4px); border-color:var(--line-hi); box-shadow:0 16px 40px rgba(0,0,0,.5);}
.wl-tile.wl-locked{opacity:.72;}

.wl-thumb{position:relative; aspect-ratio:16/9; background:#0d0906 center/cover no-repeat;
  text-decoration:none; display:block;}
.wl-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px;
  border-radius:50%; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s;}
.wl-tile:hover .wl-play{opacity:1;}
.wl-play svg{width:13px;height:15px;}
.wl-bar{position:absolute; left:0; bottom:0; height:3px; background:var(--o);}
.wl-lockbadge{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; background:rgba(13,9,6,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; color:rgba(255,255,255,.85); text-decoration:none;}
.wl-lockbadge svg{width:17px;height:17px;color:var(--o);}

.wl-tmeta{padding:13px 15px 14px; display:flex; flex-direction:column; gap:5px; min-width:0; flex:1;}
.wl-show{font-family:'Barlow Condensed',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--o);}
.wl-name{font-size:16px; font-weight:700; letter-spacing:-.35px; line-height:1.35; color:#fff; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.wl-name:hover{color:var(--o);}
.wl-status{font-size:12.5px; color:var(--dim);}
.wl-status.done{color:#5ec27a;}
.wl-hwhen{font-size:12px; color:rgba(255,255,255,.4);}

/* Platform marks on a purchase tile — the same official monochrome logos the
   Purchases hub tabs use, just small. Title attr carries the platform name. */
.wl-plats{display:flex; align-items:center; gap:7px; margin-top:4px;}
.wl-plats .wl-plat{display:flex; align-items:center; justify-content:center;}
.wl-plats svg{width:15px; height:15px; display:block;}
.wl-plats img{height:11px; width:auto; display:block; opacity:.9;}

/* ── bars + states ──────────────────────────────────────────────────────── */
.wl-histbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 20px;}
.wl-histnote{font-size:13.5px; color:var(--dim);}
#wl-histsec{margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.09); scroll-margin-top:130px;}
#wl-histsec .wl-histbar{align-items:flex-end;}
#wl-histsec .wl-acard-head{margin:0 0 8px;}
#wl-clear:hover{color:#ff6b6b;}

.wl-confirm{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border-radius:14px;
  background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.3); font-size:14px; color:rgba(255,255,255,.85);
  grid-column:1/-1;}
.wl-confirm .wl-btn-danger{background:#c0392b; border-color:#c0392b; color:#fff; font-weight:600;}
.wl-confirm .wl-btn-danger:hover{background:#d84632; border-color:#d84632; color:#fff;}

.wl-state{text-align:center; padding:70px 24px; background:var(--card); border:1px solid var(--line);
  border-radius:22px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.wl-state h3{font-size:24px; font-weight:700; letter-spacing:-.6px; margin:0;}
.wl-state p{font-size:15px; color:var(--dim); max-width:460px; line-height:1.6;}
.wl-state .wl-bigheart{width:44px; height:44px; background:var(--o); opacity:.85;
  -webkit-mask:var(--heart) center/contain no-repeat; mask:var(--heart) center/contain no-repeat;}

.wl-toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:2147483000;
  padding:11px 20px; border-radius:999px; background:rgba(0,0,0,.82); -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.1); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:500; letter-spacing:.8px;
  text-transform:uppercase; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  display:flex; align-items:center; gap:14px;}
.wl-toast.show{opacity:1; transform:translate(-50%,0); pointer-events:auto;}
.wl-toast button{background:none; border:0; color:var(--o); font:inherit; cursor:pointer; text-transform:uppercase;}

.wl-skel{background:var(--card); border:1px solid var(--line); border-radius:16px; height:230px;
  animation:wlPulse 1.5s ease-in-out infinite;}
@keyframes wlPulse{0%,100%{opacity:.45}50%{opacity:.75}}

/* ── leaderboard ──────────────────────────────────────────────────────────
   NO BORDERS anywhere in this tab (Chris, 2026-08-21). Every element here was
   outlined — the You pill, the period switcher, each row, each prize, each
   reward code — and a screen made of nothing but boxed rows reads as noise.
   The fills stay: a row is still a row, the switcher still shows which period
   is on. Only the outlines are gone. Same call as the Account tab. */
/* The period switcher belongs in the top RIGHT corner whether or not the You
   pill is beside it. space-between did that only while both were present — with
   the pill hidden (no rank yet) the switcher was the row's only child and slid
   left. Pin it right and let the pill push itself away from it instead. */
.wl-lb-topbar{display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; margin:0 0 18px;}
.wl-lb-topbar .wl-you{margin-right:auto;}
/* margin-right:auto is what holds the note at the left of the row while the
   period switcher stays pinned right — and it needs the .wl-root prefix to
   survive `.wl-root p{margin:0}`. */
.wl-root .wl-lbnote{margin:0 auto 0 0;}
.wl-lbnote{font-size:14px; line-height:1.5; color:rgba(255,255,255,.5);}
.wl-you{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--card);
  border:0; border-radius:999px; padding:10px 20px;}
.wl-you .wl-you-label{font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--o);}
.wl-you .wl-you-stat{font-size:13.5px; color:rgba(255,255,255,.8);}
.wl-you .wl-you-stat b{color:#fff; font-weight:700;}
.wl-you .wl-you-streak{font-size:13.5px; color:var(--dim);}
.wl-period{display:flex; gap:4px; background:var(--card); border:0; border-radius:999px; padding:4px;}
.wl-period-btn{border:0; background:transparent; cursor:pointer; border-radius:999px; padding:7px 16px;
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:rgba(255,255,255,.5); transition:color .15s, background .15s;}
.wl-period-btn:hover{color:#fff;}
.wl-period-btn.is-on{background:var(--o); color:#fff;}

.wl-prizes{display:flex; flex-direction:column; gap:12px; margin:0 0 22px;}
.wl-prizes-head{font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--o);}
.wl-prize{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:rgba(247,94,28,.06); border:0; border-radius:16px; padding:14px 18px;}
.wl-prize.is-redeemed{opacity:.55;}
.wl-prize-title{font-size:15px; font-weight:700;}
.wl-prize-sub{font-size:12.5px; color:var(--dim);}
.wl-prize-codes{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.wl-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; background:rgba(0,0,0,.4);
  border:0; border-radius:8px; padding:5px 10px; letter-spacing:.5px;}
.wl-code.is-redeemed{text-decoration:line-through; opacity:.6;}
.wl-redeemed{font-size:12px; color:#5ec27a; font-weight:600;}
.wl-copy{border:0; border-radius:999px; background:var(--o); color:#fff; cursor:pointer; padding:6px 14px;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase;}
.wl-copy:hover{background:#ff7137;}
.wl-claim{font-size:13px; color:rgba(255,255,255,.75);}

.wl-board{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
/* No card behind a name either (Chris, 2026-08-21) — the rows are a list of
   names and numbers, not twenty stacked panels. With the fill gone the row has
   nothing to pad against, so the horizontal padding goes too and the ranks line
   up with everything else on the page. */
.wl-lbrow{display:flex; align-items:center; gap:14px; background:none; border:0;
  border-radius:0; padding:9px 0;}
/* Your own row: the fill used to mark it. Colour does it now — the same orange
   the score already uses, on the name and the rank. */
.wl-lbrow.is-you .wl-lbname{color:var(--o);}
.wl-lbrow.is-you .wl-lbrank{color:var(--o);}
.wl-lbrank{font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; color:rgba(255,255,255,.4);
  min-width:34px; text-align:center;}
.wl-lbrow:nth-child(-n+3) .wl-lbrank{font-size:20px;}
.wl-lbav{width:34px; height:34px; border-radius:50%; object-fit:cover; background:#2a1d10; flex:none;}
span.wl-lbav{display:block;}
.wl-lbname{font-size:15px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.wl-lbstreak{font-size:12.5px; color:var(--dim); margin-left:8px; font-weight:500;}
.wl-lbscore{font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:700; color:var(--o);}
.wl-lbscore span{font-size:12px; color:var(--dim); margin-left:4px; font-weight:600;}
.wl-lbempty{text-align:center; color:var(--dim); padding:32px 0; font-size:14.5px; list-style:none;}

/* ── account ────────────────────────────────────────────────────────────── */
/* Flat, not paneled: no card borders or backgrounds — sections read as one
   page separated by hairline dividers (Chris's call, 2026-08-05). */
.wl-acct{display:flex; flex-direction:column; gap:34px;}
.wl-acard{background:none; border:0; border-radius:0; padding:0;}
.wl-acard + .wl-acard{border-top:1px solid rgba(255,255,255,.09); padding-top:32px;}
.wl-acard-head{font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--o); margin:0 0 16px;}
.wl-sub-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 0;}
.wl-sub-row + .wl-sub-row{border-top:1px solid rgba(255,255,255,.07);}
.wl-sub-info{display:flex; flex-direction:column; gap:3px; min-width:0;}
.wl-sub-name{font-size:clamp(20px,2.6vw,27px); font-weight:800; letter-spacing:-.6px; line-height:1.15;}
.wl-sub-state{font-size:13px; color:var(--dim); display:flex; align-items:center; gap:7px;}
.wl-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); flex:none;}
.wl-dot.on{background:#5ec27a;}
.wl-sub-actions{display:flex; gap:8px; flex-wrap:wrap;}
.wl-benefits{display:flex; flex-direction:column; gap:7px; margin:10px 0 2px; align-items:flex-start;}
.wl-benefit{font-size:14px; color:rgba(255,255,255,.75); text-decoration:none; background:none; border:0;
  padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:9px; text-align:left;
  transition:color .15s; font-family:inherit; line-height:1.5;}
.wl-benefit::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--o); flex:none;}
.wl-benefit:hover{color:var(--o);}
.wl-benefit.is-plain{cursor:default;}
.wl-benefit.is-plain:hover{color:rgba(255,255,255,.75);}
.wl-access{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:600px){.wl-access{grid-template-columns:repeat(2,1fr);}}
.wl-lib{display:flex; flex-direction:column; gap:8px; min-width:0; text-decoration:none;
  transition:transform .18s;}
.wl-lib:hover{transform:translateY(-3px);}
.wl-lib:hover .wl-lib-thumb{border-color:var(--line-hi);}
.wl-lib:hover .wl-lib-name{color:var(--o);}
.wl-lib-thumb{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#0d0906 center/cover no-repeat; border:1px solid var(--line);}
.wl-lib.is-locked .wl-lib-thumb{filter:grayscale(.5) brightness(.55);}
.wl-lib-badge{position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.wl-lib-badge svg{width:13px; height:13px; display:block;}
.wl-lib-badge.ok{color:#5ec27a;} .wl-lib-badge.no{color:rgba(255,255,255,.7);}
.wl-lib-name{font-size:13px; font-weight:600; line-height:1.35; color:rgba(255,255,255,.85);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.wl-lib.is-locked .wl-lib-name{color:rgba(255,255,255,.45);}
.wl-acc-note{font-size:12.5px; color:var(--dim); margin-top:12px; line-height:1.6;}
.wl-inline-link{color:var(--o); text-decoration:underline; text-underline-offset:2px;}
.wl-inline-link:hover{color:#ff7137;}
/* Order history rows */
.wl-order{display:flex; align-items:center; gap:16px; padding:13px 0; flex-wrap:wrap;}
.wl-order + .wl-order{border-top:1px solid rgba(255,255,255,.07);}
.wl-order-date{font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--dim); min-width:86px;}
.wl-order-items{flex:1; min-width:200px; font-size:14px; line-height:1.5;}
.wl-order-total{font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; color:#fff;}
.wl-order-status{font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.6);}
.wl-order-status.shipped{background:rgba(94,194,122,.14); color:#5ec27a;}
.wl-order-status.pending{background:rgba(247,94,28,.14); color:var(--o);}
.wl-order-track{font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--o); text-decoration:none;}
.wl-order-track:hover{text-decoration:underline;}

@media (max-width:860px){
  .wl-hero{grid-template-columns:1fr;}
  .wl-hero-body{padding:22px;}
}
@media (max-width:560px){
  .wl-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
  .wl-name{font-size:14.5px;}
  .wl-tabs{gap:18px;}
  .wl-tab{font-size:15px;}
}

/* ══ HOLY LOOK (2026-09-27, Chris) ═══════════════════════════════════════════
   Matches the three holy widgets (Archives, Store, Dumb Video): same page box,
   one-row header with the tabs as its centred filter links + the sticky black
   bar, spotlight-card Up Next hero, brown-glass tiles with the frosted play
   button, orange Barlow buttons. Overrides only -- the rules above still carry
   layout. Reference copy: Dumb Clubhouse Archives Widget.html. */
.wl-root{--card:linear-gradient(100deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50) 60%), linear-gradient(rgba(6,5,4,0.74), rgba(6,5,4,0.74)), url(https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/fc1eaf2a-045d-4028-a23d-7314989c6ac2/Wood+Panel+3.jpg) center/cover no-repeat, #120e0b; max-width:2000px; width:calc(100% - 8vw);}
/* Title sits ~14px under the site header, like Archives: cancel the page section top padding (Chris 2026-09-27: too much space). */
:not([data-di-embed]) > .wl-root{margin-top:0 !important;}

/* header row: title | tabs */
#wl-header{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:24px;
  padding:14px 0 18px; margin:0 0 8px; flex-wrap:nowrap;}
#wl-header::after{content:''; width:0;}
#wl-header .holy-title{margin:0; padding:0; font-family:'Barlow Condensed','Poppins',sans-serif; font-size:38px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; line-height:1; color:#fff; white-space:nowrap;}
#wl-header .wl-tabs{border:0; margin:0; gap:4px 6px; justify-content:center; flex-wrap:wrap;}
#wl-header .wl-tab{font-family:'Poppins',sans-serif; font-size:11px; font-weight:500; letter-spacing:normal; text-transform:none;
  color:rgba(255,255,255,.5); padding:5px 10px; border-radius:20px; gap:6px;}
#wl-header .wl-tab:hover{color:rgba(255,255,255,.85);}
#wl-header .wl-tab.is-on{color:var(--o); font-weight:600;}
#wl-header .wl-tab.is-on::after{display:none;}
#wl-header .wl-pill{font-size:10px; padding:1px 6px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.55);}
#wl-header .wl-tab.is-on .wl-pill{background:rgba(247,94,28,.18); color:var(--o);}
@media (max-width:768px){
  #wl-header{grid-template-columns:minmax(0,1fr); row-gap:8px; padding:8px 0 14px;}
  #wl-header::after{display:none;}
  #wl-header .holy-title{font-size:28px;}
  /* Every tab visible, no sideways scroll (Chris, 2026-10-01): the strip used
     to scroll and hid Account off the right edge. It wraps to a second line
     when five won't fit on one. */
  #wl-header .wl-tabs{justify-content:flex-start; flex-wrap:wrap; overflow:visible; gap:2px 4px; margin:0 0 0 -6px; padding:0;}
  #wl-header .wl-tab{flex:0 0 auto; font-size:12px; padding:5px 6px;}
}
.wl-root .wl-note{margin:0 0 22px;}

/* sticky bar -- same as the holy widgets */
html.holy-bar-ready #dumbHeader{transition:transform .3s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1),
  background .35s cubic-bezier(.4,0,.2,1) !important;}
html.holy-bar #dumbHeader{transform:translateY(-110%) !important; pointer-events:none;}
html.holy-bar #wl-header{position:fixed !important; top:0; left:var(--hb-l,0); right:var(--hb-r,0); z-index:10000;
  transition:padding .3s cubic-bezier(.4,0,.2,1); margin:0 !important; padding-top:10px !important; padding-bottom:10px !important; background:#000;}
html.holy-bar #wl-header::before{content:''; position:absolute; top:0; bottom:0; left:-100vmax; right:-100vmax;
  background:#000; z-index:-1; pointer-events:none;}
html.holy-bar-out #wl-header{position:relative; z-index:10000; }
html.holy-bar-snap #dumbHeader, html.holy-bar-snap #dumbHeader::before, html.holy-bar-snap .dh-inner,
html.holy-bar-snap .dh-logo img, html.holy-bar-snap .dumb-header-spacer, html.holy-bar-snap #wl-header{transition:none !important;}

/* page titles (gift mode) + section-style headings in the holy face */
.wl-title{font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.5px; line-height:1;}
.wl-acard-head, .wl-prizes-head{font-family:'Barlow Condensed','Poppins',sans-serif; font-size:30px; font-weight:700;
  letter-spacing:.5px; line-height:1; color:#fff;}
.wl-sub-name{font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.3px;}

/* buttons: holy orange / ghost, 12px radius, Barlow caps */
.wl-btn{border-radius:12px; font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; font-size:17px; letter-spacing:1px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); color:#fff; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; padding:9px 18px; transition:transform .15s, box-shadow .15s, border-color .15s, color .15s;}
.wl-btn:hover{color:#fff; border-color:rgba(247,94,28,.55);}
.wl-btn-primary{background:var(--o); border-color:var(--o); font-weight:700;}
.wl-btn-primary:hover{background:var(--o); border-color:var(--o); transform:translateY(-1px); box-shadow:0 8px 24px rgba(247,94,28,.45);}
.wl-copy, .wl-period-btn{font-weight:700;}

/* Up Next hero = the holy spotlight card */
.wl-hero{grid-template-columns:minmax(0,.85fr) minmax(0,1fr); border:1px solid rgba(247,94,28,.45); border-radius:22px;
  background:linear-gradient(100deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50) 60%), linear-gradient(rgba(6,5,4,0.74), rgba(6,5,4,0.74)), url(https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/fc1eaf2a-045d-4028-a23d-7314989c6ac2/Wood+Panel+3.jpg) center/cover no-repeat, #120e0b;
  box-shadow:0 24px 60px rgba(0,0,0,.45);}
.wl-hero-thumb::after{display:none;}
.wl-hero-body{padding:34px 38px;}
.wl-hero-eyebrow{align-self:flex-start; padding:5px 12px; border-radius:20px; background:rgba(247,94,28,.18);
  color:#ffb08c; font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; letter-spacing:1.4px;}
.wl-hero-title{font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,3vw,48px); line-height:.95; letter-spacing:0;}
.wl-hero-meta{font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; font-size:17px; letter-spacing:.8px;
  text-transform:uppercase; color:rgba(255,255,255,.72);}
.wl-hero-desc{font-size:14px; line-height:1.6; color:rgba(255,255,255,.7);}
.wl-hero .wl-btn{font-size:19px; padding:11px 24px;}
.wl-playbig{width:56px; height:56px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px rgba(0,0,0,.45);}
@media (min-width:1500px){
  .wl-hero-title{font-size:clamp(52px,3.8vw,76px);}
  .wl-hero-desc{font-size:17px;}
  .wl-hero .wl-btn{font-size:22px; padding:13px 28px;}
}
@media (max-width:860px){ .wl-hero{grid-template-columns:1fr;} .wl-hero-body{padding:22px 20px 24px;} }

/* tiles = the Archives' .video-item */
.wl-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.wl-tile{background:var(--card); border:1px solid var(--line); border-radius:16px;}
.wl-tile:hover{transform:translateY(-3px); border-color:var(--line-hi); box-shadow:0 16px 40px rgba(0,0,0,.5);}
.wl-thumb{background-color:rgba(255,255,255,.04);}
.wl-play{width:40px; height:40px; opacity:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:transform .2s ease;}
.wl-play svg{margin-left:3px;}
.wl-play, .wl-playbig{color:#fff;}
.wl-tile:hover .wl-play{transform:translate(-50%,-50%) scale(1.15);}
.wl-tmeta{padding:14px 16px 16px; gap:8px;}
.wl-show{font-family:'Poppins',sans-serif; font-size:10px; font-weight:700; letter-spacing:.8px;}
.wl-name{font-size:17px; letter-spacing:-.4px;}
.wl-name:hover{color:#fff;}
.wl-status, .wl-hwhen{font-size:12px; color:rgba(255,255,255,.48);}
.wl-state{border-radius:22px; border-color:rgba(247,94,28,.45);
  background:linear-gradient(100deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50) 60%), linear-gradient(rgba(6,5,4,0.74), rgba(6,5,4,0.74)), url(https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/fc1eaf2a-045d-4028-a23d-7314989c6ac2/Wood+Panel+3.jpg) center/cover no-repeat, #120e0b;}
.wl-state h3{font-family:'Barlow Condensed','Poppins',sans-serif; font-size:34px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; line-height:1;}
.wl-skel{background:var(--card); border-radius:16px;}
.wl-guestbar{border-radius:18px; border:1px solid rgba(247,94,28,.55); padding:18px 22px;
  background:linear-gradient(100deg, rgba(0,0,0,.25), rgba(0,0,0,.45) 60%), linear-gradient(rgba(6,5,4,.8), rgba(6,5,4,.8)), var(--pbg3, #1e140a) center/cover no-repeat;}
/* Account: each membership is a panel (Chris, 2026-10-01 -- supersedes the flat rows) */
.wl-sub-row, .wl-sub-row + .wl-sub-row{padding:34px 30px; border-radius:18px; border:1px solid rgba(247,94,28,.55);
  background:linear-gradient(100deg, rgba(0,0,0,.25), rgba(0,0,0,.45) 60%), linear-gradient(rgba(6,5,4,.8), rgba(6,5,4,.8)), var(--subbg, #1e140a) center/cover no-repeat;}
.wl-sub-row + .wl-sub-row{margin-top:14px;}
.wl-sub-info{gap:8px;}
/* The header injection's heading standard pins .wl-sub-name to 20px with two
   :not(#_) of specificity -- three IDs here is what it takes to outrank it. */
#wl-root .wl-sub-name:not(#_):not(#_){font-size:clamp(28px,3.4vw,40px) !important;}
.wl-root a.wl-sub-name{color:#fff !important; text-decoration:none !important; transition:color .15s;}
.wl-root a.wl-sub-name:hover{color:var(--o) !important;}
.wl-benefits{display:block; margin:0; font-size:13px; color:var(--dim); line-height:1.5;}
.wl-root .wl-benefit{display:inline; font-size:13px; color:rgba(255,255,255,.75) !important; text-decoration:none !important;}
.wl-benefit::before{content:none;}
.wl-root a.wl-benefit:hover, .wl-root button.wl-benefit:hover{color:#fff !important; text-decoration:underline !important; text-underline-offset:3px;}
/* Connected accounts, now inside the Account tab */
.wl-acard-con .wl-acctop{margin:0;}
.wl-acard-con .wl-acctop-label{display:none;}
.wl-acard-con .wl-accts{margin-top:18px;}
.wl-acard-con .wl-acctop:empty + .wl-accts{margin-top:0;}
#wl-buyslink{margin-top:34px;}
#wl-buyslink:empty{display:none;}
.wl-buyslink-line{font-size:13.5px; color:var(--dim);}
.wl-root .wl-buyslink-line a{color:#fff !important; text-decoration:underline !important; text-underline-offset:3px;}
/* Library tiles: five across at full width, stepping down as it narrows */
.wl-access{grid-template-columns:repeat(5,1fr);}
@media (max-width:1300px){ .wl-access{grid-template-columns:repeat(4,1fr);} }
@media (max-width:1000px){ .wl-access{grid-template-columns:repeat(3,1fr);} }
@media (max-width:600px){ .wl-access{grid-template-columns:repeat(2,1fr); gap:12px;} }
.wl-lib-thumb.is-mosaic{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; background:#000;}
.wl-lib-thumb.is-mosaic i{display:block; background:#0d0906 center/cover no-repeat;}
@media (max-width:600px){ .wl-sub-row, .wl-sub-row + .wl-sub-row{padding:24px 20px;} }
@media (max-width:600px){ .wl-grid{grid-template-columns:repeat(2,1fr); gap:12px;} }
@media (max-width:480px){ .wl-grid{grid-template-columns:1fr;} }

/* Full width like the holy widgets (2026-09-27, Chris): this page's Code Block
   is inset in its Squarespace grid, so break out to the viewport and keep the
   same 4vw gutter / 2000px cap as #archives-outer. */
:not([data-di-embed]) > .wl-root{width:min(92vw,2000px) !important; max-width:none !important;
  margin-left:calc(50% - min(46vw,1000px)) !important; margin-right:0 !important;}

/* Holy eyebrows are one line max (2026-09-26 standard). */
.wl-show{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}

/* ══ CONNECTED ACCOUNTS (2026-09-27) ═════════════════════════════════════════
   The old /purchases hub, merged into the Purchases tab. The pitch is the holy
   link-accounts promo panel (same as Archives .ac-link / Video), photo
   background from the shared --pbgN shuffle; the linked accounts below it are
   flat rows like the Account tab -- hairlines, no card boxes. */
.wl-tile{position:relative;}
.wl-acctop{margin:0 0 24px;}
.wl-acctop:empty{display:none;}
.wl-acctop-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.wl-acctop-label{font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; font-size:15px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--dim); margin-right:4px;}
.wl-accchip{display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 10px; border-radius:999px; cursor:pointer;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.14); color:#fff; line-height:1;
  font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; font-size:17px; letter-spacing:.6px; text-transform:uppercase;
  transition:border-color .15s, background .15s;}
.wl-accchip:hover, .wl-accchip.is-open{border-color:var(--line-hi); background:rgba(247,94,28,.12);}
.wl-accchip svg{width:18px; height:18px; display:block; flex:none;}
.wl-accchip img{width:20px; height:auto; display:block; flex:none;}
.wl-accchip em{font-style:normal; color:var(--o); font-size:14px; letter-spacing:1px;}
.wl-acctop-detail{margin-top:8px;}
.wl-acctop-detail[hidden]{display:none;}
.wl-acctop-detail .wl-acc-row[hidden]{display:none;}
.wl-acctop-detail .wl-acc-row{border-top:0; border-bottom:1px solid rgba(255,255,255,.07);}
@media (max-width:640px){
  .wl-acctop-label{flex-basis:100%; margin:0;}
  .wl-accchip{font-size:16px; padding:7px 11px 7px 9px;}
}
.wl-accts{margin-top:34px;}
.wl-accts:empty{display:none;}
.wl-promo{display:flex; align-items:center; gap:22px; padding:22px 26px; border-radius:18px; border:1px solid rgba(247,94,28,.55);
  background:linear-gradient(100deg, rgba(0,0,0,.25), rgba(0,0,0,.45) 60%), linear-gradient(rgba(6,5,4,.8), rgba(6,5,4,.8)), var(--pbg2, #1e140a) center/cover no-repeat;
  color:#fff; margin:0 0 34px;}
.wl-promo-text{flex:1; min-width:0;}
.wl-link-title{font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,4.2vw,58px); line-height:.95; margin:0 0 12px; color:#fff;}
.wl-promo-sub{font-size:15px; line-height:1.55; color:rgba(255,255,255,.7); margin:0; max-width:760px;}
.wl-link-logos{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}
.wl-link-logo{display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 10px; border-radius:14px; cursor:pointer;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#fff;
  font:700 20px/1 'Barlow Condensed','Poppins',sans-serif; letter-spacing:.6px; text-transform:uppercase;
  transition:border-color .15s, transform .15s;}
.wl-link-logo:hover{border-color:var(--o); transform:translateY(-1px);}
.wl-link-logo svg{width:30px; height:30px; flex:none; display:block;}
.wl-link-logo em{font-style:normal; font-size:12px; letter-spacing:.8px; padding:3px 7px; border-radius:999px; background:var(--o);}
.wl-cdline{margin:18px 0 0; line-height:1.2; font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; font-size:17px;
  letter-spacing:.8px; text-transform:uppercase; color:#ffb08c;}
.wl-cd{font-variant-numeric:tabular-nums; color:#fff;}
@media (max-width:768px){
  .wl-promo{flex-direction:column; align-items:stretch; gap:12px; padding:20px;}
  .wl-link-title{font-size:32px;}
  .wl-link-logo{font-size:17px;}
  .wl-link-logo svg{width:26px; height:26px;}
}
.wl-acc-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 0;}
.wl-acc-row + .wl-acc-row{border-top:1px solid rgba(255,255,255,.07);}
.wl-acc-logo{width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12);}
.wl-acc-logo svg{width:24px; height:24px; display:block;}
.wl-acc-logo img{width:30px; height:auto; display:block;}
.wl-acc-info{flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:3px;}
.wl-acc-name{font-family:'Barlow Condensed','Poppins',sans-serif; font-weight:700; text-transform:uppercase; font-size:24px; letter-spacing:.3px; line-height:1.05;}
.wl-acc-state{font-size:13px; color:var(--dim); display:flex; align-items:center; gap:7px; flex-wrap:wrap; overflow-wrap:anywhere;}
.wl-acc-note{font-size:12.5px; color:rgba(255,255,255,.5); margin-top:3px;}
.wl-acc-note b{color:var(--o);}
.wl-acc-acts{display:flex; gap:8px; flex-wrap:wrap;}
.wl-acc-acts .wl-btn{font-size:15px; padding:7px 14px; text-decoration:none;}
.wl-acc-row.is-flash{animation:wl-flash 1.6s ease;}
@keyframes wl-flash{0%,40%{background:rgba(247,94,28,.14);} 100%{background:transparent;}}

/* Gumroad download button on a purchase tile (top-LEFT: the heart owns top-right) */
.wl-dl{position:absolute; top:10px; left:10px; z-index:4; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s, transform .15s;}
.wl-dl:hover{background:var(--o); border-color:var(--o); transform:translateY(-1px);}
.wl-dl svg{width:17px; height:17px; pointer-events:none;}
/* Bonus features that came with an owned title -- collapsed strip under the tile */
.wl-bonus{border-top:1px solid var(--line); padding:0 16px;}
.wl-bonus-toggle{width:100%; background:none; border:0; color:var(--o); cursor:pointer; padding:10px 0;
  font:700 14px 'Barlow Condensed','Poppins',sans-serif; letter-spacing:1px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; text-align:left;}
.wl-bonus-toggle i{font-style:normal; font-size:9px; transition:transform .18s;}
.wl-bonus.open .wl-bonus-toggle i{transform:rotate(180deg);}
.wl-bonus-list{display:flex; flex-direction:column; padding:0 0 10px;}
.wl-bonus-list a{display:flex; align-items:baseline; gap:7px; color:#fff; text-decoration:none; font-size:13.5px; line-height:1.35; padding:5px 0; opacity:.85;}
.wl-bonus-list a:hover{opacity:1; color:var(--o);}
.wl-bonus-list a span:first-child{font:700 11px 'Barlow Condensed',sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--o); flex:none;}