/* =========================================================
   FT — SINGLE PRODUCT PAGE (PURCHASE CARD & VARIATION WRAP)
   ---------------------------------------------------------
   Scope:   Single product pages only (.single-product)
   Purpose: Controls the price typography, variation-wrap
            fade-in behavior.

   Design intent:
   - MOBILE: Qty + button stack vertically with
     full-width button.
   - DESKTOP: No card. Price, qty, and button share a
     single horizontal row, left-aligned. The price acts
     as a value label, qty as a modifier, button as the
     action — all one grammatical line, compact and
     editorial. Avoids orphaned rows and gives the button
     a visual companion in the price rather than empty space.

   Zones on desktop:
   1. Title + short description (left-aligned, top)
   2. Dropdown full-width + Price/Qty/Button row (left-aligned)
   3. Shipping estimate + brand voice (centered, bottom)
      → handled by plugin config + Cornerstone
   ========================================================= */


/* --- PRICE TYPOGRAPHY (SINGLE PRODUCT ONLY) ---
   .summary scope for simple products; variation-price
   selectors are unique to variable-product markup and
   don't appear in the mini-cart, so they're safe unscoped. */

.single-product div.product > .summary .price,
.single-product div.product > .summary .price .woocommerce-Price-amount,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .woocommerce-Price-amount {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #f58aa0;
}


/* --- FADE-IN BEHAVIOR (ALL DEVICES) --- */

.single-product .single_variation_wrap {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.single-product .single_variation_wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* --- COLLAPSE EMPTY STATE --- */

.single-product
.single_variation_wrap:has(.single_variation[style*="display: none"]) {
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}


/* --- STOCK LABELS (GLOBAL) --- */

.single-product .stock.in-stock {
  display: none !important;
}

.single-product .stock.out-of-stock,
.single-product .stock.available-on-backorder {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin-top: 4px;
}


/* =========================================================
   MOBILE (≤768px) — CARD SURFACE
   ---------------------------------------------------------
   Stack vertically with full-width button.
   NOTE: Mobile toggles display:none/block because opacity
   transitions don't animate display changes — intentional
   tradeoff for the card pop-in behavior.
   ========================================================= */

@media (max-width: 768px) {

  /* --- VARIABLE PRODUCTS --- */

  /* Show/hide on variation select — no card wrapping */
  .single-product .single_variation_wrap {
    display: none;
    margin-top: 1rem !important;
  }

  .single-product .single_variation_wrap.is-visible {
    display: block;
  }

  /* Price — left-aligned, own row */
  .single-product .woocommerce-variation {
    margin: 0 0 8px 0;
  }

  .single-product .woocommerce-variation-price {
    text-align: left;
    margin: 0;
  }

  .single-product .woocommerce-variation-price .price {
    font-size: 1.7rem;
    margin: 0;
    line-height: 1.2;
  }

  /* Qty + button — stacked vertically, button full-width below qty */
  .single-product .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
  }

  .single-product .woocommerce-variation-add-to-cart .quantity {
    align-self: center;
    margin: 0;
  }

  .single-product .quantity input.qty {
    width: 44px;
    height: 40px;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
  }

  /* --- SIMPLE PRODUCTS --- */

  .single-product .summary > .price {
    text-align: left;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
    float: none;
  }

  .single-product .summary > .price .woocommerce-Price-amount {
    font-size: 1.7rem;
  }

  .single-product form.cart:not(.variations_form) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0 !important;
    float: none !important;
    clear: both;
  }

  .single-product form.cart:not(.variations_form) .quantity {
    align-self: center;
    margin: 0;
  }
}


/* =========================================================
   DESKTOP (769px+) — INLINE PURCHASE ROW
   ---------------------------------------------------------
   Price, qty, and button on a single horizontal line.
   Left-aligned, no compression on the button text.
   Price acts as the opening element of the purchase row,
   giving the button a visual partner instead of empty space.
   ========================================================= */

@media (min-width: 769px) {

  /* --- VARIABLE PRODUCTS --- */

  .single-product .single_variation_wrap.is-visible {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 0rem !important;
    margin-bottom: 26px !important;
  }

  .single-product .woocommerce-variation {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  .single-product .woocommerce-variation-price {
    text-align: left;
    margin: 0 !important;
  }

  .single-product .woocommerce-variation-price .price {
    font-size: 1.7rem;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  .single-product .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end !important;
    gap: 14px;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  .single-product .quantity {
    margin: 0;
    flex: 0 0 auto;
  }

  .single-product .quantity input.qty {
    width: 56px;
    height: 44px;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
  }

  /* Keep "Add To Cart" on one line — prevent flex compression */
  .single-product .single_add_to_cart_button {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* --- SIMPLE PRODUCTS --- */

  .single-product .summary > .price {
    display: inline-block;
    text-align: left;
    margin: 1.5rem 20px 26px 0 !important;
    line-height: 1.2 !important;
    vertical-align: middle;
    white-space: nowrap;
  }

  .single-product .summary > .price .woocommerce-Price-amount {
    font-size: 1.7rem;
  }

  .single-product form.cart:not(.variations_form) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin: 1.5rem 0 26px 0 !important;
    vertical-align: middle;
  }

  /* Force price + form.cart onto one line for simple products */
  .single-product.product-type-simple .summary > .price,
  .single-product.product-type-simple form.cart {
    display: inline-flex;
    vertical-align: middle;
  }
}

/* =========================================================
   FT — SHORTCODE-EMITTED PRICE STYLING
   ---------------------------------------------------------
   The [ft_single_price] shortcode outputs <p class="price">
   inside a Cornerstone container (Raw Content element), so
   it's not a direct child of .summary like native WooCommerce
   would emit. These rules target the shortcode output wherever
   Cornerstone places it on a single-product page.

   Covers both states:
   - Logged in: <p class="price"> with native Woo price markup
     (including <del>/<ins> sale spans)
   - Logged out: <p class="price"> with B2BKing-matching
     .b2bking_hidden_price_text > <a> "Log In to View Prices"
   ========================================================= */

/* Base — applies to any .price rendered by the shortcode */
.single-product p.price {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #f58aa0;
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 0 0 14px 0;
  text-align: left;
}

/* Make the .woocommerce-Price-amount inside inherit the treatment */
.single-product p.price .woocommerce-Price-amount {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
}

/* Guest "Log In to View Prices" link — inherit the pink italic */
.single-product p.price .b2bking_hidden_price_text,
.single-product p.price .b2bking_hidden_price_text a {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}