/* ==========================================================================
   Tribe Aura — WooCommerce chrome
   --------------------------------------------------------------------------
   Makes WooCommerce's own components adopt the design tokens.

   SCOPE: colour, type and spacing only. The product card is rebuilt properly
   in Phase 4 and cart/checkout are restyled in Phase 9 — this file exists so
   Woo's defaults (grey buttons, an olive sale badge, blue links) do not sit
   alongside the brand palette in the meantime.

   Woo ships its own stylesheet with reasonably specific selectors, so a few
   rules here are necessarily specific too. Every value is still a token.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Buttons
   Woo renders add-to-cart as <a class="button"> and <button class="button">.
   Neither inherits .ta-btn, so the class is mapped onto the same tokens.
   -------------------------------------------------------------------------- */

/* .ta-card is listed separately because our own components appear OUTSIDE
   WooCommerce's `.woocommerce` wrapper — the homepage <main> never carries
   that class, so a Woo-scoped selector alone left every add-to-cart on the
   homepage rendering as a plain underlined link. */
.ta-card a.button,
.ta-card button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ta-space-2xs);
  min-height: 2.75rem;
  padding: var(--ta-space-xs) var(--ta-space-lg);
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-xs);
  font-weight: var(--ta-weight-medium);
  line-height: var(--ta-leading-none);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--ta-border-width) solid transparent;
  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), color var(--ta-transition);
}

.ta-card a.button:hover,
.ta-card button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--ta-btn-primary-bg-hover);
  color: var(--ta-btn-primary-text);
}

/* "Added to cart" confirmation link — secondary to the main action. */
.ta-card a.added_to_cart,
.woocommerce a.added_to_cart {
  display: inline-block;
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-accent-text);
}


/* --------------------------------------------------------------------------
   Sale badge
   Woo's default is a flat pill in the theme's link colour, which rendered
   olive here. Madder red reads as "sale" without shouting.
   -------------------------------------------------------------------------- */

.woocommerce span.onsale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  min-width: auto;
  padding: var(--ta-space-3xs) var(--ta-space-2xs);
  background-color: var(--ta-color-sale);
  color: var(--ta-palette-white);
  border-radius: var(--ta-radius-xs);
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-3xs);
  font-weight: var(--ta-weight-semibold);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Prices
   -------------------------------------------------------------------------- */

.woocommerce .price,
.woocommerce ul.products li.product .price {
  color: var(--ta-color-text);
  font-size: var(--ta-text-sm);
  font-weight: var(--ta-weight-medium);
}

/* The struck-through original needs to recede, not compete. */
.woocommerce .price del,
.woocommerce ul.products li.product .price del {
  color: var(--ta-color-text-subtle);
  font-weight: var(--ta-weight-regular);
  opacity: 1;
}

.woocommerce .price ins,
.woocommerce ul.products li.product .price ins {
  background: transparent;
  color: var(--ta-color-sale);
  font-weight: var(--ta-weight-semibold);
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   Product loop
   Light touch only — the real card component lands in Phase 4.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  font-weight: var(--ta-weight-medium);
  line-height: var(--ta-leading-snug);
  color: var(--ta-color-heading);
}

.woocommerce ul.products li.product a img {
  border-radius: var(--ta-radius-image);
  background-color: var(--ta-color-bg-alt);
}

/* --------------------------------------------------------------------------
   Restoring object-fit images on WooCommerce pages
   --------------------------------------------------------------------------
   The theme sizes several images by filling a parent that owns the aspect
   ratio: the parent sets `aspect-ratio` (or is pinned with inset: 0) and the
   image is `width: 100%; height: 100%; object-fit: cover`.

   WooCommerce ships two rules that break exactly that:

       .woocommerce img, .woocommerce-page img          { height: auto }   (0,2,1)
       .woocommerce ul.products li.product a img        { height: auto }   (0,3,3)

   Both out-rank the theme's single-class `.ta-*__img` selectors (0,1,0), so on
   any page carrying the `woocommerce` body class the images fall back to their
   intrinsic height. A square thumbnail then sits short inside a 3/4 card,
   leaving a band of bare card beneath it, and a portrait archive photograph
   renders seven times taller than its header and is clipped to whatever
   happens to be in the top 288px — which on a dark image reads as a black bar.

   Only shop, product-taxonomy and single-product pages carry that body class;
   the homepage has `woocommerce-no-js` alone, which is why it looked correct
   while the shop grid and category headers did not.

   Absolute positioning is not an escape route here: for a replaced element
   `height: auto` resolves to the intrinsic height and the `bottom` offset is
   discarded as over-constrained (CSS 2.1 §10.6.5), so the image still will not
   stretch. The declaration has to win on specificity, which means naming Woo's
   DOM. That is what this file is for, and it only loads where Woo renders.

   Each selector below clears (0,3,3) by carrying the component's own wrapper
   class alongside the image class.
   -------------------------------------------------------------------------- */

.woocommerce .ta-card .ta-card__media img.ta-card__img,
.woocommerce .ta-archive-head .ta-archive-head__media img.ta-archive-head__img,
.woocommerce .ta-gallery__thumb img.ta-gallery__thumb-img,
.woocommerce .ta-tile__media img.ta-tile__img,
.woocommerce .ta-band__media img.ta-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.woocommerce .woocommerce-result-count {
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
}

/* The sort dropdown is a real form control, so it takes the 16px floor rather
   than the small-UI size — at 14px it made iOS zoom the whole shop page. */
.woocommerce .woocommerce-ordering select {
  font-size: var(--ta-input-size);
  color: var(--ta-color-text-muted);
}


/* --------------------------------------------------------------------------
   Breadcrumbs, notices, pagination
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  color: var(--ta-color-text-muted);
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--ta-color-text-muted);
  text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--ta-color-link-hover);
  text-decoration: underline;
}

/* Woo's notices default to a blue/green palette that sits outside the brand. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--ta-color-accent);
  background-color: var(--ta-color-surface);
  color: var(--ta-color-text);
  border-radius: var(--ta-radius-sm);
  font-size: var(--ta-text-sm);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--ta-color-accent);
}

.woocommerce-error {
  border-top-color: var(--ta-color-danger);
}

.woocommerce-error::before {
  color: var(--ta-color-danger);
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  gap: var(--ta-space-3xs);
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 2.5rem;
  padding: var(--ta-space-2xs);
  border-radius: var(--ta-radius-sm);
  color: var(--ta-color-text);
  font-size: var(--ta-text-sm);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--ta-color-bg-alt);
  color: var(--ta-color-text);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--ta-btn-primary-bg);
  color: var(--ta-btn-primary-text);
}


/* --------------------------------------------------------------------------
   Product card button on a phone
   --------------------------------------------------------------------------
   A card is about 165px wide on a phone and the shared button padding is 32px
   each side, leaving roughly 39px for the label — so "Add to cart" wrapped onto
   three lines and the button grew to 65px tall. None of the automated checks
   catch that: it does not overflow, the text is not small, and the tap target is
   if anything too big. It simply looks broken.

   This override lives HERE, not in home.css, because home.css loads first and
   the two selectors have identical specificity — from there it silently lost to
   the padding shorthand above every time.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ta-card a.button,
  .ta-card button.button {
    align-self: stretch;
    width: 100%;
    padding-inline: var(--ta-space-2xs);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   WooCommerce's own colour variables
   --------------------------------------------------------------------------
   Woo ships a palette that belongs to no shop in particular — a purple primary
   (#720eec), an olive highlight (#958e09), a bright orange and two reds — and
   uses them for prices, sale flashes, stock notices, form borders and its block
   chrome. Left alone, the single-product PRICE renders in that olive, which on
   an ivory ground reads as a slightly wrong gold: close enough to the brand to
   pass a glance, and not the brand at all.

   It also broke the portal's Appearance screen: the client changes "Gold" and
   every price ignores them, because the price was never reading the token.

   Mapped to our own tokens rather than overridden rule by rule, so anything
   Woo colours — now or in a future version — follows the brand and follows
   whatever the client sets.
   -------------------------------------------------------------------------- */

:root {
  /* Prices, sale flashes, and anything Woo considers "highlighted". */
  --wc-highlight: var(--ta-color-accent-text);
  --wc-highligh-text: var(--ta-color-text-invert);   /* Woo's spelling, not ours */

  /* Buttons and links inside Woo's own blocks. */
  --wc-primary: var(--ta-color-text);
  --wc-primary-text: var(--ta-color-text-invert);
  --wc-secondary: var(--ta-color-bg-alt);
  --wc-secondary-text: var(--ta-color-text);

  /* Notices. Ours are already tuned to AA on all three grounds. */
  --wc-green: var(--ta-color-success);
  --wc-red: var(--ta-color-danger);
  --wc-destructive: var(--ta-color-danger);
  --wc-orange: var(--ta-color-warning);
  --wc-blue: var(--ta-color-accent-soft);

  --wc-content-bg: var(--ta-color-surface);
  --wc-subtext: var(--ta-color-text-muted);
  --wc-form-border-color: var(--ta-color-border-strong);
}

/* --------------------------------------------------------------------------
   The single-product price
   --------------------------------------------------------------------------
   Woo does not use its own --wc-highlight variable here: it writes the olive as
   a LITERAL, in

     .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price

   which scores (0,3,2) and beat the theme's own `.ta-product__summary .price`
   at (0,2,0). So the price has been rendering in WooCommerce's olive since the
   beginning — on an ivory ground it passes for a slightly-off gold, which is
   why it survived every screenshot.

   Matched at the same specificity and loaded later, so the price is finally a
   brand colour. It uses accent-TEXT rather than the raw accent, which is the
   AA-corrected shade — a price nobody can read is worse than an off-brand one.
   -------------------------------------------------------------------------- */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color: var(--ta-color-accent-text);
}

/* The struck-through original on a sale item stays muted, or the two prices
   compete and the discount stops reading as one. */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--ta-color-text-muted);
}