/* ==========================================================================
   MOBILE REDESIGN: CART, CHECKOUT, SIGN-IN AND PASSWORD PAGES (2026-10-24)
   Spec: MOBILE-REDESIGN-SPEC.md, "Forms, cart, checkout". Phones and tablets only:
   every rule sits inside max-width: 1023px, so 1024px and up cannot change.
   Every selector starts with one of these pages' body ids. Colours, radii and
   gutters come from the shell's --m-* tokens, with the BMS values as fallbacks so
   the page renders the same before the shell sheet loads.
   Buttons: this sheet only lays them out (order, width, place). Their look
   (.ns-btn, primary / secondary) is the shell's. Without JavaScript the theme's
   image buttons stay and are centred in their rows.
   ========================================================================== */

@media (max-width: 1023px) {
  /* ------------------------------------------------------------ page column
     the forms and the cart read as one centred column on tablets instead of
     stretching 900px wide; phones are narrower than the measure, so unchanged */
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center .centerColumn {
    max-width: var(--m-measure, 720px);
    margin-left: auto;
    margin-right: auto;
  }

  /* ================================================================ FORMS
     fieldsets were grey boxes with a boxed legend notched into their border and
     labels in a 9em column; on a phone the redesign wants one card per group, the
     label above its field and 48px fields. */

  /* ------------------------------------------------------- group cards
     stylesheet_main.css sets fieldset { margin-bottom: 20px !important }, hence the
     !important on the margin */
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center fieldset {
    min-width: 0;
    margin: 0 0 16px !important;
    padding: 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #ffffff);
    color: var(--m-ink, #363636);
    box-sizing: border-box;
  }
  /* a floated legend is laid out inside the card (not on its border) as its heading.
     stylesheet.css sets legend { margin-bottom: 0 !important }, hence the !important;
     three ids beat the wave-3 rule that keeps the coupon and gift legends at 12px. */
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #contentMainWrapper #column-center fieldset > legend {
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px !important;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-brand, #4f665a);
    font-size: 17px;
    font-weight: bold;
    line-height: 1.35;
    text-align: left;
  }
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center fieldset > legend + * { clear: both; }
  /* a group of groups (the sign-up form wraps its three cards in one more fieldset):
     no card round the cards; its legend becomes the section heading */
  :is(#loginBody, #createaccountBody) #column-center fieldset:has(> fieldset) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  :is(#loginBody, #createaccountBody) #contentMainWrapper #column-center fieldset:has(> fieldset) > legend {
    margin: 8px 0 12px !important;
    color: var(--m-ink, #363636);
    font-size: 20px;
    line-height: 1.3;
  }

  /* ------------------------------------------------------------- labels */
  :is(#checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody,
    #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center
    fieldset :is(label.inputLabel, label.inputLabelPayment),
  :is(#checkoutshippingaddressBody, #checkoutpaymentBody, #checkoutpaymentaddressBody, #loginBody,
    #createaccountBody, #passwordforgottenBody, #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center
    fieldset > label:not(.checkboxLabel, .radioButtonLabel, input + label) {
    float: none;
    display: block;
    width: auto;
    height: auto;
    margin: 12px 0 4px;
    padding: 0;
    color: var(--m-ink, #363636);
    font-size: 14px;
    font-weight: bold;
    line-height: 24px; /* a label is a tap target for its field: 24px tall */
    text-align: left;
  }

  /* -------------------------------------------------------------- fields
     48px tall, full width, 10px radius, 16px text (iOS zooms under 16px). The border
     is darker than the line token so the box edge passes 3:1 against white.
     Three ids beat the FORM CONTROLS rules in stylesheet_zz_9star.css. */
  :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody,
    #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset
    :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"],
      input[type="tel"], input[type="number"], select, textarea) {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #8f9289;
    border-radius: var(--m-radius, 10px);
    background-color: var(--m-surface, #ffffff);
    color: var(--m-ink, #363636);
    font-family: inherit;
    font-size: 16px;
    vertical-align: middle;
  }
  :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody,
    #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset
    :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"],
      input[type="tel"], input[type="number"]) {
    height: 48px;
    padding: 0 14px;
    line-height: normal;
  }
  /* the shared FORM CONTROLS rule (and stylesheet_tm.css on the login page) set the
     select height with !important */
  :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody,
    #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset select {
    height: 48px !important;
    padding: 0 40px 0 14px;
    -webkit-appearance: none;
    appearance: none;
    /* Phosphor caret-down (regular, MIT) */
    background: var(--m-surface, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236b6e6f'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat;
  }
  :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody,
    #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset textarea {
    display: block;
    min-height: 112px;
    padding: 12px 14px;
    line-height: 1.45;
    resize: vertical;
  }
  :is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #loginBody, #createaccountBody, #passwordforgottenBody,
    #passwordresetBody, #timeoutBody) #contentMainWrapper #column-center fieldset
    :is(input, select, textarea):focus {
    border-color: var(--m-brand, #4f665a);
    outline: 2px solid transparent; /* still shows in forced-colours mode */
    box-shadow: 0 0 0 3px rgb(79 102 90 / .25);
  }
  /* required "*" after a select: the select leaves 24px for it, and so do the other
     fields of that card, so their right edges line up */
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody)
    #contentMainWrapper #column-center fieldset:has(select + .alert)
    :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select) {
    width: calc(100% - 24px);
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody)
    #column-center fieldset select + .alert {
    margin: 0 0 0 4px;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 16px;
    vertical-align: middle;
  }
  /* "* Required information": 11px light grey (about 2.5:1) was hard to read */
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #loginBody, #createaccountBody,
    #passwordforgottenBody) #column-center fieldset > .alert.forward {
    margin: 0 0 4px;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
  }

  /* --------------------------------------------- checkbox rows (terms, privacy,
     newsletter): a 24px box in the brand colour; its label pads the row to 48px */
  :is(#checkoutpaymentBody, #loginBody, #createaccountBody) #column-center fieldset input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 12px 12px 12px 0;
    vertical-align: top;
    accent-color: var(--m-brand, #4f665a);
  }
  :is(#checkoutpaymentBody, #loginBody, #createaccountBody) #column-center fieldset input[type="checkbox"] + label {
    max-width: calc(100% - 44px); /* the box, its margin and the space after it */
    height: auto;
    margin: 0;
    padding: 13px 0;
    font-size: 15px;
    line-height: 22px;
    vertical-align: top;
  }
  /* the newsletter box comes after its label: label and box share the line */
  :is(#loginBody, #createaccountBody) #column-center fieldset label.checkboxLabel:has(+ input[type="checkbox"]) {
    display: inline-block;
    height: auto;
    margin: 0;
    padding: 13px 0 !important; /* the template sets padding-left: 10px inline */
    font-size: 15px;
    line-height: 22px;
    vertical-align: top;
  }
  :is(#loginBody, #createaccountBody) #column-center fieldset label.checkboxLabel + input[type="checkbox"] { margin-left: 12px; }

  /* --------------------------------------------- helper text inside the forms */
  :is(#checkoutpaymentBody, #loginBody, #createaccountBody, #passwordforgottenBody, #timeoutBody)
    #column-center fieldset :is(.information, p, .termsdescription, #passwordForgottenMainContent) {
    color: var(--m-ink-2, #6b6e6f);
    font-size: 14px;
    line-height: 1.5;
  }
  #checkoutpaymentBody #column-center fieldset p { margin: 0 0 8px; }
  /* create account: "NOTE: If you already have an account ..." as a quiet note */
  #createaccountBody #column-center #createAcctDefaultLoginLink {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface-2, #f4f5ef);
    color: var(--m-ink, #363636);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
  }

  /* ----------------------------------------------------------- messages
     red text with a 30px icon ran edge to edge; now a tinted card, the icon at 22px
     beside the text (the flex row itself is set in stylesheet_zz_9star.css) */
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) {
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #f0c7c2;
    border-radius: var(--m-radius, 10px);
    background: #fdf2f1;
    color: #a3261b;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.45;
  }
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center .messageStackSuccess {
    border-color: #cfd9c9;
    background: #eef3ea;
    color: var(--m-brand, #4f665a);
  }
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center .messageStackCaution {
    border-color: #ecd9a0;
    background: #fdf6e1;
    color: #6b5200;
  }
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) > img:first-child {
    width: 22px;
    height: auto;
    margin: 0;
  }

  /* ============================================================== BUTTONS
     layout only: the theme floats them left and right (.forward / .back, with the
     theme-wide 33px / -30px margins on .back). Each step now ends in one full-width
     action, any second action full width under it. Image buttons (no JavaScript)
     keep their size, centred. */
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center .buttonRow {
    float: none;
    clear: both;
    display: block;
    margin: 12px 0 0;
    text-align: center;
  }
  :is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
    #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #loginBody,
    #createaccountBody, #createaccountsuccessBody, #passwordforgottenBody, #passwordresetBody,
    #timeoutBody) #column-center .buttonRow > :is(.ns-btn, input[type="submit"], button) {
    width: 100%;
    box-sizing: border-box;
  }
  /* the step's main action keeps a little room above it */
  :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody,
    #createaccountBody, #passwordforgottenBody, #timeoutBody) #column-center .buttonRow.forward:not(.floatingBox .buttonRow) { margin-top: 20px; }
  /* "Continue to Step 2 / - to choose your payment method." under the button: one
     quiet caption line, centred */
  :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody,
    #checkoutconfirmationBody) #column-center .buttonRow.back:has(> strong) {
    margin: 10px 0 0;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    line-height: 1.45;
  }
  :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody,
    #checkoutconfirmationBody) #column-center .buttonRow.back:has(> strong) > br { display: none; }
  :is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody,
    #checkoutconfirmationBody) #column-center .buttonRow.back:has(> strong) > strong::after { content: " "; }
  /* "Forgot your password?": a 44px tap target; on the login card it sits right under
     the password field, at the right, as apps place it */
  :is(#loginBody, #timeoutBody) #column-center .buttonRow.important a {
    display: inline-block;
    padding: 12px 0;
    color: var(--m-brand, #4f665a);
    font-size: 15px;
  }
  #loginBody #column-center #loginForm .buttonRow.important { margin: 4px 0 0; text-align: right; }
  #loginBody #column-center .buttonRow.nlog { margin-top: 12px; }

  /* =================================================================== CART
     one card per item: picture and title, the quantity with its Update button, the
     line total at the right, and the remove control in the card's corner */
  #shoppingcartBody #column-center #cartInstructionsDisplay {
    color: var(--m-ink-2, #6b6e6f);
    font-size: 14px;
    line-height: 1.5;
  }
  #shoppingcartBody #column-center #cartContentsDisplay,
  #shoppingcartBody #column-center #cartContentsDisplay > tbody {
    display: block;
    width: 100%;
    border: 0;
  }
  #shoppingcartBody #column-center #cartContentsDisplay tr.tableHeading { display: none; }
  #shoppingcartBody #column-center #cartContentsDisplay tr:not(.tableHeading) {
    position: relative;
    display: grid;
    grid-template-columns: 64px auto minmax(0, 1fr) auto;
    grid-template-areas:
      "prod prod prod remove"
      "qty  upd  sum  sum";
    align-items: center;
    gap: 14px 10px;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #ffffff);
  }
  /* a hairline between the item and its quantity row */
  #shoppingcartBody #column-center #cartContentsDisplay tr:not(.tableHeading)::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    margin-top: -7px;
    border-top: 1px solid var(--m-line, #e3e4dd);
  }
  #shoppingcartBody #column-center #cartContentsDisplay td {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }
  /* the picture floats, so the title and the options list both sit beside it */
  #shoppingcartBody #column-center #cartContentsDisplay .cartProductDisplay { grid-area: prod; display: flow-root; min-width: 0; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartProductDisplay > a {
    display: block;
    color: var(--m-ink, #363636);
    text-decoration: none;
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartImage { float: left; width: 64px; margin: 0 12px 0 0; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartImage img {
    display: block;
    width: 64px;
    border-radius: var(--m-radius-cover, 6px);
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartProdTitle {
    display: block;
    padding: 2px 0 0;
    color: var(--m-ink, #363636);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.35;
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartAttribsList { margin: 2px 0 0 76px; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartAttribsList ul { margin: 0; padding: 0; list-style: none; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartAttribsList li {
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    line-height: 1.4;
  }
  /* quantity box: 48px, sized for three digits */
  #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity { grid-area: qty; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity br { display: none; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity input[type="text"] {
    width: 64px;
    height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 6px;
    border: 1px solid #8f9289;
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #ffffff);
    font-size: 16px;
    text-align: center;
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartQuantity input[type="text"]:focus {
    border-color: var(--m-brand, #4f665a);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgb(79 102 90 / .25);
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartQuantityUpdate { grid-area: upd; justify-self: start; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartQuantityUpdate > :is(.ns-btn, input[type="submit"], button) { width: auto; }
  /* price each (small, above) and the line total (large, below), at the right. The
     template's "Price:" / "Total:" labels and the phone tier's added ones go. */
  #shoppingcartBody #column-center #cartContentsDisplay :is(.cartUnitDisplay, .cartTotalDisplay) { grid-area: sum; justify-self: end; white-space: nowrap; }
  #shoppingcartBody #column-center #cartContentsDisplay :is(.cartUnitDisplay, .cartTotalDisplay) > b.hide { display: none; }
  #shoppingcartBody #column-center #cartContentsDisplay :is(.cartUnitDisplay, .cartTotalDisplay)::before { content: none; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartUnitDisplay {
    align-self: start;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    line-height: 18px;
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartUnitDisplay::after { content: " each"; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartTotalDisplay {
    align-self: end;
    color: var(--m-ink, #363636);
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
  }
  /* quantity 1: "each" would repeat the total, so the total alone, centred on the row */
  #shoppingcartBody #column-center #cartContentsDisplay tr:has(.cartQuantity input[value="1"]) .cartUnitDisplay { display: none; }
  #shoppingcartBody #column-center #cartContentsDisplay tr:has(.cartQuantity input[value="1"]) .cartTotalDisplay { align-self: center; }
  /* remove: the bin link as a 44px target in the card's top corner. Its tick box did
     the same through Update, so it goes where the link is shown. */
  #shoppingcartBody #column-center #cartContentsDisplay .cartRemoveItemDisplay { grid-area: remove; align-self: start; justify-self: end; margin: -10px -10px 0 0; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartRemoveItemDisplay > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--m-radius, 10px);
  }
  #shoppingcartBody #column-center #cartContentsDisplay .cartRemoveItemDisplay > a img { display: block; margin: 0; }
  #shoppingcartBody #column-center #cartContentsDisplay .cartRemoveItemDisplay:has(> a) input[type="checkbox"] { display: none; }
  /* totals card */
  #shoppingcartBody #column-center #cartSubTotal {
    margin: 4px 0 0;
    padding: 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef);
    color: var(--m-ink, #363636);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    text-align: right;
  }
  #shoppingcartBody #column-center #cartSubTotal + br.clearBoth { display: none; }
  /* Checkout first and full width, Back to Shopping under it (the template's own
     order). The bottom Update repeats the row buttons (same form, same submit), so it
     goes while a row button works; with only fixed-quantity rows it is the only
     submit and stays. Tablets now get the same rule the phone tier had. */
  #shoppingcartBody #column-center #shoppingCartForm > .buttonRow.forward { margin-top: 20px; }
  #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 uppercase warning banner as a calm empty state, a
     Phosphor shopping-cart (regular, MIT) in the brand colour over the message */
  #shoppingcartBody #column-center #cartEmptyText {
    height: auto;
    min-height: 0;
    margin: 0 0 28px;
    padding: 80px 20px 28px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%234f665a'%3E%3Cpath d='M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.750,27.750,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.870-6.570L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z'/%3E%3C/svg%3E") center 24px / 44px 44px no-repeat;
    color: var(--m-ink, #363636);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
    text-transform: none;
  }
  #shoppingcartBody #column-center #whatsNew h2.centerBoxHeading {
    grid-column: 1 / -1;
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  /* "new products" under the empty cart: the same cards as the listing pages (their
     sheet scopes by the listing pages' body ids): a grid, square covers, two-line
     titles, Buy and More Info full width at the card's foot. The upgraded buttons had
     been squeezed into the phone layer's 95px columns, their labels cut. The items
     carry inline widths and heights, hence the !important. */
  #shoppingcartBody #column-center #whatsNew {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }
  #shoppingcartBody #column-center #whatsNew > br { display: none; }
  /* the phone layer's flex line breaks would be grid items (the first card started in
     the second column) */
  #shoppingcartBody #column-center #whatsNew::before,
  #shoppingcartBody #column-center #whatsNew::after { content: none; }
  #shoppingcartBody #column-center #whatsNew > .centerBoxContentsNew {
    display: flex;
    flex-direction: column;
    float: none;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    margin: 0 0 28px;
    padding: 0;
    text-align: left;
  }
  #shoppingcartBody #column-center #whatsNew > .centerBoxContentsNew > br { display: none; }
  #shoppingcartBody #column-center #whatsNew .ng200 { width: 100%; height: auto; margin: 0 0 10px; }
  #shoppingcartBody #column-center #whatsNew .ng200 a { display: block; }
  #shoppingcartBody #column-center #whatsNew .ng200 img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 1;
    object-fit: contain;
    border: 0;
    border-radius: var(--m-radius-cover, 6px);
    background: var(--m-surface-2, #f4f5ef);
    box-shadow: 0 0 0 1px var(--m-line, #e3e4dd);
  }
  #shoppingcartBody #column-center #whatsNew h3.itemTitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 2px;
    padding: 0;
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
  }
  #shoppingcartBody #column-center #whatsNew h3.itemTitle a { color: inherit; padding-block: 4px; }
  #shoppingcartBody #column-center #whatsNew .plart {
    display: block;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    overflow: hidden;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
    line-height: 1.2; /* the phone layer sets line-height: 0 on these links */
  }
  #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a:not(h3 ~ a ~ a) { margin-top: auto; }
  #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a:not(.ns-btn) { justify-content: flex-start; }
  #shoppingcartBody #column-center #whatsNew .centerBoxContentsNew > h3 ~ a:not(.ns-btn) > img { width: 95px; max-width: 100%; height: auto; margin: 0; }

  /* ====================================================== CHECKOUT STEPS
     a three-part progress bar under each step's heading: the steps read at a glance */
  #checkoutshippingBody #column-center #checkoutShippingHeading::after,
  #checkoutpaymentBody #column-center #checkoutPaymentHeading::after,
  #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeading::after {
    content: "";
    display: block;
    height: 4px;
    margin: 14px 0 0;
    border-radius: 2px;
    background: linear-gradient(90deg,
      var(--m-brand, #4f665a) 0 32.33%, transparent 32.33% 33.83%,
      var(--m-line, #e3e4dd) 33.83% 66.17%, transparent 66.17% 67.67%,
      var(--m-line, #e3e4dd) 67.67% 100%);
  }
  #checkoutpaymentBody #column-center #checkoutPaymentHeading::after {
    background: linear-gradient(90deg,
      var(--m-brand, #4f665a) 0 32.33%, transparent 32.33% 33.83%,
      var(--m-brand, #4f665a) 33.83% 66.17%, transparent 66.17% 67.67%,
      var(--m-line, #e3e4dd) 67.67% 100%);
  }
  #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeading::after {
    background: linear-gradient(90deg,
      var(--m-brand, #4f665a) 0 32.33%, transparent 32.33% 33.83%,
      var(--m-brand, #4f665a) 33.83% 66.17%, transparent 66.17% 67.67%,
      var(--m-brand, #4f665a) 67.67% 100%);
  }

  /* --------------------------------------------- steps 1 and 2: the address card
     the delivery / billing address and its Change Address button as one card; the
     explanation under it as a caption (it was a 47% float beside it) */
  #checkoutshippingBody #column-center #checkoutShipto,
  #checkoutpaymentBody #column-center #checkoutBillto {
    float: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #ffffff);
  }
  #checkoutshippingBody #column-center #checkoutShipto > address,
  #checkoutpaymentBody #column-center #checkoutBillto > address {
    order: 0;
    margin: 0;
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-style: normal;
    line-height: 1.55;
  }
  #checkoutshippingBody #column-center #checkoutShipto > .buttonRow,
  #checkoutpaymentBody #column-center #checkoutBillto > .buttonRow { order: 1; margin: 0; }
  :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .floatingBox.important {
    float: none;
    width: auto;
    margin: 8px 0 0;
    padding: 0 2px;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
  }
  /* the two empty lines the floats needed */
  :is(#checkoutshippingBody, #checkoutpaymentBody) #column-center form > .floatingBox.important + br.clearBoth + br { display: none; }
  #checkoutshippingBody #column-center #checkoutShippingHeadingMethod,
  #checkoutshippingBody #column-center #comments { margin-top: 24px !important; } /* fieldset margin is !important above */
  #checkoutshippingBody #column-center #checkoutShippingContentChoose {
    margin: 0 0 12px;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
  }
  /* "Special Instructions or Order Comments" heading sits on the card that follows */
  #checkoutshippingBody #column-center form > h3 { margin: 24px 0 8px; }
  #checkoutshippingBody #column-center form > h3 + #comments { margin-top: 0 !important; }

  /* ------------------------------------- shipping and payment choices as rows
     each choice is a tappable card: the whole label selects it, the radio sits
     inside its left edge and the price inside its right edge (both let taps through
     to the label). The checked card takes the brand border. The radio floats (a
     float can clear the floated legend; an inline radio of no net width sat in the
     zero-width line beside the legend, outside the card). */
  #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"],
  #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"] {
    position: relative;
    z-index: 1;
    left: 16px;
    float: left;
    clear: left;
    width: 24px;
    height: 24px;
    margin: 15px -24px 0 0;
    vertical-align: top;
    accent-color: var(--m-brand, #4f665a);
    pointer-events: none;
  }
  #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"] + label,
  #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"] + label,
  #checkoutpaymentBody #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel {
    display: inline-block;
    width: 100%;
    max-width: none;
    min-height: 54px;
    box-sizing: border-box;
    margin: 4px 0;
    padding: 15px 92px 15px 52px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #ffffff);
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-weight: normal;
    line-height: 22px;
    vertical-align: top;
    cursor: pointer;
  }
  #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"]:checked + label,
  #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"]:checked + label,
  #checkoutpaymentBody #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel {
    border-color: var(--m-brand, #4f665a);
    box-shadow: inset 0 0 0 1px var(--m-brand, #4f665a);
    background-color: var(--m-surface-2, #f4f5ef);
  }
  #checkoutshippingBody #column-center fieldset input[type="radio"][name="shipping"]:focus-visible + label,
  #checkoutpaymentBody #column-center fieldset.payment input[type="radio"][name="payment"]:focus-visible + label {
    outline: 2px solid var(--m-brand, #4f665a);
    outline-offset: 2px;
  }
  /* the shipping price floats right before its radio: pulled inside the card, at the
     height of the label's first line; its negative margin keeps it from narrowing
     the line the label sits on */
  #checkoutshippingBody #column-center fieldset:has(input[name="shipping"]) > .price {
    position: relative;
    z-index: 1;
    right: 16px;
    margin: 20px 0 0 -300px;
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-weight: bold;
    line-height: 22px;
    pointer-events: none;
  }
  /* a store with one payment method prints no radio: its card shows as chosen, a
     Phosphor check-circle (fill, MIT) at its right, no radio space at its left */
  #checkoutpaymentBody #column-center fieldset.payment input[type="hidden"] + label.radioButtonLabel {
    padding-left: 16px;
    padding-right: 52px;
    background: var(--m-surface-2, #f4f5ef) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%234f665a'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 16px center / 24px 24px no-repeat;
    cursor: default;
  }
  #checkoutpaymentBody #column-center fieldset.payment > br.clearBoth + br.clearBoth { display: none; }

  /* --------------------------------------------------------- order totals
     payment (a fieldset) and confirmation: title at the left, amount at the right,
     the grand total heavier under a hairline */
  #checkoutconfirmationBody #column-center #orderTotals {
    margin: 0 0 4px;
    padding: 8px 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef);
  }
  #checkoutpaymentBody #column-center #checkoutOrderTotals > div,
  #checkoutconfirmationBody #column-center #orderTotals > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
  }
  #checkoutpaymentBody #column-center #checkoutOrderTotals > div > .lineTitle,
  #checkoutconfirmationBody #column-center #orderTotals > div > .lineTitle {
    float: none;
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-weight: normal;
    line-height: 1.4;
    text-align: left;
  }
  #checkoutpaymentBody #column-center #checkoutOrderTotals > div > .totalBox,
  #checkoutconfirmationBody #column-center #orderTotals > div > .totalBox {
    float: none;
    order: 1;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    text-align: right;
  }
  #checkoutpaymentBody #column-center #checkoutOrderTotals > #ottotal,
  #checkoutconfirmationBody #column-center #orderTotals > #ottotal {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--m-line, #e3e4dd);
  }
  #checkoutpaymentBody #column-center #checkoutOrderTotals > #ottotal > :is(.lineTitle, .totalBox),
  #checkoutconfirmationBody #column-center #orderTotals > #ottotal > :is(.lineTitle, .totalBox) {
    font-size: 18px;
    font-weight: bold;
  }
  #checkoutpaymentBody #column-center #checkoutOrderTotals > br.clearBoth,
  #checkoutconfirmationBody #column-center #orderTotals > br.clearBoth { display: none; }

  /* -------------------------------------------- step 3: review cards
     billing, delivery and comments as cards with their Edit at the top right */
  #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) {
    position: relative;
    float: none;
    width: auto;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #ffffff);
    box-sizing: border-box;
  }
  #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > .buttonRow {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
  }
  #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > .buttonRow > :is(.ns-btn, input[type="submit"], button) { width: auto; }
  #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto, #order-comments) > h2 {
    float: none;
    margin: 0 84px 8px 0; /* room for Edit, beside the heading's box, not under it */
    font-size: 17px;
    line-height: 1.35;
  }
  #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) address {
    margin: 0;
    font-size: 15px;
    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(--m-line, #e3e4dd);
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    line-height: 1.4;
  }
  #checkoutconfirmationBody #column-center :is(#checkoutBillto, #checkoutShipto) h4 {
    margin: 0;
    color: var(--m-ink, #363636);
    font-size: 15px;
    line-height: 1.45;
  }
  #checkoutconfirmationBody #column-center #checkoutBillto .important {
    margin: 8px 0 0;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
  }
  #checkoutconfirmationBody #column-center #checkoutBillto .important:empty,
  #checkoutconfirmationBody #column-center #checkoutBillto .important:not(:has(*)):not(:has(~ *)) { margin: 0; }
  #checkoutconfirmationBody #column-center #checkoutShipto + br.clearBoth { display: none; }
  #checkoutconfirmationBody #column-center #order-comments > div:not(.buttonRow) { color: var(--m-ink-2, #6b6e6f); font-size: 15px; }
  /* Products heading and its Edit on one line, then the items as one card */
  #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart {
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 44px;
  }
  #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart + .buttonRow {
    float: right;
    clear: none;
    margin: 12px 8px 0 0;
  }
  #checkoutconfirmationBody #column-center #checkoutConfirmDefaultHeadingCart + .buttonRow > :is(.ns-btn, input[type="submit"], button) { width: auto; }
  #checkoutconfirmationBody #column-center #cartContentsDisplay,
  #checkoutconfirmationBody #column-center #cartContentsDisplay > tbody { display: block; width: 100%; border: 0; }
  #checkoutconfirmationBody #column-center #cartContentsDisplay {
    margin: 8px 0 12px;
    padding: 4px 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #ffffff);
    box-sizing: border-box;
  }
  #checkoutconfirmationBody #column-center #cartContentsDisplay tr.cartTableHeading { display: none; }
  #checkoutconfirmationBody #column-center #cartContentsDisplay tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0;
    background: none;
  }
  #checkoutconfirmationBody #column-center #cartContentsDisplay tr + tr { border-top: 1px solid var(--m-line, #e3e4dd); }
  #checkoutconfirmationBody #column-center #cartContentsDisplay td {
    display: block;
    padding: 0;
    border: 0;
    color: var(--m-ink, #363636);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
  }
  #checkoutconfirmationBody #column-center #cartContentsDisplay .cartQuantity { color: var(--m-ink-2, #6b6e6f); white-space: nowrap; }
  #checkoutconfirmationBody #column-center #cartContentsDisplay .cartProductDisplay { font-weight: bold; }
  #checkoutconfirmationBody #column-center #cartContentsDisplay .cartTotalDisplay { font-weight: bold; text-align: right; white-space: nowrap; }
  #checkoutconfirmationBody #column-center #cartContentsDisplay .cartAttribsList { margin: 2px 0 0; padding: 0; list-style: none; }
  #checkoutconfirmationBody #column-center #cartContentsDisplay .cartAttribsList li {
    color: var(--m-ink-2, #6b6e6f);
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
  }
  #checkoutconfirmationBody #column-center #checkout_confirmation .buttonRow { margin-top: 20px; }

  /* ------------------------------------- change an address: the address book
     each saved address was a radio and a name, with the address below outside the
     label, so only the 24px radio or the name selected it. Each entry is now one
     card that selects as a whole: the name row (radio and label) and the address share
     one grid cell; the label's ::after covers the card, and the address above it lets
     taps through. Entries 1-12 (Zen Cart allows 5 by default); any later ones fall
     back to a row and an address under it. */
  :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 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #ffffff);
    cursor: pointer;
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected):has(input:checked) {
    border-color: var(--m-brand, #4f665a);
    box-shadow: inset 0 0 0 1px var(--m-brand, #4f665a);
    background: var(--m-surface-2, #f4f5ef);
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected):has(input:focus-visible) {
    outline: 2px solid var(--m-brand, #4f665a);
    outline-offset: 2px;
  }
  :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;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--m-brand, #4f665a);
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) label {
    display: block;
    padding: 1px 0;
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-weight: bold;
    line-height: 22px;
    cursor: pointer;
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(.moduleRow, .moduleRowSelected) label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  :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: 40px 16px 14px 53px; /* under the name, lined up with it */
    color: var(--m-ink, #363636);
    font-size: 15px;
    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; }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(11), address:nth-of-type(11)) { grid-row: 12; }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center form[name="checkout_address_book"] fieldset > :is(div:nth-of-type(12), address:nth-of-type(12)) { grid-row: 13; }
  /* the current address at the top of the page as a quiet card, its note under it */
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .instructions {
    margin: 0 0 20px;
    color: var(--m-ink-2, #6b6e6f);
    font-size: 14px;
    line-height: 1.5;
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .instructions address.back {
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef);
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-style: normal;
    line-height: 1.55;
  }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .centerColumn form.group { margin-bottom: 24px; }
  :is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) #column-center .centerColumn form.group > .buttonRow { margin-top: 4px; }

  /* ------------------------------------------------- after the order / sign-up
     thank-you page: its headings are h2.h2dl with the shared heading rule's -1.2px
     tracking, which crowds the letters at this size */
  #checkoutsuccessBody #column-center h2.h2dl {
    margin: 20px 0 8px;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  #checkoutsuccessBody #column-center h2.h2dl:first-of-type { margin-top: 0; font-size: 24px; }
  /* account created: each saved address's Edit and Delete side by side (two full-width
     buttons per address made a long column of buttons), the entries split by a hairline */
  #createaccountsuccessBody #column-center fieldset .buttonRow:has(> .ns-btn + .ns-btn) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #createaccountsuccessBody #column-center fieldset h3.addressBookDefaultName { margin: 0 0 4px; font-size: 15px; }
  #createaccountsuccessBody #column-center fieldset br.clearBoth + h3.addressBookDefaultName {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--m-line, #e3e4dd);
  }
  #createaccountsuccessBody #column-center fieldset address {
    font-size: 15px;
    font-style: normal;
    line-height: 1.5;
  }
}

/* ------------------------------------------------- narrowest phones (320px)
   the cart card's quantity row (box, Update Cart, total) was 3px too wide, so the
   button label broke over two lines: a little less padding and gap */
@media (max-width: 359px) {
  #shoppingcartBody #column-center #cartContentsDisplay tr:not(.tableHeading) { column-gap: 8px; padding: 12px; }
}

/* ---------------------------------------------- wider screens (600-1023px)
   room for the Change Address button beside the address, as on desktop */
@media (min-width: 600px) and (max-width: 1023px) {
  #checkoutshippingBody #column-center #checkoutShipto,
  #checkoutpaymentBody #column-center #checkoutBillto {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #checkoutshippingBody #column-center #checkoutShipto > .buttonRow > :is(.ns-btn, input[type="submit"], button),
  #checkoutpaymentBody #column-center #checkoutBillto > .buttonRow > :is(.ns-btn, input[type="submit"], button) { width: auto; }
  /* the empty cart's product grid steps up like the listing pages: 3-up here */
  #shoppingcartBody #column-center #whatsNew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) and (max-width: 1023px) {
  #shoppingcartBody #column-center #whatsNew { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}