/*
 * RightAir Components - Product Card
 * Intrinsic product presentation and interaction states.
 * This file must not contain slider movement, grid columns or page-level layout.
 */

/* v0.7.37 - Shared-surface parity correction
 * Restore the approved card controls for every renderer, not only cards inside
 * The shared card is consumed by every product surface while containers retain
 * their own layout and movement behaviour.
 */

/* Approved button interaction belongs to the product card. */
html body .ra-product-surface .ra-product-card__actions .ra-button {
    gap: 0 !important;
    transition: background-color .18s ease !important;
}
html body .ra-product-surface .ra-product-card__actions .ra-button:hover,
html body .ra-product-surface .ra-product-card__actions .ra-button:focus-visible,
html body .ra-product-surface .ra-product-card__actions .ra-button:active {
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

html body .ra-product-surface .ra-product-card__actions .ra-button--quote:hover,
html body .ra-product-surface .ra-product-card__actions .ra-button--quote:focus-visible,
html body .ra-product-surface .ra-product-card__actions .ra-button--quote:active {
    background-color: var(--ra-comfort-blue) !important;
}

html body .ra-product-surface .ra-product-card__actions .ra-button--cart:hover,
html body .ra-product-surface .ra-product-card__actions .ra-button--cart:focus-visible,
html body .ra-product-surface .ra-product-card__actions .ra-button--cart:active {
    background-color: #48a0dc !important;
}

/* Preserve the approved icon footprint in slider and grid cards. */
html body .ra-product-surface .ra-button__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 7px !important;
    overflow: visible !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    transition: flex-basis .15s ease, width .15s ease, margin-right .15s ease, opacity .15s ease !important;
}

html body .ra-product-surface .ra-button.is-loading .ra-button__icon {
    flex-basis: 0 !important;
    width: 0 !important;
    margin-right: 0 !important;
    opacity: 0 !important;
}

/* v0.9.7 - Canonical card loading state
 * Quote keeps its YITH-driven feedback. Cart loading is driven by WooCommerce's
 * native .loading lifecycle so Side Cart Pro receives the standard add-to-cart
 * request and events. Both buttons use the same single in-button spinner.
 */
html body .ra-product-surface .ra-button__spinner {
    box-sizing: border-box !important;
    display: inline-block !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 solid rgba(255, 255, 255, .45) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    line-height: 0 !important;
    vertical-align: middle !important;
    transform-origin: center center !important;
    animation: ra-button-spin .7s linear infinite !important;
    transition: none !important;
}

html body .ra-product-surface .ra-button.is-loading .ra-button__spinner,
html body .ra-product-surface .ra-button--cart.loading .ra-button__spinner {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    margin: 0 7px 0 0 !important;
    border-width: 2px !important;
    opacity: 1 !important;
    order: -1 !important;
}

html body .ra-product-surface .ra-button--cart.loading .ra-button__icon {
    flex-basis: 0 !important;
    width: 0 !important;
    margin-right: 0 !important;
    opacity: 0 !important;
}

html body .ra-product-surface .ra-button--cart.loading::before,
html body .ra-product-surface .ra-button--cart.loading::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* YITH may inject a second loader beside the quote button. The RightAir button
 * already owns its loader, so suppress only those external injected elements. */
html body .ra-product-card__actions > img.ajax-loading,
html body .ra-product-card__actions > img.yith-ywraq-loader,
html body .ra-product-card__actions > img.yith_ywraq_loader,
html body .ra-product-card__actions > span.ajax-loading,
html body .ra-product-card__actions > .ajax-loading,
html body .ra-product-card__actions > .yith-ywraq-loader,
html body .ra-product-card__actions > .yith_ywraq_loader {
    position: absolute !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* v0.7.39 - External quote-loader containment
 * YITH/WooCommerce can inject its loader inside a wrapper or as a blockUI
 * overlay. The card owns the visible loading state, so these external visual
 * loaders must never occupy space inside the action area. */
html body .ra-product-card__actions .blockUI,
html body .ra-product-card__actions .blockOverlay,
html body .ra-product-card__actions .blockMsg,
html body .ra-product-card__actions img.ajax-loading,
html body .ra-product-card__actions span.ajax-loading,
html body .ra-product-card__actions img.yith-ywraq-loader,
html body .ra-product-card__actions img.yith_ywraq_loader,
html body .ra-product-card__actions .yith-ywraq-loader,
html body .ra-product-card__actions .yith_ywraq_loader,
html body .ra-product-card__actions [class*="yith"][class*="loader"],
html body .ra-product-card__actions img[src*="ajax-loader"],
html body .ra-product-card__actions img[src*="spinner"] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* v0.8.15 - Canonical square featured-image treatment
 * Product artwork now uses the full shared card image stage. Standard 1200 x
 * 1200 featured images crop vertically inside the existing card ratio. The
 * small white inset above the title is taken from the image stage, preserving
 * the approved lower-card spacing.
 */
html body .ra-product-card__image {
    border-bottom: 6px solid #fff !important;
    padding: 0 !important;
}

html body .ra-product-card__image img,
html body .ra-product-card__image-el {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
}

/* v0.8.16 - Simple-product short description
 * Non-variable products use the card's existing variation zone for the WooCommerce
 * short description. The text is clamped so card alignment remains unchanged.
 */
html body .ra-product-card__short-description {
    grid-row: 3;
    display: -webkit-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--ra-text-muted, #6f7a90) !important;
    font-family: var(--ra-font) !important;
    font-size: clamp(9px, .52vw, 10px) !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    text-align: left !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

html body .ra-product-card__short-description--empty {
    visibility: hidden !important;
}