/**
 * Resume Place FSE — WooCommerce token refinements.
 *
 * Maps WooCommerce's default block + classic storefront markup onto the theme's
 * design tokens, so the store holds visual parity with the React commerce blocks
 * (src/components/blocks/ecommerce/*). No hardcoded colors: everything resolves
 * from the same tokens the rest of the theme uses. Loaded only on Woo pages
 * (see velocity_enqueue_styles in functions.php). See docs/COMPONENT_PARITY_MATRIX.md.
 */

/* ---- Product images: warm muted tile, rounded (matches React ProductCard) ---- */
.woocommerce ul.products li.product a img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img {
  border-radius: var(--radius-lg);
}
.woocommerce ul.products li.product a img,
.woocommerce div.product .woocommerce-product-gallery {
  background: var(--muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Products without photography ---- */
/* The stand-in image is a real file now (assets/img/rp/product/placeholder.png,
   served through woocommerce_placeholder_img_src in inc/product-data.php):
   Evening Blue ground, reverse logomark, no caption, so it fits a
   consultation, a tuition or a book still waiting on its cover. These rules
   only hold it to the square every product image gets. */
.woocommerce li.product a img.woocommerce-placeholder,
.woocommerce div.product .woocommerce-product-gallery__image--placeholder img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Zoom trigger (magnifier): WooCommerce core sets it to z-index:99 via
   `.woocommerce div.product div.images .woocommerce-product-gallery__trigger`,
   which floats it above the sticky header (.rph-sticky-paper, z-index:10) on
   scroll. Same ancestor path as core (`.woocommerce` matches <body>), with the
   trigger class doubled to outspecify core regardless of stylesheet load order;
   the trigger only needs to sit above the image. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger {
  z-index: 1;
}

/* ---- Single-product title: display scale ---- */
/* Classic markup uses .product_title; the block single-product template renders
   the title as a core post-title block, so target that within .single-product too. */
.woocommerce div.product .product_title,
.wc-block-components-product-name,
body.single-product .wp-block-post-title {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ---- Price ---- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--foreground);
  font-weight: 600;
}
.woocommerce div.product p.price { font-size: 1.5rem; }

/* ---- Variation select + quantity: token inputs, fix the clipped select ---- */
.woocommerce div.product form.cart .variations {
  border: 0;
  margin: 0 0 1.25rem;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  padding: 0 0 0.75rem;
  vertical-align: middle;
}
.woocommerce div.product form.cart .variations label {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--foreground);
}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-ordering select {
  appearance: auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
}

/* ---- Quantity + add-to-cart row alignment ---- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation { flex-basis: 100%; }
/* A select sizes to its longest option; book bundles run past 600px and
   pushed every product page sideways at tablet and phone. */
.woocommerce div.product form.cart .variations { table-layout: fixed; width: 100%; }
.woocommerce div.product form.cart .variations select { width: 100%; max-width: 100%; }
.woocommerce .quantity .qty { width: 4.5rem; text-align: center; }

/* ---- Buttons: the tangelo outline primary, as the theme's rp-btn-primary ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
  background: var(--rp-white, #FFFFFF);
  color: var(--rp-tangelo-700, #C04000);
  border: 2px solid var(--rp-tangelo, #F94D00);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  transition: opacity 0.2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--rp-tangelo-50, #FFF3ED);
  color: var(--rp-tangelo-700, #C04000);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce .single_add_to_cart_button.disabled { opacity: 0.45; }

/* ---- Payment box: checkout and My Account > Add payment method ----
   WooCommerce ships a lavender panel with a speech-bubble caret, and the
   Authorize.Net form sets its inputs at 1.5em on inline-block rows, so the
   CSC ends short of the card number. One ruled panel, one field size, a grid. */
#add_payment_method #payment,
.woocommerce-checkout #payment {
  background: var(--card, var(--background));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
#add_payment_method #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--border); }
#add_payment_method #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
}
#add_payment_method #payment ul.payment_methods li > input.input-radio,
.woocommerce-checkout #payment ul.payment_methods li > input.input-radio { margin: 0; flex: none; }
#add_payment_method #payment ul.payment_methods li > label,
.woocommerce-checkout #payment ul.payment_methods li > label {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--foreground);
}
#add_payment_method #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
  flex-basis: 100%;
  margin: 0.5rem 0 0;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted-foreground, var(--foreground));
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before { display: none; }
#payment div.payment_box [class*="new-payment-method-form"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
#payment div.payment_box [class*="new-payment-method-form"] > * { grid-column: 1 / -1; }
#payment div.payment_box [class*="new-payment-method-form"] > .form-row-first { grid-column: 1; }
#payment div.payment_box [class*="new-payment-method-form"] > .form-row-last { grid-column: 2; }
#payment div.payment_box [class*="new-payment-method-form"] > .form-row-first,
#payment div.payment_box [class*="new-payment-method-form"] > .form-row-last {
  width: auto;
  float: none;
  margin-right: 0;
}
#payment div.payment_box [class*="new-payment-method-form"] > .clear { display: none; }
#add_payment_method #payment div.payment_box input.input-text.js-sv-wc-payment-gateway-credit-card-form-input,
.woocommerce-checkout #payment div.payment_box [class*="new-payment-method-form"] input.input-text.js-sv-wc-payment-gateway-credit-card-form-input {
  width: 100%;
  font-size: 1rem;
}

/* ---- Archive cards: radius + subtle image zoom on hover ---- */
.woocommerce ul.products li.product,
.wc-block-grid__product { border-radius: var(--radius-lg); }
.woocommerce ul.products li.product a img { transition: transform 0.3s ease; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

/* ---- Tabs: token underline ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  border-bottom: 2px solid var(--primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: var(--border);
}

/* ---- Result count + ordering, breadcrumb ---- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb {
  color: var(--muted-foreground);
  font-family: var(--font-sans);
}

/* ---- Sale badge ---- */
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: 600;
}

/* ---- Notices: token surfaces ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--primary);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}

/* ============================================================================
   RP AUTH — bespoke My Account login / register (woocommerce/myaccount/
   form-login.php). Contained two-column card: navy brand/benefits panel +
   tabbed sign-in / create-account forms. CSS-only tabs via radio toggle.
   ============================================================================ */
.rp-auth {
  --rp-navy: var(--rp-deep-blue, #1C3664);
  --rp-navy-2: var(--rp-evening-blue, #0F264C);
  --rp-navy-3: var(--rp-night-blue, #0B1D3A);
  --rp-tangelo: var(--rp-tangelo, #F94D00);
  --rp-paper: var(--rp-paper, #FAF6F0);
  --rp-line: var(--rp-paper-border, #DFDEDB);
  --rp-ink: var(--rp-rich-gray, #010203);
  --rp-muted: var(--rp-dark-gray, #5B5E60);
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  max-width: 960px;
  margin: 8px auto 56px;
  background: #fff;
  border: 1px solid var(--rp-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(16, 36, 44, 0.28), 0 2px 6px rgba(16, 36, 44, 0.05);
}
/* the CSS-only tab radios live at the top of .rp-auth */
.rp-auth__radio { position: absolute; opacity: 0; pointer-events: none; }

/* --- Brand / benefits panel --- */
.rp-auth__brand {
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(249, 77, 0, 0.12), transparent 55%),
    linear-gradient(180deg, var(--rp-navy) 0%, var(--rp-navy-2) 62%, var(--rp-navy-3) 100%);
  color: #fff;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rp-auth__brand-lockup { display: flex; flex-direction: column; gap: 12px; }
.rp-auth__mark { width: 46px; height: 46px; display: block; }
.rp-auth__word { width: 170px; height: auto; display: block; }
.rp-auth__brand-line {
  font-family: var(--font-serif, 'Messina Serif', Georgia, serif);
  font-size: 21px; line-height: 1.2; letter-spacing: -0.01em;
  color: #fff; margin: 4px 0 0;
}
.rp-auth__benefits {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-sans, sans-serif); font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}
.rp-auth__benefits li { position: relative; padding-left: 26px; }
.rp-auth__benefits li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5l3 3 7-7.5' fill='none' stroke='%23F94D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rp-auth__brand-foot {
  margin-top: auto;
  font-family: var(--font-mono, 'Messina Sans Mono', monospace);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Forms column --- */
.rp-auth__forms { padding: 34px 34px 30px; }
.rp-auth__tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--rp-paper); border: 1px solid var(--rp-line);
  border-radius: 11px; margin-bottom: 24px;
}
.rp-auth__tab {
  cursor: pointer; padding: 7px 16px; border-radius: 8px;
  font-family: var(--font-sans, sans-serif); font-size: 13.5px; font-weight: 600;
  color: var(--rp-muted); transition: background 0.15s ease, color 0.15s ease;
  margin: 0 !important;
}
.rp-auth__tab:hover { color: var(--rp-ink); }
#rp-auth-login:checked ~ .rp-auth__forms .rp-auth__tab--login,
#rp-auth-register:checked ~ .rp-auth__forms .rp-auth__tab--register {
  background: #fff; color: var(--rp-ink);
  box-shadow: 0 1px 3px rgba(16, 36, 44, 0.12);
}

/* panel visibility driven by the radios */
.rp-auth__panel { display: none; }
.rp-auth--has-register #rp-auth-login:checked ~ .rp-auth__forms .rp-auth__panel--login,
.rp-auth--has-register #rp-auth-register:checked ~ .rp-auth__forms .rp-auth__panel--register {
  display: block;
}
/* no-register sites: login always shown */
.rp-auth:not(.rp-auth--has-register) .rp-auth__panel--login { display: block; }

/* inputs / labels within the card */
.rp-auth label {
  font-family: var(--font-sans, sans-serif); font-size: 13px; font-weight: 600;
  color: var(--rp-ink); display: block; margin-bottom: 6px;
}
.rp-auth .required { color: var(--rp-tangelo); border: 0; }
.rp-auth input[type="text"],
.rp-auth input[type="email"],
.rp-auth input[type="password"] {
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid var(--rp-line); border-radius: 9px;
  color: var(--rp-ink); font-family: var(--font-sans, sans-serif); font-size: 15px;
  padding: 11px 13px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rp-auth input:focus {
  border-color: var(--rp-tangelo);
  box-shadow: 0 0 0 3px rgba(249, 77, 0, 0.14); outline: none;
}
.rp-auth .form-row { margin: 0 0 16px; }
.rp-auth__row-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.rp-auth__row-actions .woocommerce-form-login__rememberme {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-weight: 400; color: var(--rp-muted); font-size: 13px;
}
.rp-auth__row-actions label { margin: 0; }

/* buttons — navy primary, matches the site CTA */
.rp-auth button.button,
.rp-auth .woocommerce-form-login__submit,
.rp-auth .woocommerce-form-register__submit {
  background: var(--rp-navy); color: #fff; border: 0; border-radius: 10px;
  font-family: var(--font-sans, sans-serif); font-weight: 600; font-size: 14px;
  padding: 11px 22px; cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.rp-auth button.button:hover { filter: brightness(1.14); transform: translateY(-1px); }
.rp-auth .woocommerce-form-register__submit { width: 100%; }

.rp-auth .lost_password { margin: 14px 0 0; }
.rp-auth .lost_password a,
.rp-auth__note a { color: var(--rp-muted); font-size: 13px; text-decoration: none; }
.rp-auth .lost_password a:hover { color: var(--rp-tangelo); }
.rp-auth__note { font-size: 13px; color: var(--rp-muted); margin: 0 0 16px; }
.rp-auth__lead { font-size: 15px; line-height: 1.5; color: var(--rp-ink); margin: 0 0 20px; }
.rp-auth .rp-signin .woocommerce-form-login__submit { width: 100%; }
.rp-auth .rp-signin .rp-auth__note { margin: 14px 0 0; }

/* --- Mobile: stack --- */
@media (max-width: 760px) {
  .rp-auth { grid-template-columns: 1fr; max-width: 460px; }
  .rp-auth__brand { padding: 30px 26px; gap: 16px; }
  .rp-auth__benefits { display: none; }
  .rp-auth__forms { padding: 26px 24px 24px; }
}

/* --rp-navy / --rp-link come from assets/css/tokens.css */

/* Tangelo focus ring on all Woo inputs (login, checkout, account forms) */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus,
.rp-auth input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(249, 77, 0, 0.14);
  outline: none;
}

/* ============================================================================
   RP CHECKOUT — "Returning customer?" inline login
   ============================================================================ */
.woocommerce-form-login-toggle .woocommerce-info {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-top-color: var(--border);
  border-left: 4px solid var(--rp-navy);
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-family: var(--font-sans);
}
.woocommerce-form-login-toggle .woocommerce-info a { color: var(--rp-link); }
form.woocommerce-form-login {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account form.woocommerce-form-login .button {
  background: var(--rp-navy);
  color: #fff;
}
/* Block checkout "Log in" prompt → routes to the branded /my-account/ */
.wc-block-checkout__login-prompt a,
.wp-block-woocommerce-checkout .wc-block-checkout__login-prompt {
  color: var(--rp-link);
}

/* ============================================================================
   RP MY ACCOUNT — logged-in dashboard (nav rail + content card)
   ============================================================================ */
/* Logged-in only: logged-out my-account is the auth card (.rp-auth), which
   centers itself — the empty nav-rail column would shove it off-center. */
.logged-in.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1040px;
  margin: 8px auto 64px;
}
/* WooCommerce adds clearfix ::before/::after on .woocommerce; as grid items
   they'd occupy cells and break the two-column placement. Remove them. */
.logged-in.woocommerce-account .woocommerce::before,
.logged-in.woocommerce-account .woocommerce::after { content: none; display: none; }

/* Nav rail + content: neutralize Woo's default float + percentage widths so
   the grid controls sizing (else width:30%/68% resolve against the grid cell). */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto;
  float: none;
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  position: sticky;
  top: 16px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0; padding: 0; border: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--muted-foreground); text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
  background: var(--muted, var(--rp-paper-muted)); color: var(--foreground);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--rp-navy); color: #fff;
}
/* Woo core (woocommerce-blocktheme.css) underlines li.is-active a with higher
   specificity than our -link classes; match it to keep the pill clean. */
.woocommerce-account .woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--primary); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout.is-active a { color: #fff; }

/* Content card */
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 30px;
  font-family: var(--font-sans);
  color: var(--foreground);
  box-shadow: 0 2px 6px rgba(16, 36, 44, 0.04);
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
/* Studio scope tabs (rp-account.css) carry their own colors: this rule outranked them, so every tab read as a link and the current one went blue on navy. */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.wp-element-button):not(.rp-btn):not(.rp-studio-scope) { color: var(--rp-link); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.wp-element-button):not(.rp-btn):not(.rp-studio-scope):hover { text-decoration: underline; }

/* Account buttons → navy (identity context; store stays tangelo) */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content .wp-element-button {
  background: var(--rp-navy);
  border-color: var(--rp-navy);
  color: #fff;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .wp-element-button:hover {
  background: var(--rp-navy);
  color: #fff;
  opacity: 0.92;
}

/* Tables — orders + downloads */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-content table thead th,
.woocommerce-account .woocommerce-MyAccount-content table th {
  background: var(--muted, var(--rp-paper-muted));
  font-family: var(--font-sans);
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 12px 14px; text-align: left; border: 0;
}
.woocommerce-account .woocommerce-MyAccount-content table td {
  padding: 14px; border: 0; border-top: 1px solid var(--border);
  vertical-align: middle;
}

/* Account forms (edit details / addresses) */
.woocommerce-account .woocommerce-MyAccount-content form .form-row label {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--foreground);
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  font-family: var(--font-sans); font-weight: 600; color: var(--foreground);
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-serif, 'Messina Serif', Georgia, serif);
  font-weight: 400; letter-spacing: -0.01em; color: var(--foreground);
}

/* Mobile: stack the rail above content */
@media (max-width: 820px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 18px; }
  .woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 24px 20px; }
}

/* Dashboard home, button tiers, and all in-card account components live in
   rp-account.css (built on rp-ds.css primitives). The navy rule above stays
   as the deliberate SECONDARY tier for unclassed stock-WC buttons. */

/* The type ruling, 2026-08-19: the breadcrumb leaves the caps register. The
   uppercase comes from WooCommerce core, not from our rule above, so it has to
   be unset explicitly. See the block at the end of rp-ds.css. */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--rp-sans,var(--font-sans));font-weight:400;font-size:.8125rem;
  line-height:1.5;letter-spacing:0;text-transform:none}

/* The type ruling, 2026-08-19. Registers defined at the end of rp-ds.css. */
.woocommerce-account .woocommerce-MyAccount-content table thead th{
  font-family:var(--rp-sans);font-weight:600;font-size:.9375rem;
  letter-spacing:-.01em;text-transform:none}

.rp-auth__brand-foot{
  font-family:var(--rp-sans);font-weight:400;font-size:.875rem;line-height:1.5;
  letter-spacing:0;text-transform:none}

/* The two gallery-placeholder ::after labels stay uppercase: they are a
   10px "no image" stamp on an empty product tile, seen by staff mid-catalogue
   work, not customer-facing copy. */

/* ---- Typed-amount products (Make a Payment, inc/open-amount.php) ---- */
.woocommerce div.product form.cart .rp-open-amount {
  flex: 1 1 100%;
  display: grid;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.woocommerce div.product form.cart .rp-open-amount__row {
  display: grid;
  gap: 0.375rem;
  margin: 0;
}
.woocommerce div.product form.cart .rp-open-amount input.input-text { width: 100%; }
.rp-open-amount__money { position: relative; display: block; }
.rp-open-amount__unit {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rp-muted);
  pointer-events: none;
}
.woocommerce div.product form.cart .rp-open-amount__money input.input-text { padding-left: 1.75rem; }