/* BLACK FRIDAY 2026 page (templates6/bf2026.tpl / bf2026.php, served at /black-friday/).
   Tibor's teaser stylesheet from his hand-off (bf2026-dev-handoff.zip, part1/index.html, 2026-10-23),
   as delivered and scoped under .bf so nothing leaks into the rest of the site. Changes from his file:
   no body rule (the page sits inside the site frame), the tape image path points at the uploaded file,
   a few site-reset guards (marked "site") and the full-width breakout at the end.
   Loaded only by this page. Bump ?v= in the template on every edit. */

/* Part 1 (teaser, 26 Oct - 5 Nov). Visual = banner 7 (Blender stage, generic instrument pile, Rareș meme clones).
   Page text: Open Sans (the site font); the brand font lives only inside the banner image. No products and no prices. */
.bf{--bg:#0d070b;--stage:#1a0f18;--mag:#e2409a;--teal:#5fc3d6;--txt:#f3eef2;--muted:#b3a6b0;color:var(--txt);background:var(--bg);overflow:hidden;font-family:'Open Sans',Arial,sans-serif}
.bf *{box-sizing:border-box}
.bf .wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.bf .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* site: the shop's global heading / paragraph / form rules must not repaint the dark page */
.bf h1,.bf h2,.bf h3{color:inherit;font-family:inherit;text-transform:none;letter-spacing:normal}
.bf p{margin:0}
.bf p,.bf small,.bf summary,.bf h2{-webkit-hyphens:manual;hyphens:manual}   /* site: the shop's text rules split words ("pro-moție") */
.bf img{max-width:none}

/* 1 hero: the banner, full bleed, fading into the page colour */
.bf .hero{position:relative;background:var(--bg);cursor:pointer} /* a click / tap scrolls to the sign-up box (bf2026.tpl script) */
.bf .nw{white-space:nowrap} /* keeps "e-mail" whole (it used to break at its hyphen) */
.bf .hero img{display:block;width:100%;height:auto;max-width:1920px;margin:0 auto}
.bf .hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(0deg,var(--bg),transparent);pointer-events:none}

/* 1b other languages (2026-10-24): Tibor's art with the three Romanian lines removed (bf-hero-clean.webp /
   bf-hero-tall-clean.webp) and the same lines set as real text on top. Positions and sizes were measured on his
   1920x1080 and 1080x1350 art and are expressed in % of the picture box, so they scale with it; font sizes use
   the box width (cqw), with the viewport width as fallback (the hero is full-bleed up to 1920 px). Font: Exo 2,
   the face of the lettering in his art (loaded only on these pages). Romanian keeps his original picture. */
.bf .hero__box{position:relative;max-width:1920px;margin:0 auto;container-type:inline-size}
/* 25 Oct (owner): on computers the 16:9 picture filled more than the window below the site header, so the countdown and
   the sign-up box started below the bottom edge. Height at most 72% of the window, centred on the dark background;
   phones and touch screens keep the full-width picture. The picture lines scale with the box (cqw units). */
@media (min-width:701px) and (hover:hover) and (pointer:fine){ .bf .hero__box{max-width:min(1920px, calc(72vh * 16 / 9))} .bf .hero__box--wide{max-width:min(1920px, calc(72vh * 3.2))} }
.bf .hero-ov{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-family:'Exo 2','Open Sans',Arial,sans-serif;color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.bf .hero-ov > div{position:absolute;white-space:nowrap;transform:translateY(-50%)}
.bf .hero-ov .ov-date{left:11.1%;top:18.8%;font-weight:800;font-size:1.95vw;font-size:1.95cqw;letter-spacing:.2em} /* review 24 Oct: .32em was ~13% wider than Tibor's painted date */
.bf .hero-ov .ov-sub{left:6.77%;top:56.9%;font-weight:500;font-size:calc(2.4vw * var(--fit,1));font-size:calc(2.4cqw * var(--fit,1));color:#e4d8e1} /* --fit < 1 for languages whose line would reach the instrument pile */
.bf .hero-ov .ov-sub b{font-weight:800;color:#fff}
.bf .hero-ov .ov-cta{left:6.77%;top:81.3%;font-weight:700;font-size:1.55vw;font-size:1.55cqw;letter-spacing:.2em;color:#ddd3da}
.bf .hero-ov .ov-cta:after{content:"";display:inline-block;width:1.6em;height:2px;margin-left:.7em;vertical-align:middle;background:currentColor;opacity:.8}
@media (max-width:700px){
	.bf .hero-ov .ov-date{left:14.35%;top:6%;font-size:2.96vw;font-size:2.96cqw}
	.bf .hero-ov .ov-sub{left:6.67%;top:32%;font-size:3.8vw;font-size:3.8cqw} /* phones: room enough, no --fit */
	.bf .hero-ov .ov-cta{display:none}
}
/* 1c 26 Oct 2026 (Tibor, mail "Re: Blackfriday landing plan"): on computers (over 700 px) Tibor's WIDE art,
   1920x600 (bf-hero-wide.webp; other languages bf-hero-wide-clean.webp + the lines as text). Positions measured on his
   Romanian wide art against the clean one: date line centre 12.5 %, dash 130-193 px + text from 215 px; middle line
   from 131 px, centre 60.1 %; "DESCOPERĂ" from 130 px, centre 87.7 %, its line 306-351 px. The clean wide art has no dash
   before the date, so it is drawn here (colours sampled from his art). Phones keep the tall art (section 1b). */
@media (min-width:701px){
	.bf .hero__box--wide .hero-ov .ov-date{left:6.77%;top:12.5%;font-size:1.55vw;font-size:1.55cqw}
	.bf .hero__box--wide .hero-ov .ov-date:before{content:"";display:inline-block;width:3.33cqw;height:max(2px,.16cqw);margin-right:1.15cqw;vertical-align:middle;
		background:linear-gradient(90deg,#dc449b,#a07fb6,#63bcd2);border-radius:2px}
	.bf .hero__box--wide .hero-ov .ov-sub{left:6.82%;top:60.1%;font-size:calc(1.94vw * var(--fit,1));font-size:calc(1.94cqw * var(--fit,1))}
	.bf .hero__box--wide .hero-ov .ov-cta{left:6.77%;top:87.7%;font-size:1.11vw;font-size:1.11cqw}
	.bf .hero__box--wide .hero-ov .ov-cta:after{width:2.15em;margin-left:.9em;height:max(2px,.16cqw)}
	.bf .hero:has(.hero__box--wide):after{height:36px} /* the shorter art: the bottom fade must not dim "DESCOPERĂ" */
}

/* 2 countdown */
.bf .cd-band{text-align:center;padding:10px 16px 8px}   /* site: 16px sides so the four boxes do not touch the screen edge on phones */
.bf .cd-k{font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#d3c8d0;text-wrap:balance} /* review 24 Oct: the only line naming the start hour — tighter, brighter (was 13px .3em muted) */
.bf .cd{display:flex;justify-content:center;gap:12px;margin:14px auto 0;max-width:520px}
.bf .cd div{flex:1;border-radius:16px;padding:14px 6px 10px;background:linear-gradient(180deg,#24161f 0%,#170e15 100%);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px rgba(0,0,0,.45)}
.bf .cd b{display:block;font-weight:800;font-size:clamp(32px,6vw,52px);line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.bf .cd span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* 3 opt-in: flat dark card (no gradient borders or glows: user, 2026-10-23), pointing Rareș sticker on the right (desktop) */
.bf .optin-wrap{position:relative;max-width:720px;margin:44px auto 0}
.bf .optin{position:relative;z-index:1;border-radius:24px;padding:30px 30px 24px;background:linear-gradient(180deg,#24161f 0%,#170e15 100%);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 70px rgba(0,0,0,.45)}
.bf .optin h2{margin:0;font-size:clamp(24px,3.4vw,32px);line-height:1.15;font-weight:800;text-wrap:balance}
.bf .optin p{margin:10px 0 0;font-size:16px;line-height:1.55;color:#e6dbe1}
.bf .optin p b{color:#fff}
.bf .optin__row{display:flex;gap:10px;margin-top:20px}
.bf .optin input{flex:1;min-width:0;height:auto;font:inherit;font-size:16px;padding:15px 16px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(0,0,0,.35);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.05)} /* review 24 Oct: a visible field edge (was border:0) */
.bf .optin input{border-radius:14px !important} /* the shop's style_tiles.css forces square inputs (border-radius:0 !important); Tibor's design is rounded */
.bf .optin input::placeholder{color:#8f8290}
.bf .optin input:focus{outline:none;background:rgba(0,0,0,.5);box-shadow:0 0 0 3px rgba(214,51,142,.35)}
.bf .optin button{font:inherit;font-weight:800;font-size:16px;border:0;border-radius:14px;padding:15px 26px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#ea4ba2,#c92a84);box-shadow:0 10px 24px rgba(214,51,142,.35)}
.bf .optin button:hover{background:#c42583}
.bf .optin button:disabled{opacity:.6}
.bf .optin small{display:block;margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.45}
.bf .optin small a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bf .optin small a:hover{color:#fff}
.bf .optin__msg{margin:12px 0 0;font-weight:700;color:#ff7a8a}
.bf .optin__done{display:none}
.bf .optin.is-done form{display:none}.bf .optin.is-done .optin__done{display:block}
.bf .sticker{position:absolute;z-index:2;right:-180px;bottom:0;width:140px;height:auto;filter:drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 20px 30px rgba(0,0,0,.6))}

/* 4 tape divider */
.bf .tape{height:46px;margin:70px -40px;transform:rotate(-2deg);background:#e8e4e8 url(/static/img/bf2026/tape.webp) left center/auto 100% repeat-x}
.bf .tape--b{transform:rotate(1.5deg)}

/* 5 areas: max % only, a generic instrument per tile, not links before Friday */
.bf .areas h2{margin:0;text-align:center;font-size:clamp(24px,3.4vw,34px);font-weight:800}
.bf .areas > .wrap > p{margin:8px 0 0;text-align:center;color:var(--muted)}
.bf .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.bf .tile{position:relative;overflow:hidden;min-height:170px;border-radius:20px;padding:18px;background:radial-gradient(110% 90% at 100% 100%,rgba(95,195,214,.14),transparent 60%),linear-gradient(160deg,#26151f,#160c14);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 36px rgba(0,0,0,.4)}
.bf .tile .pct{font-weight:800;font-size:44px;line-height:1;color:#ff4fa8}
.bf .tile .pct small{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.bf .tile .name{position:relative;z-index:1;margin-top:10px;font-weight:700;font-size:17px;line-height:1.25;max-width:60%}
.bf .tile img{position:absolute;right:-10px;bottom:-10px;width:52%;max-height:85%;object-fit:contain;transform:rotate(-8deg)}
.bf .tile--soon{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(160deg,#e2409a,#9b1f67)}
.bf .tile--soon b{font-size:22px;font-weight:800}.bf .tile--soon span{margin-top:6px;font-size:14px;color:#ffd9ec}

/* 6 mini FAQ */
.bf .faq{max-width:760px;margin:0 auto;padding:0 16px 80px}
.bf .faq h2{margin:0 0 18px;text-align:center;font-size:clamp(22px,3vw,30px);font-weight:800}
.bf details{border-radius:16px;padding:16px 18px;margin-top:10px;background:linear-gradient(180deg,#24161f 0%,#170e15 100%);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 24px rgba(0,0,0,.3)}
.bf summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:block}
.bf summary::-webkit-details-marker{display:none}
.bf summary:after{content:"+";float:right;color:var(--mag);font-weight:800}
.bf details[open] summary:after{content:"–"}
.bf details p{margin:10px 0 0;color:#dacfd6;line-height:1.55}

@media (max-width:1100px){ .bf .sticker{display:none} } /* review 24 Oct: at 1024 px 28 px of the sticker fell off the screen (was 980px) */
@media (max-width:980px){ .bf .tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .bf .cd{gap:6px}
  .bf .optin{padding:22px 18px 18px;border-radius:16px}
  .bf .optin__row{flex-direction:column}
  .bf .tile{min-height:150px}.bf .tile .pct{font-size:36px}
  /* review 24 Oct: on ~165 px tiles the "%" and the area name ran into the picture (first tile: the speaker) */
  .bf .tile .name{font-size:15px}
  .bf .tile img{width:42%;max-height:55%;right:-6px;bottom:-6px}
  .bf .tape{margin:50px -40px;height:36px}
}

/* ---- site integration: full-width page (as the anniversary page, aniversar2026.css) -----------------
   The site frame caps page content at 1440px on a white column (.contentWrapper, index.tpl); the page
   root breaks out of it to the full window width so the dark page has no white or plum shoulders.
   100vw also counts a classic scrollbar, which would leave a few pixels of sideways scroll: this
   stylesheet loads on this page only, so the root clips horizontal overflow here ("hidden" first for
   browsers without "clip"). */
html { overflow-x:hidden;overflow-x:clip }
.bf.bf26 { margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw) }
/* review 24 Oct: the shop footer's own top margin (~29 px) showed the white page frame as a strip between the dark page
   and the grey footer. This stylesheet loads only on the Black Friday page, so the rule touches no other page. */
body .pageFooter { margin-top:0 !important } /* the shop's style_tiles.css sets .pageFooter margin-top with !important */