/* Classic (shortcode) cart, checkout and account markup inside the dark storefront.
   Live keeps the classic templates because the payment stack hooks into them. */
.ao3-classic-commerce{padding-bottom:70px}
.ao3-classic-commerce .woocommerce{color:var(--ink)}
.ao3-classic-commerce h2,.ao3-classic-commerce h3{color:var(--ink);font-family:'AO Display',system-ui,sans-serif;letter-spacing:.01em}
.ao3-classic-commerce label,.ao3-classic-commerce legend{color:#d7dee8;font-size:13px;font-weight:600}
.ao3-classic-commerce .required{color:#ff8a80;text-decoration:none}
.ao3-classic-commerce a:not(.button):not(.btn){color:var(--link)}

/* Fields */
.ao3-classic-commerce .form-row{margin:0 0 16px}
.ao3-classic-commerce input.input-text,.ao3-classic-commerce textarea,.ao3-classic-commerce select,
.ao3-classic-commerce .select2-container .select2-selection--single{width:100%;min-height:48px;background:#111b29;color:#f3f5f7;border:1px solid #566a86;border-radius:3px;padding:11px 12px;font-size:16px;box-shadow:none}
.ao3-classic-commerce .select2-container .select2-selection--single .select2-selection__rendered{color:#f3f5f7;line-height:24px;padding:0}
.ao3-classic-commerce .select2-container .select2-selection--single .select2-selection__arrow{height:46px}
.select2-dropdown{background:#111b29;color:#f3f5f7;border-color:#566a86}
.select2-search--dropdown .select2-search__field{background:#0b111a;color:#f3f5f7;border-color:#566a86}
.select2-results__option--highlighted[aria-selected],.select2-results__option--highlighted[data-selected]{background:var(--accent)!important;color:#fff!important}
.ao3-classic-commerce input.input-text:focus,.ao3-classic-commerce textarea:focus,.ao3-classic-commerce select:focus{border-color:var(--accent-bright);outline:2px solid #91baff;outline-offset:1px}
.ao3-classic-commerce input[type=checkbox],.ao3-classic-commerce input[type=radio]{accent-color:var(--accent-bright);width:18px;height:18px;vertical-align:middle}

/* Buttons */
.ao3-classic-commerce .button,.ao3-classic-commerce button.button,.ao3-classic-commerce a.button,.ao3-classic-commerce #place_order,.ao3-classic-commerce .checkout-button{background:var(--accent)!important;color:#fff!important;border:0;border-radius:3px;min-height:48px;padding:13px 22px;font-weight:650;letter-spacing:.02em}
.ao3-classic-commerce .button:hover,.ao3-classic-commerce #place_order:hover,.ao3-classic-commerce .checkout-button:hover{background:#346fed!important}
.ao3-classic-commerce .button:disabled,.ao3-classic-commerce .button.disabled{opacity:.55}
.ao3-classic-commerce #place_order{width:100%;font-size:16px}

/* Tables */
.ao3-classic-commerce table.shop_table{background:var(--surface);border:1px solid var(--line);border-collapse:separate;border-radius:4px}
.ao3-classic-commerce table.shop_table th,.ao3-classic-commerce table.shop_table td{color:var(--ink);border-color:var(--line);padding:14px 16px}
.ao3-classic-commerce table.shop_table img{width:64px;height:auto;border-radius:3px}
.ao3-classic-commerce .cart_totals,.ao3-classic-commerce #order_review{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:22px}
.ao3-classic-commerce .order-total .amount{color:#fff;font-size:18px}
.ao3-classic-commerce .coupon .input-text{width:auto;min-width:200px}

/* Payment methods */
.ao3-classic-commerce #payment{background:var(--surface-raised);border-radius:4px}
.ao3-classic-commerce #payment ul.payment_methods{border-bottom-color:var(--line);padding:16px}
.ao3-classic-commerce #payment ul.payment_methods li{color:var(--ink);padding:8px 0}
.ao3-classic-commerce #payment div.payment_box{background:#223149;color:#e2eaf5;border-radius:3px}
.ao3-classic-commerce #payment div.payment_box::before{border-bottom-color:#223149}
.ao3-classic-commerce #payment .place-order{padding:16px}
/* Hosted card fields (Collect.js) render inside iframes; give them a light well so their text stays legible. */
.ao3-classic-commerce #payment div.payment_box iframe{background:#fff;border-radius:3px}

/* Notices */
.ao3-wordpress .woocommerce-message,.ao3-wordpress .woocommerce-info,.ao3-wordpress .woocommerce-error{background:var(--surface);color:var(--ink);border-top:3px solid var(--accent-bright);border-radius:3px}
.ao3-wordpress .woocommerce-error{border-top-color:#ff6b5b}
.ao3-wordpress .woocommerce-message::before,.ao3-wordpress .woocommerce-info::before{color:var(--accent-bright)}
.ao3-wordpress .woocommerce-error::before{color:#ff6b5b}
.ao3-wordpress .woocommerce-message a,.ao3-wordpress .woocommerce-info a,.ao3-wordpress .woocommerce-error a{color:var(--link)}

/* Login / register */
.ao3-classic-commerce .woocommerce-form-login,.ao3-classic-commerce .woocommerce-form-register{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:26px}

/* Layout */
@media (min-width:980px){
  /* Row 1 holds only the "Your order" heading; the tall billing column spans both rows so the
     summary box starts right under its heading instead of below the whole form. */
  .ao3-classic-commerce form.checkout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
  .ao3-classic-commerce form.checkout > *{grid-column:1}
  .ao3-classic-commerce form.checkout > .col2-set{grid-row:1 / span 2}
  .ao3-classic-commerce form.checkout #order_review_heading,.ao3-classic-commerce form.checkout #order_review{grid-column:2}
  .ao3-classic-commerce form.checkout #order_review_heading{grid-row:1;margin:0 0 14px}
  .ao3-classic-commerce form.checkout #order_review{grid-row:2;position:sticky;top:24px}
  .ao3-classic-commerce .col2-set{width:100%}
  .ao3-classic-commerce .col2-set .col-1,.ao3-classic-commerce .col2-set .col-2{float:none;width:100%}
}

/* The cart page is restyled by live's aop-cart-refresh (white cards, body.aop-cr). Inside those
   cards use its dark ink, otherwise the dark-theme text above turns shipping options and the
   order total white-on-white. */
body.aop-cr .ao3-classic-commerce label,
body.aop-cr .ao3-classic-commerce .cart_totals,
body.aop-cr .ao3-classic-commerce .cart_totals td,
body.aop-cr .ao3-classic-commerce .cart_totals li,
body.aop-cr .ao3-classic-commerce table.shop_table td,
body.aop-cr .ao3-classic-commerce .order-total .amount{color:var(--cr-ink,#0f172a)}
body.aop-cr .ao3-classic-commerce .cart_totals th,
body.aop-cr .ao3-classic-commerce table.shop_table th{color:var(--cr-muted,#5b6778)}
body.aop-cr .ao3-classic-commerce .cart_totals a:not(.button):not(.checkout-button){color:var(--cr-blue,#2469aa)}

/* Home sign-in card (guest view of the catalog section). */
.ao3-home-gate{padding:46px 40px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.ao3-home-gate h2{margin:14px 0 10px}
.ao3-home-gate .actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:22px}

/* Gain NMI (Collect.js) inline card fields. Astra's WooCommerce CSS used to normalize the
   plugin's wrappers; without it the field container shrink-wraps (expiry collapsed to 8px
   on mobile, Pedro 2026-10-02). Force a sane, full-width layout. */
.ao3-classic-commerce #payment .ap-nmi-payment-form,
.ao3-classic-commerce #payment #ap-nmi-wc-fields-container,
.ao3-classic-commerce #payment #ap-nmi-wc-fields-container > div,
.ao3-classic-commerce #payment .ap-nmi-collectjs-container{width:auto!important;max-width:none!important;min-width:0!important;float:none!important;box-sizing:border-box;display:block}
.ao3-classic-commerce #payment .ap-nmi-card-icons{width:auto!important;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.ao3-classic-commerce #payment .ap-nmi-collectjs-container{display:flex!important;flex-wrap:wrap;column-gap:14px}
.ao3-classic-commerce #payment .ap-nmi-collectjs-container .form-row{width:auto!important;float:none!important;padding:0;margin:0 0 14px;flex:1 1 100%;min-width:0}
.ao3-classic-commerce #payment .ap-nmi-collectjs-container .form-row label{display:block;width:auto!important;white-space:nowrap;margin:0 0 6px}
/* Expiry and CVV share a row when there is space. */
@media (min-width:460px){
  .ao3-classic-commerce #payment .ap-nmi-collectjs-container .form-row:has(#ap-nmi-expiry-date),
  .ao3-classic-commerce #payment .ap-nmi-collectjs-container .form-row:has(#ap-nmi-card-cvv){flex:1 1 140px}
}
.ao3-classic-commerce #payment #ap-nmi-card-number,
.ao3-classic-commerce #payment #ap-nmi-expiry-date,
.ao3-classic-commerce #payment #ap-nmi-card-cvv{width:auto!important;max-width:none!important;min-height:44px;background:#111b29;border:1px solid #566a86;border-radius:3px;padding:2px 10px}
.ao3-classic-commerce #payment .CollectJSInlineIframe{width:100%!important;min-width:0!important;max-width:none!important;display:block;min-height:38px}
.ao3-classic-commerce #payment .ap-nmi-fields-loader{color:#d7dee8}