/* 1.1.15 Black Friday Crawl (site/black-friday.js). Dark brown #1f1a17 and gold #e8b84a, not the 918 crawl's orange.
   Sizes and colours from the approved mockups (canvas rows 10, 11, 13). */
:root { --bf-ink: #1f1a17; --bf-gold: #e8b84a; --bf-soft: #d9cfc4; --bf-card: #fffdf9; --bf-line: #e8e0d5; --bf-orange: #ba4b2a; --bf-muted: #6b5d50; --bf-quiet: #776c61; }

/* My shop (11a) and the page's Join for an owner whose shop isn't in. */
.bf-card { display: flex; gap: 12px; align-items: center; background: var(--bf-ink); color: #fff; border-radius: 18px; padding: 14px; margin: 0 0 14px; box-sizing: border-box; text-align: left; }
.bf-card > img { width: 44px; height: 44px; flex: none; }
.bf-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bf-card-t small { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--bf-gold); }
.bf-card-t b { font: 800 18px/1.15 Archivo, var(--sans, system-ui); }
.bf-card-t span { font-size: 13px; color: var(--bf-soft); }
.bf-gold { flex: none; background: var(--bf-gold); color: var(--bf-ink); border: 0; border-radius: 999px; padding: 11px 16px; font: 800 15px var(--sans, system-ui); cursor: pointer; }
.bf-card-page { margin: 4px 0 0; }

/* The join, edit and route sheets read left like the mockups, clear of the close button. */
#vz-sheet.bf-sheet .vz-card { text-align: left; }
.bf-join, .bf-route, .bf-in, .bf-stamped { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.vz-card .bf-join .vz-h, .vz-card .bf-route .vz-h { font: 800 23px/1.15 Archivo, var(--sans, system-ui); font-stretch: 92%; letter-spacing: -.01em; padding: 4px 48px 4px 0; text-align: left; text-wrap: wrap; }
.bf-lbl { font-weight: 700; font-size: 15px; margin-top: 2px; } .bf-lbl span { font-weight: 400; color: var(--bf-quiet); }
.bf-hours { display: flex; gap: 10px; align-items: center; }
.bf-hours input { flex: 1; min-width: 0; height: 46px; box-sizing: border-box; border: 1px solid #e2d6c9; border-radius: 12px; padding: 0 11px; font: 16px var(--sans, system-ui); background: #fff; color: #342a24; -webkit-appearance: none; appearance: none; text-align: left; }
.bf-deal { background: #fff; border: 1px solid #e2d6c9; border-radius: 14px; padding: 8px; display: flex; gap: 10px; align-items: center; }
.bf-dphoto { width: 56px; height: 56px; flex: none; border-radius: 10px; border: 1.5px dashed #d8cfc4; background: #faf7f2; display: grid; place-items: center; padding: 0; overflow: hidden; cursor: pointer; }
.bf-dphoto.has { border: 0; } .bf-dphoto img { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-dphoto:not(.has) img { width: 26px; height: 26px; opacity: .75; }
.bf-deal input { flex: 1; min-width: 0; border: 0; font: 700 15px var(--sans, system-ui); color: #342a24; background: transparent; padding: 8px 0; outline: none; }
.bf-dx { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #f3ece4; color: #342a24; display: grid; place-items: center; padding: 0; cursor: pointer; }
.bf-add { border: 1.5px dashed #d8cfc4; background: transparent; border-radius: 14px; padding: 12px; font: 700 15px var(--sans, system-ui); color: var(--bf-orange); cursor: pointer; }
.bf-fday { background: #fdf0d2; border: 1.5px solid #f0ca76; border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; font-size: 14px; line-height: 1.4; }
.bf-fday > img, .bf-fday-top > img { width: 40px; height: 40px; flex: none; }
.bf-fday b { display: block; font-size: 15px; } .bf-fday span { display: block; } .bf-fday em { display: block; font-style: normal; color: #6b4e14; font-weight: 700; margin-top: 4px; }
.bf-fday.bf-none { flex-direction: column; gap: 10px; padding: 14px; }
.bf-fday-top { display: flex; gap: 12px; align-items: center; }
.bf-earn { background: var(--bf-card); border-radius: 12px; padding: 12px; } .bf-earn p { margin: 0; font-size: 14px; } .bf-fday .bf-earn p b { display: inline; font-size: 14px; }
.bf-bar { height: 10px; border-radius: 5px; background: #efe3cc; margin: 8px 0 6px; overflow: hidden; } .bf-bar i { display: block; height: 10px; background: #c68a1d; }
.bf-earn-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; } .bf-earn-row span { color: var(--bf-muted); }
.bf-link { background: none; border: 0; padding: 0; color: var(--bf-orange); font: 800 13px var(--sans, system-ui); cursor: pointer; white-space: nowrap; }
.bf-center { align-self: center; font-size: 15px; font-weight: 700; padding: 6px 0; }
.bf-wide { width: 100%; height: 52px; font-size: 17px; font-weight: 800; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bf-wide img { width: 26px; height: 26px; }
.bf-dark { background: var(--bf-ink); color: #fff; }
.bf-foot { font-size: 13px; color: var(--bf-quiet); text-align: center; margin: 2px 0 0; line-height: 1.4; }
.bf-err { margin: 0; color: #b3261e; font-size: 14px; font-weight: 700; }
.bf-note { margin: 0; color: #24553a; background: #e5f1e8; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.bf-leave { background: none; border: 0; color: var(--bf-quiet); font: 700 15px var(--sans, system-ui); padding: 8px 0 0; cursor: pointer; }
.bf-confirm { display: grid; gap: 12px; }

/* You're in! (11c) */
.bf-in-card { background: var(--bf-ink); color: #fff; border-radius: 22px; padding: 22px 18px; text-align: center; }
.bf-in-card img { width: 72px; height: 72px; display: block; margin: 0 auto; }
/* The sheet's ✕ sits on the dark card here (the mockup has none; every sheet keeps one): light on dark. */
#vz-sheet.bf-sheet .vz-card:has(.bf-in) > .vz-x { background: #ffffff26; color: #fff; border: 0; top: 34px; right: 30px; }
.vz-card .bf-in-card h2 { font: 900 30px Archivo, var(--sans, system-ui); margin: 6px 0 0; color: #fff; }
.bf-in-card p { font-size: 15px; color: var(--bf-soft); margin: 4px 0 0; }
.bf-list { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 16px; padding: 4px 14px; }
.bf-lrow { display: flex; gap: 12px; align-items: center; padding: 12px 0; width: 100%; background: none; border: 0; text-align: left; color: #342a24; font: inherit; cursor: pointer; }
.bf-lrow + .bf-lrow { border-top: 1px solid #efe8df; }
.bf-lrow img { width: 36px; height: 36px; flex: none; } .bf-lrow span { flex: 1; display: flex; flex-direction: column; } .bf-lrow b { font-size: 16px; } .bf-lrow small { font-size: 13px; color: var(--bf-muted); }
.bf-lrow em { font-style: normal; color: var(--bf-orange); font-size: 20px; }

/* The crawl page (10b, 10c, 13a, 13c, 11d): a full page over the tabs. */
.bf-page { position: fixed; inset: 0; z-index: 9000; background: var(--paper, #faf7f2); color: #342a24; }
.bf-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bf-top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; margin-bottom: -10px; background: linear-gradient(var(--paper, #faf7f2) 72%, rgba(250, 247, 242, 0)); }
.bf-round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #342a24; box-shadow: 0 2px 8px rgba(0,0,0,.08); display: grid; place-items: center; padding: 0; cursor: pointer; }
.bf-body { padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 28px); display: flex; flex-direction: column; gap: 14px; }
.bf-head { background: var(--bf-ink); color: #fff; border-radius: 22px; padding: 18px; }
.bf-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--bf-gold); }
.bf-head h1 { font: 800 28px/1.05 Archivo, var(--sans, system-ui); margin: 4px 0 0; color: #fff; }
.bf-head-row { display: flex; align-items: center; gap: 12px; } .bf-head-row > div { flex: 1; min-width: 0; } .bf-head-row small { letter-spacing: .1em; } .bf-head-row h1 { font-size: 26px; }
.bf-head-hero { align-items: flex-end; padding: 20px; } .bf-head-hero img { width: 70px; height: 70px; flex: none; }
.bf-head .bf-h-two { font-size: 30px; line-height: 1.02; margin-top: 6px; } .bf-head-hero p { font-size: 14px; color: var(--bf-soft); margin: 8px 0 0; }
.bf-live { flex: none; background: var(--bf-gold); color: var(--bf-ink); font-weight: 900; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.bf-countdown { margin-top: 14px; background: #2e2622; border-radius: 14px; padding: 12px 14px; } .bf-countdown p { margin: 0; font-size: 13px; color: var(--bf-soft); }
.bf-clock { display: flex; gap: 14px; margin-top: 6px; font: 800 28px/1.1 Archivo, var(--sans, system-ui); color: var(--bf-gold); }
.bf-clock span { white-space: nowrap; } .bf-clock small { display: inline; font: 700 13px var(--sans, system-ui); color: var(--bf-soft); }
.bf-how { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bf-how > b { font: 800 18px Archivo, var(--sans, system-ui); }
.bf-step { display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.3; }
.bf-step span { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bf-ink); color: var(--bf-gold); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.bf-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bf-sec b { font: 800 19px Archivo, var(--sans, system-ui); } .bf-sec span { font-size: 13px; color: var(--bf-quiet); white-space: nowrap; } .bf-sec .bf-link { font-size: 14px; font-weight: 700; }
.bf-sec-cap b { font: 800 13px var(--sans, system-ui); letter-spacing: .12em; color: var(--bf-quiet); } .bf-sec-cap span { font-size: 14px; color: var(--bf-muted); }
.bf-whos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bf-who { background: none; border: 0; padding: 0; text-align: center; color: #342a24; cursor: pointer; font: inherit; min-width: 0; }
.bf-who i { display: block; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #efe8df center / cover no-repeat; box-sizing: border-box; }
.bf-who.feat i { border: 3px solid var(--bf-gold); }
.bf-who span { display: block; font-size: 12px; font-weight: 700; margin-top: 4px; line-height: 1.2; overflow-wrap: anywhere; }
.bf-strip { display: flex; gap: 12px; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bf-strip::-webkit-scrollbar { display: none; } .bf-strip > * { scroll-snap-align: start; }
.bf-blur { flex: 0 0 210px; height: 150px; border-radius: 18px; overflow: hidden; position: relative; background: var(--bf-ink); }
.bf-blur i { position: absolute; inset: -6px; background: center / cover no-repeat; opacity: .28; filter: blur(3px); }
.bf-blur span { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; padding: 10px; }
.bf-blur b { font-size: 15px; } .bf-blur em { font-style: normal; font-size: 13px; color: var(--bf-gold); font-weight: 700; margin-top: 4px; }
.bf-alert { background: #e5f1e8; border-radius: 14px; padding: 12px 14px; font-size: 14px; color: #24553a; }
.bf-empty { margin: 0; font-size: 14px; color: var(--bf-muted); }
.bf-deal-card { flex: 0 0 250px; background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 18px; overflow: hidden; padding: 0; text-align: left; color: #342a24; font: inherit; cursor: pointer; display: flex; flex-direction: column; }
.bf-deal-card.feat { border: 2px solid var(--bf-gold); }
.bf-dimg { position: relative; display: block; height: 128px; background: #efe8df center / cover no-repeat; }
.bf-dimg em { position: absolute; top: 8px; left: 8px; background: var(--bf-gold); color: var(--bf-ink); font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.bf-dtxt { padding: 10px 12px; display: flex; flex-direction: column; } .bf-dtxt b { font-size: 16px; font-weight: 800; } .bf-dtxt small { font-size: 13px; color: var(--bf-muted); margin-top: 3px; }
.bf-dtxt i { font-style: normal; font-size: 13px; color: #2f6b45; font-weight: 700; margin-top: 2px; }
.bf-peek { flex: 0 0 230px; background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 18px; overflow: hidden; padding: 0; text-align: left; color: #342a24; font: inherit; cursor: pointer; display: flex; flex-direction: column; }
.bf-pk-h { display: flex; gap: 8px; align-items: center; padding: 10px; } .bf-pk-h i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #efe8df center / cover no-repeat; }
.bf-pk-h span { display: flex; flex-direction: column; min-width: 0; } .bf-pk-h b { font-size: 14px; } .bf-pk-h small { font-size: 12px; color: var(--bf-quiet); }
.bf-pk-img { display: block; height: 150px; background: #efe8df center / cover no-repeat; } .bf-pk-t { padding: 10px; font-size: 14px; line-height: 1.35; }
.bf-plan img { width: 26px; height: 26px; }

/* The stands (10c) */
.bf-stands { padding-top: 6px; }
.bf-slist { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 18px; padding: 4px 12px; }
.bf-srow { display: flex; gap: 12px; align-items: center; padding: 11px 0; } .bf-srow + .bf-srow { border-top: 1px solid #efe8df; }
.bf-sav { width: 46px; height: 46px; flex: none; border-radius: 12px; border: 0; padding: 0; background: #efe8df center / cover no-repeat; cursor: pointer; }
.bf-st { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bf-st b { font-size: 16px; font-weight: 800; }
.bf-st b em { font-style: normal; background: var(--bf-gold); color: var(--bf-ink); font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; vertical-align: 2px; }
.bf-st small { font-size: 13px; color: var(--bf-muted); } .bf-st i { font-style: normal; font-size: 13px; color: var(--bf-orange); font-weight: 700; }
.bf-tick { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid #e2d6c9; background: #fff; color: var(--bf-orange); font-size: 24px; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; }
.bf-tick.on { border: 0; background: var(--bf-orange); color: #fff; }

/* My Black Friday route (10d) */
.bf-rsum { margin: -6px 0 0; font-size: 14px; color: var(--bf-muted); }
.bf-rlist { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 18px; padding: 4px 14px; }
.bf-rrow { display: flex; gap: 12px; align-items: center; padding: 12px 0; } .bf-rrow + .bf-rrow { border-top: 1px solid #efe8df; }
.bf-rrow div { flex: 1; display: flex; flex-direction: column; } .bf-rrow small { font-size: 13px; color: var(--bf-muted); }
.bf-num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--bf-orange); color: #fff; font-weight: 800; display: grid; place-items: center; }
.bf-rnote { background: #fdf0d2; border-radius: 14px; padding: 10px 12px; font-size: 14px; color: #6b4e14; }

/* Stamped! at a stand (10e) */
.bf-st-h { text-align: center; } .vz-card .bf-st-h h2 { font: 900 34px Archivo, var(--sans, system-ui); color: #2f6b45; margin: 0; } .bf-st-h p { margin: 0; font-size: 15px; color: var(--bf-muted); }
.bf-st-box { background: var(--bf-ink); color: #fff; border-radius: 18px; padding: 14px; }
.bf-st-box small { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--bf-gold); }
.bf-bars { display: flex; gap: 8px; margin: 10px 0 8px; } .bf-bars i { flex: 1; height: 10px; border-radius: 5px; background: #4a403a; } .bf-bars i.on { background: var(--bf-gold); }
.bf-st-box p { margin: 0; font-size: 15px; }
.bf-st-deal { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.bf-st-deal img { width: 40px; height: 40px; flex: none; } .bf-st-deal small { display: block; font-size: 13px; color: var(--bf-muted); } .bf-st-deal b { font-size: 16px; }

/* The map banner (10a), under the chips */
.bf-banner { position: absolute; left: 12px; right: 12px; top: calc(var(--top, 54px) + 126px); z-index: 6; display: flex; align-items: center; gap: 12px; background: var(--bf-ink); color: #fff; border: 0; border-radius: 18px; padding: 12px 14px; text-align: left; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; font: inherit; }
.bf-banner img { width: 40px; height: 40px; flex: none; } .bf-banner span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bf-banner small { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--bf-gold); } .bf-banner b { font: 800 19px/1.15 Archivo, var(--sans, system-ui); }
.bf-banner em { font-style: normal; font-size: 13px; color: var(--bf-soft); } .bf-banner i { font-style: normal; font-size: 22px; color: var(--bf-gold); }
#v-home.listing .bf-banner, #v-home:not(.collapsed) .bf-banner.bf-hide { display: none; }