/* ==========================================================================
   Tribe Aura — Cart, Checkout, My Account
   --------------------------------------------------------------------------
   RESTYLE, DO NOT RESTRUCTURE.

   Cart and Checkout on this install are WooCommerce BLOCKS (wp:woocommerce/cart
   and wp:woocommerce/checkout), not the classic shortcode templates. That
   matters: the blocks render through React on the client, their markup is not
   a PHP template we can override, and their internal class names are not a
   public API. So this file only adjusts presentation — type, colour, spacing,
   button treatment — through the stable outer `wc-block-*` hooks, and never
   repositions anything or hides structural elements.

   My Account is still the classic `[woocommerce_my_account]` shortcode, so it
   uses the older `woocommerce-*` classes.

   These are Woo's most fragile screens and the money path runs through them:
   a layout change that looks fine empty can break with three items, a coupon
   and a shipping calculator. Light touch on purpose.

   Mobile-first; breakpoints written literally: 480 / 768 / 1024 / 1280.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Shared page shell
   -------------------------------------------------------------------------- */

.woocommerce-cart .ta-main,
.woocommerce-checkout .ta-main,
.woocommerce-account .ta-main,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
  padding-block: var(--ta-section-y-tight) var(--ta-section-y);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
  font-size: var(--ta-text-2xl);
  margin-bottom: var(--ta-space-lg);
}


/* --------------------------------------------------------------------------
   Blocks: typography and colour
   --------------------------------------------------------------------------
   The blocks inherit most type from the document, so these are corrections
   rather than a full restyle.
   -------------------------------------------------------------------------- */

.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
  font-family: var(--ta-font-display);
  font-weight: var(--ta-weight-medium);
  color: var(--ta-color-heading);
}

.wc-block-components-product-name {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  color: var(--ta-color-heading);
  text-decoration: none;
}

.wc-block-components-product-name:hover {
  color: var(--ta-color-link-hover);
}

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

.wc-block-formatted-money-amount,
.wc-block-components-totals-item__value {
  font-variant-numeric: tabular-nums;
}

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

/* The order total is the number people actually look for. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--ta-text-lg);
  font-weight: var(--ta-weight-semibold);
  color: var(--ta-color-text);
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon-link {
  color: var(--ta-color-accent-text);
}

/* Product thumbnails in the cart/checkout line items. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: var(--ta-radius-image);
  background-color: var(--ta-color-bg-alt);
}

/* Sand panel behind the totals/summary column. */
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-order-summary {
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-card);
}


/* --------------------------------------------------------------------------
   Blocks: buttons
   --------------------------------------------------------------------------
   Mapped onto the same tokens as .ta-btn so checkout does not look like a
   different site. Sizing only — no repositioning.
   -------------------------------------------------------------------------- */

/*
 * .wc-block-components-product-button__button is a DIFFERENT class from
 * .wc-block-components-button — it is the product-grid button used by the empty
 * cart block's "New in store" collection. Missing it meant those buttons fell
 * through to WordPress's default block-button styling and painted in Woo's
 * stock pink (#CC3366), which measured 4.49:1 on ivory: below AA, and not a
 * colour in this palette at all.
 */
.wc-block-components-button:not(.is-link),
.wc-block-components-product-button__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding-inline: var(--ta-space-lg);
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-xs);
  font-weight: var(--ta-weight-medium);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--ta-radius-button);
  background-color: var(--ta-btn-primary-bg);
  color: var(--ta-btn-primary-text);
  transition: background-color var(--ta-transition);
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-product-button__button:hover {
  background-color: var(--ta-btn-primary-bg-hover);
  color: var(--ta-btn-primary-text);
}

.wc-block-components-button.is-link {
  color: var(--ta-color-accent-text);
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--ta-text-sm);
}


/* --------------------------------------------------------------------------
   Blocks: form 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-block-components-combobox input,
.wc-block-components-textarea {
  border-radius: var(--ta-radius-input);
  border-color: var(--ta-color-border-strong);
  background-color: var(--ta-color-surface);
  color: var(--ta-color-text);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
  color: var(--ta-color-text-muted);
}

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

/* Woo Blocks draws its own focus styling; keep the theme's ring so focus looks
   the same across the whole site. */
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus {
  outline: var(--ta-focus-width) solid var(--ta-color-focus);
  outline-offset: var(--ta-focus-offset);
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   Blocks: notices
   -------------------------------------------------------------------------- */

.wc-block-components-notice-banner {
  border-radius: var(--ta-radius-sm);
  font-size: var(--ta-text-sm);
}

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

.wc-block-components-notice-banner.is-success {
  border-color: var(--ta-color-success);
}


/* --------------------------------------------------------------------------
   Empty cart
   --------------------------------------------------------------------------
   The block ships its own empty state including a "New in store" product grid.
   It is left in place — it is genuinely useful — and only restyled.
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-empty-cart-block {
  text-align: center;
  padding-block: var(--ta-space-xl);
}

.wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-2xl);
  color: var(--ta-color-heading);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-base);
  color: var(--ta-color-heading);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  gap: var(--ta-gap-md);
}

/* Woo's stock "empty cart" icon is a grey outline that sits oddly against the
   warm ground. Toned down rather than hidden — it still signals the state. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__image,
.wp-block-woocommerce-empty-cart-block svg {
  opacity: 0.35;
}


/* --------------------------------------------------------------------------
   My Account (classic shortcode markup)
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-xl);
}

@media (min-width: 1024px) {
  /* Only applies once logged in — the login form renders without the nav, and
     a two-column grid with one child is still a single column. */
  .woocommerce-account .woocommerce {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--ta-space-2xl);
    align-items: start;
  }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--ta-border-width) solid var(--ta-color-border);
}

.woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.woocommerce-MyAccount-navigation a {
  display: block;
  min-height: 2.75rem;
  padding-block: var(--ta-space-2xs);
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
  color: var(--ta-color-text);
}

.woocommerce-MyAccount-navigation .is-active a {
  color: var(--ta-color-text);
  font-weight: var(--ta-weight-medium);
  border-left: var(--ta-border-width-thick) solid var(--ta-color-accent);
  padding-left: var(--ta-space-2xs);
}

.woocommerce-MyAccount-content {
  min-width: 0;
}

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

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 26rem;
  padding: var(--ta-space-lg);
  background-color: var(--ta-color-bg-alt);
  border: 0;
  border-radius: var(--ta-radius-card);
}

.woocommerce-form-row {
  margin-bottom: var(--ta-space-md);
}

.woocommerce-form-row label,
.woocommerce-account label {
  display: block;
  font-size: var(--ta-text-sm);
  font-weight: var(--ta-weight-medium);
  margin-bottom: var(--ta-space-3xs);
}

.woocommerce-Input--text,
.woocommerce-Input--email,
.woocommerce-Input--password {
  width: 100%;
}

.woocommerce-LostPassword {
  margin-top: var(--ta-space-sm);
  font-size: var(--ta-text-2xs);
}

/* --- Orders table --- */

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

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  padding: var(--ta-space-2xs);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
  text-align: left;
}

.woocommerce-account table.shop_table th {
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-subtle);
}

/* A table cannot reflow, so let it scroll inside its own box rather than
   pushing the page sideways. */
@media (max-width: 767px) {
  .woocommerce-account .woocommerce-orders-table,
  .woocommerce-account .shop_table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   Target size on the money path
   --------------------------------------------------------------------------
   WCAG 2.2 AA (2.5.8) asks for 24x24 CSS px. Three of Woo's own Blocks controls
   render as ~18px-tall text toggles — "Add a coupon", the address-line-2
   reveal, and the order-summary panel button. They are full-width, so only the
   HEIGHT falls short.

   This is a restyle, not a restructure: min-height plus centred content grows
   the control in place. Nothing is repositioned and no Blocks internals are
   relied on beyond the class names Woo already exposes for styling.
   -------------------------------------------------------------------------- */

.wc-block-components-panel__button,
.wc-block-components-totals-coupon-link,
.wc-block-components-address-form__address_2-toggle {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

/* The address-line-2 toggle is an inline span inside a label row; keep it
   inline-flex so it does not claim the whole row. */
.wc-block-components-address-form__address_2-toggle {
  display: inline-flex;
}