/* Carefree Theme + Menu Engine V31.0.102 - cart page look, split out of cart.css (setting crf_cart_mode). Linked only on the cart page (route checkout/cart), right after cart.css, in the same header line, so the order against cart.css and every other stylesheet is as before. Every rule here was in cart.css before this split and is copied verbatim, in its order (comments travel with the rule after them); it uses cart.css's colours (html.crf-cart variables) and its @keyframes crf-calc-shim. Section numbers and notes are cart.css's. */ /* ---------- 1. the page grid (gated) ---------- */ @supports (display: contents) and selector(:has(a)) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; column-gap: 0; grid-template-areas: "." "." "." "." "." "." "." "." "bn" "h1" "adv" "warn" "warn2" "lines" "clear" "ftr" "tot" "chk" "cont" "h2" "acc"; /* Clear Cart, Checkout and Continue Shopping come last in the page but sit above other blocks: their rows are kept at their final height from the first paint, so nothing below them moves when they arrive */ grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto minmax(58px, auto) auto auto minmax(59px, auto) minmax(76px, auto) auto auto; } @media (max-width: 767px) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) { grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto minmax(58px, auto) auto auto minmax(62px, auto) minmax(76px, auto) auto auto; } } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master { display: contents !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons { display: contents !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row)::before { content: ""; display: block; grid-column: 1 / -1; grid-row: tot / cont; background: #fff; border: 1px solid var(--crf-c-line); border-radius: var(--crf-c-r); box-shadow: var(--crf-c-shadow); margin: 0; pointer-events: none; } /* V31.0.50: two columns from 992px for every cart. "lines" spans every right-hand row and the last 1fr row, so the lines' height lands in that last row only and the right column's rows are sized by the right column alone. */ @media (min-width: 992px) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); column-gap: 18px; grid-template-areas: ". ." ". ." ". ." ". ." ". ." ". ." ". ." ". ." "bn bn" "h1 h1" "adv adv" "warn warn" "warn2 warn2" "lines tot" "lines chk" "lines cont" "lines clear" "lines ftr" "lines acc" "lines ."; grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto minmax(59px, auto) minmax(52px, auto) minmax(58px, auto) auto auto 1fr; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row)::before { grid-column: 2; grid-row: tot / clear; } /* anything else in #content (a notice, an unknown block) spans both columns above the title: every block above the cart lines is full width and the two columns start at the lines */ html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > :not(h1, form, .ftr-offer, .top-totals-row, .cart-bottom-master, #hdcs-banner, #hdo-cart-page-warnings, #multi-date-warning, .hybrid-advisory) { grid-column: 1 / -1; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > h2, html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > p { display: none !important; } } @media (min-width: 1200px) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); column-gap: 24px; } } } /* placement: only takes effect while the gate above made #content a grid */ /* R4: other mods' notices above the title: full width, auto-placed into the empty notice band at the top, one row each in page order (two of one kind stack, never overlap); their own look is untouched */ html.crf-cart body.checkout-cart #content > :is(#ffra-hcb, #opstrade-ib, #fs-cart-banner, .btc-pg-note, .btc-pg-ended) { grid-column: 1 / -1; } html.crf-cart body.checkout-cart #content > #hdcs-banner { grid-area: bn; } html.crf-cart body.checkout-cart #content > h1 { grid-area: h1; } html.crf-cart body.checkout-cart #content > .hybrid-advisory { grid-area: adv; } html.crf-cart body.checkout-cart #content > #hdo-cart-page-warnings { grid-area: warn; } html.crf-cart body.checkout-cart #content > #multi-date-warning { grid-area: warn2; } html.crf-cart body.checkout-cart #content > form { grid-area: lines; min-width: 0; } html.crf-cart body.checkout-cart #content > .ftr-offer { grid-area: ftr; } html.crf-cart body.checkout-cart #content > .top-totals-row { grid-area: tot; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > h2 { grid-area: h2; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > #accordion { grid-area: acc; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > br { display: none; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left:has(> .btn-clear-cart) { grid-area: clear; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left:not(:has(> .btn-clear-cart)) { grid-area: cont; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-right { grid-area: chk; } /* ---------- 2. title, blocks ---------- */ html.crf-cart body.checkout-cart #content > h1 { font-family: 'Comfortaa', 'Montserrat', Arial, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.35; color: var(--crf-c-ink); text-align: center; margin: 10px 0 22px; padding: 0; } html.crf-cart body.checkout-cart #content > h1::after { content: ""; display: block; width: 80px; height: 4px; border-radius: 2px; background: var(--crf-c-pink); margin: 12px auto 0; } /* V31.0.80: the Free Floss Tray offer in the info notice colours (was a pink card; pink is for buying only) */ html.crf-cart body.checkout-cart #content > .ftr-offer { border: 1px solid var(--crf-c-line-d); border-radius: 12px; background: var(--crf-c-cream); color: var(--crf-c-text); padding: 14px 18px; margin: 4px 0 18px; line-height: 1.45; } html.crf-cart body.checkout-cart #content > .ftr-offer .ftr-offer__link { color: var(--crf-c-ink); font-weight: 700; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > h2 { font-family: 'Comfortaa', 'Montserrat', Arial, sans-serif; font-weight: 400; font-size: 22px; line-height: 1.35; color: var(--crf-c-ink); text-align: left; width: auto; margin: 28px 0 12px; padding: 0; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > h2::after { content: none; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > #accordion { width: auto !important; margin: 0 0 24px !important; } html.crf-cart body.checkout-cart #accordion > .panel { border: 1px solid var(--crf-c-line); border-radius: var(--crf-c-r); box-shadow: var(--crf-c-shadow); background: #fff; overflow: hidden; } html.crf-cart body.checkout-cart #accordion > .panel + .panel { margin-top: 12px; } html.crf-cart body.checkout-cart #accordion > .panel > .panel-heading { background: #fff; border: 0; } html.crf-cart body.checkout-cart #accordion > .panel > .panel-heading .panel-title { font-size: 15px; line-height: 1.4; font-weight: 700; } html.crf-cart body.checkout-cart #accordion > .panel > .panel-heading .panel-title a { color: var(--crf-c-ink); padding: 15px 18px !important; } html.crf-cart body.checkout-cart #accordion > .panel > .panel-heading .panel-title a .fa-caret-down { float: right; margin-top: 2px; color: var(--crf-c-mute); } html.crf-cart body.checkout-cart #accordion > .panel > .panel-collapse > .panel-body { border-top: 1px solid var(--crf-c-line) !important; padding: 16px 18px; } /* ---------- 2b. V31.0.64 (CF-3.3): the coupon / voucher / reward / shipping boxes inside the panels ---------- Only these six boxes, by id, on the cart page, inside the page body's #accordion: never the quantity box, the phone float cart (#mf, #mc-*) or the body-level #modal-shipping. Size, line, corners, font and focus ring only: no display, visibility, position or width, and no rule on the panels themselves (Hire Delivery Manager hides the shipping panel's contents on a hire cart). (3,2,2) beats Bootstrap .input-group .form-control:first-child (0,3,0); joined corners (3,4,2). */ html.crf-cart body.checkout-cart #content #accordion #input-coupon, html.crf-cart body.checkout-cart #content #accordion #input-voucher, html.crf-cart body.checkout-cart #content #accordion #input-reward, html.crf-cart body.checkout-cart #content #accordion #input-postcode, html.crf-cart body.checkout-cart #content #accordion #input-country, html.crf-cart body.checkout-cart #content #accordion #input-zone { height: 44px; padding: 10px 14px; border: 1px solid var(--crf-c-line-d); border-radius: 10px; background-color: #fff; box-shadow: none; font: 500 15px/1.3 'Montserrat', Arial, sans-serif; color: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content #accordion .input-group > #input-coupon:not(:last-child), html.crf-cart body.checkout-cart #content #accordion .input-group > #input-voucher:not(:last-child), html.crf-cart body.checkout-cart #content #accordion .input-group > #input-reward:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } html.crf-cart body.checkout-cart #content #accordion #input-coupon:focus, html.crf-cart body.checkout-cart #content #accordion #input-voucher:focus, html.crf-cart body.checkout-cart #content #accordion #input-reward:focus, html.crf-cart body.checkout-cart #content #accordion #input-postcode:focus, html.crf-cart body.checkout-cart #content #accordion #input-country:focus, html.crf-cart body.checkout-cart #content #accordion #input-zone:focus { border-color: var(--crf-c-ink); box-shadow: 0 0 0 3px rgba(37, 37, 37, .12); outline: 0; } /* the Apply buttons joined to those boxes: as tall as the box, height only (buttons.css leaves .input-group-btn > .btn unsized and gives these ids colour and corners only); (3,3,2) */ html.crf-cart body.checkout-cart #content #accordion .input-group-btn > #button-coupon, html.crf-cart body.checkout-cart #content #accordion .input-group-btn > #button-voucher, html.crf-cart body.checkout-cart #content #accordion .input-group-btn > #button-reward { height: 44px; } @media (max-width: 767px) { html.crf-cart body.checkout-cart #content #accordion #input-coupon, html.crf-cart body.checkout-cart #content #accordion #input-voucher, html.crf-cart body.checkout-cart #content #accordion #input-reward, html.crf-cart body.checkout-cart #content #accordion #input-postcode, html.crf-cart body.checkout-cart #content #accordion #input-country, html.crf-cart body.checkout-cart #content #accordion #input-zone { font-size: 16px; } } /* ---------- 3. summary card (totals, Checkout, Continue Shopping) ---------- */ /* the summary card's own spacing and the un-floating of Cart Master's columns and buttons apply only inside the grid */ @supports (display: contents) and selector(:has(a)) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .top-totals-row { margin: 0 !important; padding: 18px 22px 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .top-totals-row > div { width: auto !important; margin-left: 0 !important; float: none !important; padding: 0 !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-right { float: none !important; width: auto !important; padding: 14px 22px 0; margin: 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-left:not(:has(> .btn-clear-cart)) { float: none !important; width: auto !important; padding: 8px 22px 24px; margin: 0; text-align: center; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-left:has(> .btn-clear-cart) { float: none !important; width: auto !important; margin: 0 0 14px; text-align: right; } @media (max-width: 767px) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .top-totals-row { padding: 16px 18px 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-right { padding: 12px 18px 0; } } } html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered { margin: 0 !important; border: 0 !important; background: transparent; } html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered > tbody > tr > td { border: 0 !important; border-top: 1px solid transparent !important; background: transparent; padding: 6px 0 !important; line-height: 22px; font-size: 15px; color: var(--crf-c-text); vertical-align: middle; } html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered > tbody > tr > td:not(.m-board-column) { width: auto !important; } html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered > tbody > tr > td:not(.m-board-column):first-child, html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered > tbody > tr > td.m-board-column + td { text-align: left !important; } html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered > tbody > tr > td > strong { font-weight: 500; } html.crf-cart body.checkout-cart #content > .top-totals-row td.m-board-column:has(> #cart-message-board:empty) { display: none; } html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered > tbody > tr.crf-cart-total-row > td { border-top-color: var(--crf-c-line) !important; padding: 3px 0 !important; line-height: 26px; font-size: 22px; font-weight: 700; color: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content > .top-totals-row table.table-bordered > tbody > tr.crf-cart-total-row > td > strong { font-weight: 700; font-size: 16px; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-right > a.btn-primary { border-radius: 10px; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left:not(:has(> .btn-clear-cart)) > a.btn-default { display: inline-block !important; width: auto !important; height: auto !important; min-height: 44px; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--crf-c-ink) !important; font-weight: 700; font-size: 15px; line-height: 1.45; padding: 11px 6px !important; text-decoration: underline; text-underline-offset: 4px; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .btn-clear-cart.btn-danger { display: inline-flex !important; width: auto !important; height: 44px !important; padding: 0 16px !important; background: #fff !important; border: 1px solid var(--crf-c-red-line) !important; color: var(--crf-c-red) !important; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1.4; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .btn-clear-cart.btn-danger:hover { background: var(--crf-c-red-l) !important; } /* V31.0.50: the right column from 992px: one totals card (totals, Checkout, Continue Shopping, then Clear Cart as a quiet link), the Free Floss Tray offer, then ONE card holding the three panels with 1px dividers */ @media (min-width: 992px) { @supports (display: contents) and selector(:has(a)) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .top-totals-row { padding: 16px 18px 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-right { padding: 12px 18px 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-left:not(:has(> .btn-clear-cart)) { padding: 4px 18px 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-left:has(> .btn-clear-cart) { margin: 0; padding: 0 18px 14px; text-align: center; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-left > .btn-clear-cart.btn-danger { height: 40px !important; background: transparent !important; border: 0 !important; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; font-size: 14px; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .ftr-offer { margin: 16px 0 0; padding: 12px 14px; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion { margin: 16px 0 0 !important; background: #fff; border: 1px solid var(--crf-c-line); border-radius: var(--crf-c-r); box-shadow: var(--crf-c-shadow); overflow: hidden; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel { border: 0; border-radius: 0; box-shadow: none; margin: 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel + .panel { margin-top: 0; border-top: 1px solid var(--crf-c-line); } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel > .panel-heading .panel-title a { padding: 13px 16px !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel > .panel-collapse > .panel-body { padding: 14px 16px; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion .form-horizontal .form-group { margin-left: 0; margin-right: 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion .form-horizontal .form-group > [class*="col-sm-"] { float: none; width: auto; padding-left: 0; padding-right: 0; text-align: left; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion .input-group { width: 100%; } /* Hire Delivery Manager's board cell: a full-width block above the totals rows in every cart with plain totals (the R3 hire treatment, here for all carts) */ html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div::before { content: ""; display: block; grid-column: 1; grid-row: 1; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > .hybrid-advisory { grid-column: 1; grid-row: 1; align-self: start; margin: 0 0 12px !important; text-align: left !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table { grid-column: 1; grid-row: 2; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 12px; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody, html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr { display: contents !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr > td.m-board-column { display: block !important; grid-column: 1 / -1; grid-row: 1; width: auto !important; padding: 0 !important; margin: 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr > td.m-board-column:has(> #cart-message-board:empty) { display: none !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr > td.m-board-column .hybrid-advisory { margin: 0 0 12px !important; text-align: left !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr > td:not(.m-board-column) + td { text-align: right !important; } } } /* V31.0.51: below 992px (phones and tablets) the desktop card look is carried down, the phone order kept (lines, Clear Cart, the Free Floss Tray offer, the totals card with Checkout and Continue Shopping, then the panels) and the phone Total + Checkout bar untouched: "What would you like to do next?" and its line hidden; the three panels as ONE white card with 1px dividers; the totals card's desktop padding; Clear Cart as the same quiet underlined link (kept 44px tall on phones for the finger). Not carried: the tray offer's and Continue Shopping's desktop spacing (on phones they sit above / at the foot of the totals card, not under it) and the board-cell-as-block treatment (the note's room below 992px is the R3 rule, --crf-hnote-h). */ @media (max-width: 991px) { @supports (display: contents) and selector(:has(a)) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > h2, html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > p { display: none !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .top-totals-row { padding: 16px 18px 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-right { padding: 12px 18px 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-left > .btn-clear-cart.btn-danger { height: 44px !important; background: transparent !important; border: 0 !important; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; font-size: 14px; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion { margin: 16px 0 24px !important; background: #fff; border: 1px solid var(--crf-c-line); border-radius: var(--crf-c-r); box-shadow: var(--crf-c-shadow); overflow: hidden; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel { border: 0; border-radius: 0; box-shadow: none; margin: 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel + .panel { margin-top: 0; border-top: 1px solid var(--crf-c-line); } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel > .panel-heading .panel-title a { padding: 13px 16px !important; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion > .panel > .panel-collapse > .panel-body { padding: 14px 16px; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion .form-horizontal .form-group { margin-left: 0; margin-right: 0; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion .form-horizontal .form-group > [class*="col-sm-"] { float: none; width: auto; padding-left: 0; padding-right: 0; text-align: left; } html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > #accordion .input-group { width: 100%; } } } /* ---------- 3b. hire cart with a bought item (R3) ---------- */ /* GT (gen_cart_css.py) = the page grid, on a crf-cart-hire page, while every totals row is a plain label + figure pair (with or without Hire Delivery Manager's board cell first). Row 1 of the totals block holds the Delivery / Pickup Note wherever Hire Delivery Manager puts it: above the table (below 768px, and while it has not yet moved it), or in its board cell (768px and up), which becomes the table's own first row. The table keeps its box (Hire Delivery Manager finds it by :visible), shown as a grid: one label + figure pair per row, every figure in the right-hand column. With crf-cart-hnote the note's row is kept open from the first paint (in the block until the board holds the note, then in the table) and grows if the note is taller, so it is never on top of anything. Any other totals shape keeps the table. */ @supports (display: contents) and selector(:has(a)) { html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 0; } html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div::before { content: ""; display: block; grid-column: 1; grid-row: 1; } html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > .hybrid-advisory { grid-column: 1; grid-row: 1; align-self: start; margin: 0 0 12px !important; text-align: left !important; } html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table { grid-column: 1; grid-row: 2; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 16px; } html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody, html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr { display: contents !important; } html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr > td.m-board-column { display: block !important; grid-column: 1 / -1; grid-row: 1; width: auto !important; padding: 0 !important; margin: 0; } html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr > td.m-board-column .hybrid-advisory { margin: 0 0 12px !important; text-align: left !important; } html.crf-cart.crf-restyle.crf-cart-hire body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table > tbody > tr > td:not(.m-board-column) + td { text-align: right !important; } html.crf-cart.crf-restyle.crf-cart-hire.crf-cart-hnote body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div:not(:has(#cart-message-board > *)) { grid-template-rows: minmax(var(--crf-hnote-h, 84px), auto); } html.crf-cart.crf-restyle.crf-cart-hire.crf-cart-hnote body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table:has(#cart-message-board > *) { grid-template-rows: minmax(var(--crf-hnote-h, 84px), auto); } } html.crf-cart.crf-cart-hnote body.checkout-cart { --crf-hnote-h: 84px; } @media (max-width: 767px) { html.crf-cart.crf-cart-hnote body.checkout-cart { --crf-hnote-h: 124px; } } @media (max-width: 399px) { html.crf-cart.crf-cart-hnote body.checkout-cart { --crf-hnote-h: 162px; } } @media (min-width: 992px) { html.crf-cart.crf-cart-hnote body.checkout-cart { --crf-hnote-h: 150px; } } /* V31.0.51: from 1200px the totals card is wider, so the note is shorter there (98px measured in the harness, 137px at 992-1199): its kept room is 112px from 1200px (14px of slack for other fonts; a taller note still grows the card once, as before) */ @media (min-width: 1200px) { html.crf-cart.crf-cart-hnote body.checkout-cart { --crf-hnote-h: 112px; } } /* V31.0.50: from 992px the note's room is kept INSIDE the totals table (top padding while the board is empty, the board row's own minimum once it holds the note), so the table's top never moves when Hire Delivery Manager moves the note from above the table into its board cell; while the note is still above the table it lies over that same room */ @media (min-width: 992px) { @supports (display: contents) and selector(:has(a)) { html.crf-cart.crf-restyle.crf-cart-hire.crf-cart-hnote body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div:not(:has(#cart-message-board > *)) { grid-template-rows: auto; } html.crf-cart.crf-restyle.crf-cart-hire.crf-cart-hnote body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > .hybrid-advisory { grid-row: 2; position: relative; z-index: 1; } html.crf-cart.crf-restyle.crf-cart-hire.crf-cart-hnote body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)):has(> .top-totals-row > div > table):not(:has(> .top-totals-row > div > table td:only-child)):not(:has(> .top-totals-row > div > table td:nth-child(4))):not(:has(> .top-totals-row > div > table td:not(.m-board-column):first-child + td + td)):not(:has(> .top-totals-row > div > table td.m-board-column:first-child:nth-last-child(2))):not(:has(> .top-totals-row > div > table td.m-board-column:not(:first-child))):not(:has(> .top-totals-row > div > table td[colspan])):not(:has(> .top-totals-row > div > table th)):not(:has(> .top-totals-row > div > table > :not(tbody))):not(:has(> .top-totals-row > div > table > tbody > :not(tr))):not(:has(> .top-totals-row > div > table > tbody > tr > :not(td))) > .top-totals-row > div > table:not(:has(#cart-message-board > *)) { padding-top: var(--crf-hnote-h, 150px); } } } /* ---------- 4. line cards, 768px and up (the cart table) ---------- */ html.crf-cart body.checkout-cart #shopping-cart.table-responsive { border: 0; margin: 0 0 6px; overflow-x: visible; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered { border: 0 !important; border-collapse: separate; border-spacing: 0 12px; margin: -12px 0 0; background: transparent; width: 100%; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > thead > tr > td { border: 0 !important; background: transparent; padding: 14px 10px 0 !important; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--crf-c-mute); vertical-align: bottom; white-space: nowrap; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > thead > tr > td:first-child { color: transparent; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td { background: #fff; border: 0 !important; border-top: 1px solid var(--crf-c-line) !important; border-bottom: 1px solid var(--crf-c-line) !important; padding: 16px 10px !important; vertical-align: middle; line-height: 1.45; color: var(--crf-c-text); } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:first-child { border-left: 1px solid var(--crf-c-line) !important; border-radius: var(--crf-c-r) 0 0 var(--crf-c-r); width: 88px; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:last-child { border-right: 1px solid var(--crf-c-line) !important; border-radius: 0 var(--crf-c-r) var(--crf-c-r) 0; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:first-child img { width: 64px; height: 64px !important; max-width: 64px !important; object-fit: contain; padding: 3px; border: 1px solid var(--crf-c-line); border-radius: 10px; background: #fff; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:nth-child(2) > a { color: var(--crf-c-ink) !important; font-weight: 700; font-size: 15px; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:nth-child(2) small { color: var(--crf-c-mute); font-size: 13px; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:last-child { font-weight: 700; font-size: 16px; color: var(--crf-c-ink); white-space: nowrap; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:nth-last-child(2) { white-space: nowrap; } /* quantity group: room for the two step buttons is kept from the first paint, so nothing moves when they arrive */ html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block { max-width: 260px !important; width: 220px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block:not(.crf-qs-ready) { padding-left: 36px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block:not(.crf-qs-ready) > .input-group-btn:last-child { padding-left: 0; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > input.d-qty-box { height: 44px; text-align: center; border-color: var(--crf-c-line-d); border-radius: 0; box-shadow: none; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > .input-group-btn:last-child > .btn { height: 44px; min-width: 44px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > .input-group-btn:last-child > button[type="submit"] { margin-left: 6px; border-radius: 10px !important; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > .input-group-btn:last-child > .btn-danger { margin-left: 4px; border-radius: 10px !important; } /* V31.0.82: before cart.js has run, Update stands exactly where the plus button will be (36px, joined to the box, no plus room kept), so when plus arrives and Update is hidden (section 15) the box and Remove stay put */ html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block:not(.crf-qs-ready) > .input-group-btn:last-child > button[type="submit"] { margin-left: 0; width: 36px; min-width: 36px; padding: 0; border-radius: 0 10px 10px 0 !important; } html.crf-cart .crf-qs > .crf-qty-dec, html.crf-cart .crf-qs > .crf-qty-inc { box-sizing: border-box; width: 36px; height: 44px; padding: 0; margin: 0; background: #fff; color: var(--crf-c-ink); border: 1px solid var(--crf-c-line-d); font: 400 20px/1 'Montserrat', Arial, sans-serif; cursor: pointer; } html.crf-cart .crf-qs > .crf-qty-dec { border-radius: 10px 0 0 10px; border-right: 0; } html.crf-cart .crf-qs > .crf-qty-inc { border-radius: 0 10px 10px 0; border-left: 0; } html.crf-cart .crf-qs > button:hover { background: #f3efeb; } html.crf-cart .crf-qs > button:focus-visible { outline: 2px solid var(--crf-c-ink); outline-offset: -2px; } html.crf-cart .crf-qs > button:disabled { color: #b8aea6; background: #fff; cursor: default; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > .crf-qs { width: 36px; } /* V31.0.50 (A5): from 992px the lines sit in 2/3 of the page: tighter cells and a quantity cluster (step buttons, box, Update, Remove), room for the step buttons still kept from the first paint; nothing is hidden. V31.0.82: the cluster is 44px (was 30px): minus 44, box 52, plus 44, Remove 44 with 4px before it = a 188px group (was 172px). Before cart.js has run the minus room is kept on the left and Update stands exactly where plus will be (no plus room, no margin), so when plus arrives and Update is hidden (section 15) Remove and the box stay put. Steps in but the quantity save not on (no html.crf-qsave): Update shows after plus, so the group is 236px. */ @media (min-width: 992px) { html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td { padding: 12px 8px !important; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > thead > tr > td { padding: 12px 8px 0 !important; } html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:first-child { width: 80px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block { width: 188px; max-width: 188px !important; } html.crf-cart:not(.crf-qsave) body.checkout-cart #shopping-cart td > .input-group.btn-block.crf-qs-ready { width: 236px; max-width: 236px !important; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block:not(.crf-qs-ready) { padding-left: 44px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block:not(.crf-qs-ready) > .input-group-btn:last-child { padding-left: 0; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > input.d-qty-box { height: 44px; min-width: 40px; padding: 0 2px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > .input-group-btn:last-child > .btn { height: 44px; min-width: 44px; width: 44px; padding: 0; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > .input-group-btn:last-child > button[type="submit"] { margin-left: 4px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block:not(.crf-qs-ready) > .input-group-btn:last-child > button[type="submit"] { margin-left: 0; width: 44px; min-width: 44px; } html.crf-cart body.checkout-cart #shopping-cart .crf-qs > .crf-qty-dec, html.crf-cart body.checkout-cart #shopping-cart .crf-qs > .crf-qty-inc { width: 44px; height: 44px; font-size: 20px; } html.crf-cart body.checkout-cart #shopping-cart td > .input-group.btn-block > .crf-qs { width: 44px; } } @media (min-width: 992px) and (max-width: 1199px) { html.crf-cart body.checkout-cart #shopping-cart > table.table-bordered > tbody > tr > td:nth-child(2) > a { font-size: 14px; } } /* ---------- 5. line cards, phones (Cart Master's phone list) ---------- */ @media (max-width: 767px) { html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table { display: block; border: 0 !important; margin: 0 0 6px; } html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table > tbody.m-product-block { display: block; position: relative; background: #fff; border: 1px solid var(--crf-c-line) !important; border-radius: var(--crf-c-r); box-shadow: var(--crf-c-shadow); margin: 0 0 12px; padding: 14px 14px 12px; } html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table > tbody.m-product-block > tr { display: flex; gap: 12px; align-items: flex-start; } html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table > tbody.m-product-block > tr > td { display: block; padding: 0 !important; border: 0 !important; } html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table > tbody.m-product-block > tr > td.col-img { width: 64px; flex: 0 0 64px; } html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table > tbody.m-product-block > tr > td.col-img img { width: 64px; height: 64px; max-width: 64px; object-fit: contain; padding: 3px; border: 1px solid var(--crf-c-line); border-radius: 10px; background: #fff; } html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table > tbody.m-product-block > tr > td.col-desc { flex: 1 1 auto; min-width: 0; padding-right: 0 !important; line-height: 1.45; } /* V31.0.65: the smaller corner Remove (32px at 4px, tap area 6px wider all round) only reaches the top 28px of the name's right-hand 28px, so only that corner is kept free (a float): the rest of the name and the quantity row use the full width (the whole column kept 36px free before) */ html.crf-cart body.checkout-cart .mobile-only-cart > table.mobile-table > tbody.m-product-block > tr > td.col-desc::before { content: ""; float: right; width: 28px; height: 28px; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc strong a { color: var(--crf-c-ink) !important; font-size: 15px; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-summary { display: none; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-edit-cluster { display: block !important; height: auto !important; overflow: visible !important; opacity: 1 !important; margin: 10px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls { width: auto; gap: 0; flex-wrap: nowrap; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-qty-box { width: 52px !important; height: 44px !important; font-size: 16px; border-radius: 0; border-color: var(--crf-c-line-d); margin: 0; } /* V31.0.61: 44px step buttons on phones from 360px (were 40px; under 360px they stay 40px, the row is not measured there), so the room kept for them before cart.js adds them is 44px too */ html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls:not(.crf-qs-ready) > .m-qty-box { margin: 0 44px; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp { flex-grow: 0; margin-left: 8px; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp { align-self: center; } /* V31.0.65: Update 32px to the eye (was 44px), its tap area kept 44px by a clear ::after 6px wider all round (6px stays inside the 8px gap to the + button) */ html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"] { position: relative; width: 32px; height: 32px !important; flex: 0 0 32px; border-radius: 8px; padding: 0; line-height: 30px; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"]::after, html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > .btn-danger::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; } /* V31.0.65: buttons.css sizes every page button (1,2,2): min-height 44px, padding 10px 20px, 15px type; (1,8,4) and (1,8,3) beat it for these two buttons; size only, no !important (buttons.css sets none on these) */ html.crf-cart.crf-btn body.checkout-cart #content .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"] { min-height: 0; padding: 0; line-height: 32px; font-size: 15px; } html.crf-cart.crf-btn body.checkout-cart #content .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > .btn-danger { min-height: 0; padding: 0; line-height: 32px; font-size: 16px; } /* V31.0.61 R2: the phone Update button in the restyle pink, white mark (buttons.css drew it charcoal / black on hover). (1,8,4) and (1,9,4) with :hover/:focus/:active beat buttons.css .btn-primary (1,2,2) and its states (1,3,2); colour only */ html.crf-cart.crf-btn body.checkout-cart #content .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"] { background-color: var(--crf-b-pink, #d81b60) !important; border-color: var(--crf-b-pink, #d81b60) !important; color: #fff !important; } html.crf-cart.crf-btn body.checkout-cart #content .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"]:hover, html.crf-cart.crf-btn body.checkout-cart #content .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"]:focus { background-color: var(--crf-b-pink-h, #c2185b) !important; border-color: var(--crf-b-pink-h, #c2185b) !important; color: #fff !important; } html.crf-cart.crf-btn body.checkout-cart #content .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"]:active { background-color: var(--crf-b-pink-p, #ad1457) !important; border-color: var(--crf-b-pink-p, #ad1457) !important; color: #fff !important; } /* V31.0.65: Remove 32px to the eye in the card corner (was 44px at 6px); tap area 44px by the ::after above */ html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > .btn-danger { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px !important; padding: 0; line-height: 32px; background: transparent !important; border: 0 !important; color: var(--crf-c-red) !important; box-shadow: none !important; font-size: 16px; } html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-unit-price-label { background: transparent; border: 0; padding: 0; color: var(--crf-c-mute); font-weight: 500; font-size: 13px; line-height: 1.45; } html.crf-cart body.checkout-cart .mobile-only-cart .crf-qs > button { width: 44px; height: 44px; } html.crf-cart body.checkout-cart #content > h1 { font-size: 26px; margin: 4px 0 16px; } /* V31.0.65: phones: Clear Cart stays the red-outlined button, 34px tall with smaller type (was 44px / 15px). R2: the R1 rule (1,7,2) lost on the live page (44px, 16px type) to a rule outside Carefree's files, so this one is (1,9,2) with every size property important; the page-grid quiet-link rules (sections 3a/3b, far higher) still win where their gate matches. min-height 0 undoes buttons.css's 44px (1,2,2) */ html.crf-cart.crf-btn body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .btn.btn-danger.btn-clear-cart { height: 34px !important; min-height: 0 !important; align-items: center; padding: 0 12px !important; font-size: 13px !important; line-height: 1.3 !important; } /* R3: on the live page the page-grid gate matches, and its under-992px Clear Cart rule (section 3a, the same selector text as below, :has/:not arguments counted) outranks the rule above; this copy of that selector, later in the file and phones only, takes the same height down to 34px (the 992px+ rule is never on a phone). */ @supports (display: contents) and selector(:has(a)) { html.crf-cart.crf-restyle body.checkout-cart #content:has(> form[action*="checkout/cart/edit"]):not(:has(> form ~ form)):not(:has(> .cart-bottom-master > :not(h2, p, #accordion, br, .row, .buttons, script, style))):not(:has(> .cart-bottom-master > .buttons > :not(.pull-left, .pull-right))):not(:has(> .cart-bottom-master > .buttons > .pull-right ~ .pull-right)) > .cart-bottom-master > .buttons > .pull-left > .btn-clear-cart.btn-danger { height: 34px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 13px !important; } } } @media (max-width: 359px) { html.crf-cart body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls:not(.crf-qs-ready) > .m-qty-box { margin: 0 40px; } html.crf-cart body.checkout-cart .mobile-only-cart .crf-qs > button { width: 40px; } } /* ---------- 7. phone bar: Total + Checkout above the tab bar (cart.js builds it, removes it on any doubt) ---------- */ html.crf-cart #crf-cart-bar { position: fixed; left: 0; right: 0; bottom: var(--crf-cbar-b, 0px); z-index: 1020; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + var(--crf-cbar-sa, 0px)); background: #fff; border-top: 1px solid var(--crf-c-line); box-shadow: 0 -6px 18px rgba(60, 40, 20, .10); } html.crf-cart #crf-cart-bar .crf-cb-sum { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } html.crf-cart #crf-cart-bar .crf-cb-lbl { font-size: 12px; color: var(--crf-c-mute); } html.crf-cart #crf-cart-bar .crf-cb-amt { font-size: 20px; font-weight: 700; color: var(--crf-c-ink); white-space: nowrap; } html.crf-cart #crf-cart-bar .crf-cb-go { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; background: var(--crf-c-pink); color: #fff; font-weight: 700; font-size: 17px; line-height: 1.3; text-decoration: none; } html.crf-cart #crf-cart-bar .crf-cb-go:hover, html.crf-cart #crf-cart-bar .crf-cb-go:focus { background: #c2185b; color: #fff; text-decoration: none; } html.crf-cart.crf-cbar-on body.checkout-cart { padding-bottom: calc(var(--crf-cbar-h, 0px) + var(--crf-cbar-b, 0px)) !important; } @media (min-width: 768px) { html.crf-cart #crf-cart-bar { display: none !important; } } /* ---------- 9. the Shipping Calculator panel: one input, button and price row look (calculators wave 1) ---------- Cart page only, inside the page body's #accordion (never the phone float cart, the header mini cart or the body-level #modal-shipping). Look only: no text, no handler, nothing saved. Hire Delivery Manager prints the hire calculator with the classes styled here (box .mc-hire-input, Get Prices .mc-shipping-btn.mc-hire-go plus one of mc-go-idle / mc-go-ready / mc-go-busy, prices #hire-quote-results-main.mc-hire-opts, rows label.mc-opt with the real radio kept in the page, the marked row .mc-opt-on); until it does, only the box and the wrapper below change and its Apply button stays. Counts (ids, classes, elements): this file's prefix is (2,2,2); buttons.css .btn (1,2,2), .btn-primary and its states (1,2,2)/(1,3,2), #button-quote (2,1,2)/(2,2,2), Mobile Floating Menu .mc-shipping-btn (0,1,0) and body.mf-mobile .mc-opt (0,2,1), all !important, so every colour, line, corner and type rule here is !important too and outranks them by ids. */ /* the boxes: hire suburb box, and the regular form's country / region / postcode boxes, 44px with 12px corners */ html.crf-cart body.checkout-cart #content #accordion #cart-hire-city, html.crf-cart body.checkout-cart #content #accordion input.mc-hire-input, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-postcode, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-country, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-zone { height: 44px !important; padding: 10px 14px !important; border: 1px solid var(--crf-c-line-d) !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: none !important; font: 500 15px/1.3 'Montserrat', Arial, sans-serif !important; color: var(--crf-c-ink) !important; margin: 0 !important; box-sizing: border-box; } html.crf-cart body.checkout-cart #content #accordion #cart-hire-city, html.crf-cart body.checkout-cart #content #accordion input.mc-hire-input { display: block; width: 100% !important; } html.crf-cart body.checkout-cart #content #accordion #cart-hire-city:focus, html.crf-cart body.checkout-cart #content #accordion input.mc-hire-input:focus, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-postcode:focus, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-country:focus, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-zone:focus { border-color: var(--crf-c-ink) !important; box-shadow: 0 0 0 3px rgba(37, 37, 37, .12) !important; outline: 0; } @media (max-width: 767px) { html.crf-cart body.checkout-cart #content #accordion #cart-hire-city, html.crf-cart body.checkout-cart #content #accordion input.mc-hire-input, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-postcode, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-country, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #input-zone { font-size: 16px !important; } } /* the hire wrapper: no pink alert box, the line above the box in the page's own text colour */ html.crf-cart body.checkout-cart #content #accordion #cart-hire-wrapper { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html.crf-cart body.checkout-cart #content #accordion #cart-hire-wrapper > p { margin: 0 0 12px !important; font: 500 14px/1.45 'Montserrat', Arial, sans-serif !important; color: var(--crf-c-text) !important; } html.crf-cart body.checkout-cart #content #accordion #cart-hire-wrapper > p > .fa { margin-right: 6px; color: var(--crf-c-pink); } html.crf-cart body.checkout-cart #content #accordion #cart-hire-wrapper > .form-group { margin: 0 0 10px !important; } html.crf-cart body.checkout-cart #content #accordion #cart-hire-wrapper > .buttons { margin: 0 !important; overflow: visible !important; } /* Get Prices, both calculators: full width, 44px, 12px corners, (2,3,2)+ */ html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote { display: block; float: none !important; width: 100% !important; min-height: 44px !important; height: auto !important; margin: 0 !important; padding: 11px 16px !important; border: 1px solid transparent !important; border-radius: 12px !important; background-image: none !important; text-shadow: none !important; font: 700 15px/1.35 'Montserrat', Arial, sans-serif !important; text-align: center; white-space: normal; opacity: 1 !important; box-sizing: border-box; -webkit-appearance: none; appearance: none; } html.crf-cart body.checkout-cart #content #accordion .input-group-btn > #button-quote { display: inline-block; width: auto !important; border-radius: 0 12px 12px 0 !important; } /* ready (and the regular form by default): dark like the other new buttons */ html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-ready, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-ready:focus, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote:focus { background-color: var(--crf-c-ink) !important; border-color: var(--crf-c-ink) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .18) !important; cursor: pointer; } html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-ready:hover, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-ready:active, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote:hover, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote:active { background-color: #000 !important; border-color: #000 !important; color: #fff !important; } html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go:focus-visible, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote:focus-visible { outline: 2px solid var(--crf-c-ink); outline-offset: 2px; } /* idle: soft grey with dark text (hire: until a suburb is picked from the list; regular: while the postcode box is empty or no country / region is chosen; the regular button still works when pressed, look only) */ html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-idle, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-idle:hover, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-idle:focus, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-idle:active { background-color: #efebe7 !important; border-color: var(--crf-c-line-d) !important; color: #5a514a !important; box-shadow: none !important; } /* (kept apart: a browser without :has() drops only this list) */ html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .panel-body:is(:has(#input-postcode:placeholder-shown), :has(#input-country option[value=""]:checked), :has(#input-zone option[value=""]:checked)) #button-quote:not(:disabled, .disabled), html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .panel-body:is(:has(#input-postcode:placeholder-shown), :has(#input-country option[value=""]:checked), :has(#input-zone option[value=""]:checked)) #button-quote:not(:disabled, .disabled):hover, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .panel-body:is(:has(#input-postcode:placeholder-shown), :has(#input-country option[value=""]:checked), :has(#input-zone option[value=""]:checked)) #button-quote:not(:disabled, .disabled):focus, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .panel-body:is(:has(#input-postcode:placeholder-shown), :has(#input-country option[value=""]:checked), :has(#input-zone option[value=""]:checked)) #button-quote:not(:disabled, .disabled):active { background-color: #efebe7 !important; border-color: var(--crf-c-line-d) !important; color: #5a514a !important; box-shadow: none !important; } html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-idle { cursor: default; } /* busy: "Calculating..." (hire, Hire Delivery Manager puts its own turning icon in the button) / the stock loading text (regular) */ html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-busy, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-busy:hover, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-busy:focus, html.crf-cart body.checkout-cart #content #accordion .mc-shipping-btn.mc-hire-go.mc-go-busy:active, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote:disabled, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote.disabled { background-color: var(--crf-c-text) !important; border-color: var(--crf-c-text) !important; color: #fff !important; box-shadow: none !important; cursor: progress; } /* the regular form's loading button has no icon of its own: a turning ring at the left, regular form only (the hire button keeps the base rule's background-image none, so it shows exactly one turning icon) */ html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote:disabled, html.crf-cart body.checkout-cart #content #accordion #collapse-shipping #button-quote.disabled { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='2.5'/%3E%3Cpath d='M9 2a7 7 0 0 1 7 7' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 9 9' to='360 9 9' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left 14px center !important; background-size: 18px 18px !important; padding-left: 40px !important; padding-right: 40px !important; } /* the hire prices: one rounded row per service, title left (wraps), price right, at least 44px tall; the real radio stays in the page (other mods read it) but is not drawn; the marked row gets a pink tick at its left, a pink outline and a pale pink fill (V31.0.79, was a dark tick at the right and a cream fill) */ html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts { margin: 12px 0 0 !important; clear: both; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] { pointer-events: none; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] label.mc-opt { opacity: .55; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt { position: relative; display: flex !important; align-items: center; gap: 10px; width: 100%; max-width: none; min-height: 44px; margin: 0 0 8px !important; padding: 10px 12px 10px 14px !important; border: 1px solid var(--crf-c-line-d) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; box-sizing: border-box; cursor: pointer; text-align: left; font: 500 15px/1.35 'Montserrat', Arial, sans-serif !important; color: var(--crf-c-ink) !important; -webkit-tap-highlight-color: transparent; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt:last-child { margin-bottom: 0 !important; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt:hover { border-color: var(--crf-c-ink) !important; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt > input[type="radio"] { position: absolute !important; top: 50%; left: 14px; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt:has(> input[type="radio"]:focus-visible) { outline: 2px solid var(--crf-c-ink); outline-offset: 2px; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt > .mc-opt-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 500; color: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt > .mc-opt-p { flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap; font-weight: 700; color: var(--crf-c-ink); } /* V31.0.79: the tick's place is kept at the LEFT of every real row (empty, no circle, so an unmarked row never looks like a bullet button), so marking a row moves nothing. The place holders keep their old empty place at the right, exactly as before (same values, now on the place holders only). The marked look keys on .mc-opt-on only (Hire Delivery Manager sets it with the radio), never on a ticked radio alone. Counts: slot (2,5,4), marked row (2,6,3) beats the row hover (2,5,3) !important, marked tick (2,6,4). */ html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt.mc-opt-ph::after { content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; font: normal 12px/22px FontAwesome; text-align: center; color: #fff; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt:not(.mc-opt-ph)::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; font: normal 12px/22px FontAwesome; text-align: center; color: #fff; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt.mc-opt-on:not(.mc-opt-ph) { border-color: var(--crf-c-pink) !important; background: var(--crf-c-pink-t) !important; box-shadow: inset 0 0 0 1px var(--crf-c-pink) !important; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt.mc-opt-on:not(.mc-opt-ph)::before { content: "\f00c"; background: var(--crf-c-pink); } /* V31.0.79: while the prices are fetched again (Hire Delivery Manager marks the list aria-busy and keeps the old rows, dimmed and not tappable, as before), each real row's price, a Delivery Saving struck price included, sits under a soft moving bar instead of showing an old figure, and so do the figures in the Delivery Saving line above the rows. The words stay in the page (Delivery Saving finds the price in the row's text) but are drawn see-through, so no row changes size and nothing moves; the rows' titles and the tick stay. The place holders are not touched. The bar is drawn in a darker shade because the row keeps its 55% dim: under the dim it shows as #f3efeb (moving to #fbf9f7) on white. Counts: price (3,7,3), its words (3,7,3), bar (3,7,4), Delivery Saving figures (3,6,3), all beating Hire Delivery Manager's own price colours (0,2,1). A shopper who asks for less motion gets a still bar. */ html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] label.mc-opt:not(.mc-opt-ph) > .mc-opt-p { position: relative; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] label.mc-opt:not(.mc-opt-ph) > .mc-opt-p, html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] label.mc-opt:not(.mc-opt-ph) > .mc-opt-p * { color: transparent !important; -webkit-text-decoration-color: transparent !important; text-decoration-color: transparent !important; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] label.mc-opt:not(.mc-opt-ph) > .mc-opt-p::after, html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] .hdcs-qp .hdcs-qp-msg strong { border-radius: 4px; background: linear-gradient(90deg, #e9e2db 0%, #e9e2db 30%, #f8f4f1 50%, #e9e2db 70%, #e9e2db 100%) !important; background-size: 200% 100% !important; animation: crf-calc-shim 1.2s linear infinite; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] label.mc-opt:not(.mc-opt-ph) > .mc-opt-p::after { content: ""; position: absolute; top: 50%; right: 0; width: 36px; height: 14px; margin-top: -7px; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] .hdcs-qp .hdcs-qp-msg strong { color: transparent !important; } @media (prefers-reduced-motion: reduce) { html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] label.mc-opt:not(.mc-opt-ph) > .mc-opt-p::after, html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts[aria-busy="true"] .hdcs-qp .hdcs-qp-msg strong { animation: none; } } /* no Apply step once the new rows are printed (the button stays in the page for anything that looks for it) */ html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts #btn-hire-apply-main { display: none !important; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts .buttons:has(> #btn-hire-apply-main), html.crf-cart body.checkout-cart #content #accordion #cart-hire-wrapper:has(.mc-hire-go) #btn-hire-apply-main, html.crf-cart body.checkout-cart #content #accordion #cart-hire-wrapper:has(.mc-hire-go) .buttons:has(> #btn-hire-apply-main) { display: none !important; } /* the hire calculator's other parts (Hire Delivery Manager prints .mc-hire-calc > p.mc-hire-lead, the rows' box, then .mc-hire-status; .mc-hire-msg inside the rows' box for the store's own message; four label.mc-opt.mc-opt-ph place holders while the first prices load, no radio, aria-hidden). Same look as the phone float cart (Mobile Floating Menu), Carefree's colours. Counts (ids, classes, elements): wrapper (2,3,2), line (2,4,3) and its icon (2,5,3), turning icon (2,4,2), status (2,4,2), error (2,5,2), status room under rows (2,6,2), message (2,4,2), place holder (2,5,3) beats the row rule (2,4,3) !important and ties the row hover (2,5,3) !important, placed after it, hover (2,6,3); place holder opacity (3,5,3) ties the loading dim (3,5,3), placed after it. Nothing else in Carefree, Bootstrap or Mobile Floating Menu 3.0.21 / 3.0.22 styles these classes on the cart page. */ html.crf-cart body.checkout-cart #content #accordion .mc-hire-calc { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-calc > p.mc-hire-lead { margin: 0 0 12px !important; font: 500 14px/1.45 'Montserrat', Arial, sans-serif !important; color: var(--crf-c-text) !important; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-calc > p.mc-hire-lead > .fa { margin-right: 6px; color: var(--crf-c-pink); } html.crf-cart body.checkout-cart #content #accordion .mc-hire-go > .fa { margin-right: 6px; font-size: 16px; line-height: 1; vertical-align: -1px; color: inherit; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-calc .mc-hire-status { margin: 0 !important; font: 500 13px/1.4 'Montserrat', Arial, sans-serif !important; color: var(--crf-c-mute) !important; text-align: center; overflow-wrap: anywhere; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-calc .mc-hire-status:not(:empty) { margin-top: 8px !important; } /* while prices are showing, the status line's room is kept (empty), so "Saving your choice" and its follow-ups move nothing below */ html.crf-cart body.checkout-cart #content #accordion .mc-hire-calc .mc-hire-opts:not(:empty) + .mc-hire-status { min-height: 1.4em; margin-top: 8px !important; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-calc .mc-hire-status.mc-hire-err { color: var(--crf-c-red) !important; font-weight: 600 !important; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts .mc-hire-msg { margin: 0 0 8px !important; padding: 10px 14px !important; border: 1px solid var(--crf-c-red-line) !important; border-radius: 12px !important; background: var(--crf-c-red-l) !important; font: 500 14px/1.45 'Montserrat', Arial, sans-serif !important; color: var(--crf-c-red) !important; text-align: left; overflow-wrap: anywhere; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts .mc-hire-msg:last-child { margin-bottom: 0 !important; } /* place holders: a real row's height and shape in flat soft grey, no words, no tick, not tappable */ html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt.mc-opt-ph, html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt.mc-opt-ph:hover { border-color: #efe8e1 !important; background: #f3eee9 !important; box-shadow: none !important; cursor: default; pointer-events: none; -webkit-user-select: none; user-select: none; } html.crf-cart body.checkout-cart #content #accordion #hire-quote-results-main.mc-hire-opts label.mc-opt.mc-opt-ph { opacity: 1; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt.mc-opt-ph > span { color: transparent; } html.crf-cart body.checkout-cart #content #accordion .mc-hire-opts label.mc-opt.mc-opt-ph::after { content: ""; background: none; } /* ---------- 10. V31.0.80: the cart page's own notices in the notice look (colours, corners, type, inner spacing) ---------- Only the page's own two places: the stock boxes printed after the breadcrumb (sign in for prices, trade reminder, success, error / warning, and the boxes the coupon, voucher and estimate panels print there) and the boxes other mods print straight into #content (Bank Transfer Customers' price-group notes). Never a bare .alert: the header mini cart, the phone cart sheet and pop-ups keep theirs. Every class is kept (Hire Delivery Manager and the stock panels find these boxes by .alert / .alert-danger / .alert-warning) and nothing is moved or reworded. A box that carries its own inline colours is left alone. Counts: (0,6,2) after the breadcrumb, (1,5,2) in #content, over Bootstrap's .alert kinds (0,1,0). The boxes are printed by the server, so they have this look from the first paint. */ html.crf-cart body.checkout-cart .breadcrumb ~ .alert:not([style*="background"]):not([style*="color"]), html.crf-cart body.checkout-cart #content > .alert:not([style*="background"]):not([style*="color"]) { border: 1px solid var(--crf-c-line-d); border-radius: 12px; background: var(--crf-c-cream); color: var(--crf-c-text); font-size: 15px; line-height: 1.45; padding: 12px 14px; box-shadow: none; text-shadow: none; } html.crf-cart body.checkout-cart .breadcrumb ~ .alert:not([style*="background"]):not([style*="color"]) > .fa:first-child, html.crf-cart body.checkout-cart #content > .alert:not([style*="background"]):not([style*="color"]) > .fa:first-child { margin-right: 6px; font-size: 18px; vertical-align: -1px; color: var(--crf-c-mute); } html.crf-cart body.checkout-cart .breadcrumb ~ .alert-success:not([style*="background"]):not([style*="color"]), html.crf-cart body.checkout-cart #content > .alert-success:not([style*="background"]):not([style*="color"]) { background: #fff; border-color: #9fd3ab; border-left: 4px solid #15803d; } html.crf-cart body.checkout-cart .breadcrumb ~ .alert-success:not([style*="background"]):not([style*="color"]) > .fa:first-child, html.crf-cart body.checkout-cart #content > .alert-success:not([style*="background"]):not([style*="color"]) > .fa:first-child { color: #15803d; } /* V31.0.91: right after a cart line's own Remove the page reloads with the store's green "Success: You have modified your shopping cart!" box above the title, pushing the lines down. That box is hidden, on the cart page only, only while html has crf-nobanner, which the header's early cart line adds only when cart.js noted that Remove in the browser tab less than 10 s before (cart.js part 9). Keyed on that note, never on the box's words; every other box is unchanged. */ html.crf-cart.crf-nobanner body.checkout-cart .breadcrumb ~ .alert-success, html.crf-cart.crf-nobanner body.checkout-cart #content > .alert-success { display: none; } html.crf-cart body.checkout-cart .breadcrumb ~ .alert-warning:not([style*="background"]):not([style*="color"]), html.crf-cart body.checkout-cart #content > .alert-warning:not([style*="background"]):not([style*="color"]) { background: #fff6e5; border-color: #f0c36d; } html.crf-cart body.checkout-cart .breadcrumb ~ .alert-warning:not([style*="background"]):not([style*="color"]) > .fa:first-child, html.crf-cart body.checkout-cart #content > .alert-warning:not([style*="background"]):not([style*="color"]) > .fa:first-child { color: #8a5a00; } html.crf-cart body.checkout-cart .breadcrumb ~ .alert-danger:not([style*="background"]):not([style*="color"]), html.crf-cart body.checkout-cart #content > .alert-danger:not([style*="background"]):not([style*="color"]) { background: var(--crf-c-red-l); border-color: #d65b5b; } html.crf-cart body.checkout-cart .breadcrumb ~ .alert-danger:not([style*="background"]):not([style*="color"]) > .fa:first-child, html.crf-cart body.checkout-cart #content > .alert-danger:not([style*="background"]):not([style*="color"]) > .fa:first-child { color: var(--crf-c-red); } html.crf-cart body.checkout-cart .breadcrumb ~ .alert:not([style*="background"]):not([style*="color"]) > .close, html.crf-cart body.checkout-cart #content > .alert:not([style*="background"]):not([style*="color"]) > .close { width: 44px; height: 44px; margin: -12px -10px -12px 4px; padding: 0; font-size: 24px; line-height: 44px; color: var(--crf-c-ink); opacity: .6; text-shadow: none; } html.crf-cart body.checkout-cart .breadcrumb ~ .alert:not([style*="background"]):not([style*="color"]) a:not(.btn), html.crf-cart body.checkout-cart #content > .alert:not([style*="background"]):not([style*="color"]) a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* Advanced Shipping Manager's free shipping banner in the notice colours: colours only (its place, size, corners, words and showing / hiding stay its own). (2,2,2) and up over its #fs-cart-banner (1,0,0) / .fs-eligible (1,1,0) / strong (1,0,1) / bar (1,1,0) / fill (1,2,0); !important only where it uses one (.fs-cat-link colour (0,1,0)!, the info mark's hover (1,2,0)!) or an inline style (its tick's colour). No green fill: the View link is a secondary button (white, charcoal edge drawn inside, so its size is unchanged). */ html.crf-cart body.checkout-cart #content #fs-cart-banner { background: var(--crf-c-cream); border-left-color: var(--crf-c-line-d); color: var(--crf-c-text); } html.crf-cart body.checkout-cart #content #fs-cart-banner.fs-eligible { background: #fff; border-left-color: #15803d; } html.crf-cart body.checkout-cart #content #fs-cart-banner strong { color: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content #fs-cart-banner .fa-check-circle { color: #15803d !important; } html.crf-cart body.checkout-cart #content #fs-cart-banner .fs-cb-bar, html.crf-cart body.checkout-cart #content #fs-cart-banner.fs-eligible .fs-cb-bar { background: rgba(37, 37, 37, .08); } html.crf-cart body.checkout-cart #content #fs-cart-banner .fs-cb-fill { background: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content #fs-cart-banner.fs-eligible .fs-cb-fill { background: #15803d; } html.crf-cart body.checkout-cart #content #fs-cart-banner .fs-banner-info { color: var(--crf-c-mute); } html.crf-cart body.checkout-cart #content #fs-cart-banner .fs-banner-info:hover { color: var(--crf-c-ink) !important; } html.crf-cart body.checkout-cart #content #fs-cart-banner .fs-cat-link, html.crf-cart body.checkout-cart #content #fs-cart-banner .fs-cat-link:focus { background: #fff; color: var(--crf-c-ink) !important; box-shadow: inset 0 0 0 2px var(--crf-c-ink); } html.crf-cart body.checkout-cart #content #fs-cart-banner .fs-cat-link:hover { background: #f3efeb; color: var(--crf-c-ink) !important; } /* the Free Floss Tray Add as a secondary button (white, charcoal edge, charcoal words): colour, border colour and inset line only, (1,6,2) and (1,7,2) over buttons.css's buying pink (1,3,2)! and its states */ html.crf-cart.crf-btn body.checkout-cart #content > .ftr-offer .btn.ftr-offer__add, html.crf-cart.crf-btn body.checkout-cart #content > .ftr-offer .btn.ftr-offer__add:focus { background-color: #fff !important; color: var(--crf-c-ink) !important; border-color: var(--crf-c-ink) !important; box-shadow: inset 0 0 0 1px var(--crf-c-ink) !important; } html.crf-cart.crf-btn body.checkout-cart #content > .ftr-offer .btn.ftr-offer__add:hover, html.crf-cart.crf-btn body.checkout-cart #content > .ftr-offer .btn.ftr-offer__add:active { background-color: #f3efeb !important; color: #000 !important; border-color: var(--crf-c-ink) !important; } /* ---------- 11. V31.0.80: the coupon / gift voucher / reward points rows in the panels card ---------- 768-991px and from 1200px: the box and its Apply button side by side on one line (joined, as their corners already are); phones, and the narrow right-hand column at 992-1199px (where "Apply Gift Certificate" would leave the box about 110px wide): the box, then Apply under it, both full width, every corner rounded. Only inside these three stock panels (by their ids); the panels still open and close on a tap exactly as before, and nothing here touches the Shipping Calculator. (3,3,2)! over Cart Master's #accordion .panel-body .input-group display / width (1,2,0)! and (3,4,3)! over its #accordion input[type="button"] gap (1,1,1)!. */ @media (min-width: 768px) and (max-width: 991px), (min-width: 1200px) { html.crf-cart body.checkout-cart #content #accordion :is(#collapse-coupon, #collapse-voucher, #collapse-reward) .input-group { display: flex !important; align-items: stretch; } html.crf-cart body.checkout-cart #content #accordion :is(#collapse-coupon, #collapse-voucher, #collapse-reward) .input-group > .form-control { float: none; flex: 1 1 auto; width: 1%; min-width: 0; } html.crf-cart body.checkout-cart #content #accordion :is(#collapse-coupon, #collapse-voucher, #collapse-reward) .input-group > .input-group-btn { display: block; flex: 0 0 auto; width: auto; } html.crf-cart body.checkout-cart #content #accordion :is(#collapse-coupon, #collapse-voucher, #collapse-reward) .input-group > .input-group-btn > input[type="button"] { margin-top: 0 !important; margin-left: -1px; } } @media (max-width: 767px), (min-width: 992px) and (max-width: 1199px) { html.crf-cart body.checkout-cart #content #accordion :is(#collapse-coupon, #collapse-voucher, #collapse-reward) .input-group > .form-control { display: block; float: none; width: 100%; border-radius: 10px; } html.crf-cart body.checkout-cart #content #accordion :is(#collapse-coupon, #collapse-voucher, #collapse-reward) .input-group > .input-group-btn { display: block; width: 100%; } html.crf-cart body.checkout-cart #content #accordion :is(#collapse-coupon, #collapse-voucher, #collapse-reward) .input-group > .input-group-btn > input[type="button"] { display: block; width: 100%; margin-left: 0; border-radius: 10px !important; } } /* ---------- 12. V31.0.80: Clear Cart's question on the page (cart.js puts it beside the hidden button, same .pull-left) ---------- One line, 44px tall (V31.0.81: its two buttons 40 to 44px, a full finger target), so its row (kept at 58px) and everything under it stay put. Phones and tablets (the button sits at the right): "Clear everything? [Yes, clear] [Keep]", Keep at the right end where the button was. 992px and up (the button is centred): Keep in the middle, Yes, clear after it. */ html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask { display: inline-flex; align-items: center; gap: 6px; vertical-align: top; height: 44px; max-width: 100%; white-space: nowrap; font: 600 13px/1.2 'Montserrat', Arial, sans-serif; color: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > .crf-clr-q { padding: 0 2px; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > button { box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; font: 600 13px/1 'Montserrat', Arial, sans-serif; text-transform: none; cursor: pointer; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > .crf-clr-yes { color: var(--crf-c-red); box-shadow: inset 0 0 0 1.5px #d65b5b; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > .crf-clr-yes:hover { background: var(--crf-c-red-l); box-shadow: inset 0 0 0 1.5px var(--crf-c-red); } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > .crf-clr-keep { min-width: 64px; color: var(--crf-c-text); box-shadow: inset 0 0 0 1px var(--crf-c-line-d); } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > .crf-clr-keep:hover { background: #f3efeb; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > button:focus-visible { outline: 2px solid var(--crf-c-ink); outline-offset: 2px; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > button:disabled { color: #9b918a; cursor: default; } @media (min-width: 992px) { html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > .crf-clr-keep { order: 1; } html.crf-cart body.checkout-cart #content > .cart-bottom-master > .buttons > .pull-left > .crf-clr-ask > .crf-clr-yes { order: 2; } } /* ---------- 13. V31.0.80: the phone bar while Hire Delivery Manager has blocked Checkout (cart.js, header note (d)) ---------- The reason on its own line above the Total, and Checkout drawn idle (the disabled look; a span, so nothing can follow it). The bar's height is measured again by cart.js whenever it changes, so the page keeps room for it. */ html.crf-cart #crf-cart-bar.crf-cb-blocked { flex-wrap: wrap; row-gap: 6px; } html.crf-cart #crf-cart-bar.crf-cb-blocked .crf-cb-hint { flex: 1 0 100%; font: 600 13px/1.35 'Montserrat', Arial, sans-serif; color: var(--crf-c-red); } html.crf-cart #crf-cart-bar.crf-cb-blocked .crf-cb-off { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; background: #ece6e0; color: #9b918a; font-weight: 700; font-size: 17px; line-height: 1.3; cursor: not-allowed; -webkit-user-select: none; user-select: none; } /* ---------- 14. V31.0.81: one "Coupon or gift voucher" box (cart.js header note (e)) ---------- Only under html.crf-cv1, which cart.js sets last, after its Apply listeners are on and it has marked the gift voucher panel (.crf-cv-vpanel): that panel is folded away (the coupon panel now takes both kinds of code). Without crf-cv1 both stock panels show as before. Folding it also ends the 10px drop of its Apply button (Cart Master's #accordion input[type="submit"] margin), so no rule is needed for that. The one line cart.js writes under the box (.crf-cv-msg) is in the notice error colours; it sits below the box, so nothing above it moves. (2,5,2)! over Bootstrap's .panel (0,1,0); the line (3,5,2). */ html.crf-cart.crf-cv1 body.checkout-cart #content #accordion > .panel.crf-cv-vpanel { display: none !important; } html.crf-cart.crf-cv1 body.checkout-cart #content #accordion #collapse-coupon .panel-body > .crf-cv-msg { margin: 10px 0 0; padding: 12px 14px; border: 1px solid #d65b5b; border-radius: 12px; background: var(--crf-c-red-l); color: var(--crf-c-text); font: 500 15px/1.45 'Montserrat', Arial, sans-serif; } /* ---------- 15. V31.0.82: the quantity saves itself (cart.js header note (f)) ---------- Only under html.crf-qsave, which cart.js sets last, after every save listener is on: the Update buttons are hidden; without the class they show and work as before. Computer rows: display none (the box and Remove do not move, see section 4). Phone cards: visibility hidden, so its slot is kept and the card keeps its height (taking it out would let the unit price move up a line after the page has drawn); a hidden button takes no tap; no transition (the theme's button transition would keep it showing for 0.25 s). Saving look: the changed box draws a 14px spinner as its own background (no element added, nothing moves); the read-only boxes keep their white (Bootstrap paints read-only boxes #eee, (0,2,0); (0,5,3) here), so only the changed box looks busy; the totals text goes transparent over the skeleton fill (#f3efeb, 1.2 s shimmer, spec 2.11), box sizes and row heights unchanged. Apply in the coupon or gift voucher box keeps one width while it reads "Checking..." (V31.0.81 review note 1: it grew 64 to 104px). Specificity: no Carefree sheet sets display or visibility with !important on either Update button, so the two hides (1,8,4)! and (0,8,4)! win; totals (1,6,4)! over section 3's cell rule (1,4,6); Apply min-width (3,4,2), the only min-width on it. */ html.crf-cart.crf-qsave body.checkout-cart #shopping-cart td > .input-group.btn-block > .input-group-btn:last-child > button[type="submit"] { display: none !important; } html.crf-cart.crf-qsave body.checkout-cart .mobile-only-cart td.col-desc .m-qty-controls > .m-btn-grp > button[type="submit"] { visibility: hidden !important; transition: none !important; } html.crf-cart.crf-qsave body.checkout-cart input.crf-qsaving.d-qty-box, html.crf-cart.crf-qsave body.checkout-cart input.crf-qsaving.m-qty-box { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5.5' stroke='%23e4dcd5'/%3E%3Cpath d='M7 1.5a5.5 5.5 0 0 1 5.5 5.5' stroke='%233d3530'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 7 7' to='360 7 7' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 3px center; background-size: 14px 14px; } html.crf-cart.crf-qsave body.checkout-cart input.d-qty-box[data-crf-qro], html.crf-cart.crf-qsave body.checkout-cart input.m-qty-box[data-crf-qro] { background-color: #fff; } @keyframes crf-qshim { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } html.crf-cart.crf-qsave body.checkout-cart #content > .top-totals-row.crf-qshim table td:not(.m-board-column) { color: transparent !important; background-image: linear-gradient(90deg, #f3efeb 0%, #fbf8f5 50%, #f3efeb 100%) !important; background-size: 200% 100% !important; animation: crf-qshim 1.2s linear infinite; } html.crf-cart.crf-qsave body.checkout-cart #content > .top-totals-row.crf-qshim table td:not(.m-board-column) * { color: transparent !important; } html.crf-cart.crf-cv1 body.checkout-cart #content #accordion .input-group-btn > #button-coupon { min-width: 104px; } /* ---------- 16. 12b: the Shipping Calculator's prices as plain rows in its panel (cart.js header note (m)) ---------- cart.js puts div.crf-sr straight after the stock form inside #collapse-shipping's panel body, only after a Get Prices press. The look of the drop-down estimate's rows (section 8, V31.0.90): white rounded rows, title left, price right, three dashed rows with a moving bar only while a press waits (172px, never at rest), the caption under them. Display only: cursor default, no hover, no focus look, so the rows do not read as tappable. Counts: (2,4,2) and up, over Bootstrap's ul / li and the theme's .panel-body rules; nothing here is !important. */ html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr { margin: 12px 0 0; padding: 0; clear: both; font-family: 'Montserrat', Arial, sans-serif; text-align: left; } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-list.crf-sr-busy { min-height: 172px; } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-row { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; margin: 0; padding: 12px 14px; border: 1px solid var(--crf-c-line-d); border-radius: 10px; background: #fff; box-sizing: border-box; cursor: default; font: 600 15px/1.35 'Montserrat', Arial, sans-serif; color: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-row > .crf-sr-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-row > .crf-sr-p { flex: 0 1 auto; margin-left: auto; text-align: right; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--crf-c-ink); } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-row.crf-sr-ph { border-style: dashed; } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-row.crf-sr-ph > span { display: block; width: 36px; height: 14px; margin-left: auto; border-radius: 4px; background: linear-gradient(90deg, #e9e2db 0%, #e9e2db 30%, #f8f4f1 50%, #e9e2db 70%, #e9e2db 100%); background-size: 200% 100%; animation: crf-calc-shim 1.2s linear infinite; } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-no { min-width: 0; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--crf-c-cream); font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--crf-c-text); list-style: none; } html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-cap { min-width: 0; margin: 8px 0 0; padding: 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--crf-c-mute); } @media (prefers-reduced-motion: reduce) { html.crf-cart body.checkout-cart #content #accordion #collapse-shipping .crf-sr .crf-sr-row.crf-sr-ph > span { animation: none; } }