/* Swix Product Hover Toggle - Frontend v1.3.3
   Fixes:
   1) product image is resolved per product ID;
   2) the original product image box is preserved, so grid height stays stable;
   3) WoodMart native hover layers are suppressed only after Swix is ready;
   4) native add-to-cart/select-options buttons remain available. */

.swix-hpc-enabled-product {
    --swix-hpc-card-shadow: 0 16px 38px rgba(0, 0, 0, 0.14);
    --swix-hpc-min-host-height: 180px;
    --swix-hpc-device-height: 86%;
}

.swix-hpc-ready.swix-hpc-enabled-product {
    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.swix-hpc-ready.swix-hpc-enabled-product:hover,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover {
    transform: translateY(-2px);
}

.swix-hpc-media-host {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate;
    min-height: var(--swix-hpc-min-host-height);
}

.swix-hpc-media-host.swix-hpc-host-measured {
    min-height: var(--swix-hpc-measured-height, var(--swix-hpc-min-host-height));
}

.swix-hpc-loop-image {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--swix-hpc-min-host-height);
    overflow: visible;
    isolation: isolate;
    pointer-events: none;
}

.swix-hpc-loop-image__item {
    position: absolute !important;
    left: 50% !important;
    bottom: 5% !important;
    z-index: 2;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: var(--swix-hpc-device-height) !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform-origin: 50% 78%;
    transition:
        transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.32s ease,
        filter 0.32s ease;
    will-change: transform;
    pointer-events: none !important;
    backface-visibility: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Base layout: stable and close to the reference three-device arrangement. */
.swix-hpc-loop-image__item--center {
    z-index: 4;
    opacity: 1;
    transform: translateX(-50%) scale(1.02);
}

.swix-hpc-loop-image__item--left {
    z-index: 3;
    opacity: 0.98;
    transform: translateX(-78%) rotate(-8deg) scale(0.96);
}

.swix-hpc-loop-image__item--right {
    z-index: 3;
    opacity: 0.98;
    transform: translateX(-22%) rotate(8deg) scale(0.96);
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-loop-image__item--center,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-loop-image__item--center {
    transform: translateX(-50%) translateY(-7px) scale(1.09);
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-loop-image__item--left,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-loop-image__item--left,
.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-loop-image__item--right,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-loop-image__item--right {
    opacity: 1;
}

/* Soft */
.swix-hpc-intensity-soft .swix-hpc-loop-image__item--center {
    transform: translateX(-50%) scale(1);
}

.swix-hpc-intensity-soft .swix-hpc-loop-image__item--left {
    transform: translateX(-70%) rotate(-5deg) scale(0.96);
}

.swix-hpc-intensity-soft .swix-hpc-loop-image__item--right {
    transform: translateX(-30%) rotate(5deg) scale(0.96);
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-intensity-soft .swix-hpc-loop-image__item--left,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-intensity-soft .swix-hpc-loop-image__item--left {
    transform: translateX(-88%) translateY(-4px) rotate(-10deg) scale(1.03);
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-intensity-soft .swix-hpc-loop-image__item--right,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-intensity-soft .swix-hpc-loop-image__item--right {
    transform: translateX(-12%) translateY(-4px) rotate(10deg) scale(1.03);
}

/* Medium */
.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-intensity-medium .swix-hpc-loop-image__item--left,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-intensity-medium .swix-hpc-loop-image__item--left {
    transform: translateX(-103%) translateY(-5px) rotate(-14deg) scale(1.06);
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-intensity-medium .swix-hpc-loop-image__item--right,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-intensity-medium .swix-hpc-loop-image__item--right {
    transform: translateX(3%) translateY(-5px) rotate(14deg) scale(1.06);
}

/* Strong */
.swix-hpc-intensity-strong .swix-hpc-loop-image__item--center {
    transform: translateX(-50%) scale(1.04);
}

.swix-hpc-intensity-strong .swix-hpc-loop-image__item--left {
    transform: translateX(-88%) rotate(-11deg) scale(0.98);
}

.swix-hpc-intensity-strong .swix-hpc-loop-image__item--right {
    transform: translateX(-12%) rotate(11deg) scale(0.98);
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-intensity-strong .swix-hpc-loop-image__item--left,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-intensity-strong .swix-hpc-loop-image__item--left {
    transform: translateX(-118%) translateY(-7px) rotate(-17deg) scale(1.08);
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .swix-hpc-intensity-strong .swix-hpc-loop-image__item--right,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .swix-hpc-intensity-strong .swix-hpc-loop-image__item--right {
    transform: translateX(18%) translateY(-7px) rotate(17deg) scale(1.08);
}

/* Keep expanded side devices visible. */
.swix-hpc-ready .product-image-link,
.swix-hpc-ready .product-element-top,
.swix-hpc-ready .wd-entities-thumb,
.swix-hpc-ready .woocommerce-LoopProduct-link,
.swix-hpc-ready .product-thumbnail,
.swix-hpc-ready .swix-hpc-media-host {
    overflow: visible !important;
}

/* Hide only the native product images inside the measured media host.
   They still occupy layout space, preventing product-card jump/collapse. */
.swix-hpc-ready .swix-hpc-media-host img:not(.swix-hpc-loop-image__item) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    filter: none !important;
}

/* Cancel WoodMart image swap and slider layers for Swix-ready cards. */
.swix-hpc-ready .product-element-top .hover-img,
.swix-hpc-ready .product-image-link .hover-img,
.swix-hpc-ready .wd-entities-thumb .hover-img,
.swix-hpc-ready .product-element-top .wd-product-grid-slider,
.swix-hpc-ready .product-element-top .wd-product-grid-slide,
.swix-hpc-ready .product-image-link .wd-product-grid-slider,
.swix-hpc-ready .product-image-link .wd-product-grid-slide {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide only non-purchase quick actions inside the image area.
   Native add-to-cart / Select Options controls are intentionally kept visible and clickable. */
.swix-hpc-ready .product-element-top .quick-view,
.swix-hpc-ready .product-element-top .quick-view-button,
.swix-hpc-ready .product-element-top .wd-quick-view-icon,
.swix-hpc-ready .product-element-top .wd-wishlist-btn,
.swix-hpc-ready .product-element-top .wd-compare-btn,
.swix-hpc-ready .product-element-top .compare,
.swix-hpc-ready .product-element-top .yith-wcwl-add-to-wishlist {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep native add-to-cart / select-options controls visible and clickable. */
.swix-hpc-ready .product-element-top .wd-add-btn,
.swix-hpc-ready .product-element-top .add_to_cart_button,
.swix-hpc-ready .product-element-top .product_type_variable,
.swix-hpc-ready .product-element-top .product_type_simple,
.swix-hpc-ready .product-element-top .single_add_to_cart_button,
.swix-hpc-ready .product-element-top a[href*="add-to-cart"] {
    display: inherit !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Cancel native image-container transform/filter/pseudo hover overlays. */
.swix-hpc-ready .product-element-top,
.swix-hpc-ready .product-image-link,
.swix-hpc-ready .wd-entities-thumb,
.swix-hpc-ready .woocommerce-LoopProduct-link {
    transform: none !important;
    filter: none !important;
}

.swix-hpc-ready .product-element-top::before,
.swix-hpc-ready .product-element-top::after,
.swix-hpc-ready .product-image-link::before,
.swix-hpc-ready .product-image-link::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.swix-hpc-ready .swix-hpc-loop-image,
.swix-hpc-ready .swix-hpc-loop-image__item {
    visibility: visible !important;
}

@media (max-width: 768px) {
    .swix-hpc-enabled-product {
        --swix-hpc-device-height: 80%;
    }

    .swix-hpc-ready.swix-hpc-enabled-product:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swix-hpc-loop-image__item,
    .swix-hpc-ready.swix-hpc-enabled-product {
        transition: none !important;
    }
}

/* v1.3.3 Add-to-cart visual stabilization for Swix-enabled cards.
   WoodMart places its native Add to cart / Select Options layer at the bottom of
   the image area. After the Swix three-device layer is injected, that native
   layer can overlap the product title. These rules keep the purchase action in
   the image area, reserve visual spacing, and restyle it as a compact CTA. */
.swix-hpc-ready.swix-hpc-enabled-product .swix-hpc-media-host,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top {
    margin-bottom: 18px !important;
}

.swix-hpc-ready.swix-hpc-enabled-product .wd-entities-title,
.swix-hpc-ready.swix-hpc-enabled-product .woocommerce-loop-product__title,
.swix-hpc-ready.swix-hpc-enabled-product .product-title,
.swix-hpc-ready.swix-hpc-enabled-product .product-grid-item-title {
    position: relative !important;
    z-index: 20 !important;
    clear: both !important;
}

.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn-replace,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-bottom-actions,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product-actions {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 10px !important;
    z-index: 80 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(8px) !important;
    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.24s ease !important;
    pointer-events: none !important;
}

.swix-hpc-ready.swix-hpc-enabled-product:hover .product-element-top .wd-add-btn,
.swix-hpc-ready.swix-hpc-enabled-product:hover .product-element-top .wd-add-btn-replace,
.swix-hpc-ready.swix-hpc-enabled-product:hover .product-element-top .wd-bottom-actions,
.swix-hpc-ready.swix-hpc-enabled-product:hover .product-element-top .product-actions,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .product-element-top .wd-add-btn,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .product-element-top .wd-add-btn-replace,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .product-element-top .wd-bottom-actions,
.swix-hpc-ready.swix-hpc-enabled-product.is-swix-touch-hover .product-element-top .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn a,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn button,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .add_to_cart_button,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product_type_variable,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product_type_simple,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .single_add_to_cart_button,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top a[href*="add-to-cart"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: 100% !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 9px 18px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.88) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease !important;
}

.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn a:hover,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn button:hover,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .add_to_cart_button:hover,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product_type_variable:hover,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product_type_simple:hover,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .single_add_to_cart_button:hover,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top a[href*="add-to-cart"]:hover {
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
    transform: translateY(-1px) !important;
}

.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn a.loading,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .add_to_cart_button.loading {
    opacity: 0.82 !important;
    cursor: wait !important;
}

.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn a.added,
.swix-hpc-ready.swix-hpc-enabled-product .product-element-top .add_to_cart_button.added {
    background: #222222 !important;
}

@media (max-width: 768px) {
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn-replace,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-bottom-actions,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product-actions {
        bottom: 8px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) !important;
        pointer-events: auto !important;
    }

    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn a,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .wd-add-btn button,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .add_to_cart_button,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product_type_variable,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .product_type_simple,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top .single_add_to_cart_button,
    .swix-hpc-ready.swix-hpc-enabled-product .product-element-top a[href*="add-to-cart"] {
        min-width: 96px !important;
        min-height: 32px !important;
        padding: 8px 14px !important;
        font-size: 11px !important;
    }
}