/* Atelier — "Buy Now" button on the single product page.

   Sits beside Add to Cart, matched in size. Black fill / white text to go with
   the logo, plus a slow ambient sheen so the conversion action catches the eye.

   The sheen is painted with background-image on the element itself rather than
   a ::before overlay — WooCommerce and Woodmart already use both pseudo
   elements on cart buttons for icons and the AJAX spinner. */

/* Sit in the same flex row as quantity + Add to Cart rather than claiming a
   row of its own. The parent (.woocommerce-variation-add-to-cart on a variable
   product, form.cart on a simple one) is already a wrapping flex container, so
   `flex: 0 1 auto` is enough to join it — `width: 100%` is what pushed the
   button onto its own line. */
form.cart .atelier-buy-now {
  flex: 0 1 auto !important;
  width: auto !important;
  margin: 0 0 0 10px !important;
  min-height: 0 !important;
}

/* Equal boxes. Neither label is wider than this, so both settle on the same
   width without hard-coding a number per button. Height is left alone: the
   button already carries WooCommerce's own `.button` class and matches. */
form.cart .single_add_to_cart_button,
form.cart .atelier-buy-now {
  min-width: 160px !important;
}

.atelier-buy-now {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 24px !important;

  border: 0 !important;
  border-radius: 0;
  cursor: pointer;

  background-color: #000 !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;

  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 62%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 220% 100% !important;
  background-position: 165% 0 !important;

  /* Ambient pass every few seconds so the button catches the eye without
     moving anything around it. */
  animation: atelier-bn-sheen 4.5s ease-in-out 1.2s infinite;
  transition: transform 0.18s ease, box-shadow 0.28s ease,
              background-color 0.25s ease;
}

@keyframes atelier-bn-sheen {
  0%        { background-position: 165% 0; }
  28%, 100% { background-position: -65% 0; }
}

.atelier-buy-now:hover {
  background-color: #1f1f1f !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  /* Hand the sheen to the hover sweep so the two don't fight. */
  animation: none;
  background-position: -65% 0 !important;
  transition: transform 0.18s ease, box-shadow 0.28s ease,
              background-color 0.25s ease, background-position 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.atelier-buy-now:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

.atelier-buy-now:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 3px;
}

/* Mirrors WooCommerce's own disabled Add to Cart while no variation is chosen. */
.atelier-buy-now.is-disabled,
.atelier-buy-now:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  animation: none;
  transform: none;
  box-shadow: none;
}

/* Between the click and the page turn, show the button is working. */
.atelier-buy-now.is-loading {
  opacity: 0.75;
  pointer-events: none;
  animation: none;
}
.atelier-buy-now.is-loading .atelier-buy-now__label {
  opacity: 0.6;
}

/* Quantity + two 160px buttons need ~400px of row. Below that they'd wrap and
   the left margin would leave Buy Now oddly indented, so stack it full width. */
@media (max-width: 480px) {
  form.cart .atelier-buy-now {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-buy-now,
  .atelier-buy-now:hover {
    animation: none;
    transition: background-color 0.2s ease;
    transform: none;
    box-shadow: none;
  }
}