/* ==========================================================================
   Desktop refresh, theme9star (9starmedia.com): COMMERCE group. 2026-10-25.
   docs/DESKTOP-REFRESH-9STAR.md section 8 (K.*).

   Covers: the shopping cart (filled and empty), sign in, create account, contact us,
   password forgotten, session timeout, and the account, address book and checkout
   pages (steps 1 to 3, change address, thank-you). Those logged-in pages are styled
   from their markup (stylesheet_zz_shop.css and the templates): they need a login.

   DESKTOP ONLY. Every rule sits inside @media (min-width: 1024px): phones and tablets
   (1023px and below) are untouched, the mobile sheets (stylesheet_zz_9star_m_*.css)
   own them. This file loads after stylesheet_zz_shop.css (alphabetical order), which
   styled these pages on desktop in the old charcoal-head, amber-tab language; the rules
   here carry one id more (body id + #column-center) so they win without !important.
   The few !important are marked: each beats an existing !important or an inline style.

   Direction (the mobile sheets, mouse-sized): fieldsets are white 14px cards with a
   17px ink legend notched into the top edge (no amber tabs); fields 38px, radius 10, a
   3:1 edge; amber is a fill only (buttons, checkbox accent), the brand as text or edge
   is #8a6400; the cart keeps its table with a soft head and a soft total panel; chosen
   rows (shipping, payment, address) take a #8a6400 edge on a pale amber wash.
   Tokens: var(--d-*) from stylesheet_zzz_d_tokens.css. Local tokens (--k-*) below.
   Checkboxes and radios are drawn by the base sheet (position: relative at (1,1,1)): rules here
   that must change a radio's position carry the body id.
   Buttons and the generic field look belong to stylesheet_zzz_d_base.css: this file
   only sizes and places them, and sets the field look where a zz_shop or theme rule
   would otherwise beat the base sheet (stated at each rule).
   ========================================================================== */

@media (min-width: 1024px) {
  /* ----------------------------------------------------------------------
     0. Local tokens and a safety net for zz_shop's own tokens
     ---------------------------------------------------------------------- */
  #column-center {
    --k-label-w: 150px; /* floated label column: sign in, create account, contact */
    --k-field-w: 360px; /* text fields */
    --k-field-w-wide: 420px; /* contact: name, email, telephone */
    --k-textarea-w: 560px; /* contact: message */
    --k-select-w: 280px; /* country, state */
    --k-row: 12px; /* space under a form row */
    --k-caret:
      linear-gradient(45deg, transparent 50%, var(--d-ink-2) 50%),
      linear-gradient(135deg, var(--d-ink-2) 50%, transparent 50%);
  }

  /* zz_shop reads --ns-* for greys, ink and amber. On these pages the muted grey (#7b7d7c,
     4.14:1) and amber text (2.08:1) fail AA, so any zz_shop rule not restyled below still
     lands on compliant values. Scoped to the commerce pages only. */
  body:is(
    #shoppingcartBody,
    #checkoutshippingBody,
    #checkoutshippingaddressBody,
    #checkoutpaymentBody,
    #checkoutpaymentaddressBody,
    #checkoutconfirmationBody,
    #checkoutsuccessBody,
    #accountBody,
    #accounthistoryBody,
    #accounthistoryinfoBody,
    #addressbookBody,
    #addressbookprocessBody,
    #accounteditBody,
    #accountpasswordBody,
    #accountnewslettersBody,
    #accountnotificationsBody,
    #gvsendBody,
    #loginBody,
    #createaccountBody,
    #contactusBody,
    #passwordforgottenBody,
    #passwordresetBody,
    #timeoutBody
  ) {
    --ns-ink: var(--d-ink);
    --ns-text: var(--d-ink);
    --ns-head: var(--d-ink);
    --ns-muted: var(--d-ink-2);
    --ns-line: var(--d-line);
    --ns-soft: var(--d-surface-2);
    --ns-amber: var(--d-brand-text);
    --ns-amber-wash: var(--d-brand-soft);
    --ns-rust: var(--d-error-ink);
  }

  /* ----------------------------------------------------------------------
     1. Headings (zz_shop: 44px / -2px h1, 15px capitals h2 and h3)
     ---------------------------------------------------------------------- */
  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody
    )
    #column-center
    .centerColumn
    h1,
  body#checkoutsuccessBody
    #column-center
    .centerColumn
    > h2.h2dl:first-of-type {
    margin: 0 0 16px;
    padding: 0;
    color: var(--d-ink);
    font: 700 var(--d-fs-h1) / 1.15 var(--d-font);
    letter-spacing: var(--d-track-h1);
    text-align: left;
    text-transform: none;
  }

  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody
    )
    #column-center
    .centerColumn
    h2 {
    margin: 28px 0 12px;
    padding: 0;
    color: var(--d-ink);
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
    text-transform: none;
  }

  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody
    )
    #column-center
    .centerColumn
    h3:not(.addressBookDefaultName) {
    margin: 20px 0 8px;
    padding: 0;
    color: var(--d-ink);
    font: 700 var(--d-fs-h3) / 1.35 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
  }

  /* the first heading under the page title sits closer to it */
  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookBody
    )
    #column-center
    .centerColumn
    h1
    + h2,
  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    .centerColumn
    h1
    + .messageStackError
    + h2 {
    margin-top: 8px;
  }

  /* ----------------------------------------------------------------------
     2. Cards: every fieldset on the commerce and form pages (K.frame)
     stylesheet_main.css and zz_shop set the fieldset margin with !important (24px and
     20px), and their legend's bottom margin too: hence the !important on both margins.
     ---------------------------------------------------------------------- */
  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody,
      #loginBody,
      #createaccountBody,
      #contactusBody,
      #passwordforgottenBody,
      #passwordresetBody,
      #timeoutBody
    )
    #column-center
    fieldset {
    box-sizing: border-box;
    min-width: 0;
    margin: 0 0 20px !important; /* beats the !important margins of stylesheet_main.css and zz_shop */
    padding: 20px 24px 24px;
    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);
  }

  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody,
      #loginBody,
      #createaccountBody,
      #contactusBody,
      #passwordforgottenBody,
      #passwordresetBody,
      #timeoutBody
    )
    #column-center
    fieldset
    > legend {
    float: none;
    box-sizing: border-box;
    width: auto;
    margin: 0 0 0 -6px !important; /* beats zz_shop's 14px !important; -6px lines the text up with the card's content */
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--d-ink);
    font: 700 var(--d-fs-h3) / 1.35 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
  }

  /* a group of groups (sign in's "New?" form, create account's "Your Personal Details"):
     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;
    box-shadow: none;
  }

  :is(#loginBody, #createaccountBody)
    #column-center
    fieldset:has(> fieldset)
    > legend {
    margin: 0 0 12px !important; /* same !important as above */
    padding: 0;
    font-size: var(--d-fs-h2);
    line-height: 1.25;
    letter-spacing: -0.2px;
  }

  /* the gift-certificate and thank-you panels hold a bare fieldset (zz_shop resets it) */
  body:is(#checkoutsuccessBody, #accountBody)
    #column-center
    :is(#sendSpendWrapper, #checkoutSuccessGv)
    fieldset {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    margin: 0 !important; /* zz_shop's own !important */
  }

  body:is(#checkoutsuccessBody, #accountBody)
    #column-center
    :is(#sendSpendWrapper, #checkoutSuccessGv)
    fieldset
    > legend {
    margin: 0 0 8px !important; /* zz_shop's legend margin is !important */
    padding: 0;
  }

  /* required note and helper text */
  body:is(
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #loginBody,
      #createaccountBody,
      #contactusBody,
      #passwordforgottenBody
    )
    #column-center
    .alert.forward,
  :is(#contactusBody) #column-center fieldset > .alert.alignright {
    margin: 0 0 8px;
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
  }

  :is(
      #loginBody,
      #createaccountBody,
      #contactusBody,
      #passwordforgottenBody,
      #passwordresetBody,
      #timeoutBody
    )
    #column-center
    fieldset
    .alert:not(.forward):not(.alignright) {
    margin: 0 0 0 6px;
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 400;
  }

  /* intro and helper copy inside the cards */
  :is(#loginBody, #createaccountBody) #column-center fieldset .information,
  #passwordforgottenBody #column-center #passwordForgottenMainContent,
  #timeoutBody #column-center #timeoutDefaultContent {
    margin: 0 0 12px;
    padding: 0;
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  #timeoutBody #column-center #timeoutDefaultContent p {
    margin: 0 0 10px;
    padding: 0;
  }

  #createaccountBody #column-center h4#createAcctDefaultLoginLink {
    margin: 0 0 20px;
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    font-weight: 400;
    line-height: var(--d-lh-body);
  }

  #createaccountBody #column-center h4#createAcctDefaultLoginLink .note {
    color: var(--d-ink);
    font-weight: 700;
  }

  :is(#loginBody, #createaccountBody) #column-center fieldset .information a {
    color: var(--d-brand-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ----------------------------------------------------------------------
     3. Floated-label forms: sign in, create account, contact, forgotten password,
        timeout. The label column stays where the theme floats it (stylesheet.css:
        9em floated left); fields sit beside it.
     ---------------------------------------------------------------------- */
  :is(
      #loginBody,
      #createaccountBody,
      #contactusBody,
      #passwordforgottenBody,
      #timeoutBody
    )
    #column-center
    fieldset
    label.inputLabel,
  #passwordforgottenBody #column-center fieldset > label:not([class]) {
    float: left;
    box-sizing: border-box;
    width: var(--k-label-w);
    height: var(--d-field-h);
    margin: 0 0 var(--k-row);
    padding: 0 12px 0 0;
    color: var(--d-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: var(--d-field-h);
    text-align: left;
    white-space: nowrap;
  }

  /* create account prints a line break straight after the "Your Details" legend: it shows
     as a blank row above the first field, so it goes. The floated card rows end one row
     margin (12px) above the card's bottom padding, so that padding is trimmed to match. */
  :is(#loginBody, #createaccountBody)
    #column-center
    fieldset
    > legend
    + br.clearBoth {
    display: none;
  }

  :is(#loginBody, #createaccountBody, #passwordforgottenBody, #timeoutBody)
    #column-center
    fieldset:has(> label.inputLabel) {
    padding-bottom: 12px;
  }

  /* the text fields; the theme's id rules (stylesheet_main.css: 70% wide) and the sign in
     page's body#loginBody rules (20px high, tm.css:456) are beaten by the extra id */
  :is(#loginBody, #createaccountBody, #passwordforgottenBody, #timeoutBody)
    #column-center
    fieldset
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"]
    ),
  #contactusBody
    #column-center
    fieldset
    :is(input[type="text"], input[type="email"], input[type="tel"]) {
    display: inline-block;
    box-sizing: border-box;
    width: min(var(--k-field-w), calc(100% - var(--k-label-w)));
    max-width: none;
    height: var(--d-field-h);
    margin: 0 0 var(--k-row);
    padding: 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
    vertical-align: top;
  }

  #contactusBody
    #column-center
    fieldset
    :is(input[type="text"], input[type="email"], input[type="tel"]) {
    width: min(var(--k-field-w-wide), calc(100% - var(--k-label-w)));
  }

  #createaccountBody #column-center fieldset input#postcode,
  #loginBody #column-center fieldset input#postcode {
    width: 120px; /* 70px (stylesheet_main.css) cut a UK or Canadian code */
  }

  /* selects: the caret is the base sheet's, repeated because tm.css fixes the sign in page's
     selects at 26px high with !important and zz_shop-style shorthands drop background-image */
  :is(#loginBody, #createaccountBody, #passwordforgottenBody, #timeoutBody)
    #column-center
    fieldset
    select {
    display: inline-block;
    box-sizing: border-box;
    width: min(var(--k-select-w), calc(100% - var(--k-label-w) - 24px));
    margin: 0 0 var(--k-row);
    padding: 0 36px 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
    vertical-align: top;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--k-caret);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }

  #loginBody #column-center fieldset select {
    height: var(
      --d-field-h
    ) !important; /* tm.css:463 sets height: 26px !important on #loginBody selects */
  }

  :is(#createaccountBody, #passwordforgottenBody, #timeoutBody)
    #column-center
    fieldset
    select {
    height: var(--d-field-h);
  }

  /* the star printed after a select */
  :is(#loginBody, #createaccountBody) #column-center fieldset select + .alert {
    display: inline-block;
    margin: 0 0 0 6px;
    line-height: var(--d-field-h);
    vertical-align: top;
  }

  /* contact: the message box */
  #contactusBody #column-center fieldset textarea {
    display: inline-block;
    box-sizing: border-box;
    width: min(var(--k-textarea-w), calc(100% - var(--k-label-w)));
    max-width: none;
    height: auto;
    min-height: 140px;
    margin: 0 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.5 var(--d-font);
    vertical-align: top;
    resize: vertical;
  }

  #contactusBody #column-center .tie {
    border: 0;
    background: none;
  }
  #contactusBody #column-center .tie .tie-indent {
    padding: 0;
  }

  #contactusBody #column-center #contactUsNoticeContent {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  #contactusBody #column-center #contactUsNoticeContent p {
    margin: 0 0 6px;
    padding: 0;
  }
  #contactusBody #column-center #contactUsNoticeContent strong {
    font-size: 17px;
    font-weight: 700;
  }

  /* focus on a field: edge and halo (F.focus), the outline kept transparent for forced colours */
  body:is(
      #loginBody,
      #createaccountBody,
      #contactusBody,
      #passwordforgottenBody,
      #passwordresetBody,
      #timeoutBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #gvsendBody
    )
    #column-center
    fieldset
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"],
      select,
      textarea
    ):is(:focus, :focus-visible) {
    border-color: var(--d-brand-text);
    box-shadow: 0 0 0 3px var(--d-brand-ring);
    outline: 2px solid transparent;
    outline-offset: 0;
  }

  /* checkbox rows: privacy statement and newsletter (the box itself is drawn by the base sheet) */
  :is(#loginBody, #createaccountBody)
    #column-center
    fieldset
    input[type="checkbox"] {
    margin: 0 8px 0 0;
  }

  :is(#loginBody, #createaccountBody)
    #column-center
    fieldset
    label.checkboxLabel {
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--d-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    vertical-align: middle;
    cursor: pointer;
  }

  /* the newsletter row prints its label first: the box comes first here, under the fields.
     !important on the label's padding beats its inline padding-left: 10px. */
  :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;
    margin-left: var(--k-label-w);
  }

  :is(#loginBody, #createaccountBody)
    #column-center
    fieldset
    div
    > label.checkboxLabel
    + input[type="checkbox"] {
    margin: 0 8px 0 0;
  }

  :is(#loginBody, #createaccountBody)
    #column-center
    fieldset
    div
    > label.checkboxLabel:has(+ input[type="checkbox"]) {
    padding-left: 0 !important;
  }

  /* ----------------------------------------------------------------------
     4. Button rows: place them; the look belongs to the base sheet
     ---------------------------------------------------------------------- */
  body:is(
      #loginBody,
      #createaccountBody,
      #contactusBody,
      #passwordforgottenBody,
      #passwordresetBody,
      #timeoutBody
    )
    #column-center
    .buttonRow {
    margin: 0;
    padding: 0;
    line-height: var(--d-btn-h);
  }

  /* sign in: the button under the fields' left edge, "Forgot your password?" at their right
     edge, on one line (the link comes first in the markup, so it floats right) */
  #loginBody #column-center #loginForm fieldset > .buttonRow {
    float: left;
    clear: none;
    margin-top: 8px;
  }

  #loginBody #column-center #loginForm fieldset > .buttonRow.nlog {
    margin-left: var(--k-label-w);
  }

  #loginBody #column-center #loginForm fieldset > .buttonRow.important {
    float: right;
    margin-right: max(0px, calc(100% - var(--k-label-w) - var(--k-field-w)));
  }

  /* create account on the sign in page: Submit under the cards */
  #loginBody #column-center #createAccountForm fieldset > .buttonRow.nlog {
    clear: both;
    float: left;
    margin-top: 4px;
  }

  #createaccountBody #column-center #createAccountForm > .buttonRow.forward,
  #contactusBody #column-center .tie-indent form > .buttonRow,
  #passwordforgottenBody #column-center form > .buttonRow,
  #timeoutBody #column-center form > .buttonRow {
    margin-top: 4px;
  }

  /* "Forgot your password?" and the other quiet links in forms */
  :is(#loginBody, #timeoutBody) #column-center .buttonRow.important a {
    color: var(--d-brand-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* sign in's "Forgot" link inside the card, and the timeout page's, on one line with the button */
  :is(#loginBody, #timeoutBody) #column-center .buttonRow.important {
    font-weight: 600;
  }

  /* ----------------------------------------------------------------------
     5. zz_shop's address and account forms (label beside field in a 150px column)
     ---------------------------------------------------------------------- */
  body:is(
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody
    )
    #column-center
    .centerColumn
    fieldset
    label.inputLabel {
    padding: 0 12px 0 0; /* stylesheet.css gives LABEL.inputLabel 10px on the left: the text lines up with the legend */
    color: var(--d-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
  }

  /* label column and field column butt up, as on the sign in page (fields start 150px in) */
  body:is(
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody
    )
    #column-center
    .centerColumn
    fieldset:has(> label.inputLabel) {
    grid-template-columns: var(--k-label-w) minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--k-row);
  }

  /* zz_shop fixes these fields at 36px with a #cfcdca edge (1.59:1) and background: #fff,
     which also drops a select's caret: the field look is set again here (spec F.field) */
  body:is(
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody
    )
    #column-center
    .centerColumn
    fieldset
    :is(
      input[type="text"],
      input[type="email"],
      input[type="tel"],
      input[type="password"],
      select
    ) {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--k-field-w);
    height: var(--d-field-h);
    padding: 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
  }

  body:is(
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody
    )
    #column-center
    .centerColumn
    fieldset
    select {
    max-width: var(--k-select-w);
    padding-right: 36px;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--k-caret);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }

  /* order comments (shipping and payment steps) */
  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    .centerColumn
    textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.5 var(--d-font);
    resize: vertical;
  }

  /* the card's own box sets the comments card */
  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    .centerColumn
    fieldset
    textarea {
    display: block;
  }

  /* payment page: coupon and gift certificate fields, card details */
  #checkoutpaymentBody
    #column-center
    .centerColumn
    fieldset
    input[type="text"] {
    box-sizing: border-box;
    width: 240px;
    height: var(--d-field-h);
    margin: 0 0 0 8px;
    padding: 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
  }

  /* zz_shop's amber focus outline (about 2:1 on white) */
  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody
    )
    #column-center
    .centerColumn
    :is(input, select, textarea):focus-visible {
    outline: 2px solid transparent;
    outline-offset: 0;
    border-color: var(--d-brand-text);
    box-shadow: 0 0 0 3px var(--d-brand-ring);
  }

  body:is(
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookBody,
      #addressbookprocessBody,
      #checkoutshippingBody,
      #checkoutpaymentBody
    )
    #column-center
    .centerColumn
    :is(.instructions, #checkoutShippingContentChoose) {
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.5;
  }

  #checkoutpaymentBody #column-center .centerColumn fieldset p {
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.5;
  }

  /* ----------------------------------------------------------------------
     6. Tables: cart, order confirmation, thank-you downloads, account orders (K.table)
     ---------------------------------------------------------------------- */
  body:is(
      #shoppingcartBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryinfoBody
    )
    #column-center
    .centerColumn
    table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 16px;
    background: var(--d-surface);
  }

  body:is(
      #shoppingcartBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryinfoBody
    )
    #column-center
    .centerColumn
    table
    th {
    padding: 10px 12px;
    border: 0;
    background: var(--d-surface-2);
    color: var(--d-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
  }

  body:is(
      #shoppingcartBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryinfoBody
    )
    #column-center
    .centerColumn
    table
    th:first-child {
    border-radius: var(--d-radius) 0 0 var(--d-radius);
  }
  body:is(
      #shoppingcartBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryinfoBody
    )
    #column-center
    .centerColumn
    table
    th:last-child {
    border-radius: 0 var(--d-radius) var(--d-radius) 0;
  }

  body:is(
      #shoppingcartBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryinfoBody
    )
    #column-center
    .centerColumn
    table
    td {
    padding: 14px 12px;
    border: 0;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: 1.45;
    vertical-align: middle;
  }

  body:is(
      #shoppingcartBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryinfoBody
    )
    #column-center
    .centerColumn
    table
    :is(
      #scUnitHeading,
      #scTotalHeading,
      #ccTotalHeading,
      .cartUnitDisplay,
      .cartTotalDisplay,
      .accountOrderTotal,
      .alignRight
    ) {
    text-align: right;
  }

  body:is(#shoppingcartBody, #checkoutconfirmationBody)
    #column-center
    .centerColumn
    table
    .cartTotalDisplay,
  body#accountBody #column-center #prevOrders .accountOrderTotal {
    color: var(--d-ink);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    white-space: nowrap;
  }

  body:is(#shoppingcartBody, #checkoutconfirmationBody)
    #column-center
    .centerColumn
    table
    .cartUnitDisplay {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ----------------------------------------------------------------------
     7. The cart
     ---------------------------------------------------------------------- */
  #shoppingcartBody #column-center #shoppingCartDefault > .forward {
    padding-top: 10px;
    font-size: 13px;
    font-weight: 600;
  }
  #shoppingcartBody #column-center #shoppingCartDefault > .forward a {
    color: var(--d-brand-text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  #shoppingcartBody #column-center #cartInstructionsDisplay {
    max-width: var(--d-measure);
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    color: var(--d-ink-2);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  #shoppingcartBody #column-center #cartInstructionsDisplay p {
    padding: 0;
  }

  /* column widths: quantity, price, total, remove */
  #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity {
    width: 88px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
  }
  #shoppingcartBody #column-center #cartContentsDisplay #scQuantityHeading {
    text-align: center;
  }
  #shoppingcartBody
    #column-center
    #cartContentsDisplay
    :is(.cartUnitDisplay, .cartTotalDisplay) {
    width: 84px;
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartRemoveItemDisplay {
    width: 84px;
    padding-right: 8px;
    text-align: right;
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartProductDisplay {
    text-align: left;
  }

  /* quantity: 56 x 38, centred. zz_shop sets 44 x 34 with a #cfcdca edge (1.59:1). */
  #shoppingcartBody
    #column-center
    #cartContentsDisplay
    .cartQuantity
    input[type="text"] {
    box-sizing: border-box;
    width: 56px;
    height: var(--d-field-h);
    margin: 0;
    padding: 0 6px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
    text-align: center;
  }

  #shoppingcartBody
    #column-center
    #cartContentsDisplay
    .cartQuantity
    input[type="text"]:is(:focus, :focus-visible) {
    border-color: var(--d-brand-text);
    box-shadow: 0 0 0 3px var(--d-brand-ring);
    outline: 2px solid transparent;
    outline-offset: 0;
  }

  /* product: cover, name, option line */
  #shoppingcartBody
    #column-center
    #cartContentsDisplay
    .cartProductDisplay
    .cartImage
    img {
    border: 0;
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }

  /* the link hugs the cover and the name, so its focus ring does not run across the whole cell */
  #shoppingcartBody
    #column-center
    #cartContentsDisplay
    .cartProductDisplay
    > a {
    display: inline-flex;
    max-width: 100%;
    border-radius: var(--d-radius-cover);
    color: var(--d-ink);
  }

  #shoppingcartBody #column-center #cartContentsDisplay .cartProdTitle {
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
  }

  :is(#shoppingcartBody, #checkoutconfirmationBody)
    #column-center
    .cartAttribsList
    li {
    padding: 2px 0;
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.4;
  }

  :is(#shoppingcartBody, #checkoutconfirmationBody)
    #column-center
    .cartAttribsList
    li::before {
    color: var(--d-brand-text);
  }

  /* Remove: a quiet link, not a charcoal chip (K.remove) */
  #shoppingcartBody #column-center #cartContentsDisplay a.cartRemoveLink {
    display: inline-block;
    padding: 6px 4px;
    border-radius: var(--d-radius);
    background: none;
    color: var(--d-brand-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  #shoppingcartBody
    #column-center
    #cartContentsDisplay
    a.cartRemoveLink:focus-visible {
    background: none;
    color: var(--d-error-ink);
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  #shoppingcartBody
    #column-center
    #cartContentsDisplay
    .cartProductDisplay
    > a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 4px; /* clear of the cover's edge and the last letter */
  }

  /* sub-total: a soft panel, right aligned (K.totals) */
  #shoppingcartBody #column-center #cartSubTotal {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px 16px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
    font-weight: 400;
  }

  #shoppingcartBody #column-center #cartSubTotal .cartSubTotalLabel {
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  #shoppingcartBody #column-center #cartSubTotal .cartSubTotalAmount {
    color: var(--d-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
  }

  /* buttons: Continue Shopping and Update (secondary) at the left, Checkout (large primary) at the right */
  #shoppingcartBody #column-center #cartButtons {
    gap: 12px;
    padding-top: 0;
    border-top: 0;
  }

  #shoppingcartBody #column-center #cartButtons .buttonRow {
    padding: 0;
    line-height: 1;
  }

  #shoppingcartBody #column-center #cartButtons .buttonRow.forward .ns-btn {
    min-height: var(--d-btn-h-lg);
    padding: var(--d-btn-pad-lg);
    font-size: var(--d-fs-btn-lg);
  }

  /* ----------------------------------------------------------------------
     8. The empty cart (K.cart empty)
     ---------------------------------------------------------------------- */
  #shoppingcartBody #column-center #cartEmptyText {
    height: auto; /* stylesheet_main.css pins the old warning bar at 35px */
    min-height: 0;
    margin: 0 0 32px;
    padding: 28px 24px;
    border: 0;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
    color: var(--d-ink);
    font-size: var(--d-fs-h3);
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
  }

  #shoppingcartBody #column-center #cartEmptyText p {
    padding: 0;
  }

  #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories {
    gap: 8px;
    margin: 18px 0 0;
  }

  #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 36px;
    padding: 0 14px 0 18px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    box-shadow: inset 6px 0 0 var(--k-cat, var(--d-brand));
    color: var(--d-ink);
    font: 600 13px/1.2 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    filter: none;
  }

  #shoppingcartBody
    #column-center
    #cartEmptyText
    .cartEmptyCategories
    li:nth-child(5n + 1)
    a {
    --k-cat: var(--d-cat-1);
  }
  #shoppingcartBody
    #column-center
    #cartEmptyText
    .cartEmptyCategories
    li:nth-child(5n + 2)
    a {
    --k-cat: var(--d-cat-2);
  }
  #shoppingcartBody
    #column-center
    #cartEmptyText
    .cartEmptyCategories
    li:nth-child(5n + 3)
    a {
    --k-cat: var(--d-cat-3);
  }
  #shoppingcartBody
    #column-center
    #cartEmptyText
    .cartEmptyCategories
    li:nth-child(5n + 4)
    a {
    --k-cat: var(--d-cat-4);
  }
  #shoppingcartBody
    #column-center
    #cartEmptyText
    .cartEmptyCategories
    li:nth-child(5n + 5)
    a {
    --k-cat: var(--d-cat-5);
  }

  #shoppingcartBody
    #column-center
    #cartEmptyText
    .cartEmptyCategories
    a:focus-visible {
    filter: none;
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* "new products" under it: a section heading (the tiles are the listings group's) */
  body#shoppingcartBody #column-center #whatsNew h2.centerBoxHeading {
    margin: 8px 0 16px;
    padding: 0;
    color: var(--d-ink);
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
    text-align: left;
    text-transform: none;
  }

  /* ----------------------------------------------------------------------
     9. Checkout: steps 1 and 2, change address, step 3, thank-you (K.checkout)
     ---------------------------------------------------------------------- */
  /* the address card with its Change Address button */
  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    :is(#checkoutShipto, #checkoutBillto) {
    box-sizing: border-box;
    gap: 20px;
    padding: 16px 20px;
    margin: 0 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
    box-shadow: var(--d-shadow-1);
  }

  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    :is(#checkoutShipto, #checkoutBillto)
    .buttonRow {
    padding: 0;
  }

  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #addressbookBody
    )
    #column-center
    address {
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    .floatingBox.important {
    margin-bottom: 0;
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.5;
  }

  /* a card follows the billing notice on step 2: its legend straddles the card's top edge, so the notice keeps 28px
     under it (the two line breaks it used to rely on are dropped, below) */
  body#checkoutpaymentBody #column-center .floatingBox.important {
    margin-bottom: 28px;
  }

  /* the notice is a plain block, so the two line breaks after it only add 28px of air above the next heading */
  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    .floatingBox.important
    + br.clearBoth,
  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    .floatingBox.important
    + br.clearBoth
    + br {
    display: none;
  }

  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    #checkoutShippingContentChoose {
    margin: 0 0 6px;
    padding: 0;
    font-weight: 400;
  }

  /* the line break that clears the last row would add a blank line at the card's foot (the choice rows are
     blocks, taller than the floated radio and price, so nothing needs clearing) */
  body:is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    fieldset
    > br.clearBoth:last-child {
    display: none;
  }

  /* shipping and payment choices: one bordered row per choice; the whole label selects it.
     The radio floats over the row's left edge (a float can clear the legend); the label
     carries the row. Checked: #8a6400 edge on the pale wash (mobile: chk:866-906). */
  :is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    fieldset
    input[type="radio"][name="shipping"],
  #checkoutpaymentBody
    #column-center
    fieldset.payment
    input[type="radio"][name="payment"] {
    position: relative;
    z-index: 1;
    float: left;
    clear: left;
    width: var(--d-check);
    height: var(--d-check);
    margin: 22px -32px 0 14px; /* 22px: the label starts 6px above the float, and its text centre sits 25px down */
    pointer-events: none; /* clicks fall through to the label */
  }

  :is(#checkoutshippingBody, #checkoutpaymentBody)
    #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: block;
    box-sizing: border-box;
    width: auto;
    min-height: 50px;
    margin: 6px 0 0;
    padding: 14px 96px 14px 44px;
    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;
  }

  :is(#checkoutshippingBody, #checkoutpaymentBody)
    #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(--d-brand-text);
    box-shadow: inset 0 0 0 1px var(--d-brand-text);
    background-color: var(--d-brand-soft);
  }

  :is(#checkoutshippingBody, #checkoutpaymentBody)
    #column-center
    fieldset
    input[type="radio"]:focus-visible
    + label {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* shipping price: pulled inside the row at its right edge */
  #checkoutshippingBody
    #column-center
    fieldset:has(input[name="shipping"])
    > .price {
    position: relative;
    z-index: 1;
    margin: 20px 16px 0 -300px;
    padding: 0;
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    font-weight: 700;
    line-height: 20px;
    pointer-events: none;
  }

  /* a store with one payment method prints no radio: the row shows as chosen, with a ring-and-tick mark drawn in CSS (no images) */
  #checkoutpaymentBody
    #column-center
    fieldset.payment
    input[type="hidden"]
    + label.radioButtonLabel {
    position: relative;
    padding-left: 16px;
    padding-right: 52px;
    cursor: default;
  }

  #checkoutpaymentBody
    #column-center
    fieldset.payment
    input[type="hidden"]
    + label.radioButtonLabel::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--d-brand-text);
  }

  #checkoutpaymentBody
    #column-center
    fieldset.payment
    input[type="hidden"]
    + label.radioButtonLabel::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 5px;
    height: 10px;
    margin-top: -7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* the payment fieldset's line breaks stack up between rows */
  #checkoutpaymentBody
    #column-center
    fieldset.payment
    > br.clearBoth
    + br.clearBoth {
    display: none;
  }

  /* conditions and downloads acknowledgement */
  #checkoutpaymentBody #column-center .centerColumn .termsdescription {
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.5;
  }

  #checkoutpaymentBody #column-center .centerColumn #conditions {
    margin: 0 8px 0 0;
    transform: none; /* zz_shop scaled it to 1.2 */
  }

  #checkoutpaymentBody #column-center .centerColumn #conditions + label {
    color: var(--d-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  /* order totals: label then amount, flush right; the total row heavier */
  :is(
      #checkoutpaymentBody #checkoutOrderTotals,
      #checkoutconfirmationBody #orderTotals
    )
    > div {
    gap: 18px;
    padding: 6px 0;
  }

  :is(
      #checkoutpaymentBody #checkoutOrderTotals,
      #checkoutconfirmationBody #orderTotals
    )
    > div
    .lineTitle {
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: 1.4;
  }

  :is(
      #checkoutpaymentBody #checkoutOrderTotals,
      #checkoutconfirmationBody #orderTotals
    )
    > div
    .totalBox {
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
  }

  :is(
      #checkoutpaymentBody #checkoutOrderTotals,
      #checkoutconfirmationBody #orderTotals
    )
    > #ottotal {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--d-line);
  }

  :is(
      #checkoutpaymentBody #checkoutOrderTotals,
      #checkoutconfirmationBody #orderTotals
    )
    > #ottotal
    :is(.lineTitle, .totalBox) {
    font-size: 16px;
    font-weight: 700;
  }

  #checkoutconfirmationBody #column-center #orderTotals {
    box-sizing: border-box;
    padding: 10px 20px 12px;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }

  /* step footers: the Continue button right, "Continue to Step n" left */
  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody
    )
    #column-center
    .centerColumn
    .buttonRow {
    padding: 0;
  }

  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody
    )
    #column-center
    .centerColumn
    .buttonRow.back {
    margin-left: 0;
    margin-right: 0;
    padding-top: 4px;
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.5;
  }

  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody
    )
    #column-center
    .centerColumn
    .buttonRow.back
    strong {
    color: var(--d-ink);
    font-size: var(--d-fs-body);
  }

  /* Confirm Order: the purchase, the large primary */
  #checkoutconfirmationBody #column-center .buttonRow.confirm-order .ns-btn {
    min-height: var(--d-btn-h-lg);
    padding: var(--d-btn-pad-lg);
    font-size: var(--d-fs-btn-lg);
  }

  /* Change Address and Edit: small secondary buttons beside the address */
  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutconfirmationBody
    )
    #column-center
    :is(#checkoutShipto, #checkoutBillto, #order-comments)
    .buttonRow
    .ns-btn,
  #checkoutconfirmationBody
    #column-center
    #checkoutConfirmDefaultHeadingCart
    + .buttonRow
    .ns-btn {
    min-height: var(--d-btn-h-sm);
    padding: var(--d-btn-pad-sm);
    font-size: var(--d-fs-btn-sm);
  }

  /* change address: the chosen address and the address-book cards */
  body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody)
    #column-center
    .centerColumn
    .instructions
    address {
    box-sizing: border-box;
    max-width: 360px;
    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);
  }

  .addressCards {
    gap: 14px;
  }

  .addressCards .addressCard {
    box-sizing: border-box;
    padding: 16px 16px 16px 46px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  /* the base sheet gives every radio in the page body position: relative at (1,1,1), so the box needs the
     body id to be lifted back out of the text (zz_shop: absolute, top left of the card) */
  body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody)
    #column-center
    .addressCards
    .addressCard
    input[type="radio"] {
    position: absolute;
    left: 16px;
    top: 19px;
    margin: 0;
  }

  .addressCards .addressCard address {
    margin: 0;
    padding: 0; /* the theme's 7px would push the text off the card's own padding */
  }

  .addressCards .addressCard:has(input:checked) {
    border-color: var(--d-brand-text);
    box-shadow: inset 0 0 0 1px var(--d-brand-text);
    background: var(--d-brand-soft);
  }

  .addressCards .addressCard:has(input:focus-visible) {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  @supports not selector(:has(*)) {
    .addressCards .addressCard.isSelected {
      border-color: var(--d-brand-text);
      background: var(--d-brand-soft);
    }
  }

  /* the last row of each step is a float (Continue, "Continue to Step n", Back): the page contains them
     and leaves air above the footer, which otherwise touches the buttons. flow-root only where the
     centre column is a plain block: step 3 and the delete-address page are grids (zz_shop), which
     contain their floats already, and keep their display. */
  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #addressbookBody
    )
    #column-center
    .centerColumn {
    display: flow-root;
  }

  body:is(
      #checkoutshippingBody,
      #checkoutpaymentBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody
    )
    #column-center
    .centerColumn {
    padding-bottom: 24px;
  }

  .addressBookManage a {
    color: var(--d-brand-text);
    font-size: 13px;
    font-weight: 600;
  }
  .addressBookManage {
    font-size: 13px;
  }

  /* step 3: billing, delivery and comments cards */
  #checkoutconfirmationBody
    #column-center
    :is(#checkoutBillto, #checkoutShipto, #order-comments) {
    box-sizing: border-box;
    padding: 20px 24px 22px;
    margin: 0 0 20px;
    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
    :is(#checkoutBillto, #checkoutShipto, #order-comments)
    > h2 {
    margin: 0 0 8px;
    padding: 0 96px 0 0;
    font-size: var(--d-fs-h3);
    line-height: 1.35;
    letter-spacing: 0;
  }

  #checkoutconfirmationBody
    #column-center
    :is(#checkoutBillto, #checkoutShipto, #order-comments)
    > .buttonRow {
    top: 16px;
    right: 20px;
  }

  #checkoutconfirmationBody
    #column-center
    :is(#checkoutBillto, #checkoutShipto)
    > h3 {
    margin: 16px 0 2px;
    padding: 12px 0 0;
    border-top: 1px solid var(--d-line);
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }

  #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
    :is(#checkoutBillto, #checkoutShipto)
    .important {
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 400;
  }

  #checkoutconfirmationBody #column-center #cartContentsDisplay .cartQuantity {
    width: 56px;
    text-align: left;
    font-weight: 400;
  }
  #checkoutconfirmationBody
    #column-center
    #cartContentsDisplay
    .cartProductDisplay {
    color: var(--d-ink);
    font-weight: 600;
  }
  #checkoutconfirmationBody
    #column-center
    #cartContentsDisplay
    .cartAttribsList
    li {
    font-weight: 400;
  }

  /* thank-you page */
  #checkoutsuccessBody #column-center #checkoutSuccessOrderNumber {
    display: inline-block;
    margin: 0 0 18px;
    padding: 10px 16px;
    border-radius: var(--d-radius);
    background: var(--d-surface-2);
    color: var(--d-ink);
    font-size: 17px;
    font-weight: 700;
  }

  #checkoutsuccessBody #column-center #checkoutSuccessOrderNumber strong {
    margin-right: 8px;
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  #checkoutsuccessBody #column-center .centerColumn > p:has(+ fieldset) {
    margin: 0 0 28px;
  }

  #checkoutsuccessBody #column-center #checkoutSuccessMainContent {
    max-width: var(--d-measure);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  #checkoutsuccessBody #column-center #headingDownloads {
    margin: 8px 0 12px;
    color: var(--d-ink);
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
    text-transform: none;
  }

  #checkoutsuccessBody #column-center #downloads .downloadProductNameLink a {
    color: var(--d-brand-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  body:is(#checkoutsuccessBody, #accountBody) #column-center #sendSpendWrapper,
  #checkoutsuccessBody #column-center #checkoutSuccessGv {
    padding: 20px 24px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
    box-shadow: var(--d-shadow-1);
  }

  #checkoutsuccessBody
    #column-center
    :is(
      #checkoutSuccessOrderLink,
      #checkoutSuccessContactLink,
      #checkoutSuccessLogoff
    ) {
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.6;
  }

  /* ----------------------------------------------------------------------
     10. My account and the address book
     ---------------------------------------------------------------------- */
  #accountBody #column-center #accountDefault .show-all {
    color: var(--d-brand-text);
    font-size: 13px;
    font-weight: 600;
  }

  #accountBody #column-center #accountLinksWrapper ul {
    border-top: 1px solid var(--d-line);
  }
  #accountBody #column-center #accountLinksWrapper li {
    border-bottom: 1px solid var(--d-line);
  }

  #accountBody #column-center #accountLinksWrapper li a {
    padding: 12px 28px 12px 2px;
    color: var(--d-brand-text);
    font-size: var(--d-fs-body);
    line-height: 1.4;
    text-decoration: none;
  }

  /* the arrow: a CSS chevron (no image), in the brand text colour */
  #accountBody #column-center #accountLinksWrapper li a::after {
    content: "";
    top: 50%;
    right: 8px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    font-size: 0;
  }

  #accountBody #column-center #accountLinksWrapper li a:focus-visible {
    background: var(--d-surface-2);
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: -2px;
  }

  /* stylesheet_main.css:  #prevOrders td a { text-decoration: underline }  (1,1,2) outranks .ns-btn: the same
     fix the mobile account sheet makes */
  #accountBody #column-center #prevOrders td a.ns-btn,
  :is(#accounthistoryinfoBody, #orderstatusBody)
    #column-center
    #accountHistInfo
    td
    a.ns-btn {
    text-decoration: none;
  }

  /* "Show all orders" shares the Previous orders heading's row, at the right, instead of taking a row of its own */
  #accountBody #column-center #accountDefault > p.forward {
    margin: 0;
    padding: 18px 0 0;
  }
  #accountBody #column-center #accountDefault > p.forward + br.clearBoth {
    display: none;
  }
  #accountBody #column-center #accountDefault > p.forward + br.clearBoth + h2 {
    margin-top: 28px;
  }

  #accountBody #column-center #prevOrders td address {
    color: var(--d-ink);
    font-size: var(--d-fs-body);
  }

  #accountBody #column-center #prevOrders .accountOrderViewButton .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 .addressBookLimit {
    color: var(--d-ink-2);
    font-size: 13px;
  }
  #addressbookBody #column-center .addressBookLimit .coming {
    color: var(--d-ink-2);
  }

  #addressbookBody #column-center .addressBookCards {
    gap: 16px;
  }

  #addressbookBody #column-center .addressBookCard {
    padding: 18px 20px 20px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
    box-shadow: var(--d-shadow-1);
  }

  #addressbookBody #column-center .addressBookCard.isPrimary {
    border-color: var(--d-brand-text);
    box-shadow: inset 0 0 0 1px var(--d-brand-text);
    background: var(--d-brand-soft);
  }

  #addressbookBody #column-center .addressBookCard h3.addressBookDefaultName {
    margin: 0 0 8px;
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    font-weight: 700;
  }

  #addressbookBody #column-center .addressBookCard .primaryTag {
    margin-left: 6px;
    color: var(--d-brand-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  #addressbookBody #column-center .addressBookCard .buttonRow {
    padding: 0;
    gap: 8px;
  }
  #addressbookBody #column-center .addressBookCard .buttonRow .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 .addressBookButtons {
    padding-top: 18px;
    border-top: 1px solid var(--d-line);
  }

  #addressbookBody #column-center .addressBookButtons .buttonRow {
    padding: 0;
  }

  /* delete confirmation: the address as a card in the error colours */
  #addressbookprocessBody
    #column-center
    #addressBookProcessDefault:has(> address)
    > .alert {
    color: var(--d-ink);
    font-size: var(--d-fs-body);
  }

  #addressbookprocessBody
    #column-center
    #addressBookProcessDefault:has(> address)
    > address {
    padding: 18px 22px 20px;
    border: 1px solid var(--d-error-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-error-bg);
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  #addressbookprocessBody
    #column-center
    #addressBookProcessDefault:has(> address)
    > .buttonRow {
    padding: 0;
  }

  /* ----------------------------------------------------------------------
     11. Hover (pointer devices only), transitions (motion allowed only)
     ---------------------------------------------------------------------- */
  @media (hover: hover) {
    #shoppingcartBody
      #column-center
      #cartContentsDisplay
      .cartProductDisplay
      > a:hover {
      color: var(--d-brand-text);
    }
    #shoppingcartBody
      #column-center
      #cartContentsDisplay
      .cartProductDisplay
      > a:hover
      .cartProdTitle {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    #shoppingcartBody
      #column-center
      #cartContentsDisplay
      a.cartRemoveLink:hover {
      background: none;
      color: var(--d-error-ink);
    }
    #shoppingcartBody #column-center #shoppingCartDefault > .forward a:hover {
      color: var(--d-ink);
    }
    #shoppingcartBody
      #column-center
      #cartEmptyText
      .cartEmptyCategories
      a:hover {
      background: var(--d-surface-2);
      filter: none;
    }

    body:is(
        #loginBody,
        #createaccountBody,
        #contactusBody,
        #passwordforgottenBody,
        #timeoutBody
      )
      #column-center
      fieldset
      :is(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        select,
        textarea
      ):hover:not(:focus) {
      border-color: var(--d-field-hover);
    }

    #shoppingcartBody
      #column-center
      #cartContentsDisplay
      .cartQuantity
      input[type="text"]:hover:not(:focus) {
      border-color: var(--d-field-hover);
    }

    :is(#loginBody, #timeoutBody) #column-center .buttonRow.important a:hover {
      color: var(--d-ink);
    }

    :is(#checkoutshippingBody, #checkoutpaymentBody)
      #column-center
      fieldset
      input[type="radio"]:not(:checked)
      + label:hover {
      border-color: var(--d-field);
    }

    .addressCards .addressCard:not(:has(input:checked)):hover {
      border-color: var(--d-field);
    }

    #accountBody #column-center #accountLinksWrapper li a:hover {
      background: var(--d-surface-2);
      color: var(--d-ink);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    #shoppingcartBody
      #column-center
      #cartContentsDisplay
      :is(.cartProductDisplay > a, a.cartRemoveLink),
    #shoppingcartBody #column-center #cartEmptyText .cartEmptyCategories a,
    :is(#loginBody, #timeoutBody) #column-center .buttonRow.important a,
    #accountBody #column-center #accountLinksWrapper li a {
      transition:
        color var(--d-dur) linear,
        background-color var(--d-dur) linear;
    }

    body:is(
        #loginBody,
        #createaccountBody,
        #contactusBody,
        #passwordforgottenBody,
        #timeoutBody,
        #shoppingcartBody,
        #checkoutshippingaddressBody,
        #checkoutpaymentaddressBody,
        #addressbookprocessBody,
        #accounteditBody,
        #accountpasswordBody
      )
      #column-center
      :is(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        select,
        textarea
      ) {
      transition:
        border-color var(--d-dur) linear,
        box-shadow var(--d-dur) linear;
    }

    :is(#checkoutshippingBody, #checkoutpaymentBody)
      #column-center
      fieldset
      input[type="radio"]
      + label,
    .addressCards .addressCard {
      transition:
        border-color var(--d-dur) linear,
        background-color var(--d-dur) linear,
        box-shadow var(--d-dur) linear;
    }

    #shoppingcartBody
      #column-center
      #cartEmptyText
      .cartEmptyCategories
      a:active {
      transform: scale(0.98);
    }
  }
}