/* ==========================================================================
   Tribe Aura — Single product
   --------------------------------------------------------------------------
   Gallery, purchase summary, spec list, accordion, upsells, related, reviews.

   Mobile-first; breakpoints written literally: 480 / 768 / 1024 / 1280.
   Gallery and summary sit side by side from 1024px.

   The product CARD used by the upsell and related rows is styled in home.css.
   ========================================================================== */

.ta-product {
  padding-bottom: var(--ta-section-y);
}

.ta-product__breadcrumb {
  padding-top: var(--ta-space-md);
}

.ta-product__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-xl);
  padding-top: var(--ta-space-md);
}

@media (min-width: 1024px) {
  .ta-product__layout {
    /* Image-dominant, per guidelines §07 — the gallery gets the larger share. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--ta-space-2xl);
    align-items: start;
  }
}


/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

/* WooCommerce's layout stylesheet floats the gallery and summary at 48% each:
 *
 *   .woocommerce div.product div.images   { float:left;  width:48% }
 *   .woocommerce div.product div.summary  { float:right; width:48% }
 *
 * Inside a CSS grid that makes each one 48% of ITS OWN cell, so both columns
 * rendered at roughly half width with a large gap between them.
 *
 * Beating them needs an ID. Woo's selector LIST includes
 * `.woocommerce #content div.product div.images`, and that `#content` matches
 * because our own <main id="content"> supplies it — so the winning specificity
 * is (1,3,2), not the (0,3,2) the class-only selector suggests. A class-only
 * override scores (0,4,2) and silently loses; only adding #content here wins.
 *
 * Verified with CSS.getMatchedStylesForNode rather than guessed. */
.woocommerce #content div.product .ta-product__layout div.images,
.woocommerce-page #content div.product .ta-product__layout div.images,
.woocommerce #content div.product .ta-product__layout div.summary,
.woocommerce-page #content div.product .ta-product__layout div.summary,
.woocommerce div.product .ta-product__layout div.images,
.woocommerce-page div.product .ta-product__layout div.images,
.woocommerce div.product .ta-product__layout div.summary,
.woocommerce-page div.product .ta-product__layout div.summary {
  float: none;
  width: 100%;
  margin-bottom: 0;
}

.ta-product__layout .ta-product__media {
  float: none;
  width: 100%;
}

.ta-product__media {
  position: relative;
  min-width: 0;
}

@media (min-width: 1024px) {
  /* The summary is usually taller than the gallery; sticking the gallery keeps
     the product visible while reading the details. */
  .ta-product__media {
    position: sticky;
    top: 6rem;
  }
}

.woocommerce-product-gallery {
  position: relative;
  margin: 0;
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
}

.woocommerce-product-gallery__image {
  border-radius: var(--ta-radius-image);
  overflow: hidden;
  background-color: var(--ta-color-bg-alt);
}

/* Stand-in until product photography exists — see tribeaura_gallery_placeholder().
   Uses the product ratio so the column does not resize when a real photo
   replaces it. */
.ta-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ta-ratio-product);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-image);
}

.ta-gallery-placeholder__mark {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-4xl);
  font-weight: var(--ta-weight-light);
  color: var(--ta-color-border-strong);
  line-height: 1;
  user-select: none;
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Woo's zoom/lightbox trigger. */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--ta-space-sm);
  right: var(--ta-space-sm);
  z-index: var(--ta-z-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--ta-color-surface);
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: var(--ta-radius-circle);
  color: var(--ta-color-text);
  text-decoration: none;
  font-size: var(--ta-text-sm);
}

.woocommerce-product-gallery__trigger:hover {
  background-color: var(--ta-color-text);
  color: var(--ta-color-text-invert);
  border-color: var(--ta-color-text);
}

/* Thumbnail strip (flexslider control nav). */
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ta-gap-sm);
  margin: var(--ta-space-sm) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .woocommerce-product-gallery .flex-control-thumbs {
    grid-template-columns: repeat(5, 1fr);
  }
}

.woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0;
  width: auto;
  float: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: var(--ta-ratio-square);
  object-fit: cover;
  border-radius: var(--ta-radius-image);
  border: var(--ta-border-width) solid transparent;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity var(--ta-transition), border-color var(--ta-transition);
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--ta-color-accent);
}

/* Sale badge sits on the gallery. */
.ta-product__media .onsale {
  position: absolute;
  top: var(--ta-space-sm);
  left: var(--ta-space-sm);
  z-index: var(--ta-z-base);
  margin: 0;
}


/* --------------------------------------------------------------------------
   Summary
   -------------------------------------------------------------------------- */

.ta-product__summary {
  min-width: 0;
}

.ta-product__summary .product_title {
  font-size: var(--ta-text-3xl);
  line-height: var(--ta-leading-tight);
}

/* --- Rating --- */

.ta-product__rating {
  display: flex;
  align-items: center;
  gap: var(--ta-space-2xs);
  margin-top: var(--ta-space-2xs);
}

.ta-product__reviews-link {
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
  text-decoration: none;
  border-bottom: var(--ta-border-width) solid var(--ta-color-border-strong);
}

.ta-product__reviews-link:hover {
  color: var(--ta-color-link-hover);
  border-bottom-color: currentColor;
}

/* --- Price --- */

.ta-product__summary .price {
  display: block;
  margin-top: var(--ta-space-md);
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-xl);
  font-weight: var(--ta-weight-medium);
  color: var(--ta-color-text);
}

.ta-product__summary .price del {
  margin-right: var(--ta-space-2xs);
  font-size: var(--ta-text-md);
  font-weight: var(--ta-weight-regular);
  color: var(--ta-color-text-subtle);
  opacity: 1;
}

.ta-product__summary .price ins {
  background: transparent;
  color: var(--ta-color-sale);
  text-decoration: none;
}

/* --- Short description --- */

.woocommerce-product-details__short-description {
  margin-top: var(--ta-space-md);
  color: var(--ta-color-text-muted);
  line-height: var(--ta-leading-relaxed);
}

/* --- Spec strip --- */

.ta-specs {
  margin-top: var(--ta-space-lg);
  padding-top: var(--ta-space-md);
  border-top: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-specs__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--ta-space-sm);
  padding-block: var(--ta-space-3xs);
}

.ta-specs__key {
  margin: 0;
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-subtle);
}

.ta-specs__val {
  margin: 0;
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text);
}

/* --- Stock --- */

.ta-stock {
  margin-top: var(--ta-space-md);
  font-size: var(--ta-text-sm);
  font-weight: var(--ta-weight-medium);
}

/*
 * These must out-specify WooCommerce's own stock colour:
 *   .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock
 * which scores (0,3,1) — :where() contributes nothing, but .woocommerce, div,
 * .product and .stock do. A bare .ta-stock--in is (0,1,0) and loses silently,
 * which is why "In stock" was painting in Woo's --wc-highlight olive (#958e09,
 * 3.09:1 on ivory) instead of the theme's success green. Repeating the element
 * and product classes here scores (0,4,1) and wins without needing an id.
 */
.woocommerce div.product .ta-stock.ta-stock--in  { color: var(--ta-color-success); }
.woocommerce div.product .ta-stock.ta-stock--low { color: var(--ta-color-warning); }
.woocommerce div.product .ta-stock.ta-stock--out { color: var(--ta-color-danger); }

/* Outside the single-product context Woo's rule does not apply, so the plain
   classes are enough (product cards, cart line items). */
.ta-stock--in    { color: var(--ta-color-success); }
.ta-stock--low   { color: var(--ta-color-warning); }
.ta-stock--out   { color: var(--ta-color-danger); }

/* --- Add to cart --- */

.ta-product__summary form.cart {
  margin-top: var(--ta-space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--ta-space-2xs);
}

.ta-product__summary form.cart .quantity {
  display: flex;
}

.ta-product__summary form.cart .quantity input.qty {
  width: 5rem;
  min-height: 3.25rem;
  text-align: center;
  /* Spinners are stripped in base.css; a wider field keeps 2-digit
     quantities from clipping. */
}

.ta-product__summary form.cart .single_add_to_cart_button {
  flex: 1 1 12rem;
  min-height: 3.25rem;
  font-size: var(--ta-text-sm);
}

/* Variable products: Woo's variation table. */
.ta-product__summary .variations {
  width: 100%;
  margin-bottom: var(--ta-space-sm);
  border: 0;
}

.ta-product__summary .variations th,
.ta-product__summary .variations td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.ta-product__summary .variations th {
  padding-top: var(--ta-space-sm);
  font-size: var(--ta-text-sm);
  font-weight: var(--ta-weight-medium);
}

.ta-product__summary .woocommerce-variation-price {
  margin-bottom: var(--ta-space-sm);
}

.ta-product__summary .reset_variations {
  display: inline-block;
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-2xs);
  color: var(--ta-color-text-muted);
}

/* --- Assurances --- */

.ta-assure {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-2xs);
  margin-top: var(--ta-space-lg);
  padding-top: var(--ta-space-md);
  border-top: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-assure__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ta-space-2xs);
  margin: 0;
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
}

.ta-assure__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--ta-color-accent);
}

/* --- Meta --- */

.ta-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-space-md);
  margin-top: var(--ta-space-lg);
  padding-top: var(--ta-space-md);
  border-top: var(--ta-border-width) solid var(--ta-color-border);
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-subtle);
}

.ta-product__meta-item span {
  color: var(--ta-color-text);
}

.ta-product__meta a {
  color: var(--ta-color-text);
  text-decoration: none;
}

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


/* Accordion styles live in assets/css/accordion.css — shared with the support
   and FAQ pages so there is one definition of the component. */


/* --------------------------------------------------------------------------
   Upsells / related
   -------------------------------------------------------------------------- */

.ta-product .upsells,
.ta-product .related {
  padding-top: var(--ta-section-y-tight);
}

/* Woo renders these directly inside .product, outside our container, so they
   need the page gutter applying here. */
.ta-product .upsells,
.ta-product .related {
  width: 100%;
  max-width: var(--ta-container-wide);
  margin-inline: auto;
  padding-inline: var(--ta-gutter);
}

.ta-product .upsells > h2,
.ta-product .related > h2 {
  font-size: var(--ta-text-2xl);
  margin-bottom: var(--ta-space-lg);
}

.ta-product .upsells ul.products,
.ta-product .related ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ta-gap-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ta-product .upsells ul.products,
  .ta-product .related ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ta-gap-lg);
  }
}

/* Same clearfix trap as the shop archive: Woo's ::before/::after on
   ul.products become real grid items and leave an empty first cell. */
.ta-product ul.products::before,
.ta-product ul.products::after,
.ta-product ul.products li.product::before,
.ta-product ul.products li.product::after {
  content: none;
  display: none;
}

.ta-product ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  min-width: 0;
}


/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.ta-reviews {
  padding-top: var(--ta-section-y-tight);
}

.ta-reviews #reviews h2,
.ta-reviews .woocommerce-Reviews-title {
  font-size: var(--ta-text-2xl);
  margin-bottom: var(--ta-space-md);
}

.ta-reviews .commentlist {
  list-style: none;
  margin: 0 0 var(--ta-space-lg);
  padding: 0;
}

.ta-reviews .comment_container {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--ta-space-sm);
  padding-block: var(--ta-space-md);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-reviews .comment_container img.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--ta-radius-circle);
}

.ta-reviews .comment-text p.meta {
  font-size: var(--ta-text-2xs);
  color: var(--ta-color-text-subtle);
}

.ta-reviews .comment-form {
  display: grid;
  gap: var(--ta-space-md);
  max-width: var(--ta-measure);
}

.ta-reviews .comment-form p {
  margin: 0;
  max-width: none;
}

.ta-reviews .comment-form label {
  display: block;
}

/* The star picker is an interactive control that carries the rating itself, so
   it is not decorative and cannot use bare --ta-color-accent, which measures
   2.88:1 on ivory. accent-text is the same hue, deep enough for AA. */
.ta-reviews .stars a {
  color: var(--ta-color-accent-text);
}

.ta-reviews .woocommerce-noreviews {
  color: var(--ta-color-text-muted);
}


/*
 * 24px minimum target (WCAG 2.2 AA, 2.5.8). inline-flex keeps the target only
 * as wide as its own text — a block link would stretch the container and make
 * adjacent targets ambiguous. See the note on .ta-footer__links a: the whole
 * family of small text links was missed on the first sweep because the audit
 * over-applied 2.5.8's "inline in a sentence" exemption to any link in a list.
 */
.ta-product__meta-item a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}


/* ==========================================================================
   Product gallery
   --------------------------------------------------------------------------
   Replaces WooCommerce's FlexSlider gallery. See
   woocommerce/single-product/product-image.php for why.

   Desktop: thumbnail rail beside one large frame.
   Phone:   full-bleed scroll-snap carousel with dots, pinch-zoom intact.
   ========================================================================== */

.ta-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-sm);
  margin: 0;
}

@media (min-width: 1024px) {
  /* Rail first, then the stage — the shape of every modern retail gallery.
     Below this width the rail is hidden and the stage takes the full column. */
  .ta-gallery--multi {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
  }
}

/* --- thumbnail rail --- */

/*
 * The rail is DESKTOP ONLY.
 *
 * On a phone the carousel is swiped and the dots already say where you are, so
 * a second row of thumbnails is the same navigation twice — and it arrived with
 * a horizontal scrollbar sitting across the top of the photographs.
 */
.ta-gallery__rail {
  display: none;
}

@media (min-width: 1024px) {
  .ta-gallery__rail {
    display: flex;
    flex-direction: column;
    gap: var(--ta-space-2xs);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    max-height: 620px;
    scrollbar-width: thin;
  }
}

.ta-gallery__thumb {
  flex: 0 0 auto;
  width: 72px;
  padding: 0;
  border: var(--ta-border-width) solid transparent;
  border-radius: var(--ta-radius-image);
  background: var(--ta-color-bg-alt);
  cursor: pointer;
  overflow: hidden;
  /* 24px AA target floor is comfortably exceeded; this keeps the box square-ish. */
  aspect-ratio: var(--ta-ratio-product);
}

.ta-gallery__thumb:hover { border-color: var(--ta-color-border-strong); }

.ta-gallery__thumb.is-current {
  border-color: var(--ta-color-accent-text);
}

.ta-gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- stage --- */

.ta-gallery__stage {
  position: relative;
  min-width: 0;
}

.ta-gallery__track {
  display: flex;
  gap: var(--ta-space-2xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* No scroll-behavior: smooth here. It governs PROGRAMMATIC scrolling only —
     touch swiping is unaffected — and under it neither scrollLeft nor
     scrollTo('smooth') actually moved the track when a thumbnail was clicked. */
  -webkit-overflow-scrolling: touch;
  /* The scrollbar would sit across the photograph on a phone. */
  scrollbar-width: none;
}

.ta-gallery__track::-webkit-scrollbar { display: none; }

.ta-gallery__frame {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  border-radius: var(--ta-radius-image);
  overflow: hidden;
  background: var(--ta-color-bg-alt);
}

.ta-gallery__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  /* zoom-in tells a mouse user the image opens; touch gets the same via tap. */
  cursor: zoom-in;
}

.ta-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ta-ratio-product);
  object-fit: cover;
}

/* --- dots, phone only --- */

.ta-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--ta-space-2xs);
}

.ta-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ta-color-border-strong);
  transition: background-color var(--ta-transition);
}

.ta-gallery__dot.is-current { background: var(--ta-color-text); }

@media (min-width: 1024px) {
  /* With the rail visible the dots are redundant. */
  .ta-gallery--multi .ta-gallery__dots { display: none; }
}

/* --------------------------------------------------------------------------
   Full-screen zoom
   --------------------------------------------------------------------------
   A plain overlay holding the full-size file. Dragging pans it; on touch the
   browser's own pinch-zoom does the work, which is why nothing here calls
   preventDefault on a touch event.
   -------------------------------------------------------------------------- */

.ta-zoom {
  position: fixed;
  inset: 0;
  z-index: var(--ta-z-modal, 900);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(28 28 28 / 92%);
  overflow: auto;
  cursor: zoom-out;
}

.ta-zoom[hidden] { display: none; }

.ta-zoom__img {
  max-width: none;
  max-height: none;
  /* Fits on open; the script scales it up on click or pinch. */
  width: auto;
  height: 92vh;
  object-fit: contain;
  transform-origin: center center;
}

.ta-zoom__close {
  position: fixed;
  top: 14px;
  right: 14px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--ta-radius-button);
  background: var(--ta-color-surface);
  color: var(--ta-color-text);
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.ta-zoom__hint {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ta-palette-white);
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  opacity: 0.75;
}



/* ==========================================================================
   Variation selectors
   --------------------------------------------------------------------------
   Swatches for colour, pills for everything else. The underlying <select> is
   still in the document driving WooCommerce — see inc/variation-ui.php.
   ========================================================================== */

/* Hidden only once script confirms it can drive the swatches. Without JS the
   select stays visible and the product still sells. */
.ta-varselect--hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ta-varopts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-space-2xs);
  margin-bottom: var(--ta-space-2xs);
}

.ta-pill {
  min-height: 2.75rem;
  padding: 0 var(--ta-space-md);
  font-family: var(--ta-font-body);
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text);
  background: var(--ta-color-surface);
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: var(--ta-radius-button);
  cursor: pointer;
  transition: border-color var(--ta-transition), background-color var(--ta-transition);
}

.ta-pill:hover { border-color: var(--ta-color-text); }

.ta-pill.is-selected {
  border-color: var(--ta-color-text);
  background: var(--ta-color-text);
  color: var(--ta-color-text-invert);
}

.ta-swatch {
  width: 2.75rem;
  height: 2.75rem;
  padding: 3px;
  background: none;
  border: var(--ta-border-width-thick) solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.ta-swatch__chip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* A hairline so a pale swatch is still a disc against the page. */
  box-shadow: inset 0 0 0 1px rgb(28 28 28 / 18%);
  background-size: cover;
}

.ta-swatch:hover { border-color: var(--ta-color-border-strong); }
.ta-swatch.is-selected { border-color: var(--ta-color-text); }

/*
 * Woo removes options that no remaining variation can satisfy. Struck through
 * rather than hidden: a shopper who picked red should SEE that long is gone,
 * not watch the row silently shrink.
 */
.ta-pill.is-unavailable,
.ta-swatch.is-unavailable {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}

.ta-pill.is-unavailable::after,
.ta-swatch.is-unavailable::after {
  content: "";
  position: absolute;
  inset: 50% 6% auto;
  height: 1px;
  background: currentColor;
}

/* Woo's "Clear" link under the selectors. */
.woocommerce div.product form.cart .reset_variations {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
}

/* The variation price/stock block Woo injects. */
.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: var(--ta-space-2xs);
}


/* ==========================================================================
   Quantity stepper
   ========================================================================== */

.ta-qty {
  display: inline-flex;
  align-items: stretch;
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: var(--ta-radius-button);
  overflow: hidden;
}

.ta-qty__btn {
  width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  background: var(--ta-color-surface);
  color: var(--ta-color-text);
  font-size: var(--ta-text-base);
  line-height: 1;
  cursor: pointer;
}

.ta-qty__btn:hover { background: var(--ta-color-bg-alt); }

.woocommerce div.product form.cart .ta-qty .quantity { margin: 0; }

.woocommerce div.product form.cart .ta-qty input.qty {
  width: 3rem;
  min-height: 2.75rem;
  border: 0;
  border-inline: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: 0;
  text-align: center;
  /* The 16px floor still applies — this is a text field on a phone. */
  font-size: var(--ta-input-size);
  -moz-appearance: textfield;
}

.woocommerce div.product form.cart .ta-qty input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .ta-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ta-product__taxnote {
  margin: calc(var(--ta-space-2xs) * -1) 0 var(--ta-space-sm);
  font-size: var(--ta-text-2xs);
  color: var(--ta-color-text-muted);
}


/* --------------------------------------------------------------------------
   Woo renders the variation selectors as a TABLE
   --------------------------------------------------------------------------
   table > tr > th(label) + td(control). Left alone it reads as a data table
   dropped into the middle of the buying column, with the label in a narrow
   first column and the swatches boxed off beside it.

   Unset to plain blocks so each attribute reads as "label, then choices".
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.woocommerce div.product form.cart table.variations {
  margin: 0 0 var(--ta-space-md);
}

.woocommerce div.product form.cart table.variations tr + tr {
  margin-top: var(--ta-space-sm);
}

.woocommerce div.product form.cart table.variations th.label label {
  display: block;
  margin-bottom: var(--ta-space-3xs);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-medium);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
}

/* --------------------------------------------------------------------------
   Add to cart, before a variation is chosen
   --------------------------------------------------------------------------
   Woo marks it .disabled and leaves the theme's dark fill in place, which on a
   pale page reads as a washed-out lilac — it looks like a rendering fault
   rather than a deliberate "not yet". Made explicitly quiet instead, so the
   state is legible as waiting rather than broken.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  background-color: var(--ta-color-bg-alt);
  border-color: var(--ta-color-border-strong);
  color: var(--ta-color-text-muted);
  opacity: 1;
  cursor: not-allowed;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled:hover {
  background-color: var(--ta-color-bg-alt);
  color: var(--ta-color-text-muted);
}

/* The row of controls reads as one unit. */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ta-space-2xs);
}

.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .reset_variations {
  flex: 1 0 100%;
}


/* --------------------------------------------------------------------------
   Short description, as a set of claims
   --------------------------------------------------------------------------
   Amazon's "About this item" is a bulleted list for a reason: a shopper mid-
   decision scans, and prose in the buying column gets skipped whole. Where the
   editor has written a list it is drawn as one, with a gold marker instead of
   a disc; where they have written a sentence it stays a sentence.
   -------------------------------------------------------------------------- */

.woocommerce-product-details__short-description ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-details__short-description li {
  position: relative;
  padding-left: var(--ta-space-md);
  margin-bottom: var(--ta-space-2xs);
  color: var(--ta-color-text);
}

.woocommerce-product-details__short-description li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--ta-color-accent);
}

/* --------------------------------------------------------------------------
   At a glance
   --------------------------------------------------------------------------
   The short spec list in the buying column. Set on a tinted card so it reads
   as a block of facts rather than more of the running text above it.
   -------------------------------------------------------------------------- */

.ta-glance {
  margin-top: var(--ta-space-md);
  padding: var(--ta-space-sm) var(--ta-space-md);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-sm);
}

.ta-glance__title {
  margin: 0;
  font-family: var(--ta-font-sans);
  font-size: var(--ta-text-2xs);
  font-weight: var(--ta-weight-medium);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-muted);
}

/* Inside the card the rule and the top margin are both noise. */
.ta-specs--glance {
  margin-top: var(--ta-space-2xs);
  padding-top: 0;
  border-top: 0;
}

.ta-glance__more {
  margin: var(--ta-space-2xs) 0 0;
  font-size: var(--ta-text-xs);
}

/* --------------------------------------------------------------------------
   Specifications panel
   -------------------------------------------------------------------------- */

.ta-specs--full {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ta-specs--full .ta-specs__row {
  padding-block: var(--ta-space-2xs);
  border-bottom: var(--ta-border-width) solid var(--ta-color-border);
}

.ta-specs--full .ta-specs__row:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  /* Two columns of pairs: the table is short, and a single column of 9rem
     labels beside a 40rem gap looks like a form nobody filled in. */
  .ta-specs--full {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ta-space-xl);
  }
}

.ta-panel__note {
  margin: var(--ta-space-md) 0 0;
  font-size: var(--ta-text-xs);
  color: var(--ta-color-text-muted);
}

/* --------------------------------------------------------------------------
   The variation description block
   --------------------------------------------------------------------------
   Woo renders .woocommerce-variation before anything is chosen and fills it on
   selection. Empty it still carries its own margins, leaving a tall unexplained
   gap between the last selector and the buy button. :empty collapses it, and it
   reappears the moment Woo writes the price and stock line into it.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .woocommerce-variation:empty {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   The "Clear" link
   --------------------------------------------------------------------------
   Woo hides it with visibility, which keeps its full box: a 75px band of
   nothing between the last selector and the buy button, with the button pushed
   below the fold on a phone for no reason a shopper can see.

   Inverted rather than overridden — hidden by default, shown only when Woo has
   written `visibility: visible` on it, which it does the moment a selection
   exists. With no JavaScript there is no selection to clear, so nothing is
   lost by its absence.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .reset_variations {
  display: none;
}

.woocommerce div.product form.cart .reset_variations[style*="visible"] {
  display: inline-block;
  margin-bottom: var(--ta-space-2xs);
  font-size: var(--ta-text-xs);
  color: var(--ta-color-text-muted);
}

/* --------------------------------------------------------------------------
   The chosen variation's price and stock
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .woocommerce-variation-price .price {
  font-size: var(--ta-text-xl);
  color: var(--ta-color-accent-text);
}

.woocommerce div.product form.cart .woocommerce-variation-availability p {
  margin: var(--ta-space-3xs) 0 0;
  font-size: var(--ta-text-xs);
  color: var(--ta-color-text-muted);
}