@charset "UTF-8";
/* Carefree Theme + Menu Engine V31.0.48 - product page look (one-card store). Linked only while the header
   controller printed the html class crf-restyle (the main bar shows for this visitor); every rule needs that class,
   so a stray load does nothing. Layout only: nothing here moves, copies, hides or re-orders the Add to Cart button,
   the quantity box, the options, Get Quote or the wish list heart (the page's own head block wraps the cart button
   and copies the heart, as today; the rules below only style what it made, either way round). Photo: the page's own
   picture at its own size, centred in a white card (no second picture is fetched). Bump ?v= in header.php with every
   change. Specificity: every rule starts html.crf-restyle body, so it outranks menu.css and the page's head block
   (both use !important with at most one id). */

html.crf-restyle {
    --crf-pp-pink: #d81b60; --crf-pp-pink-d: #c2185b; --crf-pp-pink-r: #e91e63;
    --crf-pp-line: #ece3da; --crf-pp-line-d: #ddd0c3; --crf-pp-ink: #252525; --crf-pp-mute: #6f665e;
    --crf-pp-shadow: 0 4px 14px rgba(60, 40, 20, .09); --crf-pp-red: #dc2626;
}

/* ---- the top area: photo card left (7), buy card right (5). Browsers without :has() keep today's columns. ---- */
@supports selector(:has(a)) {
    html.crf-restyle body #content > .row:has(> .product-info) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin: 4px 0 32px; align-items: start; }
    html.crf-restyle body #content > .row:has(> .product-info)::before,
    html.crf-restyle body #content > .row:has(> .product-info)::after { display: none; }
    html.crf-restyle body #content > .row:has(> .product-info) > [class*="col-"] { width: auto; float: none; padding-left: 0; padding-right: 0; min-width: 0; }
}

/* photo card (the main picture keeps its own 250 px size, centred; the extra pictures are small cards below) */
html.crf-restyle body #content ul.thumbnails { margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
html.crf-restyle body #content ul.thumbnails > li { float: none !important; margin: 0 !important; }
html.crf-restyle body #content ul.thumbnails > li:first-child { width: 100%; }
html.crf-restyle body #content ul.thumbnails > li:first-child > a.thumbnail { display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: clamp(300px, 34vw, 460px);
    margin: 0 !important; padding: 24px !important; background: #fff !important; border: 1px solid var(--crf-pp-line) !important; border-radius: 12px !important; box-shadow: var(--crf-pp-shadow) !important; }
html.crf-restyle body #content ul.thumbnails > li:first-child > a.thumbnail > img { max-width: 100%; max-height: 100%; }
html.crf-restyle body #content ul.thumbnails > li.image-additional > a.thumbnail { display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; width: 76px; height: 76px;
    margin: 0 !important; padding: 6px !important; background: #fff !important; border: 1px solid var(--crf-pp-line) !important; border-radius: 10px !important; }
html.crf-restyle body #content ul.thumbnails > li.image-additional > a.thumbnail > img { max-width: 100%; max-height: 100%; }

/* buy card */
html.crf-restyle body #content .product-info { box-sizing: border-box; background: #fff; border: 1px solid var(--crf-pp-line); border-radius: 12px; box-shadow: var(--crf-pp-shadow); padding: 26px 26px 22px !important; }
@media (min-width: 992px) {
    /* stays in view while the photo side scrolls (only matters when the photo side is the taller one); clears the
       pinned bar and menu */
    html.crf-restyle body #content > .row > .product-info { position: sticky; top: calc(var(--crf-stack-top, 0px) + 62px); }
}
html.crf-restyle body #content .product-info h1 { font: 700 26px/1.28 'Comfortaa', Arial, sans-serif !important; color: var(--crf-pp-ink) !important; -webkit-text-fill-color: var(--crf-pp-ink) !important; margin: 0 0 10px !important; letter-spacing: 0 !important; }
/* the code and stock lines one under the other at every width: side by side, the row fits or wraps depending on
   which Montserrat face has arrived (the medium face is not preloaded; font swap), so it wrapped after load and
   pushed the price and buttons down */
html.crf-restyle body #content .product-info > ul.list-unstyled:first-of-type { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0 0 14px !important; }
html.crf-restyle body #content .product-info > ul.list-unstyled:first-of-type > li { font: 500 13px/18px 'Montserrat', Arial, sans-serif !important; color: var(--crf-pp-mute) !important; padding: 0 !important; margin: 0 !important; }
html.crf-restyle body #content .product-info ul.list-unstyled > li > h2 { font: 700 32px/1.1 'Montserrat', Arial, sans-serif !important; color: var(--crf-pp-ink) !important; }
html.crf-restyle body #content .product-info ul.list-unstyled > li > span[style*="line-through"] { color: var(--crf-pp-mute) !important; font-size: 15px !important; }

/* SAVE pill (product.js): sits in a slot kept beside the price from the first paint whenever a struck-out price is
   printed, so showing or hiding it never moves anything. Hidden unless the script has proved the figure. */
@supports selector(:has(a)) {
    html.crf-restyle body #content .product-info ul.list-unstyled:has(> li > span[style*="line-through"]) > li:has(> h2) { position: relative; margin-right: 92px !important; }
}
html.crf-restyle body #content .product-info .crf-pp-save { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
    background: var(--crf-pp-red); color: #fff; font: 700 11px/20px 'Montserrat', Arial, sans-serif; padding: 0 9px; border-radius: 999px; letter-spacing: .03em; }
html.crf-restyle body #content .product-info .crf-pp-save[hidden] { display: none !important; }

/* options and quantity (only plain drop-downs and text boxes that sit straight in an option row; the date box with
   its calendar button, text areas, the hire steps and other mods' boxes are left as they are) */
html.crf-restyle body #content #product > hr { display: none !important; }
html.crf-restyle body #content #product h3 { font: 700 15px/1.3 'Montserrat', Arial, sans-serif !important; color: var(--crf-pp-ink) !important; margin: 18px 0 10px !important; }
html.crf-restyle body #content #product .control-label { font: 600 13px/1.3 'Montserrat', Arial, sans-serif !important; color: var(--crf-pp-ink) !important; }
html.crf-restyle body #content #product .form-group > select.form-control,
html.crf-restyle body #content #product .form-group > input[type="text"].form-control { height: 46px; border-radius: 10px; border: 1px solid var(--crf-pp-line-d); box-shadow: none; font: 500 14px 'Montserrat', Arial, sans-serif; }
/* No display value is ever set on the quantity box, its label, Add to Cart, Get Quote or the heart: other mods hide
   them with display:none (Trade #97 on trade-only products) and that must keep winning. The quantity row is laid out
   by its parent instead: a wrapping flex row (label and box side by side, the buttons each on a full row). */
html.crf-restyle body #content #product .item-qty-label { margin: 0 10px 0 0 !important; }
html.crf-restyle body #content #product #input-quantity { width: 84px !important; text-align: center; }
@supports selector(:has(a)) {
    html.crf-restyle body #content #product .form-group:has(> #input-quantity) { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; margin-top: 14px; }
    html.crf-restyle body #content #product .form-group:has(> #input-quantity) > br { display: none; }
    html.crf-restyle body #content #product .form-group:has(> #input-quantity) > .cart-wrap-custom,
    html.crf-restyle body #content #product .form-group:has(> #input-quantity) > #button-cart,
    html.crf-restyle body #content #product .form-group:has(> #input-quantity) > #qb-add-to-quote-btn { flex: 0 0 100%; }
    /* The quantity row's final shape from the first paint. Until the page's head block wraps Add to Cart (at
       DOMContentLoaded), its own flex:3 !important put the button beside the quantity box, and the heart, Get Quote and
       the in-cart line arrived after a first paint: the row grew 56 to 182 px and, the buy card being the taller
       column, pushed the description down. Now the unwrapped button already sits on its own row where the wrapper
       will put it (no display value is set), and the row keeps its final 182 px (quantity 46 + 24 + Add to Cart 54 + 10
       + Get Quote 48, the same at every width) only where the Quote mod's header pill is on the page (its script adds
       Get Quote whenever Add to Cart exists) and the page is not trade-locked (the Trade notice hides the buttons). */
    html.crf-restyle body #content #product .form-group:has(> #input-quantity) > #button-cart { flex: 0 0 100% !important; margin-top: 14px !important; }
    html.crf-restyle body:has(#qb-quote-pill) #content .product-info:not(:has(> .opstrade-notice)) #product .form-group:has(> #input-quantity):has(#button-cart) { min-height: 182px; }
}

/* the buttons: pink Add to Cart full width; Get Quote outlined; the heart a square beside it. The head block's
   wrapper (div.cart-wrap-custom) is a flex row; here it is a two-column grid. Get Quote may land inside the wrapper
   or just after it (script timing); both look right. */
html.crf-restyle body #content .cart-wrap-custom { display: grid !important; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; margin-top: 14px !important; }
html.crf-restyle body #content #product #button-cart { grid-column: 1 / -1; width: 100%; height: 54px !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; border-radius: 10px !important;
    background: var(--crf-pp-pink) !important; color: #fff !important; font: 700 17px/54px 'Montserrat', Arial, sans-serif !important; text-transform: none !important; box-shadow: 0 2px 6px rgba(216, 27, 96, .25) !important; }
html.crf-restyle body #content #product #button-cart:hover,
html.crf-restyle body #content #product #button-cart:focus { background: var(--crf-pp-pink-d) !important; }
html.crf-restyle body #content #product #qb-add-to-quote-btn { box-sizing: border-box; width: 100% !important; height: 48px !important; margin: 10px 0 0 !important; padding: 0 14px !important;
    border: 0 !important; border-radius: 10px !important; background: #fff !important; color: var(--crf-pp-pink-d) !important; box-shadow: inset 0 0 0 2px var(--crf-pp-pink-r) !important;
    font: 700 15px/48px 'Montserrat', Arial, sans-serif !important; text-align: center; }
html.crf-restyle body #content #product #qb-add-to-quote-btn:hover { background: #fdf0f5 !important; color: var(--crf-pp-pink-d) !important; }
html.crf-restyle body #content #product .cart-wrap-custom > #qb-add-to-quote-btn { grid-column: 1; margin: 0 !important; }
html.crf-restyle body #content #product .btn-wishlist-moved { grid-column: 2; height: 48px !important; border-radius: 10px !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--crf-pp-line-d) !important; }
/* no Get Quote inside the wrapper: the heart sits beside Add to Cart instead */
@supports selector(:has(a)) {
    html.crf-restyle body #content #product .cart-wrap-custom:not(:has(> #qb-add-to-quote-btn)):has(> .btn-wishlist-moved) > #button-cart { grid-column: 1; }
    /* (not where the Quote mod is on the page: Get Quote is on its way, and a 54 px heart for that moment made the row
       6 px taller and then shorter again) */
    html.crf-restyle body:not(:has(#qb-quote-pill)) #content #product .cart-wrap-custom:not(:has(> #qb-add-to-quote-btn)) > .btn-wishlist-moved { height: 54px !important; }
}

/* the two lines under the buttons: fixed text printed by the styles (space kept from the first paint, nothing is
   added to the page, the same two lines on every product) */
html.crf-restyle body #content > .row > .product-info::after { content: "Free pickup from Moorabbin\A Questions? (03) 9761 7979"; white-space: pre-line; display: block; margin: 16px 0 0; padding: 14px 0 0;
    border-top: 1px solid var(--crf-pp-line); font: 500 13px/1.75 'Montserrat', Arial, sans-serif; color: var(--crf-pp-mute); }

/* ---- description: tabs as pills, the text in a white card, lines no wider than 860 px ---- */
html.crf-restyle body #content > .nav-tabs { border: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px !important; }
html.crf-restyle body #content > .nav-tabs::before, html.crf-restyle body #content > .nav-tabs::after { display: none; }
html.crf-restyle body #content > .nav-tabs > li { float: none !important; margin: 0 !important; }
html.crf-restyle body #content > .nav-tabs > li > a { border: 1px solid var(--crf-pp-line-d) !important; border-radius: 999px !important; background: #fff !important; color: var(--crf-pp-ink) !important; padding: 8px 20px !important; font: 600 14px 'Montserrat', Arial, sans-serif !important; margin: 0 !important; }
html.crf-restyle body #content > .nav-tabs > li.active > a { background: var(--crf-pp-ink) !important; border-color: var(--crf-pp-ink) !important; color: #fff !important; }
html.crf-restyle body #content > .tab-content { background: #fff; border: 1px solid var(--crf-pp-line); border-radius: 12px; box-shadow: var(--crf-pp-shadow); padding: 28px 34px !important; margin-bottom: 36px; }
html.crf-restyle body #content > .tab-content > .tab-pane > * { max-width: 860px; }

/* ---- tablet: half and half ---- */
@media (max-width: 991px) {
    @supports selector(:has(a)) {
        html.crf-restyle body #content > .row:has(> .product-info) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
    }
    html.crf-restyle body #content .product-info { padding: 20px !important; }
    html.crf-restyle body #content .product-info h1 { font-size: 22px !important; }
}
/* ---- phone: one column ---- */
@media (max-width: 767px) {
    @supports selector(:has(a)) {
        html.crf-restyle body #content > .row:has(> .product-info) { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 20px; }
    }
    html.crf-restyle body #content ul.thumbnails > li:first-child > a.thumbnail { height: 260px; padding: 12px !important; }
    html.crf-restyle body #content ul.thumbnails > li:first-child > a.thumbnail > img { height: 100%; width: auto; }
    html.crf-restyle body #content .product-info { padding: 18px 16px 16px !important; }
    html.crf-restyle body #content .product-info h1 { font-size: 21px !important; margin-bottom: 6px !important; }
    html.crf-restyle body #content .product-info > ul.list-unstyled:first-of-type { margin-bottom: 8px !important; }
    html.crf-restyle body #content .product-info ul.list-unstyled > li > h2 { font-size: 28px !important; }
    html.crf-restyle body #content > .tab-content { padding: 18px 16px !important; }
}

/* ---- V31.0.48: tick and choice options as tappable cards (the quick add popup look). Option groups that are direct
   children of #product, not the flavour picker's. The label keeps its own display (no flex); the real box stays in
   the form, hidden from view by position and opacity only (never display), so the form, the option total and the
   shipping size notes read it as before. Choices show a round mark, ticks a square one. A group the shop marks as
   missing (has-error, or its red note) gets red card edges. Browsers without :has() keep the real box visible. ---- */
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox { margin: 0 0 8px; padding: 0; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label {
    position: relative; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 56px; margin: 0; padding: 18px 14px 18px 40px;
    border: 1px solid #ddd0c3; border-radius: 12px; background: #fff; font: 600 15px/1.3 'Montserrat', Arial, sans-serif; color: #252525;
    cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:hover,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:hover { border-color: #c9b6a4; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label img,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label img { width: 52px; height: 52px; object-fit: contain; box-sizing: border-box; padding: 2px; margin: -12px 10px -12px 0;
    vertical-align: middle; border: 1px solid #ece3da; border-radius: 8px; background: #fff; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label .oc-sov-price,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label .oc-sov-price { font-size: 15px; }
html.crf-restyle body #content #product > .form-group.has-error:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label,
html.crf-restyle body #content #product > .form-group.has-error:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label { border-color: #b91c1c; box-shadow: inset 0 0 0 1px #b91c1c; }
@supports selector(:has(*)) {
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:has(input),
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:has(input) { padding-left: 44px; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label input,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label input { position: absolute; left: 14px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:has(input)::before,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:has(input)::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
    box-sizing: border-box; border: 2px solid #b5a596; background: #fff; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:has(input)::before { border-radius: 50%; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:has(input)::before { border-radius: 5px; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:has(input:checked)::before { border-color: #d81b60; background: radial-gradient(circle, #d81b60 0, #d81b60 4.5px, #fff 5.5px); }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:has(input:checked)::before { border-color: #d81b60; background: #d81b60 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:has(input:checked),
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:has(input:checked) { border-color: #d81b60; box-shadow: inset 0 0 0 1px #d81b60; background: #fdf0f5; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:has(input:focus-visible),
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:has(input:focus-visible) { outline: 2px solid #252525; outline-offset: 2px; }
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option):has(> .text-danger) .radio > label,
html.crf-restyle body #content #product > .form-group:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option):has(> .text-danger) .checkbox > label,
html.crf-restyle body #content #product > .form-group.has-error:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .radio > label:has(input:checked),
html.crf-restyle body #content #product > .form-group.has-error:not(.ftp-processed):not(.ftp-picker):not(.ftp-hidden-option) .checkbox > label:has(input:checked) { border-color: #b91c1c; box-shadow: inset 0 0 0 1px #b91c1c; }
}