/* 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. */
header:has(+ table.woocommerce-orders-table--subscriptions),
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: 2rem;
  font-weight: 700;
  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); }
.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; }
.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.5rem; font-weight: 600; color: var(--dark);
  margin: 0 0 1.75rem;
}
.acct-dash-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.acct-dash-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.acct-dash-card-head { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream); }
.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(--fd); font-size: 1.08rem; font-weight: 600; color: var(--dark);
  margin: 0; background: none; border: none; border-radius: 0; padding: 0;
}
.acct-dash-card-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; }

.acct-dash-sub-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.acct-dash-amount { font-family: var(--fd); font-size: 1.4rem; font-weight: 600; color: var(--dark); }
.acct-dash-badge {
  font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em;
  padding: .3rem .65rem; border-radius: 50px; white-space: nowrap;
  background: var(--green-xl); color: var(--green);
}
.acct-dash-badge--on-hold, .acct-dash-badge--pending { background: var(--orange-l); color: var(--orange-d); }
.acct-dash-badge--cancelled, .acct-dash-badge--expired { background: var(--border); color: var(--muted); }
.acct-dash-meta { font-size: .94rem; color: var(--muted); margin: 0 0 1.1rem; }

/* 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: 1rem 1.1rem; margin: .25rem 0 0; }
.acct-dash-arrears-msg { font-size: .88rem; color: var(--orange-d); margin: 0 0 .75rem; line-height: 1.5; }
.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: .6rem; margin-top: auto; padding-top: .5rem; }
.acct-dash-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.2rem; border-radius: 50px;
  background: var(--green); color: #fff !important; font-size: .92rem; font-weight: 500;
  text-decoration: none; transition: background .2s, transform .15s;
  border: none; cursor: pointer; font-family: inherit;
}
.acct-dash-btn:hover { background: var(--green-d); transform: translateY(-1px); }
.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: .96rem; color: var(--muted); margin: 0 0 1rem; }

.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: .94rem; color: var(--mid); }
.acct-dash-list-amount { font-size: .96rem; font-weight: 500; color: var(--dark); }
.acct-dash-list--cards li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; font-size: .96rem; color: var(--dark);
}
.acct-dash-list-meta { font-size: .88rem; 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; }

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

/* ── 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.75rem 2rem; margin: 0 0 1.5rem;
  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.35rem; font-weight: 600; line-height: 1.3; }
.sub-hero-plan-price { font-size: 1.05rem; color: rgba(255,255,255,.8); margin-top: .2rem; }
.sub-hero-badge {
  flex-shrink: 0; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.18); color: #fff; padding: .4rem .9rem; border-radius: 50px;
  backdrop-filter: blur(6px);
}
.sub-hero-meta {
  display: flex; align-items: center; gap: .5rem;
  font-size: .92rem; color: rgba(255,255,255,.85);
  margin-top: 1.1rem; padding-top: 1.1rem; 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: .6rem; margin-top: 1.25rem; 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: .6rem 1.3rem !important; border-radius: 50px !important;
  background: rgba(255,255,255,.16) !important; color: #fff !important;
  font-size: .88rem; 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; }

/* De-emphasise the now-secondary raw details table below the hero */
.woocommerce-MyAccount-content table.subscription_details.subscription_details--secondary {
  background: var(--white);
}
.subscription_details--secondary td { font-size: .92rem; }
.subscription_details--secondary td:first-child { color: var(--muted); width: 40%; }

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