/* ==========================================================================
   theme9star: cart, checkout, thank-you and account pages (2026-10-24).

   These pages fell back to Zen Cart 2.2's stock markup, which the v1 stylesheets
   target only partly (ids where 2.2 now prints classes), so they rendered as bare
   tables, a full-size cover image, blue stock icons and 60px headings that wrapped.
   This file lays them out in the site's own vocabulary: Arial, #525554 headings
   with tight tracking, the login page's amber legends, charcoal table heads like
   the header bar, and the theme's GIF buttons. Loads last (stylesheet_zz_*).
   ========================================================================== */

:root {
    --ns-ink: #2d2d2d;
    --ns-text: #494949;
    --ns-head: #525554;
    --ns-muted: #7b7d7c;
    --ns-line: #e4e2df;
    --ns-soft: #f7f6f3;
    --ns-charcoal: #363636;
    --ns-amber: #e6a800;
    --ns-amber-wash: #fff8e1;
    --ns-rust: #a5432c;
}

/* ------------------------------------------------------------------ headings */
body:is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
        #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
        #accounthistoryBody, #accounthistoryinfoBody, #addressbookBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
        #gvsendBody) .centerColumn h1,
body#checkoutsuccessBody .centerColumn > h2.h2dl:first-of-type {
    color: var(--ns-head);
    font-size: 44px;
    line-height: 1.05;
    font-weight: bold;
    letter-spacing: -2px;
    text-transform: none;
    text-align: left;
    padding: 4px 0 0;
    margin: 0 0 20px;
}

body:is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
        #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
        #accounthistoryBody, #accounthistoryinfoBody, #addressbookBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
        #gvsendBody) .centerColumn :is(h2, h3:not(.addressBookDefaultName)) {
    color: var(--ns-head);
    font-size: 15px;
    line-height: 1.2;
    font-weight: bold;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0;
    margin: 24px 0 10px;
}

/* ------------------------------------------------------- panels and legends */
body:is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
        #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
        #accounthistoryBody, #accounthistoryinfoBody, #addressbookBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
        #gvsendBody) .centerColumn fieldset {
    background: var(--ns-soft);
    border: 1px solid var(--ns-line);
    padding: 0 20px 20px;
    margin: 0 0 24px !important;
    color: var(--ns-text);
}

body:is(#checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
        #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
        #accounthistoryBody, #accounthistoryinfoBody, #addressbookBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
        #gvsendBody) .centerColumn legend {
    background: var(--ns-amber);
    color: #fff;
    border: 0;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 16px;
    margin-bottom: 14px !important;
}

/* "* Required information", address-book limits and other side notes */
body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookBody,
        #addressbookprocessBody, #accounteditBody, #accountpasswordBody) .centerColumn .alert.forward {
    color: var(--ns-muted);
    font-size: 11px;
    font-weight: normal;
}

/* -------------------------------------------------------------------- forms */
body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn fieldset label.inputLabel {
    display: block;
    float: none;
    width: auto;
    margin: 12px 0 4px;
    font-size: 12px;
    font-weight: bold;
    color: var(--ns-text);
}

body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn fieldset
    :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select) {
    box-sizing: border-box;
    width: 100%;
    max-width: 380px;
    height: 36px;
    padding: 5px 9px;
    font-size: 14px;
    border: 1px solid #cfcdca;
    background: #fff;
}

/* label beside field where :has() is supported; older browsers keep the stacked form above */
body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn fieldset:has(> label.inputLabel) {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
}

body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn fieldset:has(> label.inputLabel) > * {
    grid-column: 2;
    margin-top: 0;
    margin-bottom: 0;
}

body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn fieldset:has(> label.inputLabel) > label.inputLabel {
    grid-column: 1;
    margin: 0;
}

body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn fieldset:has(> label.inputLabel) > :is(br, span.alert) { display: none; }

body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn fieldset:has(> label.inputLabel) > .alert.forward {
    grid-column: 1 / -1;
    justify-self: end;
}

body:is(#checkoutshippingBody, #checkoutpaymentBody) .centerColumn textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 84px;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #cfcdca;
    background: #fff;
}

body:is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
        #checkoutpaymentaddressBody, #checkoutconfirmationBody, #addressbookprocessBody,
        #accounteditBody, #accountpasswordBody) .centerColumn :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--ns-amber);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------- tables */
body:is(#shoppingcartBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
        #accounthistoryinfoBody) .centerColumn table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0 0 18px;
    background: #fff;
}

body:is(#shoppingcartBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
        #accounthistoryinfoBody) .centerColumn table th {
    background: var(--ns-charcoal);
    color: #fff;
    border: 0;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
}

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

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

body:is(#shoppingcartBody, #checkoutconfirmationBody) .centerColumn table .cartTotalDisplay,
body#accountBody #prevOrders .accountOrderTotal {
    color: var(--ns-ink);
    font-weight: bold;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- the cart */
#shoppingcartBody #shoppingCartDefault > .forward:first-child { font-size: 11px; padding-top: 6px; }

#shoppingcartBody #cartInstructionsDisplay {
    max-width: 640px;
    margin: 0 0 18px;
    color: var(--ns-muted);
    font-size: 12px;
    line-height: 1.5;
}

#shoppingcartBody #cartContentsDisplay .cartQuantity { width: 64px; text-align: center; }

#shoppingcartBody #cartContentsDisplay .cartQuantity input[type="text"] {
    box-sizing: border-box;
    width: 44px;
    height: 34px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #cfcdca;
    background: #fff;
}

#shoppingcartBody #cartContentsDisplay .cartProductDisplay > a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

#shoppingcartBody #cartContentsDisplay .cartProductDisplay .cartImage { float: none; flex: 0 0 72px; margin: 0; }

#shoppingcartBody #cartContentsDisplay .cartProductDisplay .cartImage img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--ns-line);
    margin: 0;
}

#shoppingcartBody #cartContentsDisplay .cartProdTitle {
    color: var(--ns-ink);
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -.2px;
}

#shoppingcartBody #cartContentsDisplay .cartProductDisplay > a:hover .cartProdTitle { text-decoration: underline; }
#shoppingcartBody #cartContentsDisplay .cartProductDisplay > br.clearBoth { display: none; }

:is(#shoppingcartBody, #checkoutconfirmationBody) .cartAttribsList,
:is(#shoppingcartBody, #checkoutconfirmationBody) .cartAttribsList ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#shoppingcartBody .cartAttribsList { margin: 8px 0 0 86px; }

:is(#shoppingcartBody, #checkoutconfirmationBody) .cartAttribsList li {
    padding: 2px 0;
    color: var(--ns-muted);
    font-size: 12px;
}

:is(#shoppingcartBody, #checkoutconfirmationBody) .cartAttribsList li::before {
    content: "\266A";
    color: var(--ns-amber);
    margin-right: 7px;
}

#shoppingcartBody #cartContentsDisplay .cartRemoveItemDisplay { width: 84px; text-align: right; }

#shoppingcartBody a.cartRemoveLink {
    display: inline-block;
    background: var(--ns-charcoal);
    color: #fff;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

#shoppingcartBody a.cartRemoveLink:hover,
#shoppingcartBody a.cartRemoveLink:focus-visible { background: var(--ns-rust); }

#shoppingcartBody #cartSubTotal {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px 16px;
    padding: 4px 12px 20px;
    font-weight: normal;
}

/* PayPal's Pay Later message is injected into #cartSubTotal: its own line, under the total */
#shoppingcartBody #cartSubTotal > span[id^="zoid-paypal-message"] {
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-end;
}

#shoppingcartBody #cartSubTotal > span[id^="zoid-paypal-message"] > iframe { max-width: 320px; }

#shoppingcartBody .cartSubTotalLabel {
    color: var(--ns-muted);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .07em;
    text-transform: uppercase;
}

#shoppingcartBody .cartSubTotalAmount {
    color: var(--ns-ink);
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -1px;
}

#shoppingcartBody #cartButtons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 3px solid var(--ns-charcoal);
}

#shoppingcartBody #cartButtons .buttonRow { float: none; margin: 0; }
#shoppingcartBody #cartButtons .buttonRow.forward { margin-left: auto; }

/* ------------------------------------------------- checkout steps 1 and 2 */
body:is(#checkoutshippingBody, #checkoutpaymentBody) :is(#checkoutShipto, #checkoutBillto) {
    float: none;
    width: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--ns-line);
    border-left: 4px solid var(--ns-amber);
    padding: 16px 18px;
    margin: 0 0 8px;
}

body:is(#checkoutshippingBody, #checkoutpaymentBody) :is(#checkoutShipto, #checkoutBillto) .buttonRow { float: none; margin: 0; }

body:is(#checkoutshippingBody, #checkoutpaymentBody) .centerColumn address,
body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody, #checkoutconfirmationBody, #addressbookBody) address {
    font-style: normal;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ns-text);
}

body:is(#checkoutshippingBody, #checkoutpaymentBody) .centerColumn .floatingBox.important {
    float: none;
    width: auto;
    margin: 0 0 22px;
    color: var(--ns-muted);
    font-size: 12px;
    font-weight: normal;
}

body:is(#checkoutshippingBody, #checkoutpaymentBody) #checkoutShippingContentChoose { font-size: 12px; color: var(--ns-muted); margin-bottom: 10px; }

#checkoutpaymentBody .centerColumn fieldset p { color: var(--ns-muted); font-size: 12px; line-height: 1.5; }

/* "Your downloads" tick-box: the EU/UK digital-content acknowledgement (2026-10-24) */
#checkoutpaymentBody .centerColumn .termsdescription { display: block; margin-bottom: 10px; color: var(--ns-muted); font-size: 12px; line-height: 1.5; }
#checkoutpaymentBody .centerColumn #conditions { accent-color: var(--ns-amber); transform: scale(1.2); margin: 0 6px 0 2px; }
#checkoutpaymentBody .centerColumn #conditions + label { color: var(--ns-ink); font-size: 13px; font-weight: bold; }

#checkoutpaymentBody .centerColumn fieldset input[type="text"] {
    box-sizing: border-box;
    width: 220px;
    height: 34px;
    margin-left: 8px;
    padding: 5px 9px;
    font-size: 14px;
    border: 1px solid #cfcdca;
    background: #fff;
}

/* order totals: one row per line, label then amount, flush right */
:is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) > div {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 18px;
    padding: 5px 0;
}

:is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) .lineTitle {
    float: none;
    flex: 1;
    text-align: right;
    color: var(--ns-text);
    font-size: 13px;
}

:is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) .totalBox {
    float: none;
    width: 96px;
    text-align: right;
    color: var(--ns-ink);
    font-size: 14px;
    font-weight: bold;
}

:is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) > #ottotal {
    border-top: 2px solid var(--ns-charcoal);
    margin-top: 6px;
    padding-top: 10px;
}

:is(#checkoutpaymentBody #checkoutOrderTotals, #checkoutconfirmationBody #orderTotals) > #ottotal :is(.lineTitle, .totalBox) {
    font-size: 18px;
    font-weight: bold;
    color: var(--ns-ink);
}

/* step footers: continue button right, "Continue to Step n" note left */
body:is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody,
        #checkoutconfirmationBody) .centerColumn .buttonRow.back {
    color: var(--ns-muted);
    font-size: 12px;
    padding-top: 10px;
}

body:is(#checkoutshippingBody, #checkoutpaymentBody, #checkoutshippingaddressBody, #checkoutpaymentaddressBody,
        #checkoutconfirmationBody) .centerColumn .buttonRow.back strong { color: var(--ns-ink); font-size: 13px; }

/* ---------------------------------------------- change shipping/billing address */
body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) .centerColumn .instructions {
    color: var(--ns-muted);
    font-size: 12px;
    margin: 0 0 18px;
}

body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) .centerColumn .instructions address {
    float: none;
    display: block;
    width: auto;
    max-width: 320px;
    background: #fff;
    border: 1px solid var(--ns-line);
    border-left: 4px solid var(--ns-amber);
    padding: 14px 16px;
    margin: 0 0 14px;
}

.addressCards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin: 2px 0 12px;
}

.addressCards .addressCard {
    position: relative;
    display: block;
    float: none;
    width: auto;
    margin: 0;
    background: #fff;
    border: 1px solid var(--ns-line);
    padding: 14px 14px 14px 40px;
    cursor: pointer;
    font-weight: normal;
}

.addressCards .addressCard input[type="radio"] {
    position: absolute;
    left: 14px;
    top: 16px;
    margin: 0;
    accent-color: var(--ns-amber);
}

.addressCards .addressCard:hover { border-color: #c9c6c1; }

.addressCards .addressCard:has(input:checked) {
    border-color: var(--ns-amber);
    box-shadow: inset 0 0 0 1px var(--ns-amber);
    background: var(--ns-amber-wash);
}

@supports not selector(:has(*)) {
    .addressCards .addressCard.isSelected {
        border-color: var(--ns-amber);
        background: var(--ns-amber-wash);
    }
}

/* the new-address form's own Continue sits under that form, not beside the next panel */
body:is(#checkoutshippingaddressBody, #checkoutpaymentaddressBody) .centerColumn form > .buttonRow.forward {
    float: none;
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 26px;
}

.addressBookManage { margin: 4px 0 0; font-size: 12px; }
.addressBookManage a { color: var(--ns-ink); font-weight: bold; }

/* -------------------------------------------------- step 3, confirmation */
#checkoutconfirmationBody #checkoutConfirmDefault {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: 24px;
    align-items: start;
}

#checkoutconfirmationBody #checkoutConfirmDefault > * { grid-column: 1 / -1; }
#checkoutconfirmationBody #checkoutConfirmDefault > br { display: none; }
#checkoutconfirmationBody #checkoutConfirmDefault > #checkoutBillto { grid-column: 1; }
#checkoutconfirmationBody #checkoutConfirmDefault > #checkoutShipto { grid-column: 2; }
#checkoutconfirmationBody #checkoutConfirmDefault > #checkoutConfirmDefaultHeadingCart { grid-column: 1; }

#checkoutconfirmationBody #checkoutConfirmDefault > #checkoutConfirmDefaultHeadingCart + .buttonRow {
    grid-column: 2;
    justify-self: end;
    align-self: end;
    margin: 0 0 8px;
}

#checkoutconfirmationBody #checkoutConfirmDefault > #orderTotals { grid-column: 2; margin-bottom: 18px; }
#checkoutconfirmationBody #checkoutConfirmDefault > form#checkout_confirmation { grid-column: 2; justify-self: end; }
#checkoutconfirmationBody #checkoutConfirmDefault > .buttonRow.back { grid-column: 1; align-self: center; }

#checkoutconfirmationBody :is(#checkoutBillto, #checkoutShipto, #order-comments) {
    position: relative;
    float: none;
    width: auto;
    background: #fff;
    border: 1px solid var(--ns-line);
    border-top: 4px solid var(--ns-amber);
    padding: 16px 18px 18px;
    margin: 0 0 22px;
}

#checkoutconfirmationBody :is(#checkoutBillto, #checkoutShipto, #order-comments) > .buttonRow {
    position: absolute;
    top: 12px;
    right: 12px;
    float: none;
    margin: 0;
}

#checkoutconfirmationBody :is(#checkoutBillto, #checkoutShipto, #order-comments) > h2 { margin-top: 0; }

#checkoutconfirmationBody :is(#checkoutBillto, #checkoutShipto) > h3 {
    margin: 16px 0 4px;
    color: var(--ns-muted);
    font-size: 11px;
    letter-spacing: .08em;
}

#checkoutconfirmationBody :is(#checkoutBillto, #checkoutShipto) > h4 {
    margin: 0;
    color: var(--ns-ink);
    font-size: 13px;
    font-weight: bold;
}

#checkoutconfirmationBody :is(#checkoutBillto, #checkoutShipto) .important { font-size: 12px; color: var(--ns-muted); }
#checkoutconfirmationBody #cartContentsDisplay .cartQuantity { width: 48px; white-space: nowrap; }
#checkoutconfirmationBody #cartContentsDisplay .cartProductDisplay { color: var(--ns-ink); font-weight: bold; text-align: left; }
#checkoutconfirmationBody #cartContentsDisplay .cartAttribsList { margin-top: 6px; font-weight: normal; }

/* ------------------------------------------------------- thank-you page */
#checkoutsuccessBody #checkoutSuccessOrderNumber {
    display: inline-block;
    background: var(--ns-charcoal);
    color: #fff;
    padding: 9px 14px;
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: bold;
}

#checkoutsuccessBody #checkoutSuccessOrderNumber strong {
    color: var(--ns-amber);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-right: 8px;
}

#checkoutsuccessBody #checkoutSuccessMainContent { font-size: 13px; line-height: 1.6; margin-bottom: 18px; max-width: 680px; }
#checkoutsuccessBody #checkoutSuccessMainContent p { margin: 0 0 8px; }
#checkoutsuccessBody #headingDownloads { color: var(--ns-head); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 10px; }
#checkoutsuccessBody #downloads :is(.downloadButton, #dlButtonHeading) { text-align: right; }
#checkoutsuccessBody #downloads .downloadProductNameLink a { color: var(--ns-ink); font-weight: bold; }

:is(#checkoutsuccessBody, #accountBody) #sendSpendWrapper,
#checkoutsuccessBody #checkoutSuccessGv {
    background: #fff;
    border: 1px solid var(--ns-line);
    border-left: 4px solid var(--ns-amber);
    padding: 16px 18px;
    margin: 0 0 24px;
}

:is(#checkoutsuccessBody, #accountBody) #sendSpendWrapper fieldset,
#checkoutsuccessBody #checkoutSuccessGv fieldset {
    background: none;
    border: 0;
    padding: 0;
    margin: 0 !important;
}

#checkoutsuccessBody :is(#checkoutSuccessOrderLink, #checkoutSuccessContactLink, #checkoutSuccessLogoff) {
    color: var(--ns-muted);
    font-size: 12px;
    line-height: 1.6;
}

#checkoutsuccessBody #checkoutSuccessThanks { text-align: left; }

/* ----------------------------------------------------------- my account */
#accountBody #accountDefault .show-all { font-size: 12px; font-weight: bold; color: var(--ns-ink); }
#accountBody #prevOrders td address { font-style: normal; }
#accountBody #prevOrders .accountOrderViewButton { text-align: right; }

#accountBody #accountLinksWrapper {
    float: none;
    width: auto;
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 24px;
    margin: 8px 0 24px;
}

#accountBody #accountLinksWrapper h2 { margin: 18px 0 6px; }

#accountBody #accountLinksWrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ns-line);
}

#accountBody #accountLinksWrapper li { margin: 0; padding: 0; border-bottom: 1px solid var(--ns-line); }

#accountBody #accountLinksWrapper li a {
    display: block;
    padding: 11px 24px 11px 2px;
    color: var(--ns-ink);
    font-size: 13px;
    text-decoration: none;
    position: relative;
}

#accountBody #accountLinksWrapper li a::after {
    content: "\203A";
    position: absolute;
    right: 6px;
    top: 7px;
    color: var(--ns-amber);
    font-size: 20px;
    font-weight: bold;
}

#accountBody #accountLinksWrapper li a:hover { background: var(--ns-soft); }

/* --------------------------------------------------------- address book */
#addressbookBody .addressBookHead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
}

#addressbookBody .addressBookHead h2 { margin: 0; }
#addressbookBody .addressBookLimit { color: var(--ns-muted); font-size: 11px; }
#addressbookBody .addressBookLimit .coming { color: var(--ns-muted); }
#addressbookBody .centerColumn .instructions { color: var(--ns-muted); font-size: 12px; margin: 6px 0 16px; }

#addressbookBody .addressBookCards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

#addressbookBody .addressBookCard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ns-line);
    border-top: 4px solid var(--ns-line);
    padding: 14px 16px 16px;
}

#addressbookBody .addressBookCard.isPrimary { border-top-color: var(--ns-amber); }

#addressbookBody .addressBookCard h3.addressBookDefaultName {
    margin: 0 0 8px;
    color: var(--ns-ink);
    font-size: 14px;
    font-weight: bold;
}

#addressbookBody .addressBookCard .primaryTag {
    display: inline-block;
    margin-left: 4px;
    color: var(--ns-amber);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#addressbookBody .addressBookCard address { flex: 1; margin-bottom: 14px; }
#addressbookBody .addressBookCard .buttonRow { float: none; margin: 0; display: flex; gap: 6px; }

#addressbookBody .addressBookButtons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 3px solid var(--ns-charcoal);
}

#addressbookBody .addressBookButtons .buttonRow { float: none; margin: 0; }

/* "Delete address book entry" confirmation: the only address_book_process view with a bare
   address, so :has(> address) singles it out. Question, the address as a card with the
   rust (warning) rule, and Delete beside Back instead of at opposite edges of the page. */
#addressbookprocessBody #addressBookProcessDefault:has(> address) {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 10px;
    justify-items: start;
    align-items: center;
}

#addressbookprocessBody #addressBookProcessDefault:has(> address) > * { grid-column: 1 / -1; }
#addressbookprocessBody #addressBookProcessDefault:has(> address) > br { display: none; }

#addressbookprocessBody #addressBookProcessDefault:has(> address) > .alert {
    float: none;
    margin: 0 0 14px;
    color: var(--ns-ink);
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
}

#addressbookprocessBody #addressBookProcessDefault:has(> address) > address {
    box-sizing: border-box;
    min-width: 280px;
    margin: 0 0 20px;
    padding: 16px 20px 18px;
    background: #fff;
    border: 1px solid var(--ns-line);
    border-top: 4px solid var(--ns-rust);
    color: var(--ns-text);
    font-size: 14px;
    font-style: normal;
    line-height: 1.55;
}

#addressbookprocessBody #addressBookProcessDefault:has(> address) > .buttonRow { float: none; margin: 0; }
#addressbookprocessBody #addressBookProcessDefault:has(> address) > .buttonRow.forward { grid-column: 1; }
#addressbookprocessBody #addressBookProcessDefault:has(> address) > .buttonRow.back { grid-column: 2; }
#addressbookprocessBody #addressBookProcessDefault:has(> address) > .buttonRow form { margin: 0; }

/* ------------------------------------------------------------ Artists page */
#ezPageDefault #artistGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 34px 26px;
    margin: 12px 0 30px;
}

#ezPageDefault #artistGrid .artistwrap { float: none; width: auto; margin: 0; }

#ezPageDefault #artistGrid .artistwrap img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 215 / 320;
    object-fit: cover;
}

#ezPageDefault #artistGrid .artistwrap strong {
    background: none;
    border-bottom: 3px solid var(--ns-line);
    font-size: 1.5em;
    letter-spacing: -.5px;
    padding: 12px 0 10px;
    margin-bottom: 14px;
}

#ezPageDefault #artistGrid .artistwrap a.v { display: inline-block; background: var(--ns-amber); }
#ezPageDefault #artistGrid .artistwrap a.v:hover { background: var(--ns-charcoal); }

/* -------------------------------------------- legal pages (2026-10-24) */
body:is(#privacyBody, #conditionsBody, #shippinginfoBody) .centerColumn h1 {
    color: var(--ns-head);
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -2px;
    text-align: left;
    margin: 0 0 6px;
}

.legalPage {
    max-width: 680px;
    color: var(--ns-text);
    font-size: 14px;
    line-height: 1.65;
}

.legalPage .legalUpdated { margin: 0 0 18px; color: var(--ns-muted); font-size: 12px; }

.legalPage h2 {
    color: var(--ns-head);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 28px 0 8px;
    padding: 0;
}

.legalPage p { margin: 0 0 12px; }
.legalPage ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.legalPage li { margin: 0 0 7px; }
.legalPage li::marker { color: var(--ns-amber); }
.legalPage strong { color: var(--ns-ink); }
.legalPage a { color: var(--ns-ink); text-decoration: underline; text-underline-offset: 2px; }
.legalPage a:hover { color: var(--ns-rust); }
.legalPage code { background: var(--ns-soft); border: 1px solid var(--ns-line); padding: 0 5px; font-size: 13px; }

.legalPage .legalShort {
    background: var(--ns-amber-wash);
    border-left: 4px solid var(--ns-amber);
    padding: 14px 20px 6px;
    margin: 0 0 8px;
}

.legalPage .legalShort h2 { margin-top: 0; }
.legalPage h2[id] { scroll-margin-top: 20px; }

/* footer: the four legal links after the copyright line */
#footer .legalLinks a { margin-left: 10px; }
#footer .legalLinks a:first-child { margin-left: 4px; }

/* ------------------------------------- social links, share links, newsletter */
#fbsideboxContent .socialBars { list-style: none; margin: 6px 0 0; padding: 0; }
#fbsideboxContent .socialBars li { margin: 0 0 2px; padding: 0; }

#fbsideboxContent a.socialBar {
    display: block;
    padding: 7px 9px 6px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
}

#fbsideboxContent a.socialBar:hover,
#fbsideboxContent a.socialBar:focus-visible { filter: brightness(.9); }
#fbsideboxContent a.socialBar-sky   { background: #3399cc; }
#fbsideboxContent a.socialBar-amber { background: #f9bd00; }
#fbsideboxContent a.socialBar-rust  { background: #a2452f; }
#fbsideboxContent a.socialBar-teal  { background: #30a688; }
#fbsideboxContent a.socialBar-olive { background: #959f2e; }

#socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 4px 0 8px;
}

#socials .shareLabel {
    color: var(--ns-muted);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-right: 2px;
}

#socials a.shareLink,
a.artistSocial {
    display: inline-block;
    background: var(--ns-charcoal);
    color: #fff;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.3;
}

a.artistSocial { margin: 4px 4px 0 0; }

#socials a.shareLink:hover,
#socials a.shareLink:focus-visible,
a.artistSocial:hover,
a.artistSocial:focus-visible { background: var(--ns-amber); }

.newsletterForm { margin-top: 8px; }
.newsletterForm label { display: block; margin: 6px 0 2px; }

.newsletterForm input[type="text"],
.newsletterForm input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    height: 26px;
}

.newsletterForm label.newsletterConsent {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 8px 0;
    font-size: 11px;
    line-height: 1.4;
}

.newsletterForm label.newsletterConsent input { margin: 1px 0 0; flex: 0 0 auto; }
.newsletterForm label.newsletterConsent a { color: inherit; text-decoration: underline; }

/* ------------------------------------------- cookie consent banner (2026-10-24) */
/* A charcoal bar like the header, an amber rule like the buttons: text left, the two equal
   choices right, and (after "Let me choose") one card per cookie group across the width. */
.nsConsent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #2d2d2d;
    border-top: 4px solid #f9bd00;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .4);
    color: #e9e7e3;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    animation: nsConsentIn .25s ease-out;
}

@keyframes nsConsentIn { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nsConsent { animation: none; } }

.nsConsent-inner {
    box-sizing: border-box;
    max-width: 1050px;
    margin: 0 auto;
    padding: 18px 24px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy actions" "prefs prefs";
    align-items: center;
    gap: 16px 36px;
}

.nsConsent-copy { grid-area: copy; }

.nsConsent .nsConsent-title {
    margin: 0 0 5px;
    padding: 0;
    color: #f9bd00;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.nsConsent .nsConsent-body { margin: 0; padding: 0; color: #e9e7e3; font-size: 13px; line-height: 1.55; }
.nsConsent .nsConsent-body a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.nsConsent-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 320px;
}

.nsConsent .nsConsent-btn {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 12px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
}

.nsConsent .nsConsent-accept,
.nsConsent .nsConsent-save { background: #f9bd00; color: #2d2d2d; }
.nsConsent .nsConsent-reject { background: #30a688; color: #fff; }
.nsConsent .nsConsent-save { grid-column: 1 / -1; }
.nsConsent .nsConsent-btn:hover { filter: brightness(.92); }

.nsConsent .nsConsent-choose {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0;
    border: 0;
    background: none;
    padding: 2px 0 0;
    color: #d9d6d1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.nsConsent [hidden] { display: none !important; }

.nsConsent-prefs {
    grid-area: prefs;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.nsConsent .nsConsent-pref {
    display: block;
    margin: 0;
    background: #363636;
    border: 1px solid #474747;
    border-top: 3px solid #30a688;
    padding: 12px 14px 13px;
    cursor: pointer;
    font-weight: normal;
}

.nsConsent .nsConsent-pref:nth-child(2) { border-top-color: #3399cc; }
.nsConsent .nsConsent-pref:nth-child(3) { border-top-color: #a2452f; }
.nsConsent .nsConsent-pref.is-locked { cursor: default; }

.nsConsent-prefHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.nsConsent .nsConsent-prefHead strong {
    color: #fff;
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.nsConsent .nsConsent-always {
    color: #30a688;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nsConsent .nsConsent-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    margin: 0;
    border: 0;
    border-radius: 11px;
    background: #5c5c5c;
    cursor: pointer;
    transition: background .15s ease;
}

.nsConsent .nsConsent-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.nsConsent .nsConsent-switch:checked { background: #f9bd00; }
.nsConsent .nsConsent-switch:checked::before { transform: translateX(18px); }
.nsConsent .is-locked .nsConsent-switch { display: none; }
.nsConsent .nsConsent-prefNote { display: block; color: #b9b6b1; font-size: 12px; line-height: 1.45; }

.nsConsent :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 760px) {
    .nsConsent-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "copy" "actions" "prefs";
        gap: 14px;
        padding: 14px 16px 16px;
    }
    .nsConsent-actions { width: auto; }
    .nsConsent-prefs { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ empty cart (2026-10-24) */
/* v1's orange "warning" bar (#f76218 + warning2.gif) replaced by a calm panel with the
   category menu's colour blocks, so an empty cart is a starting point, not an error. */
#shoppingcartBody #cartEmptyText {
    background: var(--ns-amber-wash);
    border: 0;
    border-left: 4px solid var(--ns-amber);
    color: var(--ns-text);
    padding: 16px 20px 18px;
    margin: 0 0 34px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.55;
    text-align: left;
    text-transform: none;
}

#shoppingcartBody #cartEmptyText p { margin: 0; }

#shoppingcartBody .cartEmptyCategories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

#shoppingcartBody .cartEmptyCategories li { margin: 0; padding: 0; }

#shoppingcartBody .cartEmptyCategories a {
    display: block;
    padding: 8px 12px 7px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

#shoppingcartBody .cartEmptyCategories li:nth-child(5n+1) a { background: #959f2e; }
#shoppingcartBody .cartEmptyCategories li:nth-child(5n+2) a { background: #a2452f; }
#shoppingcartBody .cartEmptyCategories li:nth-child(5n+3) a { background: #30a688; }
#shoppingcartBody .cartEmptyCategories li:nth-child(5n+4) a { background: #f9bd00; }
#shoppingcartBody .cartEmptyCategories li:nth-child(5n+5) a { background: #3399cc; }
#shoppingcartBody .cartEmptyCategories a:hover,
#shoppingcartBody .cartEmptyCategories a:focus-visible { filter: brightness(.9); }

/* the "new products" block under an empty cart: a section heading, not a second page title */
body#shoppingcartBody #whatsNew h2.centerBoxHeading {
    color: var(--ns-head);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: left;
    text-transform: uppercase;
    margin: 0 0 16px;
    padding: 0;
}

/* ------------------------------- product page button row (2026-10-24) */
/* Prev / Listing / Next on the left and the two review buttons on the right, one row. */
.productActionRow {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 20px 0 6px;
    padding: 14px 0 0;
    border-top: 1px solid var(--ns-line);
}

.productActionRow .navNextPrevWrapper {
    float: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    text-align: left;
}

.productActionRow .navNextPrevCounter {
    margin: 0 6px 0 0;
    padding: 0;
    color: var(--ns-muted);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.productActionRow .navNextPrevList { float: none; display: block; margin: 0; padding: 0; }
.productActionRow #productReviewLink { float: none; display: flex; gap: 6px; margin: 0 0 0 auto; }
.productActionRow #productReviewLink a { margin: 0 !important; }
.productActionRow #productReviewLink:empty,
.productActionRow .reviewCount:empty { display: none; }

/* -------------------------------------------- review pages (2026-10-24) */
/* Read, write and single-review pages share one layout: the cover, price and product links
   in a left column; an amber eyebrow, the title and the reviews or the form on the right. */
.reviewPage .reviewLayout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.reviewPage .reviewProductImage { float: none; width: auto; margin: 0 0 14px; text-align: left; }

.reviewPage .reviewProductImage img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ns-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.reviewPage .reviewProductPrice { margin: 0 0 12px; color: var(--ns-ink); font-size: 20px; font-weight: bold; }
.reviewPage .reviewProductLinks { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.reviewPage .reviewProductLinks .buttonRow { float: none; margin: 0; }

.reviewPage .reviewEyebrow {
    margin: 2px 0 4px;
    color: #c99300;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
}

:is(#reviewsDefault, #reviewsWrite, #reviewsInfoDefault) .reviewMain h1 {
    margin: 0 0 16px;
    padding: 0;
    color: var(--ns-head);
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    text-align: left;
}

.reviewPage .reviewMeta { margin: 0; color: var(--ns-muted); font-size: 12px; }
.reviewPage .reviewMeta strong { color: var(--ns-ink); }

.reviewPage .reviewCard {
    background: #fff;
    border: 1px solid var(--ns-line);
    border-left: 4px solid var(--ns-amber);
    padding: 16px 18px;
    margin: 0 0 14px;
}

.reviewPage .reviewStars { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.reviewPage .reviewStars span { color: var(--ns-muted); font-size: 12px; }
.reviewPage .reviewText { color: var(--ns-text); font-size: 14px; line-height: 1.6; }

.reviewPage .reviewCardFoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ns-line);
}

.reviewPage .reviewReadLink { color: var(--ns-ink); font-size: 12px; font-weight: bold; }

.reviewPage .reviewEmpty {
    background: var(--ns-amber-wash);
    border-left: 4px solid var(--ns-amber);
    padding: 16px 20px;
    margin: 0 0 18px;
    color: var(--ns-text);
    font-size: 14px;
    line-height: 1.55;
}

.reviewPage .reviewEmpty p { margin: 0 0 4px; }
.reviewPage .reviewNote { margin: 0 0 14px; color: var(--ns-muted); font-size: 12px; }
.reviewPage .reviewEmpty .reviewNote { margin: 0; }

.reviewPage .reviewPaging {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 0 0 12px;
    color: var(--ns-muted);
    font-size: 12px;
}

.reviewPage .reviewPaging > div { float: none; margin: 0; }
.reviewPage .reviewActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.reviewPage .reviewActions .buttonRow { float: none; margin: 0; }

#reviewsWrite .reviewRating {
    background: none;
    border: 0;
    padding: 0;
    margin: 18px 0 16px !important;
}

#reviewsWrite .reviewRating legend,
#reviewsWrite .reviewTextLabel {
    display: block;
    float: none;
    width: auto;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 8px !important;
    color: var(--ns-head);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
}

#reviewsWrite .ratingRow { display: flex; flex-wrap: wrap; gap: 8px; }
#reviewsWrite .reviewHint { margin: -4px 0 8px; }

#reviewsWrite .ratingOption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--ns-line);
    cursor: pointer;
}

#reviewsWrite .ratingOption input { margin: 0; accent-color: var(--ns-amber); }
#reviewsWrite .ratingOption:hover { border-color: #c9c6c1; }

#reviewsWrite .ratingOption:has(input:checked) {
    background: var(--ns-amber-wash);
    border-color: var(--ns-amber);
    box-shadow: inset 0 0 0 1px var(--ns-amber);
}

#reviewsWrite textarea#review-text {
    box-sizing: border-box;
    width: 100%;
    min-height: 170px;
    margin: 0 0 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #cfcdca;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

#reviewsWrite textarea#review-text:focus-visible { outline: 2px solid var(--ns-amber); outline-offset: 1px; }

@media (max-width: 760px) {
    .reviewPage .reviewLayout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .reviewPage .reviewProductImage { max-width: 220px; }
    :is(#reviewsDefault, #reviewsWrite, #reviewsInfoDefault) .reviewMain h1 { font-size: 30px; letter-spacing: -1px; }
    .productActionRow { justify-content: flex-start; }
    .productActionRow #productReviewLink { margin-left: 0; }
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 760px) {
    body:is(#shoppingcartBody, #checkoutshippingBody, #checkoutshippingaddressBody, #checkoutpaymentBody,
            #checkoutpaymentaddressBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
            #accounthistoryBody, #accounthistoryinfoBody, #addressbookBody, #addressbookprocessBody,
            #accounteditBody, #accountpasswordBody, #accountnewslettersBody, #accountnotificationsBody,
            #gvsendBody) .centerColumn h1,
    body#checkoutsuccessBody .centerColumn > h2.h2dl:first-of-type {
        font-size: 32px;
        letter-spacing: -1.2px;
    }

    #checkoutconfirmationBody #checkoutConfirmDefault { display: block; }
    #accountBody #accountLinksWrapper { display: block; }
    #shoppingcartBody .cartAttribsList { margin-left: 0; }
    #shoppingcartBody #cartContentsDisplay .cartProductDisplay .cartImage { flex-basis: 56px; }
    #shoppingcartBody #cartContentsDisplay .cartProductDisplay .cartImage img { width: 56px; height: 56px; }

    body:is(#shoppingcartBody, #checkoutconfirmationBody, #checkoutsuccessBody, #accountBody,
            #accounthistoryinfoBody) .centerColumn table :is(th, td) {
        padding: 10px 8px;
    }
}

/* ------------------------------------------------- phones: tables as cards (2026-10-24) */
/* The cart and order tables need about 500px. On a phone each row becomes a card and the
   header row goes. Cells are ordered by class, because on phone user agents the cart
   template prints the product cell first while the header row still starts with Qty.
   Those agents also get inline "Price:" style labels (b.hide); others get them here. */
@media (max-width: 600px) {
    #shoppingcartBody #cartContentsDisplay,
    #shoppingcartBody #cartContentsDisplay > tbody,
    #accountBody #prevOrders,
    #accountBody #prevOrders > tbody { display: block; }

    #shoppingcartBody #cartContentsDisplay tr.tableHeading,
    #accountBody #prevOrders tr.tableHeading { display: none; }

    #shoppingcartBody #cartContentsDisplay tr {
        display: flex;
        flex-wrap: wrap; /* the narrowest phones put Total and Remove on a second line */
        align-items: center;
        gap: 10px 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--ns-line);
    }
    #shoppingcartBody #cartContentsDisplay td {
        display: block;
        width: auto;
        border: 0;
        padding: 0;
    }
    #shoppingcartBody #cartContentsDisplay .cartProductDisplay { order: 0; flex: 0 0 100%; padding-bottom: 2px; }
    #shoppingcartBody #cartContentsDisplay .cartQuantity { order: 1; text-align: left; }
    #shoppingcartBody #cartContentsDisplay .cartQuantity br { display: none; }
    #shoppingcartBody #cartContentsDisplay .cartUnitDisplay { order: 2; text-align: left; }
    #shoppingcartBody #cartContentsDisplay .cartTotalDisplay { order: 3; }
    #shoppingcartBody #cartContentsDisplay .cartRemoveItemDisplay { order: 4; margin-left: auto; }
    #shoppingcartBody .cartAttribsList { margin-left: 70px; }
    #shoppingcartBody #cartContentsDisplay .cartUnitDisplay:not(:has(.hide))::before { content: "Price: "; font-weight: bold; }
    #shoppingcartBody #cartContentsDisplay .cartTotalDisplay:not(:has(.hide))::before { content: "Total: "; }

    #accountBody #prevOrders tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "date view" "id view" "address view" "status view" "total view";
        column-gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--ns-line);
    }
    #accountBody #prevOrders td {
        display: block;
        border: 0;
        padding: 2px 0;
        text-align: left;
    }
    #accountBody #prevOrders .accountOrderDate { grid-area: date; }
    #accountBody #prevOrders .accountOrderId { grid-area: id; }
    #accountBody #prevOrders .accountOrderAddress { grid-area: address; }
    #accountBody #prevOrders .accountOrderStatus { grid-area: status; }
    #accountBody #prevOrders .accountOrderTotal { grid-area: total; }
    #accountBody #prevOrders .accountOrderViewButton { grid-area: view; align-self: center; }
    #accountBody #prevOrders .accountOrderAddress address { display: inline-block; vertical-align: top; }
    body#accountBody #prevOrders td.accountOrderTotal { text-align: left; } /* beats the shared .alignRight rule */
    #accountBody #prevOrders .accountOrderDate:not(:has(.hide))::before { content: "Date: "; font-weight: bold; }
    #accountBody #prevOrders .accountOrderId:not(:has(.hide))::before { content: "No.: "; font-weight: bold; }
    #accountBody #prevOrders .accountOrderAddress:not(:has(.hide))::before { content: "Ship To: "; font-weight: bold; }
    #accountBody #prevOrders .accountOrderStatus:not(:has(.hide))::before { content: "Status: "; font-weight: bold; }
    #accountBody #prevOrders .accountOrderTotal:not(:has(.hide))::before { content: "Total: "; }

    /* download links (order page and thank-you page): one card per file, button at the right */
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads,
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads > tbody { display: block; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads tr.tableHeading { display: none; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name button" "file button" "size button" "expiry button" "count button";
        align-items: center;
        column-gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--ns-line);
    }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads td {
        display: block;
        border: 0;
        padding: 1px 0;
        text-align: left;
    }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadProductNameLink { grid-area: name; font-weight: bold; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadFilename { grid-area: file; overflow-wrap: anywhere; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadFilesize { grid-area: size; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadExpiry { grid-area: expiry; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadCounts { grid-area: count; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadButton { grid-area: button; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads :is(.downloadFilesize, .downloadExpiry, .downloadCounts) {
        color: var(--ns-muted);
        font-size: 12px;
    }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadFilesize::before { content: "Size: "; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadExpiry::before { content: "Link expires: "; }
    :is(#accounthistoryinfoBody, #checkoutsuccessBody) #downloads .downloadCounts::before { content: "Downloads left: "; }

    /* confirmation panels: long headings clear the EDIT button pinned at their top right */
    #checkoutconfirmationBody :is(#checkoutBillto, #checkoutShipto, #order-comments) > :is(h2, h3) { padding-right: 64px; }

    /* order history: the three floated columns of each order box stack */
    #accounthistoryBody .centerColumn fieldset .content { float: none; width: auto; margin: 0 0 10px; }
    #accounthistoryBody .centerColumn fieldset .notice { float: none; text-align: left; margin: 0 0 10px; }
}