/*
 * Cart, checkout, order confirmation, and account pages.
 *
 * WooCommerce ships the cart and checkout as blocks. Its own stylesheet
 * provides the layout skeleton; everything here is the theme's surface on top,
 * built from the same semantic tokens as the rest of the site. No --brand-*
 * property is read here.
 */

/*
 * WooCommerce's own class names are not all kebab-case (.woocommerce-MyAccount-content,
 * .woocommerce-EditAccountForm, and others). They cannot be renamed from a theme, so
 * the naming rule is off for this file. Classes the theme introduces are kebab-case.
 */
/* stylelint-disable selector-class-pattern */

/*
 * The pay-for-order page is WooCommerce's classic checkout/form-pay.php, which
 * names its form, payment section, and button by id (#order_review, #payment,
 * #place_order). Those ids are WooCommerce's too.
 */
/* stylelint-disable selector-id-pattern */

/* stylelint-disable no-descending-specificity */

/* ---------- Page frame ---------- */

/* Commerce pages are interfaces, not prose, so the reading measure is dropped. */
.woocommerce-cart .content-page .page-content,
.woocommerce-checkout .content-page .page-content,
.woocommerce-account .content-page .page-content {
  max-width: none;
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: none;
  margin: 0;
}

.commerce-head {
  padding-block: var(--space-7) var(--space-6);
}

.commerce-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ---------- Shared commerce surfaces ---------- */

.commerce-panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-alt);
}

.commerce-note {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* ---------- Cart and checkout: two columns ---------- */

.wc-block-components-sidebar-layout,
.woocommerce-order-pay #order_review {
  gap: var(--space-8);
  align-items: start;
}

.wc-block-components-main {
  padding-right: 0;
}

.wc-block-components-sidebar {
  padding-left: 0;
}

@media (width >= 900px) {
  .wc-block-components-sidebar-layout,
  .woocommerce-order-pay #order_review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  }

  .wc-block-components-sidebar-layout .wc-block-components-main,
  .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    flex: none;
    width: auto;
    max-width: none;
  }
}

/* ---------- Order summary panel ---------- */

.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block,
.woocommerce-order-pay #order_review > .shop_table {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-alt);
}

.wc-block-components-sidebar .wc-block-cart__totals-title,
.wc-block-components-sidebar .wc-block-components-checkout-order-summary__title,
.wc-block-components-sidebar .wc-block-components-checkout-order-summary__title-text {
  padding: 0;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.wc-block-components-sidebar .wc-block-cart__totals-title {
  padding-bottom: var(--space-4);
}

.wc-block-components-totals-wrapper {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.wc-block-components-totals-wrapper:first-child {
  padding-top: 0;
  border-top: 0;
}

.wc-block-components-totals-wrapper::after {
  display: none;
}

.wc-block-components-totals-item {
  align-items: baseline;
  font-size: var(--text-sm);
}

.wc-block-components-totals-item__label {
  color: var(--color-text-muted);
}

.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.wc-block-components-totals-item__description {
  width: 100%;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.wc-block-components-totals-footer-item {
  padding-top: var(--space-1);
  font-size: var(--text-md);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--color-text);
  font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
  font-size: var(--text-md);
  font-weight: 500;
}

/* ---------- Shipping progress and delivery estimates ---------- */

/*
 * One quiet line in the order summary. No banner, badge, countdown, or upsell:
 * the plan asks for progress stated plainly and confirmed plainly.
 */
.shipping-note {
  display: block;
  padding-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.shipping-note[data-qualified="true"] {
  color: var(--color-status-success);
}

.shipping-note .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.delivery-estimate {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ---------- Cart line items ---------- */

.wc-block-cart-items {
  border-collapse: collapse;
}

.wc-block-cart-items__header {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wc-block-cart-items__row td {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.wc-block-cart-items__row:first-of-type td {
  border-top: 0;
}

.wc-block-cart-item__image {
  width: 96px;
  padding-right: var(--space-4);
}

.wc-block-cart-item__image img {
  width: 96px;
  height: 120px;
  border-radius: var(--radius-data);
  background: var(--color-surface-alt);
  object-fit: cover;
}

.wc-block-cart-item__wrap > * {
  margin-bottom: var(--space-2);
}

.wc-block-components-product-name {
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) {
  .wc-block-components-product-name:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 0.26em;
  }
}

/* The line total carries the price. The per-item price repeats it at full size. */
.wc-block-cart-item__prices {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value {
  font-size: var(--text-sm);
  font-weight: 400;
}

.wc-block-components-product-metadata {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wc-block-components-product-metadata__description p:empty {
  display: none;
}

.wc-block-cart-item__total {
  text-align: right;
  vertical-align: top;
}

.wc-block-cart-item__total .wc-block-components-product-price__value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* ---------- Checkout order summary items ---------- */

.wc-block-components-order-summary__content {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.wc-block-components-order-summary-item {
  padding: 0;
  border: 0;
}

.wc-block-components-order-summary-item .wc-block-components-product-name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.wc-block-components-order-summary-item__individual-prices {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/*
 * The quantity on the thumbnail's corner is set like the header cart count.
 * WooCommerce fills the badge with its text colour and paints the number in its
 * own base colour, so these rules are qualified by the block wrapper to outrank it.
 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
  padding: 0 var(--space-1);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-data);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
  padding: 0;
  color: inherit;
}

.wc-block-components-product-details {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ---------- Quantity discount lines ---------- */

/*
 * commerce.js adds .has-quantity-discount to a line priced down by a quantity
 * tier, and "Quantity discount 5%" after a line break in its price. The catalog
 * price is struck through in the line's own money style, then the lower price
 * in the text colour, then the note on its own line with 4 px above and below.
 * The blocks' sale badge is hidden on these lines only: the struck-through
 * price already says it.
 */
.has-quantity-discount .wc-block-components-sale-badge {
  display: none;
}

/*
 * The note's line box is 12 px text with 4 px above and below. The cart block
 * sets its price as a flex row, which would put the note beside the prices.
 */
.wc-block-cart-items .wc-block-cart-items__row.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-product-price,
.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-order-summary-item__individual-prices {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: calc(var(--text-xs) + 2 * var(--space-1));
  white-space: pre-line;
}

.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-product-price__regular,
.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-product-price__regular {
  margin: 0;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted {
  margin: 0 0 0 6px;
  color: var(--color-text);
  text-decoration: none;
}

/*
 * In the cart, the note sits as far below the prices as the item's other
 * lines sit apart. The cart block zeroes these margins with a heavier selector.
 */
.wc-block-cart-items__row.has-quantity-discount .wc-block-cart-item__prices {
  margin-bottom: var(--space-1);
}

.wc-block-cart-items .wc-block-cart-items__row.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-product-price__regular {
  margin: 0 0 var(--space-3);
}

.wc-block-cart-items .wc-block-cart-items__row.has-quantity-discount .wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted {
  margin: 0 0 var(--space-3) 6px;
}

/* ---------- Quantity control ---------- */

.wc-block-components-quantity-selector {
  width: auto;
  min-width: 112px;
  max-width: 128px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.wc-block-components-quantity-selector::after {
  display: none;
}

.wc-block-components-quantity-selector__input {
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.wc-block-components-quantity-selector__button {
  min-width: 36px;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  opacity: 1;
}

@media (hover: hover) {
  .wc-block-components-quantity-selector__button:hover:not(:disabled) {
    color: var(--color-text);
    background: var(--color-surface-alt);
  }
}

.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-icon {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 0.26em;
}

@media (hover: hover) {
  .wc-block-cart-item__remove-link:hover,
  .wc-block-cart-item__remove-icon:hover {
    color: var(--color-text);
  }
}

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

.wc-block-components-button:not(.is-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-structure);
  border-radius: var(--radius-control);
  background: var(--color-structure);
  color: var(--color-on-structure);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease);
}

@media (hover: hover) {
  .wc-block-components-button:not(.is-link):hover {
    background: color-mix(in srgb, var(--color-structure) 82%, var(--color-text));
    color: var(--color-on-structure);
    text-decoration: none;
  }
}

.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link).is-disabled {
  border-color: var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.wc-block-components-button__text {
  text-decoration: none;
}

.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.woocommerce-order-pay #place_order {
  width: 100%;
}

/*
 * On narrow screens WooCommerce pins the checkout button over the page, where
 * it covers the order total. The cart here is short and the page asks for
 * minimal distractions, so the button stays in the flow at every width.
 *
 * WooCommerce prints its block styles when the block renders, after this
 * stylesheet, so these rules are qualified by the block wrapper to outrank it.
 */
.wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky {
  position: static;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky::before {
  display: none;
}

.wc-block-components-button.is-link,
.wc-block-components-panel__button {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
}

.wc-block-components-panel__button {
  padding: 0;
}

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

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-blocks-components-select__select,
.wc-block-components-combobox-control input.components-combobox-control__input {
  min-height: 52px;
  padding: var(--space-5) var(--space-4) var(--space-2);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label,
.wc-block-components-combobox-control label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wc-block-components-text-input.is-active label,
.wc-blocks-components-select__label {
  font-size: var(--text-xs);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  box-shadow: none;
}

.wc-block-components-validation-error {
  color: var(--color-status-error);
  font-size: var(--text-xs);
}

.wc-block-components-checkbox__input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-data);
  background: var(--color-surface);
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
  border-color: var(--color-structure);
  background: var(--color-structure);
}

.wc-block-components-checkbox__label {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/*
 * WooCommerce scopes its control styles under a wrapper class
 * (.wc-block-components-form, .wc-block-components-checkbox, and so on), so
 * the bare rules above lose to them. These repeat WooCommerce's selectors to
 * put the theme's color, border, and radius back. They leave size and
 * padding alone: WooCommerce positions its floating labels against its own.
 */
:root {
  /* WooCommerce draws every cart and checkout divider with this property. */
  --wc-separator-color: var(--color-border);
}

.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="url"],
.wc-blocks-components-select .wc-blocks-components-select__select {
  border-color: var(--color-control-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
}

.wc-block-components-form .wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="number"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="password"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="url"]:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border-color: var(--color-control-border);
  color: var(--color-text);
}

.wc-block-components-form .wc-block-components-text-input label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wc-blocks-components-select .wc-blocks-components-select__container {
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.wc-blocks-components-select .wc-blocks-components-select__expand {
  fill: var(--color-text-muted);
}

.wc-block-components-textarea {
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.wc-block-components-textarea::placeholder {
  color: var(--color-text-muted);
}

.wc-block-components-textarea:not(:placeholder-shown) {
  color: var(--color-text);
}

.wc-block-components-textarea:focus {
  border-color: var(--color-control-border);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  background-color: var(--color-surface);
  box-shadow: none;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  border-color: var(--color-control-border);
  border-radius: var(--radius-data);
  background: var(--color-surface);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  border-color: var(--color-structure);
  background: var(--color-structure);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
  fill: var(--color-on-structure);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus,
.wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.wc-block-components-radio-control .wc-block-components-radio-control__input {
  border-color: var(--color-control-border);
  background: var(--color-surface);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border-color: var(--color-structure);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
  background: var(--color-structure);
}

/* Errors: WooCommerce's red becomes the theme's error status. */
.wc-block-components-form .wc-block-components-text-input.has-error input,
.wc-block-components-form .wc-block-components-text-input.has-error input:active,
.wc-block-components-form .wc-block-components-text-input.has-error input:focus,
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error input:active,
.wc-block-components-text-input.has-error input:focus,
.has-error .wc-blocks-components-select .wc-blocks-components-select__container,
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input,
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:active,
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:focus {
  border-color: var(--color-status-error);
}

.wc-block-components-form .wc-block-components-text-input.has-error input:focus,
.wc-block-components-text-input.has-error input:focus {
  box-shadow: none;
}

.wc-block-components-form .wc-block-components-text-input.has-error label,
.wc-block-components-text-input.has-error label,
.has-error .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-checkbox.has-error,
.wc-block-components-checkbox.has-error a {
  color: var(--color-status-error);
}

.has-error .wc-blocks-components-select .wc-blocks-components-select__expand {
  fill: var(--color-status-error);
}

.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:focus {
  outline-color: var(--color-status-error);
}

/*
 * Buttons: WooCommerce rings a focused button in WordPress blue on every
 * focus, mouse included. The theme shows its own outline for keyboard focus
 * only, as it does everywhere else.
 */
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus {
  box-shadow: none;
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus-visible {
  outline: 2px solid var(--color-structure);
  outline-offset: 2px;
}

/*
 * The research-use acknowledgment is a condition of the order, not an extra.
 * It gets its own panel so it reads as something to confirm deliberately.
 */
.wc-block-components-address-form__coa-records-research-use-acknowledgment {
  padding: var(--space-4);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-alt);
}

.wc-block-components-address-form__coa-records-research-use-acknowledgment .wc-block-components-checkbox__label {
  font-weight: 500;
}

/* ---------- Checkout structure ---------- */

.wc-block-checkout__form .wc-block-components-checkout-step {
  padding: var(--space-6) 0 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.wc-block-checkout__form > .wc-block-components-checkout-step:first-child {
  padding-top: 0;
  border-top: 0;
}

.wc-block-components-checkout-step__container::after {
  display: none;
}

.wc-block-components-checkout-step__heading {
  margin: 0 0 var(--space-2);
}

.wc-block-components-checkout-step__title {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wc-block-components-checkout-step__description {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wc-block-components-checkout-step__content {
  padding-bottom: var(--space-6);
}

/*
 * Shipping methods and payment methods read as one list of choices, so the
 * radio and the label land on the same two columns in both. Payment methods
 * are wrapped in an accordion option, which adds one level of nesting: the
 * outer box carries the inset, the inner option carries the label offset.
 */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option,
.woocommerce-order-pay .wc_payment_method {
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.wc-block-components-radio-control-accordion-option,
.woocommerce-order-pay .wc_payment_method {
  padding-left: var(--space-4);
}

.wc-block-components-radio-control__option + .wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option,
.woocommerce-order-pay .wc_payment_method + .wc_payment_method {
  margin-top: var(--space-2);
}

.wc-block-components-radio-control__input,
.woocommerce-order-pay .wc_payment_method > .input-radio {
  left: var(--space-4);
  accent-color: var(--color-structure);
}

/* The accordion draws the outer box; the option inside it should not repeat one. */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  padding: 0 0 0 var(--space-7);
  border: 0;
  background: none;
}

.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input {
  left: 0;
}

.wc-block-components-radio-control-accordion-content,
.woocommerce-order-pay .payment_box {
  padding: var(--space-2) 0 0 var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* With one payment method WooCommerce hides the radio, so the description lines up with the name. */
.woocommerce-order-pay .wc_payment_method:only-child .payment_box {
  padding-left: 0;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option:has(:checked),
.woocommerce-order-pay .wc_payment_method:has(> .input-radio:checked) {
  border-color: var(--color-structure);
  box-shadow: inset 0 0 0 1px var(--color-structure);
}

.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked {
  box-shadow: none;
}

.wc-block-components-radio-control__label,
.woocommerce-order-pay .wc_payment_method > label {
  font-size: var(--text-base);
  font-weight: 500;
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.wc-block-components-radio-control__description {
  font-family: var(--font-sans);
}

/* ---------- Notices ---------- */

.wc-block-components-notice-banner {
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-status-success);
  border-radius: var(--radius-data);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

/* WooCommerce tints each type with two-class selectors (.is-info and so on),
   so the theme matches them one for one; a bare base rule loses to them.
   Each type keeps its own glyph (check, i, or an inverted i for "!"), drawn
   as a plain outline in the type's color with WooCommerce's disc removed. */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-error {
  --notice-color: var(--color-status-success);

  border-color: var(--color-border);
  border-left-color: var(--notice-color);
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Snackbars (the floating notices, such as "coupon applied") reset the
   border to transparent with a list-scoped selector one class stronger
   still, so they get the same frame again at that weight. */
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner.is-default,
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner.is-success,
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner.is-info,
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner.is-error {
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--notice-color, var(--color-status-success));
  border-radius: var(--radius-data);
  box-shadow: 0 1px 2px var(--color-shadow);
}

.wc-block-components-notice-banner.is-info {
  --notice-color: var(--color-structure);
}

.wc-block-components-notice-banner.is-warning {
  --notice-color: var(--color-status-held);
}

.wc-block-components-notice-banner.is-error {
  --notice-color: var(--color-status-error);
}

.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-warning > svg,
.wc-block-components-notice-banner.is-error > svg {
  align-self: center;
  padding: 0;
  background-color: transparent;
  fill: var(--notice-color, var(--color-text-muted));
}

/* ---------- Empty cart ---------- */

/* Quiet, section-heading-style title; WooCommerce's crying-face icon is a
   mask-image drawn on this pseudo-element, so removing its generated box
   also removes the space it reserved above the title. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  margin-top: 0;
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.wp-block-woocommerce-empty-cart-block .wp-block-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The dotted rule between the empty-cart message and "New in store" is a
   stock WooCommerce decoration; the theme's own datum line fills that role
   elsewhere, so this one is dropped rather than restyled. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  display: none;
}

/* "New in store" heading only: the dotted separator it used to sit below
   is gone, so this keeps a deliberate gap instead of collapsing onto the
   empty-cart message above it. */
.wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  margin-top: var(--space-7);
  margin-bottom: 0;
}

/* The block editor's default button colours do not meet contrast here. */
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) {
  .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
  .wp-block-woocommerce-empty-cart-block .wp-element-button:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }
}

.wp-block-woocommerce-empty-cart-block .wc-block-components-product-price,
.wp-block-woocommerce-empty-cart-block .wp-block-post-title {
  font-size: var(--text-sm);
}

/* "New in store": a compact grid of small cards that echo the shop's own
   product cards (image, name, price, button), rather than the block's
   default single full-width product on narrow screens. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new {
  text-align: left;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--gutter);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

@media (width <= 899px) {
  .wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

/* Scoped through the grid wrapper's two classes, not just the empty-cart
   block, so these outrank WooCommerce's own `.wc-block-grid.has-N-columns
   .wc-block-grid__product` rules (including inside its narrow-viewport
   media queries) whatever order the stylesheets load in. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product {
  flex: none;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product-link {
  display: block;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product-price {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product-add-to-cart {
  margin-top: var(--space-3);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-woocommerce-product-new .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

/* ---------- Order confirmation ---------- */

.order-confirmation {
  display: grid;
  gap: var(--space-7);
  max-width: 720px;
  padding-bottom: var(--space-9);
}

.order-confirmation-lede {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: 1.5;
}

/* Payment instructions printed by the gateway sit between the summary and details. */
.order-confirmation > p {
  max-width: 64ch;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.order-confirmation > p.actions {
  max-width: none;
}

.order-confirmation .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.order-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5) var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-alt);
}

.order-summary-grid dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order-summary-grid dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
}

.order-summary-grid .num,
.order-summary-grid .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/*
 * The order details and address tables are WooCommerce's own markup, shared by
 * the confirmation page and the account "view order" screen.
 */
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2,
.research-use-confirmation__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.order-details,
.woocommerce-table--order-details,
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-order-pay #order_review .shop_table th,
.woocommerce-order-pay #order_review .shop_table td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  text-align: left;
  vertical-align: top;
}

.woocommerce-table--order-details thead th,
.woocommerce-order-pay #order_review .shop_table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.woocommerce-table--order-details .woocommerce-table__product-name a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.woocommerce-table--order-details .product-quantity,
.woocommerce-order-pay #order_review .shop_table strong.product-quantity {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-weight: 400;
}

/*
 * What an order line records about itself, such as a quantity discount. WooCommerce
 * writes it as a list, and runs each value through wpautop, so without this it reads
 * as a bulleted list with the value on a line of its own. It belongs under the product
 * name as one quiet line, the way the delivery estimate sits under the shipping method.
 */
.wc-item-meta {
  margin: 4px 0 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  list-style: none;
}

.wc-item-meta li {
  margin: 0;
}

.wc-item-meta li + li {
  margin-top: 2px;
}

.wc-item-meta-label {
  font-weight: 400;
}

.wc-item-meta p {
  display: inline;
  margin: 0;
}

.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details tfoot th + td,
.woocommerce-order-pay #order_review .shop_table .product-total,
.woocommerce-order-pay #order_review .shop_table td.product-subtotal {
  text-align: right;
}

/* Only amounts are set in mono; a payment method name stays in the text face. */
.woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-order-pay #order_review .shop_table tfoot th {
  color: var(--color-text-muted);
  font-weight: 400;
}

/*
 * WooCommerce prints the payment method after the total, so the last row is not
 * the one to emphasise. The order total is already stated in the summary above.
 */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-order-pay #order_review .shop_table tfoot tr:last-child th,
.woocommerce-order-pay #order_review .shop_table tfoot tr:last-child td {
  border-bottom: 0;
}

.woocommerce-table--order-details tfoot .woocommerce-Price-amount,
.woocommerce-order-pay #order_review .shop_table tfoot .woocommerce-Price-amount {
  color: var(--color-text);
}

.woocommerce-table--order-details tfoot small,
.woocommerce-order-pay #order_review .shop_table tfoot small {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

.woocommerce-customer-details .woocommerce-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  padding: 0;
  margin: 0;
  list-style: none;
}

.woocommerce-customer-details address {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: 1.7;
}

/*
 * The research-use acknowledgment the buyer accepted, printed by the plugin below
 * the addresses. Its heading and box match the address headings and boxes, at the
 * full width of both columns.
 */
.research-use-confirmation {
  margin-top: var(--space-6);
}

.research-use-confirmation__box {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.research-use-confirmation__box p {
  margin: 0;
}

.research-use-confirmation__box .research-use-confirmation__status {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  color: var(--color-status-success);
  font-weight: 500;
}

.research-use-confirmation__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.research-use-confirmation__check {
  stroke: var(--color-surface);
}

/* ---------- Pay for order ---------- */

/*
 * WooCommerce's classic checkout/form-pay.php, reached from an order's Pay action.
 * It takes the checkout's layout: the payment choices, terms, and button on the
 * left, and the order in the summary panel on the right. The rules it shares with
 * the checkout and the order details table are listed with those.
 */
.woocommerce-order-pay #order_review {
  display: grid;
  padding-bottom: var(--space-9);
}

@media (width >= 900px) {
  .woocommerce-order-pay #order_review > .shop_table {
    grid-column: 2;
    grid-row: 1;
  }

  .woocommerce-order-pay #payment {
    grid-column: 1;
    grid-row: 1;
  }
}

/* The panel's padding holds the table away from its border, so cells cannot collapse into it. */
.woocommerce-order-pay #order_review > .shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce-order-pay #order_review .shop_table th:not(:last-child),
.woocommerce-order-pay #order_review .shop_table td:not(:last-child) {
  padding-right: var(--space-4);
}

/* The theme's .product-name is the product page heading; WooCommerce reuses the class on table cells. */
.woocommerce-order-pay #order_review .shop_table .product-name {
  line-height: 1.5;
}

.woocommerce-order-pay #order_review .shop_table td.product-name {
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0;
}

.woocommerce-order-pay #order_review .shop_table .product-quantity {
  white-space: nowrap;
}

/* The shipping method goes under its amount, as the delivery line does at checkout. */
.woocommerce-order-pay #order_review .shop_table .shipped_via {
  display: block;
  margin-top: var(--space-1);
}

.woocommerce-order-pay #payment {
  display: grid;
  gap: var(--space-6);
}

.woocommerce-order-pay .wc_payment_methods {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* The radio sits in the first column; the label and the gateway's description line up after it. */
.woocommerce-order-pay .wc_payment_method {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr);
  align-items: center;
}

.woocommerce-order-pay .wc_payment_method > .input-radio {
  width: 20px;
  height: 20px;
  margin: 0;
}

.woocommerce-order-pay .wc_payment_method > label {
  cursor: pointer;
}

.woocommerce-order-pay .payment_box {
  grid-column: 1 / -1;
}

.woocommerce-order-pay .payment_box p {
  margin: 0;
}

.woocommerce-order-pay #payment > .form-row {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper {
  display: grid;
  gap: var(--space-3);
}

.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
}

.woocommerce-order-pay .woocommerce-privacy-policy-text p {
  margin: 0;
}

/* WooCommerce opens the terms in place when their link is followed. */
.woocommerce-order-pay .woocommerce-terms-and-conditions {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.woocommerce-order-pay .woocommerce-terms-and-conditions > * + * {
  margin-top: var(--space-3);
}

.woocommerce-order-pay .woocommerce-terms-and-conditions h2 {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

/*
 * The label runs as one line of text, so the required mark stays beside the
 * words it follows instead of becoming a flex item of its own. The checkbox
 * sits in the space held open on the left, level with the first line.
 */
.woocommerce-order-pay .woocommerce-form__label-for-checkbox {
  position: relative;
  display: block;
  padding-left: calc(20px + var(--space-3));
  line-height: 1.5;
}

.woocommerce-order-pay .woocommerce-form__input-checkbox {
  position: absolute;
  top: calc((1.5em - 20px) / 2);
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-structure);
}

/* ---------- Account pages ---------- */

.woocommerce-account .woocommerce {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-9);
}

@media (width >= 900px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

@media (hover: hover) {
  .woocommerce-MyAccount-navigation a:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }
}

.woocommerce-MyAccount-navigation .is-active a {
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-weight: 500;
}

/*
 * Narrow screens: the six-row sidebar would push the dashboard content below
 * the first screen, so it becomes one horizontal row of tabs that scrolls
 * sideways instead. The current page drops the sidebar's filled background
 * for an underline in the accent colour, matching the site nav's active
 * marker. assets/js/account-nav.js scrolls the current tab into view on
 * load, since it is not always the first one.
 */
@media (width <= 767px) {
  .woocommerce-MyAccount-navigation {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-border);
  }

  .woocommerce-MyAccount-navigation::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: var(--space-5);
  }

  .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
  }

  .woocommerce-MyAccount-navigation a {
    padding: var(--space-3) 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  .woocommerce-MyAccount-navigation .is-active a {
    background: none;
    border-bottom-color: var(--color-accent);
  }
}

.woocommerce-MyAccount-content > p {
  max-width: 64ch;
  color: var(--color-text-muted);
}

.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.woocommerce-MyAccount-content table.shop_table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.woocommerce-orders-table__cell-order-number a {
  font-family: var(--font-mono);
}

/*
 * Narrow screens: the orders table stacks. WooCommerce puts the column name on
 * each cell as data-title, so each row reads as a labelled list.
 *
 * Scoped to shop_table_responsive, WooCommerce's own marker for tables built
 * for this pattern (the orders list, payment methods), rather than the shared
 * shop_table class. The order-details table carries shop_table too, but not
 * shop_table_responsive: it has no data-title attributes and a product row
 * holds name, quantity, and meta in one cell rather than one value per cell,
 * so stacking it this way scatters that cell instead of labelling it. It gets
 * its own narrow-screen rules further down.
 */
@media (width <= 767px) {
  .woocommerce-MyAccount-content table.shop_table_responsive thead {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive tr {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .woocommerce-MyAccount-content table.shop_table_responsive td {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    padding: 0;
    border: 0;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive td[data-title]::before {
    color: var(--color-text-muted);
    content: attr(data-title);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* The label stays left; the actions sit right, and wrap under it when they run out of room. */
  .woocommerce-MyAccount-content table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .woocommerce-MyAccount-content table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before {
    margin-right: auto;
  }

  /*
   * The total is an amount followed by loose text ("for 6 items"), which a flex
   * row would split into separate items. The label floats instead.
   */
  .woocommerce-MyAccount-content table.shop_table_responsive td.woocommerce-orders-table__cell-order-total {
    display: block;
    text-align: right;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive td.woocommerce-orders-table__cell-order-total::before {
    float: left;
  }
}

.woocommerce-orders-table__cell-order-total,
.woocommerce-orders-table__cell-order-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Account forms ---------- */

.commerce-forms {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-9);
}

@media (width >= 900px) {
  .commerce-forms.commerce-forms-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: start;
  }
}

.commerce-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.commerce-form h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.commerce-form p {
  margin: 0;
}

.commerce-form .form-row {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.woocommerce-form__label-for-checkbox {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-sm);
}

.woocommerce-form-login__rememberme {
  margin: 0;
}

.woocommerce-LostPassword {
  margin: 0;
  font-size: var(--text-sm);
}

.woocommerce-privacy-policy-text {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm .clear + p,
.woocommerce-EditAccountForm fieldset {
  display: grid;
  gap: var(--space-4);
}

.woocommerce-EditAccountForm fieldset {
  padding: var(--space-5) 0 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2) 0 0;
}

.woocommerce-EditAccountForm legend {
  padding: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
}

.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.woocommerce-Address {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-size: var(--text-base);
  font-weight: 600;
}

.woocommerce-Address address {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: 1.6;
}

/* WooCommerce's own form markup uses these element names directly. */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.woocommerce-account textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.woocommerce-account textarea {
  min-height: 96px;
  padding-block: var(--space-3);
}

.woocommerce-account label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
}

.woocommerce-account .required,
.woocommerce-order-pay .required {
  color: var(--color-status-error);
  text-decoration: none;
}

.woocommerce-account .button,
.woocommerce-account button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-structure);
  border-radius: var(--radius-control);
  background: var(--color-structure);
  color: var(--color-on-structure);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .woocommerce-account .button:hover,
  .woocommerce-account button[type="submit"]:hover {
    background: color-mix(in srgb, var(--color-structure) 82%, var(--color-text));
  }
}

/*
 * Order actions, in the orders table and on a single order. WooCommerce prints
 * Pay, View, and Cancel as links back to back, with nothing between them. They
 * are sized to sit in a table row, and spaced when they wrap. Pay stays the
 * primary button; the others take the secondary button's look.
 */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .order-actions-button {
  min-height: 36px;
  margin: var(--space-1) var(--space-2) var(--space-1) 0;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:last-child,
.woocommerce-account .order-actions-button:last-child {
  margin-right: 0;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:not(.pay),
.woocommerce-account .order-actions-button:not(.pay) {
  border-color: var(--color-control-border);
  background: transparent;
  color: var(--color-text);
}

@media (hover: hover) {
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button:not(.pay):hover,
  .woocommerce-account .order-actions-button:not(.pay):hover {
    background: var(--color-surface-alt);
  }
}

/* In the stacked tables the cell's own gap spaces the actions, which keep together. */
@media (width <= 767px) {
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
  .woocommerce-account .order-actions-button {
    margin: 0;
  }

  .woocommerce-MyAccount-content table.shop_table_responsive td:has(> .order-actions-button) {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2);
  }
}

/* ---------- Order details: narrow screens ---------- */

/*
 * An earlier version of these rules switched the table, tbody and tfoot to
 * display: block and each tr to display: flex, to get a stacked, phone-width
 * layout with every value's right edge lined up. That broke the table for
 * assistive tech: WebKit (iOS Safari + VoiceOver) drops the native table,
 * row, and cell roles from a table whose display is changed, so the visually
 * hidden Product/Total column headers lost their association with the
 * values next to a screen reader user, even though the headers were still
 * present and readable on their own.
 *
 * This version keeps table, thead, tbody, tfoot, tr, th, and td at their
 * native table display values at every width, and reaches the same stacked
 * look with ordinary two-column table layout instead: column one (product
 * name with its quantity and meta beneath, or a totals row's label) is left
 * aligned; column two (a line price, or a totals row's value) is right
 * aligned, so every row's value lands on the same right edge because they
 * are genuinely the same table column, not independently sized flex rows.
 * The row padding and the border line between rows both still come from
 * the base order-details rules above, unchanged by width.
 *
 * Auto table layout gives each column a share of the width based on every
 * cell's own content, with no column favoured, so the shipping row's long
 * "$10.00 via Standard Shipping (3-5 business days)" value pulled column
 * two wide enough to push column one below what "BPC-157 - 10 mg × 5",
 * "Quantity discount: 5%", and "Payment method:" need to stay on one line
 * each. Column one is given `width: 100%` instead, the standard way to
 * tell auto layout "this column gets whatever is left over"; column two's
 * price and label cells get `white-space: nowrap` so their own content
 * (never more than a price or a short label) sets column two's width
 * directly rather than leaving it to the layout algorithm. The shipping
 * method note is the one value that must still wrap onto its own line, so
 * `shipped_via`, the `<small>` WooCommerce wraps it in, is reset to
 * `white-space: normal` and does not inherit the nowrap.
 *
 * `.woocommerce-account` is added to the alignment selectors only to
 * outrank the MyAccount-content rules above, which the order-details table
 * also matches (it carries shop_table) and which set a left text-align with
 * one more class than this file's own order-details rules. That is
 * unchanged on desktop; here it is overridden on purpose, the same way the
 * base order-details rules already do with `td:last-child`.
 */
@media (width <= 767px) {
  .woocommerce-account .woocommerce-table--order-details thead {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .woocommerce-account .woocommerce-table--order-details tbody td.product-name,
  .woocommerce-account .woocommerce-table--order-details tfoot > tr > th {
    width: 100%;
  }

  .woocommerce-account .woocommerce-table--order-details tbody td.product-total,
  .woocommerce-account .woocommerce-table--order-details tfoot > tr > td {
    text-align: right;
    white-space: nowrap;
  }

  /* The shipping method note is the one value allowed to wrap, onto its own
     line under the amount, still right-aligned because it stays in the
     right-aligned, nowrap-by-default value cell above; it only opts itself
     back into normal wrapping. */
  .woocommerce-account .woocommerce-table--order-details tfoot .shipped_via {
    white-space: normal;
  }

  /* The Actions row's Pay and Cancel buttons keep their own gap; the cell's
     right alignment above places the pair, which wraps onto its own line
     together when it runs out of room. The general phone-width reset above
     (.order-actions-button { margin: 0 }) is written for the flex-based
     orders table, whose own gap spaces its buttons; it would otherwise
     leave no room between Pay and Cancel here. */
  .woocommerce-account .woocommerce-table--order-details tfoot > tr > td .order-actions-button {
    margin: var(--space-1) 0 var(--space-1) var(--space-2);
  }

  .woocommerce-account .woocommerce-table--order-details tfoot > tr > td .order-actions-button:first-child {
    margin-left: 0;
  }
}

/* ---------- Login ---------- */

.woocommerce-account .woocommerce > h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  display: grid;
  gap: var(--space-4);
  max-width: 460px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-ResetPassword .form-row {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.woocommerce-form-login__rememberme + input + input + button {
  margin-top: var(--space-2);
}

/* WooCommerce injects the reveal button with JavaScript and styles it in its
   own stylesheet, which this theme does not load. It carries a translated
   aria-label, so the label is shown rather than an icon. */
.password-input {
  position: relative;
  display: block;
}

.show-password-input {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 0.26em;
  cursor: pointer;
}

.show-password-input::after {
  content: attr(aria-label);
}

@media (hover: hover) {
  .show-password-input:hover {
    color: var(--color-text);
  }
}

.woocommerce-account .password-input input[type="password"],
.woocommerce-account .password-input input[type="text"] {
  padding-right: 120px;
}

/* ---------- Order status ---------- */

/* WooCommerce marks the order number, date, and status. The browser default
   highlight is not part of this design. */
.woocommerce-account mark,
.order-confirmation mark {
  background: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.order-status,
mark.order-status {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-customer-details h2 {
  margin-top: var(--space-6);
}