/* ==========================================================================
   MOBILE REDESIGN: ACCOUNT PAGES (2026-10-24, spec MOBILE-REDESIGN-SPEC.md "account")
   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: three ids beat the older phone rules in
   stylesheet_zz_9star.css without !important.
   Tokens come from the shell sheet (stylesheet_zz_9star_m_shell.css); each var() carries
   the BMS value as its fallback so these pages render the same before it lands.
   Buttons: this file only lays them out (width, rows). Their look (.ns-btn, the image
   button upgrade) belongs to the shell. Upgraded buttons are matched as .ns-btn, or as
   input[type=submit] / button in case the upgrade gives an input no class.
   Icons: Phosphor Icons 2.1.1 (regular, MIT), caret-right, caret-down and warning-circle,
   copied from @phosphor-icons/core as data URIs.
   ========================================================================== */

@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): small and dense for a broad, often older audience. Spec type scale:
     h1 26px, h2 20px, running text 15px / 1.55 (16px on tablets, further down). The old
     h1 rule (#column-center h1:not(#h1), 32px, 26px under 480px) is beaten by the
     #contentMainWrapper prefix. */
  :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;
    font-size: 26px;
    line-height: 1.2;
    color: var(--m-ink, #363636);
  }
  :is(#accountBody, #addressbookBody, #accounthistoryinfoBody, #gvsendBody, #gvfaqBody)
    #contentMainWrapper #column-center .centerColumn h2 {
    margin: 24px 0 12px;
    font-size: 20px;
    line-height: 1.25;
    color: var(--m-ink, #363636);
  }

  /* 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, #363636);
  }
  /* 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, #6b6e6f);
  }

  /* 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;
  }
  :is(#accountBody, #accounteditBody, #accountpasswordBody, #accountnewslettersBody,
      #accountnotificationsBody, #addressbookBody, #addressbookprocessBody, #accounthistoryBody,
      #gvsendBody, #gvredeemBody, #discountcouponBody, #orderstatusBody) #contentMainWrapper #column-center .messageStackSuccess {
    background-color: #eef2ec;
    background-image: 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,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: var(--m-brand, #4f665a);
  }
  :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, and
     the account links as underlined 12px sentences 24px apart. 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 #accountDefault > p.forward a {
    display: inline-block;
    padding: 12px 0; /* a 44px tap target */
    font-size: 15px;
    line-height: 20px;
    color: var(--m-brand, #4f665a);
    font-weight: bold;
    text-decoration: none;
  }

  /* ------------------------------------------------------------ order cards */
  #accountBody #accountDefault #prevOrders,
  #accountBody #accountDefault #prevOrders > tbody { display: block; width: auto; 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, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(79, 102, 90, .06);
  }
  #accountBody #accountDefault #prevOrders td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    color: var(--m-ink, #363636);
  }
  /* 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; the older phone sheet'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, #6b6e6f); }
  #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-surface-2, #f4f5ef);
    color: var(--m-brand, #4f665a);
    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, #e3e4dd);
    font-size: 14px;
    color: var(--m-ink-2, #6b6e6f);
  }
  #accountBody #accountDefault #prevOrders .accountOrderAddress::before { content: "Ship to "; font-weight: bold; }
  #accountBody #accountDefault #prevOrders .accountOrderAddress address { display: inline-block; vertical-align: top; font-style: normal; }
  #accountBody #accountDefault #prevOrders .accountOrderViewButton { grid-area: view; margin-top: 12px; text-align: left; }

  /* ------------------------------------------------- account links as rows */
  #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, #e3e4dd);
    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;
    background: none;
  }
  #accountBody #accountDefault #accountLinksWrapper ul.list li + li { border-top: 1px solid var(--m-line, #e3e4dd); }
  #accountBody #accountDefault #accountLinksWrapper ul.list li a {
    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, #363636);
    text-decoration: none;
  }
  #accountBody #accountDefault #accountLinksWrapper ul.list li a::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='%236b6e6f'%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, #f4f5ef); }
  #accountBody #accountDefault #accountLinksWrapper ul.list li a:focus-visible { outline: 2px solid var(--m-brand, #4f665a); outline-offset: -2px; }

  /* ============================================================ ORDER HISTORY
     Each order is a fieldset whose legend sat as a floating tab over a grey box, the
     status on its own line under it. Now a card: order number and status chip on one
     row, the facts below, View at the bottom. */
  #accounthistoryBody #accountHistoryDefault fieldset {
    display: flow-root;
    min-width: 0;
    margin: 0 0 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(79, 102, 90, .06);
  }
  /* a floated legend is laid out as an ordinary box inside its fieldset */
  #accounthistoryBody #accountHistoryDefault fieldset legend {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: bold;
    line-height: 28px;
    color: var(--m-ink, #363636);
  }
  #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-surface-2, #f4f5ef);
    color: var(--m-brand, #4f665a);
    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, #363636);
    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, #6b6e6f);
    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. The products, totals, status
     history and addresses follow as cards instead of bordered desktop tables. */
  #accounthistoryinfoBody #accountHistInfo #downloads,
  #accounthistoryinfoBody #accountHistInfo #downloads > tbody { display: block; width: auto; 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, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(79, 102, 90, .06);
  }
  #accounthistoryinfoBody #accountHistInfo #downloads td {
    display: block;
    padding: 0;
    border: 0;
    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, #363636); 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, #363636);
    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, #6b6e6f);
  }
  #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, #6b6e6f);
    text-align: left;
  }
  #accounthistoryinfoBody #column-center #accountHistInfo #orderHistoryDetailedOrder { margin-top: 4px; }
  #accounthistoryinfoBody #accountHistInfo hr { display: none; }

  /* products: a bordered three-column table, 1px cells, in a 350px column */
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading,
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading > tbody { display: block; width: auto; border: 0; }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading {
    padding: 0 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    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, #e3e4dd); }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--m-ink, #363636);
    text-align: left;
  }
  #accounthistoryinfoBody #accountHistInfo #orderHistoryHeading .accountProductDisplay > a { font-weight: bold; color: var(--m-ink, #363636); }
  #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, #6b6e6f);
  }
  #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, #e3e4dd);
    border-top: 0;
    border-radius: 0 0 var(--m-radius-lg, 14px) var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef);
  }
  #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, #363636);
  }
  #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, #e3e4dd);
    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; border: 0; }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus {
    padding: 0 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    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, #e3e4dd); }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--m-ink, #363636);
    text-align: left;
  }
  #accounthistoryinfoBody #accountHistInfo #myAccountOrdersStatus td:first-child { color: var(--m-ink-2, #6b6e6f); }
  #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, #e3e4dd);
    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;
    color: var(--m-ink, #363636);
  }
  #accounthistoryinfoBody #accountHistInfo :is(#myAccountShipInfo, #myAccountPaymentInfo) h4 {
    margin: 12px 0 2px;
    font-size: 13px;
    color: var(--m-ink-2, #6b6e6f);
  }
  #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, #363636);
  }

  /* ============================================================= ADDRESS BOOK
     Entries were a name, an address and two image buttons floated to the right, one after
     another inside a grey fieldset, with nothing to show where one ended. Each entry is
     now a card: name, address, then Edit and Delete side by side across its foot. The
     template prints the three as siblings, so the card is drawn from their borders. */
  #addressbookBody #addressBookDefault address.back {
    float: none;
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef);
    font-size: 15px;
    font-style: normal;
    line-height: 1.5;
    color: var(--m-ink, #363636);
  }
  #addressbookBody #column-center #addressBookDefault #addressBookDefaultPrimary { margin-top: 8px; }
  #addressbookBody #addressBookDefault > br.clearBoth { display: none; }

  #addressbookBody #addressBookDefault fieldset {
    min-width: 0;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    background: none;
  }
  #addressbookBody #addressBookDefault fieldset legend {
    float: left;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.25;
    color: var(--m-ink, #363636);
  }
  #addressbookBody #addressBookDefault fieldset > .alert.forward {
    float: none;
    clear: both;
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-ink-2, #6b6e6f);
    text-align: left;
  }
  #addressbookBody #addressBookDefault fieldset > br { display: none; }
  #addressbookBody #addressBookDefault fieldset > h3.addressBookDefaultName {
    clear: both;
    margin: 12px 0 0;
    padding: 14px 16px 4px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-bottom: 0;
    border-radius: var(--m-radius-lg, 14px) var(--m-radius-lg, 14px) 0 0;
    background: var(--m-surface, #fff);
    font-size: 16px;
    line-height: 1.35;
    color: var(--m-ink, #363636);
  }
  #addressbookBody #addressBookDefault fieldset > address {
    margin: 0;
    padding: 0 16px 14px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-width: 0 1px;
    background: var(--m-surface, #fff);
    font-size: 15px;
    font-style: normal;
    line-height: 1.5;
    color: var(--m-ink-2, #6b6e6f);
  }
  #addressbookBody #addressBookDefault fieldset > .buttonRow.forward {
    float: none;
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: 0 0 var(--m-radius-lg, 14px) var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    text-align: left;
  }
  #addressbookBody #addressBookDefault fieldset > .buttonRow.forward > :is(.ns-btn, a:has(.ns-btn)) { flex: 1 1 0; min-width: 0; }

  /* ===================================================== 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 (the theme drew the legend as a tab on a grey
     box); labels sit above full-width 48px fields with 16px text, so iOS does not zoom.
     The labels floated beside their fields from 601px; they go above at every width. */
  :is(#accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
      #addressbookprocessBody, #gvsendBody, #gvfaqBody, #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset {
    display: flow-root;
    min-width: 0;
    margin: 0 0 16px;
    padding: 14px 16px 20px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: 0 1px 2px rgba(79, 102, 90, .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;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.35;
    color: var(--m-brand, #4f665a);
  }
  /* "* 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;
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-ink-2, #6b6e6f);
    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, #363636);
  }
  :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%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #8f928b; /* 3.2: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, #363636);
    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='%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(#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;
  }
  :is(#accounteditBody, #accountpasswordBody, #addressbookprocessBody, #gvsendBody, #gvfaqBody,
      #discountcouponBody, #orderstatusBody)
    #contentMainWrapper #column-center .centerColumn fieldset :is(input, select, textarea):focus {
    border-color: var(--m-brand, #4f665a);
    outline: 2px solid var(--m-brand, #4f665a);
    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;
  }
  /* 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: brand-coloured, 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, #4f665a);
  }
  :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, #363636);
  }
  #addressbookprocessBody #contentMainWrapper #column-center .centerColumn fieldset input#primary { 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; }
  /* address delete: the Delete button is inside its own form in the row */
  #addressbookprocessBody #addressBookProcessDefault > .buttonRow.forward form { margin: 0; }
  /* 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 (wave 2 made it 13px grey); the address it
     asks about reads as the card it is in the address book. */
  #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, #363636);
  }
  #addressbookprocessBody #addressBookProcessDefault > address {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    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, #363636);
  }

  /* ======================================================= GIFT CERTIFICATES
     Send: the balance box is a small tinted card under the heading. FAQ: the five
     questions were underlined 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, #f4f5ef);
  }
  #gvsendBody #contentMainWrapper #column-center #gvSendDefault #sendSpendWrapper h2 {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--m-ink-2, #6b6e6f);
  }
  #gvsendBody #gvSendDefault #gvSendDefaultBalance {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--m-ink, #363636);
  }
  #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, #e3e4dd);
    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;
    line-height: 1.35;
    color: var(--m-ink, #363636);
    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, #e3e4dd); }
  #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='%236b6e6f'%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, #f4f5ef); }
  #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; }

  /* address entries: name, address and buttons of odd entries in column 1, even in 2;
     "dense" stacks each entry's three parts in its column (the NOTE line is div 1) */
  #addressbookBody #addressBookDefault fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: 16px;
  }
  #addressbookBody #addressBookDefault fieldset > :is(legend, .alert) { grid-column: 1 / -1; }
  #addressbookBody #addressBookDefault fieldset > h3:nth-of-type(odd),
  #addressbookBody #addressBookDefault fieldset > address:nth-of-type(odd),
  #addressbookBody #addressBookDefault fieldset > div.buttonRow:nth-of-type(even) { grid-column: 1; }
  #addressbookBody #addressBookDefault fieldset > h3:nth-of-type(even),
  #addressbookBody #addressBookDefault fieldset > address:nth-of-type(even),
  #addressbookBody #addressBookDefault fieldset > div.buttonRow:nth-of-type(odd):not(.alert) { grid-column: 2; }
  #addressbookBody #addressBookDefault fieldset > address { height: 100%; box-sizing: border-box; }
  #addressbookBody #addressBookDefault fieldset > .buttonRow.forward { margin-bottom: 4px; }

  #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; }
}