/* =====================================================================
   fbnew.css  -  new header / nav / homepage / footer  (Fatboy Cellular)
   Loaded from ECommerce/UserControl/Header.ascx.
   Editing this file does NOT restart the website.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap');

:root{--fb-blue:#025597;--fb-dark:#0b2545;--fb-orange:#ff6000;--fb-orange2:#f26b1d;--fb-line:#dbe5ef;--fb-soft:#f3f7fb}

/* ---------------- header ---------------- */
.hx{font-family:Arial,Helvetica,sans-serif}
.hx a{text-decoration:none!important}
.hx-tt{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid #e3e8ee;font-size:15px;color:#333;background:#f5f8fb}
.hx-tt b{color:var(--fb-dark)}
.hx-tt .r{display:flex;gap:30px;align-items:center}
.hx-tt a{font:bold 15px Arial!important;color:var(--fb-dark)!important}
.hx-tt svg{width:18px;height:18px;vertical-align:-3px;margin-right:6px}
.hx-main{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:14px 8px;background:#fff}

.hx-logo{display:flex!important;align-items:center;gap:10px}
.hx-logo .mz{display:block;width:66px;height:66px;border-radius:50%;overflow:hidden;position:relative;background:#fff;flex:0 0 66px;box-shadow:0 0 0 3px var(--fb-dark)}
.hx-logo .mz img{position:absolute;height:110px;width:495px;max-width:none;left:-24px;top:-26px}
.hx-logo .t1{display:block;font:900 40px/0.95 "Arial Black",Arial;color:#1565c0;letter-spacing:1px}
.hx-logo .t2{display:flex;align-items:center;gap:8px;font:900 28px/1.15 "Arial Black",Arial;color:#111;letter-spacing:6px}
.hx-logo .t2 span{display:inline-block;font:bold 11px/14px Arial;letter-spacing:.8px;border:1.5px solid #111;border-radius:10px;padding:3px 9px;white-space:nowrap}

.hx-mid{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;max-width:860px;justify-self:center;min-width:0}
.hx-bts{font:bold 13px Arial;color:var(--fb-dark);white-space:nowrap}
.hx-bts .bt{display:inline-block;background:var(--fb-orange);color:#fff;font:900 12px Arial;border-radius:4px;padding:2px 7px;letter-spacing:.5px;margin:0 5px 0 3px}
.hx-bts .sub{font:bold 12.5px Arial;color:#c45a00}

/* the existing search control (MainSelectBox2.ascx) restyled */
.hx-search{width:100%}
.hx-search .topselect-content0,.hx-search .topselect-content0 > div{width:100%}
.hx-search .topselect-content0 br{display:none}
.hx-search .topselect-content0 .topselect-content{display:flex!important;width:100%;float:none!important;border:2px solid var(--fb-blue);border-radius:28px;overflow:hidden;background:#fff;margin:0!important;padding:0!important}
.hx-search input[type=text]{flex:1;border:0!important;outline:none;padding:0 22px!important;height:48px!important;font:16px Arial!important;width:auto!important;margin:0!important;background:#fff!important;box-shadow:none!important}
/* the search.png image is hidden (object-position) and a white magnifier is drawn on a blue square */
.hx-search input[type=image],.hx-search input[type=submit],.hx-search button,.hx-search a.btn-search{color:transparent!important;font-size:0!important;flex:none;width:70px!important;height:48px!important;padding:0!important;margin:0!important;border:0!important;box-sizing:border-box;cursor:pointer;object-position:-9999px 0;
  background:#025597 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center/26px no-repeat!important}
.hx-search .ui-autocomplete,.ac_results{z-index:99999!important}

.hx-acts{display:flex;align-items:center;gap:18px}
.hx-acts > a.ic{display:flex!important;flex-direction:column;align-items:center;gap:3px;font:bold 15px Arial!important;color:var(--fb-dark)!important;position:relative}
.hx-acts > a.ic svg{width:34px;height:34px}
.hx-acts .cnt{position:absolute;top:-6px;right:-6px;background:#e53935;color:#fff;font:bold 12px Arial;border-radius:11px;min-width:21px;height:21px;line-height:21px;text-align:center;padding:0 4px;box-sizing:border-box}
.hx-acts a.login{border:2px solid var(--fb-blue);color:var(--fb-blue)!important;font:bold 14px Arial!important;padding:7px 16px;border-radius:22px;white-space:nowrap}
.hx-acts a.reg{background:var(--fb-orange);color:#fff!important;font:bold 14px Arial!important;padding:9px 16px;border-radius:22px;margin-left:-8px;white-space:nowrap}
.hx-acts .hi{font:bold 13px Arial;color:var(--fb-dark);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.hx-acts .hi small{display:block;font:11px Arial;color:#6b7a8c}
/* Log In above Register (and "Hi, name" above Log Out) */
.hx-auth{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.hx-auth a.login,.hx-auth a.reg{display:block!important;text-align:center;margin:0!important;font:bold 13px Arial!important;padding:6px 14px!important;border-radius:18px!important;line-height:1.2}
.hx-auth a.login{padding:4px 14px!important}
.hx-auth .hi{text-align:center}

/* ---------------- nav bar (menu.html) ---------------- */
.navbarnav{width:100%!important;display:flex!important;overflow:visible!important;border-bottom:0!important;margin:0!important}
.navbarnav > a,.navbarnav > .fbdd > a{flex:1 1 auto;float:none!important;padding:15px 6px!important;font:bold 16px Arial!important;color:#fff!important;text-align:center;white-space:nowrap;border-bottom:0!important}
.navbarnav > a:hover,.navbarnav > .fbdd:hover > a{background:#fff!important;color:var(--fb-blue)!important;border-bottom:0!important}
.navbarnav > .navbarnavclear{flex:0 0 auto;background:purple}
.navbarnav > .navbarnavclear a{float:none!important;display:block;padding:15px 18px!important;font:bold 14px Arial!important;color:#fff!important;white-space:nowrap}
.navbarnav > .navbarnavclear a:hover{background:#fff!important;color:purple!important}
.fbdd{position:relative;flex:1 1 auto;display:flex}
.fbdd > a{width:100%}
.fbdd > a:after{content:" \25BE";font-size:12px}
.fbdd .fbdd-menu{display:none;position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid var(--fb-line);border-top:3px solid var(--fb-orange);box-shadow:0 8px 18px rgba(0,0,0,.15);z-index:1000}
.fbdd:hover .fbdd-menu{display:block}
.fbdd .fbdd-menu a{display:block;float:none!important;padding:10px 16px!important;font:bold 14px Arial!important;color:var(--fb-dark)!important;text-align:left;border-bottom:1px solid #eef2f6}
.fbdd .fbdd-menu a:hover{background:var(--fb-soft)!important;color:var(--fb-blue)!important}

/* ---------------- homepage ---------------- */
.hp{font-family:Arial,Helvetica,sans-serif;color:#222;margin:0 0 18px}
.hp h2{font-size:18px;color:var(--fb-blue);margin:26px 0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--fb-blue);padding-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.hp h2 .h2t{display:inline-flex;align-items:center;gap:8px}
.hp h2 .h2t svg{width:24px;height:24px;color:var(--fb-orange2)}
.hp h2 .h2t svg.ship{width:34px;height:26px}
.hp h2 a{font:bold 14px Arial!important;text-transform:none;color:var(--fb-blue)!important;text-decoration:none!important}

.hp-trust{display:grid;grid-template-columns:repeat(4,1fr);background:var(--fb-soft);border:1px solid var(--fb-line);border-radius:8px;margin-top:8px}
.hp-trust div{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-right:1px solid var(--fb-line);font-size:13px;color:#666;white-space:nowrap}
.hp-trust div:last-child{border-right:0}
.hp-trust b{font:bold 14px Arial;color:var(--fb-blue)}
.hp-trust svg{width:17px;height:17px;color:var(--fb-blue);flex:none}

.hp .eta{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.hp .eta a{border:1px solid #d3dbe5;border-radius:6px;padding:9px 4px;text-align:center;font:bold 14px Arial!important;color:#1b2c6b!important;background:#fff;text-decoration:none!important;white-space:nowrap}
.hp .eta a.new{border-color:#e53935;color:#e53935!important;background:#fff5f5}
.hp .eta a:hover{border-color:var(--fb-blue)}

.hp-brands{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.hp a.wt{position:relative;display:flex!important;flex-wrap:wrap;align-content:center;justify-content:center;column-gap:7px;height:84px;padding:6px;border:1px solid var(--fb-line);border-radius:10px;background:#fff;text-decoration:none!important;overflow:hidden;transition:box-shadow .18s,transform .18s}
.hp a.wt:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--fb-blue),#1e88e5)}
.hp a.wt:hover{box-shadow:0 6px 16px rgba(2,85,151,.15);transform:translateY(-2px)}
.hp a.wt .wico{display:flex;align-items:center;width:21px;height:21px;color:var(--fb-blue)}
.hp a.wt .wico svg{width:21px;height:21px}
.hp a.wt .wn{font:900 17px/1.1 Montserrat,Arial;background:linear-gradient(90deg,#0b2545,#1e88e5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0b2545;white-space:nowrap}
.hp a.wt .ws{width:100%;text-align:center;font:12px Arial;color:#6b7a8c;margin-top:1px}
.hp a.wt .wl{width:18px;height:2px;background:var(--fb-orange);margin:4px calc(50% - 9px) 3px;border-radius:2px}
.hp a.wt .wc{width:100%;text-align:center;font:bold 11.5px Arial;color:var(--fb-blue)}

.fbf{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.fbf a{grid-column:span 2;display:flex;flex-direction:column;background:#fff;border:1px solid #e3e6eb;border-radius:10px;overflow:hidden;text-decoration:none!important;color:#1b2430;transition:box-shadow .2s,transform .2s}
.fbf a.big{grid-column:span 3}
.fbf a:hover{box-shadow:0 6px 18px rgba(0,0,0,.14);transform:translateY(-2px)}
.fbf img{width:100%;height:auto;aspect-ratio:10/3;object-fit:cover;display:block}
.fbf .cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px}
.fbf .t{font-weight:bold;font-size:15px;line-height:1.25;color:#1b2430}
.fbf .s{font-size:12.5px;color:#6b7480;margin-top:2px}
.fbf .go{flex:none;background:var(--fb-orange2);color:#fff;font-weight:bold;font-size:13px;padding:7px 13px;border-radius:6px;white-space:nowrap}

.fbh{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid #e3e6eb;border-radius:10px;padding:10px 0}
.fbh .row{display:flex;flex-direction:column;gap:2px;padding:0 16px;border-left:1px solid #edf0f3}
.fbh .row:first-child{border-left:0}
.fbh .b{font-weight:800;font-size:14px;color:#0f4c81;padding-bottom:5px;margin-bottom:3px;border-bottom:2px solid var(--fb-orange2);align-self:flex-start}
.fbh a{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:14px;font-weight:bold;color:#1b2430!important;text-decoration:none!important}
.fbh a:hover{color:var(--fb-orange2)!important}
.fbh a i{font-style:normal;font-size:12px;font-weight:bold;color:#8a929c}

.hp .co{display:grid;grid-template-columns:2fr 1fr;gap:20px;background:#f7f9fb;border:1px solid #dde4ec;border-radius:10px;padding:20px 22px;font-size:14px;color:#444;line-height:1.6}
.hp .co h3{margin:0 0 8px;font:bold 15px Arial;color:var(--fb-blue);text-transform:uppercase}
.hp .co p{font-size:14px!important;font-weight:normal!important;color:#555!important;text-align:left!important;margin:0 0 10px}
.hp .co .stats{display:flex;gap:22px;margin:12px 0 14px}
.hp .co .stats b{display:block;font:800 24px/1 Montserrat,Arial;color:#0f4c81}
.hp .co .stats span{display:block;font-size:12px;color:#6b7480;margin-top:4px}
.hp .co .soc a{display:inline-block;border:1px solid #cfd8e2;border-radius:20px;padding:6px 14px;margin:0 6px 6px 0;color:var(--fb-blue)!important;font:bold 13px Arial!important;text-decoration:none!important;background:#fff}
.hp .co .soc a.off{border-style:dashed;color:#999!important}
.hp .co .reg{display:inline-block;background:var(--fb-orange);color:#fff!important;font:bold 14px Arial!important;padding:9px 20px;border-radius:22px;text-decoration:none!important}

/* ---------------- footer ---------------- */
#footer.ftNew{width:auto!important;max-width:none!important;background:#0b3d68;color:#cfe0f0;margin-top:24px;font:14px/1.6 Arial,Helvetica,sans-serif;text-align:left;height:auto;padding:0;font-weight:normal;margin-bottom:0}
.ftNew .ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:28px;padding:28px 28px 18px;text-align:left}
.ftNew h4{color:#fff;font-size:15px;margin:0 0 10px;letter-spacing:.4px;text-transform:uppercase}
.ftNew h4:after{content:"";display:block;width:28px;height:2px;background:var(--fb-orange2);margin-top:6px}
.ftNew a{color:#cfe0f0!important;text-decoration:none!important}
.ftNew a:hover{color:#fff!important}
.ftNew ul{list-style:none;margin:0;padding:0}
.ftNew li{margin:3px 0}
.ftNew .ci{display:flex;gap:8px;align-items:flex-start;margin:4px 0}
.ftNew .ci svg{width:16px;height:16px;margin-top:3px;flex:none;color:var(--fb-orange2)}
.ftNew .hrs{display:flex;justify-content:space-between;max-width:300px}
.ftNew .hrs.off{color:#9fb8cf}
.ftNew .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.ftNew .chips span{border:1px solid #3d6a92;border-radius:4px;padding:3px 8px;font-size:12px;color:#e6eef6}
.ftNew .bot{border-top:1px solid #23557f;padding:12px 80px 12px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:#9fb8cf}
#toTop{position:fixed;right:22px;bottom:70px;z-index:9998;width:44px;height:44px;border-radius:50%;background:#0f4c81;color:#fff;border:0;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);font:bold 11px Arial;display:none;flex-direction:column;align-items:center;justify-content:center;line-height:1}
#toTop.show{display:flex}

/* ---------------- smaller screens ---------------- */
@media (max-width:1100px){
  .hx-main{grid-template-columns:auto 1fr;gap:14px}
  .hx-acts{grid-column:1 / -1;justify-content:flex-end}
  .hp-brands{grid-template-columns:repeat(4,1fr)}
  .hp .eta{grid-template-columns:repeat(6,1fr)}
  .fbh{grid-template-columns:repeat(3,1fr);row-gap:12px}
  .ftNew .ft{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .hx-tt{flex-direction:column;gap:4px}
  .navbarnav{flex-wrap:wrap}
  .navbarnav > a,.navbarnav > .fbdd > a{padding:10px 8px!important;font-size:14px!important}
  .hx-main{grid-template-columns:1fr}
  .hx-bts{white-space:normal;text-align:center}
  .hp-trust{grid-template-columns:1fr 1fr}
  .hp-brands{grid-template-columns:repeat(2,1fr)}
  .hp .eta{grid-template-columns:repeat(3,1fr)}
  .fbf{grid-template-columns:1fr}.fbf a,.fbf a.big{grid-column:auto}
  .fbh{grid-template-columns:1fr 1fr}.fbh .row{border-left:0}
  .hp .co{grid-template-columns:1fr}
  .ftNew .ft{grid-template-columns:1fr}
}
@media print{#toTop{display:none!important}}

/* ---------------- styles that used to live in the old menu.html ----------------
   (brand.aspx, Brand_Universal.aspx, HotModels.aspx and other list pages use them) */
.column{float:left;width:33.33%;padding:5px;background-color:#fff;height:auto;text-align:center}
.column a{float:none;color:black;padding:5px;text-decoration:none;display:block;text-align:left}
.column a:hover{clear:both;color:darkblue;border-radius:0}
.columnbrand{float:center;width:33.33%;padding:5px;background-color:#fff;height:auto;text-align:center}
.columnbrand a{float:none;color:black;padding:5px;text-decoration:none;display:block;text-align:left}
.columnbrand a:hover{clear:both;color:darkblue;border-radius:0}
.row:after{content:"";display:table;clear:both}
.fbh .row:after{display:none}

/* ---------------- wide layout (same as ECommerce.css; here too in case a
   visitor's browser still has an old copy of ECommerce.css saved) ---------------- */
body{max-width:1600px!important;padding:0 12px;box-sizing:border-box}
.wrapper,#banner2,#rightcontent{max-width:100%!important}
#Header,#banner,.column2{width:100%!important}
table[width="1100px"],table[width="1100"]{width:100%!important}

/* Prop 65 page: normal (not bold) paragraph text */
.p65 p{font-weight:normal!important;color:#1b2430!important}

/* ---------------- inner pages: New Arrivals / Accessories / Download ---------------- */
.pg{font-family:Arial,Helvetica,sans-serif;color:#1b2430;margin:6px 0 30px}
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 22px;margin:4px 0 18px;border-radius:12px;background:linear-gradient(90deg,#0b3d68,#025597 60%,#1e88e5);color:#fff}
.pg-head h1{margin:0;font:900 26px/1.15 Montserrat,Arial;color:#fff;letter-spacing:.3px}
.pg-head p{margin:6px 0 0;font-size:14px;color:#d6e6f5}
.pg-head .tag{flex:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:6px 14px;font:bold 13px Arial;color:#fff;white-space:nowrap}
.pg h2{font-size:17px;color:var(--fb-blue);margin:22px 0 12px;display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--fb-blue);padding-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.pg h2 small{font:13px Arial;color:#6b7a8c;text-transform:none;margin-left:auto}

/* new arrival date cards */
.na-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.na-grid a{position:relative;display:flex;flex-direction:column;align-items:center;padding:14px 8px 12px;border:1px solid var(--fb-line);border-radius:10px;background:#fff;text-decoration:none!important;transition:box-shadow .18s,transform .18s}
.na-grid a:hover{box-shadow:0 6px 16px rgba(2,85,151,.15);transform:translateY(-2px);border-color:var(--fb-blue)}
.na-grid .mo{font:bold 12px Arial;color:#6b7a8c;text-transform:uppercase;letter-spacing:1px}
.na-grid .dd{font:900 34px/1.05 Montserrat,Arial;color:var(--fb-dark);margin:2px 0}
.na-grid .wd{font:13px Arial;color:#6b7a8c}
.na-grid .go{margin-top:8px;font:bold 13px Arial;color:var(--fb-blue)}
.na-grid a.new{border-color:#e53935;background:#fff8f7}
.na-grid a.new .dd{color:#e53935}
.na-grid .nb{position:absolute;top:8px;right:8px;background:#e53935;color:#fff;font:bold 10px Arial;border-radius:3px;padding:2px 5px;letter-spacing:.5px}

/* accessory category cards */
.ac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ac-grid a{display:flex;align-items:center;gap:14px;padding:16px 16px;border:1px solid var(--fb-line);border-radius:10px;background:#fff;text-decoration:none!important;transition:box-shadow .18s,transform .18s}
.ac-grid a:hover{box-shadow:0 6px 16px rgba(2,85,151,.15);transform:translateY(-2px);border-color:var(--fb-blue)}
.ac-grid .ic{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:var(--fb-soft);color:var(--fb-blue)}
.ac-grid .ic svg{width:28px;height:28px}
.ac-grid .tx{flex:1;min-width:0}
.ac-grid b{display:block;font:bold 15.5px Arial;color:var(--fb-dark)}
.ac-grid span.d{display:block;font:13px Arial;color:#6b7a8c;margin-top:3px}
.ac-grid i{flex:none;font-style:normal;font:bold 18px Arial;color:var(--fb-orange2)}

/* download page */
.dl-inv{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 22px;border:1px solid var(--fb-line);border-radius:12px;background:var(--fb-soft)}
.dl-inv h3{margin:0 0 6px;font:bold 18px Arial;color:var(--fb-dark)}
.dl-inv p{margin:0;font-size:14px!important;color:#555!important;font-weight:normal!important;line-height:1.5}
.dl-inv label{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#333;margin-top:10px;cursor:pointer}
.dl-btn{display:inline-flex;align-items:center;gap:8px;background:var(--fb-orange);color:#fff!important;font:bold 15px Arial;text-decoration:none!important;padding:12px 24px;border-radius:24px;white-space:nowrap}
.dl-btn:hover{background:#e55600}
.dl-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.dl-forms a{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--fb-line);border-radius:10px;background:#fff;text-decoration:none!important;transition:box-shadow .18s}
.dl-forms a:hover{box-shadow:0 6px 16px rgba(2,85,151,.15);border-color:var(--fb-blue)}
.dl-forms .pdf{flex:none;width:46px;height:56px;border-radius:6px;background:#e53935;color:#fff;font:bold 13px Arial;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;box-sizing:border-box;position:relative}
.dl-forms .pdf:before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 12px 12px 0;border-color:transparent #fff transparent transparent}
.dl-forms .tx{flex:1}
.dl-forms b{display:block;font:bold 15.5px Arial;color:var(--fb-dark)}
.dl-forms span.d{display:block;font:13px Arial;color:#6b7a8c;margin-top:3px}
.dl-forms i{font-style:normal;font:bold 13px Arial;color:var(--fb-blue);white-space:nowrap}
.dl-note{font-size:13px!important;color:#6b7a8c!important;margin:10px 0 0!important;font-weight:normal!important}
@media(max-width:900px){.ac-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.pg-head{flex-direction:column;align-items:flex-start}.dl-forms,.ac-grid{grid-template-columns:1fr}}

/* "Notify me when restocked" button on product pages (out-of-stock items) */
.pbnfy{display:inline-block;margin:4px 0;border:1px solid #025597;background:#fff;color:#025597;font:bold 12.5px Arial;border-radius:16px;padding:5px 12px;cursor:pointer;white-space:nowrap}
.pbnfy:hover{background:#025597;color:#fff}
.pbnfy.done{border-color:#1a7f37;color:#1a7f37;background:#eef8f0;cursor:default}

/* "In Stock" / "Out of stock" text (product lists + product page) */
.pbstk{display:inline-block;font:bold 13px Arial;margin:4px 0}
.pbstk.in{color:#1a7f37}
.pbstk.out{color:#c62828}

/* Download page: inventory button (beats the old "a:link" rules in ECommerce.css) + "Preparing..." message */
.dl-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
a.dl-btn,a.dl-btn:link,a.dl-btn:visited{display:inline-flex!important;align-items:center;gap:8px;background:var(--fb-orange);color:#fff!important;font:bold 15px/1.2 Arial,Helvetica,sans-serif!important;text-decoration:none!important;padding:12px 24px!important;margin:0!important;border-radius:24px;white-space:nowrap}
a.dl-btn:hover{background:#e55600}
a.dl-btn.busy{opacity:.6;cursor:wait}
.dl-wait{display:none;align-items:center;gap:10px;max-width:340px;font:13px/1.4 Arial,Helvetica,sans-serif;color:#1b2430;background:#fff;border:1px solid var(--fb-line);border-radius:10px;padding:8px 12px}
.dl-wait.on{display:flex}
.dl-spin{flex:none;width:18px;height:18px;border:3px solid #ffd2b8;border-top-color:var(--fb-orange);border-radius:50%;animation:dlspin .8s linear infinite}
.dl-ok{flex:none;color:#1a7f37;font:bold 18px Arial}
@keyframes dlspin{to{transform:rotate(360deg)}}

/* Download page: the two options as big, easy-to-see tick boxes */
.dl-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
label.dl-opt{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px 16px 10px 12px;background:#fff;border:2px solid var(--fb-orange);border-radius:10px;cursor:pointer;box-shadow:0 2px 6px rgba(255,96,0,.15);transition:background .15s}
label.dl-opt:hover{background:#fff4ec}
label.dl-opt input{width:20px;height:20px;margin:0;accent-color:var(--fb-orange);cursor:pointer;flex:none}
label.dl-opt b{display:block;font:bold 15px Arial,Helvetica,sans-serif;color:var(--fb-dark)}
label.dl-opt small{display:block;font:12px Arial,Helvetica,sans-serif;color:#c25000;margin-top:2px}
label.dl-opt:has(input:checked){background:#fff1e6;box-shadow:0 0 0 3px rgba(255,96,0,.25)}