/* Black Friday 2026 (see assets/js/blackfriday.js). A thin white bar at the very top of the home and checkout pages, a big black card under the logo on the landing screen (right after it on a phone), and a paper price tag that hangs from the menu bar
   (home page once you scroll, checkout page header, and the blanket home page). */

/* ---- the thin white bar on top ---- */
.bf-bar{position:sticky;top:0;z-index:150;display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:0 16px;text-align:center;text-decoration:none;
  font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#15161a;background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
.sale-strip.bf-bar{position:fixed;height:var(--sale-strip-h);min-height:0;z-index:101;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:#15161a}
.bf-bar i{font-style:normal;opacity:.4;margin:0 2px}
.bf-bar-main{color:#0b0c0f}
.bf-bar .bf-clock{color:#15161a;font-variant-numeric:tabular-nums;letter-spacing:.06em}
a.bf-bar:focus-visible{outline:2px solid #0b0c0f;outline-offset:-4px}
@media (max-width:640px){.bf-bar,.sale-strip.bf-bar{font-size:10px;letter-spacing:.1em;gap:6px}}
.bf-clock{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- the landing screen: a big black card right under the logo ---- */
.bf-hero{position:absolute;z-index:5;left:50%;top:calc(var(--sale-strip-h,0px) + clamp(98px,9.2vw,132px));display:flex;flex-direction:column;align-items:center;gap:6px;max-width:calc(100% - 32px);padding:16px clamp(28px,3.6vw,56px) 14px;border-radius:26px;
  text-align:center;text-decoration:none;color:#fff;font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(120% 140% at 50% 0%,#1d1f25 0%,#0b0c0f 62%);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.16) inset,0 0 60px -22px rgba(240,165,102,.55);
  opacity:0;transform:translate(-50%,-14px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1),border-color .25s ease,box-shadow .25s ease}
.bf-hero.in{opacity:1;transform:translate(-50%,0)}
.bf-hero.in:hover{transform:translate(-50%,-2px);border-color:rgba(240,165,102,.65)}
.bf-hero-main{display:flex;align-items:baseline;justify-content:center;gap:.5em;font:800 clamp(20px,2.5vw,36px)/1.08 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:-.03em;white-space:nowrap}
.bf-hero-off{background:linear-gradient(95deg,#ffe3ae 0%,#f6b878 55%,#ea9658 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.bf-hero-sub{display:flex;align-items:center;gap:7px;font-size:clamp(12px,1vw,14px);font-weight:600;color:rgba(255,255,255,.62)}
.bf-hero:focus-visible{outline:3px solid #f6b878;outline-offset:3px}
/* on a phone the landing screen stays clear: the card sits in the page right after it, full width, and the other copy is not shown */
.bf-hero-after{display:none}
@media (max-width:640px){
  .bf-hero-top{display:none}
  .bf-hero-after{display:flex;position:relative;left:auto;top:auto;z-index:1;opacity:1;transform:none;width:calc(100% - 40px);max-width:420px;margin:44px auto 40px;padding:24px 26px 22px;gap:9px;border-radius:22px}
  .bf-hero-after.in:hover,.bf-hero-after:hover{transform:none}
  .bf-hero-main{font-size:clamp(21px,6.2vw,27px)}
  .bf-hero-sub{font-size:13px}
  /* a lighter card on a phone: warm peach with dark text (the page around it is dark) */
  .bf-hero-after{color:#2a1608;background:linear-gradient(180deg,#f9cfa3 0%,#efae75 100%);border-color:rgba(255,255,255,.35);
    box-shadow:0 24px 50px -24px rgba(240,165,102,.55),0 1px 0 rgba(255,255,255,.6) inset}
  .bf-hero-after .bf-hero-off{background:none;color:#8a3d0a;-webkit-text-fill-color:#8a3d0a}
  .bf-hero-after .bf-hero-sub{color:rgba(42,22,8,.72)}
}
@media (prefers-reduced-motion:reduce){.bf-hero{transition:opacity .2s ease}}

/* ---- the paper price tag, tied to the menu bar ----
   It hangs from the bottom edge of the bar and swings a little, like a tag tied to the nightstand. */
.bf-tag{position:absolute;top:calc(100% - 12px);right:clamp(16px,4.5vw,72px);z-index:0;display:flex;flex-direction:column;align-items:center;width:150px;text-decoration:none;color:#2a1a0e;
  font-family:'Inter',system-ui,sans-serif;transform-origin:50% 0;opacity:0;transform:translateY(-120%);pointer-events:none;
  transition:opacity .5s ease,transform .9s cubic-bezier(.2,.9,.25,1.15)}
.bf-tag[hidden]{display:none}
.bf-tag.in{opacity:1;transform:none;pointer-events:auto}
.bf-tag-sway{display:flex;flex-direction:column;align-items:center;width:100%;transform-origin:50% 0;animation:bfSway 7s ease-in-out infinite}
.bf-tag:hover .bf-tag-sway,.bf-tag:focus-visible .bf-tag-sway{animation-play-state:paused}
@keyframes bfSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.bf-tag-string{width:2px;height:30px;background:linear-gradient(#cdb28a,#eadbbd);border-radius:2px}
.bf-tag-paper{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:30px 14px 14px;border-radius:14px 14px 18px 18px;text-align:center;
  background:linear-gradient(165deg,#fbf3e4 0%,#f1e3c9 100%);box-shadow:0 22px 40px -18px rgba(40,22,8,.6),0 2px 0 rgba(255,255,255,.6) inset}
.bf-tag-paper::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(90,64,38,.35);border-radius:10px;pointer-events:none}
.bf-tag-hole{position:absolute;top:11px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#2a1a0e;box-shadow:0 0 0 3px #e9d8b9 inset,0 1px 0 rgba(255,255,255,.7)}
.bf-tag-name{font:800 15px/1.1 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:-.01em}
.bf-tag-up{margin-top:8px;font-size:12px;color:rgba(42,26,14,.7)}
.bf-tag-big{margin-top:1px;font:800 34px/1 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:-.04em;white-space:nowrap}
.bf-tag-line{width:70%;margin:11px 0 9px;border-top:1.5px dashed rgba(90,64,38,.35)}
.bf-tag-end{font-size:12px;font-weight:600}
.bf-tag-go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 14px;border-radius:999px;background:#2a1a0e;color:#fbf3e4;font-size:12.5px;font-weight:700;transition:transform .2s ease}
.bf-tag:hover .bf-tag-go{transform:translateX(2px)}
.bf-tag-go svg{width:13px;height:13px}
.bf-tag:focus-visible{outline:none}
.bf-tag:focus-visible .bf-tag-paper{outline:3px solid #2a1a0e;outline-offset:3px}
@media (max-width:640px){
  .bf-tag{width:112px;right:14px}
  .bf-tag-string{height:22px}
  .bf-tag-paper{padding:30px 10px 12px}
  .bf-tag-name{font-size:13px}
  .bf-tag-big{font-size:26px}
  .bf-tag-up,.bf-tag-end{font-size:11px}
  .bf-tag-go{padding:6px 11px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.bf-tag{transition:opacity .2s ease}.bf-tag-sway{animation:none}}
/* on the new landing screen the banner is the sale: the tag stays up inside the bar until the menu bar leaves the landing screen, and it goes with the bar when the bar hides */
html.bf-landing .nav.nav-in-hero .bf-tag,.nav.nav-hidden .bf-tag{opacity:0;transform:translateY(-120%);pointer-events:none}