/* Theme-customisation CSS from the reference storefront.
   On Shopify this CSS lives in inline <style> blocks on the page; the WordPress theme
   needs it as a real stylesheet. Section ids are mapped to this theme's section ids.

   Source blocks (vapeplugaustralia.com.au, captured 2026-10-07):
     header logo sizing, header/search/nav settings, promo banner + nav tier styles,
     home section headline hiding, collection image cap, text-columns padding. */

/* --- header logo sizing ------------------------------------------------- */
div.header__logo, div.header__logo img, div.header__logo span, .sticky_nav .menu-position--block .header__logo { max-width: 205px; }

/* --- header layout settings -------------------------------------------- */
#header a.mobile_logo img { width: auto; max-width: 200px; max-height: 40px; }
.search-container { width: 50%; max-width: 150px; padding-left: 0px; }
.menu-position--block.search-enabled--true .nav.nav--center { padding-left: 1px; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0px 0px; }
.combined-menu-container { width: 800%; display: flex; column-gap: 13px; }
@media (max-width: 768px) {
  #shopify-section-header #header a.mobile_logo img { width: auto; max-width: 200px; max-height: 60px; }
}
#shopify-section-header .promo-banner--show .promo-banner { background-color: #05aff2; transition: all 0s linear; height: auto; min-height: 30px; line-height: 1.1; display: flex; align-items: center; }
#shopify-section-header .nav-desktop__tier-1-link span,
#shopify-section-header .nav-desktop__tier-2-link span,
#shopify-section-header .nav-desktop__tier-3-link span { font-weight: bold; font-size: 12px; color: inherit; }
#shopify-section-header .nav-desktop__tier-1 .nav-desktop__tier-1-link { display: block; padding: 2px 0; white-space: nowrap; }

/* --- product form fallbacks (theme defaults on the reference) ----------- */
.product_section .product_form, .product_gallery { opacity: 1; }
.multi_select, form .select { display: block !important; }

/* --- home sections ----------------------------------------------------- */
/* section: collection-list-1  (reference id ...__2e4db570...) */
#shopify-section-vp-home-collection-list-1 h2, #shopify-section-vp-home-collection-list-1 .h2,
#shopify-section-vp-home-collection-list-1 h2.title, #shopify-section-vp-home-collection-list-1 .thumbnail .title { display: none; }
#shopify-section-vp-home-collection-list-1 .list-collections .thumbnail img { max-height: 400px; }

/* section: collection-list-2  (reference id ...__5693b9e3...) */
#shopify-section-vp-home-collection-list-2 h2, #shopify-section-vp-home-collection-list-2 .h2,
#shopify-section-vp-home-collection-list-2 h2.title, #shopify-section-vp-home-collection-list-2 .thumbnail .title { display: none; }

/* section: text-columns  (reference id ...__80370975...) */
#shopify-section-vp-home-text-columns { padding-top: 35px; padding-bottom: 35px; width: 100%; }

/* --- collection grid: price hidden exactly like the reference ------------- */
.price-ui--loading { opacity: 0; }

/* --- "BEST PRICE" label (reference product-label app) --------------------- */
.product-list .thumbnail { position: relative; }
.vp-best-price {
  position: absolute; top: 14px; left: 0; z-index: 3;
  background: #ffd400; color: #000;
  font-family: Archivo, sans-serif; font-weight: 700; font-style: normal;
  font-size: 10px; line-height: 1; letter-spacing: .6px; text-transform: uppercase;
  padding: 5px 8px 5px 12px;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
}

/* --- sold-out notify link ------------------------------------------------- */
.vp-notify-me {
  display: block; margin-top: 6px; padding: 8px 10px; text-align: center;
  border: 1px solid #c6561c; background: #c6561c; color: #fff !important;
  font-family: Archivo, sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; line-height: 1.2; text-decoration: none;
}
.vp-notify-me:hover { background: #a84817; border-color: #a84817; }


/* --- VP mobile parity fixes: reference announcement bar and 2-up benefits --- */
@media only screen and (max-width: 480px) {
  /* Clip the Reputon slider's offscreen next card; prevent mobile page-wide horizontal scroll. */
  html, body { overflow-x: hidden !important; }
  /* Reputon review carousel slides its next card just offscreen; do not let it create page-level horizontal scrolling. */
  html, body { overflow-x: hidden !important; }
  #qab_container { width: 100vw !important; height: 50px !important; max-width: 100vw !important; }
  #qab_background, #qab_bar { width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; }
  #qab_background { height: auto !important; overflow: hidden !important; }
  #qab_bar { padding: 7px 0 !important; font-size: 15px !important; line-height: 18px !important; }
  #qab_content { display: block !important; width: 95vw !important; max-width: 95vw !important; margin: 0 auto !important; box-sizing: border-box !important; font-size: 15px !important; line-height: 18px !important; }
  #qab_message { display: block !important; white-space: normal !important; font-size: 15px !important; line-height: 18px !important; }
  .shopify-section--text-columns-with-images .container {
    width: 95vw !important; max-width: 95vw !important; margin-left: auto !important; margin-right: auto !important;
    padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important;
  }
  /* Keep the app carousel clipped to the viewport, as it is on the Shopify reference. */
  #shopify-section-template--16756305658107__1772453402f0040963 { overflow: hidden !important; }
}
@media only screen and (max-width: 798px) {
  footer .footer_menu h6 { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  footer .footer_menu h6 .icon-down-arrow { transition: transform .2s ease; }
  footer .footer_menu.vp-footer-open h6 .icon-down-arrow { transform: rotate(180deg); }
}