@charset "UTF-8";
/* Carefree Theme + Menu Engine V31.0.33 - menu bar and product page styles. Moved verbatim out of the header.tpl inline
   <style> at the closing head tag (was V31.0.32 install.xml lines 132-409), linked synchronously in the same place.
   Bump ?v= in header.tpl with every change. */


/* ==========================================
   CFM V30.6.18 - MENU BAR (minimal: rightmost dropdown right-anchor)
   ==========================================
   V30.6.16 ships with zero menu CSS - theme handles everything. V30.6.18
   adds back ONE targeted rule: Bootstrap's default left-anchor positioning
   on .dropdown-menu makes the rightmost item's panel extend past the
   visual edge of the bar. This rule flips the LAST <li>'s dropdown to
   right-anchor so its panel grows leftward instead. Mid-bar dropdowns
   (Supplies, Machines) untouched.
*/

@media (min-width: 768px) {
    #menu .nav.navbar-nav > li:last-child .dropdown-menu {
        left: auto !important;
        right: 0 !important;
    }
}

/* ==========================================
   CFM V30.6.7 - PRODUCT PAGE
   ========================================== */

/* Product title H1 */
.product-info h1,
#product h1,
#content > .container h1.product-title,
#content > .container > .row h1 {
    font-family: 'Comfortaa', cursive, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 16px !important;
    background: none !important;
    -webkit-text-fill-color: #333 !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
}

/* Product info list items - Montserrat 14px muted */
.product-info ul.list-unstyled > li {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    color: #555 !important;
    padding: 3px 0 !important;
}

/* Hide Brand/Manufacturer line (marker class added by JS below) */
.product-info ul.list-unstyled > li.cfm-brand {
    display: none !important;
}

/* Hide the <hr> separator above OC default discount rows */
.product-info ul.list-unstyled > li > hr {
    display: none !important;
}
.product-info ul.list-unstyled > li/* CFM V31.0.14: CANONICAL volume-discount tokens. Carefree owns these; FTP #46 v3.256+ reads the
   same custom properties for its {vd:} ladder (with its own fallbacks), so both surfaces render
   identically and change from this one block. Values = FTP's preferred look, compacted. */
:root {
    --vd-green: #2e9e44;
    --vd-row-color: #4a4a4a;
    --vd-qty-weight: 400;
    --vd-price-weight: 600;
    --vd-row-font: 13px;
    --vd-row-pad-y: 2px;
    --vd-row-border-color: #e7ddcd;
    --vd-row-lh: 1.25;
}
/* CFM V31.0.15: row line-height token applied to BOTH the native-VD rows and FTP's ladder rows,
   so they compact together. Carefree owns VD spacing; FTP owns the ladder structure. */
.cfm-vd-row,
.product-info .ftp-vd-irow {
    line-height: var(--vd-row-lh, 1.25) !important;
}
.cfm-vd-divider {
    display: none !important;
}

/* Main price h2 - Montserrat 22px 700 dark grey */
.product-info ul.list-unstyled > li > h2,
.product-info h2.price,
.product-info .price-new {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 4px 0 !important;
    line-height: 1.2 !important;
}

/* Volume discount rows - QAP-style flex layout (marker class added by JS) */
.product-info ul.list-unstyled > li.cfm-vd-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: var(--vd-row-pad-y, 2px) 0 !important;
    border-bottom: 1px dotted var(--vd-row-border-color, #e7ddcd) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: var(--vd-row-font, 13px) !important;
    color: var(--vd-row-color, #4a4a4a) !important;
}
.product-info ul.list-unstyled > li.cfm-vd-row:last-child {
    border-bottom: none !important;
}
.product-info .cfm-vd-qty {
    font-weight: var(--vd-qty-weight, 400) !important;
    color: var(--vd-row-color, #4a4a4a) !important;
}
.product-info .cfm-vd-price {
    font-weight: var(--vd-price-weight, 600) !important;
    color: var(--vd-green, #2e9e44) !important;
    white-space: nowrap !important;
    margin-left: 12px !important;
    font-variant-numeric: tabular-nums !important;
}
/* CFM V31.0.14: price-block compaction. Put the tax line + free-shipping badge on ONE row (was two
   stacked <li>) and trim their vertical spacing; the "inc GST" text is set by the JS below. The
   Available-Options heading loses most of its top margin. All scoped to .product-info. */
.product-info ul.list-unstyled > li.cfm-gst-inline,
.product-info ul.list-unstyled > li.fs-badge-li {
    display: inline-block !important;
    vertical-align: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.product-info ul.list-unstyled > li.fs-badge-li {
    margin-left: 12px !important;
}
.product-info ul.list-unstyled > li > h2 {
    margin-bottom: 2px !important;
}
.product-info h3,
.product-info .oc-pop-section-title,
#oc-pop-inner .oc-pop-section-title {
    margin-top: 6px !important;
}
/* CFM V31.0.15: PRICE inline with inc GST + the free-shipping badge on ONE row. The price <li> and
   its <h2> go inline; the price <ul> loses most of its bottom margin. */
.product-info ul.list-unstyled > li.cfm-price-inline {
    display: inline-block !important;
    vertical-align: baseline !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
}
.product-info ul.list-unstyled > li.cfm-price-inline > h2 {
    display: inline-block !important; /* V31.0.17: was inline - CSS transforms are IGNORED on inline
        boxes, which silently killed FTP's base-price scale-pop (.ftp-vd-pricepop) when a size is
        picked. inline-block still flows on the one price line but restores the animation. */
    vertical-align: baseline !important;
    margin: 0 !important;
}
.product-info ul.list-unstyled.cfm-price-ul {
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
}
/* CFM V31.0.23: PAINT-FINAL price block. The marker classes above are added by the script below
   only once the page is ready, so the block first painted in the old stacked layout and then
   shrank (options + buttons jumped up 62-75 px on every desktop product page). These rules give
   the same result from the server markup itself, so the block paints in its final shape; the
   script still runs and its classes now change nothing. Browsers without :has() keep the old
   behaviour. Not covered (other mods' slots): FTP #46 price range + struck-out was-price, ASM
   free-shipping badge. */
@supports selector(:has(a)) {
    .product-info ul.list-unstyled > li:has(> a[href*="product/manufacturer"]) {
        display: none !important; /* = .cfm-brand */
    }
    .product-info ul.list-unstyled > li:has(> hr) {
        display: none !important; /* = .cfm-vd-divider */
    }
    .product-info ul.list-unstyled:has(> li > h2) {
        margin-bottom: 4px !important; /* = .cfm-price-ul */
        line-height: 1.15 !important;
    }
    .product-info ul.list-unstyled > li:has(> h2) {
        display: inline-block !important; /* = .cfm-price-inline */
        vertical-align: baseline !important;
        margin: 0 10px 0 0 !important;
        padding: 0 !important;
    }
    .product-info ul.list-unstyled > li:has(> h2) > h2 {
        display: inline-block !important;
        vertical-align: baseline !important;
        margin: 0 !important;
    }
    .product-info ul.list-unstyled > li:has(> h2) + li:not(:has(> hr)) {
        display: inline-block !important; /* = .cfm-gst-inline (the tax line follows the price) */
        vertical-align: baseline !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
    }
    .product-info ul.list-unstyled > li:has(> hr) ~ li:not(.fs-badge-li) {
        display: flex !important; /* = .cfm-vd-row box, before the script splits qty + price */
        justify-content: space-between !important;
        align-items: baseline !important;
        padding: var(--vd-row-pad-y, 2px) 0 !important;
        border-bottom: 1px dotted var(--vd-row-border-color, #e7ddcd) !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: var(--vd-row-font, 13px) !important;
        color: var(--vd-row-color, #4a4a4a) !important;
        line-height: var(--vd-row-lh, 1.25) !important;
    }
    .product-info ul.list-unstyled > li:has(> hr) ~ li:last-child {
        border-bottom: none !important;
    }
}
/* CFM V31.0.24: option thumbnails keep their space from first paint. The stock 50x50 option images carry
   no width/height, so each option row started at padding + border only and grew as its image arrived,
   pushing Add to Cart, the tabs and everything below down on a first visit. content-box keeps the 4px
   padding + border outside the 50x50 picture - the same final box as a loaded image (59.5 px measured).
   Descendant, not child: Smart Option Totals later wraps the image in span.oc-sov-wrap inside the label. */
#product .radio label img.img-thumbnail,
#product .checkbox label img.img-thumbnail {
    box-sizing: content-box;
    width: 50px;
    height: 50px;
}
/* CFM V31.0.26: the main product photo (always a 250x250 cache image) and the extra photos (always 74x74)
   print with no width/height, so on a slow connection everything below started higher and dropped up to
   227 px when the photo arrived. Give each its square box up front - the same box the loaded image draws
   at (max-width keeps 241 px on tablet, 66 px for the extras). Images that carry width/height are left alone. */
ul.thumbnails > li > a.thumbnail > img:not([width]) {
    width: 250px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}
ul.thumbnails > li.image-additional > a.thumbnail > img:not([width]) {
    width: 74px;
}
/* CFM V31.0.28: home slideshow dots below the pictures. The theme stylesheet pulls them up onto the
   slide (top:-30px; height:0), where they covered the subtitle lettering. Same selector, printed later. */
#slideshow0 .owl-pagination {
    top: 0;
    height: auto;
    padding-top: 6px;
}
/* V31.0.15: Available-Options heading - specific #product h3 beats the theme's own margin (the
   earlier .product-info h3 was outranked and left 16px). */
#product h3.oc-pop-section-title,
#product > h3,
#product h3 {
    margin-top: 4px !important;
}
/* V31.0.15: trim FTP ladder box + null-state prompt spacing (Carefree owns VD spacing). */
.product-info #ftp-vd-ladder-page.ftp-vd-ilad {
    margin: 2px 0 0 !important;
    padding-top: 2px !important;
}
.product-info .ftp-vd-iprompt {
    padding: 1px 2px 3px !important;
}
/* CFM V31.0.16: trim the product-name -> product-code gap. */
.product-info h1 {
    margin-bottom: 4px !important;
}
/* V31.0.16: the "ghost row" - OpenCart's default <hr> at the top of #product carries a 20px top
   margin, leaving a band of dead space (and a faint line) above Available Options. Compact it. */
#product > hr:first-child,
#product > hr {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

/* Section headings */
#content h3,
.product-info h3,
#tab-description h3,
.tab-content h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 16px 0 8px !important;
}