/* WooCommerce restyle — brand-matches the native checkout/account/cart
   shortcode output (no add_theme_support('woocommerce'), so WC renders its
   own generic stylesheet by default; this overrides it on WC's stable,
   documented classes only). Loaded after WooCommerce's own CSS. */

/* Wider content column on cart/register — page.php's default
   .wp-content-area max-width:800px is cramped otherwise.
   (579 "Checkout" uses page-checkout.php, 726/734 use page-login.php.) */
body.page-id-578 .wp-content-area,
body.page-id-736 .wp-content-area { max-width: var(--max); }

/* WooCommerce's own login/register form template prints an <h2>Login</h2> /
   <h2>Register</h2> right before the form — redundant wherever the page
   itself already has a heading/title, so it's hidden everywhere and each
   page supplies its own single heading instead. */
h2:has(+ .woocommerce-form-login),
h2:has(+ .woocommerce-form-register) { display: none; }

/* "Related subscriptions" table under an order's details (WooCommerce
   Subscriptions) — redundant with the order's own line items right above
   it and the Subscriptions tab in My Account, so hide it on the order
   detail/thank-you view only. Scoped to .woocommerce-order-details —
   the main My Account → Subscriptions list page renders the exact same
   table class at the top level and must stay visible. */
.woocommerce-order-details header:has(+ table.woocommerce-orders-table--subscriptions),
.woocommerce-order-details table.woocommerce-orders-table--subscriptions { display: none; }

/* Minimal centred login screen (page-login.php) */
.acct-login-wrap {
  min-height: calc(100vh - 72px);
  padding: calc(72px + 3rem) 1.5rem 4rem;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acct-login-in { width: 100%; max-width: 440px; }
.acct-login-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--mid);
  text-decoration: none;
  margin-bottom: 1.25rem;
  transition: color .2s;
}
.acct-login-back:hover { color: var(--green); }
.acct-login-wrap--wide { align-items: flex-start; padding-top: calc(72px + 3rem); }
.acct-login-in--wide { max-width: var(--max); }
.acct-login-in .woocommerce-form-login,
.acct-login-in .woocommerce-form-register,
.acct-login-in .woocommerce-ResetPassword {
  max-width: none;
  box-shadow: 0 20px 50px var(--shadow);
}
.acct-login-in h1 {
  font-family: var(--fb);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.acct-login-in--wide h1 {
  font-family: var(--fd);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--dark);
  margin-bottom: .5rem;
}
.acct-login-in .woocommerce-LostPassword { font-size: .78rem; }

/* Login screen only: logo + "Welcome back" heading live inside the same
   card as the form, instead of floating above it as a separate element. */
.acct-login-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  padding: 2.75rem;
  box-shadow: 0 20px 50px var(--shadow);
}
.acct-login-card-brand { display: flex; justify-content: center; margin-bottom: 1.75rem; }
.acct-login-card-brand .nav-logo-img { height: 40px; width: auto; }
.acct-login-in .acct-login-card-title,
.acct-login-card-title {
  font-family: var(--fd); font-size: 1.4rem; font-weight: 700; color: var(--dark);
  text-align: center; text-transform: none; letter-spacing: normal;
  margin: 0 0 1.5rem;
}
.acct-login-card .woocommerce-form-login {
  max-width: none !important; padding: 0 !important; border: none !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; margin: 0 !important;
}
/* Bigger, neater inputs on this card specifically */
.acct-login-card .form-row input.input-text {
  padding: 1rem 1.15rem !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
}
.acct-login-card .form-row { margin-bottom: 1.35rem; }
.acct-login-card .form-row label { font-size: .85rem; margin-bottom: .5rem; display: inline-block; }
@media (max-width: 480px) {
  .acct-login-card { padding: 1.75rem; }
}

/* This template has no hero image under the header, so the usual
   "transparent + white text until scroll" inner-page header treatment
   (main.css .site-header--inner) has nothing dark to sit on — force the
   normal opaque/dark-text header here instead. */
body.page-template-page-templatespage-login-php .site-header {
  background: rgba(250,250,247,.97) !important;
  backdrop-filter: blur(20px);
}
body.page-template-page-templatespage-login-php .site-header .nav-menu a { color: var(--dark) !important; }
body.page-template-page-templatespage-login-php .site-header .nav-menu a:hover,
body.page-template-page-templatespage-login-php .site-header .nav-menu .current-menu-item > a { color: var(--green) !important; }
body.page-template-page-templatespage-login-php .site-header .nlt-just { color: var(--dark) !important; }
body.page-template-page-templatespage-login-php .site-header .nlt-act { color: var(--green-m) !important; }
body.page-template-page-templatespage-login-php .site-header .nav-cta { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
body.page-template-page-templatespage-login-php .site-header .nav-hamburger span { background: var(--dark) !important; }
body.page-template-page-templatespage-login-php .site-header .nav-login { color: var(--dark) !important; }
body.page-template-page-templatespage-login-php .site-header .nav-login:hover { color: var(--green) !important; }
body.page-template-page-templatespage-login-php .site-header .nav-account { color: var(--dark) !important; }
/* The .site-header--inner filter:brightness(10) trick (main.css) is meant to
   whiten an uploaded logo image pre-scroll over a dark hero — this template
   has no dark hero, so it was blowing the (already-coloured) logo icon out
   to near-invisible white-on-cream. Disable it here. */
body.page-template-page-templatespage-login-php .site-header .nav-logo-img { filter: none !important; }

/* Sign-up link on the login card */
.acct-login-signup {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  font-size: .88rem;
  color: var(--mid);
}
.acct-login-signup a { color: var(--green); font-weight: 600; text-decoration: none; }
.acct-login-signup a:hover { text-decoration: underline; }

/* Inputs / selects / textareas */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label { font-size: .8rem; font-weight: 600; color: var(--dark); }

/* Newsletter consent checkbox — its <label> wraps the checkbox and its
   sentence-length text together (unlike a normal field, whose label is just
   a short caption), so the generic bold field-label rule above reads wrong
   here. */
.woocommerce form .form-row.aha-newsletter-consent-field label,
.woocommerce-page form .form-row.aha-newsletter-consent-field label {
  font-size: .88rem;
  font-weight: 400;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce table.shop_table td select,
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  padding: .75rem 1rem !important;
  height: auto !important;
  font-family: var(--fb);
  font-size: .92rem;
  color: var(--dark);
  background: var(--white);
}
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
/* Plain (non-select2) <select> fields — e.g. this theme's own membership
   profile fields — need their own arrow since we're overriding the
   native appearance to match the input styling above. */
.woocommerce form .form-row select,
.woocommerce-page form .form-row select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888880' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem !important;
}
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row select:focus { border-color: var(--green) !important; outline: none; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--green) !important; outline: none; }

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce #payment #place_order,
.woocommerce-Button, .wc-proceed-to-checkout a.checkout-button {
  background: var(--green) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: .9rem 2rem !important;
  font-family: var(--fb);
  font-weight: 600;
  font-size: .92rem;
  border: none !important;
  transition: background .2s, transform .15s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #payment #place_order:hover, .woocommerce-Button:hover {
  background: var(--green-d) !important;
  transform: translateY(-1px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--green) !important; }

/* Tables — cart, order review, order history */
.woocommerce table.shop_table {
  border: 1px solid var(--border);
  border-radius: var(--rs);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--green-xl);
  font-family: var(--fb);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mid);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--border); padding: .9rem 1rem; }

/* My Account — vertical sidebar nav (core WC classic-layout CSS already
   floats .woocommerce-MyAccount-navigation at 30% / .woocommerce-MyAccount-
   content at 68%; this just restyles the nav itself from a wrapped pill
   row into a proper stacked sidebar card). */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 240px; float: left; margin: 0 2.5rem 2rem 0;
}
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; overflow: hidden; }
.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: .5rem;
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
}
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .7rem 1rem;
  border-radius: var(--rs);
  font-size: .98rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.woocommerce-MyAccount-navigation li a:hover { color: var(--green); background: var(--green-xl); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--green); color: #fff; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin: 0 0 2rem; }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .woocommerce-MyAccount-navigation li a { padding: .5rem .9rem; }
}

/* Notices — full reset, no icon (WC's default ::before icon + padding math
   collided with our tighter padding, overlapping the text), just a clean
   flat alert box with a left accent bar. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  list-style: none !important;
  margin: 0 0 1.5rem !important;
  padding: 1rem 1.25rem !important;
  border: none !important;
  border-left: 4px solid var(--green) !important;
  border-radius: var(--rs) !important;
  background: var(--green-xl) !important;
  color: var(--dark) !important;
  font-size: .92rem;
  line-height: 1.6;
  box-shadow: none !important;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before,
.woocommerce-error li::before { display: none !important; content: none !important; }
.woocommerce-error { border-left-color: var(--orange) !important; background: var(--orange-l) !important; }
.woocommerce-error li { margin: 0; padding: 0 !important; list-style: none; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  background: var(--green) !important;
  color: #fff !important;
  margin-left: auto;
  flex-shrink: 0;
}

/* Login / register / reset-password form (rendered by [woocommerce_my_account]) */
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
  max-width: 440px;
  padding: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--cream);
}
.woocommerce-form-login .form-row, .woocommerce-form-register .form-row, .woocommerce-ResetPassword .form-row { margin-bottom: 1.1rem; }
.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--mid); }
.woocommerce-LostPassword a, .u-column1.col-1 + .u-column2.col-2 a { color: var(--green); }

@media(max-width: 767px) {
  .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { padding: 1.75rem; max-width: 100%; }
}

/* Checkout page (page-checkout.php) — same minimal treatment as the login
   screen: no hero image, so force the normal opaque/dark-text header. */
body.page-template-page-templatespage-checkout-php .site-header { background: rgba(250,250,247,.97) !important; backdrop-filter: blur(20px); }
body.page-template-page-templatespage-checkout-php .site-header .nav-menu a { color: var(--dark) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nav-menu a:hover,
body.page-template-page-templatespage-checkout-php .site-header .nav-menu .current-menu-item > a { color: var(--green) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nlt-just { color: var(--dark) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nlt-act { color: var(--green-m) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nav-cta { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
body.page-template-page-templatespage-checkout-php .site-header .nav-hamburger span { background: var(--dark) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nav-login { color: var(--dark) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nav-login:hover { color: var(--green) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nav-account { color: var(--dark) !important; }
body.page-template-page-templatespage-checkout-php .site-header .nav-logo-img { filter: none !important; }

.chk-wrap { background: var(--cream); padding: calc(72px + 3rem) 1.5rem 5rem; }
.chk-in { max-width: 900px; margin: 0 auto; }
.chk-in h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: .5rem 0 1.5rem; }
.chk-in > p { font-size: .95rem; color: var(--mid); line-height: 1.75; max-width: 620px; margin-bottom: 2rem; }

.chk-in .woocommerce-checkout,
.chk-in .woocommerce-form-coupon,
.chk-in .cart-empty,
.chk-in .woocommerce-info {
  max-width: none;
}
.chk-in .woocommerce-checkout {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  padding: 2.5rem;
}
.chk-in .woocommerce-billing-fields h3 { font-family: var(--fd); font-size: 1.2rem; margin-bottom: 1rem; }

/* Core WC CSS floats #customer_details .col-1/.col-2 at ~48% side by side —
   collapse that to a single full-width column so billing fields use the
   whole box and "Your order"/payment sit directly beneath, not beside a
   blank gutter. */
.chk-in #customer_details.col2-set,
.chk-in #customer_details .col-1,
.chk-in #customer_details .col-2 {
  width: 100%; float: none; margin: 0;
}
.chk-in .woocommerce-billing-fields .form-row-first,
.chk-in .woocommerce-billing-fields .form-row-last {
  width: calc(50% - .5rem); float: left;
}
.chk-in .woocommerce-billing-fields .form-row-last { float: right; }

.chk-in #order_review { margin-top: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* "Your order" collapsible toggle — JS (main.js initCheckoutOrderToggle)
   turns the plain <h3 id="order_review_heading"> into this clickable bar
   and collapses the itemised table below it; #payment (gateway + Pay
   button) is a sibling, outside the table, so it always stays visible. */
.chk-in #order_review_heading,
.chk-in h3#order_review_heading {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--fd); font-size: 1.08rem; font-weight: 600;
  margin: 0 0 .75rem; padding: .9rem 1.1rem;
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--rs);
  cursor: pointer; user-select: none;
}
.chk-order-toggle-total { margin-left: auto; font-weight: 600; color: var(--dark); }
.chk-order-toggle-chevron { display: flex; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.chk-in #order_review_heading.is-open .chk-order-toggle-chevron { transform: rotate(180deg); }
.chk-in .woocommerce-checkout-review-order-table.chk-collapsed {
  display: none;
}

/* Flat, receipt-style order review — replace the boxed/green-header generic
   .shop_table look with plain rows on hairline dividers, no outer frame. */
.woocommerce.chk-in table.woocommerce-checkout-review-order-table,
.chk-in .woocommerce-checkout-review-order-table {
  border: none; border-radius: 0; margin: 0 0 1.5rem;
}
.chk-in .woocommerce-checkout-review-order-table thead { display: none; }
.chk-in .woocommerce-checkout-review-order-table th,
.chk-in .woocommerce-checkout-review-order-table td {
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: .85rem 0;
}
.chk-in .woocommerce-checkout-review-order-table tbody tr:first-child td { padding-top: 0; }
.chk-in .woocommerce-checkout-review-order-table .cart_item td.product-name { color: var(--dark); font-size: 1rem; }
.chk-in .woocommerce-checkout-review-order-table .cart_item td.product-total { text-align: right; color: var(--dark); font-size: 1rem; }
.chk-in .woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 500; }
.chk-in .woocommerce-checkout-review-order-table tfoot th,
.chk-in .woocommerce-checkout-review-order-table tfoot td {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600;
}
.chk-in .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-size: 1rem; text-transform: none; letter-spacing: normal; color: var(--dark); font-weight: 600; }
.chk-in .woocommerce-checkout-review-order-table tfoot .order-total th,
.chk-in .woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 1.12rem; color: var(--dark); }
.chk-in .woocommerce-checkout-review-order-table tfoot .order-total td .amount { font-size: 1.12rem; }
.chk-in .woocommerce-checkout-review-order-table tfoot tr:last-child th,
.chk-in .woocommerce-checkout-review-order-table tfoot tr:last-child td { border-bottom: none; }
.chk-in .woocommerce-checkout-review-order-table .recurring-total td small { display: block; margin-top: .2rem; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: normal; font-size: .85rem; }

/* Payment section — strip WC's default lavender panel/speech-bubble chrome
   (#payment bg, ul.payment_methods padding+border, .payment_box bg+::before
   arrow) for a flat, minimal look that matches the rest of the checkout box. */
.chk-in #payment { background: none; border-radius: 0; }
.chk-in #payment ul.payment_methods,
.woocommerce-checkout .chk-in #payment ul.payment_methods { padding: 0; border-bottom: none; }

.chk-in .wc_payment_methods { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.chk-in .wc_payment_method { border: 1px solid var(--border); border-radius: var(--rs); padding: 0; overflow: hidden; }
.chk-in .wc_payment_method label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .98rem; font-weight: 500; color: var(--dark);
  padding: .9rem 1.1rem; line-height: 1.4;
}
.chk-in .wc_payment_method label img { max-width: 150px; height: auto; margin: 0 0 0 auto; }

.chk-in #payment div.payment_box,
.woocommerce-checkout .chk-in #payment div.payment_box {
  position: static;
  font-size: .82rem; color: var(--muted);
  background-color: var(--cream); border-top: 1px solid var(--border);
  border-radius: 0;
  padding: .85rem 1.1rem; margin: 0;
}
.chk-in #payment div.payment_box::before,
.woocommerce-checkout .chk-in #payment div.payment_box::before { display: none; content: none; }

/* Saved payment method picker (Paystack/WC core markup: a plain <ul> of
   radio + label rows) — replace the unstyled browser radios and bare text
   with the same card-row language used elsewhere on checkout. */
.chk-in .woocommerce-SavedPaymentMethods {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.chk-in .woocommerce-SavedPaymentMethods-token,
.chk-in .woocommerce-SavedPaymentMethods-new {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--white); transition: border-color .2s, background .2s;
}
.chk-in .woocommerce-SavedPaymentMethods-token:has(input:checked),
.chk-in .woocommerce-SavedPaymentMethods-new:has(input:checked) {
  border-color: var(--green); background: var(--green-xl);
}
.chk-in .woocommerce-SavedPaymentMethods-tokenInput {
  appearance: none; -webkit-appearance: none;
  /* !important beats WC core's own inline style="width:auto" on this
     input — without it only the width falls back to the browser's native
     (much narrower) radio size while height stays at 19px, rendering an
     oval instead of a circle. */
  width: 19px !important; height: 19px !important; flex-shrink: 0; margin: 0 !important;
  border: 1.5px solid var(--border); border-radius: 50%;
  background: var(--white); cursor: pointer; position: relative;
  transition: border-color .2s;
  box-sizing: border-box;
}
.chk-in .woocommerce-SavedPaymentMethods-tokenInput:checked {
  border-color: var(--green); border-width: 5px;
}
.chk-in .woocommerce-SavedPaymentMethods-token label,
.chk-in .woocommerce-SavedPaymentMethods-new label {
  display: flex; align-items: center; gap: .55rem;
  font-size: .92rem; font-weight: 500; color: var(--dark);
  cursor: pointer; margin: 0; flex: 1;
}
.chk-in .woocommerce-SavedPaymentMethods-token label::before {
  content: '\f09d'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--green); font-size: .95rem; flex-shrink: 0;
}
.chk-in .woocommerce-SavedPaymentMethods-new label::before {
  content: '\2b'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--muted); font-size: .85rem; flex-shrink: 0;
}
.chk-in .woocommerce-SavedPaymentMethods-saveNew {
  display: flex; align-items: center; gap: .55rem;
  font-size: .85rem; color: var(--mid); margin: -.25rem 0 1rem;
}
.chk-in .woocommerce-SavedPaymentMethods-saveNew input { accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }
.chk-in .woocommerce-SavedPaymentMethods-saveNew label { margin: 0; }
.chk-in .payment_box p { font-size: .82rem; color: var(--muted); margin: 0; }

/* Terms/privacy text + submit row */
.chk-in .woocommerce-privacy-policy-text { font-size: .8rem; color: var(--muted); line-height: 1.6; }
.chk-in .woocommerce-privacy-policy-text a { color: var(--green); text-decoration: underline; }
.chk-in .form-row.place-order {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-top: 1.5rem; margin-top: 0; border-top: none;
}
.chk-in .form-row.place-order .woocommerce-privacy-policy-text { flex: 1; margin: 0; }
.chk-in #place_order { flex-shrink: 0; margin: 0; }

@media (max-width: 560px) {
  .chk-in .form-row.place-order { flex-direction: column; align-items: stretch; }
  .chk-in #place_order { width: 100%; }
}

@media(max-width: 767px) {
  .chk-in .woocommerce-checkout { padding: 1.5rem; }
}

/* ── Order-received / "Thank you" page ──────────────────────────────── */
.chk-wrap--thankyou { padding-bottom: 6rem; }
.chk-in .woocommerce-order { max-width: 100%; }

/* Success banner ("Thank you. Your order has been received.") */
.chk-in .woocommerce-thankyou-order-received,
.chk-in p.woocommerce-notice.woocommerce-notice--success {
  display: flex; align-items: center; gap: 1rem;
  background: var(--green-xl); border: 1px solid var(--border); border-left: 4px solid var(--green);
  border-radius: var(--r); padding: 1.1rem 1.5rem; margin: 0 0 2rem;
  font-size: 1rem; font-weight: 600; color: var(--dark); line-height: 1.5;
}
.chk-in .woocommerce-thankyou-order-received::before {
  content: "\2713";
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 1rem; font-weight: 700;
}

/* Order overview stat row (order number / date / total / payment method) */
.chk-in ul.woocommerce-order-overview {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  list-style: none; margin: 0 0 2.5rem; padding: 1.5rem 1.75rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
}
.chk-in ul.woocommerce-order-overview li {
  float: none; border: none; margin: 0; padding: 0;
  flex: 1 1 140px; text-transform: none;
  font-size: .85rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
}
.chk-in ul.woocommerce-order-overview li strong {
  display: block; margin-top: .3rem;
  font-size: 1.2rem; font-weight: 600; text-transform: none; letter-spacing: normal;
  color: var(--dark); line-height: 1.4; font-family: var(--fd);
}

/* Line items + billing/shipping address columns shown to the account owner */
.chk-in .woocommerce-order-details,
.chk-in .woocommerce-order-downloads,
.chk-in .woocommerce-customer-details { margin-bottom: 2.5rem; }
.chk-in .woocommerce-order-details h2,
.chk-in .woocommerce-order-downloads h2,
.chk-in .woocommerce-customer-details h2 {
  font-family: var(--fd); font-size: 1.15rem; margin-bottom: 1.1rem; color: var(--dark);
}
.chk-in .woocommerce-customer-details .woocommerce-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.chk-in .woocommerce-customer-details address {
  border: 1px solid var(--border); border-radius: var(--rs);
  padding: 1rem 1.25rem; font-size: .9rem; color: var(--mid); line-height: 1.75;
  background: var(--cream);
}
.chk-in .woocommerce-customer-details .woocommerce-column__title { font-size: .95rem; margin-bottom: .6rem; color: var(--dark); }

/* Guest / "known shopper" login prompt (order belongs to a registered
   account — visitor must log in to view it) */
.chk-in p.woocommerce-info { max-width: 480px; margin: 0 auto 1.5rem; }
.chk-in .woocommerce-form-login {
  max-width: 420px; margin: 0 auto; padding: 1.75rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
}
.chk-in .woocommerce-form-login .lost_password { margin: .5rem 0 0; font-size: .82rem; }
.chk-in .woocommerce-form-login .woocommerce-form-login__submit { margin-top: .25rem; }

/* Guest-order email-verification prompt (order has no logged-in owner) */
.chk-in .woocommerce-verify-email {
  max-width: 420px; margin: 0 auto; padding: 1.75rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
}
.chk-in .woocommerce-verify-email > p:first-child {
  font-size: .92rem; color: var(--mid); line-height: 1.6; margin-bottom: 1.1rem;
}
.chk-in .woocommerce-verify-email a { color: var(--green); font-weight: 600; }

@media (max-width: 700px) {
  .chk-in .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr; }
  .chk-in ul.woocommerce-order-overview { gap: 1.25rem 2rem; }
}

/* ── My Account dashboard (woocommerce/myaccount/dashboard.php override) ── */
.acct-dash-welcome {
  font-family: var(--fd); font-size: 1.1rem; font-weight: 500; color: var(--dark);
  margin: 0 0 1.25rem;
}

/* "Complete your profile" prompt — shown only while a required field
   (age group, resident, county when applicable, citizen) is still empty. */
.acct-dash-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--orange-l); border: 1px solid var(--orange);
  border-radius: var(--rs); padding: .75rem 1rem; margin: 0 0 1.1rem;
}
.acct-dash-banner-text { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--orange-d); }
.acct-dash-banner-text i { flex-shrink: 0; }
.acct-dash-banner .acct-dash-btn--ghost { flex-shrink: 0; border-color: var(--orange); color: var(--orange-d) !important; }
.acct-dash-banner .acct-dash-btn--ghost:hover { background: var(--white); }
.acct-dash-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.acct-dash-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rs);
  overflow: hidden;
  transition: box-shadow .2s;
}
.acct-dash-card:hover { box-shadow: 0 6px 18px var(--shadow); }
/* Subtle colour accent along the top edge of the subscription card, so its
   state reads at a glance before the eye even reaches the badge text. */
.acct-dash-card--sub { border-top: 2px solid var(--green); }
.acct-dash-card--sub.acct-dash-card--on-hold,
.acct-dash-card--sub.acct-dash-card--pending-cancel,
.acct-dash-card--sub.acct-dash-card--pending { border-top-color: var(--orange); }
.acct-dash-card--sub.acct-dash-card--cancelled,
.acct-dash-card--sub.acct-dash-card--expired { border-top-color: var(--red); }

.acct-dash-card-head { padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.acct-dash-card-head-link {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); border: 1px solid var(--border); font-size: .68rem;
  transition: background .2s, color .2s, border-color .2s;
}
.acct-dash-card-head-link:hover { background: var(--green); color: #fff !important; border-color: var(--green); }
.acct-dash-card-head h3,
/* Beats the generic "My Account content" h2/h3 header-bar treatment
   (extra background/border/rounded-top-corners) further down this file —
   same specificity, later in the cascade, was double-boxing these titles
   inside the card-head's own bar. */
.woocommerce-MyAccount-content .acct-dash-card-head h3 {
  font-family: var(--fb); font-size: .84rem; font-weight: 600; color: var(--dark);
  margin: 0; background: none; border: none; border-radius: 0; padding: 0;
  display: flex; align-items: center; gap: .4rem;
}
.acct-dash-card-head h3 i { color: var(--green); font-size: .78rem; }
.acct-dash-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }

.acct-dash-sub-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.acct-dash-sub-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.acct-dash-sub-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-xl); color: var(--green); font-size: .82rem;
}
.acct-dash-sub-icon--on-hold, .acct-dash-sub-icon--pending-cancel, .acct-dash-sub-icon--pending { background: var(--orange-l); color: var(--orange-d); }
.acct-dash-sub-icon--cancelled, .acct-dash-sub-icon--expired { background: var(--red-l); color: var(--red-d); }
.acct-dash-sub-top-text { display: flex; flex-direction: column; gap: .25rem; }
.acct-dash-amount { font-family: var(--fd); font-size: 1.1rem; font-weight: 600; color: var(--dark); line-height: 1; }
.acct-dash-badge {
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding: .22rem .55rem; border-radius: 50px; white-space: nowrap;
  background: var(--green-xl); color: var(--green);
  align-self: flex-start;
}
.acct-dash-badge--on-hold, .acct-dash-badge--pending, .acct-dash-badge--pending-cancel { background: var(--orange-l); color: var(--orange-d); }
.acct-dash-badge--cancelled, .acct-dash-badge--expired, .acct-dash-badge--failed { background: var(--red-l); color: var(--red-d); }
.acct-dash-badge--refunded { background: var(--border); color: var(--muted); }
.acct-dash-badge--processing, .acct-dash-badge--completed { background: var(--green-xl); color: var(--green); }
.acct-dash-meta { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; }

/* Missed-payment / arrears panel — surfaces what's owed and lets the
   member catch up in one click, instead of the subscription silently
   sitting on-hold until an admin intervenes. */
.acct-dash-arrears { background: var(--orange-l); border: 1px solid var(--orange); border-radius: var(--rs); padding: .8rem .9rem; margin: .25rem 0 0; }
.acct-dash-arrears-msg { font-size: .82rem; color: var(--orange-d); margin: 0 0 .65rem; line-height: 1.45; }
.acct-dash-arrears .acct-dash-actions { padding-top: 0; flex-wrap: wrap; }
.acct-dash-arrears .acct-dash-btn { flex: 1; white-space: nowrap; }
.acct-dash-arrears .acct-dash-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.acct-dash-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.acct-dash-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: 50px;
  background: var(--green); color: #fff !important; font-size: .82rem; font-weight: 500;
  text-decoration: none; transition: background .2s;
  border: none; cursor: pointer; font-family: inherit;
}
.acct-dash-btn:hover { background: var(--green-d); }
/* Button colour follows the same severity scale as the badges/icons above:
   green = healthy action (renew, pay), amber = needs a decision soon
   (reactivate before it lapses), red = already lapsed (resubscribe). */
.acct-dash-btn--warning { background: var(--orange); }
.acct-dash-btn--warning:hover { background: var(--orange-d); }
.acct-dash-btn--danger { background: var(--red); }
.acct-dash-btn--danger:hover { background: var(--red-d); }
.acct-dash-btn--ghost.aha-arrears-pay { background: transparent; border: 1px solid var(--orange); color: var(--orange-d) !important; }
.acct-dash-btn--ghost.aha-arrears-pay:hover { background: rgba(255,255,255,.4); }
.acct-dash-btn--ghost { background: none; color: var(--dark) !important; border: 1.5px solid var(--border); }
.acct-dash-btn--ghost:hover { background: var(--green-xl); border-color: var(--green-xl); }

.acct-dash-empty { font-size: .86rem; color: var(--muted); margin: 0 0 .9rem; }

.acct-dash-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.acct-dash-list li { border-bottom: 1px solid var(--border); }
.acct-dash-list li:last-child { border-bottom: none; }
.acct-dash-list li a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; text-decoration: none;
}
.acct-dash-list:not(.acct-dash-list--cards) li a:hover .acct-dash-list-date { color: var(--green); }
.acct-dash-list-date { font-size: .85rem; color: var(--mid); }
.acct-dash-list-amount { font-size: .86rem; font-weight: 500; color: var(--dark); }
.acct-dash-list--cards li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; font-size: .86rem; color: var(--dark);
}
.acct-dash-list-meta { font-size: .8rem; color: var(--muted); }

.acct-dash-link { font-size: .92rem; font-weight: 500; color: var(--green); text-decoration: none; margin-top: auto; }
.acct-dash-link:hover { text-decoration: underline; }

/* ═══ ORDERS LIST — card rows instead of WooCommerce's plain table,
   matching the dashboard's badge/button language ═══ */
.acct-orders-head {
  display: grid; grid-template-columns: 1fr 1.4fr 1.6fr 1fr 1.6fr;
  gap: 1rem; padding: 0 1.4rem .75rem;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.acct-order-row {
  display: grid; grid-template-columns: 1fr 1.4fr 1.6fr 1fr 1.6fr;
  align-items: center; gap: 1rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rs);
  padding: 1.1rem 1.4rem; margin-bottom: .75rem;
  transition: box-shadow .2s, transform .2s;
}
.acct-order-row:hover { box-shadow: 0 8px 22px var(--shadow); transform: translateY(-1px); }
.acct-order-cell--id a { font-family: var(--fd); font-weight: 700; color: var(--dark); text-decoration: none; }
.acct-order-cell--id a:hover { color: var(--green); }
.acct-order-cell--date time { font-size: .9rem; color: var(--mid); }
.acct-order-cell--total { font-size: .9rem; color: var(--mid); }
.acct-order-cell--actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.acct-order-cell--actions .acct-dash-btn { padding: .45rem .95rem; font-size: .82rem; }
.acct-dash-btn--ghost-danger { color: var(--red-d) !important; border-color: var(--red-l); }
.acct-dash-btn--ghost-danger:hover { background: var(--red-l); border-color: var(--red); }

.acct-orders-empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.acct-orders-empty i { font-size: 2.5rem; opacity: .3; margin-bottom: 1rem; display: block; }
.acct-orders-empty p { margin-bottom: 1.25rem; font-size: 1rem; }

.acct-orders-pagination { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

@media (max-width: 800px) {
  .acct-orders-head { display: none; }
  .acct-order-row { grid-template-columns: 1fr; gap: .5rem; }
  .acct-order-cell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .acct-order-cell::before { content: attr(data-label); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
  .acct-order-cell--actions { justify-content: flex-start; padding-top: .5rem; border-top: 1px solid var(--border); margin-top: .25rem; }
  .acct-order-cell--actions::before { display: none; }
}

@media (max-width: 900px) {
  .acct-dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .acct-dash-grid { grid-template-columns: 1fr; }
}

/* ═══ SINGLE ORDER VIEW — status-badge header card + timeline notes
   (theme override of myaccount/view-order.php) instead of the plain
   "Order #X was placed on Y and is currently Z." sentence ═══ */
.acct-order-view-header {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rs);
  padding: 1.5rem 1.6rem; margin-bottom: 1.5rem;
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}
.acct-order-view-header-main { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.acct-order-view-header-main h2 {
  font-family: var(--fd); font-weight: 700; color: var(--dark); font-size: 1.3rem; margin: 0 !important;
  background: none !important; border: none !important; padding: 0 !important; /* undo generic h2 boxing below */
}
.acct-order-view-status { font-size: .78rem; padding: .35rem .8rem; }
.acct-order-view-header-meta { font-size: .92rem; color: var(--muted); }

.acct-order-view-subtitle {
  background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important;
  margin: 2rem 0 .75rem !important;
}
.acct-order-updates { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.acct-order-updates .woocommerce-OrderUpdate-inner {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rs);
  padding: 1rem 1.2rem;
}
.acct-order-updates .woocommerce-OrderUpdate-meta { font-size: .8rem; color: var(--muted); margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .03em; }
.acct-order-updates .woocommerce-OrderUpdate-description p { font-size: .94rem; color: var(--dark); margin: 0; }

/* Order-details table's own Actions row (Pay/Cancel) — WC core prints
   generic "woocommerce-button button {key} order-actions-button" links;
   restyle as pill buttons colour-coded by how urgent the action is. */
.woocommerce a.order-actions-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.2rem !important; border-radius: 50px !important; margin: 0 .5rem .5rem 0;
  background: var(--green) !important; color: #fff !important; font-size: .92rem; font-weight: 500;
  text-decoration: none; transition: background .2s, transform .15s; border: none !important;
}
.woocommerce a.order-actions-button:hover { background: var(--green-d) !important; transform: translateY(-1px); }
.woocommerce a.order-actions-button.pay { background: var(--green) !important; }
.woocommerce a.order-actions-button.pay:hover { background: var(--green-d) !important; }
.woocommerce a.order-actions-button.cancel { background: none !important; color: var(--red-d) !important; border: 1.5px solid var(--red-l) !important; }
.woocommerce a.order-actions-button.cancel:hover { background: var(--red-l) !important; border-color: var(--red) !important; }
.woocommerce a.order-actions-button:not(.pay):not(.cancel) { background: none !important; color: var(--dark) !important; border: 1.5px solid var(--border) !important; }
.woocommerce a.order-actions-button:not(.pay):not(.cancel):hover { background: var(--green-xl) !important; border-color: var(--green-xl) !important; }
tr th.order-actions--heading { vertical-align: middle; }

/* Order-details totals table — bold the grand total row */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td { font-weight: 700; color: var(--dark); font-size: 1.02rem; }

/* Billing/customer details card under the order table */
.woocommerce-customer-details {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rs);
  padding: 1.5rem 1.6rem; margin-top: 1.5rem;
}
.woocommerce-customer-details .woocommerce-column__title {
  background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important;
  font-family: var(--fd); font-weight: 700; color: var(--dark); font-size: 1rem; margin: 0 0 .75rem !important;
}
.woocommerce-customer-details address { font-size: .94rem; color: var(--mid); line-height: 1.7; font-style: normal; }

/* ── Receipt card — wraps the order-details table + billing address in a
   single print-friendly card, styled like an actual receipt (dashed row
   dividers, centred brand mark, "Download as PDF" via the browser's own
   print dialog rather than a server-side PDF library). ── */
.acct-order-view-actions { display: flex; justify-content: flex-end; margin: 0 0 1.5rem; }
.acct-order-view-actions .aha-order-print { cursor: pointer; gap: .5rem; }

.acct-receipt {
  background: var(--white); border: 1.5px dashed var(--border); border-radius: var(--r);
  padding: 2rem 2.25rem 2.25rem; margin-top: 1.5rem;
}
.acct-receipt-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.acct-receipt-brand .acct-receipt-logo { height: 32px; width: auto; }
.acct-receipt-meta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1.5px dashed var(--border);
}
.acct-receipt-meta > div { display: flex; flex-direction: column; gap: .3rem; }
.acct-receipt-meta span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.acct-receipt-meta strong { font-size: .92rem; color: var(--dark); font-weight: 600; }

/* Flatten the core WC boxes now that .acct-receipt is the only card */
.acct-receipt .woocommerce-order-details,
.acct-receipt .woocommerce-customer-details {
  background: none; border: none; border-radius: 0; padding: 0; margin: 2rem 0 0;
}
.acct-receipt .woocommerce-order-details:first-child { margin-top: 0; }
.acct-receipt .woocommerce-order-details__title,
.acct-receipt .woocommerce-customer-details .woocommerce-column__title {
  font-family: var(--fb); font-weight: 600; color: var(--muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 1rem !important;
  background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important;
  box-shadow: none !important;
}
.acct-receipt table.woocommerce-table--order-details {
  border: none; border-collapse: collapse; width: 100%;
}
.acct-receipt table.woocommerce-table--order-details th,
.acct-receipt table.woocommerce-table--order-details td {
  border: none; border-bottom: 1px dashed var(--border);
  padding: .65rem 0; background: none;
}
.acct-receipt table.woocommerce-table--order-details thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600;
}
.acct-receipt table.woocommerce-table--order-details tfoot tr:last-child th,
.acct-receipt table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none; border-top: 1.5px dashed var(--border); padding-top: .85rem;
}
.acct-receipt-thanks {
  text-align: center; font-style: italic; color: var(--muted); font-size: .88rem;
  margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1.5px dashed var(--border);
}

/* Print / "Download as PDF" — hides everything but the receipt so the
   browser's native print-to-PDF produces a clean, single-purpose page. */
@media print {
  .site-header, .site-footer, .woocommerce-MyAccount-navigation,
  .acct-order-view-actions, .acct-order-updates, .acct-order-view-subtitle,
  #wpadminbar { display: none !important; }
  body { background: #fff !important; }
  .acct-receipt { border: none; padding: 0; margin: 0; }
  .acct-receipt-meta, .woocommerce-order-details, .woocommerce-customer-details { break-inside: avoid; }
}

/* ── My Account content headings (view-subscription, view-order,
   downloads, addresses…) — WooCommerce / WC Subscriptions core templates
   print bare <h2>/<h3> tags with no theme sizing, so they fall back to the
   browser's default heading scale, which reads oversized set in our Boing
   display font. Sized down + turned into a header bar that sits directly
   on top of its table/list, so heading + content read as one white box. */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--fd); font-weight: 700; color: var(--dark);
  margin: 2rem 0 0; line-height: 1.3;
}
.woocommerce-MyAccount-content h2 { font-size: 1.05rem; }
.woocommerce-MyAccount-content h3 { font-size: .95rem; }
.woocommerce-MyAccount-content > h2:first-child,
.woocommerce-MyAccount-content > h3:first-child { margin-top: 0; }

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  background: var(--white); border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--rs) var(--rs) 0 0; padding: .8rem 1.25rem;
}
.woocommerce-MyAccount-content h2 + table,
.woocommerce-MyAccount-content h2 + ul,
.woocommerce-MyAccount-content h2 + ol,
.woocommerce-MyAccount-content h2 + address,
.woocommerce-MyAccount-content h2 + .woocommerce-columns,
.woocommerce-MyAccount-content h3 + table,
.woocommerce-MyAccount-content h3 + ul,
.woocommerce-MyAccount-content h3 + ol {
  border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important;
}

/* Some sections (e.g. Subscriptions' "Related orders") wrap the heading in
   its own <header> rather than printing a bare h2 — same treatment, applied
   to the wrapper instead so it still merges with the table below it. */
.woocommerce-MyAccount-content header:has(> h2),
.woocommerce-MyAccount-content header:has(> h3) {
  background: var(--white); border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--rs) var(--rs) 0 0; padding: .8rem 1.25rem; margin: 2rem 0 0;
}
.woocommerce-MyAccount-content header:has(> h2) h2,
.woocommerce-MyAccount-content header:has(> h3) h3 {
  background: none; border: none; padding: 0; margin: 0;
}
.woocommerce-MyAccount-content > header:has(> h2):first-child,
.woocommerce-MyAccount-content > header:has(> h3):first-child { margin-top: 0; }
.woocommerce-MyAccount-content header:has(> h2) + table,
.woocommerce-MyAccount-content header:has(> h3) + table,
.woocommerce-MyAccount-content header:has(> h2) + ul,
.woocommerce-MyAccount-content header:has(> h2) + ol {
  border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important;
}

/* Edit-address form ("Billing address" under My Account → Addresses) — the
   heading here is followed by a plain <div>, not a table/ul/ol/address, so
   it's missed by the generic h2-merge rules above and was rendering as its
   own separate cream/bordered strip sitting on top of unboxed fields.
   Instead, box the whole <form> (heading + fields together) as one plain
   white rounded card, and strip the heading's own background/border so the
   title itself has no visible border, just plain text inside the card. */
.woocommerce-MyAccount-content form:has(> h2 + .woocommerce-address-fields) {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.75rem 2rem 2rem;
}
.woocommerce-MyAccount-content form:has(> h2 + .woocommerce-address-fields) > h2 {
  background: none; border: none; border-radius: 0; padding: 0; margin: 0 0 1.5rem;
}
@media (max-width: 600px) {
  .woocommerce-MyAccount-content form:has(> h2 + .woocommerce-address-fields) { padding: 1.5rem; }
}

/* Extra sections appended to that same edit-address form (Profile
   information, Change password) — their h2s sit inside a plain field
   wrapper div, not directly above a table/list, so they're missed by the
   ":has(> h2 + ...)" override above and fall through to the generic boxed
   h2 treatment. The whole form is already one card, so these just need to
   read as plain section titles, not their own nested boxes. */
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper h2 {
  background: none; border: none; border-radius: 0; padding: 0; margin: 0 0 1.25rem;
}

/* Order-note / subscription-update list — plain <ol>, no box by default */
.woocommerce-MyAccount-content ol.woocommerce-OrderUpdates,
.woocommerce-MyAccount-content .woocommerce-order-downloads__table {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: 0 0 var(--rs) var(--rs);
}
.woocommerce-OrderUpdate { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.woocommerce-OrderUpdate:last-child { border-bottom: none; }
.woocommerce-OrderUpdate-meta { font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.woocommerce-OrderUpdate-description { font-size: .88rem; color: var(--mid); }
.woocommerce-OrderUpdate-description p { margin: 0; }

/* ── Modern "My Subscription" hero (built by main.js initModernSubscriptionView
   from the plain data table WC Subscriptions renders) ── */
.sub-hero {
  background: var(--green); color: #fff;
  border-radius: var(--r); padding: 1.5rem 1.75rem; margin: 0 0 1rem;
  position: relative; overflow: hidden;
}
.sub-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 60%);
  pointer-events: none;
}
.sub-hero--on-hold, .sub-hero--pending, .sub-hero--pending-cancellation { background: var(--orange-d); }
.sub-hero--cancelled, .sub-hero--expired { background: var(--dark); }
.sub-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; position: relative; }
.sub-hero-plan-name { font-family: var(--fd); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.sub-hero-plan-price { font-size: .92rem; color: rgba(255,255,255,.8); margin-top: .2rem; }
.sub-hero-badge {
  flex-shrink: 0; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.18); color: #fff; padding: .32rem .75rem; border-radius: 50px;
  backdrop-filter: blur(6px);
}
.sub-hero-meta {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; color: rgba(255,255,255,.85);
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.18);
  position: relative;
}
.sub-hero-meta strong { color: #fff; font-weight: 600; }
.sub-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; position: relative; }
/* !important: these <a> also carry WC's own .button class, which our
   global `.woocommerce a.button{background:var(--green) !important}` rule
   (higher specificity, also !important) would otherwise apply here too —
   invisible green-on-green against this hero's own green background. */
.sub-hero-actions a,
.sub-hero .sub-hero-actions a.button {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: .5rem 1.1rem !important; border-radius: 50px !important;
  background: rgba(255,255,255,.16) !important; color: #fff !important;
  font-size: .82rem; font-weight: 500;
  text-decoration: none; border: 1px solid rgba(255,255,255,.35) !important;
  transition: background .2s, transform .15s;
}
.sub-hero-actions a:hover,
.sub-hero .sub-hero-actions a.button:hover {
  background: #fff !important; color: var(--green) !important; transform: translateY(-1px);
}
.sub-hero-actions a.cancel { border-color: rgba(255,255,255,.22) !important; opacity: .85; }

/* "Upgrade or Downgrade" switch link — WC Subscriptions prints this inline
   right after the product name/qty in the totals table, where it collided
   with the text. Push it onto its own line as a small pill. */
.woocommerce-MyAccount-content .wcs-switch-link {
  display: inline-flex !important; margin: .5rem 0 0 !important;
  padding: .3rem .8rem !important; border-radius: 50px !important;
  background: var(--green-xl) !important; color: var(--green) !important;
  font-size: .78rem !important; font-weight: 600;
  border: none !important;
}
.woocommerce-MyAccount-content .wcs-switch-link:hover { background: var(--green) !important; color: #fff !important; }
.woocommerce-MyAccount-content td.product-name:has(.wcs-switch-link) { display: flex; flex-direction: column; align-items: flex-start; }

/* ── Everything below the hero on the view-subscription page — the raw
   details table, "Subscription totals", "Related orders" — restyled as one
   consistent, lighter-weight sequence of cards instead of three separately
   boxed sections each with their own heavy header bar. Scoped via sibling
   selectors off .subscription_details--secondary (a class only main.js's
   initModernSubscriptionView() adds, and only on this page), so nothing
   else in My Account is affected. ── */
.woocommerce-MyAccount-content table.subscription_details.subscription_details--secondary {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rs);
  border-collapse: collapse; overflow: hidden;
}
.subscription_details--secondary td,
.subscription_details--secondary th { font-size: .84rem; padding: .65rem 1rem; border-color: var(--border); }
.subscription_details--secondary td:first-child,
.subscription_details--secondary th:first-child { color: var(--muted); width: 40%; }

.subscription_details--secondary ~ h2,
.subscription_details--secondary ~ h3,
.subscription_details--secondary ~ header:has(> h2),
.subscription_details--secondary ~ header:has(> h3) {
  background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important;
  font-family: var(--fb); font-weight: 600; color: var(--muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; margin: 1.75rem 0 .75rem !important;
}
.subscription_details--secondary ~ header:has(> h2) h2,
.subscription_details--secondary ~ header:has(> h3) h3 {
  background: none; border: none; padding: 0; margin: 0;
  font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.subscription_details--secondary ~ h2 + table,
.subscription_details--secondary ~ h3 + table,
.subscription_details--secondary ~ header:has(> h2) + table,
.subscription_details--secondary ~ header:has(> h3) + table {
  border-radius: var(--rs) !important;
}
.subscription_details--secondary ~ table.shop_table,
.subscription_details--secondary ~ .woocommerce-customer-details {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rs);
  border-collapse: collapse; font-size: .84rem;
}
.subscription_details--secondary ~ table.shop_table th,
.subscription_details--secondary ~ table.shop_table td { padding: .65rem 1rem; border-color: var(--border); }
.subscription_details--secondary ~ table.shop_table thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600;
}
.subscription_details--secondary ~ table.shop_table tfoot tr:last-child th,
.subscription_details--secondary ~ table.shop_table tfoot tr:last-child td { font-weight: 700; color: var(--dark); }
.subscription_details--secondary ~ .woocommerce-customer-details { padding: 1.25rem 1.4rem; margin-top: 1.75rem !important; }
.subscription_details--secondary ~ .woocommerce-customer-details .woocommerce-column__title {
  font-family: var(--fb) !important; font-weight: 600 !important; color: var(--muted) !important; font-size: .72rem !important;
  text-transform: uppercase; letter-spacing: .04em;
}

@media (max-width: 600px) {
  .sub-hero-top { flex-direction: column; }
  .sub-hero-actions a { flex: 1 1 auto; }
}

/* Gift-a-membership checkout summary */
.chk-gift-summary {
  background: linear-gradient(135deg, var(--green-xl), var(--white));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem;
  margin: 0 0 1.75rem;
  box-shadow: 0 16px 40px var(--shadow);
  position: relative;
  overflow: hidden;
}
.chk-gift-summary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--green-m)); }
.chk-gift-summary-head { display: flex; align-items: center; gap: .6rem; font-family: var(--fd); font-weight: 700; font-size: 1.05rem; color: var(--dark); margin: 0 0 1.1rem; }
.chk-gift-summary-head i {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--white); color: var(--green); font-size: .85rem;
  box-shadow: 0 4px 12px var(--shadow);
}
.chk-gift-summary-body { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0 0 1rem; }
.chk-gift-summary-body dt { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; align-self: center; }
.chk-gift-summary-body dd { margin: 0; font-size: .92rem; color: var(--dark); align-self: center; }
.chk-gift-summary-remove { font-size: .84rem; color: #b3261e; text-decoration: underline; font-weight: 500; }
.chk-gift-summary-remove:hover { color: #8a2018; }

/* Account dashboard — "Gifts you've given" */
.acct-dash-card--wide { grid-column: 1 / -1; margin-top: 1.5rem; }
.acct-dash-list--gifts li.acct-dash-gift-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; flex-wrap: wrap; }
.acct-dash-list--gifts .acct-dash-gift-who { display: flex; align-items: baseline; gap: .4rem; flex: 1; min-width: 0; }
.acct-dash-list--gifts .acct-dash-list-amount { font-size: .82rem; white-space: nowrap; }
.acct-dash-list--gifts .acct-dash-gift-who .acct-dash-list-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-dash-list--gifts .acct-dash-badge { flex-shrink: 0; }
.acct-dash-list--gifts .acct-dash-gift-until { font-size: .76rem; color: var(--muted); flex-shrink: 0; }
.acct-dash-list--gifts .aha-cancel-gift { flex-shrink: 0; padding: .3rem .7rem; font-size: .7rem; }
@media (max-width: 480px) {
  .acct-dash-list--gifts .acct-dash-gift-who { flex-direction: column; align-items: flex-start; gap: .1rem; flex-basis: 100%; }
  .acct-dash-list--gifts .acct-dash-gift-who .acct-dash-list-meta { overflow: visible; text-overflow: clip; white-space: normal; }
}

/* Account dashboard — "This membership was gifted to you" */
.acct-dash-gift-received { background: var(--green-xl); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem; margin: 0 0 .9rem; }
.acct-dash-gift-received summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--dark); list-style: none; display: flex; align-items: center; gap: .4rem; }
.acct-dash-gift-received summary::-webkit-details-marker { display: none; }
.acct-dash-gift-received summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: .68rem; color: var(--muted); }
.acct-dash-gift-received[open] summary::after { content: '\f077'; }
.acct-dash-gift-received summary i { color: var(--green); font-size: .74rem; }
.acct-dash-gift-received-body { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .85rem; margin: .7rem 0 .45rem; }
.acct-dash-gift-received-body dt { color: var(--muted); font-size: .74rem; }
.acct-dash-gift-received-body dd { margin: 0; font-size: .8rem; color: var(--dark); }
.acct-dash-gift-received-note { margin: 0; font-size: .74rem; color: var(--muted); }