/* ==========================================================================
   MegaPets 2.0 — Product Card Purchase Block

   File:
   components/product/product-card/blocks/purchase/purchase.css

   Responsibility:
   - Purchase layout
   - Quantity controls
   - Official WooCommerce add-to-cart button
   - MegaPets cart icon
   - Purchase states
   ========================================================================== */

/* ==========================================================================
   PURCHASE
   ========================================================================== */

.product-card-buy {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    height: var(--mp-product-card-buy-height);
    margin-top: 0;
    border: 0;
    border-radius: var(--mp-product-card-control-radius);
    overflow: hidden;
    isolation: isolate;
    background: var(--mp-product-card-background-color);
}

.product-card-buy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--mp-product-card-buy-frame-z);
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--mp-product-card-buy-frame-light-color) 0%,
        var(--mp-product-card-buy-frame-light-color) 46%,
        var(--mp-product-card-buy-frame-mid-color) 56%,
        var(--mp-product-card-buy-frame-dark-color) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

.product-card-quantity,
.product-card-cart-wrap {
    position: relative;
    z-index: var(--mp-product-card-buy-content-z);
    height: var(--mp-product-card-buy-height);
    min-height: var(--mp-product-card-buy-height);
}

.product-card-quantity {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: var(--mp-product-card-background-color);
}

.product-card-quantity button,
.product-card-quantity-value {
    height: var(--mp-product-card-buy-height);
    min-height: var(--mp-product-card-buy-height);
}

.product-card-quantity button {
    border: 0;
    background: var(--mp-product-card-background-color);
    color: var(--mp-product-card-text-main-color);
    font-family: var(--mp-product-card-text-font);
    font-size: var(--mp-product-card-quantity-button-size);
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--mp-product-card-speed-fast) ease,
        background var(--mp-product-card-speed-fast) ease;
}

.product-card-quantity button:disabled,
.product-card-quantity button.is-disabled {
    color: var(--mp-product-card-text-disabled-color);
    cursor: default;
    opacity: 1;
    pointer-events: none;
}

.product-card-quantity button:not(:disabled):active {
    color: var(--mp-color-action-primary);
    background: var(--mp-product-card-background-color);
}

.product-card-quantity-value {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-product-card-text-main-color);
    font-family: var(--mp-product-card-text-font);
    font-size: var(--mp-product-card-quantity-value-size);
    line-height: 1;
    font-weight: var(--mp-product-card-font-weight-medium);
    transition: color var(--mp-product-card-speed-fast) ease;
}

/* ==========================================================================
   OFFICIAL WOOCOMMERCE QUANTITY
   ========================================================================== */

.product-card-wc-quantity {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   OFFICIAL WOOCOMMERCE ADD-TO-CART BUTTON
   ========================================================================== */

.product-card-cart-wrap {
    overflow: hidden;
    isolation: isolate;
}

.product-card-cart-wrap[data-product-card-cart-wrap]
.product-card-cart {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: var(--mp-product-card-buy-height);
    min-height: var(--mp-product-card-buy-height);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: var(--mp-product-card-buy-height) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    overflow: hidden;
    transition: none;
}

.product-card-cart-wrap .product-card-cart:focus-visible {
    outline: 0;
}

.product-card-cart-wrap .added_to_cart {
    display: none !important;
}

/* ==========================================================================
   CART VISUAL
   ========================================================================== */

.product-card-cart-visual {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mp-action-primary-background);
    color: var(--mp-product-card-icon-light-color);
    pointer-events: none;
    transition: none;
}

.product-card-cart:hover
~ .product-card-cart-visual {
    background: var(--mp-action-primary-background-hover);
}

.product-card-cart:focus-visible
~ .product-card-cart-visual {
    background: var(--mp-action-primary-background-hover);
    box-shadow:
        inset 0 0 0 2px
        var(--mp-color-action-primary);
}

.product-card-cart:active
~ .product-card-cart-visual,
.product-card-cart.loading
~ .product-card-cart-visual,
.product-card-cart.added
~ .product-card-cart-visual,
.product-card-cart-wrap.is-loading
.product-card-cart-visual {
    background: var(--mp-action-primary-background-active);
}

.product-card-cart-icon,
.product-card-cart-visual .product-card-cart-icon {
    width: var(--mp-product-card-cart-icon-size);
    height: var(--mp-product-card-cart-icon-size);
    display: block;
    opacity: 1;
    visibility: visible;
    fill: none;
    stroke: var(--mp-product-card-icon-light-color);
    stroke-width: 3.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-card-cart-icon-dot {
    fill: var(--mp-product-card-icon-light-color);
    stroke: var(--mp-product-card-icon-light-color);
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.product-card-buy.is-loading .product-card-quantity button {
    cursor: wait;
}

.product-card-cart-wrap[data-product-card-cart-wrap].is-loading
.product-card-cart {
    cursor: wait;
}

/* ==========================================================================
   PURCHASE STATE ACTIONS
   ========================================================================== */

.product-card-buy-action {
    display: block;
}

.product-card-purchase-action {
    position: relative;
    z-index: var(--mp-product-card-buy-content-z);
    width: 100%;
    height: var(--mp-product-card-buy-height);
    min-height: var(--mp-product-card-buy-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--mp-product-card-control-radius);
    font-family: var(--mp-product-card-text-font);
    font-size: 13px;
    line-height: 1;
    font-weight: var(--mp-product-card-font-weight-semibold);
    text-decoration: none;
    text-align: center;
}

.product-card-purchase-action-cart {
    background: var(--mp-action-primary-background);
    color: #fff;
    cursor: pointer;
    transition: none;
}

.product-card-purchase-action-cart:hover {
    background: var(--mp-action-primary-background-hover);
    color: #fff;
}

.product-card-purchase-action-cart:active {
    background: var(--mp-action-primary-background-active);
    color: #fff;
}

.product-card-purchase-action-cart:focus-visible {
    outline: 2px solid var(--mp-color-action-primary);
    outline-offset: -3px;
}

.product-card-purchase-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-purchase-action-disabled {
    background: var(--mp-product-card-background-color);
    color: var(--mp-product-card-text-muted-color);
    cursor: default;
}

/* ========================================================================== 
   PURCHASE RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {

    .product-card-quantity button {
        font-size: var(--mp-product-card-quantity-button-mobile-size);
    }
}