/* ==========================================================================
   MOBILE REDESIGN: ACCOUNT PAGES (2026-10-24, spec MOBILE-REDESIGN-SPEC.md "account")
   theme9star port of theme-bahai/css/stylesheet_zz_9star_m_account.css (BMS final,
   sha256 286e9740c2d5afe7e1313f09bc0d6dccc506a66c4c2b10dcbb37e0e88cfbbb3a).
   My account, edit, password, newsletters, notifications, address book (list, new, edit,
   delete), order history, order details, gift certificates (send, redeem, FAQ), discount
   coupon, order status, unsubscribe.
   Phones and tablets only: every rule sits inside max-width: 1023px, so desktop (1024px
   and up) cannot change. Every selector starts with one of these pages' body ids, most
   with the page's .centerColumn id as well.

   9 Star differences from the BMS file:
   - stylesheet_zz_shop.css sorts AFTER this file and lays the account, address-book,
     order and gift-certificate pages out on desktop (amber legend tabs, charcoal table
     heads, 14px fields capped at 380px in a 150px label column, the account links as
     bands with an amber chevron, its own address cards). Its selectors carry one id
     (`body:is(#xBody) .centerColumn ...`) or two (`#accountBody #prevOrders ...`), so
     every rule here carries three or more. It also sets two !important margins (every
     fieldset 24px below, every legend 14px below); the legend's is matched below with
     !important, the fieldset's 24px is kept (theme sheets force 20px there anyway).
   - The address book is 9 Star's own template (templates/tpl_address_book_default.php:
     .addressBookHead, .addressBookCards > .addressBookCard, .addressBookButtons), so its
     section is written for that markup; the BMS rules for the stock markup are left out.
   - Colours: amber is a fill (2.1:1 as text on white). Where BMS uses its brand colour
     for text, an outline or an icon, this file uses --m-brand-text (#8a6400, 5.4:1): the
     legends, the "show all" link, status chips, focus rings, the chevrons. Status chips
     and the primary address sit on the amber wash (--m-brand-soft). Card shadows are
     tinted charcoal, the field edge a warm grey to match 9 Star's #e4e2df lines, and the
     "saved" message teal (9 Star's #30a688 family), since amber reads as a warning.
   - Headings keep 9 Star's heading grey (#525554, stylesheet_main.css and zz_shop) and
     drop zz_shop's uppercase tracking at the spec's 20px and 17px sizes.

   Tokens come from the shell sheet (stylesheet_zz_9star_m_shell.css); each var() carries
   the 9 Star value as its fallback. Buttons: this file only lays them out (width, rows);
   their look (.ns-btn, the image button upgrade) belongs to the shell.
   Icons: Phosphor Icons 2.1.1 (regular, MIT), caret-right, caret-down and warning-circle,
   copied from @phosphor-icons/core as data URIs (fill recoloured for 9 Star).
   ========================================================================== */

@media (max-width: 1023px) {

  /* ------------------------------------------------------------------ type
     The account pages kept the theme's 12px text with a 15px line height (14px on phones
     after wave 3), and zz_shop's 44px / 32px page headings with -2px tracking: small text
     under a shouting heading. Spec type scale: h1 26px, h2 20px, running text 15px / 1.55
     (16px on tablets, further down). */
  :is(#accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #accounthistoryBody,
      #accounthistoryinfoBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody,
      #orderstatusBody, #unsubscribeBody) #contentMainWrapper #column-center h1:not(#h1) {
    margin: 4px 0 16px;
    padding: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.3px;
    text-align: left;
  }
  /* zz_shop prints these as 15px uppercase labels with .04em tracking; at the spec's 20px
     that would shout, so they are set in sentence case */
  :is(#accountBody, #addressbookBody, #accounthistoryinfoBody, #gvsendBody, #gvfaqBody)
    #contentMainWrapper #column-center .centerColumn h2 {
    margin: 24px 0 12px;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
  }

  /* running text, wherever these pages print it */
  #addressbookBody #addressBookDefault .instructions,
  #accountnotificationsBody #accountNotifications .notice,
  #gvsendBody #gvSendDefault #gvSendDefaultMainContent,
  #gvredeemBody #gvRedeemDefault .content,
  #gvfaqBody #gvFaqDefault #gvFaqDefaultContent,
  #discountcouponBody #discountcouponInfo #discountcouponInfoMainContent,
  #orderstatusBody #accountHistInfo fieldset,
  #unsubscribeBody #column-center #unsubDefault {
    font-size: 15px;
    line-height: 1.55;
    color: var(--m-ink, #2d2d2d);
  }
  /* small print: the gift certificate email notice and the order-page download hint */
  #gvsendBody #gvSendDefault .advisory,
  #accounthistoryinfoBody #accountHistInfo #headingDownloads {
    margin: 16px 0 12px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
    color: var(--m-ink-2, #5f6264);
  }

  /* page-level messages (saved, not found, errors) as a tinted box with an icon, not
     the theme's thin coloured line of 12px text */
  :is(#accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #accounthistoryBody,
      #accounthistoryinfoBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody,
      #orderstatusBody, #unsubscribeBody) #contentMainWrapper #column-center
    :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) {
    margin: 0 0 16px;
    padding: 12px 14px 12px 42px;
    border: 0;
    border-radius: var(--m-radius, 10px);
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    background: #fdeceb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23a3271d'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") 13px 13px / 20px 20px no-repeat;
    color: #8a1f16;
  }
  /* "saved": teal (9 Star's #30a688 family; the text at 5.7:1), not amber, which reads as a
     warning */
  :is(#accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #accounthistoryBody,
      #gvsendBody, #gvredeemBody, #discountcouponBody, #orderstatusBody) #contentMainWrapper #column-center .messageStackSuccess {
    background-color: #e8f5f1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231d6b58'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E");
    color: #1d6b58;
  }
  :is(#accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #accounthistoryBody,
      #accounthistoryinfoBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody,
      #orderstatusBody, #unsubscribeBody) #contentMainWrapper #column-center
    :is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution) img { display: none; }

  /* ================================================================ MY ACCOUNT
     The account home read as a desktop page squeezed down: "(show all orders)" alone on a
     line above its heading, orders as a run of bold "Date: / No.: / Ship To:" labels
     (zz_shop's phone rows), and the account links as 13px bands. Now: the heading with its
     "show all" link on one row, one card per order, and the links as app-style rows with
     a chevron, grouped in two cards. */
  #accountBody #accountDefault {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
  }
  #accountBody #accountDefault > * { flex: 0 0 100%; order: 3; min-width: 0; }
  #accountBody #accountDefault > h1 { order: 0; }
  #accountBody #accountDefault > br { display: none; }
  #accountBody #column-center #accountDefault > #previous-orders { order: 1; flex: 1 1 auto; margin-bottom: 12px; }
  #accountBody #accountDefault > p.forward { order: 2; flex: 0 0 auto; float: none; margin: 0; }
  #accountBody #column-center #accountDefault > p.forward a {
    display: inline-block;
    padding: 12px 0; /* a 44px tap target */
    font-size: 15px;
    line-height: 20px;
    color: var(--m-brand-text, #8a6400);
    font-weight: bold;
    text-decoration: none;
  }

  /* ------------------------------------------------------------ order cards */
  #accountBody #accountDefault #prevOrders,
  #accountBody #accountDefault #prevOrders > tbody { display: block; width: auto; margin: 0; border: 0; }
  #accountBody #accountDefault #prevOrders > tbody { display: grid; gap: 12px; }
  #accountBody #accountDefault #prevOrders tr.tableHeading { display: none; }
  #accountBody #accountDefault #prevOrders tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id status" "date total" "address address" "view view";
    align-items: center;
    gap: 2px 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(45, 45, 45, .06);
  }
  #accountBody #accountDefault #prevOrders td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    color: var(--m-ink, #2d2d2d);
  }
  /* the cells carry no labels of their own here: the order number, date and amount say
     what they are. The phone template's inline "Date:" labels (b.hide) stay for screen
     readers only; zz_shop's ::before labels go. */
  #accountBody #accountDefault #prevOrders td b.hide {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #accountBody #accountDefault #prevOrders td::before { content: none; }
  #accountBody #accountDefault #prevOrders .accountOrderId { grid-area: id; font-size: 17px; font-weight: bold; }
  #accountBody #accountDefault #prevOrders .accountOrderDate { grid-area: date; color: var(--m-ink-2, #5f6264); }
  #accountBody #accountDefault #prevOrders .accountOrderTotal { grid-area: total; font-weight: bold; text-align: right; }
  #accountBody #accountDefault #prevOrders .accountOrderStatus {
    grid-area: status;
    justify-self: end;
    padding: 3px 10px;
    border-radius: var(--m-radius, 10px);
    background: var(--m-brand-soft, #fff8e1);
    color: var(--m-brand-text, #8a6400);
    font-size: 13px;
    font-weight: bold;
  }
  #accountBody #accountDefault #prevOrders .accountOrderAddress {
    grid-area: address;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--m-line, #e4e2df);
    font-size: 14px;
    color: var(--m-ink-2, #5f6264);
  }
  #accountBody #accountDefault #prevOrders .accountOrderAddress::before { content: "Ship to "; font-weight: bold; }
  /* a phone or tablet template prints its own "Ship To:" for screen readers: the visible
     label is not read a second time (browsers without the alt syntax keep the first) */
  #accountBody #accountDefault #prevOrders .accountOrderAddress:has(b.hide)::before { content: "Ship to " / ""; }
  #accountBody #accountDefault #prevOrders .accountOrderAddress address { display: inline-block; vertical-align: top; padding: 0; font-style: normal; }
  #accountBody #accountDefault #prevOrders .accountOrderViewButton { grid-area: view; margin-top: 12px; text-align: left; }

  /* ------------------------------------------------- account links as rows
     zz_shop already draws them as bands with an amber "›"; here they become 52px rows
     in two bordered groups, 15px text and a Phosphor caret in the brand text colour */
  #accountBody #accountDefault #accountLinksWrapper { float: none; width: auto; margin: 8px 0 0; }
  #accountBody #column-center #accountDefault #accountLinksWrapper h2 { margin: 24px 0 8px; font-size: 17px; }
  #accountBody #accountDefault #accountLinksWrapper ul.list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    overflow: hidden;
  }
  #accountBody #accountDefault #accountLinksWrapper ul.list li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    background: none;
  }
  #accountBody #accountDefault #accountLinksWrapper ul.list li + li { border-top: 1px solid var(--m-line, #e4e2df); }
  #accountBody #accountDefault #accountLinksWrapper ul.list li a {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.35;
    color: var(--m-ink, #2d2d2d);
    text-decoration: none;
  }
  #accountBody #accountDefault #accountLinksWrapper ul.list li a::after {
    content: "";
    position: static; /* zz_shop pins its "›" glyph at the right edge */
    flex: 0 0 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238a6400'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  }
  #accountBody #accountDefault #accountLinksWrapper ul.list li a:active { background: var(--m-surface-2, #f7f6f3); }
  #accountBody #accountDefault #accountLinksWrapper ul.list li a:focus-visible { outline: 2px solid var(--m-brand-text, #8a6400); outline-offset: -2px; }

  /* gift certificate balance (shown only with a balance): zz_shop's amber-ruled panel as
     a plain card like the rest of the page */
  #accountBody #column-center #accountDefault #sendSpendWrapper {
    margin: 24px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f7f6f3);
  }

  /* ============================================================ ORDER HISTORY
     Each order is a fieldset whose legend sat as an amber tab over a grey box, the
     status on its own line under it. Now a card: order number and status chip, the
     facts below, View at the bottom. */
  #accounthistoryBody #accountHistoryDefault fieldset {
    display: flow-root;
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(45, 45, 45, .06);
  }
  /* a floated legend is laid out as an ordinary box inside its fieldset; zz_shop forces
     14px under every legend with !important */
  #accounthistoryBody #accountHistoryDefault fieldset legend {
    float: left;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: bold;
    line-height: 28px;
    color: var(--m-ink, #2d2d2d);
  }
  #accounthistoryBody #accountHistoryDefault fieldset .notice.forward {
    float: none;
    clear: both;
    display: inline-block;
    margin: 4px 0 0;
    padding: 3px 10px;
    border-radius: var(--m-radius, 10px);
    background: var(--m-brand-soft, #fff8e1);
    color: var(--m-brand-text, #8a6400);
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-align: left;
  }
  #accounthistoryBody #accountHistoryDefault fieldset br.clearBoth { clear: both; }
  #accounthistoryBody #accountHistoryDefault fieldset .content {
    float: none;
    width: auto;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--m-ink, #2d2d2d);
    text-align: left;
  }
  #accounthistoryBody #accountHistoryDefault fieldset .content.back { margin-top: 8px; }
  #accounthistoryBody #accountHistoryDefault fieldset .content.forward { margin: 12px 0 0; }
  #accounthistoryBody #accountHistoryDefault .navSplitPagesResult {
    float: none;
    margin: 4px 0 8px;
    font-size: 13px;
    color: var(--m-ink-2, #5f6264);
    text-align: center;
  }

  /* ============================================================ ORDER DETAILS
     Downloads first, as the page prints them: one card per file, the Download button
     across the bottom of its card where a thumb finds it (zz_shop's phone rows put a
     106px button beside the text). The products, totals, status history and addresses
     follow as cards instead of zz_shop's charcoal-headed tables. */
  #accounthistoryinfoBody #accountHistInfo #downloads,
  #accounthistoryinfoBody #accountHistInfo #downloads > tbody { display: block; width: auto; margin: 0; border: 0; }
  #accounthistoryinfoBody #accountHistInfo #downloads > tbody { display: grid; gap: 12px; }
  #accounthistoryinfoBody #accountHistInfo #downloads tr.tableHeading { display: none; }
  #accounthistoryinfoBody #accountHistInfo #downloads tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "file" "size" "expiry" "count" "button";
    gap: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(45, 45, 45, .06);
  }
  #accounthistoryinfoBody #accountHistInfo #downloads td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadProductNameLink { grid-area: name; font-size: 17px; font-weight: bold; line-height: 1.35; }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadProductNameLink a { display: inline-block; padding: 2px 0; color: var(--m-ink, #2d2d2d); text-decoration: none; }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadFilename {
    grid-area: file;
    margin: 2px 0 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--m-ink, #2d2d2d);
    overflow-wrap: anywhere;
  }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadFilesize { grid-area: size; }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadExpiry { grid-area: expiry; }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadCounts { grid-area: count; }
  #accounthistoryinfoBody #accountHistInfo #downloads :is(.downloadFilesize, .downloadExpiry, .downloadCounts) {
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-ink-2, #5f6264);
  }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadFilesize::before { content: "Size: "; }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadExpiry::before { content: "Link expires: "; }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadCounts::before { content: "Downloads left: "; }
  #accounthistoryinfoBody #accountHistInfo #downloads .downloadButton { grid-area: button; margin-top: 14px; }

  /* order date: floated right under the downloads, away from the order it dates */
  #accounthistoryinfoBody #accountHistInfo > div.forward {
    float: none;
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--m-ink-2, #5f6264);
    text-align: left;
  }
  #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryDetailedOrder { margin-top: 4px; }
  #accounthistoryinfoBody #accountHistInfo hr { display: none; }

  /* products: a three-column table under a charcoal head row, 13px cells; a card here,
     joined to the totals card under it (zz_shop's 18px table margin would part them) */
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading,
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading > tbody { display: block; width: auto; margin: 0; border: 0; }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading {
    padding: 0 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px) var(--m-radius-lg, 14px) 0 0;
    background: var(--m-surface, #fff);
  }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading tr.tableHeading { display: none; }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 10px;
    padding: 14px 0;
  }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading tr + tr { border-top: 1px solid var(--m-line, #e4e2df); }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1.45;
    color: var(--m-ink, #2d2d2d);
    text-align: left;
  }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading .accountProductDisplay > a { font-weight: bold; color: var(--m-ink, #2d2d2d); }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading .orderAttribsList {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-ink-2, #5f6264);
  }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading .accountTotalDisplay { text-align: right; }

  /* totals: amount and title pairs printed amount first, both floated right. A two-column
     grid, title left and amount right; "dense" fills each title in beside its amount. */
  #accounthistoryinfoBody #accountHistInfo #orderTotals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row dense;
    gap: 6px 0;
    margin: 0 0 8px;
    padding: 14px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-top: 0;
    border-radius: 0 0 var(--m-radius-lg, 14px) var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f7f6f3);
  }
  #accounthistoryinfoBody #accountHistInfo #orderTotals br { display: none; }
  #accounthistoryinfoBody #accountHistInfo #orderTotals > div {
    float: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--m-ink, #2d2d2d);
  }
  #accounthistoryinfoBody #accountHistInfo #orderTotals .lineTitle { grid-column: 1; text-align: left; }
  #accounthistoryinfoBody #accountHistInfo #orderTotals .amount { grid-column: 2; padding-left: 12px; text-align: right; }
  /* the grand total: the last pair (each pair ends with its <br>) */
  #accounthistoryinfoBody #accountHistInfo #orderTotals > .lineTitle:nth-last-child(2),
  #accounthistoryinfoBody #accountHistInfo #orderTotals > .amount:nth-last-child(3) {
    padding-top: 8px;
    border-top: 1px solid var(--m-line, #e4e2df);
    font-size: 17px;
    font-weight: bold;
  }

  /* status history: a three-column table whose long comment squeezed into ~200px */
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus,
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus > tbody { display: block; width: auto; margin: 0; border: 0; }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus {
    padding: 0 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
  }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus tr.tableHeading { display: none; }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    padding: 12px 0;
  }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus tr + tr { border-top: 1px solid var(--m-line, #e4e2df); }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    line-height: 1.55;
    color: var(--m-ink, #2d2d2d);
    text-align: left;
  }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus td:first-child { color: var(--m-ink-2, #5f6264); }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus td:nth-child(2) { font-weight: bold; }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus td:nth-child(3) { grid-column: 1 / -1; }

  /* delivery and billing: two cards (side by side from 600px, further down) */
  #accounthistoryinfoBody #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) {
    float: none;
    width: auto;
    margin: 24px 0 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-sizing: border-box;
  }
  #accounthistoryinfoBody #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) + :is(#myAccountShipInfo, #myAccountPaymentInfo) { margin-top: 12px; }
  #accounthistoryinfoBody #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) h3 {
    margin: 0 0 6px;
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-ink, #2d2d2d);
  }
  #accounthistoryinfoBody #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) h4 {
    margin: 12px 0 2px;
    font-size: 13px;
    color: var(--m-ink-2, #5f6264);
  }
  #accounthistoryinfoBody #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) :is(address, div) {
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-style: normal;
    line-height: 1.5;
    color: var(--m-ink, #2d2d2d);
  }

  /* ======================================================= ADDRESS BOOK (9 Star)
     9 Star's own template: a heading row with the entry limit, the primary-address note,
     one .addressBookCard per entry (name, address, its own Edit and Delete; the primary
     one has Edit only), then Back and Add Address. zz_shop draws 210px auto-fill cards
     with a 4px top rule (amber on the primary), 11-14px text and 6px between buttons.
     Here: one card per row on phones (two from 600px, further down), 14px radius, the
     primary card in the amber wash with an amber edge (zz_shop's own "selected address"
     look from the checkout address cards), Edit and Delete splitting the card's foot. */
  #addressbookBody #column-center #addressBookDefault .addressBookHead { gap: 2px 16px; margin: 24px 0 0; }
  #addressbookBody #contentMainWrapper #column-center #addressBookDefault .addressBookHead h2 { margin: 0; }
  #addressbookBody #column-center #addressBookDefault .addressBookLimit {
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-ink-2, #5f6264);
  }
  #addressbookBody #column-center #addressBookDefault .addressBookLimit .coming { color: var(--m-ink-2, #5f6264); }
  #addressbookBody #column-center #addressBookDefault .instructions { margin: 8px 0 16px; }

  #addressbookBody #column-center #addressBookDefault .addressBookCards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 24px;
  }
  #addressbookBody #column-center #addressBookDefault .addressBookCard {
    padding: 14px 16px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(45, 45, 45, .06);
  }
  #addressbookBody #column-center #addressBookDefault .addressBookCard.isPrimary {
    border-color: var(--m-brand, #e8a900);
    background: var(--m-brand-soft, #fff8e1);
  }
  #addressbookBody #column-center #addressBookDefault .addressBookCard h3.addressBookDefaultName {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.35;
    color: var(--m-ink, #2d2d2d);
  }
  /* "(primary address)": zz_shop's 11px amber capitals (2.1:1) as a 13px line in the
     brand text colour under the name */
  #addressbookBody #column-center #addressBookDefault .addressBookCard .primaryTag {
    display: block;
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-brand-text, #8a6400);
  }
  #addressbookBody #column-center #addressBookDefault .addressBookCard address {
    margin: 0 0 14px;
    padding: 0; /* the theme's .5em around every address set it in from the name */
    font-size: 15px;
    font-style: normal;
    line-height: 1.5;
    color: var(--m-ink-2, #5f6264);
  }
  #addressbookBody #column-center #addressBookDefault .addressBookCard .buttonRow { gap: 12px; margin-top: auto; }
  #addressbookBody #column-center #addressBookDefault .addressBookCard .buttonRow > .ns-btn { flex: 1 1 0; min-width: 0; }

  /* Back and Add Address: zz_shop's 3px charcoal rule and the two buttons at opposite
     edges; here Back a third, Add Address the rest, as on the forms */
  #addressbookBody #column-center #addressBookDefault .addressBookButtons {
    gap: 12px;
    padding-top: 0;
    border-top: 0;
  }
  #addressbookBody #column-center #addressBookDefault .addressBookButtons > .buttonRow { min-width: 0; }
  #addressbookBody #column-center #addressBookDefault .addressBookButtons > .buttonRow.back { flex: 0 0 calc(35% - 6px); }
  #addressbookBody #column-center #addressBookDefault .addressBookButtons > .buttonRow.forward { flex: 1 1 auto; }
  /* a lone Back (ten entries saved: no Add Address) */
  #addressbookBody #column-center #addressBookDefault .addressBookButtons > .buttonRow.back:only-child { flex: 1 1 auto; }

  /* ===================================================== FORMS (label above, 48px)
     Account edit, password, new and edit address, send gift certificate, redeem code,
     coupon look-up, order status, newsletter and notification choices. Each fieldset is a
     card with its legend as the card's title (zz_shop drew the legend as a white-on-amber
     tab, 2.1:1); labels sit above full-width 48px fields with 16px text, so iOS does not
     zoom. zz_shop put the labels in a 150px column beside 36px fields capped at 380px
     (the phone layer stacked them up to 600px); they go above at every width. */
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookprocessBody, #gvsendBody, #gvfaqBody, #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset {
    display: flow-root; /* not zz_shop's label | field grid */
    min-width: 0;
    padding: 14px 16px 20px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(45, 45, 45, .06);
  }
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookprocessBody, #gvsendBody, #gvfaqBody, #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset legend {
    float: left;
    width: 100%;
    margin: 0 0 4px !important; /* zz_shop: 14px !important */
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.35;
    color: var(--m-brand-text, #8a6400);
  }
  /* "* Required information": floated right of the legend tab; a quiet line under the
     title. The <br> that cleared it would leave an empty line. */
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody)
    #contentMainWrapper #column-center .centerColumn fieldset > .alert.forward + br { display: none; }
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody)
    #contentMainWrapper #column-center .centerColumn fieldset > .alert.forward {
    float: none;
    clear: both;
    justify-self: auto; /* zz_shop's justify-self: end also aligns a block in flow layout */
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-ink-2, #5f6264);
    text-align: left;
  }
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody, #gvsendBody, #gvfaqBody,
      #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset label.inputLabel {
    float: none;
    clear: both;
    display: block;
    width: auto;
    height: auto;
    margin: 12px 0 4px;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px; /* a label is a tap target too: 24px tall */
    color: var(--m-ink, #2d2d2d);
  }
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody, #gvsendBody, #gvfaqBody,
      #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn 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%; /* zz_shop caps the account and address fields at 380px */
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #8c8984; /* warm grey, 3.5:1 on white: a field edge must reach 3:1 (WCAG 1.4.11) */
    border-radius: var(--m-radius, 10px);
    background-color: var(--m-surface, #fff);
    box-shadow: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.3;
    color: var(--m-ink, #2d2d2d);
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
  }
  /* stylesheet_zz_9star.css sets select { height: auto !important } (for the login page's
     26px !important); 48px here needs the same weight */
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody, #gvsendBody, #gvfaqBody,
      #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset select {
    height: 48px !important;
    padding-right: 40px;
    background: var(--m-surface, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235f6264'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat;
  }
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody, #gvsendBody, #gvfaqBody,
      #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset textarea {
    display: block;
    height: auto;
    min-height: 132px;
    padding: 12px 14px;
    resize: vertical;
  }
  /* the focus ring in the brand text colour (zz_shop: an amber ring, 2.1:1) */
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody, #gvsendBody, #gvfaqBody,
      #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset :is(input, select, textarea):focus {
    border-color: var(--m-brand-text, #8a6400);
    outline: 2px solid var(--m-brand-text, #8a6400);
    outline-offset: 0;
  }
  /* a field with a "*" after it (gift certificate, state select) keeps the star on its line */
  :is(#addressbookprocessBody, #gvsendBody)
    #contentMainWrapper #column-center .centerColumn fieldset :is(input, select):has(+ .alert) { width: calc(100% - 28px); }
  /* the state select has a &nbsp; before its star */
  #addressbookprocessBody #contentMainWrapper #column-center .centerColumn fieldset select#stateZone { width: calc(100% - 34px); }
  :is(#addressbookprocessBody, #gvsendBody) #contentMainWrapper #column-center .centerColumn fieldset span.alert {
    display: inline-block;
    width: 16px;
    margin: 0 0 0 4px;
    padding: 0;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    vertical-align: middle;
    color: var(--m-ink-2, #5f6264); /* the theme's light grey .alert (about 2.5:1) */
  }
  /* the gift certificate message box has no star: full width like the label above it */
  #gvsendBody #contentMainWrapper #column-center #gvSendDefault fieldset textarea { width: 100%; }

  /* checkboxes and radios: amber (a fill), each choice a 44px row */
  :is(#accounteditBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookprocessBody)
    #contentMainWrapper #column-center .centerColumn fieldset :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--m-brand, #e8a900);
  }
  :is(#accounteditBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookprocessBody)
    #contentMainWrapper #column-center .centerColumn fieldset :is(input[type="checkbox"], input[type="radio"]) + label {
    padding: 11px 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--m-ink, #2d2d2d);
  }
  /* "Set as Primary Address": the phone layer's full-width rule for zz_shop's form grid
     (fieldset > :is(input, select), stylesheet_zz_9star.css) stretched the box to 254px */
  #addressbookprocessBody #contentMainWrapper #column-center .centerColumn fieldset input#primary { width: 22px; margin-top: 14px; }

  /* order status: the explanation is bare text at the top of the fieldset */
  #orderstatusBody #accountHistInfo > br { display: none; }

  /* ================================================================ BUTTON ROWS
     Back on the left, the page's action on the right, as on desktop, but sized for a
     thumb once the shell turns them into .ns-btn: Back takes a third, the action the
     rest; a lone button takes the whole row. Without the upgrade the image buttons keep
     their own size and sit where they did. */
  :is(#accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #accounthistoryBody,
      #accounthistoryinfoBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody,
      #orderstatusBody, #unsubscribeBody) #column-center .centerColumn
    :is(.buttonRow, .downloadButton, .accountOrderViewButton, fieldset > .content.forward)
    :is(.ns-btn, input[type="submit"], button) {
    width: 100%;
    box-sizing: border-box;
  }
  /* stylesheet_main.css underlines every link in these tables (#prevOrders td a,
     #accountHistInfo td a), which reached the upgraded View and Download Now labels */
  #accountBody #accountDefault #prevOrders td a.ns-btn,
  :is(#accounthistoryinfoBody, #orderstatusBody) #accountHistInfo td a.ns-btn { text-decoration: none; }
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookBody, #addressbookprocessBody, #accounthistoryBody, #gvsendBody, #gvredeemBody,
      #gvfaqBody, #discountcouponBody, #orderstatusBody, #unsubscribeBody) #column-center
    :is(.centerColumn, form, .tie-indent) > .buttonRow {
    float: none;
    clear: both;
    width: 100%;
    margin: 20px 0 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* both present: Back a third on the left, the action two thirds on the right */
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookBody, #addressbookprocessBody, #gvsendBody, #discountcouponBody) #column-center
    :is(.centerColumn, form):has(> .buttonRow.back):has(> .buttonRow.forward) > .buttonRow.back {
    float: left;
    clear: left;
    width: calc(35% - 6px);
  }
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookBody, #addressbookprocessBody, #gvsendBody, #discountcouponBody) #column-center
    :is(.centerColumn, form):has(> .buttonRow.back):has(> .buttonRow.forward) > .buttonRow.forward {
    float: right;
    clear: right;
    width: 65%;
    text-align: right;
  }
  /* the forms that end without a clearing <br> hold their floated buttons */
  :is(#accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody, #addressbookprocessBody)
    #column-center .centerColumn form { display: flow-root; }
  #addressbookprocessBody #column-center #addressBookProcessDefault { display: flow-root; }
  /* order status: Continue sits inside the fieldset */
  #orderstatusBody #accountHistInfo fieldset > .buttonRow.forward { float: none; margin: 20px 0 0; text-align: left; }

  /* ========================================================== ADDRESS DELETE
     "Are you sure ...?" is the page's question (the phone layer made it 13px grey); the
     address it asks about reads as the card it is in the address book. zz_shop lays this
     page out as a grid (Delete, then Back, at the left; its address card min 280px with a
     rust top rule): the grid stays, with Back a third at the left and Delete the rest, as
     on the forms. Both labels are short, so they share the row at every width. */
  #addressbookprocessBody #column-center #addressBookProcessDefault:has(> address) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-auto-flow: row dense;
    column-gap: 12px;
    justify-items: stretch;
  }
  #addressbookprocessBody #column-center #addressBookProcessDefault > div.alert:not(.forward) {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.45;
    color: var(--m-ink, #2d2d2d);
  }
  #addressbookprocessBody #column-center #addressBookProcessDefault > address {
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    font-size: 15px;
    font-style: normal;
    line-height: 1.5;
    color: var(--m-ink, #2d2d2d);
  }
  /* "dense" puts Back (column 1) beside Delete (column 2), which the page prints first */
  #addressbookprocessBody #column-center #addressBookProcessDefault:has(> address) > .buttonRow {
    float: none;
    width: auto;
    margin: 20px 0 0;
  }
  #addressbookprocessBody #column-center #addressBookProcessDefault:has(> address) > .buttonRow.back { grid-column: 1; }
  #addressbookprocessBody #column-center #addressBookProcessDefault:has(> address) > .buttonRow.forward { grid-column: 2; }
  /* the Delete button is inside its own form in the row */
  #addressbookprocessBody #addressBookProcessDefault > .buttonRow.forward form { margin: 0; }

  /* ======================================================= GIFT CERTIFICATES
     Send: the balance box is a small tinted card under the heading. FAQ: the five
     questions were links joined by <br>s; now link rows with a chevron like the account
     page. */
  #gvsendBody #gvSendDefault #sendSpendWrapper {
    padding: 14px 16px;
    border: 0;
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f7f6f3);
  }
  #gvsendBody #contentMainWrapper #column-center #gvSendDefault #sendSpendWrapper h2 {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--m-ink-2, #5f6264);
  }
  #gvsendBody #gvSendDefault #gvSendDefaultBalance {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--m-ink, #2d2d2d);
  }
  #gvsendBody #gvSendDefault > br.clearBoth { display: none; }
  #gvsendBody #gvSendDefault #gvSendDefaultMainContent { margin: 0 0 16px; }

  #gvfaqBody #gvFaqDefault .tie,
  #gvfaqBody #gvFaqDefault .tie-indent { margin: 0; padding: 0; border: 0; background: none; }
  #gvfaqBody #gvFaqDefault #gvFaqDefaultMainContent {
    float: none;
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    overflow: hidden;
  }
  #gvfaqBody #gvFaqDefault #gvFaqDefaultMainContent br { display: none; }
  #gvfaqBody #gvFaqDefault #gvFaqDefaultMainContent a[href] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: normal; /* the theme bolds them; the account page's rows are regular */
    line-height: 1.35;
    color: var(--m-ink, #2d2d2d);
    text-decoration: none;
  }
  #gvfaqBody #gvFaqDefault #gvFaqDefaultMainContent a[href] + a[href],
  #gvfaqBody #gvFaqDefault #gvFaqDefaultMainContent a[href] + br + a[href] { border-top: 1px solid var(--m-line, #e4e2df); }
  #gvfaqBody #gvFaqDefault #gvFaqDefaultMainContent a[href]::after {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238a6400'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  }
  #gvfaqBody #gvFaqDefault #gvFaqDefaultMainContent a[href]:active { background: var(--m-surface-2, #f7f6f3); }
  #gvfaqBody #column-center #gvFaqDefault #gvFaqDefaultSubHeading:empty { display: none; }
  #gvfaqBody #gvFaqDefault .tie-indent > br.clearBoth { display: none; }
  #gvfaqBody #gvFaqDefault form { margin-top: 24px; }

  /* unsubscribe: the text is loose in the column, after a stray <br> */
  #unsubscribeBody #unsubDefault > br:first-of-type { display: none; }
}

/* ------------------------------------------------------------ narrow phones
   "Submit the Information" does not fit two thirds of a 320-399px row on one line:
   Back and the action each take the full row, in the order the page prints them. */
@media (max-width: 399px) {
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookBody, #addressbookprocessBody, #gvsendBody, #discountcouponBody) #column-center
    :is(.centerColumn, form):has(> .buttonRow.back):has(> .buttonRow.forward) > .buttonRow:is(.back, .forward) {
    float: none;
    width: 100%;
    margin-top: 12px;
  }
}

/* ------------------------------------------------- large phones and tablets (600px+)
   The cards stop at the content width rather than stretching to 990px rows: orders and
   download cards two to a row, address entries two to a row, the account links' two
   groups side by side, delivery and billing side by side. */
@media (min-width: 600px) and (max-width: 1023px) {
  #accountBody #accountDefault #prevOrders > tbody,
  #accounthistoryinfoBody #accountHistInfo #downloads > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #accountBody #accountDefault #accountLinksWrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 16px;
    align-items: start;
  }

  #accounthistoryBody #accountHistoryDefault {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    align-items: start;
  }
  #accounthistoryBody #accountHistoryDefault > :not(fieldset) { grid-column: 1 / -1; }

  /* 9 Star's address cards: two to a row (zz_shop's 210px auto-fill made three or four
     narrow ones on tablets) */
  #addressbookBody #column-center #addressBookDefault .addressBookCards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  #accounthistoryinfoBody #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) { width: calc(50% - 8px); }
  #accounthistoryinfoBody #accountHistInfo #myAccountShipInfo { float: left; }
  #accounthistoryinfoBody #accountHistInfo #myAccountShipInfo + #myAccountPaymentInfo { float: right; margin-top: 24px; }
}

/* ------------------------------------------------------------- tablets (768px+)
   Spec type: running text 16px, h1 30px. Single-column form and text pages stop at the
   content measure (720px), centred, instead of 48px fields 970px wide. */
@media (min-width: 768px) and (max-width: 1023px) {
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookprocessBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody,
      #orderstatusBody, #unsubscribeBody) #column-center .centerColumn {
    max-width: var(--m-measure, 720px);
    margin-left: auto;
    margin-right: auto;
  }
  :is(#accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #accounthistoryBody,
      #accounthistoryinfoBody, #gvsendBody, #gvredeemBody, #gvfaqBody, #discountcouponBody,
      #orderstatusBody, #unsubscribeBody) #contentMainWrapper #column-center h1:not(#h1) { font-size: 30px; }
  #addressbookBody #addressBookDefault .instructions,
  #accountnotificationsBody #accountNotifications .notice,
  #gvsendBody #gvSendDefault #gvSendDefaultMainContent,
  #gvredeemBody #gvRedeemDefault .content,
  #gvfaqBody #gvFaqDefault #gvFaqDefaultContent,
  #discountcouponBody #discountcouponInfo #discountcouponInfoMainContent,
  #orderstatusBody #accountHistInfo fieldset,
  #unsubscribeBody #column-center #unsubDefault { font-size: 16px; }
}