/**
 * Restores the close button of the Quick View modal.
 *
 * YITH changed the button's markup: it used to be `<a id="yith-quick-view-close">`,
 * and is now `<a class="yith-quick-view-close">` wrapping an inline SVG with no
 * width or height. Both the theme's styling (style.css) and the plugin's own
 * are still written against the id, so nothing matched at all — and an SVG with
 * a viewBox but no intrinsic size stretches to its container's width, which is
 * how the cross ended up roughly 800px tall, filling the top of the modal and
 * pushing the product out of view.
 *
 * The rules below are the theme's own close-button styling, re-pointed at the
 * class. The SVG is hidden rather than resized so the button looks like every
 * other close button in the theme, which draws its cross from pseudo-elements.
 */
/*
 * Positioned with logical properties: the theme's own rule pins the button to
 * the right in style.css and to the left in style-rtl.css, and `inset-inline-end`
 * lands on the same corner in both without a second rule to keep in sync.
 */
#yith-quick-view-modal .yith-quick-view-close {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    font-size: 0;
    line-height: 0;
    text-align: center;
    background-color: var(--main-color);
    /*
     * Carried over from the theme's own rule. The button sits in a static
     * container ahead of the product content, so positioned elements further
     * down the modal — the gallery slider, the zoom layer, the swatches —
     * would paint over it on equal stacking.
     */
    z-index: 2;
}

#yith-quick-view-modal .yith-quick-view-close:hover {
    background-color: var(--main-color-2);
}

#yith-quick-view-modal .yith-quick-view-close svg {
    display: none;
}

#yith-quick-view-modal .yith-quick-view-close:before,
#yith-quick-view-modal .yith-quick-view-close:after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 1px;
    background-color: #fff;
    transform: rotate(45deg);
}

#yith-quick-view-modal .yith-quick-view-close:after {
    transform: rotate(-45deg);
}