/* Black Friday landing page (/black-friday). Loaded through StoreTop CSSFile="black-friday". */

/* Floated like the other pages' content: .bdj has margin-bottom:-385px, and the footer (.dealBot, clear:both) only sits below floated content. */
.bfPage { float:left; width:100%; font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Segoe UI", "Tahoma", "Arial", sans-serif; color:#4f4f4f; }
.bfIn { max-width:1000px; margin:0 auto; padding:0 10px; }
.bfPage h1, .bfPage h2, .bfPage h3 { font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "Segoe UI", "Tahoma", "Arial Narrow", "Helvetica", "Arial", sans-serif; font-weight:600; font-stretch:condensed; margin:0; padding:0; }
.bfPage a { color:#006CC3; }

/* Hero */
.bfHero { background:#0F3B67; background-image:linear-gradient(135deg, #0F3B67 0%, #0a2b4d 60%, #006CC3 140%); color:#fff; padding:40px 0; }
.bfHero .bfIn { display:flex; align-items:center; gap:40px; }
.bfHeroText { flex:1 1 auto; }
.bfEyebrow { color:#D9E731; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
.bfHero h1 { color:#fff; font-size:46px; line-height:1.05; }
.bfLead { font-size:17px; line-height:1.5; color:#d6e4f2; margin:14px 0 20px 0; max-width:560px; }
.bfStats { display:flex; gap:36px; }
.bfStatLabel { display:block; font-size:12px; color:#9fbad6; text-transform:uppercase; letter-spacing:.5px; }
.bfStatValue { display:block; font-size:26px; font-weight:700; color:#fff; margin-top:2px; }
.bfHero .bfHeroBtn { display:inline-block; width:auto; height:auto; padding:10px 24px; margin-top:20px; font-size:18px; }

/* Signup card */
.bfSignup { flex:0 0 320px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:22px; }
.bfSignup h2 { color:#fff; font-size:20px; margin-bottom:14px; }
.bfSignupEmail { box-sizing:border-box; width:100%; padding:10px 12px; font-size:15px; border:1px solid #ccd6e0; border-radius:3px; margin-bottom:10px; }
.bfCaptcha { margin-bottom:10px; transform:scale(.92); transform-origin:0 0; }
.bfSignupBtn.bdjBtn { box-sizing:border-box; width:100%; padding:10px 0; font-size:18px; border-radius:3px; }
.bfSignupMsg { margin:10px 0 0 0; font-size:14px; line-height:1.4; padding:8px 10px; border-radius:3px; }
.bfSignupOk { background:#D9E731; color:#0F3B67; }
.bfSignupErr { background:#fbe3e3; color:#9b1c1c; }
.bfSignupNote { margin:10px 0 0 0; font-size:12px; color:#9fbad6; }

/* Body */
.bfBody { padding:10px 0 50px 0; }
.bfBlock { margin-top:34px; }
.bfBlock h2 { font-size:26px; color:#0F3B67; margin-bottom:14px; }
.bfBlock h2 small { font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight:400; font-stretch:normal; font-size:14px; color:#7a8794; margin-left:8px; }
.bfEmpty { margin:30px 0; padding:24px; background:#fff; border-radius:6px; text-align:center; }

/* Ending soon */
.bfEndingRow { display:flex; gap:14px; }
.bfEnding { flex:1 1 0; display:flex; gap:12px; align-items:center; background:#fff; border-radius:6px; padding:12px; text-decoration:none; box-shadow:0 1px 3px rgba(15,59,103,.12); }
.bfEnding img { width:56px; height:56px; object-fit:contain; flex:0 0 56px; }
.bfEndingText strong { display:block; color:#0F3B67; font-size:15px; }
.bfEndingText span { display:block; color:#4f4f4f; font-size:13px; margin-top:2px; }
.bfEndingText em { display:block; font-style:normal; color:#c0392b; font-size:13px; font-weight:700; margin-top:2px; }

/* Filter bar */
.bfFilters { position:sticky; top:52px; z-index:20; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:34px; padding:12px 0; background:#F0F3F9; border-bottom:1px solid #dde4ec; }
.bfFilterGroup { display:flex; flex-wrap:wrap; gap:8px; }
.bfPage a.bfChip { display:inline-block; padding:6px 14px; border-radius:16px; background:#fff; border:1px solid #cfd9e3; color:#0F3B67; font-size:13px; text-decoration:none; }
.bfPage a.bfChip:hover { border-color:#006CC3; }
.bfPage a.bfChipOn { background:#0F3B67; border-color:#0F3B67; color:#fff; }
.bfSection { scroll-margin-top:110px; }

/* Cards */
.bfGrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.bfGrid3 { grid-template-columns:repeat(3, 1fr); }
.bfCard { background:#fff; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(15,59,103,.12); }
.bfCardImg { display:flex; align-items:center; justify-content:center; height:150px; background:#f6f8fb; }
.bfCardImg img { max-width:120px; max-height:120px; width:auto; height:auto; object-fit:contain; }
.bfCardBig .bfCardImg { height:190px; }
.bfCardBig .bfCardImg img { max-width:160px; max-height:160px; }
.bfCardBody { padding:12px 14px 14px 14px; display:flex; flex-direction:column; flex:1 1 auto; }
.bfTags { min-height:20px; }
.bfTag { display:inline-block; font-size:11px; padding:2px 7px; border-radius:3px; background:#eaf2fb; color:#006CC3; margin:0 4px 4px 0; }
.bfTagOff { background:#D9E731; color:#0F3B67; font-weight:700; }
.bfPage a.bfCardName { display:block; color:#0F3B67; font-size:16px; font-weight:700; text-decoration:none; margin:2px 0 4px 0; }
.bfPage a.bfCardName:hover { text-decoration:underline; }
.bfCardBig a.bfCardName { font-size:19px; }
.bfCardTagline { font-size:13px; line-height:1.4; color:#6b7785; margin:0 0 6px 0; }
.bfPrice strong { font-size:20px; color:#0F3B67; }
.bfPrice s { font-size:13px; color:#98a2ad; margin-left:6px; }
.bfSave { font-size:12px; color:#2e7d32; font-weight:700; min-height:16px; }
.bfMeta { display:flex; justify-content:space-between; gap:6px; font-size:11px; color:#7a8794; margin:6px 0 10px 0; flex:1 1 auto; align-items:flex-end; }
.bfEnds { color:#c0392b; font-weight:700; }
.bfPage .bfBtn.mainGreenBuyBtn { display:block; width:auto; height:auto; padding:8px 0; font-size:16px; border-radius:3px; }

/* Always available */
.bfAlwaysRow { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.bfAlwaysItem { background:#fff; border-radius:6px; padding:14px; box-shadow:0 1px 3px rgba(15,59,103,.12); }
.bfPage a.bfBuyNow { display:block; margin-top:10px; padding:8px 0; font-size:15px; border-radius:3px; background:#006CC3; color:#fff !important; }
.bfPage a.bfBuyNow:hover { background:#0086F1; }

/* Promises, teaser, faq */
.bfPromises, .bfComing { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:34px; }
.bfComing { grid-template-columns:repeat(4, 1fr); margin-top:0; }
.bfPromises div, .bfComing div { background:#fff; border-radius:6px; padding:16px; box-shadow:0 1px 3px rgba(15,59,103,.12); }
.bfPromises strong, .bfComing strong { display:block; color:#0F3B67; font-size:16px; margin-bottom:4px; }
.bfPromises span, .bfComing span { font-size:13px; line-height:1.45; color:#6b7785; }
.bfCantWait { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; background:#fff; border-radius:6px; padding:20px 24px; box-shadow:0 1px 3px rgba(15,59,103,.12); }
.bfCantWait h2 { font-size:24px; color:#0F3B67; }
.bfCantWait p { margin:4px 0 0 0; color:#6b7785; }
.bfCantWait .bfBtn.mainGreenBuyBtn { flex:0 0 auto; padding:10px 24px; }
.bfFaq h3 { font-size:17px; color:#0F3B67; margin-top:14px; }
.bfFaq p { margin:4px 0 0 0; line-height:1.5; }

@media only screen and (max-width: 1036px) {
    .bfGrid { grid-template-columns:repeat(3, 1fr); }
    .bfComing { grid-template-columns:repeat(2, 1fr); }
}

@media only screen and (max-width: 760px) {
    .bfHero { padding:28px 0; }
    .bfHero .bfIn { flex-direction:column; align-items:stretch; gap:24px; }
    .bfHero h1 { font-size:34px; }
    .bfSignup { flex:none; }
    .bfEndingRow { flex-direction:column; }
    .bfGrid, .bfGrid3 { grid-template-columns:repeat(2, 1fr); }
    .bfAlwaysRow, .bfPromises { grid-template-columns:1fr; }
    .bfCantWait { flex-direction:column; align-items:stretch; text-align:center; }
}

@media only screen and (max-width: 680px) {
    .bfGrid, .bfGrid3, .bfComing { grid-template-columns:1fr; }
}