/* Component: PurchaseControls ---------------------------------------------
   Selectors reach into WooCommerce's own form markup on purpose: the form is
   WooCommerce's and only its presentation belongs to the theme.

   DELIBERATELY UNLAYERED. WooCommerce ships its stylesheet outside any cascade
   layer, and an unlayered declaration beats every layered one regardless of
   specificity — so rules for WooCommerce's own elements cannot live in
   @layer components or they simply lose. Everything here is scoped under
   .tp-purchase, so being unlayered has no reach beyond this block. */
.tp-purchase {
    margin-top: var(--tp-space-7);
    padding-top: 26px;
    border-top: var(--tp-border);
  }

  .tp-purchase__availability {
    margin-bottom: var(--tp-space-5);
  }

  .tp-purchase .stock {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-l);
    letter-spacing: var(--tp-track-wide);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-purchase .stock.out-of-stock {
    color: var(--tp-color-text-muted);
  }

  .tp-purchase__gone {
    max-width: var(--tp-measure);
    font-size: var(--tp-size-body-m);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text-body);
  }

  /* ---- Attribute chips (progressive layer over the native selects) ------ */
  .tp-purchase .variations {
    width: 100%;
    border-collapse: collapse;
  }

  .tp-purchase .variations tr,
  .tp-purchase .variations td,
  .tp-purchase .variations th {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .tp-purchase .variations tr + tr {
    margin-top: 22px;
  }

  .tp-purchase .variations .label,
  .tp-purchase__label {
    display: block;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    font-weight: var(--tp-weight-regular);
    letter-spacing: var(--tp-track-wide);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-purchase .variations .label label {
    font-weight: var(--tp-weight-regular);
  }

  .tp-purchase .variations .value {
    margin-top: var(--tp-space-3);
  }

  .tp-purchase .variations select,
.tp-purchase select {
    min-height: var(--tp-btn-h-chip);
    padding: 0 12px;
    max-width: 100%;
    background: none;
    border: var(--tp-border-brass-soft);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-meta);
    text-transform: uppercase;
    color: var(--tp-color-ink);
  }

  /* The select stays in the DOM as the source of truth once chips exist. */
  .tp-purchase .tp-chips + select,
  .tp-purchase .tp-chips ~ select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .tp-purchase .tp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .tp-purchase .tp-chip-option {
    display: flex;
    align-items: center;
    min-height: var(--tp-btn-h-chip);
    padding: 0 18px;
    background: none;
    border: 1px solid var(--tp-color-line);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-text-muted);
    transition: background-color var(--tp-dur) ease, border-color var(--tp-dur) ease, color var(--tp-dur) ease;
  }

  .tp-purchase .tp-chip-option:hover {
    border-color: var(--tp-color-brass-light);
    color: var(--tp-color-ink);
  }

  .tp-purchase .tp-chip-option[aria-checked="true"] {
    background: var(--tp-color-chip-active);
    border-color: var(--tp-color-cobalt);
    color: var(--tp-color-ink);
  }

  .tp-purchase .tp-chip-option[aria-disabled="true"] {
    opacity: 0.4;
    text-decoration: line-through;
    cursor: not-allowed;
  }

  .tp-purchase .reset_variations {
    display: inline-block;
    margin-top: var(--tp-space-3);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
    border-bottom: var(--tp-border-brass);
    padding-bottom: 2px;
  }

  /* ---- Chosen variation: price and availability ------------------------- */
  .tp-purchase .woocommerce-variation-price {
    margin-top: var(--tp-space-5);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-input);
    letter-spacing: var(--tp-track-h);
    color: var(--tp-color-text);
  }

  .tp-purchase .woocommerce-variation-availability {
    margin-top: var(--tp-space-2);
  }

  /* ---- Quantity + buttons ---------------------------------------------- */
  .tp-purchase form.cart {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    margin-top: 26px;
  }

  .tp-purchase form.variations_form {
    display: block;
  }

  .tp-purchase .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    margin-top: 26px;
  }

  /* A one-of-one piece has no quantity to choose. */
  .tp-purchase--single .quantity {
    display: none;
  }

  .tp-purchase .quantity {
    display: flex;
    align-items: center;
    margin-top: var(--tp-space-3);
    border: var(--tp-border-brass-soft);
  }

  .tp-purchase .quantity .screen-reader-text {
    position: absolute !important;
  }

  .tp-purchase .qty {
    width: 56px;
    min-width: 56px;
    height: var(--tp-qty-btn-h);
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-meta);
    color: var(--tp-color-text);
    -moz-appearance: textfield;
  }

  .tp-purchase .qty::-webkit-outer-spin-button,
  .tp-purchase .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Steppers replace the native spinner only when the document is scripted. */
  .tp-qty__btn {
    display: none;
    width: var(--tp-qty-btn-w);
    height: var(--tp-qty-btn-h);
    align-items: center;
    justify-content: center;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-input);
    color: var(--tp-color-ink);
  }

  .tp-js .tp-qty__btn {
    display: flex;
  }

  .tp-js .tp-purchase .qty {
    border-inline: var(--tp-border);
  }

  .tp-purchase button.single_add_to_cart_button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tp-btn-h-primary);
    padding: 0 var(--tp-space-6);
    background: var(--tp-color-ink);
    border: 1px solid var(--tp-color-ink);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-xl);
    letter-spacing: var(--tp-track-label);
    text-transform: uppercase;
    color: var(--tp-color-paper);
    text-align: center;
    transition: background-color var(--tp-dur-fast) ease, border-color var(--tp-dur-fast) ease;
  }

  .tp-purchase button.single_add_to_cart_button:hover {
    background: var(--tp-color-cobalt);
    border-color: var(--tp-color-cobalt);
  }

  .tp-purchase button.single_add_to_cart_button.disabled,
  .tp-purchase button.single_add_to_cart_button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .tp-purchase button.single_add_to_cart_button.is-busy {
    opacity: 0.7;
    pointer-events: none;
  }

  /* Add to Cart and Objects of Desire share one column, stacked as exported. */
  .tp-purchase__actions {
    flex: 1;
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  .tp-purchase__status:empty {
    display: none;
  }

  .tp-purchase__status {
    margin-top: var(--tp-space-4);
    font-size: var(--tp-size-body-s);
    font-style: italic;
    color: var(--tp-color-text-body);
  }

  .tp-purchase__status.is-error {
    color: var(--tp-color-ink);
  }

  @media (max-width: 699px) {
    .tp-purchase form.cart,
    .tp-purchase .woocommerce-variation-add-to-cart {
      display: grid;
      gap: 18px;
      margin-top: var(--tp-space-6);
    }
  }

  /* ---- soft launch: enquiry first --------------------------------------
     WooCommerce's form still renders — variations, quantity and stock are
     unchanged — but its submit is stood down so Request to Purchase is the
     customer-facing control. Restoring checkout is a one-line filter. */
  .tp-purchase--request button.single_add_to_cart_button {
    display: none;
  }