/**
 * Custom WooCommerce Icon Replacement CSS
 * Fallback method to replace WooCommerce cart icons with custom SVG
 */

/* Hide default WooCommerce cart icons */
.wc-block-mini-cart__icon {
    opacity: 0 !important;
    position: relative !important;
}

/* Add custom cart icon as background using mask */
.wc-block-mini-cart__icon {
    mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.9976 1C7.9578 1 6.2746 2.52684 6.02855 4.5H5.02229C5.27315 1.97334 7.40493 0 9.9976 0C12.759 0 14.9976 2.23858 14.9976 5V6.5H18.5472L19.796 20H0.199219L1.44797 6.5H2.44868L2.36126 7.5H2.35974L1.29599 19H18.6992L17.6355 7.5H14.986C14.8195 9.83358 12.8736 11.675 10.4976 11.675H4.9976V6.5H13.9976V5C13.9976 2.79086 12.2067 1 9.9976 1ZM13.9827 7.5H5.9976V10.675H10.4976C12.321 10.675 13.8188 9.28063 13.9827 7.5Z' fill='currentColor'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.9976 1C7.9578 1 6.2746 2.52684 6.02855 4.5H5.02229C5.27315 1.97334 7.40493 0 9.9976 0C12.759 0 14.9976 2.23858 14.9976 5V6.5H18.5472L19.796 20H0.199219L1.44797 6.5H2.44868L2.36126 7.5H2.35974L1.29599 19H18.6992L17.6355 7.5H14.986C14.8195 9.83358 12.8736 11.675 10.4976 11.675H4.9976V6.5H13.9976V5C13.9976 2.79086 12.2067 1 9.9976 1ZM13.9827 7.5H5.9976V10.675H10.4976C12.321 10.675 13.8188 9.28063 13.9827 7.5Z' fill='currentColor'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    background-color: currentColor;
    opacity: 1 !important;
}

/* Fallback for browsers that don't support mask */
@supports not (mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.9976 1C7.9578 1 6.2746 2.52684 6.02855 4.5H5.02229C5.27315 1.97334 7.40493 0 9.9976 0C12.759 0 14.9976 2.23858 14.9976 5V6.5H18.5472L19.796 20H0.199219L1.44797 6.5H2.44868L2.36126 7.5H2.35974L1.29599 19H18.6992L17.6355 7.5H14.986C14.8195 9.83358 12.8736 11.675 10.4976 11.675H4.9976V6.5H13.9976V5C13.9976 2.79086 12.2067 1 9.9976 1ZM13.9827 7.5H5.9976V10.675H10.4976C12.321 10.675 13.8188 9.28063 13.9827 7.5Z' fill='currentColor'/%3E%3C/svg%3E")) {
    .wc-block-mini-cart__icon {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.9976 1C7.9578 1 6.2746 2.52684 6.02855 4.5H5.02229C5.27315 1.97334 7.40493 0 9.9976 0C12.759 0 14.9976 2.23858 14.9976 5V6.5H18.5472L19.796 20H0.199219L1.44797 6.5H2.44868L2.36126 7.5H2.35974L1.29599 19H18.6992L17.6355 7.5H14.986C14.8195 9.83358 12.8736 11.675 10.4976 11.675H4.9976V6.5H13.9976V5C13.9976 2.79086 12.2067 1 9.9976 1ZM13.9827 7.5H5.9976V10.675H10.4976C12.321 10.675 13.8188 9.28063 13.9827 7.5Z' fill='currentColor'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        opacity: 1 !important;
    }
}

/* Ensure the button maintains its size and positioning */
.wc-block-mini-cart__button {
    position: relative;
}

/* Target specific WooCommerce icon classes */
.wc-block-mini-cart__icon svg {
    opacity: 0 !important;
}

/* Alternative approach: replace the entire icon element */
.wc-block-mini-cart__icon:not([data-pandora-replaced]) {
    position: relative;
}

.wc-block-mini-cart__icon:not([data-pandora-replaced])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.9976 1C7.9578 1 6.2746 2.52684 6.02855 4.5H5.02229C5.27315 1.97334 7.40493 0 9.9976 0C12.759 0 14.9976 2.23858 14.9976 5V6.5H18.5472L19.796 20H0.199219L1.44797 6.5H2.44868L2.36126 7.5H2.35974L1.29599 19H18.6992L17.6355 7.5H14.986C14.8195 9.83358 12.8736 11.675 10.4976 11.675H4.9976V6.5H13.9976V5C13.9976 2.79086 12.2067 1 9.9976 1ZM13.9827 7.5H5.9976V10.675H10.4976C12.321 10.675 13.8188 9.28063 13.9827 7.5Z' fill='currentColor'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}