/* =========================================================
   FT — SINGLE PRODUCT PAGE (ADD TO CART BUTTON)
   ---------------------------------------------------------
   Scope:   Single product pages only (.single-product)
   Purpose: Styles the Add to Cart button as a luxury,
            elevated element with warm taupe (#756f68)
            background, subtle lift on hover, and a pressed
            feel on click.
   
   What this does:
   1. Sets the button in warm taupe with white text,
      capitalized label, wide letter-spacing, and a
      soft drop shadow for a floating effect.
   2. On hover, lightens slightly and lifts 2px with a
      deeper shadow.
   3. On active/click, presses back down to zero with a
      tighter shadow for tactile feedback.
   4. On focus, removes the default outline and adds a
      clean custom focus ring for accessibility.
   5. On desktop (769px+), tightens the button to 44px
      height with 8px radius and smaller text for a more
      refined proportion alongside the quantity control.
   
   Cleanup: Consolidated from three separate blocks in the
   original CSS that had conflicting background colors.
   Warm taupe (#756f68) was the value actually rendering
   on the live site.
   ========================================================= */

/* --- BASE (ALL DEVICES) --- */

.single-product .single_add_to_cart_button {
  -webkit-appearance: none;
  appearance: none;

  background-color: #756f68;
  color: #ffffff;

  border: none;
  border-radius: 14px;

  padding: 0 2.6em;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: capitalize;

  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;

  cursor: pointer;
}

/* Hover — subtle lift */
.single-product .single_add_to_cart_button:hover {
  background-color: #847d76;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

/* Active — pressed feel */
.single-product .single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
}

/* Focus — clean ring */
.single-product .single_add_to_cart_button:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(117,111,104,0.35),
    0 14px 34px rgba(0,0,0,0.16);
}

/* --- MOBILE --- */

@media (max-width: 768px) {
  .single-product .single_add_to_cart_button {
    width: 100%;
    height: 54px;
    border-radius: 14px;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }
}

/* --- DESKTOP --- */

@media (min-width: 769px) {
  .single-product .single_add_to_cart_button {
    height: 44px;
    padding: 0 34px;
    border-radius: 8px;
    font-size: 0.78rem;
    box-shadow: none; /* removes base shadow for flatter desktop look */
  }

  .single-product .single_add_to_cart_button:hover {
    background-color: #847d76;
  }
}