/*
================================================

Space Vanta Theme 1.0

Module:
Product Collection / Cart

Version:
PRODUCT-COLLECTION-CART-BRAND-004

Purpose:
Add to Cart Brand DNA
Variant / Commerce Alignment

Visual Direction:

- Spatial
- Constructed
- Directional
- Silver / Gray
- Cold Technical Detail
- Restrained Commerce Interaction

IMPORTANT:

Functional behavior is intentionally untouched.

This file controls visual presentation only.

Does NOT control:

- Variant selection
- SKU resolution
- Cart mutation
- Cart Preview
- Shipping
- Checkout

================================================
*/


/* =================================================
   01. PRODUCT CARD
================================================= */

.sv-product-collection__product-card {

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

}


/* =================================================
   02. PRODUCT INFORMATION
================================================= */

.sv-product-collection__product-information {

    width: 100%;

    min-width: 0;

    margin-top: 18px;

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

}


/* =================================================
   03. VARIANT + PRICE + CART COMMERCE COLUMN
================================================= */

.sv-product-collection__variant-selector,
.sv-product-collection__product-price,
.sv-product-collection__product-cart {

    width: 100%;

    box-sizing: border-box;

}


/* =================================================
   04. PRODUCT CART
================================================= */

.sv-product-collection__product-cart {

    width: 100%;

    margin-top: auto;

    padding-top: 18px;

}


/* =================================================
   05. ADD TO CART
================================================= */

.sv-product-collection__add-to-cart {

    position: relative;

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    padding:
        0 14px 0 16px;

    margin: 0;

    border:
        1px solid rgba(79, 94, 108, 0.52);

    border-radius: 0;

    background:
        linear-gradient(105deg,
            rgba(242, 244, 246, 0.74) 0%,
            rgba(248, 248, 247, 0.48) 52%,
            rgba(226, 231, 234, 0.68) 100%);

    color:
        inherit;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.085em;

    text-align:
        left;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

    overflow:
        hidden;

    isolation:
        isolate;

    touch-action:
        manipulation;

    transition:
        background 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 160ms ease;

}


/* =================================================
   06. CONSTRUCTED CORNERS
================================================= */

.sv-product-collection__add-to-cart::before {

    content: "";

    position: absolute;

    z-index: 3;

    top: -1px;
    left: -1px;

    width: 19px;
    height: 19px;

    border-top:
        1px solid rgba(63, 80, 96, 0.82);

    border-left:
        1px solid rgba(63, 80, 96, 0.82);

    pointer-events:
        none;

}


.sv-product-collection__add-to-cart::after {

    content: "";

    position: absolute;

    z-index: 3;

    right: -1px;
    bottom: -1px;

    width: 19px;
    height: 19px;

    border-right:
        1px solid rgba(63, 80, 96, 0.82);

    border-bottom:
        1px solid rgba(63, 80, 96, 0.82);

    pointer-events:
        none;

}


/* =================================================
   07. LABEL
================================================= */

.sv-product-collection__add-to-cart-label {

    position: relative;

    z-index: 4;

    display: block;

    white-space:
        nowrap;

    transition:
        letter-spacing 220ms ease,
        opacity 180ms ease;

}


/* =================================================
   08. DIRECTIONAL MARK
================================================= */

.sv-product-collection__add-to-cart-mark {

    position: relative;

    z-index: 4;

    width: 24px;

    height: 24px;

    flex:
        0 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border-left:
        1px solid rgba(86, 101, 115, 0.28);

    font-size:
        15px;

    line-height:
        1;

    transform:
        translateX(0);

    opacity:
        0.82;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        opacity 180ms ease;

}


/* =================================================
   09. HOVER
================================================= */

.sv-product-collection__add-to-cart:hover {

    border-color:
        rgba(63, 80, 96, 0.72);

    background:
        linear-gradient(105deg,
            rgba(232, 236, 239, 0.88) 0%,
            rgba(249, 249, 248, 0.62) 50%,
            rgba(215, 222, 227, 0.78) 100%);

    box-shadow:
        0 8px 22px rgba(45, 58, 70, 0.08);

}


.sv-product-collection__add-to-cart:hover .sv-product-collection__add-to-cart-label {

    letter-spacing:
        0.105em;

}


.sv-product-collection__add-to-cart:hover .sv-product-collection__add-to-cart-mark {

    transform:
        translateX(4px);

    border-color:
        rgba(75, 91, 106, 0.42);

    opacity:
        1;

}


/* =================================================
   10. FOCUS
================================================= */

.sv-product-collection__add-to-cart:focus-visible {

    outline:
        1px solid rgba(65, 84, 101, 0.76);

    outline-offset:
        3px;

}


/* =================================================
   11. ACTIVE
================================================= */

.sv-product-collection__add-to-cart:active {

    transform:
        translateY(1px);

    box-shadow:
        none;

}


.sv-product-collection__add-to-cart:active .sv-product-collection__add-to-cart-mark {

    transform:
        translateX(1px);

}


/* =================================================
   12. LOADING
================================================= */

/*
 * IMPORTANT:
 *
 * No animation is applied to the directional mark.
 *
 * This prevents ↗ from visually becoming
 * a loading spinner on mobile.
 */

.sv-product-collection__add-to-cart[data-cart-loading="true"] {

    cursor:
        wait;

    border-color:
        rgba(67, 85, 101, 0.64);

    background:
        rgba(229, 233, 236, 0.78);

}


.sv-product-collection__add-to-cart[data-cart-loading="true"] .sv-product-collection__add-to-cart-mark {

    opacity:
        0.58;

    transform:
        none;

}


/* =================================================
   13. SUCCESS
================================================= */

.sv-product-collection__add-to-cart[data-cart-success="true"] {

    border-color:
        rgba(61, 81, 97, 0.76);

    background:
        rgba(226, 232, 235, 0.82);

}


.sv-product-collection__add-to-cart[data-cart-success="true"] .sv-product-collection__add-to-cart-mark {

    transform:
        translateX(3px);

    opacity:
        1;

}


/* =================================================
   14. ERROR
================================================= */

.sv-product-collection__add-to-cart[data-cart-error="true"] {

    border-color:
        rgba(92, 105, 116, 0.64);

    background:
        rgba(241, 242, 241, 0.82);

}


/* =================================================
   15. DISABLED
================================================= */

.sv-product-collection__add-to-cart:disabled {

    cursor:
        default;

}


/* =================================================
   16. MOBILE
================================================= */

@media (max-width: 767px) {

    .sv-product-collection__product-information {

        margin-top:
            14px;

    }


    .sv-product-collection__product-cart {

        padding-top:
            14px;

    }


    .sv-product-collection__add-to-cart {

        min-height:
            48px;

        padding:
            0 11px 0 13px;

        border-color:
            rgba(70, 86, 101, 0.58);

        background:
            linear-gradient(105deg,
                rgba(239, 242, 244, 0.84) 0%,
                rgba(248, 248, 247, 0.58) 52%,
                rgba(224, 229, 232, 0.76) 100%);

        font-size:
            10px;

        letter-spacing:
            0.075em;

    }


    .sv-product-collection__add-to-cart-label {

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

    }


    .sv-product-collection__add-to-cart-mark {

        width:
            24px;

        height:
            24px;

        flex-basis:
            24px;

        margin-left:
            8px;

        font-size:
            14px;

        opacity:
            0.82;

    }


    .sv-product-collection__add-to-cart::before,
    .sv-product-collection__add-to-cart::after {

        width:
            14px;

        height:
            14px;

    }


    /*
     * Mobile loading:
     * static directional mark only.
     */

    .sv-product-collection__add-to-cart[data-cart-loading="true"] .sv-product-collection__add-to-cart-mark {

        animation:
            none;

        transform:
            none;

        opacity:
            0.56;

    }


    .sv-product-collection__add-to-cart:active {

        transform:
            translateY(1px);

    }

}


/* =================================================
   17. REDUCED MOTION
================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-product-collection__add-to-cart,
    .sv-product-collection__add-to-cart-label,
    .sv-product-collection__add-to-cart-mark {

        transition:
            none;

    }


    .sv-product-collection__add-to-cart[data-cart-loading="true"] .sv-product-collection__add-to-cart-mark {

        animation:
            none;

    }

}


/* =========================================================
   SPACE VANTA
   PRODUCT COLLECTION — MOBILE CART ARROW
   Isolated CSS geometry
   Desktop and cart behavior remain unchanged
   ========================================================= */

@media (max-width: 767px) {

  .sv-product-collection__add-to-cart-mark {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 0;
    line-height: 0;

    color: inherit;
  }

  /* Arrow head */
  .sv-product-collection__add-to-cart-mark::before {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-top: 1.4px solid currentColor;
    border-right: 1.4px solid currentColor;

    transform: translate(-1px, 1px);

    pointer-events: none;
  }

  /* Diagonal shaft */
  .sv-product-collection__add-to-cart-mark::after {
    content: "";

    position: absolute;

    width: 12px;
    height: 1.4px;

    background: currentColor;

    transform: rotate(-45deg);

    pointer-events: none;
  }

  /* Preserve static arrow during cart loading */
  .sv-product-collection__add-to-cart[data-cart-loading="true"]
  .sv-product-collection__add-to-cart-mark {
    font-size: 0;
    transform: none;
  }
}