/* ==========================================================================
   1. Image Clarity & Smoothing
   ========================================================================= */
.woocommerce img,
.woocommerce div.product div.images img,
.product-addon img,
.variable-item img,
.wc-pao-addon-image-swatch img {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==========================================================================
   2. IMAGE SWATCHES ONLY: Sizing & Hover Zoom (Add-ons + Attributes)
   ========================================================================= */

/* Target strictly image swatches for WooCommerce Add-ons & Attribute Images */
.wc-pao-addon-image-swatch,
.variable-items-wrapper .variable-item.image-variable-item {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    border-radius: 6px !important;
    margin: 6px !important;
    overflow: visible !important;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
}

/* Force inner images to fill square bounds */
.wc-pao-addon-image-swatch img,
.variable-items-wrapper .variable-item.image-variable-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

/* Hover-zoom effect ONLY for image swatches */
.wc-pao-addon-image-swatch:hover,
.variable-items-wrapper .variable-item.image-variable-item:hover {
    transform: scale(1.6) !important;
    z-index: 999 !important;
    position: relative !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important;
}

/* Selected state for image swatches */
.wc-pao-addon-image-swatch.selected,
.wc-pao-addon-image-swatch.active,
.variable-items-wrapper .variable-item.image-variable-item.selected {
    border: 3px solid #0073aa !important;
    transform: scale(1.05) !important;
}

/* ==========================================================================
   Complete Override for Product Add-ons Price Column Stacking
   ========================================================================= */

/* 1. Reset container display modes */
.product-addon-totals,
#product-addons-total,
.wc-pao-addon-container,
.product-addon-totals table,
#product-addons-total table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

/* 2. Force price cells & price wrappers to stay on a single line */
#product-addons-total .amount,
#product-addons-total .wc-pao-addon-price,
#product-addons-total td:last-child,
#product-addons-total th:last-child,
.product-addon-totals .amount,
.product-addon-totals td:last-child,
.wc-pao-addon-container .amount {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    display: inline-block !important;
    min-width: 100px !important;
    width: auto !important;
    text-align: right !important;
}

/* 3. Prevent the currency symbol ($) from snapping to its own line */
#product-addons-total .woocommerce-Price-currencySymbol,
.product-addon-totals .woocommerce-Price-currencySymbol {
    display: inline !important;
    white-space: nowrap !important;
    float: none !important;
}

/* 4. Ensure label side flexes properly if using flexbox layouts */
#product-addons-total tr,
.product-addon-totals tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}