/* ========================================================================== MOBILE REDESIGN: CART, CHECKOUT, SIGN-IN AND PASSWORD PAGES (2026-10-24) Spec: MOBILE-REDESIGN-SPEC.md, "Forms, cart, checkout". Phones and tablets only: every rule sits inside max-width: 1023px, so 1024px and up cannot change. Every selector starts with one of these pages' body ids. Colours, radii and gutters come from the shell's --m-* tokens, with the 9 Star values as fallbacks so the page renders the same before the shell sheet loads. Buttons: this sheet only lays them out (order, width, place). Their look (.ns-btn, primary / secondary) is the shell's, with one exception (the cart's Update, below). Without JavaScript the theme's image buttons stay and are centred in their rows. Ported from bahaimusicstore.com (theme-bahai, same file name, sha256 93e512eb...b84b9e47, the final version). Adapted for theme9star: - stylesheet_zz_shop.css loads AFTER this sheet and lays out the cart, checkout and thank-you pages with `body:is(#...Body) .centerColumn ...` (one id) and some two- and three-id selectors, so every rule here on those pages carries more ids than its zz_shop counterpart (usually #column-center plus an element id). - Amber (--m-brand) is a fill colour: white text on it, or amber text, borders and icons on white, are about 2:1. Wherever the BMS sheet draws the brand as text, a border, an icon, a focus ring or a checkbox, this one uses --m-brand-text (#8a6400, 5.4:1); amber stays for fills (the step bar) and the amber wash (--m-brand-soft) marks a chosen card. Legends are ink, not brand. - 9 Star's own markup: the cart has no per-row Update or delete box but a "Remove" link and one Update in #cartButtons; the empty cart has a message and category chips; the address book is zz_shop's .addressCards; the confirmation page is a zz_shop grid; the thank-you page lists downloads. ========================================================================== */ @media (max-width: 1023px) { /* ------------------------------------------------------------ page column the forms and the cart read as one centred column on tablets instead of stretching 900px wide; phones are narrower than the measure, so unchanged */ :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center .centerColumn { max-width: var(--m-measure, 720px); margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- headings 9 Star: zz_shop sets h2 and h3 on the cart, checkout and thank-you pages in 15px capitals with wide tracking (one id more than the shell's heading scale). Here they follow the scale: h2 20px, h3 17px, sentence case, normal tracking. */ :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody) #column-center .centerColumn :is(h2, h3) { letter-spacing: 0; text-transform: none; } :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody) #column-center .centerColumn h2:not(.centerBoxHeading) { font-size: var(--m-fs-h2, 20px); line-height: 1.3; } :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody) #column-center .centerColumn h3 { font-size: var(--m-fs-h3, 17px); line-height: 1.35; } /* ================================================================ FORMS fieldsets were grey boxes with an amber tab legend (zz_shop) or a boxed legend notched into their border, and labels in a 9em or 150px column; on a phone the redesign wants one card per group, the label above its field and 48px fields. */ /* ------------------------------------------------------- group cards stylesheet_main.css and zz_shop set the fieldset margin with !important, hence the !important on the margin */ :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center fieldset { min-width: 0; margin: 0 0 16px !important; padding: 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface, #ffffff); color: var(--m-ink, #2d2d2d); box-sizing: border-box; } /* a floated legend is laid out inside the card (not on its border) as its heading. stylesheet.css and zz_shop set the legend's bottom margin with !important, hence the !important; zz_shop's amber tab (white 13px text on amber) becomes an ink heading. */ :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset > legend { float: left; width: 100%; box-sizing: border-box; margin: 0 0 4px !important; padding: 0; border: 0; background: none; color: var(--m-ink, #2d2d2d); font-size: 17px; font-weight: bold; line-height: 1.35; letter-spacing: 0; text-align: left; text-transform: none; } :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center fieldset > legend + * { clear: both; } /* a group of groups (the sign-up form wraps its three cards in one more fieldset): no card round the cards; its legend becomes the section heading */ :is(#loginBody, #createaccountBody) #column-center fieldset:has(> fieldset) { padding: 0; border: 0; border-radius: 0; background: none; } :is(#loginBody, #createaccountBody) #contentMainWrapper #column-center fieldset:has(> fieldset) > legend { margin: 8px 0 12px !important; font-size: 20px; line-height: 1.3; } /* change an address: zz_shop puts each label in a 150px column beside its field (the phone layer undoes that only up to 600px). One column at every width here. */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #contentMainWrapper #column-center fieldset:has(> label.inputLabel) { display: block; } /* ------------------------------------------------------------- labels 24px tall: a label is a tap target for its field */ :is(#checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset :is(label.inputLabel, label.inputLabelPayment), :is(#checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset > label:not(.checkboxLabel, .radioButtonLabel, input + label) { float: none; clear: both; /* zz_shop hides the change-address form's
s, which cleared the "* Required" note */ display: block; width: auto; height: auto; margin: 12px 0 4px; padding: 0; color: var(--m-ink, #2d2d2d); font-size: 14px; font-weight: bold; line-height: 24px; text-align: left; } /* -------------------------------------------------------------- fields 48px tall, full width, 10px radius, 16px text (iOS zooms under 16px). The border is a warm grey dark enough to pass 3:1 against white (the line token is not). Three ids beat the FORM CONTROLS rules in stylesheet_zz_9star.css and zz_shop's. */ :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], select, textarea) { display: inline-block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #928e88; border-radius: var(--m-radius, 10px); background-color: var(--m-surface, #ffffff); color: var(--m-ink, #2d2d2d); font-family: inherit; font-size: 16px; vertical-align: middle; } :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"]) { height: 48px; padding: 0 14px; line-height: normal; } /* the shared FORM CONTROLS rule (and stylesheet_tm.css on the login page) set the select height with !important */ :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset select { height: 48px !important; padding: 0 40px 0 14px; -webkit-appearance: none; appearance: none; /* Phosphor caret-down (regular, MIT) */ background: var(--m-surface, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235f6264'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat; } :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset textarea { display: block; min-height: 112px; padding: 12px 14px; line-height: 1.45; resize: vertical; } /* focus: a 2px ring in the brand text colour drawn over the border, as the shell's search field does (zz_shop's 2px amber outline is about 2:1 on white) */ :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset :is(input, select, textarea):focus { border-color: var(--m-brand-text, #8a6400); outline: 2px solid var(--m-brand-text, #8a6400); outline-offset: -1px; box-shadow: none; } /* required "*" after a select: the select leaves 24px for it, and so do the other fields of that card, so their right edges line up. (zz_shop hides the change-address form's stars, but the state select's star carries an inline display: inline.) */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody) #contentMainWrapper #column-center fieldset:has(select + .alert) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select) { width: calc(100% - 24px); } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody) #column-center fieldset select + .alert { margin: 0 0 0 4px; color: var(--m-ink-2, #5f6264); font-size: 16px; vertical-align: middle; } /* "* Required information": 11px light grey (about 2.5:1) was hard to read */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody) #column-center fieldset > .alert.forward { margin: 0 0 4px; color: var(--m-ink-2, #5f6264); font-size: 13px; } /* --------------------------------------------- checkbox rows (terms, privacy, newsletter, product notifications): a 24px box; its label pads the row to 48px. The tick box is drawn in the brand text colour: amber would be 2:1 on white. */ :is(#checkoutpaymentBody, #checkoutsuccessBody, #loginBody, #createaccountBody) #column-center fieldset input[type="checkbox"] { width: 24px; height: 24px; margin: 12px 12px 12px 0; vertical-align: top; accent-color: var(--m-brand-text, #8a6400); transform: none; /* zz_shop scales the downloads box to 1.2 */ } :is(#checkoutpaymentBody, #checkoutsuccessBody, #loginBody, #createaccountBody) #column-center fieldset input[type="checkbox"] + label { max-width: calc(100% - 44px); /* the box, its margin and the space after it */ height: auto; margin: 0; padding: 13px 0; color: var(--m-ink, #2d2d2d); font-size: 15px; line-height: 22px; vertical-align: top; } /* the newsletter box comes after its label: label and box share the line */ :is(#loginBody, #createaccountBody) #column-center fieldset label.checkboxLabel:has(+ input[type="checkbox"]) { display: inline-block; height: auto; margin: 0; padding: 13px 0 !important; /* the template sets padding-left: 10px inline */ font-size: 15px; line-height: 22px; vertical-align: top; } :is(#loginBody, #createaccountBody) #column-center fieldset label.checkboxLabel + input[type="checkbox"] { margin-left: 12px; } /* --------------------------------------------- helper text inside the forms (zz_shop: 12px light grey on the payment page) */ :is(#checkoutpaymentBody, #loginBody, #createaccountBody, #passwordforgottenBody, #timeoutBody) #column-center fieldset :is(.information, p, .termsdescription, #passwordForgottenMainContent) { color: var(--m-ink-2, #5f6264); font-size: 14px; line-height: 1.5; } #checkoutpaymentBody #column-center fieldset p { margin: 0 0 8px; } #checkoutpaymentBody #column-center fieldset .termsdescription { margin: 0 0 4px; } /* create account: "NOTE: If you already have an account ..." as a quiet note */ #createaccountBody #column-center #createAcctDefaultLoginLink { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--m-radius, 10px); background: var(--m-surface-2, #f7f6f3); color: var(--m-ink, #2d2d2d); font-size: 14px; font-weight: normal; line-height: 1.5; } /* ----------------------------------------------------------- messages red text with a 30px icon ran edge to edge; now a tinted card, the icon at 22px beside the text (the flex row itself is set in stylesheet_zz_9star.css) */ :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) { align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid #f0c7c2; border-radius: var(--m-radius, 10px); background: #fdf2f1; color: #a3261b; font-size: 14px; font-weight: normal; line-height: 1.45; } /* 9 Star: success in a dark teal from the category palette (#30a688), caution on the amber wash */ :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center .messageStackSuccess { border-color: #bfe0d3; background: #eef8f4; color: #1d6b55; } :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center .messageStackCaution { border-color: #ecd9a0; background: var(--m-brand-soft, #fff8e1); color: #6b5200; } :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) > img:first-child { width: 22px; height: auto; margin: 0; } /* ============================================================== BUTTONS layout only: the theme floats them left and right (.forward / .back, with the theme-wide 33px / -30px margins on .back). Each step now ends in one full-width action, any second action full width under it. Image buttons (no JavaScript) keep their size, centred. */ :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center .buttonRow { float: none; clear: both; display: block; margin: 12px 0 0; padding: 0; text-align: center; } :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #column-center .buttonRow > :is(.ns-btn, input[type="submit"], button) { width: 100%; box-sizing: border-box; } /* the step's main action keeps a little room above it */ :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody, #createaccountBody, #passwordforgottenBody, #timeoutBody) #column-center .buttonRow.forward:not(.floatingBox .buttonRow) { margin-top: 20px; } /* "Continue to Step 2 / - to choose your payment method." under the button: one quiet caption line, centred (zz_shop: 12px, 10px padding above) */ :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody) #column-center .buttonRow.back:has(> strong) { margin: 10px 0 0; padding: 0; color: var(--m-ink-2, #5f6264); font-size: 13px; line-height: 1.45; } :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody) #column-center .buttonRow.back:has(> strong) > br { display: none; } :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody) #column-center .buttonRow.back:has(> strong) > strong::after { content: " "; } /* "Forgot your password?": a 44px tap target; on the login card it sits right under the password field, at the right, as apps place it */ :is(#loginBody, #timeoutBody) #column-center .buttonRow.important a { display: inline-block; padding: 12px 0; color: var(--m-brand-text, #8a6400); font-size: 15px; } #loginBody #column-center #loginForm .buttonRow.important { margin: 4px 0 0; text-align: right; } #loginBody #column-center .buttonRow.nlog { margin-top: 12px; } /* =================================================================== CART 9 Star's cart: no per-row Update or delete box, a "Remove" link per row (10px capitals on a charcoal chip), one Update for the whole form beside Continue Shopping and Checkout. One card per item: picture and title, then the quantity, Remove and the line total in one row. */ #shoppingcartBody #column-center #shoppingCartDefault > .forward:first-child { font-size: 13px; padding-top: 0; } #shoppingcartBody #column-center #cartInstructionsDisplay { max-width: none; margin: 0 0 16px; padding: 0; /* .content's 10px indent and rule: the cards line up with the text */ border: 0; color: var(--m-ink-2, #5f6264); font-size: 14px; line-height: 1.5; } #shoppingcartBody #column-center #cartInstructionsDisplay p { margin: 0; } #shoppingcartBody #column-center #cartContentsDisplay, #shoppingcartBody #column-center #cartContentsDisplay > tbody { display: block; width: 100%; margin: 0; border: 0; background: none; } #shoppingcartBody #column-center #cartContentsDisplay tr.tableHeading { display: none; } #shoppingcartBody #column-center #cartContentsDisplay tr:not(.tableHeading) { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "prod prod prod" "qty remove sum"; align-items: center; gap: 14px 10px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface, #ffffff); } /* a hairline between the item and its quantity row */ #shoppingcartBody #column-center #cartContentsDisplay tr:not(.tableHeading)::before { content: ""; grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: -7px; border-top: 1px solid var(--m-line, #e4e2df); } #shoppingcartBody #column-center #cartContentsDisplay td { display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left; } /* the picture floats, so the title and the options list both sit beside it (zz_shop makes the link a flex row, which put the options under the picture) */ #shoppingcartBody #column-center #cartContentsDisplay .cartProductDisplay { grid-area: prod; display: flow-root; min-width: 0; } #shoppingcartBody #column-center #cartContentsDisplay .cartProductDisplay > a { display: block; color: var(--m-ink, #2d2d2d); text-decoration: none; } #shoppingcartBody #column-center #cartContentsDisplay .cartProductDisplay > br.clearBoth { display: none; } #shoppingcartBody #column-center #cartContentsDisplay .cartImage { float: left; width: 64px; margin: 0 12px 0 0; } #shoppingcartBody #column-center #cartContentsDisplay .cartImage img { display: block; width: 64px; height: 64px; margin: 0; object-fit: cover; border: 0; border-radius: var(--m-radius-cover, 6px); box-shadow: 0 0 0 1px var(--m-line, #e4e2df); /* white covers keep an edge */ } #shoppingcartBody #column-center #cartContentsDisplay .cartProdTitle { display: block; padding: 2px 0 0; color: var(--m-ink, #2d2d2d); font-size: 16px; font-weight: bold; line-height: 1.35; letter-spacing: 0; } /* the options (zz_shop's amber note glyph stays) beside the picture, under the title */ #shoppingcartBody #column-center #cartContentsDisplay .cartAttribsList { margin: 2px 0 0 76px; } #shoppingcartBody #column-center #cartContentsDisplay .cartAttribsList ul { margin: 0; padding: 0; list-style: none; } #shoppingcartBody #column-center #cartContentsDisplay .cartAttribsList li { padding: 0; color: var(--m-ink-2, #5f6264); font-size: 13px; line-height: 1.4; } #shoppingcartBody #column-center #cartContentsDisplay .cartAttribsList li::before { margin-right: 5px; } /* quantity box: 48px, sized for three digits */ #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity { grid-area: qty; width: auto; } #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity br { display: none; } #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity input[type="text"] { display: block; width: 64px; height: 48px; box-sizing: border-box; margin: 0; padding: 0 6px; border: 1px solid #928e88; border-radius: var(--m-radius, 10px); background: var(--m-surface, #ffffff); color: var(--m-ink, #2d2d2d); font-size: 16px; text-align: center; } #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity input[type="text"]:focus { border-color: var(--m-brand-text, #8a6400); outline: 2px solid var(--m-brand-text, #8a6400); outline-offset: -1px; } /* price each (small, above) and the line total (large, below), at the right. The template's "Price:" / "Total:" labels and zz_shop's added ones go. */ #shoppingcartBody #column-center #cartContentsDisplay :is(.cartUnitDisplay, .cartTotalDisplay) { grid-area: sum; justify-self: end; white-space: nowrap; } #shoppingcartBody #column-center #cartContentsDisplay :is(.cartUnitDisplay, .cartTotalDisplay) > b.hide { display: none; } #shoppingcartBody #column-center #cartContentsDisplay :is(.cartUnitDisplay, .cartTotalDisplay)::before { content: none; } #shoppingcartBody #column-center #cartContentsDisplay .cartUnitDisplay { align-self: start; color: var(--m-ink-2, #5f6264); font-size: 13px; line-height: 18px; text-align: right; } #shoppingcartBody #column-center #cartContentsDisplay .cartUnitDisplay::after { content: " each"; } #shoppingcartBody #column-center #cartContentsDisplay .cartTotalDisplay { align-self: end; color: var(--m-ink, #2d2d2d); font-size: 18px; font-weight: bold; line-height: 24px; text-align: right; } /* quantity 1: "each" would repeat the total, so the total alone, centred on the row */ #shoppingcartBody #column-center #cartContentsDisplay tr:has(.cartQuantity input[value="1"]) .cartUnitDisplay { display: none; } #shoppingcartBody #column-center #cartContentsDisplay tr:has(.cartQuantity input[value="1"]) .cartTotalDisplay { align-self: center; } /* Remove: zz_shop's 10px capitals on a charcoal chip (6px 9px padding, a 23px target) become a 44px text link with a Phosphor trash icon (regular, MIT), next to the quantity it belongs with */ #shoppingcartBody #column-center #cartContentsDisplay .cartRemoveItemDisplay { grid-area: remove; justify-self: start; } #shoppingcartBody #column-center #cartContentsDisplay a.cartRemoveLink { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--m-tap, 44px); padding: 0 6px 0 24px; border-radius: var(--m-radius, 10px); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235f6264'%3E%3Cpath d='M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E") 2px center / 18px 18px no-repeat; color: var(--m-ink-2, #5f6264); font-size: 15px; font-weight: normal; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; } #shoppingcartBody #column-center #cartContentsDisplay a.cartRemoveLink:is(:hover, :focus-visible) { color: var(--m-ink, #2d2d2d); } #shoppingcartBody #column-center #cartContentsDisplay a.cartRemoveLink:focus-visible { outline: 2px solid var(--m-brand-text, #8a6400); outline-offset: 0; } /* the form as one column: the item cards; the Update under them (it saves the quantities above, and Checkout is a plain link that would not); the totals card; then Checkout and Continue Shopping, full width. #cartButtons (zz_shop: a flex row under a charcoal rule) lets its buttons join that column. */ #shoppingcartBody #column-center #shoppingCartForm { display: flex; flex-direction: column; } #shoppingcartBody #column-center #shoppingCartForm > #cartButtons { display: contents; } #shoppingcartBody #column-center #cartButtons > .buttonRow { margin: 12px 0 0; } #shoppingcartBody #column-center #cartButtons > .buttonRow.cartUpdateButton { order: 1; margin: 0; text-align: left; } #shoppingcartBody #column-center #cartButtons > .buttonRow.forward { order: 3; margin-top: 16px; } #shoppingcartBody #column-center #cartButtons > .buttonRow.back:not(.cartUpdateButton) { order: 4; } #shoppingcartBody #column-center #cartButtons > .cartUpdateButton > :is(.ns-btn, input[type="submit"]) { width: auto; min-width: 128px; } /* Update is a secondary action next to Checkout. The shell script styles a button by its label and 9 Star's reads "Update" (BMS: "Update Cart", which it maps to secondary), so it can arrive as a second amber button: drawn as the shell's secondary here either way. */ #shoppingcartBody #column-center #cartButtons > .cartUpdateButton > .ns-btn--primary { background: var(--m-surface, #ffffff); border-color: var(--m-brand-text, #8a6400); color: var(--m-brand-text, #8a6400); } @media (hover: hover) { #shoppingcartBody #column-center #cartButtons > .cartUpdateButton > .ns-btn--primary:hover { background: var(--m-surface-2, #f7f6f3); border-color: var(--m-brand-text, #8a6400); color: var(--m-brand-text, #8a6400); } } /* totals card: Sub-Total at the left, the amount at the right (zz_shop: a 12px grey capital label and a 28px amount, flush right over a charcoal rule) */ #shoppingcartBody #column-center #cartSubTotal { order: 2; float: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 16px 0 0; padding: 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface-2, #f7f6f3); color: var(--m-ink, #2d2d2d); font-weight: normal; line-height: 1.3; text-align: left; } #shoppingcartBody #column-center #cartSubTotal > .cartSubTotalLabel { color: var(--m-ink, #2d2d2d); font-size: 15px; font-weight: bold; letter-spacing: 0; text-transform: none; } #shoppingcartBody #column-center #cartSubTotal > .cartSubTotalAmount { color: var(--m-ink, #2d2d2d); font-size: 22px; font-weight: bold; letter-spacing: -.3px; } /* PayPal's Pay Later message, when it is injected: its own line in the card */ #shoppingcartBody #column-center #cartSubTotal > span[id^="zoid-paypal-message"] { flex: 0 0 100%; justify-content: flex-start; } #shoppingcartBody #column-center #cartSubTotal + br.clearBoth { display: none; } /* ------------------------------------------------------------- empty cart zz_shop's amber-washed panel with the category menu's colour blocks (white capitals on olive, rust, teal, yellow and blue: 1.7-3.2:1 except rust) becomes a calm empty state: a Phosphor shopping-cart (regular, MIT) in the brand text colour over the message, and the categories as 48px tiles, two to a row, each keeping its colour as a bar at its left edge, with ink text. */ #shoppingcartBody #column-center #cartEmptyText { height: auto; min-height: 0; margin: 0 0 32px; padding: 76px 16px 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface-2, #f7f6f3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238a6400'%3E%3Cpath d='M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z'/%3E%3C/svg%3E") center 24px / 40px 40px no-repeat; color: var(--m-ink, #2d2d2d); font-size: 15px; font-weight: normal; line-height: 1.55; text-align: center; text-transform: none; } #shoppingcartBody #column-center #cartEmptyText > p { max-width: 34em; margin: 0 auto; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories li { flex: 1 1 calc(50% - 4px); /* two to a row; an odd last tile takes the row */ min-width: 0; margin: 0; padding: 0; background: none; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories a { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m-btn-h, 48px); padding: 6px 12px 6px 20px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius, 10px); background: var(--m-surface, #ffffff); box-shadow: inset 6px 0 0 var(--ns-cat, #e8a900); color: var(--m-ink, #2d2d2d); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: left; text-decoration: none; text-transform: none; filter: none; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories li:nth-child(5n+1) a { --ns-cat: #959f2e; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories li:nth-child(5n+2) a { --ns-cat: #a2452f; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories li:nth-child(5n+3) a { --ns-cat: #30a688; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories li:nth-child(5n+4) a { --ns-cat: #f9bd00; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories li:nth-child(5n+5) a { --ns-cat: #3399cc; } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories a:active { background-color: var(--m-surface-2, #f7f6f3); } #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories a:focus-visible { outline: 2px solid var(--m-brand-text, #8a6400); outline-offset: 2px; } @media (hover: hover) { #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories a:hover { border-color: #c9c6c1; } } #shoppingcartBody #column-center #whatsNew h2.centerBoxHeading { grid-column: 1 / -1; margin: 0 0 16px; font-size: 20px; line-height: 1.3; letter-spacing: 0; text-transform: none; } /* "new products" under the empty cart: the same cards as the listing pages (their sheet scopes by the listing pages' body ids): a grid, square covers, two-line titles, Buy Now and More Info full width at the card's foot. The upgraded buttons had been squeezed into the phone layer's 95px columns, their labels cut. The items carry inline widths and heights, hence the !important. */ #shoppingcartBody #column-center #whatsNew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } #shoppingcartBody #column-center #whatsNew > br { display: none; } /* the phone layer's flex line breaks would be grid items (the first card started in the second column) */ #shoppingcartBody #column-center #whatsNew::before, #shoppingcartBody #column-center #whatsNew::after { content: none; } #shoppingcartBody #column-center #whatsNew > .centerBoxContentsNew { display: flex; flex-direction: column; float: none; width: auto !important; height: auto !important; min-width: 0; margin: 0 0 28px; padding: 0; text-align: left; } #shoppingcartBody #column-center #whatsNew > .centerBoxContentsNew > br { display: none; } #shoppingcartBody #column-center #whatsNew .ng200 { width: 100%; height: auto; margin: 0 0 10px; } #shoppingcartBody #column-center #whatsNew .ng200 a { display: block; } #shoppingcartBody #column-center #whatsNew .ng200 img { display: block; box-sizing: border-box; width: 100%; height: auto; max-width: none; aspect-ratio: 1; object-fit: contain; border: 0; border-radius: var(--m-radius-cover, 6px); background: var(--m-surface-2, #f7f6f3); box-shadow: 0 0 0 1px var(--m-line, #e4e2df); } #shoppingcartBody #column-center #whatsNew h3.itemTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 2px; padding: 0; color: var(--m-ink, #2d2d2d); font-size: 15px; font-weight: bold; line-height: 1.3; } #shoppingcartBody #column-center #whatsNew h3.itemTitle a { color: inherit; padding-block: 4px; } #shoppingcartBody #column-center #whatsNew .plart { display: block; width: auto; margin: 0 0 12px; padding: 0; border: 0; overflow: hidden; color: var(--m-ink-2, #5f6264); font-size: 13px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; } #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; max-width: none; margin: 8px 0 0; line-height: 1.2; /* the phone layer sets line-height: 0 on these links */ } #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a:not(h3 ~ a ~ a) { margin-top: auto; } #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a:not(.ns-btn) { justify-content: flex-start; } #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a:not(.ns-btn) > img { width: 95px; max-width: 100%; height: auto; margin: 0; } /* ====================================================== CHECKOUT STEPS a three-part progress bar under each step's heading: the steps read at a glance. 9 Star: done steps in amber (a fill, as on the buttons), the rest in the line grey; the heading's "Step N of 3" carries the same information as text. */ #checkoutshippingBody #column-center #checkoutShippingHeading::after, #checkoutpaymentBody #column-center #checkoutPaymentHeading::after, #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeading::after { content: ""; display: block; height: 4px; margin: 14px 0 0; border-radius: 2px; background: linear-gradient(90deg, var(--m-brand, #e8a900) 0 32.33%, transparent 32.33% 33.83%, var(--m-line, #e4e2df) 33.83% 66.17%, transparent 66.17% 67.67%, var(--m-line, #e4e2df) 67.67% 100%); } #checkoutpaymentBody #column-center #checkoutPaymentHeading::after { background: linear-gradient(90deg, var(--m-brand, #e8a900) 0 32.33%, transparent 32.33% 33.83%, var(--m-brand, #e8a900) 33.83% 66.17%, transparent 66.17% 67.67%, var(--m-line, #e4e2df) 67.67% 100%); } #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeading::after { background: linear-gradient(90deg, var(--m-brand, #e8a900) 0 32.33%, transparent 32.33% 33.83%, var(--m-brand, #e8a900) 33.83% 66.17%, transparent 66.17% 67.67%, var(--m-brand, #e8a900) 67.67% 100%); } /* --------------------------------------------- steps 1 and 2: the address card the delivery / billing address and its Change Address button as one card (zz_shop: an amber left rule, the button at the right); the explanation under it as a caption (it was a 47% float beside it) */ #checkoutshippingBody #column-center #checkoutShipto, #checkoutpaymentBody #column-center #checkoutBillto { float: none; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; width: auto; margin: 0; padding: 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface, #ffffff); } #checkoutshippingBody #column-center #checkoutShipto > address, #checkoutpaymentBody #column-center #checkoutBillto > address { flex: 0 1 auto; order: 0; margin: 0; color: var(--m-ink, #2d2d2d); font-size: 15px; font-style: normal; line-height: 1.55; } #checkoutshippingBody #column-center #checkoutShipto > .buttonRow, #checkoutpaymentBody #column-center #checkoutBillto > .buttonRow { order: 1; margin: 0; } :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .floatingBox.important { float: none; width: auto; margin: 8px 0 0; padding: 0 2px; color: var(--m-ink-2, #5f6264); font-size: 13px; font-weight: normal; line-height: 1.5; } /* the two empty lines the floats needed */ :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .floatingBox.important + br.clearBoth + br { display: none; } #checkoutshippingBody #column-center #checkoutShippingHeadingMethod, #checkoutshippingBody #column-center #comments { margin-top: 24px !important; } /* fieldset margin is !important above */ #checkoutshippingBody #column-center #checkoutShippingContentChoose { margin: 0 0 12px; color: var(--m-ink-2, #5f6264); font-size: 14px; font-weight: normal; line-height: 1.5; } /* "Special Instructions or Order Comments" heading sits on the card that follows */ #checkoutshippingBody #column-center form > h3 { margin: 24px 0 8px; } #checkoutshippingBody #column-center form > h3 + #comments { margin-top: 0 !important; } /* ------------------------------------- shipping and payment choices as rows each choice is a tappable card: the whole label selects it, the radio sits inside its left edge and the price inside its right edge (both let taps through to the label). The checked card takes the brand border on the amber wash. The radio floats (a float can clear the floated legend; an inline radio of no net width sat in the zero-width line beside the legend, outside the card). */ #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"], #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"] { position: relative; z-index: 1; left: 16px; float: left; clear: left; width: 24px; height: 24px; margin: 15px -24px 0 0; vertical-align: top; accent-color: var(--m-brand-text, #8a6400); pointer-events: none; } #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"] + label, #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"] + label, #checkoutpaymentBody #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel { display: inline-block; width: 100%; max-width: none; min-height: 54px; box-sizing: border-box; margin: 4px 0; padding: 15px 92px 15px 52px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius, 10px); background: var(--m-surface, #ffffff); color: var(--m-ink, #2d2d2d); font-size: 15px; font-weight: normal; line-height: 22px; vertical-align: top; cursor: pointer; } #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"]:checked + label, #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"]:checked + label, #checkoutpaymentBody #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel { border-color: var(--m-brand-text, #8a6400); box-shadow: inset 0 0 0 1px var(--m-brand-text, #8a6400); background-color: var(--m-brand-soft, #fff8e1); } #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"]:focus-visible + label, #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"]:focus-visible + label { outline: 2px solid var(--m-brand-text, #8a6400); outline-offset: 2px; } /* the shipping price floats right before its radio: pulled inside the card, at the height of the label's first line; its negative margin keeps it from narrowing the line the label sits on */ #checkoutshippingBody #column-center fieldset:has(input[name="shipping"]) > .price { position: relative; z-index: 1; right: 16px; margin: 20px 0 0 -300px; color: var(--m-ink, #2d2d2d); font-size: 15px; font-weight: bold; line-height: 22px; pointer-events: none; } /* a store with one payment method prints no radio: its card shows as chosen, a Phosphor check-circle (fill, MIT) at its right, no radio space at its left */ #checkoutpaymentBody #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel { padding-left: 16px; padding-right: 52px; background: var(--m-brand-soft, #fff8e1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238a6400'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 16px center / 24px 24px no-repeat; cursor: default; } #checkoutpaymentBody #column-center fieldset.payment > br.clearBoth + br.clearBoth { display: none; } /* --------------------------------------------------------- order totals payment (a fieldset) and confirmation: title at the left, amount at the right, the grand total heavier under a hairline. zz_shop lays each line out as a right-aligned row-reverse pair with a 96px amount column. */ #checkoutconfirmationBody #column-center #orderTotals { margin: 0 0 4px; padding: 8px 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface-2, #f7f6f3); } #checkoutpaymentBody #column-center #checkoutOrderTotals > div, #checkoutconfirmationBody #column-center #orderTotals > div { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; } #checkoutpaymentBody #column-center #checkoutOrderTotals > div > .lineTitle, #checkoutconfirmationBody #column-center #orderTotals > div > .lineTitle { float: none; order: 0; flex: 1 1 auto; min-width: 0; color: var(--m-ink, #2d2d2d); font-size: 15px; font-weight: normal; line-height: 1.4; text-align: left; } #checkoutpaymentBody #column-center #checkoutOrderTotals > div > .totalBox, #checkoutconfirmationBody #column-center #orderTotals > div > .totalBox { float: none; order: 1; flex: 0 0 auto; width: auto; padding: 0; color: var(--m-ink, #2d2d2d); font-size: 15px; font-weight: bold; line-height: 1.4; text-align: right; } #checkoutpaymentBody #column-center #checkoutOrderTotals > #ottotal, #checkoutconfirmationBody #column-center #orderTotals > #ottotal { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--m-line, #e4e2df); } #checkoutpaymentBody #column-center #checkoutOrderTotals > #ottotal > :is(.lineTitle, .totalBox), #checkoutconfirmationBody #column-center #orderTotals > #ottotal > :is(.lineTitle, .totalBox) { font-size: 18px; font-weight: bold; } #checkoutpaymentBody #column-center #checkoutOrderTotals > br.clearBoth, #checkoutconfirmationBody #column-center #orderTotals > br.clearBoth { display: none; } /* -------------------------------------------- step 3: review cards zz_shop makes the page a two-column grid (billing | delivery, totals and Confirm on the right) down to 761px. One column here: billing, delivery and comments as cards with their Edit at the top right, the Products heading with its Edit on one line (the grid's second column, at the right). Four ids beat zz_shop's placements. */ #checkoutconfirmationBody #contentMainWrapper #column-center #checkoutConfirmDefault { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; } #checkoutconfirmationBody #contentMainWrapper #column-center #checkoutConfirmDefault > * { grid-column: 1 / -1; justify-self: stretch; align-self: start; } #checkoutconfirmationBody #contentMainWrapper #column-center #checkoutConfirmDefault > #checkoutConfirmDefaultHeadingCart { grid-column: 1; align-self: center; } #checkoutconfirmationBody #contentMainWrapper #column-center #checkoutConfirmDefault > #checkoutConfirmDefaultHeadingCart + .buttonRow { grid-column: 2; align-self: center; justify-self: end; margin: 12px 8px 0 0; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) { position: relative; float: none; width: auto; margin: 0 0 12px; padding: 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface, #ffffff); box-sizing: border-box; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > .buttonRow { position: absolute; top: 8px; right: 8px; margin: 0; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > .buttonRow > :is(.ns-btn, input[type="submit"], button) { width: auto; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > h2 { float: none; margin: 0 84px 8px 0; /* room for Edit, beside the heading's box, not under it */ padding: 0; font-size: 17px; line-height: 1.35; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) address { margin: 0; color: var(--m-ink, #2d2d2d); font-size: 15px; font-style: normal; line-height: 1.55; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) h3 { margin: 14px 0 2px; padding: 12px 0 0; border-top: 1px solid var(--m-line, #e4e2df); color: var(--m-ink-2, #5f6264); font-size: 13px; line-height: 1.4; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) h4 { margin: 0; color: var(--m-ink, #2d2d2d); font-size: 15px; line-height: 1.45; } #checkoutconfirmationBody #column-center #checkoutBillto .important { margin: 8px 0 0; color: var(--m-ink-2, #5f6264); font-size: 13px; font-weight: normal; line-height: 1.5; } #checkoutconfirmationBody #column-center #checkoutBillto .important:empty, #checkoutconfirmationBody #column-center #checkoutBillto .important:not(:has(*)):not(:has(~ *)) { margin: 0; } #checkoutconfirmationBody #column-center #checkoutShipto + br.clearBoth { display: none; } #checkoutconfirmationBody #column-center #order-comments > div:not(.buttonRow) { color: var(--m-ink-2, #5f6264); font-size: 15px; } /* Products heading and its Edit on one line, then the items as one card */ #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart { margin: 12px 0 0; font-size: 17px; line-height: 1.35; } #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart + .buttonRow > :is(.ns-btn, input[type="submit"], button) { width: auto; } #checkoutconfirmationBody #column-center #cartContentsDisplay, #checkoutconfirmationBody #column-center #cartContentsDisplay > tbody { display: block; width: 100%; border: 0; } #checkoutconfirmationBody #column-center #cartContentsDisplay { margin: 8px 0 12px; padding: 4px 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface, #ffffff); box-sizing: border-box; } #checkoutconfirmationBody #column-center #cartContentsDisplay tr.cartTableHeading { display: none; } #checkoutconfirmationBody #column-center #cartContentsDisplay tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 12px 0; background: none; } #checkoutconfirmationBody #column-center #cartContentsDisplay tr + tr { border-top: 1px solid var(--m-line, #e4e2df); } #checkoutconfirmationBody #column-center #cartContentsDisplay td { display: block; width: auto; padding: 0; border: 0; background: none; color: var(--m-ink, #2d2d2d); font-size: 15px; line-height: 1.4; text-align: left; } #checkoutconfirmationBody #column-center #cartContentsDisplay .cartQuantity { color: var(--m-ink-2, #5f6264); white-space: nowrap; } #checkoutconfirmationBody #column-center #cartContentsDisplay .cartProductDisplay { font-weight: bold; } #checkoutconfirmationBody #column-center #cartContentsDisplay .cartTotalDisplay { font-weight: bold; text-align: right; white-space: nowrap; } #checkoutconfirmationBody #column-center #cartContentsDisplay .cartAttribsList { margin: 2px 0 0; padding: 0; list-style: none; } #checkoutconfirmationBody #column-center #cartContentsDisplay .cartAttribsList li { padding: 0; color: var(--m-ink-2, #5f6264); font-size: 13px; font-weight: normal; line-height: 1.4; } #checkoutconfirmationBody #column-center #checkout_confirmation .buttonRow { margin-top: 20px; } /* ------------------------------------- change an address: the address book 9 Star prints each saved address as one label (zz_shop's .addressCards: radio and address inside, 190px+ columns, the radio at 13px). Each card selects as a whole already: the cards follow the redesign (10px radius, 24px radio, the name line in bold, chosen card in the brand border on the amber wash), one column on phones. */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 4px 0 4px; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards .addressCard { position: relative; display: block; margin: 0; padding: 14px 16px 14px 52px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius, 10px); background: var(--m-surface, #ffffff); cursor: pointer; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards .addressCard:has(input:checked) { border-color: var(--m-brand-text, #8a6400); box-shadow: inset 0 0 0 1px var(--m-brand-text, #8a6400); background: var(--m-brand-soft, #fff8e1); } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards .addressCard:has(input:focus-visible) { outline: 2px solid var(--m-brand-text, #8a6400); outline-offset: 2px; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards .addressCard input[type="radio"] { position: absolute; top: 15px; left: 16px; width: 24px; height: 24px; margin: 0; accent-color: var(--m-brand-text, #8a6400); } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards .addressCard address { margin: 0; color: var(--m-ink, #2d2d2d); font-size: 15px; font-style: normal; line-height: 1.5; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards .addressCard address::first-line { font-weight: bold; } /* "Edit or delete saved addresses ...": a 44px tap target in the brand text colour */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressBookManage { margin: 4px 0 0; font-size: 15px; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressBookManage a { display: inline-block; padding: 12px 0; color: var(--m-brand-text, #8a6400); font-weight: bold; } /* the current address at the top of the page as a quiet card, its note under it (zz_shop: a 320px box with an amber left rule) */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .instructions { margin: 0 0 20px; color: var(--m-ink-2, #5f6264); font-size: 14px; line-height: 1.5; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .instructions address.back { max-width: none; margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius-lg, 14px); background: var(--m-surface-2, #f7f6f3); color: var(--m-ink, #2d2d2d); font-size: 15px; font-style: normal; line-height: 1.55; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .centerColumn form.group { margin-bottom: 24px; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .centerColumn form.group > .buttonRow { margin-top: 4px; } /* ------------------------------------------------- after the order / sign-up thank-you page: zz_shop sets its first heading (h2.h2dl) as a 32-44px page title with -1.2 to -2px tracking; the order number chip gets the interactive radius */ #checkoutsuccessBody #column-center .centerColumn h2.h2dl { margin: 20px 0 8px; padding: 0; font-size: 20px; line-height: 1.3; letter-spacing: 0; } #checkoutsuccessBody #column-center .centerColumn > h2.h2dl:first-of-type { margin-top: 0; font-size: 24px; letter-spacing: 0; } #checkoutsuccessBody #column-center #checkoutSuccessOrderNumber { border-radius: var(--m-radius, 10px); } #checkoutsuccessBody #column-center #checkoutSuccessMainContent { font-size: 15px; line-height: 1.55; } /* "To download your files click the download button ...": an instruction, in zz_shop's spaced capitals it read as a shout; sentence case at the body size */ #checkoutsuccessBody #column-center #headingDownloads { margin: 16px 0 8px; color: var(--m-ink, #2d2d2d); font-size: 15px; line-height: 1.45; letter-spacing: 0; text-transform: none; } /* the closing notes were 12px light grey */ #checkoutsuccessBody #column-center :is(#checkoutSuccessOrderLink, #checkoutSuccessContactLink, #checkoutSuccessLogoff) { color: var(--m-ink-2, #5f6264); font-size: 14px; line-height: 1.5; } #checkoutsuccessBody #column-center #checkoutSuccessThanks { margin: 24px 0 8px; text-align: left; } /* account created: each saved address's Edit and Delete side by side (two full-width buttons per address made a long column of buttons), the entries split by a hairline */ #createaccountsuccessBody #column-center fieldset .buttonRow:has(> .ns-btn + .ns-btn) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #createaccountsuccessBody #column-center fieldset h3.addressBookDefaultName { margin: 0 0 4px; font-size: 15px; } #createaccountsuccessBody #column-center fieldset br.clearBoth + h3.addressBookDefaultName { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--m-line, #e4e2df); } #createaccountsuccessBody #column-center fieldset address { font-size: 15px; font-style: normal; line-height: 1.5; } } /* ---------------------------------------------- wider screens (600-1023px) room for the Change Address button beside the address, as on desktop */ @media (min-width: 600px) and (max-width: 1023px) { #checkoutshippingBody #column-center #checkoutShipto, #checkoutpaymentBody #column-center #checkoutBillto { flex-direction: row; align-items: center; justify-content: space-between; } #checkoutshippingBody #column-center #checkoutShipto > .buttonRow > :is(.ns-btn, input[type="submit"], button), #checkoutpaymentBody #column-center #checkoutBillto > .buttonRow > :is(.ns-btn, input[type="submit"], button) { width: auto; } /* the empty cart's category tiles: as many to a row as fit, 120px or more each (all five on one row on a tablet) */ #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories li { flex: 1 1 120px; } /* saved addresses two to a row (zz_shop's 190px columns made three narrow ones on a tablet, each address broken over five lines) */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .addressCards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* thank-you page: from 601px the downloads are zz_shop's six-column table; its Download Now buttons broke over two lines in the last column */ #checkoutsuccessBody #column-center #downloads .downloadButton > .ns-btn { padding: 0 16px; white-space: nowrap; } /* the empty cart's product grid steps up like the listing pages: 3-up here */ #shoppingcartBody #column-center #whatsNew { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 860px) and (max-width: 1023px) { #shoppingcartBody #column-center #whatsNew { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ------------------------------------------------- narrowest phones (320px) the cart card's quantity row (box, Remove, total) keeps to the card: a little less padding and gap */ @media (max-width: 359px) { #shoppingcartBody #column-center #cartContentsDisplay tr:not(.tableHeading) { column-gap: 8px; padding: 12px; } }