/* ==========================================================================
   Maybach Deluxe Blocks — bespoke components

   Short on purpose. Colour, typography, spacing, layout widths, links,
   headings and buttons all come from theme.json as WordPress presets, so
   blocks inherit them and there is nothing to override.

   What is left here is the handful of things a preset cannot express: a
   gradient ring drawn with two background layers, text clipped to a gradient,
   a card rotated two and a half degrees, and a film grain. If a rule below
   could be a preset instead, it belongs in theme.json, not here.
   ========================================================================== */

:root {
  --mb-ease: cubic-bezier(.22, .61, .36, 1);

  /* One edge width for the entire theme. A whole pixel, deliberately: 1.5px
     straddles two device pixels at 1x, and the compositor renders the two
     halves at different weights, which is what made the rings look uneven
     from one side of a control to the other. */
  --mb-ring: 1px;

  /* Resting and active edge. gold-deep is dark enough to sit quietly against
     ink without reading as grey, which is what the old brown control border
     did wrong. */
  --mb-edge: var(--wp--preset--color--gold-deep);
  --mb-edge-strong: var(--wp--preset--color--gold);

  /* Every control in the header row is exactly this tall, so search, account
     and cart line up instead of sitting at three heights. Also the pointer
     target floor. */
  --mb-control-h: 44px;
  --mb-fill: var(--wp--preset--color--surface-raised);
  --mb-gold-gradient: var(--wp--preset--gradient--gold);

  /* Radius, motion and elevation live in theme.json now. Aliased here so the
     stylesheet keeps one vocabulary and the values stay editable in the Site
     Editor. The motion scale is the theme's own, named rather than reduced:
     the .7s sweep and the .35s lift are the character of the thing. */
  --mb-radius-sm: var(--wp--custom--radius--sm);
  --mb-radius-md: var(--wp--custom--radius--md);
  --mb-radius-lg: var(--wp--custom--radius--lg);
  --mb-radius-pill: var(--wp--custom--radius--pill);

  --mb-fast: var(--wp--custom--duration--fast);
  --mb-quick: var(--wp--custom--duration--quick);
  --mb-base: var(--wp--custom--duration--base);
  --mb-lift: var(--wp--custom--duration--lift);
  --mb-slow: var(--wp--custom--duration--slow);
  --mb-sweep: var(--wp--custom--duration--sweep);

  --mb-shadow-panel: var(--wp--preset--shadow--panel);
  --mb-shadow-glow: var(--wp--preset--shadow--glow);
  --mb-shadow-glow-strong: var(--wp--preset--shadow--glow-strong);
  --mb-shadow-focus: var(--wp--preset--shadow--focus);
}

/* ---- Film grain ---------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- The gold ring ------------------------------------------------------- */

/* ---- Edges ---------------------------------------------------------------
   Real CSS borders. A border is stroked by the same path renderer that draws
   the rounded corner, so curve and stroke are antialiased together — which is
   the only way to get a genuinely smooth rounded edge.

   Two earlier attempts drew this as a gradient instead. Neither is smooth: the
   background-clip technique has no antialiasing where the padding box crosses
   a corner, and a mask-composite pseudo-element is rasterised, so at 1px it
   aliases and shimmers. A gradient at 1px is imperceptible anyway; it was
   costing every edge in the product its quality. The gradient stays where it
   actually reads — the wordmark, the eyebrow rules, the badges.

   One width, one resting colour, one active colour. */

.mb-gradient-border:not(.wp-block-button),
.mb-key-card,
.mb-product-card,
.mb-post-card,
.wp-block-search__inside-wrapper,
.wc-block-customer-account__link,
.wc-block-customer-account__toggle,
.wc-block-mini-cart__button,
.wc-block-mini-wallet__link,
:is(.mb-header, .mb-nav) .wp-block-navigation-item__content {
  border: var(--mb-ring) solid var(--mb-edge);
  transition: border-color var(--mb-quick) var(--mb-ease), box-shadow var(--mb-base) var(--mb-ease);
}

/* Buttons carry the brighter edge: they are the thing to press. */
.mb-gradient-border .wp-block-button__link,
.mb-gradient-border.wp-block-button .wp-element-button,
.mb-product-button .wp-element-button,
.wc-block-components-product-button .wp-element-button,
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button:not(.is-link) {
  border: var(--mb-ring) solid var(--mb-edge-strong);
}

.mb-product-card:hover,
.mb-post-card:hover,
.mb-product-card:focus-within,
.mb-post-card:focus-within,
.wc-block-customer-account__link:hover,
.wc-block-customer-account__toggle:hover,
.wc-block-mini-cart__button:hover,
.wc-block-mini-wallet__link:hover,
:is(.mb-header, .mb-nav) .wp-block-navigation-item__content:hover,
:is(.mb-header, .mb-nav) .current-menu-item .wp-block-navigation-item__content,
.wp-block-search__inside-wrapper:focus-within {
  border-color: var(--mb-edge-strong);
}

/* The hero call to action. The old version rotated a conic gradient around a
   masked ring — the worst case for the rasterising problem above. A pulsing
   glow reads as the same "this one is alive" signal and stays smooth, because
   a box-shadow is composited rather than masked. */
.mb-gradient-border-glow .wp-block-button__link,
.mb-gradient-border-glow.wp-block-button .wp-element-button {
  border-color: var(--wp--preset--color--gold-light);
  animation: mb-pulse 3.2s var(--mb-ease) infinite;
}

@keyframes mb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(205, 161, 60, 0); }
  50%      { box-shadow: 0 0 18px -2px rgba(205, 161, 60, .45); }
}

/* ---- Wordmark ------------------------------------------------------------ */

.mb-wordmark a,
.mb-wordmark.wp-block-site-title a {
  background: var(--mb-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}

/* ---- Eyebrow ------------------------------------------------------------- */

.mb-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mb-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: none;
  background: var(--mb-gold-gradient);
}

/* ---- Hero key card ------------------------------------------------------- */

.mb-key-card {
  max-width: 320px;
  margin-inline: auto;
  box-shadow: var(--wp--preset--shadow--card);
  transform: rotate(2.5deg);
}

.mb-key-card-label,
.mb-key-card-status {
  margin: 0;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mb-key-card-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.mb-key-card-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--gold-light);
  box-shadow: 0 0 8px var(--wp--preset--color--gold-light);
}

.mb-key-code {
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 781px) {
  .mb-hero-inner .mb-hero-artifact {
    order: -1;
  }
}

/* ---- Ledger -------------------------------------------------------------- */

.mb-ledger .wp-block-column + .wp-block-column {
  padding-left: 1.5rem;
  border-left: 1px solid var(--wp--preset--color--line);
}

.mb-ledger .wp-block-column p {
  margin: 0;
}

/* ---- Cards --------------------------------------------------------------- */

.mb-product-card,
.mb-post-card {
  height: 100%;
  transition: transform var(--mb-lift) var(--mb-ease), box-shadow var(--mb-lift) var(--mb-ease);
}

.mb-product-card:hover,
.mb-post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--wp--preset--shadow--card);
}

.mb-product-card .wc-block-components-product-button {
  margin-top: auto;
}

/* WooCommerce's placeholder is a light tile; on ink it reads as broken rather
   than absent. Dimming it is enough now that the card itself is dark. */
.mb-product-card img.woocommerce-placeholder {
  opacity: .4;
}

/* ---- Header -------------------------------------------------------------- */

.mb-header-inner {
  gap: 1.5rem;
}

.mb-brand {
  gap: .55rem;
}

.wp-block-search__inside-wrapper {
  height: var(--mb-control-h);
  padding: 0;
  border-radius: var(--mb-radius-pill);
  background-color: var(--wp--preset--color--surface-raised);
  overflow: hidden;
}

.wp-block-search__input {
  min-height: 44px;
  padding-inline: .95rem;
  border: none;
  background: transparent;
  color: var(--wp--preset--color--bone);
}

.wp-block-search__input:focus {
  outline: none;
}

.wp-block-search__button {
  height: var(--mb-control-h);
  min-width: var(--mb-control-h);
  padding: 0 .85rem;
  border: none;
  background: transparent;
  color: var(--wp--preset--color--gold);
}

/* ---- Footer -------------------------------------------------------------- */

.mb-footer-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--bone-dim);
}

.mb-footer-heading::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--mb-gold-gradient);
}

.mb-footer-list li {
  list-style: none;
}

.mb-footer-list a {
  color: var(--wp--preset--color--bone-dim);
}

.mb-footer-list a:hover {
  color: var(--wp--preset--color--gold-light);
}

/* ---- Focus --------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--wp--preset--color--gold-light);
  outline-offset: 3px;
}

/* ---- Motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mb-gradient-border-glow .wp-block-button__link,
  .mb-gradient-border-glow.wp-block-button .wp-element-button {
    animation: none;
  }

  .mb-product-card,
  .mb-post-card {
    transition: none;
  }

  .mb-product-card:hover,
  .mb-post-card:hover {
    transform: none;
  }
}

/* ---- Coming soon ---------------------------------------------------------
   WooCommerce ships a lilac placeholder for this. It is the first thing a
   visitor sees while a store is closed, and on a brand this specific it read
   as a different company entirely. Overriding templates/coming-soon.html
   keeps the identity intact; these rules only centre it. */

.mb-coming-soon {
  display: flex;
  align-items: center;
}

.mb-coming-soon-inner {
  text-align: center;
}

.mb-coming-soon-inner .mb-eyebrow {
  justify-content: center;
}

.mb-coming-soon-inner .mb-key-card {
  text-align: left;
  transform: rotate(1.5deg);
}

/* ---- Product cards, the catalogue and the shop ---------------------------
   The shop archive was rendering through WooCommerce's own default template,
   which has no card at all — the reason the shop and the home page looked
   like two different sites. templates/archive-product.html now uses the same
   card markup, and these rules cover both. */

.mb-product-grid {
  gap: 1.5rem;
}

.mb-product-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.mb-product-card .wc-block-components-product-image,
.mb-product-card .wp-block-woocommerce-product-image {
  margin: 0;
}

.mb-product-card .wc-block-components-product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--mb-radius-sm);
  background-color: var(--wp--preset--color--surface);
}

/* The title is a core/post-title with isLink, so it inherits the global link
   colour — gold — and read as a price rather than a name. */
.mb-product-card .wp-block-post-title,
.mb-product-card .wp-block-post-title a {
  color: var(--wp--preset--color--bone);
  font-family: var(--wp--preset--font-family--display);
  line-height: 1.3;
  margin: 0;
}

.mb-product-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--gold-light);
}

.mb-product-card .wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--gold);
  font-variant-numeric: tabular-nums;
}

/* Push the action to the bottom so buttons line up across a row of cards
   whose titles wrap to different heights. */
.mb-product-card .wc-block-components-product-button,
.mb-product-card .mb-product-button {
  margin-top: auto;
  margin-bottom: 0;
}

.mb-product-card .wc-block-components-product-button .wp-element-button {
  width: 100%;
  justify-content: center;
}

/* ---- Shop toolbar -------------------------------------------------------- */

.mb-toolbar .wc-block-catalog-sorting select,
.mb-toolbar select {
  min-height: 44px;
  padding: .5rem 2rem .5rem .7rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line-control);
  border-radius: var(--mb-radius-sm);
  background-color: var(--wp--preset--color--surface-raised);
  color: var(--wp--preset--color--bone);
  font-family: inherit;
}

.mb-toolbar p {
  margin: 0;
}

/* ---- Header controls ------------------------------------------------------
   These rules are addressed by block, not by where the block sits.

   They used to be prefixed with `.mb-header-actions`, which meant the design
   was a property of one group in one template part: drag the search block out
   of that row in the editor and it reverted to an unstyled field. The class
   names below - `wp-block-search__inside-wrapper`, `wc-block-mini-cart__button`,
   `wc-block-customer-account__link`, `wc-block-mini-wallet__link` - only ever
   exist inside their own block, so the prefix was buying nothing and charging
   for it. Without it the styling travels with the block wherever it is placed.

   Two things stay scoped on purpose. `.mb-header-actions .wp-block-search`
   caps the field at 260px, which is about the header row and not about the
   block. And the navigation pill keeps `:is(.mb-header, .mb-nav)`, because
   `.wp-block-navigation-item__content` is generic - a footer menu would
   otherwise become a row of pills. Add `mb-nav` in Advanced > Additional CSS
   class(es) to ask for the pill treatment on a nav elsewhere.

   What this does not do is move the design into theme.json. theme.json can
   carry colour, typography, border and radius for a block; it has no way to
   express the fixed control height, the min-width that keeps the pills equal,
   the inline-flex layout, the hover lift or the transitions. Those have to
   live in CSS. What it does mean is that arranging blocks in the editor no
   longer breaks them.
   ------------------------------------------------------------------------ */

/* ---- Header account and cart --------------------------------------------
   Class names taken from the rendered page, not from memory: the account
   trigger is .wc-block-customer-account__link (or __toggle when it has a
   dropdown). An earlier guess of __account-link matched nothing, which is why
   Login sat as bare text beside a pilled cart. */

.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-mini-cart,
.wp-block-woo-wallet-mini-wallet {
  display: flex;
  align-items: center;
}

.wc-block-customer-account__link,
.wc-block-customer-account__toggle,
.wc-block-mini-cart__button,
.wc-block-mini-wallet__link,
:is(.mb-header, .mb-nav) .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-sizing: border-box;
  height: var(--mb-control-h);
  min-height: var(--mb-control-h);
  min-width: 7rem;
  justify-content: center;
  padding: 0 1.1rem;
  border-radius: var(--mb-radius-pill);
  background: none;
  color: var(--wp--preset--color--bone);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--mb-fast) var(--mb-ease),
    color var(--mb-fast) var(--mb-ease),
    transform var(--mb-fast) var(--mb-ease);
}

.wc-block-customer-account__link:hover,
.wc-block-customer-account__toggle:hover,
.wc-block-mini-cart__button:hover,
.wc-block-mini-wallet__link:hover,
:is(.mb-header, .mb-nav) .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--gold-light);
  background: none;
  transform: translateY(-1px);
}

.wc-block-customer-account__link:active,
.wc-block-customer-account__toggle:active,
.wc-block-mini-cart__button:active,
.wc-block-mini-wallet__link:active,
:is(.mb-header, .mb-nav) .wp-block-navigation-item__content:active {
  transform: translateY(0) scale(.97);
}

.wc-block-customer-account__account-icon {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
}

.wc-block-customer-account__caret {
  transition: transform var(--mb-quick) var(--mb-ease);
}

.wc-block-customer-account--is-dropdown-open .wc-block-customer-account__caret {
  transform: rotate(180deg);
}

/* The account dropdown ships unstyled, which on a dark page means a white
   panel appearing under a gold pill. */
.wc-block-customer-account__dropdown {
  min-width: 200px;
  margin-top: .5rem;
  padding: .4rem 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-sm);
  background-color: var(--wp--preset--color--surface-raised);
  box-shadow: var(--wp--preset--shadow--card);
  overflow: hidden;
}

.wc-block-customer-account__dropdown-item a,
.wc-block-customer-account__dropdown-item {
  display: block;
  padding: .6rem 1.1rem;
  color: var(--wp--preset--color--bone-dim);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition: background-color var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
}

.wc-block-customer-account__dropdown-item a:hover,
.wc-block-customer-account__dropdown-item:hover {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--gold-light);
}

.wc-block-customer-account__dropdown-divider {
  height: 1px;
  margin: .35rem 0;
  border: none;
  background-color: var(--wp--preset--color--line);
}

.wc-block-mini-cart__amount,
.wc-block-mini-wallet__amount {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

.wc-block-mini-cart__badge {
  background: var(--mb-gold-gradient);
  color: var(--wp--preset--color--ink);
  font-weight: 600;
}

/* ---- Header wallet --------------------------------------------------------
   TeraWallet's mini-wallet block ships its own idea of a pill: a 6px radius,
   a light hover wash meant for a white header, and a bolder figure than the
   cart's. Every one of those rules is a single class, so the selector groups
   above — all two classes deep — take the shape, the ring, the hover and the
   press without an !important anywhere. The plugin sheet may load before or
   after this one and it makes no difference, which is the point.

   What is left here is only what the cart and account pills never needed to
   say, because nothing was arguing with them. */

.wc-block-mini-wallet__icon {
  width: 1.05em;
  height: 1.05em;
}

/* The block sets 600 on the balance; the cart leaves its amount at the pill's
   own weight. Matching means taking that back rather than raising the cart. */
.wc-block-mini-wallet__amount {
  font-weight: inherit;
}

/* Keep the header search from dominating the row. */
.mb-header-actions .wp-block-search {
  max-width: 260px;
}

/* ---- Single product ------------------------------------------------------ */

.mb-product-summary .wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--gold);
}

.mb-product-detail .wc-block-components-product-image-gallery img,
.mb-product-detail .woocommerce-product-gallery img {
  border-radius: var(--mb-radius-lg);
}

.mb-product-summary form.cart button,
.mb-product-summary .single_add_to_cart_button {
  min-height: 48px;
}

.mb-product-tabs .wc-tabs li a {
  color: var(--wp--preset--color--bone-dim);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--wp--preset--font-size--x-small);
}

.mb-product-tabs .wc-tabs li.active a {
  color: var(--wp--preset--color--gold-light);
}


/* ==========================================================================
   Icons and interaction states

   theme.json can express a hover COLOUR and nothing else — no transform, no
   shadow, no pseudo-element. That is why every control ended up with a bare
   font-colour change where the classic build had a lift, a glow and a sweep.
   These are the affordances presets cannot carry, so they belong here.
   ========================================================================== */

/* ---- The key mark -------------------------------------------------------
   Drawn as a background image rather than inline SVG so it can ride on the
   site-title block in the header, the footer and the coming-soon page without
   any of those templates needing to embed markup. */

.mb-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.mb-wordmark::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='url(%23g)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='2' y1='2' x2='21' y2='21' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23f1dfb0'/%3E%3Cstop offset='.55' stop-color='%23cda13c'/%3E%3Cstop offset='1' stop-color='%238a6423'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='7' cy='7' r='4'/%3E%3Cline x1='9.8' y1='9.8' x2='19' y2='19'/%3E%3Cline x1='15' y1='15' x2='17.2' y2='12.8'/%3E%3Cline x1='17.6' y1='17.6' x2='19.8' y2='15.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- Navigation ------------------------------------------------------------
   The header nav is a row of pills, identical to the cart, account and wallet
   controls beside it. It gets there by joining their selector groups above
   rather than by restating the shape here, so the four can only ever drift
   together.

   This replaces a gold underline-reveal the nav used to carry. The two
   treatments cannot share a control - an underline sliding beneath a bordered
   pill reads as a mistake - so it is gone rather than disabled.

   Scoped to `.mb-header`, not to `.mb-nav`. The nav in parts/header.html
   carries `mb-nav`, but a navigation block added through Appearance > Editor
   does not, and the live header is a database copy. Keying on the header
   itself covers both.
   ------------------------------------------------------------------------ */

/* theme.json sets the nav uppercase with a tenth of an em of tracking. The
   pills it now sits with are neither, and "MY ORDERS" beside "My Account" was
   the tell. Overridden only inside the header, so a nav placed anywhere else
   keeps the theme.json treatment. */
:is(.mb-header, .mb-nav) .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: normal;
  text-transform: none;
}

/* The same gap the header controls use, so the row reads as one set rather
   than two groups keeping different rhythms. */
:is(.mb-header, .mb-nav) .wp-block-navigation__container {
  gap: 1rem;
}

/* The current page is marked the way hover marks itself, one step short of
   it: the brighter edge and the brighter text, without the lift. */
:is(.mb-header, .mb-nav) .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--gold-light);
}

/* ---- Navigation: optional icons -------------------------------------------
   The cart, account and wallet pills each carry a glyph; a navigation link
   has no icon control of its own. These two classes give it one.

   They are applied the way the block editor already supports: select the
   navigation link, open Advanced, and put `mb-icon-cart` or `mb-icon-wallet`
   in "Additional CSS class(es)". That keeps the choice in the editor and
   per-item, rather than this stylesheet guessing from a URL or a label — a
   guess that breaks the first time a link is renamed or a permalink moves.

   Drawn with `mask-image` rather than `background-image` on purpose: a mask
   is painted with `background-color`, so `currentColor` carries the pill's
   bone-to-gold hover for free, exactly as the cart and account glyphs do.
   A background-image would need a second gold copy of each file.

   The glyphs are the same drawings the other pills use — the cart lifted from
   the rendered mini-cart button, the wallet from TeraWallet's own
   `classic-wallet`. Sized 1.05em to match `.wc-block-customer-account__account-icon`,
   and spaced by the pill's own `gap`, since ::before is a flex item of the
   link.
   ------------------------------------------------------------------------ */

.wp-block-navigation-item.mb-icon-cart > .wp-block-navigation-item__content::before,
.wp-block-navigation-item.mb-icon-wallet > .wp-block-navigation-item__content::before,
.wp-block-navigation-item__content.mb-icon-cart::before,
.wp-block-navigation-item__content.mb-icon-wallet::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.wp-block-navigation-item.mb-icon-cart > .wp-block-navigation-item__content::before,
.wp-block-navigation-item__content.mb-icon-cart::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%23000%22 viewBox=%220 0 32 32%22><circle cx=%2212.667%22 cy=%2224.667%22 r=%222%22/><circle cx=%2223.333%22 cy=%2224.667%22 r=%222%22/><path fill-rule=%22evenodd%22 d=%22M9.285 10.036a1 1 0 0 1 .776-.37h15.272a1 1 0 0 1 .99 1.142l-1.333 9.333A1 1 0 0 1 24 21H12a1 1 0 0 1-.98-.797L9.083 10.87a1 1 0 0 1 .203-.834m2.005 1.63L12.814 19h10.319l1.047-7.333z%22 clip-rule=%22evenodd%22/><path fill-rule=%22evenodd%22 d=%22M5.667 6.667a1 1 0 0 1 1-1h2.666a1 1 0 0 1 .984.82l.727 4a1 1 0 1 1-1.967.359l-.578-3.18H6.667a1 1 0 0 1-1-1%22 clip-rule=%22evenodd%22/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%23000%22 viewBox=%220 0 32 32%22><circle cx=%2212.667%22 cy=%2224.667%22 r=%222%22/><circle cx=%2223.333%22 cy=%2224.667%22 r=%222%22/><path fill-rule=%22evenodd%22 d=%22M9.285 10.036a1 1 0 0 1 .776-.37h15.272a1 1 0 0 1 .99 1.142l-1.333 9.333A1 1 0 0 1 24 21H12a1 1 0 0 1-.98-.797L9.083 10.87a1 1 0 0 1 .203-.834m2.005 1.63L12.814 19h10.319l1.047-7.333z%22 clip-rule=%22evenodd%22/><path fill-rule=%22evenodd%22 d=%22M5.667 6.667a1 1 0 0 1 1-1h2.666a1 1 0 0 1 .984.82l.727 4a1 1 0 1 1-1.967.359l-.578-3.18H6.667a1 1 0 0 1-1-1%22 clip-rule=%22evenodd%22/></svg>");
}

.wp-block-navigation-item.mb-icon-wallet > .wp-block-navigation-item__content::before,
.wp-block-navigation-item__content.mb-icon-wallet::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M6 6V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1%22/><rect x=%222%22 y=%226%22 width=%2220%22 height=%2214%22 rx=%222%22 ry=%222%22/><path d=%22M2 10h20%22/><circle cx=%2218%22 cy=%2214%22 r=%221.1%22 fill=%22%23000%22 stroke=%22none%22/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M6 6V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1%22/><rect x=%222%22 y=%226%22 width=%2220%22 height=%2214%22 rx=%222%22 ry=%222%22/><path d=%22M2 10h20%22/><circle cx=%2218%22 cy=%2214%22 r=%221.1%22 fill=%22%23000%22 stroke=%22none%22/></svg>");
}

/* A submenu item is a plain list row, not a pill, so it keeps its text
   flush; an icon there would be indenting the label for no reason. */
:is(.mb-header, .mb-nav) .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  content: none;
}

/* ---- Signed-in and signed-out visibility ----------------------------------
   Two utility classes, applied from the editor the same way the nav icons are:
   Advanced > Additional CSS class(es).

     mb-logged-in-only    hidden until someone signs in
     mb-logged-out-only   hidden once they have

   They are not specific to navigation - either works on any block - but a nav
   link is what they were added for. A class does not affect block validity, so
   the navigation block still parses, edits and saves exactly as before.

   How the header behaves today, since it is easy to misremember: the account
   control is never hidden, it changes its label to "Login" and points at
   /my-account/. The wallet pill genuinely disappears, but that is TeraWallet's
   own render callback returning an empty string for logged-out visitors, not
   anything in this stylesheet.

   `.wp-site-blocks` is in the selector on purpose. It is a front-end wrapper
   and does not exist in the editor canvas, so a link marked
   `mb-logged-in-only` stays visible while you are editing instead of vanishing
   out from under you.

   This is presentation, not access control, and should not be mistaken for it:
   the markup is still in the page. It does not need to be more than that -
   /my-account/orders/ already sends a logged-out visitor to the login form, so
   hiding the link is about not offering a dead end, not about protecting one.

   One caching note. The rule keys on the `logged-in` class WordPress puts on
   <body>, and that class is baked into a cached page like everything else.
   WP Super Cache does not serve cached pages to logged-in visitors by default,
   which is what keeps this correct; if that setting is ever turned off, the
   worst case is a nav link shown or hidden to the wrong audience, which is
   cosmetic.
   ------------------------------------------------------------------------ */

body:not(.logged-in) .wp-site-blocks .mb-logged-in-only,
body.logged-in .wp-site-blocks .mb-logged-out-only {
  display: none;
}

/* ---- Navigation: submenus -------------------------------------------------
   A dropdown ships unstyled, which on a dark page means a white panel under a
   gold pill. Same treatment as the account dropdown so the two agree.
   ------------------------------------------------------------------------ */

:is(.mb-header, .mb-nav) .wp-block-navigation__submenu-container {
  min-width: 200px;
  padding: .4rem 0;
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-sm);
  background-color: var(--wp--preset--color--surface-raised);
  box-shadow: var(--wp--preset--shadow--card);
}

/* Inside a submenu the items are a list, not a row of pills. The pill shape
   belongs to the top level only. */
:is(.mb-header, .mb-nav) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: .6rem 1.1rem;
  border: 0;
  border-radius: 0;
  color: var(--wp--preset--color--bone-dim);
}

:is(.mb-header, .mb-nav) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--gold-light);
  transform: none;
}

/* ---- Navigation: the mobile overlay ---------------------------------------
   Core opens the responsive menu on a white ground with black text, so on a
   phone the whole site went white behind two black links. The rule that does
   it is
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open`
   - four classes. Core's own `:not()` is kept here rather than out-muscled,
   and that is deliberate: it means an overlay colour chosen in the editor adds
   `.has-background`, switches core's rule off and switches this one off with
   it, so the editor keeps the last word instead of fighting the theme.
   ------------------------------------------------------------------------ */

:is(.mb-header, .mb-nav) .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--ink);
}

/* The links need naming too: core colours them from the same depth, so the
   pill rule above - two classes - never reached them inside the overlay. */
:is(.mb-header, .mb-nav) .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open,
:is(.mb-header, .mb-nav) .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--bone);
}

/* Stacked, the pills read better full width than as a column of 7rem stubs. */
:is(.mb-header, .mb-nav) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  justify-content: center;
  width: 100%;
  max-width: 20rem;
}

:is(.mb-header, .mb-nav) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: .75rem;
}

/* The two icon controls: bone at rest, gold on approach, like every other icon
   in the header. */
:is(.mb-header, .mb-nav) .wp-block-navigation__responsive-container-open,
:is(.mb-header, .mb-nav) .wp-block-navigation__responsive-container-close {
  border: 0;
  background: none;
  color: var(--wp--preset--color--bone);
  transition: color var(--mb-fast) var(--mb-ease);
}

:is(.mb-header, .mb-nav) .wp-block-navigation__responsive-container-open:hover,
:is(.mb-header, .mb-nav) .wp-block-navigation__responsive-container-close:hover {
  color: var(--wp--preset--color--gold-light);
}

/* ---- Buttons: lift, glow and the shimmer sweep --------------------------- */

.wp-element-button,
.wp-block-button__link,
.wc-block-components-button:not(.is-link) {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--mb-base) var(--mb-ease),
    box-shadow var(--mb-base) var(--mb-ease),
    color var(--mb-fast) var(--mb-ease),
    background-color var(--mb-fast) var(--mb-ease);
}

.wp-element-button::after,
.wp-block-button__link::after,
.wc-block-components-button:not(.is-link)::after {
  content: "";
  position: absolute;
  z-index: 1; /* under the ring, over the fill */
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-20deg);
  transition: transform var(--mb-sweep) var(--mb-ease);
  pointer-events: none;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover {
  transform: translateY(-2px);
  box-shadow: var(--mb-shadow-glow);
}

.wp-element-button:hover::after,
.wp-block-button__link:hover::after,
.wc-block-components-button:not(.is-link):hover::after {
  transform: translateX(320%) skewX(-20deg);
}

.wp-element-button:active,
.wp-block-button__link:active,
.wc-block-components-button:not(.is-link):active {
  transform: translateY(0) scale(.97);
  box-shadow: none;
}

/* ---- Header controls ----------------------------------------------------- */

.wc-block-mini-cart__button {
  transition:
    border-color var(--mb-fast) var(--mb-ease),
    color var(--mb-fast) var(--mb-ease),
    transform var(--mb-fast) var(--mb-ease);
}

.wc-block-mini-cart__button:hover {
  transform: translateY(-1px);
}

.wp-block-search__inside-wrapper {
  transition: border-color var(--mb-quick) var(--mb-ease), box-shadow var(--mb-quick) var(--mb-ease);
}

.wp-block-search__inside-wrapper:focus-within {
  box-shadow: var(--mb-shadow-focus);
}

.wp-block-search__button {
  transition: color var(--mb-fast) var(--mb-ease), transform var(--mb-fast) var(--mb-ease);
}

.wp-block-search__button:hover {
  color: var(--wp--preset--color--gold-light);
  transform: scale(1.08);
}

/* ---- Cards --------------------------------------------------------------- */

.mb-product-card .wc-block-components-product-image img,
.mb-post-card .wp-block-post-featured-image img {
  transition: transform var(--mb-slow) var(--mb-ease);
}

.mb-product-card:hover .wc-block-components-product-image img,
.mb-post-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}

/* ---- Text links ---------------------------------------------------------- */

.mb-footer-list a,
.wp-block-post-excerpt__more-link {
  position: relative;
}

.mb-footer-list a::after,
.wp-block-post-excerpt__more-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--mb-gold-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mb-base) var(--mb-ease);
}

.mb-footer-list a:hover::after,
.wp-block-post-excerpt__more-link:hover::after {
  transform: scaleX(1);
}

/* ---- Ledger icons -------------------------------------------------------- */

.mb-ledger-item {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.mb-ledger-item svg {
  flex: none;
  color: var(--wp--preset--color--gold);
}

.mb-ledger-item p {
  margin: 0;
}

/* ---- Motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wp-element-button,
  .wp-block-button__link,
  .wc-block-components-button,
    .wc-block-mini-cart__button,
  .wc-block-mini-wallet__link,
  :is(.mb-header, .mb-nav) .wp-block-navigation-item__content,
  .mb-product-card .wc-block-components-product-image img {
    transition: none;
  }

  .wp-element-button:hover,
  .wp-block-button__link:hover,
  .wc-block-components-button:not(.is-link):hover,
  .mb-product-card:hover .wc-block-components-product-image img {
    transform: none;
  }

  .wp-element-button::after,
  .wp-block-button__link::after,
  .wc-block-components-button::after {
    display: none;
  }

  .mb-footer-list a::after {
    transition: none;
  }
}


/* ---- Form fields ---------------------------------------------------------
   Scoped to .wp-site-blocks, the wrapper a block theme actually renders. These
   rules previously used .mb-site, which only exists in the classic build, so
   every one of them matched nothing and each input fell back to the browser
   default — a white box with black text on a black page.

   Fields keep a solid edge rather than the gold border used on controls: a
   gold ring on every input reads as decoration and stops signalling "type
   here". They share the ring's width, so the two treatments sit at one weight.
   ------------------------------------------------------------------------ */

.wp-site-blocks input[type="text"],
.wp-site-blocks input[type="email"],
.wp-site-blocks input[type="tel"],
.wp-site-blocks input[type="url"],
.wp-site-blocks input[type="password"],
.wp-site-blocks input[type="number"],
.wp-site-blocks input[type="search"]:not(.wp-block-search__input),
.wp-site-blocks input[type="date"],
.wp-site-blocks textarea,
.wp-site-blocks select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container select,
.mb-toolbar select {
  min-height: 44px;
  padding: .75rem .95rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line-control);
  border-radius: var(--mb-radius-sm);
  background-color: var(--wp--preset--color--surface-raised);
  color: var(--wp--preset--color--bone);
  font-family: inherit;
  font-size: 1rem; /* 16px stops iOS Safari zooming the page on focus */
  line-height: 1.4;
}

.wp-site-blocks input:focus,
.wp-site-blocks textarea:focus,
.wp-site-blocks select:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--gold);
  box-shadow: var(--mb-shadow-focus);
}

.wp-site-blocks ::placeholder {
  color: var(--wp--preset--color--bone-faint);
  opacity: 1;
}

/* The field sits inside a wrapper that already carries the border, the fill
   and the radius, so the input itself must draw none of them. Scoped through
   .wp-site-blocks as well so it outranks the generic input rule above rather
   than relying on source order. */
.wp-site-blocks .wp-block-search__input,
.wp-site-blocks .wp-block-search__input:focus,
.wp-site-blocks .wp-block-search__input:hover {
  height: var(--mb-control-h);
  min-height: 0;
  margin: 0;
  padding: 0 0 0 1rem;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--wp--preset--color--bone);
  font-size: 1rem;
  line-height: 1;
}

/* Autofill is the other white rectangle. Chrome paints its own background
   over any background-color the page sets and only yields to an inset shadow;
   the text colour has to be forced separately with -webkit-text-fill-color. */
.wp-site-blocks input:-webkit-autofill,
.wp-site-blocks input:-webkit-autofill:hover,
.wp-site-blocks input:-webkit-autofill:focus,
.wp-site-blocks textarea:-webkit-autofill,
.wp-site-blocks select:-webkit-autofill {
  -webkit-text-fill-color: var(--wp--preset--color--bone);
  -webkit-box-shadow: 0 0 0 1000px var(--wp--preset--color--surface-raised) inset;
  box-shadow: 0 0 0 1000px var(--wp--preset--color--surface-raised) inset;
  caret-color: var(--wp--preset--color--bone);
  transition: background-color 100000s ease-in-out 0s;
}

.wp-block-search__input:-webkit-autofill,
.wp-block-search__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--wp--preset--color--surface-raised) inset;
  box-shadow: 0 0 0 1000px var(--wp--preset--color--surface-raised) inset;
}

/* Search's own clear button ships as a dark glyph on a dark field. */
.wp-site-blocks input[type="search"]::-webkit-search-cancel-button,
.wp-block-search__input::-webkit-search-cancel-button {
  filter: invert(1) grayscale(1) brightness(1.6);
  cursor: pointer;
}

/* Native select arrows and date pickers render black-on-black otherwise. */
.wp-site-blocks select,
.wp-site-blocks input[type="date"],
.wc-block-components-select__container select {
  color-scheme: dark;
}

.wp-site-blocks ::selection {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
}

/* Rules and dividers: one colour, one weight, everywhere. */
.mb-ledger,
.mb-toolbar,
.mb-footer,
.mb-footer-top,
.mb-footer-bottom,
.mb-steps-list .wp-block-column {
  border-width: var(--mb-ring);
}

.mb-ledger .wp-block-column + .wp-block-column {
  border-left-width: var(--mb-ring);
}

/* ==========================================================================
   Refund request form (Return Refund and Exchange for WooCommerce)

   The plugin renders a bare stack: a heading, a bordered grid, three fields
   and a grey button. Left alone it reads as a form bolted onto the site
   rather than part of it, which on a store selling numbered editions is the
   wrong impression to leave at exactly the moment a customer is already
   unhappy.

   So the stack is composed instead. The order becomes a summary panel, the
   request becomes a second panel below it, labels take the eyebrow treatment
   used elsewhere, figures take the mono face, and the submit carries the gold
   gradient because it is the one action on the page.

   header.php puts these pages inside .wp-site-blocks, so the theme's own
   field rules now reach them too; what is here is composition and the pieces
   those rules do not cover.
   ========================================================================== */

.wps_rma_refund_form_wrapper {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: var(--wp--preset--spacing--60, clamp(3rem, 6vw, 4.5rem));
  color: var(--wp--preset--color--bone);
}

/* ---- Heading ------------------------------------------------------------- */

.wps_rma_refund_form_wrapper .wps-rma-form__header {
  margin-bottom: var(--wp--preset--spacing--40, 2rem);
  padding: 0;
  border: 0;
  background: none !important;
}

/* The eyebrow that sits above every display heading on the site. Drawn rather
   than written so it needs no markup and carries no untranslatable text. */
.wps_rma_refund_form_wrapper .wps-rma-form__header::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1.1rem;
  border-radius: 2px;
  background: var(--mb-gold-gradient);
}

.wps_rma_refund_form_wrapper .wps-rma-form__heading {
  margin: 0;
  color: var(--wp--preset--color--bone);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* ---- The two panels ------------------------------------------------------ */

/* Order summary, then the request itself. The raised gradient and the quiet
   gold edge are the same treatment the key card and the ledger use, so these
   read as site furniture rather than plugin output. */
.wps_rma_refund_form_wrapper .wps_rma_product_table_wrapper,
.wps_rma_refund_form_wrapper .wps-rma-refund-request__row {
  margin-bottom: var(--wp--preset--spacing--40, 2rem);
  padding: var(--wp--preset--spacing--40, 2rem);
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-lg);
  background: var(--wp--preset--gradient--raised);
  box-shadow: var(--mb-shadow-panel);
}

.wps_rma_refund_form_wrapper .wps-rma-col {
  display: block;
}

/* ---- Order summary table ------------------------------------------------- */

.wps_rma_refund_form_wrapper .wps-rma-product__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

/* Hairlines only. The plugin's full grid boxes every cell, which at this size
   reads as a spreadsheet rather than a receipt. */
.wps_rma_refund_form_wrapper .wps-rma-product__table :is(th, td) {
  padding: var(--wp--preset--spacing--30, 1.25rem) .5rem;
  border: 0;
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line);
  background: none !important;
  text-align: left;
  vertical-align: middle;
}

.wps_rma_refund_form_wrapper .wps-rma-product__table :is(th, td):last-child {
  text-align: right;
}

.wps_rma_refund_form_wrapper .wps-rma-product__table thead th {
  padding-top: 0;
  color: var(--wp--preset--color--bone-faint);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The total row closes the panel, so it loses the rule and gains the weight. */
.wps_rma_refund_form_wrapper .wps-rma-product__table tbody tr:last-child :is(th, td) {
  padding-bottom: 0;
  border-bottom: 0;
}

.wps_rma_refund_form_wrapper .wps-rma-product__table tbody th {
  color: var(--wp--preset--color--bone-dim);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.wps_rma_refund_form_wrapper .wps-rma-product__wrap {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30, 1.25rem);
}

/* A ring around the thumbnail, and a filled tile behind it so a missing or
   broken image reads as "no cover" rather than as a broken page. */
.wps_rma_refund_form_wrapper .wps-rma-product__table img {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-md);
  background: var(--wp--preset--color--ink);
  object-fit: cover;
  color: transparent; /* hides the alt text of a broken src */
  font-size: 0;
}

.wps_rma_refund_form_wrapper .wps-rma__product-title a {
  color: var(--wp--preset--color--bone);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--mb-fast) var(--mb-ease);
}

.wps_rma_refund_form_wrapper .wps-rma__product-title a:hover {
  color: var(--wp--preset--color--gold-light);
}

.wps_rma_refund_form_wrapper .wps-rma__product-title .product-quantity {
  color: var(--wp--preset--color--bone-faint);
  font-weight: 400;
}

.wps_rma_refund_form_wrapper .wps-rma__product-title p {
  margin: .3rem 0 0;
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--x-small);
}

/* Figures line up down the column, so mono and tabular like the ledger. */
.wps_rma_refund_form_wrapper :is(.wps_wrma_formatted_price, .wps_rma_total_amount_wrap, .product-total) {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

.wps_rma_refund_form_wrapper #wps_rma_total_refund_amount {
  color: var(--wp--preset--color--gold-light);
  font-size: var(--wp--preset--font-size--large);
}

/* The quantity can only ever be the full line quantity in the free tier, so
   the control is dressed down to the number it is. !important because the
   plugin's sheet loads after the theme's and restates the border and fill. */
.wps_rma_refund_form_wrapper input.wps_rma_return_product_qty[disabled] {
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--wp--preset--color--bone) !important;
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
}

.wps_rma_refund_form_wrapper input.wps_rma_return_product_qty[disabled]::-webkit-outer-spin-button,
.wps_rma_refund_form_wrapper input.wps_rma_return_product_qty[disabled]::-webkit-inner-spin-button {
  display: none;
}

/* ---- Labels -------------------------------------------------------------- */

/* The eyebrow treatment, so field names read as section markers rather than
   as bold body text. */
.wps_rma_refund_form_wrapper label {
  display: block;
  margin-bottom: .7rem;
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wps_rma_refund_form_wrapper label b {
  font-weight: inherit;
}

/* Red is the only alarm colour on the site and this is not an alarm. The
   attachment marker carries color:red inline, so it has to be taken back. */
.wps_rma_refund_form_wrapper .wps_field_mendatory,
.wps_rma_refund_form_wrapper .wps_rma_required {
  margin-left: .3rem;
  color: var(--wp--preset--color--gold) !important;
}

/* Each field group is a band with a hairline above it, which gives the panel
   an internal rhythm without needing markup the plugin does not emit. */
.wps_rma_refund_form_wrapper .wps_rma_reason_description,
.wps_rma_refund_form_wrapper #wps_rma_return_request_form {
  margin-top: var(--wp--preset--spacing--40, 2rem);
  padding-top: var(--wp--preset--spacing--40, 2rem);
  border-top: var(--mb-ring) solid var(--wp--preset--color--line);
}

/* ---- Fields -------------------------------------------------------------- */

/* Inside the raised panel the fields drop to ink so they read as wells rather
   than as more panel. */
.wps_rma_refund_form_wrapper :is(
  input[type="text"],
  input[type="file"],
  textarea,
  select
) {
  width: 100%;
  min-height: var(--mb-control-h);
  margin-bottom: 0;
  padding: .8rem 1rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-md);
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--bone);
  font-family: inherit;
  font-size: 1rem; /* 16px stops iOS Safari zooming the page on focus */
  line-height: 1.5;
  transition: border-color var(--mb-fast) var(--mb-ease), box-shadow var(--mb-fast) var(--mb-ease);
}

.wps_rma_refund_form_wrapper :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--wp--preset--color--gold);
  box-shadow: var(--mb-shadow-focus);
}

.wps_rma_refund_form_wrapper ::placeholder {
  color: var(--wp--preset--color--bone-faint);
  opacity: 1;
}

.wps_rma_refund_form_wrapper select,
.wps_rma_refund_form_wrapper input[type="file"] {
  color-scheme: dark;
}

.wps_rma_refund_form_wrapper textarea {
  min-height: 10rem;
  resize: vertical;
}

.wps_rma_refund_form_wrapper .wps_rma_other_subject {
  margin-top: .85rem;
}

/* ---- Attachments --------------------------------------------------------- */

.wps_rma_refund_form_wrapper .wps_rma_attach_files p {
  margin: 0 0 .75rem;
}

.wps_rma_refund_form_wrapper input[type="file"] {
  padding: .65rem 1rem;
  cursor: pointer;
}

.wps_rma_refund_form_wrapper input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: .5rem 1.1rem;
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-pill);
  background: var(--wp--preset--color--surface-raised);
  color: var(--wp--preset--color--bone-dim);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
}

.wps_rma_refund_form_wrapper input[type="file"]:hover::file-selector-button {
  border-color: var(--mb-edge-strong);
  color: var(--wp--preset--color--gold-light);
}

.wps_rma_refund_form_wrapper .add_field_input_div {
  margin-bottom: .75rem;
}

.wps_rma_refund_form_wrapper .wps_rma_delete_field {
  display: inline-block;
  margin-left: .6rem;
  color: var(--wp--preset--color--bone-faint);
  cursor: pointer;
  transition: color var(--mb-fast) var(--mb-ease);
}

.wps_rma_refund_form_wrapper .wps_rma_delete_field:hover {
  color: var(--wp--preset--color--gold);
}

.wps_rma_refund_form_wrapper i {
  display: block;
  margin-top: .85rem;
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--x-small);
  font-style: normal;
}

/* ---- Buttons ------------------------------------------------------------- */

/* Add More is a utility, so it stays a quiet outline. */
.wps_rma_refund_form_wrapper input.wps_rma_return_request_morefiles {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: .55rem 1.2rem;
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-pill);
  background: none;
  color: var(--wp--preset--color--bone-dim);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
}

.wps_rma_refund_form_wrapper input.wps_rma_return_request_morefiles:hover {
  border-color: var(--mb-edge-strong);
  color: var(--wp--preset--color--gold-light);
}

/* Submit is the only action on the page, so it takes the gold gradient the
   hero call to action uses. Ink text because gold at full strength will not
   carry bone legibly. */
.wps_rma_refund_form_wrapper input[type="submit"] {
  width: auto;
  min-height: 0;
  margin-top: var(--wp--preset--spacing--40, 2rem);
  padding: 1rem 2.4rem;
  border: 0;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-gold-gradient);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--mb-shadow-glow);
  transition: transform var(--mb-base) var(--mb-ease), box-shadow var(--mb-base) var(--mb-ease), filter var(--mb-fast) var(--mb-ease);
}

.wps_rma_refund_form_wrapper input[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: var(--mb-shadow-glow-strong);
}

.wps_rma_refund_form_wrapper input[type="submit"]:active {
  transform: translateY(0);
}

/* ---- Validation notices -------------------------------------------------- */

/* The submit handler paints the list red inline and adds .woocommerce-error,
   so the fill has to be taken back rather than restyled. :not(:empty) keeps
   the empty <ul> from drawing a box before anything has gone wrong. */
.wps_rma_refund_form_wrapper #wps_rma_return_alert:not(:empty) {
  margin: 0 0 var(--wp--preset--spacing--30, 1.25rem);
  padding: 1rem 1.2rem;
  border: var(--mb-ring) solid var(--wp--preset--color--gold-deep);
  border-left-width: 3px;
  border-radius: var(--mb-radius-md);
  background-color: rgba(205, 161, 60, .07) !important;
  color: var(--wp--preset--color--gold-light);
  font-size: var(--wp--preset--font-size--small);
  list-style: none;
}

.wps_rma_refund_form_wrapper #wps_rma_return_alert li {
  margin: 0;
  padding: .15rem 0;
}

/* ---- Billing block ------------------------------------------------------- */

/* Reference material, not part of the request, so it sits outside the panels
   and drops back to the quiet weight. */
.wps_rma_refund_form_wrapper .wps_rma_customer_detail {
  padding: 0 var(--wp--preset--spacing--40, 2rem);
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--small);
}

.wps_rma_refund_form_wrapper .woocommerce-column__title {
  margin: 0 0 .75rem;
  color: var(--wp--preset--color--bone-dim);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wps_rma_refund_form_wrapper .wps_rma_customer_detail address {
  font-style: normal;
  line-height: 1.7;
}

/* ---- Narrow viewports ---------------------------------------------------- */

@media (max-width: 600px) {
  .wps_rma_refund_form_wrapper .wps_rma_product_table_wrapper,
  .wps_rma_refund_form_wrapper .wps-rma-refund-request__row {
    padding: var(--wp--preset--spacing--30, 1.25rem);
  }

  .wps_rma_refund_form_wrapper .wps-rma-product__table :is(th, td) {
    padding: .85rem .35rem;
  }

  .wps_rma_refund_form_wrapper .wps-rma-product__table img {
    width: 44px;
    height: 44px;
  }

  .wps_rma_refund_form_wrapper .wps-rma-product__wrap {
    gap: .85rem;
  }

  .wps_rma_refund_form_wrapper input[type="submit"] {
    width: 100%;
  }
}

/* ==========================================================================
   TeraWallet — My Account wallet

   The plugin ships a light interface: an indigo balance card, white stat
   tiles and a white transactions panel. None of it reads on ink, and none of
   it is a block, so the Site Editor cannot reach it — these are PHP templates
   rendered into a WooCommerce account endpoint. Styling them here is the only
   way the page joins the rest of the site.

   Scoped to the plugin's own container so nothing leaks into the account
   pages WooCommerce renders itself. !important appears only where the
   plugin's sheet loads after the theme's and restates a fill.
   ========================================================================== */

/* ---- Shell --------------------------------------------------------------- */

.woo-wallet-my-wallet-container {
  color: var(--wp--preset--color--bone);
}

.woo-wallet-my-wallet-container :is(h2, h3, h4) {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  color: var(--wp--preset--color--bone);
}

/* The endpoint heading renders in the plugin's own dark blue, which on ink is
   very nearly invisible. */
.woo-wallet-my-wallet-container .woo-wallet-header,
.woo-wallet-my-wallet-container .woo-wallet-header :is(h1, h2, h3, p) {
  color: var(--wp--preset--color--bone);
  background: none !important;
}

.woo-wallet-my-wallet-container .woo-wallet-header p {
  color: var(--wp--preset--color--bone-dim);
  font-size: var(--wp--preset--font-size--small);
}

/* ---- Balance card -------------------------------------------------------- */

/* The indigo panel is the loudest thing on the page and belongs to no part of
   the palette. The raised gradient plus the gold ring is what every other
   surface in the theme uses to say "this is the important one". */
.woo-wallet-my-wallet-container .woo-wallet-balance-card {
  padding: var(--wp--preset--spacing--50, 3rem) var(--wp--preset--spacing--40, 2rem);
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-lg) var(--mb-radius-lg) 0 0;
  background: var(--wp--preset--gradient--raised) !important;
  color: var(--wp--preset--color--bone);
  text-align: center;
}

.woo-wallet-my-wallet-container .woo-wallet-balance-card h3 {
  margin: 0 0 .6rem;
  color: var(--wp--preset--color--bone-dim);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The balance is the one figure on the page worth setting large, and it is a
   figure, so it takes the mono face and tabular digits like the ledger. */
.woo-wallet-my-wallet-container .woo-wallet-price {
  margin: 0;
  color: var(--wp--preset--color--gold-light);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xx-large);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.1;
}

/* ---- Topup / Statement tabs ---------------------------------------------- */

.woo-wallet-my-wallet-container .woo-wallet-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--40, 2rem);
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-top: 0;
  border-radius: 0 0 var(--mb-radius-lg) var(--mb-radius-lg);
  background: var(--wp--preset--color--surface) !important;
  overflow: hidden;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-item-wrapper {
  flex: 1 1 0;
  min-width: 10rem;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: var(--mb-control-h);
  padding: .9rem 1.2rem;
  background: none !important;
  color: var(--wp--preset--color--bone-dim) !important;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition: color var(--mb-fast) var(--mb-ease), background-color var(--mb-fast) var(--mb-ease);
}

.woo-wallet-my-wallet-container .woo-wallet-nav-item-wrapper + .woo-wallet-nav-item-wrapper .woo-wallet-nav-tab {
  border-left: var(--mb-ring) solid var(--wp--preset--color--line);
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tab:hover,
.woo-wallet-my-wallet-container .woo-wallet-nav-tab.active {
  background: var(--wp--preset--color--surface-raised) !important;
  color: var(--wp--preset--color--gold-light) !important;
}

/* The active tab is marked with the gold underline the navigation uses, so
   the two read as the same idea. */
.woo-wallet-my-wallet-container .woo-wallet-nav-tab.active {
  box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--gold);
}

.woo-wallet-my-wallet-container .woo-wallet-submenu {
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-md);
  background: var(--wp--preset--color--surface-raised) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-submenu-item a {
  color: var(--wp--preset--color--bone-dim);
  text-decoration: none;
}

.woo-wallet-my-wallet-container .woo-wallet-submenu-item a:hover {
  color: var(--wp--preset--color--gold-light);
}

/* ---- Stat tiles ---------------------------------------------------------- */

.woo-wallet-my-wallet-container .woo-wallet-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--wp--preset--spacing--30, 1.25rem);
  margin-bottom: var(--wp--preset--spacing--40, 2rem);
}

/* The tone modifiers paint green and red fills. Three tiles in three colours
   turn a summary into a traffic light; one surface and one rule is enough,
   with the difference carried by the icon alone. */
.woo-wallet-my-wallet-container .woo-wallet-stat-card,
.woo-wallet-my-wallet-container [class*="woo-wallet-stat-card--"] {
  padding: var(--wp--preset--spacing--30, 1.25rem);
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-md);
  background: var(--wp--preset--color--surface-raised) !important;
  color: var(--wp--preset--color--bone);
}

.woo-wallet-my-wallet-container .woo-wallet-stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .85rem;
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-sm);
  background: var(--wp--preset--color--surface) !important;
  color: var(--wp--preset--color--gold);
}

.woo-wallet-my-wallet-container .woo-wallet-stat-card__icon :is(svg, i, span) {
  width: 1.05rem;
  height: 1.05rem;
  color: inherit;
  fill: currentColor;
}

.woo-wallet-my-wallet-container .woo-wallet-stat-card__value {
  display: block;
  color: var(--wp--preset--color--bone);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--large);
  font-variant-numeric: tabular-nums;
}

.woo-wallet-my-wallet-container .woo-wallet-stat-card__label {
  display: block;
  margin-top: .3rem;
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--x-small);
}

/* ---- Transactions -------------------------------------------------------- */

.woo-wallet-my-wallet-container .woo-wallet-transactions-list {
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-md);
  background: var(--wp--preset--color--surface) !important;
  overflow: hidden;
}

.woo-wallet-my-wallet-container .ww-txn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--wp--preset--spacing--30, 1.25rem);
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line);
}

.woo-wallet-my-wallet-container .ww-txn-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
}

.woo-wallet-my-wallet-container .ww-txn-meta {
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--x-small);
}

.woo-wallet-my-wallet-container .ww-txn-row {
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line);
  background: none !important;
}

.woo-wallet-my-wallet-container .ww-txn-row:last-child {
  border-bottom: 0;
}

.woo-wallet-my-wallet-container .ww-txn-row--head .ww-txn-cell {
  color: var(--wp--preset--color--bone-dim);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.woo-wallet-my-wallet-container .ww-txn-cell {
  padding: var(--wp--preset--spacing--20, .75rem) var(--wp--preset--spacing--30, 1.25rem);
  color: var(--wp--preset--color--bone);
  font-size: var(--wp--preset--font-size--small);
}

.woo-wallet-my-wallet-container :is(.ww-txn-cell--date, .ww-txn-cell--amount) {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

.woo-wallet-my-wallet-container .ww-txn-cell--desc {
  color: var(--wp--preset--color--bone-dim);
}

/* Credit and debit are the one place a second colour earns its keep, so the
   direction of the money is legible without reading the sign. Gold for money
   arriving, muted for money leaving — not green and red, which would be the
   only such pair on the site. */
.woo-wallet-my-wallet-container .ww-txn-cell--amount.credit {
  color: var(--wp--preset--color--gold-light) !important;
}

.woo-wallet-my-wallet-container .ww-txn-cell--amount.debit {
  color: var(--wp--preset--color--bone-dim) !important;
}

.woo-wallet-my-wallet-container .ww-txn-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line-control);
  border-radius: var(--mb-radius-pill);
  background: none !important;
  color: var(--wp--preset--color--bone-dim) !important;
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: .04em;
}

.woo-wallet-my-wallet-container .ww-txn-empty {
  padding: var(--wp--preset--spacing--50, 3rem) var(--wp--preset--spacing--30, 1.25rem);
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--small);
  text-align: center;
}

/* ---- Wallet forms -------------------------------------------------------- */

/* Topup and statement render their own inputs and buttons on the same
   endpoint, and like the refund form they sit outside .wp-site-blocks. */
.woo-wallet-my-wallet-container :is(input[type="text"], input[type="number"], input[type="email"], select, textarea) {
  min-height: var(--mb-control-h);
  padding: .75rem .95rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line-control);
  border-radius: var(--mb-radius-sm);
  background-color: var(--wp--preset--color--surface-raised);
  color: var(--wp--preset--color--bone);
  font-family: inherit;
  font-size: 1rem;
  color-scheme: dark;
}

.woo-wallet-my-wallet-container :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--wp--preset--color--gold);
  box-shadow: var(--mb-shadow-focus);
}

.woo-wallet-my-wallet-container :is(button, input[type="submit"], .button) {
  padding: .9rem 1.8rem;
  border: var(--mb-ring) solid var(--mb-edge-strong);
  border-radius: var(--mb-radius-pill);
  background-color: var(--wp--preset--color--surface-raised) !important;
  color: var(--wp--preset--color--bone) !important;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--mb-base) var(--mb-ease), box-shadow var(--mb-base) var(--mb-ease),
              color var(--mb-fast) var(--mb-ease), background-color var(--mb-fast) var(--mb-ease);
}

.woo-wallet-my-wallet-container :is(button, input[type="submit"], .button):hover {
  transform: translateY(-2px);
  background-color: var(--wp--preset--color--surface) !important;
  color: var(--wp--preset--color--gold-light) !important;
  box-shadow: var(--mb-shadow-glow);
}

/* ---- Mini wallet in the header ------------------------------------------- */

/* The cart and account controls are pills on a gold ring at a fixed height;
   the wallet balance shipped as bare text beside them, which read as an
   unfinished third thing. Same shell, same height, same figures. */
.woo-wallet-menu-contents,
.woo-wallet-menu-contents.menu-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: var(--mb-control-h);
  padding: 0 1.1rem;
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-pill);
  background: var(--mb-fill);
  color: var(--wp--preset--color--bone);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
}

.woo-wallet-menu-contents:hover,
.woo-wallet-menu-contents.menu-link:hover {
  border-color: var(--mb-edge-strong);
  color: var(--wp--preset--color--gold-light);
}

.woo-wallet-menu-contents .woo-wallet-icon-wallet {
  color: var(--wp--preset--color--gold);
}

/* The balance is echoed as WooCommerce price markup, so it takes the same
   mono treatment the cart total already has. */
.woo-wallet-menu-contents .woocommerce-Price-amount,
.woo-wallet-menu-contents bdi {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Wallet: the surfaces underneath ------------------------------------
   The tiles and the transactions panel were restyled last pass but the thing
   they sit on was not, so the plugin's white content area kept showing in the
   gutters between them and as a halo around each card — which is what still
   read as "the white background" on the page.
   ------------------------------------------------------------------------ */

.woo-wallet-my-wallet-container,
.woo-wallet-my-wallet-container .woo-wallet-content-area,
.woo-wallet-my-wallet-container .woo-wallet-top-section,
.woo-wallet-content-area,
.woo-wallet-top-section {
  background: none !important;
  box-shadow: none !important;
}

/* Whatever the plugin paints white below the tiles — wrappers it adds around
   the grid and the list — is cleared the same way. The panels themselves set
   their own fill immediately after, so nothing loses its surface. */
.woo-wallet-my-wallet-container div:not([class]),
.woo-wallet-my-wallet-container .woo-wallet-content-area > div {
  background-color: transparent;
}

.woo-wallet-my-wallet-container .woo-wallet-stats-grid,
.woo-wallet-my-wallet-container .woo-wallet-transactions-list,
.woo-wallet-my-wallet-container .woo-wallet-nav-tabs {
  box-shadow: none !important;
}

.woo-wallet-my-wallet-container .woo-wallet-transactions-list {
  background: var(--wp--preset--color--surface) !important;
}

/* Panels get the same depth the refund form panels carry, so the two pages
   agree about how a raised surface behaves. */
.woo-wallet-my-wallet-container .woo-wallet-balance-card,
.woo-wallet-my-wallet-container .woo-wallet-stat-card,
.woo-wallet-my-wallet-container .woo-wallet-transactions-list {
  box-shadow: var(--mb-shadow-panel) !important;
}

/* The transactions heading renders in the plugin's dark blue, which on ink is
   very nearly invisible; the earlier element rule did not outrank it. */
.woo-wallet-my-wallet-container .ww-txn-title,
.woo-wallet-my-wallet-container .ww-txn-head :is(h1, h2, h3, h4, h5) {
  color: var(--wp--preset--color--bone) !important;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
}

/* The stat icons ship green and red. Two alarm colours on a summary of three
   zeroes is noise; the icon shape already says which direction the money
   went, so they all take the gold and the tone modifiers are neutralised. */
.woo-wallet-my-wallet-container .woo-wallet-stat-card__icon,
.woo-wallet-my-wallet-container [class*="woo-wallet-stat-card--"] .woo-wallet-stat-card__icon {
  background: var(--wp--preset--color--ink) !important;
  border-color: var(--mb-edge) !important;
  color: var(--wp--preset--color--gold) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-stat-card__icon :is(svg, path, i, span) {
  color: var(--wp--preset--color--gold) !important;
  fill: currentColor !important;
  stroke: currentColor;
}

.woo-wallet-my-wallet-container .woo-wallet-stat-card__value {
  color: var(--wp--preset--color--bone) !important;
}

/* The endpoint's own intro line and any stray plugin panel behind it. */
.woo-wallet-my-wallet-container .woo-wallet-header {
  margin-bottom: var(--wp--preset--spacing--40, 2rem);
}

.woo-wallet-my-wallet-container .woo-wallet-header :is(h1, h2, h3) {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--bone) !important;
}

/* ---- The classic page container -----------------------------------------
   woocommerce_before_main_content opens #primary.content-area > #main
   .site-main and nothing styles them, so plugin pages ran full-bleed while
   the header and footer sat in the theme's 1180px container. Giving the pair
   the same container is what puts the two in the same column.
   ------------------------------------------------------------------------ */

.wp-site-blocks #primary.content-area {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1180px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.wp-site-blocks #main.site-main {
  max-width: 100%;
}

/* Long option text in a <select> sets the element's intrinsic width, which
   pushed the document wider than the viewport and left a horizontal scrollbar
   on every plugin page. */
.wp-site-blocks #primary.content-area :is(select, input, textarea, table) {
  max-width: 100%;
}

/* Belt and braces for the breadcrumb, which functions.php also unhooks. */
.wp-site-blocks #primary.content-area > .woocommerce-breadcrumb {
  display: none;
}

/* The refund panels already carry the reading measure, so the container only
   needs to centre them. */
.wps_rma_refund_form_wrapper {
  padding-inline: 0;
}


/* ==========================================================================
   TeraWallet — top-up and statement

   Both views ship the same light interface as the dashboard did: white
   section headers, white fields, white filter bars and the green/red pair for
   credit and debit. Same treatment as the dashboard, so the three tabs of the
   wallet agree with each other and with the rest of the site.
   ========================================================================== */

/* ---- Shared panels ------------------------------------------------------- */

.woo-wallet-my-wallet-container :is(.woo-wallet-form-wrapper, .woo-wallet-statement) {
  padding: var(--wp--preset--spacing--40, 2rem);
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-lg);
  background: var(--wp--preset--gradient--raised) !important;
  box-shadow: var(--mb-shadow-panel);
  color: var(--wp--preset--color--bone);
}

/* The plugin paints a white band behind every section title. */
.woo-wallet-my-wallet-container :is(.woo-wallet-section-title, .ww-stmt-masthead, .ww-stmt-identity) {
  padding: 0;
  border: 0;
  background: none !important;
  color: var(--wp--preset--color--bone) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-section-title,
.woo-wallet-my-wallet-container .ww-stmt-identity :is(h2, h3, h4) {
  margin: 0 0 var(--wp--preset--spacing--30, 1.25rem);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  color: var(--wp--preset--color--bone) !important;
}

/* ---- Top-up -------------------------------------------------------------- */

.woo-wallet-my-wallet-container .woo-wallet-add-amount label,
.woo-wallet-my-wallet-container .woo-wallet-form-wrapper label {
  display: block;
  margin-bottom: .7rem;
  color: var(--wp--preset--color--bone-faint) !important;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.woo-wallet-my-wallet-container #woo_wallet_balance_to_add,
.woo-wallet-my-wallet-container .woo-wallet-balance-to-add {
  width: 100%;
  max-width: 22rem;
  min-height: var(--mb-control-h);
  padding: .8rem 1rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line) !important;
  border-radius: var(--mb-radius-md);
  background-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--bone) !important;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* Add Funds is the action on the page, so it takes the gradient the refund
   submit uses. Same rule, same reason. */
.woo-wallet-my-wallet-container :is(.woo-add-to-wallet, .ww-stmt-apply),
.woo-wallet-my-wallet-container button[name="woo_wallet_add_amount"] {
  margin-top: var(--wp--preset--spacing--30, 1.25rem);
  padding: 1rem 2.2rem !important;
  border: 0 !important;
  border-radius: var(--mb-radius-pill) !important;
  background: var(--mb-gold-gradient) !important;
  color: var(--wp--preset--color--ink) !important;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--mb-shadow-glow);
  transition: transform var(--mb-base) var(--mb-ease), box-shadow var(--mb-base) var(--mb-ease), filter var(--mb-fast) var(--mb-ease);
}

.woo-wallet-my-wallet-container :is(.woo-add-to-wallet, .ww-stmt-apply):hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: var(--mb-shadow-glow-strong);
}

/* ---- Statement ----------------------------------------------------------- */

.woo-wallet-my-wallet-container .ww-stmt-period,
.woo-wallet-my-wallet-container .ww-stmt-time,
.woo-wallet-my-wallet-container .ww-stmt-generated,
.woo-wallet-my-wallet-container .ww-stmt-note,
.woo-wallet-my-wallet-container .ww-stmt-pager-count {
  color: var(--wp--preset--color--bone-faint) !important;
  font-size: var(--wp--preset--font-size--x-small);
}

/* Download CSV ships white; Print is already an outline. Both become the
   quiet outline the utility buttons elsewhere use. */
.woo-wallet-my-wallet-container .ww-stmt-actions :is(a, button, .button) {
  padding: .6rem 1.3rem !important;
  border: var(--mb-ring) solid var(--mb-edge) !important;
  border-radius: var(--mb-radius-pill) !important;
  background: none !important;
  color: var(--wp--preset--color--bone-dim) !important;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: none !important;
  transition: border-color var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
}

.woo-wallet-my-wallet-container .ww-stmt-actions :is(a, button, .button):hover {
  border-color: var(--mb-edge-strong) !important;
  color: var(--wp--preset--color--gold-light) !important;
}

/* The date filter bar and the totals strip are the two white bands left. */
.woo-wallet-my-wallet-container :is(.ww-stmt-filter, .ww-stmt-equation, .ww-stmt-tablewrap, .ww-stmt-rule, .ww-stmt-pager, .ww-stmt-ghost) {
  border-color: var(--wp--preset--color--line) !important;
  background: none !important;
  box-shadow: none !important;
}

.woo-wallet-my-wallet-container .ww-stmt-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--30, 1.25rem);
  margin: var(--wp--preset--spacing--30, 1.25rem) 0;
  padding: var(--wp--preset--spacing--30, 1.25rem) 0;
  border-top: var(--mb-ring) solid var(--wp--preset--color--line) !important;
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line) !important;
}

.woo-wallet-my-wallet-container .ww-stmt-field label {
  display: block;
  margin-bottom: .5rem;
  color: var(--wp--preset--color--bone-faint) !important;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.woo-wallet-my-wallet-container .ww-stmt-field input {
  min-height: var(--mb-control-h);
  padding: .7rem .9rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line) !important;
  border-radius: var(--mb-radius-md);
  background-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--bone) !important;
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
}

.woo-wallet-my-wallet-container .ww-stmt-apply {
  margin-top: 0;
}

/* ---- Statement totals ---------------------------------------------------- */

.woo-wallet-my-wallet-container .ww-stmt-term-label {
  color: var(--wp--preset--color--bone-faint) !important;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.woo-wallet-my-wallet-container :is(.ww-stmt-term-value, .ww-stmt-num, .ww-stmt-op, .ww-stmt-sign) {
  color: var(--wp--preset--color--bone) !important;
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

/* Gold for money arriving, muted for money leaving — the same pair the
   dashboard uses, rather than the green and red the plugin ships. */
.woo-wallet-my-wallet-container .ww-stmt-term-value.is-credit {
  color: var(--wp--preset--color--gold-light) !important;
}

.woo-wallet-my-wallet-container .ww-stmt-term-value.is-debit {
  color: var(--wp--preset--color--bone-dim) !important;
}

/* Closing is the figure the statement exists to state. */
.woo-wallet-my-wallet-container .ww-stmt-term.is-closing {
  background: none !important;
}

.woo-wallet-my-wallet-container .ww-stmt-term.is-closing .ww-stmt-term-value {
  color: var(--wp--preset--color--gold-light) !important;
  font-size: var(--wp--preset--font-size--large);
}

.woo-wallet-my-wallet-container .ww-stmt-table :is(th, td) {
  padding: .85rem .5rem;
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line) !important;
  background: none !important;
  color: var(--wp--preset--color--bone);
  font-size: var(--wp--preset--font-size--small);
}

.woo-wallet-my-wallet-container .ww-stmt-table th {
  color: var(--wp--preset--color--bone-faint);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.woo-wallet-my-wallet-container .ww-stmt-empty {
  padding: var(--wp--preset--spacing--40, 2rem) 0;
  color: var(--wp--preset--color--bone-faint) !important;
  font-size: var(--wp--preset--font-size--small);
  text-align: center;
}


/* ==========================================================================
   Order messages (Return Refund and Exchange)

   A React view the plugin ships with its own light styling: a white transcript
   panel edge to edge, green bubbles, a green send button. Nothing about it
   belongs to this site, and it is the surface a customer sits on while waiting
   to hear back — so it is worth as much care as the request form.
   ========================================================================== */

.wps_rma_order_msg_react_wrapper {
  max-width: 860px;
  margin-inline: auto;
  padding-block: var(--wp--preset--spacing--50, 3rem);
  color: var(--wp--preset--color--bone);
}

/* Back is a way out, not an action. */
.wps_rma_order_msg_react_wrapper .wps-order-msg-back {
  display: inline-block;
  margin-bottom: var(--wp--preset--spacing--30, 1.25rem);
  padding: .55rem 1.3rem !important;
  border: var(--mb-ring) solid var(--mb-edge) !important;
  border-radius: var(--mb-radius-pill) !important;
  background: none !important;
  color: var(--wp--preset--color--bone-dim) !important;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease);
}

.wps_rma_order_msg_react_wrapper .wps-order-msg-back:hover {
  border-color: var(--mb-edge-strong) !important;
  color: var(--wp--preset--color--gold-light) !important;
}

/* The transcript panel. */
.wps_rma_order_msg_react_wrapper .wps_order_msg_main_container,
.wps_rma_order_msg_react_wrapper .wps_order_msg_container {
  border: var(--mb-ring) solid var(--mb-edge) !important;
  border-radius: var(--mb-radius-lg);
  background: var(--wp--preset--gradient--raised) !important;
  box-shadow: var(--mb-shadow-panel);
  overflow: hidden;
}

.wps_rma_order_msg_react_wrapper .wps_order_msg_container {
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  background: none !important;
}

/* The two column headers — Shop Manager one side, Customer the other. */
.wps_rma_order_msg_react_wrapper .wps-order-msg_column {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--wp--preset--spacing--30, 1.25rem) var(--wp--preset--spacing--40, 2rem);
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line);
  background: none !important;
}

.wps_rma_order_msg_react_wrapper .wps-order-msg_column_name {
  color: var(--wp--preset--color--bone-faint) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: var(--wp--preset--font-size--x-small) !important;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wps_rma_order_msg_react_wrapper .wps_order_msg_sub_container {
  min-height: 14rem;
  padding: var(--wp--preset--spacing--40, 2rem);
  background: none !important;
}

/* Bubbles: the store speaks on a raised surface, the customer in gold. Green
   was the only green on the site. */
.wps_rma_order_msg_react_wrapper .wps_order_msg_detail_container {
  display: inline-block;
  max-width: min(80%, 34rem);
  margin-bottom: .85rem;
  padding: .8rem 1.1rem !important;
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-lg);
  background: var(--wp--preset--color--surface-raised) !important;
  color: var(--wp--preset--color--bone) !important;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}

.wps_rma_order_msg_react_wrapper .wps_order_msg_sender_details {
  color: var(--wp--preset--color--bone-dim) !important;
}

.wps_rma_order_msg_react_wrapper .wps_order_msg_date {
  display: block;
  margin-bottom: .35rem;
  color: var(--wp--preset--color--bone-faint) !important;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
}

/* The composer. */
.wps_rma_order_msg_react_wrapper .wps_order_messages,
.wps_rma_order_msg_react_wrapper textarea,
.wps_rma_order_msg_react_wrapper input[type="text"] {
  width: 100%;
  min-height: var(--mb-control-h);
  padding: .85rem 1.1rem;
  border: var(--mb-ring) solid var(--wp--preset--color--line) !important;
  border-radius: var(--mb-radius-md);
  background-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--bone) !important;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.wps_rma_order_msg_react_wrapper :is(textarea, input):focus {
  outline: none;
  border-color: var(--wp--preset--color--gold) !important;
  box-shadow: var(--mb-shadow-focus);
}

.wps_rma_order_msg_react_wrapper ::placeholder {
  color: var(--wp--preset--color--bone-faint);
  opacity: 1;
}

/* Send: the action, so the gradient, matching the refund submit. */
.wps_rma_order_msg_react_wrapper .wps-order-msg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  min-height: var(--mb-control-h);
  padding: .8rem 1.4rem !important;
  border: 0 !important;
  border-radius: var(--mb-radius-pill) !important;
  background: var(--mb-gold-gradient) !important;
  color: var(--wp--preset--color--ink) !important;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--mb-shadow-glow);
  transition: transform var(--mb-base) var(--mb-ease), box-shadow var(--mb-base) var(--mb-ease), filter var(--mb-fast) var(--mb-ease);
}

.wps_rma_order_msg_react_wrapper .wps-order-msg-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.wps_rma_order_msg_react_wrapper .wps-order-msg-btn :is(svg, path) {
  fill: currentColor;
  stroke: currentColor;
}

/* The composer row sits under the transcript rather than against the edge. */
.wps_rma_order_msg_react_wrapper .wps_o_m-label-wrap,
.wps_rma_order_msg_react_wrapper .wps_order_msg_attach_container {
  display: flex;
  align-items: flex-end;
  gap: .85rem;
  margin-top: var(--wp--preset--spacing--30, 1.25rem);
}

.wps_rma_order_msg_react_wrapper :is(.wps_order_msg_att-wrap, .wps-order-msg-attachment-wrapper, .wps_order_msg_single_attachment) {
  border-color: var(--wp--preset--color--line) !important;
  background: none !important;
  color: var(--wp--preset--color--bone-dim) !important;
}

.wps_rma_order_msg_react_wrapper .wps_order_msg_attachment_file_name {
  color: var(--wp--preset--color--bone-dim) !important;
  font-size: var(--wp--preset--font-size--x-small);
}

.wps_rma_order_msg_react_wrapper .wps_order_msg_attachment_thumbnail {
  border: var(--mb-ring) solid var(--wp--preset--color--line);
  border-radius: var(--mb-radius-sm);
}

.wps_rma_order_msg_react_wrapper .wps_rma_notification {
  border: var(--mb-ring) solid var(--wp--preset--color--gold-deep) !important;
  border-radius: var(--mb-radius-md);
  background: rgba(205, 161, 60, .07) !important;
  color: var(--wp--preset--color--gold-light) !important;
}

@media (max-width: 600px) {
  .wps_rma_order_msg_react_wrapper .wps_order_msg_sub_container {
    padding: var(--wp--preset--spacing--30, 1.25rem);
  }

  .wps_rma_order_msg_react_wrapper .wps_order_msg_detail_container {
    max-width: 92%;
  }
}

/* ==========================================================================
   Order details page — the RMA block

   Return Refund and Exchange hooks two buttons and a status panel onto
   woocommerce_order_details_after_order_table, all on stock markup: two grey
   submit inputs stacked one above the other, and a white tab strip whose
   label is white on white. It lands directly under an order table the theme
   already styles, which makes the seam obvious.
   ========================================================================== */

/* ---- The two actions ----------------------------------------------------- */

/* They ship in separate paragraphs, so they stack. Pulling the paragraphs
   inline puts them on one row where they read as a pair of choices. */
.woocommerce-order-details + form,
.woocommerce-MyAccount-content form:has(.wps_rma_view_order),
.woocommerce-MyAccount-content form:has([name="ced_new_return_request"]) {
  display: inline-block;
  margin: 0 .6rem var(--wp--preset--spacing--20, .75rem) 0;
}

.woocommerce-MyAccount-content form p:has(.btn.button) {
  margin: 0;
}

/* Both are utilities, not calls to action. A refund request in particular
   should be available without being encouraged, so neither takes the gradient
   the wallet top-up and the refund submit carry. */
.woocommerce-MyAccount-content input.btn.button,
.woocommerce-MyAccount-content input.wps_rma_view_order,
.woocommerce-MyAccount-content input[name="ced_new_return_request"] {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: .7rem 1.5rem !important;
  border: var(--mb-ring) solid var(--mb-edge) !important;
  border-radius: var(--mb-radius-pill) !important;
  background: none !important;
  color: var(--wp--preset--color--bone-dim) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: var(--wp--preset--font-size--x-small) !important;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color var(--mb-fast) var(--mb-ease), color var(--mb-fast) var(--mb-ease), transform var(--mb-base) var(--mb-ease);
}

.woocommerce-MyAccount-content input.btn.button:hover {
  transform: translateY(-1px);
  border-color: var(--mb-edge-strong) !important;
  color: var(--wp--preset--color--gold-light) !important;
}

/* ---- The refund status panel --------------------------------------------- */

.wps_rma_outer_wrap_info {
  margin-top: var(--wp--preset--spacing--40, 2rem);
  border: var(--mb-ring) solid var(--mb-edge);
  border-radius: var(--mb-radius-lg);
  background: var(--wp--preset--gradient--raised) !important;
  box-shadow: var(--mb-shadow-panel);
  color: var(--wp--preset--color--bone);
  overflow: hidden;
}

/* The tab strip. White on white in stock; here it takes the same treatment as
   the wallet's top-up / statement tabs so the two agree. */
.wps_rma_outer_wrap_info .wps_rma_ul_wrap_info {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface) !important;
  list-style: none;
}

.wps_rma_outer_wrap_info .wps_rma_li_wrap_info {
  margin: 0;
  padding: 0;
  background: none !important;
  list-style: none;
}

.wps_rma_outer_wrap_info .wps_rma_li_wrap_info h2 {
  margin: 0;
  padding: 1rem 1.6rem;
  color: var(--wp--preset--color--bone-faint) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: var(--wp--preset--font-size--x-small) !important;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--mb-fast) var(--mb-ease), background-color var(--mb-fast) var(--mb-ease);
}

.wps_rma_outer_wrap_info .wps_rma_li_wrap_info:hover h2 {
  color: var(--wp--preset--color--bone-dim) !important;
}

.wps_rma_outer_wrap_info .wps_rma_li_wrap_info.active h2 {
  background: var(--wp--preset--color--surface-raised) !important;
  box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--gold);
  color: var(--wp--preset--color--gold-light) !important;
}

/* ---- Panel body ---------------------------------------------------------- */

.wps_rma_outer_wrap_info :is(.wps_rma_refund_info_wrap, .wps_rma_ret_ex_info_wrap, .wps_rma_exchange_info_wrap) {
  padding: var(--wp--preset--spacing--40, 2rem);
  background: none !important;
  color: var(--wp--preset--color--bone);
}

.wps_rma_outer_wrap_info :is(h2, h3) {
  margin: 0 0 .85rem;
  color: var(--wp--preset--color--bone) !important;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
}

.wps_rma_outer_wrap_info p {
  margin: 0 0 1rem;
  color: var(--wp--preset--color--bone-dim);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.7;
}

.wps_rma_outer_wrap_info p:last-child {
  margin-bottom: 0;
}

.wps_rma_outer_wrap_info b {
  color: var(--wp--preset--color--bone);
  font-weight: 500;
}

/* The "no request yet" line is the panel's whole content most of the time, so
   it is centred and quietened rather than left sitting flush like an error. */
.wps_rma_outer_wrap_info .wps_rma_refund_info_wrap > p:only-child {
  margin: 0;
  padding: var(--wp--preset--spacing--30, 1.25rem) 0;
  color: var(--wp--preset--color--bone-faint);
  text-align: center;
}

/* ---- Panel table --------------------------------------------------------- */

.wps_rma_outer_wrap_info table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.wps_rma_outer_wrap_info table :is(th, td) {
  padding: .9rem .5rem;
  border: 0;
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line);
  background: none !important;
  color: var(--wp--preset--color--bone);
  font-size: var(--wp--preset--font-size--small);
  text-align: left;
}

.wps_rma_outer_wrap_info table :is(th, td):last-child {
  text-align: right;
}

.wps_rma_outer_wrap_info table thead th {
  padding-top: 0;
  color: var(--wp--preset--color--bone-faint);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wps_rma_outer_wrap_info table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.wps_rma_outer_wrap_info table .product-total,
.wps_rma_outer_wrap_info table .amount,
.wps_rma_outer_wrap_info .woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

.wps_rma_outer_wrap_info a {
  color: var(--wp--preset--color--gold);
  text-decoration: none;
}

.wps_rma_outer_wrap_info a:hover {
  color: var(--wp--preset--color--gold-light);
}


/* ==========================================================================
   Consistency pass

   Radius, duration and elevation are tokens now, so what is left is the
   behaviour the audit found missing or inconsistent: a header where four
   different kinds of control looked identical, no disabled state anywhere,
   an account column that did not line up with the header above it, and three
   breakpoints for the whole site.
   ========================================================================== */

/* ---- Header ---------------------------------------------------------------
   The row of pills is deliberate and stays as it is. The only thing added is
   a focus ring on the search field, so keyboard users get the same feedback
   the mouse already had.
   ------------------------------------------------------------------------ */

.wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--gold);
  box-shadow: var(--mb-shadow-focus);
}

/* The cart count is a figure, so it lines up like every other figure. */
.wc-block-mini-cart__quantity-badge {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Disabled and busy states --------------------------------------------
   There were 52 hover rules and no disabled rule anywhere. Both the refund
   form and the wallet top-up submit over AJAX, so the button stays fully live
   while the request is in flight and people submit twice.
   ------------------------------------------------------------------------ */

.wp-site-blocks :is(button, input[type="submit"], input[type="button"], .wp-element-button, .button):disabled,
.wp-site-blocks :is(button, .wp-element-button, .button)[aria-disabled="true"],
.wps_rma_refund_form_wrapper :is(input[type="submit"], input[type="button"]):disabled,
.woo-wallet-my-wallet-container :is(button, input[type="submit"], .button):disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.wp-site-blocks :is(input, textarea, select):disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* The plugins toggle a spinner sibling rather than a state on the button, so
   the button is dimmed for as long as that spinner is showing. */
.wps_rma_refund_form_wrapper:has(.wps_rma_return_notification[style*="block"]) input[type="submit"] {
  opacity: .45;
  pointer-events: none;
}

/* ---- Account: straighten the layout spine --------------------------------
   The account templates nest three constrained containers — main > group >
   entry-content — and each re-applies max-width and auto margins. The result
   was an account column narrower than, and indented against, the header and
   footer it sits between. Alignment is the cheapest signal of care a page
   has, so the inner two stop constraining and inherit the outer container.
   ------------------------------------------------------------------------ */

.woocommerce-account .entry-content.is-layout-constrained,
.woocommerce-account .wp-block-post-content.is-layout-constrained,
.woocommerce-account .woocommerce.is-layout-constrained {
  max-width: none;
}

/* The nav's own spacing and gold links are the theme's and stay as they are;
   only the container alignment above needed correcting. */

/* ---- Account tables -------------------------------------------------------
   Orders and Downloads are stock WooCommerce tables that nothing here had
   touched, so they kept the browser default: every heading flush left,
   whatever sits underneath it. Actions is the one that shows — a left-aligned
   word floating beside a centred-looking pair of buttons — but Total has the
   same fault pointing the other way, a column of figures headed from the far
   side of the cell.

   Headings are moved onto their content rather than content onto headings.
   Below 768px WooCommerce restacks these tables into label-and-value rows and
   drops the thead entirely, so there is no heading left to line up with and
   these rules would only fight its layout; they stay above that breakpoint.
   ------------------------------------------------------------------------ */

.woocommerce-orders-table :is(th, td),
.woocommerce-table--order-downloads :is(th, td) {
  vertical-align: middle;
}

/* Figures take the tabular face wherever they appear, which is not a
   breakpoint question. */
.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table__cell-order-total {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 769px) {
  /* Actions: the heading sits over the buttons. */
  .woocommerce-orders-table__header-order-actions,
  .woocommerce-orders-table__cell-order-actions,
  .woocommerce-table--order-downloads .download-actions {
    text-align: center;
  }

  /* Two actions in one cell are a row of two, not two words that touch. */
  .woocommerce-orders-table__cell-order-actions .woocommerce-button + .woocommerce-button {
    margin-left: .4rem;
  }

  /* Total: heading and figures share a right edge. */
  .woocommerce-orders-table__header-order-total,
  .woocommerce-orders-table__cell-order-total {
    text-align: right;
  }

  /* Status is a short word in a wide column; centring it keeps the row from
     reading as three left edges and a gap. */
  .woocommerce-orders-table__header-order-status,
  .woocommerce-orders-table__cell-order-status {
    text-align: center;
  }
}

/* ---- WooCommerce classic form fields ---------------------------------------
   Found by crawling the live site: every field on Login, Register and Lost
   Password rendered as a white box with black text on the ink page. Not a
   missing rule — the rule above is there and matches. It loses:

     .wp-site-blocks input[type="text"]                    0,2,0   theme
     .woocommerce form .form-row .input-text               0,3,0   woocommerce

   and WooCommerce's sets `background-color: var(--wc-form-color-background,
   #fff)` and `color: var(--wc-form-color-text,#000)`. Those two custom
   properties are referenced with fallbacks and never declared anywhere in
   woocommerce.css, which is WooCommerce saying the theme should declare them.
   So the colours are fixed at the variable rather than by out-specifying, and
   the fix reaches every classic Woo form at once instead of the three this
   crawl happened to see.

   Only the metrics need a selector, because WooCommerce hardcodes
   `padding:.5em` and `height:auto` and those are not exposed as variables.
   One class deeper than the rule it is correcting, so it does not depend on
   which sheet loads last.
   ------------------------------------------------------------------------ */

:root {
  --wc-form-color-background: var(--wp--preset--color--surface-raised);
  --wc-form-color-text: var(--wp--preset--color--bone);
  --wc-form-border-color: var(--wp--preset--color--line-control);
  --wc-form-border-width: var(--mb-ring);
  --wc-form-border-radius: var(--mb-radius-sm);
}

.wp-site-blocks .woocommerce form .form-row .input-text,
.wp-site-blocks .woocommerce form .form-row select,
.wp-site-blocks .woocommerce form .form-row textarea {
  min-height: var(--mb-control-h);
  padding: .75rem .95rem;
  font-size: 1rem; /* 16px stops iOS Safari zooming the page on focus */
  line-height: 1.4;
}

/* WooCommerce focuses to `currentColor`, which on this page is bone — a white
   ring. The rest of the site focuses to gold with the shared shadow. */
.wp-site-blocks .woocommerce form .form-row .input-text:focus,
.wp-site-blocks .woocommerce form .form-row select:focus,
.wp-site-blocks .woocommerce form .form-row textarea:focus {
  border-color: var(--wp--preset--color--gold);
  box-shadow: var(--mb-shadow-focus);
}

/* Tell the browser this is a dark document.

   `accent-color` alone was not enough: it tints a tick once it is *checked*,
   and an unchecked box is drawn by the user agent, which had no reason to
   think the page was dark and painted a white square on ink. `color-scheme`
   is the switch for that, and it also picks up the things nothing in this
   sheet reaches — scrollbars, the password reveal control, spinners and date
   pickers. One declaration, and every native control stops being the one
   light object on the page.

   Safe in the editor as well: WordPress renders the canvas in an iframe, so
   this applies to the previewed page and not to wp-admin around it. */
:root {
  color-scheme: dark;
}

/* With the scheme set, this only has to carry the brand tint and the size. */
.wp-site-blocks input[type="checkbox"],
.wp-site-blocks input[type="radio"] {
  accent-color: var(--wp--preset--color--gold);
  width: 1rem;
  height: 1rem;
  margin-right: .15rem;
  vertical-align: middle;
}

/* The tick and its words sat on two different centres. */
.wp-site-blocks .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.wp-site-blocks .woocommerce-form__label-for-checkbox input {
  margin: 0;
}

/* Log in and Remember me shared a top edge rather than a centre, because the
   button is floated and half again as tall as the label beside it. The row
   becomes a flex line so they agree on a middle; `order` keeps the button on
   the left, where the float had put it, rather than letting source order
   quietly swap the two. */
.wp-site-blocks .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wp-site-blocks .woocommerce-form-login__submit {
  order: -1;
  float: none;
}

/* ---- Login and Register panels --------------------------------------------
   The two are floated, so they cannot agree on a height: Login ended 51px
   short of Register and the two bordered panels stopped at different lines.
   Floats become a flex row, which is all it takes for both to reach the same
   bottom edge. The basis keeps the 480 / 40 / 480 the floats produced, and
   wrapping restores the stacked layout on a narrow screen.
   ------------------------------------------------------------------------ */

.woocommerce-account .u-columns.col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

/* The float layout carried a clearfix, and `content: " "` with `display:
   table` does not stay decorative once the parent is a flex container — both
   pseudo-elements blockify into flex items. Left alone they added two items
   and a third gap, which pulled the columns 40px in from the page margin and
   took 40px off each. There are no floats left to clear. */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
  display: none;
}

.woocommerce-account .u-columns.col2-set > .u-column1,
.woocommerce-account .u-columns.col2-set > .u-column2 {
  float: none;
  width: auto;
  flex: 1 1 320px;
}

/* ---- Empty cart cross-sell ------------------------------------------------
   The empty-cart panel centres its heading and its artwork, then hands off to
   a product grid that is a four-column flex row starting at flex-start. With
   one product in the catalogue that put "New in stock" in the middle of the
   page and the only card hard against the left edge, under nothing.

   Centred only here. On the shop and category archives a grid should start at
   the left edge, and a part-filled last row there is correct as it is.
   ------------------------------------------------------------------------ */

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  justify-content: center;
}

/* ---- Footer columns -------------------------------------------------------
   Information is a page-list block, so it is a <ul> carrying the browser's
   40px indent. The other two columns are paragraphs at zero. The theme
   removed the bullets but not the space they left, so one column's links sat
   40px right of its heading while the other two were flush with theirs.
   ------------------------------------------------------------------------ */

.mb-footer-list {
  padding-left: 0;
  list-style: none;
}

/* ---- WooCommerce notice banners -------------------------------------------
   Found on the live site with a customer session. Every Store-API notice —
   "No downloads available yet." on the Downloads tab, "Invalid order." on a
   bad order URL, and everything the cart and checkout raise — renders as a
   pale pastel card with near-black text:

     .is-info     rgb(244, 248, 255)
     .is-error    rgb(255, 240, 240)
     link inside  rgb(47, 47, 47)

   On the ink page that is the brightest object on screen, and the link inside
   it is unreadable. These are the same panels the refund form's validation
   alert already uses further up this file, so they take the same treatment:
   the raised surface, a ring, and a heavier left edge to carry the state.
   ------------------------------------------------------------------------ */

.wp-site-blocks .wc-block-components-notice-banner {
  border: var(--mb-ring) solid var(--mb-edge);
  border-left-width: 3px;
  border-radius: var(--mb-radius-md);
  background-color: var(--wp--preset--color--surface-raised);
  color: var(--wp--preset--color--bone);
}

/* The state icons ship their own blue and red fills. Taking currentColor
   keeps them inside the palette without hiding them. */
/* The state colour is a `background-color` on the <svg> itself — a solid blue
   or red disc behind the glyph — not a fill. wc-blocks.css is the one
   stylesheet that loads *after* this one, so matching its
   `.wc-block-components-notice-banner.is-info > svg` depth would tie and lose
   on order. The state classes are named here to win outright. */
.wp-site-blocks .wc-block-components-notice-banner svg,
.wp-site-blocks .wc-block-components-notice-banner.is-info svg,
.wp-site-blocks .wc-block-components-notice-banner.is-error svg,
.wp-site-blocks .wc-block-components-notice-banner.is-success svg,
.wp-site-blocks .wc-block-components-notice-banner.is-warning svg {
  background: none;
  fill: var(--wp--preset--color--gold);
}

/* Error and warning earn a brighter edge; info and success stay quiet. The
   site has no red/green vocabulary outside the wallet's credit and debit, and
   introducing one here for a "no downloads yet" message would be shouting. */
.wp-site-blocks .wc-block-components-notice-banner.is-error,
.wp-site-blocks .wc-block-components-notice-banner.is-warning {
  border-left-color: var(--wp--preset--color--gold-light);
}

/* The one !important in this section, and it is the removable kind's
   opposite. WooCommerce sets
   `.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ... { color: #2f2f2f !important }`,
   so this is not a selector that lost on specificity — it is a declaration
   that cannot be outranked by any selector. Matching it is the only move.
   Everything else in this file that carries !important is the other kind and
   is still worth removing; this one is not. */
.wp-site-blocks .wc-block-components-notice-banner :is(a, .wc-forward, .wp-element-button) {
  color: var(--wp--preset--color--gold-light) !important;
}

/* ---- Mini-cart drawer -----------------------------------------------------
   Two things, both only visible once the drawer is open.

   The panel's own background is #fff. The contents sit on top and are opaque,
   so a customer never sees it — but a logged-in staff member does: the admin
   bar pushes the contents down 32px and leaves a white band across the top of
   the drawer. Painting the panel itself removes the band and the risk.

   The close control is a `.wc-block-components-button`, so it collected the
   theme's button chrome — a gold ring, 13.6px of padding and the control
   min-height — which inflated a 24px icon into a 53px bordered box wedged
   into the corner with its top edge cut off. It is an icon, not a call to
   action, so the chrome comes back off.

   The clipping is the padding's doing, but only indirectly: WooCommerce pairs
   its own `padding: 13.6px` with `margin: -13.6px`, so the hit area grows
   without the icon moving. Dropping the padding and leaving that margin
   behind pulls the button up and out by 13.6px against `top: 12px` — which is
   the -2px it was sitting at. Both have to go together.
   ------------------------------------------------------------------------ */

.wc-block-mini-cart__drawer {
  background-color: var(--wp--preset--color--ink);
}

.wc-block-components-drawer__close.wc-block-components-button {
  width: 2.5rem;
  min-width: 0;
  height: 2.5rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--mb-radius-sm);
  background: none;
  box-shadow: none;
  color: var(--wp--preset--color--bone-dim);
}

.wc-block-components-drawer__close.wc-block-components-button:hover {
  background: none;
  color: var(--wp--preset--color--gold-light);
  transform: none;
}

/* ---- TeraWallet transactions — text colour --------------------------------
   The plugin colours this table for a white panel and wins on specificity:

     .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-cell   0,3,0  plugin
     .woo-wallet-my-wallet-container .ww-txn-cell                 0,2,0  theme

   so the dates came out #667085, the descriptions #2c3e50 and the column
   headings #98a2b3 — slate greys on near-black, measured on the live site.
   The amounts were the only column reading correctly, and only because they
   carry an !important further up. Matching the plugin's depth and adding the
   site wrapper wins the fight structurally rather than with another
   !important.
   ------------------------------------------------------------------------ */

.wp-site-blocks .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-cell {
  color: var(--wp--preset--color--bone);
}

.wp-site-blocks .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-cell--date,
.wp-site-blocks .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-cell--desc {
  color: var(--wp--preset--color--bone-dim);
}

.wp-site-blocks .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-row--head .ww-txn-cell,
.wp-site-blocks .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-cell::before {
  color: var(--wp--preset--color--bone-faint);
}

/* The type badge truncated to "Partial pa…": the label needs 112px and the
   column gave it 94. Now that the date is numeric it no longer needs its
   share, so the two swap a little width. Re-declared in full because a grid
   template cannot be adjusted one track at a time.

   The track floor is the *text* width plus the cell's own 21px of horizontal
   padding: 82px of "09/08/2026" needs a 104px track, not an 82px one. Sizing
   it from the text alone put it back into overflow by 13px, which the
   regression pass caught and reading the number would not have. */
.wp-site-blocks .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-row {
  grid-template-columns: minmax(108px, .5fr) minmax(0, 2fr) minmax(138px, 1fr) minmax(96px, .8fr);
}

/* ---- Product tabs ---------------------------------------------------------
   The Description tab on a product page was never themed: stock WooCommerce
   draws it as a white pill with #515151 text and a lilac border, rounded at
   the top, sitting on the ink page under the product. It was also 5px too
   narrow for its own label, so "Description" clipped inside it.

   Rebuilt in the language the wallet's Topup/Statement strip already uses — a
   flat row, an uppercase label, and the active one marked by a gold underline
   rather than by a raised white card. WooCommerce draws the pill's rounded
   corners with `li::before` and `li::after`, so those go too.

   On the winning selector: WooCommerce fills the tab from
   `.woocommerce div.product .woocommerce-tabs ul.tabs li.active` — five
   classes, three elements. Prefixing that with `.wp-site-blocks` does not
   work, and it is worth writing down why: on this template `.woocommerce` is
   a class on <body>, so it is an *ancestor* of `.wp-site-blocks`, never a
   descendant, and the selector matches nothing. `.mb-product-tabs` is the
   theme's own class on the product-details wrapper and sits inside that
   chain, so adding it clears the fight structurally instead of by
   !important or by relying on which stylesheet loads last.
   ------------------------------------------------------------------------ */

.mb-product-tabs .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 var(--wp--preset--spacing--30, 1.25rem);
  padding: 0;
  border-bottom: var(--mb-ring) solid var(--wp--preset--color--line);
  list-style: none;
}

.mb-product-tabs .woocommerce-tabs ul.tabs::before,
.mb-product-tabs .woocommerce-tabs ul.tabs li::before,
.mb-product-tabs .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce div.product .mb-product-tabs .woocommerce-tabs ul.tabs li,
.woocommerce div.product .mb-product-tabs .woocommerce-tabs ul.tabs li.active {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.woocommerce div.product .mb-product-tabs .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--wp--preset--color--gold);
}

.woocommerce div.product .mb-product-tabs .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .7rem 1.1rem;
  color: var(--wp--preset--color--bone-dim);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--mb-fast) var(--mb-ease);
}

.woocommerce div.product .mb-product-tabs .woocommerce-tabs ul.tabs li:hover a,
.woocommerce div.product .mb-product-tabs .woocommerce-tabs ul.tabs li.active a {
  color: var(--wp--preset--color--gold-light);
}

/* ---- Wallet top-up row ----------------------------------------------------
   Add Funds sat 3px from the amount field - the gap was the whitespace between
   two inline-blocks, not a decision - and the two were different heights, 50
   against 48, because each carried its own baseline-nudging margin
   (`0 0 25px` on the field, `10.72px 0 0` on the button).

   The row becomes a flex line, which gives the pair a real gap and lets
   `stretch` settle the height difference rather than a hardcoded number. The
   label is a child of the same container, so it is pushed onto its own line
   with a full-width basis; the two hidden inputs are `display: none` and never
   become flex items.
   ------------------------------------------------------------------------ */

.wp-site-blocks .woo-wallet-my-wallet-container .woo-wallet-add-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem .75rem;
}

.wp-site-blocks .woo-wallet-my-wallet-container .woo-wallet-add-amount > label {
  flex: 1 1 100%;
  margin: 0;
}

/* Held near the width it already had rather than let to fill the panel: a
   field for "0.00" that runs the width of the card looks like a mistake. */
.wp-site-blocks .woo-wallet-my-wallet-container .woo-wallet-add-amount .woo-wallet-balance-to-add {
  flex: 0 1 22rem;
  min-width: 0;
  margin: 0;
}

.wp-site-blocks .woo-wallet-my-wallet-container .woo-wallet-add-amount .woo-add-to-wallet {
  flex: 0 0 auto;
  margin: 0;
}

/* ---- Responsive ----------------------------------------------------------
   Three max-width queries covered the whole site, none of them for the
   header or the account split, and none for the data tables the plugin pages
   are built from.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  /* The account two-column collapses rather than squeezing the content
     column to nothing. */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    max-width: none;
    margin-bottom: var(--wp--preset--spacing--40, 2rem);
  }

  .woocommerce-account .woocommerce {
    display: block;
  }

  .woo-wallet-my-wallet-container .woo-wallet-nav-tabs {
    flex-direction: column;
  }

  .woo-wallet-my-wallet-container .woo-wallet-nav-item-wrapper + .woo-wallet-nav-item-wrapper .woo-wallet-nav-tab {
    border-left: 0;
    border-top: var(--mb-ring) solid var(--wp--preset--color--line);
  }
}

@media (max-width: 782px) {
  /* Header: the four controls wrap onto their own row under the wordmark
     instead of crushing the search field. */
  .mb-header-inner {
    row-gap: var(--wp--preset--spacing--30, 1.25rem);
  }

  .mb-header-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .mb-header-actions .mb-search {
    flex: 1 1 100%;
    order: -1;
  }
}

@media (max-width: 600px) {
  /* Figures in a fixed table cannot reflow, so the wide ones scroll inside
     their panel rather than widening the document. */
  .woo-wallet-my-wallet-container .ww-stmt-tablewrap,
  .woo-wallet-my-wallet-container .ww-txn-table,
  .wps_rma_outer_wrap_info table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .woo-wallet-my-wallet-container .woo-wallet-stats-grid {
    grid-template-columns: 1fr;
  }

  .woo-wallet-my-wallet-container .ww-stmt-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .woo-wallet-my-wallet-container .ww-stmt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* Both plugin panels lose the generous inset that only works on a desk. */
  .woo-wallet-my-wallet-container :is(.woo-wallet-form-wrapper, .woo-wallet-statement),
  .wps_rma_outer_wrap_info :is(.wps_rma_refund_info_wrap, .wps_rma_ret_ex_info_wrap) {
    padding: var(--wp--preset--spacing--30, 1.25rem);
  }

  .woo-wallet-my-wallet-container .woo-wallet-balance-card {
    padding: var(--wp--preset--spacing--40, 2rem) var(--wp--preset--spacing--30, 1.25rem);
  }

  /* The two order actions stack and go full width so neither is a small
     target next to the other. */
  .woocommerce-MyAccount-content input.btn.button {
    width: 100%;
  }

  .woocommerce-MyAccount-content form:has(.wps_rma_view_order),
  .woocommerce-MyAccount-content form:has([name="ced_new_return_request"]) {
    display: block;
    margin-right: 0;
  }
}