/* ========================================================================== DESKTOP REFRESH, COMMERCE (2026-10-25): cart (filled and empty), sign in, create account, contact, password forgotten, the checkout steps (delivery, payment, confirm, thank-you, change address) and the account pages (my account, order history and details, address book, edit forms). Spec: docs/DESKTOP-REFRESH-BMS.md section 8 (K.*). Desktop only: every rule sits inside min-width: 1024px, so phones and tablets (1023px and below) cannot change by a pixel. Model: the phone sheets (stylesheet_zz_9star_m_checkout.css, _m_account.css), re-made at mouse sizes: one sage accent, the 10 / 14 / 6px radius system, pale #f4f5ef panels, hairline cards, bordered choice rows with a sage chosen state, the same step bar. This sheet does the page layout and sizing of these pages. The generic look of a button (.ns-btn: primary, secondary, quiet), a field, a select and the message boxes belongs to stylesheet_zzz_d_base.css; colours, radii and heights come from stylesheet_zzz_d_tokens.css (--d-*). Here a button is only sized (small in table rows and card corners, large for Checkout and Confirm Order) and placed. Own custom property: --k-field-w, the width of a field on each page. Scope: every selector starts with a page's body id and #column-center. Those ids beat the old theme rules (stylesheet_main.css, stylesheet.css, stylesheet_tm.css body#loginBody ...) without !important. The few !important are marked where they are: each answers an inline style="" or an !important that already sits in the theme. Pages checked in the browser (WebKit, 1024 / 1280 / 1440 / 1920): cart (filled, empty), sign in, create account, contact, password forgotten, session timeout, order lookup, discount coupon. The checkout and account pages need a customer session (and an order), so they were checked on the pages' own template markup placed into the live page. ========================================================================== */ @media (min-width: 1024px) { /* ------------------------------------------------------------------ 1. cards A fieldset is a 14px card with its legend as the card's heading, sitting on the border (the theme drew the legend as a boxed tab; the login legend as white on olive, 2.48:1). stylesheet_main.css sets margin-bottom: 20px !important on fieldset; the same 20px is kept here, so nothing needs to fight it. */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset { min-width: 0; box-sizing: border-box; margin: 0 0 20px; padding: 20px 24px 12px; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); box-shadow: var(--d-shadow-1); color: var(--d-ink); font-size: var( --d-fs-body ); /* an intro sentence is a bare text node in the card (it was the theme's 12px) */ line-height: 1.5; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #contentMainWrapper #column-center fieldset > legend { float: none; width: auto; margin: 0; padding: 0 8px; border: 0; background: none; color: var(--d-brand); font: 700 var(--d-fs-h3) / 1.35 var(--d-font); text-align: left; } /* a group of cards (sign-in and create account wrap three cards in one more fieldset): no card around the cards, its legend becomes the section heading (as on the phone) */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset:has(> fieldset) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #contentMainWrapper #column-center fieldset:has(> fieldset) > legend { margin: 4px 0 12px; padding: 0; color: var(--d-ink); font-size: 20px; line-height: 1.3; } /* ------------------------------------------------- 2. labels and fields Labels keep their left column of 9em (stylesheet.css LABEL.inputLabel), now 13px / 600 ink, vertically centred on a 38px field. Fields are sized here (--k-field-w); their look (border, radius, focus ring, select caret) is the base sheet's. "Telephone Number:" is 121px at 13px bold, a little over 9em (117px): it may use the 16px of padding before the field instead of wrapping. */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center { --k-field-w: min(100%, 320px); } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #contentMainWrapper #column-center fieldset label.inputLabel { float: left; clear: left; display: flex; align-items: center; box-sizing: content-box; width: 9em; height: auto; min-height: var(--d-field-h); margin: 0 0 12px; padding: 0 16px 0 0; color: var(--d-ink); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-align: left; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset label.inputLabel .alert { margin-left: 4px; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset :is( input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select ) { display: inline-block; box-sizing: border-box; width: var(--k-field-w); height: var(--d-field-h); margin: 0 0 12px; vertical-align: top; } /* stylesheet_tm.css pins the sign-in page's selects at 26px with !important (and the label, field and select rules there are three-element selectors): this one !important answers it */ #loginBody #column-center fieldset select { height: var(--d-field-h) !important; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset :is(input#postcode, input#dob) { width: 140px; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset textarea { display: block; box-sizing: border-box; width: min(100%, 560px); margin: 0 0 12px; } /* the sign-in page's focus colour (#b5b5b5, stylesheet_tm.css) is a three-element selector */ #loginBody #column-center fieldset :is( input[type="text"], input[type="email"], input[type="password"], select ):focus { border-color: var(--d-brand); } /* "*" after a field: a quiet marker beside it, centred on the field's height */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset > .alert:not(.forward, .alignright), :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset > div > .alert:not(.forward, .alignright) { display: inline-block; margin: 0 0 12px 8px; color: var(--d-ink-2); font-size: 13px; line-height: var(--d-field-h); vertical-align: top; } /* "* Required information" */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset .alert:is(.forward, .alignright) { float: none; margin: 0 0 12px; text-align: left; color: var(--d-ink-2); font-size: 13px; line-height: 1.4; } /* the
right under a legend would be an empty line */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset > legend + br.clearBoth { display: none; } /* ----------------------------------------------- 3. text inside the forms */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset :is(.information, p, .content) { padding: 0; color: var(--d-ink-2); font-size: 14px; line-height: 1.55; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset :is(.information, .content) { margin: 0 0 12px; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset .information a:not(.ns-btn), :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset .content a:not(.ns-btn) { text-decoration: underline; text-underline-offset: 2px; } /* checkbox rows (privacy, terms, newsletter): the box, then its 14px label */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset input[type="checkbox"] { margin: 0 8px 0 0; vertical-align: middle; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #contentMainWrapper #column-center fieldset label.checkboxLabel { display: inline; height: auto; margin: 0; padding: 0; color: var(--d-ink); font-size: 14px; font-weight: 400; line-height: 1.5; vertical-align: middle; cursor: pointer; } /* newsletter: the template prints the label first and the box after it. The row shows the box first, as the privacy row does (the Tab order is unchanged: one control). The label carries padding-left: 10px inline, hence the !important. */ :is(#loginBody, #createaccountBody) #column-center fieldset div:has(> label.checkboxLabel + input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; } :is(#loginBody, #createaccountBody) #column-center fieldset label.checkboxLabel:has(+ input[type="checkbox"]) { padding-left: 0 !important; } /* the one-line note above the sign-up form and the intro of the cards */ #createaccountBody #column-center #createAcctDefaultLoginLink { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--d-radius); background: var(--d-surface-2); color: var(--d-ink); font-size: 14px; font-weight: 400; line-height: 1.5; } #createaccountBody #column-center #createAcctDefaultLoginLink .note { color: var(--d-ink); } /* ------------------------------------------------------- 4. button rows The theme floats .forward right and .back left (and gives .back 33px / -30px side margins); the floats stay, the margins and the 7px padding go. The look of the buttons inside is the base sheet's. */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center .buttonRow { margin: 0; padding: 0; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center .buttonRow.back { margin-left: 0; margin-right: 0; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center .buttonRow:is(.forward, .back) { margin-top: 4px; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody ) #column-center fieldset .buttonRow:is(.forward, .back) { margin-top: 12px; } /* ------------------------------------------------------------ 5. sign in Returning customers: the fields at 320px; "Forgot your password?" under the password field, then Sign In, both in the fields' column. */ #loginBody #column-center #loginForm { --k-field-w: min(100%, 320px); } #loginBody #column-center #createAccountForm { --k-field-w: min(100%, 280px); } #loginBody #column-center fieldset .buttonRow:is(.important, .nlog) { float: none; clear: both; margin-left: calc(9em + 16px); font-size: 13px; } #loginBody #column-center fieldset .buttonRow.important { margin-top: 0; font-weight: 400; } /* stylesheet_css_buttons.css: .buttonRow a { text-decoration: none !important } */ #loginBody #column-center fieldset .buttonRow.important a { color: var(--d-brand); text-decoration: underline !important; text-underline-offset: 2px; } #loginBody #column-center fieldset .buttonRow.important a:hover { color: var(--d-ink); } #loginBody #column-center fieldset .buttonRow.nlog { margin-top: 16px; padding: 0; } /* the sign-up button sits under the three cards, at the right: the same place the create account page puts its Submit the Information (every form's primary button is on the right) */ #loginBody #column-center #createAccountForm > fieldset > .buttonRow.nlog { float: right; margin: 23px 0 0; /* the same 27px under the last card as on the create account page */ } /* ------------------------------------------------------- 6. create account */ #createaccountBody #column-center { --k-field-w: min(100%, 280px); } /* ------------------------------------------------------------- 7. contact The form sits in a .tie box (a second 1px frame round the card): the frame goes. */ #contactusBody #column-center .tie { border: 0; background: none; } #contactusBody #column-center .tie .tie-indent { padding: 0; } #contactusBody #column-center { --k-field-w: min(100%, 480px); } #contactusBody #column-center #contactUsNoticeContent { margin: 0 0 20px; padding: 0; border: 0; color: var(--d-ink); font-size: 14px; line-height: 1.55; } #contactusBody #column-center #contactUsNoticeContent p { padding: 0 0 4px; } #contactusBody #column-center #contactUsNoticeContent strong { font-size: 16px; } /* the message box sits beside its label (a floated 9em + 16px column, 134px at the label's 13px) in the same 480px column as the fields above it; the calc keeps it from ever being wider than the room left of the label, which would drop it below the label */ #contactusBody #column-center fieldset textarea { width: min(var(--k-field-w), calc(100% - 134px)); } /* ------------------------------------------- 8. password, session timeout Labels without a column (password forgotten): the label above its field. */ #passwordforgottenBody #column-center { --k-field-w: min(100%, 360px); } #passwordforgottenBody #column-center fieldset > label:not(.inputLabel) { display: block; margin: 0 0 6px; padding: 0; color: var(--d-ink); font-size: 13px; font-weight: 600; } #timeoutBody #column-center #timeoutDefaultContent { color: var(--d-ink); font-size: 14px; line-height: 1.55; max-width: var(--d-measure); } #timeoutBody #column-center #timeoutDefaultContent p { padding: 0 0 10px; } #timeoutBody #column-center #timeoutDefaultContent a { text-decoration: underline; text-underline-offset: 2px; } #timeoutBody #column-center .buttonRow.important a { color: var(--d-brand); text-decoration: underline !important; /* .buttonRow a { text-decoration: none !important } */ text-underline-offset: 2px; } /* ======================================================================= CART The table stays a table, its outer border goes: a pale header row, hairlines between the rows, the cover at 6px. */ #shoppingcartBody #column-center #shoppingCartDefault > .forward { padding-top: 2px; font-size: 13px; } #shoppingcartBody #column-center #cartInstructionsDisplay { margin: 0 0 16px; padding: 0; border: 0; } #shoppingcartBody #column-center #cartInstructionsDisplay p { max-width: var(--d-measure); padding: 0; color: var(--d-ink-2); font-size: 13px; line-height: 1.55; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center :is( #cartContentsDisplay, #prevOrders, #orderHistoryHeading, #myAccountOrdersStatus, #downloads ) { width: 100%; margin: 0 0 4px; border: 0; border-collapse: collapse; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center :is( #cartContentsDisplay, #prevOrders, #orderHistoryHeading, #myAccountOrdersStatus, #downloads ) th { padding: 10px; border: 0; background: var(--d-surface-2); color: var(--d-ink); font: 600 var(--d-fs-ui) / 1.3 var(--d-font); text-align: center; text-transform: none; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center :is( #cartContentsDisplay, #prevOrders, #orderHistoryHeading, #myAccountOrdersStatus, #downloads ) th:first-child { border-radius: var(--d-radius) 0 0 var(--d-radius); } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center :is( #cartContentsDisplay, #prevOrders, #orderHistoryHeading, #myAccountOrdersStatus, #downloads ) th:last-child { border-radius: 0 var(--d-radius) var(--d-radius) 0; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center :is( #cartContentsDisplay, #prevOrders, #orderHistoryHeading, #myAccountOrdersStatus, #downloads ) th a { color: var(--d-ink); } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center :is( #cartContentsDisplay, #prevOrders, #orderHistoryHeading, #myAccountOrdersStatus, #downloads ) td { padding: 12px 10px; border: 0; border-bottom: 1px solid var(--d-line); color: var(--d-ink); font: 400 var(--d-fs-body) / 1.4 var(--d-font); text-align: center; vertical-align: middle; } /* product, price and total columns (the product reads left to right, the money right-aligned) */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay :is(th#scProductsHeading, th#ccProductsHeading, td.cartProductDisplay) { text-align: left; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay :is( th#scUnitHeading, th#scTotalHeading, th#ccTotalHeading, td.cartUnitDisplay, td.cartTotalDisplay ) { padding-right: 14px; text-align: right; font-variant-numeric: tabular-nums; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay td.cartTotalDisplay { font-size: 15px; font-weight: 700; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay td.cartQuantity { white-space: nowrap; } /* the product cell: a small cover, the title beside it, the option under the title */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay td.cartProductDisplay > a { display: block; color: var(--d-brand); text-decoration: none; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay .cartImage { float: left; width: 88px; margin: 0 16px 0 0; padding: 0; border: 0; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay .cartImage img { display: block; width: 88px; height: auto; border: 0; border-radius: var(--d-radius-cover); box-shadow: var(--d-cover-edge); } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay .cartProdTitle { display: block; padding: 2px 0 0; border: 0; background: none; color: var(--d-brand); font-size: var(--d-fs-body); font-weight: 600; line-height: 1.35; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay td.cartProductDisplay > a:hover .cartProdTitle { text-decoration: underline; text-underline-offset: 2px; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay td.cartProductDisplay > br.clearBoth { display: none; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay .cartAttribsList { margin: 2px 0 0 104px; text-align: left; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay .cartAttribsList ul { margin: 0; padding: 0; list-style: none; } :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center #cartContentsDisplay .cartAttribsList li { color: var(--d-ink-2); font-size: var(--d-fs-ui); font-weight: 400; line-height: 1.45; } /* quantity: a 56 x 34 field, the row's Update a small secondary button */ #shoppingcartBody #column-center #cartContentsDisplay td.cartQuantity input[type="text"] { width: 56px; height: 34px; margin: 0; padding: 0 6px; text-align: center; } #shoppingcartBody #column-center #cartContentsDisplay td.cartQuantity br { display: none; } #shoppingcartBody #column-center #cartContentsDisplay td.cartQuantityUpdate { padding-left: 0; } #shoppingcartBody #column-center #cartContentsDisplay td.cartQuantityUpdate > :is(.ns-btn, input[type="submit"], button) { min-height: var(--d-btn-h-sm); padding: var(--d-btn-pad-sm); font-size: var(--d-fs-btn-sm); } /* remove: the bin (a link, dims on hover) and its tick box, on one line */ #shoppingcartBody #column-center #cartContentsDisplay td.cartRemoveItemDisplay { white-space: nowrap; } #shoppingcartBody #column-center #cartContentsDisplay td.cartRemoveItemDisplay > a { display: inline-block; vertical-align: middle; border-radius: 4px; } #shoppingcartBody #column-center #cartContentsDisplay td.cartRemoveItemDisplay > a img { display: block; } #shoppingcartBody #column-center #cartContentsDisplay td.cartRemoveItemDisplay > input[type="checkbox"] { margin: 0 0 0 10px; } /* sub-total: a pale panel, right-aligned */ #shoppingcartBody #column-center #cartSubTotal { min-height: 0; /* the theme gives #cartSubTotal min-height: 2.2em */ margin: 16px 0 0; padding: 14px 18px; border-radius: var(--d-radius-lg); background: var(--d-surface-2); color: var(--d-ink); font-size: 16px; font-weight: 700; line-height: 1.3; text-align: right; } #shoppingcartBody #column-center #cartSubTotal strong { font-size: inherit; line-height: inherit; } #shoppingcartBody #column-center #cartSubTotal + br.clearBoth { display: none; } /* Checkout (primary) and Continue Shopping (secondary) are the large pair; the bottom Update Cart repeats the row's own button (same form, same submit), so it goes while a row button works, as on the phone. With only fixed-quantity rows it is the form's only submit and stays. */ #shoppingcartBody #column-center #shoppingCartForm > .buttonRow:is(.forward, .back) { margin-top: 20px; } #shoppingcartBody #column-center #shoppingCartForm > .buttonRow > :is(.ns-btn, input[type="submit"], button) { min-height: var(--d-btn-h-lg); padding: var(--d-btn-pad-lg); font-size: var(--d-fs-btn-lg); } #shoppingcartBody #column-center #shoppingCartForm:has( .cartQuantityUpdate :is(input[type="image"], input[type="submit"], button):not([disabled]) ) > .buttonRow.back:has( > :is(input[type="image"], input[type="submit"], button) ) { display: none; } /* ================================================================ EMPTY CART The orange warning banner (white caps on #f76218, 3.1:1, and a warning GIF) becomes a calm pale panel: nothing is wrong, nothing has been chosen yet. */ #shoppingcartBody #column-center #cartEmptyText { height: auto; margin: 0 0 28px; padding: 32px 24px; border: 0; border-radius: var(--d-radius-lg); background: var(--d-surface-2); background-image: none; color: var(--d-ink); font-size: var(--d-fs-h3); font-weight: 700; line-height: 1.35; letter-spacing: 0; text-align: center; text-transform: none; } /* "new products" under it: the heading and the tiles of the listing pages */ body#shoppingcartBody #column-center #whatsNew h2.centerBoxHeading { margin: 0 0 16px; padding: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.3px; text-align: left; } #shoppingcartBody #column-center #whatsNew .ng200 img { border: 0; border-radius: var(--d-radius-cover); box-shadow: var(--d-cover-edge); } #shoppingcartBody #column-center #whatsNew h3.itemTitle { margin: 10px 0 2px; padding: 0; font-size: var(--d-fs-body); font-weight: 700; line-height: 1.3; } #shoppingcartBody #column-center #whatsNew h3.itemTitle a { color: var(--d-ink); } #shoppingcartBody #column-center #whatsNew h3.itemTitle a:hover { color: var(--d-brand); text-decoration: underline; text-underline-offset: 2px; } #shoppingcartBody #column-center #whatsNew .plart { padding-bottom: 10px; border-bottom: 1px solid var(--d-line); color: var(--d-ink-2); font-size: var(--d-fs-ui); line-height: 1.4; } #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew { margin-bottom: 16px; } #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > a.ns-btn { min-height: var(--d-btn-h-sm); margin: 10px 8px 0 0; padding: var(--d-btn-pad-sm); font-size: var(--d-fs-btn-sm); } /* ================================================================ PAGE TAIL The floats of a page's last button row stay inside the column, and the footer band keeps 24px of white between itself and the last button. */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center .column-center-padding > .centerColumn { display: flow-root; padding-bottom: 24px; } /* stylesheet.css: P, ADDRESS { padding: .5em } puts every address 7px in from its heading */ :is( #loginBody, #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody, #contactusBody, #timeoutBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody, #accounthistoryBody, #shoppingcartBody, #accountBody, #accounthistoryinfoBody ) #column-center address { padding: 0; font-style: normal; } /* ================================================================ CHECKOUT Step 1 (delivery), step 2 (payment), step 3 (confirm). The phone's model, at mouse sizes: a three-part progress bar under each step title, the address as a card, every choice as a bordered row that selects as a whole, the totals as a quiet panel. */ #checkoutshippingBody #column-center #checkoutShippingHeading::after, #checkoutpaymentBody #column-center #checkoutPaymentHeading::after, #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeading::after { content: ""; display: block; max-width: 480px; height: 4px; margin: 14px 0 0; border-radius: 2px; background: linear-gradient( 90deg, var(--d-brand) 0 32.33%, transparent 32.33% 33.83%, var(--d-line) 33.83% 66.17%, transparent 66.17% 67.67%, var(--d-line) 67.67% 100% ); } #checkoutpaymentBody #column-center #checkoutPaymentHeading::after { background: linear-gradient( 90deg, var(--d-brand) 0 32.33%, transparent 32.33% 33.83%, var(--d-brand) 33.83% 66.17%, transparent 66.17% 67.67%, var(--d-line) 67.67% 100% ); } #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeading::after { background: linear-gradient( 90deg, var(--d-brand) 0 32.33%, transparent 32.33% 33.83%, var(--d-brand) 33.83% 66.17%, transparent 66.17% 67.67%, var(--d-brand) 67.67% 100% ); } :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > h2 { margin: 28px 0 12px; } :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > h3 { margin: 24px 0 10px; } /* the delivery / billing address and its Change Address button: one card */ #checkoutshippingBody #column-center #checkoutShipto, #checkoutpaymentBody #column-center #checkoutBillto { display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; float: none; width: auto; margin: 0; padding: 16px 20px; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); box-shadow: var(--d-shadow-1); } #checkoutshippingBody #column-center #checkoutShipto > address, #checkoutpaymentBody #column-center #checkoutBillto > address { flex: 1 1 auto; order: 0; margin: 0; color: var(--d-ink); font-size: var(--d-fs-body); font-style: normal; line-height: 1.55; } #checkoutshippingBody #column-center #checkoutShipto > .buttonRow, #checkoutpaymentBody #column-center #checkoutBillto > .buttonRow { flex: 0 0 auto; order: 1; float: none; margin: 0; } /* the explanation under the card is a caption (it was a 47% float beside it) */ :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .floatingBox.important { float: none; width: auto; margin: 10px 2px 24px; padding: 0; color: var(--d-ink-2); font-size: var(--d-fs-ui); font-weight: 400; line-height: 1.5; } :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .floatingBox.important + br.clearBoth, :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .floatingBox.important + br.clearBoth + br { display: none; } #checkoutshippingBody #column-center #checkoutShippingContentChoose, #checkoutpaymentBody #column-center fieldset.payment > p.important { margin: 0 0 8px; color: var(--d-ink-2); font-size: var(--d-fs-body); font-weight: 400; line-height: 1.5; } /* the step's own next-step note, bottom left, level with its button */ :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutconfirmationBody) #column-center .buttonRow.back { float: left; clear: none; margin: 4px 0 0; color: var(--d-ink-2); font-size: var(--d-fs-ui); line-height: 1.5; } :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutconfirmationBody) #column-center .buttonRow.back strong { color: var(--d-ink); font-size: var(--d-fs-body); } /* ------------------------------------------ shipping and payment choices as rows Each choice is a bordered row and the whole label selects it. The radio is a float pulled into the row's left edge (a float can clear the floated legend; an inline radio of no net width sat beside it); the price floats right before its radio and is pulled inside the row's right edge. Both let clicks through to the label. The chosen row takes the sage border, an inset ring and the pale fill. */ #checkoutshippingBody #contentMainWrapper #column-center fieldset input[type="radio"][name="shipping"], #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="radio"][name="payment"] { position: relative; z-index: 1; left: 16px; float: left; clear: left; width: var(--d-check); height: var(--d-check); margin: 16px -18px 0 0; vertical-align: top; pointer-events: none; } #checkoutshippingBody #contentMainWrapper #column-center fieldset input[type="radio"][name="shipping"] + label, #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="radio"][name="payment"] + label, #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel { display: block; box-sizing: border-box; width: 100%; min-height: 50px; margin: 0 0 6px; padding: 14px 100px 14px 48px; border: 1px solid var(--d-line); border-radius: var(--d-radius); background: var(--d-surface); color: var(--d-ink); font-size: var(--d-fs-body); font-weight: 400; line-height: 20px; cursor: pointer; } @media (hover: hover) { #checkoutshippingBody #contentMainWrapper #column-center fieldset input[type="radio"][name="shipping"] + label:hover, #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="radio"][name="payment"] + label:hover { border-color: var(--d-field-hover); background: var(--d-surface-2); } } #checkoutshippingBody #contentMainWrapper #column-center fieldset input[type="radio"][name="shipping"]:checked + label, #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="radio"][name="payment"]:checked + label, #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel { border-color: var(--d-brand); box-shadow: inset 0 0 0 1px var(--d-brand); background: var(--d-surface-2); font-weight: 600; } #checkoutshippingBody #contentMainWrapper #column-center fieldset input[type="radio"][name="shipping"]:focus-visible + label, #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="radio"][name="payment"]:focus-visible + label { outline: var(--d-focus-w) solid var(--d-focus); outline-offset: var(--d-focus-offset); } /* a store with one payment method prints no radio: its row shows as chosen, no radio space */ #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel { padding-left: 20px; cursor: default; } /* stylesheet_tm.css .price (15px bold) and stylesheet.css .important (5px margin) */ #checkoutshippingBody #column-center fieldset:has(input[name="shipping"]) > .price { position: relative; z-index: 1; right: 20px; margin: 15px 0 0 -300px; color: var(--d-ink); font-size: var(--d-fs-body); font-weight: 700; line-height: 20px; font-variant-numeric: tabular-nums; pointer-events: none; } #checkoutpaymentBody #column-center fieldset.payment > br.clearBoth { display: none; } #checkoutpaymentBody #column-center fieldset.payment .ccinfoText { margin: 6px 0 0 4px; color: var(--d-ink-2); font-size: var(--d-fs-ui); line-height: 1.5; } /* card details under a method: an inset pale panel with its own label column */ #checkoutpaymentBody #column-center fieldset.payment .ccinfo { --k-field-w: min(100%, 280px); display: flow-root; margin: 6px 0 0; padding: 16px 20px 4px; border-radius: var(--d-radius); background: var(--d-surface-2); } #checkoutpaymentBody #column-center fieldset.payment label.inputLabelPayment { float: left; clear: left; display: flex; align-items: center; box-sizing: border-box; width: 11em; height: var(--d-field-h); margin: 0 0 12px; padding: 0 16px 0 0; color: var(--d-ink); font-size: var(--d-fs-ui); font-weight: 600; line-height: 1.4; } #checkoutpaymentBody #column-center fieldset.payment .ccinfo :is(input[type="text"], input[type="tel"], input[type="number"]) { display: inline-block; box-sizing: border-box; width: var(--k-field-w); height: var(--d-field-h); margin: 0 0 12px; vertical-align: top; } #checkoutpaymentBody #column-center fieldset.payment .ccinfo select { display: inline-block; width: auto; min-width: 132px; height: var(--d-field-h); margin: 0 4px 12px 0; vertical-align: top; } #checkoutpaymentBody #column-center fieldset.payment .ccinfo br.clearBoth { clear: both; } /* the coupon / gift certificate card: the code field beside its label, the note above */ #checkoutpaymentBody #column-center fieldset:has(> .gvBal, > label.inputLabel[for^="disc"]) { color: var(--d-ink-2); font-size: var(--d-fs-body); line-height: 1.5; } #checkoutpaymentBody #column-center fieldset > .gvBal { float: none; margin: 0 0 8px; line-height: 1.5; } #checkoutpaymentBody #contentMainWrapper #column-center fieldset > label.inputLabel[for^="disc"] { clear: both; width: 11em; } /* terms: the sentence, then the box and its label */ #checkoutpaymentBody #column-center fieldset:has(> #conditions) > div { margin: 0 0 12px; color: var(--d-ink-2); font-size: var(--d-fs-body); line-height: 1.5; } /* ------------------------------------------------------------- order totals Title left, amount right, at most 360px wide and at the right of its panel; the grand total heavier under a hairline. The payment step's panel is a card (a fieldset); the confirm step's is the cart's pale sub-total panel. */ #checkoutpaymentBody #column-center #checkoutOrderTotals > div, #checkoutconfirmationBody #column-center #orderTotals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; box-sizing: border-box; max-width: 360px; margin: 0 0 0 auto; padding: 5px 0; } #checkoutpaymentBody #column-center #checkoutOrderTotals > div > .lineTitle, #checkoutconfirmationBody #column-center #orderTotals > div > .lineTitle { float: none; order: 0; flex: 1 1 auto; min-width: 0; padding: 0; color: var(--d-ink); font-size: var(--d-fs-body); font-weight: 400; 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(--d-ink); font-size: var(--d-fs-body); font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; text-align: right; } #checkoutpaymentBody #column-center #checkoutOrderTotals > #ottotal, #checkoutconfirmationBody #column-center #orderTotals > #ottotal { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--d-line); } #checkoutpaymentBody #column-center #checkoutOrderTotals > #ottotal > :is(.lineTitle, .totalBox), #checkoutconfirmationBody #column-center #orderTotals > #ottotal > :is(.lineTitle, .totalBox) { font-size: var(--d-fs-h3); font-weight: 700; } #checkoutpaymentBody #column-center #checkoutOrderTotals > br.clearBoth, #checkoutconfirmationBody #column-center #orderTotals > br.clearBoth { display: none; } #checkoutconfirmationBody #column-center #orderTotals { margin: 16px 0 4px; padding: 12px 18px; border-radius: var(--d-radius-lg); background: var(--d-surface-2); } /* --------------------------------------------------- step 3: the review cards Billing and delivery side by side when both exist (a download-only store has billing alone, full width); the comments and the Edit buttons as cards and corner buttons. */ #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) { position: relative; display: flow-root; box-sizing: border-box; float: none; width: auto; margin: 0 0 16px; padding: 16px 20px 18px; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); box-shadow: var(--d-shadow-1); } #checkoutconfirmationBody #column-center #checkoutBillto:has(+ #checkoutShipto) { float: left; width: calc(50% - 8px); min-height: 190px; } #checkoutconfirmationBody #column-center #checkoutBillto + #checkoutShipto { float: right; width: calc(50% - 8px); min-height: 190px; } #checkoutconfirmationBody #column-center #checkoutShipto + br.clearBoth { display: block; clear: both; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > .buttonRow { position: absolute; top: 12px; right: 14px; float: none; margin: 0; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > h2 { float: none; margin: 0 80px 10px 0; font-size: var(--d-fs-h3); line-height: 34px; letter-spacing: 0; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) address { margin: 0; color: var(--d-ink); font-size: var(--d-fs-body); font-style: normal; line-height: 1.55; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) h3 { margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--d-line); color: var(--d-ink-2); font-size: var(--d-fs-ui); font-weight: 600; line-height: 1.4; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) h4 { margin: 0; color: var(--d-ink); font-size: var(--d-fs-body); font-weight: 700; line-height: 1.45; } #checkoutconfirmationBody #column-center #checkoutBillto .important { margin: 8px 0 0; color: var(--d-ink-2); font-size: var(--d-fs-ui); font-weight: 400; line-height: 1.5; } #checkoutconfirmationBody #column-center #order-comments > div:not(.buttonRow) { color: var(--d-ink-2); font-size: var(--d-fs-body); line-height: 1.55; } /* "Shopping Cart Contents" and its Edit on one line, then the table */ #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart { float: left; margin: 8px 0 10px; line-height: 34px; } #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart + .buttonRow { float: right; margin: 8px 0 10px; } #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > .buttonRow > :is(.ns-btn, input[type="submit"], button), #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart + .buttonRow > :is(.ns-btn, input[type="submit"], button) { min-height: var(--d-btn-h-sm); padding: var(--d-btn-pad-sm); font-size: var(--d-fs-btn-sm); } /* no cover on this table: the option sits straight under the title */ #checkoutconfirmationBody #column-center #cartContentsDisplay .cartAttribsList { margin-left: 0; } #checkoutconfirmationBody #column-center #cartContentsDisplay td.cartProductDisplay { font-weight: 600; } #checkoutconfirmationBody #column-center #cartContentsDisplay td.cartQuantity { color: var(--d-ink-2); } #checkoutconfirmationBody #column-center #checkout_confirmation .buttonRow { margin-top: 20px; } /* the step's forward button: Continue is the default size, Confirm Order the large primary */ #checkoutconfirmationBody #column-center #checkout_confirmation .buttonRow.confirm-order > :is(.ns-btn, input[type="submit"], button) { min-height: var(--d-btn-h-lg); padding: var(--d-btn-pad-lg); font-size: var(--d-fs-btn-lg); } :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .buttonRow.forward { margin-top: 20px; } :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .buttonRow.back, #checkoutconfirmationBody #column-center .centerColumn > .buttonRow.back { margin-top: 20px; } /* ----------------------------------------- change an address (steps 1 and 2) The address book as rows: radio and name on the first line, the address under it, the chosen entry in the same sage border and pale fill as the choice rows. */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .instructions { margin: 0 0 20px; color: var(--d-ink-2); font-size: var(--d-fs-body); line-height: 1.5; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .instructions address.back { float: none; margin: 0 0 10px; padding: 14px 18px; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface-2); color: var(--d-ink); font-size: var(--d-fs-body); font-style: normal; line-height: 1.55; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form.group { display: flow-root; margin-bottom: 8px; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .buttonRow.back.clearBoth { margin-top: 16px; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > legend { grid-row: 1; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > br { display: none; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) { position: relative; grid-column: 1; align-self: stretch; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 18px; border: 1px solid var(--d-line); border-radius: var(--d-radius); background: var(--d-surface); cursor: pointer; } @media (hover: hover) { :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected):hover { border-color: var(--d-field-hover); background: var(--d-surface-2); } } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected):has(input:checked) { border-color: var(--d-brand); box-shadow: inset 0 0 0 1px var(--d-brand); background: var(--d-surface-2); } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected):has(input:focus-visible) { outline: var(--d-focus-w) solid var(--d-focus); outline-offset: var(--d-focus-offset); } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) > .back { float: none; margin: 0; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) input[type="radio"] { display: block; margin: 1px 0 0; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) label { display: block; margin: 0; padding: 0; color: var(--d-ink); font-size: var(--d-fs-body); font-weight: 700; line-height: 20px; cursor: pointer; } /* the label covers its whole card, so a click anywhere on it chooses the address */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the address shares its entry's grid cell, under the name, lined up with it */ :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > address { position: relative; z-index: 1; grid-column: 1; align-self: start; margin: 0; padding: 42px 18px 14px 48px; color: var(--d-ink); font-size: var(--d-fs-body); font-style: normal; line-height: 1.5; pointer-events: none; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(1), address:nth-of-type(1)) { grid-row: 2; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(2), address:nth-of-type(2)) { grid-row: 3; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(3), address:nth-of-type(3)) { grid-row: 4; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(4), address:nth-of-type(4)) { grid-row: 5; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(5), address:nth-of-type(5)) { grid-row: 6; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(6), address:nth-of-type(6)) { grid-row: 7; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(7), address:nth-of-type(7)) { grid-row: 8; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(8), address:nth-of-type(8)) { grid-row: 9; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(9), address:nth-of-type(9)) { grid-row: 10; } :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(10), address:nth-of-type(10)) { grid-row: 11; } /* ============================================================== AFTER THE ORDER The thank-you page: its headings are h2.h2dl at 2.2em / -2px (stylesheet.css); the first is the page title, the order number a quiet pill, the downloads a table of the cart's language, the logoff line a pale strip. */ #checkoutsuccessBody #column-center h2.h2dl { margin: 28px 0 10px; color: var(--d-ink); font: 700 var(--d-fs-h2) / 1.25 var(--d-font); letter-spacing: -0.2px; } #checkoutsuccessBody #column-center h2.h2dl:first-of-type { margin: 4px 0 14px; font-size: var(--d-fs-h1); line-height: 1.15; letter-spacing: var(--d-track-h1); } #checkoutsuccessBody #column-center #checkoutSuccessOrderNumber { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: var(--d-radius); background: var(--d-surface-2); color: var(--d-ink); font-size: var(--d-fs-body); font-weight: 700; line-height: 1.4; } #checkoutsuccessBody #column-center #checkoutSuccessMainContent { max-width: var(--d-measure); margin: 0 0 8px; color: var(--d-ink); font-size: var(--d-fs-body); line-height: 1.55; } #checkoutsuccessBody #column-center #checkoutSuccessMainContent p { margin: 0 0 10px; } #checkoutsuccessBody #column-center .centerColumn > p { max-width: var(--d-measure); font-size: var(--d-fs-body); line-height: 1.55; } #checkoutsuccessBody #column-center #csNotifications { margin-top: 20px; } #checkoutsuccessBody #column-center :is(#checkoutSuccessOrderLink, #checkoutSuccessContactLink) { max-width: var(--d-measure); color: var(--d-ink); font-size: var(--d-fs-body); line-height: 1.55; } #checkoutsuccessBody #column-center #checkoutSuccessContactLink { margin-top: 4px; } #checkoutsuccessBody #column-center #checkoutSuccessThanks { margin: 24px 0 8px; color: var(--d-brand); text-align: left; } #checkoutsuccessBody #column-center #checkoutSuccessLogoff { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0 0; padding: 12px 18px; border-radius: var(--d-radius-lg); background: var(--d-surface-2); color: var(--d-ink); font-size: var(--d-fs-body); line-height: 1.5; } #checkoutsuccessBody #column-center #checkoutSuccessLogoff > .buttonRow { float: none; margin: 0; } /* ------------------------------------------------------------------ downloads The files of an order (the thank-you page and the order details): the cart's table, the name a link, the Download button the small primary. */ :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #headingDownloads { margin: 24px 0 10px; color: var(--d-ink); font: 700 var(--d-fs-h3) / 1.35 var(--d-font); } :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #downloads :is(th, td):is( .downloadProductNameLink, .downloadProductName, .downloadFilename, #dlFileNameHeading, #dlFilenameHeading ) { text-align: left; } :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #downloads :is(.downloadFilesize, .downloadExpiry, .downloadCounts) { color: var(--d-ink-2); font-size: var(--d-fs-ui); font-variant-numeric: tabular-nums; white-space: nowrap; } :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #downloads .downloadFilename { overflow-wrap: anywhere; font-size: var(--d-fs-ui); } :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #downloads :is(.downloadProductNameLink, .downloadProductName) { font-weight: 600; } :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #downloads .downloadProductNameLink a { color: var(--d-brand); text-decoration: none; } :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #downloads td.downloadButton { white-space: nowrap; } :is(#checkoutsuccessBody, #accounthistoryinfoBody) #column-center #downloads td.downloadButton > a.ns-btn { min-height: var(--d-btn-h-sm); padding: var(--d-btn-pad-sm); font-size: var(--d-fs-btn-sm); } /* ================================================================== MY ACCOUNT The order table keeps its columns in the cart's language. The two link groups sit side by side, each a hairline list whose rows have a chevron and a pale hover. */ #accountBody #column-center #accountDefault > p.forward { margin: 0; padding-top: 6px; font-size: var(--d-fs-ui); } #accountBody #column-center #accountDefault > p.forward + br.clearBoth { display: none; } #accountBody #column-center #accountDefault #previous-orders { margin: 20px 0 12px; } #accountBody #column-center #prevOrders td:is( .accountOrderDate, .accountOrderId, .accountOrderAddress, .accountOrderStatus ) { text-align: left; } #accountBody #column-center #prevOrders tr.tableHeading th:nth-child(-n + 4) { text-align: left; } #accountBody #column-center #prevOrders tr.tableHeading th:nth-child(5) { text-align: right; padding-right: 14px; } #accountBody #column-center #prevOrders td.accountOrderTotal { padding-right: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } #accountBody #column-center #prevOrders td.accountOrderId { font-weight: 600; } #accountBody #column-center #prevOrders td.accountOrderAddress address { font-style: normal; line-height: 1.4; } #accountBody #column-center #prevOrders td.accountOrderViewButton a.ns-btn { min-height: var(--d-btn-h-sm); padding: var(--d-btn-pad-sm); font-size: var(--d-fs-btn-sm); } #accountBody #column-center #accountDefault #accountLinksWrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-auto-flow: column; column-gap: 24px; float: none; width: auto; margin: 8px 0 0; padding: 0; border: 0; } #accountBody #column-center #accountDefault #accountLinksWrapper > h2 { margin: 20px 0 10px; } #accountBody #column-center #accountDefault #accountLinksWrapper ul.list { align-self: start; margin: 0 0 20px; padding: 0; overflow: hidden; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); list-style: none; background: var(--d-surface); } #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li { margin: 0; padding: 0; line-height: 1.4; } #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li + li { border-top: 1px solid var(--d-line); } #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; box-sizing: border-box; padding: 10px 18px; color: var(--d-ink); font-size: var(--d-fs-body); font-weight: 600; text-decoration: none; } #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li a::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border: solid var(--d-ink-2); border-width: 2px 2px 0 0; transform: rotate(45deg); } @media (hover: hover) { #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li a:hover { background: var(--d-surface-2); color: var(--d-brand); } #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li a:hover::after { border-color: var(--d-brand); } } /* inside a list the ring sits inside the row, so the rounded list does not clip it */ #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li a:focus-visible { outline-offset: -3px; } :is(#accountBody, #checkoutsuccessBody) #column-center #sendSpendWrapper { clear: both; margin: 0 0 20px; padding: 16px 20px; border: 0; border-radius: var(--d-radius-lg); background: var(--d-surface-2); color: var(--d-ink); font-size: var(--d-fs-body); line-height: 1.5; } /* ---------------------------------------------------------- order history list One card per order: the status as a pale chip, then date and buyer, the count and cost, and the View button, in three columns. */ #accounthistoryBody #column-center fieldset { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 0 24px; } #accounthistoryBody #column-center fieldset > br.clearBoth { display: none; } #accounthistoryBody #column-center fieldset > .notice { grid-column: 1 / -1; grid-row: 1; justify-self: start; float: none; margin: 0 0 10px; padding: 3px 10px; border-radius: var(--d-radius); background: var(--d-surface-2); color: var(--d-ink); font-size: var(--d-fs-ui); font-weight: 600; line-height: 1.4; } #accounthistoryBody #column-center fieldset > .content { float: none; margin: 0; line-height: 1.6; } #accounthistoryBody #column-center fieldset > .content.forward { grid-column: 3; align-self: center; text-align: right; } #accounthistoryBody #column-center fieldset > .content.forward .ns-btn { min-height: var(--d-btn-h-sm); padding: var(--d-btn-pad-sm); font-size: var(--d-fs-btn-sm); } #accounthistoryBody #column-center fieldset .buttonRow { margin: 0; } #accounthistoryBody #column-center > .column-center-padding > .centerColumn > .buttonRow.forward { margin-top: 8px; } /* ============================================================== ORDER DETAILS Downloads (above), the products table in the cart's language, the totals pair at the right, the status table, then the delivery and billing cards. */ #accounthistoryinfoBody #column-center #accountHistInfo > div.forward { margin: 24px 0 0; padding-top: 7px; color: var(--d-ink-2); font-size: var(--d-fs-ui); } #accounthistoryinfoBody #column-center #accountHistInfo > div.forward + br.clearBoth { display: none; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryDetailedOrder { margin: 24px 0 12px; } #accounthistoryinfoBody #column-center #accountHistInfo :is(#orderHistoryStatus, #myAccountOrdersStatus) { margin-top: 0; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryStatus { margin: 28px 0 12px; } #accounthistoryinfoBody #column-center #accountHistInfo hr { display: none; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryHeading :is( .accountQuantityDisplay, .accountProductDisplay, #myAccountQuantity, #myAccountProducts ) { text-align: left; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryHeading .accountQuantityDisplay { color: var(--d-ink-2); white-space: nowrap; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryHeading .accountProductDisplay > a { color: var(--d-brand); font-weight: 600; text-decoration: none; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryHeading .orderAttribsList { margin: 2px 0 0; padding: 0; list-style: none; color: var(--d-ink-2); font-size: var(--d-fs-ui); line-height: 1.45; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryHeading :is(.accountTotalDisplay, #myAccountTotal) { padding-right: 14px; font-variant-numeric: tabular-nums; text-align: right; } #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryHeading .accountTotalDisplay { font-weight: 700; } #accounthistoryinfoBody #column-center #accountHistInfo #myAccountOrdersStatus :is(th, td) { text-align: left; } #accounthistoryinfoBody #column-center #accountHistInfo #myAccountOrdersStatus td:first-child { color: var(--d-ink-2); white-space: nowrap; } /* totals: amount and title are printed as a pair, both floated right; two columns, the title left and the amount right, "dense" fills each title in beside its amount */ #accounthistoryinfoBody #column-center #accountHistInfo #orderTotals { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 6px 0; box-sizing: border-box; max-width: 396px; margin: 16px 0 0 auto; padding: 12px 18px; border-radius: var(--d-radius-lg); background: var(--d-surface-2); } #accounthistoryinfoBody #column-center #accountHistInfo #orderTotals br { display: none; } #accounthistoryinfoBody #column-center #accountHistInfo #orderTotals > div { float: none; width: auto; margin: 0; padding: 0; color: var(--d-ink); font-size: var(--d-fs-body); line-height: 1.4; } #accounthistoryinfoBody #column-center #accountHistInfo #orderTotals .lineTitle { grid-column: 1; text-align: left; } #accounthistoryinfoBody #column-center #accountHistInfo #orderTotals .amount { grid-column: 2; padding-left: 16px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } #accounthistoryinfoBody #column-center #accountHistInfo #orderTotals > .lineTitle:nth-last-child(2), #accounthistoryinfoBody #column-center #accountHistInfo #orderTotals > .amount:nth-last-child(3) { padding-top: 10px; border-top: 1px solid var(--d-line); font-size: var(--d-fs-h3); font-weight: 700; } #accounthistoryinfoBody #column-center #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) { display: flow-root; box-sizing: border-box; float: none; width: auto; margin: 24px 0 0; padding: 16px 20px 18px; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); box-shadow: var(--d-shadow-1); } #accounthistoryinfoBody #column-center #accountHistInfo #myAccountShipInfo:has(+ #myAccountPaymentInfo) { float: left; width: calc(50% - 8px); } #accounthistoryinfoBody #column-center #accountHistInfo #myAccountShipInfo + #myAccountPaymentInfo { float: right; width: calc(50% - 8px); } #accounthistoryinfoBody #column-center #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) h3 { margin: 0 0 8px; } #accounthistoryinfoBody #column-center #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) h4 { margin: 12px 0 2px; padding-top: 12px; border-top: 1px solid var(--d-line); color: var(--d-ink-2); font-size: var(--d-fs-ui); font-weight: 600; } #accounthistoryinfoBody #column-center #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) :is(address, div) { margin: 0; padding: 0; color: var(--d-ink); font-size: var(--d-fs-body); font-style: normal; line-height: 1.55; } /* ================================================================ ADDRESS BOOK Each entry: its name, the address, Edit and Delete as small secondary buttons; entries split by a hairline. */ :is(#addressbookBody, #createaccountsuccessBody) #column-center fieldset h3.addressBookDefaultName { margin: 0 0 6px; font-size: var(--d-fs-h3); } :is(#addressbookBody, #createaccountsuccessBody) #column-center fieldset h3.addressBookDefaultName small { color: var(--d-ink-2); font-size: var(--d-fs-ui); font-weight: 400; } :is(#addressbookBody, #createaccountsuccessBody) #column-center fieldset br.clearBoth + h3.addressBookDefaultName { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--d-line); } :is(#addressbookBody, #createaccountsuccessBody) #column-center fieldset address { margin: 0; color: var(--d-ink); font-size: var(--d-fs-body); font-style: normal; line-height: 1.55; } :is(#addressbookBody, #createaccountsuccessBody) #column-center fieldset .buttonRow.forward { display: flex; gap: 8px; margin: 10px 0 0; } :is(#addressbookBody, #createaccountsuccessBody) #column-center fieldset .buttonRow.forward .ns-btn { min-height: var(--d-btn-h-sm); padding: var(--d-btn-pad-sm); font-size: var(--d-fs-btn-sm); } #addressbookBody #column-center .instructions { max-width: var(--d-measure); margin: 0 0 16px; color: var(--d-ink-2); font-size: var(--d-fs-body); line-height: 1.55; } #addressbookBody #column-center .centerColumn > .buttonRow.forward { margin-top: 4px; } /* ===================================================================== MOTION Colour only, 120ms, and only for visitors who have not asked for less. */ @media (prefers-reduced-motion: no-preference) { #checkoutshippingBody #contentMainWrapper #column-center fieldset input[type="radio"][name="shipping"] + label, #checkoutpaymentBody #contentMainWrapper #column-center fieldset.payment input[type="radio"][name="payment"] + label, :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) { transition: border-color var(--d-dur) linear, background-color var(--d-dur) linear, box-shadow var(--d-dur) linear; } #accountBody #column-center #accountDefault #accountLinksWrapper ul.list li a, #shoppingcartBody #column-center #cartContentsDisplay td.cartRemoveItemDisplay > a img { transition: background-color var(--d-dur) linear, color var(--d-dur) linear, opacity var(--d-dur) linear; } } @media (hover: hover) { #shoppingcartBody #column-center #cartContentsDisplay td.cartRemoveItemDisplay > a:hover img { opacity: 0.7; } } }