/* ============================================================================ website/assets/css/cart-reco.css Cart recommendations - "Recommended for You". Linked from the of _getcart.cfm, after site.css. HOW THIS SITS IN THE CART site.css lays .cart-totals out as a flex row: .cart-totals { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 30px; } .cart-totals .shipping-notes { flex: 1 1 320px; } .cart-totals .order-summary { flex: 1 1 380px; } The recommendations and the shipping copy are wrapped in .cart-totals-left, which takes over the 1 1 320px slot the shipping notes used to hold. The order summary keeps its own basis, and align-items: flex-start keeps it at the top of the row however tall the left column grows. Those two site.css selectors are descendant, not child, so the wrapper does not stop them matching - which is why the basis has to be re-stated here rather than simply inherited. ========================================================================= */ /* The right column: order summary with the checkout button under it. A plain block, not a flex container, so .order-summary's flex: 1 1 380px from site.css is simply ignored rather than needing an override the way .shipping-notes does on the left. */ .cart-totals-right { flex: 1 1 380px; min-width: 0; } /* .cart-actions is justify-content: flex-end site-wide, which is what keeps the button on the right edge of this column. Only the spacing above it changes here - it is sitting under its own summary box now, not under the whole cart. */ .cart-totals-right .cart-actions { margin: 14px 0 0; } .cart-totals-left { flex: 1 1 320px; display: flex; flex-direction: column; min-width: 0; /* lets the column shrink rather than force overflow */ } /* Inside a column-direction flex container a flex-basis is a HEIGHT, so the 320px the shipping notes carry from .cart-totals would try to make them 320px tall. Three classes deep so it wins on specificity rather than on this file happening to load after site.css. */ .cart-totals .cart-totals-left .shipping-notes { flex: 0 0 auto; } /* 15px left/right matches the shipping notes' own padding, so the heading lines up with the box icon below it. The 34px underneath is deliberate breathing room between the thumbnails and the shipping copy - the notes add their own 15px on top of it. */ .cart-reco { padding: 15px 15px 34px; } /* Matches .cart-line-name - site.css line 1880: 16px / 600 / rgb(75,48,29). */ .cart-reco-title { margin: 0 0 14px; font-size: 16px; font-weight: 600; line-height: 20px; color: rgb(75, 48, 29); } /* Three equal columns filling the width of the left-hand slot. */ .cart-reco-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; margin: 0; padding: 0; list-style: none; } /* A column, so the button can be pushed to the bottom of it. Grid items stretch to the row height by default, which is what gives all three cards the same height to push against - without it a two-line product name drops its own button a line below the other two. */ .cart-reco-item { display: flex; flex-direction: column; min-width: 0; } .cart-reco-thumb { display: block; line-height: 0; } /* width:100% + height:auto is what turns the full-size product photograph into a thumbnail: each image fills its own third of the column and scales proportionally. No max-width, so the three span the full width. .cart-line-thumb img sets max-width: none for the 80px cart-line thumbnails; these want the ordinary max-width: 100% from site.css, so nothing to undo. */ .cart-reco-thumb img { display: block; width: 100%; height: auto; } .cart-reco-name { display: block; margin-top: 5px; font-size: 14px; line-height: 18px; color: #910d10; } a.cart-reco-name:hover, a.cart-reco-name:focus { text-decoration: underline; } /* -------------------------------------------------------------------------- Add to Cart A form per card, so margin: 0 rather than the browser's default block of space under it. -------------------------------------------------------------------------- */ /* margin-top: auto takes the card's spare height, which is what lines the three buttons up. The gap above it is padding rather than margin, because auto would have replaced a margin. */ .cart-reco-add { margin: auto 0 0; padding-top: 8px; } /* The CHECKOUT button's own treatment - .btn-checkout in site.css: no border, 4px corners, #910d10 going to #7a0b0d on hover, white lettering. Only the size differs. Three of these sit in a strip above a 200x50 button, so they take the same colour at roughly half the height. */ .btn-reco-add { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px; border: 0; border-radius: 4px; background-color: #910d10; font-family: inherit; font-size: 14px; line-height: 1; color: #ffffff; cursor: pointer; } .btn-reco-add:hover, .btn-reco-add:focus-visible { background-color: #7a0b0d; } /* -------------------------------------------------------------------------- The recipient dialog .cart-dialog in site.css supplies the panel and the backdrop. Everything below dresses it in the cart's own materials rather than leaving it in the browser's: the tan header bar is .cart-recipient-bar's #eddfbe, the product name is .cart-line-name's brown, the row dividers are the order summary's #e0ddd6, and the confirm button is the CHECKOUT red. SPECIFICITY. site.css styles the newsletter modal through .modal-body label and .modal-body input, which are (0,1,1) - a bare .reco-recp-option would lose to them and the checkboxes would stay full width with the names on the line below. The rules that have to beat them are written from .modal-body for that reason, not for the sake of nesting. -------------------------------------------------------------------------- */ .reco-dialog { width: 400px; } /* The tan band. #eddfbe is .cart-recipient-bar's own colour, so the dialog is wearing the same material as the recipient bars behind it rather than the white-card-and-grey-rule of a stock modal. The rule stays where site.css puts it - it is the seam between the band and the white body - but in a tan that belongs to the band rather than the #e5e5e5 grey. */ .reco-dialog .modal-header { align-items: center; padding: 12px 15px; border-bottom: 1px solid #d8c69a; background-color: #eddfbe; } .reco-dialog .modal-header h2 { font-size: 18px; font-weight: 600; line-height: 24px; color: rgb(75, 48, 29); } /* The site's close control is a 40%-opacity black cross, which on the tan bar reads as a smudge. Same glyph, the header's own brown. */ .reco-dialog .modal-close { color: rgb(75, 48, 29); opacity: 0.65; } .reco-dialog .modal-close:hover, .reco-dialog .modal-close:focus { opacity: 1; } /* What is being added. Two cells: the thumbnail sizes to itself, the name takes the rest and centres against it however many lines it wraps to. */ .reco-dialog-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding-bottom: 12px; } .reco-dialog-thumb { display: block; line-height: 0; } .reco-dialog-thumb img { display: block; width: 56px; height: auto; max-width: none; } /* Matches .cart-line-name - 16px / 600 / rgb(75,48,29). */ .reco-dialog-name { font-size: 16px; font-weight: 600; line-height: 20px; color: rgb(75, 48, 29); } /* A fieldset carries a border and padding of its own, and a legend carries side padding, either of which would draw a second box inside the dialog. */ .reco-recp-set { margin: 0; padding: 0; border: 0; } .reco-recp-legend { margin: 0; padding: 0; font-size: 13px; color: #767676; } .reco-recp-list { margin-top: 6px; } /* The row, and the answer to the names sitting under their boxes: site.css makes every label in a modal body a block. This is a centred flex row, so the name is on the checkbox's own line and centred against it. The whole row is the label, so the name is part of the hit area. */ .modal-body .reco-recp-option { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 6px; border-top: 1px solid #e0ddd6; cursor: pointer; } /* The rule under the last row. Carried by the row rather than by a wrapper so the list closes itself however many recipients there are. */ .modal-body .reco-recp-option:last-of-type { border-bottom: 1px solid #e0ddd6; } .modal-body .reco-recp-option:hover { background-color: #faf7f0; } /* site.css gives inputs in a modal body a full-width text-field treatment, which on a checkbox stretches the box across the dialog and leaves the tick floating in the middle of it. */ .modal-body .reco-recp-option input[type='checkbox'] { flex: none; width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; border: 0; border-radius: 0; accent-color: #467235; cursor: pointer; } .reco-recp-name { font-size: 15px; line-height: 20px; color: #333333; } /* -------------------------------------------------------------------------- A recipient with nothing for the add-on to go with An add-on rides along with a gift, so a recipient holding none cannot be given one. The row is still drawn - a name that simply vanished from the list would read as a fault - and it carries the reason beside it, which is what makes a row somebody cannot use fair rather than broken. NONE OF THIS IS LOAD BEARING. The checkbox is disabled in the markup, a disabled checkbox posts nothing, and inc/_add_cart.cfm refuses the line on its own. What follows only stops the row inviting a click it cannot honour. -------------------------------------------------------------------------- */ /* The reason goes on its own line under the name. The option row is a centred flex row, so a third child would sit in a third column - and a full sentence beside a name is what turns a 400px dialog into a scrolling one. */ .modal-body .reco-recp-option-off { flex-wrap: wrap; cursor: default; } /* .reco-recp-option lights up under the pointer because it can be chosen. This one cannot, so it does not. */ .modal-body .reco-recp-option-off:hover { background-color: transparent; } .modal-body .reco-recp-option-off input[type='checkbox'] { cursor: default; } /* Muted only as far as the legend already is. #767676 clears 4.5:1 on white - a name the customer cannot read is a worse outcome than one they cannot tick, and this row exists to be read. */ .reco-recp-option-off .reco-recp-name { color: #767676; } /* flex-basis 100% takes the whole line and shrink gives back the 30px the margin needs - the checkbox's 18px plus the row's 12px gap - so the sentence starts under the name rather than under the box. */ .reco-recp-why { flex: 1 1 100%; margin-left: 30px; font-size: 13px; line-height: 17px; color: #767676; } /* The line in the Remove dialog naming what else is about to go. It belongs to the remove dialog rather than to the recommendations, but it is part of the add-on rule this file now documents and this stylesheet is on the cart page anyway - move it to site.css beside .cart-dialog if that reads better there. Muted and a size down: it is a consequence of the question above it, not a second question. */ .remove-also { margin: 10px 0 0; font-size: 13px; line-height: 18px; color: #767676; } .remove-also strong { color: #333333; } .reco-recp-error { margin: 10px 0 0; } /* The second tan band, closing the dialog the way the header opens it. */ .reco-dialog .modal-footer { align-items: center; padding: 12px 15px; border-top: 1px solid #d8c69a; background-color: #eddfbe; } /* Both buttons are matched by type rather than by class. site.css styles .modal-footer button - no background, grey 16px type - and that is (0,1,1), so a single class would lose to it and both buttons would render as lines of grey text on the tan. Selecting on the type carries its own weight and says which button is which at the same time. */ .reco-dialog .modal-footer button { height: 36px; padding: 0 18px; border-radius: 4px; font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer; } /* The confirm, in the CHECKOUT red. */ .reco-dialog .modal-footer button[type='submit'] { border: 0; background-color: #910d10; color: #ffffff; } .reco-dialog .modal-footer button[type='submit']:hover, .reco-dialog .modal-footer button[type='submit']:focus-visible { background-color: #7a0b0d; } /* Cancel is the way out, not the other half of a choice, so it is outlined rather than filled - white on the tan, in the band's own brown. */ .reco-dialog .modal-footer button[type='button'] { border: 1px solid #c9b48a; background-color: #ffffff; color: rgb(75, 48, 29); } .reco-dialog .modal-footer button[type='button']:hover, .reco-dialog .modal-footer button[type='button']:focus-visible { border-color: rgb(75, 48, 29); background-color: #faf7f0; } /* A phone is narrower than the 400px panel; .cart-dialog already caps the width, this stops the two footer buttons from crowding the edges. */ /* Below 768px .cart-totals wraps to a single column, so the three thumbnails have the full page width and stay three across. Only on a phone is that too tight. */ @media (max-width: 480px) { .cart-reco-list { grid-template-columns: 1fr; gap: 14px; } /* Grid rather than the flex column above: the card has three children on one row now, and a flex row would put the thumbnail, the name and the button in three columns. The thumbnail spans both rows on the left, the name sits above its own button on the right. */ .cart-reco-item { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 4px 14px; } .cart-reco-thumb { flex: 0 0 84px; grid-row: 1 / span 2; } .cart-reco-name { margin-top: 0; } /* One card per row here, so there is no spare height to take and nothing to line up with. */ .cart-reco-add { margin: 2px 0 0; padding-top: 0; } } @media (max-width: 420px) { .reco-dialog .modal-footer { gap: 8px; } } /* ---------------------------------------------------------------------------- Mobile order Below 768px .cart-totals stacks, and the source order would put the shipping copy between the recommendations and the order summary - leaving the checkout button stranded at the very bottom, under a paragraph about dry ice. Wanted order on a narrow screen: Recommended for You -> Order Summary -> CHECKOUT -> box and copy The two column wrappers are non-semantic divs that exist only to hold the desktop columns together, so display: contents dissolves them for layout: their children become flex items of .cart-totals directly, and each one can then be given its own order. The divs stay in the DOM, so every descendant selector above still matches. Selectors are three classes deep to beat .cart-totals .shipping-notes and .cart-totals .order-summary from site.css on specificity rather than on load order. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .cart-totals-left, .cart-totals-right { display: contents; } .cart-totals .cart-totals-left .cart-reco { order: 1; flex: 1 1 100%; } .cart-totals .cart-totals-right .order-summary { order: 2; flex: 1 1 100%; /* Full width when stacked. The 420px cap and the auto left margin are for the desktop column, where the summary sits against the right edge. */ max-width: none; margin-left: 0; margin-right: 0; } .cart-totals .cart-totals-right .cart-actions { order: 3; flex: 1 1 100%; /* Air between the button and the shipping copy that now follows it. */ margin-bottom: 10px; } .cart-totals .cart-totals-left .shipping-notes { order: 4; flex: 1 1 100%; } }