/**
 * Single Product — Cart Layout overrides.
 *
 * Goal:
 *  - Make "Add to Cart" the dominant CTA (~78% width, heavier weight).
 *  - Place the "Like this design" button on the SAME row at ~18% width.
 *  - Like button visually first ({like icon 0}{add to cart}).
 *  - Both buttons stay 60px tall — matches the original look.
 *  - Variations / quantity stay on their own rows above the cart row.
 *  - Wrap gracefully on narrow viewports (the like button drops to its own
 *    row at <=600px via the existing rule in single-product.css).
 *
 * IMPORTANT — TWO CONTAINERS:
 *   - SIMPLE product:    cart + like are direct children of `form.cart`.
 *   - VARIABLE product:  cart + like live inside `.woocommerce-variation-add-to-cart`.
 *   Both must be styled identically. The existing single-product.css declares
 *   `form.cart { flex-direction: column; }` AND
 *   `.woocommerce-variation-add-to-cart { flex-direction: column; }` — both
 *   have to be re-pointed to `row` with `flex-wrap: wrap`.
 *
 * Enqueued AFTER `mypod-single-product`, so this stylesheet wins on tied
 * specificity. `!important` is used only where the existing rules use it.
 */

/* ====================================================================
   1. Cart row containers — both simple + variable product cases.

   IMPORTANT: We DO NOT change `flex-direction` on form.cart. Variable
   products nest the cart layout INSIDE `.single_variation_wrap` →
   `.woocommerce-variation-add-to-cart`, while form.cart itself contains
   the `.variations` table as a sibling. Forcing `flex-direction: row` on
   form.cart caused the variations table and the single-variation wrapper
   to land on the same row.

   Instead: leave form.cart in its existing column flow (declared in
   single-product.css), and only switch the inner add-to-cart container
   to row+wrap. That's the only place we actually want the cart + like
   buttons to lay out side-by-side.
   ==================================================================== */
.mypod-single-product .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 12px;
}

/* Simple products — form.cart contains qty + cart + like as direct
   children with no variations. Make them lay out as a row too, but
   without disturbing the column flow declared in single-product.css for
   variable products: target only the simple-product case via
   :not(.variations_form). */
.mypod-single-product form.cart:not(.variations_form) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 12px;
}

/* Quantity input takes its own full-width row above the cart+like row,
   for both simple and variable products. */
.mypod-single-product form.cart:not(.variations_form) > .quantity,
.mypod-single-product .woocommerce-variation-add-to-cart > .quantity {
    flex: 1 1 100%;
    min-width: 0;
}

/* ====================================================================
   2. Visual order — Like first, Add to Cart second.

   The buttons render in DOM order: cart, then like (cart from
   woocommerce_template_single_add_to_cart, like from
   woocommerce_after_add_to_cart_button at priority 5). Visual order is
   reversed via flex `order`. Note: keyboard tab order still follows DOM
   (cart → like), so screen-reader / keyboard users hit the primary CTA
   first — which is the desired focus order anyway.
   ==================================================================== */
.mypod-single-product form.cart .single_add_to_cart_button,
.mypod-single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    order: 2;
}

.mypod-single-product form.cart .mypod-sp__like-btn,
.mypod-single-product .woocommerce-variation-add-to-cart .mypod-sp__like-btn {
    order: 1;
}

/* ====================================================================
   3. Add to Cart — visually dominant CTA.
   Existing rules use !important on width/min-height/font-weight, so we
   mirror !important to override. Height stays at the original 60px.
   ==================================================================== */
.mypod-single-product form.cart .single_add_to_cart_button,
.mypod-single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.mypod-single-product .single_add_to_cart_button {
    /* Bolder typography for visual dominance. */
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    font-size: 1.0625rem !important;

    /* Defeat the existing width:100% so flex sizing applies. */
    width: auto !important;

    /* Take 78% of the row. The remaining 22% covers the like button +
       12px column gap. */
    flex: 1 1 78% !important;
    min-width: 0 !important;
}

/* ====================================================================
   4. Like button — companion CTA at ~18% on the same row.
   Mirrors the cart button's height (60px) so the row aligns.
   ==================================================================== */
.mypod-single-product form.cart .mypod-sp__like-btn,
.mypod-single-product .woocommerce-variation-add-to-cart .mypod-sp__like-btn {
    flex: 0 1 18%;
    min-width: 0;
    margin-left: 0;       /* Existing rule sets 10px; the form's gap covers it. */
    padding: 0 12px;       /* Tighter so icon + count fit at narrow widths. */
    justify-content: center;
}

/* Inner label must shrink instead of forcing overflow.
   NOTE: the new like-button render uses `.mypod-sp__like-count-wrap`
   (a new wrapper), not `.mypod-sp__like-label`. These rules harmlessly
   apply to both for backward compatibility with any cached HTML. */
.mypod-single-product form.cart .mypod-sp__like-btn .mypod-sp__like-label,
.mypod-single-product .woocommerce-variation-add-to-cart .mypod-sp__like-btn .mypod-sp__like-label,
.mypod-single-product form.cart .mypod-sp__like-btn .mypod-sp__like-count-wrap,
.mypod-single-product .woocommerce-variation-add-to-cart .mypod-sp__like-btn .mypod-sp__like-count-wrap {
    min-width: 0;
    overflow: visible; /* let the floater "+1" escape the wrap */
}

/* The count badge is informational — let it shrink last. */
.mypod-single-product form.cart .mypod-sp__like-btn .mypod-sp__like-count,
.mypod-single-product .woocommerce-variation-add-to-cart .mypod-sp__like-btn .mypod-sp__like-count {
    flex-shrink: 0;
}

/* ====================================================================
   5. Narrow viewports — keep the icon + count visible.
   The existing single-product.css rule at <=600px sets the like button
   to flex: 1 1 100% so it wraps to its own row — we leave that intact.
   ==================================================================== */
@media (max-width: 480px) {
    /* Guard tap-target size (existing 60px height already meets WCAG 2.5.5). */
    .mypod-single-product .mypod-sp__like-btn {
        min-height: 44px;
    }
}