/* top bar */
.header-search .icon-search{
  color: #fff;
}
.header-search .icon-search i{
  color: #fff;
}
.tool-header .icon{
  color: #fff;
}
.minicart-wrapper .cart-icon.icons span.text{
  color: #fff;
}
.minicart-wrapper .action.showcart .counter.qty{
  color: #fff !important;
}
.welcome-message{
  color: #fff;
  font-weight: 500;
  margin-top: 10px;
}
.dropdown-switcher .links li{
  display: block;
}
/* menu */
.magicmenu .nav-desktop .level0 a span{
  font-weight: 500;
}
/* banner slider */
.home-slider .slick-slide.slick-active .figcaption .text-slide{
  top: 34%;
  left: 58%;
  text-align: right;
}
.home-slider .slick-slide.slick-active .figcaption .caption2{
  margin: 0 0 4px;
}
/* homepage mid img */
.home-mid-img{
  background-image: url("/pub/media//wysiwyg/home/Coming-Soon-Velospec.jpg");
  width: 100%;
  height: 422px;
  margin-top: 40px;
  background-size: 100%;
  background-repeat: no-repeat;
}
.home-mid-contents{
  text-align: center;
  position: relative;
  top: 30%;
}
.home-mid-contents h1{
  color: #fff;
  margin-bottom: 0px;
  font-size: 3em;
}
.home-mid-contents p{
  color: #fff;
  display: inline-block;
  width: 40%;
  font-size: 1.2em;
}
.home-mid-contents button{
  padding: 0 30px !important;
  height: 30px !important;
  line-height: 20px !important;
  font-weight: 700;
  border-radius: 6px;
  color: #fff;
  border-width: 2px;
  background-color: transparent;
}
.home-mid-contents button:hover{
  background-color: transparent !important;
  border-color: #fff !important;
}
/* homepage feature items */
.content-1-trendy-product{
  margin-top: 40px;
}
.content-1-trendy-product .product-title{
  font-size: 20px;
  color: #000;
}
.magictabs .item span{
  cursor: auto !important;
}
.products-textlink{
  text-align: center !important;
}
/* footer */
.link-social{
  font-size: 20px;
  color: black;
  text-transform: uppercase;
}
.main-wrap{
  padding: 0 0 0 0 !important;
}
.cms-static-main-footer {
  padding: 50px 0 30px !important;
}
.toggle-content .link-list{
  text-align: left;
}
.footer-item:first-child .box-content .content li{
  margin-bottom: 0px !important;
}
.footer-item .title{
  font-size: 20px;
}
.footer-item .box-content .content .link-list a{
  font-size: 16px !important;
  text-transform: none !important;
  font-weight: 400;
}
.main-wrap-copyright{
  padding: 14px 0;
  background-color: #282560;
  text-align: left;
}
.main-wrap-copyright .container{
  max-width: 100% !important;
}
.footer-copyright .main, .footer-copyright{
  display: inline-block;
}
.footer-copyright .copyright span{
  font-weight: 400 !important;
  text-transform: none !important;
  font-size: 15px !important;
}
.footer-item .box-content .content .info{
  text-transform: none !important;
}
.toggle-content .info span{
  vertical-align: top;
  font-size: 13px;
}
.toggle-content .info .fa, .toggle-content .info .far, .toggle-content .info .fas{
  color: gray;
  font-size: 18px;
  margin-right: 6px;
}
.instagram-list li{
  width: 25%;
  display: inline-block;
  margin: 0 3px 3px 0 !important;
}
.instagram-feed{
  text-align: left;
}
.link-social .link-icon a{
  border-width: 2px !important;
}
/* category banner */
.page-products.catalog-category-view .page-title-wrapper{
  display: none;
}
.category-image .image{
  width: 100% !important;
}
/* product detail page */
.product-info-main .stock.available{
  color: black !important;
}
.product-info-stock-sku .availability{
  display: none;
}
.product-info-stock-sku .sku{
  color: black !important;
}
.sku .value{
  display: inline-block;
}
.product-view .product-qty .custom-qty{
  width: calc(70% - 100px) !important;
}
.block-related .block-title, .block.block-related .block-subtitle{
  text-align: center;
}
.block-related .block-title strong:after{
  width: 100%;
}
/* group product detail page */
.table tbody > tr > td{
  text-align: center;
}
.grouped table thead tr th{
  background-color: #6dbe46;
  border: 1px solid #cecece !important;
  color: white;
}
.grouped table tbody tr .item, .grouped table tbody tr [data-th="Qty"], .grouped table tbody tr .qty .control input{
  border: 1px solid #cecece !important;
}
.amasty-hide-price-container .amasty-hide-price-text{
  font-size: 11px !important;
}
.amasty-hide-price-container{
  margin-bottom: 0px !important;
  margin-right: 0px !important;
}
.grouped table tbody tr [data-th="PRICE"] .product-item-name{
  display: inline-block !important;
}
.table.grouped > caption + thead > tr:first-child > th{
  text-align: center;
}
.product-info-main .price-box .price-wrapper .price{
  font-weight: 400 !important;
  font-size: 13px !important;
  font-family: Roboto !important;
}
.item .add-to-links a{
  display: none !important;
}
.addit{
  display: none;
}
.product-social-links{
  display: none;
}
.product-view .add-to-cart button.button{
  width: 200px !important;
}
/* .product-info-main .box-tocart .actions, .box-tocart{
  padding: 0 !important;
} */
/* login page */
.block-new-customer .forms{
  margin-top: 20px;
}
.block-new-customer .forms a{
  padding-right: 10px;
}
/* pagecrumbs */
.pagecrumbs-title{
  background-image: url(../images/alothemes/NEWS-BLOG-IMAGE.jpg);
}
/* mobile phone responsive */
@media only screen and (max-width: 768px) {
  /* homepage mid img */
  .home-mid-img{
    height: 125px;
  }
  .home-mid-contents button{
    padding: 0 15px !important;
    height: 23px !important;
    font-size: 0.5em;
  }
  .home-mid-contents p {
    width: 50%;
    font-size: 0.7em;
  }
  .home-mid-contents h1{
    font-size: 1.2em;
  }
  .home-mid-contents {
    top: 10%;
  }

}
.nav-sections .mean-nav ul li a{
  z-index: 2 !important;
  position: relative;
}

/* ==========================================================================
   2026-08 site update — Fairing / Bicycle Frame Depot
   ========================================================================== */

/* Phone + e-mail now live INSIDE the navy top bar (#282560), taking the place
   of the old welcome message, per the 2026-08 revision. They used to sit on a
   white strip above the logo row. */
.header-top .header-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 26px;
  padding: 0;
  margin: 0;
}
.header .header-top .header-contact .header-contact__item,
.header-top .header-contact .header-contact__item {
  color: #fff !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 41px;          /* matches the bar height so the row stays 41px */
  white-space: nowrap;
  text-decoration: none;
}
.header .header-top .header-contact .header-contact__item:visited,
.header-top .header-contact .header-contact__item:visited {
  color: #fff !important;
}
.header .header-top .header-contact .header-contact__item:hover,
.header .header-top .header-contact .header-contact__item:focus,
.header-top .header-contact .header-contact__item:hover,
.header-top .header-contact .header-contact__item:focus {
  color: #fff !important;
  text-decoration: underline;
}
.header-top .header-contact .header-contact__item i {
  margin-right: 7px;
  font: normal normal normal 13px/1 FontAwesome !important;
  color: #fff !important;
}

@media only screen and (max-width: 767px) {
  .header-top .header-contact {
    gap: 0 14px;
    justify-content: center;
  }
  .header .header-top .header-contact .header-contact__item,
  .header-top .header-contact .header-contact__item {
    font-size: 11px;
    line-height: 34px;
  }
  .header-top .header-contact .header-contact__item i {
    font-size: 11px !important;
    margin-right: 4px;
  }
}

/* --------------------------------------------------------------------------
   ③ B2B log-in bar (homepage, between slider and VELOSPEC banner)
   -------------------------------------------------------------------------- */
.b2b-bar {
  padding: 26px 0 4px;
}
/* The green button is centred on the page and the grey copy sits to its
   right — the pair is NOT centred as a group. A 1fr/auto/1fr grid does this:
   the equal side tracks force the middle (button) track to the page centre. */
.b2b-bar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 34px;
}
.b2b-bar__inner .b2b-bar__btn { grid-column: 2; }
.b2b-bar__inner .b2b-bar__text { grid-column: 3; }
/* Matches the green already used by the theme's primary buttons (#5dce00),
   so the bar doesn't introduce a second brand green. */
.b2b-bar .b2b-bar__btn,
a.b2b-bar__btn {
  display: inline-block;
  min-width: 260px;
  padding: 14px 34px;
  background-color: #5dce00;
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid #5dce00;
  border-radius: 3px;
  transition: background-color .2s ease, border-color .2s ease;
}
.b2b-bar .b2b-bar__btn:hover,
.b2b-bar .b2b-bar__btn:focus,
a.b2b-bar__btn:hover,
a.b2b-bar__btn:focus {
  background-color: #4fb000;
  border-color: #4fb000;
  color: #fff !important;
  text-decoration: none;
}
.b2b-bar__text {
  display: flex;
  flex-direction: column;
  color: #9a9a9a;
  font-size: 15px;
  line-height: 1.6;
}
.b2b-bar__sep {
  color: #c4c4c4;
  margin: 0 2px;
}
.b2b-bar .b2b-bar__link,
a.b2b-bar__link {
  color: #9a9a9a !important;
  text-decoration: underline;
}
.b2b-bar .b2b-bar__link:hover,
.b2b-bar .b2b-bar__link:focus,
a.b2b-bar__link:hover,
a.b2b-bar__link:focus {
  color: #282560 !important;
}

/* --------------------------------------------------------------------------
   ④ VELOSPEC banner: full-bleed 422px -> centred 1200 x 280
   Source image is 1200x433 and the two badges occupy y 65-345, i.e. exactly
   280px, so a cover-crop biased to 42% keeps both badges whole. Below 768px
   the box would crop horizontally into the badges, so the phone rule shows
   the untouched image instead.
   -------------------------------------------------------------------------- */
/* Banner is a real <img> now, not a CSS background — that is what lets the
   client swap it from Content -> Elements -> Pages with the media picker
   instead of needing cPanel. width/height:auto renders a correctly sized
   1200x280 file at its natural proportions; the aspect-ratio guard below only
   kicks in if someone uploads a different shape. */
.home-mid-img {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0;
  background: none;
  line-height: 0;
  /* The theme's own rule earlier in this file still sets height:422px for the
     old background-image version. The <img> now dictates the height, so the
     wrapper must collapse to it — otherwise ~150px of dead space is left
     under the banner. */
  height: auto;
}
.home-mid-img__img {
  display: block;
  width: 100%;
  height: auto;
}
@supports (aspect-ratio: 1 / 1) {
  .home-mid-img__img {
    aspect-ratio: 1200 / 280;
    object-fit: cover;
  }
}
@media only screen and (max-width: 767px) {
  .home-mid-img {
    margin-top: 24px;
  }
  .b2b-bar__inner {
    flex-direction: column;
    text-align: center;
  }
  .b2b-bar__text {
    align-items: center;
    font-size: 14px;
  }
  .b2b-bar .b2b-bar__btn,
  a.b2b-bar__btn {
    min-width: 0;
    width: 100%;
    max-width: 320px;
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   ⑤ Log In page — the two B2B account form links under "New Customers"
   -------------------------------------------------------------------------- */
/* Both buttons must be the same size regardless of label length, so the two
   grid tracks are a fixed width rather than shrink-to-fit. `stretch` (the grid
   default) then makes the heights match too, and flex-centring puts each label
   in the middle of its box. */
.block-new-customer .b2b-forms {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 230px);
  gap: 12px 20px;
  justify-content: start;
}
/* Same interaction as the LOG IN button next to them: neutral by default,
   green only on hover. Colours are the theme's own button palette
   (#707070/#fff/#e6e6e6 -> #5dce00), so these read as native buttons. */
.block-new-customer .b2b-forms__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  color: #707070 !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.block-new-customer .b2b-forms__link:hover,
.block-new-customer .b2b-forms__link:focus {
  background-color: #5dce00;
  border-color: #5dce00;
  color: #fff !important;
  text-decoration: none;
}
.block-new-customer .block-content p {
  margin-bottom: 12px;
}
@media only screen and (max-width: 767px) {
  .block-new-customer .b2b-forms {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
}

/* --------------------------------------------------------------------------
   ⑧ Footer — address column replaces the old Instagram feed.
   The spacer heading keeps the address level with the other columns' content;
   its own text is blank and it is hidden from screen readers.
   -------------------------------------------------------------------------- */
/* The address column has no heading of its own — dropping the spacer out of
   flow (display:none, not visibility:hidden) lifts the address up so its first
   line sits on the CONTACT US heading row. */
.footer-item .title-spacer {
  display: none;
}
/* Footer type, settled 2026-08-12:
   - body copy in ALL four columns follows the CONTACT US treatment the theme
     already used (links 13/300/#757575, plain text 12/300/#3b3b3b). Left alone,
     INFORMATION and OPEN A BUSINESS ACCOUNT render at 16/400 and stand out.
   - the address column follows the same body scale; it merely SITS on the
     heading row (see .title-spacer below), it is not styled as a heading. */
/* !important is required: this file already carries a pre-existing site rule
   `.footer-item .box-content .content .link-list a { font-size:16px !important }`
   from an earlier customisation (left in place — it also sets
   text-transform:none, which stops the links rendering uppercase). */
.cms-static-main-footer .footer-item .box-content .content .link-list a,
.cms-static-main-footer .footer-item .box-content .content .info a {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #757575 !important;
}
.cms-static-main-footer .footer-item .box-content .content .info {
  font-size: 12px;
  font-weight: 300;
  color: #3b3b3b !important;
}
/* The address deliberately has NO font rule of its own: it carries the `.info`
   class, so it picks up the same 12px/300/#3b3b3b as the other plain-text lines
   (e.g. "Mon-Fri 9:00am to 6:00pm PST"). It was briefly set to the 20px heading
   scale and the client asked for it back at body size. */
.cms-static-main-footer .footer-item .box-content .content .info a:hover,
.cms-static-main-footer .footer-item .box-content .content .info a:focus,
.cms-static-main-footer .footer-item .box-content .content .link-list a:hover,
.cms-static-main-footer .footer-item .box-content .content .link-list a:focus {
  color: #282560 !important;
}
.cms-static-main-footer .footer-item .box-content .content ul li {
  margin-bottom: 6px;
}
@media only screen and (max-width: 767px) {
  .footer-item .title-spacer {
    display: none;
  }
}
.footer-item .footer-address,
.footer-item .content ul li .footer-address {
  text-align: left;
}

/* --------------------------------------------------------------------------
   ⑥ B2B account request forms (/b2b-account-usa, /b2b-account-international)
   -------------------------------------------------------------------------- */
.b2b-form {
  max-width: 860px;
  margin: 0 auto 40px;
}
.b2b-form__hp {
  position: absolute !important;
  left: -9999px;
  height: 0;
  overflow: hidden;
}
.b2b-form .legend {
  border: 0;
  padding: 0 0 18px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #282560;
}
.b2b-form__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  border: 0;
  padding: 0;
  margin: 0;
}
.b2b-form__fields .legend {
  flex: 0 0 100%;
}
.b2b-form__field {
  flex: 1 1 calc(50% - 14px);
  min-width: 240px;
  margin-bottom: 18px;
}
.b2b-form__field--wide {
  flex: 0 0 100%;
}
.b2b-form__field .label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  color: #555;
}
.b2b-form__field.required .label span:after {
  content: ' *';
  color: #e02b27;
}
.b2b-form__field .input-text {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  background: #fff;
  font-size: 14px;
  line-height: 1.4;
}
.b2b-form__field .input-text:focus {
  border-color: #5dce00;
  outline: none;
}
.b2b-form__note {
  margin: 8px 0 0;
  font-size: 12px;
  font-style: italic;
  color: #8a8a8a;
}
.b2b-form__actions {
  margin-top: 8px;
}
.b2b-form .b2b-form__submit,
button.b2b-form__submit {
  padding: 13px 46px;
  background-color: #5dce00 !important;
  border: 1px solid #5dce00 !important;
  border-radius: 3px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
}
.b2b-form .b2b-form__submit:hover,
button.b2b-form__submit:hover {
  background-color: #4fb000 !important;
  border-color: #4fb000 !important;
  color: #fff !important;
}
.b2b-form__required {
  margin: 12px 0 0;
  font-size: 12px;
  color: #e02b27;
}
@media only screen and (max-width: 767px) {
  .b2b-form__field {
    flex: 0 0 100%;
  }
}

/* The theme pins button height/line-height with !important, which pushes the
   label out of the box; override both and keep the button on its own line. */
.b2b-form__actions {
  display: block;
  overflow: hidden;
}
.b2b-form .b2b-form__submit,
button.b2b-form__submit {
  height: auto !important;
  line-height: 1.4 !important;
  display: inline-block;
  float: none !important;
  margin: 0;
}
.b2b-form__required {
  clear: both;
  display: block;
}

/* --------------------------------------------------------------------------
   Header settings dropdown (My Account / Log In) — centred, per 2026-08 review
   -------------------------------------------------------------------------- */
/* Theme ships this box as width:150px with padding 15/20/20 and a 10px
   bottom margin on every li — so with "My Wish List" removed there was 30px of
   dead space under "Log In" against 15px above it, and the box read as
   half-empty. Balance the padding and drop the trailing margin so the two
   remaining items sit centred in a box that fits them. */
.header .header-setting .dropdown-switcher {
  text-align: center;
  padding: 14px 18px;
}
.header .header-setting .dropdown-switcher ul.links {
  margin: 0;
}
.header .header-setting .dropdown-switcher ul.links li:last-child {
  margin-bottom: 0;
}
.header .header-setting .dropdown-switcher ul,
.header .header-setting .dropdown-switcher ol,
.header .header-setting .dropdown-switcher li,
.header .header-setting .dropdown-switcher p {
  text-align: center;
  list-style: none;
}
.header .header-setting .dropdown-switcher li a,
.header .header-setting .dropdown-switcher a {
  display: block;
  text-align: center;
}

/* --------------------------------------------------------------------------
   B2B 表单 2026-08-13 增补:州下拉框、字段说明里的外链
   -------------------------------------------------------------------------- */
.b2b-form__select {
  height: 40px;
  padding: 8px 12px;
  background-color: #fff;
  appearance: auto;
}
.b2b-form__note-link {
  color: #282560 !important;
  text-decoration: underline;
  font-style: normal;
}
.b2b-form__note-link:hover,
.b2b-form__note-link:focus {
  color: #5dce00 !important;
}

/* ==========================================================================
   Migrated out of the home2 CMS page body (2026-08-13)

   These rules used to live in an inline <style> inside the CMS page content.
   Anyone opening that page in the WYSIWYG editor risked TinyMCE stripping the
   block, which would have broken the banner AND the whole LATEST NEWS layout.
   Moving them here makes the CMS body plain HTML, so the page is safe for the
   client to edit. Copied verbatim — behaviour is unchanged.
   ========================================================================== */
@media only screen and (max-width: 600px) {
  .post-holder { width: 100% !important; }
}
.post-holder { width: 30%; display: inline-block; }
.post-list { text-align: center; }
.post-holder-2 { margin: 0 20px 0 20px; }
.post-text-hld { display: none; }
.post-holder .post-header .post-info { padding: 20px 0 0 0 !important; border: none !important; }
.post-list .post-header .post-title { padding: 0 !important; }
.post-list .post-header .post-title a { font-size: 16px !important; }
.post-posed-date { text-align: left; }
.post-list .post-content .post-read-more {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  float: left;
  line-height: 20px !important;
}
.post-list .post-content .post-read-more:hover { background-color: inherit; color: inherit; }
.post-list-wrapper-customize { margin-top: 15px !important; }
.post-list-wrapper-customize .title {
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
}
.post-list-wrapper { margin-top: 0px; }
.post-list-wrapper .title,
.post-list-wrapper .green-line,
.post-list-wrapper p { display: none; }
.product-title { color: black; line-height: 0.7; }
.green-line { text-align: center; }
.green-line p {
  border-bottom: 3px solid #5dce00;
  width: 4%;
  display: inline-block;
}
.magictabs { margin: 0px 0px !important; }

/* --------------------------------------------------------------------------
   B2B 表单:CDTFA-230 附件上传
   -------------------------------------------------------------------------- */
.b2b-form__file {
  width: 100%;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #555;
}
.b2b-form__file::-webkit-file-upload-button {
  padding: 8px 16px;
  margin-right: 12px;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  color: #707070;
  font-size: 13px;
  cursor: pointer;
}
.b2b-form__file::-webkit-file-upload-button:hover {
  background: #5dce00;
  border-color: #5dce00;
  color: #fff;
}